Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev

src/api/notice/config.ts

@@ -1,4 +1,4 @@
-import { patch, post, get } from '@/utils/request'
+import { patch, post, get, remove } from '@/utils/request'
 
 export default {
     // 列表
@@ -8,5 +8,30 @@ export default {
     // 新增
     save: (data: any) => post(`/notifier/config`, data),
     // 修改
-    update: (data: any) => patch(`/notifier/config`, data)
+    update: (data: any) => patch(`/notifier/config`, data),
+    del: (id: string) => remove(`/notifier/config/${id}`),
+    getTemplate: (data: any, id: string) => post(`/notifier/template/${id}/_query`, data),
+    getTemplateDetail: (id: string) => get(`/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/config/${id}/_query`, data),
+    // 获取所有平台用户
+    getPlatformUsers: () => post(`/user/_query/no-paging`, { paging: false }),
+    // 钉钉部门
+    dingTalkDept: (id: string) => get(`/notifier/dingtalk/corp/${id}/departments/tree`),
+    // 钉钉部门人员
+    getDingTalkUsers: (configId: string, deptId: string) => get(`/notifier/dingtalk/corp/${configId}/${deptId}/users`),
+    // 钉钉已经绑定的人员
+    getDingTalkBindUsers: (id: string) => get(`/user/third-party/dingTalk_dingTalkMessage/${id}`),
+    // 钉钉绑定用户
+    dingTalkBindUser: (data: any, id: string) => patch(`/user/third-party/dingTalk_dingTalkMessage/${id}`, data),
+    // 微信部门
+    weChatDept: (id: string) => get(`/notifier/wechat/corp/${id}/departments`),
+    // 微信部门人员
+    getWeChatUsers: (configId: string, deptId: string) => get(`/notifier/wechat/corp/${configId}/${deptId}/users`),
+    // 微信已经绑定的人员
+    getWeChatBindUsers: (id: string) => get(`/user/third-party/weixin_corpMessage/${id}`),
+    // 微信绑定用户
+    weChatBindUser: (data: any, id: string) => patch(`/user/third-party/weixin_corpMessage/${id}`, data),
+    // 解绑
+    unBindUser: (data: any, id: string) => post(`/user/third-party/${id}/_unbind`, data)
 }

src/api/notice/template.ts

@@ -1,4 +1,5 @@
-import { patch, post, get } from '@/utils/request'
+import { patch, post, get, remove } from '@/utils/request'
+import { BindConfig } from '@/views/notice/Template/types'
 
 export default {
     // 列表
@@ -8,5 +9,19 @@ export default {
     // 新增
     save: (data: any) => post(`/notifier/template`, data),
     // 修改
-    update: (data: any) => patch(`/notifier/template`, data)
+    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),
+    getTemplateDetail: (id: string) => get(`/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),
+    // 钉钉/微信, 根据配置获取部门和用户
+    getDept: (type: string, id: string) => get(`/notifier/${type}/corp/${id}/departments`),
+    getUser: (type: string, id: string) => get(`/notifier/${type}/corp/${id}/users`),
+    // 微信获取标签推送
+    getTags: (id: string) => get(`/notifier/wechat/corp/${id}/tags`),
+    // 语音/短信获取阿里云模板
+    getAliTemplate: (id: string) => get(`/notifier/sms/aliyun/${id}/templates`),
+    // 短信获取签名
+    getSigns: (id: string) => get(`/notifier/sms/aliyun/${id}/signs`)
 }

src/components/AIcon/index.tsx

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

src/components/RadioCard/index.vue

@@ -25,6 +25,7 @@ interface IOption {
 
 type Emits = {
     (e: 'update:modelValue', data: string): void;
+    (e: 'change') :void
 };
 const emit = defineEmits<Emits>();
 
@@ -41,7 +42,10 @@ const props = defineProps({
 
 const myValue = computed({
     get: () => props.modelValue,
-    set: (val) => emit('update:modelValue', val),
+    set: (val) => {
+        emit('update:modelValue', val)
+        emit('change')
+    },
 });
 </script>
 

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

@@ -0,0 +1,136 @@
+<!-- 模板内容-变量列表 -->
+<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) => {
+        emit('update:variableDefinitions', val);
+    },
+    { deep: true },
+);
+
+const handleTypeChange = (record: IVariable) => {
+    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

@@ -39,6 +39,7 @@
                             <RadioCard
                                 :options="msgType"
                                 v-model="formData.provider"
+                                @change="getConfigList"
                             />
                         </a-form-item>
                         <a-form-item
@@ -51,11 +52,11 @@
                                 placeholder="请选择绑定配置"
                             >
                                 <a-select-option
-                                    v-for="(item, index) in ROBOT_MSG_TYPE"
+                                    v-for="(item, index) in configList"
                                     :key="index"
-                                    :value="item.value"
+                                    :value="item.id"
                                 >
-                                    {{ item.label }}
+                                    {{ item.name }}
                                 </a-select-option>
                             </a-select>
                         </a-form-item>
@@ -120,8 +121,7 @@
                                     >
                                         <!-- <a-input
                                             v-model:value="
-                                                formData.template.markdown
+                                                formData.template.markdown?.title
-                                                    ?.title
                                             "
                                             placeholder="请输入标题"
                                         /> -->
@@ -246,17 +246,11 @@
                             </a-form-item>
                             <a-form-item label="收件人">
                                 <a-select
+                                    mode="tags"
+                                    :options="[]"
                                     v-model:value="formData.template.sendTo"
                                     placeholder="请选择收件人"
-                                >
+                                />
-                                    <a-select-option
-                                        v-for="(item, index) in ROBOT_MSG_TYPE"
-                                        :key="index"
-                                        :value="item.value"
-                                    >
-                                        {{ item.label }}
-                                    </a-select-option>
-                                </a-select>
                             </a-form-item>
                             <a-form-item label="附件信息">
                                 <Attachments
@@ -418,6 +412,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 +485,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();
@@ -500,12 +523,14 @@ watch(
         msgType.value = MSG_TYPE[val];
 
         formData.value.provider = msgType.value[0].value;
-        console.log('formData.value.template: ', formData.value.template);
+        // console.log('formData.value.template: ', formData.value.template);
+
+        getConfigList();
     },
 );
 
 computed(() => {
-    console.log('formData.value.type: ', formData.value.type);
+    // console.log('formData.value.type: ', formData.value.type);
     Object.assign(
         formData.value.template,
         TEMPLATE_FIELD_MAP[formData.value.type][formData.value.provider],
@@ -547,11 +572,42 @@ const { resetFields, validate, validateInfos, clearValidate } = useForm(
 watch(
     () => formData.value.type,
     () => {
+        formData.value.variableDefinitions = [];
         clearValidate();
     },
     { 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);
@@ -560,6 +616,20 @@ const getDetail = async () => {
 };
 // getDetail();
 
+/**
+ * 获取绑定配置
+ */
+const configList = ref();
+const getConfigList = async () => {
+    const terms = [
+        { column: 'type$IN', value: formData.value.type },
+        { column: 'provider', value: formData.value.provider },
+    ];
+    const { result } = await templateApi.getConfig({ terms });
+    configList.value = result;
+};
+getConfigList();
+
 /**
  * 表单提交
  */
@@ -567,31 +637,31 @@ const btnLoading = ref<boolean>(false);
 const handleSubmit = () => {
     validate()
         .then(async () => {
-            console.log('formData.value: ', formData.value);
+            // console.log('formData.value: ', formData.value);
             btnLoading.value = true;
-            // let res;
+            let res;
-            // if (!formData.value.id) {
+            if (!formData.value.id) {
-            //     res = await templateApi.save(formData.value);
+                res = await templateApi.save(formData.value);
-            // } else {
+            } else {
-            //     res = await templateApi.update(formData.value);
+                res = await templateApi.update(formData.value);
-            // }
+            }
-            // // console.log('res: ', res);
+            // console.log('res: ', res);
-            // if (res?.success) {
+            if (res?.success) {
-            //     message.success('保存成功');
+                message.success('保存成功');
-            //     router.back();
+                router.back();
-            // }
+            }
-            btnLoading.value = false;
         })
         .catch((err) => {
             console.log('err: ', err);
+            btnLoading.value = false;
         });
 };
 
 // test
 watch(
-    () => formData.value.template,
+    () => formData.value,
     (val) => {
-        console.log('formData.value.template: ', val);
+        console.log('formData.value: ', val);
     },
     { deep: true },
 );

src/views/notice/Template/types.d.ts

@@ -16,6 +16,17 @@ interface IVariableDefinitions {
     format: string;
 }
 
+interface IMarkDown {
+    text: string;
+    title: string;
+}
+interface ILink {
+    title: string;
+    picUrl: string;
+    messageUrl: string;
+    text: string;
+}
+
 export type TemplateFormData = {
     template: {
         // 钉钉消息
@@ -23,16 +34,8 @@ export type TemplateFormData = {
         message?: string;
         // 钉钉机器人
         messageType?: string;
-        markdown?: {
+        markdown?: IMarkDown;
-            text: string;
+        link?: ILink;
-            title: string;
-        };
-        link?: {
-            title: string;
-            picUrl: string;
-            messageUrl: string;
-            text: string;
-        };
         // 微信
         // agentId?: string;
         // message?: string;
@@ -71,4 +74,24 @@ export type TemplateFormData = {
     creatorId?: string;
     createTime?: number;
     configId?: string;
-};
+};
+
+// 绑定配置类型
+export type config = {
+    host: string;
+    password: string;
+    port: number;
+    sender: string;
+    ssl: boolean;
+    username: string;
+}
+export type BindConfig = {
+    configuration: config;
+    createTime: number
+    creatorId: string;
+    id: string;
+    maxRetryTimes: number;
+    name: string;
+    provider: string;
+    type: string
+}