|
|
@@ -0,0 +1,333 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <!-- 搜索区域 -->
|
|
|
+ <div class="filter-container">
|
|
|
+ <span>标题:</span>
|
|
|
+ <el-input
|
|
|
+ v-model="listQuery.articleTitle"
|
|
|
+ placeholder="标题"
|
|
|
+ style="width: 200px"
|
|
|
+ class="filter-item"
|
|
|
+ @keyup.enter.native="getList"
|
|
|
+ />
|
|
|
+ <span>所属模块:</span>
|
|
|
+ <el-select
|
|
|
+ v-model="listQuery.auditStatus"
|
|
|
+ placeholder="所属模块"
|
|
|
+ clearable
|
|
|
+ style="width: 200px"
|
|
|
+ class="filter-item"
|
|
|
+ @change="getList"
|
|
|
+ >
|
|
|
+ <el-option label="全部" value="" />
|
|
|
+ <el-option label="待审核" :value="2" />
|
|
|
+ <el-option label="审核通过" :value="1" />
|
|
|
+ <el-option label="审核未通过" :value="0" />
|
|
|
+ </el-select>
|
|
|
+ <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
|
|
|
+ <el-button
|
|
|
+ v-if="userIdentity === 1"
|
|
|
+ icon="el-icon-edit"
|
|
|
+ type="primary"
|
|
|
+ @click="dialogVisible = true"
|
|
|
+ >添加</el-button>
|
|
|
+ </div>
|
|
|
+ <!-- 搜索区域END -->
|
|
|
+ <!-- 表格区域 -->
|
|
|
+ <el-table
|
|
|
+ v-loading="listLoading"
|
|
|
+ :data="list"
|
|
|
+ style="width: 100%"
|
|
|
+ border
|
|
|
+ fit
|
|
|
+ highlight-current-row
|
|
|
+ cell-class-name="table-cell"
|
|
|
+ >
|
|
|
+ <el-table-column label="序号" :index="indexMethod" type="index" width="80" align="center" />
|
|
|
+ <el-table-column label="标题" prop="articleTitle" align="center" />
|
|
|
+ <el-table-column label="所属模块" align="center" />
|
|
|
+ <el-table-column label="创建时间" width="240px" align="center">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ {{ row.createTime | formatTime }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" width="240px" align="center">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <template v-if="userIdentity === 1">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="mini"
|
|
|
+ style="margin-right:5px"
|
|
|
+ icon="el-icon-edit"
|
|
|
+ >编辑</el-button>
|
|
|
+ <el-button
|
|
|
+ type="danger"
|
|
|
+ size="mini"
|
|
|
+ style="margin-right:5px"
|
|
|
+ icon="el-icon-s-check"
|
|
|
+ @click="handleRemove(row)"
|
|
|
+ >删除</el-button>
|
|
|
+ </template>
|
|
|
+ <el-button
|
|
|
+ type="danger"
|
|
|
+ size="mini"
|
|
|
+ style="margin-right:5px"
|
|
|
+ icon="el-icon-s-check"
|
|
|
+ @click="handleRemove(row)"
|
|
|
+ >播放</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <!-- 表格区域END -->
|
|
|
+ <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList(listQuery)" />
|
|
|
+
|
|
|
+ <!-- dialog Start -->
|
|
|
+ <el-dialog
|
|
|
+ title="添加视频"
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ width="30%"
|
|
|
+ @close="dialogClose"
|
|
|
+ >
|
|
|
+
|
|
|
+ <el-form ref="dialogForm" :model="dialogFormData" label-width="86px" :rules="rules">
|
|
|
+ <el-form-item label="标题:" prop="title">
|
|
|
+ <el-input v-model="dialogFormData.title" placeholder="请输入标题" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="视频路径:" prop="videoUrl">
|
|
|
+ <file-upload ref="fileUpload" :file-list="uploadFileList" accept-type="application/*" @change="fileUploadChange" />
|
|
|
+ <el-input v-show="false" v-model="dialogFormData.videoUrl" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="所属模块:" prop="belongMoudule">
|
|
|
+ <el-select v-model="dialogFormData.belongMoudule">
|
|
|
+ <el-option label="请选择模块" value="" />
|
|
|
+ <el-option label="供应商管理/供应商列表" :value="1" />
|
|
|
+ <el-option label="供应商管理/供应商列表" :value="2" />
|
|
|
+ <el-option label="供应商管理/供应商列表" :value="3" />
|
|
|
+ <el-option label="供应商管理/供应商列表" :value="4" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="dialogVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" :disabled="!saveBtnClickable" :loading="requestLoading" @click="submitUpload">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ <!-- dialog END -->
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import FileUpload from '@/components/FileUpload'
|
|
|
+import Pagination from '@/components/Pagination' // secondary package based on el-pagination
|
|
|
+import { formatDate } from '@/utils'
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
+import { changeArticleStatus, getArticleList, removeArticle } from '@/api/doc'
|
|
|
+import { debounce } from '@/utils/tools'
|
|
|
+export default {
|
|
|
+ components: { Pagination, FileUpload },
|
|
|
+ filters: {
|
|
|
+ formatTime(time) {
|
|
|
+ if (!time) {
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+ return formatDate(time, 'yyyy-MM-DD HH:mm:ss')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ listLoading: false,
|
|
|
+ dialogVisible: false,
|
|
|
+ requestLoading: false,
|
|
|
+ total: 0,
|
|
|
+ listQuery: {
|
|
|
+ authUserId: '', // 机构id
|
|
|
+ auditStatus: '', // 审核状态
|
|
|
+ articleTitle: '', // 文章标题
|
|
|
+ listType: 1, // 列表类型：1文章列表，2文章审核列表
|
|
|
+ pageNum: 1, // 页码
|
|
|
+ pageSize: 10, // 分页大小
|
|
|
+ status: '' // 文章状态：0已下线，1已上线，2待上线
|
|
|
+ },
|
|
|
+ list: [],
|
|
|
+ uploadFileList: [],
|
|
|
+ dialogFormData: {
|
|
|
+ title: '',
|
|
|
+ videoUrl: '',
|
|
|
+ belongMoudule: ''
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ title: [{
|
|
|
+ required: true,
|
|
|
+ message: '请输入标题', trigger: ['change', 'blur']
|
|
|
+ }],
|
|
|
+ videoUrl: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请选择文件', trigger: 'change'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ belongMoudule: [{
|
|
|
+ required: true,
|
|
|
+ message: '请选择所属模块', trigger: 'change'
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(['authUserId', 'userIdentity', 'proxyInfo']),
|
|
|
+ saveBtnClickable() {
|
|
|
+ return this.uploadFileList.length > 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 上传文件
|
|
|
+ submitUpload() {
|
|
|
+ this.$refs.dialogForm.validate(valid => {
|
|
|
+ console.log(valid)
|
|
|
+ if (!valid) return
|
|
|
+ this.requestLoading = true // 上传文件
|
|
|
+ this.$refs.fileUpload.submit()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 监听上传文件的状态变化
|
|
|
+ async fileUploadChange(fileList) {
|
|
|
+ this.uploadFileList = fileList
|
|
|
+ try {
|
|
|
+ await this.handleFileUploadStatus(fileList)
|
|
|
+ this.handleSave.apply(this)
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 保存 TODO
|
|
|
+ handleSave: debounce(function() {
|
|
|
+ console.log('保存')
|
|
|
+ console.log(this.dialogFormData)
|
|
|
+ setTimeout(() => {
|
|
|
+ this.requestLoading = false
|
|
|
+ }, 500)
|
|
|
+ }, 200),
|
|
|
+
|
|
|
+ // 处理文件上传状态
|
|
|
+ handleFileUploadStatus(fileList) {
|
|
|
+ // 文件列表为空
|
|
|
+ if (fileList.length <= 0) {
|
|
|
+ this.dialogFormData.videoUrl = ''
|
|
|
+ return Promise.reject('faild')
|
|
|
+ }
|
|
|
+ // 取第一个文件
|
|
|
+ const { response, status } = fileList[0]
|
|
|
+ // 文件已选择但未上传
|
|
|
+ if (status === 'ready') {
|
|
|
+ this.dialogFormData.videoUrl = status
|
|
|
+ return Promise.reject('faild')
|
|
|
+ }
|
|
|
+ // 文件已上传
|
|
|
+ if (status === 'success') {
|
|
|
+ this.dialogFormData.videoUrl = response.previewUrl
|
|
|
+ return Promise.resolve('success')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 获取列表数据
|
|
|
+ getList() {
|
|
|
+ this.listLoading = true
|
|
|
+ this.listQuery.authUserId = this.authUserId
|
|
|
+ getArticleList(this.listQuery)
|
|
|
+ .then(res => {
|
|
|
+ if (res.code !== 0) return
|
|
|
+ this.list = res.data.list
|
|
|
+ console.log(res)
|
|
|
+ this.total = res.data.total
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ this.listLoading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 删除
|
|
|
+ async handleRemove(row) {
|
|
|
+ const text = await this.$confirm('确认删除该文章吗？', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message.info('已取消操作')
|
|
|
+ })
|
|
|
+ if (text !== 'confirm') return
|
|
|
+ removeArticle({ articleId: row.articleId })
|
|
|
+ .then(res => {
|
|
|
+ if (res.code !== 0) return
|
|
|
+ this.$message.success(res.data)
|
|
|
+ this.getList(this.listQuery)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 状态改变
|
|
|
+ handleChangeStatus(item) {
|
|
|
+ this.listLoading = true
|
|
|
+ // const params = {
|
|
|
+ // authId: item.authId,
|
|
|
+ // status: item.status ? 1 : 0
|
|
|
+ // }
|
|
|
+ console.log(item)
|
|
|
+ const params = {
|
|
|
+ articleId: item.articleId,
|
|
|
+ status: item.status === 1 ? 0 : 1
|
|
|
+ }
|
|
|
+ changeArticleStatus(params).then(res => {
|
|
|
+ // this.$message.success(res.data)
|
|
|
+ this.$message({
|
|
|
+ message: res.data,
|
|
|
+ duration: 500,
|
|
|
+ type: 'success'
|
|
|
+ })
|
|
|
+ this.getList()
|
|
|
+ }).catch(err => {
|
|
|
+ console.log(err)
|
|
|
+ }).finally(() => {
|
|
|
+ this.listLoading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 表格索引
|
|
|
+ indexMethod(index) {
|
|
|
+ return index + this.listQuery.pageSize * (this.listQuery.pageNum - 1) + 1
|
|
|
+ },
|
|
|
+ // 编辑视频
|
|
|
+ handleAdd() {},
|
|
|
+ dialogClose() {
|
|
|
+ console.log(123)
|
|
|
+ // this.uploadFileList = []
|
|
|
+ this.$refs.fileUpload.clearAllFiles()
|
|
|
+ this.$refs.dialogForm.resetFields()
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.filter-container {
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ vertical-align: middle;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .el-button {
|
|
|
+ display: inline-block;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ .el-input,
|
|
|
+ .el-select {
|
|
|
+ margin-right: 10px;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.el-table .cell {
|
|
|
+ overflow: visible;
|
|
|
+}
|
|
|
+.el-badge {
|
|
|
+ margin: 0 6px;
|
|
|
+}
|
|
|
+</style>
|
喻文俊