添加角色名称修改，角色显示顺序

epmet-oper-web/package-lock.json

@@ -16203,6 +16203,11 @@
         "is-plain-obj": "^1.0.0"
       }
     },
+    "sortablejs": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.12.0.tgz",
+      "integrity": "sha512-bPn57rCjBRlt2sC24RBsu40wZsmLkSo2XeqG8k6DC1zru5eObQUIPPZAQG7W2SJ8FZQYq+BEJmvuw1Zxb3chqg=="
+    },
     "source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",

epmet-oper-web/package.json

@@ -32,6 +32,7 @@
     "quill": "^1.3.6",
     "sass-loader": "^7.1.0",
     "screenfull": "^4.2.1",
+    "sortablejs": "^1.12.0",
     "svg-sprite-loader": "^4.1.6",
     "v-distpicker": "^1.2.2",
     "vue": "^2.6.11",

epmet-oper-web/src/views/modules/customer/customize/roleList.vue

@@ -1,20 +1,34 @@
 <template>
   <div class="role-container">
     <el-card class="flex1">
-      <div class="now-name">当前客户: {{customerName}}</div>
+      <div class="now-name">
-      <el-table v-loading="loading1" :data="roleList" border style="width: 100%">
+        当前客户: {{customerName}}
+         <el-button type="primary" size="small" @click="handleSaveSort">保存顺序</el-button>
+      </div>
+      <el-table ref="roleTable" v-loading="loading1" :data="roleList" row-key="roleId" border style="width: 100%">
         <el-table-column type="index" width="50"></el-table-column>
         <!-- <el-table-column prop="roleId" label="角色ID"></el-table-column> -->
-        <el-table-column prop="roleName" label="角色名称"></el-table-column>
+        <el-table-column prop="roleName" label="角色名称" width="160">
-        <el-table-column prop="roleKey" label="角色Key"></el-table-column>
+          <template slot-scope="scope">
+            <el-input v-if="scope.row.isEdit" v-model="scope.row.roleName" clearable>
+              </el-input>
+            <span v-else>{{scope.row.constName}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column v-if="!funcShow" prop="roleKey" label="角色Key"></el-table-column>
         <el-table-column label="操作">
           <template slot-scope="scope">
-            <el-button type="primary" size="small" @click="toOperationConfig(scope.row.roleId, scope.row.roleName)">功能权限</el-button>
+            <el-button type="primary" size="mini" @click="toOperationConfig(scope.row.roleId, scope.row.roleName)">功能权限</el-button>
+            <span v-if="scope.row.isEdit" style="display: inline-block; margin-left: 10px;">
+              <el-button type="primary" size="small" @click="handleSaveChange(scope.row)">保存</el-button>
+              <el-button  size="small" @click="scope.row.isEdit=false">取消</el-button>
+            </span>
+            <el-button v-else type="primary" size="mini" @click="handleChangeName(scope.row)">修改名称</el-button>
           </template>
         </el-table-column>
       </el-table>
     </el-card>
-    <el-card v-show="funcShow" class="flex1" style="margin: 0 10px;">
+    <el-card v-show="funcShow" style="flex: 1; margin: 0 10px;">
       <div class="now-name">当前角色: {{roleName}}</div>
       <el-table
         v-loading="loading2"
@@ -36,11 +50,11 @@
         </el-table-column>
       </el-table>
     </el-card>
-    <el-card v-show="roleShow" class="flex1">
+    <el-card v-show="roleShow" style="width: 250px;">
       <div class="now-name">当前功能: {{funcName}}</div>
       <div>
         <el-row :gutter="12">
-        <el-col :span="12" v-loading="loading3">
+        <el-col v-loading="loading3">
           <el-card shadow="hover">
             <el-checkbox-group class="t" v-model="checkedScopes" @change="roleChange">
               <el-checkbox
@@ -70,6 +84,7 @@
 </template>
 
 <script>
+import Sortable from 'sortablejs'
 export default {
   name: 'RoleList',
   props: {
@@ -105,6 +120,9 @@ export default {
   created () {
     this.listRolesByCustomerId(this.customerId)
   },
+  mounted () {
+    this.dragRoleSort()
+  },
   beforeDestroy () {
     let _data = this.$data
     for (let n in _data) {
@@ -121,7 +139,13 @@ export default {
         .then(({ data: res }) => {
           console.log('ressss', res)
           if (res.code === 0) {
-            this.roleList = res.data
+            this.roleList = res.data.map(item => {
+              return {
+                ...item,
+                constName: item.roleName,
+                isEdit: false
+              }
+            })
           }
           setTimeout(() => {
             this.loading1 = false
@@ -223,6 +247,74 @@ export default {
     },
     handleSelectionChange (val) {
       this.saveOperations4Role(val)
+    },
+    handleChangeName (row) {
+      row.isEdit = true
+    },
+    handleSaveChange (row) {
+      let data = {
+        roleId: row.roleId,
+        roleName: row.roleName
+      }
+      this.$http
+        .post('/epmetuser/govstaffrole/update-role', data)
+        .then(({ data: res }) => {
+          console.log('ressss', res)
+          if (res.code === 0 && res.msg === 'success') {
+            this.$message({
+              type: 'success',
+              message: '保存成功'
+            })
+            this.listRolesByCustomerId(this.customerId)
+          } else {
+            this.$message({
+              type: 'error',
+              message: res.internalMsg
+            })
+          }
+        })
+    },
+    dragRoleSort () {
+      const el = this.$refs.roleTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
+      this.sortTable = Sortable.create(el, {
+        group: 'dragTable',
+        ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
+        // setData: function(dataTransfer, dragEl) {
+        //   dataTransfer.setData("Text", dragEl.textContent);
+        // },
+        delay: 0,
+        onChange: evt => {
+          // console.log(evt)
+        },
+        onEnd: evt => {
+          const targetRow = this.roleList.splice(evt.oldIndex, 1)[0]
+          this.roleList.splice(evt.newIndex, 0, targetRow)
+        }
+      })
+    },
+    handleSaveSort () {
+      let data = {
+        roleIdList: this.roleList.map(item => {
+          return item.roleId
+        })
+      }
+      this.$http
+        .post('/epmetuser/govstaffrole/save-sortorder', data)
+        .then(({ data: res }) => {
+          console.log('ressss', res)
+          if (res.code === 0 && res.msg === 'success') {
+            this.$message({
+              type: 'success',
+              message: '保存成功'
+            })
+            this.listRolesByCustomerId(this.customerId)
+          } else {
+            this.$message({
+              type: 'error',
+              message: res.internalMsg
+            })
+          }
+        })
     }
   }
 }
@@ -236,6 +328,8 @@ export default {
   flex: 1;
 }
 .now-name {
+  /* display: flex;
+  justify-content: space-between; */
   margin-bottom: 10px;
 }
 .aui-wrapper .el-card + .el-card {