You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
304 lines
8.4 KiB
304 lines
8.4 KiB
<template>
|
|
<ns-drawer
|
|
v-model:visible="visible"
|
|
width="600"
|
|
:title="'设置通知联系人'"
|
|
:ok="btnClick"
|
|
:cancel="handleClose"
|
|
placement="right"
|
|
:footer-style="{ textAlign: 'right' }"
|
|
@close="handleClose">
|
|
<div style="width: 100%; overflow: hidden; overflow-y: hidden; height: 100%">
|
|
<a-form ref="formRef" :model="infoObject" :rules="rules" style="width: 80%">
|
|
<a-form-item ref="notification" label="通知方式" name="notification">
|
|
<a-select
|
|
ref="select"
|
|
v-model:value="infoObject.notification"
|
|
style="width: 100%"
|
|
mode="multiple"
|
|
:options="devicePointData"
|
|
show-search
|
|
:allowClear="true"
|
|
placeholder="请选择通知方式"
|
|
:filter-option="filterDevicePoint" />
|
|
</a-form-item>
|
|
<a-form-item label="启用规则">
|
|
<a-switch
|
|
:checked="infoObject.enableRules === 1 ? true : false"
|
|
:class="{
|
|
'blue-background': infoObject.enableRules === 1 ? true : false,
|
|
'grey-background': infoObject.enableRules === 1 ? false : true,
|
|
}"
|
|
@click="clickSwitch" />
|
|
</a-form-item>
|
|
</a-form>
|
|
<div style="width: 100%; height: 765px; overflow-y: auto">
|
|
<div style="margin-bottom: 8px">
|
|
<div style="width: 100%; display: flex; position: relative">
|
|
<div
|
|
style="
|
|
border-width: 0px;
|
|
position: absolute;
|
|
left: 0px;
|
|
top: 5px;
|
|
width: 5px;
|
|
height: 15px;
|
|
background: inherit;
|
|
background-color: #2778ff;
|
|
border: none;
|
|
border-radius: 5px;
|
|
-moz-box-shadow: none;
|
|
-webkit-box-shadow: none;
|
|
box-shadow: none;
|
|
"></div>
|
|
<span style="margin-left: 24px; color: #333333">联系人名单</span>
|
|
</div>
|
|
<img
|
|
style="width: 100%; margin-top: -10px"
|
|
src="https://files.axshare.com/gsc/4T0UQR/7e/5d/a2/7e5da2a277344db8af30521cefeb70cc/images/告警设置/u150.svg?pageId=1f58c1ba-b461-4fe8-a2b3-295f1e7b0aa0" />
|
|
</div>
|
|
<div style="margin-bottom: 16px">
|
|
<a-button type="primary" @click="chengUser">选择联系人 </a-button>
|
|
</div>
|
|
<a-table
|
|
:dataSource="dataSource"
|
|
:columns="columns"
|
|
:scroll="{ x: 800, y: 700 }"
|
|
:pagination="pagination">
|
|
<template #bodyCell="{ record, column }">
|
|
<template v-if="column.dataIndex === 'address'">
|
|
{{ record.userRoleInfos?.[0].deptRoleInfoList }}
|
|
</template>
|
|
<template v-if="column.dataIndex === 'operation'">
|
|
<a style="color: rgb(210, 0, 5)" @click="remove(record)">移除</a>
|
|
</template>
|
|
</template>
|
|
</a-table>
|
|
</div>
|
|
</div>
|
|
<linkPeople
|
|
v-show="visibleModel"
|
|
ref="linkPeoples"
|
|
@handleCancel="handleCancel"
|
|
@handleOk="handleOk" />
|
|
</ns-drawer>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { ref } from 'vue';
|
|
// import { NsMessage } from '/nerv-lib/component';
|
|
// import { http } from '/nerv-lib/util';
|
|
// import { number } from 'vue-types';
|
|
import linkPeople from './linkPeople/index.vue';
|
|
|
|
// import { deviceAlarms } from '/@/api/alarmSettings/deviceAlarms';
|
|
|
|
//table 数据
|
|
const columns = [
|
|
{
|
|
title: '序号',
|
|
dataIndex: 'index',
|
|
width: 80,
|
|
fixed: 'left',
|
|
customRender: (text: any) => {
|
|
return text.index + 1;
|
|
},
|
|
},
|
|
{
|
|
title: '姓名',
|
|
dataIndex: 'realName',
|
|
width: 80,
|
|
fixed: 'left',
|
|
key: 'deviceName',
|
|
},
|
|
{
|
|
title: '性别',
|
|
dataIndex: 'sex',
|
|
width: 80,
|
|
key: 'sex',
|
|
},
|
|
{
|
|
title: '组织关系',
|
|
dataIndex: 'orgName',
|
|
key: 'site',
|
|
},
|
|
{
|
|
title: '部门',
|
|
dataIndex: 'address',
|
|
key: 'address',
|
|
},
|
|
{
|
|
title: '操作',
|
|
width: 80,
|
|
dataIndex: 'operation',
|
|
fixed: 'right',
|
|
},
|
|
];
|
|
const visibleModel = ref(false);
|
|
const dataSource = ref([]);
|
|
const visible = ref(false);
|
|
const linkPeoples = ref(null);
|
|
const handleChangePage = (current: number, pageSize: number) => {
|
|
pagination.value.current = current;
|
|
pagination.value.pageSize = pageSize;
|
|
};
|
|
const pagination = ref({
|
|
total: 0,
|
|
size: 'small',
|
|
current: 1,
|
|
pageSize: 10,
|
|
showQuickJumper: true,
|
|
showLessItems: true,
|
|
// showSizeChanger: true,
|
|
showTotal: (total: number, range: any) =>
|
|
total && range ? `显示第${range[0]}到${range[1]}条记录,共 ${total} 条记录` : '',
|
|
onChange: handleChangePage,
|
|
});
|
|
//点击联系人
|
|
const chengUser = () => {
|
|
visibleModel.value = true;
|
|
let ids = [];
|
|
dataSource.value.forEach((item) => {
|
|
ids.push(item.userId);
|
|
});
|
|
linkPeoples.value.getData({ id: ids, data: dataSource });
|
|
};
|
|
//取消弹窗
|
|
const handleCancel = () => {
|
|
visibleModel.value = false;
|
|
};
|
|
//确定选择人
|
|
const handleOk = (data: any) => {
|
|
visibleModel.value = false;
|
|
dataSource.value = data.data;
|
|
};
|
|
//表单数据
|
|
const infoObject = ref({
|
|
enableRules: 0,
|
|
});
|
|
//设备点位搜索
|
|
const filterDevicePoint = (input: string, option: any) => {
|
|
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
|
|
};
|
|
//开关
|
|
const clickSwitch = () => {
|
|
if (infoObject.value.enableRules === 1) {
|
|
infoObject.value.enableRules = 0;
|
|
} else {
|
|
infoObject.value.enableRules = 1;
|
|
}
|
|
};
|
|
// 通知信息
|
|
const devicePointData = ref([
|
|
{ label: '站内信息', value: 1 },
|
|
{ label: '邮件', value: 2 },
|
|
]);
|
|
|
|
const rules = {
|
|
notification: [{ required: true, message: '请选择通知方式', trigger: 'change' }],
|
|
user: [{ required: true, message: '请选择通知人', trigger: 'change' }],
|
|
};
|
|
const formRef = ref();
|
|
const emit = defineEmits(['editObject']);
|
|
const toggle = (value: any) => {
|
|
//判断 是新增 还是修改
|
|
if (value) {
|
|
// 获取接口
|
|
infoObject.value = {
|
|
enableRules: 0,
|
|
};
|
|
// await http
|
|
// .post(group.queryDeviceGroupTree, {
|
|
// pageNum: 1,
|
|
// pageSize: 999,
|
|
// energyType: selectedOptions[0].dicKey,
|
|
// orgId: orgId.value,
|
|
// })
|
|
// .then((res) => {
|
|
// jdTreeData.value = res.data;
|
|
// });
|
|
} else {
|
|
infoObject.value = {
|
|
enableRules: 0,
|
|
};
|
|
}
|
|
visible.value = !visible.value;
|
|
};
|
|
//移除数据
|
|
const remove = (data: any) => {
|
|
dataSource.value.forEach((item, index) => {
|
|
if (item.userId === data.userId) {
|
|
dataSource.value.splice(index, 1);
|
|
}
|
|
});
|
|
dataSource.value = [...dataSource.value];
|
|
};
|
|
const btnClick = () => {
|
|
console.log(infoObject.value);
|
|
//发送请求数据
|
|
let obj = {};
|
|
obj.selectList = [];
|
|
dataSource.value.forEach((item) => {
|
|
obj.selectList.push({
|
|
userId: item.userId,
|
|
});
|
|
});
|
|
console.log(obj, '数据');
|
|
//表单校验
|
|
formRef.value.validate().then(() => {
|
|
//调用接口
|
|
// http.post(deviceAlarms.addOrUpNewData, infoObject.value).then(() => {
|
|
// NsMessage.success('操作成功');
|
|
// visible.value = false;
|
|
// emit('editObject', null);
|
|
// });
|
|
});
|
|
};
|
|
const handleClose = () => {
|
|
// 清楚校验错误信息
|
|
formRef.value.resetFields();
|
|
visible.value = false;
|
|
visibleModel.value = false;
|
|
};
|
|
defineExpose({
|
|
toggle,
|
|
handleClose,
|
|
handleCancel,
|
|
handleChangePage,
|
|
formRef,
|
|
});
|
|
</script>
|
|
<style scoped lang="less">
|
|
.drawerContainer {
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.blue-background.ant-switch-checked {
|
|
background-color: linear-gradient(
|
|
180deg,
|
|
rgba(1, 206, 255, 1) 0%,
|
|
rgba(0, 150, 229, 1) 100%
|
|
) !important;
|
|
}
|
|
|
|
.grey-background.ant-switch {
|
|
background-color: grey !important;
|
|
}
|
|
|
|
.blue-background.ant-switch-checked .ant-switch-handle {
|
|
background-color: linear-gradient(
|
|
180deg,
|
|
rgba(1, 206, 255, 1) 0%,
|
|
rgba(0, 150, 229, 1) 100%
|
|
) !important;
|
|
}
|
|
|
|
.grey-background.ant-switch .ant-switch-handle {
|
|
background-color: grey !important;
|
|
}
|
|
:deep(.ant-form-item-label) {
|
|
z-index: 20;
|
|
text-align: left;
|
|
width: 20%;
|
|
}
|
|
</style>
|
|
|