feat: 通知模板调试新增表格字段验证

src/api/notice/template.ts

@@ -11,8 +11,8 @@ export default {
     // 修改
     update: (data: any) => patch(`/notifier/template`, data),
     del: (id: any) => remove(`/notifier/template/${id}`),
-    getConfig: (data: any) => post<BindConfig>(`/notifier/config/_query/no-paging?paging=false`, data),
+    getConfig: (data: any) => post<BindConfig[]>(`/notifier/config/_query/no-paging?paging=false`, data),
-    getTemplateDetail: (id: string) => get(`/notifier/template/${id}/detail`),
+    getTemplateDetail: (id: string) => get<any>(`/notifier/template/${id}/detail`),
     debug: (data: any, configId: string, templateId: string) => post(`/notifier/${configId}/${templateId}/_send`, data),
     getHistory: (data: any, id: string) => post(`/notify/history/template/${id}/_query`, data),
     // 钉钉/微信, 根据配置获取部门和用户

src/views/notice/Template/Debug/index.vue

@@ -8,8 +8,12 @@
         @cancel="handleCancel"
         :confirmLoading="btnLoading"
     >
-        <a-form layout="vertical">
+        <a-form ref="formRef" layout="vertical" :model="formData">
-            <a-form-item label="通知配置" v-bind="validateInfos.configId">
+            <a-form-item
+                label="通知配置"
+                name="configId"
+                :rules="{ required: true, message: '该字段为必填字段' }"
+            >
                 <a-select
                     v-model:value="formData.configId"
                     placeholder="请选择通知配置"
@@ -25,32 +29,37 @@
             </a-form-item>
             <a-form-item
                 label="变量"
-                v-bind="validateInfos.variableDefinitions"
+                v-if="
-                v-if="templateDetailTable && templateDetailTable.length"
+                    formData.templateDetailTable &&
-            >
+                    formData.templateDetailTable.length
-                <a-table
-                    ref="myTable"
-                    class="debug-table"
-                    :columns="columns"
-                    :data-source="templateDetailTable"
-                    :pagination="false"
-                    :rowKey="
-                        (record, index) => {
-                            return record.id;
-                        }
                 "
             >
-                    <template #bodyCell="{ column, text, record }">
+                <a-table
+                    row-key="id"
+                    :columns="columns"
+                    :data-source="formData.templateDetailTable"
+                    :pagination="false"
+                    bordered
+                >
+                    <template #bodyCell="{ column, record, index }">
                         <template
                             v-if="['id', 'name'].includes(column.dataIndex)"
                         >
                             <span>{{ record[column.dataIndex] }}</span>
                         </template>
                         <template v-else>
+                            <a-form-item
+                                :name="['templateDetailTable', index, 'value']"
+                                :rules="{
+                                    required: true,
+                                    message: '该字段为必填字段',
+                                }"
+                            >
                                 <ValueItem
                                     v-model:modelValue="record.value"
                                     :itemType="record.type"
                                 />
+                            </a-form-item>
                         </template>
                     </template>
                 </a-table>
@@ -60,7 +69,6 @@
 </template>
 
 <script setup lang="ts">
-import { Form } from 'ant-design-vue';
 import { PropType } from 'vue';
 import TemplateApi from '@/api/notice/template';
 import type {
@@ -70,7 +78,6 @@ import type {
 } from '@/views/notice/Template/types';
 import { message } from 'ant-design-vue';
 
-const useForm = Form.useForm;
 
 type Emits = {
     (e: 'update:visible', data: boolean): void;
@@ -103,6 +110,7 @@ const getConfigList = async () => {
     };
     const { result } = await TemplateApi.getConfig(params);
     configList.value = result;
+    formData.value.configId = result[0]?.id;
 };
 
 watch(
@@ -118,13 +126,14 @@ watch(
 /**
  * 获取模板详情
  */
-const templateDetailTable = ref<IVariableDefinitions[]>();
 const getTemplateDetail = async () => {
     const { result } = await TemplateApi.getTemplateDetail(props.data.id);
-    templateDetailTable.value = result.variableDefinitions.map((m: any) => ({
+    formData.value.templateDetailTable = result.variableDefinitions.map(
+        (m: any) => ({
             ...m,
             value: undefined,
-    }));
+        }),
+    );
 };
 
 const columns = [
@@ -147,31 +156,27 @@ const columns = [
 ];
 
 // 表单数据
-const formData = ref({
+const formData = ref<{
+    configId: string;
+    variableDefinitions: string;
+    templateDetailTable: IVariableDefinitions[];
+}>({
     configId: '',
     variableDefinitions: '',
+    templateDetailTable: [],
 });
 
-// 验证规则
-const formRules = ref({
-    configId: [{ required: true, message: '请选择通知模板' }],
-    variableDefinitions: [{ required: false, message: '该字段是必填字段' }],
-});
-
-const { resetFields, validate, validateInfos, clearValidate } = useForm(
-    formData.value,
-    formRules.value,
-);
-
 /**
  * 提交
  */
+const formRef = ref();
 const btnLoading = ref(false);
 const handleOk = () => {
-    validate()
+    formRef.value
+        .validate()
         .then(async () => {
             const params = {};
-            templateDetailTable.value?.forEach((item) => {
+            formData.value.templateDetailTable?.forEach((item) => {
                 params[item.id] = item.value;
             });
             // console.log('params: ', params);
@@ -187,16 +192,20 @@ const handleOk = () => {
                     btnLoading.value = false;
                 });
         })
-        .catch((err) => {
+        .catch((err: any) => {
             console.log('err: ', err);
         });
 };
 
 const handleCancel = () => {
     _vis.value = false;
-    templateDetailTable.value = [];
+    formRef.value.resetFields();
-    resetFields();
+    formData.value.templateDetailTable = [];
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+:deep(.ant-table-cell .ant-form-item) {
+    margin-bottom: 0;
+}
+</style>

vite.config.ts

@@ -85,8 +85,8 @@ export default defineConfig(({ mode}) => {
                   // target: 'http://192.168.33.22:8800',
                   // target: 'http://192.168.32.244:8881',
                 //   target: 'http://47.112.135.104:5096', // opcua
-                //   target: 'http://120.77.179.54:8844', // 120测试
+                  target: 'http://120.77.179.54:8844', // 120测试
-                  target: 'http://47.108.63.174:8845', // 测试
+                //   target: 'http://47.108.63.174:8845', // 测试
                 //   target: 'http://120.77.179.54:8844',
                   ws: 'ws://120.77.179.54:8844',
                   changeOrigin: true,