{"remainingRequest":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\front\\item\\zyAdmin\\src\\pages\\setting\\systemRole\\index.vue?vue&type=style&index=0&id=24a55c6b&scoped=true&lang=scss","dependencies":[{"path":"D:\\front\\item\\zyAdmin\\src\\pages\\setting\\systemRole\\index.vue","mtime":1761614939062},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\css-loader\\index.js","mtime":1761614929364},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1761614937403},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\postcss-loader\\src\\index.js","mtime":1761614935133},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\sass-loader\\dist\\cjs.js","mtime":1761614936391},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1761614927801},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js","mtime":1761614937402}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:DQoudHJlZXMtY29hZGQgew0KICB3aWR0aDogMTAwJTsNCiAgaGVpZ2h0OiAzODVweDsNCiAgZGlzcGxheTogZmxleDsNCiAgLnNjb2xsaGlkZSB7DQogICAgcG9zaXRpb246IHJlbGF0aXZlOw0KICAgIHdpZHRoOiAxMDAlOw0KICAgIGhlaWdodDogMTAwJTsNCiAgICBtYXJnaW4tdG9wOiA0cHg7DQogICAgb3ZlcmZsb3cteTogc2Nyb2xsOw0KICB9DQogIC5pY29ubGlzdC1idG4gew0KICAgIHdoaXRlLXNwYWNlOiBub3dyYXA7DQogICAgY3Vyc29yOiBwb2ludGVyOw0KICAgIGNvbG9yOiB2YXIoLS1wcmV2LWNvbG9yLXByaW1hcnkpOw0KICB9DQp9DQovLyBtYXJnaW4tbGVmdDogMThweDsNCi5zY29sbGhpZGU6Oi13ZWJraXQtc2Nyb2xsYmFyIHsNCiAgZGlzcGxheTogbm9uZTsNCn0NCg=="},{"version":3,"sources":["index.vue"],"names":[],"mappings":";AA4eA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"index.vue","sourceRoot":"src/pages/setting/systemRole","sourcesContent":["<template>\r\n  <div>\r\n    <el-card :bordered=\"false\" shadow=\"never\" class=\"ivu-mb-16\" :body-style=\"{ padding: 0 }\">\r\n      <div class=\"padding-add\">\r\n        <el-form\r\n          ref=\"formValidate\"\r\n          :model=\"formValidate\"\r\n          :label-width=\"labelWidth\"\r\n          :label-position=\"labelPosition\"\r\n          @submit.native.prevent\r\n          inline\r\n        >\r\n          <el-form-item label=\"状态：\" label-for=\"status\">\r\n            <el-select\r\n              v-model=\"formValidate.status\"\r\n              placeholder=\"请选择\"\r\n              @change=\"userSearchs\"\r\n              clearable\r\n              class=\"form_content_width\"\r\n            >\r\n              <el-option value=\"1\" label=\"显示\"></el-option>\r\n              <el-option value=\"0\" label=\"不显示\"></el-option>\r\n            </el-select>\r\n          </el-form-item>\r\n          <el-form-item label=\"身份昵称：\" label-for=\"role_name\">\r\n            <el-input\r\n              clearable\r\n              placeholder=\"请输入身份昵称\"\r\n              v-model=\"formValidate.role_name\"\r\n              class=\"form_content_width\"\r\n            />\r\n          </el-form-item>\r\n          <el-form-item>\r\n            <el-button type=\"primary\" v-db-click @click=\"userSearchs\">查询</el-button>\r\n          </el-form-item>\r\n        </el-form>\r\n      </div>\r\n    </el-card>\r\n    <el-card :bordered=\"false\" shadow=\"never\" v-loading=\"spinShow\">\r\n      <el-button v-auth=\"['setting-system_role-add']\" type=\"primary\" v-db-click @click=\"add('添加')\"\r\n        >添加身份</el-button\r\n      >\r\n      <el-table\r\n        :data=\"tableList\"\r\n        ref=\"table\"\r\n        class=\"mt14\"\r\n        v-loading=\"loading\"\r\n        highlight-current-row\r\n        no-userFrom-text=\"暂无数据\"\r\n        no-filtered-userFrom-text=\"暂无筛选结果\"\r\n      >\r\n        <el-table-column label=\"ID\" min-width=\"80\">\r\n          <template slot-scope=\"scope\">\r\n            <span>{{ scope.row.id }}</span>\r\n          </template>\r\n        </el-table-column>\r\n        <el-table-column label=\"身份昵称\" min-width=\"130\">\r\n          <template slot-scope=\"scope\">\r\n            <span>{{ scope.row.role_name }}</span>\r\n          </template>\r\n        </el-table-column>\r\n        <!-- <el-table-column label=\"权限\" min-width=\"1000\">\r\n          <template slot-scope=\"scope\">\r\n            <span class=\"line1\">{{ scope.row.rules }}</span>\r\n          </template>\r\n        </el-table-column> -->\r\n        <el-table-column label=\"状态\" min-width=\"120\">\r\n          <template slot-scope=\"scope\">\r\n            <el-switch\r\n              class=\"defineSwitch\"\r\n              :active-value=\"1\"\r\n              :inactive-value=\"0\"\r\n              v-model=\"scope.row.status\"\r\n              :value=\"scope.row.status\"\r\n              @change=\"onchangeIsShow(scope.row)\"\r\n              size=\"large\"\r\n              active-text=\"显示\"\r\n              inactive-text=\"隐藏\"\r\n            >\r\n            </el-switch>\r\n          </template>\r\n        </el-table-column>\r\n        <el-table-column label=\"操作\" fixed=\"right\" width=\"120\">\r\n          <template slot-scope=\"scope\">\r\n            <a v-db-click @click=\"edit(scope.row, '编辑')\">编辑</a>\r\n            <el-divider direction=\"vertical\"></el-divider>\r\n            <a v-db-click @click=\"del(scope.row, '删除', scope.$index)\">删除</a>\r\n          </template>\r\n        </el-table-column>\r\n      </el-table>\r\n      <div class=\"acea-row row-right page\">\r\n        <pagination\r\n          v-if=\"total\"\r\n          :total=\"total\"\r\n          :page.sync=\"formValidate.page\"\r\n          :limit.sync=\"formValidate.limit\"\r\n          @pagination=\"getList\"\r\n        />\r\n      </div>\r\n    </el-card>\r\n    <!-- 新增编辑-->\r\n    <el-dialog\r\n      :visible.sync=\"modals\"\r\n      :title=\"`${modelTit}身份`\"\r\n      :close-on-click-modal=\"false\"\r\n      :show-close=\"true\"\r\n      width=\"540px\"\r\n      @closed=\"closed\"\r\n    >\r\n      <el-form\r\n        ref=\"formInline\"\r\n        :model=\"formInline\"\r\n        :rules=\"ruleValidate\"\r\n        label-width=\"100px\"\r\n        :label-position=\"labelPosition2\"\r\n        @submit.native.prevent\r\n      >\r\n        <el-form-item label=\"身份名称：\" label-for=\"role_name\" prop=\"role_name\">\r\n          <el-input placeholder=\"请输入身份昵称\" v-model=\"formInline.role_name\" />\r\n        </el-form-item>\r\n        <el-form-item label=\"是否开启：\" prop=\"status\">\r\n          <el-radio-group v-model=\"formInline.status\">\r\n            <el-radio :label=\"1\">开启</el-radio>\r\n            <el-radio :label=\"0\">关闭</el-radio>\r\n          </el-radio-group>\r\n        </el-form-item>\r\n        <el-form-item label=\"权限：\">\r\n          <div class=\"trees-coadd\">\r\n            <div class=\"scollhide\">\r\n              <div class=\"iconlist\">\r\n                <el-tree\r\n                  :data=\"menusList\"\r\n                  node-key=\"id\"\r\n                  check-strictly\r\n                  show-checkbox\r\n                  highlight-current\r\n                  ref=\"tree\"\r\n                  :default-checked-keys=\"selectIds\"\r\n                  :props=\"defaultProps\"\r\n                  @check=\"clickDeal\"\r\n                  :default-expand-all=\"defaultExpandAll\"\r\n                ></el-tree>\r\n              </div>\r\n            </div>\r\n            <span class=\"iconlist-btn\" @click=\"changeExpandAll\">{{ defaultExpandAll ? '折叠' : '展开' }}</span>\r\n          </div>\r\n        </el-form-item>\r\n      </el-form>\r\n      <span slot=\"footer\" class=\"dialog-footer\">\r\n        <el-button v-db-click @click=\"onCancel\">取 消</el-button>\r\n        <el-button type=\"primary\" v-db-click @click=\"handleSubmit('formInline')\">提 交</el-button>\r\n      </span>\r\n    </el-dialog>\r\n  </div>\r\n</template>\r\n<script>\r\nimport { mapState } from 'vuex';\r\nimport { roleListApi, roleSetStatusApi, menusListApi, roleCreateApi, roleInfoApi } from '@/api/setting';\r\nexport default {\r\n  name: 'systemrRole',\r\n  data() {\r\n    return {\r\n      spinShow: false,\r\n      modals: false,\r\n      total: 0,\r\n      grid: {\r\n        xl: 7,\r\n        lg: 7,\r\n        md: 12,\r\n        sm: 24,\r\n        xs: 24,\r\n      },\r\n      loading: false,\r\n      defaultExpandAll: false,\r\n      formValidate: {\r\n        status: '',\r\n        role_name: '',\r\n        page: 1,\r\n        limit: 20,\r\n      },\r\n      tableList: [],\r\n      formInline: {\r\n        role_name: '',\r\n        status: 0,\r\n        checked_menus: [],\r\n        id: 0,\r\n      },\r\n      menusList: [],\r\n      selectIds: [],\r\n      modelTit: '',\r\n      ruleValidate: {\r\n        role_name: [{ required: true, message: '请输入身份昵称', trigger: 'blur' }],\r\n        status: [{ required: true, type: 'number', message: '请选择是否开启', trigger: 'change' }],\r\n        // checked_menus: [\r\n        //     { required: true, validator: validateStatus, trigger: 'change' }\r\n        // ]\r\n      },\r\n      defaultProps: {\r\n        children: 'children',\r\n        label: 'title',\r\n      },\r\n    };\r\n  },\r\n  computed: {\r\n    ...mapState('media', ['isMobile']),\r\n    labelWidth() {\r\n      return this.isMobile ? undefined : '80px';\r\n    },\r\n    labelPosition() {\r\n      return this.isMobile ? 'top' : 'right';\r\n    },\r\n    labelPosition2() {\r\n      return this.isMobile ? 'top' : 'right';\r\n    },\r\n  },\r\n  created() {\r\n    this.getList();\r\n  },\r\n  methods: {\r\n    changeExpandAll() {\r\n      // 控制按钮点击之后失焦\r\n      if (this.defaultExpandAll) {\r\n        this.defaultExpandAll = false;\r\n        for (let key in this.$refs.tree.store.nodesMap) {\r\n          this.$refs.tree.store.nodesMap[key].expanded = false;\r\n        }\r\n      } else {\r\n        this.defaultExpandAll = true;\r\n        for (let key in this.$refs.tree.store.nodesMap) {\r\n          this.$refs.tree.store.nodesMap[key].expanded = true;\r\n        }\r\n      }\r\n    },\r\n    closed() {\r\n      this.formInline = {\r\n        role_name: '',\r\n        status: 0,\r\n        checked_menus: [],\r\n        id: 0,\r\n      };\r\n      this.selectIds = [];\r\n    },\r\n    // 添加\r\n    add(name) {\r\n      this.formInline.id = 0;\r\n      this.modelTit = name;\r\n      this.modals = true;\r\n      this.getmenusList();\r\n    },\r\n    // 删除\r\n    del(row, tit, num) {\r\n      let delfromData = {\r\n        title: tit,\r\n        num: num,\r\n        url: `setting/role/${row.id}`,\r\n        method: 'DELETE',\r\n        ids: '',\r\n      };\r\n      this.$modalSure(delfromData)\r\n        .then((res) => {\r\n          this.$message.success(res.msg);\r\n          this.tableList.splice(num, 1);\r\n        })\r\n        .catch((res) => {\r\n          this.$message.error(res.msg);\r\n        });\r\n    },\r\n    // 修改是否显示\r\n    onchangeIsShow(row) {\r\n      let data = {\r\n        id: row.id,\r\n        status: row.status,\r\n      };\r\n      roleSetStatusApi(data)\r\n        .then(async (res) => {\r\n          this.$message.success(res.msg);\r\n        })\r\n        .catch((res) => {\r\n          this.$message.error(res.msg);\r\n        });\r\n    },\r\n    // 列表\r\n    getList() {\r\n      this.loading = true;\r\n      this.formValidate.status = this.formValidate.status || '';\r\n      roleListApi(this.formValidate)\r\n        .then(async (res) => {\r\n          let data = res.data;\r\n          this.tableList = data.list;\r\n          this.total = res.data.count;\r\n          this.loading = false;\r\n        })\r\n        .catch((res) => {\r\n          this.loading = false;\r\n          this.$message.error(res.msg);\r\n        });\r\n    },\r\n    // 表格搜索\r\n    userSearchs() {\r\n      this.formValidate.page = 1;\r\n      this.getList();\r\n    },\r\n    // 编辑\r\n    edit(row, name) {\r\n      this.modelTit = name;\r\n      this.formInline.id = row.id;\r\n      this.modals = true;\r\n      this.rows = row;\r\n      this.getIofo(row);\r\n    },\r\n    // 菜单列表\r\n    getmenusList() {\r\n      this.spinShow = true;\r\n      menusListApi()\r\n        .then(async (res) => {\r\n          let data = res.data;\r\n          this.menusList = data.menus;\r\n          this.menusList.map((item, index) => {\r\n            if (item.title === '主页') {\r\n              // item.checked = true;\r\n              // item.disableCheckbox = true;\r\n              if (item.children.length) {\r\n                item.children.map((v) => {\r\n                  // v.checked = true;\r\n                  // v.disableCheckbox = true;\r\n                });\r\n              }\r\n            }\r\n            item.expand = false;\r\n          });\r\n          this.spinShow = false;\r\n        })\r\n        .catch((res) => {\r\n          this.spinShow = false;\r\n          this.$message.error(res.msg);\r\n        });\r\n    },\r\n    // 详情\r\n    getIofo(row) {\r\n      this.spinShow = true;\r\n      roleInfoApi(row.id)\r\n        .then(async (res) => {\r\n          let data = res.data;\r\n          this.formInline = data.role || this.formInline;\r\n          this.formInline.checked_menus = this.formInline.rules;\r\n          this.$nextTick((e) => {\r\n            this.selectIds = this.formInline.rules.split(',');\r\n            this.tidyRes(data.menus);\r\n            // this.$refs.tree.setCheckedKeys(Array(arr));\r\n          });\r\n          this.spinShow = false;\r\n        })\r\n        .catch((res) => {\r\n          this.spinShow = false;\r\n          this.$message.error(res.msg);\r\n        });\r\n    },\r\n    forChildrenChecked(arr, status, pid) {\r\n      if (arr.length) {\r\n        let len = arr.length;\r\n        for (var j = 0; j < len; j++) {\r\n          var childNode = this.$refs.tree.getNode(arr[j].id).data;\r\n          if (status) {\r\n            this.$refs.tree.setChecked(childNode.id, true);\r\n            childNode.checked = true;\r\n          }\r\n          if (!status) {\r\n            this.$refs.tree.setChecked(childNode.id, false);\r\n            childNode.checked = false;\r\n          }\r\n          if (childNode.children.length) {\r\n            this.forChildrenChecked(childNode.children, status);\r\n          }\r\n        }\r\n      }\r\n    },\r\n\r\n    clickDeal(currentObj, treeStatus, ccc) {\r\n      // 用于：父子节点严格互不关联时，父节点勾选变化时通知子节点同步变化，实现单向关联。\r\n      let selected = treeStatus.checkedKeys.indexOf(currentObj.id); // -1未选中\r\n      // 选中\r\n      if (selected !== -1) {\r\n        // 子节点只要被选中父节点就被选中\r\n        this.selectedParent(currentObj);\r\n        // 统一处理子节点为相同的勾选状态\r\n        this.uniteChildSame(currentObj, true);\r\n      } else {\r\n        // 未选中 处理子节点全部未选中\r\n        if (currentObj.children.length !== 0) {\r\n          this.uniteChildSame(currentObj, false);\r\n        }\r\n        let selParent = false;\r\n        let parentNode = currentObj.pid ? this.$refs.tree.getNode(currentObj.pid).data : undefined;\r\n        if (parentNode && parentNode.children.length) {\r\n          for (let i = 0; i < parentNode.children.length; i++) {\r\n            if (treeStatus.checkedKeys.includes(parentNode.children[i].id)) {\r\n              selParent = true;\r\n            }\r\n          }\r\n        }\r\n        if (!selParent && currentObj.pid) this.$refs.tree.setChecked(currentObj.pid, false);\r\n      }\r\n    },\r\n    // 统一处理子节点为相同的勾选状态\r\n    uniteChildSame(treeList, isSelected) {\r\n      this.$refs.tree.setChecked(treeList.id, isSelected);\r\n      for (let i = 0; i < treeList.children.length; i++) {\r\n        this.uniteChildSame(treeList.children[i], isSelected);\r\n      }\r\n    },\r\n    // 统一处理父节点为选中\r\n    selectedParent(currentObj) {\r\n      let currentNode = this.$refs.tree.getNode(currentObj);\r\n      if (currentNode.parent.key !== undefined) {\r\n        this.$refs.tree.setChecked(currentNode.parent, true);\r\n        this.selectedParent(currentNode.parent);\r\n      }\r\n    },\r\n    tidyRes(menus) {\r\n      let data = [];\r\n      menus.map((menu) => {\r\n        if (menu.title === '主页') {\r\n          menu.checked = true;\r\n          // menu.disabled = true;\r\n          if (menu.children.length) {\r\n            menu.children.map((v) => {\r\n              v.checked = true;\r\n            });\r\n          }\r\n          data.push(menu);\r\n        } else {\r\n          data.push(this.initMenu(menu));\r\n        }\r\n      });\r\n      this.$set(this, 'menusList', data);\r\n    },\r\n    initMenu(menu) {\r\n      let data = {},\r\n        checkMenus = ',' + this.formInline.checked_menus + ',';\r\n      data.title = menu.title;\r\n      data.id = menu.id;\r\n      data.pid = menu.pid;\r\n      data.children = menu.children;\r\n      data.checked = menu.checked;\r\n\r\n      if (menu.children && menu.children.length > 0) {\r\n        data.children = [];\r\n        menu.children.map((child) => {\r\n          data.children.push(this.initMenu(child));\r\n        });\r\n      } else {\r\n        data.checked = checkMenus.indexOf(String(',' + data.id + ',')) !== -1;\r\n        data.expand = !data.checked;\r\n      }\r\n      return data;\r\n    },\r\n    // 提交\r\n    handleSubmit(name) {\r\n      this.$refs[name].validate((valid) => {\r\n        if (valid) {\r\n          this.formInline.checked_menus = [\r\n            ...this.$refs.tree.getCheckedKeys(),\r\n            ...this.$refs.tree.getHalfCheckedKeys(),\r\n          ];\r\n          if (this.formInline.checked_menus.length === 0) return this.$message.warning('请至少选择一个权限');\r\n          roleCreateApi(this.formInline)\r\n            .then(async (res) => {\r\n              this.$message.success(res.msg);\r\n              this.modals = false;\r\n              this.getList();\r\n              this.$refs[name].resetFields();\r\n              this.formInline.checked_menus = [];\r\n            })\r\n            .catch((res) => {\r\n              this.$message.error(res.msg);\r\n            });\r\n        } else {\r\n          return false;\r\n        }\r\n      });\r\n    },\r\n    onCancel() {\r\n      this.$refs['formInline'].resetFields();\r\n      this.formInline.checked_menus = [];\r\n      this.selectIds = [];\r\n      this.modals = false;\r\n    },\r\n  },\r\n};\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n.trees-coadd {\r\n  width: 100%;\r\n  height: 385px;\r\n  display: flex;\r\n  .scollhide {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 100%;\r\n    margin-top: 4px;\r\n    overflow-y: scroll;\r\n  }\r\n  .iconlist-btn {\r\n    white-space: nowrap;\r\n    cursor: pointer;\r\n    color: var(--prev-color-primary);\r\n  }\r\n}\r\n// margin-left: 18px;\r\n.scollhide::-webkit-scrollbar {\r\n  display: none;\r\n}\r\n</style>\r\n"]}]}