spfm-market-front/src/pages/main/processruns/doDistribution.vue

<template>
  <el-dialog title="权限分配" width="90%" top="1%" v-if="visible" :visible.sync="visible">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <el-button @click="loadSingleBpmn" type="primary">初始化</el-button>
          <el-table
            class="mb20"
            :data="tableData3"
            :header-cell-style="{background:'#e0f3ff',color:'#5f95b7'}"
            cell-click="cellClick"
            border
            stripe
            highlight-current-row="true"
            style="width: 100%"
            @cell-click="cellClick"
          >

            <el-table-column align="center" prop="id" label="ID"></el-table-column>
            <el-table-column align="center" prop="procdefkey" label="流程定义key"></el-table-column>
            <el-table-column align="center" prop="procdefname" label="流程定义名称"></el-table-column>
             <el-table-column align="center" prop="taskdefkey" label="任务key"></el-table-column>
            <el-table-column align="center" prop="taskname" label="名称"></el-table-column>
            <el-table-column align="center" prop="usergroup" label="角色"></el-table-column>

          </el-table>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card>
          <el-button @click="doSure" type="primary">确认分配</el-button>
 <!-- @selection-change="changeFun" -->
          <el-table
            class="mb20"
            :data="tableData2"
            height="500px"
            :header-cell-style="{background:'#e0f3ff',color:'#5f95b7'}"
            border
            stripe
            ref="roleTable"

            highlight-current-row="true"
            style="width: 100%"
          >
            <el-table-column align="center" type="selection" width="55"></el-table-column>

            <el-table-column align="center" prop="code" label="角色ID"></el-table-column>
            <el-table-column align="center" prop="name" label="角色名称"></el-table-column>
            <el-table-column align="center" prop="org" label="所属部门"></el-table-column>
            <el-table-column align="center" prop="description" label="角色描述"></el-table-column>
            <el-table-column align="center" prop="locked" label="角色状态">
              <template slot-scope="scope">
                <el-tag type="success" v-show="!scope.row.locked">启用</el-tag>
                <el-tag type="danger" v-show="scope.row.locked">停用</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <!-- <el-button type="primary" @click="doAprove()">确认</el-button> -->
      <el-button @click="visible = false">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
// import moment from 'moment';
// //import util from '@/util'
export default {
  data() {
    return {
      selectIndex:null,
      items: [],
      visible: false,
      pageTotal: 0,
      gid:null,
      procdefkey: null,
      processDefinitionId: null,
      usergroup:"",
      form: {
        name: "",
        pageNum: "1",
        pageSize: "9999"
      },
      tableData3: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙"
        }
      ],
      tableData2: [],
      selectedRows: []
    };
  },
  created() {},
  methods: {
    init(key, id) {
      this.visible = true;

      this.procdefkey = key;
      this.processDefinitionId = id;
      this.doSearch();
    },

    cellClick(row, column, cell, event) {
      // let self = this;
      // var obj ={
      //   url:this.$url.workflowdef.getList,
      //   data:this.form
      // }
      // this.common.httpPost(obj,success);
      // function success(data){
      //     self.list = data.data.rows
      //     self.total = data.data.total
      // }
    },
    changeFun(){
        var arr = [];
        let val = this.$refs.roleTable.selection;
        val.forEach((element)=>{
            arr.push(element.id)
        })
        this.usergroup = arr.join(",")
    },
    doSearch() {
      let self = this;
      var obj = {
        url: this.$url.processinst.getUserTaskList,
        data: {
          procdefkey: this.procdefkey
        }
      };
      this.common.httpPost(obj, success);
      function success(data) {
        if(data.data.length==0){
           self.loadSingleBpmn();
        }else{

          self.tableData3 = data.data;
          self.gid = data.data[0].id;
          self.usergroup = data.data[0].usergroup
          self.doSearchRole(1);
        }
      }
    },
    doSearchRole(value) {
      this.form.pageNum = value;

      let self = this;
      // var obj = {
      //   url: this.$url.roleManag.getList,
      //   data: this.form
      // };
      // this.common.httpPost(obj, success);
      // function success(data) {
      //   self.tableData2 = data.rows;
      //   self.cheacked();
      // }
      this.$http({
          url: this.$url.roleManag.getList,
          method: "post",
          headers: {
              "Content-Type": "application/json",
          },
          data: this.form,
      }).then((res) => {
          self.tableData2 =  res.data.rows;
          self.cheacked();
      });
    },
    loadSingleBpmn() {
      let self = this;
      var obj = {
        url: this.$url.processinst.loadSingleBpmn,
        data: {
          processDefinitionId: this.processDefinitionId
        }
      };
      this.common.httpPost(obj, success);
      function success(data) {
        self.doSearch();
      }
    },
    doSure(){


      this.changeFun();

        let self = this;
        console.log(this.gid)
      var obj = {
        url: this.$url.processinst.setPermission,

        data: {
          id: this.gid,
          usergroup:this.usergroup
        }
      };
      this.common.httpPost(obj, success);
      function success(data) {
         self.$message({
             message:"已分配",
             type:"success"
         })
         self.doSearch();
      }
    },
    cheacked(){

        let self = this;
        self.$refs.roleTable.clearSelection();
        if(!this.usergroup){
          return false;
        }
        let arr = this.usergroup.split(",");
        let arr1 = []
        this.tableData2.forEach((elment,index)=>{
          arr.forEach((i,o)=>{

            if(elment.id==i){
              arr1.push(index)
            }
          })

        })
        this.$nextTick(function () {

          // if(arr1.length==0){
          // }else{

            arr1.forEach((ob)=>{
              self.$refs.roleTable.toggleRowSelection(self.tableData2[ob],true);
            })
          // }
        })
    },
    cellClick(row){
      this.usergroup = row.usergroup;
      this.gid = row.id;
      this.cheacked();
    }
  }
};
</script>