Revert "Mr.Shi"

jiangping

2024-01-26 a76c5c86ac9af71da45bf78c825a2c7aa843b4c8

 platform/src/components/business/OperaGoodsWindow.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,173 @@
<template>
  <GlobalWindow :title="title" :visible.sync="visible" :confirm-working="isWorking" @confirm="confirm" width="800px"
    v-loading="isUploading">
    <el-form :model="form" ref="form" label-width="120px" :rules="rules">
      <div style="font-size: 18px;font-weight: bold; margin-bottom: 10px;">基本信息</div>
      <el-form-item label="商品名称" prop="name">
        <el-input v-model="form.name" maxlength="50" placeholder="请输入商品名称，不超过50个字" v-trim />
      </el-form-item>
      <el-form-item label="商品品牌" prop="brandId">
        <el-select v-model="form.brandId" filterable placeholder="请选择，单选">
          <el-option v-for="item in brandList()" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品类别" prop="categoryId">
        <el-select v-model="form.categoryId" filterable placeholder="请选择，单选" @change="categorySelect">
          <el-option v-for="item in categoryList()" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="指导价（元）" prop="zdPrice">
        <el-input v-model="form.zdPrice" @input="priceCHANEG(form.zdPrice, 1)" type="number" placeholder="建议录入整数，单位元"
          v-trim />
      </el-form-item>
      <el-form-item label="入手价（元）" prop="price">
        <el-input v-model="form.price" @input="priceCHANEG(form.price, 2)" type="number" placeholder="建议录入整数，单位元"
          v-trim />
      </el-form-item>
      <el-form-item label="商品主图">
        <UploadAvatarImage :file="{ 'imgurlfull': form.imgfullurl, 'imgurl': form.imgurl }" :uploadData="uploadData"
          tipsLabel="" @uploadSuccess="uploadReverseSuccess" @uploadEnd="isUploading = false"
          @uploadBegin="isUploading = true" />
        åªèƒ½ä¸Šä¼ å›¾ç‰‡æ ¼å¼ï¼Œpng格式，建议尺寸140px*140px
      </el-form-item>
      <el-form-item label="商品图片">
        <UploadImage :fileList="form.multifileList" :uploadData="uploadData" @beginUpload="isUploading = true" @endUpload="isUploading = false" />
        åªèƒ½ä¸Šä¼ å›¾ç‰‡æ ¼å¼ï¼Œpng格式，建议尺寸600*600px
      </el-form-item>
      <template v-if="form.baseGoodsParamList && form.baseGoodsParamList.length > 0">
        <div style="font-size: 18px;font-weight: bold; margin-bottom: 10px;">参数属性值配置 <span
            style="font-size: 13px; font-weight: 500;">按需配置当前商品的产品参数值，单个参数值不超过30个字</span></div>
        <el-form-item :label="item.name" v-for="(item, index) in form.baseGoodsParamList" :key="index">
          <el-input v-model="item.val" maxlength="30" type="text" placeholder="请输入" v-trim />
        </el-form-item>
      </template>
    </el-form>
  </GlobalWindow>
</template>

<script>
import BaseOpera from '@/components/base/BaseOpera'
import GlobalWindow from '@/components/common/GlobalWindow'
import UploadAvatarImage from '@/components/common/UploadAvatarImage.vue'
import UploadImage from '@/components/common/UploadImage.vue'
import { baseCategory, brand } from '@/api/system/common.js'
import { companyCreate, companyUpdateById } from '@/api/business/goods.js'
export default {
  name: 'OperaGoodsWindow',
  extends: BaseOpera,
  components: { GlobalWindow, UploadAvatarImage, UploadImage },
  data() {
    return {
      action: process.env.VUE_APP_API_PREFIX + '/public/upload',
      name1: '',
      name2: '',
      // è¡¨å•æ•°æ®
      isUploading: false,
      form: {
        id: null,
        name: '',
        categoryId: '',
        brandId: '',
        zdPrice: '',
        price: '',
        imgurl: '',
        imgfullurl: '',
        multifileList: [],
        baseGoodsParamList: [],
      },
      uploadData: {
        folder: 'goods_img'
      },
      // éªŒè¯è§„则
      rules: {
        name: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        categoryId: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        brandId: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        zdPrice: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        price: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      },
      options: []
    }
  },
  inject: ['categoryList', 'brandList'],
  created() {
    this.config({
      api: '/business/goods',
      'field.id': 'id'
    })
    // this.getbrand()
    // this.getcategory()
  },
  methods: {
    open(title, target) {
      this.title = title
      this.visible = true
      // æ–°å»º
      if (target == null) {
        this.$nextTick(() => {
          this.$refs.form.resetFields()
          this.form.imgurl = ''
          this.form.imgfullurl = ''
          this.form.multifileList = []
          this.form.baseGoodsParamList = []
          this.form[this.configData['field.id']] = null
        })
        return
      }
      // ç¼–辑
      this.$nextTick(() => {
        for (const key in this.form) {
          this.form[key] = target[key]
        }
        this.form.multifileList.forEach(item => {
          item.url = item.filefullurl
        })
      })
    },
    priceCHANEG(val, type) {
      if (!/^[1-9]+[0-9]*$/.test(val)) {
        this.$message.warning('只能输入正整数')
        if (type === 1) {
          this.form.zdPrice = ''
        } else {
          this.form.price = ''
        }
      }
    },
    categorySelect(v) {
      this.categoryList().forEach(item => {
        if (item.id === v) {
          this.form.baseGoodsParamList = JSON.parse(JSON.stringify(item.baseCateParamList))
          this.form.baseGoodsParamList.forEach(item => {
            item.pramaId = item.id
          })
        }
      })
    },
    uploadReverseSuccess(file) {
      this.form.imgurl = file.imgurl;
      this.form.imgfullurl = file.imgurlfull;
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-form-item__content {
  .el-input {
    width: 400px;
  }
}
</style>