caimei365-manager-ui/src/views/user/customer/customer-remarks-add .vue

<template>
  <div class="app-container">
    <el-card class="box-card" style="margin: 10px auto">
      <div class="refund-item">
        <el-form ref="dataForm" :model="params" :rules="rules" label-width="120px">
          <el-row :gutter="24" class="box-row">
            <el-form-item label="备注：" prop="remarks">
              <el-input
                v-model.trim="params.note"
                type="textarea"
                show-word-limit
                placeholder="请输入备注文字，200字以内"
                maxlength="200"
                :autosize="{ minRows: 5, maxRows: 6 }"
                style="width: 600px"
              />
            </el-form-item>
            <el-form-item label="图片：" prop="logImage">
              <div class="form-el-upload">
                <el-upload
                  :class="{ hide: hideImg }"
                  :action="actionUrl"
                  :headers="getToken"
                  list-type="picture-card"
                  :before-upload="beforeUploadImg"
                  :on-remove="handleRemove"
                  :on-success="handleSuccess"
                  :limit="5"
                >
                  <div slot="tip" class="el-upload__tip">请上传jgp，jpeg，png格式的图片，每张不超过5M</div>
                  <i class="el-icon-plus"></i>
                </el-upload>
              </div>
            </el-form-item>
            <el-form-item>
              <div class="filter-container" style="text-align: left; margin-top: 20px">
                <el-button type="primary" @click="handlerConfirm">保存</el-button>
                <el-button plain @click="backToList">返回</el-button>
              </div>
            </el-form-item>
          </el-row>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { saveInformation } from '@/api/user/customer/customer'
export default {
  name: 'AddRemarks',
  filters: {},
  data() {
    return {
      params: {
        images: [], // 备注图片
        note: '',
        informationId: ''
      },
      fileImageList: [], // 上传图片列表
      fileUrl: process.env.VUE_APP_BASE_API + '/order/cmOrderRemark/upload/remark',
      fileList: [], // 上传文件列表
      rules: {
        note: [
          {
            required: true,
            message: '请输入备注信息',
            trigger: 'blur'
          }
        ]
      },
      hideImg: false, // 上传图片隐藏
      hideFile: false // 上传文件隐藏
    }
  },
  computed: {
    getToken() {
      return {
        token: this.$store.getters.token
      }
    },
    actionUrl() {
      return process.env.VUE_APP_BASE_API + '/formData/MultiPictareaddData'
    }
  },
  created() {
    this.params.informationId = this.$route.query.informationId * 1
  },
  methods: {
    // 保存
    handlerConfirm() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.saveInformation()
        }
      })
    },
    // 保存备注
    async saveInformation() {
      try {
        await saveInformation(this.params)
        this.$message.success('添加成功')
        this.backToList()
      } catch (error) {
        console.log(error)
      }
    },
    isImage(file) {
      return (
        file.type === 'image/png' ||
        file.type === 'image/jpeg' ||
        file.type === 'image/jpg' ||
        file.type === 'image/webp'
      )
    },
    // 上传图片事件
    handleSuccess(res, file, fileList) {
      this.params.images.push(res.data)
      this.handleChange()
    },
    // 上传文件
    handleFileSuccess(res, file, fileList) {
      this.params.ossFiles.push(res.data.ossFiles)
      this.handleFileChange()
    },
    // 删除图片事件
    handleRemove(file, fileList) {
      this.params.images = fileList.map((e) => e.response.data)
      this.handleChange()
    },
    // 删除文件
    handlerFileRemove(file, fileList) {
      this.params.ossFiles = fileList.map((e) => e.response.data.ossFiles)
      this.handleFileChange()
    },
    // 文件限制
    beforeUploadImg(file) {
      const isUpload = file.size / 1024 / 1024 < 5
      if (this.isImage(file)) {
        if (isUpload) {
          return true
        } else {
          this.$message.error('文件过大，请重新上传！')
          return false
        }
      } else {
        this.$message.error('请上传jgp，jpeg，png格式的图片！')
        return false
      }
    },
    beforeUploadFile(file) {
      const whiteList = ['pdf', 'doc', 'docx', 'xlsx']
      const isUpload = file.size / 1024 / 1024 < 5
      if (whiteList.indexOf(file.name.substring(file.name.lastIndexOf('.') + 1)) === -1) {
        this.$message.error('请上传 pdf、doc、docx、xlsx格式的文件！')
        return false
      }
      if (isUpload) {
        return true
      } else {
        this.$message.error('文件过大，请重新上传！')
        return false
      }
    },
    // 文件数量判断
    handleChange(file, fileList) {
      this.hideImg = this.params.images.length >= 5
    },
    // 文件数量判断
    handleFileChange(file, fileList) {
      this.hideFile = this.params.ossFiles.length >= 5
    },
    backToList() {
      this.$store.dispatch('tagsView/delView', this.$route).then(() => {
        this.$nextTick(() => {
          this.$router.replace({
            path: '/user/customer/customer-remarks',
            query: {
              id: this.params.informationId
            }
          })
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-upload-list {
  display: inline-flex !important;
}
::v-deep .el-upload--picture-card {
  width: 148px !important;
  height: 148px !important;
}
::v-deep .el-upload__tip {
  position: static !important;
}

::v-deep .hide .el-upload--picture-card {
  display: none;
}
.fileUpload {
  ::v-deep .el-upload-list {
    flex-direction: column !important;
  }
}
.app-title {
  line-height: 36px;
  font-size: 26px;
  font-weight: bold;
  color: #409eff;
  text-align: center;
  margin: 0;
}
.box-card {
  margin-top: 20px;
  font-size: 14px;
}
.box-row {
  padding: 10px 0;
}
.box-row .dropdown {
  margin-top: -10px;
}
.refund-item {
  padding: 10px 0;
}
.order-item {
  background: #f7f7f7;
  margin-bottom: 20px;
  padding: 10px 15px;
  border-radius: 5px;
}
.product-row {
  padding: 10px 0;
  background: #ebeef5;
  border-top: 1px dashed #dcdfe6;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
}
.avatar {
  width: 148px;
  height: 148px;
  display: block;
}
.avatar img {
  width: 148px;
  height: 148px;
  display: block;
}
.el-form-item__label {
  text-align: right !important;
}
.el-upload__tip {
  line-height: 20px;
  color: red;
  text-align: left;
}
.span_tip {
  font-size: 12px;
  color: red;
  margin-left: 5px;
}
.filter-item-temp {
  width: 100px;
}
.op-item {
  padding: 5px 0;
}
.el-span-warning {
  color: #e6a23c;
}
.el-span-success {
  color: #67c23a;
}
.el-span-danger {
  color: #f56c6c;
}
</style>