demo
难点： 1.匹配条件 下的下拉框 需要是一个数据对象的形式
2.点击 添加一个匹配规则 上面的匹配条件 下的 一行再新增一条
3.确认编辑时需要传入id以及form里面的数据
<!-- 添加编辑弹出框 -->
<sec-dialog
:title="title"
:visible.sync="dialogAddVisible"
width="40%"
class="dialogB"
>
<sec-form
ref="form"
class="demoForm"
:rules="rules"
:model="form"
label-width="120px"
label-suffix=":"
>
<sec-form-item
label="规则名称"
prop="ruleName"
>
<sec-input
v-model="form.ruleName"
placeholder="请输入规则名称"
style="width: 300px"
></sec-input>
</sec-form-item>
<sec-form-item
label="规则描述"
prop="ruleDescribe"
>
<sec-input
v-model="form.ruleDescribe"
placeholder="请输入规则描述"
style="width: 300px"
></sec-input>
</sec-form-item>
<sec-form-item
label="匹配条件"
prop="description"
:rules="{
required: true, message: '请选择匹配条件', trigger: 'blur'
}"
>
<div
v-for="(e, index) in form.parameters"
:key="index"
>
<sec-select
v-model="e.matchTarget"
placeholder="匹配目标"
multiple
value-key="parameterValue"
@change="custInfoChange"
>
<sec-option
v-for="item in urlList"
:key="item.parameterValue"
:label="item.parameterName"
:value="item"
>
</sec-option>
</sec-select>
<sec-select
v-model="e.operator"
placeholder="匹配逻辑"
value-key="parameterValue"
style="margin-left:10px;width:150px;"
@change="custChange"
>
<sec-option
v-for="item in signList"
:key="item.parameterValue"
:label="item.parameterName"
:value="item"
>
</sec-option>
</sec-select>
<sec-input
v-model="e.content"
placeholder="匹配内容"
style="width: 150px; margin-left: 10px;"
></sec-input>
<i
class="sec-icon-cuowu"
style="margin-left: 10px;"
@click="delitem(index)"
></i>
</div>
<sec-form-item prop="description">
<sec-button
type="primary"
icon="sec-icon-xinzeng"
style="margin-top:20px;"
@click="addclick"
>添加一个匹配规则</sec-button>
</sec-form-item>
</sec-form-item>
<sec-form-item
label="租户名称"
prop="tenantId"
>
<sec-select
v-model="form.tenantId"
clearable
placeholder="请选择规则租户"
style="width: 300px"
>
<sec-option
v-for="item in tenantList"
:key="item.tenantId"
:label="item.tenantName"
:value="item.tenantId"
>
</sec-option>
</sec-select>
</sec-form-item>
<sec-form-item
label="所属模板"
prop="templateId"
>
<sec-select
v-model="form.templateId"
clearable
placeholder="请选择规则模板"
style="width: 300px"
>
<span
v-for="item in tenantList"
:key="item.tenantId"
>
<sec-option
v-for="item1 in item.templateIds"
:key="item1.templateId"
:label="item1.templateName"
:value="item1.templateId"
>
</sec-option>
</span>
</sec-select>
</sec-form-item>
<sec-form-item
label="保护后启用"
prop="enable"
>
<sec-switch
v-model="form.enable"
active-color="#13ce66"
inactive-color="#ff4949"
:active-value="0"
:inactive-value="1"
></sec-switch>
</sec-form-item>
</sec-form>
<span
slot="footer"
class="dialog-footer"
>
<sec-button @click="dialogAddVisible = false">取 消</sec-button>
<sec-button
type="primary"
@click="submit"
>确 定</sec-button>
</span>
</sec-dialog>
script
data() {
return {
urlList: [], // 匹配目标
signList: [], // 匹配符号
tenantList: [], // 租户的列表
editId: '',
total: 0,
pagenum: 1,
pagesize: 10,
dialogAddVisible: false, // 添加编辑的弹出框
title: '',
// 弹出框的里面的表单
form: {
ruleName: '',
ruleDescribe: '',
parameters: [
{
content: '', matchTarget: [], operator: [] }
],
templateId: '',
tenantId: '',
enable: '',
id: ''
},
}
},
methods
//获取下拉框的数据 （传整个item 与 value-key="parameterValue"作为 value 唯一标识的键名，绑定值为对象类型时必填搭配使用）
// 目标下拉
custInfoChange(val) {
this.form.matchTarget = val
console.log(this.form.matchTarget, '-----下拉的数据')
},
// 逻辑下拉
custChange(val) {
this.form.operator = val
console.log(this.form.operator, '-----逻辑下拉的数据')
},
//点击 添加一个匹配规则 上面的匹配条件 下的 一行再新增一条 (删除的功能也存在)
// 添加下拉框
addclick() {
this.form.parameters.push({
content: '', matchTarget: [], operator: []
})
// console.log(this.form.parameters, '-------添加的数据')
},
// 删除下拉框
delitem(index) {
this.form.parameters.splice(index, 1)
},
//添加 以及确认添加
// 添加
add() {
this.title = '添加自定义规则'
this.dialogAddVisible = true
this.form = {
ruleName: '',
ruleDescribe: '',
parameters: [{
content: '', matchTarget: [], operator: []}],
templateId: '',
tenantId: '',
enable: ''
}
},
//确认添加
submit() {
if (this.title === '添加自定义规则') {
const obj = {
enable: this.form.enable,
parameters: this.form.parameters,
ruleName: this.form.ruleName,
ruleDescribe: this.form.ruleDescribe,
templateId: this.form.templateId,
tenantId: this.form.tenantId
}
getAddRules(obj).then(res => {
console.log(res, '-----添加的shuju')
this.dialogAddVisible = false
this.form = {
ruleName: '',
ruleDescribe: '',
parameters: [{
content: '', matchTarget: [], operator: []}],
templateId: '',
tenantId: '',
enable: ''
}
this.getList()
})
console.log(this.form.enable)
}
},
//编辑回填 以及确认编辑
// 编辑
edit(val) {
const id = val.id
backRules(id).then(res => {
this.form = res.result
this.editId = res.result.id
console.log(this.form, '-----数据回填的信息')
})
this.title = '编辑自定义规则'
this.dialogAddVisible = true
},
//确认编辑
submit() {
else if (this.title === '编辑自定义规则') {
const arr = this.form.parameters
const obj = {
ruleName: this.form.ruleName,
ruleDescribe: this.form.ruleDescribe,
parameters: [...arr],
templateId: this.form.templateId,
tenantId: this.form.tenantId,
enable: this.form.enable
}
console.log(obj)
editRules({
id: this.editId}, obj).then(res => {
console.log(res, '----编辑')
this.dialogAddVisible = false
this.getList()
})
},