epmet-work-pc-chengyang/src/views/modules/customer/miniProAgent/version/SubmitFormReject.vue

<template>
  <div style=" position: relative;">

    <el-button type="default"
               @click="diaCancel">取消返回</el-button>
    <el-button type="primary"
               @click="submitCode">提交</el-button>

    <el-form :inline="true"
             :model="dataForm"
             class="form">

      <el-form-item label="反馈内容"
                    prop="feedbackInfo"
                    label-width="150px"
                    style="display:block">
        <el-input type="textarea"
                  :autosize="{ minRows: 5, maxRows: 8}"
                  :rows="5"
                  resize="none"
                  style="width:600px"
                  placeholder='请输入反馈内容'
                  v-model="dataForm.feedbackInfo">
        </el-input>
        <div slot="tip"
             class="el-upload__tip">反馈内容，至多200字，只有上个版本被驳回才可填写</div>
      </el-form-item>
      <el-form-item label="反馈图片"
                    label-width="150px"
                    style="display:block">
        <el-upload :headers="$getElUploadHeaders()"  class="avatar-uploader"
                   ref="uploadFeedbackPic"
                   :action="upload_url"
                   list-type="picture-card"
                   :name="upload_name"
                   :on-exceed="exceedFeedbackPic"
                   :on-remove="removeFeedbackPic"
                   :file-list="feedbackPicList"
                   :limit="5"
                   :http-request="uploadFeedbackPic">
          <span class="font-14">选择图片</span>
          <div slot="tip"
               class="el-upload__tip">反馈图片，最多5张，大小2M以内</div>
        </el-upload>
      </el-form-item>

    </el-form>

  </div>
</template>

<script>
import CDialog from '@c/CDialog'
import { mapGetters } from 'vuex'
import { Loading } from 'element-ui' // 引入Loading服务

let loading // 加载动画
export default {
  data () {
    return {
      loading: false,
      codeId: '', // 上传代码id，父组件传
      isRepeat: false, // 上一次是否加急，父组件传

      dataForm: {

        feedbackInfo: '', // 反馈内容
        feedbackStuff: '' // 反馈素材
      },

      // 上传素材
      dialogImageUrl: 'https://epmet-cloud.elinkservice.cn/api/third/code/mediaupload',
      upload_url: '', // 上传URL
      upload_name: '', // 图片或视频名称
      feedbackPicList: [], // 预览列表

      // 弹出框相关
      dialog: {
        title: '',
        visible: false
      }
    }
  },
  components: {
    CDialog
  },
  mounted () {
  },
  computed: {
    tableHeight () {
      return this.clientHeight * 0.56 - 100
    },
    ...mapGetters(['clientHeight'])
  },
  methods: {
    initData (codeId, isRepeat) {
      this.codeId = codeId
      this.isRepeat = isRepeat // 是否加急标识，父组件传

    },
    reseatDataForm () {
      this.dataForm = {
        feedbackInfo: '', // 反馈内容
        feedbackStuff: '' // 反馈素材
      }
    },

    removeFeedbackPic (file) {
      this.feedbackPicList.splice(this.feedbackPicList.findIndex(item => item.uid === file.uid), 1)
      // console.log(this.feedbackPicList)
    },
    exceedFeedbackPic: () => {
      this.$message({
        message: '最多上传5张反馈图片',
        type: 'warning'
      })
    },
    // 上传反馈图片
    uploadFeedbackPic: (params) => {
      let file = params.file
      let fileType = file.type
      let isImage = fileType.indexOf('image') !== -1
      let fileUrl = this.$refs.uploadFeedbackPic.uploadFiles[this.feedbackPicList.length].url
      file.url = fileUrl
      this.feedbackPicList.push(file)

      let isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message({
          message: '上传图片大小不能超过 2MB!',
          type: 'warning'
        })
        this.feedbackPicList.pop()
        return
      }
      if (!isImage) {
        this.$message({
          message: '请选择图片!',
          type: 'warning'
        })
        this.feedbackPicList.pop()
        return
      }

      this.upload_name = 'file_img[]'
      let formData = new FormData()

      formData.append('type', fileType)
      formData.append('media', file)
      formData.append('codeId', this.codeId)
      this.startLoading()
      window.app.ajax.post2(this.dialogImageUrl, formData,
        (data, rspMsg) => {
          this.endLoading()
          if (data.code === 0) {
            this.feedbackPicList[this.feedbackPicList.length - 1].mediaid = data.data
          } else {
            this.feedbackPicList.pop()
            this.$message.error(rspMsg)
          }
        },
        (rspMsg, data) => {
          this.feedbackPicList.pop()
          this.endLoading()
          this.$message.error(rspMsg)
        }, { headers: { 'Content-Type': 'multipart/form-data' } })
    },

    submitCode () {
      let params = {
        codeId: this.codeId,
        isSpeed: false,//重新提神一直是false
        isRepeat: this.isRepeat, // 判断上一次是否加急，状态同上一次
      }

      // 反馈说明
      if (this.dataForm.feedbackInfo !== '') {
        params.feedbackInfo = this.dataForm.feedbackInfo
      }
      this.dataForm.feedbackStuff = ''
      this.feedbackPicList.forEach(element => {
        this.dataForm.feedbackStuff = this.dataForm.feedbackStuff + element.mediaid + '|'
      })

      if (this.dataForm.feedbackStuff !== '') {
        this.dataForm.feedbackStuff = this.dataForm.feedbackStuff.slice(0, this.dataForm.feedbackStuff.length - 1)
        params.feedbackStuff = this.dataForm.feedbackStuff
      }

      console.log(params)

      // console.log('反馈图片：')
      // console.log(params.feedbackStuff)

      const url = 'https://epmet-cloud.elinkservice.cn/api/third/code/audit'
      // const url = '/third/code/audit'
      this.startLoading()
      window.app.ajax.post(url, params,
        (data, rspMsg) => {
          this.endLoading()
          this.$message.success('提交审核成功，请等待审核结果')
          this.resetData()
          this.$emit('okSubmit')
        },
        (rspMsg, data) => {
          this.endLoading()
          this.$message.error(rspMsg)
        })
    },
    // 取消
    diaCancel () {
      this.resetData()
      this.$emit('cancleSubmit')
    },
    resetData () {
      this.reseatDataForm()

      // 反馈说明
      this.feedbackPicList = []
    },
    // 开启加载动画
    startLoading () {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: '正在加载……', // 加载中需要显示的文字
        background: 'rgba(0,0,0,.7)' // 背景颜色
      })
    },
    // 结束加载动画
    endLoading () {
      // clearTimeout(timer);
      if (loading) {
        loading.close()
      }
    }
  },
  props: {
  }
}
</script>
<style scoped >
.el-tabs {
  margin: 0 20px;
}
.el-upload__tip {
  color: rgb(155, 155, 155);
  margin: 0;
}
.form {
  margin-top: 30px;
}
.div_btn {
  z-index: 10;
  position: absolute;
  top: 5px;
  right: 30px;
}
</style>