syntec3-0-ui-components-test 1.0.0

package/src/views/review_record/index.vue

@@ -0,0 +1,884 @@
+<template>
+  <div data-test-id="DIV-tAwtQk">
+    <workContentVue
+      ref="productionRef"
+      :table-loading="pageData.tableLoading"
+      :table-columns="canEditHeaders"
+      :total="pageData.total"
+      :custom-fields-list="pageData.customFieldsList"
+      :show-index="false"
+      permission-code="SFC_102011"
+      :permission-data="permissionData"
+      :select-options="selectOptions"
+      :default-create-time-string="defaultCreateTimeString"
+      :top-buttons="topButtons"
+      data-test-id="WORKCONTENTVUE-0n4eV4"
+      @columnsSaveData="saveData"
+      @columnsChildSaveData="saveChildData"
+      @reload="onReload"
+      @sortChange="onSortChange"
+      @selectionChange="onSelectionChange"
+      @cellClick="onCellClick"
+      @update:permissionData="handlePermissionDataUpdate"
+      @filterSearch="handleFilterSearch"
+    >
+      <!-- 可以访问row和index -->
+      <!-- 根据数据行状态自定义显示操作按钮 -->
+      <template #tableActions="{ row, index }">
+        <el-button
+          type="primary"
+          disabled
+          link
+          :data-test-id="`EL-BUTTON-zIjD0T-${index}`"
+          @click.stop="handleEdit(row, index)"
+        >
+          编辑
+        </el-button>
+        <el-button type="info" link :data-test-id="`EL-BUTTON-prrEsr-${index}`" @click.stop="handleAdd(row, index)">
+          详情
+        </el-button>
+      </template>
+    </workContentVue>
+    <workDetail ref="workDetailRef" data-test-id="WORKDETAIL-2aY0wA" />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, reactive, onMounted, nextTick } from 'vue';
+import { ElMessage } from 'element-plus';
+import dayjs from 'dayjs';
+import apiFunction from '@/scriptFiles/checkApiErrorMechanism';
+// 组件导入
+import workContentVue from '@/components/customTable/index.vue';
+import materialInfo from './components/materialInfo.vue';
+import rootCause from './components/rootCause.vue';
+import workDetail from './components/workDetail.vue';
+const productionRef = ref();
+const pageData = reactive({
+  tableLoading: false, // table加载状态
+  dataList: [], // 当前页table数据
+  total: 0, // 总数
+  columnConfig: [], // 列配置
+  customFieldsList: [],
+  orderSettingList: [
+    {
+      orderSettingID: 5,
+      orderSettingType: 1,
+    },
+  ], // 自定义排序参数
+  viewId: '', // 视图ID
+});
+// 视图管理相关数据
+const permissionData = ref({
+  permissionCode: 'SFC_102011',
+  docCode: 'doc_6',
+});
+const internalColumnConfig = ref([]);
+const workDetailRef = ref();
+// 格式化工单状态
+function formatStatus(status) {
+  switch (status) {
+    case 1:
+      return {
+        bgColor: '#1E88E5',
+        textColor: '#E3F2FD',
+        text: '待审核',
+      };
+    case 2:
+      return {
+        bgColor: 'rgb(224, 242, 241)',
+        textColor: 'rgb(96, 189, 181)',
+        text: '审核通过',
+      };
+    case 3:
+      return {
+        bgColor: 'rgb(238, 238, 238)',
+        textColor: 'rgb(167, 167, 167)',
+        text: '审核不通过',
+      };
+    default:
+      break;
+  }
+}
+function formatReportType(status) {
+  switch (status) {
+    case 1:
+      return '人工报工';
+    case 2:
+      return '设备报工';
+    default:
+      break;
+  }
+}
+const tableColumns = computed(() => [
+  {
+    text: '审核状态',
+    value: 'status',
+    isFixed: true, // 是否固定列
+    isShown: true, // 是否显示隐藏
+    disabled: true, // 是否禁用
+    freeze: false, // 是否冻结列
+    customizeFields: false,
+    formatterType: 'tags',
+    formatter: (row) => formatStatus(row.status),
+  },
+  {
+    text: '报工人员',
+    value: 'reportEmp',
+    isFixed: true, // 是否固定列
+    isShown: true, // 是否显示隐藏
+    disabled: true, // 是否禁用
+    freeze: false, // 是否冻结列
+    customizeFields: false,
+  },
+  {
+    text: '报工时间',
+    value: 'reportTime',
+    isFixed: false, // 是否固定列
+    isShown: true, // 是否显示隐藏
+    disabled: false, // 是否禁用
+    freeze: false, // 是否冻结列
+    customizeFields: false,
+    formatter: (row) => (row.reportTime ? dayjs(row.reportTime).format('YYYY-MM-DD HH:mm:ss') : '--'),
+  },
+  {
+    text: '报工方式',
+    value: 'reportType',
+    isFixed: false, // 是否固定列
+    isShown: true, // 是否显示隐藏
+    disabled: false, // 是否禁用
+    freeze: false, // 是否冻结列
+    customizeFields: false,
+    formatter: (row) => formatReportType(row.reportType),
+  },
+  {
+    text: '报工类型',
+    value: 'reportMethod',
+    isFixed: false, // 是否固定列
+    isShown: true, // 是否显示隐藏
+    disabled: false, // 是否禁用
+    freeze: false, // 是否冻结列
+    customizeFields: false,
+  },
+  {
+    text: '生产工单号',
+    value: 'orderNumber',
+    isFixed: false, // 是否固定列
+    isShown: true, // 是否显示隐藏
+    disabled: false, // 是否禁用
+    freeze: false, // 是否冻结列
+    customizeFields: false,
+  },
+  {
+    text: '生产数量',
+    value: 'partCount',
+    isFixed: false, // 是否固定列
+    isShown: true, // 是否显示隐藏
+    disabled: false, // 是否禁用
+    freeze: false, // 是否冻结列
+    customizeFields: false,
+  },
+  {
+    text: '良品数',
+    value: 'qualifiedNumber',
+    isFixed: false, // 是否固定列
+    isShown: true, // 是否显示隐藏
+    disabled: false, // 是否禁用
+    freeze: false, // 是否冻结列
+    customizeFields: false,
+  },
+  {
+    text: '不良品数',
+    value: 'defectiveNumber',
+    isFixed: false, // 是否固定列
+    isShown: true, // 是否显示隐藏
+    disabled: false, // 是否禁用
+    freeze: false, // 是否冻结列
+    customizeFields: false,
+  },
+  {
+    text: '报工开始时间',
+    value: 'startTime',
+    isFixed: false, // 是否固定列
+    isShown: true, // 是否显示隐藏
+    disabled: false, // 是否禁用
+    freeze: false, // 是否冻结列
+    customizeFields: false,
+    formatter: (row) => (row.startTime ? dayjs(row.startTime).format('YYYY-MM-DD HH:mm:ss') : '--'),
+  },
+  {
+    text: '报工结束时间',
+    value: 'endTime',
+    isFixed: false, // 是否固定列
+    isShown: true, // 是否显示隐藏
+    disabled: false, // 是否禁用
+    freeze: false, // 是否冻结列
+    customizeFields: false,
+    formatter: (row) =>
+      row.startTimeOfJobApplication ? dayjs(row.startTimeOfJobApplication).format('YYYY-MM-DD HH:mm:ss') : '--',
+  },
+  {
+    text: '流转标签号',
+    value: 'runCardNumber',
+    isFixed: false, // 是否固定列
+    isShown: true, // 是否显示隐藏
+    disabled: false, // 是否禁用
+    freeze: false, // 是否冻结列
+    customizeFields: false,
+  },
+  {
+    text: '产线/工段',
+    value: 'organizationName',
+    isFixed: false, // 是否固定列
+    isShown: true, // 是否显示隐藏
+    disabled: false, // 是否禁用
+    freeze: false, // 是否冻结列
+    customizeFields: false,
+  },
+  {
+    text: '工位代码',
+    value: 'workStationCode',
+    isFixed: false, // 是否固定列
+    isShown: true, // 是否显示隐藏
+    disabled: false, // 是否禁用
+    freeze: false, // 是否冻结列
+    customizeFields: false,
+  },
+  {
+    text: '工位名称',
+    value: 'workStationName',
+    isFixed: false, // 是否固定列
+    isShown: true, // 是否显示隐藏
+    disabled: false, // 是否禁用
+    freeze: false, // 是否冻结列
+    customizeFields: false,
+  },
+  {
+    text: '设备名称',
+    value: 'equipName',
+    isFixed: false, // 是否固定列
+    isShown: true, // 是否显示隐藏
+    disabled: false, // 是否禁用
+    freeze: false, // 是否冻结列
+    customizeFields: false,
+  },
+  {
+    text: '物料编号',
+    value: 'partNumber',
+    isFixed: false, // 是否固定列
+    isShown: true, // 是否显示隐藏
+    disabled: false, // 是否禁用
+    freeze: false, // 是否冻结列
+    customizeFields: false,
+    columntSlot: materialInfo, // tbody列插槽, 根据需求显示组件。如果同时配置formatter和columntSlot则columntSlot优先显示
+  },
+  {
+    text: '物料名称',
+    value: 'partName',
+    isFixed: false, // 是否固定列
+    isShown: true, // 是否显示隐藏
+    disabled: false, // 是否禁用
+    freeze: false, // 是否冻结列
+    customizeFields: false,
+  },
+  {
+    text: '规格型号',
+    value: 'materialSpec',
+    isFixed: false, // 是否固定列
+    isShown: true, // 是否显示隐藏
+    disabled: false, // 是否禁用
+    freeze: false, // 是否冻结列
+    customizeFields: false,
+  },
+  {
+    text: '工艺路线',
+    value: 'craftPathName',
+    isFixed: false, // 是否固定列
+    isShown: true, // 是否显示隐藏
+    disabled: false, // 是否禁用
+    freeze: false, // 是否冻结列
+    customizeFields: false,
+  },
+  {
+    text: '工序顺序',
+    value: 'processNumber',
+    isFixed: false, // 是否固定列
+    isShown: true, // 是否显示隐藏
+    disabled: false, // 是否禁用
+    freeze: false, // 是否冻结列
+    customizeFields: false,
+  },
+  {
+    text: '工序代码',
+    value: 'processCode',
+    isFixed: false, // 是否固定列
+    isShown: true, // 是否显示隐藏
+    disabled: false, // 是否禁用
+    freeze: false, // 是否冻结列
+    customizeFields: false,
+  },
+  {
+    text: '工序名称',
+    value: 'processName',
+    isFixed: false, // 是否固定列
+    isShown: true, // 是否显示隐藏
+    disabled: false, // 是否禁用
+    freeze: false, // 是否冻结列
+    customizeFields: false,
+  },
+  {
+    text: '工序需求数',
+    value: 'requiredThroughput',
+    isFixed: false, // 是否固定列
+    isShown: true, // 是否显示隐藏
+    disabled: false, // 是否禁用
+    freeze: false, // 是否冻结列
+    customizeFields: false,
+  },
+  {
+    text: '预计开工日（工序）',
+    value: 'expectedStartDate',
+    isFixed: false, // 是否固定列
+    isShown: true, // 是否显示隐藏
+    disabled: false, // 是否禁用
+    freeze: false, // 是否冻结列
+    customizeFields: false,
+    minWidth: 160,
+    formatter: (row) => (row.expectedStartDate ? dayjs(row.expectedStartDate).format('YYYY-MM-DD HH:mm:ss') : '--'),
+  },
+  {
+    text: '预计完工日（工序）',
+    value: 'expectedDueDate',
+    isFixed: false, // 是否固定列
+    isShown: true, // 是否显示隐藏
+    disabled: false, // 是否禁用
+    freeze: false, // 是否冻结列
+    customizeFields: false,
+    minWidth: 160,
+    formatter: (row) => (row.expectedDueDate ? dayjs(row.expectedDueDate).format('YYYY-MM-DD HH:mm:ss') : '--'),
+  },
+  {
+    text: '不良原因及数量',
+    value: 'defectiveProducts',
+    isFixed: false, // 是否固定列
+    isShown: true, // 是否显示隐藏
+    disabled: false, // 是否禁用
+    freeze: false, // 是否冻结列
+    customizeFields: false,
+    columntSlot: rootCause, // tbody列插槽, 根据需求显示组件。如果同时配置formatter和columntSlot则columntSlot优先显示
+  },
+  {
+    text: '审核人员',
+    value: 'reviewEmp',
+    isFixed: false, // 是否固定列
+    isShown: true, // 是否显示隐藏
+    disabled: false, // 是否禁用
+    freeze: false, // 是否冻结列
+    customizeFields: false,
+  },
+  {
+    text: '审核时间',
+    value: 'reviewTime',
+    isFixed: false, // 是否固定列
+    isShown: true, // 是否显示隐藏
+    disabled: false, // 是否禁用
+    freeze: false, // 是否冻结列
+    customizeFields: false,
+    formatter: (row) => (row.reviewTime ? dayjs(row.reviewTime).format('YYYY-MM-DD HH:mm:ss') : '--'),
+  },
+  {
+    text: '换料时间',
+    value: '1',
+    isFixed: false, // 是否固定列
+    isShown: true, // 是否显示隐藏
+    disabled: false, // 是否禁用
+    freeze: false, // 是否冻结列
+    customizeFields: false,
+  },
+  {
+    text: '调试时间',
+    value: '2',
+    isFixed: false, // 是否固定列
+    isShown: true, // 是否显示隐藏
+    disabled: false, // 是否禁用
+    freeze: false, // 是否冻结列
+    customizeFields: false,
+  },
+  {
+    text: '故障时间',
+    value: '3',
+    isFixed: false, // 是否固定列
+    isShown: true, // 是否显示隐藏
+    disabled: false, // 是否禁用
+    freeze: false, // 是否冻结列
+    customizeFields: false,
+  },
+  {
+    text: '待料时间',
+    value: '4',
+    isFixed: false, // 是否固定列
+    isShown: true, // 是否显示隐藏
+    disabled: false, // 是否禁用
+    freeze: false, // 是否冻结列
+    customizeFields: false,
+  },
+  {
+    text: '备注',
+    value: '5',
+    isFixed: false, // 是否固定列
+    isShown: true, // 是否显示隐藏
+    disabled: false, // 是否禁用
+    freeze: false, // 是否冻结列
+    customizeFields: false,
+  },
+  {
+    text: '标准工时',
+    value: '6',
+    isFixed: false, // 是否固定列
+    isShown: true, // 是否显示隐藏
+    disabled: false, // 是否禁用
+    freeze: false, // 是否冻结列
+    customizeFields: false,
+  },
+  {
+    text: '重量',
+    value: '7',
+    isFixed: false, // 是否固定列
+    isShown: true, // 是否显示隐藏
+    disabled: false, // 是否禁用
+    freeze: false, // 是否冻结列
+    customizeFields: false,
+  },
+]);
+// 远程table列配置
+function getColumnConfig() {
+  apiFunction
+    .queryColumnSettingNext({
+      displayIds: [102011201],
+    })
+    .then((res) => {
+      if (res.data.code === 0) {
+        const dataList = res.data.content.data;
+        if (dataList[0].displayId === 102011201 && dataList[0].configJson) {
+          pageData.columnConfig = dataList[0].configJson.columnSetting;
+        }
+      } 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;
+    const res = await apiFunction.GetReviewRecord(paramsData);
+    if (res.data.code === 0) {
+      const { result, count } = res.data.content;
+      productionRef.value.complete(result);
+      pageData.total = count.all;
+    } 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) {
+  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) {
+  workDetailRef.value.open();
+  console.log('add', index, row);
+}
+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 () => {
+  // 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: '102011201',
+  //         configJson: {
+  //           displayId: '102011201',
+  //           columnSetting: list,
+  //         },
+  //       },
+  //     ],
+  //   })
+  //   .then((res) => {
+  //     if (res.data.code !== 0) {
+  //       ElMessage.error(t(res.data.message));
+  //     } else {
+  //       productionRef.value.reload();
+  //     }
+  //   });
+};
+const saveChildData = async (val) => {
+  console.log(val);
+};
+// 初始化selectOptions
+const defaultCreateTimeString = 'createTime';
+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: [
+    {
+      fieldName: '创建时间',
+      fieldKey: 'createTime',
+      fieldTypeId: 3,
+      fieldSelectOptions: [],
+      key: 'createTime',
+      isDoc: false,
+    },
+  ], // 视图筛选字段列表
+  // 以下是需要下拉的字段名称，获取数据源渲染
+  // 命名方式为fieldList字段里的fieldKey+'Options'
+  reportEmpOptions: [], // 员工选项
+  reviewPersonOptions: [], // 员工选项
+});
+// 获取视图筛选字段列表
+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 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.reportEmpOptions = allData.map((item) => ({
+      label: `${item.name}/${item.account}`,
+      value: item.empID,
+    }));
+    selectOptions.value.reportEmpOptions.unshift({ label: '当前用户', value: '[-1]' });
+    selectOptions.value.reviewPersonOptions = allData.map((item) => ({
+      label: `${item.name}/${item.account}`,
+      value: item.empID,
+    }));
+    selectOptions.value.reviewPersonOptions.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 = [
+  {
+    label: '审核通过',
+    icon: '',
+    link: true,
+    func: () => {
+      console.log('审核通过');
+    },
+  },
+  {
+    label: '审核不通过',
+    icon: '',
+    link: true,
+    func: () => {
+      console.log('审核不通过');
+    },
+  },
+  {
+    label: 'Excel导出',
+    icon: '',
+    link: true,
+    func: () => {
+      console.log('Excel导出');
+    },
+  },
+];
+
+onMounted(() => {
+  getColumnConfig();
+  // getCustomFields();
+  getViewFilterList();
+  getEmployeeList();
+  nextTick(() => {
+    const tableContent = productionRef.value.tableContentRef;
+    const tableRef = tableContent.tableRef;
+    console.log(tableRef);
+  });
+});
+</script>