客户新增

src/views/sales/Customer/components/bankListModal.vue

@@ -0,0 +1,206 @@
+<template>
+  <div class="bankListTb">
+    <BasicModal v-bind="$attrs" @register="registerModal" width="60%" :title="getTitle" @ok="handleSubmit" >
+        <BasicTable @register="registerTable" class="bankListModal">
+  
+        </BasicTable>
+      
+    </BasicModal>
+  </div>
+</template>
+<script lang="ts" setup>
+    import { ref, computed, unref } from 'vue';
+    import { BasicModal, useModalInner, useModal } from '/@/components/Modal';
+    import { BasicForm, useForm } from '/@/components/Form/index';
+    import { BasicTable, useTable, FormSchema, BasicColumn, TableAction } from '/@/components/Table';
+    import { addCodeRule, getCodeRuleInfo, editCodeRule } from '/@/api/system/code';
+    import { useMessage } from '/@/hooks/web/useMessage';
+    import { useI18n } from '/@/hooks/web/useI18n';
+    import { getLngBBankPage } from '/@/api/mdm/Bank';
+
+    const { t } = useI18n();
+    const codeFormSchema: FormSchema[] = [
+      {
+        field: 'shortName',
+        label: '银行名称/简称',
+        component: 'Input',
+      },
+    ];
+
+    const columns: BasicColumn[] = [
+     {
+        dataIndex: 'code',
+        title: '编码',
+        componentType: 'input',
+        align: 'left',
+
+        sorter: true,
+      },
+
+      {
+        dataIndex: 'fullName',
+        title: '名称',
+        componentType: 'input',
+        align: 'left',
+
+        sorter: true,
+      },
+      {
+        dataIndex: 'shortName',
+        title: '简称',
+        componentType: 'input',
+        align: 'left',
+
+        sorter: true,
+      },
+      {
+        dataIndex: 'bankCode',
+        title: '联行号',
+        componentType: 'input',
+        align: 'left',
+
+        sorter: true,
+      },
+      {
+        dataIndex: 'regionName',
+        title: '所属国家和地区',
+        componentType: 'input',
+        align: 'left',
+
+        sorter: true,
+      },
+
+      {
+        dataIndex: 'swift',
+        title: 'SWIFT',
+        componentType: 'input',
+        align: 'left',
+
+        sorter: true,
+      },
+
+    ];
+
+    const emit = defineEmits(['success', 'register']);
+
+    const { notification } = useMessage();
+    const isUpdate = ref(true);
+    const rowId = ref('');
+    const selectedKeys = ref<string[]>([]);
+    const selectedValues = ref([]);
+
+    const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+
+        setModalProps({ confirmLoading: false });
+
+        isUpdate.value = !!data?.isUpdate;
+
+        if (unref(isUpdate)) {
+            rowId.value = data.record.id;
+            const record = await getCodeRuleInfo(data.record.id);
+      
+            let datas = JSON.parse({ ...record }.formatJson);
+            datas.forEach((data) => {
+                if (!data.sortNum) {
+                    data.sortNum = 0;
+                }
+            });
+            setTableData(datas);
+        } else {
+            setTableData([]);
+        }
+    });
+
+    const [registerTable, { getDataSource, setTableData, updateTableDataRecord }] = useTable({
+        title: t('银行列表'),
+        api: getLngBBankPage,
+        columns,
+  
+        bordered: true,
+        pagination: true,
+        canResize: false,
+        formConfig: {
+          labelCol:{span: 9, offSet:10},
+          schemas: codeFormSchema,
+          showResetButton: true,
+        },
+        beforeFetch: (params) => {
+          return { ...params, valid: 'Y'};
+        },
+        rowSelection: {
+          type: 'radio',
+          onChange: onSelectChange
+        },
+    });
+    function onSelectChange(rowKeys: string[], e) {
+      selectedKeys.value = rowKeys;
+      selectedValues.value = e
+    }
+    const getTitle = computed(() => (!unref(isUpdate) ? t('银行列表') : t('')));
+
+    async function handleSubmit() {
+      if (!selectedValues.value.length) {
+        notification.warning({
+          message: t('提示'),
+          description: t('请选择银行')
+        });
+        return
+      }
+      closeModal();
+      emit('success', selectedValues.value);
+        // try {
+        //     const values = await validate();
+        //     let data = getDataSource();
+        //     data.sort((a, b) => {
+        //         return a.sortNum - b.sortNum;
+        //     });
+        //     values.formatJson = JSON.stringify(data);
+        //     setModalProps({ confirmLoading: true });
+        //     if (values.formatJson === '[]') {
+        //         notification.warning({
+        //             message: t('提示'),
+        //             description: t('编码规则不能为空')
+        //         });
+        //         return;
+        //     }
+        //     // TODO custom api
+        //     if (!unref(isUpdate)) {
+        //         //false 新增
+        //         await addCodeRule(values);
+        //         notification.success({
+        //             message: t('提示'),
+        //             description: t('新增成功')
+        //         }); //提示消息
+        //     } else {
+        //         values.id = rowId.value;
+        //         await editCodeRule(values);
+        //         notification.success({
+        //             message: t('提示'),
+        //             description: t('修改成功！')
+        //         }); //提示消息
+        //     }
+
+        //     closeModal();
+        //     emit('success');
+        // } finally {
+        //     setModalProps({ confirmLoading: false });
+        // }
+    }
+
+
+
+  
+
+
+
+</script>
+<style >
+ .bankListModal .basicCol{
+    position: inherit !important;
+    top: 0;
+  }
+  .bankListTb .ant-modal-wrap{
+    z-index: 1001 !important;
+
+  }
+</style>