From 87c914ffe57995f1a9844fa19cbd4fe19ca7b91a Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期四, 29 九月 2022 18:47:21 +0800
Subject: [PATCH] 角色管理新增,删除,修改

---
 src/api/api.js                       |   45 ++
 src/assets/lang/zh.js                |  155 ++++---
 src/assets/lang/en.js                |  169 ++++----
 src/views/userManage/roleDepTree.vue |  351 ++++++++++++++++++
 src/views/userManage/roleManage.vue  |  410 +++++++++++++++++++--
 5 files changed, 924 insertions(+), 206 deletions(-)

diff --git a/src/api/api.js b/src/api/api.js
index 3596062..2f67fd9 100644
--- a/src/api/api.js
+++ b/src/api/api.js
@@ -6,30 +6,61 @@
  * @LastEditors: 鐜嬫棴
  * @LastEditTime: 2022-04-19 20:29:30
  */
-import request from "@/utils/request";
+import request from '@/utils/request';
 
 //瀛楀吀绠$悊鍒楄〃
 export function selectByPageAndCount(params) {
   //璇锋眰鍦板潃
-  return request.get("/dict/selectByPageAndCount", {params:params});
+  return request.get('/dict/selectByPageAndCount', { params: params });
 }
 //瀛楀吀绠$悊鍒楄〃
 export function selectDictTab(params) {
   //璇锋眰鍦板潃
-  return request.get("/dict/selectDictTab", {params:params});
+  return request.get('/dict/selectDictTab', { params: params });
 }
 //瀛楀吀绠$悊鍒楄〃鍒犻櫎
 export function deleteDicts(params) {
   //璇锋眰鍦板潃
-  return request.get("/dict/deleteDicts", {params:params});
+  return request.get('/dict/deleteDicts', { params: params });
 }
 //瀛楀吀绠$悊鍒楄〃缂栬緫
 export function updateDict(params) {
   //璇锋眰鍦板潃
-  return request.post("/dict/updateDict", params);
+  return request.post('/dict/updateDict', params);
 }
 //瀛楀吀绠$悊鏂板
 export function insertDict(params) {
   //璇锋眰鍦板潃
-  return request.post("/dict/insertDict", params);
-}
\ No newline at end of file
+  return request.post('/dict/insertDict', params);
+}
+
+//瑙掕壊绠$悊鍒楄〃
+export function select_Role_ByPageAndCount(params) {
+  //璇锋眰鍦板潃
+  return request.get('/role/selectByPageAndCount', { params: params });
+}
+//瑙掕壊绠$悊鏂板
+export function insertRole(params) {
+  //璇锋眰鍦板潃
+  return request.post('/role/insertRole', params);
+}
+//瑙掕壊绠$悊鍒犻櫎
+export function deleteRole(params) {
+  //璇锋眰鍦板潃
+  return request.get('/role/deleteRole', { params: params });
+}
+//瑙掕壊绠$悊淇敼
+export function updateRole(params) {
+  //璇锋眰鍦板潃
+  return request.post('/role/updateRole', params);
+}
+//缁勭粐鏈烘瀯鍒楄〃
+export function selectdepTab(params) {
+  //璇锋眰鍦板潃
+  return request.get('/dep/selectDepAll', { params: params });
+}
+//缁勭粐鏈烘瀯鏍规嵁id鏌ヨ
+export function selectDep(params) {
+  //璇锋眰鍦板潃
+  return request.get('/dep/selectDep', { params: params });
+}
diff --git a/src/assets/lang/en.js b/src/assets/lang/en.js
index c3fe8d7..8fa9a3a 100644
--- a/src/assets/lang/en.js
+++ b/src/assets/lang/en.js
@@ -27,40 +27,40 @@
     SpatialData: 'SpatialData',
     versionManage: 'versionManage',
     dictionaryManage: 'dictionaryManage',
-    dictionaryManageObj:{
-      tableName:"table name",
-      selectTableName:"select table name",
-      add:"add",
-      del:"delete",
-      number:"number",
-      fieldName:"field name",
-      fieldAliasName:"field alias name",
-      fieldType:"field Type",
-      fieldLength:"field length",
-      FieldPrecision:"Field Precision",
-      rangeAssociationTable:"range association table",
-      remark:"remark",
-      creationTime:"creation time",
-      createPersonnel:"create personnel",
-      updateTime:"update time",
-      updatePersonnel:"update personnel",
-      operation:"operation",
-      lookOver:"look over",
-      revamp:"revamp",
-      particulars:"particulars",
-      tableAliasName:"table alias name",
-      cancel:"cancel",
-      confirm:"confirm",
-      tips:"tips",
-      deletedSuccessfully:"deleted successfully",
-      DeleteFailed:"delete failed",
-      tipsDelete:"Are you sure you want to delete the selected content?",
-      FailedAdd:"Failed to add",
-      NewSuccess:"Successfully added",
-      tipsAdd:"Are you sure you want to add it?",
-      failModify:"fail to modify",
-      modifySuccessfully:"modify successfully",
-      tipsUp:"Are you sure to save the changes?",
+    dictionaryManageObj: {
+      tableName: 'table name',
+      selectTableName: 'select table name',
+      add: 'add',
+      del: 'delete',
+      number: 'number',
+      fieldName: 'field name',
+      fieldAliasName: 'field alias name',
+      fieldType: 'field Type',
+      fieldLength: 'field length',
+      FieldPrecision: 'Field Precision',
+      rangeAssociationTable: 'range association table',
+      remark: 'remark',
+      creationTime: 'creation time',
+      createPersonnel: 'create personnel',
+      updateTime: 'update time',
+      updatePersonnel: 'update personnel',
+      operation: 'operation',
+      lookOver: 'look over',
+      revamp: 'revamp',
+      particulars: 'particulars',
+      tableAliasName: 'table alias name',
+      cancel: 'cancel',
+      confirm: 'confirm',
+      tips: 'tips',
+      deletedSuccessfully: 'deleted successfully',
+      DeleteFailed: 'delete failed',
+      tipsDelete: 'Are you sure you want to delete the selected content?',
+      FailedAdd: 'Failed to add',
+      NewSuccess: 'Successfully added',
+      tipsAdd: 'Are you sure you want to add it?',
+      failModify: 'fail to modify',
+      modifySuccessfully: 'modify successfully',
+      tipsUp: 'Are you sure to save the changes?',
     },
     styleManage: 'styleManage',
   },
@@ -378,45 +378,45 @@
       fv9: 'Other',
     },
     orgManage: 'Org Manage',
-    orgManageObj:{
-      companyName:"companyName",
-      flatType:"flatType",
-      inquire:"inquire",
-      delete:"delete",
-      add:"add",
-      num:"num",
-      phone:"phone",
-      operate:"operate",
-      edit:"edit",
-      unitInformation:"unitInformation",
-      userList:"userList",
-      username:"username",
-      ChineseNameUsername:"ChineseName username",
-      phoneNumberToTeceiveShortMessages:"phoneNumber to teceiveShort messages",
-      status:"status",
-      confirm:"confirm",
-      close:"close",
-      administrativeDvisionsList:"administrativeDvisions List",
-      name:"name",
-      coding:"coding",
-      codeOfAdministrativeDivision:"code of administrative division",
-      LevelForExaminationAndApproval:"Level for examination and approval",
-      seaAreaUseClass:"seaAreaUseClass",
-      reset:"reset",
-      immediatelyCreate:"immediatelyCreate",
-      pinyinInitials:"pinyinInitials",
-      abbreviation:"abbreviation",
-      unitCode:"unitCode",
-      organizationCode:"organizationCode",
-      companyAdministrator:"companyAdministrator",
-      picture:"picture",
-      division:"division",
-      EMail:"EMail",
-      fax:"fax",
-      postalCode:"postalCode",
-      website:"website",
-      cmpanyAddress:"cmpanyAddress",
-      companyIntroduction:"companyIntroduction",
+    orgManageObj: {
+      companyName: 'companyName',
+      flatType: 'flatType',
+      inquire: 'inquire',
+      delete: 'delete',
+      add: 'add',
+      num: 'num',
+      phone: 'phone',
+      operate: 'operate',
+      edit: 'edit',
+      unitInformation: 'unitInformation',
+      userList: 'userList',
+      username: 'username',
+      ChineseNameUsername: 'ChineseName username',
+      phoneNumberToTeceiveShortMessages: 'phoneNumber to teceiveShort messages',
+      status: 'status',
+      confirm: 'confirm',
+      close: 'close',
+      administrativeDvisionsList: 'administrativeDvisions List',
+      name: 'name',
+      coding: 'coding',
+      codeOfAdministrativeDivision: 'code of administrative division',
+      LevelForExaminationAndApproval: 'Level for examination and approval',
+      seaAreaUseClass: 'seaAreaUseClass',
+      reset: 'reset',
+      immediatelyCreate: 'immediatelyCreate',
+      pinyinInitials: 'pinyinInitials',
+      abbreviation: 'abbreviation',
+      unitCode: 'unitCode',
+      organizationCode: 'organizationCode',
+      companyAdministrator: 'companyAdministrator',
+      picture: 'picture',
+      division: 'division',
+      EMail: 'EMail',
+      fax: 'fax',
+      postalCode: 'postalCode',
+      website: 'website',
+      cmpanyAddress: 'cmpanyAddress',
+      companyIntroduction: 'companyIntroduction',
     },
     userAuditing: 'User Auditing',
     UA: {
@@ -442,16 +442,23 @@
     },
     roleManage: 'Role Manage',
     RM: {
-      roleName: 'roleName',
-      ownedSystem: 'ownedSystem',
-      add: 'add',
-      query: 'query',
-      reset: 'reset',
-      index: 'index',
+      roleName: 'RoleName',
+      ownedSystem: 'Affiliated unit',
+      add: 'Add',
+      query: 'Query',
+      reset: 'Reset',
+      index: 'Index',
       Permission: 'Permission',
       resourcePermission: 'Resource Permission',
-      groupSetting: 'groupSetting',
-      one: 'one',
+      groupSetting: 'GroupSetting',
+      one: 'One',
+      describe: 'Describe',
+      remarks: 'Remarks',
+      creationtime: 'Creation Time',
+      creationuser: 'Creation Personne',
+      updateontime: 'Update Time',
+      updateonuser: 'Update Personnel',
+      insertRole: 'Add role information',
     },
     groupManage: 'groupManage',
     GM: {
diff --git a/src/assets/lang/zh.js b/src/assets/lang/zh.js
index 1387777..24bb436 100644
--- a/src/assets/lang/zh.js
+++ b/src/assets/lang/zh.js
@@ -27,40 +27,40 @@
     SpatialData: '绌洪棿鏁版嵁绠$悊',
     versionManage: '鐗堟湰绠$悊',
     dictionaryManage: '瀛楀吀绠$悊',
-    dictionaryManageObj:{
-      tableName:"琛ㄥ悕绉�",
-      selectTableName:"閫夋嫨琛ㄥ悕绉�",
-      add:"鏂板",
-      del:"鍒犻櫎",
-      number:"缂栧彿",
-      fieldName:"瀛楁鍚嶇О",
-      fieldAliasName:"瀛楁鏄剧ず鍚嶇О",
-      fieldType:"瀛楁绫诲瀷",
-      fieldLength:"瀛楁闀垮害",
-      FieldPrecision:"瀛楁绮惧害",
-      rangeAssociationTable:"鍊煎煙鍏宠仈琛�",
-      remark:"澶囨敞",
-      creationTime:"鍒涘缓鏃堕棿",
-      createPersonnel:"鍒涘缓浜哄憳",
-      updateTime:"鏇存柊鏃堕棿",
-      updatePersonnel:"鏇存柊浜哄憳",
-      operation:"鎿嶄綔",
-      lookOver:"鏌ョ湅",
-      revamp:"淇敼",
-      particulars:"璇︾粏淇℃伅",
-      tableAliasName:"琛ㄦ樉绀哄悕绉�",
-      cancel:"鍙� 娑�",
-      confirm:"纭� 瀹�",
-      tips:"鎻愮ず",
-      deletedSuccessfully:"鍒犻櫎鎴愬姛!",
-      DeleteFailed:"鍒楄〃鍒犻櫎澶辫触",
-      tipsDelete:"纭畾鏄惁鍒犻櫎鎵�閫夊唴瀹�?",
-      NewSuccess:"鏂板鎴愬姛",
-      FailedAdd:"鏂板澶辫触",
-      tipsAdd:"鏄惁纭畾娣诲姞?",
-      failModify:"淇敼澶辫触",
-      modifySuccessfully:"淇敼鎴愬姛",
-      tipsUp:"鏄惁纭畾淇濆瓨淇敼鍐呭?",
+    dictionaryManageObj: {
+      tableName: '琛ㄥ悕绉�',
+      selectTableName: '閫夋嫨琛ㄥ悕绉�',
+      add: '鏂板',
+      del: '鍒犻櫎',
+      number: '缂栧彿',
+      fieldName: '瀛楁鍚嶇О',
+      fieldAliasName: '瀛楁鏄剧ず鍚嶇О',
+      fieldType: '瀛楁绫诲瀷',
+      fieldLength: '瀛楁闀垮害',
+      FieldPrecision: '瀛楁绮惧害',
+      rangeAssociationTable: '鍊煎煙鍏宠仈琛�',
+      remark: '澶囨敞',
+      creationTime: '鍒涘缓鏃堕棿',
+      createPersonnel: '鍒涘缓浜哄憳',
+      updateTime: '鏇存柊鏃堕棿',
+      updatePersonnel: '鏇存柊浜哄憳',
+      operation: '鎿嶄綔',
+      lookOver: '鏌ョ湅',
+      revamp: '淇敼',
+      particulars: '璇︾粏淇℃伅',
+      tableAliasName: '琛ㄦ樉绀哄悕绉�',
+      cancel: '鍙� 娑�',
+      confirm: '纭� 瀹�',
+      tips: '鎻愮ず',
+      deletedSuccessfully: '鍒犻櫎鎴愬姛!',
+      DeleteFailed: '鍒楄〃鍒犻櫎澶辫触',
+      tipsDelete: '纭畾鏄惁鍒犻櫎鎵�閫夊唴瀹�?',
+      NewSuccess: '鏂板鎴愬姛',
+      FailedAdd: '鏂板澶辫触',
+      tipsAdd: '鏄惁纭畾娣诲姞?',
+      failModify: '淇敼澶辫触',
+      modifySuccessfully: '淇敼鎴愬姛',
+      tipsUp: '鏄惁纭畾淇濆瓨淇敼鍐呭?',
     },
     styleManage: '鏍峰紡绠$悊',
   },
@@ -377,45 +377,45 @@
       fv9: '鍏朵粬',
     },
     orgManage: '缁勭粐鏈烘瀯绠$悊',
-    orgManageObj:{
-      companyName:"鍗曚綅鍚嶇О",
-      flatType:"鍗曚綅绫诲瀷",
-      inquire:"鏌ヨ",
-      delete:"娓呴櫎",
-      add:"鏂板",
-      num:"搴忓彿",
-      phone:"鑱旂郴鐢佃瘽",
-      operate:"鎿嶄綔",
-      edit:"缂栬緫",
-      unitInformation:"鍗曚綅淇℃伅",
-      userList:"鐢ㄦ埛-鍒楄〃",
-      username:"鐢ㄦ埛鍚嶇О",
-      ChineseNameUsername:"涓枃鍚嶃�愮敤鎴峰悕銆�",
-      phoneNumberToTeceiveShortMessages:"鎵嬫満鍙枫�愭帴鏀剁煭淇°��",
-      status:"鐘舵��",
-      confirm:"纭畾",
-      close:"鍏抽棴",
-      administrativeDvisionsList:"琛屾斂鍖哄垝-鍒楄〃",
-      name:"鍖哄煙鍚嶇О",
-      coding:"缂栫爜",
-      codeOfAdministrativeDivision:"琛屾斂鍖哄垝浠g爜",
-      LevelForExaminationAndApproval:"瀹℃壒绾у埆",
-      seaAreaUseClass:"娴峰煙浣跨敤绛夌骇",
-      reset:"閲嶇疆",
-      immediatelyCreate:"绔嬪嵆鍒涘缓",
-      pinyinInitials:"鎷奸煶棣栧瓧姣�",
-      abbreviation:"鍗曚綅绠�绉�",
-      unitCode:"鍗曚綅缂栫爜",
-      organizationCode:"鍗曚綅缁勭粐鏈烘瀯浠g爜",
-      companyAdministrator:"鍗曚綅绠$悊鍛�",
-      picture:"鍥剧墖",
-      division:"鎵�灞炲尯鍒�",
-      EMail:"E-Mail鍦板潃",
-      fax:"浼犵湡",
-      postalCode:"閭斂缂栫爜",
-      website:"缃戝潃",
-      cmpanyAddress:"鍗曚綅鍦板潃",
-      companyIntroduction:"鍗曚綅浠嬬粛",
+    orgManageObj: {
+      companyName: '鍗曚綅鍚嶇О',
+      flatType: '鍗曚綅绫诲瀷',
+      inquire: '鏌ヨ',
+      delete: '娓呴櫎',
+      add: '鏂板',
+      num: '搴忓彿',
+      phone: '鑱旂郴鐢佃瘽',
+      operate: '鎿嶄綔',
+      edit: '缂栬緫',
+      unitInformation: '鍗曚綅淇℃伅',
+      userList: '鐢ㄦ埛-鍒楄〃',
+      username: '鐢ㄦ埛鍚嶇О',
+      ChineseNameUsername: '涓枃鍚嶃�愮敤鎴峰悕銆�',
+      phoneNumberToTeceiveShortMessages: '鎵嬫満鍙枫�愭帴鏀剁煭淇°��',
+      status: '鐘舵��',
+      confirm: '纭畾',
+      close: '鍏抽棴',
+      administrativeDvisionsList: '琛屾斂鍖哄垝-鍒楄〃',
+      name: '鍖哄煙鍚嶇О',
+      coding: '缂栫爜',
+      codeOfAdministrativeDivision: '琛屾斂鍖哄垝浠g爜',
+      LevelForExaminationAndApproval: '瀹℃壒绾у埆',
+      seaAreaUseClass: '娴峰煙浣跨敤绛夌骇',
+      reset: '閲嶇疆',
+      immediatelyCreate: '绔嬪嵆鍒涘缓',
+      pinyinInitials: '鎷奸煶棣栧瓧姣�',
+      abbreviation: '鍗曚綅绠�绉�',
+      unitCode: '鍗曚綅缂栫爜',
+      organizationCode: '鍗曚綅缁勭粐鏈烘瀯浠g爜',
+      companyAdministrator: '鍗曚綅绠$悊鍛�',
+      picture: '鍥剧墖',
+      division: '鎵�灞炲尯鍒�',
+      EMail: 'E-Mail鍦板潃',
+      fax: '浼犵湡',
+      postalCode: '閭斂缂栫爜',
+      website: '缃戝潃',
+      cmpanyAddress: '鍗曚綅鍦板潃',
+      companyIntroduction: '鍗曚綅浠嬬粛',
     },
     userAuditing: '鐢ㄦ埛瀹℃牳',
     UA: {
@@ -443,7 +443,7 @@
     roleManage: '瑙掕壊绠$悊',
     RM: {
       roleName: '瑙掕壊鍚嶇О',
-      ownedSystem: '鎵�灞炵郴缁�',
+      ownedSystem: '鎵�灞炲崟浣�',
       add: '鏂板',
       query: '鏌ヨ',
       reset: '娓呴櫎',
@@ -453,6 +453,13 @@
       groupSetting: '缇ょ粍璁剧疆',
       operate: '鎿嶄綔',
       one: '涓�寮犲浘',
+      describe: '鎻忚堪',
+      remarks: '澶囨敞',
+      creationtime: '鍒涘缓鏃堕棿',
+      creationuser: '鍒涘缓浜哄憳',
+      updateontime: '淇敼鏃堕棿',
+      updateonuser: '淇敼浜哄憳',
+      insertRole: '娣诲姞瑙掕壊淇℃伅',
     },
     groupManage: '缇ょ粍绠$悊',
     GM: {
diff --git a/src/views/userManage/roleDepTree.vue b/src/views/userManage/roleDepTree.vue
new file mode 100644
index 0000000..5bc0272
--- /dev/null
+++ b/src/views/userManage/roleDepTree.vue
@@ -0,0 +1,351 @@
+<template>
+  <div class="wrap">
+    <div class="bread">
+      <el-breadcrumb separator="el-icon-arrow-right">
+        <el-breadcrumb-item>{{ breadLabel }}</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+    <div class="treeBox">
+      <el-tree
+        ref="tree"
+        :props="defaultProps"
+        node-key="id"
+        :data="dirData"
+        :expand-on-click-node="false"
+        :default-expanded-keys="[1, 2, 3, 4, 5, 6, 7, 8, 9]"
+        :draggable="draggable"
+        @node-drag-start="handleDragStart"
+        @node-click="handleNodeClick"
+        @node-drop="handleDrop"
+      >
+        <span class="custom-tree-node" slot-scope="{ node, data }">
+          <span>{{ node.label }}</span>
+          <span class="btnBox" v-show="showEdit">
+            <el-button type="text" size="mini" @click="() => append(data)">
+              <i class="el-icon-circle-plus"></i>
+            </el-button>
+            <el-button
+              type="text"
+              size="mini"
+              @click="() => remove(node, data)"
+            >
+              <i class="el-icon-delete-solid"></i>
+            </el-button>
+          </span>
+        </span>
+      </el-tree>
+      <!-- <div style="margin-left:130px;">
+        <el-button @click="sendChange">淇濆瓨</el-button>
+      </div> -->
+    </div>
+  </div>
+</template>
+
+<script>
+import { selectdepTab } from '../../api/api';
+export default {
+  name: 'catalogueTree',
+  props: ['showBtn'],
+  data() {
+    return {
+      draggable: false,
+      id: null,
+      showEdit: false,
+      showBread: false,
+      oriData: [], //鍘熷鏍戞暟鎹�
+      dirData: [], //el鏍戞暟鎹�
+      old_dirDat: [], //el鏍戞暟鎹�(鎷栧姩鍓�)
+      newData: [], //鎷栧姩鍚庡師濮嬫暟鎹�
+      breadList: [], //闈㈠寘灞戞暟缁�
+      breadLabel: '', //闈㈠寘灞戞枃瀛�
+      filterText: '',
+      defaultProps: {
+        children: 'children',
+        label: 'name',
+      },
+    };
+  },
+
+  methods: {
+    // 璇锋眰鐩綍鏍�
+    async getDirTree() {
+      this.selectData = [];
+      const data = await selectdepTab();
+      if (data.code != 200) {
+        this.$message.error('涓嬫媺璋冪敤澶辫触');
+      } else {
+        this.oriData = data.result;
+        this.newData = data.result;
+        this.dirData = this.treeData(data.result);
+      }
+    },
+    treeData(source) {
+      let cloneData = JSON.parse(JSON.stringify(source)); // 瀵规簮鏁版嵁娣卞害鍏嬮殕
+      return cloneData.filter((father) => {
+        // 寰幆鎵�鏈夐」
+        let branchArr = cloneData.filter((child) => father.id == child.pid); // 瀵规瘮ID锛屽垎鍒笂涓嬬骇鑿滃崟锛屽苟杩斿洖鏁版嵁
+        branchArr.length > 0 ? (father.children = branchArr) : ''; // 缁欑埗绾ф坊鍔犱竴涓猚hildren灞炴�э紝骞惰祴鍊�
+        // 灞炰簬鍚屼竴瀵硅薄闂锛屼緥濡傦細浠� a=b銆乧=1 锛岀劧鍚庡啀浠� b.c=c 锛� 閭d箞 a.c=b.c=c=1 锛涘悓鐞嗭紝鍚庣画浠� c.d=2 ,閭d箞 a.c.d 涔熸槸=2锛�
+        // 鐢辨寰幆澶氭鍚庯紝灏辫兘褰㈡垚鐩稿簲鐨勬爲褰㈡暟鎹粨鏋�
+        return father.pid == 0; // 杩斿洖涓�绾ц彍鍗�
+      });
+    },
+    append(data) {
+      this.$prompt('璇疯緭鍏ュ悕绉�', '鎻愮ず', {
+        confirmButtonText: '纭畾',
+        cancelButtonText: '鍙栨秷',
+      })
+        .then(({ value }) => {
+          const newChild = {
+            id: this.id + 1,
+            name: value,
+            pid: data.id,
+            // children: [],
+            oid: data.children ? data.children.length + 1 : 1,
+          };
+          this.id = newChild.id; //淇敼鏂扮殑鏈�澶
+          console.log(newChild);
+
+          if (!data.children) {
+            this.$set(data, 'children', []);
+          }
+          data.children.push(newChild);
+          this.newData.push(newChild);
+          this.sendChange();
+        })
+        .catch(() => {
+          this.$message({
+            type: 'info',
+            message: '鍙栨秷杈撳叆',
+          });
+        });
+    },
+    remove(node, data) {
+      this.$confirm('姝ゆ搷浣滃皢鍒犻櫎璇ヨ妭鐐�, 鏄惁缁х画?', '鎻愮ず', {
+        confirmButtonText: '纭畾',
+        cancelButtonText: '鍙栨秷',
+        type: 'warning',
+      })
+        .then(() => {
+          const parent = node.parent;
+          const children = parent.data.children || parent.data;
+          const index = children.findIndex((d) => d.id === data.id);
+          let res = children.splice(index, 1);
+          var std = [];
+          for (var i in res) {
+            std.push(res[i].id);
+          }
+          deleteDirTree(std);
+          this.getDirTree();
+          this.$message({
+            type: 'success',
+            message: '鍒犻櫎鎴愬姛!',
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: 'info',
+            message: '宸插彇娑堝垹闄�',
+          });
+        });
+      // this.dialogMessage="鏄惁鍒犻櫎"
+      // this.dialogFlag = 1;
+      // this.dialogFrom ={
+      //   node:node,
+      //   val:data
+      // }
+      //   this.dialogVisible=true;//鐩綍鏍戞洿鏀瑰脊绐�
+      // const parent = node.parent;
+      // const children = parent.data.children || parent.data;
+      // const index = children.findIndex((d) => d.id === data.id);
+      // let res = children.splice(index, 1);
+      // // console.log(res);
+      // // console.log(data);
+      // console.log(this.flaten(res));
+    },
+    flaten(arr) {
+      return arr.reduce((p, v, i) => {
+        for (let i = 0; i < p.length; i++) {
+          if (p[i].children) {
+            delete p[i].children;
+          }
+        }
+        return p.concat(v.children ? this.flaten(v.children).concat(v) : v);
+      }, []);
+    },
+    handleNodeClick(data) {
+      // console.log(data);
+      this.$store.commit('changeNode', data);
+      this.breadList = [];
+      this.getTreeNode(this.$refs.tree.getNode(data.id));
+    },
+    getTreeNode(node) {
+      if (node && node.label) {
+        this.breadList.unshift(node.label);
+        this.getTreeNode(node.parent); //閫掑綊
+        this.breadLabel = this.breadList.join('>');
+        this.$store.commit('changeCata', this.breadLabel);
+      }
+    },
+    handleDragStart(node, ev) {
+      this.old_dirDat = JSON.parse(JSON.stringify(this.dirData)); //灏嗗浠界殑dir閲嶆柊璧嬪��
+    },
+
+    handleDrop(draggingNode, dropNode, dropType, ev) {
+      // console.log("琚嫋鎷借妭鐐�", draggingNode);
+      // console.log("杩涘叆鐨勮妭鐐�", dropNode);
+      // console.log("鏀剧疆浣嶇疆", dropType);
+      // console.log("浜嬩欢", ev);
+      // if (dropType !== "inner") {
+      //   // 1.淇敼鐖惰妭鐐筽id
+      //   draggingNode.data.pid = dropNode.data.pid;
+      //   dropNode.parent.childNodes.forEach((item, index) => {
+      //     // 2.淇敼鑷韩椤哄簭oid
+      //     item.data.oid = index + 1;
+      //   });
+      // }
+      // // console.log(draggingNode.data.id);
+      // let res = this.oriData.filter((item) => item.id == draggingNode.data.id);
+      // console.log(res);
+      this.$confirm('姝ゆ搷浣滃皢淇濆瓨鐩綍鏇存敼, 鏄惁缁х画?', '鎻愮ず', {
+        confirmButtonText: '纭畾',
+        cancelButtonText: '鍙栨秷',
+        type: 'warning',
+      })
+        .then(() => {
+          let paramData = [];
+          let data = dropType != 'inner' ? dropNode.parent.data : dropNode.data;
+          let nodeData =
+            dropNode.level == 1 && dropType != 'inner' ? data : data.children;
+          let pid = '';
+          nodeData.forEach((item, i) => {
+            if (dropType != 'inner') {
+              if (draggingNode.data.pid === dropNode.data.pid) {
+                pid = item.pid;
+              } else {
+                pid = dropNode.data.pid;
+              }
+            } else {
+              pid = data.id;
+            }
+            let collection = {
+              id: item.id,
+              name: item.name,
+              pid,
+              oid: i + 1,
+            };
+            paramData.push(collection);
+          });
+          // console.log(paramData);
+          let arr = [];
+          this.oriData.forEach((e) => {
+            paramData.forEach((item) => {
+              if (item.id === e.id) {
+                e = item;
+              }
+            });
+            arr.push(e);
+          });
+          this.newData = arr;
+          this.sendChange();
+          this.$message({
+            type: 'success',
+            message: '鏇存敼鎴愬姛!',
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: 'info',
+            message: '宸插彇娑堟洿鏀�',
+          });
+          this.dirData = this.old_dirDat; //灏嗗浠界殑dir閲嶆柊璧嬪��
+        });
+    },
+
+    sendChange() {
+      updateDirTree(this.newData).then((res) => {
+        console.log(res);
+        if (res.status == 200) {
+          this.$message({
+            type: 'success',
+            message: '鏇存柊鎴愬姛!',
+          });
+        }
+      });
+    },
+  },
+  mounted() {
+    this.getDirTree();
+  },
+  watch: {
+    showBtn: {
+      immediate: true,
+      handler(val) {
+        if (val) {
+          this.showEdit = val;
+          this.draggable = val;
+        }
+      },
+    },
+    showBread: {
+      immediate: true,
+      handler(val) {
+        if (val) this.showBread = val;
+      },
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.wrap {
+  width: 98.5%;
+  height: 100%;
+
+  .bread {
+    width: 100%;
+    height: 5%;
+    margin: 0 auto;
+    overflow: auto;
+  }
+
+  .treeBox {
+    margin-top: 1%;
+    width: 100%;
+    height: 94%;
+    overflow: auto;
+
+    .el-tree {
+      background: transparent;
+      font-size: 15px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #000000;
+
+      // /deep/ .el-tree-node__label {
+      //   font-size: 18px;
+      // }
+      /deep/ .el-tree-node {
+        padding-top: 10px;
+        // padding-bottom: 10px;
+      }
+
+      /deep/ .el-tree-node:focus > .el-tree-node__content {
+        background-color: #b9b9b9;
+      }
+
+      /deep/ .el-tree-node__content:hover {
+        background-color: rgb(153, 153, 153);
+      }
+
+      .btnBox {
+        margin-left: 5px;
+
+        .el-button + .el-button {
+          margin-left: 5px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/userManage/roleManage.vue b/src/views/userManage/roleManage.vue
index 2cff3e6..7d0137e 100644
--- a/src/views/userManage/roleManage.vue
+++ b/src/views/userManage/roleManage.vue
@@ -16,29 +16,34 @@
           :label="$t('userManage.RM.ownedSystem')"
           prop="ownedSystem"
         >
-          <el-select v-model="roleForm.ownedSystem">
-            <el-option :label="$t('userManage.RM.one')" value="one" />
-          </el-select>
+          <el-input
+            v-model="roleForm.value"
+            :disabled="true"
+            :placeholder="$t('common.pleaseInput')"
+          />
+          <el-button style="margin-left: 20px" @click="showDepTree(1)">{{
+            $t('common.choose')
+          }}</el-button>
         </el-form-item>
         <br />
         <el-form-item>
-          <el-button
+          <el-button @click="InsertFormdialog = true"
             ><i class="el-icon-circle-plus-outline"></i> &nbsp;{{
-              $t("userManage.RM.add")
+              $t('userManage.RM.add')
             }}</el-button
           >
         </el-form-item>
         <el-form-item>
           <el-button
             ><i class="el-icon-search"></i> &nbsp;{{
-              $t("userManage.RM.query")
+              $t('userManage.RM.query')
             }}</el-button
           >
         </el-form-item>
         <el-form-item>
           <el-button @click="resetForm('ruleForm')"
             ><i class="el-icon-delete"></i>&nbsp;{{
-              $t("userManage.RM.reset")
+              $t('userManage.RM.reset')
             }}</el-button
           >
         </el-form-item>
@@ -52,100 +57,396 @@
           :label="$t('userManage.RM.index')"
           width="70px"
         />
+        <el-table-column align="center" prop="id" v-if="false" />
         <el-table-column
           align="center"
-          prop="roleName"
+          prop="name"
           :label="$t('userManage.RM.roleName')"
         />
 
         <el-table-column
           align="center"
-          prop="ownedSystem"
+          prop="depid"
           :label="$t('userManage.RM.ownedSystem')"
         />
         <el-table-column
           align="center"
-          prop="Permission"
-          :label="$t('userManage.RM.Permission')"
+          prop="descr"
+          :label="$t('userManage.RM.describe')"
+        />
+
+        <el-table-column
+          align="center"
+          prop="createUser"
+          :label="$t('userManage.RM.creationuser')"
         />
         <el-table-column
           align="center"
-          prop="resourcePermission"
-          :label="$t('userManage.RM.resourcePermission')"
+          prop="createTime"
+          :label="$t('userManage.RM.creationtime')"
         />
         <el-table-column
           align="center"
-          prop="roleSetting"
-          :label="$t('userManage.RM.groupSetting')"
+          prop="UpdateUser"
+          :label="$t('userManage.RM.updateonuser')"
+        />
+        <el-table-column
+          align="center"
+          prop="updateTime"
+          :label="$t('userManage.RM.updateontime')"
+        />
+        <el-table-column
+          align="center"
+          prop="bak"
+          :label="$t('userManage.RM.remarks')"
         />
         <el-table-column
           fixed="right"
           :label="$t('common.operate')"
-          width="300"
+          width="200"
         >
-          <template #default>
-            <el-button type="warning" size="small">{{
-              $t("common.update")
-            }}</el-button>
-            <el-button type="danger" size="small">{{
-              $t("common.delete")
-            }}</el-button>
+          <template slot-scope="scope">
+            <el-button
+              type="warning"
+              @click="handleEdit(scope.$index, scope.row)"
+              size="small"
+              >{{ $t('common.update') }}</el-button
+            >
+            <el-button
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)"
+              size="small"
+              >{{ $t('common.delete') }}</el-button
+            >
           </template>
         </el-table-column>
       </el-table>
-      <div style="margin-top: 40px" class="pagination_box">
+      <div style="margin-top: 25px" class="pagination_box">
         <el-pagination
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
-          :current-page="currentPage"
+          :current-page="listData.pageIndex"
           :page-sizes="[10, 20, 30, 40]"
-          :page-size="10"
+          :page-size="listData.pageSize"
           layout="total, sizes, prev, pager, next, jumper"
-          :total="0"
+          :total="count"
         >
         </el-pagination>
       </div>
     </div>
+    <el-dialog
+      :title="$t('userManage.RM.insertRole')"
+      top="15vh"
+      width="80vh"
+      style="overflow: hidden"
+      :visible.sync="InsertFormdialog"
+    >
+      <el-form :model="insertform">
+        <el-form-item
+          :label="$t('userManage.RM.roleName')"
+          :label-width="formLabelWidth"
+        >
+          <el-input v-model="insertform.name" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item
+          :label="$t('userManage.RM.ownedSystem')"
+          :label-width="formLabelWidth"
+          :prop="insertform.depValue"
+          :rules="[{ required: true, message: '涓嶈兘涓虹┖' }]"
+        >
+          <el-input
+            v-model="insertform.depValue"
+            :disabled="true"
+            :placeholder="$t('common.pleaseInput')"
+          />
+          <el-button style="margin-left: 20px" @click="showDepTree(2)">{{
+            $t('common.choose')
+          }}</el-button>
+        </el-form-item>
+        <el-form-item
+          :label="$t('userManage.RM.describe')"
+          :label-width="formLabelWidth"
+        >
+          <el-input v-model="insertform.descr" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item
+          :label="$t('userManage.RM.remarks')"
+          :label-width="formLabelWidth"
+        >
+          <el-input v-model="insertform.bak" autocomplete="off"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="insertFromClose">{{ $t('common.close') }}</el-button>
+        <el-button type="primary" @click="insertFromData">{{
+          $t('common.confirm')
+        }}</el-button>
+      </div>
+    </el-dialog>
+    <el-dialog
+      :title="$t('userManage.RM.insertRole')"
+      top="15vh"
+      width="80vh"
+      style="overflow: hidden"
+      :visible.sync="UpdateFormdialog"
+    >
+      <el-form :model="updateform">
+        <el-form-item
+          :label="$t('userManage.RM.roleName')"
+          :label-width="formLabelWidth"
+        >
+          <el-input v-model="updateform.name" autocomplete="off"></el-input>
+        </el-form-item>
+
+        <el-form-item
+          :label="$t('userManage.RM.ownedSystem')"
+          :label-width="formLabelWidth"
+          :prop="updateform.depValue"
+        >
+          <el-input
+            v-model="updateform.depValue"
+            :disabled="true"
+            :placeholder="$t('common.pleaseInput')"
+          />
+          <el-button style="margin-left: 20px" @click="showDepTree(3)">{{
+            $t('common.choose')
+          }}</el-button>
+        </el-form-item>
+        <el-form-item
+          :label="$t('userManage.RM.describe')"
+          :label-width="formLabelWidth"
+        >
+          <el-input v-model="updateform.descr" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item
+          :label="$t('userManage.RM.remarks')"
+          :label-width="formLabelWidth"
+        >
+          <el-input v-model="updateform.bak" autocomplete="off"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="updateFromClose">{{ $t('common.close') }}</el-button>
+        <el-button type="primary" @click="updateFromData">{{
+          $t('common.confirm')
+        }}</el-button>
+      </div>
+    </el-dialog>
+    <div class="leftTree" v-if="showCata">
+      <div class="treeBox">
+        <role-dep-tree></role-dep-tree>
+      </div>
+      <div class="btnBox">
+        <el-button type="primary" size="small" @click="selectCataName"
+          >纭畾</el-button
+        >
+        <el-button type="primary" size="small" @click="showCata = false"
+          >鍙栨秷</el-button
+        >
+      </div>
+    </div>
   </div>
 </template>
-  
-  <script>
-import MyBread from "../../components/MyBread.vue";
 
+<script>
+import MyBread from '../../components/MyBread.vue';
+import roleDepTree from './roleDepTree.vue';
+import {
+  select_Role_ByPageAndCount,
+  selectdepTab,
+  insertRole,
+  deleteRole,
+  selectDep,
+  updateRole,
+} from '../../api/api';
 export default {
   //import寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢�
   components: {
     MyBread,
+    roleDepTree,
   },
-
   data() {
     return {
-      currentPage: 1,
-      roleForm: {
-        groupName: "",
-        ownedSystem: "",
-      },
+      showCata: false,
+      formLabelWidth: '120px',
+      InsertFormdialog: false,
+      UpdateFormdialog: false,
+      roleForm: {},
+      cataName: '',
+      depValue: '',
+      elTreeFlag: 0,
+      path_id: '',
       tableData: [],
+      insertform: {},
+      updateform: {},
+      count: 0,
+      selData: [],
+      listData: {
+        pageIndex: 1,
+        pageSize: 10,
+      },
     };
   },
   methods: {
+    showDepTree(res) {
+      this.showCata = true;
+      this.elTreeFlag = res;
+    },
+    selectCataName() {
+      this.cataName = this.$store.state.catalogueName;
+      this.path_id = this.$store.state.cataNode.id;
+      var value;
+      if (this.cataName.indexOf('>') != -1) {
+        var data = this.$store.state.catalogueName.split('>');
+        value = data[data.length - 1];
+      } else {
+        value = this.$store.state.catalogueName;
+      }
+      this.$store.commit('changeCata', ''); //娓呯┖state鐨勯潰鍖呭睉
+      this.$store.commit('changeNode', ''); //娓呯┖state鐨勮妭鐐瑰璞�
+      this.showCata = false;
+      switch (this.elTreeFlag) {
+        case 1:
+          this.roleForm.value = value;
+
+          break;
+        case 2:
+          this.insertform.depid = this.path_id;
+          this.insertform.depValue = value;
+          break;
+        case 3:
+          this.updateform.depid = this.path_id;
+          this.updateform.depValue = value;
+          break;
+      }
+    },
+    async getRoleTabelData() {
+      if (this.listData.tab == '') {
+        delete this.listData.tab;
+      }
+      const data = await select_Role_ByPageAndCount(this.listData);
+      if (data.code != 200) {
+        this.$message.error('鍒楄〃璋冪敤澶辫触');
+      }
+      this.tableData = data.result;
+      this.count = data.count;
+    },
+    async getSelectDepTab() {
+      this.selectData = [];
+      const data = await selectdepTab();
+      if (data.code != 200) {
+        this.$message.error('涓嬫媺璋冪敤澶辫触');
+      }
+      data.result.forEach((e) => {
+        if (e) {
+          this.selData.push({
+            label: e.name,
+            value: e.id,
+          });
+        }
+      });
+    },
+    insertFromClose() {
+      this.InsertFormdialog = false;
+      this.insertform = {};
+    },
+    async insertFromData() {
+      if (this.insertform.depValue == null) {
+        this.$message({
+          message: '璇烽�夋嫨瑙掕壊鎵�灞炲崟浣�',
+          type: 'warning',
+        });
+        return;
+      }
+      const data = await insertRole(this.insertform);
+      if (data.code == 200) {
+        this.InsertFormdialog = false;
+        this.insertform = {};
+        this.$message({
+          message: '娣诲姞鎴愬姛锛�',
+          type: 'success',
+        });
+        this.getRoleTabelData();
+      } else {
+        this.$message({
+          message: '娣诲姞澶辫触锛�',
+          type: 'warning',
+        });
+      }
+    },
+    updateFromClose() {
+      this.UpdateFormdialog = false;
+      this.updateform = {};
+    },
+    async updateFromData() {
+      if (this.updateform.depValue == null) {
+        this.$message({
+          message: '璇烽�夋嫨瑙掕壊鎵�灞炲崟浣�',
+          type: 'warning',
+        });
+        return;
+      }
+      const data = await updateRole(this.updateform);
+      if (data.code == 200) {
+        this.UpdateFormdialog = false;
+        this.updateform = {};
+        this.$message({
+          message: '淇敼鎴愬姛锛�',
+          type: 'success',
+        });
+        this.getRoleTabelData();
+      } else {
+        this.$message({
+          message: '淇敼澶辫触锛�',
+          type: 'warning',
+        });
+      }
+    },
+    async handleDelete(index, row) {
+      const data = await deleteRole({ id: row.id.toString() });
+      if (data.code == 200) {
+        this.InsertFormdialog = false;
+        this.$message({
+          message: '鍒犻櫎鎴愬姛锛�',
+          type: 'success',
+        });
+        this.getRoleTabelData();
+      } else {
+        this.$message({
+          message: '鍒犻櫎澶辫触锛�',
+          type: 'warning',
+        });
+      }
+    },
     handleSizeChange(val) {
-      console.log(`姣忛〉 ${val} 鏉);
+      this.listData.pageSize = val;
+      this.getRoleTabelData();
     },
     handleCurrentChange(val) {
       console.log(`褰撳墠椤�: ${val}`);
+      this.listData.pageIndex = val;
+      this.getRoleTabelData();
+    },
+    async handleEdit(index, row) {
+      this.updateform = row;
+      const data = await selectDep({ id: row.depid });
+      this.updateform.depValue = data.result.name;
+      this.UpdateFormdialog = true;
     },
     onSubmit() {
-      console.log("submit!");
+      console.log('submit!');
     },
     resetForm(formName) {
       this.$refs[formName].resetFields();
     },
   },
-  created() {},
+  created() {
+    this.getRoleTabelData();
+    this.getSelectDepTab();
+  },
 };
 </script>
-  <style lang="less" scoped>
+<style lang="less" scoped>
 //@import url(); 寮曞叆鍏叡css绫�
 .logLog_box {
   background: rgb(240, 242, 245);
@@ -156,21 +457,43 @@
   .el-input {
     width: 300px;
   }
+  .leftTree {
+    position: absolute;
+    z-index: 9999;
+    top: 9%;
+    left: 37%;
+    width: 400px;
+    height: 600px;
+    background: #f0f2f5;
+    border: 1px solid #000;
+    .treeBox {
+      height: 550px;
+      overflow: auto;
+      /deep/ .el-tree-node__content:hover {
+        background-color: rgb(153, 153, 153);
+      }
+    }
+    .btnBox {
+      width: 123px;
+      margin: 10px auto 0;
+      // background-color: red;
+    }
+  }
   .inquire {
-    height: 110px;
+    height: 115px;
     overflow: auto;
     padding: 10px;
     margin-top: 20px;
     background: #fff;
     border-radius: 5px;
     border: 1px solid rgb(202, 201, 204);
-    margin-bottom: 20px;
+    margin-bottom: 10px;
     .el-form-item {
       margin: 7px;
     }
   }
   .table_box {
-    height: 65%;
+    height: 70%;
     padding: 10px;
     background: #fff;
     border-radius: 5px;
@@ -181,4 +504,3 @@
   }
 }
 </style>
-  
\ No newline at end of file

--
Gitblit v1.9.3