fix(BUG:63):学习路径图-编辑项目-Table表格回显字段修复。

2025-12-13 04:46:46 +08:00 · 2022-12-02 14:56:37 +08:00
parent be71d6b9fe
commit ba20216f1a
1 changed files with 199 additions and 135 deletions
--- 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 {