bocai_supplyChain_pc/src/components/merchantManagement/roleManagement.vue

<template>
  <div class>
    <a-breadcrumb class="newBreadcrumb mt0 mb16">
      <a-breadcrumb-item href>
        <router-link :to="{name:'merchantBack'}">
          <a-icon type="home" />
        </router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>
        <span @click="cancelAdd" v-if="secondBreadcrumb" style="cursor:pointer">角色管理</span>
        <span v-else>角色管理</span>
      </a-breadcrumb-item>
      <a-breadcrumb-item v-if="secondBreadcrumb">{{secondBreadcrumb}}</a-breadcrumb-item>
    </a-breadcrumb>
    <!-- <div v-if="secondBreadcrumb">
      /
      {{secondBreadcrumb}}
    </div>-->
    <div class="contentbody bodyContainer">
      <div class="fsa pb16">
        <div class="f20 fw500">{{secondBreadcrumb || '角色管理'}}</div>
        <a-button class="addmemeber f14" @click="addRole('add')" v-if="secondBreadcrumb == ''">
          <i class="iconfont icon-fangda"></i> 添加角色
        </a-button>
      </div>
      <div v-if="secondBreadcrumb == ''">
        <a-table :columns="columns" :data-source="roleList" :scroll="{y:480}" :pagination="false" @change="onChange" :loading="{spinning: isspinning,tip: '加载中',wrapperClassName: 'spinstyle'}" :rowKey="(record) => record.id" :locale="tablenodata">
          <!-- <a slot="index" slot-scope="record, text, index">{{ index + 1 }}</a> -->
          <div slot="setting" class="setting" slot-scope="text, record" style="color: #1890FF">
            <a @click="secondBreadcrumb = '角色详情'">详情</a>
            <a class="delete">编辑</a>
            <a>删除</a>
          </div>
        </a-table>
        <div class="pagecontainer mt16 fss">
          <a-pagination :current="+pagination.pageNum" :default-current="1" :defaultPageSize="8" :total="pagination.total" @change="onChange" />
          <div class="ant-pagination-options-quick-jumper f14 ml12">
            <span>共{{ pagination.total }}条，</span>跳至
            <input ref="pageinput" type="text" @keyup.enter="inputpageChange" @blur="inputpageChange" />页
          </div>
        </div>
      </div>
      <div v-else-if="secondBreadcrumb == '添加角色' || secondBreadcrumb == '编辑角色'">
        <div>
          <a-form :form="roleForm" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" @submit.event="addSubmit">
            <!-- 角色信息 -->
            <div class="fw500 mb16 f16">角色信息</div>
            <a-form-item class="addItem" label="角色名称:">
              <a-input placeholder="请输入角色名称" v-decorator="[ 'aliasName', { rules: [{ required: true, message: '请输入角色名称' }] }, ]" />
            </a-form-item>
            <a-form-item class="addItem" label="角色描述:">
              <a-input placeholder="请输入角色描述" v-decorator="[ 'desp', { rules: [{ required: true, message: '请输入角色描述' }] }, ]" />
            </a-form-item>
            <a-divider />
            <!-- 功能权限 -->
            <div class="fw500 mb16 f16">功能权限</div>
            <a-form-item>
              <div class>
                在
                <a-select default-value="lucy" class="mr8 ml8" style="width:360px" placeholder="请选择分组" v-decorator="['agencyTeamId',{ rules: [{ required: false, message: '请选择分组' }] },]" dropdownClassName="groupSelectDrop">
                  <a-select-option :value="item.roleName" v-for="(item,index) in roleList">{{item.roleName}}</a-select-option>
                  <!-- <div slot="dropdownRender" slot-scope="menu">
                  <div v-for="(item,index) in roleList" @click="choiceGroup(item)" class="groupSelectSub fsa" :key="index">
                    <div>{{item.roleName}}</div>
                  </div>
                  </div>-->
                </a-select>的基础上编辑权限
              </div>
            </a-form-item>
            <div v-for="(item, key) in authorityList">
              <a-checkbox :checked="item.checked" @change="checkboxChange(item,key)">{{item.label}}</a-checkbox>
              <br />
              <div class="ml24 mt16">
                <a-checkbox v-for="(subItem, subIndex) in item.children" :checked="subItem.checked" :disabled="!item.checked" @change="checkboxChange(subItem,key,subIndex)">{{subItem.label}}</a-checkbox>
              </div>
              <a-divider />
            </div>
            <a-form-item>
              <a-button type class="mr16" @click="cancelAdd">取消</a-button>
              <a-button type="primary" html-type="submit">保存</a-button>
            </a-form-item>
          </a-form>
        </div>
      </div>
      <div v-if="secondBreadcrumb == '角色详情' ">角色详情</div>
    </div>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: 'RoleManagement',
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      tablenodata: {
        // 空状态文本内容
        emptyText: () => (
          <div>
            <div>
              <img src="https://user-images.githubusercontent.com/507615/54591670-ac0a0180-4a65-11e9-846c-e55ffce0fe7b.png" style="width:105px;height:90px;marginTop:20px" />
            </div>
            <div style="marginBottom:20px">暂无数据</div>
          </div>
        ),
      },
      secondBreadcrumb: '',
      roleForm: this.$form.createForm(this),
      roleList: [1, 2, 3, 4],
      pagination: {
        pageNum: 1,
        pageSize: 8,
        total: null, //分页配置
        status: 0,
        keys: null,
        // searchTag: 1,
      },
      isspinning: false,
      // roleList: [
      //   {
      //     roleDesp: '',
      //     roleCreateTime: '2023-10-20 14:27:17',
      //     classify: 0,
      //     aliasName: '',
      //     userNum: 21,
      //     labelId: 672,
      //     pName: '',
      //     roleId: 145,
      //     roleName: '稻田内测用户',
      //     sort: 1,
      //     roleType: 1,
      //     labelName: '稻田内测用户',
      //   },
      //   {
      //     roleDesp: '',
      //     roleCreateTime: '2023-10-12 09:34:33',
      //     classify: 0,
      //     aliasName: '',
      //     userNum: 2,
      //     labelId: 670,
      //     pName: '工厂职位，工单列表',
      //     roleId: 144,
      //     roleName: '询单客服',
      //     sort: 2,
      //     roleType: 1,
      //     labelName: '询单客服',
      //   },
      //   {
      //     roleDesp: '',
      //     roleCreateTime: '2023-09-22 11:46:25',
      //     classify: 1,
      //     aliasName: '',
      //     userNum: 2,
      //     labelId: 667,
      //     pName: '',
      //     roleId: 143,
      //     roleName: '管理角色',
      //     sort: 3,
      //     roleType: 1,
      //     labelName: '管理角色',
      //   },
      //   {
      //     roleDesp: '',
      //     roleCreateTime: '2023-09-06 20:05:46',
      //     classify: 1,
      //     aliasName: '',
      //     userNum: 1,
      //     labelId: 662,
      //     pName: '品牌列表，职位要求，职位特色，企业列表，总包列表，工单列表，工厂职位，工单列表，项目相册，更新助手，职位分类，逾期工单，热推职位',
      //     roleId: 142,
      //     roleName: '跟单客服',
      //     sort: 4,
      //     roleType: 1,
      //     labelName: '跟单客服',
      //   },
      //   {
      //     roleDesp: '',
      //     roleCreateTime: '2023-08-19 18:30:20',
      //     classify: 1,
      //     aliasName: '',
      //     userNum: 0,
      //     labelId: 658,
      //     pName: '品牌列表，职位要求，职位特色，工作台，分析页，龙虎榜，用户列表，企业列表，总包列表，后台内容，代理列表，代理线索，矩阵官网，伯才官网，一手单官网，工单列表，工厂职位，老乡列表，项目页，工厂职位，代理列表，工单列表，项目通告，项目通知，位置管理，项目相册，官网表单，账单管理，数据大屏，更新助手，项目概况，职位分类，内容管理，呼叫数据，逾期工单，热推职位，频道管理，轮播配置，活动页面，图片模板，图片模板',
      //     roleId: 141,
      //     roleName: '新管理员',
      //     sort: 5,
      //     roleType: 1,
      //     labelName: '新管理员',
      //   },
      //   {
      //     roleDesp: '',
      //     roleCreateTime: '2023-08-11 10:48:15',
      //     classify: 1,
      //     aliasName: '',
      //     userNum: 0,
      //     labelId: 656,
      //     pName: '品牌列表，职位要求，职位特色，工作台，企业列表，总包列表，后台内容，代理列表，代理线索，矩阵官网，伯才官网，一手单官网，工单列表，工厂职位，工单列表，项目相册，官网表单，数据看板，更新助手，项目概况，职位分类，内容管理，呼叫数据，逾期工单，热推职位，频道管理，轮播配置，活动页面，图片模板，图片模板',
      //     roleId: 140,
      //     roleName: '开发测试',
      //     sort: 6,
      //     roleType: 1,
      //     labelName: '开发测试',
      //   },
      //   {
      //     roleDesp: '',
      //     roleCreateTime: '2023-07-31 16:03:23',
      //     classify: 0,
      //     aliasName: '',
      //     userNum: 8,
      //     labelId: 655,
      //     pName: '代理列表',
      //     roleId: 139,
      //     roleName: '电话客服',
      //     sort: 7,
      //     roleType: 1,
      //     labelName: '渠道拓展',
      //   },
      //   {
      //     roleDesp: '',
      //     roleCreateTime: '2023-01-29 13:53:17',
      //     classify: 0,
      //     aliasName: '',
      //     userNum: 18,
      //     labelId: 636,
      //     pName: '',
      //     roleId: 138,
      //     roleName: '成员通用',
      //     sort: 8,
      //     roleType: 1,
      //     labelName: '成员通用',
      //   },
      //   {
      //     roleDesp: '交付中心主管',
      //     roleCreateTime: '2020-06-09 16:26:25',
      //     classify: 1,
      //     aliasName: '',
      //     userNum: 6,
      //     labelId: 408,
      //     pName: '品牌列表，职位要求，职位特色，工作台，分析页，龙虎榜，企业列表，总包列表，代理列表，工单列表，工厂职位，老乡列表，项目页，工厂职位，代理列表，工单列表，项目通告，项目通知，位置管理，项目相册，数据看板，数据大屏，更新助手，项目概况，职位分类，热推职位',
      //     roleId: 106,
      //     roleName: '项目主管',
      //     sort: 9,
      //     roleType: 1,
      //     labelName: '项目主管',
      //   },
      //   {
      //     roleDesp: '',
      //     roleCreateTime: '2022-04-27 10:40:43',
      //     classify: 1,
      //     aliasName: '',
      //     userNum: 5,
      //     labelId: 616,
      //     pName: '代理列表，工单列表，平台数据，渠道运营，代理数据，数据看板',
      //     roleId: 136,
      //     roleName: '渠道主管',
      //     sort: 10,
      //     roleType: 1,
      //     labelName: '渠道主管',
      //   },
      //   {
      //     roleDesp: '',
      //     roleCreateTime: '2022-02-24 19:58:45',
      //     classify: 0,
      //     aliasName: '',
      //     userNum: 12,
      //     labelId: 612,
      //     pName: '工厂职位，代理列表，工单列表',
      //     roleId: 135,
      //     roleName: '客户经理',
      //     sort: 11,
      //     roleType: 1,
      //     labelName: '客户经理',
      //   },
      //   {
      //     roleDesp: '',
      //     roleCreateTime: '2020-08-30 10:12:30',
      //     classify: 1,
      //     aliasName: '',
      //     userNum: 1,
      //     labelId: 452,
      //     pName: '品牌列表，职位要求，职位特色，劳动合同，业务合同，合同模板，合同企业，工资条，工作台，分析页，龙虎榜，复盘，用户列表，成员列表，企业列表，总包列表，代理列表，代理线索，工单列表，工厂职位，老乡列表，代理列表，项目相册，账单管理，数据看板，数据大屏，更新助手，内容管理，呼叫数据，逾期工单',
      //     roleId: 117,
      //     roleName: '财务',
      //     sort: 12,
      //     roleType: 1,
      //     labelName: '财务',
      //   },
      //   {
      //     roleDesp: '',
      //     roleCreateTime: '2022-06-10 14:12:00',
      //     classify: 0,
      //     aliasName: '',
      //     userNum: 0,
      //     labelId: 622,
      //     pName: '短信验证码，修改用户操作次数，校验姓名、身份证号，校验姓名、银行卡号',
      //     roleId: 137,
      //     roleName: '开发角色01',
      //     sort: 13,
      //     roleType: 1,
      //     labelName: '开发角色01',
      //   },
      //   {
      //     roleDesp: '',
      //     roleCreateTime: '2021-12-27 19:36:07',
      //     classify: 0,
      //     aliasName: '',
      //     userNum: 1,
      //     labelId: 607,
      //     pName: '品牌列表，工作台，项目列表【旧】，工单管理-襄县，渠道管理，代理列表1.0，推广明细，企业列表，总包列表，代理入口',
      //     roleId: 133,
      //     roleName: '门店店长',
      //     sort: 14,
      //     roleType: 1,
      //     labelName: '门店店长',
      //   },
      //   {
      //     roleDesp: '',
      //     roleCreateTime: '2021-10-26 13:56:05',
      //     classify: 0,
      //     aliasName: '',
      //     userNum: 10,
      //     labelId: 588,
      //     pName: '品牌列表，职位要求，职位特色，企业列表，总包列表，工厂职位，工单列表，项目相册，更新助手，职位分类',
      //     roleId: 132,
      //     roleName: '项目经理',
      //     sort: 15,
      //     roleType: 1,
      //     labelName: '项目经理',
      //   },
      //   {
      //     roleDesp: '安置专员角色',
      //     roleCreateTime: '2021-10-14 09:37:00',
      //     classify: 0,
      //     aliasName: '',
      //     userNum: 2,
      //     labelId: 586,
      //     pName: '',
      //     roleId: 130,
      //     roleName: '安置专员',
      //     sort: 16,
      //     roleType: 1,
      //     labelName: '安置专员',
      //   },
      //   {
      //     roleDesp: '',
      //     roleCreateTime: '2021-10-13 16:20:01',
      //     classify: 0,
      //     aliasName: '',
      //     userNum: 2,
      //     labelId: 585,
      //     pName: '简历采集，推荐工作，跟进入职，跟进离职，需求维护，需求列表，需求地图，品牌列表，职位要求，职位特色，工作台，在职维护，项目列表【旧】，企业列表，总包列表，后台内容，代理列表，工单列表，工厂职位',
      //     roleId: 129,
      //     roleName: '产品经理',
      //     sort: 17,
      //     roleType: 1,
      //     labelName: '产品经理',
      //   },
      //   {
      //     roleDesp: '白名单的角色，扫码、报名后，只要绑定了代理一定会触发推广事件和佣金，且佣金免审核自动发送到余额',
      //     roleCreateTime: '2021-10-07 17:20:01',
      //     classify: 0,
      //     aliasName: '',
      //     userNum: 3,
      //     labelId: 584,
      //     pName: '',
      //     roleId: 128,
      //     roleName: '代理佣金白名单',
      //     sort: 18,
      //     roleType: 1,
      //     labelName: '代理佣金白名单',
      //   },
      //   {
      //     roleDesp: '线下代理点拓展',
      //     roleCreateTime: '2021-08-31 15:23:45',
      //     classify: 0,
      //     aliasName: '',
      //     userNum: 2,
      //     labelId: 582,
      //     pName: '工作台，项目列表【旧】，渠道管理，代理列表1.0，推广明细，企业列表，代理入口',
      //     roleId: 126,
      //     roleName: '招工经理',
      //     sort: 19,
      //     roleType: 1,
      //     labelName: '招工经理',
      //   },
      //   {
      //     roleDesp: '设计',
      //     roleCreateTime: '2021-08-18 18:00:44',
      //     classify: 1,
      //     aliasName: '',
      //     userNum: 3,
      //     labelId: 580,
      //     pName: '品牌列表，工作台，企业列表，项目相册，更新助手',
      //     roleId: 125,
      //     roleName: '平面设计',
      //     sort: 20,
      //     roleType: 1,
      //     labelName: '平面设计',
      //   },
      //   {
      //     roleDesp: '试用期',
      //     roleCreateTime: '2021-05-12 10:27:09',
      //     classify: 0,
      //     aliasName: '',
      //     userNum: 0,
      //     labelId: 561,
      //     pName: '工厂职位',
      //     roleId: 124,
      //     roleName: '试用',
      //     sort: 21,
      //     roleType: 1,
      //     labelName: '试用',
      //   },
      //   {
      //     roleDesp: '注册用户，无后台权限',
      //     roleCreateTime: '2017-04-18 14:16:41',
      //     classify: 0,
      //     aliasName: '',
      //     userNum: 7225,
      //     labelId: 1,
      //     pName: '',
      //     roleId: 45,
      //     roleName: 'A',
      //     sort: 22,
      //     roleType: 1,
      //     labelName: 'A',
      //   },
      //   {
      //     roleDesp: '',
      //     roleCreateTime: '2020-11-18 20:12:40',
      //     classify: 0,
      //     aliasName: '',
      //     userNum: 3,
      //     labelId: 479,
      //     pName: '工作台',
      //     roleId: 122,
      //     roleName: '新人',
      //     sort: 23,
      //     roleType: 1,
      //     labelName: '新人',
      //   },
      //   {
      //     roleDesp: '原”在线客服“、”流量专员“',
      //     roleCreateTime: '2019-11-15 18:04:13',
      //     classify: 0,
      //     aliasName: '简历专员',
      //     userNum: 4,
      //     labelId: 433,
      //     pName: '简历采集，需求列表，需求地图，复盘',
      //     roleId: 102,
      //     roleName: '简历专员',
      //     sort: 24,
      //     roleType: 1,
      //     labelName: '简历专员',
      //   },
      //   {
      //     roleDesp: '',
      //     roleCreateTime: '2018-02-03 10:10:05',
      //     classify: 0,
      //     aliasName: '',
      //     userNum: 7,
      //     labelId: 207,
      //     pName: '推荐工作，需求列表，需求地图，我的统计，复盘',
      //     roleId: 87,
      //     roleName: '职业顾问',
      //     sort: 25,
      //     roleType: 1,
      //     labelName: '职业顾问',
      //   },
      //   {
      //     roleDesp: '',
      //     roleCreateTime: '2017-10-27 22:08:21',
      //     classify: 0,
      //     aliasName: '',
      //     userNum: 5,
      //     labelId: 165,
      //     pName: '跟进入职，旧在职维护，跟进离职，需求维护，需求列表，需求地图，工资核对，品牌列表，劳动合同，服务交付，工作台，在职维护，复盘，项目列表【旧】',
      //     roleId: 84,
      //     roleName: '项目执行',
      //     sort: 26,
      //     roleType: 1,
      //     labelName: '项目执行',
      //   },
      //   {
      //     roleDesp: '',
      //     roleCreateTime: '2020-11-03 18:25:54',
      //     classify: 0,
      //     aliasName: '',
      //     userNum: 3,
      //     labelId: 468,
      //     pName: '劳动合同，工资条，服务交付，工作台，在职维护，在职维护',
      //     roleId: 119,
      //     roleName: '服务专员',
      //     sort: 27,
      //     roleType: 1,
      //     labelName: '服务专员',
      //   },
      //   {
      //     roleDesp: 'BD，负责商务拓展',
      //     roleCreateTime: '2017-04-15 22:01:27',
      //     classify: 0,
      //     aliasName: '',
      //     userNum: 5,
      //     labelId: 27,
      //     pName: '工单列表，更新助手，项目概况',
      //     roleId: 41,
      //     roleName: '项目客服',
      //     sort: 28,
      //     roleType: 1,
      //     labelName: '项目客服',
      //   },
      //   {
      //     roleDesp: '',
      //     roleCreateTime: '2020-03-12 10:13:18',
      //     classify: 0,
      //     aliasName: '',
      //     userNum: 1,
      //     labelId: 355,
      //     pName: '需求列表，需求地图，业务管理，分发管理，业务日历，简历中心，渠道来源1.0，简历生产，服务交付，工作台，龙虎榜，简历公海，在职维护，匹配失败，旧服务工单，复盘，工单时间，服务工单，等待分发，彩蛋配置',
      //     roleId: 104,
      //     roleName: '平台运营',
      //     sort: 29,
      //     roleType: 1,
      //     labelName: '平台运营',
      //   },
      //   {
      //     roleDesp: '',
      //     roleCreateTime: '2020-11-16 19:39:20',
      //     classify: 1,
      //     aliasName: '',
      //     userNum: 2,
      //     labelId: 477,
      //     pName: '品牌列表，职位要求，职位特色，企业列表，工厂职位，项目相册，更新助手，职位分类，内容管理，热推职位，频道管理，轮播配置，活动页面，图片模板',
      //     roleId: 121,
      //     roleName: '内容运营',
      //     sort: 30,
      //     roleType: 1,
      //     labelName: '内容运营',
      //   },
      //   {
      //     roleDesp: '',
      //     roleCreateTime: '2020-09-14 18:34:47',
      //     classify: 0,
      //     aliasName: '',
      //     userNum: 4,
      //     labelId: 458,
      //     pName: '用户列表，成员列表，后台内容',
      //     roleId: 118,
      //     roleName: '公司人事',
      //     sort: 31,
      //     roleType: 1,
      //     labelName: '公司人事',
      //   },
      //   {
      //     roleDesp: '超级管理员',
      //     roleCreateTime: '2017-04-13 15:27:02',
      //     classify: 1,
      //     aliasName: '',
      //     userNum: 10,
      //     labelId: 12,
      //     pName: '简历采集，推荐工作，跟进入职，旧在职维护，跟进离职，需求维护，需求列表，需求地图，工资核对，我的统计，业务管理，分发管理，业务日历，跟进入职，在职管理，离职管理，简历中心，渠道来源1.0，简历生产，角色管理（菜单），品牌列表，职位要求，职位特色，劳动合同，业务合同，合同模板，合同企业，工资条，职业顾问提成，来源列表，系统操作日志，短信验证码，修改用户操作次数，校验姓名、身份证号，校验姓名、银行卡号，修改用户身份证照片，修改用户OpenID，修改模板对应的企业，修改人员对应的企业，合同生成PDF测试，服务交付，工作台，龙虎榜，简历公海，在职维护，匹配失败，旧服务工单，复盘，线索管理，线索挖掘，休眠线索，工单时间，在职维护，旧需求列表，服务工单，等待分发，彩蛋配置，项目收款结算，花名库配置，项',
      //     roleId: 11,
      //     roleName: 'admin',
      //     sort: 32,
      //     roleType: 0,
      //     labelName: 'admin',
      //   },
      // ],
      middleauthor: null,
      authorityList: {
        dtzw: {
          id: 1,
          label: '稻田职位',
          checked: false,
          children: [
            {
              id: 1,
              label: '查看职位列表',
              checked: false,
            },
            {
              id: 2,
              label: '职位详情页',
              checked: false,
            },
            {
              id: 3,
              label: '报名',
              checked: false,
            },
          ],
        },
        wdbm: {
          id: 2,
          label: '我的报名',
          checked: false,
          children: [
            {
              id: 1,
              label: '查看报名信息',
              checked: false,
            },
            {
              id: 2,
              label: '修改报名详情',
              checked: false,
            },
          ],
        },
        wdlx: {
          id: 3,
          label: '我的老乡',
          checked: false,
          children: [
            {
              id: 1,
              label: '查看老乡信息',
              checked: false,
            },
            {
              id: 2,
              label: '修改老乡详情',
              checked: false,
            },
          ],
        },
        tdsj: {
          id: 4,
          label: '团队数据',
          checked: false,
          children: [
            {
              id: 1,
              label: '查看数据',
              checked: false,
            },
          ],
        },
        xx: {
          id: 5,
          label: '消息',
          checked: false,
          children: [
            {
              id: 1,
              label: '系统消息',
              checked: false,
            },
            {
              id: 2,
              label: '团队消息',
              checked: false,
            },
          ],
        },
        sjht: {
          id: 6,
          label: '商家后台',
          checked: false,
          children: [
            {
              id: 1,
              label: '我的团队',
              checked: false,
            },
            {
              id: 2,
              label: '新增成员',
              checked: false,
            },
            {
              id: 3,
              label: '修改成员信息',
              checked: false,
            },
            {
              id: 4,
              label: '删除成员',
              checked: false,
            },
            {
              id: 5,
              label: '伯才TV',
              checked: false,
            },
            {
              id: 6,
              label: '数据大屏',
              checked: false,
            },
          ],
        },
      },
    }
  },
  // 计算属性
  computed: {
    columns() {
      const columns = [
        {
          title: '排序',
          dataIndex: 'index',
          key: 'index',
          customRender: (text, row, index) => {
            if (row.children) {
              return ''
            } else {
              return index + 1
            }
          },
          // ellipsis: true,
          width: 60,
        },
        {
          title: '角色',
          dataIndex: 'roleName',
          key: 'roleName',
          scopedSlots: { customRender: 'roleName' },
          ellipsis: true,
          width: 120,
        },
        // {
        //   title: '角色',
        //   dataIndex: 'role',
        //   key: 'role',
        //   width: 100,
        //   ellipsis: true,
        // },
        {
          title: '权限',
          dataIndex: 'pName',
          key: 'pName',
          // width: 100,
          // filters: this.groupList,
          // customRender: (text, row, index) => {
          //   let text1
          //   this.groupList.forEach((item) => {
          //     if (item.id == text) {
          //       text1 = item.teamName
          //     }
          //   })
          //   return text1
          // },
          ellipsis: true,
        },
        // {
        //   title: '权限',
        //   dataIndex: 'permission',
        //   key: 'permission',
        //   ellipsis: true,
        // },
        {
          title: '操作',
          dataIndex: 'setting',
          key: 'setting',
          // sorter: (a, b) => a.userApplyOrder.localeCompare(b.userApplyOrder),
          scopedSlots: { customRender: 'setting' },
          ellipsis: true,

          // sortOrder: sortedInfo.columnKey == "userApplyOrder" && sortedInfo.order,
          // ellipsis: true,
          width: 140,
        },
      ]
      return columns
    },
  },
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  beforeCreate() {},
  created() {
    this.$emit('setTitle', '角色管理')
    this.middleauthor = JSON.parse(JSON.stringify(this.authorityList))
    console.log(this.middleauthor)
  },
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {},
  // 组件方法
  methods: {
    checkboxChange(e, key, index) {
      // console.log(e)
      // console.log(key)
      // console.log(index)
      // console.log(this.authorityList[key]);
      // console.log(this.authorityList[key][index]);
      if (e.children) {
        this.authorityList[key].checked = !this.authorityList[key].checked
      } else {
        this.authorityList[key].children[index].checked = !this.authorityList[key].children[index].checked
      }
      console.log(this.authorityList)
    },
    inputpageChange(e) {
      const pagenumcount = this.pagination.total / this.pagination.pageSize
      console.log(pagenumcount)
      if (e.target.value) {
        if (e.target.value > pagenumcount) {
          this.pagination.pageNum = Math.ceil(pagenumcount)
        } else {
          this.pagination.pageNum = e.target.value
        }
      } else {
        this.pagination.pageNum = 1
      }
      // this.getJobList();
      this.getMemberList()
      console.log(e)
    },
    choiceGroup() {},
    onChange(e, e1, e2) {
      console.log(e)
      console.log(e1)
      console.log(e2)
      if (typeof e == 'number') {
        this.pagination.pageNum = e
        this.getMemberList()
      }
    },
    addRole() {
      this.secondBreadcrumb = '添加角色'
      this.$forceUpdate()
    },
    /**
     * 角色信息表单提交
     */
    addSubmit() {
      this.roleForm.validateFields(async (err) => {
        console.log(err)
      })
    },
    /**
     * 取消编辑或者新增角色
     */
    cancelAdd() {
      this.secondBreadcrumb = ''

      this.authorityList = JSON.parse(JSON.stringify(this.middleauthor))
    },
  },
}
</script>

<style scoped lang="less">
.addmemeber {
  border: 0;
  padding: 0 12px;
  height: 32px;
  line-height: 32px;
  color: #fff;
  background: #1890ff;
  border-radius: 4px;
  i {
    font-size: 12px;
  }
}
.addItem {
  width: 468px;
}
.ant-divider {
  margin: 16px 0 22px 0;
}
.delete {
  border-left: 1px solid #979797;
  border-right: 1px solid #979797;
  padding: 0 9px;
  margin: 0 9px;
}
</style>