fix:修改创建评估及编辑评估回显

src/components/drawers/AssessmentAll.vue

@@ -1,59 +1,54 @@
 <!-- 评估列表 -->
 <template>
- 
-    <div class="main_item">
-      <div class="fi_input">
-        <a-input
-          v-model:value="inputV1"
-          style="width: 424px; height: 40px; border-radius: 8px;"
-          placeholder="请输入评估名称"
-          maxlength="20"
-        />
-      </div>
-      <div class="btns" @click="getAllInvistText">
-        <div class="search"></div>
-        <div class="btnText">搜索</div>
-      </div>
-      <div class="btnsn" @click="resetInvist">
-        <div class="search"></div>
-        <div class="btnText">重置</div>
-      </div>
+  <div class="main_item">
+    <div class="fi_input">
+      <a-input
+        v-model:value="inputV1"
+        style="width: 424px; height: 40px; border-radius: 8px"
+        placeholder="请输入评估名称"
+        maxlength="20"
+      />
     </div>
-    <div class="main_notice">
-              <div class="mntc_left">
-                <div class="notice_icon"></div>
-                <div v-if="assessment == null">
-                  <span class="title"
-                    >已选择 <span class="data">0</span> 条</span
-                  >
-                </div>
-                <div v-else>
-                  <div >
-                    <span class="title"
-                      >已选择 <span class="data">1</span> 条;</span
-                    >
-                    <span class="title"
-                      >名称： <span class="data">{{ assessment.name }}</span>
-                    </span><!--
+    <div class="btns" @click="getAllInvistText">
+      <div class="search"></div>
+      <div class="btnText">搜索</div>
+    </div>
+    <div class="btnsn" @click="resetInvist">
+      <div class="search"></div>
+      <div class="btnText">重置</div>
+    </div>
+  </div>
+  <div class="main_notice">
+    <div class="mntc_left">
+      <div class="notice_icon"></div>
+      <div v-if="assessment == null">
+        <span class="title">已选择 <span class="data">0</span> 条</span>
+      </div>
+      <div v-else>
+        <div>
+          <span class="title">已选择 <span class="data">1</span> 条;</span>
+          <span class="title"
+            >名称： <span class="data">{{ assessment.name }}</span> </span
+          ><!--
                     <span class="title"
                       >题数： <span class="data">{{ assessment.essayQuestionVoList?Number(assessment.essayQuestionVoList.length):0
                       +Number(assessment.multipleStemVoList?assessment.multipleStemVoList.length:0)
                       +Number(assessment.scoringQuestionVoList?assessment.scoringQuestionVoList.length:0)
                       +Number(assessment.singleStemVoList?assessment.singleStemVoList.length:0) }}</span>
                     </span>-->
-                    <span class="title"
-                      >题数： <span class="data">{{ assessment.num }}</span>
-                    </span>
-                    <span class="title"
-                      >创建人：
-                      <span class="data">{{ assessment.creator }}</span>
-                    </span>
-                    <span class="title"
-                      >创建时间：
-                      <span class="data">{{ assessment.time }}</span>
-                    </span>
-                  </div>
-                  <!--
+          <span class="title"
+            >题数： <span class="data">{{ assessment.num }}</span>
+          </span>
+          <span class="title"
+            >创建人：
+            <span class="data">{{ assessment.creator }}</span>
+          </span>
+          <span class="title"
+            >创建时间：
+            <span class="data">{{ assessment.time }}</span>
+          </span>
+        </div>
+        <!--
                   <div v-else>
                     <span class="title"
                       >已选择 <span class="data">1</span> 条;</span
@@ -78,27 +73,27 @@
                     </span>
                   </div>
                   -->
-                </div>
-              </div>
       </div>
-   
-      <div class="main_table">
-      <a-table
-        style="border: 1px solid #f2f6fe"
-        :columns="tableDataFunc()"
-        :data-source="tableData"
-        :loading="tableDataTotal === -1 ? true : false"
-        expandRowByClick="true"
-        @expand="expandTable"
-        :pagination="false"
-        :row-selection="{
-                  type: 'radio',
-                  selectedRowKeys: selectedRowKeys,
-                  onChange: onSelectChange,
-                }"
-        filterMultiple:false
-      />
-      <div class="tableBox">
+    </div>
+  </div>
+
+  <div class="main_table">
+    <a-table
+      style="border: 1px solid #f2f6fe"
+      :columns="tableDataFunc()"
+      :data-source="tableData"
+      :loading="tableDataTotal === -1 ? true : false"
+      expandRowByClick="true"
+      @expand="expandTable"
+      :pagination="false"
+      :row-selection="{
+        type: 'radio',
+        selectedRowKeys: selectedRowKeys,
+        onChange: onSelectChange,
+      }"
+      filterMultiple:false
+    />
+    <div class="tableBox">
       <div class="pa">
         <a-pagination
           :showSizeChanger="false"
@@ -110,12 +105,12 @@
           class="pagination"
           @change="handelChangePage"
         />
-      </div></div>
+      </div>
     </div>
-
+  </div>
 </template>
 <script>
-import { reactive, toRefs,onMounted } from "vue";
+import { reactive, toRefs, onMounted, watch } from "vue";
 import * as api from "../../api/indexInvist.js";
 import dayjs from "dayjs";
 export default {
@@ -127,11 +122,11 @@ export default {
       type: Boolean,
       default: false,
     },
-    assessmentId:{
+    assessmentId: {
       type: Number,
       default: null,
     },
-    assessmentName:{
+    assessmentName: {
       type: String,
       default: null,
     },
@@ -145,38 +140,55 @@ export default {
       pageSize: 10,
       tableDataTotal: 0,
       tableData: [],
-      selectedRowKeys:[],
-      assessmentId:null,
-      assessmentName:null,
+      selectedRowKeys: [],
+      assessmentId: null,
+      assessmentName: null,
     });
     const closeDrawer = () => {
       ctx.emit("update:assessmentVisible", false);
     };
-     //清空所选
-     const clearLine = () => {
-      console.log("state.selectedRowKeys",state.selectedRowKeys)
+    //清空所选
+    const clearLine = () => {
+      console.log("state.selectedRowKeys", state.selectedRowKeys);
       state.selectedRowKeys = [];
       state.addOnlineList = [];
     };
     const queryInfo = () => {
       //if (props.edit) {
-       // state.titleTg = false;
-        //编辑讨
-       
-        console.log("查询评估",props.assessmentId);
-        if(props.assessmentId){
-          api
+      // state.titleTg = false;
+      //编辑讨
+
+      console.log("查询评估", props.assessmentId);
+      if (props.assessmentId) {
+        api
           .queryAppraiseDetailById({ assessmentId: props.assessmentId })
           .then((res) => {
-            console.log(res);
+            console.log("查询评估xinxi ", res);
+            let info = res.data.data;
+            let obj = {
+              assessmentId: info.assessmentId,
+              name: info.assessmentName,
+              num: info.essayQuestionVoList
+                ? Number(info.essayQuestionVoList.length)
+                : 0 + info.multipleStemVoList
+                ? Number(info.multipleStemVoList.length)
+                : 0 + info.scoringQuestionVoList
+                ? Number(info.scoringQuestionVoList.length)
+                : 0 + info.singleStemVoList
+                ? Number(info.singleStemVoList.length)
+                : 0,
+              creator: info.createUser ? info.createUser : "-",
+              time: dayjs(info.createTime).format("YYYY-MM-DD"),
+            };
             //更新讨论信息
-            state.assessment = res.data.data;
-          //  state.assessmentId = res.data.data.assessmentId;
+            state.assessment = obj;
+            state.selectedRowKeys = [info.assessmentId];
+            //  state.assessmentId = res.data.data.assessmentId;
           })
           .catch(() => {});
-        }
-       
-    //  }
+      }
+
+      //  }
     };
     const tableDataFunc = () => {
       const columns = [
@@ -219,13 +231,12 @@ export default {
       state.addOnlineList = selectedRows;
       console.log(selectedRowKeys, selectedRows);
       state.assessment = selectedRows[0];
-        console.log("selectedRows=======", state.assessment);
-        //  ctx.emit("checkedAss", state.assessment);
-        ctx.emit("update:assessmentId", state.assessment.assessmentId);
-        ctx.emit("update:assessmentName", state.assessment.name);
-    }
- 
- 
+      console.log("selectedRows=======", state.assessment);
+      //  ctx.emit("checkedAss", state.assessment);
+      ctx.emit("update:assessmentId", state.assessment.assessmentId);
+      ctx.emit("update:assessmentName", state.assessment.name);
+    };
+
     const handelChangePage = (page, pageSize) => {
       state.currentPage = page;
       state.pageSize = pageSize;
@@ -234,21 +245,27 @@ export default {
     const getTableDate = (tableData) => {
       let data = tableData;
       let array = [];
-      data.map((value, index) => {
+      data.map((value) => {
         let obj = {
-          key: index,
+          key: value.assessmentId,
           assessmentId: value.assessmentId,
-          num: value.essayQuestionVoList?Number(value.essayQuestionVoList.length):0
-          +value.multipleStemVoList?Number(value.multipleStemVoList.length):0
-          +value.scoringQuestionVoList?Number(value.scoringQuestionVoList.length):0
-          +value.singleStemVoList?Number(value.singleStemVoList.length):0,
+          num: value.essayQuestionVoList
+            ? Number(value.essayQuestionVoList.length)
+            : 0 + value.multipleStemVoList
+            ? Number(value.multipleStemVoList.length)
+            : 0 + value.scoringQuestionVoList
+            ? Number(value.scoringQuestionVoList.length)
+            : 0 + value.singleStemVoList
+            ? Number(value.singleStemVoList.length)
+            : 0,
           name: value.assessmentName ? value.assessmentName : "-",
           creator: value.createUser ? value.createUser : "-",
           time: dayjs(value.createTime).format("YYYY-MM-DD"),
         };
         array.push(obj);
       });
-      (state.selectedRowKeys = []), (state.tableData = array);
+      state.selectedRowKeys = [];
+      state.tableData = array;
     };
     //获取全部评估信息接口
     const getAllInvistText = () => {
@@ -279,15 +296,34 @@ export default {
     };
     onMounted(() => {
       clearLine();
-      console.log("state.selectedRowKeys",state.selectedRowKeys)
-      if(!state.assessmentId){
+      console.log(
+        "state.selectedRowKeys",
+        state.selectedRowKeys,
+        state.assessmentId
+      );
+      if (!state.assessmentId) {
         clearLine();
       }
 
       queryInfo();
       getAllInvistText();
-      
     });
+    watch(
+      () => props.assessmentId,
+      () => {
+        if (!props.assessmentId) {
+          clearLine();
+          state.assessment = null;
+        } else {
+          queryInfo();
+        }
+        console.log("props.assessmentId", props.assessmentId);
+      },
+      {
+        deep: true,
+      }
+    );
+
     return {
       ...toRefs(state),
       onSelectChange,
@@ -322,14 +358,13 @@ export default {
       }
     }
     .contentMain {
-   
       .main_left {
         padding-right: 30px;
         margin-top: 32px;
         .main_item {
           display: flex;
           align-items: center;
-       
+
           .fi_input {
             margin-right: 20px;
           }
@@ -398,36 +433,36 @@ export default {
       }
     }
     .main_table {
-        position: relative;
-        padding-bottom: 80px;
-        .ant-checkbox-wrapper {
-          align-items: center;
-          margin-top: -2px;
-        }
-        .ant-table-selection-column {
-          padding: 0px !important;
-          padding-left: 5px !important;
-        }
-        .ant-table-thead > tr > th {
-          background-color: rgba(239, 244, 252, 1);
-        }
-        th.h {
-          background-color: #eff4fc !important;
-        }
-        .ant-table-tbody
-          > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
-          > td {
-          background: #f6f9fd;
-        }
-        .pa {
-          left: 0;
-          width: 100%;
-          display: flex;
-          justify-content: center;
-          position: absolute;
-          bottom: 20px;
-        }
+      position: relative;
+      padding-bottom: 80px;
+      .ant-checkbox-wrapper {
+        align-items: center;
+        margin-top: -2px;
       }
+      .ant-table-selection-column {
+        padding: 0px !important;
+        padding-left: 5px !important;
+      }
+      .ant-table-thead > tr > th {
+        background-color: rgba(239, 244, 252, 1);
+      }
+      th.h {
+        background-color: #eff4fc !important;
+      }
+      .ant-table-tbody
+        > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
+        > td {
+        background: #f6f9fd;
+      }
+      .pa {
+        left: 0;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        position: absolute;
+        bottom: 20px;
+      }
+    }
     .main_btns {
       height: 72px;
       width: 100%;