chore: 前端逻辑修改

src/views/system/devtools/genDataBaseType/GenDataBaseTypeModal.vue

@@ -9,6 +9,7 @@
     <BasicTable @register="genTableFieldTypeRegisterTable">
       <template #toolbar>
         <a-button
+          v-show="state.tag != 'view'"
           type="primary"
           @click="handleAdd()"
         >新增</a-button>
@@ -41,7 +42,7 @@
   </BasicModal>
 </template>
 <script lang="ts" setup>
-  import { ref, unref } from 'vue';
+  import { reactive, computed } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { formSchema, genTableFieldTypeReloadColumns } from './genDataBaseType.data';
   import { editGenDatabaseType, getGenDatabaseType } from '/@/api/platform/system/controller/genDatabaseType';
@@ -51,11 +52,19 @@
   import { useMessage } from '/@/hooks/web/useMessage';
 
   /** 通用变量统一声明区域 */
-  const tag = ref<Nullable<string>>('');
+  interface WindowState {
+    tag: string;
+    dataSource: Recordable[];
+  }
+  const state = reactive<WindowState>({
+    tag: '',
+    dataSource: []
+  });
   const { createConfirm, createMessage } = useMessage();
   /** https://v3.cn.vuejs.org/api/options-data.html#emits */
   const emit = defineEmits(['success', 'register']);
   const [genTableFieldTypeRegisterModal, { openModal: genTableFieldTypeOpenModal }] = useModal();
+  const getDataSource = computed(() => state.dataSource.filter(item => item._action != 'del'));
   const [registerForm, { resetFields, setFieldsValue, validate, clearValidate, setProps }] = useForm({
     labelWidth: 100,
     schemas: formSchema,
@@ -63,7 +72,7 @@
     baseColProps: { span: 24 }
   });
   const [genTableFieldTypeRegisterTable] = useTable({
-    dataSource: [],
+    dataSource: getDataSource,
     rowKey: 'id',
     columns: genTableFieldTypeReloadColumns,
     useSearchForm: false,
@@ -72,11 +81,13 @@
     pagination: false,
     clickToRowSelect: false,
     showIndexColumn: false,
+    maxHeight: 400,
     actionColumn: {
       width: 220,
       title: '操作',
       dataIndex: 'action',
-      fixed: false
+      fixed: false,
+      ifShow: state.tag != 'view'
     },
   });
   const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: BoxPayload = { _tag: '' }) => {
@@ -85,21 +96,28 @@
     await clearValidate();
     await setProps({ disabled: false });
     // 处理设置数据
-    tag.value = data._tag;
+    state.tag = data._tag;
+    state.dataSource = [];
     const id = data.record?.id;
-    const props: Partial<ModalProps> = { confirmLoading: false };
+    const props: Partial<ModalProps> = { confirmLoading: false, showOkBtn: true };
     // 采用tag标签区分操作
-    switch (unref(tag)) {
+    switch (state.tag) {
       case 'add':
         props.title = '新建数据库字段类型';
         break;
       case 'view':
         props.title = '查看数据库字段类型';
         await setProps({ disabled: true });
+        props.showOkBtn = false;
+        const genDatabaseTypeView = await getGenDatabaseType(id);
+        state.dataSource = genDatabaseTypeView?.genTableFieldList || [];
+        await setFieldsValue(genDatabaseTypeView);
         break;
       case 'edit':
         props.title = '编辑数据库字段类型';
-        await setFieldsValue(await getGenDatabaseType(id));
+        const genDatabaseTypeEdit = await getGenDatabaseType(id);
+        state.dataSource = genDatabaseTypeEdit?.genTableFieldList || [];
+        await setFieldsValue(genDatabaseTypeEdit);
         break;
     }
     // 尾部:设置处理后的最终配置数据
@@ -123,20 +141,19 @@
       iconType: 'warning',
       title: '警告',
       content: `是否确认删除标签为${record.lable}的数据?`,
-      onOk: async () => {
-
-      }
+      onOk: async () => record._action = 'del'
     });
   }
 
   function handleGenTableFieldType(record: Recordable) {
-
+    state.dataSource.push(record);
   }
 
   async function handleSubmit() {
     try {
       // 提取验证数据
       const formData = await validate();
+      formData.genTableFieldList = state.dataSource;
       // 处理提交之前逻辑
       setModalProps({ confirmLoading: true });
       await editGenDatabaseType(formData);

src/views/system/devtools/genDataBaseType/GenTableFieldTypeModal.vue

@@ -33,7 +33,9 @@
     await setProps({ disabled: false });
     // 处理设置数据
     tag.value = data._tag;
-    const props: Partial<ModalProps> = { confirmLoading: false };
+    const genTableFieldType = cloneDeep(Object(data.record));
+    genTableFieldType._action = tag.value;
+    const props: Partial<ModalProps> = { confirmLoading: false, showOkBtn: true };
     // 采用tag标签区分操作
     switch (unref(tag)) {
       case 'add':
@@ -42,10 +44,12 @@
       case 'view':
         props.title = '查看表字段物理类型';
         await setProps({ disabled: true });
+        props.showOkBtn = false;
+        await setFieldsValue(genTableFieldType);
         break;
       case 'edit':
         props.title = '编辑表字段物理类型';
-        await setFieldsValue(cloneDeep(Object(data.record)));
+        await setFieldsValue(genTableFieldType);
         break;
     }
     // 尾部:设置处理后的最终配置数据

src/views/system/devtools/genDataBaseType/genDataBaseType.data.ts

@@ -58,6 +58,12 @@ export const formSchemaGenTableFieldType: FormSchema[] = [
     component: 'Input',
     show: false
   },
+  {
+    field: '_action',
+    label: '操作标识字段',
+    component: 'Input',
+    show: false
+  },
   {
     field: 'label',
     label: '标签',