|
|
@@ -1,502 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="app-container">
|
|
|
- <!-- 查询和其他操作 -->
|
|
|
- <div class="filter-container">
|
|
|
- <el-select
|
|
|
- v-model="listQuery.category"
|
|
|
- clearable
|
|
|
- placeholder="请选择类别"
|
|
|
- class="filter-item"
|
|
|
- size="small"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="dict in categoryMap"
|
|
|
- :key="dict.value"
|
|
|
- :label="dict.label"
|
|
|
- :value="dict.value"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
- <el-input
|
|
|
- v-model="listQuery.title"
|
|
|
- clearable
|
|
|
- class="filter-item"
|
|
|
- style="width: 200px;"
|
|
|
- placeholder="请输入标题"
|
|
|
- size="small"
|
|
|
- />
|
|
|
- <el-input
|
|
|
- v-model="listQuery.from"
|
|
|
- clearable
|
|
|
- class="filter-item"
|
|
|
- style="width: 200px;"
|
|
|
- placeholder="请输入来源"
|
|
|
- size="small"
|
|
|
- />
|
|
|
- <el-button
|
|
|
- v-permission="['news:news:list']"
|
|
|
- class="filter-item"
|
|
|
- type="primary"
|
|
|
- size="mini"
|
|
|
- icon="el-icon-search"
|
|
|
- @click="handleFilter"
|
|
|
- >查找</el-button
|
|
|
- >
|
|
|
- <el-button
|
|
|
- v-permission="['news:news:create']"
|
|
|
- class="filter-item"
|
|
|
- type="primary"
|
|
|
- size="mini"
|
|
|
- icon="el-icon-edit"
|
|
|
- @click="handleCreate"
|
|
|
- >添加</el-button
|
|
|
- >
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 查询结果 -->
|
|
|
- <el-table
|
|
|
- v-loading="listLoading"
|
|
|
- :data="list"
|
|
|
- size="small"
|
|
|
- element-loading-text="正在查询中。。。"
|
|
|
- border
|
|
|
- fit
|
|
|
- highlight-current-row
|
|
|
- >
|
|
|
- <el-table-column
|
|
|
- :formatter="typeFormat"
|
|
|
- align="center"
|
|
|
- label="类别"
|
|
|
- prop="category"
|
|
|
- />
|
|
|
- <el-table-column align="center" label="标题" prop="title" />
|
|
|
- <el-table-column
|
|
|
- align="center"
|
|
|
- label="标题图片"
|
|
|
- prop="titleImg"
|
|
|
- width="120px"
|
|
|
- >
|
|
|
- <template slot-scope="scope">
|
|
|
- <img
|
|
|
- v-if="scope.row.titleImg"
|
|
|
- :src="scope.row.titleImg"
|
|
|
- width="100px"
|
|
|
- height="100px"
|
|
|
- >
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column align="center" label="来源" prop="from" />
|
|
|
- <el-table-column align="center" label="更新时间" prop="gmtUpdate">
|
|
|
- <template slot-scope="scope">{{
|
|
|
- scope.row.gmtUpdate | formatTime
|
|
|
- }}</template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- align="center"
|
|
|
- label="操作"
|
|
|
- class-name="small-padding fixed-width"
|
|
|
- >
|
|
|
- <template slot-scope="scope">
|
|
|
- <el-button
|
|
|
- v-permission="['news:news:edit']"
|
|
|
- type="primary"
|
|
|
- size="mini"
|
|
|
- @click="handleUpdate(scope.row)"
|
|
|
- >编辑</el-button
|
|
|
- >
|
|
|
- <el-button
|
|
|
- v-permission="['news:news:delete']"
|
|
|
- type="danger"
|
|
|
- size="mini"
|
|
|
- @click="handleDelete(scope.row)"
|
|
|
- >删除</el-button
|
|
|
- >
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
-
|
|
|
- <pagination
|
|
|
- v-show="total > 0"
|
|
|
- :total="total"
|
|
|
- :page.sync="listQuery.page"
|
|
|
- :limit.sync="listQuery.limit"
|
|
|
- @pagination="getList"
|
|
|
- />
|
|
|
-
|
|
|
- <!-- 添加或修改对话框 -->
|
|
|
- <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
|
|
|
- <el-form
|
|
|
- ref="dataForm"
|
|
|
- :rules="rules"
|
|
|
- :model="dataForm"
|
|
|
- status-icon
|
|
|
- label-position="left"
|
|
|
- label-width="100px"
|
|
|
- style="width: 800px; margin-left:10px;"
|
|
|
- >
|
|
|
- <el-form-item label="id" prop="id" hidden>
|
|
|
- <el-input v-model="dataForm.id" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="类别" prop="category">
|
|
|
- <el-select v-model="dataForm.category" placeholder="请选择类别">
|
|
|
- <el-option
|
|
|
- v-for="(dict, index) in options"
|
|
|
- :key="index"
|
|
|
- :label="dict.label"
|
|
|
- :value="dict.value"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="标题" prop="title">
|
|
|
- <el-input v-model="dataForm.title" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="标题图片" prop="titleImg">
|
|
|
- <el-upload
|
|
|
- :headers="headers"
|
|
|
- :action="uploadPath"
|
|
|
- :show-file-list="false"
|
|
|
- :on-success="uploadSuccessHandle"
|
|
|
- :before-upload="onBeforeUpload"
|
|
|
- class="avatar-uploader"
|
|
|
- accept=".jpg, .jpeg, .png, .gif"
|
|
|
- >
|
|
|
- <img
|
|
|
- v-if="dataForm.titleImg"
|
|
|
- ref="adImg"
|
|
|
- :src="dataForm.titleImg"
|
|
|
- class="avatar"
|
|
|
- >
|
|
|
- <i v-else class="el-icon-plus avatar-uploader-icon" />
|
|
|
- </el-upload>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="简介" prop="abstractContent">
|
|
|
- <textarea v-model="dataForm.abstractContent" cols="100" rows="10" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="来源" prop="from">
|
|
|
- <el-input v-model="dataForm.from" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="内容" prop="content">
|
|
|
- <editor :init="editorInit" v-model="dataForm.content" />
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- <div slot="footer" class="dialog-footer">
|
|
|
- <el-button @click="dialogFormVisible = false">取消</el-button>
|
|
|
- <el-button
|
|
|
- v-if="dialogStatus == 'create'"
|
|
|
- :loading="submiting"
|
|
|
- type="primary"
|
|
|
- @click="createData"
|
|
|
- >确定</el-button
|
|
|
- >
|
|
|
- <el-button
|
|
|
- v-else
|
|
|
- :loading="submiting"
|
|
|
- type="primary"
|
|
|
- @click="updateData"
|
|
|
- >确定</el-button
|
|
|
- >
|
|
|
- </div>
|
|
|
- </el-dialog>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import { listNews, createNews, updateNews, deleteNews } from '@/api/news'
|
|
|
-import Pagination from '@/components/Pagination'
|
|
|
-import { uploadPath, createStorage } from '@/api/storage'
|
|
|
-import { getToken } from '@/utils/auth'
|
|
|
-import Editor from '@tinymce/tinymce-vue'
|
|
|
-const categoryMap = []
|
|
|
-export default {
|
|
|
- name: 'News',
|
|
|
- components: { Pagination, Editor },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- categoryMap,
|
|
|
- uploadPath,
|
|
|
- config: {
|
|
|
- // 初始容器高度
|
|
|
- initialFrameHeight: 550,
|
|
|
- // 初始容器宽度
|
|
|
- initialFrameWidth: 750,
|
|
|
- // 关闭自动保存
|
|
|
- enableAutoSave: true
|
|
|
- },
|
|
|
- content: '请输入内容',
|
|
|
- list: null,
|
|
|
- total: 0,
|
|
|
- listLoading: true,
|
|
|
- listQuery: {
|
|
|
- page: 1,
|
|
|
- limit: 20
|
|
|
- },
|
|
|
- dataForm: {
|
|
|
- id: undefined
|
|
|
- },
|
|
|
- category: '',
|
|
|
- dialogFormVisible: false,
|
|
|
- submiting: false,
|
|
|
- dialogStatus: '',
|
|
|
- textMap: {
|
|
|
- update: '编辑',
|
|
|
- create: '创建'
|
|
|
- },
|
|
|
- rules: {
|
|
|
- category: [
|
|
|
- { required: true, message: '类别名称不能为空', trigger: 'blur' }
|
|
|
- ],
|
|
|
- title: [
|
|
|
- { required: true, message: '请输入标题', trigger: 'blur' },
|
|
|
- { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
|
|
|
- ],
|
|
|
- titleImg: [
|
|
|
- { required: true, message: '标题图片不能为空', trigger: 'blur' }
|
|
|
- ],
|
|
|
- content: [
|
|
|
- { required: true, message: '内容不能为空', trigger: 'blur' }
|
|
|
- ],
|
|
|
- from: [
|
|
|
- { required: true, message: '来源不能为空', trigger: 'blur' }
|
|
|
- ],
|
|
|
- gmtUpdate: [
|
|
|
- { required: true, message: '更新时间不能为空', trigger: 'blur' }
|
|
|
- ],
|
|
|
- abstractContent: [
|
|
|
- { required: true, message: '简介不能为空', trigger: 'blur' }
|
|
|
- ]
|
|
|
- },
|
|
|
- editorInit: {
|
|
|
- language: 'zh_CN',
|
|
|
- convert_urls: false,
|
|
|
- height: 550,
|
|
|
- width: 750,
|
|
|
- plugins: [
|
|
|
- 'lineheight',
|
|
|
- 'advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount '
|
|
|
- ],
|
|
|
- toolbar: [
|
|
|
- 'lineheight searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent blockquote undo redo removeformat subscript superscript code codesample',
|
|
|
- 'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen '
|
|
|
- ],
|
|
|
- images_upload_handler: function(blobInfo, success, failure) {
|
|
|
- const formData = new FormData()
|
|
|
- formData.append('file', blobInfo.blob())
|
|
|
- createStorage(formData)
|
|
|
- .then(res => {
|
|
|
- success(res.data.url)
|
|
|
- })
|
|
|
- .catch(() => {
|
|
|
- failure('上传失败，请重新上传')
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- options: [{
|
|
|
- value: '2',
|
|
|
- label: '行业新闻'
|
|
|
- }],
|
|
|
- value: ''
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- headers() {
|
|
|
- return {
|
|
|
- accessToken: getToken()
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.getList()
|
|
|
- this.getDicts('news_type').then(response => {
|
|
|
- response.data.data.forEach((item, index) => {
|
|
|
- response.data.data[index].value = parseInt(
|
|
|
- response.data.data[index].value
|
|
|
- )
|
|
|
- })
|
|
|
- this.categoryMap = response.data.data
|
|
|
- })
|
|
|
- },
|
|
|
- methods: {
|
|
|
- getList() {
|
|
|
- this.listLoading = true
|
|
|
- listNews(this.listQuery)
|
|
|
- .then(response => {
|
|
|
- this.list = response.data.data.items
|
|
|
- this.total = response.data.data.total
|
|
|
- this.listLoading = false
|
|
|
- })
|
|
|
- .catch(() => {
|
|
|
- this.list = []
|
|
|
- this.total = 0
|
|
|
- this.listLoading = false
|
|
|
- })
|
|
|
- },
|
|
|
- typeFormat(row, column) {
|
|
|
- return this.selectDictLabel(this.categoryMap, row.category)
|
|
|
- },
|
|
|
- handleFilter() {
|
|
|
- this.listQuery.page = 1
|
|
|
- this.getList()
|
|
|
- },
|
|
|
- resetForm() {
|
|
|
- this.dataForm = {
|
|
|
- id: undefined
|
|
|
- }
|
|
|
- },
|
|
|
- handleCreate() {
|
|
|
- this.resetForm()
|
|
|
- this.dialogStatus = 'create'
|
|
|
- this.dialogFormVisible = true
|
|
|
- this.$nextTick(() => {
|
|
|
- this.$refs['dataForm'].clearValidate()
|
|
|
- })
|
|
|
- },
|
|
|
- createData() {
|
|
|
- this.$refs['dataForm'].validate(valid => {
|
|
|
- if (valid) {
|
|
|
- this.submiting = true
|
|
|
- createNews(this.dataForm)
|
|
|
- .then(response => {
|
|
|
- this.list.unshift(response.data.data)
|
|
|
- this.dialogFormVisible = false
|
|
|
- this.$notify.success({
|
|
|
- title: '成功',
|
|
|
- message: '添加成功'
|
|
|
- })
|
|
|
- this.submiting = false
|
|
|
- })
|
|
|
- .catch(response => {
|
|
|
- this.$notify.error({
|
|
|
- title: '失败',
|
|
|
- message: response.data.errmsg
|
|
|
- })
|
|
|
- this.submiting = false
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- handleUpdate(row) {
|
|
|
- this.dataForm = Object.assign({}, row)
|
|
|
- this.category = Number(this.dataForm.category)
|
|
|
- this.dialogStatus = 'update'
|
|
|
- this.dialogFormVisible = true
|
|
|
- this.$nextTick(() => {
|
|
|
- this.$refs['dataForm'].clearValidate()
|
|
|
- })
|
|
|
- },
|
|
|
- updateData() {
|
|
|
- this.$refs['dataForm'].validate(valid => {
|
|
|
- if (valid) {
|
|
|
- this.submiting = true
|
|
|
- updateNews(this.dataForm)
|
|
|
- .then(() => {
|
|
|
- for (const v of this.list) {
|
|
|
- if (v.id === this.dataForm.id) {
|
|
|
- const index = this.list.indexOf(v)
|
|
|
- this.list.splice(index, 1, this.dataForm)
|
|
|
- break
|
|
|
- }
|
|
|
- }
|
|
|
- this.dialogFormVisible = false
|
|
|
- this.submiting = false
|
|
|
- this.$notify.success({
|
|
|
- title: '成功',
|
|
|
- message: '更新成功'
|
|
|
- })
|
|
|
- })
|
|
|
- .catch(response => {
|
|
|
- this.$notify.error({
|
|
|
- title: '失败',
|
|
|
- message: response.data.errmsg
|
|
|
- })
|
|
|
- this.submiting = false
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- handleDelete(row) {
|
|
|
- this.$confirm(
|
|
|
- '此操作将永久删除该记录---' + row.id + '---, 是否继续?',
|
|
|
- '提示',
|
|
|
- {
|
|
|
- confirmButtonText: '确定',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning'
|
|
|
- }
|
|
|
- )
|
|
|
- .then(() => {
|
|
|
- deleteNews(row.id)
|
|
|
- .then(response => {
|
|
|
- this.$notify.success({
|
|
|
- title: '成功',
|
|
|
- message: '删除成功'
|
|
|
- })
|
|
|
- const index = this.list.indexOf(row)
|
|
|
- this.list.splice(index, 1)
|
|
|
- })
|
|
|
- .catch(response => {
|
|
|
- this.$notify.error({
|
|
|
- title: '失败',
|
|
|
- message: response.data.errmsg
|
|
|
- })
|
|
|
- })
|
|
|
- })
|
|
|
- .catch(() => {
|
|
|
- return false
|
|
|
- })
|
|
|
- },
|
|
|
- // 上传图片了处理图片
|
|
|
- uploadSuccessHandle(e, file) {
|
|
|
- const that = this
|
|
|
- this.dataForm.titleImg = e.url
|
|
|
- this.dialogFormVisible = false
|
|
|
- this.dialogFormVisible = true
|
|
|
- },
|
|
|
- onBeforeUpload(file) {
|
|
|
- const isIMAGE =
|
|
|
- file.type === 'image/jpeg' || 'image/gif' || 'image/png' || 'image/jpg'
|
|
|
- const isLt1M = file.size / 1024 / 1024 < 1
|
|
|
-
|
|
|
- if (!isIMAGE) {
|
|
|
- this.$message.error('上传文件只能是图片格式!')
|
|
|
- }
|
|
|
- if (!isLt1M) {
|
|
|
- this.$message.error('上传文件大小不能超过 1MB!')
|
|
|
- }
|
|
|
- return isIMAGE && isLt1M
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-<style lang="scss" scop>
|
|
|
-.show-content {
|
|
|
- border: 1px solid #ccc;
|
|
|
- border-radius: 5px;
|
|
|
- padding: 9px;
|
|
|
- min-height: 614px;
|
|
|
- p {
|
|
|
- margin: 5px 0;
|
|
|
- }
|
|
|
-}
|
|
|
-.tox.tox-silver-sink.tox-tinymce-aux {
|
|
|
- z-index: 9999;
|
|
|
-}
|
|
|
-.avatar-uploader .el-upload {
|
|
|
- border: 1px dashed #d9d9d9;
|
|
|
- border-radius: 6px;
|
|
|
- cursor: pointer;
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
-}
|
|
|
-
|
|
|
-.avatar-uploader .el-upload:hover {
|
|
|
- border-color: #20a0ff;
|
|
|
-}
|
|
|
-
|
|
|
-.avatar-uploader-icon {
|
|
|
- font-size: 28px;
|
|
|
- color: #8c939d;
|
|
|
- width: 120px;
|
|
|
- height: 120px;
|
|
|
- line-height: 120px;
|
|
|
- text-align: center;
|
|
|
-}
|
|
|
-</style>
|
ccjgmwz