chore: 样式调整

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

@@ -1,95 +1,145 @@
 <template>
   <BasicModal
     v-bind="$attrs"
-    width="720px"
+    width="820px"
     @register="registerModal"
     @ok="handleSubmit"
   >
     <BasicForm @register="registerForm"/>
+    <BasicTable @register="genTableFieldTypeRegisterTable">
+      <template #toolbar>
+        <a-button
+          type="primary"
+          @click="handleAdd()"
+        >新增</a-button>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                label: '查看',
+                icon: 'fa-regular:eye',
+                onClick: handleViewEdit.bind(null, record)
+              },
+              {
+                label: '编辑',
+                icon: 'fa6-regular:pen-to-square',
+                onClick: handleEdit.bind(null, record)
+              },
+              {
+                label: '删除',
+                icon: 'ant-design:delete-outlined',
+                color: 'error',
+                onClick: handleDel.bind(null, record)
+              }]"
+          />
+        </template>
+      </template>
+    </BasicTable>
+    <GenTableFieldTypeModal @register="genTableFieldTypeRegisterModal" @success="handleGenTableFieldType"/>
   </BasicModal>
 </template>
 <script lang="ts" setup>
   import { ref, unref } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form/index';
-  import { formSchema } from './genDataBaseType.data';
-  import { addClient, editClient, getClient, listClient } from '/@/api/platform/system/controller/client';
-  import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
-  import { isEmpty } from '/@/utils/is';
+  import { formSchema, genTableFieldTypeReloadColumns } from './genDataBaseType.data';
+  import { editGenDatabaseType, 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';
 
   /** 通用变量统一声明区域 */
   const tag = ref<Nullable<string>>('');
+  const { createConfirm, createMessage } = useMessage();
   /** https://v3.cn.vuejs.org/api/options-data.html#emits */
   const emit = defineEmits(['success', 'register']);
-  const [registerForm, { resetFields, setFieldsValue, validate, clearValidate, updateSchema }] = useForm({
+  const [genTableFieldTypeRegisterModal, { openModal: genTableFieldTypeOpenModal }] = useModal();
+  const [registerForm, { resetFields, setFieldsValue, validate, clearValidate, setProps }] = useForm({
     labelWidth: 100,
     schemas: formSchema,
     showActionButtonGroup: false,
     baseColProps: { span: 24 }
   });
+  const [genTableFieldTypeRegisterTable] = useTable({
+    dataSource: [],
+    rowKey: 'id',
+    columns: genTableFieldTypeReloadColumns,
+    useSearchForm: false,
+    showTableSetting: false,
+    bordered: true,
+    pagination: false,
+    clickToRowSelect: false,
+    showIndexColumn: false,
+    actionColumn: {
+      width: 220,
+      title: '操作',
+      dataIndex: 'action',
+      fixed: false
+    },
+  });
   const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: BoxPayload = { _tag: '' }) => {
     // 处理清除脏数据
     await resetFields();
     await clearValidate();
+    await setProps({ disabled: false });
     // 处理设置数据
     tag.value = data._tag;
-    const clientId = data.record?.clientId;
+    const id = data.record?.id;
     const props: Partial<ModalProps> = { confirmLoading: false };
-    await updateSchema({
-      field: 'clientId',
-      componentProps: {
-        disabled: unref(tag) != 'add'
-      },
-      rules: [
-        {
-          required: true,
-          whitespace: true,
-          message: '请输入客户端编码'
-        },
-        {
-          validator: async (rule, value) => {
-            if (!isEmpty(value)) {
-              const result = await listClient({ clientId: value });
-              const list = result.data?.filter(item => item.clientId != clientId);
-              if(list?.length > 0) return Promise.reject('该客户端编码已存在');
-            }
-            return Promise.resolve();
-          },
-          validateTrigger: 'blur'
-        }]
-    });
     // 采用tag标签区分操作
     switch (unref(tag)) {
       case 'add':
-        props.title = '新增客户端';
+        props.title = '新建数据库字段类型';
         break;
       case 'view':
-        props.title = '查看客户端';
+        props.title = '查看数据库字段类型';
+        await setProps({ disabled: true });
         break;
       case 'edit':
-        props.title = '编辑客户端';
-        await setFieldsValue(await getClient(clientId));
+        props.title = '编辑数据库字段类型';
+        await setFieldsValue(await getGenDatabaseType(id));
         break;
     }
     // 尾部:设置处理后的最终配置数据
     setModalProps(props);
   });
 
-  /** 处理弹出框提交 */
+  function handleAdd() {
+    genTableFieldTypeOpenModal(true,{ _tag: 'add' });
+  }
+
+  function handleEdit(record: Recordable) {
+    genTableFieldTypeOpenModal(true, { _tag: 'edit', record });
+  }
+
+  function handleViewEdit(record: Recordable) {
+    genTableFieldTypeOpenModal(true, { _tag: 'view', record });
+  }
+
+  async function handleDel(record: Recordable) {
+    createConfirm({
+      iconType: 'warning',
+      title: '警告',
+      content: `是否确认删除标签为${record.lable}的数据?`,
+      onOk: async () => {
+
+      }
+    });
+  }
+
+  function handleGenTableFieldType(record: Recordable) {
+
+  }
+
   async function handleSubmit() {
     try {
       // 提取验证数据
       const formData = await validate();
       // 处理提交之前逻辑
       setModalProps({ confirmLoading: true });
-      // 采用tag标签区分操作
-      switch (unref(tag)) {
-        case 'add':
-          await addClient(formData);
-          break;
-        case 'edit':
-          await editClient(formData);
-          break;
-      }
+      await editGenDatabaseType(formData);
       // 处理提交完成之后逻辑
       closeModal();
       emit('success');

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

@@ -0,0 +1,69 @@
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    width="720px"
+    :bodyStyle="{ 'margin-top': '25px' }"
+    @register="registerModal"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm"/>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, unref } 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>>('');
+  /** https://v3.cn.vuejs.org/api/options-data.html#emits */
+  const emit = defineEmits(['success', 'register']);
+  const [registerForm, { resetFields, setFieldsValue, validate, clearValidate, setProps }] = useForm({
+    labelWidth: 80,
+    schemas: formSchemaGenTableFieldType,
+    showActionButtonGroup: false,
+    baseColProps: { span: 24 }
+  });
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: BoxPayload = { _tag: '' }) => {
+    // 处理清除脏数据
+    await resetFields();
+    await clearValidate();
+    await setProps({ disabled: false });
+    // 处理设置数据
+    tag.value = data._tag;
+    const props: Partial<ModalProps> = { confirmLoading: false };
+    // 采用tag标签区分操作
+    switch (unref(tag)) {
+      case 'add':
+        props.title = '新增表字段物理类型';
+        break;
+      case 'view':
+        props.title = '查看表字段物理类型';
+        await setProps({ disabled: true });
+        break;
+      case 'edit':
+        props.title = '编辑表字段物理类型';
+        await setFieldsValue(cloneDeep(Object(data.record)));
+        break;
+    }
+    // 尾部:设置处理后的最终配置数据
+    setModalProps(props);
+  });
+
+  /** 处理弹出框提交 */
+  async function handleSubmit() {
+    try {
+      // 提取验证数据
+      const formData = await validate();
+      // 处理提交之前逻辑
+      setModalProps({ confirmLoading: true });
+      // 处理提交完成之后逻辑
+      closeModal();
+      emit('success', formData);
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>

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

@@ -35,42 +35,47 @@ export const formSchema: FormSchema[] = [
     show: false
   },
   {
-    field: 'nickName',
-    label: '昵称',
-    component: 'Input',
-  },
+    field: 'typeId',
+    label: '数据库类型',
+    component: 'ApiSelect',
+    colProps: { span: 16 },
+    componentProps: {
+      api: listGenDatabaseType,
+      params: {
+        size: 99
+      },
+      labelField: 'type',
+      valueField: 'id',
+      resultField: 'data'
+    }
+  }
+];
+
+export const formSchemaGenTableFieldType: FormSchema[] = [
   {
-    field: 'deptName',
-    label: '所属部门',
+    field: 'id',
+    label: 'ID',
     component: 'Input',
-    colProps: {
-      span: 12
-    },
+    show: false
   },
   {
-    field: 'sex',
-    label: '性别',
-    component: 'Select',
-    colProps: {
-      span: 12
-    },
-    componentProps: {
-      options: [
-        { label: '男', value: '0' },
-        { label: '女', value: '1' }
-      ]
-    },
+    field: 'label',
+    label: '标签',
+    component: 'Input',
+    required: true
   },
   {
-    field: 'phone',
-    label: '手机号',
+    field: 'value',
+    label: '值',
     component: 'Input',
+    required: true
   },
   {
-    field: 'email',
-    label: '邮箱',
+    field: 'sort',
+    label: '排序',
     component: 'Input',
-  },
+    required: true
+  }
 ];
 
 export const genTableFieldTypeReloadColumns: BasicColumn[] = [