| | |
| | | <el-dialog v-dialogDrag |
| | | :title="dialog.title" |
| | | :visible.sync="dialog.showDialog" |
| | | width="1600px" |
| | | width="1620px" |
| | | :append-to-body="true" |
| | | class="avue-dialog" |
| | | :destroy-on-close="true" |
| | |
| | | <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"> |
| | | <avue-tree style="height: 265px" :data="linkTreeData" :option="treeOption" @node-drag-start="handleDragStart" @node-drag-end="handleDragEnd"> |
| | | </avue-tree> |
| | | </div> |
| | | </fieldset> |
| | |
| | | <el-main> |
| | | <fieldset style="margin: 0 10px"> |
| | | <legend> 查询条件 </legend> |
| | | <form-query-dialog style="height: 300px;"></form-query-dialog> |
| | | <form-query-dialog ref="formQuery" |
| | | style="height: 300px;" |
| | | :queryCondition="queryCondition" |
| | | :queryTree="queryTree" |
| | | :levelFlag.sync="form.levelFlag" |
| | | ></form-query-dialog> |
| | | </fieldset> |
| | | </el-main> |
| | | <el-aside style="width:350px"> |
| | |
| | | <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"> |
| | | <avue-tree style="height: 265px" :data="businessTreeData" :option="treeOption" @node-drag-start="handleDragStart" @node-drag-end="handleDragEnd"> |
| | | </avue-tree> |
| | | </div> |
| | | </fieldset> |
| | |
| | | import {getAllOrderbyAttributeByLink} from "@/api/modeling/linkType/api"; |
| | | import {linkSave} from "@/api/queryTemplate/linkTypeQuery"; |
| | | import basicOption from "@/util/basic-option"; |
| | | import {gridTemplate} from "@/api/queryTemplate/queryDefine"; |
| | | import {queryTemplateListByAttr} from "@/api/queryTemplate/queryDefine"; |
| | | import formQueryDialog from "./formQueryDialog.vue"; |
| | | export default { |
| | | name: "formDialog", |
| | |
| | | form:{ |
| | | btmName:'', |
| | | qtName: '', |
| | | levelFlag:0,//0:普通查询模板; 1:高级查询模板" |
| | | queryTemplate:{} |
| | | }, |
| | | //已有排序列表配置 |
| | |
| | | menu: false, |
| | | addBtn: false, |
| | | filter:false, |
| | | draggable: true, |
| | | allowDrop: () => { |
| | | return false; |
| | | }, |
| | | allowDrag: () => { |
| | | return true; |
| | | }, |
| | | }, |
| | | linkQueryDefineForm:'',//链接类型查询模板定义选中值 |
| | | linkQueryDefineDic:[],//链接类型查询模板定义下拉数据 |
| | |
| | | businessQueryDefineDic:[],//业务类型查询模板定义下拉数据 |
| | | //业务类型查询模板定义选中项属性 |
| | | businessTreeData: [], |
| | | //高级查询条件 |
| | | queryTree:{}, |
| | | //普通查询条件 |
| | | queryCondition:[], |
| | | |
| | | }; |
| | | }, |
| | | watch: { |
| | |
| | | } |
| | | }, |
| | | immediate: true, |
| | | }, |
| | | 'dialog.type': { |
| | | handler(val) { |
| | | if(val=='edit'){ |
| | | } |
| | | }, |
| | | immediate: true, |
| | | }, |
| | | } |
| | | }, |
| | | methods: { |
| | | openDialog(btmName, title, mode, data) { |
| | |
| | | |
| | | if (data.selectData) { |
| | | this.selectData = data.selectData; |
| | | this.formItems[0].disabled = true |
| | | this.form.qtName = this.selectData.qtName; |
| | | this.form.direction = this.selectData.queryTemplate.direction; |
| | | this.form.btmType = this.selectData.queryTemplate.btmType; |
| | |
| | | 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; |
| | | } else { |
| | | this.selectData = {}; |
| | | this.orderInfoList = []; |
| | | this.formItems[0].disabled = false; |
| | | this.queryCondition=[]; |
| | | this.queryTree={ |
| | | connector:'并且', |
| | | child:[] |
| | | }; |
| | | } |
| | | this.dialog.showDialog = true; |
| | | this.getTemp(data.treeData.label, true) |
| | | this.$nextTick(()=>{ |
| | | this.dialog.showDialog = true; |
| | | }); |
| | | |
| | | }, |
| | | cancelDialog() { |
| | | this.dialog.loading = false; |
| | |
| | | this.form = { |
| | | btmName: '', |
| | | qtName: '', |
| | | levelFlag:0, |
| | | queryTemplate: {} |
| | | }; |
| | | this.orderInfoList =[]; |
| | | this.$refs.form.clearValidate(); |
| | | this.businessQueryDefineForm=''; |
| | | this.linkQueryDefineForm=''; |
| | | this.$refs.form.clearValidate(); |
| | | }); |
| | | }, |
| | | submitDialog() { |
| | | this.$refs.form.validate((valid) => { |
| | | if (valid) { |
| | | let formData={ |
| | | btmName:this.form.btmName, |
| | | qtName:this.form.qtName, |
| | | queryTemplate:{ |
| | | btmType:this.form.btmType, |
| | | clauseList:['*'], |
| | | direction:this.form.direction, |
| | | id:this.form.qtName, |
| | | level:this.form.level, |
| | | linkType:this.form.btmName, |
| | | orderInfoList:this.orderInfoList, |
| | | queryISLeaf:this.form.queryISLeaf, |
| | | recReturnMode:1,//递归返回数据模式:1:RECRETURNMODE_FLAT, 2:RECRETURNMODE_FILTER |
| | | rightFlag:true, |
| | | secretFlag:true, |
| | | type:'link', |
| | | version:this.form.version |
| | | } |
| | | } |
| | | formData.condition=[] |
| | | const formData=this.initFormData(); |
| | | console.log(formData) |
| | | linkSave(formData).then(res => { |
| | | if (res.data.success) { |
| | | this.$message.success("保存成功"); |
| | |
| | | return false; |
| | | } |
| | | }); |
| | | }, |
| | | initFormData() { |
| | | let formData = { |
| | | btmName: this.form.btmName, |
| | | qtName: this.form.qtName, |
| | | levelFlag: this.form.levelFlag, |
| | | queryTemplate: { |
| | | btmType: this.form.btmType, |
| | | clauseList: ['*'], |
| | | direction: this.form.direction, |
| | | id: this.form.qtName, |
| | | level: this.form.level, |
| | | linkType: this.form.btmName, |
| | | orderInfoList: this.orderInfoList, |
| | | queryISLeaf: this.form.queryISLeaf, |
| | | 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) { |
| | | nodeChild.forEach((item, index) => { |
| | | if (item.label != '并且' && item.label != '或者') { |
| | | children.push(item.label); |
| | | } else { |
| | | children.push({ |
| | | connector: item.label, |
| | | child: initValue(item.children) |
| | | }) |
| | | } |
| | | }) |
| | | } |
| | | return children; |
| | | } |
| | | |
| | | let treeData = { |
| | | connector: this.$refs.formQuery.treeData[0].label |
| | | }; |
| | | if (this.$refs.formQuery.treeData[0].children) { |
| | | treeData.child = initValue(this.$refs.formQuery.treeData[0].children); |
| | | } |
| | | formData.tree = treeData |
| | | } |
| | | |
| | | formData.condition = this.$refs.formQuery.conditionList; |
| | | |
| | | return formData; |
| | | }, |
| | | getFormData(form) { |
| | | this.form = form; |
| | |
| | | //获取查询模板定义下拉 |
| | | getTemp(btmName,linkFlag) { |
| | | if (btmName) { |
| | | gridTemplate({btmName: btmName, linkFlag: linkFlag}).then(res => { |
| | | queryTemplateListByAttr({btmName: btmName, linkFlag: linkFlag,direction:this.form.direction}).then(res => { |
| | | const data = res.data.data.map(item => { |
| | | item.label = item.name + '-' + (item.linkTypeName || item.btmName); |
| | | item.value = item.name; |
| | |
| | | }, |
| | | linkQueryDefineChange(data) { |
| | | if (data.value) { |
| | | const childData = data.item.abNames.map(item => { |
| | | const childData = data.item.attrs.map(item => { |
| | | return { |
| | | label: item, |
| | | value: item |
| | | label: item.name, |
| | | value: item.name, |
| | | atttributes:item |
| | | }; |
| | | }); |
| | | this.linkTreeData = [{ |
| | |
| | | }, |
| | | businessQueryDefineChange(data) { |
| | | if (data.value) { |
| | | const childData = data.item.abNames.map(item => { |
| | | const childData = data.item.attrs.map(item => { |
| | | return { |
| | | label: item, |
| | | value: item |
| | | label: item.name, |
| | | value: item.name, |
| | | atttributes:item |
| | | }; |
| | | }); |
| | | this.businessTreeData = [{ |
| | |
| | | children: childData |
| | | }] |
| | | } |
| | | }, |
| | | // 开始拖拽树节点事件 |
| | | 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); |
| | | } |
| | | } |
| | | }, |
| | | } |