小修改

Cloud Zhang

2024-05-16 8d6f97a29f9e98e1c190625868b41f93dc020945

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

@@ -1,285 +1,172 @@
<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"> 添加 </a-button>
        <a-button ghost color="primary" @click="aoaToExcel"> 导出 </a-button>
        <a-button ghost color="primary" @click="ExcelToaoa"> 导入 </a-button>
      </template>
      <template #action="{ record }">
        <TableAction :actions="[
      {
        icon: 'clarity:note-edit-line',
        tooltip: '修改',
        onClick: handleEdit.bind(null, record),
      },
      {
        icon: 'ant-design:delete-outlined',
        tooltip: '删除',
        popConfirm: {
          title: '是否确认删除?',
          placement: 'left',
          confirm: handleDelete.bind(null, record),
        },
      },
    ]" />
      </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';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { PageWrapper } from '/@/components/Page';
<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 { 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 compState = reactive({
  absolute: false,
  loading: false,
  tip: '加载中...',
});
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: false,
  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 => {

  const optionsA = computed(() => {
    return cloneDeep(unref(options)).map((op) => {
      op.disabled = unref(valueSelectB).indexOf(op.value) !== -1;
      return op;
    });
  });
  const optionsB = computed(() => {
    return cloneDeep(unref(options)).map((op) => {
      op.disabled = unref(valueSelectA).indexOf(op.value) !== -1;
      return op;
    });
  });

  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) };
        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,
        });
      });

      function onSearch(value: string) {
        keyword.value = value;
      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 [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,
      };
    },
      compState.loading = false;

    })

  } 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('删除操作失败'));
    }
  });
}
</script>