<template> <div class="settingForm"> <baseNewForm ref="typeOptionForm" :spanNumber="18" :isFunBtn="false" :formRow="formRow" :ruleForm="ruleForm" :labelPosition="'top'" @onSelect="typeSelectChangeHanlde" @onSubmit="typeOptionOnSubmit" > </baseNewForm> <div class="bigTitle">数据权限设置</div> <div class="tableName"> <div class="title">数据主表名称</div> <div class="input"> <el-select clearable v-model="tableId" @change="serviceSeleChangHadle"> <el-option v-for="(item,index) of serviceOptions" :key="index" :label="item.label" :value="item.id" > </el-option> </el-select> </div> </div> <div class="main" v-loading="mainLoading"> <!-- 此处逻辑当拥有左括号或者右括号时 连接符清除并禁用--> <baseTable :tableData="tableData" :tabLoading="tabLoading" :tableColumn="tableColumn" :border="false" > <!-- 左括号--> <template #leftBracket="{row}"> <el-select clearable v-model="row.leftBracket" > <el-option v-for="(item,index) of leftBracketOptions" :key="index" :label="item.label" :value="item.value"> </el-option> </el-select> </template> <!-- 字段名称--> <template #filedName="{row}"> <el-select clearable v-model="row.filedId" @change="(val)=>{filedIdChangHandle(val,row)}"> <el-option v-for="(item,index) of labelOptions" :key="index" :label="item.label" :value="item.id"> </el-option> </el-select> </template> <!-- 对比类型--> <template #compareType="{row}"> <el-select clearable v-model="row.compareType"> <el-option v-for="(item,index) of compareTypeOptions" :key="index" :label="item.label" :value="item.value"> </el-option> </el-select> </template> <!-- 运算值--> <template #filedVaule="{row}"> <el-input v-model="row.filedVaule"></el-input> </template> <!-- 连接符--> <template #connectionSymbol="{row}"> <el-select clearable v-model="row.connectionSymbol" > <el-option v-for="(item,index) of connectionSymbolOptions" :key="index" :label="item.label" :value="item.value" > </el-option> </el-select> </template> <!-- 右括号--> <template #rightParenthesis="{row}"> <el-select clearable v-model="row.rightParenthesis"> <el-option v-for="(item,index) of rightParenthesisOptions" :key="index" :label="item.label" :value="item.value" > </el-option> </el-select> </template> <!-- 操作--> <template #operation="{row}"> <div class="btnList"> <div class="deleBtn" @click="activedOnFunc(row)"> <img src="./images/删除.png" alt=""> </div> </div> </template> </baseTable> <div class="receiptsAddRow"> <el-link type="primary" @click="addRowHandle" :underline="false" >+ 添加 </el-link > </div> </div> </div> </template> <script> import baseNewForm from '../compoments/baseNewForm' import BaseTable from '@/views/intergrationTask/compoments/baseTable.vue' import { authApi } from '@/api/apis/auth' import { getApiModuleApi } from '@/api/apiChunks' import { retrieveRawAttr } from 'echarts/lib/data/helper/dataProvider' export default { name: 'settingForm', data() { return { formRow: [ { elCol: [ { type: 'select', title: '应用列表', id: 'appId', row: 24, disabled: false, required: true, fontSize: 16, options: [] } ] }, { elCol: [ { type: 'select', title: '触发类型', id: 'enabledType', row: 24, disabled: false, required: true, fontSize: 16, options: [ { label: '手动', id: '0' }, { label: '自动', id: '1' } ] } ] }, { elCol: [ { type: 'select', title: '新增接口', id: 'addApi', row: 24, disabled: false, required: true, fontSize: 16, options: [] } ] }, { elCol: [ { type: 'select', title: '修改接口', id: 'updateApi', row: 24, disabled: false, required: true, fontSize: 16, options: [] } ] }, { elCol: [ { type: 'select', title: '删除接口', id: 'deleteApi', row: 24, disabled: false, required: true, fontSize: 16, options: [] } ] }, { elCol: [ { type: 'select', title: '新增脚本', id: 'addScript', row: 24, disabled: false, fontSize: 16, options: [] } ] }, { elCol: [ { type: 'select', title: '修改脚本', id: 'updateScript', row: 24, disabled: false, fontSize: 16, options: [] } ] }, { elCol: [ { type: 'select', title: '删除脚本', id: 'deleteScript', row: 24, disabled: false, fontSize: 16, options: [] } ] }, { elCol: [ { type: 'switch', title: '启用/停用', id: 'enabledState', row: 24, disabled: false, required: true, fontSize: 16, activeValue: '1', inactiveValue: '0' } ] } ], ruleForm: {}, tableId: '',//数据源主表名称 mainLoading: false, tabLoading: false, tableData: [], tableColumn: [ { title: '括号', id: 'leftBracket' }, { title: '字段名称', id: 'filedName' }, { title: '字段编码', id: 'filedId' }, { title: '运算符', id: 'compareType' }, { title: '运算值', id: 'filedVaule' }, { title: '连接符', id: 'connectionSymbol' }, { title: '括号', id: 'rightParenthesis' }, { title: '操作', id: 'operation' } ], compareTypeOptions: [ { label: '=', value: '1' }, { label: '!=', value: '2' }, { label: '>', value: '3' }, { label: '<', value: '4' } ],//对比类型options connectionSymbolOptions: [ { label: 'and', value: '1' }, { label: 'or', value: '2' } ],//连接符号options leftBracketOptions: [ { label: '(', value: '(' } ],//左括号 rightParenthesisOptions: [ { label: ')', value: ')' } ],//右括号 serviceOptions: [],//主表 labelOptions: [],//字段名称下啦 labelDist: {}//字段名称字典 } }, methods: { //字段名称修改事件 需要存filedName filedIdChangHandle(val, row) { row.filedName = this.labelDist[val] }, //主表名称下啦改变事件 1.请求字段名称做成下啦 2.清除表单内所有字段名称和编码 async serviceSeleChangHadle(val, flag = true) { if (flag) { this.labelOptions = [] this.labelDist = {} this.tableData.forEach(item => { item.filedName = '' item.filedId = '' }) } if (val) { let obj = this.serviceOptions.find(item => { return val === item.id }) const res = await getApiModuleApi({ tl: 'mdmModuleService', as: '', dj: 'queryMdmServiceField' }, { mdmId: obj.mdmId, dbId: obj.dbId }) res.attribute.forEach(item => { this.$set(this.labelDist, item.enName, item.chName) this.labelOptions.push({ id: item.enName, label: item.chName }) }) } }, //表字段字段类型下啦初始化 async initSelect() { //服务名下拉 this.serviceOptions = [] const service = await getApiModuleApi({ tl: 'mdmModuleService', as: '', dj: 'queryMdmService' }, { remark: '' }) service.attribute.forEach(item => { console.log(item.dbName, 'item') this.serviceOptions.push({ id: item.id, label: item.remark, dbId: item.id, mdmId: item.mdmId }) }) console.log(this.serviceOptions, 'this.serviceOptions') }, async typeSelectChangeHanlde(val, index, indexRow, row, flag = true) { if (flag && row.id === 'appId') { this.formRow[2].elCol[0].options = [] this.formRow[3].elCol[0].options = [] this.formRow[4].elCol[0].options = [] this.formRow[5].elCol[0].options = [] this.formRow[6].elCol[0].options = [] this.formRow[7].elCol[0].options = [] this.$set(this.ruleForm, 'addApi', '') this.$set(this.ruleForm, 'updateApi', '') this.$set(this.ruleForm, 'deleteApi', '') this.$set(this.ruleForm, 'addScript', '') this.$set(this.ruleForm, 'updateScript', '') this.$set(this.ruleForm, 'deleteScript', '') } //当下啦是appid时条用接口查询该app下的所有接口用在新增、修改、删除上 if (row.id === 'appId' && val) { const res = await authApi('sysApplicationApiService', '', 'queryEntity', '', { appId: val }) res.attribute.forEach((item) => { this.formRow[2].elCol[0].options.push({ id: item.id, label: item.apiName }) this.formRow[3].elCol[0].options.push({ id: item.id, label: item.apiName }) this.formRow[4].elCol[0].options.push({ id: item.id, label: item.apiName }) }) //插件 this.openLoading('detail') const res2 = await authApi('sysApplicationService', '', 'queryAppScript', '', { appId: val }) res2.attribute.forEach((item) => { this.formRow[5].elCol[0].options.push({ id: item.id, label: item.scriptName }) this.formRow[6].elCol[0].options.push({ id: item.id, label: item.scriptName }) this.formRow[7].elCol[0].options.push({ id: item.id, label: item.scriptName }) }) } }, //测试通过 async typeOptionOnSubmit() { let flag //校验规则:1.允许表单为0行 2.当表单为1行时只需要判断 字段、运算符、运算值的填写 3.当表单>1行时第一行必须要填写左括号 。最后一行表单则必填右括号,非最后一行必填连接符,一行中不能同时出现左括号和右括号 if (this.tableData.length === 1) { flag = this.tableData.some(item => { if (item.leftBracket || item.rightParenthesis || item.connectionSymbol) { this.$vmNews(`当仅有一行时不允许填写左右括号及连接符`) return true } if (!item.filedName) { this.$vmNews('请选择字段名称') return true } if (!item.compareType) { this.$vmNews('请选择运算符') return true } if (!item.filedVaule) { this.$vmNews('请填写运算值') return true } }) } else if (this.tableData.length > 1) { //这边需要开始计算左括号和右括号数量 两者括号只允许左括号-右括号=1或者左括号-右括号=0否则报错 let leftBracketNum = 0 let rightParenthesisNum = 0 flag = this.tableData.some((item, index) => { //最后一行右括号为必填 if (index + 1 === this.tableData.length && !item.rightParenthesis) { this.$vmNews(`最后一行请填写右括号`) return true } //第一行必须填写左括号 if (index + 1 === 1 && !item.leftBracket) { this.$vmNews(`首行请填写左括号`) return true } //除了最后一行每一行的连接符为必填 if (index + 1 != this.tableData.length && !item.connectionSymbol) { this.$vmNews(`第${index + 1}请填写连接符`) return true } //最后一行不允许填写连接符 if (index + 1 == this.tableData.length && item.connectionSymbol) { this.$vmNews(`最后一行不允许填写连接符`) return true } if (!item.filedName) { this.$vmNews(`第${index + 1}行请填写字段名称`) return true } if (!item.compareType) { this.$vmNews(`第${index + 1}行请填写运算符`) return true } if (!item.filedVaule) { this.$vmNews(`第${index + 1}行请填写运算值`) return true } if (item.leftBracket && item.rightParenthesis) { this.$vmNews(`第${index + 1}行中不允许同时存在左括号和右括号`) return true } //开始判断左右括号是否一致 if (item.leftBracket) { leftBracketNum++ let num = leftBracketNum - rightParenthesisNum if (num !== 0 && num !== 1) { this.$vmNews(`第${index + 1}行中左括号填写不符合规则请重新填写`) return true } } if (item.rightParenthesis) { rightParenthesisNum++ let num = leftBracketNum - rightParenthesisNum if (num !== 0 && num !== 1) { this.$vmNews(`第${index + 1}行中右括号填写不符合规则请重新填写`) return true } } }) } if (flag) return let params = { ...this.ruleForm, dbId: this.tableId, mdmId: this.$route.query.id, mdmModuleDistributeDetailEntities: this.tableData } if (params.id) { this.openLoading('submit') const res = await authApi('mdmModuleService', '', 'updateMdmDistribute', '', params) this.$vmNews('保存成功', 'success') this.$emit('saveSuccessHandle') } else { this.openLoading('submit') const res = await authApi('mdmModuleService', '', 'saveMdmDistribute', '', params) this.$vmNews('保存成功', 'success') this.$emit('saveSuccessHandle') } }, addRowHandle() { this.tableData.push({ 'leftBracket': '',//左括号 'filedName': '',//字段名 'compareType': '',//对比类型 1、等于 2、不等于 3、大于 4、小于 'filedVaule': '',//值 'connectionSymbol': '',// 连接符号 1\and 2\or 'rightParenthesis': ''// 右括号 }) }, //删除 activedOnFunc(row) { this.tableData.splice(row.index, 1) }, //获取应用下啦 async getAppList() { const res = await authApi('sysApplicationService', '', 'queryEntity', '', {}) console.log(res) this.formRow[0].elCol[0].options = [] res.attribute.forEach(item => { this.formRow[0].elCol[0].options.push({ id: item.id, label: item.name }) }) }, //编辑获取数据 async getrowDetails(id) { this.openLoading('detail') const res = await authApi('mdmModuleService', '', 'getMdmDistribute', '', { id }) this.ruleForm = res.attribute this.tableId = this.ruleForm.dbId this.tableData = res.attribute.mdmModuleDistributeDetailEntities console.log(this.tableData, '?') this.typeSelectChangeHanlde(this.ruleForm.appId, 0, 0, { id: 'appId' }, false) this.serviceSeleChangHadle(this.ruleForm.dbId, false) } }, created() { this.getAppList() this.initSelect() }, components: { BaseTable, baseNewForm } } </script> <style scoped lang="scss"> .bigTitle { border-top: 1px solid #EBEBEB; padding-top: 20px; font-family: PingFangSC, PingFang SC; font-weight: 600; font-size: 16px; color: #333333; line-height: 22px; text-align: left; font-style: normal; } .tableName { display: flex; align-items: center; margin: 30px 0; .title { margin-right: 20px; font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 14px; color: #333333; line-height: 20px; text-align: left; font-style: normal; } } .receiptsAddRow { margin-top: 30px; border: 1px dotted #ccc; text-align: center; height: 50px; line-height: 50px; } .btnList { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; .deleBtn { cursor: pointer; margin-left: 10px; width: 24px; height: 24px; background: #EBEBED; border-radius: 6px; display: flex; justify-content: center; align-items: center; > img { width: 10px; height: 10px; } } } </style>