feat:修改案例

src/components/drawers/AddCase.vue

@@ -3,20 +3,20 @@
     <slot></slot>
   </div>
   <a-drawer
-      :visible="visible"
-      class="drawerStyle addcaseDrawer"
-      width="1000"
-      title="添加案例"
-      placement="right"
+    :visible="visible"
+    class="drawerStyle addcaseDrawer"
+    width="1000"
+    title="添加案例"
+    placement="right"
   >
     <div class="drawerMain">
       <div class="header">
-        <div v-if="taskIndex>=0" 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">
@@ -26,16 +26,21 @@
               <div class="ipt_name"></div>
               <div class="fi_input">
                 <a-input
-                    v-model:value="params.keyWord"
-                    style="width: 200px; height: 40px; border-radius: 8px;margin-right:24px;"
-                    placeholder="请输入案例标题"
+                  v-model:value="params.keyWord"
+                  style="
+                    width: 200px;
+                    height: 40px;
+                    border-radius: 8px;
+                    margin-right: 24px;
+                  "
+                  placeholder="请输入案例标题"
                 />
               </div>
               <div class="fi_input">
                 <a-input
-                    v-model:value="params.authorName"
-                    style="width: 200px; height: 40px; border-radius: 8px"
-                    placeholder="请输入作者名字"
+                  v-model:value="params.authorName"
+                  style="width: 200px; height: 40px; border-radius: 8px"
+                  placeholder="请输入作者名字"
                 />
               </div>
             </div>
@@ -51,18 +56,55 @@
             </div>
           </div>
         </div>
+        <div
+          class="main_notice"
+          v-if="taskIndex >= 0"
+          style="
+            background-color: #e9f6fe;
+            height: 40px;
+            display: flex;
+            align-items: center;
+          "
+        >
+          <div class="mntc_left" v-if="selectedRows">
+            <div class="notice_icon"></div>
+            <div>
+              <div>
+                <span class="title"
+                  >已选择
+                  <span class="data" style="color: #4ea6ff">{{ 1 }}</span>
+                  条&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span
+                >
+                <span class="title"
+                  >案例标题：
+                  <span
+                    class="data"
+                    style="color: #4ea6ff; margin-right: 15px"
+                    >{{
+                      selectedRows?.name
+                        ? selectedRows?.name
+                        : selectedRows?.title
+                    }}</span
+                  >
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
 
         <div class="main_table">
           <a-table
-              :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"
+            :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>
       </div>
@@ -74,17 +116,17 @@
   </a-drawer>
 </template>
 <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";
+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";
 
 const props = defineProps({
   type: Number,
-  taskList: []
-})
-const visible = ref(false)
-const emit = defineEmits({})
+  taskList: [],
+});
+const visible = ref(false);
+const emit = defineEmits({});
 
 const columns = ref([
   {
@@ -101,40 +143,43 @@ const columns = ref([
     width: "200px",
     align: "center",
   },
-])
+]);
 const initParams = {
-  keyWord: '',
-  authorName: '',
+  keyWord: "",
+  authorName: "",
   pageIndex: 1,
   pageSize: 10,
-  orderAsc: true
-}
-const params = ref(initParams)
+  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, {
+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
-})
+  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) || {}
+    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]
-  }
-})
+    rowSelectKeys.value = [record.id];
+    selectsData.value = [record];
+  },
+});
 
 const pagination = computed(() => ({
   total: total.value,
@@ -146,76 +191,82 @@ const pagination = computed(() => ({
 
 const changePagination = (e) => {
   params.value.pageIndex = e;
-  fetch()
+  fetch();
 };
 const rowSelection = computed(() => ({
-  type: 'radio',
+  type: "radio",
   columnWidth: 20,
   selectedRowKeys: rowSelectKeys.value,
   onChange: onSelectChange,
   preserveSelectedRowKeys: true,
-  getCheckboxProps: getCheckboxProps
+  getCheckboxProps: getCheckboxProps,
 }));
 const getCheckboxProps = () => ({
   // 某几项默认禁止选中(R: 当state等于1时)
-  disabled: false
-})
+  disabled: false,
+});
 function onSelectChange(e, l) {
   rowSelectKeys.value = e;
   selectsData.value = l;
+  selectedRows.value = l[0];
+  console.log("llllllllll", l);
+  console.log("selectedRows", selectedRows);
 }
 
 function search() {
-  params.value.pageIndex = 1
-  fetch()
+  params.value.pageIndex = 1;
+  fetch();
 }
 
 function reset() {
   rowSelectKeys.value = [];
   selectsData.value = [];
-  params.value.pageIndex = 1
-  params.value.keyWord = ''
-  params.value.authorName = ''
-  fetch()
+  params.value.pageIndex = 1;
+  params.value.keyWord = "";
+  params.value.authorName = "";
+  fetch();
 }
 
 const closeDrawer = () => {
-  visible.value = false
-  taskIndex.value = -1
-  reset()
+  visible.value = false;
+  taskIndex.value = -1;
+  selectedRows.value = null;
+  reset();
 };
 
 function confirm() {
   if (!selectsData.value.length || !rowSelectKeys.value.length) {
     message.warning("请选择案例！");
-    return
+    return;
   }
   if (taskIndex.value === -1) {
-    const list = props.taskList
+    const list = props.taskList;
     list.push({
       name: selectsData.value[0].title,
       type: props.type,
       courseId: selectsData.value[0].id,
-      info: {...selectsData.value[0]}
-    })
+      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]
+    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()
+  emit("update:taskList", [...props.taskList]);
+  closeDrawer();
 }
-
+let selectedRows = ref(null);
 function openDrawer(i, row) {
+  console.log("iiiiiiiii", i, row);
   row && (rowSelectKeys.value = [row.info]);
-  row && (selectsData.value = [{title: row.name, id: row.courseId}]);
-  (i >= 0) && (taskIndex.value = i);
-  visible.value = true
+  row && (selectsData.value = [{ title: row.name, id: row.courseId }]);
+  i >= 0 && (taskIndex.value = i);
+  visible.value = true;
+  selectedRows.value = row;
 }
 
-defineExpose({openDrawer})
+defineExpose({ openDrawer });
 </script>
 <style lang="scss">
 .ant-table-striped :deep(.table-striped) td {
@@ -376,8 +427,8 @@ defineExpose({openDrawer})
         }
 
         .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;
         }
 
@@ -424,5 +475,31 @@ defineExpose({openDrawer})
       }
     }
   }
+  .main_notice {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 3px;
+    height: 40px;
+    background-color: #e9f6fe;
+
+    .mntc_left {
+      display: flex;
+      align-items: center;
+
+      .notice_icon {
+        width: 14px;
+        height: 14px;
+        margin-right: 9px;
+        margin-left: 9px;
+        background-image: url(@/assets/images/coursewareManage/gan.png);
+        background-size: 100% 100%;
+      }
+    }
+
+    .mntc_right {
+      cursor: pointer;
+    }
+  }
 }
 </style>