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

@@ -12,23 +12,26 @@
          <fieldset style="width: 48%">
            <legend>&nbsp;主体 </legend>
            <div>
              <avue-crud  ref="mainCrud" :data="mainData" :option="mainOption">
              <avue-crud  ref="mainCrud" :data="mainData" :option="mainOption"
                          @current-row-change="mainCurrentRowHandler"
              >
                <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>
                  <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>
            <el-button icon="el-icon-arrow-right" type="primary" size="small" @click="rightHandler" style="margin-bottom: 50px;"></el-button><br/>
            <el-button icon="el-icon-arrow-left" type="primary" size="small" @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  ref="authCrud" :data="authData" :option="authOption" :table-loading="tableLoading"
                @current-row-change="authCurrentRowHandler">
              </avue-crud>
            </div>
          </fieldset>
@@ -53,7 +56,7 @@
                      :formData="form"
                      @getFormData="getFormData">
          </basic-form>
          <el-container v-if="!readOnly">
          <el-container v-if="!readOnly && (form.ruleType=='1' || form.ruleType=='3')">
            <el-aside style="width:350px">
              <fieldset>
                <legend>&nbsp;候选条件&nbsp;</legend>
@@ -91,13 +94,13 @@
      </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;'">
        <fieldset :style="'width:99.5%;height: '+(height-10)+'px;margin-bottom:10px;'">
          <legend>&nbsp;一般操作 </legend>
          <div>
            <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;'">
        <fieldset v-if="0" :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>
@@ -112,9 +115,32 @@
    </transfer>
    <!-- 选择用户穿梭框   -->
    <transfer ref="roletransfer" :left-role-data="leftRoleData" :right-role-data="rightRoleData"
              :transferTitle="['现有角色','拥有角色']" title="添加角色"
              :transferTitle="['现有角色','拥有角色']" title="分配角色"
              @transferSend="roleSendHandler">
    </transfer>
    <!-- 选择部门对话框    -->
    <el-dialog
      v-dialogDrag
      v-loading="departLoading"
      :visible.sync="departVisible"
      append-to-body="true"
      class="avue-dialog"
      title="选择部门"
      width="50%"
    >
      <avue-crud
        ref="departCrud"
        :data="departData"
        :option="departOption"
        @selection-change="selectDepartChange"
        @row-click="rowClickDeptHandler"
      >
      </avue-crud>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="saveDepartHandler">确 定</el-button>
        <el-button size="small" @click="departVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

@@ -123,7 +149,8 @@
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";
import {listUserByUserType, gridRoles, departmentQueryController} from "@/api/system/user/api";
import func from "@/util/func";

export default {
  name: "dataView",
@@ -135,7 +162,7 @@
      default: {}
    },
    //选中行数据
    data: {
    selectRow: {
      type: Object,
      default: {}
    },
@@ -147,7 +174,7 @@
      type: Number,
      default: 400
    },
    actionDic:{
    actionMap:{
      type: Object,
      default: {}
    }
@@ -158,7 +185,40 @@
      rightUserData: [], // 选择成员穿梭框右侧初始数据
      leftRoleData: [],  // 选择角色穿梭框左侧初始数据
      rightRoleData: [], // 选择角色穿梭框右侧初始数据
      departCurrenRows: [],
      departOption: {
        ...basicOption,
        addBtn: false,
        rowKey: 'oid',
        rowParentKey: 'parentId',
        selection: true,
        highlightCurrentRow: true,
        stripe: false,
        menu: false,
        refreshBtn: false,
        gridBtn: false,
        header: false,
        column: [
          {
            label: '名称',
            prop: 'name',
            align: 'left'
          },
          {
            label: '编号',
            prop: 'id',
          },
          {
            label: '描述',
            prop: 'description',
          },
        ]
      },
      departData: [],//选择部门数据
      departLoading: false,
      departVisible: false,
      mainData:[],
      mainCurrentRow:{},
      tableLoading: false,
      mainOption: {
        ...basicOption,
@@ -172,11 +232,12 @@
        height: this.height-80,
        tip:false,
        size:'mini',
        highlightCurrentRow:true,
        column: [{
          label: ' 分类',
          prop: 'type',
          sortable: true,
          width:110
          width:90
        },{
          label: '编码',
          prop: 'id'
@@ -186,6 +247,7 @@
          }]
      },
      authData:[],
      authCurrentRow:{},
      authOption:{
        ...basicOption,
        header:false,
@@ -199,6 +261,8 @@
        tip:false,
        showHeader:false,
        size:'mini',
        highlightCurrentRow:true,
        align:'left',
        column: [{
          label: '名称',
          prop: 'name'
@@ -206,7 +270,7 @@
      },
      formItems:[{
        label: '规则名称',
        prop: 'qtName',
        prop: 'ruleName',
        type: 'input',
        span:8,
        labelWidth: 100,
@@ -218,31 +282,54 @@
        }]
      }, {
        label: '规则类型',
        prop: 'version',
        prop: 'ruleType',
        type: 'select',
        span:6,
        labelWidth:110,
        disabled:this.readOnly,
        dicData: [{
          label: '全部允许',
          value: 1
          value: '0'
        }, {
          label: '允许权限',
          value: 2
          value: '1',
          disabled:true
        }, {
          label: '全部拒绝',
          value: 3
          value: '2'
        }, {
          label: '拒绝权限',
          value: 7
          value: '3',
          disabled:true
        }],
        value: 1
        value: '0',
        change:function (column,value){
          if(value=='1' || value=='3'){
            this.form.btmName=this.btmNode.attributes.name;
            this.form.levelFlag=0;
            this.form.queryTemplate={};
          }
        }
      }],
      form:{
        btmName:'',
        qtName: '',
        levelFlag:0,//0:普通查询模板; 1:高级查询模板"
        queryTemplate:{}
        queryTemplate:{},//客体中查询条件
        "ID": "",//数据的ID
        "roles": "",//显示到授权主体界面，角色名称，多个使用逗号分隔
        "userGroups": "",//显示到授权主体界面，部门名称，多个使用逗号分隔
        "users": "",//显示到授权主体界面，用户名称，多个使用逗号分隔
        "expToSQL": "",//此处为允许权限或拒绝权限需填充的数据，暂时不做处理，为空字符串即可
        "identifier": "",//业务类型（terminology）+下划线（_）+操作区的一般操作的按钮英文名称（query）,多个按钮的话是多条数据不是使用逗号分隔
        "isGrand": 49, //此处为操作区的一般操作的按钮是否为选择情况，未选中值为48，选中为49，这里是将0和1转为了byte值，所以为48，49
        "lexpToSQL": "",//此处为允许权限或拒绝权限需填充的数据，暂时不做处理，为空字符串即可
        "lruleText": "",//此处为允许权限或拒绝权限需填充的数据，暂时不做处理，为空字符串即可
        "lseniorRuleText": "",//此处为允许权限或拒绝权限需填充的数据，暂时不做处理，为空字符串即可
        "ruleName": "",//规则名称
        "ruleText": "",//此处为允许权限或拒绝权限需填充的数据，暂时不做处理，为空字符串即可
        "ruleType": "",//0全部允许，1允许权限，2全部拒绝，3拒绝权限，由于暂时只做全部允许与全部拒绝，所以暂时可以不用管
        "seniorRuleText": "",//此处为允许权限或拒绝权限需填充的数据，暂时不做处理，为空字符串即可
      },
      radioForm:0,
      radioDic:[{
@@ -289,38 +376,110 @@
      actionForm:[],//一般操作选中值
      actionDic:[],//一般操作选中项
      linkactionForm:[],//关系和跃迁选中值
      linkactionDic:[{
        label:'选项111',
        value:0
      },{
        label:'选项222',
        value:1
      }]//关系和跃迁选中项
      linkactionDic:[]//关系和跃迁选中项
    }
  },
  created() {

    listUserByUserType().then(res => {
      // 组装好穿梭框可用数据
      this.leftUserData = res.data.data.map(item => {
        return {
          ...item,
          name: item.name + `(${item.id})`,
          oid: item.oid
        }
      })
      this.rightUserData = [];
    })
    gridRoles(1,-1).then(res => {
      // 组装好穿梭框可用数据
      this.leftRoleData = res.data.data.map(item => {
        return {
          ...item,
          name: item.name ,
          oid: item.oid
        }
      })
      this.rightRoleData = [];
    })
    departmentQueryController({queryAllLevel: true}).then(res => {
      const data = res.data.treeData;
      this.departData = this.departDtaFormAtter(data);
    })
  },
  watch: {
    data:{
    actionMap:{
      handler(val) {
        if(val && val.oid){
          this.getTemp(true);
          this.getTemp(false)
        }
        this.actionDic=[];
        if(val){
          for(var i in val){
            this.actionDic.push({
              label:i,
              value:val[i]
            })
          }
        };
      },
      immediate: true,
      deep: true
    },
    actionMap:{
      handler(val) {
        this.actionDic=[{
          label:'选项1',
          value:0
        },{
          label:'选项2',
          value:1
        }];
    selectRow:{
      handler(val,oldval) {
        this.authData=[];
        if(val && val.rules &&val.rules.length>0) {
          this.form = JSON.parse(JSON.stringify(val.rules[0]));
          //this.getTemp(true);
          //this.getTemp(false)
          //构建授权主体数据
          if (val.rules[0].users) {
            val.rules[0].users.split(',').forEach((item, i) => {
              if (item) {
                this.authData.push({
                  name: '{' + item + ', ' + item + ', user}'
                })
              }
            })
          }
          if (val.rules[0].roles) {
            val.rules[0].roles.split(',').forEach((item, i) => {
              if (item) {
                this.authData.push({
                  name: '{' + item + ', ' + item + ', role}'
                })
              }
            })
          }
          if (val.rules[0].userGroups) {
            val.rules[0].userGroups.split(',').forEach((item, i) => {
              if (item) {
                this.authData.push({
                  name: '{' + item + ', ' + item + ', userGroup}'
                })
              }
            })
          }
          //解析操作按钮选中值
          if (this.actionDic.length > 0) {
            let actionDicStr = JSON.stringify(this.actionDic);
            val.rules.forEach(item => {
              if (item.isGrand == 49) {
                let identifier = item.identifier.replace(this.btmNode.attributes.name + '_', '')
                if (actionDicStr.indexOf('"value":"'+identifier+'"}') != -1) {
                  this.actionForm.push(identifier)
                } else {
                  this.linkactionForm.push(identifier);
                }
              }
            })
          }
        }else {
          this.form={
            ruleName:'',
            ruleType:'0'
          };
          this.actionForm=[];
          this.linkactionForm=[];
        }
      },
      immediate: true,
      deep: true
@@ -329,67 +488,140 @@
  methods: {
    //选中用户
    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;
        }
      });

      this.$refs.usertransfer.visible = true;
    },

    // 选中用户穿梭框回填
    userSendHandler(row) {
      this.mainData=this.mainData.filter(item=>{
        return item.type!='用户'
      })
      row.forEach((item,index)=>{
        this.authData.push({
          type:'user',
          ...item
        var addItem=this.leftUserData.find(leftitem=>leftitem.oid==item);
        this.mainData.push({
          type:'用户',
          id:addItem.id,
          name:addItem.name.split('(')[0],
          oid:addItem.oid
        })
      })
      this.rightUserData=row;
      this.$refs.usertransfer.visible = false;
    },
    //选择角色
    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;
        }
      });
      this.$refs.roletransfer.visible = true;
    },
    // 选择角色穿梭框回填
    roleSendHandler(row) {
      this.mainData=this.mainData.filter(item=>{
        return item.type!='角色'
      })
      row.forEach((item,index)=>{
        this.authData.push({
          type:'role',
          ...item
        var addItem=this.leftRoleData.find(leftitem=>leftitem.oid==item);
        this.mainData.push({
          type:'角色',
          id:addItem.name,
          name:addItem.name,
          oid:addItem.oid
        })
      })
      this.rightRoleData=row;
      this.$refs.roletransfer.visible = false;
    },
    //选择用户组
    deptHandler(){

      this.departVisible=true;
    },
    // 选择部门数据转换
    departDtaFormAtter(items) {
      return items.map(item => {
        // 转换当前节点的属性
        const formList = {
          oid: item.oid,
          id: item.attributes.id,
          name: item.attributes.name,
          description: item.attributes.description,
          parentId: item.parentId,
          parentName: item.parentName,
          parentBtmName: item.parentBtmName,
          // 如果children存在且不为空，则递归转换children
          children: item.children && item.children.length > 0 ? this.departDtaFormAtter(item.children) : undefined
        };
        return formList;
      });
    },
    // 选择部门
    selectDepartChange(row) {
      this.departCurrenRows = row;
    },
    // 选择部门 行单选
    rowClickDeptHandler(row) {
      func.rowClickHandler(
        row,
        this.$refs.departCrud,
        this.lastIndex,
        (newIndex) => { this.lastIndex = newIndex; },
        () => { this.departCurrenRows = [row]; }
      );
    },
    // 选择部门 确定
    saveDepartHandler() {
      if (this.departCurrenRows.length==0) {
        this.$message.warning('请选择部门节点！')
        return;
      }
      this.mainData=this.mainData.filter(item=>{
        return item.type!='用户组'
      })
      this.departCurrenRows.forEach((addItem,index)=>{
        this.mainData.push({
          type:'用户组',
          id:addItem.id,
          name:addItem.name,
          oid:addItem.oid
        })
      })
      this.departVisible = false;
    },
    //主体列表行点击
    mainCurrentRowHandler(row){
      this.mainCurrentRow=row;
    },
    //授权主体列表行点击
    authCurrentRowHandler(row){
      this.authCurrentRow=row;
    },
    rightHandler() {
      if(func.isEmptyObject(this.mainCurrentRow)){
        this.$message.warning('请选择用户、用户组、角色信息！')
        return;
      }
      let name='{' + this.mainCurrentRow.id + ', ' + this.mainCurrentRow.name + ', ';
      if (this.mainCurrentRow.type == '用户') {
        name+='user}';
      } else if (this.mainCurrentRow.type == '角色') {
        name+='role}';
      } else if (this.mainCurrentRow.type == '用户组') {
        name+='userGroup}';
      }
      let canAdd = !this.authData.some(item => {
        return item.name == name
      })
      if(canAdd) {
        this.authData.push({
          name: name
        })
        this.$refs.mainCrud.setCurrentRow();
        this.mainCurrentRow={}
      }else {
        this.$message.warning('授权主体信息选择重复！')
      }
    },
    leftHandler() {
      this.authData = this.authData.filter(item => {
        return item.name != this.authCurrentRow.name
      })
    },
    initFormData() {
      let formData = {