<template>
|
<el-dialog v-dialogDrag
|
: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"
|
@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"
|
:formData="form"
|
@getFormData="getFormData">
|
</basic-form>
|
<avue-crud ref="crud" title="设置排序"
|
:data="orderInfoList" :option="crudOption">
|
<template slot="menuLeft" slot-scope="scope">
|
<el-button icon="el-icon-plus" size="small" type="primary" @click="addRow">创建</el-button>
|
</template>
|
<template slot="menu" slot-scope="scope">
|
<el-button icon="el-icon-delete" size="small" type="text" @click="rowDeleteHandler(scope)">删除
|
</el-button>
|
</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"
|
@close="crudDialog.showDialog=false">
|
<avue-form ref="tableForm" :option="tableFormOption" v-model="tableForm"></avue-form>
|
<div class="dialog-footer avue-dialog__footer">
|
<el-button type="primary" plain size="small" @click="rowSave" >保 存</el-button>
|
</div>
|
</el-dialog>
|
<el-container style="margin-top: 10px;">
|
<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" @node-drag-end="handleDragEnd">
|
</avue-tree>
|
</div>
|
</fieldset>
|
</el-aside>
|
<el-main>
|
<fieldset style="margin: 0 10px">
|
<legend> 查询条件 </legend>
|
<form-query-dialog ref="formQuery"
|
style="height: 300px;"
|
:queryCondition="queryCondition"
|
:queryTree="queryTree"
|
:levelFlag.sync="form.levelFlag"
|
></form-query-dialog>
|
</fieldset>
|
</el-main>
|
</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" @click="cancelDialog">取 消</el-button>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import {linkSave,getBizTypeQTDs} from "@/api/queryTemplate/businessTypeQuery";
|
import basicOption from "@/util/basic-option";
|
import {queryTemplateListByAttr} from "@/api/queryTemplate/queryDefine";
|
import formQueryDialog from "./formQueryDialog.vue";
|
export default {
|
name: "formDialog",
|
components:{formQueryDialog},
|
data(){
|
return {
|
dialog: {
|
showDialog: false,
|
title: "创建",
|
submitTxt: "保存",
|
submitIcon: "el-icon-check",
|
loading: false,
|
type: "add",
|
},
|
crudDialog: {
|
showDialog: false,
|
submitTxt: "保存",
|
submitIcon: "el-icon-check",
|
},
|
formItems:[{
|
label: '查询模板名称',
|
prop: 'qtName',
|
type: 'input',
|
span:5,
|
rules: [{
|
required: true,
|
message: "请输入查询模板名称",
|
trigger: "blur"
|
}]
|
}],
|
form:{
|
btmName:'',
|
qtName: '',
|
levelFlag:0,//0:普通查询模板; 1:高级查询模板"
|
queryTemplate:{}
|
},
|
//已有排序列表配置
|
crudOption: {
|
...basicOption,
|
addBtn: false,
|
editBtn: false,
|
delBtn: false,
|
selection: false,
|
height: "220",
|
tip: false,
|
column: [{
|
label: '排序字段',
|
prop: 'orderField'
|
}, {
|
label: '排序方式',
|
prop: 'orderMode',
|
formatter:function (row, value) {
|
if (row.orderMode == 'ASC') {
|
return '升序'
|
}else{
|
return '降序'
|
}
|
}
|
}, {
|
label: '优先级',
|
prop: 'level'
|
}]
|
},
|
//已有排序
|
orderInfoList:[],
|
//设置排序弹窗表单数据
|
tableForm:{
|
orderField:'',
|
orderMode:'ASC',
|
level:''
|
},
|
//设置排序弹窗所有可排序字段
|
orderFieldList:[],
|
//设置排序弹窗表单配置
|
tableFormOption: {
|
menuBtn: false,
|
submitBtn: false,
|
emptyBtn: false,
|
span:24,
|
column: [{
|
label: '排序字段',
|
prop: 'orderField',
|
type:'select',
|
props: {
|
label: 'id',
|
value: 'id'
|
},
|
rules: [{
|
required: true,
|
message: "请选择排序字段",
|
trigger: "blur"
|
}]
|
}, {
|
label: '排序方式',
|
prop: 'orderMode',
|
type: 'select',
|
dicData: [{
|
label: '升序',
|
value: 'ASC'
|
}, {
|
label: '降序',
|
value: 'DESC'
|
}],
|
value: 'ASC'
|
}, {
|
label: '优先级',
|
prop: 'level',
|
type: 'number',
|
min:1,
|
rules: [{
|
required: true,
|
message: "请输入优先级",
|
trigger: "blur"
|
}]
|
}]
|
},
|
treeOption:{
|
defaultExpandAll:true,
|
menu: false,
|
addBtn: false,
|
filter:false,
|
draggable: true,
|
allowDrop: () => {
|
return false;
|
},
|
allowDrag: () => {
|
return true;
|
},
|
},
|
businessQueryDefineForm:'',//业务类型查询模板定义选中值
|
businessQueryDefineDic:[],//业务类型查询模板定义下拉数据
|
//业务类型查询模板定义选中项属性
|
businessTreeData: [],
|
//高级查询条件
|
queryTree:{},
|
//普通查询条件
|
queryCondition:[],
|
};
|
},
|
watch: {
|
},
|
methods: {
|
openDialog(btmName, title, mode, data) {
|
this.dialog.title = title;
|
this.dialog.type = mode;
|
this.form.btmName = btmName;
|
this.treeData = data.treeData;
|
|
if (data.selectData) {
|
this.selectData = data.selectData;
|
this.form.qtName = this.selectData.qtName;
|
this.form.level = this.selectData.queryTemplate.level;
|
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.queryCondition=[];
|
this.queryTree={
|
connector:'并且',
|
child:[]
|
};
|
}
|
this.dialog.showDialog = true;
|
this.getTemp(data.treeData.label)
|
this.getAllAttr();
|
},
|
cancelDialog() {
|
this.dialog.loading = false;
|
this.dialog.showDialog = false;
|
this.$nextTick(() => {
|
this.form = {
|
btmName: '',
|
qtName: '',
|
levelFlag:0,
|
queryTemplate: {}
|
};
|
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 => {
|
if (res.data.success) {
|
this.$message.success("保存成功");
|
this.cancelDialog();
|
this.$emit("refresh");
|
}else {
|
this.$refs.form.clearValidate();
|
}
|
});
|
} else {
|
return false;
|
}
|
});
|
},
|
initFormData() {
|
let formData = {
|
btmName: this.form.btmName,
|
qtName: this.form.qtName,
|
levelFlag: this.form.levelFlag,
|
queryTemplate: {
|
clauseList: ['*'],
|
direction: this.form.direction,
|
id: this.form.qtName,
|
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) {
|
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;
|
},
|
addRow() {
|
this.crudDialog.showDialog = true;
|
},
|
// 行删除
|
rowDeleteHandler(data) {
|
debugger;
|
this.orderInfoList.splice(data.index,1);
|
this.orderFieldList.unshift({
|
id: data.row.orderField
|
});
|
this.tableFormOption.column[0].dicData= this.orderFieldList
|
},
|
//获取排序设置中所有排序字段
|
getAllAttr() {
|
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.id + '"') == -1) {
|
dicData.push(item);
|
}
|
})
|
this.tableFormOption.column[0].dicData=dicData;
|
this.orderFieldList=dicData;
|
})
|
},
|
//排序设置保存
|
rowSave() {
|
this.$refs.tableForm.validate((valid) => {
|
if(valid){
|
this.orderInfoList.push(JSON.parse(JSON.stringify(this.tableForm)));
|
this.crudDialog.showDialog=false;
|
const orderInfoStr = JSON.stringify(this.orderInfoList);
|
const dicData = [];
|
this.orderFieldList.forEach(item => {
|
if (orderInfoStr.indexOf('"orderField":"' + item.id + '"') == -1) {
|
dicData.push(item);
|
}
|
})
|
this.tableFormOption.column[0].dicData=dicData;
|
this.orderFieldList=dicData;
|
this.tableForm= {
|
orderField: '',
|
orderMode: 'ASC',
|
level: ''
|
}
|
}
|
})
|
},
|
//获取查询模板定义下拉
|
getTemp(btmName) {
|
if (btmName) {
|
queryTemplateListByAttr({btmName: btmName}).then(res => {
|
const data = res.data.data.map(item => {
|
item.label = item.name + '-' + (item.linkTypeName || item.btmName);
|
item.value = item.name;
|
return item;
|
});
|
this.businessQueryDefineDic=data;
|
data.length>0 && (this.businessQueryDefineForm= data[0].value);
|
|
})
|
}
|
},
|
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
|
}]
|
}
|
},
|
// 开始拖拽树节点事件
|
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);
|
}
|
}
|
},
|
}
|
</script>
|
|
<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;
|
}
|
</style>
|
