index.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619
  1. <!--学习资源-->
  2. <template>
  3. <div class="app-container el-course hardware">
  4. <div class="list-max-big-box" v-if="pageType === 1">
  5. <div class="top-max-box">
  6. <div class="left-max-box scrollbar-box" v-hasPermi="['exam:el_category:list']">
  7. <div class="classify_btn" @click="goPageEdit(5,'')">管理分类 >></div>
  8. <el-tree
  9. :data="treeData"
  10. :props="defaultProps"
  11. :highlight-current="true"
  12. :expand-on-click-node="false"
  13. :filter-node-method="filterNode"
  14. node-key="id"
  15. ref="tree"
  16. default-expand-all
  17. @node-click="handleNodeClick"
  18. />
  19. </div>
  20. <div class="center-max-box" v-hasPermi="['exam:el_category:list']"></div>
  21. <div class="right-max-box">
  22. <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
  23. <el-form-item label="课程名称" prop="title" label-width="90px">
  24. <el-input
  25. v-model="queryParams.title"
  26. placeholder="请输入课程名称"
  27. clearable
  28. size="small"
  29. />
  30. </el-form-item>
  31. <el-form-item label="" prop="title" style="float: right">
  32. <el-col :span="1.5">
  33. <p class="add-button-one-90"
  34. @click="goPageEdit(1)"
  35. v-hasPermi="['exam:el_course:add']"
  36. ><i class="el-icon-plus"></i>新增</p>
  37. </el-col>
  38. </el-form-item>
  39. <el-form-item >
  40. <p class="inquire-button-one" @click="handleQuery">查询</p>
  41. <p class="reset-button-one" @click="resetQuery">重置</p>
  42. </el-form-item>
  43. </el-form>
  44. <div class="min-list-box">
  45. <el-table v-loading="loading" border :data="el_courseList" :cell-style="cellStyle">
  46. <el-table-column label="课程名称" align="left" prop="title" :show-overflow-tooltip="true">
  47. <template slot-scope="scope">
  48. <el-button type="text" size="small" @click="goCourseDetails(scope.row)"
  49. style="padding:0;height:23px;width:320px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align: left;">{{scope.row.title}}</el-button>
  50. </template>
  51. </el-table-column>
  52. <el-table-column label="适用学院" align="left" prop="title" :show-overflow-tooltip="true" width="140"/>
  53. <el-table-column label="适用类型" align="left" prop="scopeType" :show-overflow-tooltip="true" width="140">
  54. <template slot-scope="scope">
  55. <span v-for="(bigItem,bigIndex) in scope.row.scopeType" :key="bigIndex">
  56. <span v-for="(item,index) in scopeTypes" :key="index" v-if="bigItem==item.type">{{bigIndex==0?item.value:'、'+item.value}}</span>
  57. </span>
  58. </template>
  59. </el-table-column>
  60. <el-table-column label="分类" align="left" prop="cateTitle" :show-overflow-tooltip="true" width="100"/>
  61. <el-table-column label="章节数" align="left" prop="chapters" width="80"/>
  62. <el-table-column label="有效时间" align="left" prop="createTime" width="120">
  63. <template slot-scope="scope">
  64. {{scope.row.ceType==0?'永久':(scope.row.ceType==1?scope.row.ceTime:'')}}
  65. </template>
  66. </el-table-column>
  67. <el-table-column label="学习人数" align="left" prop="learns" width="100"/>
  68. <el-table-column label="访问人数" align="left" prop="accessNum" width="100"/>
  69. <!--<el-table-column label="奖励积分" align="left" prop="points" width="100"/>-->
  70. <!--<el-table-column label="学习机积分" align="left" prop="machinePoints" width="120"/>-->
  71. <!-- <el-table-column label="状态" align="left" prop="createTime" width="80">
  72. <template slot-scope="scope">
  73. {{scope.row.status==1?'已上架':(scope.row.status==0?'下架':'')}}
  74. </template>
  75. </el-table-column>-->
  76. <el-table-column label="状态" align="left" prop="status" width="90">
  77. <template slot-scope="scope">
  78. <el-switch
  79. v-hasPermi="['exam:el_course:edit']"
  80. class="switch"
  81. @change="switchChange(scope.row)"
  82. v-model="scope.row.status+''"
  83. active-value="1"
  84. inactive-value="0"
  85. active-text="上架"
  86. inactive-text="下架"
  87. >
  88. </el-switch>
  89. </template>
  90. </el-table-column>
  91. <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="90">
  92. <template slot-scope="scope">
  93. <div class="table-button-box">
  94. <p class="table-button-null"></p>
  95. <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)">
  96. <p class="table-button-p">更多>></p>
  97. <el-dropdown-menu slot="dropdown">
  98. <el-dropdown-item command="record">学习记录</el-dropdown-item>
  99. <el-dropdown-item command="edit" v-hasPermiAnd="['exam:el_course:query','exam:el_course:edit']">编辑</el-dropdown-item>
  100. <el-dropdown-item command="delete" v-hasPermi="['exam:el_course:remove']">删除</el-dropdown-item>
  101. </el-dropdown-menu>
  102. </el-dropdown>
  103. <p class="table-button-null"></p>
  104. </div>
  105. </template>
  106. </el-table-column>
  107. </el-table>
  108. </div>
  109. </div>
  110. </div>
  111. <div class="bottom-max-box">
  112. <pagination :page-sizes="[20, 30, 40, 50]"
  113. v-show="total>0"
  114. :total="total"
  115. layout="total, prev, pager, next, sizes, jumper"
  116. :page.sync="queryParams.pageNum"
  117. :limit.sync="queryParams.pageSize"
  118. @pagination="getList"
  119. />
  120. </div>
  121. </div>
  122. <!--编辑-->
  123. <edit-page v-if="pageType == 2" :infoId="infoId"></edit-page>
  124. <!--查看记录-->
  125. <detail-page v-if="pageType == 3" :infoId="infoId"></detail-page>
  126. <!-- 添加或修改学习资源对话框 -->
  127. <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body :close-on-click-modal="false">
  128. <el-form ref="form" :model="form" :rules="rules" label-width="80px">
  129. <el-form-item label="备注" prop="remark">
  130. <el-input v-model="form.remark" placeholder="请输入备注" />
  131. </el-form-item>
  132. <el-form-item label="分类ID" prop="cateId">
  133. <el-input v-model="form.cateId" placeholder="请输入分类ID" />
  134. </el-form-item>
  135. <el-form-item label="标题" prop="title">
  136. <el-input v-model="form.title" placeholder="请输入标题" />
  137. </el-form-item>
  138. <el-form-item label="是否公开" prop="private">
  139. <el-input v-model="form.private" placeholder="请输入是否公开" />
  140. </el-form-item>
  141. <el-form-item label="等级" prop="level">
  142. <el-input v-model="form.level" placeholder="请输入等级" />
  143. </el-form-item>
  144. <el-form-item label="是否限制顺序" prop="orderRest">
  145. <el-input v-model="form.orderRest" placeholder="请输入是否限制顺序" />
  146. </el-form-item>
  147. <el-form-item label="课程时长" prop="duration">
  148. <el-input v-model="form.duration" placeholder="请输入课程时长" />
  149. </el-form-item>
  150. <el-form-item label="课程标签" prop="label">
  151. <el-input v-model="form.label" placeholder="请输入课程标签" />
  152. </el-form-item>
  153. <el-form-item label="PDF翻页有效时间" prop="effectiveTime">
  154. <el-input v-model="form.effectiveTime" placeholder="请输入PDF翻页有效时间" />
  155. </el-form-item>
  156. <el-form-item label="课程有效时间类型" prop="ceType">
  157. <el-select v-model="form.ceType" placeholder="请选择课程有效时间类型">
  158. <el-option label="请选择字典生成" value="" />
  159. </el-select>
  160. </el-form-item>
  161. <el-form-item label="课程有效时间" prop="ceTime">
  162. <el-input v-model="form.ceTime" placeholder="请输入课程有效时间" />
  163. </el-form-item>
  164. <el-form-item label="课程关键字" prop="keywords">
  165. <el-input v-model="form.keywords" placeholder="请输入课程关键字" />
  166. </el-form-item>
  167. <el-form-item label="封面图片" prop="img">
  168. <el-input v-model="form.img" placeholder="请输入封面图片" />
  169. </el-form-item>
  170. <el-form-item label="课程状态 1 下架,2 上架">
  171. <el-radio-group v-model="form.status">
  172. <el-radio label="1">请选择字典生成</el-radio>
  173. </el-radio-group>
  174. </el-form-item>
  175. <el-form-item label="是否显示课程拖拽进度" prop="videoDraggable">
  176. <el-input v-model="form.videoDraggable" placeholder="请输入是否显示课程拖拽进度" />
  177. </el-form-item>
  178. <el-form-item label="积分值" prop="points">
  179. <el-input v-model="form.points" placeholder="请输入积分值" />
  180. </el-form-item>
  181. <el-form-item label="设置选项" prop="settings">
  182. <el-input v-model="form.settings" type="textarea" placeholder="请输入内容" />
  183. </el-form-item>
  184. <el-form-item label="课程类型" prop="type">
  185. <el-select v-model="form.type" placeholder="请选择课程类型">
  186. <el-option label="请选择字典生成" value="" />
  187. </el-select>
  188. </el-form-item>
  189. </el-form>
  190. <div slot="footer" class="dialog-footer">
  191. <el-button type="primary" @click="submitForm">确 定</el-button>
  192. <el-button @click="cancel">取 消</el-button>
  193. </div>
  194. </el-dialog>
  195. <!--课程详情-->
  196. <course-details v-if="pageType == 4" :infoId="infoId"></course-details>
  197. <!--管理分类-->
  198. <add-classify v-if="pageType == 5" :pageData="pageData"></add-classify>
  199. </div>
  200. </template>
  201. <script>
  202. import { listDepartments } from "@/api/system/dept";
  203. import { listEl_category} from "@/api/exam/el_category";
  204. import { listEl_course, getEl_course, delEl_course, addEl_course, updateEl_course } from "@/api/exam/el_course";
  205. import editPage from "./edit.vue";
  206. import detailPage from "./detail.vue";
  207. import courseDetails from "./courseDetails.vue";
  208. import addClassify from "../el_category/index";
  209. export default {
  210. name: "El_course",
  211. components: {
  212. editPage,
  213. detailPage,
  214. courseDetails,
  215. addClassify
  216. },
  217. data() {
  218. return {
  219. //页面状态
  220. pageType:1,
  221. pageData:{
  222. type:2,//1资源管理2课程管理
  223. },
  224. //树数据
  225. treeData:[],
  226. defaultProps: {
  227. children: "children",
  228. label: "title"
  229. },
  230. //学院
  231. deptOptions:[],
  232. //适用范围
  233. scopeTypes: [
  234. {
  235. type: 1,
  236. value: "安全准入考试",
  237. },
  238. {
  239. type: 2,
  240. value: "负面清单考试",
  241. },
  242. {
  243. type: 3,
  244. value: "黑名单考试",
  245. },
  246. {
  247. type: 4,
  248. value: "模拟考试",
  249. },
  250. ],
  251. statusList:[
  252. {
  253. type: 1,
  254. value: "上架",
  255. },
  256. {
  257. type: 2,
  258. value: "下架",
  259. },
  260. ],
  261. // 遮罩层
  262. loading: true,
  263. // 选中数组
  264. ids: [],
  265. // 非单个禁用
  266. single: true,
  267. // 非多个禁用
  268. multiple: true,
  269. // 显示搜索条件
  270. showSearch: true,
  271. // 总条数
  272. total: 0,
  273. // 学习资源表格数据
  274. el_courseList: [],
  275. // 弹出层标题
  276. title: "",
  277. // 是否显示弹出层
  278. open: false,
  279. // 查询参数
  280. queryParams: {
  281. pageNum: 1,
  282. pageSize:20,
  283. title: '',
  284. },
  285. // 日期范围
  286. dateRange: [],
  287. // 表单参数
  288. form: {},
  289. // 表单校验
  290. rules: {
  291. title: [
  292. { required: true, message: "标题不能为空", trigger: "blur" },
  293. { required: true, message: "标题不能为空", validator: this.spaceJudgment, trigger: "blur" }
  294. ],
  295. },
  296. infoId:{},
  297. };
  298. },
  299. created() {
  300. this.getTreeData();
  301. this.getDeptList();
  302. },
  303. methods: {
  304. //课程状态
  305. switchChange(row){
  306. console.log(row.status)
  307. //1上架0下架
  308. this.$confirm('是否确定'+(row.status==0?'上架':'下架')+'?', '提示', {
  309. confirmButtonText: '确定',
  310. cancelButtonText: '取消',
  311. type: 'warning'
  312. }).then(() => {
  313. this.upDownShelf(row.id,row.status==0?1:0)
  314. }).catch(() => {
  315. this.$message({
  316. type: 'info',
  317. message: '已取消'
  318. });
  319. });
  320. },
  321. //上架下架
  322. upDownShelf(id,status){
  323. let obj = {
  324. id:id,
  325. status:status,//课程状态 0 下架,1 上架
  326. };
  327. updateEl_course(obj).then( response => {
  328. this.msgSuccess("修改成功");
  329. this.getList();
  330. });
  331. },
  332. //去课程详情页面
  333. goCourseDetails(row){
  334. console.log("row",row)
  335. this.pageType = 4;
  336. this.infoId.id = row.id;
  337. },
  338. //单元格样式
  339. cellStyle({row, column, rowIndex, columnIndex}) {//根据测试结果动态调整单元格样式,成功-绿色,失败-红色,不支持-黄色
  340. if(column.title) {
  341. return "color:red;"
  342. }
  343. },
  344. /* 查询学院列表 */
  345. getDeptList(){
  346. listDepartments().then(response => {
  347. // this.deptOptions = response.data;
  348. this.$set(this, 'deptOptions', response.data)
  349. });
  350. },
  351. // 更多操作触发
  352. handleCommand(command, row) {
  353. switch (command) {
  354. case "record":
  355. this.goPageEdit(3,row.id);
  356. break;
  357. case "edit":
  358. this.goPageEdit(2,row.id);
  359. break;
  360. case "delete":
  361. this.handleDelete(row);
  362. break;
  363. default:
  364. break;
  365. }
  366. },
  367. //新增/编辑按钮
  368. goPageEdit(type,id){
  369. console.log(type)
  370. if(type == 1){
  371. this.infoId = {};
  372. this.pageType = 2;
  373. }else if(type == 2){
  374. this.infoId.id = id;
  375. this.pageType = 2;
  376. }else if(type == 3){
  377. this.infoId.id = id;
  378. this.pageType = 3;
  379. }else if(type == 4){
  380. this.pageType = 1;
  381. this.getList();
  382. this.getTreeData();
  383. }else if(type==5){//管理分类
  384. this.pageType = 5;
  385. }
  386. },
  387. /** 查询分类树 */
  388. getTreeData() {
  389. this.loading = true;
  390. listEl_category({},2).then( response => {
  391. let list = [];
  392. let obj = {
  393. children:[],
  394. title:"所有分类",
  395. id:"",
  396. };
  397. list.push(obj);
  398. for(let i=0;i<response.data.length;i++){
  399. list.push(response.data[i]);
  400. }
  401. this.treeData = list;
  402. this.getList();
  403. });
  404. },
  405. // 筛选节点
  406. filterNode(value, data) {
  407. if (!value) return true;
  408. return data.label.indexOf(value) !== -1;
  409. },
  410. // 节点单击事件
  411. handleNodeClick(data) {
  412. this.queryParams.pageNum = 1;
  413. this.queryParams.pageSize = 20;
  414. this.queryParams.cateId = data.id;
  415. this.getList();
  416. },
  417. /** 查询学习资源列表 */
  418. getList() {
  419. let self = this;
  420. this.loading = true;
  421. if(this.dateRange&&this.dateRange.length>0) {
  422. this.queryParams.beginTime=this.dateRange[0]
  423. this.queryParams.endTime=this.dateRange[1]
  424. } else {
  425. this.queryParams.beginTime=null;
  426. this.queryParams.endTime=null
  427. }
  428. listEl_course(this.queryParams).then( response => {
  429. this.el_courseList = response.rows;
  430. for(let i=0;i<self.el_courseList.length;i++){
  431. if(self.el_courseList[i].scopeType){
  432. self.el_courseList[i].scopeType = self.el_courseList[i].scopeType.split(',');
  433. }
  434. }
  435. this.total = response.total;
  436. this.loading = false;
  437. });
  438. },
  439. // 取消按钮
  440. cancel() {
  441. this.open = false;
  442. this.reset();
  443. },
  444. // 表单重置
  445. reset() {
  446. this.form = {
  447. id: null,
  448. userId: null,
  449. createBy: null,
  450. updateBy: null,
  451. deptId: null,
  452. deptName: null,
  453. createTime: null,
  454. updateTime: null,
  455. remark: null,
  456. cateId: null,
  457. title: null,
  458. private: null,
  459. level: null,
  460. orderRest: null,
  461. duration: null,
  462. label: null,
  463. effectiveTime: null,
  464. ceType: null,
  465. ceTime: null,
  466. keywords: null,
  467. img: null,
  468. status: 0,
  469. videoDraggable: null,
  470. points: null,
  471. settings: null,
  472. type: null
  473. };
  474. this.resetForm("form");
  475. },
  476. /** 搜索按钮操作 */
  477. handleQuery() {
  478. this.queryParams.pageNum = 1;
  479. this.getList();
  480. },
  481. /** 重置按钮操作 */
  482. resetQuery() {
  483. // this.resetForm("queryForm");
  484. this.$set(this,'queryParams',{
  485. pageNum: 1,
  486. pageSize:20,
  487. cateId:"",
  488. title: '',
  489. });
  490. this.dateRange=[];
  491. this.$refs.tree.setCurrentKey();
  492. this.handleQuery();
  493. },
  494. /** 新增按钮操作 */
  495. handleAdd() {
  496. this.reset();
  497. this.open = true;
  498. this.title = "添加学习资源";
  499. },
  500. /** 修改按钮操作 */
  501. handleUpdate(row) {
  502. this.reset();
  503. const id = row.id || this.ids
  504. getEl_course(id).then( response => {
  505. this.form = response.data;
  506. this.open = true;
  507. this.title = "修改学习资源";
  508. });
  509. },
  510. /** 提交按钮 */
  511. submitForm() {
  512. this.$refs["form"].validate(valid => {
  513. if (valid) {
  514. if (this.form.id != null) {
  515. updateEl_course(this.form).then( response => {
  516. this.msgSuccess("修改成功");
  517. this.open = false;
  518. this.getList();
  519. });
  520. } else {
  521. addEl_course(this.form).then( response => {
  522. this.msgSuccess("新增成功");
  523. this.open = false;
  524. this.getList();
  525. });
  526. }
  527. }
  528. });
  529. },
  530. /** 删除按钮操作 */
  531. handleDelete(row) {
  532. if(row.status == 1){
  533. this.msgError('请先下架课程后再进行删除操作')
  534. return
  535. }
  536. const ids = row.id || this.ids;
  537. this.$confirm('是否确认删除?', "警告", {
  538. confirmButtonText: "确定",
  539. cancelButtonText: "取消",
  540. type: "warning"
  541. }).then(function() {
  542. return delEl_course(ids);
  543. }).then(() => {
  544. this.getList();
  545. this.msgSuccess("删除成功");
  546. }).catch(() => {});
  547. },
  548. /** 导出按钮操作 */
  549. handleExport() {
  550. this.download('exam/el_course/export', {
  551. ...this.queryParams
  552. }, `exam_el_course.xlsx`)
  553. }
  554. }
  555. };
  556. </script>
  557. <style scoped lang="scss">
  558. .el-course {
  559. display: flex!important;
  560. flex-direction: column;
  561. box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
  562. overflow: hidden;
  563. .list-max-big-box{
  564. flex:1;
  565. display: flex!important;
  566. flex-direction: column;
  567. padding:20px!important;
  568. overflow: hidden;
  569. .top-max-box{
  570. flex:1;
  571. display: flex;
  572. overflow: hidden!important;
  573. .left-max-box{
  574. width:250px;
  575. .classify_btn{
  576. font-size: 14px;
  577. font-family: Microsoft YaHei;
  578. font-weight: 400;
  579. color: #0183FA;
  580. line-height: 70px;
  581. cursor: pointer;
  582. text-align: left;
  583. }
  584. }
  585. .center-max-box{
  586. border-right:2px dashed #E0E0E0;
  587. margin-right:30px;
  588. margin-top:20px;
  589. }
  590. .right-max-box{
  591. flex:1;
  592. display: flex;
  593. flex-direction: column;
  594. overflow: hidden!important;
  595. .min-list-box{
  596. flex: 1;
  597. overflow: hidden!important;
  598. display: flex;
  599. margin-bottom:15px;
  600. .button-box{
  601. width:300px;
  602. display: flex;
  603. }
  604. }
  605. }
  606. }
  607. .bottom-max-box{
  608. height:50px;
  609. }
  610. }
  611. }
  612. </style>