Merge branch 'master_1030' into 'master'

Master 1030

See merge request !150

src/api/indexCourse.js

@@ -1,4 +1,5 @@
 import http from "./config";
+import Http from './configPublic'
 
 /**
  * 1
@@ -60,3 +61,9 @@ export const studyRecordList = (obj) =>
 // 获取员工信息
 export const getMemberInfoApi = (obj) =>
   http.post("/admin/orgStruct/getMemberInfo", obj);
+
+//课程推荐列表
+export const page = (obj) => http.post("/recommend/page",obj)
+//课程推荐或撤回推荐
+export const recommend = (obj) =>
+Http.post("/manageApi/recommend/recommend",obj)

src/components/BreadCrumb.vue

@@ -194,6 +194,22 @@
                     },
                   ];
                 }
+                if (
+                        n.indexOf("/courserecommended") !== -1 ||
+                        n.indexOf("/CourseRecommended") !== -1
+                ) {
+                  state.list = [
+                    {
+                      name: "课程库",
+                      href: "",
+                      // href: "#/coursewaremanage",
+                    },
+                    {
+                      name: "课程推荐",
+                      href: "",
+                    },
+                  ];
+                }
                 if (
                         n.indexOf("/coursemanage") !== -1 ||
                         n.indexOf("/CourseManage") !== -1

src/components/NavLeft.vue

@@ -116,7 +116,7 @@
           </a-menu-item>
         </a-sub-menu>
 
-        <a-sub-menu key="sub3" v-if="checkMenu('coursewaremanage,onlinemanage,coursemanage')">
+        <a-sub-menu key="sub3" v-if="checkMenu('coursewaremanage,onlinemanage,coursemanage,courserecommended')">
           <template #icon>
             <div class="imgBox">
               <img
@@ -153,6 +153,15 @@
             ></span>
             <router-link to="/coursemanage">课件管理</router-link>
           </a-menu-item>
+          <a-menu-item key="sub3-4">
+            <span
+                :class="{
+                circleActive: selectedKeys[0] === 'sub3-4' ? true : false,
+                circle: selectedKeys[0] === 'sub3-4' ? false : true,
+              }"
+            ></span>
+            <router-link to="/courserecommended">课程推荐</router-link>
+          </a-menu-item>          
         </a-sub-menu>
         <!-- 2022-12-10注释 后面放开 -->
         <!-- <a-menu-item key="sub4" @titleClick="titleClick">
@@ -795,6 +804,12 @@ export default {
           selectedKeys: "sub3-3",
           pagename: "课件管理",
         },
+        {
+          href: "/courserecommended",
+          openKeys: "sub3",
+          selectedKeys: "sub3-4",
+          pagename: "课程推荐",
+        },
         {
           href: "/certificatecenter",
           openKeys: "sub8",

src/components/courserecommended/AddCourse.vue

@@ -0,0 +1,564 @@
+<template>
+  <!-- 添加在线课程 -->
+  <a-drawer class="addcourse1" :visible="visible" width="80%" :title="title" @close="closeDrawer" :maskClosable="false">
+    <!-- 搜索框及按钮 -->
+    <div class="filter">
+      <div class="filterItems">
+        <div class="select">
+          <a-input v-model:value="searchDataInfo.keyWord" style="width: 170px; height: 34px; border-radius: 8px"
+            placeholder="请输入课程标题" />
+        </div>
+        <div class="select">
+          <a-input v-model:value="searchDataInfo.authorName" style="width: 170px; height: 34px; border-radius: 8px"
+            placeholder="请输入授课讲师名称" />
+        </div>
+        <div style="display: flex; margin-bottom: 20px">
+          <div class="btn btn1" @click="handleSearch(1)" style="width: 90px">
+            <div class="btnText">搜索</div>
+          </div>
+          <div class="btn btn1" @click="handleRest" style="width: 90px">
+            <div class="btnText">重置</div>
+          </div>
+        </div>
+      </div>
+      <div class="btns" style="display: flex;flex-direction: column;">
+        <div v-if="selectNum" class="btnText">已选择 <span style="color:#4ea6ff ;"> {{ selectNum }}
+          </span>
+          门课程</div>
+        
+      </div>
+    </div>
+    <!-- 表格 -->
+    <div style="display: flex; overflow-x: auto; overflow-y: auto;justify-content: space-between;">
+      <div class="tableBox" style="min-height: 800px;overflow: hidden;">
+        <a-table style="border: 1px solid #f2f6fe;" :columns="state.columns" :data-source="state.dataSource"
+          :loading="!loading" :row-selection="rowSelection" :pagination="pagination" />
+      </div>
+      <div class="right1" style="min-width: 230px">
+        <div class="onerow">
+          <div class="onleft">
+            <div class="already">已选</div>
+          </div>
+        </div>
+        <div :style="{ 'max-height': state.screenHeight - 240 + 'px' }" style="overflow-y: auto">
+          <div class="selecteds">
+            <div v-for="(item, i) in state.selectedRow" :key="i">
+              <div v-if="i < 11">
+                <div class="chose">
+                  {{ item.title.length > 7 ? item.title.slice(0, 7) + '...' : item.title }}
+                  <div class="ch" @click="remove(item.id)"></div>
+                </div>
+              </div>
+              <div v-else>
+                <div v-if="state.member">
+                  <div class="chose">
+                    {{ item.title.length > 7 ? item.title.slice(0, 7) + '...' : item.title }}
+                    <div class="ch" @click="remove(item.id)"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div v-if="!state.member && state.selectedRow?.length > 10" class="ifsw">
+              <div @click="state.member = !state.member" class="“sw”">查看更多></div>
+            </div>
+            <div v-if="state.member && state.selectedRow?.length > 10" class="ifsw">
+              <div @click="state.member = !state.member" class="sw">收起&lt;</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 底部按钮和下一步的弹窗 -->
+    <div class="btnn">
+      <button class="btn2 btn3" @click="closeDrawer">取消</button>
+      <CommonRecommend :type="state.type" :id="state.selectedRowKeys" @finash="submitCall" :stage="state.stage">
+        <a-button class="btn2">
+          下一步
+        </a-button>
+      </CommonRecommend>
+    </div>
+  </a-drawer>
+
+</template>
+<script setup>
+import { reactive, ref, computed, nextTick } from 'vue';
+import { Form, message } from "ant-design-vue";
+import { isTopList, downloadErrorRecords } from '@/api/case'
+import CommonRecommend from "@/components/CaseManage/CommonRecommend";
+import useDownload from '@/hooks/useDownload'
+defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  title: {
+    type: String,
+    default: '添加在线课程'
+  }
+})
+const emit = defineEmits(['update:visible'])
+const loading = ref(false)
+const state = reactive({
+  allSelectedRow: [],
+  caseTitleList: [],
+  totalNum: 0,//上传的总条数
+  successNum: 0,//成功的条数
+  failNum: 0,//失败的条数
+  status: '',//上传的状态
+  progressColor: '',//进度条颜色
+  type: 1,//添加学员
+  stage: '',//
+  importId: '',//导入id
+  selectedRowKeys: [],//案例标题的id
+  selectedRow: [],//选择的每一行数据
+  dataSource: [],//表格的数据
+  uploadpercent: -1,//导入进度
+  fileName: '',//下载的名字
+  uploadAction: process.env.VUE_APP_SYS_API + '/xboe/m/boe/cases/recommend/import',//下载地址
+  fileList: [],//上传列表
+  member: false,//收起和展开
+  screenHeight: document.body.clientHeight,//高度
+  columns: [
+    {
+      title: "课程标题",
+      dataIndex: "title",
+      key: "title",
+      align: "left",
+      className: "h",
+      width: '75%',
+      ellipsis: true,
+    },
+    {
+      title: "资源归属",
+      dataIndex: "authorName",
+      key: "authorName",
+      width: '20%',
+      align: "center",
+      className: "h",
+      ellipsis: true,
+    }
+  ]
+})
+
+//删除选中
+const remove = (id) => {
+  state.selectedRowKeys = state.selectedRowKeys.filter(item => item !== id)
+  state.selectedRow = state.selectedRow.filter(item => item.id !== id)
+  // 过滤导入删除的条数
+  state.caseTitleList = state.caseTitleList.filter(item => state.selectedRow.some(sel => sel.id == item.id))
+}
+// 下一步返回的刷新列表
+function submitCall(flag) {
+  searchDataInfo.pageIndex = 1
+  flag && getTopList()
+  closeDrawer()
+}
+// 计算选择的条数
+const selectNum = computed(() => state.selectedRowKeys.length - state.caseTitleList.length)
+
+// 查询数据
+const searchDataInfo = reactive({
+  pageIndex: 1,
+  pageSize: 10,
+  keyWord: "",
+  authorName: '',
+});
+const total = ref(0)
+
+// 分页
+const pagination = computed(() => ({
+  total: total.value,
+  showSizeChanger: false,
+  current: searchDataInfo.pageIndex,
+  pageSize: searchDataInfo.pageSize,
+  onChange: changePagination,
+}));
+const changePagination = (e) => {
+  console.log(e);
+  loading.value = false
+  searchDataInfo.pageIndex = e
+  nextTick(getTopList);
+};
+// 计算全选
+const rowSelection = computed(() => {
+  return {
+    selectedRowKeys: state.selectedRowKeys,
+    onChange: onSelectChange,
+    preserveSelectedRowKeys: true,
+    getCheckboxProps: record => ({
+      disabled: state.caseTitleList.some((item) => record.id == item.id)
+    }),
+  }
+});
+//计算出来已选中状态
+const onSelectChange = (selectedRowKeys, selectedRow) => {
+  state.selectedRowKeys = selectedRowKeys
+  // 过滤取消的
+  // state.caseTitleList = state.caseTitleList.filter((item) => selectedRowKeys.includes(item.id))
+  // state.selectedRow = selectedRow.filter(Boolean)
+  const mergedArray = state.caseTitleList.concat(selectedRow.filter(Boolean));
+  state.selectedRow = Object.values(
+    mergedArray.reduce((acc, obj) => {
+      acc[obj.id] = obj;
+      return acc;
+    }, {})
+  );
+  console.log(state.selectedRow, state.caseTitleList);
+
+};
+
+// 请求列表数据是formdata类型的
+const getTopList = () => {
+  isTopList(searchDataInfo).then((res) => {
+    loading.value = true;
+    console.log(res);
+    res?.data?.result?.list?.forEach(element => {
+      element.key = element.id
+    });
+    state.dataSource = res?.data?.result?.list || []
+    total.value = res?.data?.result?.count
+  }).catch((err) => {
+    message.error(err);
+    loading.value = false;
+  })
+}
+getTopList()
+
+// 搜索
+const handleSearch = (num) => {
+  if (num == 1) searchDataInfo.pageIndex = 1
+  console.log(searchDataInfo);
+  getTopList()
+}
+
+//错误案例下载
+const downloadErrorInfo = () => {
+  if (!state.importId) {
+    message.warn('暂无失败数据')
+    return
+  }
+  let url = `${process.env.VUE_APP_SYS_API}/xboe/m/boe/cases/recommend/download?importId=` + state.importId
+  console.log(url);
+  window.open(url, '_self');
+}
+
+
+const { resetFields } = Form.useForm(searchDataInfo, {});
+//重置
+const handleRest = () => {
+  resetFields()
+  getTopList()
+}
+
+// 取消抽屉
+const closeDrawer = async () => {
+  state.selectedRowKeys = []
+  state.selectedRow = []
+  state.caseTitleList = []
+  resetFields()
+  emit('update:visible', false)
+  await nextTick()
+  getTopList()
+}
+// 根据数组id去重
+const deduplicateArrayById = (arr) => {
+  // 使用 Set 数据结构保存不重复的 id
+  const idSet = new Set();
+  // 使用 map 方法遍历数组，检查并去重对象
+  const deduplicatedArray = arr.filter(obj => {
+    const id = obj.id;
+    if (!idSet.has(id)) {
+      idSet.add(id);
+      return true;
+    }
+    return false;
+  });
+
+  return deduplicatedArray;
+
+}
+</script>
+
+
+<style lang="scss" scoped>
+//上传
+
+.addcourse1 {
+  :global(.ant-drawer-header-title) {
+    flex-direction: row-reverse !important;
+  }
+
+  :global(.ant-drawer-close) {
+    margin-right: 0;
+  }
+
+  .btnn {
+    height: 72px;
+    width: 100%;
+    position: absolute;
+    background-color: #fff;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
+
+    .btn1 {
+      width: 90px;
+      height: 34px;
+      border: 1px solid #4ea6ff;
+      border-radius: 5px;
+      color: #4ea6ff;
+      background-color: #fff;
+      cursor: pointer;
+    }
+
+    .btn2 {
+      cursor: pointer;
+      width: 100px;
+      height: 40px;
+      background: #4ea6ff;
+      border-radius: 8px;
+      border: 0;
+      margin-left: 15px;
+      color: #fff;
+    }
+    .btn3{
+      background: #fff;
+      border: 1px solid #02a7f0;
+      color: #02a7f0;
+    }
+  }
+
+  // 头部
+  .filter {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+
+    .filterItems {
+      display: flex;
+      flex-wrap: wrap;
+
+      .select {
+        margin-right: 20px;
+        margin-bottom: 20px;
+      }
+
+      .btn {
+        padding: 0 26px 0 26px;
+        height: 34px;
+        background: #4ea6ff;
+        border-radius: 5px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 14px;
+        flex-shrink: 0;
+        cursor: pointer;
+
+        .btnText {
+          font-size: 14px;
+          font-weight: 400;
+          color: #ffffff;
+          line-height: 36px;
+          // margin-left: 5px;
+        }
+      }
+
+      .btnn {
+        padding: 0 26px 0 26px;
+        height: 38px;
+        background: #4ea6ff;
+        border-radius: 8px;
+        border: 1px solid rgba(64, 158, 255, 1);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 14px;
+        flex-shrink: 0;
+        cursor: pointer;
+
+        .btnText {
+          font-size: 14px;
+          font-weight: 400;
+          color: #fff;
+          line-height: 36px;
+          // margin-left: 5px;
+        }
+      }
+      .btn1:active {
+        background: #0982ff;
+      }
+
+      .btn2:active {
+        background: rgba(64, 158, 255, 0.2);
+      }
+    }
+
+    .btns {
+      display: flex;
+
+      .btn {
+        padding: 0 26px;
+        height: 34px;
+        background: #4ea6ff;
+        border-radius: 5px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 14px;
+        flex-shrink: 0;
+        cursor: pointer;
+        .btnText {
+          font-size: 14px;
+          font-weight: 400;
+          color: #ffffff;
+          line-height: 36px;
+          // margin-left: 5px;
+        }
+      }
+
+      .btn3 {
+        margin-right: 0;
+      }
+
+      .btn3:active {
+        background: #0982ff;
+      }
+    }
+  }
+
+  //底部
+  .right1 {
+    border-left: 1px solid #f2f6fe;
+    margin-left: 20px;
+
+    .onerow {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-right: 40px;
+      flex-wrap: wrap;
+
+      width: 100%;
+
+      .onleft {
+        display: flex;
+        text-align: center;
+
+        .already {
+          color: rgba(51, 51, 51, 1);
+          font-size: 16px;
+          font-weight: 500;
+          margin-left: 32px;
+          white-space: nowrap;
+          // margin-bottom: 20px;
+        }
+
+        .count {
+          color: #4ea6ff;
+          font-size: 16px;
+          margin: 0 6px;
+        }
+
+        .peo {
+          color: rgba(51, 51, 51, 1);
+          font-size: 16px;
+          font-weight: 500;
+        }
+      }
+
+      .clbox {
+        margin-right: 50px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        width: 104px;
+        height: 32px;
+        border-radius: 4px;
+        background: #4ea6ff;
+
+        .colose {
+          width: 16px;
+          height: 16px;
+          background-image: url(../../assets/images/basicinfo/ch.png);
+          background-size: 100%;
+          margin-right: 4px;
+        }
+
+        .allclear {
+          color: rgba(255, 255, 255, 1);
+          font-size: 14px;
+        }
+      }
+    }
+
+    .selecteds {
+      display: flex;
+      flex-wrap: wrap;
+      margin-left: 32px;
+
+      .person {
+        width: 100%;
+        margin-top: 20px;
+        border-top: 1px solid #f2f6fe;
+      }
+
+      .chose {
+        width: 160px;
+        height: 32px;
+        margin-top: 25px;
+        margin-right: 25px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 2px;
+        border: 1px solid rgba(56, 139, 225, 1);
+        color: rgba(56, 139, 225, 1);
+        font-size: 12px;
+        position: relative;
+        padding: 0 10px;
+        border-radius: 16px;
+        .ch {
+          position: absolute;
+          width: 18px;
+          height: 18px;
+          background-image: url(../../assets/images/basicinfo/ch.png);
+          right: -8px;
+          top: -8px;
+        }
+      }
+
+      .ifsw {
+        display: flex;
+        align-items: end;
+        justify-content: center;
+        color: #4ea6ff;
+      }
+
+      .sw {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: justify;
+        color: #4ea6ff;
+        margin-top: 23px;
+        margin-left: 10px;
+      }
+
+      .dept {
+        width: 100%;
+        margin-top: 30px;
+        border-top: 1px solid #f2f6fe;
+      }
+
+    }
+  }
+
+
+
+}
+</style>

src/components/courserecommended/CourseCheck.vue

@@ -0,0 +1,506 @@
+<!-- 课程推荐催促学习页面 -->
+<template>
+  <!-- 预览弹窗 -->
+  <a-modal
+    :visible="visible"
+    title="查看"
+    :footer="null"
+    :closable="false"
+    wrapClassName="modalStyle lookCourseModal"
+    width="80%"
+    @cancel="handleCancel"
+    @ok="handleCancel"
+    style="overflow-y: auto;"
+  >
+  <div class="header">李玉冰(00004409)
+    <div style=" cursor: pointer;position: absolute;right: 30px;top: 20px;">
+        <img
+          @click="handleCancel"
+          style="width: 22px; height: 22px"
+          src="@/assets/images/basicinfo/close22.png"
+        />
+      </div>
+  </div>
+  <div class="title">
+    <dl>
+      <dt>推荐组织：京东方大学堂</dt>
+      <dt>课程数：3</dt>
+    </dl>
+    <div class="inp">
+      <a-input v-model:value="searchData.recommendName" placeholder="请输入姓名" />
+      <a-select
+              v-model:value="auditStatus"
+              dropdownClassName="dropdown-style"
+              style="width: 150px;margin-right: 16px;text-align: left;"
+              placeholder="全部"
+              size="large"
+              :options="options1"
+              allowClear
+            >
+            </a-select>
+      <a-button type="primary" @click="getList(1)">搜索</a-button>
+    </div>  
+  </div>
+
+      <!-- 表格 -->
+      <div class="tableBox">
+      <a-table style="border: 1px solid #f2f6fe;" :columns="column" :data-source="data" 
+        :scroll="{ x: 1100 }" :pagination="false" :loading="!tableLoading"  :row-selection="rowSelection">
+        <template #title>
+          <a-button type="primary">催促学习</a-button>
+        </template>
+        <template #operation="{ record }">
+          <a-space style="padding-right: 10px">
+            
+            <a-button
+              @click="() => handleLook(record, String(record.courseform))"
+              type="link"
+              >催促学习
+            </a-button>
+            
+          </a-space>
+        </template>
+      </a-table>
+      <div class="pa" style="display: flex; justify-content: flex-end; padding: 0 38px">
+        <a-pagination show-quick-jumper :pageSize="searchData.pageSize" :current="searchData.pageIndex" :total="total"
+          class="pagination" @change="handelChangePage" show-size-changer />
+      </div>
+    </div>
+       
+  </a-modal>
+  <SeeModal
+      :visible="lookCourseModal"
+      :detail="faceDetailObj"
+      @cancel="ft_exit_see"
+    />
+</template>
+
+<script>
+import { ref,reactive, toRefs, defineComponent, watch, computed,onMounted } from "vue";
+import { useStore } from "vuex";
+// import OrgClassCheck from "@/components/project/OrgClassCheck";
+import OrgClass from "@/components/project/OrgClass";
+import { detail } from "@/api/indexCourse";
+import { boeRequest } from "@/api/request";
+import {
+  RECOMMEND_PAGE,
+  
+} from "@/api/case";
+import { Form, message,} from "ant-design-vue";
+import SeeModal from "@/components/courserecommended/CourseRecommended.vue";
+
+// const { resetFields } = Form.useForm(searchData, {});
+
+export default defineComponent({
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    detail: {
+      type: Object,
+      default: () => ({}),
+    },
+    login:{
+      type:Boolean,
+      default:false,
+    },
+    data:{
+      type:Array,
+      default:()=>([])
+    },
+    
+  },
+  components: {
+    // OrgClassCheck,
+    OrgClass,
+    SeeModal,
+    
+  },
+  setup(props, { emit }) {
+    const options1 = ref([
+      {
+        value: 0,
+        label: "全部",
+      },
+      {
+        value: 1,
+        label: "未开始",
+      },
+      {
+        value: 2,
+        label: "进行中",
+      },
+      {
+        value: -1,
+        label: "已完成",
+      },
+    ]);
+
+
+// 计算全选
+const rowSelection = computed(() => {
+  return {
+    selectedRowKeys: state.selectedRowKeys,
+    onChange: onSelectChange,
+    preserveSelectedRowKeys: true,
+    getCheckboxProps: record => ({
+      disabled: state.caseTitleList.some((item) => record.id == item.id)
+    }),
+  }
+});
+//计算出来已选中状态
+const onSelectChange = (selectedRowKeys, selectedRow) => {
+  state.selectedRowKeys = selectedRowKeys
+  // 过滤取消的
+  // state.caseTitleList = state.caseTitleList.filter((item) => selectedRowKeys.includes(item.id))
+  // state.selectedRow = selectedRow.filter(Boolean)
+  const mergedArray = state.caseTitleList.concat(selectedRow.filter(Boolean));
+  state.selectedRow = Object.values(
+    mergedArray.reduce((acc, obj) => {
+      acc[obj.id] = obj;
+      return acc;
+    }, {})
+  );
+  console.log(state.selectedRow, state.caseTitleList);
+
+};
+
+
+        // 预览弹框 开启和关闭
+    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,
+  pageSize: 10,
+  recommendName: "",
+});
+const handelChangePage = (page, pageSize) => {
+  state.tableLoading = false;
+  searchData.value.pageSize = pageSize;
+  searchData.value.pageIndex = page;
+  getList();
+};
+const getList = (num) => {
+//   if (num === 1) searchData.value.pageIndex = 1;
+  boeRequest(RECOMMEND_PAGE, searchData.value)
+    .then((res) => {
+      state.tableLoading = true;
+      state.data = res?.result?.list || [];
+      state.total = res?.result?.count || 0;
+      console.log(state.data)
+      
+    })
+    .catch(() => {
+      state.tableLoading = false;
+    });
+};
+getList()
+
+    const value = ref('');
+    console.log("props", props);
+    const store = useStore();
+
+    const state = reactive({
+      auditStatus: null,
+      selectedRow: [],//选择的每一行数据
+      caseTitleList: [],
+      selectedRowKeys: [],//案例标题的id
+      faceDetailObj:{},
+      lookCourseModal:false,
+      tableLoading:false,
+      imgList: [],
+      categoryName: "",
+      locationHref:
+            process.env.VUE_APP_FILE_PATH,
+
+      //目标任务
+      orgSelect: [],
+      orgSelectName: [],
+      orgSelectFullName: [],
+      selectJobName: [],
+      selectJobId: [],
+      selectBandName: [],
+      selectBandId: [],
+      //资源归属
+      sourceBelongId: [],
+      sourceBelongName: [],
+      sourceBelongFullName: [],
+      orgSelectNames: "",
+      //列表数据
+      total:0,
+      column: [
+        {
+          title: "课程名称",
+          dataIndex: "recommendBy",
+          key: "recommendBy",
+          width: "35%",
+          align: "center",
+          ellipsis: true,
+          className: "h",
+          customRender: ({ text }) => {
+            return text ? text : "-";
+          },
+        },
+        {
+          title: "课程时长/h",
+          dataIndex: "listPageName",
+          key: "listPageName",
+          width: "15%",
+          align: "center",
+          className: "h",
+          customRender: ({ text }) => {
+            return text ? text : "-";
+          },
+        },
+        {
+          title: "状态",
+          dataIndex: "recommendTime",
+          key: "recommendTime",
+          width: "15%",
+          align: "center",
+          className: "h",
+          customRender: ({ text }) => {
+            return text ? text : "-";
+          },
+        },
+        {
+          title: "完成进度",
+          dataIndex: "courseCount",
+          key: "courseCount",
+          width: "15%",
+          align: "center",
+          className: "h",
+          customRender: ({ text }) => {
+            return text ? text : "-";
+          },
+        },
+        {
+          title: "操作",
+          width: "10%",
+          dataIndex: "operation",
+          key: "operation",
+          align: "center",
+          slots: { customRender: "operation" },
+        },
+        
+      ],
+      data:[]
+    });
+    
+
+    const sysTypeOptions = computed(() => store.state.content_type);
+    //获取岗位
+    const jobType = computed(() => store.state.job_type);
+    //获取band
+    const bandList = computed(() => store.state.band);
+    watch(
+      () => props.detail.sysTypeId,
+      () => {
+        state.categoryName = findClassFullName(sysTypeOptions.value);
+      }
+    );
+    watch(
+      () => props.detail.id,
+      () => {
+        detail({
+          offcourseId: Number(props.detail.id),
+        }).then((res) => {
+          console.log("res", res);
+          if (res.data.code === 200) {
+            let item = res.data.data;
+            if (item.jobTypeIds) {
+              state.selectJobId = item.jobTypeIds.split(",");
+              console.log("selectJobId" + JSON.stringify(state.selectJobId));
+            }
+            if (item.bandIds) {
+              state.selectBandId = item.bandIds.split(",");
+            }
+            console.log("state.selectBandId", state.selectBandId);
+            state.sourceBelongId = item.sourceBelongId;
+            state.sourceBelongName = item.sourceBelongFullName;
+            if (item.organizationIds && item.organizationNames) {
+              let orgSelectIds = item.organizationIds;
+              let orgSelectNames = item.organizationNames;
+              orgSelectIds = orgSelectIds.split(",");
+              orgSelectNames = orgSelectNames.split(",");
+              console.log(
+                "orgSelectIds&orgSelectNames",
+                orgSelectIds,
+                orgSelectNames
+              );
+              let arrObj = [];
+              arrObj = orgSelectIds.map((item, index) => {
+                return { value: item, label: orgSelectNames[index] };
+              });
+              console.log("arrObj-------------", arrObj);
+              state.orgSelect = arrObj;
+              state.orgSelectNames = orgSelectNames;
+            }
+          }
+        });
+      },
+      {
+        deep: true,
+      }
+    );
+
+    function findClassFullName(list, name = "") {
+      return (
+        (list &&
+          list.length &&
+          list
+            .map((e) =>
+              props.detail.sysTypeId == e.code
+                ? name
+                  ? name + "-" + e.name
+                  : e.name
+                : findClassFullName(
+                    e.children,
+                    name ? name + "-" + e.name : e.name
+                  )
+            )
+            .filter((name) => name)
+            .join("")) ||
+        ""
+      );
+    }
+
+    const filterTxt = (txt) => {
+      if (txt) {
+        return txt;
+      } else {
+        return "-";
+      }
+    };
+    const handleCancel = () => {
+      console.log("关闭");
+      emit("cancel");
+      //目标任务
+      state.orgSelect = [];
+      state.orgSelectName = [];
+      state.orgSelectFullName = [];
+      state.selectJobName = [];
+      state.selectJobId = [];
+      state.selectBandName = [];
+      state.selectBandId = [];
+      //资源归属
+      state.sourceBelongId = [];
+      state.sourceBelongName = [];
+      state.sourceBelongFullName = [];
+      state.orgSelectNames = "";
+    };
+
+    function openDown(link) {
+      window.open(process.env.VUE_APP_FILE_PATH + link);
+      //:href="item.indexOf('http') !== -1 ? item : locationHref + item"
+    }
+    return {
+      ...toRefs(state),
+      filterTxt,
+      openDown,
+      handleCancel,
+      jobType,
+      bandList,
+      value,
+      searchData,
+      getList,
+      handelChangePage,
+      handleLook,
+      ft_exit_see,
+      rowSelection,
+      onSelectChange,
+      options1,
+    };
+  },
+});
+</script>
+<style lang="scss" scoped>
+
+  .header{
+    // background-color: rgba(255, 255, 255, 0);
+    position: relative;
+    box-sizing: border-box;
+    font-weight: 650;
+    color: #333333;
+    text-align: left;
+    padding:20px 0 16px 19px;
+    border-bottom: 1px solid rgba(121, 121, 121, 0.38);
+  }
+  .title{
+    display: flex;
+    justify-content: space-between;
+  }
+  dl{
+    display: flex;
+    background-color: rgba(255, 255, 255, 0);
+    box-sizing: border-box;
+    color: #333333;
+    text-align: left;
+    margin-left: 19px;
+    margin-top: 25px;
+  }
+  dl dt{
+    padding-right: 70px;
+    color: #333333;
+    text-align: left;
+  }
+  .inp{
+    text-align: right;
+    margin-bottom: 32px;
+    margin-top: 17px;
+  }
+  .inp>.ant-input{
+    width: 130px;
+    height: 40px;
+    margin-right: 18px;    
+  }
+  .inp>.ant-btn-primary{
+    width: 90px;
+    height: 40px;
+    border-radius: 5px;
+    box-sizing: border-box;
+    margin-right: 30px;
+  }
+
+   .tableBox {
+    // margin: 20px 38px 30px;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    // margin-bottom: 36px;
+    th.ant-table-cell {
+      background-color: #eff4fc !important;
+      text-align: center;
+      color: #999ba3;
+    }
+
+    td.ant-table-cell {
+      text-align: center;
+    }
+  }
+  .pa{
+    margin-top: 36px;
+    margin-bottom: 43px;
+  }
+
+</style>

src/components/courserecommended/CourseRecommended.vue

@@ -0,0 +1,465 @@
+<!-- 课程推荐查看弹窗页面 -->
+<template>
+  <!-- 预览弹窗 -->
+  <a-modal
+    :visible="visible"
+    title="查看"
+    :footer="null"
+    :closable="false"
+    wrapClassName="modalStyle lookCourseModal"
+    width="80%"
+    @cancel="handleCancel"
+    @ok="handleCancel"
+    style="overflow-y: auto;"
+  >
+  <div class="header">项目管理系列课
+    <div style=" cursor: pointer;position: absolute;right: 30px;top: 20px;">
+        <img
+          @click="handleCancel"
+          style="width: 22px; height: 22px"
+          src="@/assets/images/basicinfo/close22.png"
+        />
+      </div>
+  </div>
+  
+  <div class="title">
+    <dl>
+      <dt>推荐组织：京东方大学堂</dt>
+      <dt>课程数：3</dt>
+      <dt>用户数：10</dt>
+    </dl>
+    <div class="inp">
+      <a-input v-model:value="searchData.recommendName" placeholder="请输入姓名" />
+      <a-button type="primary" @click="getList(1)">搜索</a-button>
+    </div>  
+  </div>
+
+      <!-- 表格 -->
+      <div class="tableBox">
+      <a-table style="border: 1px solid #f2f6fe" :columns="column" :data-source="data" 
+        :scroll="{ x: 1100 }" :pagination="false" :loading="!tableLoading">
+
+        <template #operation="{ record }">
+          <a-space style="padding-right: 10px">
+            
+            <a-button
+              @click="() => handleLook(record, String(record.courseform))"
+              type="link"
+              >查看详情
+            </a-button>
+            
+          </a-space>
+        </template>
+      </a-table>
+      <div class="pa" style="display: flex; justify-content: flex-end; padding: 0 38px">
+        <a-pagination show-quick-jumper :pageSize="searchData.pageSize" :current="searchData.pageIndex" :total="total"
+          class="pagination" @change="handelChangePage" show-size-changer />
+      </div>
+    </div>
+       
+  </a-modal>
+  <SeeModal
+      :visible="lookCourseModal"
+      :detail="faceDetailObj"
+      @cancel="ft_exit_see"
+    />
+</template>
+
+<script>
+import { ref,reactive, toRefs, defineComponent, watch, computed,onMounted } from "vue";
+import { useStore } from "vuex";
+// import OrgClassCheck from "@/components/project/OrgClassCheck";
+import OrgClass from "@/components/project/OrgClass";
+import { detail } from "@/api/indexCourse";
+import { boeRequest } from "@/api/request";
+import {
+  RECOMMEND_PAGE,
+  
+} from "@/api/case";
+import { Form, message,} from "ant-design-vue";
+import SeeModal from "@/components/courserecommended/CourseCheck.vue";
+
+// const { resetFields } = Form.useForm(searchData, {});
+
+export default defineComponent({
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    detail: {
+      type: Object,
+      default: () => ({}),
+    },
+    login:{
+      type:Boolean,
+      default:false,
+    },
+    data:{
+      type:Array,
+      default:()=>([])
+    },
+    
+  },
+  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,
+  pageSize: 10,
+  recommendName:"",
+});
+const handelChangePage = (page, pageSize) => {
+  state.tableLoading = false;
+  searchData.value.pageSize = pageSize;
+  searchData.value.pageIndex = page;
+  getList();
+};
+const getList = (num) => {
+//   if (num === 1) searchData.value.pageIndex = 1;
+  boeRequest(RECOMMEND_PAGE, searchData.value)
+    .then((res) => {
+      state.tableLoading = true;
+      state.data = res?.result?.list || [];
+      state.total = res?.result?.count || 0;
+      console.log("总数据",state.data)
+
+    })
+    .catch(() => {
+      state.tableLoading = false;
+    });
+};
+
+getList()
+
+    const value = ref('');
+    console.log("props", props);
+    const store = useStore();
+
+    const state = reactive({
+      faceDetailObj:{},
+      lookCourseModal:false,
+      tableLoading:false,
+      imgList: [],
+      categoryName: "",
+      locationHref:
+            process.env.VUE_APP_FILE_PATH,
+
+      //目标任务
+      orgSelect: [],
+      orgSelectName: [],
+      orgSelectFullName: [],
+      selectJobName: [],
+      selectJobId: [],
+      selectBandName: [],
+      selectBandId: [],
+      //资源归属
+      sourceBelongId: [],
+      sourceBelongName: [],
+      sourceBelongFullName: [],
+      orgSelectNames: "",
+      //列表数据
+      total:0,
+      column: [
+        {
+          title: "姓名",
+          dataIndex: "recommendBy",
+          key: "recommendBy",
+          width: "10%",
+          align: "center",
+          ellipsis: true,
+          className: "h",
+          customRender: ({ text }) => {
+            return text ? text : "-";
+          },
+        },
+        {
+          title: "工号",
+          dataIndex: "listPageName",
+          key: "listPageName",
+          width: "10%",
+          align: "center",
+          className: "h",
+          customRender: ({ text }) => {
+            return text ? text : "-";
+          },
+        },
+        {
+          title: "课程时长/h",
+          dataIndex: "recommendTime",
+          key: "recommendTime",
+          width: "10%",
+          align: "center",
+          className: "h",
+          customRender: ({ text }) => {
+            return text ? text : "-";
+          },
+        },
+        {
+          title: "评分",
+          dataIndex: "courseCount",
+          key: "courseCount",
+          width: "10%",
+          align: "center",
+          className: "h",
+          customRender: ({ text }) => {
+            return text ? text : "-";
+          },
+        },
+        {
+          title: "查看率",
+          dataIndex: "viewRate",
+          key: "viewRate",
+          width: "10%",
+          align: "center",
+          className: "h",
+          customRender: ({ text }) => {
+            return text ? text : "-";
+          },
+        },
+        {
+          title: "完成进度",
+          dataIndex: "viewRate",
+          key: "viewRate",
+          width: "10%",
+          align: "center",
+          className: "h",
+          customRender: ({ text }) => {
+            return text ? text : "-";
+          },
+        },
+        {
+          title: "操作",
+          width: "10%",
+          dataIndex: "operation",
+          key: "operation",
+          align: "center",
+          slots: { customRender: "operation" },
+        },
+        
+      ],
+      data:[]
+    });
+    
+
+    const sysTypeOptions = computed(() => store.state.content_type);
+    //获取岗位
+    const jobType = computed(() => store.state.job_type);
+    //获取band
+    const bandList = computed(() => store.state.band);
+    watch(
+      () => props.detail.sysTypeId,
+      () => {
+        state.categoryName = findClassFullName(sysTypeOptions.value);
+      }
+    );
+    watch(
+      () => props.detail.id,
+      () => {
+        detail({
+          offcourseId: Number(props.detail.id),
+        }).then((res) => {
+          console.log("res", res);
+          if (res.data.code === 200) {
+            let item = res.data.data;
+            if (item.jobTypeIds) {
+              state.selectJobId = item.jobTypeIds.split(",");
+              console.log("selectJobId" + JSON.stringify(state.selectJobId));
+            }
+            if (item.bandIds) {
+              state.selectBandId = item.bandIds.split(",");
+            }
+            console.log("state.selectBandId", state.selectBandId);
+            state.sourceBelongId = item.sourceBelongId;
+            state.sourceBelongName = item.sourceBelongFullName;
+            if (item.organizationIds && item.organizationNames) {
+              let orgSelectIds = item.organizationIds;
+              let orgSelectNames = item.organizationNames;
+              orgSelectIds = orgSelectIds.split(",");
+              orgSelectNames = orgSelectNames.split(",");
+              console.log(
+                "orgSelectIds&orgSelectNames",
+                orgSelectIds,
+                orgSelectNames
+              );
+              let arrObj = [];
+              arrObj = orgSelectIds.map((item, index) => {
+                return { value: item, label: orgSelectNames[index] };
+              });
+              console.log("arrObj-------------", arrObj);
+              state.orgSelect = arrObj;
+              state.orgSelectNames = orgSelectNames;
+            }
+          }
+        });
+      },
+      {
+        deep: true,
+      }
+    );
+
+    function findClassFullName(list, name = "") {
+      return (
+        (list &&
+          list.length &&
+          list
+            .map((e) =>
+              props.detail.sysTypeId == e.code
+                ? name
+                  ? name + "-" + e.name
+                  : e.name
+                : findClassFullName(
+                    e.children,
+                    name ? name + "-" + e.name : e.name
+                  )
+            )
+            .filter((name) => name)
+            .join("")) ||
+        ""
+      );
+    }
+
+    const filterTxt = (txt) => {
+      if (txt) {
+        return txt;
+      } else {
+        return "-";
+      }
+    };
+    const handleCancel = () => {
+      console.log("关闭");
+      emit("cancel");
+      //目标任务
+      state.orgSelect = [];
+      state.orgSelectName = [];
+      state.orgSelectFullName = [];
+      state.selectJobName = [];
+      state.selectJobId = [];
+      state.selectBandName = [];
+      state.selectBandId = [];
+      //资源归属
+      state.sourceBelongId = [];
+      state.sourceBelongName = [];
+      state.sourceBelongFullName = [];
+      state.orgSelectNames = "";
+    };
+
+    function openDown(link) {
+      window.open(process.env.VUE_APP_FILE_PATH + link);
+      //:href="item.indexOf('http') !== -1 ? item : locationHref + item"
+    }
+    return {
+      ...toRefs(state),
+      filterTxt,
+      openDown,
+      handleCancel,
+      jobType,
+      bandList,
+      value,
+      searchData,
+      getList,
+      handelChangePage,
+      handleLook,
+      ft_exit_see,
+    };
+  },
+});
+</script>
+<style lang="scss" scoped>
+.modal{
+  overflow-y: auto;
+}
+  .header{
+    // background-color: rgba(255, 255, 255, 0);
+    position: relative;
+    box-sizing: border-box;
+    font-weight: 650;
+    color: #333333;
+    text-align: left;
+    padding:20px 0 16px 19px;
+    border-bottom: 1px solid rgba(121, 121, 121, 0.38);
+  }
+  .title{
+    display: flex;
+    justify-content: space-between;
+  }
+  dl{
+    display: flex;
+    background-color: rgba(255, 255, 255, 0);
+    box-sizing: border-box;
+    color: #333333;
+    text-align: left;
+    margin-left: 19px;
+    margin-top: 25px;
+  }
+  dl dt{
+    padding-right: 70px;
+    color: #333333;
+    text-align: left;
+  }
+  .inp{
+    text-align: right;
+    margin-bottom: 32px;
+    margin-top: 17px;
+  }
+  .inp>.ant-input{
+    width: 130px;
+    height: 40px;
+    margin-right: 18px;    
+  }
+  .inp>.ant-btn-primary{
+    width: 90px;
+    height: 40px;
+    border-radius: 5px;
+    box-sizing: border-box;
+    margin-right: 30px;
+  }
+
+   .tableBox {
+    // margin: 20px 38px 30px;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    // margin-bottom: 36px;
+    th.ant-table-cell {
+      background-color: #eff4fc !important;
+      text-align: center;
+      color: #999ba3;
+    }
+
+    td.ant-table-cell {
+      text-align: center;
+    }
+  }
+  .pa{
+    margin-top: 36px;
+    margin-bottom: 43px;
+  }
+</style>

src/components/courserecommended/RecommendedCourse.vue

@@ -0,0 +1,209 @@
+<template>
+  <!-- 推荐课程抽屉 -->
+  <a-drawer class="course-drawer" :visible="visible" width="80%" :title="title" @close="closeDrawer" :maskClosable="false">
+    <div class="inp">
+      <span class="red">* </span>
+      <span>推荐标题：</span>
+      <a-input v-model:value="state.sellName"  show-count :maxlength="20" />
+    </div>
+    <div class="inp">
+      <span class="red">* </span>
+      <span>推荐组织：</span>
+      <a-input v-model:value="state.sellForm"/>
+    </div>
+    <div class="inp inp2">
+      <span class="red">* </span>
+      <span>推荐理由：</span>
+      <a-input v-model:value="state.sellIntro"  show-count :maxlength="100" />
+    </div>
+    <div class="imgupload">
+      <span class="red">* </span>
+      <span>课程包封面图：</span>
+      <div>
+        <a-upload
+          v-model:file-list="fileList"
+          
+          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+          list-type="picture-card"
+          @preview="handlePreview"
+        >
+        <div v-if="fileList.length < 1">
+            <plus-outlined />
+            <div  style="margin-top: 8px">
+              <img src="../../assets/images/taskpage/upload.png" alt="">
+              <span>将文件拖到此处，或 点击上传
+</span>
+            </div>
+            
+        </div>
+        </a-upload>
+        <a-modal :visible="previewVisible" :title="previewTitle" :footer="null" @cancel="handleCancel">
+          <img alt="example" style="width: 100%" :src="previewImage" />
+        </a-modal>
+      </div>
+    </div>
+    <div class="button1">
+      <button class="btn2" @click="closeDrawer">取消</button>
+      <a-button class="btn2" @click="handleNew">下一步</a-button>
+    </div>
+    <AddCourse v-model:visible="newNext" :title="添加在线课程"></AddCourse>
+  </a-drawer>
+  
+  <!-- 下一步添加学员 -->
+</template>
+<script setup>
+import { reactive, ref, computed, nextTick } from 'vue';
+import { Form, message } from "ant-design-vue";
+import { isTopList, downloadErrorRecords, UploadProps } from '@/api/case'
+import AddCourse from "@/components/courserecommended/AddCourse";
+import useDownload from '@/hooks/useDownload'
+const state = reactive({
+  sellName:"1",      //推荐标题
+  sellIntro:"1",     //推荐组织
+  sellForm:"1",      //推荐理由
+})
+const newNext = ref(false);
+const handleNew = () => {
+  if(!state.sellName){
+    message.destroy();
+    return message.warning("请输入推荐标题");
+  }
+  if(!state.sellIntro){
+    message.destroy();
+    return message.warning("请输入推荐组织");
+  }
+  if(!state.sellForm){
+    message.destroy();
+    return message.warning("请输入推荐理由");
+  }
+  newNext.value = true;
+};
+const emit = defineEmits(['update:visible'])
+
+// 取消抽屉
+const closeDrawer = async () => {
+  state.sellName = ""
+  state.sellIntro = ""
+  state.sellForm = ""
+  // resetFields()
+  emit('update:visible', false)
+  // await nextTick()
+  // getTopList()
+}
+
+function getBase64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = error => reject(error);
+  });
+}
+const previewVisible = ref(false);
+    const previewImage = ref('');
+    const previewTitle = ref('');
+
+    const fileList = ref([
+   
+    ]);
+
+    const handleCancel = () => {
+      previewVisible.value = false;
+      previewTitle.value = '';
+    };
+    const handlePreview = async (file) => {
+      if (!file.url && !file.preview) {
+        file.preview = (await getBase64(file.originFileObj));
+      }
+      previewImage.value = file.url || file.preview;
+      previewVisible.value = true;
+      previewTitle.value = file.name || file.url.substring(file.url.lastIndexOf('/') + 1);
+    };
+
+defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  title: {
+    type: String,
+    default: '推荐课程'
+  },
+  
+})
+
+</script>
+
+
+<style lang="scss" scoped>
+.course-drawer{
+  margin-bottom: 80px;
+  .red{
+    color: #d9001b;
+  }
+  .inp{
+    display: flex;
+    margin-left: 134px;
+    margin-bottom: 55px;
+    .ant-input{
+      width: 510px;
+      height: 31px;
+    }
+    .ant-input-affix-wrapper{
+      width: 510px;
+      height: 31px;
+
+    }
+
+  }
+  .inp2 .ant-input-affix-wrapper{
+    height: 80px;
+  }
+  .imgupload{
+    margin-left: 134px;
+    margin-bottom: 55px;
+    :deep(.ant-upload.ant-upload-select-picture-card){
+      width: 413px;
+      height: 227px;
+      margin-left: 80px;
+      margin-top: 30px;
+    }
+    :deep(.ant-upload-list-picture-card .ant-upload-list-item){
+      width: 413px;
+      height: 227px;
+      margin-left: 80px;
+      margin-top: 30px;
+    }
+  }
+  .button1 {
+    height: 72px;
+    width: 100%;
+    position: absolute;
+    background-color: #fff;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
+    
+    .btn2 {
+      width: 60px;
+      height: 30px;
+      padding: 2px 2px 2px 2px;
+      border-radius: 4px;
+      border: 1px solid #409eff;
+      background-color: #409eff;
+      color: #ffffff;
+      text-align: center;
+      margin-left: 23px;
+      &:hover{
+        background-color: #66b1ff;
+        box-sizing: border-box;
+      }
+    }
+  }
+}
+
+
+</style>

src/hooks/useRequest.js

@@ -28,7 +28,7 @@ const useTotalPage = (_url, params, config = {}) => {
     function fetch() {
         state.loading = true;
         return http[methods](unref(url), !s[1] ? unref(params) : { params: unref(params) }, { ...config }).then(r => {
-            state.data = r.data?.records || 0;
+            state.data = r.data?.records || [];
             state.total = r.data?.total || 0;
             state.loading = false;
         })

src/main.js

@@ -21,7 +21,8 @@ import {USER_INFO, USER_PERMISSION, VALIDATE_TOKEN} from "@/api/apis";
 import * as api1 from "@/api/index1";
 import {getCookieForName} from "@/api/method";
 import components from './components'
-// import axios from 'axios'
+import axios from 'axios'
+import Cookies from "vue-cookies";
 // axios.defaults.withCredentials = true;
 // import zhCN from 'ant-design-vue/es/locale/zh_CN';
 const app = createApp(App)
@@ -69,9 +70,48 @@ async function initDict(key) {
     store.commit("SET_DICT", {key, data: list});
 }
 const getDictList = (param) => api1.getDictTree({code: param,}).then((res) => res.data.data);
+const initDictTree = (key) => {
+    axios({
+        method: "get",
+        url: "/systemapi/xboe/type/tree-list",
+        params: {
+          sysResType: "1",
+          status: "1",
+        },
+        headers: {
+          "XBOR-Access-token": Cookies.get("token"),
+        },
+      }).then(
+        (res) => {
+          console.log(res.data.result,'课程分类接口')
+          store.commit("SET_DICT", {key, data: res.data.result});
+          //转化为map放到状态中
+          let map=new Map();
+          res.data.result.forEach(item=>{
+             map.set(item.id, item.name);
+             if(item.children && item.children!=''){
+                item.children.forEach(child=>{
+                  map.set(child.id, child.name);
+                  if(child.children && child.children!=''){
+                     child.children.forEach(last=>{
+                       map.set(last.id, last.name);
+                     })
+                  }
+                })
+             }
+          });
+          store.commit("SET_SYSTYPEMAP", map);
+        },
+        (err) => {
+          message.error(err);
+        }
+      );
+}
 
 async function init() {
-    initDict("content_type"); //内容分类
+
+    // initDict("content_type"); //内容分类
+    initDictTree("content_type"); //内容分类，换成type/tree-list接口
     initDict("project_level"); //项目级别
     initDict("project_sys");  //培训分类
     initDict("project_pic"); //项目封面

src/store/index.js

@@ -26,7 +26,8 @@ export default createStore({
     pathmapPic: [],//学习路径背景图
     memberInitInfo: [],//学员默认
     sysType: [],//学员默认
-    menus: []
+    menus: [],
+    sysTypeMap:null
   },
   getters: {},
   mutations: {
@@ -51,6 +52,9 @@ export default createStore({
     SET_DICT(state, { key, data }) {
       state[key] = data;
     },
+    SET_SYSTYPEMAP(state, map) {
+      state.sysTypeMap = map;
+    },
     SET_MEMBER_INFO(state, data) {
       state.memberInitInfo = data;
     },

src/views/courselibrary/CourseRecommended.vue

@@ -0,0 +1,595 @@
+<!-- 课程推荐页面 -->
+
+<template>
+  <div class="courseManage">
+    <div class="headerf">
+      <!-- 搜索框及按钮 -->
+      <div class="filter">
+        <div class="filterItems">
+          <div class="select">
+            <a-tree-select
+              
+              v-model:value="sysTypeId"
+              show-search
+              style="width: 200px"
+              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
+              placeholder="请选择内容分类"
+              allow-clear
+              tree-default-expand-all
+              :fieldNames="{
+                children: 'children',
+                label: 'name',
+                value: 'code',
+              }"
+              :tree-data="sysTypeOptions"
+            >
+            </a-tree-select>
+          </div>
+          <!-- <div class="pathnameInp">
+            <a-input
+              v-model:value="teacherName"
+              style="width: 200px; height: 40px; border-radius: 8px"
+              placeholder="授课教师"
+              @pressEnter="handleSearch"
+            />
+          </div> -->
+          <div style="display: flex;">
+            <div class="pathnameInp">
+              <a-input
+                v-model:value="nameOrTeacherName"
+                style="width: 276px; height: 40px; border-radius: 8px;"
+                placeholder="请输入课程名称或授课教师"
+                @pressEnter="handleSearch"
+              />
+            </div>
+        
+            <div style="display: flex; margin-bottom: 20px" class="courseBtn">
+              <div class="btn btn1" @click="handleSearch1">
+                <div class="search"></div>
+                <div class="btnText">搜索</div>
+              </div>
+              <div class="btnn btn2" @click="handleRest1">
+                <div class="search"></div>
+                <div class="btnText">重置</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 搜索框及按钮 -->
+    </div>
+    <!-- 表格 -->
+    <div style="padding: 10px 35px">
+      <a-table
+        :header-cell-style="{ 'text-align': 'center' }"
+        style="border: 1px solid #f2f6fe"
+        :columns="columns1"
+        :data-source="tableData1"
+        :loading="tableLoading"
+        :pagination="false"
+        :scroll="{ x: 'max-content' }"
+        row-key="id"
+      >
+        <template #actions="{ text, record, index }">
+          <a-space :key="record.id">
+           
+            <a-button @click="() => handleOper(record,'withdraw',record.recommendStatus)" 
+              type="link" 
+              :class="count>=3? `${record.recommendStatus!==1?'grey':''}`:''"
+              >
+              {{ status[record.recommendStatus] }}
+            </a-button>
+          </a-space>
+        </template>
+      </a-table>
+    </div>
+    <div class="pa">
+      <a-pagination
+        v-if="tableDataTotal1 > 10"
+        :showSizeChanger="true"
+        :showQuickJumper="true"
+        :hideOnSinglePage="true"
+        :pageSize="pageSize1"
+        :current="currentPage1"
+        :total="tableDataTotal1"
+        class="pagination"
+        @change="handelChangePage1"
+      />
+    </div>
+    <!-- 表格 -->
+  </div>
+</template>
+
+<script lang="jsx" >
+import {
+  reactive,
+  toRefs,
+  defineComponent,
+  ref,
+  computed,
+watch,
+onMounted,
+} from "vue";
+import { message } from "ant-design-vue";
+import { useRouter, useRoute } from "vue-router";
+import dialog from "@/utils/dialog";
+import {
+  list,
+  page,
+  recommend
+} from "@/api/indexCourse";
+import {
+} from "../../utils/utils";
+import "@wangeditor/editor/dist/css/style.css";
+import * as moment from "moment";
+import { codeUrl, toDate } from "@/api/method";
+import { useStore } from "vuex";
+import { checkPer, checkOwner } from "@/utils/utils";
+
+
+// 查询数据
+const searchData = ref({
+  pageIndex: 1,
+  pageSize: 10,
+  recommendName: "",
+  recommendTimeList: [],
+});
+
+const status = reactive({
+  0:'推荐',
+  1:'取消推荐',
+  2:'重新推荐'
+})
+
+export default defineComponent({
+  components: {},  
+  setup() {
+    
+    const handleMsg = {
+      withdraw1: "课程已被推荐，点击可以取消推荐",
+      withdraw: "课程未被推荐，点击可以设为推荐",
+    };
+    //点击按钮
+    function handleOper(record, type, status = '') {
+      if(state.count>=3){
+        if(record.recommendStatus!==1){
+          message.info('推荐课程上限3门，您可以取消原推荐后再做推荐')
+          return
+        } 
+      }
+      dialog({content: handleMsg[status ? type + status : type], ok: recommends(record)[type] });    
+    }
+    const recommends = (record) => ({
+      withdraw: async () => {
+        try {
+          await recommend({ courseId: record.id,userName:state.userName,userId:state.userId });
+          getTableDate();
+        } catch (error) {
+          message.info("推送失败！");
+        }
+      },     
+    });
+    const store = useStore();
+    // 内容分类
+    const sysTypeOptions = computed(() => {return store.state.content_type;});
+    //推荐人
+    const userInfo = computed(()=>store.state.userInfo)
+    onMounted(()=>{
+      state.userName = userInfo.value.realName
+      state.userId = userInfo.value.userId
+      console.log(userInfo.value,'ffffffffffffffffffffff')
+    })
+
+    const state = reactive({
+      //测试
+      userName:"",
+      userId:"",
+      count:0,
+      total:0,
+      tableLoading: false,
+      columns1: [
+        {
+          title: "序号",
+          width: 80,
+          dataIndex: "xuhaoid",
+          key: "xuhaoid",
+          align: "center",
+          customRender: ({ text,record,index }) => {
+             return index+1
+          },
+        },
+        {
+          title: "名称",
+          width: 200,
+          dataIndex: "name",
+          key: "name",
+          ellipsis: true,
+          align: "left",
+          customRender: ({ text }) => {
+            return <a-tooltip placement="bottomLeft" title = {text} >{text?text.length>12?text.slice(0,12)+'...':text:''}</a-tooltip>
+          },
+        },
+         {
+          title: "内容分类",
+          width: 200,
+          dataIndex: "sysType1",
+          ellipsis: true,
+          key: "keywords",
+          align: "center",
+          customRender: ({ record,text }) =>
+          `${getSysTypeMap(record.sysType1, record.sysTypeId)?getSysTypeMap(record.sysType1) : ""}
+          ${getSysTypeMap(record.sysType2, record.sysTypeId)?'-'+getSysTypeMap(record.sysType2) : ""}
+          ${getSysTypeMap(record.sysType3, record.sysTypeId)?'-'+getSysTypeMap(record.sysType3) : ""}
+          `
+        },
+        {
+          title: "关键字",
+          width: 100,
+          dataIndex: "keywords",
+          key: "keywords",
+          align: "left",
+          ellipsis: true,
+          customRender: ({ text }) => {
+            return <a-tooltip placement="bottomLeft" title = {text} >{text? text.length>12? text.slice(0,12)+'...' : text : ''}</a-tooltip>
+          },
+        },
+        {
+          title: "授课教师",
+          width: 100,
+          dataIndex: "teacherName",
+          key: "8",
+          ellipsis: true,
+          align: "center",
+          customRender: ({ text }) => {
+            return text ? text : "-";
+          },
+        },
+        {
+          title: "创建时间",
+          width: 100,
+          dataIndex: "sysCreateTime",
+          key: "9",
+          ellipsis: true,
+          align: "center",
+          customRender: ({ text }) => {
+            return text ? text : "-";
+          },
+        }, 
+        {
+          title: "推荐时间",
+          width: 100,
+          ellipsis: true,
+          dataIndex: "recommendTime",
+          key: "10",
+          align: "center",
+          customRender: ({ text, record }) => {
+            return record.recommendStatus? text || "-" : "-";
+          },
+        },   
+        {
+          title: "推荐人",
+          width: 100,
+          dataIndex: "recommendStatus",
+          key: "recommendStatus",
+          align: "center",
+          customRender: ({ text,record }) => {
+            switch (text) {
+              case 0:
+                return <span>-</span>;
+              case 1:
+                return state.userName;
+              default:
+                return <span>-</span>;
+            }
+          },
+        },
+        {
+          title: "操作",
+          width: 100,
+          dataIndex: "id",
+          key: "id",
+          fixed: "right",
+          align: "center",
+          slots: { customRender: "actions" },
+        },
+      ],
+      //列表表格
+      tableData1: [],
+      currentPage1: 1,
+      tableDataTotal1: -1,
+      pageSize1: 10,
+      pageSize: 10,
+      nameOrTeacherName:"",
+      name: "",
+      teacherName:"",
+      recommendBy:'',
+      recommendAid:'',
+      sysType1:"",      //内容分类
+      sysType2:"",
+      sysType3:"",
+      sysTypeId: undefined,
+      codeUrl: codeUrl,
+      selectedRowKeys:[],   //标题ID
+      caseTitleList:[],
+      selectedRow:[],       //选组的每一行数据
+      sysTypeTree: [], //内容类型
+        sysTypeMap:null
+    });
+
+    const route = useRoute();
+    console.log(route);
+    const router = useRouter();
+    console.log(router);
+    //内容分类
+    const getSysTypeMap = (code) => {
+      if(code=="")return
+      // console.log(store.state.sysTypeMap,'map集合');
+      return store.state.sysTypeMap.get(code)
+    }
+    getSysTypeMap()
+
+    // 渲染列表1操作
+    const getTableDate = async () => {
+      state.tableLoading = true;
+      console.log("我是点击搜索的数据", state.sysTypeId);
+      let res = await page({
+        nameOrTeacherName:state.nameOrTeacherName,
+        pageNum:state.currentPage1,
+        pageSize:state.pageSize1,
+        teacherName:state.teacherName,
+        sysTypeId: state.sysTypeId,
+        name:state.name,
+        recommendBy:state.recommend_by,
+        recommendAid:state.recommendAid,
+        sysType: state.sysTypeId,
+        sysType1:state.sysType1,
+        sysType2:state.sysType2,
+        sysType3:state.sysType3
+      });
+      const { records, total } = res.data.data.page;
+      const {count} = res.data.data
+      state.count = count
+      state.tableData1 = records;
+      state.tableDataTotal1 = total;
+      state.tableLoading = false;
+      console.log("state.tableData1", state.tableData1);
+      
+    };
+    // onMounted(()=>{
+    //   getTableDate();
+    // })
+    watch(() => state.count,(value) => {
+      // if(value>=3){
+      //   message.info('最多推荐三个')
+      // }
+      // getTableDate()
+      console.log(value,'新值');
+    })
+    getTableDate();
+    // 计算全选
+    // const rowSelection = computed(() => {
+    //   return {
+    //     selectedRowKeys: state.selectedRowKeys,
+    //     onChange: onSelectChange,
+    //   }
+    // });
+    
+    // //计算出来已选中状态
+    // const onSelectChange = (selectedRowKeys, selectedRow) => {
+    //   state.selectedRowKeys = selectedRowKeys
+    //   state.selectedRow = selectedRow
+
+    // };
+    //分页
+    const handelChangePage1 = (page, pageSize) => {
+      state.currentPage1 = page;
+      state.pageSize1 = pageSize;
+      getTableDate();
+    };
+    //搜索
+    const handleSearch1 = () => {
+      state.currentPage1 = 1
+      getTableDate();
+    };
+    const handleSearch = () =>{
+      state.currentPage1 = 1
+      getTableDate();
+    }
+    //重置
+    const handleRest1 = () => {
+      state.nameOrTeacherName = ''
+      state.sysTypeId = null;
+      getTableDate();
+    };
+
+    return {
+      ...toRefs(state),
+      sysTypeOptions,
+      // findClassFullName,
+      moment,
+      mode: "simple",
+      handelChangePage1,
+      handleSearch1,
+      handleSearch,
+      handleRest1,
+      checkPer,
+      checkOwner,
+      // rowSelection,
+      // onSelectChange,
+      status,
+      handleOper,
+      searchData,
+      recommends,
+      getSysTypeMap,
+      userInfo,
+      // names
+    };
+  },
+});
+</script>
+<style lang="scss" scoped>
+
+.grey{
+  color: gray;
+}
+:deep(.ant-table-cell-fix-right){
+  width: 100px !important;
+}
+.courseManage {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  .filter {
+    margin-left: 35px;
+    margin-right: 35px;
+    margin-top: 30px;
+    display: flex;
+    flex-wrap: wrap;
+
+    .filterItems {
+      width: 100%;
+      justify-content: space-between;
+      display: flex;
+      flex-wrap: wrap;
+      .pathnameInp {
+        margin-right: 20px;
+        margin-bottom: 20px;
+      }
+
+      .select {
+        margin-right: 20px;
+        margin-bottom: 20px;
+      }
+
+     
+
+      .btn {
+        padding: 0px 26px 0px 26px;
+        height: 38px;
+        background: #4ea6ff;
+        border-radius: 8px;
+        //border: 1px solid rgba(64, 158, 255, 1);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 14px;
+        flex-shrink: 0;
+        cursor: pointer;
+
+        .search {
+          background-size: 100%;
+        }
+
+        .btnText {
+          font-size: 14px;
+          font-weight: 400;
+          color: #ffffff;
+          line-height: 36px;
+          margin-left: 5px;
+        }
+      }
+
+      .btnn {
+        padding: 0px 26px 0px 26px;
+        height: 38px;
+        // background: #4ea6ff;
+        color: #388BE1;
+        border-radius: 8px;
+        border: 1px solid rgba(64, 158, 255, 1);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 14px;
+        flex-shrink: 0;
+        cursor: pointer;
+
+        .search {
+          background-size: 100%;
+        }
+
+        .btnText {
+          font-size: 14px;
+          font-weight: 400;
+          color: #388BE1;
+          line-height: 36px;
+          margin-left: 5px;
+        }
+      }
+
+      .btn1 {
+        .search {
+          width: 15px;
+          height: 17px;
+          background-image: url("../../assets/images/courseManage/search0.png");
+        }
+      }
+      .btn1:active {
+        background: #0982ff;
+      }
+      .btn2:active {
+        background: #0982ff;
+      }
+      .btn2 {
+        .search {
+          width: 16px;
+          height: 18px;
+          background-image: url("../../assets/images/courseManage/reset1.png");
+        }
+
+        .daochu {
+          width: 16px;
+          height: 18px;
+          background-image: url("../../assets/images/coursewareManage/export1.png");
+        }
+      }
+
+      .btn1 {
+        .search {
+          background-image: url("../../assets/images/courseManage/search0.png");
+        }
+
+        .btnText {
+          color: #ffffff;
+        }
+      }
+
+    }
+
+  }
+
+}
+
+
+.pa {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 20px;
+
+  .pagination {
+    margin-bottom: 20px;
+  }
+
+  .ant-pagination-item-link,
+  .ant-pagination-item,
+  .ant-select-selector,
+  .ant-pagination-options-quick-jumper input {
+    border-radius: 8px;
+  }
+}
+
+.ant-select-selector {
+  height: 100%;
+  border-radius: 8px;
+}
+
+.ant-upload.ant-upload-select-picture-card {
+  border: none;
+}
+
+
+</style>
+

src/views/courselibrary/CourseRecommended_Old.vue

@@ -0,0 +1,937 @@
+<!-- 课程推荐页面 -->
+<template>
+  <div class="recommend">
+    <!-- 搜索框及按钮 -->
+    <div class="filter">
+      <div class="filterItems">
+        <div class="select">
+          <a-input v-model:value="searchData.recommendName" style="width: 106px; height: 40px; border-radius: 5px"
+            placeholder="请输入姓名" />
+        </div>
+        <div class="select">
+          <div class="select addTimeBox">
+            <div class="addTime"><img src="../../assets/images/courseManage/time.png" class="timePng"></div>
+            <a-range-picker v-model:value="recommendTimeList" style="width: 354px" @change="timeChange"
+              format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" separator="至" :placeholder="['开始时间', '      结束时间']" />
+          </div>
+        </div>
+        <div style="display: flex; margin-bottom: 20px">
+          <div class="btn btn1" @click="getList(1)">
+            <div class="search"></div>
+            <div class="btnText">搜索</div>
+          </div>
+          <div class="btn btn2" @click="handleRest" style="width: 105px">
+            <div class="search"></div>
+            <div class="btnText">重置</div>
+          </div>
+        </div>
+      </div>
+      <div class="btns">
+        <div class="btn btn3" @click="handleNew">
+          <div class="search"></div>
+          <div class="btnText">发起推荐</div>
+        </div>
+      </div>
+    </div>
+    <!-- 搜索框及按钮 -->
+    <!-- 表格 -->
+    <div class="tableBox">
+      <a-table style="border: 1px solid #f2f6fe" :columns="column" :data-source="state.data" :loading="!loading"
+        :scroll="{ x: 1100 }" :pagination="false">
+        <template #operation="{ record }">
+          <a-space style="padding-right: 10px">
+            <a-button @click="downloadInfo(record)" type="link">信息下载
+            </a-button>
+            <a-button
+              @click="() => handleLook(record, String(record.courseform))"
+              type="link"
+              >查看
+            </a-button>
+            <a-button @click="() => handleOper(record, 'withdraw', record.pushProgress)" type="link">
+              {{ state.status[record.pushProgress] }}
+            </a-button>
+            <a-button @click="handleOper(record, 'del')" danger type="link">删除
+            </a-button>
+          </a-space>
+        </template>
+      </a-table>
+    </div>
+    <div class="modalMain">
+        <div class="onlinemanage" :style="{ display: om_1 ? 'block' : 'none' }">
+          <div class="om_main">
+            <div class="om_body">
+              <div class="b_sub">
+                <div class="b_title">课程：{{ newCourseName }}</div>
+                <div class="bs_type" style="margin-left: 20px">类型：</div>
+                <div class="bs_right">{{ faceType }}</div>
+                <div class="bs_left">内容分类：</div>
+                <div class="bs_right">{{ faceClassification }}</div>
+                <div class="bs_left">状态：</div>
+                <div class="bs_right">
+                  {{ faceStatus == 1 ? "已启用" : "已停用" }}
+                </div>
+              </div>
+              <a-tabs
+                class="b_menu"
+                v-model:activeKey="faceManageTab"
+                size="large"
+                :tabBarStyle="{ marginLeft: '10px' }"
+                @change="faceManageChange"
+              >
+              
+                <a-tab-pane key="1" tab="学习记录">
+                  <div class="b_menunav">
+                    <div class="bm_select">
+                      <a-select
+                        class="select"
+                        ref="select"
+                        placeholder="请选择状态"
+                        v-model:value="gl_selectV2"
+                        style="width: 200px"
+                        :options="options11"
+                        allowClear
+                        @focus="focus"
+                        @change="handleChange"
+                      >
+                      
+                      </a-select>
+                    </div>
+                    <div class="bm_input">
+                      <a-input
+                        v-model:value="gl_inputV2"
+                        style="width: 200px; height: 40px; border-radius: 8px"
+                        placeholder="姓名"
+                      />
+                    </div>
+                    <div class="bm_btn">
+                      <div class="btn btn1" @click="handleSearchTable3">
+                        <div class="search"></div>
+                        <div class="btnText">搜索</div>
+                      </div>
+                      <div class="btn btn2" @click="reseatSearchTable3">
+                        <div class="search"></div>
+                        <div class="btnText">重置</div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="bm_table" style="margin-bottom: 20px">
+                    <a-table
+                      :columns="columns2"
+                      :data-source="tableData3"
+                      :loading="manageStuLoading"
+                      :pagination="false"
+                    >
+                      <template #bodyCell="{ column }">
+                        <template v-if="column.key === 'opacation'">
+                          <a @click="ckxq_hs">查看详情</a>
+                        </template>
+                      </template>
+                    </a-table>
+                    <div class="tableBox" style="margin-top: 50px">
+                      <div class="pa">
+                        <a-pagination
+                          :showSizeChanger="false"
+                          showQuickJumper="true"
+                          hideOnSinglePage="true"
+                          :pageSize="pageSize222"
+                          :current="currentPage222"
+                          :total="tableDataTotal222"
+                          class="pagination"
+                          @change="handelChangePage222"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </a-tab-pane>
+              </a-tabs>
+            </div>
+          </div>
+        </div>
+    </div>
+    <div class="pa" style="display: flex; justify-content: flex-end; padding: 0 38px">
+      <a-pagination show-quick-jumper :pageSize="searchData.pageSize" :current="searchData.pageIndex" :total="state.total"
+        class="pagination" @change="handelChangePage" show-size-changer />
+    </div>
+    <RecommendedCourse v-model:visible="newNext" :title="推荐课程"></RecommendedCourse>
+    <SeeModal
+      :visible="lookCourseModal"
+      :detail="faceDetailObj"
+      @cancel="ft_exit_see"
+    />
+  </div>
+</template>
+<script setup lang="jsx">
+import { ref, onMounted, reactive, watch, toRefs } from "vue";
+import { Form, message,} from "ant-design-vue";
+import { boeRequest } from "@/api/request";
+import useDownload from '@/hooks/useDownload'
+import {
+  RECOMMEND_PAGE,
+  deleteResearch,
+  caseInfoDownload,
+  rePushOrWithdraw,
+} from "@/api/case";
+import dialog from "@/utils/dialog";
+import RecommendedCourse from "@/components/courserecommended/RecommendedCourse.vue";
+import { checkMenu } from "@/utils/utils";
+import SeeModal from "@/components/courserecommended/CourseRecommended.vue";
+const column = [
+  {
+    title: "推荐人",
+    dataIndex: "recommendBy",
+    key: "recommendBy",
+    width: "10%",
+    align: "center",
+    ellipsis: true,
+    className: "h",
+    customRender: ({ text }) => {
+      return text ? text : "-";
+    },
+  },
+  {
+    title: "列表包名称",
+    dataIndex: "listPageName",
+    key: "listPageName",
+    width: "20%",
+    align: "center",
+    className: "h",
+    customRender: ({ text }) => {
+      return text ? text : "-";
+    },
+  },
+  {
+    title: "推荐时间",
+    dataIndex: "recommendTime",
+    key: "recommendTime",
+    width: "20%",
+    align: "center",
+    className: "h",
+    customRender: ({ text }) => {
+      return text ? text : "-";
+    },
+  },
+  {
+    title: "课程数",
+    dataIndex: "courseCount",
+    key: "courseCount",
+    width: "10%",
+    align: "center",
+    className: "h",
+    customRender: ({ text }) => {
+      return text ? text : "-";
+    },
+  },
+  {
+    title: "用户数",
+    dataIndex: "userCount",
+    key: "userCount",
+    width: "10%",
+    align: "center",
+    className: "h",
+    customRender: ({ text }) => {
+      return text ? text : "-";
+    },
+  },
+  {
+    title: "推送进度",
+    dataIndex: "pushProgress",
+    key: "pushProgress",
+    width: "15%",
+    align: "center",
+    className: "h",
+    customRender: ({ text }) => {
+      switch (text) {
+        case 1:
+          return <span>推送中</span>;
+        case 2:
+          return <span>推送中</span>;
+        case 3:
+          return <span>已完成</span>;
+        case 4:
+          return <span style={{ color: "red" }}>推送失败</span>;
+        case 5:
+          return <span>推送撤回</span>;
+        default:
+          return <span>-</span>;
+      }
+    },
+  },
+  {
+    title: "查看率",
+    dataIndex: "viewRate",
+    key: "viewRate",
+    width: "10%",
+    align: "center",
+    className: "h",
+    customRender: ({ text }) => {
+      return text ? text : "0%";
+    },
+  },
+  {
+    title: "完成比",
+    dataIndex: "viewRate",
+    key: "viewRate",
+    width: "10%",
+    align: "center",
+    className: "h",
+    customRender: ({ text }) => {
+      return text ? text : "0%";
+    },
+  },
+];
+//查看
+
+    // 预览弹框 开启和关闭
+    const ft_exit_see = () => {
+      lookCourseModal.value = 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;
+    //   // });
+      lookCourseModal.value = true;
+    //   // item.attach = item.attach == "" ? [] : item.attach.split(",");
+    //   // state.faceDetailObj = item;
+    //   // console.log("获取查看信息", item);
+    };
+const authenticationColumn = {
+  title: "操作",
+  width: "30%",
+  className: "h",
+  dataIndex: "id",
+  key: "id",
+  fixed: "right",
+  align: "center",
+  slots: { customRender: "operation" },
+}
+const lookCourseModal = ref(false)
+const faceDetailObj = ref({})
+
+const state = reactive({
+  data: [],
+  total: 0,
+  status: {
+    1: "撤回",
+    2: "撤回",
+    3: "撤回",
+    4: "重新推送",
+    5: "重新推送",
+  },
+  
+});
+// 查询数据
+const searchData = ref({
+  pageIndex: 1,
+  pageSize: 10,
+  recommendName: "",
+  recommendTimeList: [],
+});
+const newNext = ref(false);
+const recommendTimeList = ref([]);
+const loading = ref(false);
+watch(newNext, (value) => {
+  if (!value) {
+    searchData.value.pageIndex = 1;
+    getList()
+  }
+})
+
+const getList = (num) => {
+  if (num === 1) searchData.value.pageIndex = 1;
+  boeRequest(RECOMMEND_PAGE, searchData.value)
+    .then((res) => {
+      loading.value = true;
+      state.data = res?.result?.list || [];
+      state.total = res?.result?.count || 0;
+    })
+    .catch(() => {
+      loading.value = false;
+    });
+};
+
+// 获取列表数据
+getList();
+
+onMounted(() => {
+  // 是否需要触发新建弹框
+  let str = location.href;
+  let isOpen = str.includes("openCreate=true");
+  if (isOpen) {
+    newNext.value = true;
+  }
+  column.push(authenticationColumn)
+});
+
+const { resetFields } = Form.useForm(searchData, {});
+
+const handle = (record) => ({
+  withdraw: async () => {
+    try {
+      // editReleaseStatus({ assessmentId: record.id, releaseStatus: 1 });
+      await rePushOrWithdraw({ casesRecommendId: record.id });
+      getList();
+    } catch (error) {
+      message.info("推送失败！");
+    }
+  },
+  del: async () => {
+    loading.value = true;
+    await deleteResearch({ id: record.id })
+      .then(() => {
+        message.info("删除成功！");
+        getList();
+      })
+      .catch(() => (loading.value = false));
+  },
+});
+
+const handleMsg = {
+  del: "你确定要删除这条记录吗？",
+  withdraw1: "你确认要撤回此次推送吗？",
+  withdraw2: "你确认要撤回此次推送吗？",
+  withdraw3: "你确认要撤回此次推送吗？",
+  withdraw4: "您确定要重新推送此案例吗？",
+  withdraw5: "您确定要重新推送此案例吗？",
+};
+
+function handleOper(record, type, status = '') {
+  dialog({ content: handleMsg[status ? type + status : type], ok: handle(record)[type] });
+}
+// 信息下载
+const downloadInfo = (record) => {
+  try {
+    useDownload('/xboe/m/boe/cases/recommend/info_download', { casesRecommendId: record.id }, '案例信息')
+  } catch (error) {
+    console.log(error);
+  }
+};
+
+const handelChangePage = (page, pageSize) => {
+  loading.value = false;
+  searchData.value.pageSize = pageSize;
+  searchData.value.pageIndex = page;
+  getList();
+};
+
+function timeChange(time, timeStr) {
+  searchData.value.recommendTimeList = time ? time : [];
+}
+
+const handleRest = () => {
+  recommendTimeList.value = [];
+  resetFields();
+  getList();
+};
+
+const handleNew = () => {
+  newNext.value = true;
+};
+
+</script>
+<style lang="scss" scoped>
+.clearfix:before,
+.clearfix:after {
+  content: " ";
+  display: block;
+  clear: both;
+}
+
+.addTimeBox {
+  position: relative;
+  display: flex;
+  align-items: center;
+  :deep(.ant-picker-range-separator){
+    padding: 0;
+    margin-right: 30px;
+  }
+  .addTime {
+    position: absolute;
+    z-index: 10;
+    margin-left: 10px;
+    color: rgba(0, 0, 0, 0.4);
+    .timePng{
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  .ant-picker {
+    padding-left: 50px;
+  }
+
+  .ant-picker-range .ant-picker-active-bar {
+    margin-left: 85px;
+  }
+}
+
+.out {
+  //display: flex;
+  display: block;
+  position: absolute;
+  width: 680px;
+  // height: 525px;
+  background-color: #fff;
+  box-shadow: 0 0 10px rgba(118, 136, 166, 0.21);
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+
+  .top {
+    width: 100%;
+    height: 68px;
+
+    background: linear-gradient(rgba(78, 166, 255, 0.2) 0%,
+        rgba(78, 166, 255, 0) 100%);
+    display: flex;
+    align-items: center;
+
+    .topimg {
+      width: 18px;
+      height: 18px;
+      margin-left: 27px;
+    }
+
+    .topc {
+      color: #000000;
+      font-size: 16px;
+      margin-left: 8px;
+    }
+  }
+
+  .mid {
+    width: 100%;
+    height: 100%;
+    background-color: #fff;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .d {
+      // margin-top: 8px;
+      // color: #ff4e4e;
+      margin-left: -5px;
+    }
+
+    .name {
+      width: 78%;
+      // background-color: lightcoral;
+      display: flex;
+      margin-top: 20px;
+      align-items: center;
+      height: 40px;
+      // border: 1px solid black;
+
+      .inname {
+        color: #6f6f6f;
+        font-size: 14px;
+        margin-left: 7px;
+      }
+
+      .in {
+        margin-left: 14px;
+        width: 81%;
+
+        .ant-input {
+          border-radius: 5px;
+          // height: 120%;
+          width: 100%;
+          height: 30px;
+        }
+
+        .showcount {
+          position: absolute;
+          right: 10px;
+          color: #c7cbd2;
+          bottom: 5px;
+        }
+      }
+    }
+
+    .btn {
+      width: 33%;
+      margin-top: 30px;
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 30px;
+
+      .samtn {
+        width: 100px;
+        height: 40px;
+        font-size: 14px;
+        border: 1px solid #4ea6ff;
+        border-radius: 8px;
+        cursor: pointer;
+      }
+
+      .btn1 {
+        background-color: #fff;
+        color: #4ea6ff;
+      }
+
+      .btn2 {
+        margin-left: 10px;
+        background-color: #4ea6ff;
+        color: #fff;
+      }
+    }
+  }
+}
+
+.recommend {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  .filter {
+    margin-left: 38px;
+    margin-right: 38px;
+    margin-top: 30px;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+
+    .filterItems {
+      display: flex;
+      flex-wrap: wrap;
+
+      .select {
+        margin-right: 20px;
+        margin-bottom: 20px;
+      }
+
+      .btn {
+        padding: 0 26px 0 26px;
+        height: 38px;
+        background: #4ea6ff;
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 14px;
+        flex-shrink: 0;
+        cursor: pointer;
+
+        .search {
+          background-size: 100%;
+        }
+
+        .btnText {
+          font-size: 14px;
+          font-weight: 400;
+          color: #ffffff;
+          line-height: 36px;
+          margin-left: 5px;
+        }
+      }
+
+      .btnn {
+        padding: 0 26px 0 26px;
+        height: 38px;
+        background: #4ea6ff;
+        border-radius: 8px;
+        border: 1px solid rgba(64, 158, 255, 1);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 14px;
+        flex-shrink: 0;
+        cursor: pointer;
+
+        .search {
+          background-size: 100%;
+        }
+
+        .btnText {
+          font-size: 14px;
+          font-weight: 400;
+          color: #fff;
+          line-height: 36px;
+          margin-left: 5px;
+        }
+      }
+
+      .btn1 {
+        .search {
+          width: 15px;
+          height: 17px;
+          background-image: url("../../assets/images/courseManage/search0.png");
+        }
+      }
+
+      .btn2 {
+        .search {
+          width: 16px;
+          height: 18px;
+          background-image: url("../../assets/images/courseManage/reset0.png");
+        }
+      }
+
+      // .btn1:hover {
+      //   background: rgba(64, 158, 255, 0.76);
+
+      //   .search {
+      //     background-image: url("../../assets/images/courseManage/search0.png");
+      //   }
+
+      //   .btnText {
+      //     color: #ffffff;
+      //   }
+      // }
+
+      .btn1:active {
+        background: #0982ff;
+      }
+
+      // .btn2:hover {
+      //   background: rgba(64, 158, 255, 0.1);
+      // }
+
+      .btn2:active {
+        background: rgba(64, 158, 255, 0.2);
+      }
+    }
+
+    .btns {
+      display: flex;
+
+      .btn {
+        padding: 0 26px;
+        height: 38px;
+        background: #4ea6ff;
+        border-radius: 8px;
+        //border: 1px solid rgba(64, 158, 255, 1);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 14px;
+        flex-shrink: 0;
+        cursor: pointer;
+
+        .search {
+          background-size: 100%;
+        }
+
+        .btnText {
+          font-size: 14px;
+          font-weight: 400;
+          color: #ffffff;
+          line-height: 36px;
+          margin-left: 5px;
+        }
+      }
+
+      .btn3 {
+        margin-right: 0;
+
+        .search {
+          width: 17px;
+          height: 18px;
+          background-image: url("../../assets/images/courseManage/add0.png");
+        }
+      }
+
+      // .btn3:hover {
+      //   background: rgba(64, 158, 255, 0.76);
+
+      //   .search {
+      //     background-image: url("../../assets/images/courseManage/add0.png");
+      //   }
+
+      //   .btnText {
+      //     color: #ffffff;
+      //   }
+      // }
+
+      .btn3:active {
+        background: #0982ff;
+      }
+    }
+  }
+
+  .tableBox {
+    margin: 20px 38px 30px;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+
+    th.ant-table-cell {
+      background-color: #eff4fc !important;
+      text-align: center;
+      color: #999ba3;
+    }
+
+    td.ant-table-cell {
+      text-align: center;
+    }
+  }
+
+  .pa {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    margin-bottom: 20px;
+
+    .pagination {
+      margin-bottom: 20px;
+    }
+
+    .ant-pagination-item-link,
+    .ant-pagination-item,
+    .ant-select-selector,
+    .ant-pagination-options-quick-jumper input {
+      border-radius: 8px;
+    }
+  }
+
+  .unout {
+    display: none;
+  }
+
+  .operation {
+    display: flex;
+    justify-content: right;
+
+    .fb {
+      display: flex;
+      margin-right: 20px;
+
+      .jc {
+        color: #4ea6ff;
+        font-size: 14px;
+        margin-left: 20px;
+        white-space: nowrap;
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.DelModal {
+  .ant-modal {
+    .ant-modal-content {
+      width: 424px !important;
+
+      .ant-modal-body {
+        .delete {
+          z-index: 9999;
+          width: 424px;
+          background: #ffffff;
+          box-shadow: 0 1px 35px 0 rgba(118, 136, 166, 0.21);
+          border-radius: 4px;
+          position: absolute;
+          left: 50%;
+          top: 10%;
+          transform: translate(-50%, -50%);
+
+          .del_header {
+            position: absolute;
+            width: calc(100%);
+            height: 40px;
+            background: linear-gradient(rgba(78, 166, 255, 0.2) 0%,
+                rgba(78, 166, 255, 0) 100%);
+          }
+
+          .del_main {
+            width: 100%;
+            position: relative;
+
+            .header {
+              display: flex;
+              align-items: center;
+              padding-top: 20px;
+              padding-left: 26px;
+              font-size: 16px;
+
+              .del-icon {
+                width: 16px;
+                height: 16px;
+                position: relative;
+                margin-right: 10px;
+
+                img {
+                  width: 100%;
+                  height: 100%;
+                  position: absolute;
+                  top: 0;
+                  left: 0;
+                  background-size: 100% 100%;
+                }
+              }
+
+              .icon {
+                width: 16px;
+                height: 16px;
+                margin-right: 10px;
+                background-image: url(@/assets/images/coursewareManage/QR.png);
+                background-size: 100% 100%;
+              }
+
+              .close_exit {
+                position: absolute;
+                right: 42px;
+                cursor: pointer;
+                width: 20px;
+                height: 20px;
+                background-image: url(@/assets/images/coursewareManage/close.png);
+                background-size: 100% 100%;
+              }
+            }
+
+            .body {
+              width: 100%;
+              margin: 34px auto 56px auto;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+            }
+
+            .del_btnbox {
+              display: flex;
+              margin: 30px auto;
+              justify-content: center;
+
+              .del_btn {
+                width: 100px;
+                height: 40px;
+                background: rgba(64, 158, 255, 0);
+                border-radius: 8px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                margin-right: 14px;
+                flex-shrink: 0;
+                cursor: pointer;
+
+                .btnText {
+                  font-size: 14px;
+                  font-weight: 400;
+                  line-height: 40px;
+                }
+              }
+
+              .btn1 {
+                border: 1px solid rgba(64, 158, 255, 1);
+                color: #4ea6ff;
+              }
+
+              .btn2 {
+                background-color: #4ea6ff;
+                color: #ffffff;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>