define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) { var Controller = { index: function () { var vue = new Vue({ el: '#vue', data: { // 表格当前页数据 tableData: [], // 多选数组 multipleSelection: [], // 搜索条件 key: '', // 默认每页数据量 pageSize: 50, // 当前页码 currentPage: 1, // 默认数据总数 totalCount: 0, // 列表加载遮罩 listLoading: false, // 搜索字段 search: { startTime: '', endTime: '', keyword: '', type: '', sort: 'id', status: '', }, searchOpt: [{ id: 1, value: '标题' }, { id: 2, value: '描述' }, { id: 3, value: '详细内容' }], statusOpt: [{ id: 1, value: '显示' }, { id: 2, value: '隐藏' }], // 时间格式化 dateFormat: function (row, column) { var date = row[column.property]; if (date === undefined || date === 0) { return ''; } return moment(date * 1000).format("YYYY-MM-DD HH:mm:ss"); } }, created() { this.loadData(this.search.keyword, this.currentPage, this.pageSize, this.search.sort); }, methods: { // 刷新页面 refreshPage() { this.search = { startTime: '', endTime: '', keyword: '', type: '', sort: 'id', status: '', }; this.loadData(this.search.keyword, this.currentPage, this.pageSize, this.search.sort); }, // 添加 add() { layer.open({ type: 2, title: '添加视频', shadeClose: false, scrollbar: false, maxmin: true, shade: 0.2, area: ['100%', '100%'], content: 'video/add' }); }, // 编辑 edit(id) { layer.open({ type: 2, title: '编辑视频', shadeClose: false, scrollbar: false, maxmin: true, shade: 0.2, area: ['100%', '100%'], content: 'video/add?id=' + id, }); }, // 从服务器读取数据 loadData(key, currentPage, pageSize, sort) { this.listLoading = true; $.getJSON('video/index', { keyword: key, type: this.search.type, start_time: this.sendStartTime, end_time: this.sendEndTime, page: currentPage, rows: pageSize, sort: sort, status: this.search.status, }, data => { this.totalCount = data.total; this.tableData = data.list; this.listLoading = false; }); }, // 排序 sortChange(e) { }, // 搜索 searchData() { this.sendStartTime = this.search.startTime !== '' ? +this.search.startTime / 1000 : ''; this.sendEndTime = this.search.endTime !== '' ? +this.search.endTime / 1000 : ''; this.loadData(this.search.keyword, this.currentPage, this.pageSize, this.search.sort); }, // 每页显示数据量变更 handleSizeChange(val) { this.pageSize = val; this.loadData(this.search.keyword, this.currentPage, this.pageSize, this.search.sort); }, // 页码变更 handleCurrentChange(val) { this.currentPage = val; this.loadData(this.search.keyword, this.currentPage, this.pageSize, this.search.sort); }, // 多选响应 handleSelectionChange(val) { this.multipleSelection = val; }, // 批量删除 del() { if (this.multipleSelection.length === 0) { this.$message.warning('请选择至少一条视频进行删除!'); return; } var array = []; this.multipleSelection.forEach((row) => { array.push(row.id); }); this.$confirm('您确定要删除所选的视频吗?, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { $.ajax({ url: 'video/dell', data: "id=" + array, type: "POST", dataType: 'json', success: res => { if (res.code === 200) { this.$message.success(res.msg); this.loadData(this.search.keyword, this.currentPage, this.pageSize, this.search.sort); } else { this.$message.warning(res.msg); } }, error: function (er) { } }); }).catch(() => { }); }, // 单条删除 dell(id) { this.$confirm('您确定要删除此视频吗?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { $.ajax({ url: 'video/dell', data: { id }, type: "POST", dataType: 'json', success: res => { if (res.code === 200) { this.$message.success(res.msg); this.loadData(this.search.keyword, this.currentPage, this.pageSize, this.search.sort); } else { this.$message.warning(res.msg); } }, error: function (er) { } }); }).catch(() => { }); }, // 状态改变 statusChange(row) { // 提交 let loading = this.$loading({ lock: true, text: '正在更改中...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.3)' }); $.ajax({ url: 'video/status', data: { id: row.id, status: row.status }, type: 'GET', success: res => { loading.close(); if (res.code === 200) { this.$message.success(res.msg); } else { this.$message.warning(res.msg); } }, error: function (er) { } }); }, handleClearSelect(field) { // 重新加载 this.$set(this.search, field, ''); this.loadData(this.search.keyword, this.currentPage, this.pageSize, this.search.sort); }, handleClearSearchInp() { if (this.search.type) { // 重新加载 this.loadData(this.search.keyword, this.currentPage, this.pageSize, this.search.sort); } }, } }); }, add: function () { // var ue = UE.getEditor('v-content', {}); let vue = new Vue({ el: '#vue', data: { // 字段信息 formData: { id: 0, title: '', image: '', video: '', desc: '', content: '', sort: '', views: 0, play_num: 0, status: '1', }, // 表单验证规则 rules: { title: [{ required: true, message: '请您输入标题', trigger: 'blur' }], image: [{ required: true, message: '请您上传视频封面', trigger: 'blur' }], video: [{ required: true, message: '请您上传视频', trigger: 'blur' }], desc: [{ required: true, message: '请您输入描述', trigger: 'blur' }], }, // 上传视频进度条 videoUploadPercent: 0, }, mounted() { this.content(); }, methods: { // 移除视频 handleRemoveVideo() { this.$confirm('您确定要移除此视频吗?', '温馨提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { this.formData.video = ''; }).catch(() => { }); }, // 视频上传前回调 handleBeforeUploadVideo(file) { var fileSize = file.size / 1024 / 1024 < 100; if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb', 'video/mov'].indexOf(file.type) == -1) { this.$message.warning('您上传的视频格式不正确'); return false; } if (!fileSize) { this.$message.warning('上传的视频不能大于100MB'); return false; } this.videoUploadPercent = 0; }, // 视频上传进度条 handleUploadVideoProcess(event, file, fileList) { this.videoUploadPercent = file.percentage.toFixed(0) * 1; }, // 视频上传成功回调 handleVideoSuccess(res, file) { this.videoUploadPercent = 0; if (res.code === 200) { this.formData.video = res.data.video } else { this.$message.warning(res.msg); } }, // 获取修改数据 content() { let id = $('#vue').data('id'); if (id > 0) { let loading = this.$loading({ lock: true, text: '正在获取数据...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.3)' }); $.ajax({ url: 'video/getContent', type: 'GET', data: { id }, success: res => { loading.close(); if (res.code === 200) { let data = res.data; this.formData = { id: data.id, title: data.title, image: data.image, video: data.video, desc: data.desc, views: data.views, content: '', sort: data.sort, status: data.status.toString(), play_num: data.play_num, }; } else { this.$message.warning(res.msg); } } }) } }, // 选择图片 selectImage(field) { Fast.api.open("general/file/index?select=1&multiple=false", '选择图片', { callback: res => { this.$set(this.formData, field, res.url); } }); }, // 关闭layer弹窗 closeLayerDialog() { // 关闭弹窗 var win = parent.layer.getFrameIndex(window.name); parent.layer.close(win); }, // 提交 submit() { this.$refs.form.validate(valid => { if (!valid) { return false; } let formData = this.formData; // 验证 // 获取编辑器内容 // let content = UE.getEditor('v-content').getContent(); let content = $('.editor').summernote('code'); if (content === '') { // this._sweetMsg({ // type: 'warning', // content: '请您输入详细内容' // }); // UE.getEditor('v-content').focus(); // return; } // 提交 let loading = this.$loading({ lock: true, text: '正在提交中...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.3)' }); formData.content = content; $.ajax({ url: 'video/add', type: 'POST', data: formData, success: res => { loading.close(); if (res.code === 200) { parent.layer.msg(res.msg, {icon: 1, time: 2000, shade: 0.1}, function (index) { // 关闭弹窗 var win = parent.layer.getFrameIndex(window.name); parent.layer.close(win); parent.window.location.reload(); }); } else { this.$message.warning(res.msg); } } }) }); }, // 弹窗提示框 _sweetMsg(obj) { swal({ title: obj.title || '温馨提示', text: obj.content, type: obj.type || 'success', confirmButtonColor: "#7367f0", confirmButtonText: '确定' }); }, } }); Controller.api.bindevent(); }, edit: function () { Controller.api.bindevent(); }, api: { bindevent: function () { Form.api.bindevent($("form[role=form]")); } } }; return Controller; });