<template>
|
<div style="text-align: left">
|
<el-form ref="ruleFormRef" label-width="0px" :rules="rules" label-suffix=" :" :model="Message">
|
<el-switch
|
v-model="Message.type"
|
class="ml-2"
|
inline-prompt
|
style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
|
active-text="指定"
|
inactive-text="所有人"
|
/>
|
|
<el-form-item label="" prop="tagid">
|
<el-autocomplete v-model="Message.tagid" :fetch-suggestions="querySearchAsync" placeholder="输入编号或者名称搜索" />
|
</el-form-item>
|
<el-form-item label="" prop="radio">
|
<el-radio-group v-model="Message.radio">
|
<el-radio :value="1" style="color: white">发蜂鸣</el-radio>
|
<el-radio :value="2" style="color: white">发震动</el-radio>
|
<el-radio :value="3" style="color: white">发语音</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item v-if="Message.radio == 3" prop="neirong">
|
<el-input v-model="Message.neirong" :rows="4" type="textarea" placeholder="输入语音内容" />
|
</el-form-item>
|
<el-form-item style="margin: auto; text-align: center">
|
<el-button type="primary" @click="handleSubmit" style="margin: auto; text-align: center">确定</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import { ref, onMounted, reactive, watch } from "vue";
|
import { ElMessage, FormInstance } from "element-plus";
|
import { TagidAutocomplete } from "@/api/modules/hxzk/device/tag";
|
import { PersonNameAutocomplete } from "@/api/modules/hxzk/person/person";
|
import { sendMessage } from "@/api/modules/hxzk/statistics/message";
|
const rules = reactive({
|
tagid: [{ required: true, message: "请输入编号或者名称搜索" }],
|
radio: [{ required: true, message: "请选择发送类型" }],
|
neirong: [{ required: true, message: "请填写语音内容" }],
|
|
pdepartment: [{ required: true, message: "请选择部门" }],
|
company: [{ required: true, message: "请选择公司" }]
|
});
|
const Message = ref({
|
type: true,
|
tagid: "",
|
radio: 3,
|
neirong: ""
|
});
|
interface LinkItem {
|
value: string;
|
link: string;
|
}
|
const ruleFormRef = ref<FormInstance>();
|
const handleSubmit = () => {
|
ruleFormRef.value!.validate(async valid => {
|
if (!valid) return;
|
try {
|
const params = {
|
sendMessageHistory: Message.value
|
};
|
const res = await sendMessage(params);
|
if (res == 1) {
|
ElMessage.success({ message: `发送成功` });
|
} else {
|
ElMessage.error({ message: `发送失败` });
|
}
|
} catch (error) {
|
console.log(error);
|
}
|
});
|
};
|
|
let timeout: ReturnType<typeof setTimeout>;
|
const querySearchAsync = (queryString: string, cb: (arg: any) => void) => {
|
const results = queryString ? links.value.filter(createFilter(queryString)) : links.value;
|
|
clearTimeout(timeout);
|
timeout = setTimeout(() => {
|
cb(results);
|
}, 1000 * Math.random());
|
};
|
const createFilter = (queryString: string) => {
|
return (restaurant: LinkItem) => {
|
return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
|
};
|
};
|
const links = ref<LinkItem[]>([]);
|
onMounted(() => {
|
TagidAutocomplete().then(data => {
|
links.value = data;
|
});
|
PersonNameAutocomplete().then(name => {
|
for (let i = 0; i < name.length; i++) {
|
links.value.push(name[i]);
|
}
|
});
|
});
|
// 或者使用watch方式
|
watch(
|
() => Message.value.type,
|
newVal => {
|
if (!newVal) {
|
Message.value.tagid = "所有人";
|
} else {
|
Message.value.tagid = "";
|
}
|
}
|
);
|
</script>
|
|
<style scoped>
|
.dialog-container {
|
width: 400px;
|
padding: 20px;
|
margin: 0 auto;
|
border: 1px solid #e4e7ed;
|
border-radius: 4px;
|
box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
|
}
|
.dialog-content {
|
max-height: 200px;
|
padding: 10px;
|
margin-top: 10px;
|
overflow-y: auto;
|
border: 1px solid #e4e7ed;
|
border-radius: 4px;
|
}
|
.dialog-content p {
|
padding: 8px;
|
margin: 5px 0;
|
background-color: #f5f7fa;
|
border-radius: 4px;
|
}
|
|
/* 更改激活状态文字颜色 */
|
.el-switch__label.is-active {
|
color: red; /* 可根据需求修改颜色 */
|
}
|
|
/* 更改未激活状态文字颜色 */
|
.el-switch__label:not(.is-active) {
|
color: rgb(23 247 19); /* 可根据需求修改颜色 */
|
}
|
.el-switch__label {
|
color: red;
|
}
|
</style>
|
