chore: 字段模块compose

src/api/platform/system/controller/genDatabaseType.ts

@@ -6,6 +6,7 @@ enum Api {
   add = '/system_proxy/system/devtools/genDatabaseType/save',
   get = '/system_proxy/system/devtools/genDatabaseType',
   edit = '/system_proxy/system/devtools/genDatabaseType/update',
+  saveAndGenTableFieldType = '/system_proxy/system/devtools/genDatabaseType/saveAndGenTableFieldType',
   del = '/system_proxy/system/devtools/genDatabaseType/remove',
 }
 
@@ -15,6 +16,8 @@ export const addGenDatabaseType = (params: Partial<GenDatabaseType>) => defHttp.
 
 export const editGenDatabaseType = (params: Partial<GenDatabaseType>) => defHttp.put({ url: Api.edit, data: params });
 
+export const saveAndGenTableFieldType = (params: Partial<GenDatabaseType>) => defHttp.put({ url: Api.saveAndGenTableFieldType, data: params });
+
 export const getGenDatabaseType = (id: string) => defHttp.get<GenDatabaseType>({ url: `${Api.get}/${id}` });
 
 export const delGenDatabaseType = (ids: string) => defHttp.delete({ url: `${Api.del}/${ids}` });

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

@@ -14,7 +14,7 @@
           @click="handleAdd()"
         >新增</a-button>
       </template>
-      <template #bodyCell="{ column, record }">
+      <template #bodyCell="{ index, column, record }">
         <template v-if="column.key === 'action'">
           <TableAction
             :actions="[
@@ -26,13 +26,13 @@
               {
                 label: '编辑',
                 icon: 'fa6-regular:pen-to-square',
-                onClick: handleEdit.bind(null, record)
+                onClick: handleEdit.bind(null, record, index)
               },
               {
                 label: '删除',
                 icon: 'ant-design:delete-outlined',
                 color: 'error',
-                onClick: handleDel.bind(null, record)
+                onClick: handleDel.bind(null, record, index)
               }]"
           />
         </template>
@@ -45,11 +45,12 @@
   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';
+  import { saveAndGenTableFieldType, getGenDatabaseType } from '/@/api/platform/system/controller/genDatabaseType';
   import { BasicModal, ModalProps, useModal, useModalInner } from '/@/components/Modal';
   import { BasicTable, TableAction, useTable } from '/@/components/Table';
   import GenTableFieldTypeModal from './GenTableFieldTypeModal.vue';
   import { useMessage } from '/@/hooks/web/useMessage';
+  import { isNil } from 'lodash-es';
 
   /** 通用变量统一声明区域 */
   interface WindowState {
@@ -110,13 +111,14 @@
         await setProps({ disabled: true });
         props.showOkBtn = false;
         const genDatabaseTypeView = await getGenDatabaseType(id);
-        state.dataSource = genDatabaseTypeView?.genTableFieldList || [];
+        state.dataSource = genDatabaseTypeView?.genTableFieldTypeList || [];
         await setFieldsValue(genDatabaseTypeView);
         break;
       case 'edit':
         props.title = '编辑数据库字段类型';
+        await setProps({ disabled: true });
         const genDatabaseTypeEdit = await getGenDatabaseType(id);
-        state.dataSource = genDatabaseTypeEdit?.genTableFieldList || [];
+        state.dataSource = genDatabaseTypeEdit?.genTableFieldTypeList || [];
         await setFieldsValue(genDatabaseTypeEdit);
         break;
     }
@@ -128,35 +130,41 @@
     genTableFieldTypeOpenModal(true,{ _tag: 'add' });
   }
 
-  function handleEdit(record: Recordable) {
+  function handleEdit(record: Recordable, index: number) {
-    genTableFieldTypeOpenModal(true, { _tag: 'edit', record });
+    genTableFieldTypeOpenModal(true, { _tag: 'edit', record, index });
   }
 
   function handleViewEdit(record: Recordable) {
     genTableFieldTypeOpenModal(true, { _tag: 'view', record });
   }
 
-  async function handleDel(record: Recordable) {
+  async function handleDel(record: Recordable, index: number) {
     createConfirm({
       iconType: 'warning',
       title: '警告',
-      content: `是否确认删除标签为${record.lable}的数据?`,
+      content: `是否确认删除标签为${record.label}的数据?`,
-      onOk: async () => record._action = 'del'
+      onOk: async () => {
+        if (record.id) {
+          record._action = 'del';
+        } else state.dataSource.splice(index, 1);
+      }
     });
   }
 
-  function handleGenTableFieldType(record: Recordable) {
+  function handleGenTableFieldType(record: Recordable, index?: number) {
-    state.dataSource.push(record);
+    if (!isNil(index) && index !== -1) {
+      state.dataSource.splice(index, 1, record);
+    } else state.dataSource.push(record);
   }
 
   async function handleSubmit() {
     try {
       // 提取验证数据
       const formData = await validate();
-      formData.genTableFieldList = state.dataSource;
+      formData.genTableFieldTypeList = state.dataSource;
       // 处理提交之前逻辑
       setModalProps({ confirmLoading: true });
-      await editGenDatabaseType(formData);
+      await saveAndGenTableFieldType(formData);
       // 处理提交完成之后逻辑
       closeModal();
       emit('success');

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

@@ -10,14 +10,21 @@
   </BasicModal>
 </template>
 <script lang="ts" setup>
-  import { ref, unref } from 'vue';
+  import { reactive } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { formSchemaGenTableFieldType } from './genDataBaseType.data';
   import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
   import { cloneDeep } from 'lodash-es';
 
   /** 通用变量统一声明区域 */
-  const tag = ref<Nullable<string>>('');
+  interface WindowState {
+    tag: string;
+    index: number;
+  }
+  const state = reactive<WindowState>({
+    tag: '',
+    index: undefined!
+  });
   /** https://v3.cn.vuejs.org/api/options-data.html#emits */
   const emit = defineEmits(['success', 'register']);
   const [registerForm, { resetFields, setFieldsValue, validate, clearValidate, setProps }] = useForm({
@@ -32,26 +39,27 @@
     await clearValidate();
     await setProps({ disabled: false });
     // 处理设置数据
-    tag.value = data._tag;
+    state.tag = data._tag;
+    state.index = data?.index;
     const genTableFieldType = cloneDeep(Object(data.record));
-    genTableFieldType._action = tag.value;
     const props: Partial<ModalProps> = { confirmLoading: false, showOkBtn: true };
     // 采用tag标签区分操作
-    switch (unref(tag)) {
+    switch (state.tag) {
       case 'add':
         props.title = '新增表字段物理类型';
+        genTableFieldType._action = state.tag;
         break;
       case 'view':
         props.title = '查看表字段物理类型';
         await setProps({ disabled: true });
         props.showOkBtn = false;
-        await setFieldsValue(genTableFieldType);
         break;
       case 'edit':
         props.title = '编辑表字段物理类型';
-        await setFieldsValue(genTableFieldType);
+        genTableFieldType._action = state.tag;
         break;
     }
+    await setFieldsValue(genTableFieldType);
     // 尾部:设置处理后的最终配置数据
     setModalProps(props);
   });
@@ -63,9 +71,9 @@
       const formData = await validate();
       // 处理提交之前逻辑
       setModalProps({ confirmLoading: true });
+      emit('success', formData, state.index);
       // 处理提交完成之后逻辑
       closeModal();
-      emit('success', formData);
     } finally {
       setModalProps({ confirmLoading: false });
     }

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

@@ -1,6 +1,5 @@
 import { BasicColumn } from '/@/components/Table';
 import { FormSchema } from '/@/components/Table';
-import { listGenDatabaseType } from '/@/api/platform/system/controller/genDatabaseType';
 
 export const columns: BasicColumn[] = [
   {
@@ -11,18 +10,17 @@ export const columns: BasicColumn[] = [
 
 export const searchFormSchema: FormSchema[] = [
   {
-    field: 'id',
+    field: 'type',
     label: '数据库类型',
-    component: 'ApiSelect',
+    component: 'Select',
     colProps: { span: 6 },
     componentProps: {
-      api: listGenDatabaseType,
+      options: [
-      params: {
+        { label: 'MySQL', value: 'MySQL' },
-        size: 99
+        { label: 'Oracle', value: 'Oracle' },
-      },
+        { label: 'SQL Server', value: 'SQL Server' },
-      labelField: 'type',
+        { label: 'PostgreSQL', value: 'PostgreSQL' },
-      valueField: 'id',
+      ],
-      resultField: 'data'
     }
   }
 ];
@@ -35,18 +33,18 @@ export const formSchema: FormSchema[] = [
     show: false
   },
   {
-    field: 'typeId',
+    field: 'type',
     label: '数据库类型',
-    component: 'ApiSelect',
+    component: 'Select',
     colProps: { span: 16 },
+    required: true,
     componentProps: {
-      api: listGenDatabaseType,
+      options: [
-      params: {
+        { label: 'MySQL', value: 'MySQL' },
-        size: 99
+        { label: 'Oracle', value: 'Oracle' },
-      },
+        { label: 'SQL Server', value: 'SQL Server' },
-      labelField: 'type',
+        { label: 'PostgreSQL', value: 'PostgreSQL' },
-      valueField: 'id',
+      ],
-      resultField: 'data'
     }
   }
 ];