<template>
|
<div class="system-add-gas-container">
|
<el-dialog
|
:title="state.title"
|
v-model="state.isShowUserDialog"
|
width="550px"
|
>
|
<el-form :model="state.peopleForm" size="default" ref="gasRef" :rules="state.setFormRules" label-width="150px">
|
<el-form-item label="预警人员:" prop="name">
|
<el-select
|
v-model="state.peopleForm.realName"
|
filterable
|
class="w100"
|
style="max-width: 180px"
|
size="default"
|
@change="changePeople"
|
:disabled="state.disabled"
|
>
|
<el-option v-for="item in state.peopleList" :key="item.id" :label="item.realName" :value="item.id">
|
<div class="valueTable">
|
<div><div>姓名：</div><span>{{item.realName}}</span></div>
|
<div><div>手机号：</div><span>{{item.phone}}</span></div>
|
</div>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="手机号:" prop="points">
|
<el-input v-model.trim="state.peopleForm.phone" disabled ></el-input>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="handleClose" size="default" v-if="!state.disabled">取 消</el-button>
|
<el-button type="primary" @click="onSubmit" size="default">确 定</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import {reactive, ref} from "vue";
|
import {PeopleState} from "/@/types/warning";
|
import { userApi } from "/@/api/systemManage/user";
|
import { warningPeopleApi } from "/@/api/warningManage/warningPeople";
|
import {ElMessage} from "element-plus";
|
|
const gasRef = ref();
|
const emit = defineEmits(["getPeopleData"]);
|
const state = reactive<PeopleState>({
|
title: '',
|
isShowUserDialog: false,
|
disabled: false,
|
peopleForm: {
|
id: '',
|
name: '',
|
phone: '',
|
realName: ''
|
},
|
setFormRules:{
|
name: [{ required: true, message: '请选择预警人员', trigger: 'blur' }],
|
phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
|
},
|
peopleList: []
|
});
|
|
let chooseObj = reactive<any>({});
|
|
const openDialog = (type: string, value: any) => {
|
getUserList();
|
state.isShowUserDialog = true;
|
if (type === '查看') {
|
state.disabled = true;
|
state.title = '查看预警人员';
|
state.peopleForm = JSON.parse(JSON.stringify(value));
|
} else if (type === '修改'){
|
state.disabled = false;
|
state.title = '修改预警人员';
|
state.peopleForm = JSON.parse(JSON.stringify(value));
|
chooseObj = state.peopleForm;
|
}else {
|
state.disabled = false;
|
state.title = '新增预警人员';
|
state.peopleForm = {
|
id: '',
|
name: '',
|
phone: '',
|
realName: ''
|
}
|
}
|
};
|
const getUserList = async () => {
|
const param = {
|
pageIndex: 1,
|
pageSize: 9999,
|
searchParams: {
|
roleId: null,
|
name: "",
|
realName: "",
|
userIndentityId: null
|
}
|
}
|
let res = await userApi().getUserList(param);
|
if(res.data.code == 100) {
|
state.peopleList = res.data.data;
|
}else {
|
ElMessage({
|
type: 'error',
|
message: res.data.msg
|
});
|
}
|
}
|
|
const changePeople = (val:any) => {
|
chooseObj = state.peopleList.find(item => item.id === val);
|
console.log("obj",chooseObj)
|
if(chooseObj){
|
state.peopleForm.phone = chooseObj.phone;
|
}
|
}
|
const onSubmit = async () => {
|
if(state.title == '新增预警人员' || state.title == '修改预警人员'){
|
const valid = gasRef.value.validate();
|
if(valid) {
|
if(state.title == '新增预警人员'){
|
const param = {
|
userId: chooseObj.id,
|
name: chooseObj.name,
|
realName: chooseObj.realName,
|
phone: chooseObj.phone
|
}
|
let res = await warningPeopleApi().addWarnUser(param);
|
if(res.data.code == 100) {
|
ElMessage({
|
type: 'success',
|
message: '新增成功'
|
});
|
}else{
|
ElMessage({
|
type: 'error',
|
message: res.data.msg
|
});
|
}
|
}else if(state.title == '修改预警人员'){
|
const param = {
|
id: state.peopleForm.id,
|
userId: chooseObj.id,
|
name: chooseObj.name,
|
realName: chooseObj.realName,
|
phone: chooseObj.phone
|
}
|
console.log("res",param)
|
let res = await warningPeopleApi().handelWarnUser(param);
|
if(res.data.code == 100) {
|
ElMessage({
|
type: 'success',
|
message: '修改成功'
|
});
|
}else{
|
ElMessage({
|
type: 'error',
|
message: res.data.msg
|
});
|
}
|
}
|
}
|
gasRef.value.clearValidate();
|
state.isShowUserDialog = false;
|
emit('getPeopleData');
|
}else {
|
state.isShowUserDialog = false;
|
emit('getPeopleData');
|
}
|
};
|
|
const handleClose = () => {
|
gasRef.value.clearValidate();
|
state.isShowUserDialog = false;
|
emit('getPeopleData');
|
}
|
defineExpose({
|
openDialog
|
});
|
</script>
|
<style scoped lang="scss">
|
.valueTable{
|
line-height: 18px;
|
&>div{
|
line-height: 1;
|
margin-bottom: 6px;
|
display: flex;
|
align-items: center;
|
|
div{
|
color: #999;
|
}
|
|
span{
|
font-weight: bolder;
|
}
|
|
&:last-of-type{
|
margin-bottom: 0;
|
margin-top: 10px;
|
}
|
}
|
}
|
.el-select-dropdown__item {
|
height: 50px;
|
line-height: 50px;
|
margin-top: 6px;
|
}
|
</style>
|
