嵌入视频待优化版本

lty
1 parent 231034b9
Showing 3 changed files with 134 additions and 0 deletions
ant-design-vue-jeecg/src/views/system/task/ReceiptTaskHeaderList.vue
ant-design-vue-jeecg/src/views/system/task/ShipmentTaskHeaderList.vue
ant-design-vue-jeecg/src/views/system/task/VideoModal.vue
@@ -170,6 +170,20 @@
           <a-popconfirm v-if="record.status <= 10" v-has="'taskHeader:cancelTask'" title="确定取消任务吗?" @confirm="() => cancelTask(record)">
            <a-button type="danger">取消</a-button>
           </a-popconfirm>
+
+          <!-- 添加问号图标按钮 -->
+          <a-tooltip placement="topLeft" title="点击进行流程演示">
+            <a-button shape="circle" icon="question" @click="openVideoModal(record)" />
+          </a-tooltip>
+
+          <!-- VideoModal 组件 -->
+          <VideoModal
+            :visible="videoModalVisible"
+            :videoUrl="videoUrl"
+            :videoDescription="videoDescription"
+            @update:visible="closeVideoModal"
+          />
+
         </span>
  
       </a-table>
@@ -210,12 +224,14 @@ import {filterObj} from &quot;@/utils/util&quot;;
 import MaterialTaskModal from "./modules/MaterialTaskModal";
 import CallReceiptBoxModal from "@views/system/task/modules/CallReceiptBoxModal";
 import CallReceiptEmptyBoxModal from "@views/system/task/modules/CallReceiptEmptyBoxModal";
+import VideoModal from "@views/system/task/VideoModal.vue";
  
  
 export default {
   name: "ReceiptTaskHeaderList",
   mixins: [JeecgListMixin],
   components: {
+    VideoModal,
     CallReceiptEmptyBoxModal,
     CallReceiptBoxModal,
     ManyEmptyInTaskModal,
@@ -230,6 +246,10 @@ export default {
       selectIndex: null,
       description: '任务表管理页面',
       zoneList: [],
+      selectedRowKeys: [],  // 假设这个数组存储了选中的任务ID或对象
+      videoModalVisible: false,  // 控制视频模态框的显示
+      videoUrl: '',
+      videoDescription: '',
       zoneOptions:[],
       firstLoad:0,
       isorter: {
@@ -416,6 +436,27 @@ export default {
     }
   },
   methods: {
+
+
+    // 打开视频模态框
+    openVideoModal(record) {
+      // 防止重复打开模态框
+      if (this.videoModalVisible) return;  // 如果已经打开，不再执行后续代码
+
+      if (record && record.taskType === 100) {
+        this.videoUrl = 'http://113.45.231.114:5000/d/%E4%B8%AD%E5%9B%BD%E7%A7%BB%E5%8A%A8/%E4%B8%B4%E6%97%B6%E6%96%87%E4%BB%B6/12%E6%9C%8826%E6%97%A5_compressed.mp4?sign=QtsysiX30DPzgX7eFV10C3AdzVdC7YzP1YyGuOVewMY=:0';  // 设置视频URL
+        this.videoDescription = '整盘入库教学';  // 设置视频描述
+        this.videoModalVisible = true;  // 显示模态框
+      } else {
+        console.log("Task status is not 20, video modal will not open");
+      }
+    },
+
+    // 关闭视频模态框
+    closeVideoModal(value) {
+      this.videoModalVisible = value;  // 更新 videoModalVisible 来关闭模态框
+    },
+
     handleTableChange(pagination, filters, sorter) {
       //分页、排序、筛选变化时触发
       if (Object.keys(sorter).length > 0) {
@@ -561,6 +602,8 @@ export default {
       });
     },
     executeTask(record) {
+      // 如果有任何执行操作，确保关闭模态框
+      this.videoModalVisible = false;
       this.loading = true;
       this.model = Object.assign({}, record);
       execute(this.model).then((res) => {
@@ -172,6 +172,19 @@
           <a-popconfirm v-if="record.status <= 10 && record.taskType != 600 " v-has="'taskHeader:switchTask'" title="确定切换任务吗?" @confirm="() => switchTask(record)">
             <a-button type="danger">切换任务</a-button>
           </a-popconfirm>
+
+          <!-- 添加问号图标按钮 -->
+          <a-tooltip placement="topLeft" title="点击进行流程演示">
+            <a-button shape="circle" icon="question" @click="openVideoModal(record)" />
+          </a-tooltip>
+
+          <!-- VideoModal 组件 -->
+          <VideoModal
+            :visible="videoModalVisible"
+            :videoUrl="videoUrl"
+            :videoDescription="videoDescription"
+            @update:visible="closeVideoModal"
+          />
         </span>
  
       </a-table>
@@ -211,11 +224,13 @@ import ManyEmptyOutTaskModal from &quot;./modules/ManyEmptyOutTaskModal&quot;;
 import CallShipmentBoxModal from "@views/system/task/modules/CallShipmentBoxModal";
 import UpdatePriority from "@views/system/task/modules/UpdatePriority.vue";
 import ShipmentMaterialModal from "@views/system/task/modules/ShipmentMaterialModal.vue";
+import VideoModal from "@views/system/task/VideoModal.vue";
  
 export default {
   name: "ShipmentTaskHeaderList",
   mixins: [JeecgListMixin],
   components: {
+    VideoModal,
     ShipmentMaterialModal,
     CallShipmentBoxModal,
     ManyEmptyOutTaskModal,
@@ -231,6 +246,10 @@ export default {
       description: '任务表管理页面',
       zoneList: [],
       firstLoad:0,
+      selectedRowKeys: [],  // 假设这个数组存储了选中的任务ID或对象
+      videoModalVisible: false,  // 控制视频模态框的显示
+      videoUrl: '',
+      videoDescription: '',
       isorter: {
         column: 'status',
         order: 'asc',
@@ -408,6 +427,28 @@ export default {
     }
   },
   methods: {
+
+
+    // 打开视频模态框
+    openVideoModal(record) {
+      // 防止重复打开模态框
+      if (this.videoModalVisible) return;  // 如果已经打开，不再执行后续代码
+
+      if (record && record.taskType === 300) {
+        this.videoUrl = 'http://113.45.231.114:5000/d/%E4%B8%AD%E5%9B%BD%E7%A7%BB%E5%8A%A8/%E4%B8%B4%E6%97%B6%E6%96%87%E4%BB%B6/12%E6%9C%8827%E6%97%A5_compressed.mp4?sign=KQHSFbdRSVEt01YZ6HPQpUqY1EINyd-7KbVOp0Ij3uA=:0';  // 设置视频URL
+        this.videoDescription = '整盘出库流程';  // 设置视频描述
+        this.videoModalVisible = true;  // 显示模态框
+      } else {
+        console.log("Task status is not 20, video modal will not open");
+      }
+    },
+
+    // 关闭视频模态框
+    closeVideoModal(value) {
+      this.videoModalVisible = value;  // 更新 videoModalVisible 来关闭模态框
+    },
+
+
     handleTableChange(pagination, filters, sorter) {
       //分页、排序、筛选变化时触发
       if (Object.keys(sorter).length > 0) {
+<template>
+  <a-modal :visible="visible" @cancel="handleClose" @ok="handleClose" title="流程演示">
+    <div>
+      <!-- 添加 autoplay 和 muted 属性来确保视频自动播放 -->
+      <video :src="videoUrl" controls autoplay muted></video>
+      <p>{{ videoDescription }}</p>
+    </div>
+    <!-- 将确定和取消按钮替换为一个“已完成学习”按钮 -->
+    <template #footer>
+      <a-button type="primary" @click="handleComplete">已学习</a-button>
+    </template>
+  </a-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    visible: {
+      type: Boolean,
+      required: true
+    },
+    videoUrl: {
+      type: String,
+      default: ''
+    },
+    videoDescription: {
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+    handleClose() {
+      this.$emit('update:visible', false);  // 关闭模态框时通知父组件
+    },
+    // 点击“已完成学习”按钮后的处理逻辑
+    handleComplete() {
+      this.$emit('update:visible', false);  // 关闭模态框
+      this.$emit('completed');  // 触发已完成学习的事件
+    },
+  }
+};
+</script>
+
+<style scoped>
+/* 添加一些自定义样式，例如视频大小调整 */
+video {
+  max-width: 100%;
+  height: auto;
+}
+</style>