经销商管理

doum

6 天以前 bcad3fe1b888ae11d437f6558b7974cfa30cfb2e

 admin/src/components/business/OperaGoodsWindow.vue

@@ -10,69 +10,113 @@
      <el-form-item label="商品名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入商品名称" v-trim/>
      </el-form-item>
      <el-form-item v-if="form.type==2" label="商品标签" prop="labels">
        <el-input v-model="form.labels" placeholder="请输入标签，多个用“,”隔开，不超过5个" v-trim/>
      <el-form-item label="商品分类" prop="categoryId">
        <el-select  v-model="form.categoryId"    placeholder="请选择所属分类"  clearable filterable >
          <el-option
            v-for="item in labels()"
            :key="item.id"
            :value="item.id"
            :label="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <template v-else>
        <el-form-item label="商品分类" prop="categoryId">
          <el-select
            v-model="form.categoryId"
            placeholder="请选择所属分类"
          >
            <el-option
              v-for="item in labels()"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品品牌" prop="brandId">
          <el-select
            v-model="form.brandId"
            placeholder="请选择商品品牌"
          >
            <el-option
              v-for="item in brands()"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
      </template>
      <el-form-item label="商品品牌" prop="brandId">
        <el-select v-model="form.brandId"   placeholder="请选择商品品牌" clearable filterable >
          <el-option
            v-for="item in brands()"
            :key="item.id"
            :value="item.id"
            :label="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品主图" prop="imgurl">
        <UploadAvatarImage
          :file="{ 'imgurlfull': form.imgurlfull, 'imgurl': form.imgurl }"
          @uploadSuccess="uploadAvatarSuccess"
          @uploadEnd="isUploading = false"
          @uploadBegin="isUploading = true"
        />
        <div  style="display: flex; align-items: center;justify-content: center;  height: 100%; width: 100%">
          <UploadAvatarImage
              :file="{ 'imgurlfull': form.imgurlfull, 'imgurl': form.imgurl}"
              :uploadData="{folder:'goods'}"
              @uploadSuccess="uploadAvatarSuccess"
              @uploadEnd="isUploading = false"
              @uploadBegin="isUploading = true"
              style=" width: 120px;"
          />
          <div class="tip-warn" style=" margin-left: 20px; margin-top: 30px;">
            建议尺寸：100px X 100px
            支持png、jpg、jpeg格式，大小不超过2M，上传图片不允许涉及政治敏感与色情
          </div>
        </div>
      </el-form-item>
      <el-form-item v-if="form.type==2" label="咖豆风味" prop="fileList">
        <UploadAvatarImage
          :file="{ 'imgurlfull': form.imgurlfull, 'imgurl': form.imgurl }"
          @uploadSuccess="uploadAvatarSuccess"
          @uploadEnd="isUploading = false"
          @uploadBegin="isUploading = true"
        />
      </el-form-item>
      <el-form-item v-else label="商品轮播图" prop="fileList">
      <el-form-item label="商品轮播图" prop="fileList">
        <UploadImage
          :fileList="form.fileList"
          :uploadData="{folder:'goods'}"
          @beginUpload="isUploading=true"
          @endUpload="isUploading=false"/>
        <p class="tip-warn">
          建议尺寸：750px X 750px，上限6张
          支持png、jpg、jpeg格式，大小不超过2M，上传图片不允许涉及政治敏感与色情,
        </p>
      </el-form-item>
      <el-form-item label="展示价格" prop="price">
        <el-input v-model="form.price" placeholder="请输入展示价格" v-trim>
          <template slot="append">{{ form.type != 1 ? '元' : '咖豆' }}</template>
      <el-form-item label="出厂价（元）" prop="price">
        <el-input type="number" v-model="form.price" placeholder="请输入出厂价" v-trim>  <template slot="append"> 元</template>  </el-input>
      </el-form-item>
      <el-form-item label="销售价（元）" prop="skuPrice">
        <el-input type="number" v-model="form.skuPrice" placeholder="请输入销售价" v-trim>  <template slot="append"> 元</template>  </el-input>
      </el-form-item>
      <el-form-item label="划线价（元）" prop="showPrice">
        <el-input type="number" v-model="form.showPrice" placeholder="请输入线价" v-trim>  <template slot="append"> 元</template>  </el-input>
      </el-form-item>
      <el-form-item label="积分抵扣额度" prop="deductRata">
        <el-input type="number" v-model="form.deductRata" placeholder="请输入积分抵扣额度" v-trim>
          <template slot="append">%</template>
        </el-input>
        <p class="tip-warn" style="margin-bottom: 1px;"><i class="el-icon-warning"></i>提醒：积分可抵扣金额占商品零售价的百分比，0.1%～100%之间 </p>
      </el-form-item>
      <el-form-item  label="库存量" prop="stockNum">
        <el-input type="number" v-model="form.stockNum" placeholder="请输入商品库存量" v-trim/>
      </el-form-item>
      <el-form-item label="商品单位" prop="unitName">
        <el-input v-model="form.unitName" placeholder="请输入商品单位" v-trim/>
      </el-form-item>
      <el-form-item  label="初始销量" prop="salenum">
        <el-input type="number" v-model="form.salenum" placeholder="请输入初始销量" v-trim/>
      </el-form-item>
      <el-form-item  label="商品重量" prop="weight">
        <el-input type="number" v-model="form.weight" placeholder="请输入商品重量" v-trim>
        <template slot="append">kg</template>
        </el-input>
      </el-form-item>
      <el-form-item v-if="form.type!=2" label="初始销量" prop="salenum">
        <el-input v-model="form.salenum" placeholder="请输入初始销量" v-trim/>
      <el-form-item label="是否上架" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio :value="1" :label="1" >上架</el-radio>
          <el-radio :value="0" :label="0" >下架</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="使用商品品牌" prop="brandIdList">
        <el-select v-model="form.brandIdList"   placeholder="请选择商品品牌" clearable multiple @change="changeBrand">
          <el-option
              v-for="item in applyBrands"
              :key="item.id"
              :value="item.id"
              :label="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <div v-if="form.brandIdList && form.brandIdList.length" style="border:1px solid #f2f2f2; margin-left: 150px;width: 700px;padding: 20px 0 0px 0;margin-bottom: 20px;"  class="el-form-item__content">
<!--
        <span style="line-height: 32px;font-size: 14px;"><b style="color: #F56C6C;margin-right: 4px;font-size: 11px;">*</b>{{'【'+(item.name)+'】系列：'}}</span>
-->
        <el-form-item  v-for="(item,index) in applyBrands" v-if="item.show" :key="'warning_'+index" style="display: block;width: 100%;"  :label="'【'+(item.name)+'】系列'"  >
          <el-select v-model="item.childIdList" filterable  multiple   style=" width: 500px;"  clearable  placeholder="请选择品牌系列" >
            <el-option v-for="item in item.childList"   :label="item.name" :value="item.id" :key="'brand_'+index+item.id">  </el-option>
          </el-select>
        </el-form-item>
<!--
        <el-button type="danger" style="margin-left: 10px;height: 32px; " @click="delDo(index)" v-if="index>0 || form.detailList.length>1">删除</el-button>
-->
      </div>
      <el-form-item label="商品详情" prop="content">
        <RichEditor :content="{ content : form.content}"  @edit="form.content=$event" />
        <RichEditor  :richData="form.content" :styleEditor="'border: 1px solid #ccc;display: inline-block;height:500px;'" @getWangedditor="getWangedditor" :readonly="false"/>
      </el-form-item>
    </el-form>
  </GlobalWindow>
@@ -84,6 +128,7 @@
import UploadImage from '@/components/common/UploadImage'
import UploadAvatarImage from '@/components/common/UploadAvatarImage'
import RichEditor from '@/components/common/RichEditor'
import { findAll as labelList } from '@/api/business/labels'
export default {
  name: 'OperaGoodsWindow',
  extends: BaseOpera,
@@ -103,24 +148,30 @@
        imgurlfull: '',
        salenum: '',
        type: 0,
        creator: '',
        createDate: '',
        editor: '',
        editDate: '',
        isdeleted: '',
        remark: '',
        info: '',
        content: '',
        sortnum: '',
        looknum: '',
        type: '',
        status: '',
        isrec: '',
        styleImg: '',
        labels: ''
        skuPrice: null,
        status: 1,
        showPrice: null,
        deductRata: null,
        weight: null,
        unitName: '',
        stockNum: null,
        brandIdList: [],
        brandList: []
      },
      applyBrands: [],
      // 验证规则
      rules: {
        name: [{ required: true, message: '请输入商品名称', tigger: 'blur' }],
        categoryId: [{ required: true, message: '请选择所属分类' }],
        brandIdList: [{ required: true, message: '请录入适用品牌和系列信息' }],
        weight: [{ required: true, message: '请输入商品重量' }],
        price: [{ required: true, message: '请输入商品出厂价' }],
        skuPrice: [{ required: true, message: '请输入商品零售价' }],
        deductRata: [{ required: true, message: '请输入积分抵扣比例' }],
        status: [{ required: true, message: '请选择是否上架' }]
      }
    }
  },
@@ -130,11 +181,48 @@
      api: '/business/goods',
      'field.id': 'id'
    })
    this.loadBrandList()
  },
  methods: {
    isSeletedBrand (val) {
      var r = false
      if (!this.form.brandIdList || !this.form.brandIdList.length) {
        return false
      }
      this.form.brandIdList.forEach(item => {
        if (item === val.id) {
          r = true
        }
      })
      return r
    },
    changeBrand () {
      this.applyBrands.forEach(item => {
        item.show = this.isSeletedBrand(item)
      })
      console.log(this.form.brandIdList, this.applyBrands)
    },
    loadBrandList () {
      labelList({
        type: 14 // 适应商品品牌
      })
        .then(res => {
          this.applyBrands = res
          this.applyBrands.forEach(item => {
            item.show = this.isSeletedBrand(item)
          })
        })
    },
    getWangedditor (val) {
      this.form.content = val
    },
    open (title, target, type) {
      this.title = title
      this.visible = true
      this.form.brandIdList = []
      this.form.fileList = []
      this.form.imgurl=''
      this.form.imgurlfull=''
      // debugger
      // 新建
      if (target == null) {
@@ -143,21 +231,64 @@
          this.form[this.configData['field.id']] = null
          this.form.type = type
        })
        this.loadBrandList()
        return
      }
      // 编辑
      this.$nextTick(() => {
      this.$nextTick(async () => {
        for (const key in this.form) {
          this.form[key] = target[key]
        }
        this.form.type = type
        await this.loadInfo(this.form.id)
        if (this.form.imgurl) {
          this.form.imgurlfull = target.resourcePath + target.imgurl
        }
      })
    },
    uploadAvatarSuccess(file) {
    loadInfo () {
      this.form.brandIdList =[]
      this.form.fileList =[]
      this.api.detail(this.form.id).then(res => {
        if (res && res.brandList) {
          this.form.brandList = res.brandList
          res.brandList.forEach(item => {
            this.form.brandIdList.push(item.id)
          })
        }
        if (res.fileList && res.fileList.length) {
          res.fileList.forEach(item => {
            this.form.fileList.push(
              {
                fileurl: item.fileurl,
                name: item.fileName,
                url: res.resourcePath + item.fileurl
              }
            )
          })
          console.log(this.form.fileList)
        }
        this.loadBrandList()
      })
    },
    uploadAvatarSuccess (file) {
      this.form.imgurlfull = file.imgurlfull
      this.form.imgurl = file.imgurl
    },
    confirm () {
      this.form.brandList = []
      this.applyBrands.forEach(item => {
        if (item.show) {
          this.form.brandList.push(item)
        }
      })
      if (this.form.id == null || this.form.id === '') {
        this.__confirmCreate()
        return
      }
      this.__confirmEdit()
    }
  },
  }
}
</script>

@@ -172,4 +303,7 @@
    width: 100%;
  }
}
::v-deep  .el-form-item__label{
  width: 150px !important;
}
</style>