瀏覽代碼

促销活动

chenrui 10 月之前
父節點
當前提交
70895e2944

+ 22 - 0
src/config/router.config.js

@@ -3334,6 +3334,28 @@ export const asyncRouterMap = [
                   hidden: true,
                   permission: 'M_promotionInfoList'
                 }
+              },
+              {
+                path: 'detail/:sn/:pageType',
+                name: 'promotionInfoEdit',
+                component: () => import(/* webpackChunkName: "productManagement" */ '@/views/promotionManagement/promotionInfo/edit.vue'),
+                meta: {
+                  title: '编辑促销活动',
+                  icon: 'contacts',
+                  hidden: true
+                  // permission: 'M_promotionInfoEdit'
+                }
+              },
+              {
+                path: 'detail/:sn/:pageType',
+                name: 'promotionInfoDetail',
+                component: () => import(/* webpackChunkName: "productManagement" */ '@/views/promotionManagement/promotionInfo/edit.vue'),
+                meta: {
+                  title: '查看促销活动',
+                  icon: 'contacts',
+                  hidden: true
+                  // permission: 'M_promotionInfoDetail'
+                }
               }
             ]
           },

+ 275 - 0
src/views/promotionManagement/promotionInfo/chooseProductsModal.vue

@@ -0,0 +1,275 @@
+<template>
+  <a-drawer
+    :zIndex="zIndex"
+    title="选择产品"
+    placement="right"
+    :visible="isShow"
+    width="80%"
+    :get-container="false"
+    :wrap-style="{ position: 'absolute' }"
+    :headerStyle="{ padding: '10px' }"
+    @close="onClose"
+    wrapClassName="chooseProducts-modal">
+    <a-spin :spinning="spinning" tip="Loading...">
+      <div class="products-con">
+        <!-- 搜索条件 -->
+        <div class="table-page-search-wrapper">
+          <a-form-model
+            ref="ruleForm"
+            class="form-model-con"
+            layout="inline"
+            :model="queryParam"
+            :label-col="formItemLayout.labelCol"
+            :wrapper-col="formItemLayout.wrapperCol">
+            <a-row :gutter="15">
+              <a-col :md="8" :sm="24">
+                <a-form-model-item label="产品编码">
+                  <a-input id="chooseProducts-code" v-model.trim="queryParam.code" allowClear placeholder="请输入产品编码"/>
+                </a-form-model-item>
+              </a-col>
+              <a-col :md="8" :sm="24">
+                <a-form-model-item label="原厂编码">
+                  <a-input id="chooseProducts-code" v-model.trim="queryParam.code" allowClear placeholder="请输入原厂编码"/>
+                </a-form-model-item>
+              </a-col>
+              <a-col :md="8" :sm="24">
+                <a-form-model-item label="产品名称">
+                  <a-input id="chooseProducts-name" v-model.trim="queryParam.name" allowClear placeholder="请输入产品名称"/>
+                </a-form-model-item>
+              </a-col>
+              <a-col :md="8" :sm="24">
+                <a-form-model-item label="产品分类">
+                  <productTypeAll placeholder="请选择产品分类" @change="changeProductType" v-model="queryParam.productType" id="chooseProducts-productType"></productTypeAll>
+                </a-form-model-item>
+              </a-col>
+              <a-col :md="8" :sm="24">
+                <a-form-model-item label="产品品牌">
+                  <ProductBrand id="chooseProducts-productBrandSn" v-model="queryParam.productBrandSn"></ProductBrand>
+                </a-form-model-item>
+              </a-col>
+              <a-col :md="8" :sm="24" style="margin-bottom: 10px;">
+                <a-button type="primary" @click="$refs.table.refresh()" :disabled="disabled" id="chooseProducts-refresh">查询</a-button>
+                <a-button style="margin-left: 5px" @click="resetData" :disabled="disabled" id="chooseProducts-reset">重置</a-button>
+              </a-col>
+            </a-row>
+          </a-form-model>
+        </div>
+        <div style="margin-bottom: 10px">
+          <a-button type="primary" ghost :loading="loading" @click="handleSave">批量添加</a-button>
+          <span style="margin-left: 5px">
+            <template v-if="selectCount"> {{ `已选 ${selectCount} 项` }} </template>
+          </span>
+        </div>
+        <!-- 列表 -->
+        <s-table
+          class="sTable"
+          ref="table"
+          size="small"
+          :rowKey="(record) => record.productSn"
+          rowKeyName="productSn"
+          :row-selection="{ columnWidth: 40, getCheckboxProps:record =>({props: { disabled: this.chooseDataList && this.chooseDataList.indexOf(record.productSn) > -1 } })}"
+          @rowSelection="rowSelectionFun"
+          :columns="columns"
+          :pagination="{pageSizeOptions: ['20','50','100','200','500']}"
+          :data="loadData"
+          :defaultLoadData="false"
+          style="max-height:700px;"
+          :scroll="{ y: 550 }"
+          bordered>
+          <!-- 产品分类 -->
+          <template slot="productType" slot-scope="text, record">
+            <span v-if="record.productTypeName2 || record.productTypeName3">{{ record.productTypeName2 }} {{ record.productTypeName3 ? '>' : '' }} {{ record.productTypeName3 }}</span>
+            <span v-else>--</span>
+          </template>
+          <!-- 包装数 -->
+          <template slot="productQty" slot-scope="text, record">
+            <span v-if="record.packQty">
+              {{ record.packQty }}{{ record.unit }}/{{ record.packQtyUnit?record.packQtyUnit:'--' }}
+            </span>
+            <span v-else>--</span>
+          </template>
+        </s-table>
+      </div>
+    </a-spin>
+  </a-drawer>
+</template>
+
+<script>
+import { commonMixin } from '@/utils/mixin'
+import { STable } from '@/components'
+// import { productList } from '@/api/product'
+// import ProductBrand from '@/views/common/productBrand.js'
+// import productTypeAll from '@/views/common/productTypeAll.js'
+export default {
+  name: 'ChooseProductsModal',
+  components: { STable },
+  mixins: [commonMixin],
+  props: {
+    openModal: { //  弹框显示状态
+      type: Boolean,
+      default: false
+    },
+    chooseData: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    zIndex: { // 层级
+      type: [String, Number],
+      default: 1000
+    }
+  },
+  data () {
+    const _this = this
+    return {
+      spinning: false,
+      isShow: this.openModal, //  是否打开弹框
+      formItemLayout: {
+        labelCol: { span: 4 },
+        wrapperCol: { span: 20 }
+      },
+      queryParam: { //  查询条件
+        name: '', // 产品名称
+        code: '', //  产品编码
+        productBrandSn: undefined, //  产品品牌
+        productType: [],
+        productTypeSn1: '', //  产品一级分类
+        productTypeSn2: '', //  产品二级分类
+        productTypeSn3: '' //  产品三级分类
+      },
+      chooseDataList: [],
+      disabled: false, //  查询、重置按钮是否可操作
+      loading: false, //  表格加载中
+      columns: [
+        { title: '序号', dataIndex: 'no', width: 60, align: 'center' },
+        { title: '产品编码', dataIndex: 'code', align: 'center' },
+        { title: '产品名称', dataIndex: 'name', align: 'center', width: '18%', ellipsis: true, customRender: function (text) { return text || '--' } },
+        { title: '原厂编码', dataIndex: 'origCode', align: 'center', ellipsis: true, customRender: function (text) { return text || '--' } },
+        { title: '省级价', dataIndex: 'provincePrice', width: '6%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } },
+        { title: '市级价', dataIndex: 'cityPrice', width: '6%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } },
+        { title: '特约价', dataIndex: 'specialPrice', width: '6%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } },
+        { title: '品牌', dataIndex: 'productBrandName', align: 'center', ellipsis: true, customRender: function (text) { return text || '--' } },
+        { title: '产品分类', scopedSlots: { customRender: 'productType' }, width: '10%', align: 'center' },
+        { title: '包装数', scopedSlots: { customRender: 'productQty' }, align: 'center' },
+        { title: '单位', dataIndex: 'unit', align: 'center', ellipsis: true, customRender: function (text) { return text || '--' } }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        this.disabled = true
+        this.spinning = true
+        const params = Object.assign(parameter, this.queryParam)
+        return productList(params).then(res => {
+          let data
+          if (res.status == 200) {
+            data = res.data
+            const no = (data.pageNo - 1) * data.pageSize
+            for (var i = 0; i < data.list.length; i++) {
+              data.list[i].no = no + i + 1
+            }
+            this.disabled = false
+          }
+          this.spinning = false
+          return data
+        })
+      },
+      rowSelectionInfo: null
+    }
+  },
+  computed: {
+    selectCount () {
+      return this.rowSelectionInfo && this.rowSelectionInfo.selectedRowKeys.length
+    }
+  },
+  methods: {
+    // 表格选中项
+    rowSelectionFun (obj) {
+      this.rowSelectionInfo = obj || null
+    },
+    // 重置数据
+    resetData () {
+      this.queryParam.code = ''
+      this.queryParam.name = ''
+      this.queryParam.productBrandSn = undefined
+      this.queryParam.productTypeSn1 = ''
+      this.queryParam.productTypeSn2 = ''
+      this.queryParam.productTypeSn3 = ''
+      this.queryParam.productType = []
+      this.$nextTick(() => {
+        this.$refs.table.refresh(true)
+      })
+    },
+    //  清空选项
+    resetSearchForm () {
+      this.$refs.table.clearSelected()
+    },
+    // 保存
+    handleSave () {
+      if (!this.rowSelectionInfo || (this.rowSelectionInfo && this.rowSelectionInfo.selectedRowKeys.length < 1)) {
+        this.$message.warning('请在列表勾选后再进行操作!')
+        return
+      }
+      const resultList = JSON.parse(JSON.stringify(this.rowSelectionInfo && this.rowSelectionInfo.selectedRows))
+      this.$emit('ok', resultList)
+      this.isShow = false
+    },
+    // 关闭弹框
+    onClose () {
+      this.isShow = false
+      this.$emit('close')
+    },
+    //  产品分类  change
+    changeProductType (val, opt) {
+      this.queryParam.productTypeSn1 = val[0] ? val[0] : ''
+      this.queryParam.productTypeSn2 = val[1] ? val[1] : ''
+      this.queryParam.productTypeSn3 = val[2] ? val[2] : ''
+    },
+    // 禁用
+    handleDisabled (list) {
+      this.chooseDataList = list
+    }
+  },
+  watch: {
+    //  父页面传过来的弹框状态
+    openModal (newValue, oldValue) {
+      this.isShow = newValue
+    },
+    //  重定义的弹框状态
+    isShow (newValue, oldValue) {
+      if (!newValue) {
+        this.resetSearchForm()
+        this.rowSelectionInfo = null
+        this.$emit('close')
+      } else {
+        const _this = this
+        _this.resetData()
+        if (_this.chooseData && _this.chooseData.length > 0) {
+          let selectedRows = []
+          const selectedRowKeys = []
+          _this.chooseData.forEach(item => {
+            selectedRowKeys.push(item.goodsSn)
+          })
+          selectedRows = _this.chooseData
+          this.$nextTick(() => { // 页面渲染完成后的回调
+            _this.$refs.table.setTableSelected(selectedRowKeys, selectedRows) // 设置表格选中项
+          })
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .chooseProducts-modal{
+    .products-con{
+      .btn-con{
+        text-align: center;
+        margin: 30px 0 20px;
+        .button-cancel{
+          font-size: 12px;
+        }
+      }
+    }
+  }
+</style>

+ 451 - 2
src/views/promotionManagement/promotionInfo/edit.vue

@@ -1,8 +1,457 @@
 <template>
+  <div class="promotionEdit-wrap">
+    <a-spin :spinning="spinning" tip="Loading...">
+      <a-page-header :ghost="false" :backIcon="false" class="promotionEdit-cont" >
+        <!-- 自定义的二级文字标题 -->
+        <template slot="subTitle">
+          <a id="promotionEdit-back-btn" href="javascript:;" @click="handleBack"><a-icon type="left" /> 返回列表</a>
+        </template>
+      </a-page-header>
+      <!-- 表单 -->
+      <a-form-model
+        id="promotionEdit-form"
+        ref="ruleForm"
+        :model="form"
+        :rules="rules"
+        :label-col="formItemLayout.labelCol"
+        :wrapper-col="formItemLayout.wrapperCol"
+      >
+        <a-card :bordered="false" class="promotionEdit-cont">
+          <a-row>
+            <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+              <a-form-model-item label="标题名称" prop="title">
+                <a-input
+                  id="promotionEdit-title"
+                  :maxLength="30"
+                  v-model.trim="form.title"
+                  placeholder="请输入标题名称(最多30个字符)"
+                  :disabled="isDisabled"
+                  allowClear/>
+              </a-form-model-item>
+            </a-col>
+            <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+              <a-form-model-item label="排序" prop="sort">
+                <a-input-number
+                  style="width:100%"
+                  id="promotionEdit-sort"
+                  :disabled="isDisabled"
+                  allowClear
+                  placeholder="请输入排序数字(数字越大越靠后)"
+                  v-model="form.sort"
+                  :min="0"
+                  :max="999999"/>
+              </a-form-model-item>
+            </a-col>
+            <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+              <a-form-model-item label="封面图片" prop="imageSet" :label-col="{span:2}" :wrapper-col="{span:20}">
+                <Upload
+                  v-if="pageType==='add'||(pageType==='edit'&&!isDisabled)"
+                  class="upload"
+                  id="promotionEdit-imageSet"
+                  v-model="form.imageSet"
+                  ref="imageSet"
+                  :fileSize="10"
+                  :maxNums="10"
+                  @change="changeImage"
+                  listType="picture-card"></Upload>
+                <div v-else>
+                  <img
+                    :src="con"
+                    alt="图片走丢了"
+                    width="80"
+                    height="80"
+                    v-for="(con,i) in images"
+                    style="margin-right:10px;"
+                    :key="i" />
+                </div>
+                <span class="upload-desc">说明:单张大小小于10Mb,最多10张;建议尺寸:宽(420px)*高(230px)</span>
+              </a-form-model-item>
+            </a-col>
+            <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+              <a-form-model-item label="内容类型" prop="contentType" :label-col="{span:2}" :wrapper-col="{span:18}">
+                <v-select
+                  v-model="form.contentType"
+                  ref="saleStatus"
+                  id="promotion-saleStatus"
+                  code="PROMO_CONTENT_TYPE"
+                  showType="radio"
+                  :disabled="isDisabled"
+                  @change="changeContentType"
+                  allowClear></v-select>
+              </a-form-model-item>
+            </a-col>
+            <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+              <a-form-model-item label="内容" prop="content" v-show="form.contentType =='IMAGE_CONTENT'" :label-col="{span:2}" :wrapper-col="{span:20}">
+                <editor
+                  v-show="pageType === 'add'||(pageType === 'edit'&&!isDisabled)"
+                  id="promotionEdit-editor"
+                  ref="editor"
+                  class="promotionEdit-editor"
+                  @on-change="editorChange"
+                  :cache="false"></editor>
+                <div v-show="(pageType === 'edit'||pageType === 'see')&&isDisabled" class="box" v-html="form.content"></div>
+              </a-form-model-item>
+              <a-form-model-item label="上传视频" prop="content" v-show="form.contentType =='VIDEO'" :label-col="{span:2}" :wrapper-col="{span:20}">
+                <Upload
+                  v-if="pageType==='add'||(pageType==='edit'&&!isDisabled)"
+                  class="upload"
+                  id="promotionEdit-imageSet"
+                  v-model="form.content"
+                  fileType="video/mp4"
+                  ref="videoSet"
+                  :fileSize="100"
+                  :maxNums="1"
+                  @change="changeVideo"
+                ></Upload>
+                <div v-else>
+                  <video width="230" height="150" controls loop controlsList="nodownload">
+                    <source :src="form.content" type="video/mp4">
+                  </video>
+                </div>
+                <span class="upload-desc">说明:文件最大100M;视频:mp4.avi.flv</span>
+              </a-form-model-item>
+              <a-form-model-item label="跳转链接" prop="contentLink" v-if="form.contentType =='LINK'" :label-col="{span:2}" :wrapper-col="{span:20}">
+                <a-input
+                  style="width:50%;"
+                  :disabled="isDisabled"
+                  id="promotionEdit-title"
+                  :maxLength="100"
+                  v-model.trim="form.contentLink"
+                  placeholder="请输入跳转链接"
+                  @blur="handleLink"
+                  allowClear />
+                <a-select id="promotionEdit-title" default-value="货架促销" @change="handleLinkType" style="width: 120px;margin-left:10px;" v-model="form.linkType">
+                  <a-select-option value="1">
+                    货架促销
+                  </a-select-option>
+                  <a-select-option value="2">
+                    其他
+                  </a-select-option>
+                </a-select>
+              </a-form-model-item>
+            </a-col>
+          </a-row>
+          <!-- 参数配置 -->
+          <a-row style="width:83%;margin:0 auto 24px;" v-if="form.contentType =='LINK'&&form.linkType!='2'">
+            <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+              <a-checkbox @change="onChangeParams" :disabled="isDisabled">参数配置</a-checkbox>
+            </a-col>
+            <a-col
+              :xs="24"
+              :sm="24"
+              :md="24"
+              :lg="24"
+              :xl="24"
+              v-show="isShowParams">
+              <!-- 参数配置内容 -->
+              <setPromotion style="margin-top:20px;" :disabledVal="isDisabled" @addProduct="insterProduct"></setPromotion>
+            </a-col>
+          </a-row>
+        </a-card>
+      </a-form-model>
+    </a-spin>
+    <div class="affix-cont">
+      <a-button
+        type="primary"
+        class="button-primary"
+        :disabled="spinning"
+        id="productInfoEdit-submit-btn"
+        size="large"
+        @click="handleSave"
+        style="padding: 0 60px;">保存</a-button>
+    </div>
+    <!-- 预览 -->
+    <promotion-show-modal ref="showModal" :openModal="openShowModal" @close="openShowModal = false"></promotion-show-modal>
+    <!-- 添加产品 -->
+    <chooseProduct ref="chooseProduct" :openModal="showProModal" @close="closeProductModal"></chooseProduct>
+  </div>
 </template>
 
 <script>
+import { commonMixin } from '@/utils/mixin'
+import { VSelect, Upload } from '@/components'
+import Editor from '@/components/WEeditor'
+// import { saveActive, promoTerminalDetail } from '@/api/promoTerminal'
+import promotionShowModal from './promotionShowModal'
+import setPromotion from './setPromotion'
+import chooseProduct from './chooseProductsModal.vue'
+export default {
+  name: 'ProductBrandEditModal',
+  mixins: [commonMixin],
+  components: { VSelect, Upload, Editor, promotionShowModal, setPromotion, chooseProduct },
+  data () {
+    return {
+      isShow: this.openModal, //  是否打开弹框
+      spinning: false,
+      formItemLayout: {
+        labelCol: { span: 4 },
+        wrapperCol: { span: 16 }
+      },
+      form: {
+        promoActiveSn: undefined,
+        title: '',
+        contentType: 'IMAGE_CONTENT',
+        imageSet: '',
+        showFlag: '0',
+        content: '',
+        enabledFlag: '0',
+        sort: undefined,
+        contentLink: '',
+        linkType: undefined
+      },
+      pageType: undefined, // 页面类型
+      showProModal: false,
+      images: [],
+      isShowParams: false, // 是否显示参数配置内容
+      openShowModal: false,
+      isDisabled: false, // 控制是否能编辑
+      rules: {
+        title: [
+          { required: true, message: '请输入标题名称', trigger: 'blur' }
+        ],
+        imageSet: [
+          { required: true, message: '请选择要上传的封面图片', trigger: 'change' }
+        ],
+        sort: [
+          { required: true, message: '请输入排序数字', trigger: 'blur' }
+        ],
+        contentType: [
+          { required: true, message: '请选择内容类型', trigger: 'change' }
+        ],
+        content: [
+          { required: true, message: '请输入对应内容', trigger: ['blur', 'change'] }
+        ],
+        contentLink: [
+          { required: true, message: '请输入对应内容', trigger: 'blur' }
+        ],
+        enabledFlag: [
+          { required: true, message: '请选择是否发布', trigger: 'change' }
+        ],
+        showFlag: [
+          { required: true, message: '请选择是否显示', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  methods: {
+    // 设置参数
+    onChangeParams (e) {
+      this.isShowParams = e.target.checked
+    },
+    // 打开弹窗
+    insterProduct (flag) {
+      this.showProModal = true
+    },
+    // 返回列表
+    handleBack () {
+      this.resetSearchForm()
+      this.$router.push({ name: 'promotionInfoList', query: { closeLastOldTab: true } })
+    },
+    // 预览
+    handleSee () {
+      if (this.form.content) {
+        this.openShowModal = true
+        this.$refs.showModal.pageInit({ type: this.form.contentType, con: this.form.content })
+      } else {
+        this.$message.error('请输入预览内容!')
+      }
+    },
+    //  详情
+    getDetail () {
+      // 查看按钮时,所有按钮不能编辑    编辑按钮时,state 已发布,只能编辑是否发布;state已关闭,都可以编辑
+      promoTerminalDetail({ sn: this.$route.params.sn }).then(res => {
+        if (res.status == 200) {
+          if (this.pageType === 'edit') {
+            this.isDisabled = res.data.state === 'PUBLISH'
+          } else {
+            this.isDisabled = true
+          }
+          this.form.promoActiveSn = res.data.promoActiveSn
+          this.form.title = res.data.title
+          this.form.contentType = res.data.contentType
+          this.form.showFlag = res.data.showFlag
+          this.form.enabledFlag = res.data.enabledFlag
+          this.form.sort = res.data.sort
+          this.images = res.data.imageSet
+          this.form.imageSet = res.data.images
+          this.form.content = res.data.content
+          this.$refs.imageSet.setFileList(res.data.images)
+          if (res.data.contentType == 'IMAGE_CONTENT') {
+            this.$refs.editor.setHtml(res.data.content)
+          } else if (res.data.contentType == 'VIDEO') {
+            if (res.data.state != 'PUBLISH') {
+              this.$refs.videoSet.setFileList(res.data.content)
+            }
+          } else if (res.data.contentType == 'LINK') {
+            this.form.contentLink = res.data.content
+          }
+        }
+      })
+    },
+    closeProductModal () {
+
+    },
+
+    //  确定
+    handleSave () {
+      const _this = this
+      if (_this.form.contentType == 'LINK') {
+        _this.form.content = _this.form.contentLink
+      }
+      _this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          _this.form.promoActiveSn = this.itemId
+          const formData = JSON.parse(JSON.stringify(_this.form))
+          formData.imageSet = formData.imageSet ? formData.imageSet.split(',') : []
+          formData.showFlag = formData.enabledFlag == 0 ? '0' : formData.showFlag
+          if (formData.contentType == 'LINK') {
+            delete formData.contentLink
+          }
+          _this.spinning = true
+          saveActive(formData).then(res => {
+            if (res.status == 200) {
+              _this.$message.success(res.message)
+              _this.spinning = false
+              _this.isShow = false
+              _this.$emit('ok')
+            } else {
+              _this.spinning = false
+            }
+          })
+        } else {
+          return false
+        }
+      })
+    },
+    //  图片上传
+    changeImage (file) {
+      this.form.imageSet = file
+    },
+    // 视频上传
+    changeVideo (file) {
+      this.form.content = file
+    },
+    //  文本编辑器
+    editorChange (html, text) {
+      this.form.content = html
+    },
+    // 重置
+    resetSearchForm () {
+      if (this.pageType == 'add' || (this.pageType == 'edit' && !this.isDisabled)) {
+        this.$refs.imageSet.setFileList('')
+        this.$refs.videoSet.setFileList('')
+      }
+      if (this.$refs.editor) {
+        this.$refs.editor.setHtml('')
+      }
+      this.form = {
+        promoActiveSn: undefined,
+        title: '',
+        contentType: 'IMAGE_CONTENT',
+        imageSet: '',
+        showFlag: '0',
+        content: '',
+        enabledFlag: '0',
+        sort: undefined,
+        contentLink: '',
+        linkType: undefined
+      }
+      this.images = []
+      this.isDisabled = false
+      this.$refs.ruleForm.resetFields()
+    },
+    // 选择内容类型
+    changeContentType (e) {
+      if (e === 'LINK') {
+        this.form.linkType = '1'
+        this.form.contentLink = '/pagesB/promoDetail'
+      } else {
+        this.form.linkType = undefined
+        this.form.contentLink = ''
+      }
+      this.form.contentType = e
+    },
+    // 填入link内容
+    handleLink (con) {
+      if (!con.target.value || con.target.value != '/pagesB/promoDetail') {
+        this.form.linkType = '2'
+      } else {
+        this.form.linkType = '1'
+      }
+      this.form.contentLink = con.target.value
+    },
+    // 选择货架促销填入默认值
+    handleLinkType (val) {
+      this.form.contentLink = val === '2' ? '' : '/pagesB/promoDetail'
+    },
+    pageInit () {
+      this.pageType = this.$route.params.pageType ? this.$route.params.pageType : 'add'
+      if (this.pageType === 'edit' || this.pageType === 'see') {
+        this.getDetail()
+      }
+    }
+  },
+  mounted () {
+    this.pageInit()
+  },
+  activated () {
+    this.pageInit()
+  },
+  beforeRouteEnter (to, from, next) {
+    next(vm => {})
+  }
+}
 </script>
 
-<style>
-</style>
+<style lang="less" scoped>
+.promotionEdit-wrap{
+    position: relative;
+    height: 100%;
+    padding-bottom: 51px;
+    box-sizing: border-box;
+    >.ant-spin-nested-loading{
+      overflow-y: scroll;
+      height: 100%;
+    }
+    .promotionEdit-cont{
+      margin-bottom: 10px;
+    }
+    .upload{
+      width: 100%!important;
+    }
+    //  文本编辑器  工具栏样式换行
+    .promotionEdit-editor{
+      .w-e-toolbar{
+        flex-wrap: wrap;
+        z-index: 0;
+      }
+    }
+    // /deep/.upload-file .ant-upload-list-item-info{
+    //   padding:2px !important;
+    // }
+    //  商品图片描述
+    .upload-desc{
+      font-size: 12px;
+      color: #808695;
+    }
+    #promotionEdit-attachList{
+      height: auto;
+    }
+    // a{
+    //   color: inherit;
+    // }
+    .box{
+      border:1px solid #d9d9d9;
+      border-radius:4px;
+      padding:4px 11px;
+      color:rgba(0, 0, 0, 0.25);
+      cursor: not-allowed;
+      background:#fdfdfd;
+    }
+    .affix{
+      .ant-affix{
+        z-index: 101;
+      }
+    }
+  }
+</style>

+ 67 - 18
src/views/promotionManagement/promotionInfo/list.vue

@@ -20,8 +20,7 @@
                 <a-select
                   v-model="queryParam.showFlag"
                   placeholder="请选择显示状态"
-                  allowClear
-                >
+                  allowClear>
                   <a-select-option :value="1">已显示</a-select-option>
                   <a-select-option :value="0">未显示</a-select-option>
                 </a-select>
@@ -85,37 +84,35 @@
           </div>
           <span v-else>--</span>
         </template>
+        <!-- 操作 -->
+        <!-- state  PUBLISH 已开启 END 已结束 CLOSE 已关闭 UNPUBLISH 未开启 -->
         <template slot="action" slot-scope="text, record">
           <a-button
             size="small"
             type="link"
             class="button-primary"
-            @click="handleWriteoff(record)"
-            id="productOnlineInfoList-detail-btn">发布</a-button>
+            @click="handleOpen(record)"
+            v-if="(record.state=='UNPUBLISH'||record.state=='CLOSE')"
+            id="productOnlineInfoList-detail-btn">开启</a-button>
           <a-button
             size="small"
             type="link"
             class="button-primary"
-            @click="handleEdit(record)"
-          >
-            编辑
-          </a-button>
+            v-if="record.state=='PUBLISH'"
+            @click="handleClose(record)"
+            id="productOnlineInfoList-detail-btn">关闭</a-button>
           <a-button
             size="small"
             type="link"
-            class="button-success"
-            @click="handleEdit(record)"
-          >
-            查看
-          </a-button>
+            class="button-primary"
+            v-if="record.state!='END'"
+            @click="handleEdit(record)">编辑</a-button>
           <a-button
             size="small"
             type="link"
-            class="button-primary"
-            @click="handleEdit(record)"
-          >
-            变更
-          </a-button>
+            class="button-success"
+            v-if="record.state!='END'"
+            @click="handleEdit(record)">查看</a-button>
         </template>
       </s-table>
     </a-spin>
@@ -206,6 +203,58 @@ export default {
         _this.$refs.promotionShow.getDetail({ id: row.promoActiveSn, showType: row.contentType })
       })
     },
+    // 开启
+    handleOpen () {
+      const _this = this
+      this.$confirm({
+        title: '提示',
+        content: '促销活动一旦开启,客户可参与活动。确认开启吗?',
+        centered: true,
+        onOk () {
+          _this.spinning = true
+          allocLinkageOutDel({ sn: row.allocationLinkageOutSn }).then(res => {
+            if (res.status == 200) {
+              _this.$message.success(res.message)
+              _this.$refs.table.refresh()
+              _this.spinning = false
+            } else {
+              _this.spinning = false
+            }
+          })
+        }
+      })
+    },
+    // 关闭
+    handleClose () {
+      const _this = this
+      this.$confirm({
+        title: '提示',
+        content: '促销活动一旦关闭,客户无法参与活动。确认关闭吗?',
+        centered: true,
+        onOk () {
+          _this.spinning = true
+          allocLinkageOutDel({ sn: row.allocationLinkageOutSn }).then(res => {
+            if (res.status == 200) {
+              _this.$message.success(res.message)
+              _this.$refs.table.refresh()
+              _this.spinning = false
+            } else {
+              _this.spinning = false
+            }
+          })
+        }
+      })
+    },
+    // 编辑
+    handleEdit (row) {
+      const _this = this
+      // _this.$warning({
+      //   title: '提示',
+      //   content: '请先关闭活动,活动关闭后可编辑活动'
+      // })
+      _this.$router.push({ name: 'promotionInfoEdit', params: { sn: row.promoActiveSn } })
+      // _this.$router.push({ name: 'promotionInfoDetail', params: { sn: row.promoActiveSn } })
+    },
     //  重置
     resetSearchForm () {
       this.$refs.rangeDate.resetDate(this.time)

+ 391 - 0
src/views/promotionManagement/promotionInfo/setPromotion.vue

@@ -0,0 +1,391 @@
+<template>
+  <a-spin :spinning="spinning" tip="Loading...">
+    <a-form-model
+      id="setPromotion-form"
+      ref="sellRuleForm"
+      :model="sellForm"
+      :rules="sellRules"
+      :label-col="sellFormItemLayout.labelCol"
+      :wrapper-col="sellFormItemLayout.wrapperCol">
+      <a-row>
+        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+          <a-form-model-item label="基本规则" prop="contentType">
+            <v-select
+              v-model="sellForm.contentType"
+              placeholder="请选择基本规则"
+              ref="saleStatus"
+              id="promotion-saleStatus"
+              code="PROMO_CONTENT_TYPE"
+              :disabled="disabledVal"
+              allowClear></v-select>
+          </a-form-model-item>
+        </a-col>
+        <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+          <a-form-model-item label="券名称" prop="title" :label-col="{span:4}" :wrapper-col="{span:18}">
+            <a-input
+              :disabled="disabledVal"
+              id="setPromotion-title"
+              :maxLength="20"
+              v-model.trim="sellForm.title"
+              placeholder="请输入券名称(最多20个字符)"
+              allowClear />
+          </a-form-model-item>
+        </a-col>
+        <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+          <a-form-model-item label="券副标题" :label-col="{span:2}" :wrapper-col="{span:18}">
+            <a-input
+              :disabled="disabledVal"
+              id="setPromotion-title"
+              :maxLength="20"
+              v-model.trim="sellForm.title"
+              placeholder="请输入券副标题(最多20个字符)"
+              allowClear />
+          </a-form-model-item>
+        </a-col>
+        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+          <a-form-model-item label="产品范围">
+            <div id="setPromotionRange" style="position:relative;">
+              <a-tree-select
+                v-model="con"
+                style="width: 100%"
+                :tree-data="treeData"
+                tree-checkable
+                :disabled="disabledVal"
+                :show-checked-strategy="SHOW_ALL"
+                :getPopupContainer="triggerNode => triggerNode.parentNode"
+                placeholder="请选择产品范围" />
+                <!-- @change="onChangeTree" -->
+            </div>
+          </a-form-model-item>
+        </a-col>
+        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+          <a-form-model-item label="生成方式" prop="contentType">
+            <a-radio-group v-model="sellForm.value" @change="onChangeType" :disabled="disabledVal">
+              <a-radio :value="1">
+                按订单生成券
+              </a-radio>
+              <a-radio :value="2">
+                按产品款数生成券
+              </a-radio>
+            </a-radio-group>
+          </a-form-model-item>
+        </a-col>
+        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+          <a-form-model-item label="券内容" prop="imageSet">
+            <div class="couponCon">
+              <a-row v-show="sellForm.value===1">
+                <a-col :md="22" :sm="24">
+                  <div class="couponList">
+                    <!-- 具体内容 -->
+                    <a-form-model ref="couponRuleForm" :model="couponForm" :rules="couponRules" :label-col="couponFormLayout.labelCol" :wrapper-col="couponFormLayout.wrapperCol">
+                      <a-form-model-item ref="name" prop="name" style="margin-left:26px;">
+                        购买<a-input-number
+                          style="margin:0 5px;"
+                          v-model="couponForm.regularValue"
+                          :step="1"
+                          :max="99999999"
+                          :precision="0"
+                          :disabled="disabledVal"
+                          size="small"/>
+                        <a-select
+                          default-value="GE"
+                          :disabled="disabledVal"
+                          v-model="couponForm.regularUnit"
+                          style="width: 60px;"
+                          size="small"
+                          @change="handleChangeUnit">
+                          <a-select-option value="GE">
+                            个
+                          </a-select-option>
+                          <a-select-option value="YUAN">
+                            元
+                          </a-select-option>
+                        </a-select>
+                        活动产品,送<a-input-number
+                          v-model="couponForm.promotionValue"
+                          :disabled="disabledVal"
+                          style="margin:0 5px;"
+                          :min="0"
+                          :step="1"
+                          :precision="2"
+                          :max="99999999"
+                          size="small"/> 元
+                      </a-form-model-item>
+                      <a-form-model-item label="活动产品" prop="region">
+                        <a-button type="primary" @click="handleAddProduct" :disabled="disabledVal" size="small">添加产品</a-button>
+                        <div class="productCon">
+                          <a-tag closable @close="delBuyerName(con)" :disabled="disabledVal">
+                            产品编码
+                          </a-tag>
+                          <a-tag closable @close="delBuyerName(con)" :disabled="disabledVal">
+                            产品编码
+                          </a-tag>
+                        </div>
+                      </a-form-model-item>
+                      <a-form-model-item label="券适用范围" prop="desc">
+                        全部产品
+                      </a-form-model-item>
+                    </a-form-model>
+                  </div>
+                </a-col>
+                <a-col :md="2" :sm="24">
+                  <a-button type="link" class="button-info" :disabled="disabledVal">+新增</a-button>
+                  <a-button type="link" :disabled="disabledVal">删除</a-button>
+                </a-col>
+              </a-row>
+              <a-row v-show="sellForm.value===2" v-for="item in couponList" :key="item.id">
+                <a-col :md="22" :sm="24">
+                  <div class="couponList">
+                    <!-- 具体内容 -->
+                    <a-form-model ref="couponRuleForm" :model="couponForm" :rules="couponRules" :label-col="couponFormLayout.labelCol" :wrapper-col="couponFormLayout.wrapperCol">
+                      <a-form-model-item ref="name" prop="name" style="margin-left:26px;">
+                        购买<a-input-number
+                          style="margin:0 5px;"
+                          v-model="couponForm.regularValue"
+                          :step="1"
+                          :max="99999999"
+                          :precision="0"
+                          :disabled="disabledVal"
+                          size="small"/>
+                        <a-select
+                          default-value="GE"
+                          v-model="couponForm.regularUnit"
+                          style="width: 60px;"
+                          size="small"
+                          :disabled="disabledVal"
+                          @change="handleChangeUnit">
+                          <a-select-option value="GE">
+                            个
+                          </a-select-option>
+                          <a-select-option value="YUAN">
+                            元
+                          </a-select-option>
+                        </a-select>
+                        活动产品,送<a-input-number
+                          v-model="couponForm.promotionValue"
+                          style="margin:0 5px;"
+                          :min="0"
+                          :step="1"
+                          :precision="2"
+                          :max="99999999"
+                          :disabled="disabledVal"
+                          size="small"/> 元
+                      </a-form-model-item>
+                      <a-form-model-item label="活动产品" prop="region">
+                        <a-button type="primary" :disabled="disabledVal" @click="handleAddProduct" size="small">添加产品</a-button>
+                        <div class="productCon">
+                          <a-tag closable @close="delBuyerName(con)" :disabled="disabledVal">
+                            产品编码
+                          </a-tag>
+                          <a-tag closable @close="delBuyerName(con)" :disabled="disabledVal">
+                            产品编码
+                          </a-tag>
+                        </div>
+                      </a-form-model-item>
+                      <a-form-model-item label="券适用范围" prop="desc">
+                        全部产品
+                      </a-form-model-item>
+                      <a-form-model-item label="使用说明" prop="desc">
+                        <a-input
+                          v-model="couponForm.desc"
+                          :disabled="disabledVal"
+                          style="width:80%;"
+                          type="textarea"
+                          placeholder="请输入使用说明"
+                          :maxLength="200" />
+                      </a-form-model-item>
+                    </a-form-model>
+                  </div>
+                </a-col>
+                <a-col :md="2" :sm="24">
+                  <a-button type="link" v-if="i===0" class="button-info" @click="addCouponCon" :disabled="disabledVal">+新增</a-button>
+                  <a-button type="link" v-else @click="delCouponCon(item.id)" :disabled="disabledVal">删除</a-button>
+                </a-col>
+              </a-row>
+            </div>
+          </a-form-model-item>
+        </a-col>
+        <a-col
+          :xs="24"
+          :sm="24"
+          :md="12"
+          :lg="24"
+          :xl="24"
+          v-show="sellForm.value===1">
+          <a-form-model-item label="使用说明">
+            <a-input v-model="sellForm.desc" type="textarea" placeholder="请输入使用说明" :disabled="disabledVal" :maxLength="200" />
+          </a-form-model-item>
+        </a-col>
+        <a-col :xs="24" :sm="24" :md="12" :lg="24" :xl="24">
+          <a-form-model-item label="券有效期">
+            <a-radio-group v-model="sellForm.termVal" :disabled="disabledVal">
+              <a-radio :style="radioStyle" :value="1">
+                <span>固定日期</span>
+                <a-range-picker
+                  style="width:100%;margin-left:5px;"
+                  v-model="sellForm.time"
+                  :format="dateFormat"
+                  @change="dateChange"
+                  :disabled="disabledVal"
+                  :placeholder="['开始时间', '结束时间']" />
+                  <!-- :disabled-date="disabledDate" -->
+              </a-radio>
+              <a-radio :style="radioStyle" :value="2">
+                <span>领取后,当天生效,有效期至</span><a-input-number
+                  style="margin:0 5px;"
+                  v-model="sellForm.regularValue"
+                  :step="1"
+                  :max="99999999"
+                  :disabled="disabledVal"
+                  :precision="0"/>天
+              </a-radio>
+            </a-radio-group>
+          </a-form-model-item>
+        </a-col>
+      </a-row>
+    </a-form-model>
+  </a-spin>
+</template>
+
+<script>
+import { commonMixin } from '@/utils/mixin'
+import { VSelect } from '@/components'
+import { TreeSelect } from 'ant-design-vue'
+const SHOW_ALL = TreeSelect.SHOW_ALL
+export default {
+  name: 'PromotionAddModal',
+  mixins: [commonMixin],
+  components: { VSelect },
+  props: {
+    disabledVal: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      spinning: false,
+      SHOW_ALL,
+      // form 表单label布局设置
+      sellFormItemLayout: {
+        labelCol: { span: 2 }, // 文字前距离设置
+        wrapperCol: { span: 20 }// 表单后距离设置  数字越大距离越小
+      },
+      couponFormLayout: {
+        labelCol: { span: 3 },
+        wrapperCol: { span: 18 }
+      },
+      // 单选按钮样式
+      radioStyle: {
+        display: 'block',
+        height: '50px',
+        lineHeight: '40px'
+      },
+      sellForm: {
+        value: 2,
+        termVal: undefined,
+        enabledFlag: '0',
+        con: []
+      },
+      dateFormat: 'YYYY-MM',
+      con: [],
+      couponList: [{
+        val1: '',
+        unit: ''
+      }], // 按产品款数生成券 数据
+      treeData: [],
+      showProModal: false,
+      couponForm: {},
+      couponRules: {},
+
+      sellRules: {
+        promoBuyerList: [{
+          required: true,
+          message: '请选择参与经销商',
+          trigger: 'change'
+        }],
+        time: [{
+          required: true,
+          message: '请选择促销时间',
+          trigger: 'change'
+        }],
+        name: [{
+          required: true,
+          message: '请输入促销名称',
+          trigger: 'blur'
+        }],
+        description: [{
+          required: true,
+          message: '请输入促销描述',
+          trigger: 'blur'
+        }]
+      }
+    }
+  },
+  methods: {
+    delBuyerName (row) {
+
+    },
+    onChange () {
+
+    },
+    dateChange () {
+
+    },
+    handleChangeUnit () {},
+    // 添加产品
+    handleAddProduct () {
+      this.$emit('addProduct', true)
+    },
+    // 生成方式 change
+    onChangeType (e) {
+      this.couponList = [{}]
+      this.sellForm.value = e.target.value
+    },
+    // 新增券内容
+    addCouponCon () {
+      const obj = {
+        val1: '',
+        unit: ''
+      }
+      if (this.couponList.length >= 10) {
+        this.$message.warning('最多只能新增10个!')
+        return
+      }
+      this.couponList.push(obj)
+    },
+    // 删除券内容
+    delCouponCon (id) {
+
+    },
+    onChangeTree (e) {
+      debugger
+    }
+
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .couponList{
+    background: #EFEFEF;
+    border-radius:5px;
+    padding:15px 15px 2px;
+    margin-bottom:5px;
+    .ant-form-item{
+      margin-bottom:12px;
+    }
+  }
+  .productCon{
+    width: 80%;
+    margin-left:12.3%;
+    max-height: 150px;
+    overflow-y: scroll;
+    background: #fff;
+    border-radius: 5px;
+    padding: 10px 15px;
+  }
+  .productCon::-webkit-scrollbar {
+    display: none;
+  }
+</style>