<template>
<!-- 报警自动转工单预案 -->
<div class="alarm-work-order">
<template v-if="companyInfo.companyCode">
<a-spin :spinning="isLoading" :delay="500" :tip="$t('加载中...')">
<div class="edit-view">
<div class="input-item base-flex-align">
<div class="input-lable">
<span>{{ $t('预案是否启用:') }}</span>
</div>
<div class="input-content">
<a-radio-group v-model="enabled">
<a-radio :value="true">{{ $t('启用') }}</a-radio>
<a-radio :value="false">{{ $t('禁用') }}</a-radio>
</a-radio-group>
</div>
</div>
<div class="input-item base-flex-align">
<div class="input-lable">
<span> {{ $t('报警类型:') }}</span>
</div>
<div class="input-content">
<img @click="openAlarmType" src="@/assets/img/notificationConfiguration/icon_edit_template.png"
class="icon-edit" />
<!-- <a-select collapseTags mode="multiple" :maxTagCount="2" v-model="formData.type" allowClear
:placeholder="$t('请选择报警类型')" optionFilterProp="label">
<a-select-option v-for="(item, index) in typeOptions" :value="item.value" :key="index">
{{ item.label }}
</a-select-option>
</a-select> -->
</div>
</div>
<div class="input-item">
<div class="input-lable">
<span> {{ $t('工单派发配置:') }}</span>
</div>
<div class="table-box" id="tableBox">
<a-table rowKey="id" :columns="columns" :dataSource="tableList" :pagination="false">
<template slot="staff" slot-scope="text, record, index">
<a-select v-model="tableList[index].staffConfig" mode="multiple" :placeholder="$t('请选择人员,最多2人')"
optionFilterProp="label" :maxTagCount="2" allowClear @change="val => handleStaffChange(val, index)">
<a-select-option v-for="person in record.personList" :value="person.id" :key="person.id"
:label="$t(person.name)" :title="$t(person.name)">
{{ $t(person.name) }}
</a-select-option>
</a-select>
</template>
</a-table>
</div>
</div>
<div class="btn-view action-list">
<a-button @click="onSave" type="primary">{{ $t('确定') }}</a-button>
<a-button @click="onCancel" type="normal">{{ $t('取消') }}</a-button>
</div>
</div>
</a-spin>
</template>
<add-alarm-type-modal @ok="getCheckedList" ref="addAlarmTypeModal"></add-alarm-type-modal>
</div>
</template>
<script>
import factory from '../../factory';
import addAlarmTypeModal from '../common/addAlarmTypeModal.vue'
export default {
components: { addAlarmTypeModal },
props: {
companyInfo: {
type: Object,
default: () => {
return {}
},
},
},
data() {
return {
isLoading: false,
enabled: 1, // 默认启用
columns: [
{
title: this.$t('部门'),
key: 'departmentName',
dataIndex: 'departmentName',
ellipsis: true,
},
{
title: this.$t('用户'),
key: 'staff',
dataIndex: 'staff',
scopedSlots: { customRender: 'staff' },
},
],
tableList: [],
alarmTypeArr: [],
checkedListBak: []
}
},
watch: {
companyInfo: {
handler(val) {
if (this.companyInfo.companyCode) {
this.getAlarmData()
}
},
deep: true,
immediate: true,
},
},
mounted() { },
methods: {
getAlarmData() {
this.isLoading = true
this.checkedListBak = []
Promise.all([
factory.getGenericPlan(this.companyInfo.companyCode),
factory.getAlarmToWorkOrderList(this.companyInfo.companyCode)
]).then(res => {
this.isLoading = false
const { enabled = false, alarmTypeList = [], personList = [] } = res[0] || {}
this.enabled = enabled
this.alarmTypeArr = [...alarmTypeList]
this.checkedListBak = [...alarmTypeList]
const departmentStaffMap = new Map(
personList.map(el => [
el.departmentId,
(el.personList || []).map(person => person.id)
])
);
this.tableList = (res[1] || []).map(item => ({
...item,
staffConfig: departmentStaffMap.get(item.departmentId) || []
}));
}).catch(() => {
this.isLoading = false
})
},
// 获取子组件选中数据
getCheckedList(val) {
this.checkedListBak = val
this.alarmTypeArr = [...new Set([...this.alarmTypeArr, ...this.checkedListBak])]
},
// 打开报警类型
openAlarmType() {
this.$refs.addAlarmTypeModal.showModal(this.alarmTypeArr)
},
// 人员选择
handleStaffChange(value, index) {
// 人员只能选择两位
if (value && value.length > 2) {
this.$message.destroy()
this.$message.warning(this.$t('人员最多选择2位'))
value = value.slice(0, 2)
}
this.$set(this.tableList[index], 'staffConfig', value)
},
// 确定
onSave() {
// 1. 报警类型检查
if (this.checkedListBak.length == 0) {
this.$message.destroy()
this.$message.warning(this.$t('请选择报警类型'))
return
}
// 2. 用户绑定检查
const hasEmptyStaffConfig = this.tableList.some(item => item.staffConfig.length === 0);
if (hasEmptyStaffConfig) {
this.$message.destroy();
this.$message.warning(this.$t('请选择用户绑定'));
return;
}
// 3. 人员列表处理
const personList = this.tableList.map(item => ({
...item,
personList: item.personList.filter(person => item.staffConfig.includes(person.id))
}));
let params = {
enabled: this.enabled, // 启用状态
companyId: this.companyInfo.companyCode,
alarmTypeList: this.checkedListBak,
personList
}
console.log(params, 'paramsparamsparamsparamsparams');
return
this.isLoading = true
factory.saveAlarmPlan(params).then(res => {
if (res.success) {
this.isLoading = false
this.$message.destroy()
this.$message.success(this.$t("操作成功"))
this.getAlarmData()
}
}).catch(() => {
this.isLoading = false
this.$message.success(this.$t("操作失败"))
})
},
// 取消
onCancel() {
this.getAlarmData()
},
},
}
</script>
<style lang="less" scoped>
.alarm-work-order {
height: 100%;
width: 100%;
position: relative;
box-sizing: border-box;
.edit-view {
width: 100%;
padding: 46px 32px 24px 32px;
.input-item {
width: 100%;
display: flex;
margin-bottom: 22px;
}
.icon-edit {
width: 16px;
height: 16px;
object-fit: contain;
flex-shrink: 0;
cursor: pointer;
}
.input-lable {
width: 88px;
min-width: 88px;
display: flex;
justify-content: flex-end;
color: rgb(105, 118, 136);
font-family: '阿里巴巴普惠体';
font-size: 14px;
font-weight: 400;
margin-right: 24px;
span {
white-space: nowrap;
}
}
.btn-view {
display: flex;
align-items: center;
justify-content: flex-start;
padding-left: 112px;
margin-top: 24px;
& > button {
margin-right: 12px;
}
}
}
}
</style> 代码评审
最新发布