userCourseCatalogDetails.vue 33 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964
  1. <template>
  2. <div class="app-container">
  3. <div style="padding-bottom: 20px">
  4. <span v-if="courseName!=null">{{ courseName }}</span>
  5. </div>
  6. <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
  7. <el-form-item label="小节名称" prop="title">
  8. <el-input
  9. v-model="queryParams.title"
  10. placeholder="请输入小节名称"
  11. clearable
  12. size="small"
  13. @keyup.enter.native="handleQuery"
  14. />
  15. </el-form-item>
  16. <el-form-item>
  17. <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
  18. <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  19. </el-form-item>
  20. </el-form>
  21. <el-row :gutter="10" class="mb8">
  22. <el-col :span="1.5">
  23. <el-button
  24. type="primary"
  25. plain
  26. icon="el-icon-plus"
  27. size="mini"
  28. @click="handleAdd"
  29. v-hasPermi="['course:userCourseVideo:add']"
  30. >新增目录</el-button>
  31. </el-col>
  32. <el-col :span="1.5">
  33. <el-button
  34. type="primary"
  35. plain
  36. :disabled="!ids || ids.length <= 0"
  37. size="mini"
  38. @click="openUpdates"
  39. v-hasPermi="['course:userCourseVideo:updateTime']"
  40. >修改时间</el-button>
  41. </el-col>
  42. <el-col :span="1.5">
  43. <el-button
  44. type="primary"
  45. plain
  46. size="mini"
  47. @click="openAdds"
  48. v-hasPermi="['course:userCourseVideo:batchAdd']"
  49. >批量添加</el-button>
  50. </el-col>
  51. <el-col :span="1.5">
  52. <el-button
  53. type="primary"
  54. plain
  55. size="mini"
  56. v-if="isPrivate === 1"
  57. @click="updateRedPageckeOpen"
  58. v-hasPermi="['course:userCourseVideo:updateRed']"
  59. >修改红包</el-button>
  60. </el-col>
  61. <el-col :span="1.5">
  62. <el-button
  63. type="danger"
  64. plain
  65. icon="el-icon-delete"
  66. size="mini"
  67. :disabled="multiple"
  68. @click="handleDelete"
  69. v-hasPermi="['course:userCourseVideo:remove']"
  70. >删除</el-button>
  71. </el-col>
  72. <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
  73. </el-row>
  74. <el-table border v-loading="loading" :data="userCourseVideoList" @selection-change="handleSelectionChange">
  75. <el-table-column type="selection" width="55" align="center" />
  76. <el-table-column label="视频ID" align="center" prop="videoId" />
  77. <!-- <el-table-column label="轮次" align="center" prop="round" />-->
  78. <el-table-column label="小节名称" align="center" show-overflow-tooltip prop="title" />
  79. <el-table-column label="视频文件名称" align="center" show-overflow-tooltip prop="fileName" >
  80. </el-table-column>
  81. <el-table-column label="视频时长" align="center" prop="duration">
  82. <template slot-scope="{ row }">
  83. {{ formatDuration(row.duration) }}
  84. </template>
  85. </el-table-column>
  86. <el-table-column label="看课开始时间" align="center" prop="duration">
  87. <template slot-scope="{ row }">
  88. <el-tag v-if="row.viewStartTime">{{row.viewStartTime}}</el-tag>
  89. <el-tag type="danger" v-if="!row.viewStartTime">无</el-tag>
  90. </template>
  91. </el-table-column>
  92. <el-table-column label="看课结束时间" align="center" prop="duration">
  93. <template slot-scope="{ row }">
  94. <el-tag v-if="row.viewEndTime">{{row.viewEndTime}}</el-tag>
  95. <el-tag type="danger" v-if="!row.viewEndTime">无</el-tag>
  96. </template>
  97. </el-table-column>
  98. <el-table-column label="领取红包时间" align="center" prop="duration">
  99. <template slot-scope="{ row }">
  100. <el-tag v-if="row.lastJoinTime">{{ row.lastJoinTime }}</el-tag>
  101. <el-tag type="danger" v-if="!row.lastJoinTime">无</el-tag>
  102. </template>
  103. </el-table-column>
  104. <el-table-column label="红包金额" align="center" prop="redPacketMoney" v-if="isPrivate === 1"/>
  105. <el-table-column label="排序" align="center" prop="courseSort" />
  106. <el-table-column label="上传时间" align="center" prop="createTime" />
  107. <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
  108. <template slot-scope="scope">
  109. <el-button
  110. size="mini"
  111. type="text"
  112. icon="el-icon-edit"
  113. @click="handleUpdate(scope.row)"
  114. v-hasPermi="['course:userCourseVideo:edit']"
  115. >修改</el-button>
  116. <el-button
  117. size="mini"
  118. type="text"
  119. icon="el-icon-edit"
  120. @click="handleComment(scope.row)"
  121. >查看评论</el-button>
  122. <el-button
  123. size="mini"
  124. type="text"
  125. icon="el-icon-delete"
  126. @click="handleDelete(scope.row)"
  127. v-hasPermi="['course:userCourseVideo:remove']"
  128. >删除</el-button>
  129. </template>
  130. </el-table-column>
  131. </el-table>
  132. <pagination
  133. v-show="total>0"
  134. :total="total"
  135. :page.sync="queryParams.pageNum"
  136. :limit.sync="queryParams.pageSize"
  137. @pagination="getList"
  138. />
  139. <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body >
  140. <el-form ref="form" :model="form" :rules="rules" label-width="110px" v-loading="uploadLoading">
  141. <el-form-item label="视频标题" prop="title">
  142. <el-input v-model="form.title" placeholder="请输入内容" />
  143. </el-form-item>
  144. <el-form-item label="视频描述" prop="description">
  145. <el-input v-model="form.description" type="textarea" :rows="2" placeholder="请输入内容" />
  146. </el-form-item>
  147. <el-form-item label="轮次" prop="round">
  148. <el-input v-model="form.round" placeholder="请输入内容" />
  149. </el-form-item>
  150. <el-form-item label="课程排序" prop="courseSort">
  151. <el-input-number v-model="form.courseSort" :min="1" ></el-input-number>
  152. </el-form-item>
  153. <!-- <el-form-item label="看课时间" prop="timeRange" v-if="isPrivate === 1">-->
  154. <!-- <el-time-picker-->
  155. <!-- is-range-->
  156. <!-- v-model="form.timeRange"-->
  157. <!-- range-separator="至"-->
  158. <!-- start-placeholder="开始时间"-->
  159. <!-- value-format="HH:mm:ss"-->
  160. <!-- end-placeholder="结束时间"-->
  161. <!-- placeholder="选择时间范围">-->
  162. <!-- </el-time-picker>-->
  163. <!-- </el-form-item>-->
  164. <!-- <el-form-item label="领取红包时间" prop="lastJoinTime" v-if="isPrivate === 1">-->
  165. <!-- <el-time-picker-->
  166. <!-- v-model="form.lastJoinTime"-->
  167. <!-- :selectableRange="form.timeRange"-->
  168. <!-- value-format="HH:mm:ss"-->
  169. <!-- placeholder="选择时间范围">-->
  170. <!-- </el-time-picker>-->
  171. <!-- <p style="color: red;margin: 0;font-size: 12px">超过领取红包时间,只允许看课,不允许领取红包</p>-->
  172. <!-- </el-form-item>-->
  173. <el-form-item label="视频缩略图" prop="thumbnail">
  174. <el-upload
  175. v-model="form.thumbnail"
  176. class="avatar-uploader"
  177. :action="uploadUrl"
  178. :show-file-list="false"
  179. :on-success="handleAvatarSuccess"
  180. :before-upload="beforeAvatarUpload">
  181. <img v-if="form.thumbnail" :src="form.thumbnail" class="avatar" width="300px">
  182. <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  183. </el-upload>
  184. </el-form-item>
  185. <video-upload
  186. :type = "1"
  187. :isPrivate = "isPrivate"
  188. :fileKey.sync = "form.fileKey"
  189. :fileSize.sync = "form.fileSize"
  190. :videoUrl.sync="videoUrl"
  191. :fileName.sync="form.fileName"
  192. :line_1.sync="form.lineOne"
  193. :line_2.sync="form.lineTwo"
  194. :line_3.sync="form.lineThree"
  195. :thumbnail.sync="form.thumbnail"
  196. :uploadType.sync="form.uploadType"
  197. :isTranscode.sync="form.isTranscode"
  198. :transcodeFileKey.sync="form.transcodeFileKey"
  199. @video-duration="handleVideoDuration"
  200. @change="handleVideoChange"
  201. @selectProjects="handleSelectProjects"
  202. ref="videoUpload"
  203. append-to-body
  204. />
  205. <el-form-item label="课题选择" prop="questionBankId" v-if="isPrivate === 1">
  206. <el-button size="small" type="primary" @click="chooseQuestionBank">选取课题</el-button>
  207. <el-table border width="100%" style="margin-top:5px;" :data="form.questionBankList">
  208. <el-table-column label="问题" align="center" prop="title">
  209. <template slot-scope="scope">
  210. <el-tooltip class="item" effect="dark" :content="scope.row.title" placement="top">
  211. <div style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis;">
  212. <span>{{ scope.row.title }}</span>
  213. </div>
  214. </el-tooltip>
  215. </template>
  216. </el-table-column>
  217. <el-table-column label="类别" align="center" prop="type">
  218. <template slot-scope="scope">
  219. <dict-tag :options="typeOptions" :value="scope.row.type"/>
  220. </template>
  221. </el-table-column>
  222. <el-table-column label="答案" align="center" prop="answer" />
  223. <el-table-column label="操作" align="center" width="100px" fixed="right">
  224. <template slot-scope="scope">
  225. <el-button
  226. size="mini"
  227. type="text"
  228. icon="el-icon-delete"
  229. @click="handleQuestionBankDelete(scope.row)"
  230. >删除</el-button>
  231. </template>
  232. </el-table-column>
  233. </el-table>
  234. </el-form-item >
  235. <el-form-item label="红包金额" prop="redPacketMoney" v-if="isPrivate === 1">
  236. <el-input-number v-model="form.redPacketMoney" :min="0.1" :max="200" :step="0.1" ></el-input-number>
  237. </el-form-item>
  238. </el-form>
  239. <div slot="footer" class="dialog-footer">
  240. <el-button type="primary" @click="submitForm">确 定</el-button>
  241. <el-button @click="cancel">取 消</el-button>
  242. </div>
  243. </el-dialog>
  244. <el-dialog :title="title" :visible.sync="updateBatchData.open" width="1000px" append-to-body >
  245. <el-form ref="form" :model="updateBatchData.form" label-width="110px">
  246. <el-form-item label="看课时间" prop="timeRange">
  247. <el-time-picker
  248. is-range
  249. v-model="updateBatchData.form.timeRange"
  250. range-separator="至"
  251. start-placeholder="开始时间"
  252. value-format="HH:mm:ss"
  253. end-placeholder="结束时间"
  254. placeholder="选择时间范围">
  255. </el-time-picker>
  256. </el-form-item>
  257. <el-form-item label="领取红包时间" prop="lastJoinTime">
  258. <el-time-picker
  259. v-model="updateBatchData.form.lastJoinTime"
  260. :selectableRange="updateBatchData.form.timeRange"
  261. value-format="HH:mm:ss"
  262. placeholder="选择时间范围">
  263. </el-time-picker>
  264. <p style="color: red;margin: 0;font-size: 12px">超过领取红包时间,只允许看课,不允许领取红包</p>
  265. </el-form-item>
  266. </el-form>
  267. <div slot="footer" class="dialog-footer">
  268. <el-button type="primary" @click="updateBatch">确 定</el-button>
  269. <el-button @click="updateBatchData.open = false">取 消</el-button>
  270. </div>
  271. </el-dialog>
  272. <el-dialog :title="questionBank.title" :visible.sync="questionBank.open" width="1000px" append-to-body >
  273. <question-bank ref="questionBank" @questionBankResult="questionBankResult" ></question-bank>
  274. </el-dialog>
  275. <el-dialog title="视频库选择" :visible.sync="addBatchData.open" width="900px" append-to-body>
  276. <!-- 搜索条件 -->
  277. <el-form :inline="true" :model="addBatchData.queryParams" class="library-search">
  278. <el-form-item label="素材名称">
  279. <el-input
  280. v-model="addBatchData.queryParams.resourceName"
  281. placeholder="请输入素材名称"
  282. clearable
  283. size="small"
  284. @keyup.enter.native="resourceList"
  285. />
  286. </el-form-item>
  287. <el-form-item label="类型">
  288. <el-select v-model="addBatchData.queryParams.typeId" @change="changeCateType" placeholder="请选择素材类型" clearable size="small">
  289. <el-option
  290. v-for="item in addBatchData.typeOptions"
  291. :key="item.dictValue"
  292. :label="item.dictLabel"
  293. :value="item.dictValue"
  294. />
  295. </el-select>
  296. </el-form-item>
  297. <el-form-item label="子类型">
  298. <el-select v-model="addBatchData.queryParams.typeSubId" placeholder="请选择素材子类型" clearable size="small">
  299. <el-option
  300. v-for="item in addBatchData.typeSubOptions"
  301. :key="item.dictValue"
  302. :label="item.dictLabel"
  303. :value="item.dictValue"
  304. />
  305. </el-select>
  306. </el-form-item>
  307. <el-form-item>
  308. <el-button type="primary" icon="el-icon-search" size="mini" @click="resourceList">搜索</el-button>
  309. </el-form-item>
  310. </el-form>
  311. <!-- 视频列表 -->
  312. <el-table v-loading="addBatchData.loading" :data="addBatchData.list" @selection-change="handVideoleSelectionChange" height="400px">
  313. <el-table-column type="selection" width="55" align="center" />
  314. <el-table-column label="素材名称" align="center" prop="resourceName" />
  315. <el-table-column label="文件名称" align="center" prop="fileName" />
  316. <el-table-column label="排序" align="center" prop="sort" />
  317. <el-table-column label="缩略图" align="center">
  318. <template slot-scope="scope">
  319. <el-popover
  320. placement="right"
  321. title=""
  322. trigger="hover"
  323. >
  324. <img alt="" slot="reference" :src="scope.row.thumbnail" style="width: 80px; height: 50px" />
  325. <img alt="" :src="scope.row.thumbnail" style="max-width: 150px;" />
  326. </el-popover>
  327. </template>
  328. </el-table-column>
  329. <el-table-column label="视频时长" align="center">
  330. <template slot-scope="scope">
  331. <span>{{ formatDuration(scope.row.duration) }}</span>
  332. </template>
  333. </el-table-column>
  334. </el-table>
  335. <!-- 分页 -->
  336. <pagination
  337. v-show="addBatchData.total>0"
  338. :total="addBatchData.total"
  339. :page.sync="addBatchData.queryParams.pageNum"
  340. :limit.sync="addBatchData.queryParams.pageSize"
  341. @pagination="resourceList"
  342. />
  343. <div slot="footer" class="dialog-footer">
  344. <el-button type="primary" @click="batchVideoSave">确 定</el-button>
  345. </div>
  346. </el-dialog>
  347. <el-dialog title="章节红包" :visible.sync="redData.open" width="900px" append-to-body>
  348. <el-table border v-loading="redData.loading" :data="redData.list" height="600px">
  349. <el-table-column label="小节名称" align="center" show-overflow-tooltip prop="title" />
  350. <el-table-column label="视频文件名称" align="center" show-overflow-tooltip prop="fileName" >
  351. </el-table-column>
  352. <el-table-column label="视频时长" align="center" prop="duration">
  353. <template slot-scope="{ row }">
  354. {{ formatDuration(row.duration) }}
  355. </template>
  356. </el-table-column>
  357. <el-table-column label="红包金额" align="center" prop="redPacketMoney">
  358. <template slot-scope="scope">
  359. <el-input class="el-input" v-model="scope.row.redPacketMoney" />
  360. </template>
  361. </el-table-column>
  362. <el-table-column label="排序" align="center" prop="courseSort" />
  363. <el-table-column label="上传时间" align="center" prop="createTime" />
  364. </el-table>
  365. <div slot="footer" class="dialog-footer">
  366. <el-button type="primary" @click="batchRedSave">确 定</el-button>
  367. </div>
  368. </el-dialog>
  369. <el-dialog :title="commentDialog.title" :visible.sync="commentDialog.open" width="1000px" append-to-body :close-on-click-modal="false">
  370. <course-watch-comment
  371. ref="courseWatchComment"
  372. :courseId="commentDialog.courseId"
  373. :videoId="commentDialog.videoId"
  374. v-if="commentDialog.open">
  375. </course-watch-comment>
  376. </el-dialog>
  377. </div>
  378. </template>
  379. <script>
  380. import {
  381. addUserCourseVideo,
  382. delUserCourseVideo,
  383. getSort,
  384. getUserCourseVideo,
  385. getVideoListByCourseId,
  386. updates,
  387. batchSaveVideo,
  388. batchUpdateRed,
  389. updateUserCourseVideo
  390. } from "@/api/course/userCourseVideo";
  391. import QuestionBank from "@/views/course/courseQuestionBank/QuestionBank.vue";
  392. import VideoUpload from "@/components/VideoUpload/index.vue";
  393. import { listVideoResource } from '@/api/course/videoResource';
  394. import { getByIds } from '@/api/course/courseQuestionBank'
  395. import CourseWatchComment from "./courseWatchComment.vue";
  396. import { getCateListByPid, getCatePidList } from '@/api/course/userCourseCategory'
  397. export default {
  398. name: "userCourseCatalog",
  399. components: {VideoUpload,QuestionBank,CourseWatchComment},
  400. data() {
  401. return {
  402. duration: null,
  403. packageList:[],
  404. //课题
  405. package:{
  406. title:'',
  407. open:false,
  408. },
  409. //课题
  410. questionBank:{
  411. title:'',
  412. open:false,
  413. },
  414. isPrivate:null,
  415. videoUrl: "",
  416. uploadTypeOptions: [
  417. { dictLabel: "线路一", dictValue: 2 },
  418. { dictLabel: "线路二", dictValue: 3 },
  419. ],
  420. uploadLoading:false,
  421. courseId:null,
  422. videoName:'',
  423. title: "",
  424. // 是否显示弹出层
  425. open: false,
  426. uploadUrl:process.env.VUE_APP_BASE_API+"/common/uploadOSS",
  427. baseUrl: process.env.VUE_APP_BASE_API,
  428. typeOptions:[],
  429. files:[],
  430. fileList: [],
  431. // 上传成功后的地址
  432. videoURL: '',
  433. // 进度条百分比
  434. progress: 0,
  435. // 上传视频获取成功后拿到的fileID【备用】
  436. fileId: '',
  437. courseName:null,
  438. userCourseVideoList:[],
  439. total: 0,
  440. redData:{
  441. queryParams: {
  442. pageNum: 1,
  443. pageSize: 99999,
  444. courseId:null,
  445. },
  446. list: [],
  447. open: false,
  448. loading:true,
  449. form:{
  450. }
  451. },
  452. queryParams: {
  453. pageNum: 1,
  454. pageSize: 10,
  455. courseId:null,
  456. title:null
  457. },
  458. addBatchData: {
  459. open: false,
  460. loading: true,
  461. form: {},
  462. select: [],
  463. total:0,
  464. queryParams: {
  465. pageNum: 1,
  466. pageSize: 10,
  467. resourceName: null,
  468. typeId: null,
  469. typeSubId: null
  470. },
  471. typeOptions: [],
  472. typeSubOptions: []
  473. },
  474. // 显示搜索条件
  475. showSearch: true,
  476. // 遮罩层
  477. loading: true,
  478. // 导出遮罩层
  479. exportLoading: false,
  480. // 选中数组
  481. ids: [],
  482. // 非单个禁用
  483. single: true,
  484. // 非多个禁用
  485. multiple: true,
  486. // 表单参数
  487. form: {},
  488. updateBatchData: {
  489. open: false,
  490. form:{}
  491. },
  492. // 表单校验
  493. rules: {
  494. title: [
  495. { required: true, message: "小节名称不能为空", trigger: "change" }
  496. ],
  497. courseSort: [
  498. { required: true, message: "排序不能为空", trigger: "change" }
  499. ],
  500. },
  501. // 评论弹窗数据
  502. commentDialog: {
  503. open: false,
  504. courseId: null,
  505. videoId: null,
  506. title: ""
  507. },
  508. }
  509. },
  510. created() {
  511. this.getDicts("sys_course_temp_type").then(response => {
  512. this.typeOptions = response.data;
  513. });
  514. },
  515. methods: {
  516. getPickerOptions() {
  517. const durationInMinutes = Math.floor(this.form.duration / 60); // 将秒转换为分钟
  518. const endHour = Math.floor(durationInMinutes / 60); // 起始小时
  519. const endMinute = durationInMinutes % 60; // 起始分钟
  520. return {
  521. start: "00:00", // 固定开始时间
  522. step: "00:01", // 时间间隔
  523. end: `${endHour.toString().padStart(2, "0")}:${endMinute
  524. .toString()
  525. .padStart(2, "0")}`, // 动态结束时间
  526. };
  527. },
  528. handlePackageDelete(row){
  529. this.packageList.splice(this.packageList.findIndex(item => item.packageId === row.packageId), 1)
  530. },
  531. choosePackage(){
  532. this.package.open=true;
  533. this.package.title='疗法选择';
  534. },
  535. /**
  536. * 选择课题
  537. */
  538. chooseQuestionBank(){
  539. this.questionBank.open=true;
  540. this.questionBank.title='课题选择';
  541. },
  542. //选择疗法
  543. selectPackage(row){
  544. const drug = {};
  545. for(var i=0;i<this.packageList.length;i++){
  546. if(this.packageList[i].packageId==row.packageId){
  547. this.$message.warning("疗法已存在!")
  548. return;
  549. }
  550. }
  551. drug.packageId=row.packageId;
  552. drug.packageName=row.packageName;
  553. drug.secondName=row.secondName;
  554. drug.totalPrice=row.totalPrice;
  555. drug.imgUrl=row.imgUrl;
  556. this.packageList.push(drug);
  557. this.$message({
  558. message: '添加成功',
  559. type: 'success'
  560. });
  561. },
  562. //选择结果
  563. questionBankResult(val){
  564. // 确保 questionBankList 是数组
  565. this.form.questionBankList = this.form.questionBankList || [];
  566. for(var i=0;i<this.form.questionBankList.length;i++){
  567. if(this.form.questionBankList[i].id==val.id){
  568. return this.$message.error("当前课题已选择")
  569. }
  570. }
  571. this.form.questionBankList.push(val);
  572. this.$message({
  573. message: '添加成功',
  574. type: 'success'
  575. });
  576. },
  577. //删除课题
  578. handleQuestionBankDelete(row){
  579. this.form.questionBankList.splice(this.form.questionBankList.findIndex(item => item.id === row.id), 1)
  580. },
  581. handleVideoChange(){
  582. if(this.form.uploadType==1){
  583. this.videoUrl = this.form.lineOne;
  584. }else if(this.form.uploadType==2){
  585. this.videoUrl = this.form.lineTwo;
  586. }else if(this.form.uploadType==3){
  587. this.videoUrl = this.form.lineThree;
  588. }
  589. // console.log("选择的video=======>>>>>>>",this.videoUrl)
  590. },
  591. // 视频库课题
  592. handleSelectProjects(projectIds) {
  593. this.form.questionBankList = []
  594. if (!projectIds || projectIds.length === 0 || this.isPrivate === 0) {
  595. return
  596. }
  597. const params = {ids: projectIds}
  598. getByIds(params).then(response => {
  599. if (response.code === 200) {
  600. response.data.forEach(item => {
  601. let isExist = this.form.questionBankList.some(q => q.id === item.id)
  602. if (!isExist) {
  603. this.form.questionBankList.push(item)
  604. }
  605. });
  606. }
  607. })
  608. },
  609. handleVideoDuration(duration) {
  610. this.form.duration = duration;
  611. },
  612. formatDuration(seconds) {
  613. if (seconds === null || seconds === undefined) {
  614. return '未上传视频'; // 或者您可以根据具体需求返回其他默认值
  615. }
  616. const hours = Math.floor(seconds / 3600);
  617. const minutes = Math.floor((seconds % 3600) / 60);
  618. const remainingSeconds = seconds % 60;
  619. const formattedHours = hours > 0 ? hours.toString() + ':' : '';
  620. const formattedMinutes = minutes.toString().padStart(2, '0');
  621. const formattedSeconds = remainingSeconds.toString().padStart(2, '0');
  622. return `${formattedHours}${formattedMinutes}:${formattedSeconds}`;
  623. },
  624. handleAvatarSuccess(res, file) {
  625. if(res.code==200){
  626. this.form.thumbnail=res.url;
  627. this.$forceUpdate()
  628. }
  629. else{
  630. this.msgError(res.msg);
  631. }
  632. },
  633. beforeAvatarUpload(file) {
  634. const isLt1M = file.size / 1024 / 1024 < 1;
  635. if (!isLt1M) {
  636. this.$message.error('上传图片大小不能超过 1MB!');
  637. }
  638. return isLt1M;
  639. },
  640. getDetails(courseId,courseName,isPrivate) {
  641. this.isPrivate = isPrivate
  642. this.courseName = courseName
  643. this.courseId = courseId;
  644. this.queryParams.courseId = courseId;
  645. this.getList();
  646. },
  647. getList() {
  648. this.loading = true;
  649. getVideoListByCourseId(this.queryParams).then(response => {
  650. this.userCourseVideoList = response.rows;
  651. this.total = response.total;
  652. this.loading = false;
  653. });
  654. },
  655. // 取消按钮
  656. cancel() {
  657. this.open = false;
  658. this.reset();
  659. },
  660. // 表单重置
  661. reset() {
  662. this.form = {
  663. videoId: null,
  664. title: null,
  665. description: null,
  666. url: null,
  667. thumbnail: null,
  668. duration: null,
  669. createTime: null,
  670. uploadType:null,
  671. lineOne:null,
  672. lineTwo:null,
  673. lineThree:null,
  674. fileName:null,
  675. userId: null,
  676. cateId: null,
  677. courseId: null,
  678. likes: null,
  679. views: null,
  680. comments: null,
  681. status: 0,
  682. courseSort: 1,
  683. isHot: null,
  684. isShow: null,
  685. isAudit: null,
  686. auditBy: null,
  687. auditTime: null,
  688. updateTime: null,
  689. source: null,
  690. isDel: null,
  691. shares: null,
  692. tags: null,
  693. productId: null,
  694. productJson: null,
  695. questionBankId:null,
  696. questionBankList:[],
  697. redPacketMoney:0,
  698. isTranscode:0,
  699. transcodeFileKey:null
  700. };
  701. this.videoURL = '';
  702. this.progress=0;
  703. this.resetForm("form");
  704. },
  705. /** 搜索按钮操作 */
  706. handleQuery() {
  707. this.queryParams.pageNum = 1;
  708. this.getList();
  709. },
  710. /** 重置按钮操作 */
  711. resetQuery() {
  712. this.resetForm("queryForm");
  713. this.handleQuery();
  714. },
  715. // 多选框选中数据
  716. handleSelectionChange(selection) {
  717. this.ids = selection.map(item => item.videoId)
  718. this.single = selection.length!==1
  719. this.multiple = !selection.length
  720. },
  721. // 多选框选中数据
  722. handVideoleSelectionChange(selection) {
  723. this.addBatchData.select = selection.map(item => item.id);
  724. },
  725. handleAdd(){
  726. this.reset();
  727. this.form.courseId = this.courseId;
  728. this.open = true;
  729. this.title = "添加课堂视频";
  730. this.videoUrl = '';
  731. this.packageList=[];
  732. getSort(this.courseId).then(response => {
  733. this.form.courseSort = Number(response.data);
  734. })
  735. setTimeout(() => {
  736. this.$refs.videoUpload.resetUpload();
  737. }, 500);
  738. },
  739. /** 修改按钮操作 */
  740. handleUpdate(row) {
  741. this.reset();
  742. this.packageList=[];
  743. const videoId = row.videoId || this.ids
  744. getUserCourseVideo(videoId).then(response => {
  745. this.form = response.data;
  746. if(response.data.videoUrl!=null && response.data.videoUrl!==''){
  747. this.videoUrl = response.data.videoUrl;
  748. }
  749. if (this.form.packageJson!=null){
  750. this.packageList = JSON.parse(this.form.packageJson);
  751. }
  752. if(response.data.viewStartTime != null && response.data.viewEndTime != null){
  753. this.form.timeRange = [response.data.viewStartTime, response.data.viewEndTime]
  754. }
  755. setTimeout(() => {
  756. this.$refs.videoUpload.resetUpload();
  757. }, 500);
  758. this.open = true;
  759. this.title = "修改课堂视频";
  760. });
  761. },
  762. /** 提交按钮 */
  763. submitForm() {
  764. this.$refs["form"].validate(valid => {
  765. if (valid) {
  766. this.form.videoUrl = this.videoUrl;
  767. if(this.form.videoUrl==null || this.form.videoUrl===''){
  768. this.$message({
  769. message: '请上传视频!',
  770. type: 'warning'
  771. });
  772. return
  773. }
  774. if(this.form.timeRange != null && this.form.timeRange.length === 2){
  775. this.form.viewStartTime = this.form.timeRange[0];
  776. this.form.viewEndTime = this.form.timeRange[1];
  777. }
  778. if(this.form.duration==null){
  779. this.$message({
  780. message: '未识别到视频时长请稍等。。。',
  781. type: 'warning'
  782. });
  783. return
  784. }
  785. // if(this.form.uploadType==null){
  786. // this.$message({
  787. // message: '请选择播放线路!',
  788. // type: 'warning'
  789. // });
  790. // return
  791. // }
  792. if (this.form.questionBankList!==null){
  793. this.form.questionBankId = this.form.questionBankList.map(item => item.id).join(',');
  794. }
  795. if (this.packageList.length>0){
  796. this.form.packageJson = JSON.stringify(this.packageList);
  797. }
  798. if (this.form.videoId != null) {
  799. updateUserCourseVideo(this.form).then(response => {
  800. this.msgSuccess("修改成功");
  801. this.open = false;
  802. this.getList();
  803. });
  804. } else {
  805. addUserCourseVideo(this.form).then(response => {
  806. this.msgSuccess("新增成功");
  807. this.open = false;
  808. this.getList();
  809. });
  810. }
  811. }
  812. });
  813. },
  814. openUpdates(){
  815. this.updateBatchData.form = {};
  816. this.updateBatchData.open = true;
  817. },
  818. /** 提交按钮 */
  819. updateBatch() {
  820. this.updateBatchData.form.ids = this.ids;
  821. if(this.updateBatchData.form.timeRange != null && this.updateBatchData.form.timeRange.length === 2){
  822. this.updateBatchData.form.viewStartTime = this.updateBatchData.form.timeRange[0];
  823. this.updateBatchData.form.viewEndTime = this.updateBatchData.form.timeRange[1];
  824. }
  825. updates(this.updateBatchData.form).then(response => {
  826. this.msgSuccess("修改成功");
  827. this.updateBatchData.open = false;
  828. this.getList();
  829. });
  830. },
  831. /** 删除按钮操作 */
  832. handleDelete(row) {
  833. const videoIds = row.videoId || this.ids;
  834. this.$confirm('是否确认删除视频编号为"' + videoIds + '"的数据项?', "警告", {
  835. confirmButtonText: "确定",
  836. cancelButtonText: "取消",
  837. type: "warning"
  838. }).then(function() {
  839. return delUserCourseVideo(videoIds);
  840. }).then(() => {
  841. this.getList();
  842. this.msgSuccess("删除成功");
  843. }).catch(() => {});
  844. },
  845. openAdds(){
  846. this.addBatchData.open = true;
  847. this.getRootTypeList();
  848. this.addBatchData.form = {
  849. courseId: this.courseId,
  850. };
  851. this.resourceList();
  852. },
  853. getRootTypeList() {
  854. getCatePidList().then(response => {
  855. this.addBatchData.typeOptions = response.data
  856. });
  857. },
  858. async changeCateType(val) {
  859. this.addBatchData.queryParams.typeSubId = null
  860. this.addBatchData.typeSubOptions = []
  861. if (!val) {
  862. return
  863. }
  864. await getCateListByPid(val).then(response => {
  865. this.addBatchData.typeSubOptions = response.data
  866. })
  867. },
  868. resourceList(){
  869. this.addBatchData.loading = true;
  870. listVideoResource(this.addBatchData.queryParams).then(response => {
  871. this.addBatchData.loading = false;
  872. this.addBatchData.list = response.rows;
  873. this.addBatchData.total = response.total;
  874. });
  875. },
  876. batchVideoSave(){
  877. if (this.addBatchData.select.length===0){
  878. this.$message({
  879. message: '请选择视频!!',
  880. type: 'warning'
  881. });
  882. return
  883. }
  884. console.log(this.addBatchData.select)
  885. this.addBatchData.form.ids = this.addBatchData.select;
  886. batchSaveVideo(this.addBatchData.form).then(response => {
  887. this.addBatchData.open = false;
  888. this.getList();
  889. })
  890. },
  891. updateRedPageckeOpen(){
  892. this.redData.open = true;
  893. this.redData.loading = true;
  894. this.redData.queryParams.courseId = this.courseId;
  895. getVideoListByCourseId(this.redData.queryParams).then(response => {
  896. this.redData.list = response.rows;
  897. this.redData.loading = false;
  898. });
  899. },
  900. batchRedSave(){
  901. batchUpdateRed(this.redData.list).then(response => {
  902. this.redData.open = false;
  903. this.getList();
  904. })
  905. },
  906. /** 查看评论按钮操作 */
  907. handleComment(row) {
  908. this.commentDialog.courseId = row.courseId || this.courseId;
  909. this.commentDialog.videoId = row.videoId;
  910. this.commentDialog.title = `查看评论 - ${row.title}`;
  911. this.commentDialog.open = true;
  912. },
  913. }
  914. }
  915. </script>
  916. <style>
  917. .avatar-uploader .el-upload {
  918. border: 1px dashed #d9d9d9;
  919. border-radius: 6px;
  920. cursor: pointer;
  921. position: relative;
  922. overflow: hidden;
  923. }
  924. .avatar-uploader .el-upload:hover {
  925. border-color: #409EFF;
  926. }
  927. .avatar-uploader-icon {
  928. font-size: 28px;
  929. color: #8c939d;
  930. width: 150px;
  931. height: 150px;
  932. line-height: 150px;
  933. text-align: center;
  934. }
  935. </style>