feat: 通知模板,新增变量列表组件

src/components/AIcon/index.tsx

@@ -26,7 +26,8 @@ const iconKeys = [
     'ExportOutlined',
     'SyncOutlined',
     'ExclamationCircleOutlined',
-    'UploadOutlined'
+    'UploadOutlined',
+    'QuestionCircleOutlined'
 ]
 
 const Icon = (props: {type: string}) => {

src/views/notice/Template/Detail/components/VariableDefinitions.vue

@@ -0,0 +1,138 @@
+<!-- 模板内容-变量列表 -->
+<template>
+    <div class="table-wrapper">
+        <a-table
+            :columns="columns"
+            :data-source="dataSource"
+            bordered
+            :pagination="false"
+        >
+            <template #bodyCell="{ column, text, record }">
+                <span v-if="column.dataIndex === 'id'">
+                    {{ record[column.dataIndex] }}
+                </span>
+                <a-input
+                    v-if="column.dataIndex === 'name'"
+                    v-model:value="record.name"
+                />
+                <a-select
+                    v-if="column.dataIndex === 'type'"
+                    v-model:value="record.type"
+                    @change="handleTypeChange(record)"
+                >
+                    <a-select-option value="string">字符串</a-select-option>
+                    <a-select-option value="date">时间</a-select-option>
+                    <a-select-option value="double">数字</a-select-option>
+                </a-select>
+                <template v-if="column.dataIndex === 'format'">
+                    <span v-if="record.type === 'string'">
+                        {{ record.format }}
+                    </span>
+                    <a-select
+                        v-if="record.type === 'date'"
+                        v-model:value="record.format"
+                    >
+                        <a-select-option value="timestamp">
+                            timestamp
+                        </a-select-option>
+                        <a-select-option value="yyyy-MM-dd">
+                            yyyy-MM-dd
+                        </a-select-option>
+                        <a-select-option value="yyyy-MM-dd HH:mm:ss">
+                            yyyy-MM-dd HH:mm:ss
+                        </a-select-option>
+                    </a-select>
+                    <a-input
+                        v-if="record.type === 'double'"
+                        v-model:value="record.format"
+                    >
+                        <template #suffix>
+                            <a-tooltip
+                                title="格式为：%.xf x代表数字保留的小数位数。当x=0时,代表格式为整数"
+                            >
+                                <AIcon type="QuestionCircleOutlined" />
+                            </a-tooltip>
+                        </template>
+                    </a-input>
+                </template>
+            </template>
+        </a-table>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue';
+
+interface IVariable {
+    id: string;
+    name: string;
+    type: string;
+    format: string;
+}
+
+type Emits = {
+    (e: 'update:variableDefinitions', data: IVariable[]): void;
+};
+const emit = defineEmits<Emits>();
+
+const props = defineProps({
+    variableDefinitions: {
+        type: Array as PropType<IVariable[]>,
+        default: () => [],
+    },
+});
+
+const columns = [
+    {
+        title: '变量',
+        dataIndex: 'id',
+        width: 80,
+    },
+    {
+        title: '名称',
+        dataIndex: 'name',
+        // width: 160,
+    },
+    {
+        title: '类型',
+        dataIndex: 'type',
+        // width: 160,
+    },
+    {
+        title: '格式',
+        dataIndex: 'format',
+        width: 150,
+    },
+];
+
+const dataSource = computed({
+    get: () => props.variableDefinitions,
+    set: (val) => emit('update:variableDefinitions', val),
+});
+
+watch(
+    () => dataSource.value,
+    (val) => {
+        console.log('dataSource.value : ', val);
+        emit('update:variableDefinitions', val)
+    },
+    { deep: true },
+);
+
+const handleTypeChange = (record: IVariable) => {
+    console.log('record.type: ', record.type);
+    switch (record.type) {
+        case 'string':
+            record.format = '%s';
+            break;
+        case 'date':
+            record.format = 'timestamp';
+            break;
+        case 'double':
+            record.format = '%.0f';
+            break;
+    }
+};
+</script>
+
+<style lang="less" scoped></style>

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

@@ -418,6 +418,34 @@
                                 </div>
                             </a-form-item>
                         </template>
+                        <a-form-item
+                            label="模版内容"
+                            v-if="
+                                formData.type !== 'sms' &&
+                                formData.type !== 'webhook'
+                            "
+                        >
+                            <a-textarea
+                                v-model:value="formData.template.message"
+                                :maxlength="200"
+                                :rows="5"
+                                placeholder="变量格式:${name};
+    示例:尊敬的${name},${time}有设备触发告警,请注意处理"
+                            />
+                        </a-form-item>
+                        <a-form-item
+                            label="变量列表"
+                            v-if="
+                                formData.variableDefinitions &&
+                                formData.variableDefinitions.length
+                            "
+                        >
+                            <VariableDefinitions
+                                v-model:variableDefinitions="
+                                    formData.variableDefinitions
+                                "
+                            />
+                        </a-form-item>
                         <a-form-item label="说明">
                             <a-textarea
                                 v-model:value="formData.description"
@@ -463,6 +491,7 @@ import templateApi from '@/api/notice/template';
 import Doc from './doc/index';
 import MonacoEditor from '@/components/MonacoEditor/index.vue';
 import Attachments from './components/Attachments.vue';
+import VariableDefinitions from './components/VariableDefinitions.vue';
 
 const router = useRouter();
 const route = useRoute();
@@ -552,6 +581,33 @@ watch(
     { deep: true },
 );
 
+watch(
+    () => formData.value.template.message,
+    (val) => {
+        if (!val) return;
+        // 已经存在的变量
+        const oldKey = formData.value.variableDefinitions?.map((m) => m.id);
+        // 正则提取${}里面的值
+        const pattern = /(?<=\$\{).*?(?=\})/g;
+        const titleList = val.match(pattern)?.filter((f) => f);
+        const newKey = [...new Set(titleList)];
+        const result = newKey?.map((m) =>
+            oldKey.includes(m)
+                ? formData.value.variableDefinitions.find(
+                      (item) => item.id === m,
+                  )
+                : {
+                      id: m,
+                      name: '',
+                      type: 'string',
+                      format: '%s',
+                  },
+        );
+        formData.value.variableDefinitions = result;
+    },
+    { deep: true },
+);
+
 const getDetail = async () => {
     const res = await templateApi.detail(route.params.id as string);
     // console.log('res: ', res);
@@ -589,9 +645,9 @@ const handleSubmit = () => {
 
 // test
 watch(
-    () => formData.value.template,
+    () => formData.value,
     (val) => {
-        console.log('formData.value.template: ', val);
+        console.log('formData.value: ', val);
     },
     { deep: true },
 );