低代码更新

Ben Lin

2024-06-03 8f5009a3d57821c2c97690b8419e428967b5e981

 src/views/components/ItemModal.vue

@@ -19,11 +19,10 @@
    </div>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, unref } from 'vue';
<script lang="ts" setup>
  import { 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, BasicColumn, TableAction, useTable } from '/@/components/Table';
  import { getItemListByPage } from '/@/api/tigerapi/wms/inventory';
  import { useI18n } from '/@/hooks/web/useI18n';
@@ -41,7 +40,7 @@
  ];

  //物料列表
  export const ItemColumns: BasicColumn[] = [
  const ItemColumns: BasicColumn[] = [
    {
      title: t('物料编码'),
      dataIndex: 'ITEM_CODE',
@@ -56,174 +55,98 @@
      sorter: true,
      width: 180,
    },
    // {
    //   title: t('物料描述'),
    //   dataIndex: 'ITEM_DESC',
    //   resizable:true,
    // },
    // {
    //   title: t('盘点状态',
    //   dataIndex: 'STATUS',
    //   resizable:true,
    // },
    // {
    //   title: t('盘点结果',
    //   dataIndex: 'RESULT',
    //   resizable:true,
    // },
    // {
    //   title: t('WMS数量',
    //   dataIndex: 'QTY',
    //   resizable:true,
    // },
    // {
    //   title: t('ACT_QTY',
    //   dataIndex: 'COUNT_TYPE',
    //   resizable:true,
    // }
  ];
  export default defineComponent({
    components: { BasicModal, BasicForm, BasicTable, TableAction },
    props: {
      userData: { type: Object },

  const emit = defineEmits(['success', 'register']);
  const checkedKeys = ref<Array<string | number>>([]);
  const [registerTable, { reload, getForm }] = useTable({
    title: '列表信息',
    api: getItemListByPage,
    columns: ItemColumns,
    formConfig: {
      labelWidth: 120,
      schemas,
    },
    emit: ['success', 'register'],
    setup(_, { emit }) {
      const modelRef = ref({});
      const [
        registerForm,
        {
          // setFieldsValue,
          // setProps
          updateSchema,
          //validate
        },
      ] = useForm({
        labelWidth: 120,
        schemas,
        showActionButtonGroup: false,
        actionColOptions: {
          span: 24,
        },
      });
      const checkedKeys = ref<Array<string | number>>([]);
      const [registerTable, { reload }] = useTable({
        title: '物料列表',
        api: getItemListByPage,
        columns: ItemColumns,
        formConfig: {
          labelWidth: 120,
          schemas,
        },
        useSearchForm: true,
        showTableSetting: true,
        rowKey: 'ITEM_CODE',
        rowSelection: {
          selectedRowKeys: checkedKeys,
    useSearchForm: true,
    showTableSetting: false,
    rowKey: 'ITEM_CODE',
    rowSelection: {
      selectedRowKeys: checkedKeys,

          type: 'checkbox',
          // getCheckboxProps(record: Recordable) {
          //   // Demo: 第一行（id为0）的选择框禁用
          //   if (record.id === '0') {
          //     return { disabled: true };
          //   } else {
          //     return { disabled: false };
          //   }
          // },
          onSelect: onSelect,
          onSelectAll: onSelectAll,
        },
        bordered: true,
        showIndexColumn: false,
        // actionColumn: {
        //   width: 80,
        //   title: '操作',
        //   dataIndex: 'action',
        //   slots: { customRender: 'action' },
        //   fixed: 'right' //undefined,
        // },
      });
      const [register, { setModalProps, closeModal }] = useModalInner((data) => {
        setModalProps({ confirmLoading: false });
        data && onDataReceive(data);
      });

      async function onDataReceive(data) {
        console.log('Data Received', data);
        // 方式1;
        // setFieldsValue({
        //   field2: data.data,
        //   field1: data.info,
        // });

        // // 方式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 handleVisibleChange(v) {
      //   v && props.userData && nextTick(() => onDataReceive(props.userData));
      // }

      async function handleSubmit() {
        try {
          var values = '';
          // checkedKeys.value.forEach(element => {
          //   values+=element;
          // });
          values = checkedKeys.value.join(',');
          closeModal();
          emit('success', {
            isUpdate: unref(false),
            values: { values, id: 0 },
          });
        } finally {
          setModalProps({ confirmLoading: false });
        }
      }
      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 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);
          });
        }
      }

      return {
        register,
        schemas,
        registerForm,
        model: modelRef,
        handleSubmit,
        registerTable,
        onSelect,
        onSelectAll,
      };
      type: 'checkbox',
      // getCheckboxProps(record: Recordable) {
      //   // Demo: 第一行（id为0）的选择框禁用
      //   if (record.id === '0') {
      //     return { disabled: true };
      //   } else {
      //     return { disabled: false };
      //   }
      // },
      onSelect: onSelect,
      onSelectAll: onSelectAll,
    },
    bordered: true,
    showIndexColumn: false,
    // actionColumn: {
    //   width: 80,
    //   title: '操作',
    //   dataIndex: 'action',
    //   slots: { customRender: 'action' },
    //   fixed: 'right' //undefined,
    // },
  });
  const [register, { setModalProps, closeModal }] = useModalInner((data) => {
    setModalProps({ confirmLoading: false });
    data && onDataReceive(data);
  });

  async function onDataReceive(data) {
    console.log('Data Received', data);
    // 方式1;
    // setFieldsValue({
    //   field2: data.data,
    //   field1: data.info,
    // });
    checkedKeys.value = [];
    getForm().resetFields();
    reload();
  }

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

  async function handleSubmit() {
    try {
      var values = '';
      // checkedKeys.value.forEach(element => {
      //   values+=element;
      // });
      values = checkedKeys.value.join(',');
      closeModal();
      emit('success', {
        isUpdate: unref(false),
        values: { values, id: 0 },
      });
    } finally {
      setModalProps({ confirmLoading: false });
    }
  }
  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 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);
      });
    }
  }
</script>