新增人员身份关联手机端菜单

.env.development

@@ -1,9 +1,9 @@
 OUT_PUT_DIR=dist/jp-housekeeper-portal
 
 #VUE_APP_BACKEND_URL=http://127.0.0.1:7070/xpgj
-#VUE_APP_BACKEND_URL=http://127.0.0.1:8086/jp-housekeeper-server
+VUE_APP_BACKEND_URL=http://127.0.0.1:8086/jp-housekeeper-server
 #VUE_APP_BACKEND_URL=http://ykt-test.xiaoxinda.com/jp-housekeeper-server
-VUE_APP_BACKEND_URL=http://xpgjapi.xiaoxinda.com
+#VUE_APP_BACKEND_URL=http://xpgjapi.xiaoxinda.com
 
 #手机企业版
 VUE_APP_COMPANY_HEALTH_WECHAT_QY_URL=http://wisdomhousewechat.sudaonline.net/prevention/motemwall.html 

src/App.vue

@@ -50,4 +50,19 @@ body{
     margin-bottom: 10px;
   }
 }
+
+.role-permission {
+  .el-transfer-panel {
+    border: 1px solid #ebeef5;
+    border-radius: 4px;
+    overflow: hidden;
+    background: #fff;
+    display: inline-block;
+    vertical-align: middle;
+    width: 320px;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    position: relative;
+  }
+}
 </style>

src/api/base/iconInfo.js

@@ -49,6 +49,10 @@ function getIconTypeList(){
   return request.post(constant.serverUrl + "/base/iconInfo/getIconTypeList");
 }
 
+function findAll() {
+  return request.post(constant.serverUrl + "/base/iconInfo/list");
+}
+
 export default {
-  pageList,create,edit,add,update,remove,batchRemove,listByRoleId,getIconTypeList
+  pageList,create,edit,add,update,remove,batchRemove,listByRoleId,getIconTypeList,findAll
 }

src/api/base/personPopedomIcon.js

@@ -0,0 +1,19 @@
+import request from '@/utils/request'
+import constant from '@/constant'
+
+function findRelatedIcon(personPopedomId){
+    return request.get(constant.serverUrl + `/base/personPopedomIcon/findRelatedIcon?personPopedomId=${personPopedomId}`);
+}
+
+function saveRelatedIcon(personPopedomId,idList){
+    var formData = new FormData();
+  
+    formData.append("personPopedomId",personPopedomId);
+    formData.append("idList",idList.join(","));
+  
+    return request.post(constant.serverUrl + "/base/personPopedomIcon/saveRelatedIcon",formData);
+}
+
+export default {
+    findRelatedIcon, saveRelatedIcon
+}

src/views/base/personPopedom-icon.vue

@@ -0,0 +1,166 @@
+<template>
+    <el-dialog
+      :visible.sync="showDialog"
+      :title="title"
+      width="900px"
+      :modal-append-to-body="true"
+      append-to-body
+      style="text-align:left;"
+      @close="closeDialog"
+      :close-on-click-modal="false"
+    >
+    <div class="flex-row">
+      <div class="role-permission">
+          <el-transfer
+          v-model="relatedMenus"
+          :data="menuList"
+          v-loading="loading"
+          filterable
+          target-order="push"
+          :filter-method="filterMethod"
+          filter-placeholder="请输入关键字"
+          :props="{key: 'id',label: 'description'}"
+          :titles="['未分配菜单','已分配菜单']"
+          @right-check-change="rightCheckChange"
+          ></el-transfer>
+      </div>
+      <div class="flex-col">
+        <div>
+          <el-button round size="mini" @click="moveUp">上移</el-button>
+          <div style="height:10px;"></div>
+          <el-button round size="mini" @click="moveDown">下移</el-button>
+        </div>
+      </div>
+    </div>
+    <span slot="footer" class="dialog-footer">
+        <el-button @click="closeDialog">取 消</el-button>
+        <el-button type="primary" @click="handleSubmit" :loading="submitting">确 定</el-button>
+    </span>
+    </el-dialog>
+</template>
+<script>
+import iconApi from "@/api/base/iconInfo";
+import personPopedomIconApi from "@/api/base/personPopedomIcon";
+
+export default {
+  props: ["personPopedomId","title"],
+  data() {
+    return {
+      menuList: [],
+      relatedMenus: [],
+      loading: false,
+      showDialog: true,
+      submitting: false,
+      rightCheckedItems: []
+    };
+  }, 
+  methods: {
+    closeDialog() {
+      this.$emit("close",false);
+    },
+    handleSubmit() {
+      var self = this;
+
+      personPopedomIconApi
+        .saveRelatedIcon(this.personPopedomId,this.relatedMenus)
+        .then(function(response) {
+          var jsonData = response.data;
+          self.submitting = false;
+
+          if (jsonData.result) {
+            self.$message({
+              message: "保存成功!",
+              type: "success"
+            });
+
+            self.$emit("close",true);
+          } else {
+            self.$message({
+              message: jsonData.message + "",
+              type: "warning"
+            });
+
+            self.$emit("close",false);
+          }
+        });
+    },
+    filterMethod(query, item) {
+      return item.description.indexOf(query) > -1;
+    },
+    queryRelatedMenuList() {
+      var self = this;
+
+      self.loading = true;
+
+      self.menuList = [];
+      self.relatedMenus= [];
+
+      iconApi.findAll()
+        .then(response => {
+          var jsonData = response.data;
+
+          self.menuList = jsonData.data.map(item => {
+            return {
+              id: item.id,
+              description: "[" + item.iconTypeName + "]" + item.iconName
+            };
+          });
+
+          return personPopedomIconApi.findRelatedIcon(self.personPopedomId);
+        })
+        .then(response => {
+          var jsonData = response.data;
+
+          self.relatedMenus = jsonData.data.map(item => {
+            return item.iconId;
+          });
+
+          //console.log(self.relatedMenus);
+
+          self.loading = false;
+        });
+    },
+    rightCheckChange(checkedItems) {
+      this.rightCheckedItems = checkedItems;
+    },
+    moveUp() {
+      this.rightCheckedItems.forEach(id=>{
+        var index = this.relatedMenus.indexOf(id);
+
+        if(index>0){
+          console.log(index + "," + id);
+          this.relatedMenus.splice(index,1);
+          this.relatedMenus.splice(index-1,0,id);
+        }
+      })
+    },
+    moveDown() {
+      this.rightCheckedItems.forEach(id=>{
+        var index = this.relatedMenus.indexOf(id);
+
+        if(index<this.relatedMenus.length-1){
+          console.log(index + "," + id);
+          this.relatedMenus.splice(index,1);
+          this.relatedMenus.splice(index+1,0,id);
+        }
+      })
+    }
+  },
+  mounted() {
+    this.queryRelatedMenuList();
+  }
+};
+</script>
+<style lang="scss" scoped>
+.flex-row{
+  display:flex;
+  flex-direction: row;
+}
+
+.flex-col{
+  display: flex;
+  flex-direction: col;
+  justify-content: center; /* 水平居中 */
+  align-items: center;     /* 垂直居中 */
+}
+</style>

src/views/base/personPopedom-list.vue

@@ -114,14 +114,13 @@
             ></el-switch>
           </template>
         </el-table-column>
-        <el-table-column label="操作" width="100">
+        <el-table-column label="操作" width="200">
           <template slot-scope="{ row }">
-            <el-link type="warning" :underline="false" @click="handleEdit(row)"
-              >编辑</el-link
-            >-
-            <el-link type="danger" :underline="false" @click="handleDelete(row)"
-              >删除</el-link
-            >
+            <el-link type="primary" :underline="false" @click="handleAllocMenu(row)">自定义菜单</el-link>
+            -
+            <el-link type="warning" :underline="false" @click="handleEdit(row)">编辑</el-link>
+            -
+            <el-link type="danger" :underline="false" @click="handleDelete(row)">删除</el-link>
           </template>
         </el-table-column>
       </el-table>
@@ -140,12 +139,19 @@
         @close="onDetailModalClose"
         :personId="personId"
       ></personPopedom-detail>
+      <personPopedom-icon
+        v-if="showIconModal"
+        :personPopedomId="businessKey"
+        :title="iconModalTitle"
+        @close="onIconModalClose"
+      ></personPopedom-icon>
     </div>
   </el-dialog>
 </template>
 <script>
 import Constant from "@/constant";
 import PersonPopedomDetail from "./personPopedom-detail";
+import PersonPopedomIcon from "./personPopedom-icon";
 import personPopedomApi from "@/api/base/personPopedom";
 import NProgress from "nprogress"; // progress bar
 import "nprogress/nprogress.css"; // progress bar style
@@ -172,6 +178,8 @@ export default {
       showModal: false,
       modalTitle: "",
       showDialog: true,
+      showIconModal: false,
+      iconModalTitle: ""
     };
   },
   methods: {
@@ -287,6 +295,9 @@ export default {
         this.changePage(this.pageIndex);
       }
     },
+    onIconModalClose() {
+      this.showIconModal = false;
+    },
     handleReLoad() {
       var self = this;
       self.changePage(self.pageIndex);
@@ -319,12 +330,18 @@ export default {
         }
       });
     },
+    handleAllocMenu(record){
+      this.iconModalTitle = "自定义菜单";
+      this.businessKey = record.id;
+      this.showIconModal = true;
+    }
   },
   mounted: function () {
     this.changePage(1);
   },
   components: {
     "personPopedom-detail": PersonPopedomDetail,
+    "personPopedom-icon": PersonPopedomIcon
   },
 };
 </script>

src/views/base/personRoleInfo-icon.vue

@@ -150,21 +150,6 @@ export default {
 };
 </script>
 <style lang="scss">
-.role-permission {
-  .el-transfer-panel {
-    border: 1px solid #ebeef5;
-    border-radius: 4px;
-    overflow: hidden;
-    background: #fff;
-    display: inline-block;
-    vertical-align: middle;
-    width: 320px;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    position: relative;
-  }
-}
-
 .flex-row{
   display:flex;
   flex-direction: row;