问题描述:
一个分类下有多个规则,每个规则的类型分别为1,2,3
{
"id": 1, //分组id
"groupName": "分组一", //分组名称
"rules": [{
"type": 1, //规则类型
"name": "规则一", //规则名称
"groupId": 1 //关联得分组id
}, {
"type": 2,
"name": "规则二",
"groupId": 1
}]
}
实现代码:
<template>
<div>
<el-table
:data="tableData"
:cell-style="{ 'text-align': 'center' }"
:header-cell-style="{ 'text-align': 'center' }"
style="width: 100%">
<el-table-column type="expand">
<template slot-scope="props">
<el-table
:cell-style="{ 'text-align': 'center' }"
:header-cell-style="{ 'text-align': 'center' }"
:data="props.row.rules"
style="width: 100%">
<el-table-column
prop="id"
label="规则id">
</el-table-column>
<el-table-column label="规则类型">
<template slot-scope="scope">{
{ scope.row.type | setType }}</template>
</el-table-column>
<el-table-column
prop="name"
label="规则名称">
</el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column
prop="id"
label="分组id">
</el-table-column>
<el-table-column
prop="groupName"
label="分组名称">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="text" @click="add(scope.row)">添加</el-button>
</template>
</el-table-column>
</el-table>
<!-- 添加 分类规则 -->
<el-dialog title="添加" :visible.sync="visible" width="600px">
<el-form label-width="130px">
<el-form-item label="分组名称">
<el-input v-model="addRow.groupName" disabled></el-input>
</el-form-item>
<el-form-item label="分组类型">
<el-checkbox-group v-model="selectedTypes" @change="handleCheckedCitiesChange">
<el-checkbox v-for="(item,index) in types" :disabled="item.disable" :value="item.type" :label="item.type">
{
{item.label}}
</el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-form>
<template v-for="(item,index) in addRow.rules">
<el-form ref="form" :rules="rules" :model="addRow.rules[index]">
<el-row :gutter="20" type="flex" align="middle" justify="center" style="margin-bottom: 12px" v-if="index==0">
<el-col :span="10">规则类型</el-col>
<el-col :span="10">规则名称</el-col>
</el-row>
<el-row :gutter="20" type="flex" align="middle" justify="center">
<el-col :span="10">
{
{ item.type | setType }}
</el-col>
<el-col :span="10">
<el-form-item prop="name">
<el-input style="width: 200px" placeholder="请输入规则名称" v-model="item.name"
:disabled="!!item.id"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="submit">确定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
let that;
export default {
name: "test",
data() {
return {
rules: {
name: [
{required: true, message: '请输入规则名称', trigger: 'blur'},
]
},
//列表数据
tableData: [{
id: 1,
groupName: '分组一',
rules: [
{
id: 1,
type: 1,
name: "规则一",
groupId: 1
},
{
id: 2,
type: 2,
name: "规则二",
groupId: 1
}
]
}, {
id: 2,
groupName: '分组二',
rules: [
{
id: 3,
type: 1,
name: "规则一",
groupId: 2
},
]
}],
//规则分类
types: '',
//选中的规则分类
selectedTypes: [],
//点击添加的行
addRow: {},
//是否显示添加弹窗
visible: false
}
},
created() {
that = this;
this.init();
},
filters: {
setType(type) {
for (let item of that.types) {
if (item.type == type) {
return item.label;
}
}
}
},
methods: {
getFormPromise(form) {
console.log("getFormPromise", form)
return new Promise(resolve => {
form.validate(res => {
resolve(res)
})
})
},
//确认添加
submit() {
const form = this.$refs.form // 用户信息
console.log(form)
console.log("提交数据", JSON.stringify(this.addRow.rules));
Promise.all(
form.map(this.getFormPromise)
).then(res => {
const validateResult = res.every(item => !!item)
if (validateResult) {
console.log('表单都校验通过')
} else {
this.$message({
message: `填写有误,请检查`,
type: 'warning'
})
}
})
},
//初始化
init() {
this.types = [
{
label: "类型一",
type: 1
},
{
label: "类型二",
type: 2
},
{
label: "类型三",
type: 3
}
];
},
handleCheckedCitiesChange(e) {
let list = [];
let rules = this.addRow.rules;
for (let type of e) {
let item;
for (let value of rules) {
if (value.type == type) {//存在
item = value
}
}
if (item) {
list.push(item)
} else {
list.push({
id: '',
type: type,
name: "",
groupId: this.addRow.id
})
}
}
this.addRow.rules = list;
},
//添加按钮
add(row) {
console.log("add", row)
let addRow = JSON.parse(JSON.stringify(row));
this.addRow = addRow;
//初始化
this.init();
this.selectedTypes = [];
let selectedTypes = [];
for (let item of addRow.rules) {
selectedTypes.push(item.type);
for (let type of this.types) {
if (item.type == type.type) {
type.disable = true;//历史添加过的不能修改
}
}
}
this.selectedTypes = selectedTypes;
this.visible = true;
},
}
}
</script>