zhbsq-vue-web/src/views/COUNSELINGMESSAGE/edit.vue

<template>
  <div class="cmain">
    <el-form ref="form" :model="form" :rules="rules" :disabled="edits" label-width="80px">
      <el-form-item label="标题" prop="title">
        <el-input v-model="form.title" placeholder="请输入标题"></el-input>
      </el-form-item>
<!--      <el-form-item label="图片上传">-->
<!--        <cropper v-model="form.fileUrl" :fixed_number="[4, 2]"></cropper>-->
<!--      </el-form-item>-->
      <el-form-item label="内容" prop="content" >
        <editor v-model="form.content" :edits="edits" />
      </el-form-item>

<!--      <el-form-item label="图片上传">-->
<!--        <el-upload action="#" list-type="picture-card" :limit="1" :auto-upload="true" :http-request="httprequest" :before-upload="beforeupload" :file-list="fileList">-->
<!--          <i slot="default" class="el-icon-plus"></i>-->
<!--          <div slot="file" slot-scope="{ file }">-->
<!--            <img class="el-upload-list__item-thumbnail" :src="file.url" />-->
<!--            <span class="el-upload-list__item-actions">-->
<!--                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">-->
<!--                  <i class="el-icon-zoom-in"></i>-->
<!--                </span>-->
<!--                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">-->
<!--                  <i class="el-icon-delete"></i>-->
<!--                </span>-->
<!--              </span>-->
<!--          </div>-->
<!--        </el-upload>-->
<!--      </el-form-item>-->
    </el-form>

    <div slot="footer" class="mfooter">
      <el-button type="info" @click="submitzc" v-if="checkPermi(['business:COUNSELINGMESSAGE:confirm']) && !edits">暂存草稿</el-button>
      <el-button type="primary" @click="submitForm" v-if="checkPermi(['business:COUNSELINGMESSAGE:confirm'])&& !edits">提交审核</el-button>
      <el-button @click="$layer.close(layerid)">取 消</el-button>
    </div>
    <el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" fullscreen append-to-body @close="dialogVisible = false">
      <img width="100%" :src="form.fileUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import { listCOUNSELINGMESSAGE, getCOUNSELINGMESSAGE, delCOUNSELINGMESSAGE, addCOUNSELINGMESSAGE, updateCOUNSELINGMESSAGE, upload, newCommit } from '@/api/portal/COUNSELINGMESSAGE/COUNSELINGMESSAGE';
import { checkPermi } from "@/utils/permission";

export default {
  name: 'edit.vue',
  data(){
    return{
      baseUrl: process.env.VUE_APP_BASE_API,
      dialogVisible:false,
      disabled: false,
      fileList: [],
      edits: null,
      // 表单参数
      form: {content:''},
      // 表单校验
      rules: {
        title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
        content: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
        fileUrl: [{ required: true, message: '附件不能为空', trigger: 'blur' }],
        picture: [{ required: true, message: '图片不能为空', trigger: 'blur' }],
      }
    }
  },
  created(){
  },
  mounted() {
    this.edits = this.param.edit;
    if (this.param.id) {
      getCOUNSELINGMESSAGE(this.param.id).then(response => {
        this.form = response.data;
        if(this.form.content.includes(process.env.VUE_APP_BASE_API)){
          this.form.content = response.data.content
        }else{
          this.form.content = response.data.content.replace(
          new RegExp("/profile/upload/", "g"),
          this.baseUrl + "/profile/upload/")
        }
      });
    }
  },
  props: {
    param: {
      type: Object,
      default: () => {
        return {};
      }
    },
    layerid: {
      type: String
    }
  },
  methods:{
    checkPermi,
    //旧的图片上传
    httprequest() {},
    /** 上传附件 */
    beforeupload(file) {
      let formData = new FormData();
      formData.append('file', file);
      upload(formData).then(res => {
        this.form.fileUrl = res.url;
      });
    },
    //放大预览
    handlePictureCardPreview(file) {
      this.form.fileUrl = file.url;
      this.dialogVisible = true;
    },
    handleRemove(file) {
      this.form.fileUrl = '';
      this.fileList = [];
    },
    /** 暂存按钮 */
    submitzc() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.id == null) {
            this.form.status = '0';
            addCOUNSELINGMESSAGE(this.form).then(response => {
              this.$modal.msgSuccess('暂存成功');
              this.$layer.close(this.layerid);
              this.$parent.getList();
            });
          } else if ((this.form.id !== null) && this.form.status == 0 || this.form.status == 2 || this.form.status == 3 || this.form.status == 5 ||this.form.status == 6) {
            this.form.status = '0';
            updateCOUNSELINGMESSAGE(this.form).then(response => {
              this.$modal.msgSuccess('修改成功');
              this.$layer.close(this.layerid);
              this.$parent.getList();
            });
          }
        }
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            this.form.status = '1';
            newCommit(this.form).then(response => {
              this.$modal.msgSuccess('修改成功');
              this.$layer.close(this.layerid);
              this.$parent.getList();
            });
          } else {
            addCOUNSELINGMESSAGE(this.form).then(response => {
              this.$modal.msgSuccess('新增成功');
              this.$layer.close(this.layerid);
              this.$parent.getList();
            });
          }
        }
      });
    },
    // // 取消按钮
    // cancel() {
    //   this.open = false;
    //   this.reset();
    // },
    // // 表单重置
    // reset() {
    //   this.form = {
    //     id: null,
    //     delFlag: null,
    //     deptId: null,
    //     title: null,
    //     content: null,
    //     fileUrl: null,
    //     picture: null,
    //     status: '0',
    //     auditTime: null,
    //     reportDate: null,
    //     releaseDate: null
    //   };
    //   this.resetForm('form');
    //   this.fileList = [];
    // },
  },
  created() {

  }
}
</script>

<style scoped>

</style>