Ben Lin
2024-08-05 16257dd099d9811fb5caf78047ffc2425c401e0e
src/views/tigerprojects/mes/smt/smttable/SmttableModal.vue
@@ -1,129 +1,208 @@
<template>
  <BasicModal width="1200px" :height=600 v-bind="$attrs" ok-text="保存" @register="register" :title="t('导入工单料站表')"
    @ok="handleSubmit">
      <ImpExcel style="width: 100px;" @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 :title="t('列表')" :bordered="false" class="!mt-5">
      <div>
        <!-- :columns="dtlColumns"
  <BasicModal
    width="1200px"
    :height="600"
    v-bind="$attrs"
    ok-text="保存"
    @register="register"
    :title="t('导入工单料站表')"
    @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 contentFullHeight contentClass="flex">
          <BasicTable v-for="(table, index) in tableListRef" :key="index" :title="table.title" :columns="table.columns"
            :dataSource="table.dataSource" />
        </PageWrapper>
      </div>
      <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>
  </BasicModal>
</template>
<script lang="ts">
import { defineComponent, ref, nextTick, unref } from '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 { useMessage } from '/@/hooks/web/useMessage';
import { useLocale } from '/@/locales/useLocale';
import { PageWrapper } from '/@/components/Page';
import { ImpExcel, ExcelData } from '/@/components/Excel';
import { BasicTable, BasicColumn } from '/@/components/Table';
  import { defineComponent, ref, nextTick, unref, h } from 'vue';
  import { Tag, Tooltip } 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 { getLocale } = useLocale();
const { t } = useI18n('');
const { createMessage } = useMessage();
export default defineComponent({
  components: { BasicModal, BasicForm, PageWrapper, ImpExcel,BasicTable },
  props: {
    userData: { type: Object },
  },
  emit: ['success', 'register'],
  setup(_, { emit }) {
    const modelRef = ref({});
    const tableListRef = ref<
      {
        title: string;
        columns?: any[];
        dataSource?: any[];
      }[]
    >([]);
  const { t } = useI18n('');
  const { createMessage, createConfirm } = useMessage();
  export default defineComponent({
    components: { BasicModal, BasicForm, PageWrapper, ImpExcel, BasicTable },
    props: {
      userData: { type: Object },
    },
    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 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:"处理方式"});
        columns.push({title:'原因',dataIndex:'原因'})
        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));
    // }
    async function handleSubmit() {
      try {
        const values = tableListRef.value;
        setModalProps({ confirmLoading: true });
        // TODO custom api
        //添加锡膏胶水记录
        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 {
      const [register, { setModalProps, closeModal }] = useModalInner((data) => {
        setModalProps({ confirmLoading: false });
      }
    }
        tableListRef.value = [];
      });
      var err = ref('');
      async function loadDataSuccess(excelDataList: ExcelData[]) {
        tableListRef.value = [];
    return { register, model: modelRef, handleSubmit, loadDataSuccess, tableListRef,err,t };
  },
});
        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,
      };
    },
  });
</script>