Skip to content

dev / trimble-admin-pro

Go to a project
Toggle navigation
Toggle navigation pinning
942c46dd by qingxiao
Options

视频演示 回放

1 parent db447616
Inline Side-by-side
Showing 7 changed files with 1036 additions and 15 deletions
...@@ -19,7 +19,7 @@ let requestDomain = "https://ow.go.qudone.com"; ...@@ -19,7 +19,7 @@ let requestDomain = "https://ow.go.qudone.com";
19 if (location.href.indexOf("://k.wxpai.cn") > 0 || location.href.indexOf("://h5.k.wxpai.cn") > 0) { 19 if (location.href.indexOf("://k.wxpai.cn") > 0 || location.href.indexOf("://h5.k.wxpai.cn") > 0) {
20 requestDomain = "https://api.k.wxpai.cn/bizproxy"; 20 requestDomain = "https://api.k.wxpai.cn/bizproxy";
21 } 21 }
22 //requestDomain = 'http://localhost:3111' 22 //requestDomain = 'http://localhost:6400'
23 /** 23 /**
24 * header不加session的白名单 24 * header不加session的白名单
25 */ 25 */
......
1 <template>
2 <el-upload
3 class="avatar-uploader"
4 :action="uploadUrl"
5 :http-request="uploadSumit"
6 :show-file-list="false"
7 :on-success="handleAvatarSuccess"
8 :before-upload="beforeAvatarUpload"
9 >
10 <img v-if="currentValue" :src="currentValue" class="avatar">
11 <i v-else class="el-icon-plus avatar-uploader-icon"></i>
12 <div class="el-upload__tip" slot="tip" :class="{error:tipsError}">{{tips}}</div>
13 </el-upload>
14 </template>
15
16 <script>
17 import { request } from "@/api/fetch-api.js";
18
19 /**
20 * 外层插件可通过监听：v-on:before-upload；v-on:after-upload两个事件监听上传结果
21 * after-upload(success, src)
22 */
23
24 export default {
25 props: ["value"],
26 data() {
27 return {
28 imageUrl: this.value,
29 uploadUrl: "https://api.k.wxpai.cn/bizproxy/kdapi/file/upload",
30 tips: "只能上传jpg/png文件，且不超过500kb",
31 tipsError: false,
32 uploadInterval: 0
33 };
34 },
35 methods: {
36 handleAvatarSuccess(res, file) {
37 this.imageUrl = URL.createObjectURL(file.raw);
38 },
39 beforeAvatarUpload(file) {
40 const isJPG = file.type === "image/jpeg" || file.type === "image/png";
41 const isLt2M = file.size / 1024 < 500;
42
43 if (!isJPG) {
44 this.tipsError = true;
45 this.tips = "上传图片只能是 JPG|PNG 格式!";
46 // this.$message.error("");
47 }
48 if (!isLt2M) {
49 this.tipsError = true;
50 this.tips = "上传图片大小不能超过 500kb!";
51 }
52
53 return isJPG && isLt2M;
54 },
55 uploadSumit(params) {
56 this.tipsError = false;
57 this.uploadStart();
58 this.$emit("before-upload");
59
60 let data = {
61 path: "/pro/tianbao",
62 file: params.file
63 };
64 request
65 .form(this.uploadUrl, data)
66 .then(result => {
67 this.uploadEnd();
68 this.imageUrl = result.content;
69 this.$emit("input", this.imageUrl);
70 this.$emit("after-upload", { success: true, src: this.imageUrl });
71 })
72 .catch(res => {
73 this.uploadEnd();
74 this.$emit("after-upload", { success: false, src: this.imageUrl });
75 });
76 },
77 uploadStart() {
78 let that = this;
79 let times = 0;
80 this.uploadInterval = setInterval(function() {
81 times++;
82 let t = times % 4;
83 let s = "";
84 for (let i = 0; i < t; i++) {
85 s += ".";
86 }
87 that.tips = "上传中" + s;
88 }, 500);
89 },
90 uploadEnd() {
91 clearInterval(this.uploadInterval);
92 this.tips = "只能上传jpg/png文件，且不超过500kb";
93 }
94 },
95 computed: {
96 currentValue: function() {
97 return this.value;
98 }
99 }
100 };
101 </script>
102
103 <style>
104 .avatar-uploader .el-upload {
105 border: 1px dashed #d9d9d9;
106 border-radius: 6px;
107 cursor: pointer;
108 position: relative;
109 overflow: hidden;
110 padding: 10px;
111 }
112 .avatar-uploader .el-upload:hover {
113 border-color: #409eff;
114 }
115 .avatar-uploader-icon {
116 font-size: 28px;
117 color: #8c939d;
118 width: 120px;
119 height: 120px;
120 line-height: 120px;
121 text-align: center;
122 }
123 .avatar {
124 max-width: 120px;
125 max-height: 120px;
126 display: block;
127 }
128 .error {
129 color: red;
130 }
131 </style>
...@@ -149,31 +149,99 @@ export const constantRouterMap = [{ ...@@ -149,31 +149,99 @@ export const constantRouterMap = [{
149 } 149 }
150 }] 150 }]
151 }, 151 },
152
152 { 153 {
153 path: '/live', 154 path: '/edu',
154 component: Layout, 155 component: Layout,
156 redirect: '/edu/live',
157 name: 'live',
158 meta: {
159 title: '教育教学',
160 icon: 'nested'
161 },
155 children: [ 162 children: [
156 { 163 {
157 path: 'index', 164 path: '/edu/live',
158 name: 'Live', 165 name: 'live',
159 component: () => import('@/views/live/index'), 166 component: () => import('@/views/live/index'),
160 meta: { title: '直播课程', icon: 'form' } 167 meta: {
161 } 168 title: '直播课程',
162 ] 169 icon: ''
163 }, 170 }
164 { 171 },
165 path: '/public',
166 component: Layout,
167 children: [
168 { 172 {
169 path: 'index', 173 path: '/edu/public',
170 name: 'public', 174 name: 'public',
171 component: () => import('@/views/public/index'), 175 component: () => import('@/views/public/index'),
172 meta: { title: '公开课', icon: 'form' } 176 meta: {
173 } 177 title: '公开课',
178 icon: ''
179 }
180 },
181 {
182 path: '/edu/playback',
183 name: 'playback',
184 component: () => import('@/views/playback/index'),
185 meta: {
186 title: '回放视频',
187 icon: ''
188 }
189 },
190 {
191 path: '/edu/playbackType',
192 name: 'playbackType',
193 component: () => import('@/views/playbackType/index'),
194 meta: {
195 title: '回放视频类型',
196 icon: ''
197 }
198 },
199 {
200 path: '/edu/video',
201 name: 'video',
202 component: () => import('@/views/video/index'),
203 meta: {
204 title: '视频演示',
205 icon: ''
206 }
207 },
208 {
209 path: '/edu/videoType',
210 name: 'video',
211 component: () => import('@/views/videoType/index'),
212 meta: {
213 title: '视频演示类型',
214 icon: ''
215 }
216 },
174 ] 217 ]
175 }, 218 },
176 219
220 // {
221 // path: '/live',
222 // component: Layout,
223 // children: [
224 // {
225 // path: 'index',
226 // name: 'Live',
227 // component: () => import('@/views/live/index'),
228 // meta: { title: '直播课程', icon: 'form' }
229 // }
230 // ]
231 // },
232 // {
233 // path: '/public',
234 // component: Layout,
235 // children: [
236 // {
237 // path: 'index',
238 // name: 'public',
239 // component: () => import('@/views/public/index'),
240 // meta: { title: '公开课', icon: 'form' }
241 // }
242 // ]
243 // },
244
177 245
178 // { 246 // {
179 // path: '/example', 247 // path: '/example',
......
1 <template>
2 <div class="app-container">
3 <el-header height>
4 <el-input v-model="queryForm.title" style="width: 200px" placeholder="视频名称" clearable></el-input>
5 <el-select v-model="queryForm.playbackTypeCode" placeholder="请选择" clearable @change="searchPlayback">
6 <el-option
7 v-for="item in playbackTypeList"
8 :key="item.playbackTypeCode"
9 :label="item.typeName"
10 :value="item.playbackTypeCode">
11 </el-option>
12 </el-select>
13 <el-button @click="searchPlayback" type="primary">搜索</el-button>
14 <el-button type="primary" @click="playbackCreate">创建</el-button>
15 </el-header>
16 <el-main>
17 <el-table
18 :data="playbackList"
19 style="width: 100%"
20 stripe
21 highlight-current-row
22 v-loading="loading"
23 >
24 <el-table-column label="名称" prop="title"></el-table-column>
25 <el-table-column label="视频链接" prop="videoUrl"></el-table-column>
26 <el-table-column label="类型" prop="typeName"></el-table-column>
27 <el-table-column label="操作">
28 <template slot-scope="scope">
29 <el-link type="primary" @click="playbackEdit(scope.row)">编辑 &nbsp;</el-link>
30 <el-link type="primary" @click="playbackDelete(scope.row.playbackCode)">删除 &nbsp;</el-link>
31 </template>
32 </el-table-column>
33 </el-table>
34 </el-main>
35 <el-footer>
36 <div style="text-align:right;">
37 <el-pagination
38 @size-change="handleSizeChange"
39 @current-change="handleCurrentChange"
40 :current-page="queryForm.page"
41 :page-size="queryForm.size"
42 layout="total, prev, pager, next"
43 :total="total">
44 </el-pagination>
45 </div>
46 </el-footer>
47
48 <el-dialog
49 width="60%"
50 :title="title"
51 :visible.sync="dialogVisible">
52 <el-form :model="playbackForm" ref="playbackForm" :rules="playbackRules" label-width="180px">
53 <el-form-item label="名称：" prop="title">
54 <el-input v-model="playbackForm.title" maxlength="100" show-word-limit></el-input>
55 </el-form-item>
56 <el-form-item label="视频链接：" prop="videoUrl">
57 <el-input v-model="playbackForm.videoUrl" maxlength="100" show-word-limit></el-input>
58 </el-form-item>
59 <el-form-item label="类型：" prop="playbackTypeCode">
60 <el-select v-model="playbackForm.playbackTypeCode" placeholder="请选择" >
61 <el-option
62 v-for="item in playbackTypeList"
63 :key="item.playbackTypeCode"
64 :label="item.typeName"
65 :value="item.playbackTypeCode">
66 </el-option>
67 </el-select>
68 </el-form-item>
69 </el-form>
70 <span slot="footer" class="dialog-footer">
71 <el-button type="primary" @click="submitForm('playbackForm')">提交</el-button>
72 <el-button @click="cancelCreate">取消</el-button>
73 </span>
74 </el-dialog>
75
76 </div>
77 </template>
78
79 <script>
80 import {request} from '@/api/fetch-api'
81 import UploadItem from '@/components/UploadItem'
82
83 let urls = {
84 playbackTypeListUrl: '/tianbao_edu_api/admin/playbackType/list',
85 playbackListUrl: '/tianbao_edu_api/admin/playback/list',
86 playbackSaveUrl: '/tianbao_edu_api/admin/playback/save',
87 playbackDelUrl: '/tianbao_edu_api/admin/playback/delete',
88 }
89
90 export default {
91 components: {UploadItem},
92 data() {
93 return {
94 playbackList: [],
95 total: 0,
96 loading: false,
97 queryForm: {
98 page: 1,
99 size: 10,
100 playbackTypeCode:'',
101 title:''
102 },
103 dialogVisible: false,
104 title: '',
105 playbackForm: {},
106 playbackRules: {
107 title: [{required: true, message: '请输入名称', trigger: 'blur'}],
108 videoUrl: [{required: true, message: '请输入视频链接', trigger: 'blur'}],
109 playbackTypeCode: [{required: true, message: '请选择', trigger: 'blur'}]
110 },
111 playbackTypeList:[]
112 }
113 },
114 methods: {
115 searchPlayback(){
116 this.queryForm.page=1
117 this.initPlayBack()
118 },
119 initPlayBack() {
120 this.loading = true
121 request.get(urls.playbackListUrl, this.queryForm).then(data => {
122 this.loading = false
123 this.playbackList = data.content.list
124 this.total = data.content.total
125 }).catch(() => {
126
127 })
128 },
129 initPlayBackType() {
130 let form ={
131 page:1,
132 size:1000,
133 }
134 request.get(urls.playbackTypeListUrl, form).then(data => {
135 this.playbackTypeList = data.content.list
136 }).catch(() => {
137
138 })
139 },
140 playbackEdit(row) {
141 this.title = '编辑'
142 this.dialogVisible = true
143 this.playbackForm = JSON.parse(JSON.stringify(row))
144 },
145 playbackDelete(code) {
146 this.$confirm('是否永远删除, 是否继续?', '提示', {
147 confirmButtonText: '确定',
148 cancelButtonText: '取消',
149 type: 'warning'
150 }).then(() => {
151 let form ={
152 playbackCode:code
153 }
154 request.post(urls.playbackDelUrl, form).then(data => {
155 this.initPlayBack()
156 this.$message.success("删除成功")
157 }).catch(() => {
158
159 })
160 }).catch(() => {
161
162 })
163
164 },
165 cancelCreate() {
166 this.dialogVisible = false
167 this.playbackForm = {}
168 },
169 playbackCreate() {
170 this.dialogVisible = true
171 this.title = '创建'
172 },
173 submitForm(formName) {
174 this.$refs[formName].validate((valid) => {
175 if (valid) {
176 request.post(urls.playbackSaveUrl, this.playbackForm).then(response => {
177 this.dialogVisible = false
178 this.$message.success("保存成功")
179 this.initPlayBack()
180 }).catch(() => {
181
182 })
183 } else {
184 console.log('error submit!!')
185 return false
186 }
187 })
188
189 },
190 /*分页*/
191 handleSizeChange(val) {
192 console.log(`每页 ${val} 条`)
193 this.queryForm.size = val
194 this.queryForm.page = 1
195 this.initPlayBack()
196 },
197 handleCurrentChange(val) {
198 console.log(`当前页: ${val}`)
199 this.queryForm.page = val
200 this.initPlayBack()
201 },
202
203 },
204 created() {
205 this.initPlayBack()
206 this.initPlayBackType()
207 }
208 }
209 </script>
210
211 <style scoped>
212
213 </style>
1 <template>
2 <div class="app-container">
3 <el-header height>
4 <el-button type="primary" @click="playbackTypeCreate">创建</el-button>
5 </el-header>
6 <el-main>
7 <el-table
8 :data="playbackTypeList"
9 style="width: 100%"
10 stripe
11 highlight-current-row
12 v-loading="loading"
13 >
14 <el-table-column label="名称" prop="typeName"></el-table-column>
15 <el-table-column label="图片" prop="typeImage">
16 <template slot-scope="scope">
17 <a :href="scope.row.typeImage" target="_blank">
18 <el-image :src="scope.row.typeImage"></el-image>
19 </a>
20 </template>
21 </el-table-column>
22 <el-table-column label="操作">
23 <template slot-scope="scope">
24 <el-link type="primary" @click="playbackTypeEdit(scope.row)">编辑 &nbsp;</el-link>
25 <el-link type="primary" @click="playbackTypeDelete(scope.row.playbackTypeCode)">删除 &nbsp;</el-link>
26 </template>
27 </el-table-column>
28 </el-table>
29 </el-main>
30 <el-footer>
31 <div style="text-align:right;">
32 <el-pagination
33 @size-change="handleSizeChange"
34 @current-change="handleCurrentChange"
35 :current-page="queryForm.page"
36 :page-size="queryForm.size"
37 layout="total, prev, pager, next"
38 :total="total">
39 </el-pagination>
40 </div>
41 </el-footer>
42
43 <el-dialog
44 width="60%"
45 :title="title"
46 :visible.sync="dialogVisible">
47 <el-form :model="playbackTypeForm" ref="playbakcForm" :rules="playbackTypeRules" label-width="180px">
48 <el-form-item label="名称：" prop="typeName">
49 <el-input v-model="playbackTypeForm.typeName" maxlength="100" show-word-limit></el-input>
50 </el-form-item>
51 <el-form-item label="图片：" prop="typeImage">
52 <upload-item
53 v-model="playbackTypeForm.typeImage"
54 v-on:before-upload="loading=true"
55 v-on:after-upload="loading=false"
56 ></upload-item>
57 </el-form-item>
58 </el-form>
59 <span slot="footer" class="dialog-footer">
60 <el-button type="primary" @click="submitForm('playbakcForm')">提交</el-button>
61 <el-button @click="cancelCreate">取消</el-button>
62 </span>
63 </el-dialog>
64
65 </div>
66 </template>
67
68 <script>
69 import {request} from '@/api/fetch-api'
70 import UploadItem from '@/components/UploadItem'
71
72 let urls = {
73 playbackTypeListUrl: '/tianbao_edu_api/admin/playbackType/list',
74 playbackTypeSaveUrl: '/tianbao_edu_api/admin/playbackType/save',
75 playbackTypeDelUrl: '/tianbao_edu_api/admin/playbackType/delete',
76 }
77
78 export default {
79 components: {UploadItem},
80 data() {
81 return {
82 playbackTypeList: [],
83 total: 0,
84 loading: false,
85 queryForm: {
86 page: 1,
87 size: 10
88 },
89 dialogVisible: false,
90 title: '',
91 playbackTypeForm: {},
92 playbackTypeRules: {
93 typeName: [{required: true, message: '请输入名称', trigger: 'blur'}],
94 typeImage: [{required: true, message: '上传缩略图', trigger: 'blur'}]
95 }
96 }
97 },
98 methods: {
99 initPlayBackType() {
100 this.loading = true
101 request.get(urls.playbackTypeListUrl, this.queryForm).then(data => {
102 this.loading = false
103 this.playbackTypeList = data.content.list
104 this.total = data.content.total
105 }).catch(() => {
106
107 })
108 },
109 playbackTypeEdit(row) {
110 this.title = '编辑'
111 this.dialogVisible = true
112 this.playbackTypeForm = JSON.parse(JSON.stringify(row))
113 },
114 playbackTypeDelete(code) {
115 this.$confirm('是否永远删除, 是否继续?', '提示', {
116 confirmButtonText: '确定',
117 cancelButtonText: '取消',
118 type: 'warning'
119 }).then(() => {
120 let form ={
121 playbackTypeCode:code
122 }
123 request.post(urls.playbackTypeDelUrl, form).then(data => {
124 this.initPlayBackType()
125 this.$message.success("删除成功")
126 }).catch(() => {
127
128 })
129 }).catch(() => {
130
131 })
132
133 },
134 cancelCreate() {
135 this.dialogVisible = false
136 this.playbackTypeForm = {}
137 },
138 playbackTypeCreate() {
139 this.dialogVisible = true
140 this.title = '创建'
141 },
142 submitForm(formName) {
143 this.$refs[formName].validate((valid) => {
144 if (valid) {
145 request.post(urls.playbackTypeSaveUrl, this.playbackTypeForm).then(response => {
146 this.dialogVisible = false
147 this.$message.success("保存成功")
148 this.initPlayBackType()
149 }).catch(() => {
150
151 })
152 } else {
153 console.log('error submit!!')
154 return false
155 }
156 })
157
158 },
159 /*分页*/
160 handleSizeChange(val) {
161 console.log(`每页 ${val} 条`)
162 this.queryForm.size = val
163 this.queryForm.page = 1
164 this.initPlayBackType()
165 },
166 handleCurrentChange(val) {
167 console.log(`当前页: ${val}`)
168 this.queryForm.page = val
169 this.initPlayBackType()
170 },
171
172 },
173 created() {
174 this.initPlayBackType()
175 }
176 }
177 </script>
178
179 <style scoped>
180
181 </style>
1 <template>
2 <div class="app-container">
3 <el-header height>
4 <el-input type="primary" v-model="queryForm.videoName" placeholder="视频名" style="width: 200px" clearable></el-input>
5 <el-select v-model="queryForm.videoTypeCode" placeholder="请选择" clearable @change="searchVideo">
6 <el-option
7 v-for="item in videoTypeList"
8 :key="item.videoTypeCode"
9 :label="item.typeName"
10 :value="item.videoTypeCode">
11 <span style="float: left">{{ item.typeName }}</span>
12 <span style="float: right; color: #8492a6; font-size: 13px" v-if="item.machine===1">软件</span>
13 <span style="float: right; color: #8492a6; font-size: 13px" v-if="item.machine===0">硬件</span>
14 </el-option>
15 </el-select>
16 <el-button type="primary" @click="searchVideo">搜索</el-button>
17 <el-button type="primary" @click="videoCreate">创建</el-button>
18 </el-header>
19 <el-main>
20 <el-table
21 :data="videoList"
22 style="width: 100%"
23 stripe
24 highlight-current-row
25 v-loading="loading"
26 >
27 <el-table-column label="名称" prop="videoName"></el-table-column>
28 <el-table-column label="视频链接" prop="videoUrl">
29 <!--<template slot-scope="scope">-->
30 <!--<video :src="scope.row.videoUrl" controls="controls"></video>-->
31 <!--</template>-->
32 </el-table-column>
33 <el-table-column label="类型" prop="typeName">
34 </el-table-column>
35 <el-table-column label="操作">
36 <template slot-scope="scope">
37 <el-link type="primary" @click="videoEdit(scope.row)">编辑 &nbsp;</el-link>
38 <el-link type="primary" @click="videoDelete(scope.row.videoCode)">删除 &nbsp;</el-link>
39 </template>
40 </el-table-column>
41 </el-table>
42 </el-main>
43 <el-footer>
44 <div style="text-align:right;">
45 <el-pagination
46 @size-change="handleSizeChange"
47 @current-change="handleCurrentChange"
48 :current-page="queryForm.page"
49 :page-size="queryForm.size"
50 layout="total, prev, pager, next"
51 :total="total">
52 </el-pagination>
53 </div>
54 </el-footer>
55
56 <el-dialog
57 width="60%"
58 :title="title"
59 :visible.sync="dialogVisible">
60 <el-form :model="videoForm" ref="videoForm" :rules="videoRules" label-width="180px">
61 <el-form-item label="名称：" prop="videoName">
62 <el-input v-model="videoForm.videoName" maxlength="100" show-word-limit></el-input>
63 </el-form-item>
64 <el-form-item label="视频链接：" prop="videoUrl">
65 <el-input v-model="videoForm.videoUrl" maxlength="255" show-word-limit></el-input>
66 </el-form-item>
67 <el-form-item label="类型：" prop="videoTypeCode">
68 <el-select v-model="videoForm.videoTypeCode" placeholder="请选择">
69 <el-option
70 v-for="item in videoTypeList"
71 :key="item.videoTypeCode"
72 :label="item.typeName"
73 :value="item.videoTypeCode">
74 <span style="float: left">{{ item.typeName }}</span>
75 <span style="float: right; color: #8492a6; font-size: 13px" v-if="item.machine===1">软件</span>
76 <span style="float: right; color: #8492a6; font-size: 13px" v-if="item.machine===0">硬件</span>
77 </el-option>
78
79 </el-select>
80 </el-form-item>
81 </el-form>
82 <span slot="footer" class="dialog-footer">
83 <el-button type="primary" @click="submitForm('videoForm')">提交</el-button>
84 <el-button @click="cancelCreate">取消</el-button>
85 </span>
86 </el-dialog>
87
88 </div>
89 </template>
90
91 <script>
92 import {request} from '@/api/fetch-api'
93 import UploadItem from '@/components/UploadItem'
94
95 let urls = {
96 videoTypeListUrl: '/tianbao_edu_api/admin/videoType/list',
97 videoListUrl: '/tianbao_edu_api/admin/video/list',
98 videoSaveUrl: '/tianbao_edu_api/admin/video/save',
99 videoDelUrl: '/tianbao_edu_api/admin/video/delete',
100 }
101
102 export default {
103 components: {UploadItem},
104 data() {
105 return {
106 videoList: [],
107 total: 0,
108 loading: false,
109 queryForm: {
110 page: 1,
111 size: 10,
112 videoName: '',
113 videoTypeCode:''
114 },
115 dialogVisible: false,
116 title: '',
117 videoForm: {},
118 videoRules: {
119 videoName: [{required: true, message: '请输入名称', trigger: 'blur'}],
120 videoUrl: [{required: true, message: '上传缩略图', trigger: 'blur'}],
121 videoTypeCode: [{required: true, message: '请选择', trigger: 'blur'}]
122 },
123 videoTypeList: []
124 }
125 },
126 methods: {
127 initVideo() {
128 this.loading = true
129 request.get(urls.videoListUrl, this.queryForm).then(data => {
130 this.loading = false
131 this.videoList = data.content.list
132 this.total = data.content.total
133 }).catch(() => {
134
135 })
136 },
137 initVideoType() {
138 let form = {
139 page: 1,
140 size: 1000
141 }
142 request.get(urls.videoTypeListUrl, this.form).then(data => {
143 this.videoTypeList = data.content.list
144 }).catch(() => {
145
146 })
147 },
148 searchVideo(){
149 this.queryForm.page=1
150 this.initVideo()
151 },
152 videoEdit(row) {
153 this.title = '编辑'
154 this.dialogVisible = true
155 this.videoForm = JSON.parse(JSON.stringify(row))
156 },
157 videoDelete(code) {
158 this.$confirm('是否永远删除, 是否继续?', '提示', {
159 confirmButtonText: '确定',
160 cancelButtonText: '取消',
161 type: 'warning'
162 }).then(() => {
163 let form = {
164 videoCode: code
165 }
166 request.post(urls.videoDelUrl, form).then(data => {
167 this.initVideo()
168 this.$message.success("删除成功")
169 }).catch(() => {
170
171 })
172 }).catch(() => {
173
174 })
175
176 },
177 cancelCreate() {
178 this.dialogVisible = false
179 this.videoForm = {}
180 },
181 videoCreate() {
182 this.dialogVisible = true
183 this.title = '创建'
184 },
185 submitForm(formName) {
186 this.$refs[formName].validate((valid) => {
187 if (valid) {
188 request.post(urls.videoSaveUrl, this.videoForm).then(response => {
189 this.dialogVisible = false
190 this.$message.success("保存成功")
191 this.initVideo()
192 }).catch(() => {
193
194 })
195 } else {
196 console.log('error submit!!')
197 return false
198 }
199 })
200
201 },
202 /*分页*/
203 handleSizeChange(val) {
204 console.log(`每页 ${val} 条`)
205 this.queryForm.size = val
206 this.queryForm.page = 1
207 this.initVideo()
208 },
209 handleCurrentChange(val) {
210 console.log(`当前页: ${val}`)
211 this.queryForm.page = val
212 this.initVideo()
213 },
214
215 },
216 created() {
217 this.initVideo();
218 this.initVideoType();
219 }
220 }
221 </script>
222
223 <style scoped>
224
225 </style>
1 <template>
2 <div class="app-container">
3 <el-header height>
4 <el-button type="primary" @click="videoTypeCreate">创建</el-button>
5 </el-header>
6 <el-main>
7 <el-table
8 :data="videoTypeList"
9 style="width: 100%"
10 stripe
11 highlight-current-row
12 v-loading="loading"
13 >
14 <el-table-column label="名称" prop="typeName"></el-table-column>
15 <el-table-column label="图片" prop="typeImage">
16 <template slot-scope="scope">
17 <a :href="scope.row.typeImage" target="_blank">
18 <el-image :src="scope.row.typeImage"></el-image>
19 </a>
20 </template>
21 </el-table-column>
22 <el-table-column label="软/硬件" prop="machine">
23 <template slot-scope="scope">
24 <span v-if="scope.row.machine===1">软件</span>
25 <span v-if="scope.row.machine===0">硬件</span>
26 </template>
27 </el-table-column>
28 <el-table-column label="操作">
29 <template slot-scope="scope">
30 <el-link type="primary" @click="videoTypeEdit(scope.row)">编辑 &nbsp;</el-link>
31 <el-link type="primary" @click="videoTypeDelete(scope.row.videoTypeCode)">删除 &nbsp;</el-link>
32 </template>
33 </el-table-column>
34 </el-table>
35 </el-main>
36 <el-footer>
37 <div style="text-align:right;">
38 <el-pagination
39 @size-change="handleSizeChange"
40 @current-change="handleCurrentChange"
41 :current-page="queryForm.page"
42 :page-size="queryForm.size"
43 layout="total, prev, pager, next"
44 :total="total">
45 </el-pagination>
46 </div>
47 </el-footer>
48
49 <el-dialog
50 width="60%"
51 :title="title"
52 :visible.sync="dialogVisible">
53 <el-form :model="videoTypeForm" ref="videoTypeForm" :rules="videoTypeRules" label-width="180px">
54 <el-form-item label="名称：" prop="typeName">
55 <el-input v-model="videoTypeForm.typeName" maxlength="100" show-word-limit></el-input>
56 </el-form-item>
57 <el-form-item label="图片：" prop="typeImage">
58 <upload-item
59 v-model="videoTypeForm.typeImage"
60 v-on:before-upload="loading=true"
61 v-on:after-upload="loading=false"
62 ></upload-item>
63 </el-form-item>
64 <el-form-item label="软/硬件：" prop="machine">
65 <el-select v-model="videoTypeForm.machine" placeholder="请选择">
66 <el-option
67 v-for="item in machineOption"
68 :key="item.value"
69 :label="item.label"
70 :value="item.value">
71 </el-option>
72 </el-select>
73 </el-form-item>
74 </el-form>
75 <span slot="footer" class="dialog-footer">
76 <el-button type="primary" @click="submitForm('videoTypeForm')">提交</el-button>
77 <el-button @click="cancelCreate">取消</el-button>
78 </span>
79 </el-dialog>
80
81 </div>
82 </template>
83
84 <script>
85 import {request} from '@/api/fetch-api'
86 import UploadItem from '@/components/UploadItem'
87
88 let urls = {
89 videoTypeListUrl: '/tianbao_edu_api/admin/videoType/list',
90 videoTypeSaveUrl: '/tianbao_edu_api/admin/videoType/save',
91 videoTypeDelUrl: '/tianbao_edu_api/admin/videoType/delete',
92 }
93
94 export default {
95 components: {UploadItem},
96 data() {
97 return {
98 videoTypeList: [],
99 total: 0,
100 loading: false,
101 queryForm: {
102 page: 1,
103 size: 10
104 },
105 dialogVisible: false,
106 title: '',
107 videoTypeForm: {},
108 videoTypeRules: {
109 typeName: [{required: true, message: '请输入名称', trigger: 'blur'}],
110 typeImage: [{required: true, message: '上传缩略图', trigger: 'blur'}],
111 machine: [{required: true, message: '请选择', trigger: 'blur'}]
112 },
113 machineOption:[
114 {label:'软件',value:1},
115 {label:'硬件',value:0},
116 ]
117
118 }
119 },
120 methods: {
121 initVideoType() {
122 this.loading = true
123 request.get(urls.videoTypeListUrl, this.queryForm).then(data => {
124 this.loading = false
125 this.videoTypeList = data.content.list
126 this.total = data.content.total
127 }).catch(() => {
128
129 })
130 },
131 videoTypeEdit(row) {
132 this.title = '编辑'
133 this.dialogVisible = true
134 this.videoTypeForm = JSON.parse(JSON.stringify(row))
135 },
136 videoTypeDelete(code) {
137 this.$confirm('是否永远删除, 是否继续?', '提示', {
138 confirmButtonText: '确定',
139 cancelButtonText: '取消',
140 type: 'warning'
141 }).then(() => {
142 let form ={
143 videoTypeCode:code
144 }
145 request.post(urls.videoTypeDelUrl, form).then(data => {
146 this.initVideoType()
147 this.$message.success("删除成功")
148 }).catch(() => {
149
150 })
151 }).catch(() => {
152
153 })
154
155 },
156 cancelCreate() {
157 this.dialogVisible = false
158 this.videoTypeForm = {}
159 },
160 videoTypeCreate() {
161 this.dialogVisible = true
162 this.title = '创建'
163 },
164 submitForm(formName) {
165 this.$refs[formName].validate((valid) => {
166 if (valid) {
167 request.post(urls.videoTypeSaveUrl, this.videoTypeForm).then(response => {
168 this.dialogVisible = false
169 this.$message.success("保存成功")
170 this.initVideoType()
171 }).catch(() => {
172
173 })
174 } else {
175 console.log('error submit!!')
176 return false
177 }
178 })
179
180 },
181 /*分页*/
182 handleSizeChange(val) {
183 console.log(`每页 ${val} 条`)
184 this.queryForm.size = val
185 this.queryForm.page = 1
186 this.initVideoType()
187 },
188 handleCurrentChange(val) {
189 console.log(`当前页: ${val}`)
190 this.queryForm.page = val
191 this.initVideoType()
192 },
193
194 },
195 created() {
196 this.initVideoType()
197 }
198 }
199 </script>
200
201 <style scoped>
202
203 </style>