uni_project/unimall-admin/src/views/news/news.vue

<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" clearable 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>