syntec3-0-ui-components-test 1.0.0

package/src/components/customTable/components/headerOperation/index.vue

@@ -0,0 +1,136 @@
+<template>
+  <div
+    class="header-buttons-container"
+    :class="`buttons-position-${position}`"
+    :data-test-id="`${dataTestId}-DIV-eobZrN`"
+  >
+    <div
+      v-for="(button, index) in buttons"
+      :key="button.key"
+      class="header-button-item"
+      :data-test-id="`${dataTestId}-DIV-Y656ZM-${index}`"
+    >
+      <!-- 普通按钮 -->
+      <el-button
+        v-if="!button.dropdownItems"
+        :class="!button.link ? 'margin_right_1rem' : ''"
+        :type="button.type || 'primary'"
+        :plain="button.plain || false"
+        :round="button.round || false"
+        :circle="button.circle || false"
+        :link="button.link || false"
+        :size="button.size"
+        :data-test-id="`${dataTestId}-EL-BUTTON-mi1dnO-${index}`"
+        :loading="button.loading || false"
+        @click="button.func()"
+      >
+        <v-icon
+          v-if="button.icon"
+          :class="button.icon"
+          style="margin-right: 0.25rem"
+          :data-test-id="`${dataTestId}-V-ICON-GpCo9D-${index}`"
+        />
+        <template v-if="!button.circle && button.label">
+          {{ button.label }}
+        </template>
+      </el-button>
+      <!-- 下拉按钮 -->
+      <el-dropdown
+        v-else
+        ref="dropdownRef"
+        :hide-on-click="false"
+        trigger="click"
+        :data-test-id="`${dataTestId}-EL-DROPDOWN-WliCoC-${index}`"
+      >
+        <el-button
+          :type="button.type || 'primary'"
+          :plain="button.plain || false"
+          :round="button.round || false"
+          :circle="button.circle || false"
+          :link="button.link || false"
+          :size="button.size"
+          :data-test-id="`${dataTestId}-EL-BUTTON-0bdOsM-${index}`"
+          :loading="button.loading || false"
+        >
+          <v-icon
+            v-if="button.icon"
+            :class="button.icon"
+            style="margin-right: 0.5rem"
+            :data-test-id="`${dataTestId}-V-ICON-gQZNcf-${index}`"
+          />
+          {{ button.label }}
+          <!-- <v-icon v-if="!button.circle" class="mdi mdi-chevron-down" style="margin-left: 0.25rem"></v-icon> -->
+        </el-button>
+        <template #dropdown>
+          <el-dropdown-menu :data-test-id="`${dataTestId}-EL-DROPDOWN-MENU-ZwOGul-${index}`">
+            <el-dropdown-item
+              v-for="(item, index) in button.dropdownItems"
+              :key="item.key"
+              :data-test-id="`${dataTestId}-EL-DROPDOWN-ITEM-QbT4TZ-${index}`"
+            >
+              <el-button
+                :data-test-id="`${dataTestId}-EL-BUTTON-B8WbcZ-${index}`"
+                :type="item.type || 'primary'"
+                :plain="item.plain || false"
+                :round="item.round || false"
+                :link="item.link || false"
+                :size="item.size"
+                :loading="item.loading || false"
+                @click="item.func()"
+              >
+                <v-icon
+                  v-if="item.icon"
+                  :class="item.icon"
+                  style="margin-right: 0.25rem"
+                  :data-test-id="`${dataTestId}-V-ICON-lmPYuR-${index}`"
+                />
+                <template v-if="!item.circle && item.label">
+                  {{ item.label }}
+                </template>
+              </el-button>
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+defineProps({
+  buttons: {
+    type: Array,
+    required: true,
+    default: () => [],
+  },
+  position: {
+    type: String,
+    default: 'left', // 默认为居左
+    validator: (value) => {
+      // 验证位置值必须是以下三个之一
+      return ['left', 'center', 'right'].includes(value);
+    },
+  },
+  dataTestId: String,
+});
+const dropdownRef = ref(null);
+</script>
+
+<style scoped>
+.header-buttons-container {
+  display: flex;
+  padding: 1rem;
+  justify-content: flex-end;
+  box-sizing: border-box;
+}
+
+.header-button-item {
+  display: flex;
+  align-items: center;
+}
+.margin_right_1rem {
+  margin-right: 1rem;
+}
+</style>

package/src/components/customTable/components/headerTabs/index.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="view-manager-container" :data-test-id="`${dataTextId}-DIV-XGm3Sf`">
+    <!-- 视图标签页 -->
+    <viewTabs
+      ref="viewTabsRef"
+      :key="permissionData.viewId"
+      :tabs="allViewTabs"
+      :view-type="true"
+      :view-id-from-list="null"
+      :select-options="selectOptions"
+      :data-test-id="`${dataTextId}-VIEWTABS-7oMOT6`"
+      @tab-update="handleTabUpdate"
+      @open-view-drawer="openViewListDrawer"
+      @tabClick="handleTabClick"
+      @open-log-drawer="openViewRecordDrawer"
+    />
+    <!-- 视图列表抽屉 -->
+    <viewList
+      ref="viewListRef"
+      :permission-data="permissionData"
+      :select-options="selectOptions"
+      :data-test-id="`${dataTextId}-VIEWLIST-cyMJsA`"
+      :default-create-time-string="defaultCreateTimeString"
+      @update-view-tabs="updateViewTabs"
+    />
+    <!-- 视图操作记录抽屉 -->
+    <viewRecord ref="viewRecordRef" :page-data="permissionData" :data-test-id="`${dataTextId}-VIEWRECORD-2RlrfD`" />
+    <!-- 视图创建/编辑/复制抽屉 -->
+    <createView
+      ref="createViewRef"
+      :permission-data="permissionData"
+      :select-options="selectOptions"
+      :data-test-id="`${dataTextId}-CREATEVIEW-uTu1Xa`"
+      :default-create-time-string="defaultCreateTimeString"
+      @updataView="handleTabUpdate"
+    />
+  </div>
+</template>
+<script setup>
+import { ref, onMounted } from 'vue';
+import viewTabs from '../../../Layout/modules/viewFile/viewTabs.vue';
+import viewList from '../../../Layout/modules/viewFile/viewList.vue';
+import viewRecord from '../../../Layout/modules/viewFile/viewRecord.vue';
+import createView from '../../../Layout/modules/viewFile/createView.vue';
+import apiFunction from '@/scriptFiles/checkApiErrorMechanism.js';
+import { ElMessage } from 'element-plus';
+import { useI18n } from 'vue-i18n';
+const { t } = useI18n();
+
+// Props
+const props = defineProps({
+  permissionData: {
+    type: Object,
+    default: () => ({}),
+  },
+  selectOptions: {
+    type: Object,
+    default: () => ({}),
+  },
+  dataTextId: String,
+  defaultCreateTimeString: {
+    type: String,
+    default: 'createTime',
+  },
+});
+// Emits
+const emit = defineEmits(['update:permissionData']);
+// Refs
+const viewTabsRef = ref(null);
+const viewListRef = ref(null);
+const viewRecordRef = ref(null);
+const createViewRef = ref(null);
+// 视图标签列表（内部管理）
+const allViewTabs = ref([]);
+
+// 获取视图标签列表
+const getViewTabs = async () => {
+  try {
+    const res = await apiFunction.getViewOnlyReadList({
+      permissionCode: props.permissionData.permissionCode,
+    });
+    if (res.data?.code === 0) {
+      allViewTabs.value = [...res.data.content];
+      return res.data.content;
+    } else {
+      ElMessage.error(t(res.data.message));
+    }
+  } catch (error) {
+    ElMessage.error('获取视图标签列表失败');
+  }
+};
+
+// 处理标签页更新
+const handleTabUpdate = () => {
+  // 重新获取视图列表
+  getViewTabs();
+};
+
+// 打开视图列表抽屉
+const openViewListDrawer = () => {
+  if (viewListRef.value) {
+    viewListRef.value.open();
+  }
+};
+
+// 处理标签页点击
+const handleTabClick = (data, type) => {
+  // 处理编辑/复制视图及常规切换逻辑
+  if (type === 0 || type === 2) {
+    // 编辑或复制视图逻辑 - 直接打开createView组件
+    if (createViewRef.value) {
+      // type: 0=编辑, 2=复制
+      createViewRef.value.open(data, type === 2);
+    }
+  } else {
+    // 直接调用emit，不等待其他操作
+    emit('update:permissionData', {
+      ...props.permissionData,
+      viewId: data,
+    });
+  }
+};
+
+// 打开视图记录抽屉
+const openViewRecordDrawer = () => {
+  if (viewRecordRef.value) {
+    viewRecordRef.value.open();
+  }
+};
+
+// 更新视图标签
+const updateViewTabs = (newTabOrderList, viewId) => {
+  // 更新本地视图标签列表
+  allViewTabs.value = [...newTabOrderList];
+  // 如果有新的视图ID，更新permissionData
+  if (viewId) {
+    emit('update:permissionData', {
+      ...props.permissionData,
+      viewId: viewId,
+    });
+  }
+  // 重新获取最新的视图列表
+  getViewTabs();
+};
+
+// 组件挂载时执行
+onMounted(() => {
+  // 获取视图标签列表
+  getViewTabs();
+});
+
+defineExpose({
+  // 打开视图列表抽屉
+  openViewList: () => {
+    openViewListDrawer();
+  },
+  // 打开视图操作记录抽屉
+  openViewRecord: () => {
+    openViewRecordDrawer();
+  },
+});
+</script>
+
+<style scoped>
+.view-manager-container {
+  width: 100%;
+  height: 100%;
+  padding: 1rem;
+  box-sizing: border-box;
+}
+</style>