p平台端

Mr.Zhang

2023-09-19 ef03624437f84fb51048074c18429e7db6b3bdec

 platform/src/components/business/OperaGoodsWindow.vue

@@ -1,94 +1,46 @@
<template>
  <GlobalWindow
    :title="title"
    :visible.sync="visible"
    :confirm-working="isWorking"
    @confirm="confirm"
    width="800px"
  >
  <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;">基本信息</div>
      <el-form-item label="商品名称" prop="name">
        <el-input v-model="form.name" maxlength="50" placeholder="请输入商品名称，不超过50个字" v-trim/>
        <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" placeholder="请选择，单选">
          <el-option
            v-for="item in brandList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          <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">
        <!-- @change="changeCategory(form.categoryId)" -->
        <el-select v-model="form.categoryId" placeholder="请选择，单选">
          <el-option
            v-for="item in categoryList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
        <el-select v-model="form.categoryId" 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="name1" prop="attrFirstIds" v-if="name1">
        <el-select v-model="form.attrFirstIds" multiple placeholder="请选择，支持多选">
          <el-option
            v-for="item in form.attrFirstList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="name2" prop="attrSecodIds" v-if="name2">
        <el-select v-model="form.attrSecodIds" multiple placeholder="请选择，支持多选">
          <el-option
            v-for="item in form.attrSecodList"
            :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-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-input v-model="form.price" @input="priceCHANEG(form.price, 2)" type="number" placeholder="建议录入整数，单位元"
          v-trim />
      </el-form-item>
      <el-form-item label="商品主图">
        <el-upload
          :action="action"
          :file-list="form.ztList"
          :data="{ folder: 'goods_img' }"
          list-type="picture-card"
          :limit="1"
          :on-success="fileSuccess"
          :on-exceed="exceed"
          :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
          <div slot="tip" class="el-upload__tip">只能上传图片格式，png格式，建议尺寸140*140px</div>
        </el-upload>
        <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="商品图片">
        <el-upload
          :action="action"
          :file-list="form.files"
          :multiple="true"
          :data="{ folder: 'goods_img' }"
          list-type="picture-card"
          :on-success="fileSuccess1"
          :on-remove="handleRemove1">
          <i class="el-icon-plus"></i>
          <div slot="tip" class="el-upload__tip">只能上传图片格式，png格式，建议尺寸600*600px</div>
        </el-upload>
      <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.goodsParamList && form.goodsParamList.length > 0">
        <div style="font-size: 18px;font-weight: bold;">参数属性值配置 <span style="font-size: 13px; font-weight: 500;">按需配置当前商品的产品参数值，单个参数值不超过30个字</span></div>
        <el-form-item :label="item.name" v-for="(item, index) in form.goodsParamList" :key="index">
          <el-input v-model="item.val" maxlength="30" type="text" placeholder="请输入" v-trim/>
      <template v-if="form.baseGoodsParamList && form.baseGoodsParamList.length > 0">
        <div style="font-size: 18px;font-weight: bold;">参数属性值配置 <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>
@@ -98,18 +50,21 @@
<script>
import BaseOpera from '@/components/base/BaseOpera'
import GlobalWindow from '@/components/common/GlobalWindow'
import { brand } from '@/api/system/common.js'
import { findListForGoodsId, create, updateById, companyCreate, companyUpdateById } from '@/api/business/goods.js'
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 },
  data () {
  components: { GlobalWindow, UploadAvatarImage, UploadImage },
  data() {
    return {
      action: process.env.VUE_APP_API_PREFIX + '/public/upload',
      name1: '',
      name2: '',
      // 表单数据
      isUploading: false,
      form: {
        id: null,
        name: '',
@@ -117,17 +72,13 @@
        brandId: '',
        zdPrice: '',
        price: '',
        attrFirstIds: [],
        attrFirstNames: '',
        attrSecodIds: [],
        attrSecodNames: '',
        imgurl: '',
        imgfullurl: '',
        multifileList: [],
        files: [],
        ztList: [],
        goodsParamList: [],
        attrFirstList: [],
        attrSecodList: []
        baseGoodsParamList: [],
      },
      uploadData: {
        folder: 'goods_img'
      },
      // 验证规则
      rules: {
@@ -147,77 +98,42 @@
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      },
      options: [],
      categoryList: [],
      brandList: []
      options: []
    }
  },
  created () {
  inject: ['categoryList', 'brandList'],
  created() {
    this.config({
      api: '/business/goods',
      'field.id': 'id'
    })
    this.getbrand()
    this.getcategory()
  },
  watch: {
    'form.categoryId': {
      immediate: true,
      handler(news, old) {
        if (news) {
          this.name1 = ''
          this.name2 = ''
          if (old) {
            this.form.attrFirstIds = []
            this.form.attrSecodIds = []
            this.form.goodsParamList = []
          }
          this.categoryList.forEach(item => {
            if (item.id === news) {
              this.name1 = item.attrFirst
              this.name2 = item.attrSecond
              this.form.attrFirstList = item.attrFirstList.length > 0 ? item.attrFirstList : []
              this.form.attrSecodList = item.attrSecondList.length > 0 ? item.attrSecondList : []
              this.form.goodsParamList = JSON.parse(JSON.stringify(item.paramList))
              this.form.goodsParamList.forEach(item => {
                item.pramaId = item.id
              })
              console.log(this.form.goodsParamList)
            }
          })
          this.getcategory(1)
        }
      }
    },
    visible: {
      handler(news, old) {
        if (!news) {
          this.name1 = ''
          this.name2 = ''
          this.form = {
            id: null,
            name: '',
            categoryId: '',
            brandId: '',
            zdPrice: '',
            price: '',
            attrFirstIds: [],
            attrFirstNames: '',
            attrSecodIds: [],
            attrSecodNames: '',
            imgurl: '',
            multifileList: [],
            files: [],
            ztList: [],
            goodsParamList: [],
            attrFirstList: [],
            attrSecodList: []
          }
        }
      }
    }
    // 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.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('只能输入正整数')
@@ -228,115 +144,20 @@
        }
      }
    },
    confirm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.form.attrFirstIds.length > 0) {
            let arr = []
            this.form.attrFirstIds.forEach(element => {
              this.form.attrFirstList.forEach(item => {
                if (element === item.id) {
                  arr.push(item.name)
                }
              })
            })
            this.form.attrFirstNames = arr.join(',')
            this.form.attrFirstIds = this.form.attrFirstIds.join(',')
          } else {
            this.form.attrFirstNames = ''
            this.form.attrFirstIds = ''
          }
          if (this.form.attrSecodIds.length > 0) {
            let arr = []
            this.form.attrSecodIds.forEach(element => {
              this.form.attrSecodList.forEach(item => {
                if (element === item.id) {
                  arr.push(item.name)
                }
              })
            })
            this.form.attrSecodNames = arr.join(',')
            this.form.attrSecodIds = this.form.attrSecodIds.join(',')
          } else {
            this.form.attrSecodNames = ''
            this.form.attrSecodIds = ''
          }
          if (!this.form.id) {
            companyCreate({...this.form, type: 0})
              .then(() => {
                this.visible = false
                this.$tip.apiSuccess('新建成功')
                this.$emit('success')
              })
              .catch(e => {
                this.$tip.apiFailed(e)
              })
              .finally(() => {
                this.isWorking = false
              })
          } else {
            companyUpdateById({...this.form, type: 0})
              .then(() => {
                this.visible = false
                this.$tip.apiSuccess('编辑成功')
                this.$emit('success')
              })
              .catch(e => {
                this.$tip.apiFailed(e)
              })
              .finally(() => {
                this.isWorking = false
              })
          }
        } else {
          return false;
    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
          })
        }
      });
    },
    exceed() {
      this.$message.warning({
        message: '只能上传一个图标'
      })
    },
    fileSuccess1(response, file, fileList) {
      this.form.files = fileList
      this.form.multifileList.push({ fileurl: response.data.imgaddr, name: response.data.imgname, url: response.data.url })
    },
    handleRemove1(file, fileList) {
      this.form.files = fileList
      this.form.multifileList = fileList
    },
    fileSuccess(response) {
      this.form.ztList.push({ imgaddr: response.data.imgaddr, url: response.data.url })
      this.form.imgurl = response.data.imgaddr
    },
    handleRemove() {
      this.form.ztList = []
      this.form.imgurl = ''
    },
      getbrand() {
        brand({})
          .then(res => {
            this.brandList = res
          })
      },
      getcategory(type) {
        findListForGoodsId(this.form.id || '')
          .then(res => {
            this.categoryList = res
            if (type === 1) {
              this.categoryList.forEach(item => {
                if (item.id === this.form.categoryId) {
                  this.form.goodsParamList = JSON.parse(JSON.stringify(item.paramList))
                  this.form.goodsParamList.forEach(item => {
                    item.pramaId = item.id
                  })
                  console.log(this.form.goodsParamList)
                }
              })
            }
          })
      }
    uploadReverseSuccess(file) {
      this.form.imgurl = file.imgurl;
      this.form.imgfullurl = file.imgurlfull;
    }
  }
}
</script>