feat(other): 字段管理增删改业务

src/service/api/event.adapter.ts

@@ -1,9 +1,9 @@
 export function adapterOfFetchFieldList(data: ApiBackground.Field[] | null): BackgroundField.Field[] {
   if (!data) return [];
 
-  return data.map((item, index) => {
+  return data.map(item => {
     const user: BackgroundField.Field = {
-      index: index + 1,
+      index: item.id,
       key: item.id,
       ...item
     };

src/service/api/event.ts

@@ -13,6 +13,17 @@ export const fetchFieldList = async (page: number, page_size: number, name: stri
   return adapter(adapterOfFetchFieldList, data);
 };
 
+export const fetchFieldAdd = (params: ApiBackground.Field[]) => {
+  return backgroundRequest.post<ApiBoolean.OK | null>('/kpt/field/add', params);
+};
+
+export const fetchFieldEdit = (param: ApiBackground.Field) => {
+  return backgroundRequest.post<ApiBoolean.OK | null>('/kpt/field/edit', param);
+};
+
+export const fetchFieldDelete = (fieldId: number) => {
+  return backgroundRequest.post<ApiBoolean.OK | null>('/kpt/field/delete', { id: fieldId });
+};
 export const fetchEventList = async () => {
   const data = await backgroundRequest.post<ApiBackground.Event[] | null>('/kpt/event/search');
   return adapter(adapterOfFetchEventList, data);

src/service/request/instance.ts

@@ -30,7 +30,7 @@ export default class CustomAxiosInstance {
     backendConfig: Service.BackendResultConfig = {
       codeKey: 'code',
       dataKey: 'data',
-      msgKey: 'message',
+      msgKey: 'msg',
       successCode: 200
     }
   ) {

src/typings/business.d.ts

@@ -63,7 +63,7 @@ declare namespace BackgroundField {
    * 6 时间选择器
    * 7 开关
    */
-  type ComponentsTypeKey = NonNullable<Field['componentsType']>;
+  type ComponentsTypeKey = NonNullable<Field['components_type']>;
 
   /**
    * 字段类型
@@ -75,7 +75,7 @@ declare namespace BackgroundField {
    * 5 bool类型
    * 6 整数类型
    */
-  type FieldTypeKey = NonNullable<Field['fieldType']>;
+  type FieldTypeKey = NonNullable<Field['field_type']>;
 }
 
 declare namespace BackgroundEvent {

src/typings/field.d.ts

@@ -3,8 +3,8 @@ declare namespace ApiBackground {
     /** id */
     id: number;
     /** 字段名 */
-    fieldName: string | null;
-    columnName: string | null;
+    field_name: string | null;
+    column_name: string | null;
     /**
      * 组件类型
      * 0 单行文本
@@ -16,7 +16,7 @@ declare namespace ApiBackground {
      * 6 时间选择器
      * 7 开关
      */
-    componentsType: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | null;
+    components_type: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | null;
     /**
      * 字段类型
      * 0 无效类型
@@ -27,22 +27,28 @@ declare namespace ApiBackground {
      * 5 bool类型
      * 6 整数类型
      */
-    fieldType: 0 | 1 | 2 | 3 | 4 | 5 | 6 | null;
+    field_type: 0 | 1 | 2 | 3 | 4 | 5 | 6 | null;
     /**
      * 字段长度
      */
-    filedLen: number | 0;
+    field_len: number | 0;
     /**
      * 最大值
      */
-    minValue: number | 0;
+    min_value: number | 0;
     /**
      * 最小值
      */
-    maxValue: number | 0;
+    max_value: number | 0;
     /**
      * 字段描述
      */
     description: string | null;
   }
 }
+
+declare namespace ApiBoolean {
+  interface OK {
+    success: boolean;
+  }
+}

src/views/background/event/components/table-action-modal.vue

@@ -114,7 +114,6 @@ function handleUpdateFormModelByModalType() {
 
 async function handleSubmit() {
   await formRef.value?.validate();
-  console.log('===========formRef=====>', formRef);
   window.$message?.success('新增成功!');
   closeModal();
 }

src/views/background/field/components/table-action-modal.vue

@@ -3,25 +3,25 @@
     <n-form ref="formRef" label-placement="left" :label-width="80" :model="formModel" :rules="rules">
       <n-grid :cols="48" :x-gap="18">
         <n-form-item-grid-item :span="25" label="字段名称" path="fieldName">
-          <n-input v-model:value="formModel.fieldName" />
+          <n-input v-model:value="formModel.field_name" />
         </n-form-item-grid-item>
         <n-form-item-grid-item :span="25" label="SQL名称" path="columnName">
-          <n-input v-model:value="formModel.columnName" />
+          <n-input v-model:value="formModel.column_name" />
         </n-form-item-grid-item>
         <n-form-item-grid-item :span="25" label="字段类型" path="fieldType">
-          <n-select v-model:value="formModel.fieldType" :options="fieldTypeOptions" />
+          <n-select v-model:value="formModel.field_type" :options="fieldTypeOptions" />
         </n-form-item-grid-item>
         <n-form-item-grid-item :span="25" label="组件类型" path="componentsType">
-          <n-select v-model:value="formModel.componentsType" :options="componentsTypeOptions" />
+          <n-select v-model:value="formModel.components_type" :options="componentsTypeOptions" />
         </n-form-item-grid-item>
         <n-form-item-grid-item :span="25" label="字段长度" path="filedLen">
-          <n-input-number v-model:value="formModel.filedLen" clearable />
+          <n-input-number v-model:value="formModel.field_len" clearable />
         </n-form-item-grid-item>
         <n-form-item-grid-item :span="25" label="最小值" path="minValue">
-          <n-input-number v-model:value="formModel.minValue" clearable />
+          <n-input-number v-model:value="formModel.min_value" clearable />
         </n-form-item-grid-item>
         <n-form-item-grid-item :span="25" label="最大值" path="maxValue">
-          <n-input-number v-model:value="formModel.maxValue" clearable />
+          <n-input-number v-model:value="formModel.max_value" clearable />
         </n-form-item-grid-item>
         <n-form-item-grid-item :span="25" label="字段描述" path="description">
           <n-input v-model:value="formModel.description" />
@@ -40,6 +40,7 @@ import { ref, computed, reactive, watch } from 'vue';
 import type { FormInst, FormItemRule } from 'naive-ui';
 import { componentsTypeOptions, fieldTypeOptions } from '@/constants';
 import { createRequiredFormRule } from '@/utils';
+import { fetchFieldAdd, fetchFieldEdit } from '@/service/api/event';
 
 export interface Props {
   /** 弹窗可见性 */
@@ -80,44 +81,54 @@ const modalVisible = computed({
 const closeModal = () => {
   modalVisible.value = false;
 };
+const titles: Record<ModalType, string> = {
+  add: '添加字段',
+  edit: '编辑字段'
+};
 
 const title = computed(() => {
-  const titles: Record<ModalType, string> = {
-    add: '添加用户',
-    edit: '编辑用户'
-  };
   return titles[props.type];
 });
 
 const formRef = ref<HTMLElement & FormInst>();
 
 type FormModel = Pick<
-  BackgroundField.Field,
-  'fieldName' | 'columnName' | 'componentsType' | 'fieldType' | 'filedLen' | 'minValue' | 'maxValue' | 'description'
+  ApiBackground.Field,
+  | 'field_name'
+  | 'column_name'
+  | 'components_type'
+  | 'field_type'
+  | 'field_len'
+  | 'min_value'
+  | 'max_value'
+  | 'description'
+  | 'id'
 >;
 
 const formModel = reactive<FormModel>(createDefaultFormModel());
 
 const rules: Record<keyof FormModel, FormItemRule | FormItemRule[]> = {
-  fieldName: createRequiredFormRule('请输入字段名'),
-  columnName: createRequiredFormRule('请输入sql名称'),
-  componentsType: createRequiredFormRule('请选择组件类型'),
-  fieldType: createRequiredFormRule('请选择字段类型'),
-  filedLen: createRequiredFormRule('请输入字段的长度'),
-  minValue: createRequiredFormRule('请输入字段最小值'),
-  maxValue: createRequiredFormRule('请输入字段最大值'),
-  description: createRequiredFormRule('请输入字段描述')
+  field_name: createRequiredFormRule('请输入字段名'),
+  column_name: createRequiredFormRule('请输入sql名称'),
+  components_type: createRequiredFormRule('请选择组件类型'),
+  field_type: createRequiredFormRule('请选择字段类型'),
+  field_len: createRequiredFormRule('请输入字段的长度'),
+  min_value: createRequiredFormRule('请输入字段最小值'),
+  max_value: createRequiredFormRule('请输入字段最大值'),
+  description: createRequiredFormRule('请输入字段描述'),
+  id: createRequiredFormRule()
 };
 
 function createDefaultFormModel(): FormModel {
   return {
-    fieldName: '',
-    columnName: '',
-    componentsType: null,
-    fieldType: null,
-    filedLen: 0,
-    minValue: 0,
-    maxValue: 0,
+    id: 0,
+    field_name: '',
+    column_name: '',
+    components_type: null,
+    field_type: null,
+    field_len: 0,
+    min_value: 0,
+    max_value: 0,
     description: ''
   };
 }
@@ -143,9 +154,26 @@ function handleUpdateFormModelByModalType() {
 }
 
 async function handleSubmit() {
-  await formRef.value?.validate();
-  console.log('===========formRef=====>', formRef);
-  window.$message?.success('新增成功!');
+  formRef.value?.validate();
+  const params: Array<ApiBackground.Field> = [formModel];
+
+  if (props.type === 'add') {
+    const data = fetchFieldAdd(params);
+    data.then(res => {
+      if (res.data) {
+        window.$message?.success(`${titles[props.type]}成功！`);
+      }
+    });
+  }
+
+  if (props.type === 'edit') {
+    const data = fetchFieldEdit(formModel);
+    data.then(res => {
+      if (res.data) {
+        window.$message?.success(`${titles[props.type]}成功！`);
+      }
+    });
+  }
   closeModal();
 }
 

src/views/background/field/index.vue

@@ -35,7 +35,7 @@ import type { Ref } from 'vue';
 import { NButton, NPopconfirm, NSpace } from 'naive-ui';
 import type { DataTableColumns, PaginationProps } from 'naive-ui';
 import { useBoolean, useLoading } from '@/hooks';
-import { fetchFieldList } from '@/service/api/event';
+import { fetchFieldDelete, fetchFieldList } from '@/service/api/event';
 import TableActionModal from './components/table-action-modal.vue';
 import type { ModalType } from './components/table-action-modal.vue';
 
@@ -49,7 +49,7 @@ function setTableData(data: BackgroundField.Field[]) {
 
 async function getTableData() {
   startLoading();
-  const { data } = await fetchFieldList(1, 10, fieldName.value);
+  const { data } = await fetchFieldList(1, 100, fieldName.value);
   if (data) {
     setTimeout(() => {
       setTableData(data);
@@ -69,35 +69,45 @@ const columns: Ref<DataTableColumns<BackgroundField.Field>> = ref([
     align: 'center'
   },
   {
-    key: 'fieldName',
+    key: 'column_name',
+    title: 'SQL名称',
+    align: 'center'
+  },
+  {
+    key: 'field_name',
     title: '字段名称',
     align: 'center'
   },
   {
-    key: 'fieldType',
+    key: 'field_type',
     title: '字段类型',
     align: 'center'
   },
   {
-    key: 'componentsType',
+    key: 'components_type',
     title: '组件类型',
     align: 'center'
   },
   {
-    key: 'filedLen',
+    key: 'field_len',
     title: '字段长度',
     align: 'center'
   },
   {
-    key: 'minValue',
+    key: 'min_value',
     title: '最小值',
     align: 'center'
   },
   {
-    key: 'maxValue',
+    key: 'max_value',
     title: '最大值',
     align: 'center'
   },
+  {
+    key: 'description',
+    title: '字段描述',
+    align: 'center'
+  },
   {
     key: 'actions',
     title: '操作',
@@ -147,7 +157,13 @@ function handleEditTable(rowId: number) {
 }
 
 function handleDeleteTable(rowId: number) {
-  window.$message?.info(`点击了删除，rowId为${rowId}`);
+  const data = fetchFieldDelete(rowId);
+  data.then(res => {
+    if (res.data) {
+      window.$message?.success('删除成功！');
+    }
+  });
+  init();
 }
 
 const pagination: PaginationProps = reactive({
@@ -169,6 +185,13 @@ function handleSearch() {
     window.$message?.warning('请输入字段名称');
   } else {
     startLoading();
+    /* let data = fetchFieldList(1, 10, fieldName.value);
+		if (data) {
+			setTimeout(() => {
+				setTableData(data);
+				endLoading();
+			}, 1000);
+		} */
   }
 }