通用导入Excel更新

Ben Lin

2024-12-28 f9eb1a419834f97a3ab0124b132de4f977b1973b

 src/views/tigerprojects/mes/prod/biz_mes_wo/WoModal.vue

@@ -5,204 +5,216 @@
    v-bind="$attrs"
    ok-text="保存"
    @register="register"
    :title="t('导入工单料站表')"
    :title="t(props.title)"
    @ok="handleSubmit"
  >
    <a-button style="position: relative; left: 100px" @click="aoaToExcel" class="m-3">
      模板
    </a-button>
    <ImpExcel
      style="width: 100px; position: relative; top: -56px"
      @success="loadDataSuccess"
      dateFormat="YYYY-MM-DD"
    >
      <a-button class="m-3"> 导入Excel </a-button>
    </ImpExcel>

    <p style="color: red" v-text="err"></p>
    <a-card style="position: relative; top: -55px" :title="t('列表')" :bordered="false">
      <!-- :columns="dtlColumns"
        :dataSource="data" -->
      <PageWrapper dense contentClass="flex">
        <BasicTable
          :maxHeight="500"
          v-for="(table, index) in tableListRef"
          :key="index"
          :title="table.title"
          :columns="table.columns"
          :dataSource="table.dataSource"
        />
      </PageWrapper>
    </a-card>
    <div class="high-form">
      <p style="color: red" v-text="err"></p>
      <BasicTable
        v-for="(table, index) in tableListRef"
        :key="index"
        :title="table.title"
        :columns="table.columns"
        :dataSource="table.dataSource"
      >
        <template #toolbar>
          <a-button @click="ToExcel" color="primary" preIcon="tmpDownload-white|svg">
            模板
          </a-button>
          <ImpExcel @success="loadDataSuccess" dateFormat="YYYY-MM-DD">
            <a-button class="m-3" preIcon="excel-import|svg"> 导入Excel </a-button>
          </ImpExcel>
        </template>
      </BasicTable>
    </div>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, nextTick, unref, h } from 'vue';
  import { Tag, Tooltip } from 'ant-design-vue';
<script lang="ts" setup>
  import { ref, nextTick, unref, h } from 'vue';
  import { Tag, Tooltip, Card } from 'ant-design-vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
  import { SaveSmttable, ExportTable, SaveExportTable } from '/@/api/tigerapi/mes/smt/smttable';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { aoaToSheetXlsx, ImpExcel, ExcelData } from '/@/components/Excel';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useLocale } from '/@/locales/useLocale';
  import { PageWrapper } from '/@/components/Page';
  import { BasicTable, BasicColumn } from '/@/components/Table';

  const { getLocale } = useLocale();

  const { t } = useI18n('');
  const { createMessage, createConfirm } = useMessage();
  export default defineComponent({
    components: { BasicModal, BasicForm, PageWrapper, ImpExcel, BasicTable },
    props: {
      userData: { type: Object },
  const emit = defineEmits(['success', 'register', 'toExcel']);
  const props = defineProps({
    title: {
      type: String,
      default: '',
    },
    emit: ['success', 'register'],
    setup(_, { emit }) {
      const modelRef = ref({});
      const tableListRef = ref<
        {
          title: string;
          columns?: any[];
          dataSource?: any[];
        }[]
      >([]);

      const tableListRef2 = ref<
        {
          title: string;
          columns?: any[];
          dataSource?: any[];
        }[]
      >([]);

      const [register, { setModalProps, closeModal }] = useModalInner((data) => {
        setModalProps({ confirmLoading: false });
        tableListRef.value = [];
      });
      var err = ref('');
      async function loadDataSuccess(excelDataList: ExcelData[]) {
        tableListRef.value = [];

        for (const excelData of excelDataList) {
          const {
            header,
            results,
            meta: { sheetName },
          } = excelData;
          const columns: BasicColumn[] = [];
          columns.push({
            title: '处理方式',
            dataIndex: '处理方式',
            customRender: ({ record }) => {
              const status = record.处理方式;
              var text = '';
              var color = '';
              if (status == '数据异常') {
                color = 'red';
                text = status;
              } else if (status == '修改') {
                color = 'yellow';
                text = status;
              } else {
                text = status;
              }
              return h(Tooltip, { title: 'xxxxxx' }, () => h(Tag, { color: color }, () => text));
            },
          });
          columns.push({ title: '原因', dataIndex: '原因', width: 300, resizable: true });
          for (const title of header) {
            columns.push({ title, dataIndex: title });
          }
          tableListRef.value.push({ title: sheetName, dataSource: results, columns });
        }
        console.log('console.log(tableListRef.value);', tableListRef.value);
        var res = await ExportTable(tableListRef.value);
        if (res.IsSuccessed) {
          tableListRef.value[0].dataSource = res.Data;
          err.value = '';
        } else {
          tableListRef.value = [];
          createMessage.error('导入失败' + res.Message);
          err.value = res.Message;
        }
      }

      // function handleVisibleChange(v) {
      //   v && props.userData && nextTick(() => onDataReceive(props.userData));
      // }
      //导出
      function aoaToExcel() {
        const arrHeader = [
          '关联工单号',
          '产品编码',
          '物料编码',
          '替代料',
          '单位',
          '单位用量',
          '产线编码',
          '贴片机编码',
          '贴片机编码',
          '钢网编码',
          '站位号',
          '贴片位置',
          '飞达编码',
          '飞达类型',
          '加工面',
          '上料顺序',
          '创建人',
          '创建时间',
        ];
        aoaToSheetXlsx({
          data: '',
          header: arrHeader,
          filename: '工单料站表信息.xlsx',
        });
      }
      async function handleSubmit() {
        try {
          const values = tableListRef.value;
          setModalProps({ confirmLoading: true });
          // TODO custom api
          //添加锡膏胶水记录
          createConfirm({
            iconType: 'warning',
            title: () => h('span', t('导入料站表信息')),
            content: () => h('span', t('确认有修改的数据是否正确，有异常的数据无法导入')),
            onOk: async () => {
              const apiAction = SaveExportTable(tableListRef.value);
              apiAction.then((action) => {
                if (action) {
                  if (action.IsSuccessed) {
                    closeModal();
                    createMessage.success(t('导入成功'));
                    emit('success', {
                      isUpdate: unref(false),
                      values: { ...values, id: 0 },
                    });
                  }
                } else {
                  createMessage.error(t('导入失败,代码已使用'));
                }
              });
            },
          });
        } finally {
          setModalProps({ confirmLoading: false });
        }
      }

      return {
        register,
        model: modelRef,
        handleSubmit,
        loadDataSuccess,
        tableListRef,
        err,
        t,
        aoaToExcel,
      };
    mtitle: {
      type: String,
      default: '',
    },
    arr: {
      type: Array,
      default: () => [1, 2, 3, 4],
    },
  });
  const ACard = Card;
  const { getLocale } = useLocale();
  const { t } = useI18n('');
  const { createMessage, createConfirm } = useMessage();
  const modelRef = ref({});
  const tableListRef = ref<
    {
      title: string;
      columns?: any[];
      dataSource?: any[];
    }[]
  >([]);

  const tableListRef2 = ref<
    {
      title: string;
      columns?: any[];
      dataSource?: any[];
    }[]
  >([]);
  const [register, { setModalProps, closeModal }] = useModalInner((data) => {
    setModalProps({ confirmLoading: false });
    tableListRef.value = [
      {
        title: '列表信息',
        columns: [
          {
            title: '字段1',
            dataIndex: 'field1',
            width: 200,
            sorter: true,
            resizable: true,
          },
          {
            title: '字段2',
            dataIndex: 'field2',
            width: 200,
            sorter: true,
            resizable: true,
          },
        ],
        dataSource: [],
      },
    ];
  });
  var err = ref('');
  async function loadDataSuccess(excelDataList: ExcelData[]) {
    tableListRef.value = [];

    for (const excelData of excelDataList) {
      const {
        header,
        results,
        meta: { sheetName },
      } = excelData;
      const columns: BasicColumn[] = [];
      columns.push({
        title: '处理方式',
        dataIndex: '处理方式',
        customRender: ({ record }) => {
          const status = record.处理方式;
          var text = '';
          var color = '';
          if (status == '数据异常') {
            color = 'red';
            text = status;
          } else if (status == '修改') {
            color = 'yellow';
            text = status;
          } else {
            text = status;
          }
          return h(Tooltip, { title: 'xxxxxx' }, () => h(Tag, { color: color }, () => text));
        },
      });
      columns.push({ title: '原因', dataIndex: '原因', width: 300, resizable: true });
      for (const title of header) {
        columns.push({ title, dataIndex: title });
      }
      tableListRef.value.push({ title: sheetName, dataSource: results, columns });
    }
    console.log('console.log(tableListRef.value);', tableListRef.value);
    var res = await ExportTable(tableListRef.value);
    if (res.IsSuccessed) {
      tableListRef.value[0].dataSource = res.Data;
      err.value = '';
    } else {
      tableListRef.value = [];
      createMessage.error('导入失败' + res.Message);
      err.value = res.Message;
    }
  }

  // function handleVisibleChange(v) {
  //   v && props.userData && nextTick(() => onDataReceive(props.userData));
  // }
  //导出
  function ToExcel() {
    const arrHeader = [
      '关联工单号',
      '产品编码',
      '物料编码',
      '替代料',
      '单位',
      '单位用量',
      '产线编码',
      '贴片机编码',
      '贴片机编码',
      '钢网编码',
      '站位号',
      '贴片位置',
      '飞达编码',
      '飞达类型',
      '加工面',
      '上料顺序',
      '创建人',
      '创建时间',
    ];
    aoaToSheetXlsx({
      data: '',
      header: arrHeader,
      filename: '工单料站表信息.xlsx',
    });
  }
  async function handleSubmit() {
    try {
      const values = tableListRef.value;
      setModalProps({ confirmLoading: true });
      // TODO custom api
      //添加锡膏胶水记录
      createConfirm({
        iconType: 'warning',
        title: () => h('span', t('导入料站表信息')),
        content: () => h('span', t('确认有修改的数据是否正确，有异常的数据无法导入')),
        onOk: async () => {
          const apiAction = SaveExportTable(tableListRef.value);
          apiAction.then((action) => {
            if (action) {
              if (action.IsSuccessed) {
                closeModal();
                createMessage.success(t('导入成功'));
                emit('success', {
                  isUpdate: unref(false),
                  values: { ...values, id: 0 },
                });
              }
            } else {
              createMessage.error(t('导入失败,代码已使用'));
            }
          });
        },
      });
    } finally {
      setModalProps({ confirmLoading: false });
    }
  }
</script>
<style lang="less" scoped>
  .high-form {
    padding: 5px 10px 10px;
    background: #f5f9fe;
  }
</style>