理疗新增视频和音频开关

src/views/his/project/index.vue

@@ -132,23 +132,137 @@
         <el-form-item label="第四内容" prop="fourthContent">
           <Editor ref="myeditor4"   @on-text-change="updateText4"/>
         </el-form-item>
+        <el-form-item label="视频上传" prop="fourthContent">
+          <el-button  size="small" type="success" @click="openVideoLibrary">视频库选取</el-button>
+        </el-form-item>
+        <el-form-item v-if="this.form.videoUrl" label="视频播放">
+          <video  ref="myvideo" :src="this.form.videoUrl" id="video" width="100%" height="300px" controls></video>
+        </el-form-item>
+        <el-form-item label="音频状态" prop="soundStatus">
+          <el-radio-group v-model="form.soundStatus">
+            <el-radio :label="0">关</el-radio>
+            <el-radio :label="1">开</el-radio>
+          </el-radio-group>
+        </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+
+    <!-- 视频库选择对话框 -->
+    <el-dialog title="视频库选择" :visible.sync="libraryOpen" width="900px" append-to-body>
+      <!-- 搜索条件 -->
+      <el-form :inline="true" :model="libraryQueryParams" class="library-search">
+        <el-form-item label="素材名称">
+          <el-input
+            v-model="libraryQueryParams.resourceName"
+            placeholder="请输入素材名称"
+            clearable
+            size="small"
+            @keyup.enter.native="handleLibraryQuery"
+          />
+        </el-form-item>
+        <el-form-item label="类型">
+          <el-select v-model="libraryQueryParams.typeId" @change="changeCateType" placeholder="请选择素材类型" clearable size="small">
+            <el-option
+              v-for="item in typeOptions"
+              :key="item.dictValue"
+              :label="item.dictLabel"
+              :value="item.dictValue"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="子类型">
+          <el-select v-model="libraryQueryParams.typeSubId" placeholder="请选择素材子类型" clearable size="small">
+            <el-option
+              v-for="item in typeSubOptions"
+              :key="item.dictValue"
+              :label="item.dictLabel"
+              :value="item.dictValue"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleLibraryQuery">搜索</el-button>
+          <el-button icon="el-icon-refresh" size="mini" @click="resetLibraryQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+
+      <!-- 视频列表 -->
+      <el-table v-loading="libraryLoading" :data="libraryList" @row-click="handleLibrarySelect" highlight-current-row border>
+        <el-table-column label="素材名称" align="center" prop="resourceName" />
+        <el-table-column label="文件名称" align="center" prop="fileName" />
+        <el-table-column label="缩略图" align="center">
+          <template slot-scope="scope">
+            <el-popover
+              placement="right"
+              title=""
+              trigger="hover"
+            >
+              <img alt="" slot="reference" :src="scope.row.thumbnail" style="width: 80px; height: 50px" />
+              <img alt="" :src="scope.row.thumbnail" style="max-width: 150px;" />
+            </el-popover>
+          </template>
+        </el-table-column>
+        <el-table-column label="视频时长" align="center">
+          <template slot-scope="scope">
+            <span>{{ formatDuration(scope.row.duration) }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <pagination
+        v-show="libraryTotal>0"
+        :total="libraryTotal"
+        :page.sync="libraryQueryParams.pageNum"
+        :limit.sync="libraryQueryParams.pageSize"
+        @pagination="getLibraryList"
+      />
+
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="confirmVideoSelection">确 定</el-button>
+        <el-button @click="cancelVideoSelection">取 消</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import { listProject, getProject, delProject, addProject, updateProject, exportProject } from "@/api/his/project";
 import Editor from '@/components/Editor/wang';
+import {getSignature, uploadHuaWeiObs, uploadHuaWeiVod} from "@/api/common";
+import {getThumbnail} from "@/api/course/userVideo";
+import TcVod from "vod-js-sdk-v6";
+import { uploadObject } from "@/utils/cos.js";
+import { uploadToOBS } from "@/utils/obs.js";
+import Pagination from "@/components/Pagination";
+import { listVideoResource } from '@/api/course/videoResource';
+import { getCateListByPid, getCatePidList } from '@/api/course/userCourseCategory'
 export default {
   name: "Project",
-   components: { Editor },
+   components: { Editor, Pagination },
   data() {
     return {
+
+      // 视频库选择相关数据
+      libraryOpen: false,
+      libraryLoading: false,
+      libraryTotal: 0,
+      libraryList: [],
+      selectedVideo: null,
+      libraryQueryParams: {
+        isTranscode:1,
+        pageNum: 1,
+        pageSize: 10,
+        resourceName: null,
+        typeId: null,
+        typeSubId: null,
+      },
+      typeOptions: [],
+      typeSubOptions: [],
       // 遮罩层
       loading: true,
       // 导出遮罩层
@@ -191,6 +305,9 @@ export default {
         dayName: [
           { required: true, message: "天数名称不能为空", trigger: "blur" }
         ],
+        soundStatus: [
+          { required: true, message: "请选择音频状态", trigger: "change" }
+        ],
         // meridiansImgUrl: [
         //   { required: true, message: "图片不能为空", trigger: "change" }
         // ],
@@ -225,6 +342,84 @@ export default {
     this.getList();
   },
   methods: {
+
+    // 打开视频库对话框
+    openVideoLibrary() {
+      this.libraryOpen = true;
+      this.getRootTypeList()
+      this.selectedVideo = null;
+      this.getLibraryList();
+    },
+
+    getRootTypeList() {
+      getCatePidList().then(response => {
+        this.typeOptions = response.data
+      });
+    },
+    async changeCateType(val) {
+      this.libraryQueryParams.typeSubId = null
+      this.typeSubOptions = []
+      if (!val) {
+        return
+      }
+      await getCateListByPid(val).then(response => {
+        this.typeSubOptions = response.data
+      })
+    },
+        /** 查询视频库列表 */
+    getLibraryList() {
+      this.libraryLoading = true;
+      listVideoResource(this.libraryQueryParams).then(response => {
+        this.libraryList = response.rows;
+        this.libraryTotal = response.total;
+        this.libraryLoading = false;
+      });
+    },
+    /** 搜索视频库按钮操作 */
+    handleLibraryQuery() {
+      this.libraryQueryParams.pageNum = 1;
+      this.getLibraryList();
+    },
+    /** 重置视频库查询按钮操作 */
+    resetLibraryQuery() {
+      this.libraryQueryParams = {
+        pageNum: 1,
+        pageSize: 10,
+        resourceName: null,
+        typeId: null,
+        typeSubId: null
+      };
+      this.handleLibraryQuery();
+    },
+    /** 视频库选择行点击 */
+    handleLibrarySelect(row) {
+      this.selectedVideo = row;
+    },
+    /** 格式化视频时长 */
+    formatDuration(seconds) {
+      if (!seconds) return '00:00';
+
+      const minutes = Math.floor(seconds / 60);
+      const remainingSeconds = seconds % 60;
+
+      return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
+    },
+    /** 确认选择视频 */
+    confirmVideoSelection() {
+      if (!this.selectedVideo) {
+        this.$message.warning("请选择一个视频");
+        return;
+      }
+      this.form.videoUrl = this.selectedVideo.videoUrl
+      this.libraryOpen = false;
+    },
+    /** 取消视频选择 */
+    cancelVideoSelection() {
+      this.libraryOpen = false;
+      this.selectedVideo = null;
+    },
+
+
     updateText1(text){
       this.form.firstContent = text
     },
@@ -382,3 +577,25 @@ export default {
   }
 };
 </script>
+
+<style>
+.progress-container {
+  margin-bottom: 5px; /* 进度条之间的间距 */
+}
+
+.progress-label {
+  display: block;
+  font-weight: bold;
+  font-size: 13px;
+  color: #303331; /* 标签颜色，可以根据需要调整 */
+}
+
+/* 视频库选择对话框样式 */
+.library-search {
+  margin-bottom: 15px;
+}
+
+.el-table .el-table__row:hover {
+  cursor: pointer;
+}
+</style>