tingbang/htmldev/manage/src/views/business/saveWine/details.vue

<template>
  <div>
    <el-dialog :title="exData.id ? '编辑': '新增'"
               :visible.sync="dialog"
               width="50%"
               :close-on-click-modal="false"
               top="50px">
      <el-form ref="form"
               :model="form"
               :rules="formRules"
               label-width="160px">
        <el-form-item prop="user_song_name"
                      :rules="formRules.required"
                      label="酒名：">
          <el-col :span="16">
            <el-input v-model="form.user_song_name"
                      placeholder="请输入酒名"
                      clearable></el-input>
          </el-col>
        </el-form-item>
        <el-form-item prop="plan_cover_url"
                      :rules="formRules.uploadImgs"
                      label="实物图：">
          <el-upload :on-remove="handleRemove"
                     :on-success="handleAvatarSuccess"
                     :before-upload="beforeAvatarUpload"
                     :on-exceed="hadnleExceed"
                     :accept="'image/*'"
                     :limit="1"
                     :file-list="fileList"
                     list-type="picture-card"
                     action="/api/admin/v1/upload/file"
                     multiple>
            <i class="el-icon-plus"></i>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5M</div>
          </el-upload>
        </el-form-item>
        <el-form-item prop="phone"
                      :rules="formRules.mobile"
                      label="用户手机号：">
          <el-col :span="16">
            <el-input v-model="form.phone"
                      placeholder="请输入用户手机号"
                      @input="form.phone = form.phone.replace(/[^\d]/g, '').slice(0, 11)"
                      clearable></el-input>
          </el-col>
        </el-form-item>
        <el-form-item prop="user_song_name"
                      :rules="formRules.required"
                      label="用户昵称：">
          <el-col :span="16">
            <el-input v-model="form.user_song_name"
                      placeholder="请输入用户昵称"
                      clearable></el-input>
          </el-col>
        </el-form-item>
        <el-form-item prop="user_sign_status"
                      :rules="formRules.required"
                      label="状态：">
          <el-radio v-model="form.user_sign_status"
                    label="1">已取
          </el-radio>
          <el-radio v-model="form.user_sign_status"
                    label="0">存酒中
          </el-radio>
        </el-form-item>
        <el-form-item label="备注：">
          <el-col :span="16">
            <el-input v-model="form.note"
                      type="textarea"
                      rows="6">
            </el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer text-center">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { fen2Yuan, yuan2Fen } from '@/utils'
import getCode from '@/views/ums/mixin/getCode'

export default {
  mixins: [getCode],
  components: {},
  props: {
    value: {
      type: Boolean,
      default: true
    },
    exData: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data () {
    return {
      dialog: !!this.value,
      form: {
        user_song_name: '', // 歌手名称
        phone: '', // 手机号码
        code: '', // 验证码
        plan_cover_url: [],
        user_sign_status: '1', // 艺人签约状态(0未签约1已签约)
      },
      fileList: []
    }
  },
  methods: {
    beforeAvatarUpload (file) {
      const isLt2M = file.size / 1024 / 1024 < 5
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 5MB!')
      }
      return isLt2M
    },
    handleRemove (file) {
      let path = file.url
      if (file.response && file.response.data) {
        path = file.response.data.path
      }
      this.form.plan_cover_url = this.form.plan_cover_url.filter(item => item !== path)
    },
    handleAvatarSuccess (res) {
      if (res.code === 200) {
        const { path } = res.data
        this.form.plan_cover_url.push(path)
      } else {
        this.$message.error('图片上传失败')
      }
    },
    hadnleExceed (files, fileList) {
      this.$message({
        message: '商品图最多上传一张',
        type: 'warning'
      })
    },
    handleSubmit () {
      // todo 艺人添加、艺人海报数组转字符串
      const url = this.exData.id ? '/v1/user/member/song/modify' : ''
      this.$refs.form.validate(async valid => {
        if (valid) {
          const data = await this.$fetch(url, {
            ...this.form,
            place_price: yuan2Fen(this.form.place_price)
          })
          if (data.code === 200) {
            this.$message.success('提交成功')
            this.$emit('success')
            this.dialog = false
          }
        }
      })
    }
  },
  mounted () {
    if (this.exData.id) {
      this.$set(this.form, 'id', this.exData.id)
      for (const key in this.exData) {
        if (this.form.hasOwnProperty(key)) {
          let value = this.exData[key]
          if ((Array.isArray(value) && value.length >= 1) || (Object.prototype.toString.call(value) === '[object Object]') || (typeof value === 'string' && value) || typeof value === 'number') {
            if (key === 'place_price') {
              value = fen2Yuan(value)
            }
            this.$set(this.form, key, value)
          }
        }
      }
    }
  },
  watch: {
    dialog (val) {
      if (!val) this.$emit('input', val)
    }
  }
}
</script>

<style lang="scss" scoped>
.top-tip {
  margin-top: -20px;
  margin-bottom: 20px;
}
</style>