feat(other): 事件条件设置

src/constants/business.ts

@@ -103,3 +103,15 @@ export const componentsTypeOptions: Common.OptionWithKey<BackgroundField.Compone
   { value: 5, label: componentsTypeLabels['5'] },
   { value: 6, label: componentsTypeLabels['6'] }
 ];
+
+export const EventIsShowLabels: Record<BackgroundEvent.IsShowKey, string> = {
+  0: '无效',
+  1: '是',
+  2: '否'
+};
+
+export const EventIsShowOptions: Common.OptionWithKey<BackgroundEvent.IsShowKey>[] = [
+  { value: 0, label: EventIsShowLabels['0'] },
+  { value: 1, label: EventIsShowLabels['1'] },
+  { value: 2, label: EventIsShowLabels['2'] }
+];

src/typings/business.d.ts

@@ -92,5 +92,5 @@ declare namespace BackgroundEvent {
    * 1:是
    * 2: 否
    */
-  type IsShow = NonNullable<Event['is_show']>;
+  type IsShowKey = NonNullable<Event['is_show']>;
 }

src/typings/event.d.ts

@@ -11,13 +11,13 @@ declare namespace ApiBackground {
      * 1:是
      * 2: 否
      */
-    is_show: 1 | 2 | null;
+    is_show: 0 | 1 | 2 | null;
     /**
      * 是否删除
      * 1 是
      * 2 否
      */
-    isDelete: 1 | 2 | null;
+    is_delete: 0 | 1 | 2 | null;
     /**
      * 事件执行的条件
      */

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

@@ -5,14 +5,16 @@
         <n-form-item-grid-item :span="25" label="事件名称" path="name">
           <n-input v-model:value="formModel.name" />
         </n-form-item-grid-item>
-        <!--        <n-form-item-grid-item :span="25" label="是否启用" path="isShow">
-          <n-switch v-model:value="formModel.is_show" />
-        </n-form-item-grid-item>-->
+        <n-form-item-grid-item :span="25" label="是否启用" path="is_show">
+          <n-radio-group v-model:value="formModel.is_show">
+            <n-radio v-for="item in EventIsShowOptions" :key="item.value" :value="item.value">{{ item.label }}</n-radio>
+          </n-radio-group>
+        </n-form-item-grid-item>
         <n-form-item-grid-item :span="25" label="事件描述" path="remarks">
           <n-input v-model:value="formModel.remarks" />
         </n-form-item-grid-item>
       </n-grid>
-      <n-space class="w-full pt-16px" :size="24" justify="end">
+      <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>
       </n-space>
@@ -23,6 +25,7 @@
 <script setup lang="ts">
 import { ref, computed, reactive, watch } from 'vue';
 import type { FormInst, FormItemRule } from 'naive-ui';
+import { EventIsShowOptions } from '@/constants';
 import { createRequiredFormRule } from '@/utils';
 
 export interface Props {
@@ -89,7 +92,7 @@ const rules: Record<keyof FormModel, FormItemRule | FormItemRule[]> = {
 function createDefaultFormModel(): FormModel {
   return {
     name: '',
-    is_show: 1,
+    is_show: null,
     remarks: '',
     conditions: ''
   };

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

@@ -0,0 +1,28 @@
+<template>
+  <n-space :vertical="true" :size="16">
+    <n-card title="Tab Detail" :bordered="false" size="small" class="shadow-sm rounded-16px">
+      <n-space :vertical="true" :size="12">
+        <div>当前路由的描述数据(meta)：</div>
+        <div>{{ route.meta }}</div>
+        <div>当前路由的查询数据(query)：</div>
+        <div>{{ route.query }}</div>
+        <n-button @click="handleToTab">返回Tab</n-button>
+      </n-space>
+    </n-card>
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import { useRoute } from 'vue-router';
+import { routeName } from '@/router';
+import { useRouterPush } from '@/composables';
+
+const route = useRoute();
+const { routerPush } = useRouterPush();
+
+function handleToTab() {
+  routerPush({ name: routeName('function_tab') });
+}
+</script>
+
+<style scoped></style>

src/views/background/event/index.vue

@@ -32,8 +32,11 @@
 <script setup lang="tsx">
 import { reactive, ref } from 'vue';
 import type { Ref } from 'vue';
-import { NButton, NPopconfirm, NSpace } from 'naive-ui';
+import { NButton, NPopconfirm, NSpace, NTag } from 'naive-ui';
 import type { DataTableColumns, PaginationProps } from 'naive-ui';
+import { EventIsShowLabels } from '@/constants';
+import { routeName } from '@/router';
+import { useRouterPush } from '@/composables';
 import { useBoolean, useLoading } from '@/hooks';
 import { fetchEventDelete, fetchEventList } from '@/service/api/event';
 import TableActionModal from './components/table-action-modal.vue';
@@ -43,6 +46,8 @@ const { loading, startLoading, endLoading } = useLoading(false);
 const { bool: visible, setTrue: openModal } = useBoolean();
 const eventName = ref('');
 const tableData = ref<BackgroundEvent.Event[]>([]);
+const { routerPush } = useRouterPush();
+
 function setTableData(data: BackgroundEvent.Event[]) {
   tableData.value = data;
 }
@@ -76,7 +81,20 @@ const columns: Ref<DataTableColumns<BackgroundEvent.Event>> = ref([
   {
     key: 'is_show',
     title: '是否启用',
-    align: 'center'
+    align: 'center',
+    render: row => {
+      if (row.is_show) {
+        const tagTypes: Record<BackgroundEvent.IsShowKey, NaiveUI.ThemeColor> = {
+          '0': 'error',
+          '1': 'success',
+          '2': 'warning'
+        };
+
+        return <NTag type={tagTypes[row.is_show]}>{EventIsShowLabels[row.is_show]}</NTag>;
+      }
+
+      return <span></span>;
+    }
   },
   {
     key: 'remarks',
@@ -90,7 +108,7 @@ const columns: Ref<DataTableColumns<BackgroundEvent.Event>> = ref([
     render: row => {
       return (
         <NSpace justify={'center'}>
-          <NButton type="info" size={'small'} onClick={() => handleEditTable(row.id)}>
+          <NButton type="info" size={'small'} onClick={() => handleCondition(row.id)}>
             设置
           </NButton>
         </NSpace>
@@ -107,7 +125,7 @@ const columns: Ref<DataTableColumns<BackgroundEvent.Event>> = ref([
           <NButton type="info" size={'small'} onClick={() => handleEditTable(row.id)}>
             编辑
           </NButton>
-          <NButton type="warning" size={'small'} onClick={() => handleEditTable(row.id)}>
+          <NButton type="warning" size={'small'} onClick={() => handleSetting(row.id)}>
             影响设置
           </NButton>
           <NPopconfirm onPositiveClick={() => handleDeleteTable(row.id)}>
@@ -152,6 +170,26 @@ function handleEditTable(rowId: number) {
   openModal();
 }
 
+/**
+ * 影响设置
+ */
+function handleSetting(rowId: number) {
+  console.log(rowId);
+}
+
+/*
+ * 执行条件设置
+ */
+function handleCondition(rowId: number) {
+  const findItem = tableData.value.find(item => item.id === rowId);
+  if (findItem) {
+    setEditData(findItem);
+  }
+  routerPush({ name: routeName('function_tab-detail'), query: { name: 'abc' }, hash: '#DEMO_HASH' });
+
+  openModal();
+}
+
 function handleDeleteTable(rowId: number) {
   const data = fetchEventDelete(rowId);
   data.then(res => {