课程推荐查看列表

src/components/courserecommended/CourseRecommended.vue

@@ -12,17 +12,20 @@
     @ok="handleCancel"
     class="modal"
   >
-  <div class="title">项目管理系列课</div>
-  <dl>
-    <dt>推荐值：27分</dt>
-    <dt>推荐组织：京东方大学堂</dt>
-    <dt>课程数：3</dt>
-    <dt>用户数：10</dt>
-  </dl>
-  <div class="inp">
-    <a-input v-model:value="value" placeholder="请输入姓名" />
-    <a-button type="primary">搜索</a-button>
+  <div class="header">项目管理系列课</div>
+  <div class="title">
+    <dl>
+      <dt>推荐值：27分</dt>
+      <dt>推荐组织：京东方大学堂</dt>
+      <dt>课程数：3</dt>
+      <dt>用户数：10</dt>
+    </dl>
+    <div class="inp">
+      <a-input v-model:value="value" placeholder="请输入姓名" />
+      <a-button type="primary">搜索</a-button>
+    </div>  
   </div>
+
       <!-- 表格 -->
       <div class="tableBox">
       <a-table style="border: 1px solid #f2f6fe" :columns="column" :data-source="data" 
@@ -32,7 +35,7 @@
           <a-space style="padding-right: 10px">
             
             <a-button
-              @click="() => handleLook()"
+              @click="() => handleLook(record, String(record.courseform))"
               type="link"
               >查看详情
             </a-button>
@@ -47,6 +50,11 @@
     </div>
        
   </a-modal>
+  <SeeModal
+      :visible="lookCourseModal"
+      :detail="faceDetailObj"
+      @cancel="ft_exit_see"
+    />
 </template>
 
 <script>
@@ -61,6 +69,7 @@ import {
   
 } from "@/api/case";
 import { Form, message,} from "ant-design-vue";
+import SeeModal from "@/components/courserecommended/CourseCheck.vue";
 
 // const { resetFields } = Form.useForm(searchData, {});
 
@@ -87,10 +96,32 @@ export default defineComponent({
   components: {
     // OrgClassCheck,
     OrgClass,
+    SeeModal,
     
   },
   setup(props, { emit }) {
 
+        // 预览弹框 开启和关闭
+    const ft_exit_see = () => {
+      state.lookCourseModal = false;
+    };
+    const handleLook = async (itm, type) => {
+    //   // if (type === "1") {
+    //   //   return;
+    //   // }
+    //   // state.offcourseId = itm.id;
+
+    //   // const item = await detail({
+    //   //   offcourseId: Number(state.offcourseId),
+    //   // }).then((res) => {
+    //   //   if (res.data.code === 200) return res.data.data;
+    //   // });
+      state.lookCourseModal = true;
+    //   // item.attach = item.attach == "" ? [] : item.attach.split(",");
+    //   // state.faceDetailObj = item;
+    //   // console.log("获取查看信息", item);
+    };
+
 // // 查询数据
 const searchData = ref({
   pageIndex: 1,
@@ -125,6 +156,8 @@ getList()
     const store = useStore();
 
     const state = reactive({
+      faceDetailObj:{},
+      lookCourseModal:false,
       tableLoading:false,
       imgList: [],
       categoryName: "",
@@ -192,6 +225,14 @@ getList()
             return text ? text : "-";
           },
         },
+        {
+          title: "操作",
+          width: "10%",
+          dataIndex: "operation",
+          key: "operation",
+          align: "center",
+          slots: { customRender: "operation" },
+        },
         
       ],
       data:[]
@@ -315,6 +356,8 @@ getList()
       searchData,
       getList,
       handelChangePage,
+      handleLook,
+      ft_exit_see,
     };
   },
 });
@@ -323,7 +366,7 @@ getList()
 .modal{
   overflow-y: auto;
 }
-  .title{
+  .header{
     // background-color: rgba(255, 255, 255, 0);
     box-sizing: border-box;
     font-weight: 650;
@@ -331,8 +374,10 @@ getList()
     text-align: left;
     padding:20px 0 16px 19px;
     border-bottom: 1px solid rgba(121, 121, 121, 0.38);
-    
-    margin-bottom: 18px;
+  }
+  .title{
+    display: flex;
+    justify-content: space-between;
   }
   dl{
     display: flex;
@@ -341,7 +386,7 @@ getList()
     color: #333333;
     text-align: left;
     margin-left: 19px;
-    margin-bottom: 19px;
+    margin-top: 25px;
   }
   dl dt{
     padding-right: 70px;
@@ -351,6 +396,7 @@ getList()
   .inp{
     text-align: right;
     margin-bottom: 32px;
+    margin-top: 17px;
   }
   .ant-input{
     width: 130px;

src/views/courselibrary/CourseRecommended.vue

@@ -50,7 +50,7 @@
             <a-button @click="() => handleOper(record, 'withdraw', record.pushProgress)" type="link">
               {{ state.status[record.pushProgress] }}
             </a-button>
-            <a-button @click="handleOper(record, 'del')" type="link">删除
+            <a-button @click="handleOper(record, 'del')" danger type="link">删除
             </a-button>
           </a-space>
         </template>
@@ -311,7 +311,7 @@ const authenticationColumn = {
   align: "center",
   slots: { customRender: "operation" },
 }
-const lookCourseModal = ref(true)
+const lookCourseModal = ref(false)
 const faceDetailObj = ref({})
 
 const state = reactive({
@@ -433,11 +433,7 @@ const handleRest = () => {
 const handleNew = () => {
   newNext.value = true;
 };
-// return {
-//   ...toRefs(state),
-//   handleLook,
-//   ft_exit_see,
-// }
+
 </script>
 <style lang="scss">
 .clearfix:before,