Source/plt-web/plt-web-ui/src/views/authority/ui/dataAuthorization/dataView.vue

@@ -1,27 +1,141 @@
<template>
  <div style="padding: 10px 0">
    <el-tabs tab-position="left" style="height: 100%;">
      <el-tab-pane label="主体">
        <fieldset>
          <legend>&nbsp;主题&nbsp;</legend>
  <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>&nbsp;主体 </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>&nbsp;授权主体 </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>&nbsp;授权主体 </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>&nbsp;候选条件&nbsp;</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>&nbsp;查询条件&nbsp;</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>
        <fieldset :style="'width:99.5%;height: '+(height/2+20)+'px;margin-bottom:10px;'">
          <legend>&nbsp;一般操作 </legend>
          <div>
            查询模板定义
            <avue-select @change="linkQueryDefineChange" class="el-input--small" v-model="linkQueryDefineForm" placeholder="请选择内容" type="tree" :dic="linkQueryDefineDic" style="width:240px"></avue-select>

            <avue-checkbox :disabled="readOnly" key="actionCheck" :all="!readOnly" v-model="actionForm" placeholder="请选择内容" :dic="actionDic"></avue-checkbox>
          </div>
        </fieldset>
        <fieldset :style="'width:99.5%;height: '+(height/2-30)+'px;'">
          <legend>&nbsp;关系和跃迁 </legend>
          <div>
            <avue-checkbox :disabled="readOnly" key="linkActionCheck" :all="!readOnly" v-model="linkactionForm" placeholder="请选择内容" :dic="linkactionDic"></avue-checkbox>
          </div>
        </fieldset>
      </el-tab-pane>
      <el-tab-pane label="客体">客体</el-tab-pane>
      <el-tab-pane label="操作">操作</el-tab-pane>
    </el-tabs>
    <!-- 选择用户穿梭框   -->
    <transfer ref="usertransfer" :left-role-data="leftUserData" :right-role-data="rightUserData"
              :transferTitle="['未选择用户','已选择用户']" title="主体添加用户"
              @transferSend="userSendHandler">
    </transfer>
    <!-- 选择用户穿梭框   -->
    <transfer ref="roletransfer" :left-role-data="leftRoleData" :right-role-data="rightRoleData"
              :transferTitle="['现有角色','拥有角色']" title="添加角色"
              @transferSend="roleSendHandler">
    </transfer>
  </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";
import {listUserByRoleOid, listUserUnInRoleOid, saveRight} from "@/api/system/role/api";

export default {
  name: "dataView",
  components:{formQueryDialog},
  props: {
    selectData: {
    //选中的业务类型节点
    btmNode: {
      type: Object,
      default: {}
    },
    //选中行数据
    data: {
      type: Object,
      default: {}
    },
@@ -29,29 +143,409 @@
      type: Boolean,
      default: false
    },
    height: {
      type: Number,
      default: 400
    },
    actionDic:{
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      data:{

      }
      leftUserData: [],  // 选择成员穿梭框左侧初始数据
      rightUserData: [], // 选择成员穿梭框右侧初始数据
      leftRoleData: [],  // 选择角色穿梭框左侧初始数据
      rightRoleData: [], // 选择角色穿梭框右侧初始数据
      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:[],
      actionForm:[],//一般操作选中值
      actionDic:[],//一般操作选中项
      linkactionForm:[],//关系和跃迁选中值
      linkactionDic:[{
        label:'选项111',
        value:0
      },{
        label:'选项222',
        value:1
      }]//关系和跃迁选中项
    }
  },
  created() {
    this.getData();

  },
  watch: {
    data:{
      handler(val) {
        if(val && val.oid){
          this.getTemp(true);
          this.getTemp(false)
        }
      },
      immediate: true,
      deep: true
    },
    actionMap:{
      handler(val) {
        this.actionDic=[{
          label:'选项1',
          value:0
        },{
          label:'选项2',
          value:1
        }];
      },
      immediate: true,
      deep: true
    },
  },
  methods: {
    getData(){
    //选中用户
    userHandler(){
      Promise.all([
        listUserUnInRoleOid({pkRole: this.selectList.oid}),
        listUserByRoleOid({pkRole: this.selectList.oid})
      ]).then(([unInRoleRes, byRoleRes]) => {
        if (unInRoleRes.data.code === 200 && byRoleRes.data.code === 200) {
          const leftData = [...unInRoleRes.data.data, ...byRoleRes.data.data];
          // 组装好穿梭框可用数据
          this.leftUserData = leftData.map(item => {
            return {
              name: item.name + `(${item.id})`,
              oid: item.oid
            }
          })
          this.rightUserData = byRoleRes.data.data.map(item => item.oid);
          this.$refs.usertransfer.visible = true;
        }
      });

    }
    },

    // 选中用户穿梭框回填
    userSendHandler(row) {
      row.forEach((item,index)=>{
        this.authData.push({
          type:'user',
          ...item
        })
      })
    },
    //选择角色
    roleHandler(){
      Promise.all([
        listUserUnInRoleOid({pkRole: this.selectList.oid}),
        listUserByRoleOid({pkRole: this.selectList.oid})
      ]).then(([unInRoleRes, byRoleRes]) => {
        if (unInRoleRes.data.code === 200 && byRoleRes.data.code === 200) {
          const leftData = [...unInRoleRes.data.data, ...byRoleRes.data.data];
          // 组装好穿梭框可用数据
          this.leftRoleData = leftData.map(item => {
            return {
              name: item.name + `(${item.id})`,
              oid: item.oid
            }
          })
          this.rightRoleData = byRoleRes.data.data.map(item => item.oid);
          this.$refs.transfer.visible = true;
        }
      });
    },
    // 选择角色穿梭框回填
    roleSendHandler(row) {
      row.forEach((item,index)=>{
        this.authData.push({
          type:'role',
          ...item
        })
      })
    },
    //选择用户组
    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 scoped>
<style lang="scss" scoped>
::v-deep {
  .el-radio ,.el-checkbox{
    margin-right: 30px;
  }
}
div{
  font-size: 14px;
}
fieldset {
  padding: 10px 6px;
  margin: 10px 0 0 0;
  margin: 0;
  border: 1px solid #EBEEF5;
}
</style>