<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">
<div class="
input-lable text-bold">
<span>{{ $t('预案是否启用') }}</span>
</div>
<div class="
input-content">
<a-radio-group v-model="formData.enabled" :default-value="1">
<a-radio :value="1">{{ $t('启用') }}</a-radio>
<a-radio :value="0">{{ $t('禁用') }}</a-radio>
</a-radio-group>
</div>
</div>
<div class="
input-item">
<div class="
input-lable text-align">
<span> {{ $t('报警类型:') }}</span>
</div>
<div class="
input-content">
<a-select
collapseTags
mode="multiple"
:maxTagCount="2"
v-model="formData.type"
allowClear
placeholder="请选择"
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="department"
:columns="columns"
:dataSource="displayTableList"
:scroll="{ x: '100%' }"
:pagination="false"
>
<template slot="staff" slot-scope="text, record, index">
<a-select
v-model="record.staffConfig"
mode="multiple"
placeholder="选择人员"
optionFilterProp="label"
:maxTagCount="2"
allowClear
@change="val => handleStaffChange(val, 'staffConfig', index)"
>
<a-select-option
v-for="person in availableStaffMap[index]"
:key="person.id"
:label="person.name"
:value="person.id"
>
{{ person.name }}
</a-select-option>
</a-select>
</template>
<template slot="time" slot-scope="text, record, index">
<a-select
v-model="record.timeConfig"
@change="val => changeTime(val, 'timeConfig', index)"
placeholder="选择期望完成时间"
>
<a-select-option v-for="option in timeOptions" :key="option.value" :value="option.value">
{{ option.label }}
</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>
</div>
</template>
<script>
export default {
props: {
orgInfo: {
type: Object,
default: () => {
return {};
},
},
companyInfo: {
type: Object,
default: () => {
return {};
},
},
},
data() {
return {
isLoading: false,
formData: {},
typeOptions: [
{
label: '选项1',
value: 1,
},
{
label: '选项2',
value: 2,
},
{
label: '选项3',
value: 3,
},
{
label: '选项4',
value: 4,
},
],
columns: [
{
title: '部门',
key: 'department',
dataIndex: 'department',
ellipsis: true,
},
{
title: '用户',
dataIndex: 'staff',
scopedSlots: { customRender: 'staff' },
key: 'staff',
},
{
title: '期望完成时间设定',
dataIndex: 'time',
scopedSlots: { customRender: 'time' },
key: 'time',
},
],
tableList: [
{ department: '技术部', staffConfig: ['001', '002'], timeConfig: '24h' },
{ department: '运维部', staffConfig: ['003'], timeConfig: '48h' },
{ department: '安全部', staffConfig: [], timeConfig: '7d' },
{ department: '网络部', staffConfig: [], timeConfig: '24h' },
{ department: '数据库部', staffConfig: [], timeConfig: '12h' },
],
timeOptions: [
{ label: '报警后12小时', value: '12h' },
{ label: '报警后24小时', value: '24h' },
{ label: '报警后48小时', value: '48h' },
{ label: '报警后7日内', value: '7d' },
],
staffList: [
{ id: '001', name: '张三' },
{ id: '002', name: '李四' },
{ id: '003', name: '王五' },
{ id: '004', name: '赵六' },
],
};
},
computed: {
// 所有被选中的用户ID（整个表格）
allSelectedStaffIds() {
const selected = new Set();
this.tableList.forEach(row => {
if (Array.isArray(row.staffConfig)) {
row.staffConfig.forEach(id => selected.add(id));
}
});
return selected;
},
// 为每一行生成可用人员列表
availableStaffMap() {
const map = {};
const allSelected = this.allSelectedStaffIds;
this.tableList.forEach((row, index) => {
// 当前行已选的人员ID集合
const currentSelected = row.staffConfig ? new Set(row.staffConfig) : new Set();
// 过滤出当前行可用的人员
map[index] = this.staffList.filter(person => !allSelected.has(person.id) || currentSelected.has(person.id));
});
return map;
},
// 用于显示的表数据（包含过滤后的人员显示）
displayTableList() {
return this.tableList.map((row, index) => {
const availableStaff = this.availableStaffMap[index] || [];
return {
...row,
// 仅用于显示，不修改
原始数据
displayStaffConfig: row.staffConfig.filter(id => availableStaff.some(p => p.id === id)),
};
});
},
},
mounted() {
console.log(this.allSelectedStaffIds, 'allSelectedStaffIdsallSelectedStaffIds');
console.log(this.availableStaffMap, 'availableStaffMap');
console.log(this.displayTableList, 'displayTableList');
// this.updateStatus();
},
methods: {
changeTime(value, key, index) {
this.$set(this.tableList[index], key, value);
},
handleStaffChange(value, key, index) {
// 人员只能选择两位
if (value && value.length > 2) {
this.$message.destroy();
this.$message.warning('人员最多选择2位');
value = value.slice(0, 2);
}
this.$set(this.tableList[index], key, value);
// this.updateStatus();
console.log(this.allSelectedStaffIds, 'allSelectedStaffIdsallSelectedStaffIds');
console.log(this.availableStaffMap, 'availableStaffMap');
console.log(this.displayTableList, 'displayTableList');
},
updateStatus() {
const selectedIds = new Set();
this.tableList.forEach(row => {
if (Array.isArray(row.staffConfig)) {
row.staffConfig.forEach(id => selectedIds.add(id));
}
});
this.staffList.forEach((person, index) => {
const shouldDisable = selectedIds.has(person.id);
if (person.disabled !== shouldDisable) {
this.$set(this.staffList, index, {
...person,
disabled: shouldDisable,
});
}
});
},
updateData(value, key, index) {
this.$set(this.tableList[index], key, value);
},
// 确定
onSave() {
console.log('保存的数据:', {
tableList: this.tableList,
});
},
// 取消
onCancel() {},
},
};
</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;
&:last-child {
margin-bottom: 0 !important;
}
}
.
input-lable {
width: 88px;
min-width: 88px;
justify-content: start;
display: flex;
color: #808e9d;
font-size: 14px;
line-height: 19px;
margin-right: 24px;
span {
white-space: nowrap;
}
}
.text-bold {
font-weight: bold;
color: #4e5c6b;
}
.text-align {
align-items: center;
}
.btn-view {
display: flex;
align-items: center;
justify-content: flex-start;
padding-left: 112px;
margin-top: 24px;
& >
button {
margin-right: 12px;
}
}
}
}
</style> 代码评审
探讨button和input标签圆角设置后，点击时出现原始边框的问题。通过设置CSS样式outline:none;来有效解决边框高亮显示，区别于仅使用border:none;的方法。
扫一扫
3870
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
