syntec3-0-ui-components-test 1.0.0

package/src/components/Layout/modules/viewFile/viewTabs.vue

@@ -0,0 +1,542 @@
+<template>
+  <div class="view-box flex-center" data-test-id="DIV-f6cLWs">
+    <el-tabs
+      v-model="editableTabsValue"
+      type="card"
+      :closable="false"
+      :stretch="false"
+      data-test-id="EL-TABS-hQi8BJ"
+      @tab-click="handleTabClick"
+    >
+      <!-- 遍历所有可编辑标签（保留标签，仅控制过滤条件显示） -->
+      <el-tab-pane
+        v-for="(item, index) in editableTabs"
+        :key="item.id"
+        :label="item.viewName"
+        :name="item.viewName"
+        :data-test-id="`EL-TAB-PANE-yEF1MT-${index}`"
+      >
+        <template #label>
+          <div class="tab-label-container">
+            <el-popover
+              :title="item.id < 0 && (item.viewName === '全部' || item.viewName === 'all') ? t('all') : item.viewName"
+              placement="bottom"
+              width="auto"
+              data-test-id="EL-POPOVER-KqCZyA"
+            >
+              <template #reference>
+                <div class="fixed-width flex-center" data-test-id="DIV-Vgcixm">
+                  <v-icon
+                    :style="{ color: iconColors[Number(item.meta)] }"
+                    class="mdi mdi-book-open-blank-variant"
+                    data-test-id="V-ICON-F6vGIl"
+                  />
+                  <span
+                    class="tab-title"
+                    :style="viewId === item.id ? 'font-weight: 700' : ''"
+                    data-test-id="SPAN-4OpUJc"
+                  >
+                    {{
+                      item.id < 0 && (item.viewName === '全部' || item.viewName === 'all') ? t('all') : item.viewName
+                    }}
+                  </span>
+                </div>
+              </template>
+              <!-- 仅当parsedFilter有效时显示过滤条件 -->
+              <div v-if="isParsedFilterValid(item.parsedFilter)" class="span-box" data-test-id="DIV-BiX4o2">
+                <div style="margin-bottom: 5px" data-test-id="DIV-v0zgNe">{{ t('dataFilter') }}</div>
+                <span
+                  v-for="(subArray, subIndex) in item.parsedFilter"
+                  :key="subIndex"
+                  :data-test-id="`SPAN-Y5w6Ny-${subIndex}`"
+                >
+                  <template v-if="subArray.length > 0">
+                    <span
+                      v-for="(field, fieldIndex) in subArray"
+                      :key="fieldIndex"
+                      :data-test-id="`SPAN-RA8qb9-${fieldIndex}`"
+                    >
+                      {{ t(field) || field }}
+                      <span v-if="fieldIndex < subArray.length - 1" data-test-id="SPAN-Zj5s2a">&nbsp;</span>
+                    </span>
+                    <br v-if="subIndex < item.parsedFilter.length - 1" data-test-id="BR-g8bZ8D" />
+                  </template>
+                </span>
+              </div>
+              <!-- parsedFilter无效时显示提示（可选） -->
+              <div v-else class="empty-filter-tip" data-test-id="DIV-5qrLAo" />
+            </el-popover>
+            <!-- 标签操作下拉菜单（始终显示） -->
+            <el-dropdown
+              v-if="viewType"
+              placement="bottom-start"
+              trigger="click"
+              data-test-id="EL-DROPDOWN-S8ReG5"
+              @command="(command) => handleViewOption(item, command)"
+              @click.stop
+            >
+              <span class="mdi mdi-dots-vertical" data-test-id="SPAN-JZNwUC" />
+              <template #dropdown>
+                <el-dropdown-menu data-test-id="EL-DROPDOWN-MENU-lXcUWS">
+                  <el-dropdown-item command="edit" data-test-id="EL-DROPDOWN-ITEM-a8rxXb">
+                    <span class="mdi mdi-pencil" style="margin-right: 0.5rem" data-test-id="SPAN-c8iMHY" />
+                    {{ t('edit') }}
+                  </el-dropdown-item>
+                  <el-dropdown-item command="copy" data-test-id="EL-DROPDOWN-ITEM-cTJWPm">
+                    <span class="mdi mdi-content-copy" style="margin-right: 0.5rem" data-test-id="SPAN-ixzjfp" />
+                    {{ t('copy') }}
+                  </el-dropdown-item>
+                  <el-dropdown-item command="delete" data-test-id="EL-DROPDOWN-ITEM-le8tGS">
+                    <span class="mdi mdi-trash-can" style="margin-right: 0.5rem" data-test-id="SPAN-Ihig61" />
+                    {{ t('delete') }}
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </div>
+        </template>
+      </el-tab-pane>
+    </el-tabs>
+    <!-- 更多视图（保留标签，仅控制过滤条件显示） -->
+    <div v-if="moreTabs.length" class="view-more" data-test-id="DIV-VIE0ym">
+      <el-dropdown trigger="click" placement="bottom-end" data-test-id="EL-DROPDOWN-Y6vrvm">
+        <span data-test-id="SPAN-N2VdKy">
+          <el-button type="text" data-test-id="EL-BUTTON-8gv545">
+            <div class="flex-center" data-test-id="DIV-mCNYU8">
+              <div v-if="!isShowClickTab" class="more-txt" data-test-id="DIV-z5UnfR">{{ t('moreView') }}</div>
+              <div v-else class="more-txt" data-test-id="DIV-54VVVY">
+                {{ clickViewName === 'all' ? t('all') : clickViewName }}
+              </div>
+              <div data-test-id="DIV-YkEYuZ"><span class="mdi mdi-chevron-down" data-test-id="SPAN-OA1DMi" /></div>
+            </div>
+          </el-button>
+        </span>
+        <template #dropdown>
+          <el-dropdown-menu data-test-id="EL-DROPDOWN-MENU-EaVFiu">
+            <el-dropdown-item
+              v-for="(item, index) in moreTabs"
+              :key="item.id"
+              :data-test-id="`EL-DROPDOWN-ITEM-p4mHqG-${index}`"
+              @click="handleTabOperation2(item)"
+            >
+              <el-popover
+                :title="item.id < 0 && (item.viewName === '全部' || item.viewName === 'all') ? t('all') : item.viewName"
+                placement="left"
+                width="aoto"
+                data-test-id="EL-POPOVER-bIn3x3"
+              >
+                <template #reference>
+                  <div class="fixed-width flex-center" data-test-id="DIV-iCwDyl">
+                    <v-icon
+                      :style="{ color: iconColors[item.meta] }"
+                      class="mdi mdi-book-open-blank-variant"
+                      style="margin-right: 0.5rem"
+                      data-test-id="V-ICON-V8uyqx"
+                    />
+                    <span class="tab-title" data-test-id="SPAN-kvDuvy">
+                      {{
+                        item.id < 0 && (item.viewName === '全部' || item.viewName === 'all') ? t('all') : item.viewName
+                      }}
+                    </span>
+                  </div>
+                </template>
+                <!-- 仅当parsedFilter有效时显示过滤条件 -->
+                <div v-if="isParsedFilterValid(item.parsedFilter)" class="span-box" data-test-id="DIV-PgJjLg">
+                  <div style="margin-bottom: 5px" data-test-id="DIV-qlWueE">{{ t('dataFilter') }}</div>
+                  <span
+                    v-for="(subArray, subIndex) in item.parsedFilter"
+                    :key="subIndex"
+                    :data-test-id="`SPAN-gwUPHe-${subIndex}`"
+                  >
+                    <template v-if="subArray.length > 0">
+                      <span
+                        v-for="(field, fieldIndex) in subArray"
+                        :key="fieldIndex"
+                        :data-test-id="`SPAN-Yoke3N-${fieldIndex}`"
+                      >
+                        {{ t(field) || field }}
+                        <span v-if="fieldIndex < subArray.length - 1" data-test-id="SPAN-b69aKz">&nbsp;</span>
+                      </span>
+                      <br v-if="subIndex < item.parsedFilter.length - 1" data-test-id="BR-6bC7S9" />
+                    </template>
+                  </span>
+                </div>
+                <!-- parsedFilter无效时显示提示（可选） -->
+                <div v-else class="empty-filter-tip" data-test-id="DIV-5FYT0D" />
+              </el-popover>
+              <!-- 更多视图操作下拉菜单（始终显示） -->
+              <el-dropdown
+                v-if="viewType"
+                placement="bottom-start"
+                trigger="hover"
+                data-test-id="EL-DROPDOWN-VwI5JN"
+                @command="(command) => handleViewOption(item, command)"
+              >
+                <span class="mdi mdi-dots-vertical" data-test-id="SPAN-88aNbL" />
+                <template #dropdown>
+                  <el-dropdown-menu data-test-id="EL-DROPDOWN-MENU-uB6AzT">
+                    <el-dropdown-item command="edit" data-test-id="EL-DROPDOWN-ITEM-pPx9rh">
+                      <span class="mdi mdi-pencil" style="margin-right: 0.5rem" data-test-id="SPAN-gONTrg" />
+                      {{ t('edit') }}
+                    </el-dropdown-item>
+                    <el-dropdown-item command="copy" data-test-id="EL-DROPDOWN-ITEM-GzG8Jm">
+                      <span class="mdi mdi-content-copy" style="margin-right: 0.5rem" data-test-id="SPAN-N1W2YJ" />
+                      {{ t('copy') }}
+                    </el-dropdown-item>
+                    <el-dropdown-item command="delete" data-test-id="EL-DROPDOWN-ITEM-n2UcqQ">
+                      <span class="mdi mdi-trash-can" style="margin-right: 0.5rem" data-test-id="SPAN-PL9dTd" />
+                      {{ t('delete') }}
+                    </el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </div>
+    <!-- 操作按钮区（始终显示） -->
+    <div v-if="viewType" class="flex-center" data-test-id="DIV-1GGakX">
+      <el-tooltip :content="t('createView')" placement="top" :enterable="false" data-test-id="EL-TOOLTIP-tBu398">
+        <div class="plus-icon" data-test-id="DIV-2LlLoK" @click="emit('openViewDrawer')">
+          <el-button type="text" data-test-id="EL-BUTTON-v7caGb">
+            <span class="mdi mdi-plus" data-test-id="SPAN-vVJa7G" />
+          </el-button>
+        </div>
+      </el-tooltip>
+      <div class="plus-icon flex-center" data-test-id="DIV-7acJL9">
+        <el-tooltip
+          :content="t('viewOperationRecordTxt')"
+          placement="top"
+          :enterable="false"
+          data-test-id="EL-TOOLTIP-QQUw4G"
+        >
+          <el-button type="text" data-test-id="EL-BUTTON-D3QSbJ" @click="emit('openLogDrawer')">
+            <span class="mdi mdi-text-box-check-outline" style="margin-right: 0.5rem" data-test-id="SPAN-4M2L0o" />
+            {{ t('viewOperationRecordTxt') }}
+          </el-button>
+        </el-tooltip>
+      </div>
+    </div>
+
+    <!-- 视图编辑/复制抽屉（始终可用） -->
+    <!-- <ViewAddDrawer
+      v-if="isAddDrawerVisible"
+      v-model="isAddDrawerVisible"
+      :init-data="drawerInitData"
+      data-test-id="VIEWADDDRAWER-dsvnJb"
+      @view-saved="handleViewSaved"
+      @update:modelValue="isAddDrawerVisible = $event"
+    /> -->
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, nextTick } from 'vue';
+import { useI18n } from 'vue-i18n';
+// import ViewAddDrawer from './viewAddDrawer.vue';
+import apiFunction from '@/scriptFiles/checkApiErrorMechanism';
+import { ElMessageBox, ElMessage } from 'element-plus';
+import { processFilterData } from './viewManageTool.js';
+
+const { t } = useI18n();
+
+// 接收父组件参数
+const props = defineProps({
+  pageData: {
+    type: Object,
+    default: () => ({}),
+  },
+  viewType: {
+    type: Boolean,
+    default: false,
+  },
+  viewIdFromList: {
+    type: Number,
+    default: null,
+  },
+  tabs: {
+    type: Array,
+    required: true,
+    default: () => [],
+  },
+  selectOptions: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+// 暴露事件给父组件
+const emit = defineEmits(['openViewDrawer', 'openLogDrawer', 'tabUpdate', 'tabClick']);
+
+// 响应式数据
+const viewId = ref(''); // 视图id
+const isShowClickTab = ref(false);
+const clickViewName = ref('');
+const iconColors = ref(['#125088', '#FF0000', '#F0D155', '#99C0E4', '#FF7A21', '#323338', '#34AA1A']);
+const editableTabs = ref([]); // 保留所有可编辑标签
+const moreTabs = ref([]); // 保留所有更多标签
+const editableTabsValue = ref('');
+const drawerInitData = ref(null);
+const isEditing = ref(false); // 区分操作类型
+
+// 校验parsedFilter是否有效（核心工具函数）
+const isParsedFilterValid = (parsedFilter) => {
+  return (
+    Array.isArray(parsedFilter) &&
+    parsedFilter.length > 0 &&
+    parsedFilter.some((subArr) => Array.isArray(subArr) && subArr.length > 0)
+  );
+};
+
+// 标签点击事件
+function handleTabClick(tab) {
+  isShowClickTab.value = false;
+  clickViewName.value = '';
+  // 获取当前激活的标签名
+  let tabName = tab.paneName;
+  // 如果 paneName 是 ComputedRefImpl，获取它的值
+  if (tabName && typeof tabName.value !== 'undefined') {
+    tabName = tabName.value;
+  }
+  // 使用 tabName 查找标签项
+  const clickedTab = editableTabs.value.find((item) => item.viewName === tabName);
+
+  if (clickedTab) {
+    editableTabsValue.value = clickedTab.viewName;
+    viewId.value = clickedTab.id;
+    nextTick(() => {
+      emit('tabClick', viewId.value, 1);
+    });
+  } else {
+    ElMessage.error(t('tabNotFound'));
+  }
+}
+
+// 更多视图点击事件
+function handleTabOperation2(tabItem) {
+  isShowClickTab.value = true;
+  clickViewName.value =
+    tabItem.id < 0 && (tabItem.viewName === '全部' || tabItem.viewName === 'all') ? 'all' : tabItem.viewName;
+  viewId.value = tabItem.id;
+  editableTabsValue.value = ''; //清空激活项
+  nextTick(() => {
+    emit('tabClick', viewId.value, 1);
+  });
+}
+
+// 删除视图接口调用
+async function doDeleteOperation(id) {
+  await apiFunction
+    .deleteView(id)
+    .then((res) => {
+      if (res.data?.code === 0) {
+        // 如果删除的是当前显示的更多视图，重置状态
+        if (isShowClickTab.value && viewId.value === id) {
+          isShowClickTab.value = false;
+          clickViewName.value = '';
+        }
+        emit('tabUpdate');
+      } else {
+        ElMessage.error(t(res.data.message));
+      }
+    })
+    .catch(() => {
+      ElMessage.error(t('apiError'));
+    });
+}
+
+// 标签操作（编辑/复制/删除）
+function handleViewOption(tabItem, command) {
+  switch (command) {
+    case 'edit':
+      isEditing.value = true;
+      drawerInitData.value = {
+        mode: 'edit',
+        data: { ...tabItem },
+        permissionCode: props.pageData.permissionCode,
+        docCode: props.pageData.docCode,
+      };
+      nextTick(() => {
+        // 编辑相关操作
+        // emit('tabClick', tabItem.id, 'edit');
+        emit('tabClick', tabItem.id, 0, props.selectOptions);
+      });
+      break;
+
+    case 'copy':
+      drawerInitData.value = {
+        mode: 'copy',
+        data: {
+          ...tabItem,
+          name: `${t('copy')}${tabItem.name}`,
+        },
+        permissionCode: props.pageData.permissionCode,
+        docCode: props.pageData.docCode,
+      };
+      nextTick(() => {
+        // 复制相关操作
+        // emit('tabClick', tabItem.id, 'copy');
+        emit('tabClick', tabItem.id, 2, props.selectOptions);
+      });
+      break;
+
+    case 'delete':
+      ElMessageBox.confirm(t('viewDeleteTip'), t('delReminder'), {
+        type: 'warning',
+        confirmButtonText: t('confirm'),
+        cancelButtonText: t('cancel'),
+      })
+        .then(async () => {
+          await doDeleteOperation(tabItem.id);
+        })
+        .catch(() => {
+          return;
+        });
+      break;
+  }
+}
+
+function getEditableTabsValue() {
+  const foundInArray1 = editableTabs.value.find((item) => item.id === viewId.value);
+  if (foundInArray1) {
+    editableTabsValue.value = foundInArray1.viewName;
+    isShowClickTab.value = false;
+    clickViewName.value = '';
+  } else {
+    // 如果在第一个数组没找到，在第二个数组中查找
+    const foundInArray2 = moreTabs.value.find((item) => item.id === viewId.value);
+    if (foundInArray2) {
+      isShowClickTab.value = true;
+      clickViewName.value =
+        foundInArray2.id < 0 && (foundInArray2.viewName === '全部' || foundInArray2.viewName === 'all')
+          ? 'all'
+          : foundInArray2.viewName;
+    }
+  }
+}
+
+// 监听父组件tabs变化，仅解析不过滤标签
+watch(
+  () => props.tabs,
+  (newTabs) => {
+    const safeTabs = Array.isArray(newTabs) ? newTabs : [];
+    // 1. 拆分标签（保留所有标签，不过滤）
+    if (safeTabs.length > 6) {
+      editableTabs.value = processFilterData(safeTabs.slice(0, 6)); // 仅解析，不过滤
+      moreTabs.value = processFilterData(safeTabs.slice(6)); // 仅解析，不过滤
+    } else {
+      editableTabs.value = processFilterData(safeTabs); // 仅解析，不过滤
+      moreTabs.value = [];
+    }
+    if (props.viewIdFromList) {
+      isEditing.value = true;
+      viewId.value = props.viewIdFromList;
+    }
+    // 2. 根据操作类型设置激活标签
+    if (isEditing.value) {
+      // 编辑操作：保持当前tab不变
+      isEditing.value = false; // 重置标志位
+      nextTick(() => {
+        getEditableTabsValue();
+        emit('tabClick', viewId.value, 'refresh');
+      });
+    } else {
+      // 检查当前选中的视图是否还存在
+      const currentViewExists = safeTabs.some((item) => item.id === viewId.value);
+      if (currentViewExists) {
+        // 如果当前选中的视图还存在，保持选中状态
+        nextTick(() => {
+          getEditableTabsValue();
+        });
+      } else {
+        // 其他操作：重置到第一个tab
+        isShowClickTab.value = false;
+        clickViewName.value = '';
+        editableTabsValue.value = safeTabs.length > 0 ? safeTabs[0].viewName : '';
+        viewId.value = safeTabs.length > 0 ? safeTabs[0]?.id : 0;
+        nextTick(() => {
+          emit('tabClick', viewId.value);
+        });
+      }
+    }
+  },
+  { deep: true, immediate: true },
+);
+
+// 视图保存后通知父组件刷新
+// function handleViewSaved() {
+//   // eslint-disable-next-line vue/custom-event-name-casing
+//   emit('tab-update');
+// }
+</script>
+
+<style scoped>
+.flex-center {
+  display: flex;
+  align-items: center;
+}
+
+.view-box {
+  overflow-x: auto;
+}
+
+.view-box :deep(.el-tabs) {
+  max-width: 80%;
+  overflow: hidden;
+}
+
+.view-more {
+  margin-left: 20px;
+  margin-top: -15px;
+}
+
+.more-txt {
+  max-width: 80px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.plus-icon {
+  margin-left: 20px;
+  margin-top: -15px;
+}
+
+.fixed-width {
+  width: 100px;
+  box-sizing: border-box;
+}
+
+.tab-title {
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  margin-left: 5px;
+  width: 75px;
+  text-align: center;
+}
+
+/* 新增：标签容器样式 */
+.tab-label-container {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+/* 空过滤条件提示样式 */
+.empty-filter-tip {
+  color: #999;
+  font-size: 12px;
+  padding: 4px 0;
+}
+
+.span-box span:first-child {
+  color: #909399;
+  margin-right: 5px;
+}
+
+:deep(.el-dropdown-menu__item) {
+}
+</style>

package/src/components/Layout/tools/GlobalDialog.vue

@@ -0,0 +1,115 @@
+<template>
+  <el-dialog
+    v-model="showDialog"
+    :before-close="dialogOptions.beforeClose"
+    :width="`${dialogOptions.width}%`"
+    :close-on-click-modal="closeOnClickModal"
+    :btn_array="dialogOptions.btns"
+    :scope="dialogOptions.scope"
+    :append-to-body="true"
+    :modal-append-to-body="true"
+    center
+    align-center
+    class="globalDialog"
+    style="border-radius: 6px"
+    data-test-id="EL-DIALOG-cQVOLz"
+    @optionClick="optionClick"
+  >
+    <template #header>
+      {{ $t(dialogOptions.title) }}
+    </template>
+    <div :style="{ height: defHeight + 'rem' }" data-test-id="DIV-9zutsg">
+      <div class="bodydivcontent" data-test-id="DIV-KWYRpI">
+        <slot />
+      </div>
+    </div>
+    <template v-if="!dialogOptions.isReadonly" #footer>
+      <div v-if="!dialogOptions.customFooter" class="dialog-footer" data-test-id="DIV-YsulBT">
+        <el-button
+          v-show="!dialogOptions.detail && !loading"
+          type="primary"
+          data-test-id="EL-BUTTON-atr1gR"
+          @click="dialogEvent('submit')"
+          >{{ $t('confirm') }}
+        </el-button>
+        <el-button
+          v-show="!dialogOptions.detail && loading"
+          type="primary"
+          :loading="loading"
+          data-test-id="EL-BUTTON-Kjdhyk"
+          @click="dialogEvent('submit')"
+          >{{ $t('confirm') }}
+        </el-button>
+        <!-- <el-button style="color: #595959" @click="dialogEvent('close')">{{ $t('cancel') }}</el-button> -->
+      </div>
+      <span v-else class="dialog-footer" data-test-id="SPAN-bKKXSO">
+        <slot name="footer" />
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+// eslint-disable-next-line vue/valid-define-emits
+const emit = defineEmits();
+const props = defineProps({
+  dialogOptions: {
+    type: Object,
+    required: true,
+    width: {
+      type: String,
+      default: '30%',
+    },
+    title: {
+      type: String,
+      default: '标题',
+    },
+    appendBody: {
+      type: Boolean,
+      default: false,
+    },
+    dialogStatus: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
+    isReadonly: {
+      type: Boolean,
+      default: false,
+    },
+  },
+});
+const loading = ref(false);
+const closeOnClickModal = ref(false);
+const defHeight = ref(props.dialogOptions.height);
+
+function optionClick(name, obj, btns, scope) {
+  emit(name, obj, btns, scope);
+}
+function dialogEvent(type) {
+  loading.value = true;
+  emit(type);
+  setTimeout(function () {
+    loading.value = false;
+  }, 2000);
+}
+const showDialog = ref(false);
+watch(
+  () => props.dialogOptions.dialogStatus,
+  (val) => {
+    showDialog.value = val;
+  },
+);
+</script>
+
+<style scoped lang="scss">
+.bodydivcontent {
+  height: 100%;
+}
+.dialog-footer {
+  margin: 0 auto;
+  text-align: center;
+  height: 40px;
+}
+</style>