<template>
  <div>
    <div class="menu-tab">
      <el-tabs type="border-card" v-model="activeName">
        <!-- 菜单表 start -->
        <el-tab-pane label="菜单表" name="menu">
          <div class="app-container">
            <el-form  :inline="true">
              <el-form-item label="菜单名称:">
                <el-input
                  v-model="menuQuery.menuName"
                  style="width: 160px"
                  placeholder="请输入菜单名称"
                  clearable
                ></el-input>
              </el-form-item>
              <el-form-item class="right">
                <el-button plain size="mini" @click="resetQuery">重置</el-button>
                <el-button type="primary" size="mini" @click="getMenuData()"
                  >搜索</el-button
                >
              </el-form-item>
              <br />
              <el-button type="primary" size="mini" @click="menuAdd()"
                >新增</el-button
              >
            </el-form>
            <el-table
              v-if="menuTable"
              v-loading="loading"
              :data="menuListData"
              row-key="menuId"
              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
              style="margin-top: 20px"
              border
            >
              <el-table-column
                prop="menuName"
                label="菜单名称"
                show-overflow-tooltip
                width="160"
              ></el-table-column>
              <el-table-column
                prop="icon"
                label="图标"
                align="center"
                width="100"
              >
                <template slot-scope="scope">
                  <svg-icon :icon-class="scope.row.icon" />
                </template>
              </el-table-column>
              <el-table-column
                prop="orderNum"
                label="排序"
                width="60"
              ></el-table-column>
              <el-table-column
                prop="perms"
                label="权限标识"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="url"
                label="组件路径"
                show-overflow-tooltip
              ></el-table-column>
              <!-- <el-table-column prop="visible" label="状态" :formatter="statusFormat" width="80">
                <template slot-scope="scope">
                  {{scope.row.visible == "0" ? "启用" : scope.row.visible == "1" ? "停止" : ""}}
                </template>
              </el-table-column> -->
              <el-table-column
                prop="createTime"
                label="创建时间"
                align="center"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                label="操作"
                align="center"
                class-name="small-padding fixed-width"
              >
                <template slot-scope="scope">
                  <el-button
                   class="lans"
                    @click="menuUpdate(scope.row)"
                    >修改</el-button
                  >
                  <el-button
                    class="hongs"
                    @click="menuDelete(scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <!-- 添加或修改菜单对话框 -->
            <el-dialog
              :title="menutitle"
              :visible.sync="dialogFormVisible1"
              width="680px"
            >
              <el-form
                ref="form"
                :model="menuForm"
                :rules="menuRules"
                label-width="100px"
              >
                <el-row>
                  <el-col :span="18">
                    <el-form-item label="上级菜单">
                      <treeselect
                        v-model="menuForm.parentId"
                        :options="menuOptions"
                        :normalizer="normalizer"
                        :show-count="true"
                        placeholder="选择上级菜单"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="菜单类型" prop="menuType">
                      <el-radio-group
                        v-model="menuForm.menuType"
                        style="margin-top: -10px"
                      >
                        <el-radio label="M">目录</el-radio>
                        <el-radio label="C">菜单</el-radio>
                        <el-radio label="F">按钮</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col :span="18">
                    <el-form-item
                      v-if="menuForm.menuType != 'F'"
                      label="菜单图标"
                    >
                      <el-popover
                        placement="bottom-start"
                        width="460"
                        trigger="click"
                        @show="$refs['iconSelect'].reset()"
                      >
                        <IconSelect ref="iconSelect" @selected="selected" />
                        <el-input
                          slot="reference"
                          v-model="menuForm.icon"
                          placeholder="点击选择图标"
                          readonly
                        >
                          <svg-icon
                            v-if="menuForm.icon"
                            slot="prefix"
                            :icon-class="menuForm.icon"
                            class="el-input__icon"
                            style="height: 32px; width: 16px"
                          />
                          <!-- <i
                            v-else
                            slot="prefix"
                            class="el-icon-search el-input__icon"
                          /> -->
                        </el-input>
                      </el-popover>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="菜单名称" prop="menuName">
                      <el-input
                        v-model="menuForm.menuName"
                        placeholder="请输入菜单名称"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="显示排序" prop="orderNum">
                      <el-input-number
                        v-model="menuForm.orderNum"
                        controls-position="right"
                        :min="0"
                        onkeypress="javascript:return false"
                        type="number"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      v-if="menuForm.menuType != 'F'"
                      prop="url"
                      width="120"
                    >
                      <span slot="label">
                        <el-tooltip
                          content="访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头"
                          placement="top"
                        >
                          <i class="el-icon-question"></i>
                        </el-tooltip>
                        路由地址
                      </span>
                      <el-input
                        v-model="menuForm.url"
                        placeholder="请输入路由地址"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" v-if="menuForm.menuType == 'C'">
                    <el-form-item prop="component">
                      <span slot="label">
                        <el-tooltip
                          content="访问的组件路径，如：`system/user/index`，默认在`views`目录下"
                          placement="top"
                        >
                          <i class="el-icon-question"></i>
                        </el-tooltip>
                        组件路径
                      </span>
                      <el-input
                        v-model="menuForm.component"
                        placeholder="请输入组件路径"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item v-if="menuForm.menuType != 'M'">
                      <el-input
                        v-model="menuForm.perms"
                        placeholder="请输入权限标识"
                        maxlength="100"
                      />
                      <span slot="label">
                        <el-tooltip
                          content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasPermi('system:user:list')`)"
                          placement="top"
                        >
                          <i class="el-icon-question"></i>
                        </el-tooltip>
                        权限字符
                      </span>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button
                  type="primary"
                  @click="menuSubmitForm()"
                  v-if="!loading"
                  >确 定</el-button
                >
                <el-button :loading="loading" type="primary" v-else
                  >提交中...</el-button
                >
                <el-button @click="cancel" plain>取 消</el-button>
              </div>
            </el-dialog>
          </div>
        </el-tab-pane>
        <!-- 菜单表 end-->

        <!-- 角色表 start-->
        <el-tab-pane label="角色表" name="role">
          <div class="app-container">
            <el-form  :inline="true">
              <el-form-item label="角色名称:">
                <el-input
                  v-model="roleListQuery.roleName"
                  placeholder="请输入角色名称"
                  style="width: 160px"
                  clearable
                ></el-input>
              </el-form-item>
              <el-form-item class="right">
                <el-button plain size="mini" @click="resetQuery"
                  >重置</el-button
                >
                <el-button type="primary" size="mini" @click="roleQuery()"
                  >搜索</el-button
                >
              </el-form-item>
              <br />
              <el-button type="primary" size="mini" @click="roleEditOrAdd('add')"
                >新增</el-button
              >
            </el-form>
            <!-- <el-divider></el-divider> -->
            <el-table
              v-loading="loading"
              :data="roleListAdmin"
              style="margin-top: 20px"
              border
            >
              <el-table-column label="角色编号" prop="roleId" />
              <el-table-column
                label="角色名称"
                prop="roleName"
                show-overflow-tooltip
              />
              <el-table-column
                label="权限字符"
                prop="roleKey"
                show-overflow-tooltip
              />
              <el-table-column
                label="显示顺序"
                prop="roleSort"
                show-overflow-tooltip
              />
              <el-table-column label="状态" align="center">
                <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.status"
                    active-value="0"
                    inactive-value="1"
                    @change="handleStatusChange(scope.row)"
                  ></el-switch>
                </template>
              </el-table-column>
              <el-table-column
                label="备注"
                prop="remark"
                show-overflow-tooltip
              />
              <el-table-column
                label="创建时间"
                align="center"
                prop="createTime"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                label="操作"
                align="center"
                class-name="small-padding fixed-width"
              >
                <template slot-scope="scope" v-if="scope.row.roleId !== 1">
                  <el-button
                    class="lans"
                    @click="roleEditOrAdd('edit', scope.row)"
                    >修改</el-button
                  >
                  <el-button
                    class="hongs"
                    @click="roleRemove(scope.row)"
                    >删除</el-button
                  >
                  <!-- <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-circle-check"
                    @click="handleDataScope(scope.row)"
                    v-hasPermi="['system:role:edit']"
                  >数据权限</el-button> -->
                </template>
              </el-table-column>
            </el-table>

            <!-- 添加或修改角色配置对话框 -->
            <el-dialog
              :title="roleTitle"
              class="roleDialog"
              :visible.sync="dialogFormVisible2"
              width="680px"
            >
              <el-form
                ref="roleForm"
                :model="roleForm"
                :rules="roleRules"
                label-width="100px"
                class="roleform"
              >
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="角色名称" prop="roleName" width="80%">
                      <el-input
                        v-model="roleForm.roleName"
                        placeholder="请输入角色名称"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item prop="roleKey">
                      <span slot="label">
                        <el-tooltip
                          content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasRole('admin')`)"
                          placement="top"
                        >
                          <i class="el-icon-question"></i>
                        </el-tooltip>
                        权限字符
                      </span>
                      <el-input
                        v-model="roleForm.roleKey"
                        placeholder="请输入权限字符"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="角色顺序" prop="roleSort">
                      <el-input-number
                        v-model="roleForm.roleSort"
                        controls-position="right"
                        :min="0"
                        style="width: 170px"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="状态">
                      <el-radio-group
                        v-model="roleForm.status"
                        style="margin-top: -10px"
                      >
                        <el-radio
                          v-for="dict in statusOptions"
                          :key="dict.dictValue"
                          :label="dict.dictValue"
                          >{{ dict.dictLabel }}</el-radio
                        >
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="菜单权限">
                      <el-checkbox
                        v-model="menuExpand"
                        @change="handleCheckedTreeExpand($event, 'menu')"
                        >展开/折叠</el-checkbox
                      >
                      <el-checkbox
                        v-model="menuNodeAll"
                        @change="handleCheckedTreeNodeAll($event, 'menu')"
                        >全选/全不选</el-checkbox
                      >
                      <el-checkbox
                        v-model="roleForm.menuCheckStrictly"
                        @change="handleCheckedTreeConnect($event, 'menu')"
                        >父子联动</el-checkbox
                      >
                      <el-tree
                        class="tree-border"
                        :data="menuOptions"
                        show-checkbox
                        ref="menu"
                        node-key="id"
                        :check-strictly="!roleForm.menuCheckStrictly"
                        empty-text="加载中，请稍后"
                        :props="defaultProps"
                      ></el-tree>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="备注">
                      <el-input
                        v-model="roleForm.remark"
                        type="textarea"
                        placeholder="请输入内容"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="roleSubmit" v-if="!loading"
                  >确 定</el-button
                >
                <el-button :loading="loading" type="primary" v-else
                  >提交中...</el-button
                >
                <el-button @click="cancel" plain>取 消</el-button>
              </div>
            </el-dialog>
          </div>
        </el-tab-pane>
        <!-- 角色表 end-->
      </el-tabs>
    </div>
  </div>
</template>
<script>
import RoleDetails from "../components/RoleDetails";
import {
  menuList,
  menuAdd,
  menuEdit,
  menuRemove,
  roleList,
  roleAdd,
  roleListAll,
  roleEdit,
  roleRemove,
  roleMenuTree,
  treeselect,
  changeRoleStatus,
} from "@/api/system/auth-manage";
import { checkMaxVal } from "@/utils/validate";
import { Message, MessageBox } from "element-ui";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import IconSelect from "@/components/IconSelect";
export default {
  components: { RoleDetails, Treeselect, IconSelect },
  data() {
    return {
      menuTable: false,
      // 遮罩层
      loading: true,
      ss: false,
      menuAddForm: {
        //菜单新增
        icon: undefined,
        isCache: "0",
        isFrame: "1",
        menuId: undefined,
        menuName: undefined,
        menuType: undefined,
        orderNum: undefined,
        parentId: undefined,
        url: undefined,
        status: "0",
        visible: "0",
      },
      menuEditForm: {
        // 菜单修改
      },
      // 状态数据字典
      statusOptions: [
        { dictLabel: "正常", dictValue: "0" },
        { dictLabel: "停用", dictValue: "1" },
      ],

      menuListData: {}, //菜单初始化数据
      roleListQuery: {
        //角色初始化表格请求参数
        pageNo: 1,
        pageSize: 15,
        roleKey: undefined,
        roleName: undefined,
        status: undefined,
      },
      roleMenuChange: {
        //角色绑定菜单栏信息
        roleId: undefined,
        roleKey: undefined,
        roleName: undefined,
        status: 0,
        dataScope: 1,
        roleSort: 1,
        menuIds: undefined,
      },
      roledialog: {
        title: undefined,
        add: undefined,
      },

      activeName: "role",

      tableData: [],

      roleListAdmin: [],
      multipleSelection: [],
      multipleSelection2: [],

      options: [
        //菜单级别
        {
          value: "1",
          label: "一级",
        },
        {
          value: "2",
          label: "二级",
        },
      ],
      value: "",

      input: "",

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

      /**
       * 公用
       *
       */
      menuOptions: [],

      /**
       * 角色
       */
      // 是否显示弹出层
      open: false,
      // 是否显示弹出层（数据权限）
      openDataScope: false,
      menuExpand: false,
      menuNodeAll: false,
      deptExpand: true,
      deptNodeAll: false,
      dialogFormVisible2: false,
      defaultProps: {
        children: "children",
        label: "label",
      },
      roleQueryForm: {
        roleName: undefined,
      },
      roleForm: {
        roleId: undefined,
        roleName: undefined,
        roleKey: undefined,
        roleSort: 0,
        status: "0",
        menuIds: [],
        deptIds: [],
        menuCheckStrictly: true,
        deptCheckStrictly: true,
        remark: undefined,
        dataScope: 2,
      },
      roleRules: {
        roleName: [
          { required: true, message: "角色名称不能为空", trigger: "blur" },
        ],
        roleKey: [
          { required: true, message: "权限字符不能为空", trigger: "blur" },
        ],
        roleSort: [
          { required: true, message: "角色顺序不能为空", trigger: "blur" },
        ],
        // status:[
        //   { required: true, message: "角色状态不能为空", trigger: "blur" },
        // ]
      },

      /**
       * 菜单
       *
       */
      dialogFormVisible1: false,
      // 表单校验
      menuRules: {
        menuName: [
          { required: true, message: "菜单名称为空", trigger: "blur" },
        ],
        menuType: [
          { required: true, message: "菜单级别为空", trigger: "blur" },
        ],
        orderNum: [
          { required: true, message: "菜单顺序不能为空", trigger: "blur" },
          { validator: checkMaxVal, trigger: "blur" },
        ],
        url: [{ required: true, message: "访问地址不能为空", trigger: "blur" }],
        icon: [{ required: true, message: "图标不能为空", trigger: "blur" }],
      },
      menuQuery: {
        menuName: undefined,
      },
      menutitle: undefined,
      menuForm: {
        menuId: undefined,
        parentId: 0,
        menuName: undefined,
        icon: undefined,
        menuType: "M",
        orderNum: 0,
        isFrame: "1",
        isCache: "0",
        visible: "0",
        status: "0",
        children: undefined,
        params: undefined,
      },
      menuFormHC: {},
      roleTitle: undefined,
    };
  },
  watch: {
    activeName(val) {
      //监听切换状态-计划单
      this.tabChange();
    },
  },
  created() {
    if (localStorage.getItem("active")) {
      this.activeName = "menu";
      localStorage.removeItem("active");
    }
    this.tabChange();
  },
  mounted() {
    // // table高度
    // if (window.innerWidth < 1920) {
    //   this.tableHeight = window.innerHeight - 300;
    // } else {
    //   this.tableHeight = window.innerHeight - 295;
    // }
    // // 监听窗口大小变化
    // let self = this;
    // window.onresize = function () {
    //   self.tableHeight = window.innerHeight - 300;
    // };
  },
  methods: {
    /**
     * 菜单切换
     */
    tabChange() {
      if (this.activeName == "menu") {
        this.getMenuData();
      } else {
        this.getRoleData();
      }
    },
    //刷新当前页面
    urlShuaXin() {
      // let url = window.location.href
      location.reload();
    },

    /**
     * 角色操作
     *
     */
    // 表单重置
    roleReset() {
      if (this.$refs.menu != undefined) {
        this.$refs.menu.setCheckedKeys([]);
      }
      (this.menuExpand = false),
        (this.menuNodeAll = false),
        (this.deptExpand = true),
        (this.deptNodeAll = false),
        (this.roleForm = {
          roleId: undefined,
          roleName: undefined,
          roleKey: undefined,
          roleSort: 0,
          status: undefined,
          menuIds: [],
          deptIds: [],
          menuCheckStrictly: true,
          deptCheckStrictly: true,
          remark: undefined,
          dataScope: 2,
          params: undefined,
        }),
        (this.roleListQuery = {
          //角色初始化表格请求参数
          pageNo: 1,
          pageSize: 15,
          roleKey: undefined,
          roleName: undefined,
          status: undefined,
        });

      // this.resetForm("form");
    },

    /** 查询菜单树结构 */
    getMenuTreeselect() {
      treeselect().then((response) => {
        let arr = [];
        if (response.data) {
          for (let i = 0; i < response.data.length; i++) {
            arr[i] = {};
            arr[i].label = response.data[i].menuName;
            arr[i].id = response.data[i].menuId;
            if (response.data[i].children) {
              arr[i].children = [];
              for (let a = 0; a < response.data[i].children.length; a++) {
                arr[i].children[a] = {};
                arr[i].children[a].id = response.data[i].children[a].menuId;
                arr[i].children[a].label =
                  response.data[i].children[a].menuName;
                if (response.data[i].children[a].children) {
                  arr[i].children[a].children = [];
                  for (
                    let b = 0;
                    b < response.data[i].children[a].children.length;
                    b++
                  ) {
                    arr[i].children[a].children[b] = {};
                    arr[i].children[a].children[b].id =
                      response.data[i].children[a].children[b].menuId;
                    arr[i].children[a].children[b].label =
                      response.data[i].children[a].children[b].menuName;
                  }
                }
              }
            }
          }
          this.menuOptions = arr;
        }
        this.dialogFormVisible2 = true;
      });
    },
    // 所有菜单节点数据
    getMenuAllCheckedKeys() {
      // 目前被选中的菜单节点
      let checkedKeys = this.$refs.menu.getCheckedKeys();
      // 半选中的菜单节点
      let halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys();
      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
      return checkedKeys;
    },
    /** 根据角色ID查询菜单树结构 */
    getRoleMenuTreeselect(roleId) {
      return roleMenuTree(roleId).then((response) => {
        let arr = [];
        if (response.data.menus) {
          for (let i = 0; i < response.data.menus.length; i++) {
            arr[i] = {};
            arr[i].label = response.data.menus[i].menuName;
            arr[i].id = response.data.menus[i].menuId;
            if (response.data.menus[i].children) {
              arr[i].children = [];
              for (let a = 0; a < response.data.menus[i].children.length; a++) {
                arr[i].children[a] = {};
                arr[i].children[a].id =
                  response.data.menus[i].children[a].menuId;
                arr[i].children[a].label =
                  response.data.menus[i].children[a].menuName;
                if (response.data.menus[i].children[a].children) {
                  arr[i].children[a].children = [];
                  for (
                    let b = 0;
                    b < response.data.menus[i].children[a].children.length;
                    b++
                  ) {
                    arr[i].children[a].children[b] = {};
                    arr[i].children[a].children[b].id =
                      response.data.menus[i].children[a].children[b].menuId;
                    arr[i].children[a].children[b].label =
                      response.data.menus[i].children[a].children[b].menuName;
                  }
                }
              }
            }
          }
          this.menuOptions = arr;
          this.dialogFormVisible2 = true;
        }
        return response;
      });
    },
    handleCheckedTreeExpand(value, type) {
      if (type == "menu") {
        let treeList = this.menuOptions;
        for (let i = 0; i < treeList.length; i++) {
          this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value;
        }
      } else if (type == "dept") {
        let treeList = this.deptOptions;
        for (let i = 0; i < treeList.length; i++) {
          this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value;
        }
      }
    },
    // 树权限（全选/全不选）
    handleCheckedTreeNodeAll(value, type) {
      if (type == "menu") {
        this.$refs.menu.setCheckedNodes(value ? this.menuOptions : []);
      } else if (type == "dept") {
        this.$refs.dept.setCheckedNodes(value ? this.deptOptions : []);
      }
    },
    // 树权限（父子联动）
    handleCheckedTreeConnect(value, type) {
      if (type == "menu") {
        this.roleForm.menuCheckStrictly = value ? true : false;
      } else if (type == "dept") {
        this.roleForm.deptCheckStrictly = value ? true : false;
      }
    },
    menuHandleEdit(index, row) {
      this.menuEditForm = row;
      this.dialogFormVisible2 = true;
    },
    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);
          }
        }
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    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);
          }
        }
      }
    },
    handleSelectionChange2(val) {
      this.multipleSelection2 = val;
    },
    /**角色初始化数据 */
    getRoleData() {
      roleList(this.roleListQuery).then((Response) => {
        if (Response.data.pageList) {
          this.roleListAdmin = Response.data.pageList;
          this.loading = false;
        }
      });
    },
    //角色查询
    roleQuery() {
      this.getRoleData();
    },
    //角色编辑或新增
    roleEditOrAdd(type, row) {
      this.roleReset();
      if (type == "add") {
        this.roleTitle = "新增角色";
        this.roleForm.menuCheckStrictly = true;
        this.getMenuTreeselect();
      } else {
        const roleId = row.roleId || this.ids;
        const roleName = row.roleName;
        const roleMenu = this.getRoleMenuTreeselect(roleId);
        roleList({ roleName: roleName }).then((response) => {
          this.roleForm = response.data.pageList[0];
          this.roleForm.menuCheckStrictly = true;
          this.$nextTick(() => {
            roleMenu.then((res) => {
              let checkedKeys = res.data.checkedKeys;
              checkedKeys.forEach((v) => {
                this.$nextTick(() => {
                  this.$refs.menu.setChecked(v, true, false);
                });
              });
            });
          });
          this.roleTitle = "修改";
        });
      }
    },
    // 角色状态修改
    handleStatusChange(row) {
      let that = this;
      let text = row.status === "0" ? "启用" : "停用";
      this.$confirm(
        '确认要"' + text + '""' + row.roleName + '"角色吗?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(function () {
          const roleId = row.roleId || that.ids;
          const roleName = row.roleName;
          roleMenuTree(roleId).then((response) => {
            roleList({ roleName: roleName }).then((response2) => {
              let arr = [];
              arr = response2.data.pageList[0];
              arr.menuIds = response.data.checkedKeys;
              arr.params = undefined;
              arr.status = row.status;
              roleEdit(arr).then(() => {
                Message({
                  message: "角色'" + row.roleName + "'" + text + "成功",
                  type: "success",
                });
              });
            });
          });
        })
        .catch(function () {
          row.status = row.status === "0" ? "1" : "0";
        });
    },
    //角色删除
    roleRemove(row) {
      MessageBox.confirm("确定删除改角色？", "系统提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          roleRemove({ roleId: row.roleId }).then((Response) => {
            if (Response.status == "SUCCESS") {
              Message({
                message: "删除成功",
                type: "success",
              });
              this.getRoleData();
            }
          });
        })
        .catch(() => {});
    },
    roleSubmit() {
      //角色提交
      this.loading = true;
      this.roleForm.params = undefined;
      this.$refs["roleForm"].validate((valid) => {
        if (valid) {
          if (this.roleForm.roleId != undefined) {
            this.roleForm.menuIds = this.getMenuAllCheckedKeys();
            roleEdit(this.roleForm).then((Response) => {
              if (Response.status == "SUCCESS") {
                this.loading = false;
                Message({
                  message: "修改成功",
                  type: "success",
                });
                this.dialogFormVisible2 = false;
                this.getRoleData();
              }
            });
          } else {
            this.roleForm.menuIds = this.getMenuAllCheckedKeys();
            roleAdd(this.roleForm).then((Response) => {
              if (Response.status == "SUCCESS") {
                this.loading = false;
                Message({
                  message: "新增成功",
                  type: "success",
                });
                this.dialogFormVisible2 = false;
                this.getRoleData();
              }
            });
          }
        }
      });
    },
    menuSubmit() {
      //菜单提交
      if (this.dialogFormVisible1 == true) {
        menuAdd(this.menuAddForm).then((Response) => {
          if (Response.status == "SUCCESS") {
            Message({
              message: "添加成功",
              type: "success",
            });
          }
          this.dialogFormVisible1 = false;
        });
      } else {
        this.menuEditForm.params = undefined;
        menuEdit(this.menuEditForm).then((Response) => {
          if (Response.status == "SUCCESS") {
            Message({
              message: "修改成功",
              type: "success",
            });
            this.dialogFormVisible2 = false;
          }
        });
      }
    },
    menuRemove(id) {
      //菜单移除
      MessageBox.confirm("确定删除该菜单栏", "系统提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          menuRemove({ menuId: id }).then((Response) => {
            if (Response.status == "SUCCESS") {
              this.getMenuData();
            }
          });
        })
        .catch(() => {});
    },

    /**
     * 菜单操作
     *
     */
    /**获取菜单列表数据 */
    getMenuData() {
      menuList(this.menuQuery).then((Response) => {
        if (Response.data) {
          this.menuListData = this.handleTree(Response.data, "menuId");
          this.menuTable = true;
          this.loading = false;
        }
      });
    },
    /** 修改按钮操作 */
    menuUpdate(row) {
      this.menuFormReset();
      this.getTreeselect();
      this.menuFormHC = row;
      this.menuForm = JSON.parse(JSON.stringify(this.menuFormHC));
      this.menutitle = "修改菜单";
      this.dialogFormVisible1 = true;
    },
    /** 新增按钮操作 */
    menuAdd(row) {
      this.menuFormReset();
      this.getTreeselect();
      if (row != null && row.menuId) {
        this.menuFormHC = row;
        this.menuForm = JSON.parse(JSON.stringify(this.menuFormHC));
      } else {
        // this.menuForm.parentId = 0
        // this.menuForm.menuType = "M"
      }
      this.menutitle = "添加菜单";
    },
    /** 删除按钮操作 */
    menuDelete(row) {
      this.$confirm(
        '是否确认删除名称为"' + row.menuName + '"的数据项?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(function () {
          return menuRemove({ menuId: row.menuId });
        })
        .then((Response) => {
          if (Response.status == "SUCCESS") {
            Message({
              message: "删除成功",
              type: "success",
            });
            this.dialogFormVisible1 = false;
            setTimeout(() => {
              localStorage.setItem("active", "menu");
              this.urlShuaXin();
            }, 1000);
          }
        })
        .catch(() => {});
    },
    /**重置菜单表单 */
    menuFormReset() {
      this.menuForm = {
        menuId: undefined,
        parentId: 0,
        menuName: undefined,
        icon: undefined,
        menuType: "M",
        orderNum: 0,
        isFrame: "1",
        isCache: "0",
        visible: "0",
        status: "0",
        children: undefined,
        params: undefined,
      };
      this.menuFormHC = {};
    },
    /** 查询菜单下拉树结构 */
    getTreeselect() {
      menuList().then((Response) => {
        if (Response.data) {
          this.menuOptions = [];
          const menu = { menuId: 0, menuName: "主类目", children: [] };
          menu.children = this.handleTree(Response.data, "menuId");
          this.menuOptions.push(menu);
          this.dialogFormVisible1 = true;
        }
      });
    },
    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.menuId,
        label: node.menuName,
        children: node.children,
      };
    },
    /** 选择图标 */
    selected(name) {
      this.menuForm.icon = name;
    },
    /** 菜单提交按钮 */
    menuSubmitForm() {
      if (this.menuForm.menuId != undefined) {
        this.menuForm.children = [];
        this.menuForm.params = undefined;
        menuEdit(this.menuForm).then((Response) => {
          if (Response.status == "SUCCESS") {
            Message({
              message: "修改成功",
              type: "success",
            });
            this.dialogFormVisible1 = false;
            setTimeout(() => {
              localStorage.setItem("active", "menu");
              this.urlShuaXin();
            }, 1000);
          }
        });
      } else {
        menuAdd(this.menuForm).then((Response) => {
          if (Response.status == "SUCCESS") {
            Message({
              message: "新增成功",
              type: "success",
            });
            this.dialogFormVisible1 = false;
          }
        });
      }
    },

    /** 公用
     *
     */
    /** 取消按钮操作 */
    cancel() {
      this.dialogFormVisible1 = false;
      this.dialogFormVisible2 = false;
      this.menuFormReset();
    },
    /** 重置按钮操作 */
    resetQuery() {
      (this.roleListQuery = {
        //角色初始化表格请求参数
        pageNo: 1,
        pageSize: 15,
        roleKey: undefined,
        roleName: undefined,
        status: 0,
      }),
        (this.menuQuery = {
          menuName: undefined,
        }),
        this.handleQuery();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.tabChange();
    },
  },
};
</script>
<style scoped>
.app-container {
  min-height: calc(100vh - 115px) !important;
}
</style>

<style>
.el-input__prefix {
  top: 4px !important;
}
.el-dialog .el-form-item__label {
  line-height: 40px;
  padding-right: 10px;
}

.el-radio {
  margin-top: 10px;
}
.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%;
}
.el-dialog .el-form-item {
  width: 100%;
}
.el-input__inner {
  height: 40px;
  line-height: 40px;
}

.el-dialog .el-form-item__label {
  margin-top: 0px;
}
.svg-icon {
  margin-right: 5px;
}
</style>
