1

MrShi

2024-10-25 1e943f08399e5d04a63580622080ebbb09d138bc

 platform/src/components/business/OperaGoodsWindow.vue

@@ -1,340 +1,173 @@
<template>
    <GlobalWindow
      :title="title"
      :visible.sync="visible"
      :confirm-working="isWorking"
      @confirm="confirm"
    >
      <el-form :model="form" ref="form" :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/>
  <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>
        <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>
          </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-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-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="商品主图">
          <el-upload
            :action="action"
            :file-list="form.ztList"
            :data="{ folder: 'projects' }"
            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>
        </el-form-item>
    <el-form-item label="商品图片">
          <el-upload
            :action="action"
            :file-list="form.files"
            :multiple="true"
            :data="{ folder: 'projects' }"
            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>
        <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/>
        </el-form-item>
      </el-form>
    </GlobalWindow>
  </template>
  
  <script>
  import BaseOpera from '@/components/base/BaseOpera'
  import GlobalWindow from '@/components/common/GlobalWindow'
  import { brand } from '@/api/system/common.js'
  import { findListForGoodsId, create, updateById } from '@/api/business/goods.js'
  export default {
    name: 'OperaGoodsWindow',
    extends: BaseOpera,
    components: { GlobalWindow },
    data () {
      return {
        action: process.env.VUE_APP_API_PREFIX + '/public/uploadLocal',
        name1: '',
        name2: '',
        // 表单数据
        form: {
          id: null,
          name: '',
          categoryId: '',
          brandId: '',
          zdPrice: '',
          price: '',
          attrFirstIds: [],
          attrFirstNames: '',
          attrSecodIds: [],
          attrSecodNames: '',
          imgurl: '',
          multifileList: [],
          files: [],
          ztList: [],
          goodsParamList: [],
          attrFirstList: [],
          attrSecodList: []
        },
        // 验证规则
        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: [],
        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)
          }
        }
      </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: [],
      },
      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: []
            }
          }
        }
      }
    },
    methods: {
      priceCHANEG(val, type) {
        if (!/^[1-9]+[0-9]*$/.test(val)) {
          this.$message.warning('只能输入正整数')
          if (type === 1) {
            this.form.zdPrice = ''
          } else {
            this.form.price = ''
          }
        }
      uploadData: {
        folder: 'goods_img'
      },
      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) {
              create(this.form)
                .then(() => {
                  this.visible = false
                  this.$tip.apiSuccess('新建成功')
                  this.$emit('success')
                })
                .catch(e => {
                  this.$tip.apiFailed(e)
                })
                .finally(() => {
                  this.isWorking = false
                })
            } else {
              updateById(this.form)
                .then(() => {
                  this.visible = false
                  this.$tip.apiSuccess('编辑成功')
                  this.$emit('success')
                })
                .catch(e => {
                  this.$tip.apiFailed(e)
                })
                .finally(() => {
                  this.isWorking = false
                })
            }
          } else {
            return false;
          }
        });
      // 验证规则
      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' }
        ]
      },
      exceed() {
        this.$message.warning({
          message: '只能上传一个图标'
      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
        })
      },
      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)
                  }
                })
              }
            })
        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>
  
}
</script>

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