|
|
@@ -0,0 +1,552 @@
|
|
|
+<template>
|
|
|
+ <div class="yxnaContent">
|
|
|
+ <!--操作栏-->
|
|
|
+ <div style="display: flex;justify-content: space-between;margin-bottom: 10px">
|
|
|
+ <div>
|
|
|
+ <el-button type="primary" class="add" @click="openAddWork">新增</el-button>
|
|
|
+ <el-button type="primary" class="add" style="margin-left: 10px"
|
|
|
+ @click="upload.open = true;upload.fileList = []">导入
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex">
|
|
|
+ <el-input v-model.trim="query.officialAccount" clearable placeholder="请输入公众号"
|
|
|
+ style="margin: 0 10px;width: 200px" />
|
|
|
+ <el-input v-model.trim="query.title" clearable placeholder="请输入标题"
|
|
|
+ style="margin: 0 10px;width: 200px" />
|
|
|
+ <el-button type="primary" class="search" @click="searchData">搜索</el-button>
|
|
|
+ <el-button type="primary" class="search" @click="reset" style="margin-left: 5px">重置</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--表格-->
|
|
|
+ <el-table :data="tableData" border ref='multipleTable' :height="tableH" stripe
|
|
|
+ :header-cell-style="{ background: '#e5e8ed', color: '#666', textAlign: 'center' }" :cell-style="tableStyle"
|
|
|
+ style="cursor: default">
|
|
|
+ <el-table-column width="50" label="序号">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ (sorts.page - 1) * sorts.limit + scope.$index + 1 }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="officialAccount" label="公众号" />
|
|
|
+ <el-table-column prop="title" :show-overflow-tooltip="true" label="标题" />
|
|
|
+ <el-table-column prop="url" :show-overflow-tooltip="true" label="url" />
|
|
|
+ <el-table-column prop="sort" label="排序号" />
|
|
|
+ <el-table-column prop="createTime" label="发布时间" />
|
|
|
+ <el-table-column label="操作" width="230">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button class="but" type="primary" @click="openModifyWorkDialog(scope.row)">
|
|
|
+ 编辑</el-button>
|
|
|
+ <el-button class="but" type="danger" @click="handleDelete(scope.row.id, scope.$index)">删除
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div class="block">
|
|
|
+ <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
|
|
+ :current-page="sorts.page" :page-sizes="[10, 20, 30, 40, 50]" :page-size="sorts.limit"
|
|
|
+ layout="prev, pager,next,jumper,total,sizes" :total="total">
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ <!-- 新增/编辑媒体 -->
|
|
|
+ <el-dialog :visible.sync="workDialog" width="80%" class="detailDialog" :close-on-click-modal="false" top="40px">
|
|
|
+ <div slot="title">
|
|
|
+ <div class="addTitle">{{workTitle}}</div>
|
|
|
+ </div>
|
|
|
+ <div style="height:65vh;overflow: auto;padding-right: 20px">
|
|
|
+ <el-form :model="postManagement" label-width="140px">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="公众号" prop="officialAccount">
|
|
|
+ <el-input v-model="postManagement.officialAccount" placeholder="请输入公众号">
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="标题" prop="title">
|
|
|
+ <el-input v-model="postManagement.title" placeholder="请输入标题">
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="url" prop="url">
|
|
|
+ <el-input v-model="postManagement.url" placeholder="请输入url">
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="排序号" prop="sort">
|
|
|
+ <el-input-number v-model="postManagement.sort">
|
|
|
+ </el-input-number>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="发布时间" prop="createTime">
|
|
|
+ <el-date-picker v-model="postManagement.createTime" type="datetime"
|
|
|
+ placeholder="请选择发布时间" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" size="mini" @click="saveWork">提交</el-button>
|
|
|
+ <el-button @click="workDialog = false" size="mini">返回</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <!-- 上传文件 -->
|
|
|
+ <el-dialog title="提示" :visible.sync="upload.open" width="400px">
|
|
|
+ <el-upload class="upload-demo" :file-list="upload.fileList" :on-change="onChange" :auto-upload="false"
|
|
|
+ accept=".xlsx, .xls" drag action="#" multiple>
|
|
|
+ <i class="el-icon-upload"></i>
|
|
|
+ <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
|
|
+ <div class="el-upload__tip" slot="tip" style="text-align: center">仅允许导入xls、xlsx格式文件。<span
|
|
|
+ style="color: #409EFF;cursor: pointer" @click="getExcelFile">下载模板</span></div>
|
|
|
+ </el-upload>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" :loading="upload.isUploading" @click="submitFileForm">确 定</el-button>
|
|
|
+ <el-button @click="upload.open = false">取 消</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import api from '../../api/index'
|
|
|
+ import XLSX from 'xlsx'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: 'NewMediaMatrix',
|
|
|
+ created() {
|
|
|
+ this.getData()
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tableStyle: {
|
|
|
+ textAlign: 'center',
|
|
|
+ },
|
|
|
+ tableH: 'calc(100vh - 230px)',
|
|
|
+ // 搜索参数
|
|
|
+ query: {
|
|
|
+ officialAccount: '',
|
|
|
+ title: ''
|
|
|
+ },
|
|
|
+ // 列表数据
|
|
|
+ tableData: [],
|
|
|
+ // 总数
|
|
|
+ total: 0,
|
|
|
+ // 上传相关
|
|
|
+ upload: {
|
|
|
+ open: false,
|
|
|
+ isUploading: false,
|
|
|
+ file: null,
|
|
|
+ fileList: []
|
|
|
+ },
|
|
|
+ // 上传文件界面
|
|
|
+ dialogVisible: false,
|
|
|
+ //新增/编辑媒体界面
|
|
|
+ workDialog: false,
|
|
|
+ //新增/编辑媒体标题
|
|
|
+ workTitle: '新增媒体',
|
|
|
+ // 新增/编辑表单
|
|
|
+ postManagement: {
|
|
|
+ officialAccount: '',
|
|
|
+ title: '',
|
|
|
+ url: '',
|
|
|
+ sort: 0,
|
|
|
+ createTime: ''
|
|
|
+ },
|
|
|
+ // 分页
|
|
|
+ sorts: {
|
|
|
+ page: 1,
|
|
|
+ limit: 10,
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //打开新增媒体界面
|
|
|
+ openAddWork() {
|
|
|
+ this.postManagement = {
|
|
|
+ officialAccount: '',
|
|
|
+ title: '',
|
|
|
+ url: '',
|
|
|
+ sort: 0,
|
|
|
+ createTime: ''
|
|
|
+ };
|
|
|
+ this.workTitle = '新增媒体'
|
|
|
+ this.workDialog = true;
|
|
|
+ },
|
|
|
+ //打开修改媒体界面
|
|
|
+ openModifyWorkDialog(data) {
|
|
|
+ this.workTitle = '编辑媒体';
|
|
|
+ this.postManagement = JSON.parse(JSON.stringify(data));
|
|
|
+ this.workDialog = true;
|
|
|
+ },
|
|
|
+ //保存
|
|
|
+ saveWork() {
|
|
|
+ if (!this.postManagement.officialAccount) {
|
|
|
+ this.$message.error('请输入公众号！');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!this.postManagement.title) {
|
|
|
+ this.$message.error('请输入标题！');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!this.postManagement.url) {
|
|
|
+ this.$message.error('请输入url！');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!this.postManagement.createTime) {
|
|
|
+ this.$message.error('请选择创建时间！');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let fd = new FormData();
|
|
|
+ fd.append('officialAccount', this.postManagement.officialAccount);
|
|
|
+ fd.append('title', this.postManagement.title);
|
|
|
+ fd.append('url', this.postManagement.url);
|
|
|
+ fd.append('sort', this.postManagement.sort);
|
|
|
+ fd.append('createTime', this.postManagement.createTime);
|
|
|
+ if (this.workTitle == '编辑媒体') {
|
|
|
+ fd.append('id', this.postManagement.id);
|
|
|
+ api.updateArticle(fd).then(r => {
|
|
|
+ if (r.data.result) {
|
|
|
+ this.$message.success('编辑成功');
|
|
|
+ this.getData();
|
|
|
+ this.workDialog = false;
|
|
|
+ } else {
|
|
|
+ this.$message.error("编辑失败");
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message.error("编辑失败");
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ api.addArticle(fd).then(r => {
|
|
|
+ if (r.data.result) {
|
|
|
+ this.$message.success('新增成功');
|
|
|
+ this.getData();
|
|
|
+ this.workDialog = false;
|
|
|
+ } else {
|
|
|
+ this.$message.error("新增失败");
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message.error("新增失败");
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //切换列表条数
|
|
|
+ handleSizeChange(pageSize) {
|
|
|
+ this.sorts.limit = pageSize
|
|
|
+ this.sorts.page = 1;
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
+ //切换页码
|
|
|
+ handleCurrentChange(currentPage) {
|
|
|
+ this.$refs.multipleTable.bodyWrapper.scrollTop = 0;
|
|
|
+ this.sorts.page = currentPage;
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
+ //删除
|
|
|
+ handleDelete(id, index) {
|
|
|
+ this.$confirm("您确定要删除该数据吗?", "提示", {
|
|
|
+ cancelButtonClass: "btn-custom-cancel",
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning"
|
|
|
+ }).then(() => {
|
|
|
+ let fd = new FormData();
|
|
|
+ fd.append('id', id);
|
|
|
+ api.deleteArticleById(fd).then(res => {
|
|
|
+ if (res.data.result) {
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: '删除成功!'
|
|
|
+ });
|
|
|
+ this.tableData.splice(index, 1);
|
|
|
+ this.getData();
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: '删除失败!'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: '已取消删除'
|
|
|
+ });
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取列表数据
|
|
|
+ getData() {
|
|
|
+ let params = {
|
|
|
+ page: this.sorts.page,
|
|
|
+ limit: this.sorts.limit,
|
|
|
+ officialAccount: this.query.officialAccount,
|
|
|
+ title: this.query.title
|
|
|
+ }
|
|
|
+ api.sortArticleHeadlinesPage({
|
|
|
+ params
|
|
|
+ }).then(r => {
|
|
|
+ this.total = r.data.count
|
|
|
+ this.tableData = r.data.data
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 搜索
|
|
|
+ searchData() {
|
|
|
+ this.sorts.page = 1;
|
|
|
+ this.getData()
|
|
|
+ },
|
|
|
+ // 清空输入框
|
|
|
+ reset() {
|
|
|
+ this.query.officialAccount = '';
|
|
|
+ this.query.title = '';
|
|
|
+ this.sorts.page = 1;
|
|
|
+ this.getData()
|
|
|
+ },
|
|
|
+ // 更改文件
|
|
|
+ onChange(file, fileList) {
|
|
|
+ if (file.raw.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.raw
|
|
|
+ .type === 'application/vnd.ms-excel') {
|
|
|
+ this.upload.file = file;
|
|
|
+ // 覆盖上次上传的文件
|
|
|
+ if (fileList.length > 0) {
|
|
|
+ this.upload.fileList = [fileList[fileList.length - 1]];
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.$message.error('只能上传xls、xlsx文件!');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 提交上传文件
|
|
|
+ submitFileForm() {
|
|
|
+ if (!this.upload.file) {
|
|
|
+ this.$message.error('请上传文件！');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let fd = new FormData();
|
|
|
+ fd.append('file', this.upload.file.raw);
|
|
|
+ this.upload.isUploading = true;
|
|
|
+ api.uploadArticleExcel(fd).then(r => {
|
|
|
+ if (r.data.result) {
|
|
|
+ this.sorts.page = 1;
|
|
|
+ this.getData();
|
|
|
+ this.$message.success("上传成功");
|
|
|
+ this.upload.open = false;
|
|
|
+ this.upload.isUploading = false;
|
|
|
+ } else {
|
|
|
+ this.upload.open = false;
|
|
|
+ this.upload.isUploading = false;
|
|
|
+ this.$message.error("上传失败，有" + r.data.msg + "条数据错误");
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ this.upload.open = false;
|
|
|
+ this.upload.isUploading = false;
|
|
|
+ this.$message.error("上传失败");
|
|
|
+ })
|
|
|
+ },
|
|
|
+ exportExcel(name, titleArr, sheetName) {
|
|
|
+ // 导出EXCEL
|
|
|
+ const ws = XLSX.utils.aoa_to_sheet(titleArr)
|
|
|
+ const wb = XLSX.utils.book_new()
|
|
|
+ XLSX.utils.book_append_sheet(wb, ws, sheetName)
|
|
|
+ XLSX.writeFile(wb, name + '.xlsx')
|
|
|
+ },
|
|
|
+ getExcelFile() {
|
|
|
+ // 获取EXCEL导入示例
|
|
|
+ const titleArr = [
|
|
|
+ ['公众号', '标题', 'url', '排序', '创建时间']
|
|
|
+ ] // 表头中文名
|
|
|
+ this.exportExcel('example', titleArr, 'sheet1')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="less">
|
|
|
+ /* 禁用后的勾选*/
|
|
|
+ /deep/ .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
|
|
|
+ border-color: #def5cb;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
|
|
|
+ background-color: #157de9;
|
|
|
+ border-color: #DCDFE6;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ [data-v-2cde7735] .el-upload-list--picture .el-upload-list__item-name {
|
|
|
+ display: block;
|
|
|
+ margin-top: 0px;
|
|
|
+ margin-left: -78px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-upload-list--picture .el-upload-list__item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column-reverse;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-upload-list--picture .el-upload-list__item-name i {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-upload-list--picture .el-upload-list__item-name {
|
|
|
+ display: block;
|
|
|
+ margin-top: 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-upload-list--picture .el-upload-list__item-thumbnail {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-dialog__body {
|
|
|
+ padding: 0 0 30px 20px;
|
|
|
+ color: #606266;
|
|
|
+ font-size: 14px;
|
|
|
+ word-break: break-all;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-dialog {
|
|
|
+ margin: 0 auto 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-form-item__label {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .yxnaContent {
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .addTitle {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .btn-custom-cancel {
|
|
|
+ float: right !important;
|
|
|
+ margin-left: 10px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .add {
|
|
|
+ width: 66px;
|
|
|
+ height: 38px;
|
|
|
+ margin-left: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-message-box__btns .el-button:nth-child(2) {
|
|
|
+ margin-right: 10px;
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-col-12 {
|
|
|
+ width: 50%;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search {
|
|
|
+ width: 66px;
|
|
|
+ height: 38px;
|
|
|
+ margin-left: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-form-item__label {
|
|
|
+ height: 40px;
|
|
|
+ width: 110px;
|
|
|
+ background-color: #FAFAFA;
|
|
|
+ text-align: center;
|
|
|
+ border: 1px solid #DCDFE6;
|
|
|
+ border-radius: 2px 0 0 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-button.is-disabled {
|
|
|
+ color: #C0C4CC !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.el-button--primary.is-disabled {
|
|
|
+ color: #FFF !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-input__inner {
|
|
|
+ border-radius: 2px 0 0 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-select>.el-input {
|
|
|
+ width: 200px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-textarea__inner {
|
|
|
+ height: 100px;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ /deep/ .el-dialog__title {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-pagination__total {
|
|
|
+ margin-left: 10px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-pagination {
|
|
|
+ margin: 0;
|
|
|
+ margin-top: 10px;
|
|
|
+ /* position: fixed;
|
|
|
+ left: 13rem; */
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-table--scrollable-x .el-table__body-wrapper {
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+
|
|
|
+ .imgBox {
|
|
|
+ width: 100%;
|
|
|
+ /*height: 55vh;*/
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .but {
|
|
|
+ width: 36px;
|
|
|
+ height: 22px;
|
|
|
+ padding: 0;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-checkbox {
|
|
|
+ margin: 0;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .bewrite>.el-form-item__label {
|
|
|
+ width: 100%;
|
|
|
+ text-align: left;
|
|
|
+ padding-left: 21px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-form--inline .el-form-item {
|
|
|
+ margin-right: 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ [data-v-2cde7735] .el-form-item__label {
|
|
|
+ border: 1px solid #DCDFE6;
|
|
|
+ /*border-right: transparent;*/
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 空白框*/
|
|
|
+ /deep/ .formTempBox {
|
|
|
+ height: 38px;
|
|
|
+ border: 1px solid #DCDFE6;
|
|
|
+ width: 100%;
|
|
|
+ border-left: transparent;
|
|
|
+ background-color: #FAFAFA;
|
|
|
+ }
|
|
|
+</style>
|
wrh