lineage-vue/src/views/system/news/edit.vue

<template>
  <div class="app-container">
    <!-- 添加或修改资讯对话框 -->
    <el-dialog :title="form.id ? '编辑' : '新增'" :close-on-click-modal="false" :visible.sync="visible" @close="close" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px" v-loading="loading">
        <el-form-item label="资讯标题" prop="title"><el-input v-model="form.title" placeholder="请输入资讯标题" clearable /></el-form-item>
        <el-form-item label="封面图" prop="pic">
          <el-button icon="el-icon-scissors" @click="getImg()">选取图片</el-button>
          <el-image v-if="form.pic" :fit="'contain'" style="max-width:10%;display: block;margin-top: 10px;" :src="form.pic" :preview-src-list="[form.pic]"></el-image>
        </el-form-item>
        <div class="meditor">
          <el-form-item label="资讯内容" prop="contents"><Editor v-model="form.contents" :min-height="292" /></el-form-item>
        </div>
        <el-form-item label="状态 " prop="state">
          <el-radio-group v-model="form.state">
            <el-radio-button v-for="dict in stateOptions" :key="dict.dictValue" :label="parseInt(dict.dictValue)">{{ dict.dictLabel }}</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="visible = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 剪裁图片对话框 -->
    <cropper v-if="show" ref="upload" @img="setImg" :fixed_number="fixedNumber"></cropper>
  </div>
</template>

<script>
import { listNews, getNews, delNews, addNews, updateNews, exportNews } from '@/api/system/news';
import Editor from '@/components/Editor';
import cropper from '@/components/cropper';
export default {
  components: {
    Editor,
    cropper
  },
  data() {
    return {
      // 遮罩层
      show: false,
      loading: false,
      visible: false,
      // 图片裁剪比例
      fixedNumber: [16, 9],
      // 状态字典
      stateOptions: [],
      // 表单参数
      form: { pic: '' },
      // 表单校验
      rules: {
        title: [{ required: true, message: '资讯标题不能为空', trigger: 'blur' }],
        pic: [{ required: true, message: '封面图不能为空', trigger: 'blur' }],
        contents: [{ required: true, message: '资讯内容不能为空', trigger: 'blur' }],
        state: [{ required: true, message: '状态 不能为空', trigger: 'blur' }]
      }
    };
  },
  created() {
    this.getDicts('common_state').then(response => {
      this.stateOptions = response.data;
    });
  },
  methods: {
    /** 查询资讯列表 */
    init(id) {
      this.visible = true;
      if (id != '') {
        this.loading = true;
        getNews(id).then(response => {
          this.form = response.data;
          this.loading = false;
        });
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.loading = true;
          if (this.form.id != null) {
            updateNews(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess('修改成功');
                this.$emit('refresh'); //刷新父组件数据
                this.visible = false;
              }
            });
          } else {
            addNews(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess('新增成功');
                this.$emit('refresh'); //刷新父组件数据
                this.visible = false;
              }
            });
          }
        }
      });
    },
    //选取图片
    getImg() {
      this.show = true;
      this.$nextTick(() => {
        this.$refs.upload.editCropper();
      });
    },
    //设置图片
    setImg(img) {
      this.form.pic = img;
    },
    // 关闭弹窗表单重置
    close() {
      this.resetForm('form');
      this.form = { pic: '' };
    }
  }
};
</script>