<template>
    <div class="projectect-attendance-drawer">
      <el-drawer
        v-if="isOpen"
        :visible.sync="isOpen"
        size="70%"
      >
        <template slot="title">
          <div>流程发起角色配置</div>
        </template>
        <el-tabs  type="card"
          v-model="activeName"
          style="margin-left: 20px; margin-right: 20px"
          @tab-click="getList"
        >
          <el-tab-pane
            v-for="(it,idx) in processRoleList"
            :key="idx"
            :label="it.roleName+''"
            :name="it.roleId+''"
          ></el-tab-pane>
        </el-tabs>
  
        <!-- 流程发起角色设置 -->
        <el-form ref="form" v-loading="loading" :model="form" :rules="rules" label-width="80px;" style="padding: 20px;">
            <el-checkbox-group v-model="form.keys">
              <el-checkbox v-for="it in definitionList" :label="it.flowKey" :value="it.flowKey" border>{{ it.name+'（'+it.flowKey+'）' }}</el-checkbox>
            </el-checkbox-group>
            <div style="text-align: center">
                <el-button type="primary" @click="submitForm">提交保存</el-button>
                <el-button @click="doCanel">取 消</el-button>
            </div>
        </el-form>
      </el-drawer>
    </div>
  </template>
  
  <script>
  import {
  roleList,
  listDefinition,
  updateProcKeyByRoleId
} from "@/api/flowable/definition";
  
  export default {
    name: "indexDrawer",
    components: {},
    data() {
      return {
        loading: false,
        isOpen: false,
        nodes: [],
        activeName: "0",
        // 遮罩层
        loading: true,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 100
        },
        definitionList:[],
        processRoleList: [],
        form: {
          keys:[]
        },
        rules: {},
      };
    },
    computed: { },
    mounted() {},
    methods: {
      show() {
        this.getRoleList();
        this.isOpen=true;
      },
      // 页签点击
      getList() {
        this.queryParams.roleId=null;
        listDefinition(this.queryParams).then(response => {
          this.definitionList = response.data.records;
        });
        this.queryParams.roleId=this.activeName;
        this.form.roleId = this.activeName;
        listDefinition(this.queryParams).then(response => {
          let list=[];
          response.data.records.forEach(item => {
            list.push(item.flowKey);
          })
          this.form.keys = list;
        });
      },
      getRoleList(){
        this.loading=true;
        this.queryParams.roleKey="lc_";
        this.queryParams.roleId=null;
        roleList(this.queryParams).then(response => {
          this.processRoleList = response.data;
          this.activeName=response.data[0].roleId+'';
          this.getList();
          this.loading=false;
        });
      },
      // 取消按钮
      doCanel() {
        this.isOpen = false;
      },
      /** 提交按钮 */
      submitForm() {
        this.loading=true;
        updateProcKeyByRoleId(this.form).then(response => {
          this.$modal.msgSuccess("保存成功");
          this.getList();
          this.loading=false;
        });
      }
    },
  };
  </script>
  <style lang="scss" scoped></style>
  