<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> 代码评审
这篇文章展示了在HTML页面中使用CSS样式创建了一个简单的表单，包含身份证号和密码输入框，用于演示前端用户验证的过程。
扫一扫
4383
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
