mirror of
https://github.com/louislam/uptime-kuma.git
synced 2024-12-24 21:24:28 -08:00
fix: change input to vue-multiselect
1. change input 2. verify input
This commit is contained in:
parent
12b47c59ce
commit
da62c3d50a
|
@ -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) {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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",
|
||||
|
|
Loading…
Reference in a new issue