table多选

<!-- Vue SFC -->
<template>
  <div class="h overflow">
    <div class="new-header clearfix bxs">
      <div class="header-item header-lf h cupo" @click="backFn">
        <i class="el-icon-arrow-left"></i>
        <span class="header-lf-btn cor6 h">返回</span>
      </div>
      <div class="header-item header-rt h">
        <el-button type="primary" size="mini" @click="saveBefore('form')">保存</el-button>
      </div>
    </div>
    <div class="new-content bxs" style="overflow-y: auto;">
      <el-form :rules="rules" ref="form" :model="role" label-width="120px">
        <el-form-item label="角色名称：" prop="roleName">
          <el-input
            v-model="role.roleName"
            class="w500"
            maxlength="15"
            minlength="0"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="角色类型：">
          <span>{{this.$route.query.id?role.roleTypeDesc:'业务角色'}}</span>
        </el-form-item>
        <el-form-item label="角色说明：" prop="remark">
          <el-input
            type="textarea"
            rows="5"
            class="w500"
            maxlength="250"
            minlength="0"
            show-word-limit
            v-model="role.remark"
          ></el-input>
        </el-form-item>
        <el-form-item label="角色权限：">
          <el-table :data="data" style="width: 100%" @selection-change="handleSelectionChange">
            <!-- @click="handleSelectionOnly(scope.row)" -->
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column type="expand">
              <template slot-scope="props">
                <div class="flex">
                  <el-checkbox-group
                    v-model="checkArr[props.$index]"
                    @change="cheChange(props.row.$index)"
                  >
                    <el-checkbox
                      v-for="(item,i) of props.row.authorityDtos"
                      :key="i"
                      :label="item.authorityCode"
                    >{{item.authorityName}}</el-checkbox>
                  </el-checkbox-group>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="权限名称" prop="moduleName"></el-table-column>
          </el-table>
          <!-- <el-tree
            :data="data"
            show-checkbox
            :props="defaultProps"
            :default-expand-all="true"
            :check-on-click-node="true"
            @check="clickBox"
            @check-change="parentModules"
            @node-click="clickBox"
            node-key="authorityCode"
            ref="tree"
          ></el-tree>-->
        </el-form-item>
      </el-form>
    </div>
    <div>
      <button @click="getcheckArr">点击</button>
    </div>
  </div>
</template>

<script>
import { putRole, roleWithAuthority, getOrgTree } from "@/api/role_Manage";
export default {
  name: "newRole",

  components: {},
  data() {
    return {
      role: {
        remark: "",
        roleAuthorityCodes: [],
        roleId: "",
        roleName: "",
        roleType: null,
        roleTypeDesc: "",
      },
      checkList: [],
      rules: {
        roleName: [
          {
            min: 0,
            max: 15,
            message: "长度在 0 到 15 个字符",
            trigger: "blur",
          },
          { required: true, message: "请输入角色名称", trigger: "blur" },
        ],
        remark: [
          {
            min: 0,
            max: 250,
            message: "长度在 0 到 250 个字符",
            trigger: "blur",
          },
        ],
      },
      data: [],
      defaultProps: {
        children: "authorityDtos",
        label: "authorityName",
      },
      checkArr: [],
      checkArrCopy: [],
    };
  },
  created() {
    console.log(this.$route.query);
    this.getOrgTree();
    if (this.$route.query.id) {
      this.getData();
    }
  },
  methods: {
    handleSelectionOnly(e, index) {
      console.log(e);
      console.log(index);
    },
    getcheckArr() {
      console.log(this.checkArr);
    },
    // 获取数据
    async getData() {
      // let user = this.$store.state.user.userinfo;
      let datVal = {
        roleId: this.$route.query.id,
      };
      console.log(datVal);
      this.loading = true;
      const result = await roleWithAuthority(datVal);
      this.role = result.data;
      this.loading = false;
      console.log(result.data);
    },
    // 获取机构树
    async getOrgTree() {
      const result = await getOrgTree();
      this.data = result.data;
      console.log(result.data);
      let num = result.data.length;
      let arr = [];
      for (let i = 0; i < num; i++) {
        arr.push([]);
      }
      this.checkArr = arr;
      this.checkArrCopy = JSON.parse(JSON.stringify(arr));
      console.log(this.checkArr);
    },

    backFn() {
      this.$router.push({
        name: "roleList",
      });
    },
    saveBefore(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (!this.$route.query.id) {
            this.role.roleType = 1;
          }
          this.loading = true;
          const result = await putRole(this.role);
          console.log(result);
          this.loading = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleSelectionChange(val) {
      console.log(val);
      let lists = this.data;
      let indexArr = [];
      if (val.length == 0) {
        this.checkArr = JSON.parse(JSON.stringify(this.checkArrCopy));
      } else {
        for (let j = 0; j < val.length; j++) {
          for (let i = 0; i < lists.length; i++) {
            if (val[j].moduleCode == lists[i].moduleCode) {
              indexArr.push(i);
            }
          }
        }
        let checkArr = this.checkArr;
        console.log(indexArr);
        for (let i = 0; i < indexArr.length; i++) {
          let cheArr = [];
          for (let j = 0; j < lists[indexArr[i]].authorityDtos.length; j++) {
            cheArr.push(lists[indexArr[i]].authorityDtos[j]);
          }
          checkArr[indexArr[i]] = cheArr;
        }
        this.checkArr = JSON.parse(JSON.stringify(checkArr));
      }
    },
    cheChange(val) {
      console.log(val);
    },
  },
};
</script>
<style lang="scss" scoped>
.new-header {
  width: 100%;
  height: 40px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
  background: #fff;
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
  .header-item {
    line-height: 40px;
  }
  .header-lf {
    position: absolute;
    left: 10px;
    top: 0;
    .header-lf-btn {
      display: inline-block;
      font-size: 12px;
      vertical-align: top;
      padding-right: 20px;
    }
  }
  .header-rt {
    position: absolute;
    right: 10px;
    top: 0;
  }
}
.new-content {
  padding-top: 40px;
  padding-right: 40px;
}
</style>