fix: change input to vue-multiselect

1. change input
2. verify input

server/notification-providers/dingding.js

@@ -12,8 +12,8 @@ class DingDing extends NotificationProvider {
     async send(notification, msg, monitorJSON = null, heartbeatJSON = null) {
         const okMsg = "Sent Successfully.";
         const mentionAll = notification.mentioning === "everyone";
-        const mobileList = notification.mentioning === "specify-mobiles" ? notification.mobileList.split(",") : [];
-        const userList = notification.mentioning === "specify-users" ? notification.userList.split(",") : [];
+        const mobileList = notification.mentioning === "specify-mobiles" ? notification.mobileList : [];
+        const userList = notification.mentioning === "specify-users" ? notification.userList : [];
         const mentionStr = [ ...mobileList || [], ...userList || [] ].map(item => `@${item}`).join(" ");
         try {
             if (heartbeatJSON != null) {

src/components/notifications/DingDing.vue

@@ -25,23 +25,109 @@
     </div>
     <div v-if="$parent.notification.mentioning === 'specify-mobiles'" class="mb-3">
         <label for="mobileList" class="form-label">{{ $t("Dingtalk Mobile List") }}<span style="color: red;"><sup>*</sup></span></label>
-        <input id="mobileList" v-model="$parent.notification.mobileList" type="list" class="form-control" required>
+        <VueMultiselect
+            id="mobileList-select"
+            v-model="$parent.notification.mobileList"
+            :required="$parent.notification.mentioning === 'specify-mobiles'"
+            :placeholder="$t('Enter a list of mobile')"
+            :multiple="true"
+            :options="mobileOpts"
+            :max-height="500"
+            :taggable="true"
+            :show-no-options="false"
+            :close-on-select="false"
+            :clear-on-select="false"
+            :preserve-search="false"
+            :preselect-first="false"
+            @remove="removeMobile"
+            @tag="addMobile"
+        ></VueMultiselect>
     </div>
     <div v-if="$parent.notification.mentioning === 'specify-users'" class="mb-3">
         <label for="userList" class="form-label">{{ $t("Dingtalk User List") }}<span style="color: red;"><sup>*</sup></span></label>
-        <input id="userList" v-model="$parent.notification.userList" type="list" class="form-control" required>
+        <VueMultiselect
+            id="userList-select"
+            v-model="$parent.notification.userList"
+            :required="$parent.notification.mentioning === 'specify-users'"
+            :placeholder="$t('Enter a list of userId')"
+            :multiple="true"
+            :options="userIdOpts"
+            :max-height="500"
+            :taggable="true"
+            :show-no-options="false"
+            :close-on-select="false"
+            :clear-on-select="true"
+            :preserve-search="false"
+            :preselect-first="false"
+            @remove="removeUser"
+            @tag="addUser"
+        ></VueMultiselect>
     </div>
 </template>
 
 <script lang="ts">
 import HiddenInput from "../HiddenInput.vue";
+import VueMultiselect from "vue-multiselect";
 
 export default {
-    components: { HiddenInput },
+    components: {
+        HiddenInput,
+        VueMultiselect
+    },
+    data() {
+        return {
+            mobileOpts: [],
+            userIdOpts: [],
+        };
+    },
+
     mounted() {
         if (typeof this.$parent.notification.mentioning === "undefined") {
             this.$parent.notification.mentioning = "nobody";
         }
+        if (typeof this.$parent.notification.mobileList === "undefined") {
+            this.$parent.notification.mobileList = [];
+        } else {
+            this.mobileOpts = this.$parent.notification.mobileList;
+        }
+
+        if (typeof this.$parent.notification.userList === "undefined") {
+            this.$parent.notification.userList = [];
+        } else {
+            this.mobileOpts = this.$parent.notification.mobileList;
+        }
+    },
+    methods: {
+        addMobile(mobile) {
+            const trimmedMobile = mobile.trim();
+            const chinaMobileRegex = /^1[3-9]\d{9}$/;
+            if (!chinaMobileRegex.test(trimmedMobile)) {
+                this.$root.toastError(this.$t("Invalid mobile", { "mobile": trimmedMobile }));
+                return;
+            }
+            this.mobileOpts.push(mobile);
+        },
+        removeMobile(mobile) {
+            const idx = this.mobileOpts.indexOf(mobile);
+            if (idx > -1) {
+                this.mobileOpts.splice(idx, 1);
+            }
+        },
+        addUser(userId) {
+            const trimmedUserId = userId.trim();
+            const userIdRegex = /^[a-zA-Z0-9]+$/;
+            if (!userIdRegex.test(trimmedUserId)) {
+                this.$root.toastError(this.$t("Invalid userId", { "userId": trimmedUserId }));
+                return;
+            }
+            this.userIdOpts.push(trimmedUserId);
+        },
+        removeUser(userId) {
+            const idx = this.userIdOpts.indexOf(userId);
+            if (idx > -1) {
+                this.userIdOpts.splice(idx, 1);
+            }
+        },
     }
 };
 </script>

src/lang/en.json

@@ -688,9 +688,13 @@
     "Don't mention people": "Don't mention people",
     "Mention group": "Mention {group}",
     "Mention Mobile List": "Mention mobile list",
-    "Mention User List": "Mention user ID List",
-    "Dingtalk Mobile List": "Mobile List (use comma separator)",
-    "Dingtalk User List": "User List (use comma separator)",
+    "Mention User List": "Mention user id list",
+    "Dingtalk Mobile List": "Mobile list",
+    "Dingtalk User List": "User ID list",
+    "Enter a list of userId": "Enter a list of userId",
+    "Enter a list of mobile": "Enter a list of mobile",
+    "Invalid mobile": "Invalid mobile [{mobile}]",
+    "Invalid userId": "Invalid userId [{userId}]",
     "Device Token": "Device Token",
     "Platform": "Platform",
     "Huawei": "Huawei",