教师端1期需求ui优化

2025-12-12 12:26:44 +08:00 · 2025-12-11 18:07:58 +08:00
parent bc8c0004f8
commit 8eb678e180
8 changed files with 536 additions and 333 deletions
--- a/src/api/modules/course.js
+++ b/src/api/modules/course.js
@@ -477,7 +477,7 @@ const saveTip = function() {
 * 获取我开发的课程列表
 */
 const courseList = function(data) {
-  return ajax.postJson('/xboe/m/course/manage/page', data);
+  return ajax.postJson('/xboe/m/course/manage/develop_page', data);
 }


--- a/src/assets/styles/portal-index.scss
+++ b/src/assets/styles/portal-index.scss
@@ -432,6 +432,37 @@
    color: #333333;
 }
 }
+.el-message.new-message {
+  background-color: #edf2fc !important;
+  box-shadow: none !important;
+  border-color: #EBEEF5 !important;
+  min-width: 170px !important;
+  border-radius: 10px !important;
+  }
+.el-message--success.new-message {
+  background-color: #f0f9eb !important;
+  box-shadow: none !important;
+  border-color: #e1f3d8 !important;
+  min-width: 170px !important;
+  border-radius: 10px !important
+  }
+.el-message--error.new-message {
+  background-color: #fef0f0 !important;
+  box-shadow: none !important;
+  border-color: #fde2e2 !important;
+  min-width: 170px !important;
+  border-radius: 10px !important
+  }
+  .el-message--warning.new-message {
+    background-color: #fdf6ec !important;
+    box-shadow: none !important;
+    border-color: #faecd8 !important;
+    min-width: 170px !important;
+    border-radius: 10px !important
+  }
+
+
+
 .el-badge__content{// badge去掉白色边框
  border:1px solid #f56c6c;
 }
--- a/src/components/SimpleMessageBox/index.vue
+++ b/src/components/SimpleMessageBox/index.vue
@@ -0,0 +1,87 @@
+<template>
+  <div>
+    <el-dialog class="simple-message-box" :title="title" :visible.sync="visible" :show-close="false" append-to-body>
+      <div class="message-box-content"><svg-icon style="margin-right: 5px;font-size:16px"
+          icon-class="jingti"></svg-icon>{{message}}</div>
+      <span slot="footer" class="dialog-footer">
+        <el-button class="cancel" @click="cancel">{{cancelButtonText}}</el-button>
+        <el-button class="confirm" type="primary" @click="confirm">{{confirmButtonText}}</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  name: "SimpleMessageBox",
+  data() {
+    return {
+      visible: false,
+      title: "",
+      message: "",
+      confirmButtonText: "确 认",
+      cancelButtonText: "取 消",
+      handleConfirm: null,
+      handleCancel: null,
+    };
+  },
+  methods: {
+    open() {
+      this.visible = true;
+    },
+    cancel() {
+      this.visible = false;
+      this.handleCancel();
+    },
+    confirm() {
+      this.visible = false;
+      this.handleConfirm();
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.simple-message-box {
+  ::v-deep .el-dialog {
+    border-radius: 12px;
+  }
+  ::v-deep .el-dialog__title {
+    font-size: 16px;
+    color: #000000;
+  }
+  .message-box-content {
+    display: flex;
+    justify-content: center;
+    font-size: 16px;
+    align-items: center;
+    color: #000000;
+  }
+  .cancel {
+    width: 120px;
+    height: 40px;
+    background: rgba(#4284f7,0.1);
+    border-radius: 8px;
+    margin-right: 8px;
+    border: none;
+    span {
+      font-weight: bold;
+      font-size: 14px;
+      color: #4284f7;
+      line-height: 40px;
+      text-align: center;
+    }
+  }
+  .confirm {
+    width: 120px;
+    height: 40px;
+    background: #4284f7;
+    border-radius: 8px;
+
+    span {
+      font-weight: bold;
+      font-size: 14px;
+      color: #ffffff;
+      line-height: 40px;
+    }
+  }
+}
+</style>
--- a/src/icons/svg/jingti.svg
+++ b/src/icons/svg/jingti.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>jingti-copy</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="删除_弹框" transform="translate(-806, -410)" fill="#FB2727" fill-rule="nonzero">
+            <g id="jingti-copy" transform="translate(806, 410)">
+                <path d="M8,1.125 C8.928125,1.125 9.828125,1.30625 10.675,1.6640625 C11.49375,2.0109375 12.228125,2.50625 12.8609375,3.1375 C13.4921875,3.76875 13.9890625,4.5046875 14.334375,5.3234375 C14.69375,6.171875 14.875,7.071875 14.875,8 C14.875,8.928125 14.69375,9.828125 14.3359375,10.675 C13.9890625,11.49375 13.49375,12.228125 12.8625,12.8609375 C12.23125,13.4921875 11.4953125,13.9890625 10.6765625,14.334375 C9.828125,14.69375 8.928125,14.875 8,14.875 C7.071875,14.875 6.171875,14.69375 5.325,14.3359375 C4.50625,13.9890625 3.771875,13.49375 3.1390625,12.8625 C2.5078125,12.23125 2.0109375,11.4953125 1.665625,10.6765625 C1.30625,9.828125 1.125,8.928125 1.125,8 C1.125,7.071875 1.30625,6.171875 1.6640625,5.325 C2.0109375,4.50625 2.50625,3.771875 3.1375,3.1390625 C3.76875,2.5078125 4.5046875,2.0109375 5.3234375,1.665625 C6.171875,1.30625 7.071875,1.125 8,1.125 Z M8,0 C3.58125,0 0,3.58125 0,8 C0,12.41875 3.58125,16 8,16 C12.41875,16 16,12.41875 16,8 C16,3.58125 12.41875,0 8,0 Z M8,10 C7.6546875,10 7.375,9.7203125 7.375,9.375 L7.375,3.609375 C7.375,3.2640625 7.6546875,2.984375 8,2.984375 C8.3453125,2.984375 8.625,3.2640625 8.625,3.609375 L8.625,9.375 C8.625,9.7203125 8.3453125,10 8,10 Z M7.296875,11.703125 C7.296875,12.0914531 7.61167187,12.40625 8,12.40625 C8.38832813,12.40625 8.703125,12.0914531 8.703125,11.703125 C8.703125,11.3147969 8.38832812,11 8,11 C7.61167188,11 7.296875,11.3147969 7.296875,11.703125 Z" id="形状"></path>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/src/main.js
+++ b/src/main.js
@@ -41,6 +41,14 @@ import  'swiper/dist/css/swiper.css';
 Vue.use(VueAwesomeSwiper)
 import watermark from './utils/warterMark.js'
 import Bus from './utils/bus.js'
+import {showMessage} from './utils/index.js'
+
+import MessageBoxService from './utils/simpleMessageBox.js'
+
+
+Vue.use(MessageBoxService)
+
+Vue.prototype.$showMessage = showMessage

 Vue.prototype.$bus = Bus

--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -455,4 +455,13 @@ export function resOwnerListMap(source) {
    })
    let name = resOwnerList.get('GC005001')
    return name;
+}
+
+export function showMessage(message, status) { 
+  this.$message({
+    message: message,
+    type: status,
+    duration: 5000,
+    customClass: 'new-message'
+  });
 }
--- a/src/utils/simpleMessageBox.js
+++ b/src/utils/simpleMessageBox.js
@@ -0,0 +1,50 @@
+import Vue from 'vue'
+import MessageBox from '@/components/SimpleMessageBox/index.vue'
+
+// 创建 MessageBox 构造器
+const MessageBoxConstructor = Vue.extend(MessageBox)
+
+let messageBoxInstance = null
+
+const MessageBoxService = {
+  open(options = {}) {
+    // 如果已有实例，先销毁
+    if (messageBoxInstance) {
+      messageBoxInstance.$destroy()
+      const el = messageBoxInstance.$el
+      if (el && el.parentNode) {
+        el.parentNode.removeChild(el)
+      }
+    }
+
+    // 创建新实例
+    messageBoxInstance = new MessageBoxConstructor({
+      el: document.createElement('div'),
+      data: options
+    })
+
+    // 挂载到 body
+    document.body.appendChild(messageBoxInstance.$el)
+
+    // 显示并返回 Promise
+    return messageBoxInstance.open(options)
+  },
+
+  cancel() {
+    messageBoxInstance.cancel()
+  },
+
+  confirm(options) {
+    return this.open({
+      ...options
+    })
+  },
+}
+
+// 添加到 Vue 原型
+MessageBoxService.install = function (Vue) {
+  Vue.prototype.$messageBox = MessageBoxService
+}
+
+// 导出
+export default MessageBoxService
--- a/src/views/course/TeacherList.vue
+++ b/src/views/course/TeacherList.vue
@@ -7,57 +7,58 @@
      4.有哪种几状态和哪几种操作，需要讨论定一下 。在哪种状态下可以有哪些操作<br/>
    </Remark> -->

-     <el-row style="margin: 0 20px 20px 15px;" :gutter="8">
-        <el-col :span="8">
-          <div class="grid-content bg-purple"><el-input  :maxlength="50" v-model="params.name" clearable placeholder="课程名称" /></div>
-        </el-col>
-        <el-col :span="3">
-          <div class="grid-content bg-purple">
-            <el-select  v-model="params.publish" placeholder="发布状态" clearable>
-             <el-option label="未发布" :value="false"></el-option>
+    <el-row style="margin: 0 20px 20px 15px;" :gutter="8">
+      <el-col :span="8">
+        <div class="grid-content bg-purple"><el-input :maxlength="50" v-model="params.name" clearable
+            placeholder="课程名称" /></div>
+      </el-col>
+      <el-col :span="3">
+        <div class="grid-content bg-purple">
+          <el-select v-model="params.publish" placeholder="发布状态" clearable>
+            <el-option label="未发布" :value="false"></el-option>
            <el-option label="已发布" :value="true"></el-option>
-            </el-select>
-          </div>
-        </el-col>
+          </el-select>
+        </div>
+      </el-col>

-          <el-col :span="3">
-          <div class="grid-content bg-purple">
-            <el-select  v-model="params.enabled" placeholder="启停用状态" clearable>
-             <el-option label="未发布" :value="false"></el-option>
-            <el-option label="已发布" :value="true"></el-option>
-            </el-select>
-          </div>
-        </el-col>
+      <el-col :span="3">
+        <div class="grid-content bg-purple">
+          <el-select v-model="params.enabled" placeholder="启停用状态" clearable>
+            <el-option label="停用" :value="false"></el-option>
+            <el-option label="启用" :value="true"></el-option>
+          </el-select>
+        </div>
+      </el-col>

-          <el-col :span="3">
-          <div class="grid-content bg-purple">
-            <el-select  v-model="params.status" placeholder="审核状态" clearable>
+      <el-col :span="3">
+        <div class="grid-content bg-purple">
+          <el-select v-model="params.status" placeholder="审核状态" clearable>
            <el-option label="审核中" :value="2"></el-option>
            <el-option label="审核驳回" :value="3"></el-option>
            <el-option label="审核通过" :value="5"></el-option>
-            </el-select>
-          </div>
-        </el-col>
-        <el-col :span="2">
-          <div class="grid-content bg-purple">
-            <el-button type="primary" @click="findList">查 询</el-button>
-          </div>
-        </el-col>
-        <el-col :span="2">
-          <div class="grid-content bg-purple">
-            <el-button @click="reset">重 置</el-button>
-          </div>
-        </el-col>
-        <el-col :span="2" >
-          <div class="grid-content bg-purple" style="text-align: right;">
-            <el-button type="primary" icon="el-icon-plus" @click="addNewCourse">新建课程</el-button>
-          </div>
-        </el-col>
-      </el-row>
-
+          </el-select>
+        </div>
+      </el-col>
+      <el-col :span="2">
+        <div class="grid-content bg-purple">
+          <el-button type="primary" @click="findList">查 询</el-button>
+        </div>
+      </el-col>
+      <el-col :span="2">
+        <div class="grid-content bg-purple">
+          <el-button @click="reset">重 置</el-button>
+        </div>
+      </el-col>
+      <el-col :span="2">
+        <div class="grid-content bg-purple" style="text-align: right;">
+          <el-button type="primary" icon="el-icon-plus" @click="addNewCourse">新建课程</el-button>
+        </div>
+      </el-col>
+    </el-row>

    <!--课程列表内容-->
-    <div v-infinite-scroll="load" style="overflow:auto;height:1000px" infinite-scroll-distance="50" :infinite-scroll-immediate="false" :infinite-scroll-disabled="disabled">
+    <div v-infinite-scroll="load" style="overflow:auto;height:1000px" infinite-scroll-distance="50"
+      :infinite-scroll-immediate="false" :infinite-scroll-disabled="disabled">
      <div class="uc-course" v-for="(item, idx) in couresList" :key="idx" @click="jumpRouter(item)">
        <div class="uc-course-img" style="width: 212px;height:119px">
          <course-image :course="item"></course-image>
@@ -65,8 +66,8 @@
        </div>
        <div class="uc-course-info">
          <div class="uc-course-name">
-              <el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
-                          <span style="font-size:18px;color:#333">{{ item.name }}</span>
+            <el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
+              <span style="font-size:18px;color:#333">{{ item.name }}</span>
            </el-tooltip>
          </div>
          <div class="uc-course-item">
@@ -75,19 +76,26 @@
          <div class="uc-course-item">
            <div class="status-item">发布状态：{{ item.published ? '发布' : '未发布' }}</div>
            <div class="status-item">启停用状态：{{ item.enabled ? '启用' : '停用' }}</div>
-            <div class="status-item">审核状态：<el-link :type="getStatusLabel(item.status).type" @click.stop="" :underline="false">{{getStatusLabel(item.status).label}}</el-link></div>
+            <div class="status-item">审核状态：<el-link :type="getStatusLabel(item.status).type" @click.stop=""
+                :underline="false">{{getStatusLabel(item.status).label}}</el-link></div>
          </div>
          <div class="btn-container">
-             <el-link class="btn-item" @mouseenter.native="$set(hoverStates, it.uniqueKey, true )" @mouseleave.native="$set(hoverStates, it.uniqueKey, false )" :style="{color: it.labelColor ? it.labelColor : (hoverStates[it.uniqueKey] ? '#4284F7' : '#000000')}" v-for="(it, idx) in availableActions(item)" :key="idx" :underline="false"  type="primary" @click.stop="it.handler(item)"><svg-icon style="margin-right: 5px;font-size:19px;padding-top: 4px;color:#000000" :icon-class="hoverStates[it.uniqueKey] ? it.hoverIcon : it.icon"></svg-icon>{{it.label}}</el-link>
+            <el-link class="btn-item" @mouseenter.native="$set(hoverStates, it.uniqueKey, true )"
+              @mouseleave.native="$set(hoverStates, it.uniqueKey, false )"
+              :style="{color: it.labelColor ? it.labelColor : (hoverStates[it.uniqueKey] ? '#4284F7' : '#000000')}"
+              v-for="(it, idx) in availableActions(item)" :key="idx" :underline="false" type="primary"
+              @click.stop="it.handler(item)"><svg-icon
+                style="margin-right: 5px;font-size:19px;padding-top: 4px;color:#000000"
+                :icon-class="hoverStates[it.uniqueKey] ? it.hoverIcon : it.icon"></svg-icon>{{it.label}}</el-link>
          </div>
        </div>
      </div>
-    <p v-if="loading" class="page-tip">加载中...</p>
-     <div v-if="couresList.length == 0 && !loading">
-      <div v-if="isSearh" class="zan-wu">没有查询到相关内容</div>
-      <div v-else class="zan-wu">暂无数据</div>
-    </div>
-    <p v-else-if="noMore" class="page-tip">没有更多了</p>
+      <p v-if="loading" class="page-tip">加载中...</p>
+      <div v-if="couresList.length == 0 && !loading">
+        <div v-if="isSearh" class="zan-wu">没有查询到相关内容</div>
+        <div v-else class="zan-wu">暂无数据</div>
+      </div>
+      <p v-else-if="noMore" class="page-tip">没有更多了</p>
    </div>
    <!-- <div v-if="couresList.length > 0" style="text-align: center; margin-top:57px;">
      <el-pagination
@@ -106,31 +114,31 @@
    </div> -->

    <div></div>
-     <el-dialog title="二维码" :visible.sync="qrCodedialogVisible" width="900px" @close="closeCode" custom-class="g-dialog">
+    <el-dialog title="二维码" :visible.sync="qrCodedialogVisible" width="900px" @close="closeCode" custom-class="g-dialog">
      <div>
-         <el-form size="medium" label-width="100px">
-            <el-form-item label="二维码" > 
-              <div id="qrcode" ref="qrcode" class="qrcode-img" @mouseenter="showDownloadButton = true" @mouseleave="showDownloadButton = false">
-            
-                <div v-show="showDownloadButton" @click="downloadQrcode" class="downloadn-container">
-                  <i class="el-icon-download" style="color: #409EFF;font-size:18px;margin-bottom:5px"></i>
-                  <span>下载</span>
-                </div>
+        <el-form size="medium" label-width="100px">
+          <el-form-item label="二维码">
+            <div id="qrcode" ref="qrcode" class="qrcode-img" @mouseenter="showDownloadButton = true"
+              @mouseleave="showDownloadButton = false">
+
+              <div v-show="showDownloadButton" @click="downloadQrcode" class="downloadn-container">
+                <i class="el-icon-download" style="color: #409EFF;font-size:18px;margin-bottom:5px"></i>
+                <span>下载</span>
              </div>
-            </el-form-item>
-              
-            <el-form-item label="链接">
-                <el-input v-model="copyUrl" readonly class="input-with-select" id="text">
-                 <el-button slot="append" @click="handleCopyUrl">复制</el-button>
-              </el-input>
-            </el-form-item>
-            <el-form-item label="">上述内容兼容PC端与移动端，您可按需分享。</el-form-item>
-          </el-form>
+            </div>
+          </el-form-item>
+
+          <el-form-item label="链接">
+            <el-input v-model="copyUrl" readonly class="input-with-select" id="text">
+              <el-button slot="append" @click="handleCopyUrl">复制</el-button>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="">上述内容兼容PC端与移动端，您可按需分享。</el-form-item>
+        </el-form>
      </div>
      <span slot="footer" class="dialog-footer"><el-button @click="closeCode">关 闭</el-button></span>
    </el-dialog>

-
    <!-- TODO 修改展示字段 -->
    <el-dialog title="审核记录" :visible.sync="dialogVisible" width="900px" custom-class="g-dialog">
      <div>
@@ -146,7 +154,7 @@
            </template>
          </el-table-column>
          <el-table-column prop="auditUser" label="审核人"></el-table-column>
-             <el-table-column prop="auditTime" label="审核结果"></el-table-column>
+          <el-table-column prop="auditTime" label="审核结果"></el-table-column>
          <el-table-column prop="auditTime" label="审核时间"></el-table-column>
          <el-table-column prop="auditRemark" label="审核意见"></el-table-column>
        </el-table>
@@ -158,62 +166,88 @@
 </template>

 <script>
-import QRCode from 'qrcodejs2';
-import courseImage from '@/components/Course/courseImage.vue';
-import { mapGetters } from 'vuex';
-import studyItem from '@/components/Course/studyItem.vue';
-import courseForm from '@/components/Course/courseForm.vue';
-import apiCourse from '@/api/modules/course.js';
-import { courseType } from '@/utils/tools.js';
-import apiAudit from '@/api/system/audit.js';
-import apiHRBP from '@/api/boe/HRBP.js';
-import apiOrg from '@/api/system/organiza.js';
-import apiUserBasic from '@/api/boe/userbasic.js';
+import QRCode from "qrcodejs2";
+import courseImage from "@/components/Course/courseImage.vue";
+import { mapGetters } from "vuex";
+import studyItem from "@/components/Course/studyItem.vue";
+import courseForm from "@/components/Course/courseForm.vue";
+import apiCourse from "@/api/modules/course.js";
+import { courseType } from "@/utils/tools.js";
+import apiAudit from "@/api/system/audit.js";
+import apiHRBP from "@/api/boe/HRBP.js";
+import apiOrg from "@/api/system/organiza.js";
+import apiUserBasic from "@/api/boe/userbasic.js";

 // 状态权限映射
 const STATUS_PERMISSIONS = {
  // 未发布状态
  unpublished: {
-    1: ['edit', 'delete'], // 无审核状态
-    2: ['auditRecord'], // 审核中'withdraw'
-    3: ['edit', 'delete', 'auditRecord'] // 审核驳回
+    1: ["edit", "delete"], // 无审核状态
+    2: ["auditRecord"], // 审核中'withdraw'
+    3: ["edit", "delete", "auditRecord"], // 审核驳回
  },
  // 已发布状态
  published: {
    enabled: {
-      1: ['edit', 'manage', 'auditRecord', 'qrcode'], //'offShelfApply', 'viewCurrent'
-      2: ['manage', 'auditRecord', 'qrcode'], // withdraw , 'viewCurrent'
-      3: ['edit', 'manage', 'auditRecord', 'qrcode'], //'offShelfApply', 'viewCurrent'
-      5: ['edit', 'manage', 'auditRecord', 'qrcode'] //'offShelfApply', 'viewCurrent'
+      1: ["edit", "manage", "auditRecord", "qrcode"], //'offShelfApply', 'viewCurrent'
+      2: ["manage", "auditRecord", "qrcode"], // withdraw , 'viewCurrent'
+      3: ["edit", "manage", "auditRecord", "qrcode"], //'offShelfApply', 'viewCurrent'
+      5: ["edit", "manage", "auditRecord", "qrcode"], //'offShelfApply', 'viewCurrent'
    },
    disabled: {
      // 所有状态在停用时操作一致
-      1: ['manage', 'auditRecord'], //, 'viewCurrent'
-      2: ['manage', 'auditRecord'], //, 'viewCurrent'
-      3: ['manage', 'auditRecord'], //, 'viewCurrent'
-      5: ['manage', 'auditRecord'] //, 'viewCurrent'
-    }
-  }
-}
+      1: ["manage", "auditRecord"], //, 'viewCurrent'
+      2: ["manage", "auditRecord"], //, 'viewCurrent'
+      3: ["manage", "auditRecord"], //, 'viewCurrent'
+      5: ["manage", "auditRecord"], //, 'viewCurrent'
+    },
+  },
+};

 // 操作配置映射表
 const ACTION_CONFIG = {
-  edit: { label: '编辑', handler: 'editCourse', icon: 'edit', hoverIcon: 'editHover' },
-  manage: { label: '管理', handler: 'handleManage', icon: 'manage', hoverIcon: 'manageHover'},
+  edit: {
+    label: "编辑",
+    handler: "editCourse",
+    icon: "edit",
+    hoverIcon: "editHover",
+  },
+  manage: {
+    label: "管理",
+    handler: "handleManage",
+    icon: "manage",
+    hoverIcon: "manageHover",
+  },
  // withdraw: { label: '撤回', handler: 'handleWithdraw' },
-  auditRecord: { label: '审核记录', handler: 'toExamine', icon: 'check', hoverIcon: 'checkHover' },
-  qrcode: { label: '二维码', handler: 'handleQrcode', icon: 'ercode', hoverIcon: 'ercodeHover' },
+  auditRecord: {
+    label: "审核记录",
+    handler: "toExamine",
+    icon: "check",
+    hoverIcon: "checkHover",
+  },
+  qrcode: {
+    label: "二维码",
+    handler: "handleQrcode",
+    icon: "ercode",
+    hoverIcon: "ercodeHover",
+  },
  // offShelfApply: { label: '下架申请', handler: 'handleOffShelfApply' },
  // viewCurrent: { label: '查看当前版本', handler: 'handleViewCurrent', icon: 'detail' },
-  delete: { label: '删除', labelColor: '#FF1718', handler: 'delItem', icon: 'del', hoverIcon: 'del' },
-}
+  delete: {
+    label: "删除",
+    labelColor: "#FF1718",
+    handler: "delItem",
+    icon: "del",
+    hoverIcon: "del",
+  },
+};

 export default {
-  name: 'ucStudyIndex',
+  name: "ucStudyIndex",
  components: { studyItem, courseForm, courseImage },
  computed: {
-    ...mapGetters(['userInfo']),
-     disabled() {
+    ...mapGetters(["userInfo"]),
+    disabled() {
      return this.loading || this.noMore;
    },
  },
@@ -225,31 +259,42 @@ export default {
      courseType: courseType,
      fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
      count: 0,
-      params: { name: '', publish: '', status: '', enabled: '', pageIndex: 0, pageSize: 10 },
+      params: {
+        name: "",
+        publish: "",
+        status: "",
+        enabled: "",
+        pageIndex: 0,
+        pageSize: 10,
+      },
      couresList: [],
      flag: true,
-      isSearh:false,
+      isSearh: false,
      qrCodedialogVisible: false,
-      copyUrl: '',
-      qrcodeImgUrl: '',
+      copyUrl: "",
+      qrcodeImgUrl: "",
      showDownloadButton: false, // 是否显示下载按钮
      loading: false,
      noMore: false,
      auditEnum: {
-        1: '未审核',
-        2: '审核不通过',
-        9: '审核通过'
+        1: "未审核",
+        2: "审核不通过",
+        9: "审核通过",
      },
-      hoverStates: {}
+      hoverStates: {},
    };
  },
  mounted() {
-    if(this.$route.query && this.$route.query.open && this.$route.query.open == 'new') {
-       this.addNewCourse();
+    if (
+      this.$route.query &&
+      this.$route.query.open &&
+      this.$route.query.open == "new"
+    ) {
+      this.addNewCourse();
    }
    // this.getList();
  },
-  watch:{
+  watch: {
    // '$route.query.open':function(val){
    //   if(val == 'new') {
    //      this.addNewCourse();
@@ -257,13 +302,13 @@ export default {
    // }
  },
  methods: {
-    handleM(){
-      console.log('handleM')
+    handleM() {
+      console.log("handleM");
    },
    load() {
-      this.loading = true
-      this.params.pageIndex++
-      this.getList()
+      this.loading = true;
+      this.params.pageIndex++;
+      this.getList();
    },

    getNewList() {
@@ -272,46 +317,50 @@ export default {
      this.getList();
    },
    getStatusLabel(code) {
-      if (code == '1') {
-        return {type:'info',label:'-'}
-      } else if (code == '2') {
-        return {type:'warning',label:'审核中'}
-      } else if (code == '3') {
-        return {type:'danger',label:'审核驳回'}
-      } else if (code == '5') {
-        return {type:'success',label:'审核通过'}
+      if (code == "1") {
+        return { type: "info", label: "-" };
+      } else if (code == "2") {
+        return { type: "warning", label: "审核中" };
+      } else if (code == "3") {
+        return { type: "danger", label: "审核驳回" };
+      } else if (code == "5") {
+        return { type: "success", label: "审核通过" };
      }
    },
-     // 获取可用的操作配置
+    // 获取可用的操作配置
    availableActions(item) {
-      const { status, published, enabled } = item
-      let actionKeys = []
-      
+      const { status, published, enabled } = item;
+      let actionKeys = [];
+
      if (!published) {
        // 未发布状态
-        actionKeys = STATUS_PERMISSIONS.unpublished[status] || []
+        actionKeys = STATUS_PERMISSIONS.unpublished[status] || [];
      } else {
        // 已发布状态
-        const stateKey = enabled ? 'enabled' : 'disabled'
-        actionKeys = STATUS_PERMISSIONS.published[stateKey][status] || []
+        const stateKey = enabled ? "enabled" : "disabled";
+        actionKeys = STATUS_PERMISSIONS.published[stateKey][status] || [];
      }
-      
-      return actionKeys.map((key,index) => ({
-        name: key,
-        label: ACTION_CONFIG[key].label,
-        handler: this[ACTION_CONFIG[key].handler],
-        icon: ACTION_CONFIG[key].icon,
-        hoverIcon: ACTION_CONFIG[key].hoverIcon,
-        labelColor: ACTION_CONFIG[key].labelColor,
-        uniqueKey: `${item.id}-${key}-${index}`
-      })).filter(Boolean)
+
+      return actionKeys
+        .map((key, index) => ({
+          name: key,
+          label: ACTION_CONFIG[key].label,
+          handler: this[ACTION_CONFIG[key].handler],
+          icon: ACTION_CONFIG[key].icon,
+          hoverIcon: ACTION_CONFIG[key].hoverIcon,
+          labelColor: ACTION_CONFIG[key].labelColor,
+          uniqueKey: `${item.id}-${key}-${index}`,
+        }))
+        .filter(Boolean);
    },
    handleManage(item) {
-      sessionStorage.setItem('courseDetail',JSON.stringify(item));
-      this.$router.push({ path: '/course/coursemanage' });
+      sessionStorage.setItem("courseDetail", JSON.stringify(item));
+      this.$router.push({ path: "/course/coursemanage" });
    },
    downloadQrcode() {
-      let img = document.getElementById("qrcode").getElementsByTagName("img")[0];
+      let img = document
+        .getElementById("qrcode")
+        .getElementsByTagName("img")[0];
      let canvas = document.createElement("canvas");
      canvas.width = img.width;
      canvas.height = img.height;
@@ -320,25 +369,26 @@ export default {
      let tempUrl = canvas.toDataURL("image/png");
      // 创建a标签下载

-      let link = document.createElement('a'); //创建a标签
-      link.style.display = 'none'; //使其隐藏
+      let link = document.createElement("a"); //创建a标签
+      link.style.display = "none"; //使其隐藏
      link.download = tempUrl;
-      link.setAttribute('target', '_blank');
+      link.setAttribute("target", "_blank");
      link.href = tempUrl; //赋予文件下载地址
-      link.setAttribute('download', '二维码.jpg'); //设置下载属性 以及文件名
+      link.setAttribute("download", "二维码.jpg"); //设置下载属性 以及文件名
      document.body.appendChild(link); //a标签插至页面中
      link.click(); //强制触发a标签事件
      document.body.removeChild(link);
    },
    handleCopyUrl() {
-      document.getElementById("text").select()
-      document.execCommand("Copy")
-      this.$message.success("复制成功")
+      document.getElementById("text").select();
+      document.execCommand("Copy");
+      this.$showMessage('复制成功', 'success')
+
    },
-   
+
    handleQrcode(row) {
      this.qrCodedialogVisible = true;
-      let urlPre=window.location.protocol+'//'+window.location.host;
+      let urlPre = window.location.protocol + "//" + window.location.host;

      //动态的地址
      //urlPre=urlPre+'/m?returnUrl='+urlPre+'/mobile/pages/login/loading?returnUrl=';
@@ -350,52 +400,54 @@ export default {
      // if(row.type==20){
      //   this.copyUrl=urlPre+this.webBaseUrl+'/course/detail?id='+row.id;
      // }
-      this.copyUrl = this.qrcodeImgUrl = process.env.VUE_APP_BOE_WEB_URL + '/systemapi/xboe/m/course/manage/redirectDetail?courseId=' + row.id
-      console.log('qrcodeImgUrl', this.qrcodeImgUrl)
-      console.log('webBaseUrl', this.webBaseUrl)
+      this.copyUrl = this.qrcodeImgUrl =
+        process.env.VUE_APP_BOE_WEB_URL +
+        "/systemapi/xboe/m/course/manage/redirectDetail?courseId=" +
+        row.id;
+      console.log("qrcodeImgUrl", this.qrcodeImgUrl);
+      console.log("webBaseUrl", this.webBaseUrl);
      // 使用$nextTick确保数据渲染
      this.$nextTick(() => {
        this.crateQrcode();
      });
-      
    },
-       // 生成二维码
+    // 生成二维码
    crateQrcode() {
-      let qrcode = new QRCode('qrcode', {
+      let qrcode = new QRCode("qrcode", {
        width: 150,
        height: 150, // 高度
-        text: this.qrcodeImgUrl // 二维码内容
+        text: this.qrcodeImgUrl, // 二维码内容
        // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        // background: '#f0f'
        // foreground: '#ff0'
      });
-      console.log('qrcode', qrcode)
+      console.log("qrcode", qrcode);
    },
    // 关闭弹框,清除已经生成的二维码
    closeCode() {
-      this.qrCodedialogVisible = false
+      this.qrCodedialogVisible = false;

      // 逐个节点移除防止事件一起移除
-      let images = document.querySelectorAll('.qrcode-img img');
-      images.forEach(img => img.remove());
+      let images = document.querySelectorAll(".qrcode-img img");
+      images.forEach((img) => img.remove());

-      let canvas = document.querySelectorAll('.qrcode-img canvas');
-      canvas.forEach(canvas => canvas.remove());
+      let canvas = document.querySelectorAll(".qrcode-img canvas");
+      canvas.forEach((canvas) => canvas.remove());
    },
    // 撤回接口
    withdraw(item) {
-      this.$confirm('此操作将撤回审核中的课程, 是否继续?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
+      this.$confirm("此操作将撤回审核中的课程, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
      })
        .then(() => {
-          apiCourse.revokeSubmit(item.id).then(res => {
+          apiCourse.revokeSubmit(item.id).then((res) => {
            if (res.status == 200) {
              if (res.result) {
                this.$message({
-                  type: 'success',
-                  message: '撤回成功!'
+                  type: "success",
+                  message: "撤回成功!",
                });
                this.getNewList();
              }
@@ -404,16 +456,16 @@ export default {
        })
        .catch(() => {
          this.$message({
-            type: 'info',
-            message: '已取消撤回'
+            type: "info",
+            message: "已取消撤回",
          });
        });
    },
    reset() {
-      this.params.name = ''
-      this.params.publish = '' 
-      this.params.status = ''
-      this.params.enabled = ''
+      this.params.name = "";
+      this.params.publish = "";
+      this.params.status = "";
+      this.params.enabled = "";
      this.params.pageIndex = 1;
      // this.getList();
      this.isSearh = false;
@@ -421,158 +473,114 @@ export default {
    toExamine(row) {
      // this.detailType = row.type;
      this.dialogVisible = true;
-      apiCourse.auditCourseRecords({
-        courseId: row.id
-      }).then(res => {
-        if (res.status === 200) {
-          this.inviteTeacher = res.result;
-        } else {
-          this.$message.error(res.message);
-        }
-      });
+      apiCourse
+        .auditCourseRecords({
+          courseId: row.id,
+        })
+        .then((res) => {
+          if (res.status === 200) {
+            this.inviteTeacher = res.result;
+          } else {
+            this.$message.error(res.message);
+          }
+        });
    },
    examine(row) {
-        if(!row.orgId){
-          this.$message.error("课程还未设置资源归属，请先设置资源归属");
-          return;
-        }
-        let $this=this;
-        this.$confirm('您确定要直接提交审核所选课程吗？', '友情提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(()=>{
-              //新的提交流程
-              apiUserBasic.getOrgHrbpInfo(row.orgId).then(rs=>{
-                if(rs.status==200 && rs.result){
-                  let req={
-                    courseId:row.id,
-                    email:rs.result.email,
-                    courseUser:row.sysCreateBy,
-                    courseName:row.name,
-                    ucode:rs.result.userNo,
-                    auditUser:rs.result.name,
-                    //ukid:hrbpUser.user_id,
-                    orgId:row.orgId,
-                    orgName:rs.result.orgNamePath +'/'+rs.result.name
-                  }
-                  apiCourse.sumbits(req).then(res=>{
-                    if(res.status==200){
-                      $this.$message.success('提交成功');
-                      row.status=2
-                    }
-                    if(res.status==400){
-                      $this.$message.error('提交失败:'+res.message);
-                    }
-                  })
-                }else{
-                  $this.$message.error("获取HRBP审核人员失败:"+rs.message);
-                }
-              });
-
-              // apiOrg.getSimple(row.orgId).then(rrs=>{
-              //    if(rrs.status==200){
-              //       apiHRBP.getHRBP(rrs.result.kid).then(rs=>{
-              //         if(rs.status==200 && rs.result.length>0){
-              //             let hrbpUser=rs.result[0];
-              //             let req={
-              //                courseId:row.id,
-              //                email:hrbpUser.email,
-              //                courseUser:row.sysCreateBy,
-              //                courseName:row.name,
-              //                ucode:hrbpUser.user_no,
-              //                auditUser:hrbpUser.real_name,
-              //                ukid:hrbpUser.user_id,
-              //                orgId:row.orgId,
-              //                orgName:rs.result.orgnization_name_path+'/'+rrs.result.name
-              //             }
-              //             apiCourse.sumbits(req).then(res=>{
-              //               if(res.status==200){
-              //                 $this.$message.success('提交成功');
-              //                 row.status=2
-              //               }
-              //               if(res.status==400){
-              //                 $this.$message.error('提交失败:'+res.message);
-              //               }
-              //             })
-              //         }else{
-              //           $this.$message.error("获取HRBP审核人员失败:"+rs.message);
-              //         }
-              //       })
-              //    }else{
-              //      $this.$message.error("处理资源归属失败，请重新设置资源归属");
-              //    }
-              // })
-        })
+      if (!row.orgId) {
+        this.$message.error("课程还未设置资源归属，请先设置资源归属");
+        return;
+      }
+      let $this = this;
+      this.$confirm("您确定要直接提交审核所选课程吗？", "友情提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+        //新的提交流程
+        apiUserBasic.getOrgHrbpInfo(row.orgId).then((rs) => {
+          if (rs.status == 200 && rs.result) {
+            let req = {
+              courseId: row.id,
+              email: rs.result.email,
+              courseUser: row.sysCreateBy,
+              courseName: row.name,
+              ucode: rs.result.userNo,
+              auditUser: rs.result.name,
+              //ukid:hrbpUser.user_id,
+              orgId: row.orgId,
+              orgName: rs.result.orgNamePath + "/" + rs.result.name,
+            };
+            apiCourse.sumbits(req).then((res) => {
+              if (res.status == 200) {
+                $this.$message.success("提交成功");
+                row.status = 2;
+              }
+              if (res.status == 400) {
+                $this.$message.error("提交失败:" + res.message);
+              }
+            });
+          } else {
+            $this.$message.error("获取HRBP审核人员失败:" + rs.message);
+          }
+        });
+      });
    },
-    delItem(row) {
-      console.log('delItem', row);
-      this.$confirm(`确认删除${row.name}吗？`, '删除提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      })
-        .then(async () => {
+    async delItem(row) {
+      this.$messageBox.confirm({
+        title: "删除确认",
+        message: `确认删除${row.name}吗？`,
+        handleConfirm: async () => {
          let params = {
            id: row.id,
-            title: row.name
+            title: row.name,
          };
          try {
            //  {id:课程id,多个使用逗号分隔,Boolean erasable 是否物理删除,title:课程的名称, remark 备注}
            const { status } = await apiCourse.del(params);
            if (status === 200) {
-              this.$message.success('操作成功！');
-              //事件移到后端处理
-              //  if(!row.erasable){
-              //   let event = {
-              //     key: "DeleteCourse",//被管理员删除
-              //     title: '自己删除课程',//事件的标题
-              //     parameters:"author:"+this.userInfo.aid,//自己删除自己的课程，作者就是当前人
-              //     content: '自己删除课程',//事件的内容
-              //     objId: row.id,//关联的id
-              //     objType: "1",//关联的类型
-              //     objInfo:row.name,
-              //     aid: this.userInfo.aid, //当前登录人的id
-              //     aname: this.userInfo.name,//当前人的姓名
-              //     status: 1 //状态，直接写1
-              //   }
-              //   this.$store.dispatch("userTrigger", event);
-              // }
-
+              this.$showMessage('删除成功', 'success')
+              // this.$message.success("操作成功！");
              this.getNewList();
            } else {
-              this.$message.success('操作失败！');
+              this.$showMessage('删除失败', 'error')
            }
          } catch (error) {
            console.log(error);
          }
-        })
-        .catch(err => {
-          this.$message({ type: 'info', message: '已取消删除', offset: 50 });
-        });
+        },
+        handleCancel: () => {
+           this.$showMessage('已取消删除', 'warning')
+        },
+      });
    },
    jumpRouter(item) {
      if (item.published) {
        // if (item.type == 10) {
-          // let routeData = this.$router.resolve({ path: '/course/micro?id='+item.id});
-          // window.open(this.webBaseUrl+routeData.href, '_blank');
+        // let routeData = this.$router.resolve({ path: '/course/micro?id='+item.id});
+        // window.open(this.webBaseUrl+routeData.href, '_blank');
        //  window.open(this.webBaseUrl + '/course/micro?id=' + item.id, '_blank');
-          // this.$router.push({path:'/course/micro',query:{id:item.id}})
+        // this.$router.push({path:'/course/micro',query:{id:item.id}})
        // }
        // if (item.type == 20) {
-          // let routeData = this.$router.resolve({ path: '/course/detail?id='+item.id});
-          // window.open(this.webBaseUrl+routeData.href, '_blank');
-         // window.open(this.webBaseUrl + '/course/detail?id=' + item.id, '_blank');
-         //this.$router.push({path:'/course/detail',query:{id:item.id}})
-         this.$router.push({path:'/course/studyindex',query:{id:item.id}})
-         // }
+        // let routeData = this.$router.resolve({ path: '/course/detail?id='+item.id});
+        // window.open(this.webBaseUrl+routeData.href, '_blank');
+        // window.open(this.webBaseUrl + '/course/detail?id=' + item.id, '_blank');
+        //this.$router.push({path:'/course/detail',query:{id:item.id}})
+        this.$router.push({
+          path: "/course/studyindex",
+          query: { id: item.id },
+        });
+        // }
      } else {
        // if (item.type == 10) {
        // //  window.open(`${this.webBaseUrl}/course/microPreview?id=${item.id}`);
        //  this.$router.push({path:'/course/microPreview',query:{id:item.id}})
        // } else {
        //  window.open(`${this.webBaseUrl}/course/rePreview?id=${item.id}`);
-        this.$router.push({path:'/course/rePreview',query:{id:item.id}})
+        this.$router.push({
+          path: "/course/rePreview",
+          query: { id: item.id },
+        });
        // }
      }
    },
@@ -582,19 +590,19 @@ export default {
    },
    getList() {
      this.noMore = false;
-      this.params.teacherId = this.userInfo.aid;
-      apiCourse.courseList(this.params).then(res => {
+      // this.params.teacherId = this.userInfo.aid;
+      apiCourse.courseList(this.params).then((res) => {
        this.loading = false;
        if (res.status == 200) {
          this.couresList = [...this.couresList, ...res.result.list];
-          
+
          this.count = res.result.count;
-          console.log(this.couresList.length, 'this.count', this.count);
-          if (this.couresList.length >= this.count){
+          console.log(this.couresList.length, "this.count", this.count);
+          if (this.couresList.length >= this.count) {
            this.noMore = true;
          }
        } else {
-          this.$message.error(res.message);
+          this.$showMessage(res.message, 'error')
        }
      });
    },
@@ -602,13 +610,13 @@ export default {
      this.$refs.courseForm.initShow();
    },
    editCourse(row) {
-      console.log(row, 'editCourse');
+      console.log(row, "editCourse");
      this.$refs.courseForm.initShow(row);
    },
    lastTabChange(tab, event) {
      console.log(tab.name);
-    }
-  }
+    },
+  },
 };
 </script>

@@ -618,7 +626,7 @@ export default {
  text-align: center;
  font-size: 13px;
 }
-.list-wu{
+.list-wu {
  text-align: center;
  margin: 40px;
  color: #333;
@@ -683,7 +691,7 @@ export default {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    span {
-      color: #409EFF;
+      color: #409eff;
      display: block;
      font-size: 12px;
      line-height: 12px;
@@ -697,10 +705,11 @@ export default {
  border-bottom: 1px solid #e8e8e8;
  padding: 20px 0px 15px 0px;
  margin: 0 32px 0 22px;
- ::v-deep .uc-course-img {
+  ::v-deep .uc-course-img {
    width: 212px;
    img {
-      width: 212px;height:119px;
+      width: 212px;
+      height: 119px;
      border: 1px solid #f4f4f5;
    }
  }
@@ -716,7 +725,7 @@ export default {
      font-size: 14px;
      overflow: hidden;
      width: 90%;
-      word-break:break-all;
+      word-break: break-all;
      display: -webkit-box;
      // overflow: hidden;
      -webkit-box-orient: vertical;
@@ -725,13 +734,13 @@ export default {
    .uc-course-name {
      font-size: 16px;
      display: -webkit-box;
-  white-space:pre-wrap;
-  // word-wrap: break-word;
-  overflow: hidden;
-  text-overflow:ellipsis;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
-      word-break:break-all;
+      white-space: pre-wrap;
+      // word-wrap: break-word;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 1;
+      word-break: break-all;
      // font-weight: 700;
    }
    .uc-course-item {
@@ -752,11 +761,9 @@ export default {
      .btn-item {
        margin-right: 20px;
      }
-
    }
  }
  .uc-course-btns {
-
    text-align: right;
    .btn1 {
      height: 44px;