--fix 路径图整体修改

src/components/drawers/AssessmentAll.vue

@@ -3,17 +3,17 @@
   <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"
+          v-model:value="params.assessmentName"
+          style="width: 424px; height: 40px; border-radius: 8px"
+          placeholder="请输入评估名称"
+          maxlength="20"
       />
     </div>
-    <div class="btns" @click="searchList">
+    <div class="btns" @click="search">
       <div class="search"></div>
       <div class="btnText">搜索</div>
     </div>
-    <div class="btnsn" @click="resetInvist">
+    <div class="btnsn" @click="reset">
       <div class="search"></div>
       <div class="btnText">重置</div>
     </div>
@@ -28,374 +28,159 @@
   <div class="main_notice" style="display:none;">
     <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>
-        <!--
-                  <div v-else>
-                    <span class="title"
-                      >已选择 <span class="data">1</span> 条;</span
-                    >
-                    <span class="title"
-                      >名称：
-                      <span class="data">{{ assessment1.assessmentName }}</span>
-                    </span>
-                    <span class="title"
-                      >题数：
-                      <span class="data">{{
-                        assessment1.essayQuestionVoList.length
-                      }}</span>
-                    </span>
-                    <span class="title"
-                      >创建人：
-                      <span class="data">{{ assessment1.createUser }}</span>
-                    </span>
-                    <span class="title"
-                      >创建时间：
-                      <span class="data">{{ assessment1.createTime }}</span>
-                    </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
+        :customRow="customRow"
+        class="ant-table-striped"
+        :row-class-name="(_, index) => (index % 2 === 1 ? 'table-striped' : null)"
+        row-key="id"
+        :columns="columns"
+        :data-source="data"
+        :loading="loading"
+        :pagination="pagination"
+        :row-selection="rowSelection"
     />
-    <div class="tableBox" style="margin-top:85px;">
-      <div class="pa">
-        <a-pagination
-          :showSizeChanger="false"
-          showQuickJumper="true"
-          hideOnSinglePage="true"
-          :pageSize="pageSize"
-          :current="currentPage"
-          :total="tableDataTotal"
-          class="pagination"
-          @change="handelChangePage"
-        />
-      </div>
-    </div>
   </div>
 </template>
-<script>
-import { reactive, toRefs, onMounted, watch } from "vue";
-import * as api from "../../api/indexInvist.js";
-import dayjs from "dayjs";
-import { useRouter } from "vue-router";
+<script setup>
+import {computed, defineEmits, defineProps, ref, watch} from "vue";
+import {useRouter} from "vue-router";
+import {useRowsPage} from "@/api/request";
+import {ASSESSMENT_PAGE} from "@/api/apis";
 
-export default {
-  name: "AssessmentAll",
-  // components: {
-  // },
-  props: {
-    assessmentVisible: {
-      type: Boolean,
-      default: false,
-    },
-    assessmentId: {
-      type: Number,
-      default: null,
-    },
-    assessmentName: {
-      type: String,
-      default: null,
-    },
+const props = defineProps({
+  id: String,
+  name: String
+})
+const emit = defineEmits([])
+const columns = ref([
+  {
+    title: "名称",
+    dataIndex: "assessmentName",
+    key: "assessmentName",
+    width: "40%",
+    ellipsis: true,
   },
-  setup(props, ctx) {
-    const router = useRouter();
-    const state = reactive({
-      assessmentVisible: false,
-      assessment: null,
-      inputV1: "",
-      currentPage: 1,
-      pageSize: 10,
-      tableDataTotal: 0,
-      tableData: [],
-      selectedRowKeys: [],
-      assessmentId: null,
-      assessmentName: null,
-    });
-    const afterVisibleChange=()=>{
-
-    }
-    const closeDrawer = () => {
-      ctx.emit("update:assessmentVisible", false);
-     
-    };
-    //清空所选
-    const clearLine = () => {
-      console.log("state.selectedRowKeys", state.selectedRowKeys);
-      state.selectedRowKeys = [];
-      state.addOnlineList = [];
-      state.inputV1 = "";
-    };
-    const queryInfo = () => {
-      //if (props.edit) {
-      // state.titleTg = false;
-      //编辑讨
-
-      console.log("查询评估", props.assessmentId);
-      if (props.assessmentId) {
-        api
-          .queryAppraiseDetailById({ assessmentId: props.assessmentId })
-          .then((res) => {
-            console.log("查询评估xinxi ", res);
-            
-            let info = res.data.data;
-            let n1 = info.essayQuestionVoList
-                ? Number(info.essayQuestionVoList.length)
-                : 0 ;
-            let n2 = info.multipleStemVoList
-                    ? Number(info.multipleStemVoList.length)
-                    : 0;
-          
-            let n3 = info.scoringQuestionVoList
-                    ? Number(info.scoringQuestionVoList.length)
-                    : 0;
-            let n4 =  info.singleStemVoList
-                    ? Number(info.singleStemVoList.length)
-                    : 0;
-
-            let num =  n1 + n2 + n3 +n4;    
-            let obj = {
-              assessmentId: info.id,
-              name: info.assessmentName,
-              num: num,
-              creator: info.createUserName ? info.createUserName : "-",
-              time: dayjs(info.createTime).format("YYYY-MM-DD HH:mm"),
-            };
-            //更新讨论信息
-            state.assessment = obj;
-            state.selectedRowKeys = [info.id];
-            //  state.assessmentId = res.data.data.assessmentId;
-          })
-          .catch(() => {});
-      }
-      //  }
-    };
-    const tableDataFunc = () => {
-      const columns = [
-        {
-          title: "名称",
-          dataIndex: "name",
-          // width: "30%",
-          key: "name",
-          width: "40%",
-
-          className: "classify",
-          ellipsis: true,
-        },
-        {
-          title: "题数",
-          dataIndex: "num",
-          key: "num",
-          width: "20%",
-          align: "center",
-          ellipsis: true,
-        },
-        {
-          title: "创建人",
-          dataIndex: "creator",
-          key: "creator",
-          width: "20%",
-          align: "center",
-          ellipsis: true,
-        },
-        {
-          title: "创建时间",
-          dataIndex: "time",
-          key: "time",
-          width: "20%",
-          align: "center",
-          ellipsis: true,
-        },
-      ];
-      return columns;
-    };
-    const onSelectChange = (selectedRowKeys, selectedRows) => {
-      state.selectedRowKeys = selectedRowKeys;
-      state.addOnlineList = selectedRows;
-      state.assessment = selectedRows[0];
-      ctx.emit("update:assessmentId", state.assessment.assessmentId);
-      ctx.emit("update:assessmentName", state.assessment.name);
-    };
-
-    const handelChangePage = (page, pageSize) => {
-      state.currentPage = page;
-      state.pageSize = pageSize;
-      getAllInvistText();
-    };
-    const getTableDate = (tableData) => {
-      let data = tableData;
-      let array = [];
-      data.map((value) => {
-        let n1 = value.essayQuestionVoList
-                ? Number(value.essayQuestionVoList.length)
-                : 0 ;
-        let n2 = value.multipleStemVoList
-                ? Number(value.multipleStemVoList.length)
-                : 0;
-       
-        let n3 = value.scoringQuestionVoList
-                ? Number(value.scoringQuestionVoList.length)
-                : 0;
-        let n4 =  value.singleStemVoList
-                ? Number(value.singleStemVoList.length)
-                : 0;
-
-        let num =  n1 + n2 + n3 +n4;   
-        let obj = {
-          key: value.id,
-          assessmentId: value.id,
-          num: num,
-          name: value.assessmentName ? value.assessmentName : "-",
-          creator: value.createUserName ? value.createUserName : "-",
-          time: dayjs(value.createTime).format("YYYY-MM-DD HH:mm"),
-        };
-        array.push(obj);
-      });
-      state.selectedRowKeys = [];
-      state.tableData = array;
-    };
-    //获取全部评估信息接口
-    const getAllInvistText = () => {
-     
-      api
-        .queryAssessmentDetailList({
-          assessmentName: state.inputV1,
-          pageNo: state.currentPage,
-          pageSize: state.pageSize,
-          releaseStatus:2,
-          searchEndTime:"",
-        })
-        .then((res) => {
-          let arr = res.data.data.rows;
-          if (res.status === 200) {
-            // console.log("获取全部评估信息", res.data.data);
-            getTableDate(arr);
-            state.tableDataTotal = Number(res.data.data.total);
-          }
-        })
-        .catch((err) => {
-          console.log("获取全部评估信息接口失败", err);
-          // state.createLoading = false;
-        });
-    };
- //重置评估信息
-  const searchList = () => {
-      state.selectedRowKeys = [];
-  
-      getAllInvistText();
-    };
-    //重置评估信息
-    const resetInvist = () => {
-      state.selectedRowKeys = [];
-      state.inputV1 = "";
-      getAllInvistText();
-    };
-    onMounted(() => {
-      clearLine();
-      console.log(
-        "state.selectedRowKeys",
-        state.selectedRowKeys,
-        state.assessmentId
-      );
-      state.inputV1 = "";
-      queryInfo();
-      getAllInvistText();
-    });
-    watch(
-      () => props.assessmentId,
-      () => {
-        if (!props.assessmentId) {
-          clearLine();  
-          state.assessment = null;
-        } else {
-          queryInfo();
-          console.log("dd");
-        }
-        console.log("props.assessmentId", props.assessmentId);
-      },
-      {
-        deep: true,
-      }
-    );
-
-    // 新建评估
-    const goResearchmanage = () => {
-      router.push({ path: "/researchmanage" });
-    }
-
-    return {
-      ...toRefs(state),
-      onSelectChange,
-      closeDrawer,
-      tableDataFunc,
-      getAllInvistText,
-      resetInvist,
-      handelChangePage,
-      queryInfo,
-      searchList,
-      afterVisibleChange,
-      goResearchmanage
-    };
+  {
+    title: "题数",
+    dataIndex: "num",
+    key: "num",
+    width: "20%",
+    align: "center",
+    ellipsis: true,
   },
+  {
+    title: "创建人",
+    dataIndex: "createUser",
+    key: "createUser",
+    width: "20%",
+    align: "center",
+    ellipsis: true,
+  },
+  {
+    title: "创建时间",
+    dataIndex: "createTime",
+    key: "createTime",
+    width: "20%",
+    align: "center",
+    ellipsis: true,
+  },
+])
+const initParams = {
+  assessmentName: '',
+  pageNo: 1,
+  pageSize: 10,
+}
+const router = useRouter()
+const params = ref(initParams)
+
+const rowSelectKeys = ref([]);
+const selectsData = ref([]);
+
+const {data, loading, total, fetch} = useRowsPage(ASSESSMENT_PAGE, params.value)
+
+watch(()=>props.id, () => {
+  if (props.id) {
+    rowSelectKeys.value = [props.id]
+    selectsData.value = [{id: props.id, assessmentName: props.name}]
+  } else {
+    rowSelectKeys.value = []
+    selectsData.value = []
+  }
+})
+
+const customRow = (record) => ({
+  onClick: () => {
+    rowSelectKeys.value = [record.id]
+    selectsData.value = [record]
+    emit('update:id', selectsData.value[0].id)
+    emit('update:name', selectsData.value[0].assessmentName)
+  }
+})
+
+const pagination = computed(() => ({
+  total: total.value,
+  showSizeChanger: false,
+  current: params.value.pageNo,
+  pageSize: params.value.pageSize,
+  onChange: changePagination,
+}));
+
+const changePagination = (e) => {
+  params.value.pageIndex = e;
+  fetch()
 };
+const rowSelection = computed(() => ({
+  type: 'radio',
+  columnWidth: 20,
+  selectedRowKeys: rowSelectKeys.value,
+  onChange: onSelectChange,
+  preserveSelectedRowKeys: true,
+}));
+
+function onSelectChange(e, l) {
+  rowSelectKeys.value = e;
+  selectsData.value = l;
+  emit('update:id', selectsData.value[0].id)
+  emit('update:name', selectsData.value[0].assessmentName)
+}
+
+function search() {
+  params.value.pageIndex = 1
+  fetch()
+}
+
+function reset() {
+  rowSelectKeys.value = [];
+  selectsData.value = [];
+  params.value.pageIndex = 1
+  params.value.keyWord = ''
+  fetch()
+}
+
+const goResearchmanage = () => {
+  router.push({path: "/researchmanage"});
+}
+
 </script>
 <style lang="scss">
 .xkbtn {
-	cursor: pointer;
-	width: 130px;
-	height: 40px;
-	background: #4ea6ff;
-	border-radius: 8px;
-	border: 0;
-	margin-right: 8px;
-	color: #fff;
+  cursor: pointer;
+  width: 130px;
+  height: 40px;
+  background: #4ea6ff;
+  border-radius: 8px;
+  border: 0;
+  margin-right: 8px;
+  color: #fff;
 }
+
 .ant-table-striped :deep(.table-striped) td {
   background-color: #fafafa !important;
 }
+
 .addinvistDrawer {
   .drawerMain {
     .header {
@@ -404,6 +189,7 @@ export default {
       display: flex;
       justify-content: space-between;
       align-items: center;
+
       .headerTitle {
         font-size: 18px;
         font-weight: 600;
@@ -412,10 +198,12 @@ export default {
         margin-left: 24px;
       }
     }
+
     .contentMain {
       .main_left {
         padding-right: 30px;
         margin-top: 32px;
+
         .main_item {
           display: flex;
           align-items: center;
@@ -423,6 +211,7 @@ export default {
           .fi_input {
             margin-right: 20px;
           }
+
           .btns {
             margin-right: 20px;
             padding: 0px 26px 0px 26px;
@@ -436,12 +225,14 @@ export default {
             margin-right: 14px;
             flex-shrink: 0;
             cursor: pointer;
+
             .search {
               width: 15px;
               height: 17px;
               background-image: url("../../assets/images/courseManage/search0.png");
               background-size: 100% 100%;
             }
+
             .btnText {
               font-size: 14px;
               font-weight: 400;
@@ -450,6 +241,7 @@ export default {
               margin-left: 5px;
             }
           }
+
           .btnsn {
             padding: 0px 26px 0px 26px;
             height: 38px;
@@ -462,12 +254,14 @@ export default {
             margin-right: 14px;
             flex-shrink: 0;
             cursor: pointer;
+
             .search {
               width: 16px;
               height: 18px;
               background-image: url("../../assets/images/courseManage/reset1.png");
               background-size: 100% 100%;
             }
+
             .btnText {
               font-size: 14px;
               font-weight: 400;
@@ -477,6 +271,7 @@ export default {
             }
           }
         }
+
         .main_item2 {
           .pa {
             width: 100%;
@@ -487,28 +282,35 @@ 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 {
+      > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
+      > td {
         background: #f6f9fd;
       }
+
       .pa {
         left: 0;
         width: 100%;
@@ -518,6 +320,7 @@ export default {
         bottom: 20px;
       }
     }
+
     .main_btns {
       height: 72px;
       width: 100%;
@@ -527,6 +330,7 @@ export default {
       align-items: center;
       justify-content: center;
       box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
+
       .btn1 {
         width: 100px;
         height: 40px;
@@ -536,6 +340,7 @@ export default {
         background-color: #fff;
         cursor: pointer;
       }
+
       .btn2 {
         cursor: pointer;
         width: 100px;