工单管理

Ben Lin

2024-05-27 62f0e403c98fb76d39b8f1150d2bf2f026423b85

 src/views/tigerprojects/wms/inventory/CountMdtlModal.vue

@@ -1,313 +1,330 @@
<template>
  <BasicModal width="1400px" :height=600 v-bind="$attrs" @register="register" :title="t('物品盘点明细列表')" @ok="handleSubmit">
  <BasicModal
    width="1400px"
    :height="600"
    v-bind="$attrs"
    @register="register"
    :title="t('物品盘点明细列表')"
    @ok="handleSubmit"
  >
    <!-- <div class="pt-3px pr-3px">
      <BasicForm @register="registerForm" :model="model" />
    </div> -->
    <div>
      <!-- <a-button type="primary" class="mr-4" @click="handleSelect"> {{ t('搜索') }} </a-button> -->
      <BasicTable @register="registerTable" ref="tableRef" :canResize="canResize"
        :striped="striped" :loading="loading" :bordered="border" showTableSetting>
      <BasicTable
        @register="registerTable"
        ref="tableRef"
        :canResize="canResize"
        :striped="striped"
        :loading="loading"
        :bordered="border"
        showTableSetting
      >
        <template #toolbar>
          <a-button ghost color="success" preIcon="OutR|svg" @click="aoaToExcel"> 导出 </a-button>
        </template>
      </BasicTable>

    </div>
  </BasicModal>
</template>
<script lang="ts">
import { aoaToSheetXlsx } from '/@/components/Excel';
import { defineComponent, ref, unref } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
//import { getTreeList } from '/@/api/tigerapi/dept';
import { BasicTable, TableAction, TableActionType, useTable } from '/@/components/Table';
import { MdtlColumns } from './inventory.data';
import { getMdtlListByPage, optionsListApiMdtlResult, optionsListApiMdtlStatus, getMdtlListByPageOut } from '/@/api/tigerapi/wms/inventory';
import { iWMS_COUNT_MDTL } from '/@/api/tigerapi/model/warehoueseModel';
import { useI18n } from '/@/hooks/web/useI18n';
import { useLocale } from '/@/locales/useLocale';
import { useMessage } from '/@/hooks/web/useMessage';
  import { aoaToSheetXlsx } from '/@/components/Excel';
  import { defineComponent, ref, unref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
  //import { getTreeList } from '/@/api/tigerapi/dept';
  import { BasicTable, TableAction, TableActionType, useTable } from '/@/components/Table';
  import { MdtlColumns } from './inventory.data';
  import {
    getMdtlListByPage,
    optionsListApiMdtlResult,
    optionsListApiMdtlStatus,
    getMdtlListByPageOut,
  } from '/@/api/tigerapi/wms/inventory';
  import { iWMS_COUNT_MDTL } from '/@/api/tigerapi/model/warehoueseModel';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useLocale } from '/@/locales/useLocale';
  import { useMessage } from '/@/hooks/web/useMessage';

const { createMessage } = useMessage();
const { getLocale } = useLocale();
const { t } = useI18n('WMS.Count');
  const { createMessage } = useMessage();
  const { getLocale } = useLocale();
  const { t } = useI18n('WMS.Count');

const schemas: FormSchema[] = [
  {
    field: 'ITEM_CODE',
    component: 'Input',
    label: t('物料编码'),
    colProps: {
      span: 12,
    },
  },
  {
    field: 'COUNT_NO',
    component: 'Input',
    label: t('单据编码'),
    colProps: {
      span: 12,
    },
    show: false,
  },
  {
    field: 'STATUS',
    label: t('状态'),
    component: 'ApiSelect',
    colProps: { span: 8 },
    componentProps: {
      api: optionsListApiMdtlStatus,
      resultField: 'Data',
      labelField: unref(getLocale) == 'zh_CN' ? 'Desc' : 'Name',
      valueField: 'Value',
      // onChange: (e, v) => {
      //   alert(e)
      //   console.log('ApiSelect====>:', e, v);
      // },
    },
  },
  {
    field: 'RESULT',
    label: t('结果'),
    component: 'ApiSelect',
    colProps: { span: 8 },
    componentProps: {
      api: optionsListApiMdtlResult,
      resultField: 'Data',
      labelField: unref(getLocale) == 'zh_CN' ? 'Desc' : 'Name',
      valueField: 'Value',
      // onChange: (e, v) => {
      //   alert(e)
      //   console.log('ApiSelect====>:', e, v);
      // },
    },
  }
];
export default defineComponent({
  components: { BasicModal, BasicForm, BasicTable, TableAction },
  props: {
    userData: { type: Object },
  },
  emit: ['success', 'register'],
  setup(_, { emit }) {
    const modelRef = ref({});
    const tableRef = ref<Nullable<TableActionType>>(null);
    const canResize = ref(false);
    const loading = ref(true);
    const striped = ref(true);
    const border = ref(true);
    //const pagination = ref<any>(false);
    // const [
    //   registerForm,
    //   {
    //     setFieldsValue,
    //     validateFields
    //     // setProps
    //     //updateSchema,
    //     //validate
    //   },
    // ] = useForm({
    //   labelWidth: 120,
    //   schemas,
    //   showActionButtonGroup: false,
    //   actionColOptions: {
    //     span: 24,
    //   },
    // });
    const checkedKeys = ref<Array<string | number>>([]);
      let COUNT_NO = ref('');
    const [registerTable, { reload, getForm }] = useTable({
      title: t('物料列表'),
      api: getMdtlListByPage,
      columns: MdtlColumns,
      formConfig: {
        labelWidth: 120,
        schemas: schemas,
  const schemas: FormSchema[] = [
    {
      field: 'ITEM_CODE',
      component: 'Input',
      label: t('物料编码'),
      colProps: {
        span: 12,
      },

      useSearchForm: true,
      showTableSetting: true,
      bordered: true,
      canResize: true,
      showIndexColumn: false,
      rowKey: 'ITEM_CODE',
      searchInfo: { COUNT_NO },
      rowSelection: {
        selectedRowKeys: checkedKeys,

        type: 'checkbox',
        // getCheckboxProps(record: Recordable) {
        //   // Demo: 第一行（id为0）的选择框禁用
        //   if (record.id === '0') {
        //     return { disabled: true };
        //   } else {
        //     return { disabled: false };
        //   }
    },
    {
      field: 'COUNT_NO',
      component: 'Input',
      label: t('单据编码'),
      colProps: {
        span: 12,
      },
      show: false,
    },
    {
      field: 'STATUS',
      label: t('状态'),
      component: 'ApiSelect',
      colProps: { span: 8 },
      componentProps: {
        api: optionsListApiMdtlStatus,
        resultField: 'Data',
        labelField: unref(getLocale) == 'zh_CN' ? 'Desc' : 'Name',
        valueField: 'Value',
        // onChange: (e, v) => {
        //   alert(e)
        //   console.log('ApiSelect====>:', e, v);
        // },
        onSelect: onSelect,
        onSelectAll: onSelectAll,
      }
    });
    const [register, { setModalProps, closeModal }] = useModalInner((data) => {
      setModalProps({ confirmLoading: false });
      data && onDataReceive(data);
    });
    //var Mdtl_Data = ref([] as iWMS_COUNT_MDTL[])
   
    async function onDataReceive(data) {
      // pagination.value = { pageSize: 50 };
      console.log('Data Received', data);
      COUNT_NO.value = data.data.COUNT_NO
      //方式1;
      // setFieldsValue({
      //   COUNT_NO: data.data.COUNT_NO,
      },
    },
    {
      field: 'RESULT',
      label: t('结果'),
      component: 'ApiSelect',
      colProps: { span: 8 },
      componentProps: {
        api: optionsListApiMdtlResult,
        resultField: 'Data',
        labelField: unref(getLocale) == 'zh_CN' ? 'Desc' : 'Name',
        valueField: 'Value',
        // onChange: (e, v) => {
        //   alert(e)
        //   console.log('ApiSelect====>:', e, v);
        // },
      },
    },
  ];
  export default defineComponent({
    components: { BasicModal, BasicForm, BasicTable, TableAction },
    props: {
      userData: { type: Object },
    },
    emit: ['success', 'register'],
    setup(_, { emit }) {
      const modelRef = ref({});
      const tableRef = ref<Nullable<TableActionType>>(null);
      const canResize = ref(false);
      const loading = ref(true);
      const striped = ref(true);
      const border = ref(true);
      //const pagination = ref<any>(false);
      // const [
      //   registerForm,
      //   {
      //     setFieldsValue,
      //     validateFields
      //     // setProps
      //     //updateSchema,
      //     //validate
      //   },
      // ] = useForm({
      //   labelWidth: 120,
      //   schemas,
      //   showActionButtonGroup: false,
      //   actionColOptions: {
      //     span: 24,
      //   },
      // });
      //Mdtl_Data.value = await getMdtlListByPage(data.data.COUNT_NO)
      // if (Mdtl_Data != null) {
      //   loading.value = false
      // }
      // // 方式2
      //modelRef.value = { field2: data.data, field1: data.info };
      // const treeData = await getTreeList();
      // updateSchema([
      //   {
      //     field: 'USER_PWD',
      //     show: !unref(false),
      //   },
      //   {
      //     field: 'ORG_CODE',
      //     componentProps: { treeData },
      //   },
      // ]);
      // setProps({
      //   model:{ field2: data.data, field1: data.info }
      // })
    }
      const checkedKeys = ref<Array<string | number>>([]);
      let COUNT_NO = ref('');
      const [registerTable, { reload, getForm }] = useTable({
        title: t('物料列表'),
        api: getMdtlListByPage,
        columns: MdtlColumns,
        formConfig: {
          labelWidth: 120,
          schemas: schemas,
        },

    // function handleVisibleChange(v) {
    //   v && props.userData && nextTick(() => onDataReceive(props.userData));
    // }
        useSearchForm: true,
        showTableSetting: true,
        bordered: true,
        canResize: true,
        showIndexColumn: false,
        rowKey: 'ITEM_CODE',
        searchInfo: { COUNT_NO },
        rowSelection: {
          selectedRowKeys: checkedKeys,

    async function handleSubmit() {
      try {

        // var values = '';
        // values=checkedKeys.value.join(',')
        closeModal();
        emit('success', {
          isUpdate: unref(false),
          //values: { values, id: 0 },
        });

      } finally {
          type: 'checkbox',
          // getCheckboxProps(record: Recordable) {
          //   // Demo: 第一行（id为0）的选择框禁用
          //   if (record.id === '0') {
          //     return { disabled: true };
          //   } else {
          //     return { disabled: false };
          //   }
          // },
          onSelect: onSelect,
          onSelectAll: onSelectAll,
        },
      });
      const [register, { setModalProps, closeModal }] = useModalInner((data) => {
        setModalProps({ confirmLoading: false });
        data && onDataReceive(data);
      });
      //var Mdtl_Data = ref([] as iWMS_COUNT_MDTL[])

      async function onDataReceive(data) {
        // pagination.value = { pageSize: 50 };
        console.log('Data Received', data);
        COUNT_NO.value = data.data.COUNT_NO;
        //方式1;
        // setFieldsValue({
        //   COUNT_NO: data.data.COUNT_NO,
        // });
        //Mdtl_Data.value = await getMdtlListByPage(data.data.COUNT_NO)
        // if (Mdtl_Data != null) {
        //   loading.value = false
        // }
        // // 方式2
        //modelRef.value = { field2: data.data, field1: data.info };
        // const treeData = await getTreeList();
        // updateSchema([
        //   {
        //     field: 'USER_PWD',
        //     show: !unref(false),
        //   },
        //   {
        //     field: 'ORG_CODE',
        //     componentProps: { treeData },
        //   },
        // ]);
        // setProps({
        //   model:{ field2: data.data, field1: data.info }
        // })
      }
    }
    function onSelect(record, selected) {
      if (selected) {
        checkedKeys.value = [...checkedKeys.value, record.ITEM_CODE];
      } else {
        checkedKeys.value = checkedKeys.value.filter((ITEM_CODE) => ITEM_CODE !== record.ITEM_CODE);

      // function handleVisibleChange(v) {
      //   v && props.userData && nextTick(() => onDataReceive(props.userData));
      // }

      async function handleSubmit() {
        try {
          // var values = '';
          // values=checkedKeys.value.join(',')
          closeModal();
          emit('success', {
            isUpdate: unref(false),
            //values: { values, id: 0 },
          });
        } finally {
          setModalProps({ confirmLoading: false });
        }
      }
    }
    function onSelectAll(selected, selectedRows, changeRows) {
      const changeIds = changeRows.map((item) => item.ITEM_CODE);
      if (selected) {
        checkedKeys.value = [...checkedKeys.value, ...changeIds];
      } else {
        checkedKeys.value = checkedKeys.value.filter((ITEM_CODE) => {
          return !changeIds.includes(ITEM_CODE);
        });
      function onSelect(record, selected) {
        if (selected) {
          checkedKeys.value = [...checkedKeys.value, record.ITEM_CODE];
        } else {
          checkedKeys.value = checkedKeys.value.filter(
            (ITEM_CODE) => ITEM_CODE !== record.ITEM_CODE,
          );
        }
      }
    }
    // async function handleSelect() {
    //   var data = await validateFields();
    //   Mdtl_Data.value = await getMdtlListByPage(data)
    // }
    let arr: any[] = [];
    function aoaToExcel() {
      arr = []
      var col = getForm().getFieldsValue();
      col.COUNT_NO = COUNT_NO.value;
      getMdtlListByPageOut(col).then((res) => {
        res.forEach(element => {
          let start = ''
          switch (element.STATUS) {
            case 0:
              start = '待盘点';
              break;
            case 1:
              start = '已盘点';
              break;
            default:
              break;
          }
          let result = ''
          switch (element.RESULT) {
            case 0:
              result = '无结果';
              break;
            case 1:
              result = '平帐';
              break;
            case 2:
              result = '盘盈';
              break;
            case 3:
              result = '盘亏';
              break;
            default:
              break;
          }
          arr.push({
            '物料编码': element.ITEM_CODE,
            '操作时间': element.UPDATE_TIME,
            '条码': element.SN,
            '储位代码': element.LOCATION_CODE,
            '物料名称': element.ITEM_NAME,
            '状态': start,
            '结果': result,
            '库存数量': element.QTY,
            '盘点数量': element.ACT_QTY,
            '未盘点数量': element.NOT_QTY,
      function onSelectAll(selected, selectedRows, changeRows) {
        const changeIds = changeRows.map((item) => item.ITEM_CODE);
        if (selected) {
          checkedKeys.value = [...checkedKeys.value, ...changeIds];
        } else {
          checkedKeys.value = checkedKeys.value.filter((ITEM_CODE) => {
            return !changeIds.includes(ITEM_CODE);
          });
        }
      }
      // async function handleSelect() {
      //   var data = await validateFields();
      //   Mdtl_Data.value = await getMdtlListByPage(data)
      // }
      let arr: any[] = [];
      function aoaToExcel() {
        arr = [];
        var col = getForm().getFieldsValue();
        col.COUNT_NO = COUNT_NO.value;
        getMdtlListByPageOut(col).then((res) => {
          res.forEach((element) => {
            let start = '';
            switch (element.STATUS) {
              case 0:
                start = '待盘点';
                break;
              case 1:
                start = '已盘点';
                break;
              default:
                break;
            }
            let result = '';
            switch (element.RESULT) {
              case 0:
                result = '无结果';
                break;
              case 1:
                result = '平帐';
                break;
              case 2:
                result = '盘盈';
                break;
              case 3:
                result = '盘亏';
                break;
              default:
                break;
            }
            arr.push({
              物料编码: element.ITEM_CODE,
              操作时间: element.UPDATE_TIME,
              条码: element.SN,
              储位代码: element.LOCATION_CODE,
              物料名称: element.ITEM_NAME,
              状态: start,
              结果: result,
              库存数量: element.QTY,
              盘点数量: element.ACT_QTY,
              未盘点数量: element.NOT_QTY,
            });
          });
          const arrHeader = MdtlColumns.map((column) => column.title);
          const arrData = arr.map((item) => {
            return Object.keys(item).map((key) => item[key]);
          });
          // 保证data顺序与header一致
          aoaToSheetXlsx({
            data: arrData,
            header: arrHeader,
            filename: '盘点物品明细.xlsx',
          });
        });
        const arrHeader = MdtlColumns.map((column) => column.title);
        const arrData = arr.map((item) => {
          return Object.keys(item).map((key) => item[key]);
        });
        // 保证data顺序与header一致
        aoaToSheetXlsx({
          data: arrData,
          header: arrHeader,
          filename: '盘点物品明细.xlsx'
        });
      })

    }
    return {
      register,
      schemas,
      //registerForm,
      model: modelRef,
      handleSubmit,
      registerTable,
      onSelect,
      onSelectAll,
      //setFieldsValue,
      //handleSelect,
      //validateFields,
      //Mdtl_Data,
      tableRef,
      //pagination,
      canResize,
      loading,
      striped,
      border,
      t,
      aoaToExcel
    };
  },
});
      }
      return {
        register,
        schemas,
        //registerForm,
        model: modelRef,
        handleSubmit,
        registerTable,
        onSelect,
        onSelectAll,
        //setFieldsValue,
        //handleSelect,
        //validateFields,
        //Mdtl_Data,
        tableRef,
        //pagination,
        canResize,
        loading,
        striped,
        border,
        t,
        aoaToExcel,
      };
    },
  });
</script>