经销商管理

doum

19 小时以前 6f846284806e47fac7c2a4a9658473f7f8e9945b

 admin/src/components/business/OperaBannerZhuanquWindow.vue

@@ -1,13 +1,16 @@
<template>
  <GlobalAlertWindow
  <GlobalWindow
    v-loading="isUploading"
    :title="title"
    width="60%"
    :visible.sync="visible"
    :confirm-working="isWorking"
    @confirm="confirm"
  >
    <el-form :model="form" ref="form" :rules="rules" label-width="120px" label-suffix="：">

    <el-form :model="form" ref="form" :rules="rules"  label-width="120px" label-suffix="：" >
      <el-form-item label="专区名称" prop="title">
        <el-input v-model="form.title" placeholder="请输入名称" :maxlength="5" v-trim/>
      </el-form-item>
      <el-form-item label="展示图" prop="imgFullUrl">
        <UploadAvatarImage
          :file="{ 'imgurlfull': form.imgFullUrl, 'imgurl': form.imgurl }"
@@ -17,65 +20,29 @@
          @uploadBegin="isUploading = true"
        />
      </el-form-item>
      <el-form-item label="专区名称" prop="labelId">
        <el-select
          v-model="form.labelId"
          placeholder="请选择专区名称"
          clearable
          @change="labelChange"
        >
          <el-option
            v-for="item in types"
            :key="item.id"
            :value="item.id"
            :label="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="关联产品" prop="content">
        <el-select
          v-model="form.content"
          placeholder="请输入产品名称，再选择"
          filterable
          remote
          reserve-keyword
          :remote-method="remoteMethod"
          :loading="searchLoading"
          @change="selectShop"
        >
          <el-option
            v-for="item in goods"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      <el-form-item label="选中商品" prop="applyIdList" >
        <span style="font-size: 12px;color: #216EEE"   @click="selectGoods">已指定【 {{applyDataList.length}} 】件商品</span>
        <el-button style="margin-left:30px;display: inline-block;width: 80px;" type="primary"  @click="selectGoods">去选择 </el-button>
      </el-form-item>
      <el-form-item label="排序码" prop="sortnum">
        <el-input v-model="form.sortnum" placeholder="请输入排序码" v-trim/>
        <el-input v-model="form.sortnum" type="number"  placeholder="请输入排序码" v-trim/>
      </el-form-item>
    </el-form>
  </GlobalAlertWindow>
    <OperaCouponGoodsWindow ref="OperaCouponGoodsWindow" @success="doSelect"/>
  </GlobalWindow>
</template>

<script>
import BaseOpera from '@/components/base/BaseOpera'
import GlobalAlertWindow from '@/components/common/GlobalAlertWindow'
import GlobalWindow from '@/components/common/GlobalWindow'
import UploadAvatarImage from '@/components/common/UploadAvatarImage'
import { findAll } from "@/api/business/labels";
import { findListByParentCategory } from '@/api/business/goods'
import OperaCouponGoodsWindow from '@/components/business/OperaCouponGoodsWindow'
import {allList as goodsList} from "@/api/business/goods";
export default {
  name: 'OperaBannerWindow',
  extends: BaseOpera,
  components: { GlobalAlertWindow, UploadAvatarImage },
  components: { GlobalWindow, UploadAvatarImage ,OperaCouponGoodsWindow},
  data () {
    let positionRule = (rule, value, callBack) => {
      if (!value) {
        callBack(new Error(rule.message))
      } else {
        callBack()
      }
    }
    return {
      isUploading: false,
      searchLoading: false,
@@ -86,24 +53,24 @@
      form: {
        id: null,
        imgurl: '',
        title:'',
        imgFullUrl: '',
        content: '',
        labelId: '',
        position: 3,
        sortnum: '',
        objName: '',

        applyIdList:[]
      },
      types:[],
      goods: [],
      // 验证规则
      rules: {
        content: [
          { required: true, validator: positionRule, message: '请选择关联产品', tigger: 'change' }
        title: [
          { required: true, message: '请输入专区名称', tigger: 'blur' }
        ],
        imgFullUrl: [
          { required: true, message: '请上传专区图片', tigger: 'change' }
        ],
      }
      },
      applyDataList:[]
    }
  },
  created () {
@@ -111,15 +78,26 @@
      api: '/business/banner',
      'field.id': 'id'
    })
    findAll({ type: 12 })
      .then(res => {
        console.log(res);
        this.types = res
      })
  },
  methods: {
    selectGoods () {
      this.$refs.OperaCouponGoodsWindow.open('选择商品', this.applyDataList)
    },
    doSelect (rows) {
      console.log(rows, this.applyDataList)
      this.applyDataList = []
      this.form.applyIdList = []
      if (rows && rows.length) {
        rows.forEach(item => {
          this.applyDataList.push(item)
          this.form.applyIdList.push(item.id)
        })
      }
      this.$refs.form.clearValidate();
    },
    open (title, target) {

      this.applyDataList = []
      this.form.applyIdList = []
      this.title = title
      this.visible = true
      this.activities = []
@@ -138,38 +116,24 @@
        for (const key in this.form) {
          this.form[key] = target[key]
        }
        this.form.content = +this.form.content
        this.remoteMethod(target.goodsName)
        this.loadSelectGoods()
      })
    },
    labelChange() {
      this.this.goods = []
      this.form.labelId = ''
    loadSelectGoods () {
      goodsList({
        zhuanquId: this.form.id // 商品分类
      }).then(res => {
        this.applyDataList = res || []
        this.applyDataList.forEach(t => {
          this.form.applyIdList.push(t.id)
        })
      })
    },
    // 上传图片
    uploadAvatarSuccess(file) {
      this.form.imgurl = file.imgurl;
      this.form.imgFullUrl = file.imgurlfull;
    },
    remoteMethod(query) {
      if (query !== '') {
        this.searchLoading = true
        findListByParentCategory({
          name: query,
          categoryId: this.form.labelId
        })
          .then(res => {
            this.goods = res
          })
          .finally(() => {
            this.searchLoading = false
          })
      }
    },
    selectShop(val) {
      const temp = this.goods.find(item => item.id == val)
      this.form.objName = temp.name
    },
    }
  },
}
</script>