admin/src/pages/system/goodsManager/goodManager/edit.vue

<template>
  <div class="subPage">
    <form class="mainForm">
      <ul>
         <li class="flex-h">
          <span>选择案场：<em>*</em></span>
          <div class="flex-item">
            <div style="width:50%">
              <el-select v-model="Case" placeholder="请选择">
                <el-option
                  v-for="item in cases"
                  :key="item.CaseId"
                  :label="item.CaseName"
                  :value="item.CaseId">
                </el-option>
              </el-select>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>商品名称：<em>*</em></span>
          <div class="flex-item">
            <div style="width:50%">
              <el-input
                placeholder="请输入商品名称"
                v-model="detail.GoodsName"
                clearable>
              </el-input>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>商品图片：<em>*</em></span>
          <div class="flex-item">
            <div class="red-hint">建议上传150*150尺寸的图片</div>
            <div style="width:50%">
              <el-upload
                class="avatar-uploader"
                action='string'
                :before-upload="toolClass.beforeUpload"
                :http-request="toolClass.upload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess">
                <img v-if="Image" :src="Image" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>商品价格：<em>*</em></span>
          <div class="flex-item">
            <div style="width:50%">
              <el-input
                placeholder="请输入商品价格"
                v-model="detail.Price"
                clearable>
              </el-input>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>商品规格：</span>
          <div class="flex-item">
            <div style="width:50%">
              <el-select v-model="detailSpecs" multiple placeholder="请选择" style="width:100%;">
                <el-option
                  v-for="item in ((Case || '') === '' ? [] : specs.list)"
                  :key="item.SpecId"
                  :label="item.SpecName"
                  :value="item.SpecId">
                </el-option>
              </el-select>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>商品类别：<em>*</em></span>
          <div class="flex-item">
            <div style="width:50%">
              <el-select v-model="TypeId" placeholder="请选择商品类型">
                <el-option
                  v-for="item in ((Case || '') === '' ? [] : types.list)"
                  :key="item.TypeId"
                  :label="item.TypeName"
                  :value="item.TypeId">
                </el-option>
              </el-select>
            </div>
          </div>
        </li>
        <li style="text-align:center">
          <el-button type="primary" size="mini" @click='submit'>保存</el-button>
          <el-button type="danger" size="mini" @click="cancel">取消</el-button>
        </li>
      </ul>
    </form>
  </div>
</template>

<script>
import { createNamespacedHelpers, mapState, mapActions } from 'vuex'

const { mapState: mapGoodsState, mapActions: mapGoodsActions } = createNamespacedHelpers('goods')
export default {
  name: '',
  data () {
    return {
      limit: 1,
      dialogVisible: false,
      infoSpecs: null,
    }
  },
  components: {},
  computed: {
    ...mapGoodsState({
      detail: x => x.goodsInfo,
      types: x => x.goodsTypes,
      specs: x => x.goodsSpecs,
    }),
    ...mapState({
      cases: x => x.app.cases.list,
      caseid: x => x.app.cases.default,
      orgid: x => x.app.user.OrgId,
    }),
    Case: {
      get () {
        return this.detail.CaseId
      },
      set (val) {
        this.UpdateInfo({ ...this.detail, CaseId: val })
        this.detail.TypeId = ''
        this.GetGoodTypes({ pagesize: 1000, caseid: this.Case })
        this.GetGoodSpecs({ pagesize: 1000, caseid: this.Case })
      }
    },
    detailSpecs: {
      get () {
        // console.log(this.infoSpecs || (this.detail.Specs || []).map(x => x.SpecId))
        return this.infoSpecs || (this.detail.Specs || []).map(x => x.SpecId)
      },
      set (val) {
        this.infoSpecs = val
      },
    },
    Image () {
      return ((this.detail.Images || [])[0] || {}).ImgUrl
    },
    TypeId: {
      get () {
        return this.detail.TypeId
      },
      set (val) {
        this.UpdateInfo({ ...this.detail, TypeId: val })
      },
    },
  },
  methods: {
    ...mapGoodsActions([
      'GetGoodTypes',
      'GetGoodsByID',
      'AddGoods',
      'UpdateGoods',
      'SetNull',
      'UpdateInfo',
      'GetGoodSpecs',
    ]),
    ...mapActions([
      'picSize'
    ]),
    submit () {
      this.detail.specs = JSON.stringify(this.detailSpecs.map(x => ({ SpecId: x, GoodsPrice: this.detail.Price })))
      this.detail.images = (this.detail.Images || []).map(x => {
        if (x.response) {
          return x.response.result.url
        } else {
          return x.ImgUrl
        }
      }).join(',')
      if ((this.detail.CaseId || '') === '') {
        this.$message({
          type: 'error',
          message: '案场不能为空'
        })
        return false
      }
      if ((this.detail.GoodsName || '') === '') {
        this.$message({
          type: 'error',
          message: '商品名称不能为空'
        })
        return false
      }
      if ((this.detail.Images || '') === '') {
        this.$message({
          type: 'error',
          message: '图片不能为空'
        })
        return false
      }
      if ((this.detail.Price || '') === '') {
        this.$message({
          type: 'error',
          message: '价格不能为空'
        })
        return false
      }
      if ((this.detail.TypeId || '') === '') {
        this.$message({
          type: 'error',
          message: '类别不能为空'
        })
        return false
      }
      if ((this.detail.GoodsId || '') === '') {
        this.detail.OrgId = this.orgid
        this.AddGoods(this.detail)
      } else {
        if ((this.detail.CaseId || '') === '') {
          this.$message({
            type: 'error',
            message: '案场不能为空'
          })
          return false
        }
        this.UpdateGoods(this.detail)
      }
      this.$message({
        type: 'success',
        message: '操作成功'
      })
      this.$router.push({ name: 'goodsInfo' })
    },
    cancel () {
      this.$router.go(-1)
    },
    handleAvatarSuccess (res, file) {
      this.UpdateInfo({ ...this.detail, Images: [{ ImgUrl: res.result.url }] })
    },
  },
  created () {
    this.picSize({ w: 150, h: 150 })
    const { id } = this.$route.query
    if (id && id !== '') {
      this.GetGoodTypes({ pagesize: 1000, caseid: this.Case })
      this.GetGoodSpecs({ pagesize: 1000, caseid: this.Case })
      this.GetGoodsByID({ id: id })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
</style>