修改导入

src/views/courselibrary/CourseExquisite.vue

@@ -41,13 +41,13 @@
               </a-form>
             </a-modal> -->
             <a-modal v-model:visible="importMarkVisible" :closable="closableQR" wrapClassName="sofModal" :footer="null"
-              style="margin-top: 400px" @cancel="of_exit">
+              style="margin-top: 400px">
               <div class="selectonlineface" :style="{ display: importMarkVisible ? 'block' : 'none' }">
                 <div class="of_header"></div>
                 <div class="of_main">
                   <div class="ofm_header">
                     <span>批量标记</span>
-                    <div class="close_exit" @click="of_exit"></div>
+                    <div class="close_exit" @click="importMarkVisible = false"></div>
                   </div>
                   <div class="ofm_body">
                     <div class="ofmb_items">
@@ -58,8 +58,9 @@
                         <span style="margin-right: 3px">课程名称</span>
                       </div>
                       <div class="in b_input">
-                        <a-input v-model:value="xzinputV1" maxlength="20"
+                        <a-input v-model:value="xzinputV1" maxlength="200"
-                          style="width: 440px; height: 40px; border-radius: 8px" placeholder="请输入课程名称" />
+                          style="width: 440px; height: 40px; border-radius: 8px" placeholder="请输入课程名称" 
+                          @blur="handleCourseNameInput" />
                       </div>
                     </div>
                     <div class="b_sub">
@@ -69,14 +70,37 @@
                         </div>
                       </div>
                     </div>
-
+                    
+                    <!-- 添加表格展示按空格分割的课程名称 -->
+                    <div class="course-name-table" v-if="splitCourseNames.length > 0">
+                      <a-table 
+                        :columns="courseNameColumns" 
+                        :data-source="splitCourseNames" 
+                        :pagination="false"
+                        size="small"
+                        :scroll="{ y: 200 }">
+                        <template #bodyCell="{ column, record, index }">
+                          <template v-if="column.dataIndex === 'index'">
+                            {{ index + 1 }}
+                          </template>
+                          <template v-else-if="column.dataIndex === 'name'">
+                            {{ record }}
+                          </template>
+                        </template>
+                      </a-table>
+                    </div>
+                    
                     <div class="b_footer">
+                      <a-button class="btn btn6" @click="handleImportMarkOk" :loading="validated === 1" v-if="splitCourseNames.length === 0">
+                        确定
+                      </a-button>
+                      <a-button class="btn btn6" @click="okMark" :loading="validated === 1" v-if="splitCourseNames.length > 0">
+                        确定标记
+                      </a-button>
                       <div class="btn btn6" @click="handleImportMarkCancel">
                         <div class="btnText">取消</div>
                       </div>
-                      <a-button class="btn btn6" @click="handleImportMarkOk" :loading="validated === 1">
+                     
-                        确定
-                      </a-button>
                     </div>
                   </div>
                 </div>
@@ -185,6 +209,27 @@ export default defineComponent({
       importMarkForm: {
         courseName: ''
       },
+      // 添加课程名称表格列定义
+      courseNameColumns: [
+        {
+          title: "序号",
+          dataIndex: "index",
+          width: 60,
+          align: "center",
+        },
+        {
+          title: "名称",
+          dataIndex: "name",
+          align: "center",
+        }
+      ],
+      xzinputV1: "", // 输入的课程名称字符串
+      splitCourseNames: [], // 失焦后分割的课程名称数组
+      // 计算属性：将输入的课程名称按空格分割成数组
+      courseNames: computed(() => {
+        if (!state.xzinputV1) return [];
+        return state.xzinputV1.trim().split(/\s+/).filter(name => name.length > 0);
+      }),
       columns1: [
         {
           title: "序号",
@@ -359,38 +404,38 @@ export default defineComponent({
       ],
       //列表表格
       tableData1: [
-        // {
+        {
-        //   id: 2,
+          id: 2,
-        //   name: "React核心概念详解",
+          name: "React核心概念详解",
-        //   sysType1: "A01",
+          sysType1: "A01",
-        //   sysType2: "B02",
+          sysType2: "B02",
-        //   sysTypeId: "A01",
+          sysTypeId: "A01",
-        //   keywords: "前端,React,JavaScript",
+          keywords: "前端,React,JavaScript",
-        //   teacherName: "王五",
+          teacherName: "王五",
-        //   sysCreateTime: "2023-01-20",
+          sysCreateTime: "2023-01-20",
-        //   exquisiteTime: "2023-02-05",
+          exquisiteTime: "2023-02-05",
-        //   exquisiteRecommender: "赵六",
+          exquisiteRecommender: "赵六",
-        //   qualityTop: true,
+          qualityTop: true,
-        //   courseSource: 1,
+          courseSource: 1,
-        //   qualityStatus: true,
+          qualityStatus: true,
-        //   qualityTopSort: 2
+          qualityTopSort: 2
-        // },
+        },
-        // {
+        {
-        //   id: 2,
+          id: 2,
-        //   name: "React核心概念详解",
+          name: "React核心概念详解",
-        //   sysType1: "A01",
+          sysType1: "A01",
-        //   sysType2: "B02",
+          sysType2: "B02",
-        //   sysTypeId: "A01",
+          sysTypeId: "A01",
-        //   keywords: "前端,React,JavaScript",
+          keywords: "前端,React,JavaScript",
-        //   teacherName: "王五",
+          teacherName: "王五",
-        //   sysCreateTime: "2023-01-20",
+          sysCreateTime: "2023-01-20",
-        //   exquisiteTime: "2023-02-05",
+          exquisiteTime: "2023-02-05",
-        //   exquisiteRecommender: "赵六",
+          exquisiteRecommender: "赵六",
-        //   courseSource: 2,
+          courseSource: 2,
-        //   getExport: null,
+          getExport: null,
-        //   qualityStatus: true,
+          qualityStatus: true,
-        //   qualityTopSort: 2
+          qualityTopSort: 2
-        // },
+        },
         // {
         //   id: 1,
         //   name: "Vue从入门到精通",
@@ -611,7 +656,8 @@ export default defineComponent({
     // 全部导出
     const exportAll = async () => {
       try {
-        let res = await getExport(
+        await useDownload(
+          "/xboe/m/boe/cases/quality/manage/export",
           {
             courseNameOrTeacherName: state.courseNameOrTeacherName,
             courseSource: state.courseSource,
@@ -621,34 +667,66 @@ export default defineComponent({
           "精品课程导出",
           "xlsx"
         );
-        if (res.data.data.status == 200) {
-          message.success(res.data.data.message);
-          // 重新加载数据
-          getTableDate();
-        } else {
-          message.error(res.data.data.message);
-        }
       } catch (error) {
         console.error("导出失败:", error);
+        message.error("导出失败");
       }
     };
     // 导入标记
     const exportTaskStu = () => {
       state.importMarkVisible = true;
+      state.importMarkForm.courseName = '';
+      // // 清空分割的课程名称数组
+      state.splitCourseNames = [];
+      state.xzinputV1 = '';
     };
 
+    // // 处理课程名称输入框失焦事件
+    const handleCourseNameInput = () => {
+      if (state.xzinputV1) {
+        // 按空格分割输入的内容，并过滤掉空字符串
+        state.splitCourseNames = state.xzinputV1.trim().split(/\s+/).filter(item => item.length > 0);
+      } else {
+        state.splitCourseNames = [];
+      }
+    };
+    
     // 导入标记弹窗确认
     const handleImportMarkOk = () => {
-      console.log('导入标记表单数据:', state.importMarkForm);
+      // console.log('导入标记表单数据:', state.importMarkForm);
-      // 这里应该调用实际的导入标记API
+      if (state.xzinputV1) {
-      state.importMarkVisible = false;
+        // 按空格分割输入的内容，并过滤掉空字符串
-      state.importMarkForm.courseName = '';
+        state.splitCourseNames = state.xzinputV1.trim().split(/\s+/).filter(item => item.length > 0);
+      } else {
+        state.splitCourseNames = [];
+      }
     };
+    
+    const okMark = async () =>{
+      let res = await getMark({ courseName:state.splitCourseNames, userName: state.userName, userId: state.userId });
+        if (res.data.data.status == 200) {
+          message.success(res.data.data.message);
+          state.importMarkVisible = false
+          // 重新加载数据
+          getTableDate();
+        } else {
+          dialog({ content: res.data.data.message, ok: okMarkT() });
+          message.error(res.data.data.message);
+        }
+        // 重新加载数据
+        getTableDate();
+    }
+    const okMarkT=()=>{
+
+    }
 
     // 导入标记弹窗取消
     const handleImportMarkCancel = () => {
       state.importMarkVisible = false;
       state.importMarkForm.courseName = '';
+      // 清空分割的课程名称数组
+      state.splitCourseNames = [];
+      state.xzinputV1 = '';
     };
     // const handleSearch = () => {
     //   state.currentPage1 = 1
@@ -696,7 +774,9 @@ export default defineComponent({
       exportAll,
       exportTaskStu,
       handleImportMarkOk,
-      handleImportMarkCancel
+      handleImportMarkCancel,
+      handleCourseNameInput,
+      okMark
     };
   },
 });