{"remainingRequest":"E:\\boman-framwork\\ruoyi-ui\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!E:\\boman-framwork\\ruoyi-ui\\src\\views\\system\\role\\fz-index.vue?vue&type=style&index=0&id=c5070b68&lang=scss&scoped=true&","dependencies":[{"path":"E:\\boman-framwork\\ruoyi-ui\\src\\views\\system\\role\\fz-index.vue","mtime":1620609644505},{"path":"E:\\boman-framwork\\ruoyi-ui\\node_modules\\css-loader\\dist\\cjs.js","mtime":499162500000},{"path":"E:\\boman-framwork\\ruoyi-ui\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":499162500000},{"path":"E:\\boman-framwork\\ruoyi-ui\\node_modules\\postcss-loader\\src\\index.js","mtime":499162500000},{"path":"E:\\boman-framwork\\ruoyi-ui\\node_modules\\sass-loader\\dist\\cjs.js","mtime":499162500000},{"path":"E:\\boman-framwork\\ruoyi-ui\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"E:\\boman-framwork\\ruoyi-ui\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKLnNlYXJJdGVtTGVmdCB7CiAgZGlzcGxheTogZmxleDsKICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKfQoKLnJvbGVDb250ckJveCB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZjsKICBib3JkZXItcmFkaXVzOiA2cHg7CiAgb3ZlcmZsb3c6IGhpZGRlbjsKICBwYWRkaW5nOiAyM3B4IDA7CiAgaGVpZ2h0OiBjYWxjKDEwMCUgLSAxODNweCk7Cn0KCi5yb2xlQ29udHIgewogIHBhZGRpbmctbGVmdDogMTdweDsKCiAgLnNlYXJDb250TGVmdCB7CiAgICBtYXgtaGVpZ2h0OiBjYWxjKDEwMHZoIC0gMzUzcHgpOwogICAgb3ZlcmZsb3cteTogYXV0bzsKICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7CiAgICBwYWRkaW5nOiAyM3B4IDE3cHggMjNweCAyM3B4OwogICAgYm9yZGVyLXJpZ2h0OiAycHggc29saWQgI0U1RTVFNTsKCiAgICAmOjotd2Via2l0LXNjcm9sbGJhciB7CiAgICAgIGRpc3BsYXk6IG5vbmU7CiAgICB9CiAgfQoKICAuc2VhckNvbnRSaWdodCB7CiAgICBwYWRkaW5nLWxlZnQ6IDE4cHg7CgogICAgLnNlYXJUaXRsZSB7CiAgICAgIGRpc3BsYXk6IGZsZXg7CiAgICAgIHBhZGRpbmctbGVmdDogMTFweDsKICAgICAgbWFyZ2luLWJvdHRvbTogMjZweDsKCiAgICAgIC5zZWFyTmFtZSB7CiAgICAgICAgY29sb3I6ICMzNDM0MzQ7CiAgICAgICAgZm9udC1zaXplOiAxMnB4OwogICAgICAgIHdpZHRoOiAxMTZweDsKICAgICAgfQoKICAgICAgLnNlYXJJdGVtIHsKICAgICAgICBmbGV4OiAxOwogICAgICAgIGZvbnQtc2l6ZTogMTJweDsKICAgICAgICB0ZXh0LWFsaWduOiBjZW50ZXI7CiAgICAgIH0KICAgIH0KCiAgICAuc2VhckNvbnQgewogICAgICBkaXNwbGF5OiBmbGV4OwogICAgICBoZWlnaHQ6IDIzcHg7CiAgICAgIHBhZGRpbmctbGVmdDogMTFweDsKICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICAgICAgbWFyZ2luLWJvdHRvbTogNHB4OwogICAgICBjdXJzb3I6IHBvaW50ZXI7CgogICAgICAuc2Vhck5hbWUgewogICAgICAgIGNvbG9yOiAjMzQzNDM0OwogICAgICAgIGZvbnQtc2l6ZTogMTJweDsKICAgICAgICB3aWR0aDogMTE2cHg7CiAgICAgIH0KCiAgICAgIC5zZWFySXRlbSB7CiAgICAgICAgZmxleDogMTsKICAgICAgICBmb250LXNpemU6IDEycHg7CiAgICAgICAgdGV4dC1hbGlnbjogY2VudGVyOwogICAgICB9CgogICAgICAmOmhvdmVyIHsKICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2JhKDAsIDAsIDAsIC4xKTsKICAgICAgfQogICAgfQoKICAgIC5hY3RpdmUgewogICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjQ0FEQkU0OwoKICAgICAgLnNlYXJOYW1lIHsKICAgICAgICBjb2xvcjogI2ZmZjsKICAgICAgfQogICAgfQogIH0KfQoKLnNlYXJCb3hzIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOwogIGJvcmRlci1yYWRpdXM6IDZweDsKICBib3gtc2l6aW5nOiBib3JkZXItYm94OwogIHBhZGRpbmc6IDIzcHg7CgogIC5zZWFyQm94IHsKICAgIGRpc3BsYXk6IGZsZXg7CgogICAgLnNlYXJJbnB1dCB7CiAgICAgIGZsZXg6IDE7CiAgICAgIGhlaWdodDogMzJweDsKICAgICAgbWFyZ2luLXJpZ2h0OiA4cHg7CiAgICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7CiAgICB9CgogICAgaW5wdXQgewogICAgICB3aWR0aDogMTAwJTsKICAgICAgaGVpZ2h0OiAxMDAlOwogICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjRjdGNkY2OwogICAgICBib3JkZXI6IG5vbmU7CiAgICAgIHBhZGRpbmc6IDAgN3B4OwogICAgICBvdXRsaW5lOiBub25lOwoKICAgICAgJjo6cGxhY2Vob2xkZXIgewogICAgICAgIGNvbG9yOiAjQUFBQUFBOwogICAgICAgIGZvbnQtc2l6ZTogMTJweDsKICAgICAgfQogICAgfQoKICAgIC5zZWFyQnRuIHsKICAgICAgd2lkdGg6IDMwcHg7CiAgICAgIGhlaWdodDogMzJweDsKICAgICAgZGlzcGxheTogZmxleDsKICAgICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAgICAgIGJhY2tncm91bmQtY29sb3I6ICMzQzhEQkM7CiAgICAgIGN1cnNvcjogcG9pbnRlcjsKCiAgICAgIC5pY29uIHsKICAgICAgICB3aWR0aDogMThweDsKICAgICAgICBoZWlnaHQ6IDE3cHg7CiAgICAgIH0KICAgIH0KICB9CgogIC5zZWFyTGlzdCB7CiAgICBwYWRkaW5nOiAxMHB4IDA7CgogICAgLnNlYXJJdGVtIHsKICAgICAgcGFkZGluZzogMCA4cHg7CiAgICAgIGxpbmUtaGVpZ2h0OiAzMHB4OwogICAgICBmb250LXNpemU6IDEycHg7CiAgICAgIGNvbG9yOiAjMzQzNDM0OwogICAgICBjdXJzb3I6IHBvaW50ZXI7CiAgICAgIHRleHQtYWxpZ246IGNlbnRlcjsKICAgIH0KCiAgICAuYWN0aXZlIHsKICAgICAgYmFja2dyb3VuZC1jb2xvcjogI0NBREJFNDsKICAgICAgY29sb3I6ICMzQzhEQkM7CiAgICB9CiAgfQp9CgouYXBwLWNvbnRhaW5lciB7CiAgYmFja2dyb3VuZC1jb2xvcjogI0VGRjBGRjsKICBoZWlnaHQ6IGNhbGMoMTAwdmggLSA4NHB4KTsKICBib3gtc2l6aW5nOiBib3JkZXItYm94Owp9Cgoucm9sZUJveCB7CiAgcGFkZGluZzogMCAyM3B4OwogIGJhY2tncm91bmQ6ICNmZmY7CiAgYm9yZGVyLXJhZGl1czogNnB4OwoKICAucm9sZUNvbCB7CiAgICBwYWRkaW5nOiAyMHB4IDA7CiAgICBib3JkZXItYm90dG9tOiAxcHggc29saWQgI0U1RTVFNTsKCiAgICAucm9sZUggewogICAgICB3aWR0aDogMThweDsKICAgICAgaGVpZ2h0OiA4cHg7CiAgICAgIGJvcmRlci1yYWRpdXM6IDRweDsKICAgICAgYmFja2dyb3VuZC1jb2xvcjogIzNDOERCQzsKICAgICAgbWFyZ2luLWJvdHRvbTogOHB4OwogICAgfQoKICAgIHNwYW4gewogICAgICBmb250LXNpemU6IDE1cHg7CiAgICAgIGNvbG9yOiAjM0M4REJDOwogICAgfQogIH0KCiAgLnJvbGVCb3QgewogICAgcGFkZGluZzogMjJweCAwOwoKICAgIC5yb2xlQnRuIHsKICAgICAgaGVpZ2h0OiAzMnB4OwogICAgICBkaXNwbGF5OiBmbGV4OwogICAgICBib3JkZXItcmFkaXVzOiAzcHg7CiAgICAgIGp1c3RpZnktY29udGVudDogY2VudGVyOwogICAgICBhbGlnbi1pdGVtczogY2VudGVyOwogICAgICB3aWR0aDogODNweDsKICAgICAgbWFyZ2luLXJpZ2h0OiAxOHB4OwoKICAgICAgLmljb24gewogICAgICAgIHdpZHRoOiAxNHB4OwogICAgICAgIGhlaWdodDogMTRweDsKICAgICAgICBtYXJnaW4tcmlnaHQ6IDdweDsKICAgICAgfQoKICAgICAgc3BhbiB7CiAgICAgICAgY29sb3I6ICNmZmY7CiAgICAgICAgZm9udC1zaXplOiAxMnB4OwogICAgICB9CiAgICB9CiAgfQp9Cg=="},{"version":3,"sources":["fz-index.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4hBA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA","file":"fz-index.vue","sourceRoot":"src/views/system/role","sourcesContent":["<template>\r\n  <div class=\"app-container\">\r\n    <el-row class=\"roleBox\">\r\n      <el-col :span=\"24\" class=\"roleCol\">\r\n        <div class=\"roleH\"></div>\r\n        <span>功能权限</span>\r\n      </el-col>\r\n      <el-col :span=\"24\" class=\"roleBot\">\r\n        <el-row :gutter=\"10\" class=\"mb8\">\r\n          <el-col :span=\"1.5\">\r\n            <el-button type=\"primary\" style=\"background-color: #2AC1CA;color: #fff;border: none;\" plain icon=\"el-icon-plus\"\r\n              @click=\"handleAdd\" v-hasPermi=\"['system:role:add']\">新增</el-button>\r\n          </el-col>\r\n          <el-col :span=\"1.5\">\r\n            <el-button type=\"primary\" style=\"background-color: #FF9639;color: #fff;border: none;\" plain icon=\"el-icon-refresh\"\r\n              @click=\"refreshFn\" v-hasPermi=\"['system:role:list']\">刷新</el-button>\r\n          </el-col>\r\n          <el-col :span=\"1.5\">\r\n            <el-button type=\"primary\" style=\"background-color: #3C8DBC;color: #fff;border: none;\" plain icon=\"el-icon-my-export\"\r\n              @click=\"handleMenu\" v-hasPermi=\"['system:role:edit']\">保存</el-button>\r\n          </el-col>\r\n        </el-row>\r\n      </el-col>\r\n    </el-row>\r\n    <el-row class=\"roleCont\" style=\"margin-top: 18px;\">\r\n      <el-col :span=\"5\" class=\"searBoxs\">\r\n        <div class=\"searBox\">\r\n          <div class=\"searInput\">\r\n            <input type=\"text\" v-model=\"queryParams.roleName\" placeholder=\"请输入角色\">\r\n          </div>\r\n          <div class=\"searBtn\">\r\n            <img src=\"@/assets/images/icon_sr_ss@2x.png\" @click=\"handleQuery\" alt=\"\" class=\"icon\">\r\n          </div>\r\n        </div>\r\n        <div class=\"searList\">\r\n          <div class=\"searItem searItemLeft\" element-loading-text=\"拼命加载中\" v-loading.fullscreen.lock=\"fullscreenLoading\"\r\n            element-loading-spinner=\"el-icon-loading\" element-loading-background=\"rgba(0, 0, 0, 0.4)\" v-for=\"item in roleList\"\r\n            @click=\"searBtnFn(item)\" :class=\"{'active': item.id == roleId}\" :key=\"item.id\">\r\n            <span>\r\n              {{item.roleName}}\r\n            </span>\r\n            <i class=\"el-icon-delete\" @click.stop=\"handleDelete(item)\" v-if=\"item.id == roleId\"></i>\r\n          </div>\r\n        </div>\r\n        <pagination sty v-show=\"total>0\" :total=\"total\" layout=\"prev, pager, next\" :page.sync=\"queryParams.pageNum\"\r\n          :limit.sync=\"queryParams.pageSize\" />\r\n      </el-col>\r\n      <el-col :span=\"19\" class=\"roleContr\">\r\n        <div class=\"roleContrBox\">\r\n          <el-col :span=\"7\">\r\n            <div class=\"searContLeft\">\r\n              <el-tree class=\"tree-border\" @node-click=\"qxList\" :data=\"deptOptions\"\r\n                default-expand-all ref=\"dept\" node-key=\"id\" :props=\"defaultProps\"></el-tree>\r\n            </div>\r\n          </el-col>\r\n          <el-col :span=\"17\">\r\n            <div class=\"searContRight\">\r\n              <div class=\"searTitle\">\r\n                <div class=\"searName\">\r\n                  功能\r\n                </div>\r\n                <div class=\"searItem\" v-for=\"item in menusList.heads\">\r\n                  {{item.name}}\r\n                </div>\r\n              </div>\r\n              <div class=\"searCont\" v-if=\"menusList.sysMenus.length\" v-for=\"items in menusList.sysMenus\" @click=\"searIndex = items.id\"\r\n                :class=\"{'active': searIndex == items.id}\" :key=\"items.id\">\r\n                <div class=\"searName\">\r\n                  {{items.menuName}}\r\n                </div>\r\n                <div class=\"searItem\" v-for=\"(itemChild,indexChild) in items.containsHead\" :key=\"indexChild\">\r\n                  <el-checkbox @change=\"checkChange\" :disabled=\"itemChild.type==='0'\" v-model=\"itemChild.type\"></el-checkbox>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </el-col>\r\n        </div>\r\n      </el-col>\r\n    </el-row>\r\n\r\n\r\n    <!-- 添加或修改角色配置对话框 -->\r\n    <el-dialog :title=\"title\" :visible.sync=\"open\" width=\"500px\" append-to-body>\r\n      <el-form ref=\"form\" :model=\"form\" :rules=\"rules\" label-width=\"80px\">\r\n        <el-form-item label=\"角色名称\" prop=\"roleName\">\r\n          <el-input v-model=\"form.roleName\" placeholder=\"请输入角色名称\" />\r\n        </el-form-item>\r\n        <el-form-item label=\"权限字符\" prop=\"roleKey\">\r\n          <el-input v-model=\"form.roleKey\" placeholder=\"请输入权限字符\" />\r\n        </el-form-item>\r\n        <el-form-item label=\"角色顺序\" prop=\"roleSort\">\r\n          <el-input-number v-model=\"form.roleSort\" controls-position=\"right\" :min=\"0\" />\r\n        </el-form-item>\r\n        <el-form-item label=\"备注\">\r\n          <el-input v-model=\"form.remark\" type=\"textarea\" placeholder=\"请输入内容\"></el-input>\r\n        </el-form-item>\r\n      </el-form>\r\n      <div slot=\"footer\" class=\"dialog-footer\">\r\n        <el-button type=\"primary\" @click=\"submitForm\">确 定</el-button>\r\n        <el-button @click=\"cancel\">取 消</el-button>\r\n      </div>\r\n    </el-dialog>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\n  import {\r\n    listRole,\r\n    getRole,\r\n    delRole,\r\n    addRole,\r\n    updateRole,\r\n    exportRole,\r\n    dataScope,\r\n    setMenu,\r\n    changeRoleStatus\r\n  } from \"@/api/system/role\";\r\n  import {\r\n    treeselect as menuTreeselect,\r\n    listMenus,\r\n    treeMenuNotAddLeafNode\r\n  } from \"@/api/system/menu\";\r\n  import {\r\n    treeselect as deptTreeselect,\r\n    roleDeptTreeselect\r\n  } from \"@/api/system/dept\";\r\n\r\n  export default {\r\n    name: \"Role\",\r\n    inject: ['reload'],\r\n    data() {\r\n      return {\r\n        modifyStatus: false,\r\n        fullscreenLoading: false,\r\n        searIndex: '',\r\n        data: [],\r\n        defaultProps: {\r\n          children: 'children',\r\n          label: 'menuName'\r\n        },\r\n        indexs: 3,\r\n        menusList: '',\r\n        // 遮罩层\r\n        loading: true,\r\n        // 选中数组\r\n        ids: [],\r\n        // 非单个禁用\r\n        single: true,\r\n        // 非多个禁用\r\n        multiple: true,\r\n        // 显示搜索条件\r\n        showSearch: true,\r\n        // 总条数\r\n        total: 0,\r\n        // 角色表格数据\r\n        roleList: [],\r\n        // 弹出层标题\r\n        title: \"\",\r\n        // 是否显示弹出层\r\n        open: false,\r\n        // 是否显示弹出层（数据权限）\r\n        openDataScope: false,\r\n        menuExpand: false,\r\n        menuNodeAll: false,\r\n        deptExpand: true,\r\n        deptNodeAll: false,\r\n        // 日期范围\r\n        dateRange: [],\r\n        // 状态数据字典\r\n        statusOptions: [],\r\n        // 数据范围选项\r\n        dataScopeOptions: [{\r\n            value: \"1\",\r\n            label: \"全部数据权限\"\r\n          },\r\n          {\r\n            value: \"2\",\r\n            label: \"自定数据权限\"\r\n          },\r\n          {\r\n            value: \"3\",\r\n            label: \"本部门数据权限\"\r\n          },\r\n          {\r\n            value: \"4\",\r\n            label: \"本部门及以下数据权限\"\r\n          },\r\n          {\r\n            value: \"5\",\r\n            label: \"仅本人数据权限\"\r\n          }\r\n        ],\r\n        // 菜单列表\r\n        menuOptions: [],\r\n        // 部门列表\r\n        deptOptions: [],\r\n        // 查询参数\r\n        queryParams: {\r\n          pageNum: 1,\r\n          pageSize: 10,\r\n          roleName: undefined,\r\n          roleKey: undefined,\r\n          status: undefined\r\n        },\r\n        roleId: '',\r\n        // 表单参数\r\n        form: {},\r\n        // 表单校验\r\n        rules: {\r\n          roleName: [{\r\n            required: true,\r\n            message: \"角色名称不能为空\",\r\n            trigger: \"blur\"\r\n          }],\r\n          roleKey: [{\r\n            required: true,\r\n            message: \"权限字符不能为空\",\r\n            trigger: \"blur\"\r\n          }],\r\n          roleSort: [{\r\n            required: true,\r\n            message: \"角色顺序不能为空\",\r\n            trigger: \"blur\"\r\n          }]\r\n        }\r\n      };\r\n    },\r\n    created() {\r\n      this.getList();\r\n      this.getDicts(\"sys_normal_disable\").then(response => {\r\n        this.statusOptions = response.data;\r\n      });\r\n    },\r\n    methods: {\r\n      checkChange() {\r\n        this.modifyStatus = true\r\n      },\r\n      handleMenu() {\r\n        if (!this.modifyStatus) {\r\n          this.msgInfo('没有修改的内容！')\r\n          return\r\n        }\r\n        let data = []\r\n        for (let item of this.menusList.sysMenus) {\r\n          let obj = {}\r\n          obj.roleId = this.roleId\r\n          obj.menuId = item.id\r\n          obj.head = []\r\n          for (let itemChild of item.containsHead) {\r\n            if (itemChild.type === true) {\r\n              obj.head.push(itemChild.name)\r\n            }\r\n          }\r\n          data.push(obj)\r\n        }\r\n        setMenu(JSON.stringify(data)).then(res => {\r\n          this.msgSuccess('保存成功')\r\n          this.modifyStatus = false\r\n        })\r\n      },\r\n      qxList(e) {\r\n        const _this = this\r\n        if (this.modifyStatus) {\r\n          this.$confirm('当前页面存在未保存内容，是否保存后切换?', \"提醒\", {\r\n            confirmButtonText: \"留下\",\r\n            cancelButtonText: \"取消\",\r\n            type: \"warning\"\r\n          }).then(function() {\r\n\r\n          }).catch(function() {\r\n            _this.modifyStatus = false\r\n            _this.qxList(e)\r\n          });\r\n          return\r\n        }\r\n        listMenus(e.id,this.roleId).then(res => {\r\n          let data = res.data\r\n          this.menusList = data\r\n        })\r\n      },\r\n      refreshFn() {\r\n        // this.getList()\r\n        this.reload()\r\n        // this.deptOptions = []\r\n      },\r\n      searBtnFn(item) {\r\n        this.roleId = item.id\r\n        this.handleUpdate()\r\n      },\r\n      handleNodeClick() {\r\n        console.log(221)\r\n      },\r\n      /** 查询角色列表 */\r\n      getList() {\r\n        this.loading = true;\r\n        listRole(this.addDateRange(this.queryParams, this.dateRange)).then(\r\n          response => {\r\n            this.roleList = response.rows;\r\n            this.total = response.total;\r\n            this.loading = false;\r\n          }\r\n        );\r\n      },\r\n      /** 查询菜单树结构 */\r\n      getMenuTreeselect() {\r\n        menuTreeselect().then(response => {\r\n          this.menuOptions = response.data;\n        });\r\n      },\r\n      /** 查询部门树结构 */\r\n      getDeptTreeselect() {\r\n        deptTreeselect().then(response => {\r\n          this.deptOptions = response.data;\n        });\r\n      },\r\n      // 所有菜单节点数据\r\n      getMenuAllCheckedKeys() {\r\n        // 目前被选中的菜单节点\r\n        let checkedKeys = this.$refs.menu.getCheckedKeys();\r\n        // 半选中的菜单节点\r\n        let halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys();\r\n        checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);\r\n        return checkedKeys;\r\n      },\r\n      // 所有部门节点数据\r\n      getDeptAllCheckedKeys() {\r\n        // 目前被选中的部门节点\r\n        let checkedKeys = this.$refs.dept.getCheckedKeys();\r\n        // 半选中的部门节点\r\n        let halfCheckedKeys = this.$refs.dept.getHalfCheckedKeys();\r\n        checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);\r\n        return checkedKeys;\r\n      },\r\n      /** 根据角色ID查询菜单树结构 */\r\n      getRoleMenuTreeselect(id) {\r\n        return treeMenuNotAddLeafNode(id).then(response => {\r\n          this.menuOptions = response.data;\r\n          return response;\r\n        });\r\n      },\r\n      /** 根据角色ID查询部门树结构 */\r\n      getRoleDeptTreeselect(id) {\r\n        return roleDeptTreeselect(id).then(response => {\r\n          this.deptOptions = response.depts;\r\n          return response;\r\n        });\r\n      },\r\n      // 角色状态修改\r\n      handleStatusChange(row) {\r\n        let text = row.status === \"0\" ? \"启用\" : \"停用\";\r\n        this.$confirm('确认要\"' + text + '\"\"' + row.roleName + '\"角色吗?', \"警告\", {\r\n          confirmButtonText: \"确定\",\r\n          cancelButtonText: \"取消\",\r\n          type: \"warning\"\r\n        }).then(function() {\r\n          return changeRoleStatus(row.id, row.status);\r\n        }).then(() => {\r\n          this.msgSuccess(text + \"成功\");\r\n        }).catch(function() {\r\n          row.status = row.status === \"0\" ? \"1\" : \"0\";\r\n        });\r\n      },\r\n      // 取消按钮\r\n      cancel() {\r\n        this.open = false;\r\n        this.reset();\r\n      },\r\n      // 取消按钮（数据权限）\r\n      cancelDataScope() {\r\n        this.openDataScope = false;\r\n        this.reset();\r\n      },\r\n      // 表单重置\r\n      reset() {\r\n        if (this.$refs.menu != undefined) {\r\n          this.$refs.menu.setCheckedKeys([]);\r\n        }\r\n        this.menuExpand = false,\r\n          this.menuNodeAll = false,\r\n          this.deptExpand = true,\r\n          this.deptNodeAll = false,\r\n          this.form = {\r\n            id: undefined,\r\n            roleName: undefined,\r\n            roleKey: undefined,\r\n            roleSort: 0,\r\n            status: \"0\",\r\n            menuIds: [],\r\n            deptIds: [],\r\n            menuCheckStrictly: true,\r\n            deptCheckStrictly: true,\r\n            remark: undefined\r\n          };\r\n        this.resetForm(\"form\");\r\n      },\r\n      /** 搜索按钮操作 */\r\n      handleQuery() {\r\n        this.queryParams.pageNum = 1;\r\n        this.getList();\r\n      },\r\n      /** 重置按钮操作 */\r\n      resetQuery() {\r\n        this.dateRange = [];\r\n        this.resetForm(\"queryForm\");\r\n        this.handleQuery();\r\n      },\r\n      // 多选框选中数据\r\n      handleSelectionChange(selection) {\r\n        this.ids = selection.map(item => item.id)\r\n        this.single = selection.length != 1\r\n        this.multiple = !selection.length\r\n      },\r\n      // 树权限（展开/折叠）\r\n      handleCheckedTreeExpand(value, type) {\r\n        if (type == 'menu') {\r\n          let treeList = this.menuOptions;\r\n          for (let i = 0; i < treeList.length; i++) {\r\n            this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value;\r\n          }\r\n        } else if (type == 'dept') {\r\n          let treeList = this.deptOptions;\r\n          for (let i = 0; i < treeList.length; i++) {\r\n            this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value;\r\n          }\r\n        }\r\n      },\r\n      // 树权限（全选/全不选）\r\n      handleCheckedTreeNodeAll(value, type) {\r\n        if (type == 'menu') {\r\n          this.$refs.menu.setCheckedNodes(value ? this.menuOptions : []);\r\n        } else if (type == 'dept') {\r\n          this.$refs.dept.setCheckedNodes(value ? this.deptOptions : []);\r\n        }\r\n      },\r\n      // 树权限（父子联动）\r\n      handleCheckedTreeConnect(value, type) {\r\n        if (type == 'menu') {\r\n          this.form.menuCheckStrictly = value ? true : false;\r\n        } else if (type == 'dept') {\r\n          this.form.deptCheckStrictly = value ? true : false;\r\n        }\r\n      },\r\n      /** 新增按钮操作 */\r\n      handleAdd() {\r\n        this.reset();\r\n        this.getMenuTreeselect();\r\n        this.open = true;\r\n        this.title = \"添加角色\";\r\n      },\r\n      /** 修改按钮操作 */\r\n      handleUpdate() {\r\n        this.reset();\r\n        this.fullscreenLoading = true\r\n        const roleMenu = this.getRoleMenuTreeselect(this.roleId);\r\n        roleMenu.then(res => {\r\n          // let checkedKeys = res.checkedKeys\r\n          this.deptOptions = res.data\r\n          this.fullscreenLoading = false\r\n        });\r\n      },\r\n      /** 选择角色权限范围触发 */\r\n      dataScopeSelectChange(value) {\r\n        if (value !== '2') {\r\n          this.$refs.dept.setCheckedKeys([]);\r\n        }\r\n      },\r\n      /** 分配数据权限操作 */\r\n      handleDataScope(row) {\r\n        this.reset();\r\n        const roleDeptTreeselect = this.getRoleDeptTreeselect(row.id);\r\n        getRole(row.id).then(response => {\r\n          this.form = response.data;\r\n          this.openDataScope = true;\r\n          this.$nextTick(() => {\r\n            roleDeptTreeselect.then(res => {\r\n              this.$refs.dept.setCheckedKeys(res.checkedKeys);\r\n            });\r\n          });\r\n          this.title = \"分配数据权限\";\r\n        });\r\n      },\r\n      /** 提交按钮 */\r\n      submitForm: function() {\r\n        this.$refs[\"form\"].validate(valid => {\r\n          if (valid) {\r\n            if (this.form.id != undefined) {\r\n              // this.form.menuIds = this.getMenuAllCheckedKeys();\r\n              updateRole(this.form).then(response => {\r\n                this.msgSuccess(\"修改成功\");\r\n                this.open = false;\r\n                this.getList();\r\n              });\r\n            } else {\r\n              // this.form.menuIds = this.getMenuAllCheckedKeys();\r\n              addRole(this.form).then(response => {\r\n                this.msgSuccess(\"新增成功\");\r\n                this.open = false;\r\n                this.getList();\r\n              });\r\n            }\r\n          }\r\n        });\r\n      },\r\n      /** 提交按钮（数据权限） */\r\n      submitDataScope: function() {\r\n        if (this.form.id != undefined) {\r\n          this.form.deptIds = this.getDeptAllCheckedKeys();\r\n          dataScope(this.form).then(response => {\r\n            this.msgSuccess(\"修改成功\");\r\n            this.openDataScope = false;\r\n            this.getList();\r\n          });\r\n        }\r\n      },\r\n      /** 删除按钮操作 */\r\n      handleDelete(row) {\r\n        const ids = row.id || this.ids;\r\n        this.$confirm('是否确认删除角色编号为\"' + ids + '\"的数据项?', \"警告\", {\r\n          confirmButtonText: \"确定\",\r\n          cancelButtonText: \"取消\",\r\n          type: \"warning\",\r\n\r\n        }).then(function() {\r\n          return delRole(ids);\r\n        }).then(() => {\r\n          this.getList();\r\n          this.deptOptions = []\r\n          this.msgSuccess(\"删除成功\");\r\n        })\r\n      },\r\n      /** 导出按钮操作 */\r\n      handleExport() {\r\n        this.download('system/role/export', {\r\n          ...this.queryParams\r\n        }, `role_${new Date().getTime()}.xlsx`)\r\n      }\r\n    }\r\n  };\r\n</script>\r\n<style lang=\"scss\" scoped>\r\n  .searItemLeft {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n  }\r\n\r\n  .roleContrBox {\r\n    background-color: #fff;\r\n    border-radius: 6px;\r\n    overflow: hidden;\r\n    padding: 23px 0;\r\n    height: calc(100% - 183px);\r\n  }\r\n\r\n  .roleContr {\r\n    padding-left: 17px;\r\n\r\n    .searContLeft {\r\n      max-height: calc(100vh - 353px);\r\n      overflow-y: auto;\r\n      box-sizing: border-box;\r\n      padding: 23px 17px 23px 23px;\r\n      border-right: 2px solid #E5E5E5;\r\n\r\n      &::-webkit-scrollbar {\r\n        display: none;\r\n      }\r\n    }\r\n\r\n    .searContRight {\r\n      padding-left: 18px;\r\n\r\n      .searTitle {\r\n        display: flex;\r\n        padding-left: 11px;\r\n        margin-bottom: 26px;\r\n\r\n        .searName {\r\n          color: #343434;\r\n          font-size: 12px;\r\n          width: 116px;\r\n        }\r\n\r\n        .searItem {\r\n          flex: 1;\r\n          font-size: 12px;\r\n          text-align: center;\r\n        }\r\n      }\r\n\r\n      .searCont {\r\n        display: flex;\r\n        height: 23px;\r\n        padding-left: 11px;\r\n        align-items: center;\r\n        margin-bottom: 4px;\r\n        cursor: pointer;\r\n\r\n        .searName {\r\n          color: #343434;\r\n          font-size: 12px;\r\n          width: 116px;\r\n        }\r\n\r\n        .searItem {\r\n          flex: 1;\r\n          font-size: 12px;\r\n          text-align: center;\r\n        }\r\n\r\n        &:hover {\r\n          background-color: rgba(0, 0, 0, .1);\r\n        }\r\n      }\r\n\r\n      .active {\r\n        background-color: #CADBE4;\r\n\r\n        .searName {\r\n          color: #fff;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  .searBoxs {\r\n    background-color: #fff;\r\n    border-radius: 6px;\r\n    box-sizing: border-box;\r\n    padding: 23px;\r\n\r\n    .searBox {\r\n      display: flex;\r\n\r\n      .searInput {\r\n        flex: 1;\r\n        height: 32px;\r\n        margin-right: 8px;\r\n        box-sizing: border-box;\r\n      }\r\n\r\n      input {\r\n        width: 100%;\r\n        height: 100%;\r\n        background-color: #F7F6F6;\r\n        border: none;\r\n        padding: 0 7px;\r\n        outline: none;\r\n\r\n        &::placeholder {\r\n          color: #AAAAAA;\r\n          font-size: 12px;\r\n        }\r\n      }\r\n\r\n      .searBtn {\r\n        width: 30px;\r\n        height: 32px;\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        background-color: #3C8DBC;\r\n        cursor: pointer;\r\n\r\n        .icon {\r\n          width: 18px;\r\n          height: 17px;\r\n        }\r\n      }\r\n    }\r\n\r\n    .searList {\r\n      padding: 10px 0;\r\n\r\n      .searItem {\r\n        padding: 0 8px;\r\n        line-height: 30px;\r\n        font-size: 12px;\r\n        color: #343434;\r\n        cursor: pointer;\r\n        text-align: center;\r\n      }\r\n\r\n      .active {\r\n        background-color: #CADBE4;\r\n        color: #3C8DBC;\r\n      }\r\n    }\r\n  }\r\n\r\n  .app-container {\r\n    background-color: #EFF0FF;\r\n    height: calc(100vh - 84px);\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  .roleBox {\r\n    padding: 0 23px;\r\n    background: #fff;\r\n    border-radius: 6px;\r\n\r\n    .roleCol {\r\n      padding: 20px 0;\r\n      border-bottom: 1px solid #E5E5E5;\r\n\r\n      .roleH {\r\n        width: 18px;\r\n        height: 8px;\r\n        border-radius: 4px;\r\n        background-color: #3C8DBC;\r\n        margin-bottom: 8px;\r\n      }\r\n\r\n      span {\r\n        font-size: 15px;\r\n        color: #3C8DBC;\r\n      }\r\n    }\r\n\r\n    .roleBot {\r\n      padding: 22px 0;\r\n\r\n      .roleBtn {\r\n        height: 32px;\r\n        display: flex;\r\n        border-radius: 3px;\r\n        justify-content: center;\r\n        align-items: center;\r\n        width: 83px;\r\n        margin-right: 18px;\r\n\r\n        .icon {\r\n          width: 14px;\r\n          height: 14px;\r\n          margin-right: 7px;\r\n        }\r\n\r\n        span {\r\n          color: #fff;\r\n          font-size: 12px;\r\n        }\r\n      }\r\n    }\r\n  }\r\n</style>\r\n<style>\r\n  .el-icon-my-export {\r\n    background: url('~@/assets/images/icon_btn_bc@2x.png') center no-repeat;\r\n    background-size: 13px 13px;\r\n    /* background-size: cover;*/\r\n  }\r\n\r\n  .el-icon-my-export:before {\r\n    content: \"替\";\r\n    font-size: 16px;\r\n    visibility: hidden;\r\n  }\r\n\r\n\r\n  .el-icon-my-export {\r\n    font-size: 16px;\r\n  }\r\n\r\n  .el-icon-my-export:before {\r\n    content: \"\\e611\";\r\n  }\r\n</style>\n"]}]}