workflow-engine-web/flowable-engine-web/src/components/common/Comment.vue

<template>
  <w-dialog :border="false" closeFree width="500px" :title="title" v-model="visible">
    <div class="el-textarea">
      <el-input
          type="textarea"
          :rows="4"
          maxlength="255"
          show-word-limit
          placeholder="评论内容"
          v-model="textarea">
      </el-input>
    </div>
    <div style="margin: 20px 0">
      <el-upload :file-list="fileList" action="#"
                 :limit="maxSize" with-credentials
                 :multiple="maxSize > 0"
                 :data="uploadParams"
                 list-type="picture-card"
                 :action="uploadFileUrl"
                 :headers="headers"
                 :auto-upload="false"
                 :on-success="handleUploadSuccess"
                 :before-upload="beforeUpload">
        <i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{file}" style="width: 65px;height: 65px">
          <img style="width: 100%;height: 100%" :src="file.url" alt="">
          <label class="el-upload-list__item-status-label">
            <i class="el-icon-upload-success el-icon-check"></i>
          </label>
          <span class="el-upload-list__item-actions">
              <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                <i class="el-icon-delete"></i>
              </span>
          </span>
        </div>
        <div slot="tip" class="el-upload__tip">添加图片 {{ sizeTip }}</div>
      </el-upload>
    </div>
    <el-upload :file-list="attachmentList"
               :limit="attachmentMaxSize" with-credentials
               :multiple="attachmentMaxSize > 0"
               :action="uploadFileUrl"
               :headers="headers"
               :auto-upload="false"
               :on-success="handleUploadSuccess"
               :before-upload="beforeUpload"
    >
      <el-button size="small" round>
        <i class="el-icon-paperclip"></i>
        <span>选择文件</span>
      </el-button>
      <div slot="tip" class="el-upload__tip"> 添加附件 {{ attachmentTip }}</div>
    </el-upload>
  </w-dialog>
</template>

<script>
import {deleteFile} from "@/api/common";

export default {
  name: "Comment",
  props: {
    value: {
      type: Array,
      default: () => {
        return [];
      }
    },
    maxSize: {
      type: Number,
      default: 10
    },
    attachmentMaxSize: {
      type: Number,
      default: 100
    }
  },
  computed: {
    sizeTip() {
      return this.maxSize > 0 ? `| 每张图不超过${this.maxSize}MB` : "";
    },
    attachmentTip() {
      return this.attachmentMaxSize > 0 ? `| 单个附件不超过${this.attachmentMaxSize}MB` : "";
    }
  },
  created() {
    this.fileList = this._value;
    console.log(this.value, "images");
  },
  data() {
    return {
      visible: false,
      title: "添加评论",
      fileList: [],
      attachmentList: [],
      disabled: false,
      uploadParams: {},
      uploadFileUrl: "http://security-react.mytwins.top/flowable/process/file",
      headers: {
        authorization: localStorage.getItem("token")
      },
      textarea:''
    };
  },

  methods: {
    handleChange(file, fileList) {
      this.fileList = fileList.slice(-3);
    },
    handleUploadSuccess(res, file) {
      if (res.code !== 1000) {
        this.$message.error("上传失败");
      }
      let data = res.data;
      this.fileList.push(data);
      this.$emit("input", this.fileList);
      console.log(res, file, this.fileList);
    },
    beforeUpload(file) {
      const alows = ["image/jpeg", "image/png", "image/gif", "image/jpg"];
      if (alows.indexOf(file.type) === -1) {
        this.$message.warning("存在不支持的图片格式");
      } else if (this.maxSize > 0 && file.size / 1024 / 1024 > this.maxSize) {
        this.$message.warning(`单张图片最大不超过 ${this.maxSize}MB`);
      } else {
        return true;
      }
      return false;
    },
    handlePictureCardPreview(file) {
      console.log(file, this._value);
    },
    handleDownload(file) {
      console.log(file);
    },
    handleRemove(file, fileList) {
      deleteFile(file.id).then(res => {
        this.$message.success("删除成功");
      });
    }
  }
};
</script>

<style lang="less" scoped>
/deep/ .el-upload--picture-card {
  width: 65px;
  height: 65px;
  line-height: 70px;
}
/deep/ .el-upload-list--picture-card{
  .is-ready {
    width: 65px!important;
    height: 65px!important;
  }
}

.el-upload-list__item-status-label {
  display: block;
}
</style>