| | |
| | | <template> |
| | | <el-dialog v-dialogDrag |
| | | :append-to-body="true" |
| | | :close-on-click-modal="false" |
| | | :destroy-on-close="true" |
| | | :title="dialog.title" |
| | | :visible.sync="dialog.showDialog" |
| | | width="1620px" |
| | | :append-to-body="true" |
| | | class="avue-dialog" |
| | | :destroy-on-close="true" |
| | | :close-on-click-modal="false" |
| | | width="1620px" |
| | | @close="cancelDialog"> |
| | | <div style="min-height: 665px;max-height: 85vh;padding-bottom: 50px;"> |
| | | <basic-form key="linkQueryForm" style="margin-bottom: 0" |
| | | ref="form" |
| | | :span="4" |
| | | :formItems="formItems" |
| | | <basic-form key="businessQueryForm" ref="form" |
| | | :formData="form" |
| | | :formItems="formItems" |
| | | :span="4" |
| | | style="margin-bottom: 0" |
| | | @getFormData="getFormData"> |
| | | </basic-form> |
| | | <avue-crud ref="crud" title="设置排序" |
| | | :data="orderInfoList" :option="crudOption"> |
| | | <avue-crud ref="crud" :data="orderInfoList" |
| | | :option="crudOption" title="设置排序"> |
| | | <template slot="menuLeft" slot-scope="scope"> |
| | | <el-button icon="el-icon-plus" size="small" type="primary" @click="addRow">创建</el-button> |
| | | </template> |
| | |
| | | </template> |
| | | </avue-crud> |
| | | <el-dialog v-dialogDrag |
| | | title="创建" |
| | | :visible.sync="crudDialog.showDialog" |
| | | width="500px" |
| | | :append-to-body="true" |
| | | class="avue-dialog" |
| | | :destroy-on-close="true" |
| | | :close-on-click-modal="false" |
| | | :destroy-on-close="true" |
| | | :visible.sync="crudDialog.showDialog" |
| | | class="avue-dialog" |
| | | title="创建" |
| | | width="500px" |
| | | @close="crudDialog.showDialog=false"> |
| | | <avue-form ref="tableForm" :option="tableFormOption" v-model="tableForm"></avue-form> |
| | | <avue-form ref="tableForm" v-model="tableForm" :option="tableFormOption"></avue-form> |
| | | <div class="dialog-footer avue-dialog__footer"> |
| | | <el-button type="primary" plain size="small" @click="rowSave" >保 存</el-button> |
| | | <el-button plain size="small" type="primary" @click="rowSave">保 存</el-button> |
| | | </div> |
| | | </el-dialog> |
| | | <el-container style="margin-top: 10px;"> |
| | | <el-aside style="width:350px"> |
| | | <fieldset> |
| | | <legend> 链接类型候选条件 </legend> |
| | | <legend> 候选条件 </legend> |
| | | <div> |
| | | 查询模板定义 |
| | | <avue-select @change="linkQueryDefineChange" class="el-input--small" v-model="linkQueryDefineForm" placeholder="请选择内容" type="tree" :dic="linkQueryDefineDic" style="width:240px"></avue-select> |
| | | <avue-tree style="height: 265px" :data="linkTreeData" :option="treeOption" @node-drag-start="handleDragStart"> |
| | | <avue-select v-model="businessQueryDefineForm" :dic="businessQueryDefineDic" class="el-input--small" |
| | | placeholder="请选择内容" style="width: 245px;" type="tree" |
| | | @change="businessQueryDefineChange"></avue-select> |
| | | <avue-tree :data="businessTreeData" :option="treeOption" style="width:335px;height: 268px" |
| | | @node-drag-start="handleDragStart" @node-drag-end="handleDragEnd"> |
| | | </avue-tree> |
| | | </div> |
| | | </fieldset> |
| | | </el-aside> |
| | | <el-main> |
| | | <fieldset style="margin: 0 10px"> |
| | | <fieldset style="margin: 0 0 0 10px"> |
| | | <legend> 查询条件 </legend> |
| | | <form-query-dialog ref="formQuery" |
| | | style="height: 300px;" |
| | | :levelFlag.sync="form.levelFlag" |
| | | :queryCondition="queryCondition" |
| | | :queryTree="queryTree" |
| | | :levelFlag.sync="form.levelFlag" |
| | | :searchColumn="searchColumn" |
| | | style="height: 300px;" |
| | | @queryHandler="queryHandler" |
| | | ></form-query-dialog> |
| | | </fieldset> |
| | | </el-main> |
| | | <el-aside style="width:350px"> |
| | | <fieldset> |
| | | <legend> 业务类型候选条件 </legend> |
| | | <div> |
| | | 查询模板定义 |
| | | <avue-select @change="businessQueryDefineChange" class="el-input--small" v-model="businessQueryDefineForm" placeholder="请选择内容" type="tree" :dic="businessQueryDefineDic" style="width: 240px;"></avue-select> |
| | | <avue-tree style="height: 265px" :data="businessTreeData" :option="treeOption" @node-drag-start="handleDragStart"> |
| | | </avue-tree> |
| | | </div> |
| | | </fieldset> |
| | | </el-aside> |
| | | </el-container> |
| | | </div> |
| | | <div class="dialog-footer avue-dialog__footer"> |
| | | <el-button type="primary" plain size="small" @click="submitDialog" >保 存</el-button> |
| | | <el-button size="small" type="primary" @click="submitDialog">保 存</el-button> |
| | | <el-button size="small" @click="cancelDialog">取 消</el-button> |
| | | </div> |
| | | </el-dialog> |
| | | </template> |
| | | |
| | | <script> |
| | | import {getAllOrderbyAttributeByLink} from "@/api/modeling/linkType/api"; |
| | | import {linkSave} from "@/api/queryTemplate/linkTypeQuery"; |
| | | import {btmSave, getBizTypeQTDs, getCriteriaBtm} from "@/api/queryTemplate/businessTypeQuery"; |
| | | import basicOption from "@/util/basic-option"; |
| | | import {queryTemplateListByAttr} from "@/api/queryTemplate/queryDefine"; |
| | | import formQueryDialog from "./formQueryDialog.vue"; |
| | | import formQueryDialog from "@/views/modelingMenu/queryTemplate/linkTypeQuery/formQueryDialog.vue"; |
| | | |
| | | export default { |
| | | name: "formDialog", |
| | | components:{formQueryDialog}, |
| | | data(){ |
| | | components: {formQueryDialog}, |
| | | data() { |
| | | return { |
| | | searchColumn: [ |
| | | { |
| | | label: 'OID', |
| | | prop: 'OID', |
| | | }, |
| | | { |
| | | label: 'REVISIONOID', |
| | | prop: 'REVISIONOID' |
| | | }, |
| | | { |
| | | label: 'NAMEOID', |
| | | prop: 'NAMEOID' |
| | | }, |
| | | { |
| | | label: 'BTMNAME', |
| | | prop: 'BTMNAME' |
| | | } |
| | | ], |
| | | dialog: { |
| | | showDialog: false, |
| | | title: "创建", |
| | |
| | | submitTxt: "保存", |
| | | submitIcon: "el-icon-check", |
| | | }, |
| | | formItems:[{ |
| | | formItems: [{ |
| | | label: '查询模板名称', |
| | | prop: 'qtName', |
| | | type: 'input', |
| | | span:5, |
| | | span: 5, |
| | | rules: [{ |
| | | required: true, |
| | | message: "请输入查询模板名称", |
| | | trigger: "blur" |
| | | }] |
| | | }], |
| | | form:{ |
| | | btmName:'', |
| | | form: { |
| | | btmName: '', |
| | | qtName: '', |
| | | levelFlag:0,//0:普通查询模板; 1:高级查询模板" |
| | | queryTemplate:{} |
| | | levelFlag: 0,//0:普通查询模板; 1:高级查询模板" |
| | | queryTemplate: {} |
| | | }, |
| | | //已有排序列表配置 |
| | | crudOption: { |
| | |
| | | prop: 'orderField' |
| | | }, { |
| | | label: '排序方式', |
| | | prop: 'orderMode' |
| | | prop: 'orderMode', |
| | | formatter: function (row, value) { |
| | | if (row.orderMode == 'ASC') { |
| | | return '升序' |
| | | } else { |
| | | return '降序' |
| | | } |
| | | } |
| | | }, { |
| | | label: '优先级', |
| | | prop: 'level' |
| | | }] |
| | | }, |
| | | //已有排序 |
| | | orderInfoList:[], |
| | | orderInfoList: [], |
| | | //设置排序弹窗表单数据 |
| | | tableForm:{ |
| | | orderField:'', |
| | | orderMode:'ASC', |
| | | level:'' |
| | | tableForm: { |
| | | orderField: '', |
| | | orderMode: 'ASC', |
| | | level: '' |
| | | }, |
| | | //设置排序弹窗所有可排序字段 |
| | | orderFieldList:[], |
| | | orderFieldList: [], |
| | | //设置排序弹窗表单配置 |
| | | tableFormOption: { |
| | | menuBtn: false, |
| | | submitBtn: false, |
| | | emptyBtn: false, |
| | | span:24, |
| | | span: 24, |
| | | column: [{ |
| | | label: '排序字段', |
| | | prop: 'orderField', |
| | | type:'select', |
| | | type: 'select', |
| | | props: { |
| | | label: 'id', |
| | | value: 'id' |
| | |
| | | label: '优先级', |
| | | prop: 'level', |
| | | type: 'number', |
| | | min:1, |
| | | min: 1, |
| | | rules: [{ |
| | | required: true, |
| | | message: "请输入优先级", |
| | |
| | | }] |
| | | }] |
| | | }, |
| | | treeOption:{ |
| | | defaultExpandAll:true, |
| | | treeOption: { |
| | | defaultExpandAll: true, |
| | | menu: false, |
| | | addBtn: false, |
| | | filter:false, |
| | | filter: false, |
| | | draggable: true, |
| | | allowDrop: () => { |
| | | return false; |
| | | }, |
| | | allowDrag: () => { |
| | | allowDrag: (dropNode) => { |
| | | return true; |
| | | }, |
| | | props: { |
| | | label: 'name', |
| | | value: 'name', |
| | | children: 'attrs' |
| | | } |
| | | }, |
| | | linkQueryDefineForm:'',//链接类型查询模板定义选中值 |
| | | linkQueryDefineDic:[],//链接类型查询模板定义下拉数据 |
| | | //链接类型查询模板定义选中项属性 |
| | | linkTreeData: [], |
| | | businessQueryDefineForm:'',//业务类型查询模板定义选中值 |
| | | businessQueryDefineDic:[],//业务类型查询模板定义下拉数据 |
| | | businessQueryDefineForm: '',//业务类型查询模板定义选中值 |
| | | businessQueryDefineDic: [],//业务类型查询模板定义下拉数据 |
| | | //业务类型查询模板定义选中项属性 |
| | | businessTreeData: [], |
| | | //高级查询条件 |
| | | queryTree:{}, |
| | | queryTree: {}, |
| | | //普通查询条件 |
| | | queryCondition:[], |
| | | |
| | | queryCondition: [], |
| | | }; |
| | | }, |
| | | watch: { |
| | | //方向 |
| | | 'form.direction': { |
| | | handler(val) { |
| | | if(val=='positive'){ |
| | | //正向 |
| | | const dicData=this.treeData.btmItemsTo.map(item=>{ |
| | | return { |
| | | label: item, |
| | | value: item |
| | | } |
| | | }) |
| | | dicData.push({ |
| | | label: '所有类型', |
| | | value: '*' |
| | | }) |
| | | this.$refs.form.updateDic('btmType', dicData); |
| | | this.form.btmType=dicData[0].value |
| | | this.getAllAttr(); |
| | | }else if(val=='opposite'){ |
| | | //反向 |
| | | const dicData=this.treeData.btmItemsFrom.map(item=>{ |
| | | return { |
| | | label: item, |
| | | value: item |
| | | } |
| | | }) |
| | | dicData.push({ |
| | | label: '所有类型', |
| | | value: '*' |
| | | }) |
| | | this.$refs.form.updateDic('btmType', dicData); |
| | | this.form.btmType=dicData[0].value |
| | | this.getAllAttr(); |
| | | } |
| | | }, |
| | | immediate: true, |
| | | }, |
| | | //业务类型 |
| | | 'form.btmType': { |
| | | handler(val) { |
| | | if(val && val!='*'){ |
| | | this.getTemp(val,false); |
| | | } |
| | | }, |
| | | immediate: true, |
| | | } |
| | | }, |
| | | watch: {}, |
| | | methods: { |
| | | openDialog(btmName, title, mode, data) { |
| | | this.dialog.title = title; |
| | |
| | | if (data.selectData.queryTemplate.orderInfoList && data.selectData.queryTemplate.orderInfoList.length > 0) { |
| | | this.orderInfoList = JSON.parse(JSON.stringify(data.selectData.queryTemplate.orderInfoList));//已有排序 |
| | | } |
| | | this.queryCondition=this.selectData.queryTemplate.condition; |
| | | this.queryTree=this.selectData.tree; |
| | | this.form.levelFlag=this.selectData.levelFlag; |
| | | this.queryCondition = this.selectData.queryTemplate.condition; |
| | | this.queryTree = this.selectData.tree; |
| | | this.form.levelFlag = this.selectData.levelFlag; |
| | | } else { |
| | | this.selectData = {}; |
| | | this.orderInfoList = []; |
| | | this.queryCondition=[]; |
| | | this.queryTree={ |
| | | connector:'并且', |
| | | child:[] |
| | | this.queryCondition = []; |
| | | this.queryTree = { |
| | | connector: '并且', |
| | | child: [] |
| | | }; |
| | | } |
| | | this.dialog.showDialog = true; |
| | | this.getTemp(data.treeData.label, true) |
| | | this.treeOption.defaultExpandedKeys = [data.treeData.label] |
| | | this.getTemp(data.treeData.label) |
| | | this.getAllAttr(); |
| | | }, |
| | | cancelDialog() { |
| | | this.dialog.loading = false; |
| | |
| | | this.form = { |
| | | btmName: '', |
| | | qtName: '', |
| | | levelFlag:0, |
| | | levelFlag: 0, |
| | | queryTemplate: {} |
| | | }; |
| | | this.orderInfoList =[]; |
| | | this.businessQueryDefineForm=''; |
| | | this.linkQueryDefineForm=''; |
| | | this.orderInfoList = []; |
| | | this.businessQueryDefineForm = ''; |
| | | this.linkQueryDefineForm = ''; |
| | | this.$refs.form.clearValidate(); |
| | | }); |
| | | }, |
| | | submitDialog() { |
| | | this.$refs.form.validate((valid) => { |
| | | if (valid) { |
| | | const formData=this.initFormData(); |
| | | console.log(formData) |
| | | linkSave(formData).then(res => { |
| | | const formData = this.initFormData(); |
| | | btmSave(formData).then(res => { |
| | | if (res.data.success) { |
| | | this.$message.success("保存成功"); |
| | | this.cancelDialog(); |
| | | this.$emit("refresh"); |
| | | } else { |
| | | this.$refs.form.clearValidate(); |
| | | } |
| | | }); |
| | | } else { |
| | |
| | | qtName: this.form.qtName, |
| | | levelFlag: this.form.levelFlag, |
| | | queryTemplate: { |
| | | btmType: this.form.btmType, |
| | | clauseList: ['*'], |
| | | id: this.form.qtName, |
| | | level: this.form.level, |
| | | linkType: this.form.btmName, |
| | | orderInfoList: this.orderInfoList, |
| | | recReturnMode: 1,//递归返回数据模式:1:RECRETURNMODE_FLAT, 2:RECRETURNMODE_FILTER |
| | | rightFlag: true, |
| | | secretFlag: true, |
| | | type: 'link', |
| | | version: this.form.version |
| | | } |
| | | } |
| | | if (formData.levelFlag == 1) { |
| | | //高级 |
| | | let that = this; |
| | | |
| | | function initValue(nodeChild) { |
| | | let children = []; |
| | | if (nodeChild) { |
| | |
| | | }, |
| | | // 行删除 |
| | | rowDeleteHandler(data) { |
| | | this.orderInfoList.splice(data.index,1); |
| | | this.orderInfoList.splice(data.index, 1); |
| | | this.orderFieldList.unshift({ |
| | | id: data.row.orderField |
| | | }); |
| | | this.tableFormOption.column[0].dicData= this.orderFieldList |
| | | this.$refs.tableForm.updateDic('orderField',this.orderFieldList); |
| | | }, |
| | | //获取排序设置中所有排序字段 |
| | | getAllAttr() { |
| | | getAllOrderbyAttributeByLink({ |
| | | name: this.treeData.label, |
| | | btmType: this.form.btmType, |
| | | direction: this.form.direction |
| | | getBizTypeQTDs({ |
| | | btmName: this.treeData.label |
| | | }).then(res => { |
| | | const orderInfoStr = JSON.stringify(this.orderInfoList); |
| | | const dicData = []; |
| | | res.data.data.forEach(item => { |
| | | if (orderInfoStr.indexOf('"orderField":"' + item + '"') == -1) { |
| | | dicData.push({id: item}); |
| | | if (orderInfoStr.indexOf('"orderField":"' + item.id + '"') == -1) { |
| | | dicData.push(item); |
| | | } |
| | | }) |
| | | this.tableFormOption.column[0].dicData=dicData; |
| | | this.orderFieldList=dicData; |
| | | this.tableFormOption.column[0].dicData = dicData; |
| | | this.orderFieldList = dicData; |
| | | }) |
| | | }, |
| | | //排序设置保存 |
| | | rowSave() { |
| | | this.$refs.tableForm.validate((valid) => { |
| | | if(valid){ |
| | | if (valid) { |
| | | this.orderInfoList.push(JSON.parse(JSON.stringify(this.tableForm))); |
| | | this.crudDialog.showDialog=false; |
| | | this.crudDialog.showDialog = false; |
| | | const orderInfoStr = JSON.stringify(this.orderInfoList); |
| | | const dicData = []; |
| | | this.orderFieldList.forEach(item => { |
| | |
| | | dicData.push(item); |
| | | } |
| | | }) |
| | | this.tableFormOption.column[0].dicData=dicData; |
| | | this.orderFieldList=dicData; |
| | | this.tableForm= { |
| | | this.tableFormOption.column[0].dicData = dicData; |
| | | this.orderFieldList = dicData; |
| | | this.tableForm = { |
| | | orderField: '', |
| | | orderMode: 'ASC', |
| | | level: '' |
| | |
| | | }) |
| | | }, |
| | | //获取查询模板定义下拉 |
| | | getTemp(btmName,linkFlag) { |
| | | getTemp(btmName) { |
| | | if (btmName) { |
| | | queryTemplateListByAttr({btmName: btmName, linkFlag: linkFlag,direction:this.form.direction}).then(res => { |
| | | queryTemplateListByAttr({btmName: btmName, linkFlag: false}).then(res => { |
| | | const data = res.data.data.map(item => { |
| | | item.label = item.name + '-' + (item.linkTypeName || item.btmName); |
| | | item.label = item.name + '-' + item.btmName; |
| | | item.value = item.name; |
| | | return item; |
| | | }); |
| | | if(linkFlag){ |
| | | this.linkQueryDefineDic=data |
| | | data.length>0 && (this.linkQueryDefineForm=data[0].value); |
| | | }else { |
| | | this.businessQueryDefineDic=data; |
| | | data.length>0 && (this.businessQueryDefineForm= data[0].value); |
| | | } |
| | | this.businessQueryDefineDic = data; |
| | | data.length > 0 && (this.businessQueryDefineForm = data[0].value); |
| | | }) |
| | | } |
| | | }, |
| | | linkQueryDefineChange(data) { |
| | | if (data.value) { |
| | | const childData = data.item.attrs.map(item => { |
| | | return { |
| | | label: item.name, |
| | | value: item.name, |
| | | atttributes:item |
| | | }; |
| | | }); |
| | | this.linkTreeData = [{ |
| | | label: data.value, |
| | | value: data.value, |
| | | children: childData |
| | | }] |
| | | } |
| | | }, |
| | | businessQueryDefineChange(data) { |
| | | if (data.value) { |
| | | const childData = data.item.attrs.map(item => { |
| | | return { |
| | | label: item.name, |
| | | value: item.name, |
| | | atttributes:item |
| | | }; |
| | | }); |
| | | this.businessTreeData = [{ |
| | | label: data.value, |
| | | value: data.value, |
| | | children: childData |
| | | }] |
| | | this.businessTreeData = [data.item] |
| | | } |
| | | }, |
| | | // 开始拖拽树节点事件 |
| | | handleDragStart(node, ev) { |
| | | // 使用 setData 方法设置数据 |
| | | ev.dataTransfer.setData('item', JSON.stringify(node.data)); |
| | | if (this.form.levelFlag == 1) { |
| | | this.$refs.formQuery.$refs.tree.$emit('tree-node-drag-start', ev, {node: this.$refs.formQuery.initItem(node)}); |
| | | } |
| | | }, |
| | | handleDragEnd(draggingNode, endNode, position, ev) { |
| | | if (this.form.levelFlag == 1) { |
| | | this.$refs.formQuery.$refs.tree.$emit('tree-node-drag-end', ev); |
| | | } |
| | | }, |
| | | //查询 |
| | | queryHandler() { |
| | | this.$refs.form.validate((valid) => { |
| | | if (valid) { |
| | | this.$refs.formQuery.queryResultDialog.loading = true; |
| | | const formData = this.initFormData(); |
| | | getCriteriaBtm(formData).then(res => { |
| | | if (res.data.success) { |
| | | const data = res.data.data; |
| | | const result = data.map(item => { |
| | | const filteredAttrs = item.hisAttrValList.filter(attr => |
| | | attr.attrName === "OID" || attr.attrName === "REVISIONOID" || attr.attrName === "BTMNAME" || attr.attrName === "NAMEOID" |
| | | ); |
| | | |
| | | const newObj = filteredAttrs.reduce((acc, attr) => { |
| | | acc[attr.attrName] = attr.attrVal; |
| | | return acc; |
| | | }, {}); |
| | | |
| | | return newObj; |
| | | }); |
| | | |
| | | this.$refs.formQuery.resultData = result; |
| | | this.$refs.formQuery.queryResultDialog.showDialog = true; |
| | | this.$refs.formQuery.queryResultDialog.loading = false; |
| | | } |
| | | }); |
| | | } else { |
| | | return false; |
| | | } |
| | | }); |
| | | }, |
| | | }, |
| | | } |
| | |
| | | |
| | | <style scoped> |
| | | fieldset { |
| | | border-radius: 5px; |
| | | -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1); |
| | | box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1); |
| | | padding: 10px 6px; |
| | | box-sizing: border-box; |
| | | margin: 0; |
| | | border: 1px solid #EBEEF5; |
| | | } |