--fix 路径图整体修改

src/components/drawers/SelectTest.vue

@@ -1,18 +1,20 @@
 <template>
+  <div @click="openDrawer">
+    <slot></slot>
+  </div>
   <a-drawer
-    :visible="STvisible"
-    class="drawerStyle TimeManage"
-    placement="right"
-    width="60%"
-    @after-visible-change="afterVisibleChange"
+      :visible="visible"
+      class="drawerStyle TimeManage"
+      placement="right"
+      width="1000"
   >
     <div class="drawerMain">
       <div class="header">
         <div class="headerTitle">选择试卷</div>
         <img
-          style="width: 29px; height: 29px; cursor: pointer"
-          src="../../assets/images/basicinfo/close.png"
-          @click="closeDrawer"
+            style="width: 29px; height: 29px; cursor: pointer"
+            src="../../assets/images/basicinfo/close.png"
+            @click="closeDrawer"
         />
       </div>
       <div class="main">
@@ -21,293 +23,205 @@
             <div class="namecon" style="margin-right: 30px">
               <div class="name">试卷名称：</div>
               <a-input
-                v-model:value="inputPname"
-                style="width: 270px; height: 40px; border-radius: 8px"
-                placeholder="请输入试卷名称"
+                  v-model:value="params.keyWord"
+                  style="width: 270px; height: 40px; border-radius: 8px"
+                  placeholder="请输入试卷名称"
               />
             </div>
-            <!-- 因为接口不支持创建人搜索，所以暂时注调 -->
-            <!-- <div class="namecon" style="margin-right: 30px">
-              <div class="name">创建人：</div>
-              <a-input
-                v-model:value="inputCname"
-                style="width: 240px; height: 40px; border-radius: 8px"
-                placeholder="请输入创建人"
-              />
-            </div> -->
           </div>
           <div class="btns">
             <div
-              class="btn btn1"
-              style="margin-right: 20px"
-              @click="getManageList"
+                class="btn btn1"
+                style="margin-right: 20px"
+                @click="search"
             >
               <div class="img1"></div>
               <div class="wz">搜索</div>
             </div>
-            <div class="btn btn2" @click="resetTaskList">
+            <div class="btn btn2" @click="reset">
               <div class="img2"></div>
               <div class="wz">重置</div>
             </div>
           </div>
         </div>
         <div class="btnss" style="margin-top: 20px">
-          <div class="btn btn1" @click="newTest()" style="margin-right: 20px">
+          <div class="btn btn1" @click="createPage" style="margin-right: 20px">
             <div class="wz">新建试卷</div>
           </div>
         </div>
         <div class="tab" style="margin-top: 20px; margin-bottom: 100px">
           <a-table
-            style="border: 1px solid #f2f6fe"
-            :columns="tableDataFunc()"
-            :data-source="tableData"
-            :loading="tableDataTotal === -1 ? true : false"
-            :row-selection="{
-              selectedRowKeys: selectedRowKeys,
-              onChange: onSelectChange,
-              type: 'radio',
-            }"
-            :scroll="{ x: 900 }"
-            :pagination="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
-                v-if="tableDataTotal>10"
-                :showSizeChanger="false"
-                showQuickJumper="true"
-                hideOnSinglePage="true"
-                :pageSize="pageSize"
-                :current="currentPage"
-                :total="tableDataTotal"
-                class="pagination"
-                @change="onChange"
-              />
-            </div>
-          </div>
         </div>
       </div>
       <div class="btnn">
-        <button class="btn1"  @click="closeDrawer">取消</button>
-        <button class="btn2" @click="CreatSTText()">确定</button>
+        <button class="btn1" @click="closeDrawer">取消</button>
+        <button class="btn2" @click="confirm">确定</button>
       </div>
     </div>
   </a-drawer>
 
   <!-- 新建考试 -->
   <a-modal
-    v-model:visible="addExamVisible"
-    :footer="null"
-    :closable="false"
-    wrapClassName="modalStyle addExamModal"
-    :zIndex="9999"
+      v-model:visible="createVisible"
+      :footer="null"
+      :closable="false"
+      wrapClassName="modalStyle addExamModal"
+      :zIndex="9999"
   >
     <iframe
-      id="iframe"
-      style="width: 100%; height: 100%"
-      :src="iframeUrl + '/exam/papers?addnew=true'"
-      name="myframe"
-      sandbox="allow-forms allow-scripts allow-same-origin allow-popups"
+        id="iframe"
+        style="width: 100%; height: 100%"
+        :src="iframeUrl + '/exam/papers?addnew=true'"
+        name="myframe"
+        sandbox="allow-forms allow-scripts allow-same-origin allow-popups"
     ></iframe>
   </a-modal>
 </template>
-  
-  <script>
-import { toRefs, reactive } from "vue";
-import * as api from "../../api/indexExam";
-//import { message } from "ant-design-vue";
-import { iframeUrl } from "../../api/method";
-export default {
-  name: "STest",
-  props: {
-    STvisible: {
-      type: Boolean,
-      default: false,
-    },
+
+<script setup>
+import {computed, defineEmits, defineProps, ref} from "vue";
+import {iframeUrl} from "@/api/method";
+import {useBoeApiPage} from "@/api/request";
+import {EXAM_PAPER_PAGE} from "@/api/ThirdApi";
+import {message} from "ant-design-vue";
+
+defineProps({
+  id: String,
+  name: String
+})
+const visible = ref(false)
+const createVisible = ref(false)
+const emit = defineEmits({})
+
+const columns = ref([
+  {
+    title: "试卷名称",
+    dataIndex: "testName",
+    key: "testName",
+    width: "40%",
+    align: "center",
+    className: "h head",
+    ellipsis: true,
   },
-
-  setup(props, ctx) {
-    const state = reactive({
-      inputPname: "",
-      inputCname: "",
-      pageNo: 1,
-      pageSize: 10,
-      currentPage: 1,
-      tableDataTotal: 50,
-      projectName: "",
-      tableData: [],
-      selectedRowKeys: [],
-      //需要传给父亲的参数
-      SelectTestData: {},
-
-      addExamVisible: false, //新建考试弹窗
-      iframeUrl: iframeUrl,
-    });
-    //点击确认后执行此方法将参数传给父亲
-    const CreatSTText = () => {
-      ctx.emit("getSTData", state.SelectTestData);
-      closeDrawer();
-    };
-    const closeDrawer = () => {
-      state.selectedRowKeys = []
-      ctx.emit("update:STvisible", false);
-    };
-
-    const afterVisibleChange = (bol) => {
-      if (bol == true) {
-        getManageList();
-      }
-    };
-
-    const tableDataFunc = () => {
-      {
-        const columns = [
-         // {
-           //  title: "序号",
-            // dataIndex: "paperId",
-            // key: "paperId",
-            // width: 90,
-           //  align: "center",
-            // className: "h head",
-         //  },
-          {
-            title: "试卷名称",
-            dataIndex: "testName",
-            key: "testName",
-            width: "40%",
-            align: "center",
-            className: "h head",
-            ellipsis: true,
-          },
-          {
-            title: "随机模式",
-            dataIndex: "paperMode",
-            key: "paperMode",
-            width: "20%",
-            align: "center",
-            className: "h",
-            ellipsis: true,
-          },
-          {
-            title: "创建人",
-            dataIndex: "sysCreateBy",
-            key: "sysCreateBy",
-            width: "20%",
-            align: "center",
-            className: "h",
-            ellipsis: true,
-          },
-         //   {
-         //     title: "最近更新时间",
-         //     dataIndex: "sysUpdateTime",
-         //   //    key: "sysUpdateTime",
-          //    ellipsis: true,
-          //    width: "20%",
-          //    align: "center",
-           //   className: "h",
-         //   },
-        ];
-        return columns;
-      }
-    };
-
-    // 分页
-    const onChange = (pageNumber) => {
-      state.pageNo = pageNumber;
-      state.currentPage = pageNumber;
-      getManageList();
-    };
-
-    const onSelectChange = (selectedRowKeys, selectedRows) => {
-      state.selectedRowKeys = selectedRowKeys;
-      state.SelectTestData = selectedRows[0];
-    };
-
-    const newTest = () => {
-      state.addExamVisible = true;
-    };
-    // const getTableDate = (tableData) => {
-    //   let data = tableData;
-    //   let array = [];
-    //   data.map((value, index) => {
-    //     let obj = {
-    //       key: index + 1,
-    //       sysCreateBy: value.sysCreateBy,
-    //       paperId: value.paperId,
-    //       testName: value.testName,
-    //       paperMode: value.paperMode == 1 ? "固定试卷" : "随机",
-    //       sysUpdateTime: value.sysUpdateTime,
-    //     };
-    //     array.push(obj);
-    //   });
-    //   state.tableData = array;
-    //   state.tableDataTotal = array.length
-    // };
-    //获取选择考试列表
-    const getManageList = () => {
-      state.selectedRowKeys = [];
-      let obj = {
-        keyWord: state.inputPname,
-        pageIndex: state.currentPage,
-        pageSize: state.pageSize,
-        published: true,
-      };
-      api
-        .queryExaminationPaperList(obj)
-        .then((data) => {
-          // getTableDate(res.data.data);
-          //**   表格repaint   */
-          let array = []
-          data.data.data.map((value, index) => {
-          let obj = {
-          key: index + 1,
-          sysCreateBy: value.sysCreateBy,
-          paperId:value.id,
-          testName: value.testName,
-          paperMode: value.paperMode==1?"固定试卷":"随机",
-          sysUpdateTime:value.sysUpdateTime,
-          id:value.id,
-        };
-        array.push(obj);
-      });
-      state.tableData = array
-      state.tableDataTotal = array.length
-          //message.destroy()
-          //message.success("获取选择考试列表成功");
-        })
-        .catch(() => {
-          //message.destroy();
-          //message.error("获取选择考试列表失败");
-        });
-    };
-
-    //重置任务列表
-    const resetTaskList = () => {
-      state.inputPname = "";
-      state.inputCname = "";
-      state.tableData = [];
-      state.selectedRowKeys = [];
-      state.SelectTestData = [];
-      state.currentPage = 1;
-      getManageList();
-    };
-    return {
-      ...toRefs(state),
-      closeDrawer,
-      afterVisibleChange,
-      onSelectChange,
-      CreatSTText,
-      newTest,
-      tableDataFunc,
-      onChange,
-      getManageList,
-      resetTaskList,
-    };
+  {
+    title: "随机模式",
+    dataIndex: "paperMode",
+    key: "paperMode",
+    width: "20%",
+    align: "center",
+    className: "h",
+    ellipsis: true,
   },
+  {
+    title: "创建人",
+    dataIndex: "sysCreateBy",
+    key: "sysCreateBy",
+    width: "20%",
+    align: "center",
+    className: "h",
+    ellipsis: true,
+  },
+])
+const initParams = {
+  keyWord: '',
+  pageIndex: 1,
+  pageSize: 10,
+  orderAsc: true
+}
+const params = ref(initParams)
+
+const rowSelectKeys = ref([]);
+const selectsData = ref([]);
+
+const {data, loading, total, fetch} = useBoeApiPage(EXAM_PAPER_PAGE, params.value, {
+  init: false,
+  result: res => res.result.list,
+  totalPage: res => res.result.totalPages,
+  total: res => res.result.count
+})
+
+const customRow = (record) => ({
+  onClick: () => {
+    rowSelectKeys.value = [record.id]
+    selectsData.value = [record]
+  }
+})
+
+const pagination = computed(() => ({
+  total: total.value,
+  showSizeChanger: false,
+  current: params.value.pageIndex,
+  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;
+}
+
+function search() {
+  params.value.pageIndex = 1
+  fetch()
+}
+
+function reset() {
+  rowSelectKeys.value = [];
+  selectsData.value = [];
+  params.value.pageIndex = 1
+  params.value.keyWord = ''
+  fetch()
+}
+
+const closeDrawer = () => {
+  visible.value = false
+  reset()
+};
+
+function confirm() {
+  if (!selectsData.value.length || !rowSelectKeys.value.length) {
+    message.warning("请选择试卷！");
+    return
+  }
+  emit('update:id', selectsData.value[0].id)
+  emit('update:name', selectsData.value[0].testName)
+  closeDrawer()
+}
+
+function openDrawer() {
+  visible.value = true
+}
+
+function createPage() {
+  createVisible.value = true
+}
+
+defineExpose({openDrawer})
 </script>
-  
-  <style lang="scss">
+
+<style lang="scss">
 .TimeManage {
   .drawerMain {
     min-width: 550px;
@@ -315,6 +229,7 @@ export default {
     overflow-x: auto;
     display: flex;
     flex-direction: column;
+
     .header {
       height: 73px;
       border-bottom: 1px solid #e8e8e8;
@@ -323,6 +238,7 @@ export default {
       justify-content: space-between;
       align-items: center;
       margin-bottom: 20px;
+
       .headerTitle {
         font-size: 18px;
         font-weight: 600;
@@ -330,31 +246,36 @@ export default {
         line-height: 25px;
       }
     }
+
     .main {
       width: 100%;
       height: 100%;
       overflow-y: auto;
       padding-right: 10px;
+
       .search {
         width: 100%;
         display: flex;
         flex-wrap: wrap;
         margin-top: 20px;
-    
+
 
         .sealeft {
           display: flex;
           flex-wrap: wrap;
+
           .namecon {
             display: flex;
             flex-wrap: nowrap;
             margin-bottom: 10px;
+
             .name {
               margin-top: 8px;
               white-space: nowrap;
             }
           }
         }
+
         .btns {
           display: flex;
           flex-wrap: nowrap;
@@ -367,6 +288,7 @@ export default {
             display: flex;
             justify-content: center;
             align-items: center;
+
             .img1 {
               width: 15px;
               height: 17px;
@@ -374,6 +296,7 @@ export default {
               background-size: 100% 100%;
               margin-right: 7px;
             }
+
             .img2 {
               width: 16px;
               height: 18px;
@@ -388,6 +311,7 @@ export default {
 
             color: #ffffff;
           }
+
           .btn2 {
             background: #ffffff;
 
@@ -396,6 +320,7 @@ export default {
           }
         }
       }
+
       .btnss {
         display: flex;
         flex-wrap: nowrap;
@@ -415,6 +340,7 @@ export default {
           color: #ffffff;
         }
       }
+
       .tab {
         th,
         th.h {
@@ -422,16 +348,18 @@ export default {
         }
 
         .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;
         }
+
         .tableBox {
           .pa {
             margin-top: 15px;
             width: 100%;
             display: flex;
             justify-content: center;
+
             .ant-pagination-prev,
             .ant-pagination-next,
             .ant-pagination-item,
@@ -454,6 +382,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;
@@ -463,6 +392,7 @@ export default {
         background-color: #fff;
         cursor: pointer;
       }
+
       .btn2 {
         cursor: pointer;
         width: 100px;