完善动态表单岗位下人员管理功能

src/Api/user.js

@@ -1,10 +1,11 @@
 import axios from '@/axios/http';
 
 const URL = {
-    user: 'user',
+    user: 'user/',
     login: 'login/',
     logout: 'logout/',
-    report: 'dailyreport/'
+    report: 'dailyreport/',
+    Dept2Jobs: 'Dept2Jobs/',
 }
 
 export function login(data) {
@@ -72,4 +73,15 @@ export function getUsers(params = {}) {
         method: 'get',
         params
     })
+}
+
+/** 改变指定岗位下的用户
+ * @param {Object} data {job_id:岗位,user_id:[](用户id组),dept_id:部门id}
+ */
+export function changeJobUsers(data) {
+    return axios({
+        url: URL.Dept2Jobs,
+        method: 'post',
+        data
+    })
 }

src/App.vue

@@ -86,13 +86,13 @@ export default {
     },
     ...mapGetters(["getterPermission"]),
   },
-  created() {
+  created() { 
     getRoutes().then((res) => {
-      console.log(res);
+      // console.log(res);
       let ArrRoutes = res.data;
       console.log("原数据", ArrRoutes);
       let asyncRouters = this.treeRoutes(ArrRoutes);
-      console.log(asyncRouters);
+      console.log('改变后的数据',asyncRouters);
       this.asyncAddRouters(asyncRouters);
     });
   },
@@ -153,8 +153,8 @@ export default {
       }
     },
     ...mapActions(["asyncAddRouters"]),
-    // allRoutes 全部路由对象 ，currentRoute当前点，routers存放点，ifAdd是否插入对象
-    treeRoutes(allRes) {
+    // 形成树
+    treeRoutes(allRes) { 
       let result = allRes.reduce((prev, item) => {
         //过滤每一行数据，转成自己想要的，这里重定义变量不要去改变item，为了item.url取值时候可以找的到。
         let itemFilter = {
@@ -172,6 +172,7 @@ export default {
           : (prev[itemFilter.parent] = [itemFilter]);
         return prev;
       }, {});
+
       for (let prop in result) {
         //遍历所有键
         result[prop].forEach((item, i) => {
@@ -179,10 +180,11 @@ export default {
           result[item.id] ? (item.children = result[item.id]) : "";
         });
       }
+
       //选中指定父级的树，null是顶级
       result = result["null"];
       return result;
-    },
+    }
   },
 };
 </script>

src/views/dynamicTable/components/transfer.vue

@@ -10,7 +10,7 @@
     ></el-transfer>
     <div class="footer-handles">
       <el-button size="small">取消</el-button>
-      <el-button type="primary" size="small" @click="pushUsers">确定</el-button>
+      <el-button type="primary" size="small" @click="changeUsers">确定</el-button>
     </div>
   </div>
 </template>
@@ -22,23 +22,23 @@ export default {
   props: {
     jobName: {
       type: String,
-      default: "**部门人员"
+      default: "**部门人员",
     },
     users: {
       type: Array,
-      default: (val)=>{
-          console.log(val);
-          return []
-      }
+      default: (val) => {
+        console.log(val);
+        return [];
+      },
+    },
+    visible: {
+      type: Boolean,
+      default: false,
     },
-    visible:{
-        type:Boolean,
-        default:false
-    }
   },
   data() {
     return {
-      value: ["1"],
+      value: [],
       data: [
         // { key: 1, label: "选择1", disabled: false },
         // { key: 2, label: "选择2", disabled: false },
@@ -47,20 +47,23 @@ export default {
         // { key: 5, label: "选择5", disabled: false }
       ],
       loading: {
-        transfer: false
-      }
+        transfer: false,
+      },
     };
   },
   created() {
+    this.value = this.users.map((v) => {
+      return v.id;
+    });
     this.loading.transfer = true;
-    getUsers().then(res => {
-    //   console.log(res);
+    getUsers().then((res) => {
+      // console.log(res);
       let result = res.data.result;
       let data = [];
-      result.forEach(e => {
+      result.forEach((e) => {
         data.push({
           key: e.id,
-          label: e.username
+          label: e.username,
         });
       });
       this.data = data;
@@ -68,20 +71,25 @@ export default {
     });
   },
   watch: {
-      // 打开了则把已经选择的value初始一下
-      visible(val){
-          this.value = this.users
-      }
+    // 打开了则把已经选择的value初始一下
+    visible(val) {
+      this.value = this.users.map((v) => {
+        return v.id;
+      });
+    },
   },
   methods: {
     handleChange(value, direction, movedKeys) {
       console.log(this.value);
       console.log(value, direction, movedKeys);
     },
-    pushUsers(){
-        console.log('确定按钮，之后还没写，等待后端完成');
-    }
-  }
+    //改变岗位下的用户
+    changeUsers() {
+      // console.log("用户组id", this.value);
+      // console.log("确定按钮，之后还没写，等待后端完成");
+      this.$emit("change-visible", this.value);
+    },
+  },
 };
 </script>
 

src/views/dynamicTable/dynamicTable.vue

@@ -12,7 +12,7 @@
             <template v-for="node in checkNode">
               <el-tab-pane
                 v-if="node.id!=-1"
-                :key="node.id"
+                :key="node.id+'dept'"
                 :label="node.name"
                 :name="node.id.toString()"
                 v-loading="loading.childrenActive"
@@ -27,7 +27,7 @@
                   <div v-if="!childrenActive || childrenNode.length==0" class="tips">空空哒哟~</div>
                   <el-tab-pane
                     v-for="children in childrenNode"
-                    :key="children.id"
+                    :key="children.id+'job'"
                     :label="children.name"
                     :name="children.id.toString()"
                   >
@@ -53,6 +53,7 @@
           <!-- 用户管理 -->
           <el-dialog title="用户管理" :visible.sync="visible.dialog" width="650px">
             <transfer
+              @change-visible="changeJobUsers"
               :jobName="jobs.activeTabName"
               :users="userTableData"
               :visible="visible.dialog"
@@ -67,7 +68,7 @@
 
 <script>
 import { addJob, getJob, delJob } from "@/Api/jobs";
-import { getUsers } from "@/Api/user";
+import { getUsers,changeJobUsers } from "@/Api/user";
 export default {
   name: "home",
   components: {
@@ -228,6 +229,7 @@ export default {
     },
     //初始化用户详情，岗位空则查询全部
     async initUserDetail(job_id = undefined) {
+      this.loading.userTableData = true
       let params = job_id ? { job_id } : {};
       await getUsers(params).then(res => {
         this.userTableData = res.data.result;
@@ -242,6 +244,21 @@ export default {
     //点击岗位tab
     childrenTabClick(tab) {
       this.jobs.activeTabName = tab.label;
+    },
+    //传入用户组，改变这个岗位下的用户
+    changeJobUsers(users){
+      this.visible.dialog = false
+      let data={
+        dept_id:this.active,
+        job_id:this.childrenActive,
+        user_id:users
+      }
+      changeJobUsers(data).then(res=>{
+        if(res.status==200){
+          this.initUserDetail(this.childrenActive)
+        }
+      })
+      // console.log('改变岗位下的用户',users);
     }
   },
   directives: {