用户可以新增,修改弹窗适应于用户编辑

src/api/treeAndTable.js

@@ -4,7 +4,8 @@ let base = '/treeAndTable/'
 
 let url = {
     'Dept': base + 'dept/',
-    'Job': base + 'job/'
+    'Job': base + 'job/',
+    'User': base + 'user/'
 }
 
 // 获取dept数据
@@ -75,4 +76,17 @@ export function deleteJob(id) {
         url: url.Job + id + '/',
         method: 'delete',
     })
-}
+}
+
+/**
+ * 新增用户到指定部门(必须带岗位)
+ * 部门岗位中间表和用户名字
+ * {"dept_job_id":[1,2],"name":"linjj"}
+ */
+export function postUser(data) {
+    return request({
+        url: url.User,
+        method: 'post',
+        data
+    })
+}

src/views/treeAndTable/tree_and_table.vue

@@ -6,7 +6,22 @@
     <el-container>
       <el-main>
         <el-tabs value="people" type="border-card" @tab-click="tabClick">
-          <el-tab-pane label="人员" name="people"></el-tab-pane>
+          <el-tab-pane label="人员" name="people">
+            <div>
+              <el-button type="primary" @click="postUser">新增</el-button>
+              <el-table :data="tableDataPeople" style="width: 100%">
+                <el-table-column prop="name" label="姓名" width="180"></el-table-column>
+                <el-table-column prop="job" label="岗位" width="180">
+                  <el-tag v-for="(name,index) in job" :key="index">{{name}}</el-tag>
+                </el-table-column>
+                <el-table-column label="操作">
+                  <template slot-scope="scope" width="200px0">
+                    <el-button @click="deleteJob(scope.row.id)" type="danger">删除</el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+          </el-tab-pane>
           <el-tab-pane label="岗位" name="job">
             <div>
               <el-button type="primary" @click="postJob">新增</el-button>
@@ -28,6 +43,17 @@
         <el-form-item label="名字" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" prop="name">
           <el-input v-model="dialog.name" />
         </el-form-item>
+        <el-form-item
+          label="岗位多选器"
+          :label-col="{ span: 4 }"
+          :wrapper-col="{ span: 20 }"
+          prop="job"
+          v-show="this.dialog.type==1"
+        >
+          <el-select v-model="selectValue" multiple placeholder="请选择">
+            <el-option v-for="item in tableData" :key="item.id" :label="item.name" :value="item.id"></el-option>
+          </el-select>
+        </el-form-item>
       </el-form>
       <template slot="footer">
         <el-button @click="handleCancel">取消</el-button>
@@ -39,7 +65,7 @@
 
 <script>
 import tree from "@/views/treeAndTable/components/tree";
-import { getJob, postJob, deleteJob } from "@/api/treeAndTable.js";
+import { getJob, postJob, deleteJob, postUser } from "@/api/treeAndTable.js";
 
 export default {
   name: "tree_table",
@@ -50,12 +76,14 @@ export default {
     return {
       dept_id: 0,
       tableData: [],
+      tableDataPeople: [],
       dialog: {
         type: 0, // 1是人员，2是岗位
         title: "",
         name: "",
         visible: false,
       },
+      selectValue: [],
     };
   },
   methods: {
@@ -69,6 +97,11 @@ export default {
       this.dialog.title = "新增";
       this.dialog.type = 2;
     },
+    postUser: function () {
+      this.dialog.visible = true;
+      this.dialog.title = "新增人员";
+      this.dialog.type = 1;
+    },
     // 岗位标签页的删除按钮
     // eslint-disable-next-line no-unused-vars
     deleteJob: function (id) {
@@ -114,6 +147,19 @@ export default {
             this.tabClick({ name: "job" });
           }
         });
+      } else if (this.dialog.type == 1) {
+        postUser({
+          dept_job_id: this.selectValue,
+          name: this.dialog.name,
+        }).then((res) => {
+          this.dialog.visible = false;
+          console.log(res);
+          this.$message({
+            message: "新增人员成功",
+            type: "success",
+          });
+          this.tabClick({ name: "user" });
+        });
       }
     },
   },