<template xmlns="">
  <div>
    <el-tabs class="my-tabs" v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="角色列表" name="roleList">
        <div class="container">
          <div class="tab-header">
            <el-form ref="form" :inline="true" :model="search" label-width="80px">
              <el-row :gutter="20">
                <el-col :span="16">
                  <el-form-item label="角色名称">
                    <el-input v-model="search.name" clearable></el-input>
                  </el-form-item>
                  <el-button @click="getroleOrgList(1)">查询</el-button>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <!-- table -->
          <el-table :data="roleTable" border style="width: 100%;">
            <el-table-column label="序号" width="80px" type="index" align="center">
            </el-table-column>
            <el-table-column label="操作" width="250px" align="center">
              <template slot-scope="scope">
                <!-- <el-button @click="sourceMenus(scope.row)" type="primary" size="mini">资源授权</el-button> -->
                <!--                <el-button @click="funMenus(scope.row)" type="primary" size="mini">功能授权</el-button>-->
                <!--                <el-button @click="roleMenus(scope.row)" type="primary" size="mini">菜单授权</el-button>-->
                <el-button @click="charactarMenus(scope.row)" type="primary" size="mini">角色授权</el-button>
                <!-- <el-button @click="mobileMenus(scope.row)" type="primary" size="mini">移动端授权</el-button> -->
                <el-button @click="editRow(scope.row)" type="primary" size="mini">编辑</el-button>
                <el-button @click="delRow(scope.row)" type="danger" size="mini">删除</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="角色名称" width="220px" align="center">
            </el-table-column>
            <el-table-column prop="code" label="角色编码" align="center">
            </el-table-column>
            <el-table-column prop="dataRuleValue" label="数据权限" align="center">
            </el-table-column>
            <!-- <el-table-column prop="postName" label="角色岗位" width="220px" align="center">
            </el-table-column> -->
            <!--   <el-table-column prop="roleTypeValue" label="组织层级" width="200px" align="center">
            </el-table-column> -->
            <el-table-column prop="remarks" label="备注" align="center">
            </el-table-column>
            <el-table-column prop="isEnableName" label="是否可用" align="center">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.isEnable" active-value='1' inactive-value='0' active-color="#13ce66"
                  inactive-color="#ff4949" @change="enabledChange($event,scope.row)">
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column prop="sort" label="排序" align="center">
            </el-table-column>
          </el-table>
          <pagination :total="page.total" :page.sync="page.current" :limit.sync="page.size" @pagination="pagination" />

          <!-- 编辑角色信息 -->
          <el-dialog :title="dialogTitle + '角色信息'" :visible.sync="editDialog" width="40%">
            <table class="e-table" cellspacing="0">

              <tr>
                <td>角色名称</td>
                <td>
                  <el-input v-model="roleForm.name" style="width:300px"></el-input>
                </td>
              </tr>
              <tr>
                <td>编码</td>
                <td>
                  <el-input v-model="roleForm.code" style="width:300px"></el-input>
                </td>
              </tr>
              <tr>
                <td>数据权限</td>
                <td>
                  <el-select v-model="roleForm.dataRuleId" style="width:300px">
                    <el-option v-for="item in dataRuleId_list" :key="item.sid" :label="item.name"
                      :value="item.sid"></el-option>
                  </el-select>
                </td>
              </tr>
              <!-- <tr>
                <td>组织层级</td>
                <td>
                  <el-select v-model="roleForm.roleTypeValue" style="width:300px" @change="changeOrgName">
                    <el-option
                      v-for="(item, i) in roleTypeValue_list"
                      :key="i"
                      :label="item.dictValue"
                      :value="item.dictValue">
                    </el-option>
                  </el-select>
                </td>
              </tr> -->
              <tr>
                <td>排序</td>
                <td>
                  <el-input v-model="roleForm.sort" style="width:300px"></el-input>
                </td>
              </tr>
              <tr>
                <td>备注</td>
                <td>
                  <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6}" v-model="roleForm.remarks"></el-input>
                </td>
              </tr>
            </table>
            <div style="margin-top: 20px; text-align: center;">
              <el-button type="primary" @click="save()">保 存</el-button>
              <el-button @click="editDialog = false">关 闭</el-button>
            </div>
          </el-dialog>
          <!-- 资源授权 -->
          <el-dialog title="资源授权" :visible.sync="sourceDialog" width="50%">
            <table class="e-table" cellspacing="0">
              <tr>
                <td>角色名称</td>
                <td>
                  <el-input v-model="roleForm.name" readonly></el-input>
                </td>
              </tr>
              <tr>
                <td>可操作资源列表</td>
                <td>
                  <el-tree v-loading="loading" :data="treedata" ref="sourceTree" show-checkbox accordion node-key="sid"
                    :default-expand-all='true' :default-checked-keys="checkedId" :props="sourcedefaultProps"
                    @check-change="checkchange">
                  </el-tree>
                </td>
              </tr>
            </table>
            <div slot="footer" class="text-center">
              <el-button type="primary" @click="sourceSave">保 存</el-button>
              <el-button @click="sourceDialog = false">关 闭</el-button>
            </div>
          </el-dialog>
          <!-- 功能授权 -->
          <!--          <el-dialog title="功能授权" :visible.sync="funDialog" width="50%">-->
          <!--            <table class="e-table" cellspacing="0">-->
          <!--              <tr>-->
          <!--                <td>角色名称</td>-->
          <!--                <td>-->
          <!--                  <el-input v-model="roleForm.name" readonly></el-input>-->
          <!--                </td>-->
          <!--              </tr>-->
          <!--              <tr>-->
          <!--                <td>可操作功能列表</td>-->
          <!--                <td>-->
          <!--                  <el-tree v-loading="loading" :data="treedata" ref="funTree" show-checkbox accordion node-key="sid"-->
          <!--                           :default-expand-all='true'-->
          <!--                           :default-checked-keys="checkedId" :props="defaultProps" @check-change="checkchange">-->
          <!--                  </el-tree>-->
          <!--                </td>-->
          <!--              </tr>-->
          <!--            </table>-->
          <!--            <div slot="footer" class="text-center">-->
          <!--              <el-button type="primary" @click="funSave">保 存</el-button>-->
          <!--              <el-button @click="funDialog = false">关 闭</el-button>-->
          <!--            </div>-->
          <!--          </el-dialog>-->
          <!-- 菜单授权 -->
          <!--          <el-dialog title="菜单授权" :visible.sync="roleDialog" width="50%">-->
          <!--            <table class="e-table" cellspacing="0">-->
          <!--              <tr>-->
          <!--                <td>角色名称</td>-->
          <!--                <td>-->
          <!--                  <el-input v-model="roleForm.name" readonly></el-input>-->
          <!--                </td>-->
          <!--              </tr>-->
          <!--              <tr>-->
          <!--                <td>可操作菜单列表</td>-->
          <!--                <td>-->
          <!--                  <div style="height:230px;line-height:120px;overflow:auto;overflow-x:hidden;">-->
          <!--                    <el-tree v-loading="loading" :data="treedata" ref="Tree" show-checkbox accordion node-key="sid"-->
          <!--                             :default-expand-all='true'-->
          <!--                             :default-checked-keys="checkedId"-->
          <!--                             :props="defaultProps"-->
          <!--                             @check-change="checkchange">-->
          <!--                    </el-tree>-->
          <!--                  </div>-->
          <!--                </td>-->
          <!--              </tr>-->
          <!--            </table>-->
          <!--            <div slot="footer" class="text-center">-->
          <!--              <el-button type="primary" @click="getCheckedKeys">保 存</el-button>-->
          <!--              <el-button @click="roleDialog = false">关 闭</el-button>-->
          <!--            </div>-->
          <!--          </el-dialog>-->
          <el-dialog title="移动端授权" :visible.sync="mobileDialog" width="50%">
            <table class="e-table" cellspacing="0">
              <tr>
                <td>角色名称</td>
                <td>
                  <el-input v-model="roleForm.name" readonly></el-input>
                </td>
              </tr>
              <tr>
                <td>可操作菜单列表</td>
                <td>
                  <div style="height:230px;overflow:auto;overflow-x:hidden;">
                    <el-tree v-loading="loading" :data="treedata" ref="mobileTree" show-checkbox accordion
                      node-key="sid" :default-expand-all="true" :default-checked-keys="checkedId" :props="defaultProps"
                      @check-change="checkchange">
                    </el-tree>
                  </div>
                </td>
              </tr>
            </table>
            <div slot="footer" class="text-center">
              <el-button type="primary" @click="getCheckedMobile">保 存</el-button>
              <el-button @click="mobileDialog = false">关 闭</el-button>
            </div>
          </el-dialog>

          <el-dialog title="角色授权" :visible.sync="charactarDialog" width="70%" :before-close="dialogClose">
            <el-tabs v-model="charactarName" type="card" style="margin-top: -30px;" @tab-click="handleCharactar">
              <el-tab-pane label="菜单权限" name="first">
                <table class="e-table" cellspacing="0">
                  <tr>
                    <td>角色名称</td>
                    <td>
                      <div style="display: flex;flex-direction: row;align-items: center;">
                        <el-input v-model="roleForm.name" readonly style="flex: 6;"></el-input>
                        <el-checkbox style="flex: 1;margin-left: 50px;" v-model="checkStrictly">父子级联动</el-checkbox>
                      </div>

                    </td>
                  </tr>
                  <tr>
                    <td>可操作菜单列表</td>
                    <td>
                      <div style="height:230px;overflow:auto;overflow-x:hidden;">
                        <el-tree v-loading="loading" :data="treedata" ref="Tree" show-checkbox accordion node-key="sid"
                          :default-checked-keys="checkedId" :props="defaultProps" @check-change="checkchange"
                          :check-strictly="!checkStrictly">
                        </el-tree>
                      </div>
                    </td>
                  </tr>
                </table>
                <div style="margin-top: 10px" class="text-center">
                  <el-button type="primary" @click="getCheckedKeys">保 存</el-button>
                  <el-button @click="dialogClose">关 闭</el-button>
                </div>
              </el-tab-pane>
              <!-- <el-tab-pane label="功能权限" name="second">
                <table class="e-table" cellspacing="0">
                  <tr>
                    <td>角色名称</td>
                    <td>
                      <el-input v-model="roleForm.name" readonly></el-input>
                    </td>
                  </tr>
                  <tr>
                    <td>可操作功能列表</td>
                    <td>
                      <div style="height:230px;line-height:120px;overflow:auto;overflow-x:hidden;">
                        <el-tree v-loading="loading" :data="treedata" ref="funTree" show-checkbox accordion node-key="sid"
                                 :default-checked-keys="checkedId" :props="defaultProps" @check-change="checkchange">
                        </el-tree>
                      </div>
                    </td>
                  </tr>
                </table>
                <div style="margin-top: 10px" class="text-center">
                  <el-button type="primary" @click="funSave">保 存</el-button>
                  <el-button @click="charactarDialog = false">关 闭</el-button>
                </div>
              </el-tab-pane>
              <el-tab-pane label="数据权限" name="third">
                <el-form :model="formobj" class="formadd">
                  <el-row style="border-top: 1px solid #E0E3EB">
                    <el-col :span="6" class="tleftb">
                      <span>角色名称</span>
                    </el-col>
                    <el-col :span="18">
                      <el-form-item>
                        <span>{{ formobj.name }}</span>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="6" class="tleftb">
                      <span>菜单名称名称</span>
                    </el-col>
                    <el-col :span="18">
                      <el-form-item>
                        <el-input v-model="formobj.title" clearable placeholder="" style="width: 30%"/>
                        <el-button style="margin-left: 10px" type="primary" size="small" @click="handleSelect">查询</el-button>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-table :key="tableKey" :data="formobj.tableData" :index="index" border style="width: 100%" max-height="300">
                    <el-table-column type="index" label="序号" :index="index + 1" width="80" align="center">
                    </el-table-column>
                    <el-table-column prop="name" label="菜单名称" header-align="center" align="left">
                    </el-table-column>
                    <el-table-column label="权限" align="center" width="450">
                      <template slot-scope="scope">
                        <el-radio-group v-model="scope.row.dataRuleId">
                          <el-radio label="1">集团</el-radio>
                          <el-radio label="2">事业部</el-radio>
                          <el-radio label="3">分公司</el-radio>
                          <el-radio label="4">部门</el-radio>
                          <el-radio label="5">个人</el-radio>
                        </el-radio-group>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-form>
                <div style="margin-top: 10px" class="text-center">
                  <el-button type="primary" @click="handleSave">保 存</el-button>
                  <el-button @click="charactarDialog = false">关 闭</el-button>
                </div>
              </el-tab-pane> -->
            </el-tabs>
          </el-dialog>
        </div>
      </el-tab-pane>
      <!-- 新增角色 -->
      <el-tab-pane label="新增角色" name="addrole">
        <el-card class="box-card">
          <table class="e-table" cellspacing="0">
            <!-- <tr>
              <td>岗位</td>
              <td>
                <el-select v-model="roleForm.postSid" filterable style="width:300px" @change="changePost">
                  <el-option v-for="item in postSidData" :key="item.sid" :label="item.name" :value="item.sid"></el-option>
                </el-select>
              </td>
            </tr> -->
            <tr>
              <td>角色名称</td>
              <td>
                <el-input v-model="roleForm.name" style="width:300px"></el-input>
              </td>
            </tr>
            <tr>
              <td>编码</td>
              <td>
                <el-input v-model="roleForm.code" style="width:300px"></el-input>
              </td>
            </tr>
            <tr>
              <td>数据权限</td>
              <td>
                <el-select v-model="roleForm.dataRuleId" style="width:300px">
                  <el-option v-for="item in dataRuleId_list" :key="item.sid" :label="item.name"
                    :value="item.sid"></el-option>
                </el-select>
              </td>
            </tr>
            <!-- <tr>
              <td>组织层级</td>
              <td>
                <el-select v-model="roleForm.roleTypeValue" style="width:300px" @change="changeOrgName">
                  <el-option v-for="item in roleTypeValue_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictValue"></el-option>
                </el-select>
              </td>
            </tr> -->
            <tr>
              <td>排序</td>
              <td>
                <el-input v-model="roleForm.sort" style="width:300px"></el-input>
              </td>
            </tr>
            <tr>
              <td>备注</td>
              <td>
                <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6}" v-model="roleForm.remarks"></el-input>
              </td>
            </tr>
          </table>
          <div style="margin-top: 20px; text-align: center;">
            <el-button type="primary" @click="save()">保 存</el-button>
          </div>
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import {
    delOrgroles,
    funMenuTree,
    postList,
    putOrgroles,
    roleMenuTree,
    roleOrgList,
    getRoleMenuList,
    saveRoleMenuList,
    savefunMenu,
    saveorgrolemenus,
    saveOrgroles,
    saveSource,
    setRoleEnable,
    sourceMenuTree,
    typeValues,
    selMenuByRole,
    updateDataByRoleMenu
  } from '@/api/system/roleAdminister/index.js'

  export default {
    data() {
      return {
        dialogTitle: '',
        activeName: 'roleList',
        roleForm: {
          name: '',
          code: '',
          sort: '',
          type: '2',
          postSid: '',
          remarks: '',
          roleType: '',
          roleTypeValue: '',
          dataRuleId: '',
          orgSid: window.sessionStorage.getItem('orgSid')
        },
        formBackup: {},
        search: {
          name: '',
          orgSid: window.sessionStorage.getItem('orgSid')
        },
        page: {
          total: 0, // 默认数据总数
          current: 1, // 默认开始页面
          size: 10 // 每页的数据条数
        },
        roleTable: [],
        postSidData: [],
        roleTypeValue_list: [], // 组织层级
        editDialog: false,
        // 树形
        loading: false,
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        checkedId: [], // 菜单授权 已选中
        treedata: [], // 菜单授权
        chace: [],
        roleDialog: false,
        Thisrow: {},
        // 资源授权
        sourceDialog: false,
        sourcetreedata: [],
        sourcedefaultProps: {
          children: 'children',
          label: 'sourceName'
        },
        // 功能授权
        funDialog: false,
        // 移动端授权
        mobileDialog: false,
        // 角色授权（包含功能权限、菜单权限、数据权限）
        charactarDialog: false,
        charactarName: '',
        tableKey: 0,
        index: 0,
        formobj: {
          name: '',
          title: '',
          tableData: []
        },
        dataRuleId_list: [{
            name: "全部数据",
            sid: "1"
          },
          {
            name: "部门及子部门数据",
            sid: "2"
          },
          {
            name: "本部门数据",
            sid: "3"
          },
          {
            name: "本人",
            sid: "4"
          }
        ],
        checkStrictly: true, //   true 父子节点不关联

      }
    },
    mounted() {
      this.formBackup = Object.assign({}, this.roleForm)
      this.getroleOrgList()
      this.getPostList()
      this.getType()
    },
    methods: {
      pagination(val) { // 分页函数
        this.page.current = val.pageNum
        this.page.size = val.pageSize
        this.getroleOrgList()
      },
      getPostList() {
        postList().then((res) => {
          if (res.success) {
            this.postSidData = res.data
          }
        })
      },
      getType() {
        typeValues({
          type: 'roleType'
        }).then((res) => {
          if (res.success) {
            this.roleTypeValue_list = res.data
            console.log('下拉框请求组织层级', res.data)
          }
        })
      },
      // 分页列表
      getroleOrgList(flag) {
        if (flag == '1') {
          this.page.current = 1
        }
        let params = this.page
        params.params = this.search
        roleOrgList(params).then(res => {
          this.page.total = res.data.total
          this.roleTable = res.data.records
          for (let i = 0; i < this.roleTable.length; i++) {
            if (this.roleTable[i].isEnable == '1') {
              this.roleTable[i].isEnableName = '是'
            } else {
              this.roleTable[i].isEnableName = '否'
            }
          }
        })
      },
      changeOrgName(value) {
        const choosetItem = this.roleTypeValue_list.filter((item) => item.dictValue === value)
        this.roleForm.roleType = choosetItem[0].dictKey
        console.log('组织层级', this.roleForm.roleType, this.roleForm.roleTypeValue)
      },
      changePost(value) {
        const choosetItem = this.postSidData.filter((item) => item.sid === value)
        this.roleForm.name = choosetItem[0].name
      },
      handleClick(tab, event) {
        if (tab.name == 'addrole') {
          this.dialogTitle = '新增'
          this.roleForm = Object.assign({}, this.formBackup)
        } else {
          this.getroleOrgList()
        }
      },
      handleCharactar(tab) {
        if (tab.name === 'first') {
          this.roleMenus(this.Thisrow)
        } else if (tab.name === 'second') {
          this.funMenus(this.Thisrow)
        } else if (tab.name === 'third') {
          this.formobj.name = this.Thisrow.name
          selMenuByRole({
            roleSid: this.Thisrow.sid,
            menuName: this.formobj.title
          }).then((res) => {
            if (res.success) {
              this.formobj.tableData = res.data
            }
          })
        }
      },
      handleSelect() {
        selMenuByRole({
          roleSid: this.Thisrow.sid,
          menuName: this.formobj.title
        }).then((res) => {
          if (res.success) {
            this.formobj.tableData = res.data
          }
        })
      },
      handleSave() {
        updateDataByRoleMenu(this.formobj.tableData).then((res) => {
          if (res.success) {
            this.formobj = {
              name: '',
              title: '',
              tableData: []
            }
            this.$message({
              showClose: true,
              type: 'success',
              message: '保存成功'
            })
            this.charactarDialog = false
          }
        })
      },
      editRow(row) {
        this.dialogTitle = '编辑'
        this.editDialog = true
        this.roleForm = Object.assign({}, row)
      },
      delRow(row) {
        this.$confirm('确定要删除该角色吗, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delOrgroles({
            sid: row.sid
          }).then((res) => {
            if (res.success) {
              this.getroleOrgList()
              this.$message({
                showClose: true,
                type: 'success',
                message: '删除成功!'
              })
            }
          })
        })
      },
      // 保存角色
      save() {
        if (this.roleForm.sid) {
          putOrgroles(this.roleForm).then((res) => {
            if (res.success) {
              this.getroleOrgList()
              this.editDialog = false
              this.$message({
                showClose: true,
                message: res.msg,
                type: 'success'
              })
            }
          })
        } else {
          saveOrgroles(this.roleForm).then((res) => {
            if (res.success) {
              this.$message({
                showClose: true,
                message: res.msg,
                type: 'success'
              })
              this.activeName = 'roleList'
              this.getroleOrgList()
            }
          })
        }
      },
      // 是否可用 按钮
      enabledChange(value, row) {
        setRoleEnable({
          sid: row.sid,
          isEnable: value
        }).then((res) => {
          if (res.success) {
            this.$message({
              showClose: true,
              type: 'success',
              message: res.msg
            })
          }
        })
      },
      sourceMenus(row) {
        this.sourceDialog = true
        this.checkedId = []
        this.roleForm.name = row.name
        this.Thisrow = row
        this.loading = true
        let params = {
          roleSid: row.sid,
          sourceSid: 'd936f1ba-03c3-11ec-bf08-48452053aa44'
        }
        sourceMenuTree(params).then(res => {
          let data1 = res.data
          for (let i = 0; i < data1.length; i++) {
            if (data1[i].checked == 0) {
              this.checkedId.push(data1[i].sid)
            }
          }
          this.treedata = res.data
          this.loading = false
        })
      },
      funMenus(row) {
        this.funDialog = true
        this.checkedId = []
        this.roleForm.name = row.name
        this.Thisrow = row
        this.loading = true
        let params = {
          roleSid: row.sid,
          sourceSid: 'd936f1ba-03c3-11ec-bf08-48452053aa44',
        }
        funMenuTree(params).then(res => {
          let data1 = res.data
          // 如果菜单有子级菜单，说明是父级菜单，父级菜单不可以直接赋值已选中状态
          for (let i = 0; i < data1.length; i++) {
            if (data1[i].children) {
              // data2各模块中的一级菜单
              let data2 = data1[i].children
              for (let j = 0; j < data2.length; j++) {
                // 如果一级菜单有子级菜单（二级菜单），就循环查看二级菜单有无子级菜单
                if (data2[j].children) {
                  // data3各模块中的二级菜单
                  const data3 = data2[j].children
                  for (let k = 0; k < data3.length; k++) {
                    // 如果二级菜单有子级菜单（三级菜单），就循环查看三级菜单有无子级菜单
                    if (data3[k].children) {
                      const data4 = data3[k].children
                      for (let l = 0; l < data4.length; l++) {
                        if (data4[l].checked == 0) {
                          this.checkedId.push(data4[l].sid)
                        }
                      }
                    }
                    // 如果二级菜单没有子级菜单（三级菜单），查看是否是选中状态
                    if (data3[k].children.length == 0 && data3[k].checked == 0) {
                      this.checkedId.push(data3[k].sid)
                    }
                  }
                }
                // 如果一级菜单没有子级菜单（二级菜单），查看是否是选中状态
                if (data2[j].children.length == 0 && data2[j].checked == 0) {
                  this.checkedId.push(data2[j].sid)
                }
              }
            }
          }
          // for (let i = 0; i < data1.length; i++) {
          //   if (data1[i].checked == 0) {
          //     this.checkedId.push(data1[i].sid)
          //   }
          //   for (let j = 0; j < data1[i].children.length; j++) {
          //     let data2 = data1[i].children
          //     if (data2[j].checked == 0) {
          //       this.checkedId.push(data2[j].sid)
          //     }
          //     for (let k = 0; k < data2[j].children.length; k++) {
          //       let data3 = data2[j].children
          //       if (data3[k].checked == 0) {
          //         this.checkedId.push(data3[k].sid)
          //       }
          //     }
          //   }
          // }
          this.treedata = res.data
          this.loading = false
        })
      },
      // 获取授权菜单树形
      roleMenus(row) {
        this.roleDialog = true
        this.checkedId = []
        this.roleForm.name = row.name
        this.Thisrow = row
        this.loading = true
        let params = {
          roleSid: row.sid,
          sourceSid: 'd936f1ba-03c3-11ec-bf08-48452053aa44',
          orgSid: window.sessionStorage.getItem('orgSid')
        }
        roleMenuTree(params).then(res => {
          let data1 = res.data
          // 如果菜单有子级菜单，说明是父级菜单，父级菜单不可以直接赋值已选中状态
          for (let i = 0; i < data1.length; i++) {
            if (data1[i].children) {
              // data2各模块中的一级菜单
              let data2 = data1[i].children
              for (let j = 0; j < data2.length; j++) {
                // 如果一级菜单有子级菜单（二级菜单），就循环查看二级菜单有无子级菜单
                if (data2[j].children) {
                  // data3各模块中的二级菜单
                  const data3 = data2[j].children
                  for (let k = 0; k < data3.length; k++) {
                    // 如果二级菜单有子级菜单（三级菜单），就循环查看三级菜单有无子级菜单
                    if (data3[k].children) {
                      const data4 = data3[k].children
                      for (let l = 0; l < data4.length; l++) {
                        if (data4[l].checked == 0) {
                          this.checkedId.push(data4[l].sid)
                        }
                      }
                    }
                    // 如果二级菜单没有子级菜单（三级菜单），查看是否是选中状态
                    if (data3[k].children.length == 0 && data3[k].checked == 0) {
                      this.checkedId.push(data3[k].sid)
                    }
                  }
                }
                // 如果一级菜单没有子级菜单（二级菜单），查看是否是选中状态
                if (data2[j].children.length == 0 && data2[j].checked == 0) {
                  this.checkedId.push(data2[j].sid)
                }
              }
            }
          }
          // for (let i = 0; i < data1.length; i++) {
          //   if (data1[i].checked == 0) {
          //     this.checkedId.push(data1[i].sid)
          //   }
          //   for (let j = 0; j < data1[i].children.length; j++) {
          //     let data2 = data1[i].children
          //     if (data2[j].checked == 0) {
          //       this.checkedId.push(data2[j].sid)
          //     }
          //     for (let k = 0; k < data2[j].children.length; k++) {
          //       let data3 = data2[j].children
          //       if (data3[k].checked == 0) {
          //         this.checkedId.push(data3[k].sid)
          //       }
          //     }
          //   }
          // }
          console.log('112233', this.checkedId)
          this.treedata = res.data
          this.getTreeParentNode(res.data, this.checkedId)
          this.getTreeParentid(res.data)
          this.loading = false
        })
      },
      mobileMenus(row) {
        this.mobileDialog = true
        this.checkedId = []
        this.roleForm.name = row.name
        this.Thisrow = row
        this.loading = true
        getRoleMenuList(row.sid).then(res => {
          let data1 = res.data
          // 如果菜单有子级菜单，说明是父级菜单，父级菜单不可以直接赋值已选中状态
          for (let i = 0; i < data1.length; i++) {
            if (data1[i].children) {
              // data2各模块中的一级菜单
              let data2 = data1[i].children
              for (let j = 0; j < data2.length; j++) {
                // 如果一级菜单有子级菜单（二级菜单），就循环查看二级菜单有无子级菜单
                if (data2[j].children) {
                  // data3各模块中的二级菜单
                  const data3 = data2[j].children
                  for (let k = 0; k < data3.length; k++) {
                    // 如果二级菜单有子级菜单（三级菜单），就循环查看三级菜单有无子级菜单
                    if (data3[k].children) {
                      const data4 = data3[k].children
                      for (let l = 0; l < data4.length; l++) {
                        if (data4[l].checked == 0) {
                          this.checkedId.push(data4[l].sid)
                        }
                      }
                    }
                    // 如果二级菜单没有子级菜单（三级菜单），查看是否是选中状态
                    if (data3[k].children.length == 0 && data3[k].checked == 0) {
                      this.checkedId.push(data3[k].sid)
                    }
                  }
                }
                // 如果一级菜单没有子级菜单（二级菜单），查看是否是选中状态
                if (data2[j].children.length == 0 && data2[j].checked == 0) {
                  this.checkedId.push(data2[j].sid)
                }
              }
            }
          }
          // for (let i = 0; i < data1.length; i++) {
          //   if (data1[i].checked == 0) {
          //     this.checkedId.push(data1[i].sid)
          //   }
          //   for (let j = 0; j < data1[i].children.length; j++) {
          //     let data2 = data1[i].children
          //     if (data2[j].checked == 0) {
          //       this.checkedId.push(data2[j].sid)
          //     }
          //     for (let k = 0; k < data2[j].children.length; k++) {
          //       let data3 = data2[j].children
          //       if (data3[k].checked == 0) {
          //         this.checkedId.push(data3[k].sid)
          //       }
          //     }
          //   }
          // }
          console.log('112233', this.checkedId)
          this.treedata = res.data
          this.getTreeParentNode(res.data, this.checkedId)
          // this.getTreeParentid(res.data)
          this.loading = false
        })
      },
      charactarMenus(row) {
        this.charactarDialog = true
        this.charactarName = 'first'
        this.Thisrow = row
        this.roleMenus(row)
      },
      // 递归查询所有上级数据
      getTreeParentNode(menus, ids) {
        for (var i = 0; i < menus.length; i++) {
          if (menus[i].children && menus[i].children.length !== 0) {
            this.getTreeParentNode(menus[i].children, ids)
          } else if (menus[i].isCheck) {
            ids.push(menus[i].sid)
          }
        }
      },
      // 所有一级菜单ID
      getTreeParentid(menus) {
        for (var i = 0; i < menus.length; i++) {
          this.chace.push(menus[i].sid)
        }
      },
      // 设置半选状态
      setHalfCheckedNodes(sid) {
        const node = this.$refs['Tree'].getNode(sid)
        console.log('11111', sid)
        console.log('11111', node)
        if (node) { // 此处应判断当前节点的checked属性是否为true，是则不必半选
          node.indeterminate = true
        }
      },
      //    资源授权保存
      sourceSave() {
        let sourceMenus = this.$refs.sourceTree.getCheckedKeys()
        let params = {
          sorceSid: sourceMenus.toString(),
          roleSid: this.Thisrow.sid
        }
        saveSource(params).then(res => {
          this.sourceDialog = false
          this.$message({
            message: res.msg,
            type: 'success'
          })
        })
      },
      //    功能授权保存
      funSave() {
        let funMenus = []
        funMenus = this.$refs.funTree.getCheckedNodes(false, true)
        // funMenus = this.$refs.Tree.getCheckedKeys()
        console.log('已选节点、半选节点node', funMenus)
        const funMenus_sid = []
        for (var i = 0; i < funMenus.length; i++) {
          funMenus_sid.push(funMenus[i].sid)
        }
        console.log('已选节点、半选节点sid', funMenus_sid)
        // let funMenus = this.$refs.funTree.getCheckedKeys()
        // let params = {
        //   functionSid: funMenus.toString(),
        //   roleSid: this.Thisrow.sid
        // }
        let params = {
          functionSid: funMenus_sid.toString(),
          roleSid: this.Thisrow.sid
        }
        savefunMenu(params).then(res => {
          this.funDialog = false
          this.charactarDialog = false
          this.$message({
            message: res.msg,
            type: 'success'
          })
        })
      },
      dialogClose() {
        this.charactarDialog = false
        this.checkStrictly = true
      },
      //    菜单授权
      getCheckedKeys() {
        let roleMenus = []
        roleMenus = this.$refs.Tree.getCheckedNodes(false, true)
        // roleMenus = this.$refs.Tree.getCheckedKeys()
        console.log('已选节点、半选节点node', roleMenus)
        const roleMenus_sid = []
        for (var i = 0; i < roleMenus.length; i++) {
          roleMenus_sid.push(roleMenus[i].sid)
        }
        console.log('已选节点、半选节点sid', roleMenus_sid)
        // let parentTrue = this.$refs.Tree.getHalfCheckedKeys()
        // for (let i = 0; i < parentTrue.length; i++) {
        //   for (let j = 0; j < this.chace.length; j++) {
        //     if (parentTrue[i] == this.chace[j]) {
        //       parentTrue.splice(i, 1);
        //     }
        //   }
        // }
        let params = {
          menuSid: roleMenus_sid.toString(),
          roleSid: this.Thisrow.sid,
          sourceSid: "d936f1ba-03c3-11ec-bf08-48452053aa44"
        }
        saveorgrolemenus(params).then(res => {
          this.roleDialog = false
          this.charactarDialog = false
          this.checkStrictly = true
          this.$message({
            message: res.msg,
            type: 'success'
          })
        })
      },
      getCheckedMobile() {
        let roleMenus = []
        roleMenus = this.$refs.mobileTree.getCheckedNodes(false, true)
        // roleMenus = this.$refs.Tree.getCheckedKeys()
        console.log('已选节点、半选节点node', roleMenus)
        const roleMenus_sid = []
        for (var i = 0; i < roleMenus.length; i++) {
          roleMenus_sid.push(roleMenus[i].sid)
        }
        console.log('已选节点、半选节点sid', roleMenus_sid)
        // let parentTrue = this.$refs.Tree.getHalfCheckedKeys()
        // for (let i = 0; i < parentTrue.length; i++) {
        //   for (let j = 0; j < this.chace.length; j++) {
        //     if (parentTrue[i] == this.chace[j]) {
        //       parentTrue.splice(i, 1);
        //     }
        //   }
        // }
        let params = {
          menuSid: roleMenus_sid.toString(),
          roleSid: this.Thisrow.sid
        }
        saveRoleMenuList(params).then((res) => {
          if (res.success) {
            this.mobileDialog = false
            this.$message({
              showClose: true,
              message: res.msg,
              type: 'success'
            })
          }
        })
      },
      checkchange() {

      }
    }
  }
</script>

<style scoped>
  .my-tabs {
    margin-top: 10px;
  }
</style>
