From 8ec96996c6dfa6b3240c09b8b6bfb371bfebe0e1 Mon Sep 17 00:00:00 2001
From: lyc <ly_cheng2023@163.com>
Date: Thu, 22 Aug 2024 09:42:55 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E9=A2=84=E8=A7=88pdf?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   1 +
 src/renderer/index.html                       |   2 +-
 .../src/components/file-preview/index.vue     | 113 ++++
 .../views/prepare/container/set-homework.vue  | 483 +++++++++---------
 4 files changed, 356 insertions(+), 243 deletions(-)
 create mode 100644 src/renderer/src/components/file-preview/index.vue

diff --git a/package.json b/package.json
index 71aafb4..b087903 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
     "pinia-plugin-persistedstate": "^3.2.1",
     "spark-md5": "^3.0.2",
     "vue-router": "^4.4.0",
+    "xgplayer": "^3.0.19",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {
diff --git a/src/renderer/index.html b/src/renderer/index.html
index 3441296..4cee16d 100644
--- a/src/renderer/index.html
+++ b/src/renderer/index.html
@@ -8,7 +8,7 @@
       http-equiv="Content-Security-Policy"
       content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:"
     /> -->
-    <meta http-equiv="Content-Security-Policy" content="connect-src *; default-src 'self'; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src * 'self' data: blob:" />
+    <meta http-equiv="Content-Security-Policy" content="connect-src *; default-src 'self'; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src * 'self' ;img-src * 'self' data: blob:" />
 
   </head>
 
diff --git a/src/renderer/src/components/file-preview/index.vue b/src/renderer/src/components/file-preview/index.vue
new file mode 100644
index 0000000..37fa232
--- /dev/null
+++ b/src/renderer/src/components/file-preview/index.vue
@@ -0,0 +1,113 @@
+<template>
+  <el-drawer v-model="model" class="preview-drawer" title="title" :modal="false" :with-header="false" append-to-body
+    size="50%" :before-close="handleClose">
+    <div class="flex drawer-header">
+      <div>
+        <div class="flex file-name">
+          <FileImage :size="30" :file-name="'xx.jpg'" />
+          <span class="name">地理0831-10</span>
+        </div>
+        <div class="flex file-tag">
+          <el-tag type="info" class="tag">图片</el-tag>
+          <el-tag type="info" class="tag">扩展素材</el-tag>
+        </div>
+      </div>
+      <div class="header-close" @click="onClose"><i class="iconfont icon-guanbi"></i></div>
+    </div>
+    <div class="drawer-content">
+      <!-- <iframe src="./aaa.pdf" width="600px" height="600px"></iframe> -->
+      <div ref="playerRef" class="video-box"></div>
+    </div>
+  </el-drawer>
+</template>
+<script setup>
+import { watch, ref, nextTick } from 'vue'
+import Player from 'xgplayer';
+import 'xgplayer/dist/index.min.css'
+import FileImage from '@/components/file-image/index.vue'
+
+
+const model = defineModel()
+const playerRef = ref();
+const handleClose = () => {
+
+}
+// 关闭
+const onClose = () => {
+  model.value = false
+}
+
+const init = () => {
+  nextTick(() => {
+    let player = new Player({
+      el: playerRef.value,
+      url: 'https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4',
+      width: '100%',
+      autoplay: false,// 是否自动播放（默认false）
+      autoplayMuted: true,// 是否自动静音自动播放（默认false）
+      screenShot: true,// 是否使用截图（默认false）
+      videoAttributes: {// video扩展属性
+          crossOrigin: 'anonymous',// 元素获取数据的 CORS 请求的配置
+      },
+      marginControls: false,// 是否开启画面和控制栏分离模式（默认false）
+      loop:true,// 是否开启循环播放（默认false）
+      volume:0.3,// 默认音量,取值范围0 ~ 1(默认0.6)
+     
+    });
+  })
+}
+
+watch(model, (newVal) => {
+  if (newVal) {
+    init()
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-drawer__body) {
+  padding: 0;
+}
+
+.preview-drawer {
+  padding: 0;
+}
+
+.drawer-header {
+  justify-content: space-between;
+  align-items: center;
+  background-color: #fff;
+
+  .file-name {
+    align-items: center;
+    margin-bottom: 5px;
+
+    .name {
+      margin-left: 5px;
+    }
+  }
+
+  .file-tag {
+    .tag {
+      margin-right: 10px;
+    }
+  }
+
+  .header-close {
+    cursor: pointer;
+
+    .icon-guanbi {
+      font-size: 20px;
+    }
+  }
+}
+
+.drawer-content {
+  margin-top: 10px;
+}
+
+.video-box {
+  width: 100%;
+  height: 300px
+}
+</style>
\ No newline at end of file
diff --git a/src/renderer/src/views/prepare/container/set-homework.vue b/src/renderer/src/views/prepare/container/set-homework.vue
index 5aa5d35..8cd743c 100644
--- a/src/renderer/src/views/prepare/container/set-homework.vue
+++ b/src/renderer/src/views/prepare/container/set-homework.vue
@@ -1,17 +1,17 @@
 <template>
-  <el-dialog v-model="dialogVisible" center top="10vh" width="600px" :show-close="false" append-to-body
+  <el-dialog v-model="model" center top="10vh" width="600px" :show-close="false" append-to-body
    style="border-radius: 10px; padding: 10px 15px;">
     <template #header>
       <div class="homerwork-header flex">
         <span>{{ title }}</span>
-        <i class="iconfont icon-guanbi" @click="cloneDialog"></i>
+        <i class="iconfont icon-guanbi" @click="cloneDialog(ruleFormRef)"></i>
       </div>
     </template>
     <div v-loading="setLoading">
-      <el-form :model="form" label-width="80px" ref="ruleForm" :rules="rules">
+      <el-form :model="form" label-width="80px" ref="ruleFormRef" :rules="rules">
         <el-form-item label="班级" prop="grade">
           <el-scrollbar max-height="200px" style="width: 100%;">
-            <el-tree ref="treeRef" :data="gradeList" :props="defaultProps" :load="getLoad" node-key="id"
+            <el-tree ref="treeRef" :props="defaultProps" :load="getLoad" node-key="id" :default-expanded-keys="defaultExpandedKeys"
               @check="handleCheckChange" lazy show-checkbox />
           </el-scrollbar>
         </el-form-item>
@@ -41,8 +41,8 @@
     </div>
     <template #footer>
       <div class="dialog-footer">
-        <el-button @click.stop="cloneDialog">取消</el-button>
-        <el-button type="primary" @click.stop="onSubmit('ruleForm')">
+        <el-button @click.stop="cloneDialog(ruleFormRef)">取消</el-button>
+        <el-button type="primary" @click.stop="onSubmit(ruleFormRef)">
           确定
         </el-button>
       </div>
@@ -50,256 +50,257 @@
   </el-dialog>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from 'vue'
 import { ElMessage } from 'element-plus'
 import { listClassmain, listClassgroup } from '@/api/classManage/index'
 import { saveByClassWorkArray } from '@/api/teaching/classwork'
 import useUserStore from '@/store/modules/user'
 import { uniqBy, groupBy } from 'lodash'
 
-export default {
-  props: {
-    modelValue: {
-      type: Boolean,
-      default: false
-    },
-    entpcourseid: {
-      default: ''
-    },
-    row: {
-      default: ''
-    },
-    title: {
-      type: String,
-      default: '布置作业'
-    }
+const props = defineProps({
+  entpcourseid: {
+    default: ''
   },
-  data() {
+  row: {
+    default: ''
+  },
+  title: {
+    type: String,
+    default: '布置作业'
+  }
+})
+const emit = defineEmits(['on-close', 'on-success'])
 
-    return {
-      dialogVisible: false,
-      defaultProps: {
-        children: 'children',
-        label: 'label',
-        isLeaf: 'leaf',
-      },
-      setLoading: false,
-      // 用户信息
-      userInfo: null,
-      // 班级列表
-      gradeList: [],
-      curGradeId: '',
-      // 小组列表
-      groupList: [],
-      // 选中的学生
-      studentList: [],
-      // 表单
-      form: {
-        feedback: '必做',
-        deaddate: '',
-        timelength: 1
-      },
-      // 表单规则
-      rules: {
-        grade: [
-          { validator: this.validateGrade, trigger: 'blur' }
-        ],
-        student: [
-          { validator: this.validateStudent, trigger: 'blur' }
-        ]
-      }
+const model = defineModel({ type: Boolean, default: false })
+const ruleFormRef = ref('')
+// 配置项
+const defaultProps = {
+  children: 'children',
+  label: 'label',
+  isLeaf: 'leaf',
+}
+const treeRef = ref(null);
+// 默认展开的节点
+const defaultExpandedKeys = ref([])
+// loading
+const setLoading = ref(false)
+// 用户信息
+const userInfo = useUserStore().user
+// 班级列表
+const gradeList = ref([])
+// 选中的学生列表
+const studentList = ref([])
+// 表单
+const form = reactive({
+  feedback: '必做',
+  deaddate: '',
+  timelength: 1
+})
+// 表单校验
+const validateGrade = (rule, value, callback) => {
+  if (studentList.value.length == 0) {
+    callback(new Error('请勾选班级或者学生'));
+  }
+  else {
+    callback()
+  }
+}
+const validateStudent = (rule, value, callback)=>{
+  if (studentList.value.length == 0) {
+    callback(new Error('学生不能为空'));
+  }
+  else {
+    callback()
+  }
+}
+const rules = reactive({
+  grade: [
+    { validator: validateGrade, trigger: 'blur' }
+  ],
+  student: [
+    { validator: validateStudent, trigger: 'blur' }
+  ]
+})
 
-    }
-  },
-  created() {
-    //截至时间默认值
-    this.form.deaddate = this.getCurrentDate() + ' ' + '10:00:00'
-    this.userInfo = useUserStore().user
-  },
-  methods: {
-    // 获取班级列表
-    getGradeList() {
-      listClassmain({ classuserid: this.userInfo.userId, pageSize: 100, status: 'open' }).then(res => {
-        let list = res.rows
-        list.forEach(item => {
-          item.label = item.caption
-          item.level = 0
-          item.children = []
-          item.classstudentlist = JSON.parse("[" + item.classstudentlist + "]")
-          item.classstudentlist.forEach(el => {
-            el.classId = item.id
-          })
-        })
-        this.gradeList = list
-      })
-    },
-    // 获取节点下一级
-    getLoad(node, resolve) {
-      if (node.level == 0) return resolve([])
-      // 获取二级节点 小组
-      if (node.level == 1) {
-        listClassgroup({ classid: node.key, orderby: 'orderidx', pageSize: 100 }).then(res => {
-          if (res.rows.length > 0) {
-            let ary = []
-            res.rows.forEach(item => {
-              if (item.parentid === 0) {
-                //studentGroup 小组学生
-                let studentGroup = JSON.parse("[" + item.studentlist + "]")
-                studentGroup.forEach(el => {
-                  el.label = el.name
-                  el.leaf = true
-                  el.level = 2,
-                    el.id = el.studentid
-                  el.classId = item.classid
-                })
-                ary.push({
-                  label: item.groupname,
-                  ...item,
-                  level: 1,
-                  children: studentGroup
-                })
-              }
+
+// 获取班级
+const getGradeList = async ()=> {
+  let { rows } = await listClassmain({ classuserid: userInfo.userId, pageSize: 100, status: 'open' })
+  rows.forEach(item => {
+    item.label = item.caption
+    item.level = 0
+    item.leaf = false
+    item.children = []
+    item.classstudentlist = JSON.parse("[" + item.classstudentlist + "]")
+    item.classstudentlist.forEach(el => {
+      el.classId = item.id
+    })
+  })
+  return rows
+}
+// 获取节点下一级
+const getLoad = async (node, resolve) => {
+  // 获取一级节点 班级
+  if (node.level == 0) {
+    gradeList.value = await getGradeList()
+    resolve(gradeList.value)
+  }
+  // 获取二级节点 小组
+  if (node.level == 1) {
+    listClassgroup({ classid: node.key, orderby: 'orderidx', pageSize: 100 }).then(res => {
+      if (res.rows.length > 0) {
+        let ary = []
+        res.rows.forEach(item => {
+          if (item.parentid === 0) {
+            //studentGroup 小组学生  为三级节点
+            let studentGroup = JSON.parse("[" + item.studentlist + "]")
+            studentGroup.forEach(el => {
+              el.label = el.name
+              el.leaf = true
+              el.level = 2
+                el.id = el.studentid
+              el.classId = item.classid
+            })
+            ary.push({
+              label: item.groupname,
+              leaf: false,
+              ...item,
+              level: 1,
+              // children 小组学生 三级节点 这样就不用再从接口拿
+              children: studentGroup
             })
-            resolve(ary)
-          }
-          else {
-            resolve([])
           }
         })
-      }
-      // 三级节点 小组学生
-      if (node.level == 2) {
-        resolve(node.data.children)
-      }
-
-    },
-    //节点勾选后触发  拿学生
-    handleCheckChange(data, checked) {
-      this.studentList = []
-      // 选中节点集合
-      let checkNodes = checked.checkedNodes
-      let ary = []
-      checkNodes.forEach(item => {
-        // 一级节点  班级
-        if (item.level == 0) {
-          ary = [...ary, ...(item.classstudentlist)]
-        }
-        // 二级节点 班级下面的小组
-        if (item.level == 1) {
-          ary = [...ary, ...(item.children)]
-        }
-        // 三级节点 小组下面的学生
-        if (item.level == 2) {
-          ary = [...ary, item]
-        }
-      })
-      this.studentList = uniqBy(ary, 'studentid')
-    },
-    // 删除学生
-    delStudent(index) {
-      this.studentList.splice(index, 1)
-    },
-    onSubmit(formName) {
-
-      this.$refs[formName].validate(valid => {
-        if (valid) {
-          /**
-         * 根据学生列表中的classId分班
-         * studentList 为选中的所有学生 这些学生可能来自不同班级
-         */
-          let gradeObj = groupBy(this.studentList, 'classId')
-          // 处理要提交的参数
-          let ary = []
-          for (const value in gradeObj) {
-            //这些参数 参照AIx web端 作业推送
-            let obj = {
-              id: 0,
-              parentid: this.row.id,
-              classid: value,
-              classcourseid: 0,
-              entpcourseid: this.entpcourseid,
-              studentlist: JSON.stringify(gradeObj[value]),
-              feedback: this.form.feedback,
-              workkey: "",
-              timelength: this.form.timelength,
-              weights: 1,
-              deaddate: this.form.deaddate,
-              workdate: this.getCurrentDate(),
-              uniquekey: this.row.uniquekey,
-              entpcourseworklist: "[" + this.row.entpcourseworklist + "]",
-              needMsgNotifine: 'false',
-              msgkey: 'newclasswork',
-              title: "作业任务",
-              msgcontent: '',
-              teachername: this.userInfo.nickName,
-              unixstamp: new Date().getTime(),
-              worktype: this.row.worktype
-            }
-            
-            ary.push(obj)
-          }
-          this.setLoading = true
-          saveByClassWorkArray({
-            classworkarray: JSON.stringify(ary)
-          }).then(() => {
-            this.setLoading = false
-            ElMessage.success('操作成功')
-            this.cloneDialog()
-          }).catch(()=>{
-            this.setLoading = false
-          })
-        } else {
-          return false
-        }
-      })
-    },
-    // 关闭弹窗
-    cloneDialog() {
-      this.$emit('on-close')
-      this.studentList = []
-      this.$refs['ruleForm'].resetFields();
-    },
-    // 获取当前年月日
-    getCurrentDate() {
-      const now = new Date();
-      const year = now.getFullYear();
-      let month = now.getMonth() + 1; // 月份是从0开始的，所以需要+1
-      let day = now.getDate()
-      if(month < 10){
-        month = '0' + month
-      }
-      if(day < 10){
-        day = '0' + day
-      }
-      return `${year}-${month}-${day}`;
-    },
-    validateGrade(rule, value, callback) {
-      if (this.studentList.length == 0) {
-        callback(new Error('请勾选班级或者学生'));
+        resolve(ary)
       }
       else {
-        callback()
+        // 班级下面没有小组 直接取学生
+        let students = node.data.classstudentlist
+        students.forEach(item =>{
+          item.label = item.name
+          item.level = 2
+          item.leaf = true
+        })
+        resolve(students)
       }
-    },
-    validateStudent(rule, value, callback) {
-      if (this.studentList.length == 0) {
-        callback(new Error('学生不能为空'));
-      }
-      else {
-        callback()
-      }
-    },
-  },
-  watch: {
-    modelValue(val) {
-      this.dialogVisible = val
-      if (val) {
-        this.getGradeList()
-      }
-    }
-  },
+    })
+  }
+  // 三级节点 小组学生
+  if (node.level == 2) {
+    resolve(node.data.children)
+  }
 
 }
+//节点勾选后触发  拿学生
+const handleCheckChange = (data, checked)=> {
+  studentList.value = []
+  // 选中节点集合
+  let checkNodes = checked.checkedNodes
+  let ary = []
+  checkNodes.forEach(item => {
+    // 一级节点  班级
+    if (item.level == 0) {
+      ary = [...ary, ...(item.classstudentlist)]
+    }
+    // 二级节点 班级下面的小组
+    if (item.level == 1) {
+      ary = [...ary, ...(item.children)]
+    }
+    // 三级节点 小组下面的学生
+    if (item.level == 2) {
+      ary = [...ary, item]
+    }
+  })
+  studentList.value = uniqBy(ary, 'studentid')
+}
+// 删除学生
+const delStudent = (index) => {
+  studentList.value.splice(index, 1)
+}
+
+const onSubmit = (formEl)=> {
+  if(!formEl) return
+  formEl.validate(valid => {
+    if (valid) {
+      /**
+     * 根据学生列表中的classId分班
+     * studentList 为选中的所有学生 这些学生可能来自不同班级
+     */
+      let gradeObj = groupBy(studentList.value, 'classId')
+      // 处理要提交的参数
+      let ary = []
+      for (const value in gradeObj) {
+        //这些参数 参照AIx web端 作业推送
+        let obj = {
+          id: 0,
+          parentid: props.row.id,
+          classid: value,
+          classcourseid: 0,
+          entpcourseid: props.entpcourseid,
+          studentlist: JSON.stringify(gradeObj[value]),
+          feedback: form.feedback,
+          workkey: "",
+          timelength: form.timelength,
+          weights: 1,
+          deaddate: form.deaddate,
+          workdate: getCurrentDate(),
+          uniquekey: props.row.uniquekey,
+          entpcourseworklist: "[" + props.row.entpcourseworklist + "]",
+          needMsgNotifine: 'false',
+          msgkey: 'newclasswork',
+          title: "作业任务",
+          msgcontent: '',
+          teachername: userInfo.nickName,
+          unixstamp: new Date().getTime(),
+          worktype: props.row.worktype
+        }
+        ary.push(obj)
+      }
+      setLoading.value = true
+      saveByClassWorkArray({
+        classworkarray: JSON.stringify(ary)
+      }).then(() => {
+        setLoading.value = false
+        ElMessage.success('操作成功')
+        emit('on-success')
+        cloneDialog(formEl)
+      }).catch(()=>{
+        setLoading.value = false
+      })
+    } else {
+      return false
+    }
+  })
+}
+
+// 关闭弹窗
+const cloneDialog = (formEl)=> {
+  studentList.value = []
+  treeRef.value.setCheckedKeys([])
+  defaultExpandedKeys.value = []
+  formEl.resetFields()
+  model.value = false
+}
+// 获取当前年月日
+const getCurrentDate = ()=> {
+  const now = new Date();
+  const year = now.getFullYear();
+  let month = now.getMonth() + 1; // 月份是从0开始的，所以需要+1
+  let day = now.getDate()
+  if(month < 10){
+    month = '0' + month
+  }
+  if(day < 10){
+    day = '0' + day
+  }
+  return `${year}-${month}-${day}`;
+}
+
+onMounted(()=>{
+  // 默认当前
+  form.deaddate = getCurrentDate() + ' ' + '10:00:00'
+})
 </script>
 
 <style lang="scss" scoped>
@@ -326,7 +327,5 @@ export default {
 :deep(.el-checkbox){
     transform : scale(1.3) 
 }
-:deep(.el-icon){
-  transform : scale(1.3) 
-}
+
 </style>
\ No newline at end of file