通用导入Excel更新

Ben Lin

2024-12-28 f9eb1a419834f97a3ab0124b132de4f977b1973b

 src/views/tigerprojects/mes/smt/smttable/index.vue

@@ -1,285 +1,176 @@
<template>
  <PageWrapper title="料站表导入" contentFullHeight>
    <CollapseContainer title="料站表信息">
      <BasicForm
        autoFocusFirstItem
        :labelWidth="200"
        :schemas="schemas"
        :actionColOptions="{ span: 24 }"
        :submitButtonOptions="{ text: '导入' }"
        @submit="handleSubmit"
        @reset="handleReset"
      />
    </CollapseContainer>
    <BasicTable @register="registerTable" />
  </PageWrapper>
  <div>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button color="primary" @click="addTool" preIcon="add_02|svg"> 新增 </a-button>
        <a-button ghost color="success" @click="aoaToExcel" preIcon="excel-export|svg">
          导出
        </a-button>
        <a-button ghost color="success" @click="ExcelToaoa" preIcon="excel-import|svg">
          导入
        </a-button>
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              icon: 'clarity:note-edit-line',
              tooltip: '修改',
              onClick: handleEdit.bind(null, record),
              name: ''
            },
            {
              icon: 'ant-design:delete-outlined',
              tooltip: '删除',
              color: 'error',
              popConfirm: {
                title: '是否确认删除?',
                placement: 'left',
                confirm: handleDelete.bind(null, record),
              },
              name: ''
            },
          ]"
        />
      </template>
    </BasicTable>
    <Loading :loading="compState.loading" :tip="compState.tip" />
    <!-- <WmsItemDrawer @register="registerDrawer" @success="handleSuccess" /> -->
    <SmttableDrawer @register="registerDrawer" @success="handleSuccess" />
    <SmttableModal @register="registerSmttable" @success="handleSuccess" />
  </div>
</template>
<script lang="ts">
  import { computed, defineComponent, unref, ref } from 'vue';
  import { BasicColumn, BasicTable, useTable } from '/@/components/Table';
  import { BasicForm, FormSchema } from '/@/components/Form/index';
  import { CollapseContainer } from '/@/components/Container';
<script lang="ts" setup>
  import { reactive, unref } from 'vue';
  import { aoaToSheetXlsx } from '/@/components/Excel';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import SmttableDrawer from './SmttableDrawer.vue';
  import SmttableModal from './SmttableModal.vue';
  import { useDrawer } from '/@/components/Drawer';
  import { columns, searchFormSchema } from './smttbale.data';
  import { getSmttableListByPage, DeleteSmttable } from '/@/api/tigerapi/mes/smt/smttable';
  import { useGo } from '/@/hooks/web/usePage';
  import { Loading } from '/@/components/Loading';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { PageWrapper } from '/@/components/Page';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useModal } from '/@/components/Modal';

  import { optionsListApi } from '/@/api/demo/select';
  import { useDebounceFn } from '@vueuse/core';
  import { cloneDeep } from 'lodash-es';
  import { uploadApi } from '/@/api/sys/upload';
  const { t } = useI18n();
  const { createMessage } = useMessage();
  const [registerDrawer, { openDrawer }] = useDrawer();
  const go = useGo();

  const valueSelectA = ref<string[]>([]);
  const valueSelectB = ref<string[]>([]);
  const options = ref<Recordable[]>([]);
  for (let i = 1; i < 10; i++) options.value.push({ label: '选项' + i, value: `${i}` });

  const optionsA = computed(() => {
    return cloneDeep(unref(options)).map((op) => {
      op.disabled = unref(valueSelectB).indexOf(op.value) !== -1;
      return op;
    });
  const compState = reactive({
    absolute: false,
    loading: false,
    tip: '加载中...',
  });
  const optionsB = computed(() => {
    return cloneDeep(unref(options)).map((op) => {
      op.disabled = unref(valueSelectA).indexOf(op.value) !== -1;
      return op;
    });
  const [registerSmttable, { openModal: openSmttableModal }] = useModal();
  const [registerTable, { getForm, getPaginationRef, reload }] = useTable({
    title: '工单料站表',
    api: getSmttableListByPage,
    columns,
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
    },
    actionColumn: {
      width: 120,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
      fixed: 'right', //undefined,
    },
    ellipsis: true,
    useSearchForm: true,
    showTableSetting: true,
    bordered: true,
    showIndexColumn: false,
  });
  let arr: any[] = [];
  //导出
  function aoaToExcel() {
    const totals = getPaginationRef().total;
    if (totals < 30000) {
      arr = [];
      compState.loading = true;
      const col = getForm().getFieldsValue();
      getSmttableListByPage(col).then((res) => {
        res.items.forEach((element) => {
          arr.push({
            关联工单号: element.WORK_ORDER,
            产品编码: element.PROD_CODE,
            物料编码: element.ITEM_CODE,
            替代料: element.SUBITEM_CODE,
            单位: element.UNIT,
            单位用量: element.UNIT_QTY,
            产线编码: element.LINE_CODE,
            贴片机编码: element.SMT_CODE,
            钢网编码: element.SMT_STENCIL,
            站位号: element.SLOT_NO,
            贴片位置: element.LOCATION,
            飞达编码: element.FEEDER_CODE,
            飞达类型: element.FEEDER_TYPE,
            加工面: element.PCB_SURFACE,
            上料顺序: element.LOAD_SEQ,
            创建人: element.CREATE_USER,
            创建时间: element.CREATE_TIME,
          });
        });
        const arrHeader = columns.map((column) => column.title);
        const arrData = arr.map((item) => {
          return Object.keys(item).map((key) => item[key]);
        });
        // 保证data顺序与header一致
        if (arr.length < 30000) {
          aoaToSheetXlsx({
            data: arrData,
            header: arrHeader,
            filename: '工单料站表信息.xlsx',
          });
        } else {
          createMessage.error(t('导出数据不能超过三万条，如需要更多的请联系管理员'));
        }

  const schemas: FormSchema[] = [
    {
      field: 'field1',
      component: 'Select',
      label: '线别',
      colProps: {
        span: 8,
      },
      componentProps: {
        options: [
          {
            label: 'L8',
            value: '1',
            key: '1',
          },
          {
            label: 'L9',
            value: '2',
            key: '2',
          },
        ],
      },
    },
    {
      field: 'field2',
      component: 'Select',
      label: '机台',
      colProps: {
        span: 8,
      },
      componentProps: {
        options: [
          {
            label: 'L8-1',
            value: '1',
            key: '1',
          },
          {
            label: 'L9-1',
            value: '2',
            key: '2',
          },
        ],
      },
    },
    {
      field: 'field5',
      component: 'Input',
      label: '机种名称',
      colProps: {
        span: 8,
      },
    },
    {
      field: 'field6',
      component: 'Upload',
      label: '料站表文件上传',
      colProps: {
        span: 8,
      },
      rules: [{ required: true, message: '请选择上传文件' }],
      componentProps: {
        api: uploadApi,
      },
    },
    {
      field: 'field9',
      component: 'Switch',
      label: '正反面',
      colProps: {
        span: 8,
      },
    },
  ];

  const columns: BasicColumn[] = [
    {
      title: 'SMT_CODE',
      dataIndex: 'SMT_CODE',
    },
    {
      title: 'MACHINCE_SN',
      dataIndex: 'MACHINCE_SN',
    },
    {
      title: 'SLOT_NO',
      dataIndex: 'SLOT_NO',
    },
    {
      title: 'FEEDER',
      dataIndex: 'FEEDER',
    },
    {
      title: 'MATERIAL_NO',
      dataIndex: 'MATERIAL_NO',
    },
    {
      title: 'QTY',
      dataIndex: 'QTY',
    },
    {
      title: '创建时间',
      dataIndex: 'CREATE_TIME',
      width: 180,
    },
    {
      title: '备注',
      dataIndex: 'REMARK',
    },
  ];

  const data = [
    {
      ID: '1',
      SMT_CODE: 'Y18121001',
      MACHINCE_SN: 'L8-1',
      SLOT_NO: '11',
      FEEDER: '8MM',
      MATERIAL_NO: '32083241',
      QTY: 1,
      LOCATION: '',
      UPDATE_TIME: '2023-02-06',
      CREATE_TIME: '2023-02-06',
      REMARK: '',
    },
    {
      ID: '2',
      SMT_CODE: 'Y18121001',
      MACHINCE_SN: 'L8-1',
      SLOT_NO: '11',
      FEEDER: '8MM',
      MATERIAL_NO: '32080000',
      QTY: 1,
      LOCATION: '',
      UPDATE_TIME: '2023-02-06',
      CREATE_TIME: '2023-02-06',
      REMARK: '',
    },
    {
      ID: '3',
      SMT_CODE: 'Y18121001',
      MACHINCE_SN: 'L8-1',
      SLOT_NO: '11',
      FEEDER: '8MM',
      MATERIAL_NO: '32083242',
      QTY: 1,
      LOCATION: '',
      UPDATE_TIME: '2023-02-06',
      CREATE_TIME: '2023-02-06',
      REMARK: '',
    },
    {
      ID: '4',
      SMT_CODE: 'Y18121001',
      MACHINCE_SN: 'L8-1',
      SLOT_NO: '13',
      FEEDER: '8MM',
      MATERIAL_NO: '32083251',
      QTY: 1,
      LOCATION: '',
      UPDATE_TIME: '2023-02-06',
      CREATE_TIME: '2023-02-06',
      REMARK: '',
    },
    {
      ID: '5',
      SMT_CODE: 'Y18121001',
      MACHINCE_SN: 'L8-1',
      SLOT_NO: '12',
      FEEDER: '8MM',
      MATERIAL_NO: '32083202',
      QTY: 1,
      LOCATION: '',
      UPDATE_TIME: '2023-02-06',
      CREATE_TIME: '2023-02-06',
      REMARK: '',
    },
  ];

  export default defineComponent({
    components: {
      BasicForm,
      CollapseContainer,
      PageWrapper,
      BasicTable,
    },
    setup() {
      const check = ref(null);
      const { createMessage } = useMessage();
      const keyword = ref<string>('');
      const searchParams = computed<Recordable>(() => {
        return { keyword: unref(keyword) };
        compState.loading = false;
      });

      function onSearch(value: string) {
        keyword.value = value;
    } else {
      createMessage.error(t('导出数据不能超过三万条，如需要更多的请联系管理员'));
    }
  }
  //导入
  function ExcelToaoa() {
    openSmttableModal(true, {
      data: 'content',
      info: 'Info',
    });
  }
  //添加
  function addTool() {
    openDrawer(true, {
      isUpdate: false,
    });
  }
  //编辑
  function handleEdit(record: any) {
    openDrawer(true, {
      isUpdate: true,
      record,
    });
  }
  function handleSuccess() {
    reload();
  }
  //删除
  function handleDelete(record: any) {
    const apiAction = DeleteSmttable(record.ID);
    apiAction.then((action) => {
      if (action.IsSuccessed) {
        createMessage.success(t('已删除'));
        reload();
      } else {
        createMessage.success(t('删除操作失败'));
      }
      const [registerTable, { reload }] = useTable({
        columns,
        dataSource: data,
        useSearchForm: false,
        bordered: true,
        showIndexColumn: false,
        actionColumn: {
          width: 80,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
          fixed: undefined,
        },
      });

      return {
        schemas,
        optionsListApi,
        optionsA,
        optionsB,
        valueSelectA,
        valueSelectB,
        onSearch: useDebounceFn(onSearch, 300),
        searchParams,
        handleReset: () => {
          keyword.value = '';
        },
        handleSubmit: (values: any) => {
          createMessage.success('click search,values:' + JSON.stringify(values));
        },
        handleChange: (list: string[]) => {
          createMessage.info(`已上传文件${JSON.stringify(list)}`);
        },
        check,
        uploadApi,
        registerTable,
        reload,
      };
    },
  });
    });
  }
</script>