fix: change input to vue-multiselect

1. change input
2. verify input
This commit is contained in:
xx 2024-12-23 17:39:07 +08:00
parent 12b47c59ce
commit da62c3d50a
3 changed files with 98 additions and 8 deletions

View file

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

View file

@ -25,23 +25,109 @@
</div> </div>
<div v-if="$parent.notification.mentioning === 'specify-mobiles'" class="mb-3"> <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> <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>
<div v-if="$parent.notification.mentioning === 'specify-users'" class="mb-3"> <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> <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> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import HiddenInput from "../HiddenInput.vue"; import HiddenInput from "../HiddenInput.vue";
import VueMultiselect from "vue-multiselect";
export default { export default {
components: { HiddenInput }, components: {
HiddenInput,
VueMultiselect
},
data() {
return {
mobileOpts: [],
userIdOpts: [],
};
},
mounted() { mounted() {
if (typeof this.$parent.notification.mentioning === "undefined") { if (typeof this.$parent.notification.mentioning === "undefined") {
this.$parent.notification.mentioning = "nobody"; 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> </script>

View file

@ -688,9 +688,13 @@
"Don't mention people": "Don't mention people", "Don't mention people": "Don't mention people",
"Mention group": "Mention {group}", "Mention group": "Mention {group}",
"Mention Mobile List": "Mention mobile list", "Mention Mobile List": "Mention mobile list",
"Mention User List": "Mention user ID List", "Mention User List": "Mention user id list",
"Dingtalk Mobile List": "Mobile List (use comma separator)", "Dingtalk Mobile List": "Mobile list",
"Dingtalk User List": "User List (use comma separator)", "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", "Device Token": "Device Token",
"Platform": "Platform", "Platform": "Platform",
"Huawei": "Huawei", "Huawei": "Huawei",