geg-gas-web/src/views/sales/Customer/components/bankListModal.vue

<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>