<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"
|
class="avue-dialog"
|
width="1620px"
|
@close="cancelDialog">
|
<div style="min-height: 665px;max-height: 85vh;padding-bottom: 50px;">
|
<basic-form key="businessQueryForm" ref="form"
|
:formData="form"
|
:formItems="formItems"
|
:span="4"
|
style="margin-bottom: 0"
|
@getFormData="getFormData">
|
</basic-form>
|
<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 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
|
:append-to-body="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" v-model="tableForm" :option="tableFormOption"></avue-form>
|
<div class="dialog-footer avue-dialog__footer">
|
<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>
|
<div>
|
查询模板定义
|
<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 0 0 10px">
|
<legend> 查询条件 </legend>
|
<form-query-dialog ref="formQuery"
|
:levelFlag.sync="form.levelFlag"
|
:queryCondition="queryCondition"
|
:queryTree="queryTree"
|
:searchColumn="searchColumn"
|
style="height: 300px;"
|
@queryHandler="queryHandler"
|
></form-query-dialog>
|
</fieldset>
|
</el-main>
|
</el-container>
|
</div>
|
<div class="dialog-footer avue-dialog__footer">
|
<el-button size="small" type="primary" @click="submitDialog">保 存</el-button>
|
<el-button size="small" @click="cancelDialog">取 消</el-button>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import {btmSave, getBizTypeQTDs, getCriteriaBtm} from "@/api/queryTemplate/businessTypeQuery";
|
import basicOption from "@/util/basic-option";
|
import {queryTemplateListByAttr} from "@/api/queryTemplate/queryDefine";
|
import formQueryDialog from "@/views/modelingMenu/queryTemplate/linkTypeQuery/formQueryDialog.vue";
|
|
export default {
|
name: "formDialog",
|
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",
|
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: (dropNode) => {
|
return true;
|
},
|
props: {
|
label: 'name',
|
value: 'name',
|
children: 'attrs'
|
}
|
},
|
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;
|
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.treeOption.defaultExpandedKeys = [data.treeData.label]
|
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();
|
btmSave(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: {
|
orderInfoList: this.orderInfoList,
|
}
|
}
|
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() {
|
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, linkFlag: false}).then(res => {
|
const data = res.data.data.map(item => {
|
item.label = item.name + '-' + item.btmName;
|
item.value = item.name;
|
return item;
|
});
|
this.businessQueryDefineDic = data;
|
data.length > 0 && (this.businessQueryDefineForm = data[0].value);
|
})
|
}
|
},
|
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();
|
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;
|
}
|
});
|
},
|
},
|
}
|
</script>
|
|
<style scoped>
|
fieldset {
|
padding: 10px 6px;
|
margin: 0;
|
border: 1px solid #EBEEF5;
|
}
|
</style>
|
