<template>
  <div>
    <div class="menu-tab">
      <el-tabs type="border-card" v-model="activeName">
        <!-- 菜单表 start -->
        <el-tab-pane label="菜单表" name="first">
          <div class="app-container">
            <div class="filter-container">
              <div class="filter-left">
                <div class="filter-item">
                  菜单级别:
                  <el-select
                    v-model="value"
                    placeholder=""
                    style="width: 120px"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </div>

                <el-button
                  type="primary"
                  icon="el-icon-search"
                  class="search-button"
                  >搜索</el-button
                >
              </div>

              <div class="handle-button-right">
                <el-button
                  icon="el-icon-plus"
                  type="success"
                  @click="dialogFormVisible = true"
                  >新增</el-button
                >
                <el-button
                  icon="el-icon-delete"
                  type="danger"
                  @click="batchDelete"
                  >删除</el-button
                >
                <el-button type="warning">
                  <svg-icon icon-class="export" />
                  导出
                </el-button>
              </div>
            </div>

            <el-divider></el-divider>
            <el-table
              :data="tableData"
              stripe
              border
              :header-cell-style="{ background: '#EBF1FF', color: '#606266' }"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="40"> </el-table-column>

              <el-table-column prop="menuName" label="菜单名称">
              </el-table-column>
              <el-table-column prop="menuLevel" label="菜单级别">
              </el-table-column>
              <el-table-column prop="parentMenu" label="父级菜单" width="100">
              </el-table-column>
              <el-table-column prop="menuSort" label="菜单排序">
              </el-table-column>
              <el-table-column
                prop="url"
                label="请求地址"
                width="180"
              ></el-table-column>
              <el-table-column label="图标">
                <!-- <template slot-scope="{}">
                  <img src="@/assets/img.png" alt="" style="height: 30px" />
                </template> -->

                <template slot-scope="scope">
                  <img :src="scope.row.imageUrl" style="width: 25px" />
                </template>
              </el-table-column>
              <el-table-column
                prop="createTime"
                label="创建时间"
                width="180"
              ></el-table-column>
              <el-table-column
                prop="createMan"
                label="创建人"
              ></el-table-column>
              <el-table-column
                prop="editTime"
                label="修改时间"
                width="180"
              ></el-table-column>
              <el-table-column prop="editMan" label="修改人"></el-table-column>

              <el-table-column label="操作" width="150" fixed="right">
                <template slot-scope="scope">
                  <el-button
                    icon="el-icon-edit"
                    style="color: #406ce5"
                    @click="handleEdit(scope.$index, scope.row)"
                    >编辑</el-button
                  >
                  <el-button
                    icon="el-icon-delete"
                    style="color: #f27979"
                    @click="handleDelete(scope.$index, scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>

            <el-dialog title="新增" :visible.sync="dialogFormVisible">
              <el-form :model="form">
                <el-form-item label="菜单名称:" :label-width="formLabelWidth">
                  <el-input v-model="form.name4" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="菜单级别:" :label-width="formLabelWidth">
                  <el-select
                    v-model="form.region2"
                    style="width: 100%"
                    placeholder=""
                  >
                    <el-option label="级别一" value="3"></el-option>
                    <el-option label="级别二" value="4"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="父级菜单:" :label-width="formLabelWidth">
                  <el-select
                    v-model="form.region3"
                    style="width: 100%"
                    placeholder=""
                  >
                    <el-option label="父级一" value="5"></el-option>
                    <el-option label="父级二" value="6"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="菜单排序:" :label-width="formLabelWidth">
                  <el-input v-model="form.name6" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="请求地址:" :label-width="formLabelWidth">
                  <el-input v-model="form.name6" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="图标:" :label-width="formLabelWidth">
                  <el-upload
                    class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    multiple
                    :limit="3"
                  >
                    <el-button size="small" type="primary">选择文件</el-button>
                    <!-- <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div> -->
                  </el-upload>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button
                  @click="dialogFormVisible = false"
                  style="background: #f6f6f6"
                  >取 消</el-button
                >
                <el-button type="primary" @click="dialogFormVisible = false"
                  >提 交</el-button
                >
              </div>
            </el-dialog>
          </div>
        </el-tab-pane>
        <!-- 菜单表 end-->

        <!-- 角色表 start-->
        <el-tab-pane label="角色表" name="second">
          <div class="app-container">
            <div class="filter-container">
              <div class="filter-left">
                <div class="filter-item">
                  角色名称:
                  <el-input
                    v-model="input"
                    placeholder=""
                    style="width: 120px"
                  ></el-input>
                </div>

                <el-button
                  type="primary"
                  icon="el-icon-search"
                  class="search-button"
                  >搜索</el-button
                >
              </div>

              <div class="handle-button-right">
                <el-button
                  icon="el-icon-plus"
                  type="success"
                  @click="dialogFormVisible2 = true"
                  >新增</el-button
                >
                <el-button
                  icon="el-icon-delete"
                  type="danger"
                  @click="batchDelete2"
                  >删除</el-button
                >
                <el-button type="warning">
                  <svg-icon icon-class="export" />
                  导出
                </el-button>
              </div>
            </div>

            <el-divider></el-divider>
            <el-table
              :data="tableData2"
              stripe
              border
              :header-cell-style="{ background: '#EBF1FF', color: '#606266' }"
              style="width: 100%"
              @selection-change="handleSelectionChange2"
            >
              <el-table-column type="selection" width="40"> </el-table-column>

              <el-table-column prop="roleName" label="角色名称">
              </el-table-column>
              <el-table-column label="可操作菜单">
                <template slot-scope="tableData2">
                  <a target="_blank" class="check"
                    >{{ tableData2.row.opeMenu }}
                  </a>
                </template>
              </el-table-column>
              <el-table-column prop="roleAuth" label="角色权限" width="100">
                <template slot-scope="tableData2">
                  <a target="_blank" class="check"
                    >{{ tableData2.row.roleAuth }}
                  </a>
                </template>
              </el-table-column>

              <el-table-column
                prop="createTime"
                label="创建时间"
                width="180"
              ></el-table-column>
              <el-table-column
                prop="createMan"
                label="创建人"
              ></el-table-column>
              <el-table-column
                prop="editTime"
                label="修改时间"
                width="180"
              ></el-table-column>
              <el-table-column prop="editMan" label="修改人"></el-table-column>

              <el-table-column label="操作" width="150" fixed="right">
                <template slot-scope="scope">
                  <el-button
                    icon="el-icon-edit"
                    style="color: #406ce5"
                    @click="handleEdit2(scope.$index, scope.row)"
                    >编辑</el-button
                  >
                  <el-button
                    icon="el-icon-delete"
                    style="color: #f27979"
                    @click="handleDelete2(scope.$index, scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>

            <el-dialog
              title="新增"
              class="roleDialog"
              :visible.sync="dialogFormVisible2"
              width="60%"
            >
              <el-form :model="form">
                <el-form-item label="角色名称:" :label-width="formLabelWidth2">
                  <el-input v-model="form.name4" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="角色ID:" :label-width="formLabelWidth2">
                  <el-input v-model="form.name4" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item
                  label="可操作菜单及权限:"
                  :label-width="formLabelWidth2"
                  class="table-item"
                >
                  <div class="role-details inside-base">
                    <div class="inside-base-main clearfix">
                      <!-- 中间内容 -->
                      <div class="inside-base-cont">
                        <div class="role-cont clearfix">
                          <div>
                            <el-checkbox
                              class="check-page-all"
                              v-model="checkPageAll"
                              @change="checkPageAllEv($event)"
                            ></el-checkbox>
                            <!--  -->
                            <el-table
                              ref="table"
                              :data="tableData3"
                              :cell-class-name="goodsInfo"
                              :row-class-name="warning"
                              style="width: 100%; margin-bottom: 20px"
                              row-key="id"
                              :expand-row-keys="['3', '4']"
                              border
                              :indent="10"
                              :select-on-indeterminate="true"
                              :tree-props="{
                                children: 'childList',
                                hasChildren: 'hasChildren',
                              }"
                            >
                              <el-table-column type="selection" width="55">
                                <template slot-scope="scope">
                                  <el-checkbox
                                    v-model="scope.row.pageCheck"
                                    @change="pageCheckEv(scope)"
                                  ></el-checkbox>
                                </template>
                              </el-table-column>

                              <el-table-column
                                prop="page"
                                label="菜单名称"
                                width="130px"
                              >
                              </el-table-column>
                              <el-table-column class="operation" label="">
                                <template slot-scope="scope">
                                  <el-checkbox
                                    label="查询"
                                    v-model="scope.row.fnCheck.check"
                                    @change="fnCheckEv(scope, 'check')"
                                    v-if="scope.row.fnList.includes('查询')"
                                  ></el-checkbox>

                                  <el-checkbox
                                    label="新增"
                                    v-model="scope.row.fnCheck.add"
                                    @change="fnCheckEv(scope, 'add')"
                                    v-if="scope.row.fnList.includes('新增')"
                                  ></el-checkbox>
                                  <el-checkbox
                                    label="修改"
                                    v-model="scope.row.fnCheck.mod"
                                    @change="fnCheckEv(scope, 'mod')"
                                    v-if="scope.row.fnList.includes('修改')"
                                  ></el-checkbox>

                                  <el-checkbox
                                    label="删除"
                                    v-model="scope.row.fnCheck.del"
                                    @change="fnCheckEv(scope, 'del')"
                                    v-if="scope.row.fnList.includes('删除')"
                                  ></el-checkbox>

                                  <el-checkbox
                                    label="导出"
                                    v-model="scope.row.fnCheck.export"
                                    @change="fnCheckEv(scope, 'export')"
                                    v-if="scope.row.fnList.includes('导出')"
                                  ></el-checkbox>

                                  <el-checkbox
                                    label="安防管理视图"
                                    v-model="scope.row.fnCheck.viewport"
                                    @change="fnCheckEv(scope, 'viewport')"
                                    v-if="
                                      scope.row.fnList.includes('安防管理视图')
                                    "
                                  ></el-checkbox>

                                  <el-checkbox
                                    label="实时告警"
                                    v-model="scope.row.fnCheck.alarm"
                                    @change="fnCheckEv(scope, 'alarm')"
                                    v-if="scope.row.fnList.includes('实时告警')"
                                  ></el-checkbox>

                                  <el-checkbox
                                    label="任务管理"
                                    v-model="scope.row.fnCheck.task"
                                    @change="fnCheckEv(scope, 'task')"
                                    v-if="scope.row.fnList.includes('任务管理')"
                                  ></el-checkbox>
                                </template>
                              </el-table-column>
                            </el-table>
                            <!--  -->
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button
                  @click="dialogFormVisible2 = false"
                  style="background: #f6f6f6"
                  >取 消</el-button
                >
                <el-button type="primary" @click="dialogFormVisible2 = false"
                  >提 交</el-button
                >
              </div>
            </el-dialog>
          </div>
        </el-tab-pane>
        <!-- 角色表 end-->
      </el-tabs>
    </div>
  </div>
</template>


<script>
export default {
  name: "RoleDetails",

  data() {
    return {
      activeName: "second",

      tableData: [
        {
          menuName: "系统管理",
          menuLevel: "1",
          parentMenu: "已是最顶级",
          menuSort: "2",
          url: "http://www.chinausky.com",
          imageUrl: require("@/assets/img.png"),
          createTime: "2020-09-15 12:20:12",
          createMan: "张三",
          editTime: "2020-09-15 12:20:12",
          editMan: "李四",
        },
        {
          menuName: "权限管理",
          menuLevel: "2",
          parentMenu: "系统信息",
          menuSort: "1",
          url: "http://www.chinausky.com",
          imageUrl: require("@/assets/img.png"),
          createTime: "2020-09-15 12:20:12",
          createMan: "张三",
          editTime: "2020-09-15 12:20:12",
          editMan: "李四",
        },
        {
          menuName: "安全机制",
          menuLevel: "3",
          parentMenu: "系统信息",
          menuSort: "2",
          url: "http://www.chinausky.com",
          imageUrl: require("@/assets/img.png"),
          // imageUrl:"https://avatar.csdnimg.cn/F/1/C/3_weixin_43962877.jpg",
          createTime: "2020-09-15 12:20:12",
          createMan: "张三",
          editTime: "2020-09-15 12:20:12",
          editMan: "李四",
        },
        {
          menuName: "人员管理",
          menuLevel: "4",
          parentMenu: "系统信息",
          menuSort: "3",
          url: "http://www.chinausky.com",
          imageUrl: require("@/assets/img.png"),
          // imageUrl:"https://avatar.csdnimg.cn/F/1/C/3_weixin_43962877.jpg",
          createTime: "2020-09-15 12:20:12",
          createMan: "张三",
          editTime: "2020-09-15 12:20:12",
          editMan: "李四",
        },
        {
          menuName: "单位信息",
          menuLevel: "5",
          parentMenu: "系统信息",
          menuSort: "4",
          url: "http://www.chinausky.com",
          imageUrl: require("@/assets/img.png"),
          // imageUrl:"https://avatar.csdnimg.cn/F/1/C/3_weixin_43962877.jpg",
          createTime: "2020-09-15 12:20:12",
          createMan: "张三",
          editTime: "2020-09-15 12:20:12",
          editMan: "李四",
        },
      ],

      tableData2: [
        {
          roleName: "超级管理员",
          opeMenu: "查看",
          roleAuth: "查看",
          createTime: "2020-09-15 12:20:12",
          createMan: "张三",
          editTime: "2020-09-15 12:20:12",
          editMan: "李四",
        },
        {
          roleName: "管理员",
          opeMenu: "查看",
          roleAuth: "查看",
          createTime: "2020-09-15 12:20:12",
          createMan: "张三",
          editTime: "2020-09-15 12:20:12",
          editMan: "李四",
        },
        {
          roleName: "普通用户",
          opeMenu: "查看",
          roleAuth: "查看",
          createTime: "2020-09-15 12:20:12",
          createMan: "张三",
          editTime: "2020-09-15 12:20:12",
          editMan: "李四",
        },
      ],
      multipleSelection: [],
      multipleSelection2: [],

      options: [
        {
          value: "1",
          label: "级别1",
        },
        {
          value: "2",
          label: "级别2",
        },
        {
          value: "3",
          label: "级别3",
        },
      ],
      value: "",

      input: "",

      dialogFormVisible: false,
      dialogFormVisible2: false,
      form: {
        name: "",
        region: "",
        region2: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "100px",
      formLabelWidth2: "150px",

      // 角色新增表格

      msg: "",
      checkPageAll: false,
      tableData3: [
        {
          id: 1, // id
          page: "系统管理", // 页面分类
          pageCheck: false, // 是否可查看页面
          fnList: [], // 功能权限有哪些
          fnCheck: {
            check: false,
            add: false,
            mod: false,
            del: false,
            export: false,
          },

          childList: [
            {
              p_id: 12,
              id: 8,
              page: "人员管理",
              pageCheck: false,
              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
              fnCheck: {
                add: false,
                del: false,
                mod: false,
                check: false,
              },
            },
            {
              p_id: 13,
              id: 9,
              page: "权限管理",
              pageCheck: false,
              fnList: [], // 功能权限有哪些
              fnCheck: {
                add: false,
                del: false,
                mod: false,
                check: false,
              },
              childList: [
                {
                  p_id: 2,
                  id: 10,
                  page: "菜单表",
                  pageCheck: false,
                  fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
                  fnCheck: {
                    add: false,
                    del: false,
                    mod: false,
                    check: false,
                  },
                },
                {
                  p_id: 2,
                  id: 11,
                  page: "角色表",
                  pageCheck: false,
                  fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
                  fnCheck: {
                    add: false,
                    del: false,
                    mod: false,
                    check: false,
                  },
                },
              ],
            },
            {
              p_id: 14,
              id: 30,
              page: "组织机构",
              pageCheck: false,
              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
              fnCheck: {
                add: false,
                del: false,
                mod: false,
                check: false,
              },
            },
            {
              p_id: 15,
              id: 33,
              page: "安全机制",
              pageCheck: false,
              fnList: [], // 功能权限有哪些
              fnCheck: {
                add: false,
                del: false,
                mod: false,
                check: false,
              },
            },
            {
              p_id: 16,
              id: 93,
              page: "单位信息",
              pageCheck: false,
              fnList: [], // 功能权限有哪些
              fnCheck: {
                add: false,
                del: false,
                mod: false,
                check: false,
              },
            },
          ],
        },
        {
          id: 2,
          page: "用户管理",
          pageCheck: false,
          fnList: [], // 功能权限有哪些
          fnCheck: {
            add: false,
            del: false,
            mod: false,
            check: false,
          },
          childList: [
            {
              p_id: 2,
              id: 39,
              page: "账号管理",
              pageCheck: false,
              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
              fnCheck: {
                add: false,
                del: false,
                mod: false,
                check: false,
              },
            },
            {
              p_id: 2,
              id: 32,
              page: "日志管理",
              pageCheck: false,
              fnList: ["查询"], // 功能权限有哪些
              fnCheck: {
                add: false,
                del: false,
                mod: false,
                check: false,
              },
            },
          ],
        },

        {
          id: 3,
          page: "设备管理",
          pageCheck: false,
          fnList: [], // 功能权限有哪些
          fnCheck: {
            add: false,
            del: false,
            mod: false,
            check: false,
          },
          childList: [
            {
              p_id: 2,
              id: 31,
              page: "摄像头",
              pageCheck: false,
              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
              fnCheck: {
                add: false,
                del: false,
                mod: false,
                check: false,
              },
            },
            {
              p_id: 2,
              id: 22,
              page: "周边防界",
              pageCheck: false,
              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
              fnCheck: {
                add: false,
                del: false,
                mod: false,
                check: false,
              },
            },
          ],
        },

        {
          id: 4,
          page: "巡检管理",
          pageCheck: false,
          fnList: [], // 功能权限有哪些
          fnCheck: {
            add: false,
            del: false,
            mod: false,
            check: false,
          },
          childList: [
            {
              p_id: 1,
              id: 41,
              page: "巡检点",
              pageCheck: false,
              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
              fnCheck: {
                add: false,
                del: false,
                mod: false,
                check: false,
              },
            },
            {
              p_id: 2,
              id: 42,
              page: "巡检路线",
              pageCheck: false,
              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
              fnCheck: {
                add: false,
                del: false,
                mod: false,
                check: false,
              },
            },
            {
              p_id: 3,
              id: 43,
              page: "电子巡更",
              pageCheck: false,
              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
              fnCheck: {
                add: false,
                del: false,
                mod: false,
                check: false,
              },
            },
            {
              p_id: 4,
              id: 44,
              page: "巡检计划",
              pageCheck: false,
              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
              fnCheck: {
                add: false,
                del: false,
                mod: false,
                check: false,
              },
            },
          ],
        },

        {
          id: 5,
          page: "告警中心",
          pageCheck: false,
          fnList: [], // 功能权限有哪些
          fnCheck: {
            add: false,
            del: false,
            mod: false,
            check: false,
          },
          childList: [
            {
              p_id: 1,
              id: 51,
              page: "告警记录",
              pageCheck: false,
              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
              fnCheck: {
                add: false,
                del: false,
                mod: false,
                check: false,
              },
            },
            {
              p_id: 2,
              id: 52,
              page: "任务中心",
              pageCheck: false,
              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
              fnCheck: {
                add: false,
                del: false,
                mod: false,
                check: false,
              },
            },
          ],
        },
        {
          id: 6,
          page: "综合查询",
          pageCheck: false,
          fnList: ["安防管理视图", "实时告警", "任务管理"], // 功能权限有哪些
          fnCheck: {
            viewport: false,
            alarm: false,
            task: false,
          },
        },
      ],
    };
  },
  methods: {
    goodsInfo(row) {
      if (row.columnIndex == 2) {
        return "goodsInfo"; //给第2个td里面添加goodsInfo的类名
      }

      if (row.row.fnList.length == 0) {
        return "warning";
      }
    },

    warning(row) {
      if (row.row.fnList.length == 0) {
        return "warning";
      }
    },

    // 查找父级函数
    getParent(data2, nodeId2) {
      var arrRes = [];
      if (data2.length === 0) {
        if (nodeId2) {
          arrRes.push(data2);
        }
        return arrRes;
      }
      let rev = (data, nodeId) => {
        for (var i = 0, length = data.length; i < length; i++) {
          let node = data[i];
          if (node.id === nodeId) {
            arrRes.push(node);
            rev(data2, node.p_id);
            break;
          } else {
            if (node.childList) {
              rev(node.childList, nodeId);
            }
          }
        }
        return arrRes;
      };
      arrRes = rev(data2, nodeId2);
      return arrRes;
    },
    /**
     * 页面选择
     */
    // 总选框事件
    checkPageAllEv(item) {
   
      let checkAll = (data, checked) => {
        for (let x of data) {
          console.log(x)
          
          x.pageCheck = checked;
          if (x.childList) {
            checkAll(x.childList, checked);
          }
        }
      };
      if (item === true) {
        checkAll(this.tableData, true);
      } else {
        checkAll(this.tableData, false);
      }
    },
    // 遍历json数据
    isCheckAllEv(data) {
      let isCheckAll = true;
      let fn = (data) => {
        for (let x of data) {
          if (x.pageCheck === false) {
            isCheckAll = false;
            return isCheckAll;
          }
          if (x.childList) {
            fn(x.childList);
          }
        }
      };
      fn(data);
      console.log(isCheckAll);
      return isCheckAll;
    },
    // 子选框事件
    pageCheckEv(scope) {
      // 如果有子项，则子项的选框选择跟当前一致
      if (scope.row.childList) {
        this.handleCheckAll(scope.row, scope.row.pageCheck);
      }
      // 查找父级选框
      this.getParent(this.tableData, scope.row.id).forEach((item, i) => {
        if (!item.childList) {
          item.pageCheck = scope.row.pageCheck;
        } else {
          var num = 0;
          item.childList.forEach((item, i) => {
            if (item.pageCheck === true) {
              num += 1;
            }
          });
          if (num === item.childList.length) {
            item.pageCheck = true;
          } else {
            item.pageCheck = false;
          }
        }
      });

      // 是否所有子项都已经勾选
      if (this.isCheckAllEv(this.tableData) === true) {
        this.checkPageAll = true;
      } else {
        this.checkPageAll = false;
      }
    },
    handleCheckAll(row, checked) {
      row.pageCheck = checked;
      if (row.childList) {
        let that = this;
        row.childList.forEach((element, i) => {
          that.handleCheckAll(row.childList[i], checked);
        });
      }
    },
    /**
     * 功能选择
     */
    // 子选框事件
    fnCheckEv(scope, type) {
      // 如果有子项，则子项的选框选择跟当前一致
      if (scope.row.childList) {
        this.handleFnAll(scope.row, scope.row.fnCheck[type], type);
      }
      // 查找父级选框
      this.getParent(this.tableData, scope.row.id).forEach((item, i) => {
        if (!item.childList) {
          item.fnCheck[type] = scope.row.fnCheck[type];
        } else {
          var num = 0;
          item.childList.forEach((item, i) => {
            if (item.fnCheck[type] === true) {
              num += 1;
            }
          });
          if (num === item.childList.length) {
            item.fnCheck[type] = true;
          } else {
            item.fnCheck[type] = false;
          }
        }
      });
    },
    handleFnAll(row, fnCheck, type) {
      row.fnCheck[type] = fnCheck;
      if (row.childList) {
        let that = this;
        row.childList.forEach((element, i) => {
          that.handleFnAll(row.childList[i], fnCheck, type);
        });
      }
    },

    handleDataAll(row, dataCheck, type) {
      for (let x in row.dataCheck) {
        row.dataCheck[x] = false;
      }
      row.dataCheck[type] = dataCheck;
      if (row.childList) {
        let that = this;
        row.childList.forEach((element, i) => {
          that.handleDataAll(row.childList[i], dataCheck, type);
        });
      }
    },

    handleEdit(index, row) {
      alert(index, row);
    },
    handleDelete(index, row) {
      this.$confirm("确定删除该数据吗?", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.tableData.splice(index, 1);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    batchDelete() {
      let multData = this.multipleSelection;
      let tableData = this.tableData;
      let multDataLen = multData.length;
      let tableDataLen = tableData.length;

      for (let i = 0; i < multDataLen; i++) {
        for (let y = 0; y < tableDataLen; y++) {
          if (JSON.stringify(tableData[y]) == JSON.stringify(multData[i])) {
            //判断是否相等，相等就删除
            this.tableData.splice(y, 1);
            console.log("aa");
          }
        }
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    handleEdit2(index, row) {
      alert(index + "我是角色", row);
    },
    handleDelete2(index, row) {
      this.$confirm("确定删除该数据吗?", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.tableData2.splice(index, 1);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    batchDelete2() {
      let multData2 = this.multipleSelection2;
      let tableData2 = this.tableData2;
      let multDataLen2 = multData2.length;
      let tableDataLen2 = tableData2.length;

      for (let i = 0; i < multDataLen2; i++) {
        for (let y = 0; y < tableDataLen2; y++) {
          if (JSON.stringify(tableData2[y]) == JSON.stringify(multData2[i])) {
            //判断是否相等，相等就删除
            this.tableData2.splice(y, 1);
            console.log("aa");
          }
        }
      }
    },
    handleSelectionChange2(val) {
      this.multipleSelection2 = val;
    },
  },
};
</script>
<style scoped>
.app-container {
  min-height: calc(100vh - 115px) !important;
}
</style>
<style >
.el-tabs--border-card {
  background: rgba(0, 0, 0, 0);
  border: 1px solidrgba(0, 0, 0, 0);
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0), 0 0 6px 0 rgba(0, 0, 0, 0);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0), 0 0 6px 0 rgba(0, 0, 0, 0);
}
.el-tabs--border-card > .el-tabs__header {
  background-color: rgba(0, 0, 0, 0);
  position: relative;
  top: 12px;
  left: 14px;
  border-bottom: 0;
}
.el-tabs--border-card > .el-tabs__content {
  padding: 0;
}

.el-tabs--border-card > .el-tabs__header .el-tabs__item + .el-tabs__item,
.el-tabs--border-card > .el-tabs__header .el-tabs__item:first-child {
  background: #e4e3e3;

  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  color: #444;
}
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  color: #fff;
  background-color: #5c88fa;
  border: 1px solid rgba(0, 0, 0, 0);
  border-right-color: rgba(0, 0, 0, 0);

  border-left-color: 0;
}
.el-tabs--border-card
  > .el-tabs__header
  .el-tabs__item:not(.is-disabled):hover {
  color: #fff;
  background-color: #5c88fa;
}
.el-tabs__item {
  height: 35px;
  line-height: 35px;
}

.roleDialog .el-dialog .el-form-item {
  margin: 20px 20px 0;
}
.roleDialog .el-dialog .el-form-item:first-child,
.roleDialog .el-dialog .el-form-item:nth-child(2) {
  display: inline-block;
}
.el-dialog .el-form-item.table-item {
  width: 96%;
}

/* 权限第二行居左样式 */




</style>
<style >

</style>