完成团队页

src/components/CreatePersonDialog.vue

@@ -0,0 +1,189 @@
+<template>
+  <!-- Form -->
+
+  <el-dialog
+    title="添加成员"
+    :before-close="handleClose"
+    v-model="dialogFormVisible"
+    center
+  >
+    <el-form :model="form" :rules="rules" ref="form">
+      <el-row>
+        <el-col :span="24">
+          <el-form-item
+            label="用户名"
+            prop="staffUsername"
+            :label-width="formLabelWidth"
+          >
+            <el-input
+              v-model="form.staffUsername"
+              autocomplete="off"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="岗位" :label-width="formLabelWidth">
+            <!--        <el-input v-model="form.name" autocomplete="off"></el-input>-->
+            <el-input
+              class="input-new-tag"
+              v-model="inputValue"
+              ref="saveTagInput"
+              @keyup.enter="handleInputConfirm"
+              @blur="handleInputConfirm"
+            >
+            </el-input>
+            <el-tag
+              :key="tag"
+              v-for="tag in dynamicTags"
+              closable
+              :disable-transitions="false"
+              @close="handleClose(tag)"
+            >
+              {{ tag }}
+            </el-tag>
+
+            <!-- <el-button
+              v-else
+              class="button-new-tag"
+              size="small"
+              @click="showInput"
+              >+ New Tag</el-button
+            > -->
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button type="primary" @click="submitFormData('form')">确定</el-button>
+
+        <el-button @click="onCannel()">取 消</el-button>
+        <!--      <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>-->
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import request from "../utils/request";
+export default {
+  data() {
+    return {
+      form: {
+        staffUsername: "",
+      },
+      formLabelWidth: "120px",
+      //标签
+      dynamicTags: [],
+      inputVisible: false,
+      inputValue: "",
+      rules: {
+        staffUsername: [
+          { required: true, message: "请输入用户名", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  props: {
+    dialogFormVisible: Boolean,
+  },
+  methods: {
+    handleClose(tag) {
+      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
+    },
+
+    showInput() {
+      this.inputVisible = true;
+      this.$nextTick((_) => {
+        this.$refs.saveTagInput.$refs.input.focus();
+      });
+    },
+    handleClose() {
+      this.onCannel();
+    },
+    onCannel() {
+      this.form.staffUsername = "";
+      this.dynamicTags = [];
+      this.$emit("onCannel");
+    },
+    handleInputConfirm() {
+      let inputValue = this.inputValue;
+      if (inputValue) {
+        const isCF = !!this.dynamicTags.find((item) => {
+          return item == inputValue;
+        });
+        if (isCF) {
+          this.$message.warning("岗位不能重复");
+        } else {
+          this.dynamicTags.push(inputValue);
+        }
+      }
+      this.inputVisible = false;
+      this.inputValue = "";
+    },
+    submitFormData(formName) {
+      console.log(this.form);
+      if (this.dynamicTags?.length) {
+        this.$refs[formName].validate((valid) => {
+          console.log(this.$refs);
+          console.log(valid);
+          if (valid) {
+            let projectId = this.$route.params.projectId;
+            const param = {
+              staffUsername: this.form.staffUsername,
+              projectStaffPosition: this.dynamicTags.join(","),
+              staffId: 0,
+            };
+            request({
+              url: `/project/${projectId}/group`,
+              method: "post",
+              data: param,
+            })
+              .then(
+                (res) => {
+                  console.log("submit!!");
+                  this.$message.success("添加成功");
+                  this.$emit("createdPerson");
+                  this.form.staffUsername = "";
+                  this.dynamicTags = [];
+                },
+                (err) => {
+                  this.$message.error("用户名不存在");
+                }
+              )
+              .catch(function (error) {
+                console.log(error);
+              });
+          } else {
+            console.log("error submit!!");
+            return false;
+          }
+        });
+      } else {
+        this.$message.warning("请添加岗位");
+      }
+    },
+  },
+};
+</script>
+<style>
+.el-tag {
+  margin-right: 10px;
+  margin-bottom: 5px;
+}
+.button-new-tag {
+  margin-left: 10px;
+  height: 32px;
+  line-height: 30px;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.input-new-tag {
+  width: 90px;
+  /* margin-left: 10px; */
+  vertical-align: bottom;
+  margin-bottom: 5px;
+}
+</style>

src/views/OngoingProject.vue

@@ -104,16 +104,17 @@ export default {
 
   },
   created() {
+    const that = this
     // watch 路由的参数，以便再次获取数据
     this.$watch(
-        () => this.$route.query,
+        () => that.$route.query,
         () => {
-          if (this.$route.query.currentPage)
+          if (that.$route.query.currentPage)
-            this.currentPage = parseInt(this.$route.query.currentPage)
+            that.currentPage = parseInt(that.$route.query.currentPage)
-          if (this.$route.query.pageSize)
+          if (that.$route.query.pageSize)
-            this.pageSize = parseInt(this.$route.query.pageSize)
+            that.pageSize = parseInt(that.$route.query.pageSize)
 
-          this.getProjects()
+          that.getProjects()
         },
         // 组件创建完后获取数据，
         // 此时 data 已经被 observed 了

src/views/ProjectGroup.vue

@@ -4,19 +4,25 @@
     <div ref="leftRef" style="width: 50%;height: 100%;padding: 0 30px 0 0;display: flex;flex-direction: column">
       <div style="display: flex;flex-direction: row;justify-content: space-between" ref="left_title_Ref">
         <p style="text-align:center; 'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;color: #606266">项目团队</p>
-        <el-button style="" type="primary" >新增成员</el-button>
+        <el-button type="primary" @click="onCreatePerson">新增成员</el-button>
       </div>
       <div style="flex: 1; margin: 30px 0 0 0; background-color: white; border-radius: 10px;padding: 20px;
               display: flex;flex-direction: column;justify-content: space-between">
         <el-table
             ref="tableRef"
-            style="width: 100%"
+            class="projectTable"
             :height="tableHeight"
-            :data="tableData">
+            :data="tableData"
-          <el-table-column prop="staffFullname" label="姓名" min-width="25%"> </el-table-column>
+        >
-          <el-table-column prop="projectStaffPosition" label="职位" min-width="35%">
+          <el-table-column prop="staffFullname" label="姓名" min-width="25%">
           </el-table-column>
-          <el-table-column fixed="right" label="操作" min-width="40%">
+          <el-table-column
+              prop="projectStaffPosition"
+              label="职位"
+              min-width="45%"
+          >
+          </el-table-column>
+          <el-table-column fixed="right" label="操作" min-width="30%">
             <template #default="scope">
             <span>
               <el-button
@@ -40,9 +46,7 @@
               >
                 离队
               </el-button>
-
             </span>
-
             </template>
           </el-table-column>
         </el-table>
@@ -56,7 +60,14 @@
               v-model:page-size="pageSize"
               layout="total, sizes, prev, pager, next, jumper"
               :total="total"
-              style="padding: 15px 15px 15px 15px;box-sizing:border-box;background: #fff;display: flex;justify-content: flex-end;">
+              style="
+            padding: 15px 15px 15px 15px;
+            box-sizing: border-box;
+            background: #fff;
+            display: flex;
+            justify-content: flex-end;
+          "
+          >
           </el-pagination>
         </div>
       </div>
@@ -76,6 +87,11 @@
       </div>
     </div>
   </div>
+  <CreatePersonDialog
+      v-model:dialogFormVisible="dialogFormVisible"
+      @createdPerson="rehushTableData"
+      @onCannel="dialogFormVisible = false"
+  ></CreatePersonDialog>
 </template>
 
 <script setup>
@@ -111,17 +127,22 @@ onMounted(() => {
 </script>
 
 <script>
-import EchartsPie from "@/components/echartsPie";
+import EchartsPie from "../components/echartsPie";
 import request from "../utils/request";
-
+import CreatePersonDialog from "../components/CreatePersonDialog";
 export default {
+  components: {
+    CreatePersonDialog,
+    EchartsPie
+  },
   methods: {
     getStationList() {
-      let projectId = this.$route.params.projectId
+      let projectId = this.$route.params.projectId;
       request({
         url: `project/${projectId}/group/stats`,
-        method: 'get',
+        method: "get",
-      }).then(response => {
+      })
+          .then((response) => {
             if (response.data.code === 200) {
               console.log(response.data.data);
               let data = response.data.data;
@@ -135,80 +156,111 @@ export default {
               });
               console.log(array);
             }
-      }).catch(function (error) {
-        console.log(error)
           })
+          .catch(function (error) {
+            console.log(error);
+          });
     },
+    onCreatePerson() {
+      this.dialogFormVisible = true;
+    },
+
     deleteRow(index, rows) {
-      rows.splice(index, 1)
+      rows.splice(index, 1);
     },
     // 选择一页显示多少条数据
     handleSizeChange(val) {
-
+      this.pageSize = val;
+      const data = {
+        pageCurrent: this.currentPage,
+        pageSize: val,
+        sortBy: "",
+        asc: true,
+      };
+      this.getTableData(data);
+    },
+    rehushTableData() {
+      this.dialogFormVisible = false;
+      const data = {
+        pageCurrent: this.currentPage,
+        pageSize: this.pageSize,
+        sortBy: "",
+        asc: true,
+      };
+      this.getTableData(data);
+      this.getStationList();
+    },
+    getTableData(param) {
+      let projectId = this.$route.params.projectId;
+      request({
+        url: `/project/${projectId}/group`,
+        method: "get",
+        params: param,
+      }).then(res => {
+        if (res.data.code === 200) {
+          console.log(res.data);
+          this.tableData = res.data.data.records;
+          this.total = res.data.data.total;
+        }
+      }).catch(function (error) {
+        console.log(error)
+      })
+      // request({
+      //   url: `/project/${projectId}/group`,
+      //   method: "get",
+      //   params: param,
+      // }).then((res) => {
+      //   console.log(res.data);
+      //   this.tableData = res.data.data.records;
+      //   this.total = res.data.data.total;
+      // });
     },
     // 选择当前的是第几页
     handleCurrentChange(val) {
-
+      this.currentPage = val;
+      const data = {
+        pageCurrent: val,
+        pageSize: this.pageSize,
+        sortBy: "",
+        asc: true,
+      };
+      this.getTableData(data);
     },
   },
   mounted() {
     this.getStationList();
+    const param = {
+      pageCurrent: this.currentPage,
+      pageSize: this.pageSize,
+      sortBy: "",
+      asc: true,
+    };
+    this.getTableData(param);
   },
-  components: {EchartsPie},
   data() {
     return {
       // 岗位列表
       stationList: [],
-      total: 5,
+      total: 20,
       currentPage: 1,
       pageSize: 10,
-      tableData: [
+      dialogFormVisible: false,
-        {
+      tableData: [],
-          staffFullname: '王小虎',
+    };
-          projectStaffPosition: '项目经理',
   },
-        {
+};
-          staffFullname: '王小虎',
-          projectStaffPosition: '研发人员',
-        },
-        {
-          staffFullname: '王小明',
-          projectStaffPosition: '研发人员',
-        },
-        {
-          staffFullname: '王小明',
-          projectStaffPosition: '研发人员',
-        },
-        {
-          staffFullname: '王小明',
-          projectStaffPosition: '研发人员',
-        },
-        {
-          staffFullname: '王小明',
-          projectStaffPosition: '研发人员',
-        },
-        {
-          staffFullname: '王小明',
-          projectStaffPosition: '研发人员',
-        },
-        {
-          staffFullname: '王小明',
-          projectStaffPosition: '研发人员',
-        },
-        {
-          staffFullname: '王小虎',
-          projectStaffPosition: '研发人员',
-        },
-        {
-          staffFullname: '王小明',
-          projectStaffPosition: '研发人员',
-        },
-      ],
-    }
-  },
-}
 </script>
 
 <style scoped>
-
+.projectTable {
+  border-radius: 10px;
+  padding: 10px;
+  box-sizing: border-box;
+}
+.pie_postBox {
+  border-radius: 10px;
+}
+#echartsPie {
+  border-radius: 10px;
+}
 </style>