<template>
|
<div>
|
<el-tabs tab-position="left" :style="'height: '+height+'px;'">
|
<el-tab-pane>
|
<span slot="label"><i class="el-icon-s-custom"></i> 主体</span>
|
<div v-if="!readOnly" style="margin-bottom: 10px;">
|
<el-button plain size="mini" type="primary" @click="userHandler">选中用户</el-button>
|
<el-button plain size="mini" type="primary" @click="roleHandler">选择角色</el-button>
|
<el-button plain size="mini" type="primary" @click="deptHandler">选择用户组</el-button>
|
</div>
|
<div v-if="!readOnly" style="display: flex;justify-content: space-between;align-items: center;">
|
<fieldset style="width: 48%">
|
<legend> 主体 </legend>
|
<div>
|
<avue-crud ref="mainCrud" :data="mainData" :option="mainOption">
|
<template #type="{ row }">
|
<el-tag v-if="row.type=='用户'" :key="row.oid" effect="dark">{{ row.type }}</el-tag>
|
<el-tag v-else-if="row.type=='角色'" type="info" :key="row.oid" effect="dark">{{ row.type }}</el-tag>
|
<el-tag v-else="row.type=='部门'" type="warning" :key="row.oid" effect="dark">{{ row.type }}</el-tag>
|
</template>
|
</avue-crud>
|
</div>
|
</fieldset>
|
<div style="text-align: center;">
|
<el-button icon="el-icon-arrow-right" size="mini" @click="rightHandler" style="margin-bottom: 50px;"></el-button><br/>
|
<el-button icon="el-icon-arrow-left" size="mini" @click="leftHandler"></el-button>
|
</div>
|
<fieldset style="width: 42%">
|
<legend> 授权主体 </legend>
|
<div>
|
<avue-crud ref="authCrud" :data="authData" :option="authOption" :table-loading="tableLoading">
|
</avue-crud>
|
</div>
|
</fieldset>
|
</div>
|
<div v-else>
|
<fieldset style="width: 99.5%">
|
<legend> 授权主体 </legend>
|
<div>
|
<avue-crud ref="authCrud" :data="authData" :option="authOption" :table-loading="tableLoading">
|
</avue-crud>
|
</div>
|
</fieldset>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane>
|
<span slot="label"><i class="el-icon-eleme"></i> 客体</span>
|
<div>
|
<basic-form key="queryForm" style="margin-bottom: 0"
|
ref="form"
|
:span="8"
|
:formItems="formItems"
|
:formData="form"
|
@getFormData="getFormData">
|
</basic-form>
|
<el-container v-if="!readOnly">
|
<el-aside style="width:350px">
|
<fieldset>
|
<legend> 候选条件 </legend>
|
<div>
|
<avue-radio v-model="radioForm" :dic="radioDic" style="margin: 0 10px 5px"></avue-radio>
|
<div v-show="radioForm==1">
|
查询模板定义
|
<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: '+(height-155)+'px;'" :data="linkTreeData" :option="treeOption" @node-drag-start="handleDragStart" @node-drag-end="handleDragEnd">
|
</avue-tree>
|
</div>
|
<div v-show="radioForm==0">
|
查询模板定义
|
<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: '+(height-155)+'px;'" :data="businessTreeData" :option="treeOption" @node-drag-start="handleDragStart" @node-drag-end="handleDragEnd">
|
</avue-tree>
|
</div>
|
</div>
|
</fieldset>
|
</el-aside>
|
<el-main>
|
<fieldset style="margin: 0 10px">
|
<legend> 查询条件 </legend>
|
<form-query-dialog ref="formQuery"
|
:style="'height: '+(height-100)+'px;'"
|
:queryCondition="queryCondition"
|
:queryTree="queryTree"
|
:levelFlag.sync="form.levelFlag"
|
@queryHandler="queryHandler"
|
></form-query-dialog>
|
</fieldset>
|
</el-main>
|
</el-container>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane>
|
<span slot="label"><i class="el-icon-s-tools"></i> 操作</span>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</template>
|
|
<script>
|
import basicOption from "@/util/basic-option";
|
import formQueryDialog from "@/views/modelingMenu/queryTemplate/linkTypeQuery/formQueryDialog.vue";
|
import {queryTemplateListByAttr} from "@/api/queryTemplate/queryDefine";
|
import {getCriteria} from "@/api/queryTemplate/linkTypeQuery";
|
|
export default {
|
name: "dataView",
|
components:{formQueryDialog},
|
props: {
|
//选中的业务类型节点
|
btmNode: {
|
type: Object,
|
default: {}
|
},
|
//选中行数据
|
data: {
|
type: Object,
|
default: {}
|
},
|
readOnly: {
|
type: Boolean,
|
default: false
|
},
|
height: {
|
type: Number,
|
default: 400
|
},
|
},
|
data() {
|
return {
|
mainData:[],
|
tableLoading: false,
|
mainOption: {
|
...basicOption,
|
header:false,
|
addBtn: false,
|
editBtn: false,
|
delBtn: false,
|
selection: false,
|
index:false,
|
menu:false,
|
height: this.height-80,
|
tip:false,
|
size:'mini',
|
column: [{
|
label: ' 分类',
|
prop: 'type',
|
sortable: true,
|
width:110
|
},{
|
label: '编码',
|
prop: 'id'
|
},{
|
label: '名称',
|
prop: 'name'
|
}]
|
},
|
authData:[],
|
authOption:{
|
...basicOption,
|
header:false,
|
addBtn: false,
|
editBtn: false,
|
delBtn: false,
|
selection: false,
|
index:false,
|
menu:false,
|
height: this.readOnly?this.height-50:this.height-80,
|
tip:false,
|
showHeader:false,
|
size:'mini',
|
column: [{
|
label: '名称',
|
prop: 'name'
|
}]
|
},
|
formItems:[{
|
label: '规则名称',
|
prop: 'qtName',
|
type: 'input',
|
span:8,
|
labelWidth: 100,
|
disabled:this.readOnly,
|
rules: [{
|
required: true,
|
message: "请输入规则名称",
|
trigger: "blur"
|
}]
|
}, {
|
label: '规则类型',
|
prop: 'version',
|
type: 'select',
|
span:6,
|
labelWidth:110,
|
disabled:this.readOnly,
|
dicData: [{
|
label: '全部允许',
|
value: 1
|
}, {
|
label: '允许权限',
|
value: 2
|
}, {
|
label: '全部拒绝',
|
value: 3
|
}, {
|
label: '拒绝权限',
|
value: 7
|
}],
|
value: 1
|
}],
|
form:{
|
btmName:'',
|
qtName: '',
|
levelFlag:0,//0:普通查询模板; 1:高级查询模板"
|
queryTemplate:{}
|
},
|
radioForm:0,
|
radioDic:[{
|
label:'业务类型 ',
|
value:0
|
},{
|
label:'链接类型',
|
value:1
|
}],
|
treeOption: {
|
defaultExpandAll: true,
|
menu: false,
|
addBtn: false,
|
filter: false,
|
draggable: true,
|
allowDrop: () => {
|
return false;
|
},
|
allowDrag: (dropNode) => {
|
if (dropNode.data.attrs && dropNode.data.attrs.length > 0) {
|
return false;
|
} else {
|
return true;
|
}
|
},
|
props: {
|
label: 'name',
|
value: 'name',
|
children: 'attrs'
|
}
|
},
|
linkQueryDefineForm:'',//链接类型查询模板定义选中值
|
linkQueryDefineDic:[],//链接类型查询模板定义下拉数据
|
//链接类型查询模板定义选中项属性
|
linkTreeData: [],
|
businessQueryDefineForm:'',//业务类型查询模板定义选中值
|
businessQueryDefineDic:[],//业务类型查询模板定义下拉数据
|
//业务类型查询模板定义选中项属性
|
businessTreeData: [],
|
//高级查询条件
|
queryTree:{},
|
//普通查询条件
|
queryCondition:[],
|
}
|
},
|
created() {
|
|
},
|
watch: {
|
data:{
|
handler(val) {
|
if(val && val.oid){
|
this.getTemp(true);
|
this.getTemp(false)
|
}
|
},
|
immediate: true,
|
deep: true
|
}
|
},
|
methods: {
|
//选中用户
|
userHandler(){
|
|
},
|
//选择角色
|
roleHandler(){
|
|
},
|
//选择用户组
|
deptHandler(){
|
|
},
|
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(linkFlag) {
|
if (this.btmNode.attributes) {
|
queryTemplateListByAttr({btmName: this.btmNode.attributes.name, 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 = [{
|
name: data.value,
|
attrs: data.item.attrs
|
}]
|
}
|
},
|
//业务类型查询模板切换
|
businessQueryDefineChange(data) {
|
if (data.value) {
|
this.businessTreeData = [{
|
name: data.value,
|
attrs: data.item.attrs
|
}]
|
}
|
},
|
// 开始拖拽树节点事件
|
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 lang="scss" scoped>
|
::v-deep {
|
.el-radio {
|
margin-right: 30px;
|
}
|
}
|
div{
|
font-size: 14px;
|
}
|
fieldset {
|
padding: 10px 6px;
|
margin: 0;
|
border: 1px solid #EBEEF5;
|
}
|
</style>
|
