From ba20216f1a2aad479a74f193fdd28c231fa85337 Mon Sep 17 00:00:00 2001
From: wuyx <wuyx@dongwu-inc.com>
Date: Fri, 2 Dec 2022 14:56:37 +0800
Subject: [PATCH] =?UTF-8?q?fix(BUG:63):=E5=AD=A6=E4=B9=A0=E8=B7=AF?=
 =?UTF-8?q?=E5=BE=84=E5=9B=BE-=E7=BC=96=E8=BE=91=E9=A1=B9=E7=9B=AE-Table?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E5=9B=9E=E6=98=BE=E5=AD=97=E6=AE=B5=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/drawers/AddProject.vue | 334 +++++++++++++++-----------
 1 file changed, 199 insertions(+), 135 deletions(-)

diff --git a/src/components/drawers/AddProject.vue b/src/components/drawers/AddProject.vue
index e1499477..2fe4de16 100644
--- a/src/components/drawers/AddProject.vue
+++ b/src/components/drawers/AddProject.vue
@@ -1,21 +1,12 @@
 <template>
-  <a-drawer
-      :visible="addprojvisible"
-      class="drawerStyle addonlineDrawer"
-      width="80%"
-      title="添加在线"
-      placement="right"
-      @after-visible-change="afterVisibleChange"
-  >
+  <a-drawer :visible="addprojvisible" class="drawerStyle addonlineDrawer" width="80%" title="添加在线" placement="right"
+    @after-visible-change="afterVisibleChange">
     <div class="drawerMain">
       <div class="header">
         <div v-if="edit" class="headerTitle">编辑项目</div>
         <div v-else class="headerTitle">添加项目</div>
-        <img
-            style="width: 29px; height: 29px; cursor: pointer"
-            src="../../assets/images/basicinfo/close.png"
-            @click="closeDrawer"
-        />
+        <img style="width: 29px; height: 29px; cursor: pointer" src="../../assets/images/basicinfo/close.png"
+          @click="closeDrawer" />
       </div>
       <div class="contentMain">
         <div class="main_items">
@@ -23,31 +14,22 @@
             <div class="mii_ipt">
               <div class="ipt_name">项目名称：</div>
               <div class="fi_input">
-                <a-input
-                    v-model:value="inputV1"
-                    style="width: 240px; height: 40px; border-radius: 8px"
-                    placeholder="请输入项目名称"
-                />
+                <a-input v-model:value="inputV1" style="width: 240px; height: 40px; border-radius: 8px"
+                  placeholder="请输入项目名称" />
               </div>
             </div>
             <div class="mii_ipt">
               <div class="ipt_name">项目经理：</div>
               <div class="fi_input">
-                <a-input
-                    v-model:value="inputV2"
-                    style="width: 240px; height: 40px; border-radius: 8px"
-                    placeholder="请输入项目经理"
-                />
+                <a-input v-model:value="inputV2" style="width: 240px; height: 40px; border-radius: 8px"
+                  placeholder="请输入项目经理" />
               </div>
             </div>
             <div class="mii_ipt">
               <div class="ipt_name">创建人：</div>
               <div class="fi_input">
-                <a-input
-                    v-model:value="inputV3"
-                    style="width: 240px; height: 40px; border-radius: 8px"
-                    placeholder="请输入创建人"
-                />
+                <a-input v-model:value="inputV3" style="width: 240px; height: 40px; border-radius: 8px"
+                  placeholder="请输入创建人" />
               </div>
             </div>
           </div>
@@ -66,50 +48,30 @@
           <div class="mntc_left">
             <div class="notice_icon"></div>
             <div v-if="selectedRows.length == 0">
-              <span class="title"
-              >已选择
+              <span class="title">已选择
                 <span class="data" style="color: #4ea6ff">{{ 0 }}</span>
-                条</span
-              >
+                条</span>
             </div>
             <div v-else>
               <div>
-                <span class="title"
-                >已选择
+                <span class="title">已选择
                   <span class="data" style="color: #4ea6ff">{{
                       selectedRows.length
-                    }}</span>
-                  条&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span
-                >
-                <span class="title"
-                >名称：
-                  <span
-                      class="data"
-                      style="color: #4ea6ff; margin-right: 15px"
-                  >{{ selectedRows[0].name }}</span
-                  >
+                  }}</span>
+                  条&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
+                <span class="title">名称：
+                  <span class="data" style="color: #4ea6ff; margin-right: 15px">{{ selectedRows[0].name }}</span>
                 </span>
-                <span class="title"
-                >项目经理：
-                  <span
-                      class="data"
-                      style="color: #4ea6ff; margin-right: 15px"
-                  >{{ selectedRows[0].manager }}</span
-                  >
+                <span class="title">项目经理：
+                  <span class="data" style="color: #4ea6ff; margin-right: 15px">{{ selectedRows[0].manager }}</span>
                 </span>
-                <span class="title"
-                >创建人：
-                  <span
-                      class="data"
-                      style="color: #4ea6ff; margin-right: 15px"
-                  >{{ selectedRows[0].creater }}</span
-                  >
+                <span class="title">创建人：
+                  <span class="data" style="color: #4ea6ff; margin-right: 15px">{{ selectedRows[0].creater }}</span>
                 </span>
-                <span class="title"
-                >创建时间：
+                <span class="title">创建时间：
                   <span class="data" style="color: #4ea6ff">{{
                       selectedRows[0].time
-                    }}</span>
+                  }}</span>
                 </span>
               </div>
               <!-- <div v-else>
@@ -141,38 +103,30 @@
         <div class="">
           <div class="drawerbox">
             <!-- 添加的时候显示多选的表 -->
-            <a-table
-                v-if="!edit"
-                :columns="tableDataFunc()"
-                :data-source="drawertableData"
-                :row-selection="{
-                selectedRowKeys: selectedRowKeys,
-                onChange: onSelectChange,
-              }"
-                :loading="tableDataTotal === -1 ? true : false"
-                :scroll="{ x: 700 }"
-                @expand="expandTable"
-                :pagination="false"
-            >
+            <a-table v-if="!edit" :columns="tableDataFunc()" :data-source="drawertableData" :row-selection="{
+              selectedRowKeys: selectedRowKeys,
+              onChange: onSelectChange,
+            }" :loading="tableDataTotal === -1 ? true : false" :scroll="{ x: 700 }" @expand="expandTable"
+              :pagination="false">
             </a-table>
             <!-- 编辑的时候显示单选的表 -->
-            <a-table
-                v-else
-                :columns="tableDataFunc()"
-                :data-source="drawertableData"
-                :row-selection="{
-                selectedRowKeys: selectedRowKeys,
-                onChange: onSelectChange,
-                type: 'radio',
-              }"
-                :loading="tableDataTotal === -1 ? true : false"
-                :scroll="{ x: 700 }"
-                @expand="expandTable"
-                :pagination="false"
-            >
+            <a-table v-else :columns="tableDataFunc()" :data-source="drawertableData" :row-selection="{
+              selectedRowKeys: selectedRowKeys,
+              onChange: onSelectChange,
+              type: 'radio',
+            }" :loading="tableDataTotal === -1 ? true : false" :scroll="{ x: 700 }" @expand="expandTable"
+              :pagination="false">
             </a-table>
           </div>
         </div>
+        <div class="tableBox">
+          <div class="pa">
+            <a-pagination v-if="(tableDataTotal > 1)" showSizeChanger="true" showQuickJumper="true"
+              hideOnSinglePage="true" :pageSize="pageSize" v-model:current="currentPage" :total="tableDataTotal"
+              class="pagination" @change="changePagination"
+              style="display:flex;justify-content:center;margin-top:12px;margin-bottom:12px;" />
+          </div>
+        </div>
       </div>
       <div class="main_btns">
         <button @click="closeDrawer" class="btn1">取消</button>
@@ -180,13 +134,7 @@
       </div>
     </div>
     <!-- 有重复添加的项目时的弹窗 -->
-    <a-modal
-        v-model:visible="sameModal"
-        :footer="null"
-        :closable="sameCopy"
-        wrapClassName="sameModal"
-        centered="true"
-    >
+    <a-modal v-model:visible="sameModal" :footer="null" :closable="sameCopy" wrapClassName="sameModal" centered="true">
       <div class="delete">
         <div class="del_header"></div>
         <div class="del_main">
@@ -212,9 +160,9 @@
   </a-drawer>
 </template>
 <script>
-import {reactive, toRefs} from "vue";
-import {RouterEditTask} from "@/api/indexTask";
-import {message} from "ant-design-vue";
+import { reactive, toRefs } from "vue";
+import { RouterEditTask } from "@/api/indexTask";
+import { message } from "ant-design-vue";
 import * as apiProj from "../../api/index.js";
 import dayjs from "dayjs";
 
@@ -329,7 +277,12 @@ export default {
     const closeDrawer = () => {
       ctx.emit("update:addprojvisible", false);
       ctx.emit("update:edit", false);
-
+      state.currentPage = 1
+      state.tableDataTotal = 0
+      state.drawertableData = []
+      state.inputV1 = ""
+      state.inputV2 = ""
+      state.inputV3 = ""
       state.selectedRows = [];
       state.selectedRowKeys = [];
     };
@@ -350,7 +303,7 @@ export default {
       // ajax request after empty completing
       setTimeout(() => {
         state.loading = false;
-        state.selectedRowKeys = [];
+
       }, 1000);
     };
     // const onSelectChange = (selectedRowKeys, selectedRows) => {
@@ -364,35 +317,106 @@ export default {
     const resetProjectList = () => {
       state.inputV1 = "";
       state.inputV2 = "";
-      state.inputV1 = "";
+      state.inputV3 = "";
       getAllProjText();
     };
 
+    //翻页
+    const changePagination = (page) => {
+      state.currentPage = page;
+      getAllProjText();
+      // console.log("翻页", page, pageSize);
+    };
+
+    // 点击编辑默认选中
+    const defaultValueOption = () => {
+      if (props.edit) {
+        state.drawertableData = []
+        state.selectedRowKeys = [props.EditProjectId];
+        getCurrentPage();
+      }
+    }
+
+    // 获取所有，确定分页位置
+    const getCurrentPage = () => {
+      apiProj
+        .getProjectList({
+          createName: state.inputV1,
+          manager: state.inputV2,
+          name: state.inputV3,
+          pageNo: 1,
+          pageSize: 10000,
+          status: 3
+        })
+        .then((res) => {
+          // let arr = res.data.data.rows;
+          if (res.status === 200) {
+            console.log('all - project - info', res.data.data)
+
+            let allarr = res.data.data.rows
+            let isHav = true
+            for (let i = 0; i < allarr.length; i++) {
+              if (allarr[i].projectId == props.EditProjectId) {
+                isHav = false
+                state.currentPage = Math.ceil((i + 1) / 10);
+                console.log('sdadasd', state.currentPage)
+                getAllProjText()
+                return
+              }
+            }
+            if (isHav) {
+              getAllProjText()
+              state.currentPage = 1;
+            }
+            // state.drawertableData = getTableDate(arr);
+            // state.tableDataTotal = res.data.data.total
+          }
+        })
+        .catch(() => {
+          message.destroy();
+          //message.error("获取全部项目信息接口失败");
+        });
+    }
+
     //获取全部项目信息接口
     const getAllProjText = () => {
-      apiProj
-          .getProjectList({
-            createName: state.inputV1,
-            manager: state.inputV2,
-            name: state.inputV3,
-            pageNo: state.currentPage,
-            pageSize: state.pageSize,
-            status: state.status,
-          })
-          .then((res) => {
-            let arr = res.data.data.rows;
-            if (res.status === 200) {
-              state.drawertableData = getTableDate(arr);
-            }
-          })
-          .catch(() => {
-            message.destroy();
-            //message.error("获取全部项目信息接口失败");
-          });
-    };
-    const afterVisibleChange = (bool) => {
 
-      if (bool) {
+      console.log("搜索的参数信息", {
+        createName: state.inputV3,
+        manager: state.inputV2,
+        name: state.inputV1,
+        pageNo: state.currentPage,
+        pageSize: state.pageSize,
+        status: 3
+      })
+
+      apiProj
+        .getProjectList({
+          createName: state.inputV3,
+          manager: state.inputV2,
+          name: state.inputV1,
+          pageNo: state.currentPage,
+          pageSize: state.pageSize,
+          status: 3
+        })
+        .then((res) => {
+          let arr = res.data.data.rows;
+          if (res.status === 200) {
+            console.log('all - project - info', res.data.data)
+            state.drawertableData = getTableDate(arr);
+            state.tableDataTotal = res.data.data.total
+          }
+        })
+        .catch(() => {
+          message.destroy();
+          //message.error("获取全部项目信息接口失败");
+        });
+    };
+    const afterVisibleChange = () => {
+
+      if (props.edit) {
+        defaultValueOption();
+      } else {
         getAllProjText();
       }
     };
@@ -424,6 +448,7 @@ export default {
             manager: value.manager,
             time: dayjs(value.createTime).format("YYYY-MM-DD"),
             children: value.subList ? getTableDate(value.subList) : [],
+            creater: value.createName,
           };
           array.push(obj);
         }
@@ -475,14 +500,14 @@ export default {
           routerTaskId: props.routerTaskId || 0,
           type: 13,
         })
-            .then(() => {
-              message.success(`${props.edit ? "编辑" : "新增"}关卡任务成功`);
-              ctx.emit("changeData", false);
-              closeDrawer();
-            })
-            .catch(() => {
-              message.error(`${props.edit ? "编辑" : "新增"}关卡任务失败`);
-            });
+          .then(() => {
+            message.success(`${props.edit ? "编辑" : "新增"}关卡任务成功`);
+            ctx.emit("changeData", false);
+            closeDrawer();
+          })
+          .catch(() => {
+            message.error(`${props.edit ? "编辑" : "新增"}关卡任务失败`);
+          });
       }
     };
     const onSelectChange = (selectedRowKeys, selectRow) => {
@@ -526,6 +551,8 @@ export default {
       showSameModal,
       closeSameModal,
       sureSameModal,
+      changePagination,
+      getCurrentPage
     };
   },
 };
@@ -556,6 +583,7 @@ export default {
           background: #ffffff;
           box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
           border-radius: 4px;
+
           // position: absolute;
           // left: 50%;
           // top: 10%;
@@ -564,10 +592,8 @@ export default {
             position: absolute;
             width: calc(100%);
             height: 68px;
-            background: linear-gradient(
-                    rgba(78, 166, 255, 0.2) 0%,
-                    rgba(78, 166, 255, 0) 100%
-            );
+            background: linear-gradient(rgba(78, 166, 255, 0.2) 0%,
+                rgba(78, 166, 255, 0) 100%);
           }
 
           .del_main {
@@ -663,6 +689,7 @@ export default {
 
 .addrefDrawer {
   .drawerMain {
+
     // .main_notice {
     //   display: flex;
     //   justify-content: space-between;
@@ -798,6 +825,43 @@ export default {
           }
         }
       }
+
+      .tableBox {
+        // margin: 20px 38px 30px;
+        margin: 10px 35px 0px 35px;
+
+        th.h {
+          background-color: #eff4fc !important;
+        }
+
+        .ant-table-tbody>tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td {
+          background: #f6f9fd;
+        }
+      }
+
+      .tableBox {
+        padding-bottom: 20px;
+
+        .pa {
+          // position: absolute;
+          // bottom: 20px;
+          // left: 0;
+          width: 100%;
+          // height: 20px;
+          // background-color: red;
+          display: flex;
+          justify-content: center;
+
+          // margin-bottom: 10px;
+          // position: absolute;
+          // bottom: -40px;
+          .pagination {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+        }
+      }
     }
 
     .main_btns {