From 35d98f79c686bc03536f098fc68e3cd60e3397ef Mon Sep 17 00:00:00 2001
From: zhangsir <2207038757@qq.com>
Date: Wed, 27 Sep 2023 11:38:26 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=BB=84=E4=BB=B6=E4=BD=8D?=
 =?UTF-8?q?=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../courserecommended/AddCourse.vue           | 564 ++++++++++++++++++
 .../courserecommended/RecommendedCourse.vue   | 209 +++++++
 2 files changed, 773 insertions(+)
 create mode 100644 src/components/courserecommended/AddCourse.vue
 create mode 100644 src/components/courserecommended/RecommendedCourse.vue

diff --git a/src/components/courserecommended/AddCourse.vue b/src/components/courserecommended/AddCourse.vue
new file mode 100644
index 00000000..96b5fa47
--- /dev/null
+++ b/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: 200px">
+        <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 > 6 ? item.title.slice(0, 6) + '...' : 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 > 6 ? item.title.slice(0, 6) + '...' : 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 {
+        min-width: 64px;
+        height: 24px;
+        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;
+
+        .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>
diff --git a/src/components/courserecommended/RecommendedCourse.vue b/src/components/courserecommended/RecommendedCourse.vue
new file mode 100644
index 00000000..fbf629f1
--- /dev/null
+++ b/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:"",      //推荐标题
+  sellIntro:"",     //推荐组织
+  sellForm:"",      //推荐理由
+})
+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>