<template>
|
<el-dialog v-dialogDrag
|
:title="dialog.title"
|
:visible.sync="dialog.showDialog"
|
width="1650px"
|
: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="linkQueryDefineChange" class="el-input--small" v-model="linkQueryDefineForm" placeholder="请选择内容" type="tree" :dic="linkQueryDefineDic" style="width:245px"></avue-select>
|
<avue-tree style="width:335px;height: 268px" :data="linkTreeData" :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"
|
:searchColumn="searchColumn"
|
@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: 245px;"></avue-select>
|
<avue-tree style="width:335px;height: 268px" :data="businessTreeData" :option="treeOption" @node-drag-start="handleDragStart" @node-drag-end="handleDragEnd">
|
</avue-tree>
|
</div>
|
</fieldset>
|
</el-aside>
|
</el-container>
|
</div>
|
<div class="dialog-footer avue-dialog__footer">
|
<el-button type="primary" size="small" @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,getCriteria} from "@/api/queryTemplate/linkTypeQuery";
|
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 {
|
searchColumn: [
|
{
|
label: 'OID',
|
prop: 'OID',
|
},
|
{
|
label: 'CREATOR',
|
prop: 'CREATOR'
|
},
|
{
|
label: 'CREATETIME',
|
prop: 'CREATETIME'
|
},
|
],
|
dialog: {
|
showDialog: false,
|
title: "创建",
|
loading: false,
|
type: "add",
|
},
|
crudDialog: {
|
showDialog: false,
|
},
|
formItems:[{
|
label: '查询模板名称',
|
prop: 'qtName',
|
type: 'input',
|
span:4.5,
|
labelWidth: 110,
|
rules: [{
|
required: true,
|
message: "请输入查询模板名称",
|
trigger: "blur"
|
}]
|
},{
|
label: '方向',
|
prop: 'direction',
|
type: 'radio',
|
value:'positive',
|
labelWidth:80,
|
span: 3.5,
|
dicData: [{
|
label: '正向',
|
value: 'positive'
|
}, {
|
label: '反向',
|
value: 'opposite'
|
}],
|
control: (val, form) => {
|
const dicData=this.getDicData(val);
|
this.form.btmType=dicData[0].value
|
return {
|
btmType: {
|
dicData: dicData
|
}
|
};
|
}
|
},{
|
label: '业务类型',
|
prop: 'btmType',
|
type: 'select',
|
labelWidth:110,
|
clearable:false,
|
rules: [{
|
required: true,
|
message: "请选择业务类型",
|
trigger: "blur"
|
}],
|
dicData: [],
|
change: ({ value, column, item, dic }) => {
|
this.form.btmType=value;
|
if(value){
|
this.getAllAttr();
|
this.getTemp(value,false);
|
}
|
},
|
}, {
|
label: '版本版次',
|
prop: 'version',
|
type: 'select',
|
span:4,
|
labelWidth:110,
|
dicData: [{
|
label: '当前版本当前版次',
|
value: 1
|
}, {
|
label: '当前版本最新版次',
|
value: 2
|
}, {
|
label: '最新版本最新版次',
|
value: 3
|
}, {
|
label: '已发布的最新版本',
|
value: 7
|
}],
|
value: 1
|
},{
|
label: '查询是否有下级',
|
prop: 'queryISLeaf',
|
type: 'switch',
|
labelWidth:150,
|
dicData: [ {
|
label: '否',
|
value: false
|
},{
|
label: '是',
|
value: true
|
}],
|
value:false
|
}, {
|
label: '子节点层次数',
|
prop: 'level',
|
type: 'number',
|
labelWidth:130,
|
value:1
|
}],
|
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: (node) => {
|
return false;
|
},
|
allowDrag: (dropNode) => {
|
return true;
|
},
|
props:{
|
label:'name',
|
value:'name',
|
children:'attrs'
|
}
|
},
|
linkQueryDefineForm:'',//链接类型查询模板定义选中值
|
linkQueryDefineDic:[],//链接类型查询模板定义下拉数据
|
//链接类型查询模板定义选中项属性
|
linkTreeData: [],
|
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.direction = this.selectData.queryTemplate.direction;
|
this.form.btmType = this.selectData.queryTemplate.btmType;
|
this.form.version = this.selectData.queryTemplate.version;
|
this.form.queryISLeaf = this.selectData.queryTemplate.queryISLeaf;
|
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;
|
|
const dicData=this.getDicData(this.form.direction);
|
this.formItems[2].dicData=dicData;
|
} else {
|
this.form.direction='positive';
|
this.selectData = {};
|
this.orderInfoList = [];
|
this.queryCondition=[];
|
this.queryTree={
|
connector:'并且',
|
child:[]
|
};
|
const dicData=this.getDicData(this.form.direction);
|
this.formItems[2].dicData=dicData;
|
this.form.btmType=dicData[0].value;
|
}
|
this.dialog.showDialog = true;
|
this.treeOption.defaultExpandedKeys=[data.treeData.label]
|
this.getTemp(data.treeData.label, true)
|
},
|
//获取业务类型下拉数据
|
getDicData(directionVal){
|
let dicData=[];
|
if(directionVal=='positive'){
|
//正向
|
dicData=this.treeData.btmItemsTo.map(item=>{
|
return {
|
label: item,
|
value: item
|
}
|
})
|
}else if(directionVal=='opposite'){
|
//反向
|
dicData=this.treeData.btmItemsFrom.map(item=>{
|
return {
|
label: item,
|
value: item
|
}
|
})
|
}
|
dicData.push({
|
label: '所有类型',
|
value: '*'
|
})
|
return dicData;
|
},
|
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 {
|
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;
|
},
|
addRow() {
|
this.crudDialog.showDialog = true;
|
},
|
// 行删除
|
rowDeleteHandler(data) {
|
this.orderInfoList.splice(data.index,1);
|
this.orderFieldList.unshift({
|
id: data.row.orderField
|
});
|
this.$refs.tableForm.updateDic('orderField',this.orderFieldList);
|
},
|
//获取排序设置中所有排序字段
|
getAllAttr() {
|
getAllOrderbyAttributeByLink({
|
name: this.treeData.label,
|
btmType: this.form.btmType,
|
direction: this.form.direction
|
}).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});
|
}
|
})
|
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,linkFlag) {
|
if (btmName) {
|
queryTemplateListByAttr({btmName: btmName, linkFlag: linkFlag,direction:linkFlag?null:this.form.direction}).then(res => {
|
const data = res.data.data.map(item => {
|
item.label = item.name + '-' + (item.linkTypeName || 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);
|
}
|
})
|
}
|
},
|
linkQueryDefineChange(data) {
|
if (data.value) {
|
this.linkTreeData = [ data.item]
|
}
|
},
|
businessQueryDefineChange(data) {
|
if (data.value) {
|
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();
|
getCriteria(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 === "CREATOR" || attr.attrName === "CREATETIME"
|
);
|
|
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;
|
}
|
});
|
},
|
},
|
}
|
</script>
|
|
<style scoped>
|
fieldset {
|
padding: 10px 6px;
|
margin: 0;
|
border: 1px solid #EBEEF5;
|
}
|
</style>
|
