demand 在线课对接

src/components/drawers/AddOnline.vue

@@ -11,79 +11,28 @@
   >
     <div class="drawerMain">
       <div class="header">
-        <div v-if="taskIndex>=0" class="headerTitle">编辑在线</div>
+        <div class="headerTitle">{{ taskIndex === -1 ? "编辑" : "添加" }}任务</div>
-        <div v-else class="headerTitle">添加在线</div>
+        <img style="width: 29px; height: 29px; cursor: pointer" src="../../assets/images/basicinfo/close.png"
-        <img
+             @click="closeDrawer"/>
-            style="width: 29px; height: 29px; cursor: pointer"
-            src="../../assets/images/basicinfo/close.png"
-            @click="closeDrawer"
-        />
       </div>
-      <div class="contentMain">
-        <div class="main_items">
-          <div class="mi_ipts">
-            <div class="mii_ipt">
-              <div class="ipt_name"></div>
-              <div class="fi_input">
-                <a-input
-                    v-model:value="params.keyword"
-                    style="
-                    width: 280px;
-                    height: 40px;
-                    border-radius: 8px;
-                    padding-right: 49px;
-                  "
-                    placeholder="请输入课程名称"
-                    maxlength="20"
-                />
-                <div class="inp_num" style="position: absolute; right: 7px">
-                  <span style="color: #c7cbd2"> </span>
-                </div>
-              </div>
-            </div>
-            <div class="mii_ipt">
-              <div class="ipt_name">课程分类：</div>
-              <div class="select">
-                <a-select
-                    v-model:value="params.type"
-                    dropdownClassName="dropdown-style"
-                    style="width: 240px"
-                    placeholder="请选择课程分类"
-                    :options="categoryOption"
-                    allowClear
-                />
-              </div>
-            </div>
-          </div>
-          <div class="mi_btns">
-            <div class="btn btn1" @click="fetch()">
-              <div class="search"></div>
-              <div class="btnText">搜索</div>
-            </div>
-            <div class="btn btn2" @click="reset()">
-              <div class="search"></div>
-              <div class="btnText">重置</div>
-            </div>
-          </div>
-        </div>
-        <div class="main_table">
-          <div>
       <div>
+        <div class="contentMain" style="padding:20px">
+          <CreateOnline>
+            <a-button type="primary" style="border-radius: 4px">{{
+                taskIndex === -1 ? '选择/新建课程' : '重新选择'
+              }}
+            </a-button>
+          </CreateOnline>
+        </div>
+      </div>
+      <div class="drawerMain">
         <a-table
-                  :customRow="customRow"
-                  class="ant-table-striped"
-                  :row-class-name="(_, index) => (index % 2 === 1 ? 'table-striped' : null)"
-                  row-key="id"
             :columns="columns"
-                  :data-source="data"
+            :data-source="selectsData"
-                  :loading="loading"
+            row-key="id"
-                  :pagination="pagination"
+            :pagination="false"
-                  :row-selection="rowSelection"
         />
       </div>
-          </div>
-        </div>
-      </div>
       <div class="main_btns">
         <button class="btn1" @click="closeDrawer">取消</button>
         <button class="btn2" @click="confirm">确定</button>
@@ -92,10 +41,9 @@
   </a-drawer>
 </template>
 <script setup>
-import {computed, defineEmits, defineProps, ref, watch} from "vue";
+import {defineEmits, defineProps, ref, watch} from "vue";
-import {useBoeApiPage} from "@/api/request";
-import {ONLINE_PAGE} from "@/api/ThirdApi";
 import {message} from "ant-design-vue";
+import CreateOnline from "@/components/drawers/CreateOnline.vue";
 
 const props = defineProps({
   type: Number,
@@ -107,146 +55,61 @@ const rowSelectKeys = ref([]);
 const selectsData = ref([]);
 
 const emit = defineEmits({})
-
-watch(taskIndex, () => {
-  if (taskIndex.value >= 0) {
-    rowSelectKeys.value = [props.taskList[taskIndex.value].courseId]
-    selectsData.value = data.value.find(t => t.id === props.taskList[taskIndex.value].courseId) || {}
-  }
-})
-
-const categoryOption = ref([
-  {
-    value: 10,
-    label: "微课",
-  },
-  {
-    value: 20,
-    label: "录播课",
-  },
-  {
-    value: 21,
-    label: "直播",
-  },
-  {
-    value: 30,
-    label: "面授",
-  },
-  {
-    value: 90,
-    label: "混合",
-  },
-
-])
-
 const columns = ref([
   {
-    title: "名称",
+    title: "课程名称",
     dataIndex: "name",
     key: "name",
-    width: "30%",
+    width: "200px",
     ellipsis: true,
   },
   {
     title: "课程分类",
     dataIndex: "type",
     key: "type",
-    width: "15%",
+    width: "100px",
     align: "center",
-    ellipsis: true,
     customRender: ({record: {type}}) => ({10: '微课', 21: '直播', 20: '录播', 30: '面授', 90: '混合'}[type]),
   },
   {
     title: "创建人",
-    dataIndex: "sysCreateBy",
+    dataIndex: "authorName",
-    key: "sysCreateBy",
+    key: "authorName",
-    width: "15%x",
+    width: "100px",
     align: "center",
-    ellipsis: true,
   },
   {
     title: "时长",
-    dataIndex: "studyTime",
+    dataIndex: "authorName",
-    key: "studyTime",
+    key: "authorName",
-    width: "15%x",
+    width: "80px",
     align: "center",
-    ellipsis: true,
   },
   {
     title: "发布时间",
     dataIndex: "publishTime",
     key: "publishTime",
-    width: "25%",
+    width: "100px",
     align: "center",
-    ellipsis: true,
   },
 ])
-const params = ref({
+watch(taskIndex, () => {
-  keyword: '',
+  if (taskIndex.value >= 0) {
-  pageIndex: 1,
+    rowSelectKeys.value = []
-  pageSize: 10,
-  orderAsc: true,
-  publish: true,
-  contenttype: 20
-})
-
-const {data, loading, total, fetch} = useBoeApiPage(ONLINE_PAGE, params.value, {
-  init: false,
-  result: res => res.result.list,
-  totalPage: res => res.result.totalPages,
-  total: res => res.result.count
-})
-
-
-const pagination = computed(() => ({
-  total: total.value,
-  showSizeChanger: false,
-  current: params.value.pageIndex,
-  pageSize: params.value.pageSize,
-  onChange: changePagination,
-}));
-
-const customRow = (record) => ({
-  onClick: () => {
-    rowSelectKeys.value = [record.id]
-    selectsData.value = [record]
   }
 })
 
-const changePagination = (e) => {
-  params.value.pageIndex = e;
-  fetch()
-};
-const rowSelection = computed(() => ({
-  type: 'radio',
-  columnWidth: 20,
-  selectedRowKeys: rowSelectKeys.value,
-  onChange: onSelectChange,
-  preserveSelectedRowKeys: true,
-}));
-
-function onSelectChange(e, l) {
-  rowSelectKeys.value = e;
-  selectsData.value = l;
-}
-
-function reset() {
-  rowSelectKeys.value = [];
-  selectsData.value = [];
-  params.value.pageIndex = 1
-  params.value.keyword = ''
-  fetch()
-}
 
 const closeDrawer = () => {
   visible.value = false
   taskIndex.value = -1
-  reset()
+  selectsData.value = []
+  rowSelectKeys.value = []
 };
 
 function confirm() {
   if (!selectsData.value.length || !rowSelectKeys.value.length) {
-    message.warning("请选择案例！");
+    message.warning("请选择在线课！");
     return
   }
   if (taskIndex.value === -1) {
@@ -267,14 +130,20 @@ function confirm() {
   closeDrawer()
 }
 
+function selectCourse(id, name) {
+  rowSelectKeys.value = [id]
+  selectsData.value = [{id, name}]
+}
+
 function openDrawer(i, row) {
-  row && (rowSelectKeys.value = [row.info]);
+  window.selectCourse = selectCourse
-  row && (selectsData.value = [{name: row.name, id: row.courseId}]);
+  row && (rowSelectKeys.value = [row.courseId]);
+  row && (selectsData.value = [row.info]);
   (i >= 0) && (taskIndex.value = i);
   visible.value = true
 }
 
-defineExpose({openDrawer})
+defineExpose({openDrawer, selectCourse})
 </script>
 <style lang="scss">
 

src/components/drawers/CreateOnline.vue

@@ -0,0 +1,394 @@
+<template>
+  <div @click="openModal">
+    <slot></slot>
+  </div>
+  <a-modal
+      :visible="visible"
+      :footer="null"
+      :centered="true"
+      :maskClosable="false"
+      width="679"
+      height="437"
+      @cancel="closeModal"
+  >
+    <iframe
+        id="iframe"
+        style="width: 800px; height: 500px"
+        :src="iframeUrl + '/course/manages?f=choose'"
+        name="myframe"
+        security="restricted"
+        sandbox="allow-forms allow-scripts allow-same-origin allow-popups"
+    ></iframe>
+  </a-modal>
+</template>
+<script setup>
+import {ref} from "vue";
+import {iframeUrl} from "@/api/method";
+
+const visible = ref(false)
+
+function openModal() {
+  window.selectCourse(1,'测试测试测试测试测试测试')
+  visible.value = true
+}
+
+function closeModal() {
+  visible.value = false
+}
+
+</script>
+<style lang="scss">
+
+
+.ant-table-striped :deep(.table-striped) td {
+  background-color: #fafafa !important;
+}
+
+.addonlineDrawer {
+  .drawerMain {
+    .header {
+      height: 73px;
+      border-bottom: 1px solid #e8e8e8;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-shrink: 0;
+
+      .headerTitle {
+        font-size: 18px;
+        font-weight: 600;
+        color: #333333;
+        line-height: 25px;
+        margin-left: 24px;
+      }
+    }
+
+    .contentMain {
+      padding-right: 12px;
+
+      .main_items {
+        display: flex;
+
+        margin-top: 32px;
+        margin-bottom: 12px;
+        flex-wrap: wrap;
+
+        .mi_ipts {
+          display: flex;
+          margin-bottom: 20px;
+
+          .mii_ipt {
+            display: flex;
+            align-items: center;
+            margin-right: 24px;
+
+            .ipt_name {
+              white-space: nowrap;
+            }
+          }
+        }
+
+        .mi_btns {
+          display: flex;
+          margin-left: 38px;
+          margin-bottom: 20px;
+          cursor: pointer;
+
+          .btn {
+            padding: 0px 26px 0px 26px;
+            height: 38px;
+            border-radius: 8px;
+            border: 1px solid rgba(64, 158, 255, 1);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-left: 14px;
+            flex-shrink: 0;
+
+            .search {
+              background-size: 100%;
+            }
+
+            .btnText {
+              font-size: 14px;
+              font-weight: 400;
+              line-height: 36px;
+              margin-left: 5px;
+            }
+          }
+
+          .btn1 {
+            background: rgb(64, 158, 255);
+
+            .search {
+              width: 15px;
+              height: 17px;
+              background-image: url("@/assets/images/coursewareManage/search0.png");
+            }
+
+            .btnText {
+              color: rgb(255, 255, 255);
+            }
+          }
+
+          .btn2 {
+            background: rgb(255, 255, 255);
+
+            .search {
+              width: 15px;
+              height: 17px;
+              background-image: url("@/assets/images/coursewareManage/reset1.png");
+            }
+
+            .btnText {
+              color: rgb(64, 158, 255);
+            }
+          }
+
+          .btn1:hover {
+            background: rgb(255, 255, 255);
+
+            .search {
+              background-image: url("@/assets/images/courseManage/search1.png");
+            }
+
+            .btnText {
+              color: #4ea6ff;
+            }
+          }
+
+          .btn2:hover {
+            background: rgba(64, 158, 255, 1);
+
+            .search {
+              background-image: url("@/assets/images/courseManage/reset0.png");
+            }
+
+            .btnText {
+              color: #ffffff;
+            }
+          }
+        }
+      }
+
+      .main_notice {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 3px;
+        height: 40px;
+        background-color: #e9f6fe;
+
+        .mntc_left {
+          display: flex;
+          align-items: center;
+
+          .notice_icon {
+            width: 14px;
+            height: 14px;
+            margin-right: 9px;
+            margin-left: 9px;
+            background-image: url(@/assets/images/coursewareManage/gan.png);
+            background-size: 100% 100%;
+          }
+        }
+
+        .mntc_right {
+          cursor: pointer;
+        }
+      }
+
+      .main_table {
+        position: relative;
+        padding-bottom: 80px;
+
+        .ant-checkbox-wrapper {
+          align-items: center;
+          margin-top: -2px;
+        }
+
+        .ant-table-selection-column {
+          padding: 0px !important;
+          padding-left: 5px !important;
+        }
+
+        .ant-table-thead > tr > th {
+          background-color: rgba(239, 244, 252, 1);
+        }
+
+        th.h {
+          background-color: #eff4fc !important;
+        }
+
+        .ant-table-tbody
+        > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
+        > td {
+          background: #f6f9fd;
+        }
+
+        .pa {
+          left: 0;
+          width: 100%;
+          display: flex;
+          justify-content: center;
+          position: absolute;
+          bottom: 20px;
+        }
+      }
+    }
+
+    .main_btns {
+      height: 72px;
+      width: 100%;
+      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: 100px;
+        height: 40px;
+        border: 1px solid #4ea6ff;
+        border-radius: 8px;
+        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;
+      }
+    }
+  }
+}
+
+.changeModal {
+  .ant-modal {
+    width: 549px !important;
+    height: 245px !important;
+
+    .ant-modal-close-x {
+      display: none;
+    }
+
+    .ant-modal-content {
+      width: 549px !important;
+      height: 245px !important;
+
+      .ant-modal-body {
+        padding: 0 !important;
+        width: 549px !important;
+        height: 245px !important;
+
+        .con {
+          // background-color: #bfa;
+          width: 100%;
+          height: 100%;
+
+          .header {
+            width: 100%;
+            display: flex;
+            height: 68px;
+            position: relative;
+            justify-content: center;
+
+            background: linear-gradient(
+                    rgba(78, 166, 255, 0.2) 0%,
+                    rgba(78, 166, 255, 0) 100%
+            );
+
+            .inhe {
+              width: 80%;
+              height: 100%;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .mod {
+                left: 30px;
+                top: 27px;
+                position: absolute;
+                width: 18px;
+                height: 17px;
+                background-image: url(../../assets/images/leveladd/mod.png);
+              }
+
+              .tz {
+                color: #000000;
+                font-weight: 400;
+                font-size: 16px;
+              }
+
+              .mg {
+                width: 20px;
+                height: 20px;
+                background-image: url(../../assets/images/basicinfo/close22.png);
+                background-size: 100% 100%;
+                cursor: pointer;
+              }
+            }
+          }
+
+          .mid {
+            width: 100%;
+            display: flex;
+            height: 100%;
+            justify-content: center;
+
+            .inher {
+              width: 80%;
+              height: 100%;
+
+              .cur {
+                color: #6f6f6f;
+                font-size: 14px;
+              }
+
+              .select {
+                margin-top: 10px;
+              }
+
+              .btn {
+                width: 100%;
+                display: flex;
+                justify-content: center;
+                margin-top: 30px;
+
+                .sameb {
+                  width: 100px;
+                  height: 40px;
+                  font-size: 14px;
+
+                  border-radius: 8px;
+                }
+
+                .btn1 {
+                  color: #4ea6ff;
+                  background: #ffffff;
+                  border: 1px solid #4ea6ff;
+                }
+
+                .btn2 {
+                  margin-left: 16px;
+                  border: 0;
+                  color: #ffffff;
+                  background: #4ea6ff;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>