syntec3-0-ui-components-test 1.0.0

package/src/views/production_work_order/index.vue

@@ -0,0 +1,1307 @@
+<template>
+  <workContentVue
+    ref="productionRef"
+    v-model="pageData.dataList"
+    :table-loading="pageData.tableLoading"
+    :table-columns="canEditHeaders"
+    :total="pageData.total"
+    :custom-fields-list="pageData.customFieldsList"
+    permission-code="PMC_101000"
+    :permission-data="permissionData"
+    :select-options="selectOptions"
+    :default-create-time-string="defaultCreateTimeString"
+    :default-sort="{ prop: 'consDate', order: 'descending' }"
+    :top-buttons="topButtons"
+    :auto="false"
+    data-test-id="WORKCONTENTVUE-hIS0ao"
+    :show-summary="true"
+    :summary-method="getSummaries"
+    :selectable="selectable"
+    @columnsSaveData="saveData"
+    @columnsChildSaveData="saveChildData"
+    @reload="onReload"
+    @sortChange="onSortChange"
+    @selectionChange="onSelectionChange"
+    @cellClick="onCellClick"
+    @update:permissionData="handlePermissionDataUpdate"
+    @filterSearch="handleFilterSearch"
+  >
+    <!-- 可以访问row和index -->
+    <!-- 根据数据行状态自定义显示操作按钮 -->
+    <template #tableActions="{ row, index }">
+      <el-tooltip effect="dark" :content="t('edit')" placement="top" :data-test-id="`EL-TOOLTIP-ZRq1eI-${index}`">
+        <el-button link :data-test-id="`EL-BUTTON-JrhNjc-${index}`" @click.stop="handleEdit(row, index)">
+          <v-icon class="mdi mdi-18px mdi-pencil" :data-test-id="`V-ICON-GK3rzB-${index}`" />
+        </el-button>
+      </el-tooltip>
+      <el-tooltip effect="dark" :content="t('add')" placement="top" :data-test-id="`EL-TOOLTIP-YEVWfA-${index}`">
+        <el-button link :data-test-id="`EL-BUTTON-BwYnBQ-${index}`" @click.stop="handleAdd(row, index)">
+          <v-icon class="mdi mdi-18px mdi-plus-circle-outline" :data-test-id="`V-ICON-BGbIod-${index}`" />
+        </el-button>
+      </el-tooltip>
+    </template>
+  </workContentVue>
+</template>
+
+<script setup>
+import { ref, computed, reactive, onMounted, watch, h } from 'vue';
+import { ElMessage } from 'element-plus';
+import { useI18n } from 'vue-i18n';
+import dayjs from 'dayjs';
+import apiFunction from '@/scriptFiles/checkApiErrorMechanism';
+// 组件导入
+import workContentVue from '@/components/customTable/index.vue';
+import priorityTooltip from './components/priorityTooltip.vue';
+const { t } = useI18n();
+const productionRef = ref();
+const pageData = reactive({
+  tableLoading: false, // table加载状态
+  dataList: [], // 当前页table数据
+  total: 0, // 总数
+  columnConfig: [], // 列配置
+  customFieldsList: [],
+  orderSettingList: [
+    {
+      orderSettingID: 5,
+      orderSettingType: 1,
+    },
+    {
+      orderSettingID: 6,
+      orderSettingType: 1,
+    },
+  ], // 自定义排序参数
+  viewId: '', // 视图ID
+});
+const internalColumnConfig = ref([]);
+// 格式化工单状态
+function formatStatus(status) {
+  switch (status) {
+    case 0:
+      return {
+        bgColor: 'grey',
+        textColor: '#eeeeee',
+        text: t('noDispatch'), // 未派工
+      };
+    case 1:
+      return {
+        bgColor: '#1E88E5',
+        textColor: '#E3F2FD',
+        text: t('noStart'), // 未开工
+      };
+    case 2:
+      return {
+        bgColor: '#ffffff',
+        textColor: '#1b9600',
+        text: t('underExecution'), // 已开工
+      };
+    case 3:
+      return {
+        bgColor: '#009688',
+        textColor: '#E0F2F1',
+        text: t('finished'), // 已完工
+      };
+    case 4:
+      return {
+        bgColor: 'grey',
+        textColor: '#eeeeee',
+        text: t('alreadyOverdue'), // 已逾期
+      };
+    case 5:
+      return {
+        bgColor: '#EF5350',
+        textColor: '#FFEBEE',
+        text: t('closed'), // 已关闭
+      };
+    default:
+      break;
+  }
+}
+// 格式化重要排序
+function formatPriority(value) {
+  switch (value) {
+    case 0:
+      return {
+        value, // 最次要
+        icon: 'mdi mdi-chevron-triple-down',
+        color: 'grey',
+        text: t('leastImportant'),
+      };
+    case 1:
+      return {
+        value, // 次要
+        icon: 'mdi mdi-chevron-double-down',
+        color: '#4481b8',
+        text: t('secondary'),
+      };
+    case 2:
+      return {
+        value, // 正常
+        icon: 'mdi mdi-equal',
+        color: 'green',
+        text: t('normal'),
+      };
+    case 3:
+      return {
+        value, // 优先
+        icon: 'mdi mdi-chevron-double-up',
+        color: 'orange',
+        text: t('priority'),
+      };
+    case 4:
+      return {
+        value, // 最优先
+        icon: 'mdi mdi-star-circle',
+        color: 'red',
+        text: t('topPriority'),
+      };
+    default:
+      break;
+  }
+}
+// 固定列配置
+const tableColumns = computed(() => [
+  {
+    text: t('workOrderStatus'),
+    value: 'productionOrderStatus',
+    isFixed: false, // 是否固定列
+    isShown: true, // 是否显示隐藏
+    disabled: false, // 是否禁用
+    freeze: false, // 是否冻结列
+    customizeFields: false,
+    formatterType: 'tags',
+    formatter: (row) => formatStatus(row.productionOrderStatus), // 格式化tag格式的数据项
+  },
+  {
+    text: t('productionOrderNumber'),
+    value: 'productionOrderNumber',
+    isFixed: false,
+    isShown: true,
+    disabled: false,
+    freeze: false,
+    customizeFields: false,
+  },
+  {
+    text: t('partNumber'),
+    value: 'partNumber',
+    isFixed: false,
+    isShown: true,
+    disabled: false,
+    freeze: false,
+    customizeFields: false,
+    // 用于模拟a链接类型的格式化
+    //  link格式化格式: {
+    //    link: '链接地址',
+    //    name: '链接名称，用于列表显示',
+    //  }
+    //  如果没有name则显示link，如果都没有则显示占位符
+    // formatterType: 'link',
+    // formatter: () => {
+    //   return {
+    //     link: 'https://gitee.com/',
+    //     name: 'gitee.com',
+    //     underline: 'always',
+    //     color: '#409eff',
+    //   };
+    // },
+  },
+  {
+    text: t('productName'),
+    value: 'productName',
+    isFixed: false,
+    isShown: true,
+    disabled: false,
+    freeze: false,
+    customizeFields: false,
+  },
+  {
+    text: t('materialCategory'),
+    value: 'materialCategoryName',
+    isFixed: false,
+    isShown: true,
+    disabled: false,
+    freeze: false,
+    customizeFields: false,
+  },
+  {
+    text: t('materialFile'),
+    value: 'productionOrderMaterialFileList',
+    isFixed: false,
+    isShown: true,
+    disabled: false,
+    freeze: false,
+    customizeFields: false,
+    // 用于模拟测试文件类型的格式化
+    // file格式化格式: [{
+    //   file: '文件地址',
+    //   name: '文件名称，用于列表显示',
+    // }]
+    // 如果没有name则显示file，如果都没有则显示占位符
+    formatterType: 'file',
+    formatter: (row) => {
+      return row.productionOrderMaterialFileList.map((elem) => {
+        return {
+          ...elem,
+          name: elem.plmFileName,
+        };
+      });
+    },
+  },
+  {
+    text: t('materialSpec'),
+    value: 'materialSpec',
+    isFixed: false,
+    isShown: true,
+    disabled: false,
+    freeze: false,
+    customizeFields: false,
+  },
+  {
+    text: t('workOrderRequirementsNumber'),
+    value: 'productionOrderRequiredThroughput',
+    isFixed: false,
+    isShown: true,
+    disabled: false,
+    freeze: false,
+    customizeFields: false,
+  },
+  {
+    text: t('craftPath'),
+    value: 'craftPathName',
+    isFixed: false,
+    isShown: true,
+    disabled: false,
+    freeze: false,
+    customizeFields: false,
+  },
+  {
+    text: t('salesOrderNumber'),
+    value: 'orderNumber',
+    isFixed: false,
+    isShown: true,
+    disabled: false,
+    freeze: false,
+    customizeFields: false,
+  },
+  {
+    text: t('sourceOrderType'),
+    value: 'originalOrderType',
+    isFixed: false,
+    isShown: true,
+    disabled: false,
+    freeze: false,
+    customizeFields: false,
+  },
+  {
+    text: t('sourceOrderNo'),
+    value: 'originalOrderNumber',
+    isFixed: false,
+    isShown: true,
+    disabled: false,
+    freeze: false,
+    customizeFields: false,
+  },
+  {
+    text: t('customerNameDigiwin'),
+    value: 'orderDemander',
+    isFixed: false,
+    isShown: true,
+    disabled: false,
+    freeze: false,
+    customizeFields: false,
+  },
+  {
+    text: t('orderExpectedDue'),
+    value: 'orderExpectedDue',
+    isFixed: false,
+    isShown: true,
+    disabled: false,
+    freeze: false,
+    customizeFields: false,
+    minWidth: 160, // 列最小宽度
+    sortable: 'custom', // 自定义排序
+    formatter: (row) => (row.orderExpectedDue ? dayjs(row.orderExpectedDue).format('YYYY-MM-DD') : '--'),
+  },
+  {
+    text: t('startDate'),
+    value: 'productionOrderExpectedStartDate',
+    isFixed: false,
+    isShown: true,
+    disabled: false,
+    freeze: false,
+    customizeFields: false,
+    sortable: 'custom', // 自定义排序
+    minWidth: 140,
+    formatter: (row) =>
+      row.productionOrderExpectedStartDate ? dayjs(row.productionOrderExpectedStartDate).format('YYYY-MM-DD') : '--',
+  },
+  {
+    text: t('finishDate'),
+    value: 'productionOrderExpectedDueDate',
+    isFixed: false,
+    isShown: true,
+    disabled: false,
+    freeze: false,
+    customizeFields: false,
+    sortable: 'custom', // 自定义排序
+    minWidth: 140,
+    formatter: (row) =>
+      row.productionOrderExpectedDueDate ? dayjs(row.productionOrderExpectedDueDate).format('YYYY-MM-DD') : '--',
+  },
+  {
+    text: t('importantSort'),
+    value: 'productionOrderPriority',
+    isFixed: false,
+    isShown: true,
+    disabled: false,
+    freeze: false,
+    customizeFields: false,
+    formatterType: 'icon',
+    formatter: (row) => formatPriority(row.productionOrderPriority),
+    // leftSlot: priorityTooltip, // thead列文本左侧插槽, 根据需求显示组件。
+    rightSlot: priorityTooltip, // thead列文本右侧插槽
+    // columntSlot: priorityTooltip, // tbody列插槽, 根据需求显示组件。如果同时配置formatter和columntSlot则columntSlot优先显示
+  },
+  {
+    text: t('creator'),
+    value: 'consUserName',
+    isFixed: false,
+    isShown: true,
+    disabled: false,
+    freeze: false,
+    customizeFields: false,
+  },
+  {
+    text: t('createTime'),
+    value: 'consDate',
+    isFixed: false,
+    isShown: true,
+    disabled: false,
+    freeze: false,
+    customizeFields: false,
+    sortable: 'custom', // 自定义排序
+    formatter: (row) => (row.consDate ? dayjs(row.consDate).format('YYYY-MM-DD HH:mm:ss') : '--'),
+  },
+  {
+    text: t('updatePerson'),
+    value: 'modiUserName',
+    isFixed: false,
+    isShown: true,
+    disabled: false,
+    freeze: false,
+    customizeFields: false,
+  },
+  {
+    text: t('updateTime'),
+    value: 'modiDate',
+    isFixed: false,
+    isShown: true,
+    disabled: false,
+    freeze: false,
+    customizeFields: false,
+    sortable: 'custom', // 自定义排序
+    formatter: (row) => (row.modiDate ? dayjs(row.modiDate).format('YYYY-MM-DD HH:mm:ss') : '--'),
+  },
+  {
+    text: t('inventoryStorageQuantity'),
+    value: 'inboundQuantity',
+    isFixed: false,
+    isShown: true,
+    disabled: false,
+    freeze: false,
+    customizeFields: false,
+  },
+  {
+    text: t('returnQuantity'),
+    value: 'returnQuantity',
+    isFixed: false,
+    isShown: true,
+    disabled: false,
+    freeze: false,
+    customizeFields: false,
+  },
+  {
+    text: t('inboundRemain'),
+    value: 'inboundRemain',
+    isFixed: false,
+    isShown: true,
+    disabled: false,
+    freeze: false,
+    customizeFields: false,
+  },
+  {
+    text: t('description'),
+    value: 'remark',
+    isFixed: false,
+    isShown: true,
+    disabled: false,
+    freeze: false,
+    customizeFields: false,
+  },
+  {
+    text: t('shutdownReason'),
+    value: 'closeReason',
+    isFixed: false,
+    isShown: false,
+    disabled: false,
+    freeze: false,
+    customizeFields: false,
+  },
+]); // 方法
+
+// 远程table列配置
+function getColumnConfig() {
+  apiFunction
+    .queryColumnSettingNext({
+      displayIds: [101000201],
+    })
+    .then((res) => {
+      if (res.data.code === 0) {
+        const dataList = res.data.content.data;
+        if (dataList[0].displayId === 101000201 && dataList[0].configJson) {
+          pageData.columnConfig = dataList[0].configJson.columnSetting;
+        }
+        // 根据不同情况处理某一项数据列
+        const fIndex = pageData.columnConfig.findIndex((item) => item.columnKey === 'productName');
+        const someFlag = pageData.columnConfig.some((item) => item.columnKey === 'materialCategoryName');
+        if (pageData.columnConfig && pageData.columnConfig.length && !someFlag)
+          pageData.columnConfig.splice(fIndex + 1, 0, {
+            columnKey: 'materialCategoryName',
+            customizeFields: false,
+            disabled: false,
+            fixed: false,
+            freeze: false,
+            isCustom: false,
+            isFixed: false,
+            isShown: true,
+            text: t('materialCategory'),
+            value: 'materialCategoryName',
+          });
+      } else {
+        pageData.columnConfig = [];
+      }
+    })
+    .catch(() => {
+      pageData.columnConfig = [];
+    });
+}
+// 获取表格数据
+async function onReload(params) {
+  try {
+    const paramsData = JSON.parse(JSON.stringify(params));
+    paramsData.orderSettingList = pageData.orderSettingList;
+    pageData.tableLoading = true;
+    paramsData.viewId = pageData.viewId;
+    paramsData.isPc = true;
+    const res = await apiFunction.planFormulationQuery(paramsData);
+    if (res.data.code === 0) {
+      const { data, totalCount } = res.data.content;
+      productionRef.value.complete(data);
+      pageData.total = totalCount;
+    } else {
+      ElMessage.error(res.data.detail || '获取数据失败');
+      pageData.total = 0;
+    }
+  } catch (error) {
+    console.error('加载表格数据失败:', error);
+    ElMessage.error('网络请求失败');
+    pageData.total = 0;
+  } finally {
+    pageData.tableLoading = false;
+  }
+}
+// 自定义排序
+function onSortChange(val) {
+  console.log(val, 333333);
+  const mapping = {
+    productionOrderExpectedStartDate: 3,
+    productionOrderExpectedDueDate: 4,
+    consDate: 6,
+    orderExpectedDue: 7,
+    modiDate: 8,
+  };
+  const orderSettingID = mapping[val.prop];
+  const orderSettingType = val.order === 'descending' ? 1 : 0;
+  if (pageData.orderSettingList.length === 2) {
+    pageData.orderSettingList.splice(1, 1);
+  }
+  if (val.order) {
+    pageData.orderSettingList.push({
+      orderSettingID,
+      orderSettingType,
+    });
+  }
+  productionRef.value.reload();
+}
+const getCustomFields = async () => {
+  const params = {
+    docCode: 'doc_5',
+    status: 1,
+    fieldName: '',
+    consDate: [],
+    startIndex: 0,
+    count: 100,
+  };
+  await apiFunction.querySetting(params).then((res) => {
+    if (res.data.code === 0) {
+      const customFieldData = res.data.content.data.map((ite) => ({
+        ...ite,
+        customFieldName: ite.fieldName,
+        columnKey: ite.fieldName,
+        customFieldId: ite.docCustomId,
+        isCustom: true,
+        isFixed: false,
+        isShown: true,
+        disabled: false,
+        freeze: false,
+        customizeFields: true,
+      }));
+      pageData.customFieldsList = customFieldData.map((item) => ({
+        ...item,
+        text: item.customFieldName,
+        columnKey: item.customFieldName,
+        align: 'index',
+        sortable: false,
+        value: item.customFieldId,
+        class: 'parentTabColor white--text',
+        width: '170px',
+        customFieldId: item.docCustomId,
+        fieldTypeId: item.fieldTypeId,
+      }));
+    }
+  });
+};
+// 行选中数据
+function onSelectionChange(e) {
+  console.log(e);
+}
+// 单元格点击事件，返回row和cell
+function onCellClick(e) {
+  console.log(e);
+}
+// 操作列-编辑
+function handleEdit(row, index) {
+  console.log('edit', index, row);
+}
+// 操作列-新增
+function handleAdd(row, index) {
+  console.log('add', index, row);
+}
+// 合并列格式化
+const getSummaries = (param) => {
+  const { columns, data } = param;
+  const sums = [];
+  columns.forEach((column, index) => {
+    if (index === 0) {
+      sums[index] = h('div', {}, ['合计']);
+      return;
+    }
+    const values = data.map((item) => Number(item[column.property]));
+    if (!values.every((value) => Number.isNaN(value)) && column.rawColumnKey === 'productionOrderRequiredThroughput') {
+      sums[index] = `${values.reduce((prev, curr) => {
+        const value = Number(curr);
+        if (!Number.isNaN(value)) {
+          return prev + curr;
+        } else {
+          return prev;
+        }
+      }, 0)}`;
+    }
+  });
+
+  return sums;
+};
+// 选择列禁用规则
+const selectable = (row) => row.productionOrderStatus !== 5;
+const canEditHeaders = computed(() => {
+  const allHeaderList = [
+    ...tableColumns.value.map((item) => ({
+      ...item,
+      isCustom: false,
+      columnKey: item.text,
+    })),
+    ...pageData.customFieldsList.map((item) => ({
+      ...item,
+      columnKey: item.fieldName,
+      isCustom: true,
+    })),
+  ];
+  const list = [];
+  if (!internalColumnConfig.value?.length) {
+    return allHeaderList;
+  }
+  const notExistsList = [];
+  allHeaderList.forEach((ite) => {
+    const filterItem = internalColumnConfig.value.find((el) => el.value === ite.value);
+    if (filterItem) {
+      list.push({
+        ...ite,
+        order: filterItem.order,
+        fixed: filterItem.freeze,
+        freeze: filterItem.freeze,
+        isFixed: filterItem.freeze,
+        disabled: false,
+        isShown: filterItem.isShown,
+      });
+    } else {
+      notExistsList.push({
+        ...ite,
+        fixed: false, // 是否固定列
+        freeze: false, // 是否冻结列
+        disabled: false, // 是否禁用
+        isShown: false, // 是否显示隐藏
+      });
+    }
+  });
+  return [...list.sort((a, b) => a.order - b.order), ...notExistsList];
+});
+const saveData = async (val) => {
+  const list = val.map((item, index) => ({
+    ...item,
+    order: index + 1,
+    columnKey: item.isCustom ? item.columnKey : item.value,
+    isShown: item.isShown,
+  }));
+  await apiFunction
+    .updateColumnSettingNext({
+      data: [
+        {
+          displayId: '101000201',
+          configJson: {
+            displayId: '101000201',
+            columnSetting: list,
+          },
+        },
+      ],
+    })
+    .then((res) => {
+      if (res.data.code !== 0) {
+        ElMessage.error(t(res.data.message));
+      } else {
+        productionRef.value.reload();
+        internalColumnConfig.value = list;
+      }
+    });
+};
+const saveChildData = async (val) => {
+  console.log(val);
+};
+// 视图管理相关数据
+const permissionData = ref({
+  permissionCode: 'PMC_101000',
+  docCode: 'doc_5',
+});
+const defaultCreateTimeString = ref('consDate');
+// 初始化selectOptions
+const selectOptions = ref({
+  // 默认操作符选项，确保即使API调用失败也能有基本功能
+  operatorOptions: [
+    { value: 1, label: 'greaterThan', sql: '>' },
+    { value: 2, label: 'greaterThanOrEqualTo', sql: '>=' },
+    { value: 3, label: 'lessThan', sql: '<' },
+    { value: 4, label: 'lessThanOrEqualTo', sql: '<=' },
+    { value: 5, label: 'equalTo', sql: '=' },
+    { value: 6, label: 'notEqualTo', sql: '!=' },
+    { value: 7, label: 'contains', sql: 'LIKE' },
+    { value: 8, label: 'notContains', sql: 'NOT LIKE' },
+    { value: 9, label: 'yesEmpty', sql: 'is' },
+    { value: 10, label: 'notEmpty', sql: 'is not' },
+    { value: 11, label: 'selectRange', sql: 'BETWEEN' },
+    { value: 12, label: 'dynamicFiltering', sql: 'BETWEEN' },
+    { value: 13, label: 'inRange', sql: 'BETWEEN' },
+    { value: 14, label: 'notInRange', sql: 'NOT BETWEEN' },
+    { value: 15, label: 'isOneOf', sql: 'IN' },
+    { value: 16, label: 'notAnyOf', sql: 'NOT IN' },
+  ],
+  fieldList: [], // 视图筛选字段列表
+  // 以下是需要下拉的字段名称，获取数据源渲染
+  // 命名方式为fieldList字段里的fieldKey+'Options'
+  materialCategoryOptions: [], // 物料类别选项
+  consUserNameOptions: [], // 员工选项
+  modiUserNameOptions: [], // 员工选项
+});
+// 获取视图筛选字段列表
+const getViewFilterList = async () => {
+  try {
+    // 调用/V1/Internal/View/GetFieldList接口获取字段列表
+    const response = await apiFunction.getViewFilterList({
+      permissionCode: permissionData.value.permissionCode,
+    });
+
+    // 检查响应结构
+    if (!response || !response.data || response.data.code !== 0) {
+      ElMessage.error(response?.data?.message || '获取字段列表失败');
+      return;
+    }
+
+    const content = response.data.content;
+
+    // 调用querySetting接口获取自定义字段配置
+    const params = {
+      docCode: permissionData.value.docCode,
+      status: 1,
+      fieldName: '',
+      consDate: [],
+      startIndex: 0,
+      count: 100,
+    };
+    const customResponse = await apiFunction.querySetting(params);
+    // 解析系统字段列表
+    const fieldSettings = content.map((item) => {
+      // 解析JSON字符串格式的fieldSelectOptions
+      let fieldSelectOptions = [];
+      if (item.fieldSelectOptions) {
+        try {
+          fieldSelectOptions = JSON.parse(item.fieldSelectOptions);
+        } catch (error) {
+          fieldSelectOptions = [];
+        }
+      }
+      return {
+        fieldName: item.fieldName, // 使用fieldName作为显示名称
+        fieldKey: item.fieldKey,
+        fieldTypeId: item.fieldTypeId,
+        fieldSelectOptions: fieldSelectOptions,
+        key: item.fieldKey,
+        isDoc: false,
+      };
+    });
+    // 处理自定义字段
+    let docCustomSettings = [];
+    if (customResponse && customResponse.data && customResponse.data.code === 0 && customResponse.data.content.data) {
+      docCustomSettings = customResponse.data.content.data
+        .filter((it) => it.fieldTypeId !== 9) // 排除字段类型9
+        .map((item) => {
+          // 解析自定义字段的选项
+          let fieldSelectOptions = [];
+          if (item.fieldSelectOptions) {
+            try {
+              fieldSelectOptions = JSON.parse(item.fieldSelectOptions);
+            } catch (error) {
+              fieldSelectOptions = [];
+            }
+          }
+          return {
+            fieldName: item.fieldName,
+            fieldTypeId: item.fieldTypeId,
+            fieldSelectOptions: fieldSelectOptions,
+            key: item.docCustomId,
+            isDoc: true,
+          };
+        });
+    }
+
+    // 合并系统字段和自定义字段
+    const fieldList = [...fieldSettings, ...docCustomSettings];
+
+    // 构建第三列值选项
+    const valueOptions = {};
+
+    // 处理每个字段的选择选项
+    fieldList.forEach((field) => {
+      if (field.fieldSelectOptions && field.fieldSelectOptions.length > 0) {
+        // 格式化选择选项，同时支持对象数组和字符串数组两种格式
+        valueOptions[field.key] = field.fieldSelectOptions.map((option) => {
+          // 检查option的类型
+          if (typeof option === 'string') {
+            // 如果是字符串数组格式，使用字符串同时作为label和value
+            return {
+              label: option,
+              value: option,
+            };
+          } else {
+            // 如果是对象数组格式，使用key和value属性
+            return {
+              label: option.key,
+              value: option.value,
+            };
+          }
+        });
+      }
+    });
+
+    // 设置完整的selectOptions
+    selectOptions.value = {
+      ...selectOptions.value,
+      fieldList,
+      ...valueOptions,
+    };
+    console.log('数据源selectOptions初始化完成:', selectOptions.value);
+  } catch (error) {
+    console.error('获取数据源失败:', error);
+    ElMessage.error('获取数据源失败，请检查控制台日志');
+  }
+};
+
+// 获取物料类别数据
+const initMaterialCategory = async () => {
+  try {
+    const {
+      data: { code, content, message },
+    } = await apiFunction.materialCategoryLastLevel();
+    if (code === 0) {
+      selectOptions.value.materialCategoryOptions =
+        content && content.length
+          ? content.map(({ id: value, materialCategoryName: label }) => ({ label, value }))
+          : [];
+    } else {
+      ElMessage.error(message);
+    }
+  } catch (error) {
+    console.error('获取物料类别数据失败:', error);
+    ElMessage.error('获取物料类别数据失败');
+  }
+};
+
+/* 获取全部人员 */
+const getEmployeeList = async () => {
+  try {
+    let allData = [];
+    let totalCount = 0;
+    let currentPage = 0;
+    const pageSize = 200; // 每页数量
+    do {
+      const {
+        data: { code, content, message },
+      } = await apiFunction.getEmployeeList({
+        count: pageSize,
+        startIndex: currentPage * pageSize,
+        queryFilters: [],
+      });
+      if (code === 0) {
+        totalCount = content.totalCount;
+        allData = [...allData, ...content.data];
+        currentPage++;
+      } else {
+        ElMessage.error(message);
+        break;
+      }
+    } while (allData.length < totalCount);
+    selectOptions.value.consUserNameOptions = allData.map((item) => ({
+      label: `${item.name}/${item.account}`,
+      value: item.empID,
+    }));
+    selectOptions.value.consUserNameOptions.unshift({ label: '当前用户', value: '[-1]' });
+    selectOptions.value.modiUserNameOptions = allData.map((item) => ({
+      label: `${item.name}/${item.account}`,
+      value: item.empID,
+    }));
+    selectOptions.value.modiUserNameOptions.unshift({ label: '当前用户', value: '[-1]' });
+  } catch (error) {
+    console.error('获取全部人员失败:', error);
+    ElMessage.error('获取全部人员失败');
+  }
+};
+// 添加事件处理函数
+const handlePermissionDataUpdate = (updatedPermissionData) => {
+  // 打印接收到的数据
+  pageData.viewId = updatedPermissionData.viewId;
+  productionRef.value.reload();
+};
+// 筛选查询
+const handleFilterSearch = (filterData) => {
+  console.log('筛选条件数据:', filterData);
+  productionRef.value.reload();
+};
+// 顶部按钮--动态数据格式示例
+const topButtons = ref([]);
+const buttonList = ref([]);
+// 调整按钮顺序的辅助函数
+function moveDBeforeB(arr) {
+  const newArr = [...arr];
+  const indexA = newArr.findIndex((item) => item.permissionCode === 'PMC_101000_023');
+  const indexB = newArr.findIndex((item) => item.permissionCode === 'PMC_101000_009');
+
+  if (indexA === -1 || indexB === -1 || indexA < indexB) {
+    return newArr;
+  }
+
+  // 一步完成移除和插入
+  const dElement = newArr[indexA];
+  return [...newArr.slice(0, indexB), dElement, ...newArr.slice(indexB, indexA), ...newArr.slice(indexA + 1)];
+}
+// 获取按钮权限
+async function getButtons() {
+  try {
+    const res = await apiFunction.QueryMyPermission({
+      permissionSource: 'web',
+      permissionCode: 'PMC_101000',
+    });
+    if (res.data?.code === 0) {
+      buttonList.value = moveDBeforeB(res.data.content);
+    } else {
+      ElMessage.error(t(res.data.message));
+    }
+  } catch (error) {
+    console.error('获取按钮权限失败:', error);
+    ElMessage.error('获取按钮权限失败');
+  }
+}
+// 按钮点击事件处理函数（需要根据实际业务实现）
+const addPlan = () => {
+  console.log('新增按钮点击');
+};
+
+const handleImport = () => {
+  console.log('批量汇入按钮点击');
+};
+
+const handleExport = () => {
+  console.log('批量汇出按钮点击');
+};
+
+const multiTaskEdit = () => {
+  console.log('多工单编辑按钮点击');
+};
+
+const batchPrint = () => {
+  console.log('批量打印按钮点击');
+};
+
+const batchUpdate = () => {
+  console.log('批量更新按钮点击');
+};
+
+const deliveryOrder = () => {
+  console.log('派送工单按钮点击');
+};
+
+const returnWorkOrder = () => {
+  console.log('退回工单按钮点击');
+};
+
+const orderSharing = () => {
+  console.log('订单分享按钮点击');
+};
+
+const workOrderClosed = () => {
+  console.log('批量关闭按钮点击');
+};
+
+const antiClose = () => {
+  console.log('反关闭按钮点击');
+};
+
+const labelingIssuance = () => {
+  console.log('标签发行按钮点击');
+};
+
+const pushDown = () => {
+  console.log('下推按钮点击');
+};
+
+const associativeQueries = () => {
+  console.log('关联查询按钮点击');
+};
+
+const workingHoursCaculate = () => {
+  console.log('工时推算按钮点击');
+};
+const toBeFinished = () => {
+  console.log('完工按钮点击');
+};
+
+const printPreview = () => {
+  console.log('打印预览按钮点击');
+};
+
+const operationLog = () => {
+  console.log('操作日志按钮点击');
+};
+// 监听按钮权限变化，动态生成按钮
+watch(
+  () => buttonList.value,
+  () => {
+    if (buttonList.value && buttonList.value.length > 0) {
+      // 临时存储不同类型的按钮
+      const normalButtons = [];
+      const batchButtons = [];
+      const moreButtons = [];
+      const advancedButtons = [];
+
+      // 根据权限生成按钮
+      buttonList.value.forEach((it) => {
+        switch (it.permissionCode) {
+          // 新增
+          case 'PMC_101000_001':
+            normalButtons.push({
+              key: 'add',
+              label: t('add'),
+              icon: 'mdi mdi-plus',
+              type: 'primary',
+              link: true,
+              func: addPlan,
+            });
+            break;
+          // 批量汇入
+          case 'PMC_101000_002':
+            batchButtons.push({
+              key: 'batchImport',
+              label: t('batchImport'),
+              icon: 'mdi mdi-import',
+              type: 'primary',
+              link: true,
+              func: handleImport,
+              order: 1,
+            });
+            break;
+          // 批量汇出
+          case 'PMC_101000_003':
+            batchButtons.push({
+              key: 'batchExport',
+              label: t('batchExport'),
+              icon: 'mdi mdi-export',
+              func: handleExport,
+              type: 'primary',
+              link: true,
+              order: 2,
+            });
+            break;
+          // 多工单编辑
+          case 'PMC_101000_004':
+            moreButtons.push({
+              key: 'multiTaskEdit',
+              label: t('multiTaskEdit'),
+              icon: 'mdi mdi-table-edit',
+              func: multiTaskEdit,
+              type: 'primary',
+              link: true,
+              order: 1,
+            });
+            break;
+          // 批量打印
+          case 'PMC_101000_019':
+            batchButtons.push({
+              key: 'batchPrint',
+              label: t('batchPrint'),
+              icon: 'mdi mdi-cloud-print',
+              func: batchPrint,
+              type: 'primary',
+              link: true,
+              order: 4,
+            });
+            break;
+          // 批量更新
+          case 'PMC_101000_005':
+            batchButtons.push({
+              key: 'batchUpdate',
+              label: t('batchUpdate'),
+              icon: 'mdi mdi-file-document-refresh-outline',
+              func: batchUpdate,
+              type: 'primary',
+              link: true,
+              order: 3,
+            });
+            break;
+          // 派送工单
+          case 'PMC_101000_006':
+            normalButtons.push({
+              key: 'deliveryOrder',
+              label: t('deliveryOrder'),
+              icon: 'mdi mdi-sync',
+              func: deliveryOrder,
+              type: 'primary',
+              link: true,
+              order: 2,
+            });
+            break;
+          // 退回工单
+          case 'PMC_101000_007':
+            moreButtons.push({
+              key: 'returnWorkOrder',
+              label: t('returnWorkOrder'),
+              icon: 'mdi mdi-arrow-left-circle',
+              func: returnWorkOrder,
+              type: 'primary',
+              link: true,
+              order: 3,
+            });
+            break;
+          // 订单分享
+          case 'PMC_101000_008':
+            moreButtons.push({
+              key: 'orderSharing',
+              label: t('orderSharing'),
+              icon: 'mdi mdi-share',
+              func: orderSharing,
+              type: 'primary',
+              link: true,
+              order: 4,
+            });
+            break;
+          // 批量关闭
+          case 'PMC_101000_009':
+            batchButtons.push({
+              key: 'batchClose',
+              label: t('batchClose'),
+              icon: 'mdi mdi-close-circle',
+              func: workOrderClosed,
+              isFold: false,
+              isBatch: true,
+              type: 'primary',
+              link: true,
+              order: 5,
+            });
+            break;
+          // 反关闭
+          case 'PMC_101000_010':
+            moreButtons.push({
+              key: 'antiClose',
+              label: t('antiClose'),
+              icon: 'mdi mdi-minus-circle-off',
+              func: antiClose,
+              type: 'primary',
+              link: true,
+              order: 6,
+            });
+            break;
+          // 标签发行
+          case 'PMC_101000_011':
+            advancedButtons.push({
+              key: 'labelingIssuance',
+              label: t('labelingIssuance'),
+              icon: 'mdi mdi-label-multiple',
+              func: labelingIssuance,
+              type: 'primary',
+              link: true,
+              order: 1,
+            });
+            break;
+          // 下推
+          case 'PMC_101000_016':
+            advancedButtons.push({
+              key: 'pushDown',
+              label: t('pushDown'),
+              icon: 'mdi mdi-download-box',
+              func: pushDown,
+              type: 'primary',
+              link: true,
+              order: 3,
+            });
+            break;
+          // 关联查询
+          case 'PMC_101000_017':
+            advancedButtons.push({
+              key: 'associativeQueries',
+              label: t('associativeQueries'),
+              icon: 'mdi mdi-tag-search',
+              func: associativeQueries,
+              type: 'primary',
+              link: true,
+              order: 2,
+            });
+            break;
+          // 工时推算
+          case 'PMC_101000_018':
+            advancedButtons.push({
+              key: 'workingHoursCaculate',
+              label: t('workingHoursCaculate'),
+              icon: 'mdi mdi-pencil-box-multiple-outline',
+              func: workingHoursCaculate,
+              type: 'primary',
+              link: true,
+              order: 4,
+            });
+            break;
+          // 完工
+          case 'PMC_101000_020':
+            moreButtons.push({
+              key: 'toBeFinished',
+              label: t('toBeFinished'),
+              icon: 'mdi mdi-check-circle',
+              func: toBeFinished,
+              type: 'primary',
+              link: true,
+              order: 5,
+            });
+            break;
+          // 打印预览
+          case 'PMC_101000_021':
+            moreButtons.push({
+              key: 'printPreview',
+              label: t('printPreview'),
+              icon: 'mdi mdi-pencil-box-multiple-outline',
+              func: printPreview,
+              type: 'primary',
+              link: true,
+              order: 7,
+            });
+            break;
+          // 操作日志
+          case 'PMC_101000_022':
+            advancedButtons.push({
+              key: 'operationLog',
+              label: t('operationLog'),
+              icon: 'mdi mdi-history',
+              func: operationLog,
+              type: 'primary',
+              link: true,
+              order: 5,
+            });
+            break;
+          // 可以根据实际需求添加更多按钮
+        }
+      });
+
+      // 生成最终的按钮配置
+      topButtons.value = [];
+
+      // 添加普通按钮
+      normalButtons.sort((a, b) => (a.order || 0) - (b.order || 0));
+      topButtons.value.push(...normalButtons);
+
+      // 添加批量操作下拉菜单
+      if (batchButtons.length > 0) {
+        // 按order排序
+        batchButtons.sort((a, b) => (a.order || 0) - (b.order || 0));
+        topButtons.value.push({
+          key: 'batchAction',
+          label: t('batchAction'),
+          icon: 'mdi mdi-format-list-bulleted',
+          type: 'primary',
+          link: true,
+          dropdownItems: batchButtons,
+        });
+      }
+
+      // 添加更多操作下拉菜单
+      if (moreButtons.length > 0) {
+        // 按order排序
+        moreButtons.sort((a, b) => (a.order || 0) - (b.order || 0));
+        topButtons.value.push({
+          key: 'moreActions',
+          label: t('moreActions'),
+          icon: 'mdi mdi-dots-horizontal-circle-outline',
+          type: 'primary',
+          link: true,
+          dropdownItems: moreButtons,
+        });
+      }
+
+      // 添加三阶操作下拉菜单
+      if (advancedButtons.length > 0) {
+        // 按order排序
+        advancedButtons.sort((a, b) => (a.order || 0) - (b.order || 0));
+        topButtons.value.push({
+          key: 'advancedOperation',
+          label: t('advancedOperation'),
+          icon: 'mdi mdi-format-list-bulleted',
+          type: 'primary',
+          link: true,
+          dropdownItems: advancedButtons,
+        });
+      }
+
+      console.log('生成的按钮配置:', topButtons.value);
+    }
+  },
+  { immediate: true },
+);
+onMounted(() => {
+  getColumnConfig();
+  getCustomFields();
+  getViewFilterList();
+  initMaterialCategory();
+  getEmployeeList();
+  getButtons();
+});
+</script>