epmet-work-pc/src/views/modules/customer/manage/EditForm.vue

<template>
  <div>
    <c-dialog :title="'修改客户信息'"
              :visible="diaVisible"
              :width="40"
              @ok="save"
              @cancel="diaCancel">
      <el-card shadow="never"
               class="aui-card--fill">
        <c-form ref="ref_form"
                keyword="CustomerList"
                :itemWidth="'300px'"
                :method="'U'"
                :option-data="optionData"></c-form>

        <el-form :inline="true"
                 :model="formData2"
                 :rules="dataRule"
                 ref="ref_form_2"
                 style="margin:0 auto;width:860px"
                 :label-width="'100px'">
          <el-form-item prop="logo"
                        label="Logo">

            <el-upload :headers="$getElUploadHeaders()"  class="item_width_1 avatar-uploader"
                       :action="uploadUlr"
                       :data="{customerId:formData.customerId}"
                       :show-file-list="false"
                       :on-success="handleImgSuccess"
                       :before-upload="beforeImgUpload">
              <img v-if="formData2.logo"
                   :src="formData2.logo"
                   style="width:70px;height:70px"
                   class="function-icon">
              <i v-else
                 class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-form>

      </el-card>
    </c-dialog>
  </div>
</template>

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

let loading // 加载动画
export default {
  data () {
    return {
      diaVisible: false,
      formData: {},//父组件传来的
      formData2: {
        logo: ''
      },

      optionData: {

      },
      uploadUlr: window.SITE_CONFIG['apiURL'] + '/oss/file/uploadqrcodeV2',


    }
  },
  components: {
    CForm, CDialog
  },
  mounted () {
  },
  computed: {
    tableHeight () {
      return this.clientHeight - 60 - 80 - 80 - 50 - 400
    },
    ...mapGetters(['clientHeight']),
    dataRule () {
      return {
        logo: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // eslint-disable-next-line
    initData (row) {
      this.diaVisible = true

      this.$nextTick(() => {
        this.formData = row

        this.formData2.logo = row.logo
        this.$refs['ref_form'].assign(row)

      })
    },
    // 上传logo成功
    handleImgSuccess (res, file) {
      if (res.code === 0 && res.msg === 'success') {

        this.formData2.logo = res.data.url

      } else {
        this.$message.error(res.msg)
      }
    },
    beforeImgUpload (file) {
      // const isPNG = file.type === 'image/png'
      const isLt1M = file.size / 1024 / 1024 < 1

      // if (!isPNG) {
      //   this.$message.error('上传图片只能是 PNG 格式!')
      // }
      if (!isLt1M) {
        this.$message.error('上传图片大小不能超过 1MB!')
      }
      // return isPNG && isLt1M
      return isLt1M
    },

    save () {
      this.$refs['ref_form'].validate((valid) => {
        if (valid) {
          if (!this.formData2.logo || this.formData2.logo === '') {
            this.$message.error('请上传Logo!')
            return false
          }

          this.startLoading()
          // let url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/oper/crm/customer/updatecustomer'
          let url = '/oper/crm/customer/updatecustomer'
          // 表单对象
          const model = this.$refs['ref_form'].model
          let _data = {
            customerId: model.customerId,
            customerName: model.customerName,
            logo: this.formData2.logo
          }

          window.app.ajax.post(url, _data,
            (data, rspMsg) => {
              this.endLoading()
              this.$message.success('修改成功')
              this.diaCancel()
              this.$emit('refresh')
            },
            (rspMsg, data) => {
              this.endLoading()
              this.$message.error(rspMsg)
            })

        }
      })
    },
    diaCancel () {
      this.diaVisible = false
    },
    // 开启加载动画
    startLoading () {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: '正在加载……', // 加载中需要显示的文字
        background: 'rgba(0,0,0,.7)' // 背景颜色
      })
    },
    // 结束加载动画
    endLoading () {
      // clearTimeout(timer);
      if (loading) {
        loading.close()
      }
    }
  }
}
</script>