From 2ae6aadd3891c72462315381f14d35ad88414118 Mon Sep 17 00:00:00 2001
From: wuyize <wuyize25@163.com>
Date: Sat, 9 Jul 2022 09:29:41 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E5=9B=A2=E9=98=9F=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CreatePersonDialog.vue | 189 ++++++++++++++++++++
 src/views/OngoingProject.vue          |  13 +-
 src/views/ProjectGroup.vue            | 244 ++++++++++++++++----------
 3 files changed, 344 insertions(+), 102 deletions(-)
 create mode 100644 src/components/CreatePersonDialog.vue

diff --git a/src/components/CreatePersonDialog.vue b/src/components/CreatePersonDialog.vue
new file mode 100644
index 0000000..4801f6a
--- /dev/null
+++ b/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>
diff --git a/src/views/OngoingProject.vue b/src/views/OngoingProject.vue
index 3465522..73114de 100644
--- a/src/views/OngoingProject.vue
+++ b/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)
-            this.currentPage = parseInt(this.$route.query.currentPage)
-          if (this.$route.query.pageSize)
-            this.pageSize = parseInt(this.$route.query.pageSize)
+          if (that.$route.query.currentPage)
+            that.currentPage = parseInt(that.$route.query.currentPage)
+          if (that.$route.query.pageSize)
+            that.pageSize = parseInt(that.$route.query.pageSize)
 
-          this.getProjects()
+          that.getProjects()
         },
         // 组件创建完后获取数据，
         // 此时 data 已经被 observed 了
diff --git a/src/views/ProjectGroup.vue b/src/views/ProjectGroup.vue
index 3aafc12..b90645e 100644
--- a/src/views/ProjectGroup.vue
+++ b/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">
-          <el-table-column prop="staffFullname" label="姓名" min-width="25%"> </el-table-column>
-          <el-table-column prop="projectStaffPosition" label="职位" min-width="35%">
+            :data="tableData"
+        >
+          <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
@@ -24,25 +30,23 @@
                   type="text"
                   size="midium"
               >
-              修改
-            </el-button>
-            <el-button
-                @click.prevent="deleteRow(scope.$index, tableData)"
-                type="text"
-                size="midium"
-            >
-              交接
-            </el-button>
-            <el-button
-                @click.prevent="deleteRow(scope.$index, tableData)"
-                type="text"
-                size="midium"
-            >
-              离队
-            </el-button>
-
+                修改
+              </el-button>
+              <el-button
+                  @click.prevent="deleteRow(scope.$index, tableData)"
+                  type="text"
+                  size="midium"
+              >
+                交接
+              </el-button>
+              <el-button
+                  @click.prevent="deleteRow(scope.$index, tableData)"
+                  type="text"
+                  size="midium"
+              >
+                离队
+              </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,104 +127,140 @@ 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',
-      }).then(response => {
-        if (response.data.code === 200) {
-          console.log(response.data.data);
-          let data = response.data.data;
-          let array = [];
-          for (let key in data) {
-            array.push({value: data[key], name: key});
-          }
-          this.stationList = array;
-          this.$nextTick(()=>{
-            this.$refs.pie_post.updateEcharts();
+        method: "get",
+      })
+          .then((response) => {
+            if (response.data.code === 200) {
+              console.log(response.data.data);
+              let data = response.data.data;
+              let array = [];
+              for (let key in data) {
+                array.push({ value: data[key], name: key });
+              }
+              this.stationList = array;
+              this.$nextTick(() => {
+                this.$refs.pie_post.updateEcharts();
+              });
+              console.log(array);
+            }
+          })
+          .catch(function (error) {
+            console.log(error);
           });
-          console.log(array);
+    },
+    onCreatePerson() {
+      this.dialogFormVisible = true;
+    },
+
+    deleteRow(index, rows) {
+      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)
       })
-    },
-    deleteRow(index, rows) {
-      rows.splice(index, 1)
-    },
-    // 选择一页显示多少条数据
-    handleSizeChange(val) {
-
+      // 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: [
-        {
-          staffFullname: '王小虎',
-          projectStaffPosition: '项目经理',
-        },
-        {
-          staffFullname: '王小虎',
-          projectStaffPosition: '研发人员',
-        },
-        {
-          staffFullname: '王小明',
-          projectStaffPosition: '研发人员',
-        },
-        {
-          staffFullname: '王小明',
-          projectStaffPosition: '研发人员',
-        },
-        {
-          staffFullname: '王小明',
-          projectStaffPosition: '研发人员',
-        },
-        {
-          staffFullname: '王小明',
-          projectStaffPosition: '研发人员',
-        },
-        {
-          staffFullname: '王小明',
-          projectStaffPosition: '研发人员',
-        },
-        {
-          staffFullname: '王小明',
-          projectStaffPosition: '研发人员',
-        },
-        {
-          staffFullname: '王小虎',
-          projectStaffPosition: '研发人员',
-        },
-        {
-          staffFullname: '王小明',
-          projectStaffPosition: '研发人员',
-        },
-      ],
-    }
+      dialogFormVisible: false,
+      tableData: [],
+    };
   },
-}
+};
 </script>
 
 <style scoped>
-
+.projectTable {
+  border-radius: 10px;
+  padding: 10px;
+  box-sizing: border-box;
+}
+.pie_postBox {
+  border-radius: 10px;
+}
+#echartsPie {
+  border-radius: 10px;
+}
 </style>