--fix 路径图整体修改

src/components/drawers/AddCase.vue

@@ -1,20 +1,22 @@
 <template>
+  <div @click="openDrawer">
+    <slot></slot>
+  </div>
   <a-drawer
-    :visible="addcaseVisible"
-    class="drawerStyle addcaseDrawer"
-    width="80%"
-    title="添加案例"
-    placement="right"
-    @after-visible-change="afterVisibleChange"
+      :visible="visible"
+      class="drawerStyle addcaseDrawer"
+      width="1000"
+      title="添加案例"
+      placement="right"
   >
     <div class="drawerMain">
       <div class="header">
-        <div v-if="edit" class="headerTitle">编辑案例</div>
+        <div v-if="taskIndex>=0" 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"
+            style="width: 29px; height: 29px; cursor: pointer"
+            src="../../assets/images/basicinfo/close.png"
+            @click="closeDrawer"
         />
       </div>
       <div class="contentMain">
@@ -24,21 +26,21 @@
               <div class="ipt_name"></div>
               <div class="fi_input">
                 <a-input
-                  v-model:value="inputV1"
-                  style="width: 424px; height: 40px; border-radius: 8px"
-                  placeholder="请输入案例标题"
-                  show-count
-                  :maxlength="20"
+                    v-model:value="params.keyWord"
+                    style="width: 424px; height: 40px; border-radius: 8px"
+                    placeholder="请输入案例标题"
+                    show-count
+                    :maxlength="20"
                 />
               </div>
             </div>
           </div>
           <div class="mi_btns">
-            <div class="btn btn1" @click="searchList()">
+            <div class="btn btn1" @click="search">
               <div class="search"></div>
               <div class="btnText">搜索</div>
             </div>
-            <div class="btn btn2" @click="resetCase()">
+            <div class="btn btn2" @click="reset">
               <div class="search"></div>
               <div class="btnText">重置</div>
             </div>
@@ -46,373 +48,163 @@
         </div>
 
         <div class="main_table">
-          <!--
           <a-table
-            v-if="edit"
-            class="ant-table-striped"
-            :row-class-name="
-              (_record, index) => (index % 2 === 1 ? 'table-striped' : null)
-            "
-            :row-selection="{
-              type: 'radio',
-              selectedRowKeys: selectedRowKeys,
-              onChange: onSelectChange,
-            }"
-            :columns="tableDataFunc()"
-            :data-source="tableData"
-            :loading="tableDataTotal === -1 ? true : false"
-            :pagination="false"
-          />-->
-          <a-table
-            class="ant-table-striped"
-            :row-class-name="
-              (_record, index) => (index % 2 === 1 ? 'table-striped' : null)
-            "
-            :row-selection="{
-              type: 'radio',
-              selectedRowKeys: selectedRowKeys,
-              onChange: onSelectChange,
-            }"
-            :columns="tableDataFunc()"
-            :data-source="tableData"
-            :loading="tableDataTotal === -1 ? true : false"
-            :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">
-            <div class="pa">
-              <a-pagination
-                v-if="tableDataTotal > 10"
-                :showSizeChanger="false"
-                showQuickJumper="true"
-                hideOnSinglePage="true"
-                :pageSize="pageSize"
-                :current="currentPage"
-                :total="tableDataTotal"
-                class="pagination"
-                @change="handelChangePage"
-              />
-            </div>
-          </div>
         </div>
       </div>
       <div class="main_btns">
         <button class="btn1" @click="closeDrawer">取消</button>
-        <button class="btn2" @click="updateTask">确定</button>
+        <button class="btn2" @click="confirm">确定</button>
       </div>
     </div>
   </a-drawer>
 </template>
-<script>
-import { onMounted, reactive, toRefs } from "vue";
-import * as api from "../../api/indexCase.js";
-import * as apiTask from "../../api/indexTaskadd";
-// import { setCookie } from "../../api/method"
-import { message } from "ant-design-vue";
-import { RouterEditTask } from "@/api/indexTask";
-// import { addTempTask } from "../../api/indexTaskadd";
-// import dayjs from "dayjs";
+<script setup>
+import {computed, defineEmits, defineProps, ref, watch} from "vue";
+import {useBoeApiPage} from "@/api/request";
+import {CASE_PAGE} from "@/api/ThirdApi";
+import {message} from "ant-design-vue";
 
-export default {
-  name: "AddCase",
-  props: {
-    addcaseVisible: {
-      type: Boolean,
-      default: false,
-    },
-    EditCaseId: {
-      type: Number,
-      default: null,
-    },
-    taskIdDraft: {
-      type: Number,
-      default: null,
-    },
-    edit: {
-      //  是否为编辑
-      type: Boolean,
-      default: null,
-    },
-    projectId: {
-      type: Number,
-      default: 0,
-    },
-    chooseStageId: {
-      type: Number,
-      default: 0,
-    },
-    routerTaskId: {
-      type: Number,
-      default: 0,
-    },
-    isLevel: {
-      // 是否是关卡页面触发
-      type: Number,
-      default: null,
-    },
-    projectTaskId: {
-      // 要编辑的projectId
-      type: Number,
-      default: 0,
-    },
-    routerId: {
-      type: Number,
-      default: null,
-    },
-    isactive: {
-      type: Number,
-      default: null,
-    },
+const props = defineProps({
+  type: Number,
+  taskList: []
+})
+const visible = ref(false)
+const emit = defineEmits({})
+
+const columns = ref([
+  {
+    title: "案例标题",
+    dataIndex: "title",
+    key: "title",
+    width: "400px",
+    ellipsis: true,
   },
-  setup(props, ctx) {
-    const state = reactive({
-      tableData: [],
-      currentPage: 1,
-      tableDataTotal: 0,
-      pageSize: 10,
-      selectedRowKeys: [],
-      apiTaskList: [],
-      inputV1: "",
-      time: undefined,
-      caseId: null,
-      caseName: "",
-      isClick: false,
-    });
-    const closeDrawer = () => {
-      ctx.emit("update:addcaseVisible", false);
-      ctx.emit("update:edit", false);
-      localStorage.setItem("stageId", props.chooseStageId);
-      localStorage.setItem("chapterId", props.isactive);
-      state.inputV1 = "";
-      state.selectedRowKeys = [];
-    };
-    const afterVisibleChange = (bol) => {
-      if (bol == true) {
-        getAllCaseText();
-      }
-    };
-    const tableDataFunc = () => {
-      const columns = [
-        {
-          title: "案例标题",
-          dataIndex: "title",
-          key: "title",
-          width: "400px",
-          ellipsis: true,
-        },
-        {
-          title: "作者名称",
-          dataIndex: "authorName",
-          key: "authorName",
-          width: "200px",
-          align: "center",
-        },
-        //  {
-        //   title: "导入时间",
-        //   dataIndex: "time",
-        //   key: "time",
-        //   width: "400px",
-        //   align: "center",
-        // },
-      ];
-      return columns;
-    };
-    const onSelectChange = (selectedRowKeys, selectedRows) => {
-      if (selectedRowKeys.length > 2) {
-        return;
-      }
-      state.selectedRowKeys = selectedRowKeys;
-      state.apiTaskList = selectedRows;
-      console.log("selectedRows", selectedRows);
-    };
-    const handelChangePage = (page, pageSize) => {
-      state.selectedRowKeys = [];
-      state.currentPage = page;
-      state.pageSize = pageSize;
-      getAllCaseText();
-    };
-    const getTableDate = (tableData) => {
-      let data = tableData;
-      let array = [];
-      data.map((value, index) => {
-        let obj = {
-          key: index,
-          authorId: value.authorId,
-          authorName: value.authorName,
-          companyId: value.companyId,
-          coverUrl: value.coverUrl,
-          id: value.id,
-          casesId: value.casesId,
-          title: value.title,
-        };
-        array.push(obj);
-      });
-      state.tableData = array;
-    };
-    //获取全部案例信息接口
-    const getAllCaseText = () => {
-      api
-        .queryCasesDetailList({
-          keyWord: state.inputV1,
-          orderAsc: true,
-          orderField: "",
-          pageIndex: state.currentPage,
-          pageSize: state.pageSize,
-          isTop: "",
-        })
-        .then((res) => {
-          console.log("案例列表", res);
-          if (res.data.code === 200) {
-            state.tableDataTotal = res.data.data.count;
-            // state.selectedRowKeys = [0];
-            for (let i = 0; i < res.data.data.list.length; i++) {
-              console.log(
-                "res.data.data.list[i].casesId",
-                res.data.data.list[i].casesId,
-                props.EditCaseId
-              );
-              if (Number(res.data.data.list[i].casesId) == props.EditCaseId) {
-                state.selectedRowKeys = [i];
-              }
-            }
-            getTableDate(res.data.data.list);
-          }
-        })
-        .catch(() => {});
-    };
-    const updateTask = () => {
-      if (props.isLevel == 1) {
-        if (!props.isactive) {
-          message.destroy();
-          return message.warning("请先选中关卡");
-        }
-        if (state.isClick) {
-          message.destroy();
-          message.error("请勿频繁点击");
-          return;
-        }
-        state.isClick = true;
-        for (let i = 0; i < state.apiTaskList.length; i++) {
-          RouterEditTask({
-            chapterId: props.isactive,
-            courseId: state.apiTaskList[i].casesId,
-            name: state.apiTaskList[i].title,
-            routerId: props.routerId,
-            routerTaskId: props.routerTaskId || 0,
-            type: 3,
-            id: props.taskIdDraft
-          })
-            .then(() => {
-              message.success(`${props.edit ? "编辑" : "新增"}关卡任务成功`);
-              ctx.emit("changeData", false);
-              closeDrawer();
-              state.addLoading = false;
-              state.isClick = false;
-            })
-            .catch(() => {
-              message.error(`${props.edit ? "编辑" : "新增"}关卡任务失败`);
-              state.isClick = false;
-            });
-        }
-      } else if (props.isLevel == 2) {
-        if (state.isClick) {
-          message.destroy();
-          message.error("请勿频繁点击");
-          return;
-        }
-        state.isClick = true;
-        for (let i = 0; i < state.apiTaskList.length; i++) {
-          apiTask
-            .addTask({
-              courseId: state.apiTaskList[i].casesId,
-              name: state.apiTaskList[i].title,
-              projectId: props.projectId,
-              projectTaskId: props.projectTaskId,
-              stageId: Number(props.chooseStageId),
-              type: 3,
-            })
-            .then(() => {
-              message.destroy();
-              message.success(`${props.edit ? "编辑" : "新增"}任务成功`);
-              ctx.emit("changeData", false);
-              closeDrawer();
-              state.isClick = false;
-            })
-            .catch(() => {
-              message.destroy();
-              message.error(`${props.edit ? "编辑" : "新增"}任务失败`);
-              state.isClick = false;
-            });
-        }
-      } else if (props.isLevel == 3) {
-        if (state.isClick) {
-          message.destroy();
-          message.error("请勿频繁点击");
-          return;
-        }
-        state.isClick = true;
-        for (let i = 0; i < state.apiTaskList.length; i++) {
-          apiTask
-            .addTaskTemplate({
-              courseId: Number(state.apiTaskList[i].casesId),
-              name: state.apiTaskList[i].title,
-              projectTaskId: props.projectTaskId,
-              projectTemplateId: Number(
-                localStorage.getItem("projectTemplateId")
-              ),
-              stageId: Number(props.chooseStageId) || 0,
-              type: 3,
-            })
-            .then(() => {
-              message.destroy();
-              message.success(`${props.edit ? "编辑" : "新增"}任务成功`);
-              ctx.emit("changeData", false);
-              closeDrawer();
-              state.isClick = false;
-            })
-            .catch(() => {
-              message.destroy();
-              message.error(`${props.edit ? "编辑" : "新增"}任务失败`);
-              state.isClick = false;
-            });
-        }
-      }
-    };
-    //搜索案例列表
-    const searchList = () => {
-      state.selectedRowKeys = [];
-      if (state.inputV1 !== "") {
-        getAllCaseText();
-      } else {
-        resetCase();
-      }
-    };
-    //重置案例信息
-    const resetCase = () => {
-      state.inputV1 = "";
-      state.selectedRowKeys = [];
-      state.currentPage = 1;
-      getAllCaseText();
-    };
-    onMounted(() => {
-      // let cookie =
-      //   "eyJ0eXBlIjoidG9rZW4iLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC91LmJvZS5jb20iLCJpYXQiOjE2Njk0MjgwNTAsImV4cCI6MTY2OTQzNTI1MCwiR2l2ZW5OYW1lIjoiYm9ldSIsInVzZXJJZCI6IjZCMDQ5RkFGLUMzMTQtN0NDRi0wRDI4LTBEMjNGNEM0MjUzMSIsInVJZCI6Ijk2NTM0MjAyNzQ5NzYwNzE2OCIsInBlcm1pc3Npb24iOiIifQ==.9ea5ce6d4cd43c2c17f21a293e4dc0d362c2a404b9d50fae5c49fed5a238fb1a";
-      // setCookie("token", cookie, 10);
-    });
-    return {
-      ...toRefs(state),
-      afterVisibleChange,
-      closeDrawer,
-      tableDataFunc,
-      onSelectChange,
-      handelChangePage,
-      getTableDate,
-      updateTask,
-      getAllCaseText,
-      searchList,
-      resetCase,
-    };
+  {
+    title: "作者名称",
+    dataIndex: "authorName",
+    key: "authorName",
+    width: "200px",
+    align: "center",
   },
+])
+const initParams = {
+  keyWord: '',
+  pageIndex: 1,
+  pageSize: 10,
+  orderAsc: true
+}
+const params = ref(initParams)
+
+const rowSelectKeys = ref([]);
+const selectsData = ref([]);
+const taskIndex = ref(-1);
+
+const {data, loading, total, fetch} = useBoeApiPage(CASE_PAGE, params.value, {
+  init: false,
+  result: res => res.result.list,
+  totalPage: res => res.result.totalPages,
+  total: res => res.result.count
+})
+
+watch(taskIndex, () => {
+  if (taskIndex.value >= 0) {
+    rowSelectKeys.value = [props.taskList[taskIndex.value].courseId]
+    selectsData.value = data.value.find(t => t.id === props.taskList[taskIndex.value].courseId) || {}
+  }
+})
+
+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
+  taskIndex.value = -1
+  reset()
+};
+
+function confirm() {
+  if (!selectsData.value.length || !rowSelectKeys.value.length) {
+    message.warning("请选择案例！");
+    return
+  }
+  if (taskIndex.value === -1) {
+    const list = props.taskList
+    list.push({
+      name: selectsData.value[0].title,
+      type: props.type,
+      courseId: selectsData.value[0].id,
+      info: selectsData.value[0]
+    })
+  } else {
+    const data = props.taskList[taskIndex.value]
+    data.name = selectsData.value[0].title
+    data.courseId = selectsData.value[0].id
+    data.info = selectsData.value[0]
+  }
+  emit('update:taskList', [...props.taskList])
+  closeDrawer()
+}
+
+function openDrawer(i, row) {
+  row && (rowSelectKeys.value = [row.info]);
+  row && (selectsData.value = [{title: row.name, id: row.courseId}]);
+  (i >= 0) && (taskIndex.value = i);
+  visible.value = true
+}
+
+defineExpose({openDrawer})
 </script>
 <style lang="scss">
 .ant-table-striped :deep(.table-striped) td {
@@ -428,6 +220,7 @@ export default {
       justify-content: space-between;
       align-items: center;
       flex-shrink: 0;
+
       .headerTitle {
         font-size: 18px;
         font-weight: 600;
@@ -436,31 +229,38 @@ export default {
         margin-left: 24px;
       }
     }
+
     .contentMain {
       padding-right: 15px;
+
       .main_items {
         margin-top: 32px;
         display: flex;
 
         margin-bottom: 12px;
         flex-wrap: wrap;
+
         .mi_ipts {
           display: flex;
           margin-bottom: 20px;
+
           .mii_ipt {
             display: flex;
             align-items: center;
             margin-right: 24px;
+
             .ipt_name {
               white-space: nowrap;
             }
           }
         }
+
         .mi_btns {
           display: flex;
           margin-left: 38px;
           margin-bottom: 20px;
           cursor: pointer;
+
           .btn {
             padding: 0px 26px 0px 26px;
             height: 38px;
@@ -471,9 +271,11 @@ export default {
             justify-content: center;
             margin-left: 14px;
             flex-shrink: 0;
+
             .search {
               background-size: 100%;
             }
+
             .btnText {
               font-size: 14px;
               font-weight: 400;
@@ -481,74 +283,93 @@ export default {
               margin-left: 5px;
             }
           }
+
           .btn1 {
             background: rgb(64, 158, 255);
+
             .search {
               width: 15px;
               height: 17px;
               background-image: url("@/assets/images/coursewareManage/search0.png");
             }
+
             .btnText {
               color: rgb(255, 255, 255);
             }
           }
+
           .btn2 {
             background: rgb(255, 255, 255);
+
             .search {
               width: 15px;
               height: 17px;
               background-image: url("@/assets/images/coursewareManage/reset1.png");
             }
+
             .btnText {
               color: rgb(64, 158, 255);
             }
           }
+
           .btn1:hover {
             background: rgb(255, 255, 255);
+
             .search {
               background-image: url("@/assets/images/courseManage/search1.png");
             }
+
             .btnText {
               color: #4ea6ff;
             }
           }
+
           .btn2:hover {
             background: rgba(64, 158, 255, 1);
+
             .search {
               background-image: url("@/assets/images/courseManage/reset0.png");
             }
+
             .btnText {
               color: #ffffff;
             }
           }
         }
       }
+
       .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: 15px !important;
+
           .ant-table-selection {
             display: none;
           }
         }
+
         .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%;
@@ -569,6 +390,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;
@@ -578,6 +400,7 @@ export default {
         background-color: #fff;
         cursor: pointer;
       }
+
       .btn2 {
         cursor: pointer;
         width: 100px;