feat(other): 事件编辑页面优化

src/constants/business.ts

@@ -127,3 +127,19 @@ export const IndicatorsOptions: Common.OptionWithKey<BackgroundEvent.IsShowKey>[
   { value: 1, label: IndicatorsIsShowLabels['1'] },
   { value: 2, label: IndicatorsIsShowLabels['2'] }
 ];
+
+export const EditSelectBoxIsShow: Common.OptionWithKey<number>[] = [
+  { label: '是', value: 1 },
+  { label: '否', value: 2 }
+];
+
+export const EditSelectBoxShowLine: Common.OptionWithKey<number>[] = [
+  { label: '1行', value: 1 },
+  { label: '2行', value: 2 },
+  { label: '3行', value: 3 }
+];
+
+export const EditSelectBoxDataSource: Common.OptionWithKey<number>[] = [
+  { label: '录入', value: 1 },
+  { label: '自动生成', value: 2 }
+];

src/service/api/event.ts

@@ -36,6 +36,14 @@ export const fetchEventList = async (page: number, page_size: number, name: stri
   return adapter(adapterOfFetchEventList, data);
 };
 
+export const fetchEventAdd = (params: ApiBackground.Event) => {
+  return backgroundRequest.post<ApiBoolean.OK | null>('/kpt/event/add', params);
+};
+
+export const fetchEventEdit = (param: ApiBackground.Event) => {
+  return backgroundRequest.post<ApiBoolean.OK | null>('/kpt/event/edit', param);
+};
+
 export const fetchEventDelete = (eventId: number) => {
   return backgroundRequest.post<ApiBoolean.OK | null>('/kpt/event/delete', { id: eventId });
 };
@@ -60,3 +68,7 @@ export const fetchIndicatorsEdit = (param: ApiBackground.Indicators) => {
 export const fetchIndicatorsDelete = (fieldId: number) => {
   return backgroundRequest.post<ApiBoolean.OK | null>('/kpt/indicators/delete', { id: fieldId });
 };
+
+export const basicEvent = (eventName: string) => {
+  return backgroundRequest.get<ApiBackground.BasicCowField[] | null>(`/basic/table/${eventName}`);
+};

src/typings/basic.d.ts

@@ -0,0 +1,37 @@
+declare namespace ApiBackground {
+  interface BasicCowField {
+    /** 字段名 */
+    label: string | null;
+    value: string | null;
+  }
+
+  interface BasicSelectValue {
+    /** 字段名 */
+    label: string | null;
+    value: number | null;
+  }
+}
+
+declare namespace RowField {
+  interface Data {
+    is_required: number;
+    field_id: number;
+    field_name: string;
+    column_name: string;
+    data_source: number;
+    is_list: number;
+    is_details: number;
+    show_line: number;
+  }
+}
+
+declare namespace EditSelectBox {
+  interface Data {
+    cowFieldData: ApiBackground.BasicCowField[] | null;
+    isRequired: ApiBackground.BasicSelectValue[] | null;
+    dataSource: ApiBackground.BasicSelectValue[] | null;
+    isList: ApiBackground.BasicSelectValue[] | null;
+    isDetails: ApiBackground.BasicSelectValue[] | null;
+    showLine: ApiBackground.BasicSelectValue[] | null;
+  }
+}

src/typings/event.d.ts

@@ -21,7 +21,6 @@ declare namespace ApiBackground {
     /**
      * 事件执行的条件
      */
-    conditions: string | null;
-    event_field: [] | null;
+    event_field: RowField.Data[] | null;
   }
 }

src/views/background/event/components/select-box.vue

@@ -0,0 +1,38 @@
+<template>
+  <n-select
+    v-model:value="selectValue"
+    size="large"
+    :options="getOptions"
+    style="width: 120px"
+    @update:value="handleUpdateValue"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent, computed, onMounted, ref } from 'vue';
+export default defineComponent({
+  props: {
+    fieldOptions: {
+      type: null,
+      default: null,
+      required: true
+    }
+  },
+  setup(props, { emit }) {
+    onMounted(() => {
+      // console.log(props);
+    });
+    const getOptions = computed(() => {
+      return props.fieldOptions;
+    });
+    // const emit = defineEmits(["updateTableValue"]);
+    return {
+      getOptions,
+      selectValue: ref(null),
+      handleUpdateValue(value: string) {
+        emit('updateTableValue', value);
+      }
+    };
+  }
+});
+</script>

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

@@ -1,5 +1,5 @@
 <template>
-  <n-modal v-model:show="modalVisible" preset="card" :title="title" class="w-700px">
+  <n-modal v-model:show="modalVisible" preset="card" :title="title" style="width: 70%">
     <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="name">
@@ -14,6 +14,10 @@
           <n-input v-model:value="formModel.remarks" type="textarea" placeholder="请输入字段描述" />
         </n-form-item-grid-item>
       </n-grid>
+      <n-space style="display: flex; flex-direction: column">
+        <n-button type="primary" @click="addEventField">添加事件字段</n-button>
+        <n-data-table :columns="columns" :data="tableData" :pagination="pagination" />
+      </n-space>
       <n-space class="w-full pt-16px" :size="25" justify="end">
         <n-button class="w-72px" @click="closeModal">取消</n-button>
         <n-button class="w-72px" type="primary" @click="handleSubmit">确定</n-button>
@@ -23,12 +27,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, reactive, watch } from 'vue';
-import type { FormInst, FormItemRule } from 'naive-ui';
-import { NButton } from 'naive-ui';
-import { EventIsShowOptions } from '@/constants';
+import { ref, computed, reactive, watch, h } from 'vue';
+import type { FormInst, FormItemRule, DataTableColumns, PaginationProps } from 'naive-ui';
+import { NButton, NTag, NInput } from 'naive-ui';
+import { EditSelectBoxDataSource, EditSelectBoxIsShow, EditSelectBoxShowLine, EventIsShowOptions } from '@/constants';
 import { createRequiredFormRule } from '@/utils';
-
+import { basicEvent, fetchEventAdd, fetchEventEdit } from '@/service/api/event';
+import SelectBox from './select-box.vue';
 export interface Props {
   /** 弹窗可见性 */
   visible: boolean;
@@ -66,37 +71,62 @@ const modalVisible = computed({
   }
 });
 const closeModal = () => {
+  // eslint-disable-next-line @typescript-eslint/no-use-before-define
+  tableData.value = [];
   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<BackgroundEvent.Event, 'name' | 'is_show' | 'remarks' | 'conditions' | 'event_field'>;
+type FormModel = Pick<BackgroundEvent.Event, 'name' | 'is_show' | 'remarks' | 'event_field' | 'is_delete' | 'id'>;
 
 const formModel = reactive<FormModel>(createDefaultFormModel());
 
 const rules: Record<keyof FormModel, FormItemRule | FormItemRule[]> = {
   name: createRequiredFormRule('请输入事件名称'),
-  is_show: createRequiredFormRule('是否启用'),
+  is_show: createRequiredFormRule('请选择是否启用'),
+  is_delete: createRequiredFormRule('请选择是否删除'),
   remarks: createRequiredFormRule('请输入事件描述'),
-  conditions: createRequiredFormRule('请输入事件执行条件'),
-  event_field: createRequiredFormRule('请输入事件关联字段')
+  event_field: createRequiredFormRule('请输入事件关联字段'),
+  id: createRequiredFormRule('请输入事件id')
 };
 
+const selectBoxData: EditSelectBox.Data = {
+  cowFieldData: [],
+  isDetails: EditSelectBoxIsShow,
+  isList: EditSelectBoxIsShow,
+  dataSource: EditSelectBoxDataSource,
+  isRequired: EditSelectBoxIsShow,
+  showLine: EditSelectBoxShowLine
+};
+
+function setCowFieldData(data: ApiBackground.BasicCowField[] | null) {
+  selectBoxData.cowFieldData = data;
+}
+
+function getCowFieldData() {
+  const data = basicEvent('animals_cow');
+  data.then(res => {
+    setCowFieldData(res.data);
+  });
+}
+
 function createDefaultFormModel(): FormModel {
   return {
+    id: 0,
     name: '',
-    is_show: null,
+    is_show: 1,
+    is_delete: 2,
     remarks: '',
-    conditions: '',
     event_field: null
   };
 }
@@ -114,6 +144,12 @@ function handleUpdateFormModelByModalType() {
     edit: () => {
       if (props.editData) {
         handleUpdateFormModel(props.editData);
+        if (props.editData.event_field) {
+          props.editData.event_field.forEach((value, index) => {
+            console.log(value);
+            console.log(index);
+          });
+        }
       }
     }
   };
@@ -121,9 +157,194 @@ function handleUpdateFormModelByModalType() {
   handlers[props.type]();
 }
 
+const pagination: PaginationProps = reactive({
+  page: 1,
+  pageSize: 10,
+  showSizePicker: true,
+  pageSizes: [10, 15, 20, 25, 30],
+  onChange: (page: number) => {
+    pagination.page = page;
+  },
+  onUpdatePageSize: (pageSize: number) => {
+    pagination.pageSize = pageSize;
+    pagination.page = 1;
+  }
+});
+const createData = (): RowField.Data[] => [
+  {
+    is_required: 1,
+    field_id: 0,
+    field_name: '',
+    column_name: '',
+    data_source: 1,
+    is_list: 1,
+    is_details: 1,
+    show_line: 1
+  }
+];
+const tableData = ref(createData());
+const createColumns = (): DataTableColumns<RowField.Data> => [
+  {
+    title: '序号',
+    key: 'orderNum',
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    render(row, index) {
+      return h(
+        NTag,
+        {
+          style: {
+            marginRight: '6px',
+            background: 'none',
+            color: 'rgb(31, 34, 37)'
+          },
+          type: 'info',
+          bordered: false
+        },
+        {
+          default: () => index + 1
+        }
+      );
+    }
+  },
+  {
+    title: '字段名称',
+    key: 'columnName',
+    maxWidth: 300,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    render(row, index) {
+      return h(SelectBox, {
+        fieldOptions: selectBoxData.cowFieldData,
+        onUpdateTableValue(value: string) {
+          tableData.value[index].column_name = value;
+        }
+      });
+    }
+  },
+  {
+    title: '是否必选/填',
+    key: 'isRequired',
+    maxWidth: 100,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    render(row, index) {
+      return h(SelectBox, {
+        fieldOptions: selectBoxData.isRequired,
+        onUpdateTableValue(value: number) {
+          tableData.value[index].is_required = value;
+        }
+      });
+    }
+  },
+  {
+    title: '数据来源',
+    key: 'dataSource',
+    maxWidth: 200,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    render(row, index) {
+      return h(SelectBox, {
+        fieldOptions: selectBoxData.dataSource,
+        onUpdateTableValue(value: number) {
+          tableData.value[index].data_source = value;
+        }
+      });
+    }
+  },
+  {
+    title: '列表是否可见',
+    key: 'isList',
+    maxWidth: 200,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    render(row, index) {
+      return h(SelectBox, {
+        fieldOptions: selectBoxData.isList,
+        onUpdateTableValue(value: number) {
+          tableData.value[index].is_list = value;
+        }
+      });
+    }
+  },
+  {
+    title: '详情页是否可见',
+    key: 'isDetails',
+    maxWidth: 200,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    render(row, index) {
+      return h(SelectBox, {
+        fieldOptions: selectBoxData.isDetails,
+        onUpdateTableValue(value: number) {
+          tableData.value[index].is_details = value;
+        }
+      });
+    }
+  },
+  {
+    title: '显示分布',
+    key: 'showLine',
+    maxWidth: 200,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    render(row, index) {
+      return h(SelectBox, {
+        fieldOptions: selectBoxData.showLine,
+        onUpdateValue(value: number) {
+          tableData.value[index].show_line = value;
+        }
+      });
+    }
+  },
+  {
+    title: '操作',
+    key: 'actions',
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    render(row, index) {
+      return [
+        h(
+          NButton,
+          {
+            // 可在里面写按钮样式
+            text: true,
+            style: { marginRight: '10px', color: 'red' },
+            onClick: () => deleteData(index) // 点击按钮后的回调
+          },
+          { default: () => '删除' } // 按钮显示名称
+        )
+      ];
+    }
+  }
+];
+
+const columns = ref(createColumns());
+// 添加事件字段
+function addEventField() {
+  tableData.value.push(createData()[0]);
+}
+
+// 删除
+function deleteData(indexKey: number) {
+  tableData.value.splice(indexKey, 1);
+}
+
+getCowFieldData();
+
 async function handleSubmit() {
   await formRef.value?.validate();
-  window.$message?.success('新增成功!');
+  formModel.event_field = tableData.value;
+
+  if (props.type === 'add') {
+    const data = fetchEventAdd(formModel);
+    data.then(res => {
+      if (res.data) {
+        window.$message?.success(`${titles[props.type]}成功！`);
+      }
+    });
+  }
+
+  if (props.type === 'edit') {
+    const data = fetchEventEdit(formModel);
+    data.then(res => {
+      if (res.data) {
+        window.$message?.success(`${titles[props.type]}成功！`);
+      }
+    });
+  }
   closeModal();
 }
 

src/views/background/event/index.vue

@@ -185,7 +185,7 @@ function handleEditTable(rowId: number) {
  * 影响设置
  */
 function handleSetting(rowId: number) {
-  console.log(rowId);
+  window.$message?.warning(`${rowId}`);
 }
 
 /*
@@ -228,7 +228,7 @@ function handleSearch() {
   if (!eventName.value) {
     window.$message?.warning('请输入字段名称');
   } else {
-    console.log(eventName.value);
+    window.$message?.warning(eventName.value);
   }
 }