浏览代码

促销规则

chenrui 4 年之前
父节点
当前提交
65414dc274

+ 106 - 0
src/views/promotionRulesManagement/promotionRules/chooseBrandModal.vue

@@ -0,0 +1,106 @@
+<template>
+  <a-modal
+    centered
+    class="chooseBrand-modal"
+    :footer="null"
+    :maskClosable="false"
+    title="选择产品品牌"
+    v-model="isShow"
+    @cancle="isShow=false"
+    width="50%">
+    <div class="chooseBrand-con">
+      <div>
+        <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange">
+          全选
+        </a-checkbox>
+      </div>
+      <a-divider />
+      <a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChange" />
+      <!-- 按钮 -->
+      <div class="btn-con">
+        <a-button
+          type="primary"
+          id="chooseBrand-submit"
+          size="large"
+          class="button-primary"
+          style="padding: 0 60px;">保存</a-button>
+        <a-button
+          id="chooseBrand-cancel"
+          size="large"
+          class="button-cancel"
+          @click="isShow=false"
+          style="padding: 0 60px;margin-left: 15px;">取消</a-button>
+      </div>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+const plainOptions = ['箭冠', '非箭冠', 'NGK']
+const defaultCheckedList = ['箭冠', 'NGK']
+export default {
+  name: 'ChooseBrandModal',
+  props: {
+    openModal: { //  弹框显示状态
+      type: Boolean,
+      default: false
+    },
+    itemId: {
+      type: [Number, String],
+      default: ''
+    },
+    nowData: {
+      type: Object,
+      default: null
+    }
+  },
+  data () {
+    return {
+      isShow: this.openModal, //  是否打开弹框
+      checkedList: defaultCheckedList,
+      indeterminate: true,
+      checkAll: false,
+      plainOptions
+    }
+  },
+  methods: {
+    onChange (checkedList) {
+      this.indeterminate = !!checkedList.length && checkedList.length < plainOptions.length
+      this.checkAll = checkedList.length === plainOptions.length
+    },
+    onCheckAllChange (e) {
+      Object.assign(this, {
+        checkedList: e.target.checked ? plainOptions : [],
+        indeterminate: false,
+        checkAll: e.target.checked
+      })
+    }
+  },
+  watch: {
+    //  父页面传过来的弹框状态
+    openModal (newValue, oldValue) {
+      this.isShow = newValue
+    },
+    //  重定义的弹框状态
+    isShow (newValue, oldValue) {
+      if (!newValue) {
+        this.$emit('close')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .chooseBrand-modal{
+    .chooseBrand-con{
+      .btn-con{
+        text-align: center;
+        margin: 30px 0 20px;
+        .button-cancel{
+          font-size: 12px;
+        }
+      }
+    }
+  }
+</style>

+ 151 - 0
src/views/promotionRulesManagement/promotionRules/chooseImportModal.vue

@@ -0,0 +1,151 @@
+<template>
+  <a-modal
+    centered
+    class="chooseImport-modal"
+    :footer="null"
+    :maskClosable="false"
+    title="导入"
+    v-model="isShow"
+    @cancle="isShow=false"
+    :width="900">
+    <div class="chooseImport-con">
+      <!-- 可导入数据 -->
+      <p class="">可导入数据32条</p>
+      <s-table
+        class="sTable"
+        ref="table"
+        size="small"
+        :rowKey="(record) => record.id"
+        :columns="columns"
+        :data="loadData"
+        :scroll="{ y: 200 }"
+        :showPagination="false"
+        bordered>
+      </s-table>
+      <a-divider />
+      <!-- 不可导入数据 -->
+      <p class="red">不可导入数据5条</p>
+      <s-table
+        class="unTable"
+        ref="unTable"
+        size="small"
+        :rowKey="(record) => record.id"
+        :columns="unColumns"
+        :data="unLoadData"
+        :scroll="{ y: 200 }"
+        :showPagination="false"
+        bordered>
+      </s-table>
+      <!-- 按钮 -->
+      <div class="btn-con">
+        <a-button
+          type="primary"
+          id="chooseImport-submit"
+          size="large"
+          class="button-primary"
+          style="padding: 0 60px;">确认导入</a-button>
+        <a-button
+          id="chooseImport-cancel"
+          size="large"
+          class="button-cancel"
+          @click="isShow=false"
+          style="padding: 0 60px;margin-left: 15px;">取消</a-button>
+      </div>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+import { STable } from '@/components'
+import { dealerProductList } from '@/api/dealerProduct'
+export default {
+  name: 'ChooseImportModal',
+  components: { STable },
+  props: {
+    openModal: { //  弹框显示状态
+      type: Boolean,
+      default: false
+    },
+    itemId: {
+      type: [Number, String],
+      default: ''
+    },
+    nowData: {
+      type: Object,
+      default: null
+    }
+  },
+  data () {
+    return {
+      isShow: this.openModal, //  是否打开弹框
+      columns: [
+        { title: '序号', dataIndex: 'no', width: 80, align: 'center' },
+        { title: '产品编码', dataIndex: 'code', align: 'center' },
+        { title: '起订量限制', dataIndex: 'nassme', align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '起订数量', dataIndex: 'nasme', align: 'center', customRender: function (text) { return text || '--' } }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        return dealerProductList(Object.assign(parameter, this.queryParam)).then(res => {
+          const 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
+          }
+          return data
+        })
+      },
+      unColumns: [
+        { title: '序号', dataIndex: 'no', width: 80, align: 'center' },
+        { title: '产品编码', dataIndex: 'code', align: 'center' },
+        { title: '起订量限制', dataIndex: 'namsse', align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '起订数量', dataIndex: 'nasme', align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '备注', dataIndex: 'remark', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      unLoadData: parameter => {
+        return dealerProductList(Object.assign(parameter, this.queryParam)).then(res => {
+          const 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
+          }
+          return data
+        })
+      }
+    }
+  },
+  methods: {
+
+  },
+  watch: {
+    //  父页面传过来的弹框状态
+    openModal (newValue, oldValue) {
+      this.isShow = newValue
+    },
+    //  重定义的弹框状态
+    isShow (newValue, oldValue) {
+      if (!newValue) {
+        this.$emit('close')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .chooseImport-modal{
+    .chooseImport-con{
+      .red{
+        color: #f30;
+      }
+      .btn-con{
+        text-align: center;
+        margin: 30px 0 20px;
+        .button-cancel{
+          font-size: 12px;
+        }
+      }
+    }
+  }
+</style>

+ 240 - 0
src/views/promotionRulesManagement/promotionRules/choosePosPriceProductsModal.vue

@@ -0,0 +1,240 @@
+<template>
+  <a-modal
+    centered
+    class="choosePosPriceProducts-modal"
+    :footer="null"
+    :maskClosable="false"
+    title="选择正价产品"
+    v-model="isShow"
+    @cancle="isShow=false"
+    width="80%">
+    <div class="table-operator">
+      <a-button id="choosePosPriceProducts-brand" type="primary" class="button-error" @click="openBrandModal=true">选择产品品牌</a-button>
+      <a-button id="choosePosPriceProducts-type" type="primary" class="button-info" @click="openTypeModal=true">选择产品分类</a-button>
+      <a-button id="choosePosPriceProducts-product" type="primary" class="button-success" @click="openProductsModal=true">选择产品</a-button>
+    </div>
+    <!-- 参与产品 -->
+    <div class="products-con">
+      <!-- 标题栏 -->
+      <div class="products-header">
+        <div class="products-tit">
+          参与产品:<a-button id="choosePosPriceProducts-import" type="primary" class="button-info" @click="openGuideModal=true">导入产品</a-button>
+        </div>
+        <div class="products-operation">
+          <a-row :gutter="15">
+            <a-col :span="8">
+              <a-select
+                id="choosePosPriceProducts-isLimit"
+                placeholder="请选择"
+                v-model="isLimit"
+                style="width: 100%;">
+                <a-select-option v-for="item in limitTypeList" :key="item.val" :value="item.val">{{ item.name }}</a-select-option>
+              </a-select>
+            </a-col>
+            <a-col :span="8">
+              <a-input-number
+                v-if="isLimit==0"
+                id="choosePosPriceProducts-limitQuantity"
+                v-model="limitQuantity"
+                :min="1"
+                :max="999999"
+                :precision="0"
+                style="width: 85%;margin-right: 5px;"
+                placeholder="请输入限制数量(1~999999)"
+                allowClear />
+            </a-col>
+            <a-col :span="8">
+              <a-button id="choosePosPriceProducts-import" type="primary" class="button-info" @click="handlerBulkCopy">批量复制</a-button>
+            </a-col>
+          </a-row>
+        </div>
+      </div>
+      <!-- 表格 -->
+      <a-table
+        class="sTable"
+        ref="table"
+        size="small"
+        :rowKey="(record) => record.id"
+        :columns="columns"
+        :dataSource="loadData"
+        :scroll="{ x: 1200, y: 500 }"
+        :pagination="paginationProps"
+        bordered>
+        <!-- 起订量限制 -->
+        <template slot="putQty" slot-scope="text, record">
+          <a-select
+            id="choosePosPriceProducts-isLimit"
+            placeholder="请选择"
+            v-model="record.isLimit"
+            style="width: 100%;">
+            <a-select-option v-for="item in limitTypeList" :key="item.val" :value="item.val">{{ item.name }}</a-select-option>
+          </a-select>
+          <a-input-number
+            v-if="record.isLimit==0"
+            id="choosePosPriceProducts-limitQuantity"
+            v-model="record.limitQuantity"
+            :precision="0"
+            :min="1"
+            :max="999999"
+            placeholder="请输入限制数量(1~999999)"
+            style="width: 100%;" />
+        </template>
+        <!-- 操作 -->
+        <template slot="action" slot-scope="text, record">
+          <a-button size="small" type="primary" class="button-error" @click="handleDel(record)" id="choosePosPriceProducts-del-btn">删除</a-button>
+        </template>
+      </a-table>
+      <!-- 按钮 -->
+      <div class="btn-con">
+        <a-button
+          type="primary"
+          id="choosePosPriceProducts-submit"
+          size="large"
+          class="button-primary"
+          style="padding: 0 60px;">保存</a-button>
+        <a-button
+          id="choosePosPriceProducts-cancel"
+          size="large"
+          class="button-cancel"
+          @click="isShow=false"
+          style="padding: 0 60px;margin-left: 15px;">取消</a-button>
+      </div>
+    </div>
+    <!-- 选择产品品牌 -->
+    <chooseBrandModal :openModal="openBrandModal" @close="openBrandModal=false" />
+    <!-- 选择产品分类 -->
+    <chooseTypeModal :openModal="openTypeModal" @close="openTypeModal=false" />
+    <!-- 选择产品 -->
+    <chooseProductsModal :openModal="openProductsModal" @close="openProductsModal=false" />
+    <!-- 导入产品 -->
+    <importGuideModal :openModal="openGuideModal" @close="openGuideModal=false" />
+  </a-modal>
+</template>
+
+<script>
+import ChooseProductsModal from './chooseProductsModal.vue'
+import ChooseBrandModal from './chooseBrandModal.vue'
+import ChooseTypeModal from './chooseTypeModal.vue'
+import ImportGuideModal from './importGuideModal.vue'
+export default {
+  name: 'ChoosePosPriceProductsModal',
+  components: { ChooseProductsModal, ChooseBrandModal, ChooseTypeModal, ImportGuideModal },
+  props: {
+    openModal: { //  弹框显示状态
+      type: Boolean,
+      default: false
+    },
+    itemId: {
+      type: [Number, String],
+      default: ''
+    },
+    nowData: {
+      type: Object,
+      default: null
+    }
+  },
+  data () {
+    return {
+      isShow: this.openModal, //  是否打开弹框
+      isLimit: undefined, //  起订量限制 批量
+      limitQuantity: '', //  限制数量
+      limitTypeList: [
+        { name: '按设置数量', val: 0 },
+        { name: '按整箱', val: 1 }
+      ],
+      // 表头
+      columns: [
+        { title: '序号', dataIndex: 'no', width: 80, align: 'center' },
+        { title: '类型', dataIndex: 'origCode', width: 140, align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '类型名称', dataIndex: 'orisgCode', width: 220, align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '产品名称', dataIndex: 'name', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
+        { title: '产品编码', dataIndex: 'code', width: 220, align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '起订量限制', scopedSlots: { customRender: 'putQty' }, width: 220, align: 'center' },
+        { title: '操作', scopedSlots: { customRender: 'action' }, width: 100, align: 'center', fixed: 'right' }
+      ],
+      loadData: [],
+      pageNo: 1, //  分页页码
+      pageSize: 10, //  分页 每页多少条
+      paginationProps: {
+        showSizeChanger: true, //  是否可以改变 pageSize
+        total: 0, //  分页总条数
+        current: 1,
+        onShowSizeChange: (current, pageSize) => this.changePageSize(current, pageSize),
+        onChange: (current) => this.changePage(current)
+      },
+      openBrandModal: false, //  选择产品品牌
+      openTypeModal: false, //  选择产品分类
+      openProductsModal: false, //  选择产品
+      openGuideModal: false //  导入产品引导
+    }
+  },
+  methods: {
+    // 批量复制
+    handlerBulkCopy () {
+      const _this = this
+      this.$confirm({
+        title: '提示',
+        content: '批量复制会覆盖原单独设置的规则,确定要批量复制吗?',
+        centered: true,
+        onOk () {
+
+        }
+      })
+    },
+    // 删除
+    handleDel (record) {
+
+    },
+    //  分页  一页多少条change
+    changePageSize (current, pageSize) {
+      this.pageNo = current
+      this.pageSize = pageSize
+      this.getDealerProductList()
+    },
+    //  分页 页码change
+    changePage (current) {
+      this.pageNo = current
+      this.getDealerProductList()
+    }
+  },
+  watch: {
+    //  父页面传过来的弹框状态
+    openModal (newValue, oldValue) {
+      this.isShow = newValue
+    },
+    //  重定义的弹框状态
+    isShow (newValue, oldValue) {
+      if (!newValue) {
+        this.$emit('close')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .choosePosPriceProducts-modal{
+    // 参与产品
+    .products-con{
+      .products-header{
+        padding: 10px 15px;
+        color: rgba(0,0,0,.85);
+        background-color: #fafafa;
+        border-radius: 6px;
+        margin: 10px 0;
+        display: flex;
+        justify-content: space-between;
+        .products-operation{
+          width: 40%;
+        }
+      }
+      .btn-con{
+        text-align: center;
+        margin: 30px 0 20px;
+        .button-cancel{
+          font-size: 12px;
+        }
+      }
+    }
+  }
+</style>

+ 176 - 9
src/views/promotionRulesManagement/promotionRules/chooseProductsModal.vue

@@ -1,24 +1,100 @@
 <template>
   <a-modal
     centered
-    class="marketingDivisionSetEdit-modal"
+    class="chooseProducts-modal"
     :footer="null"
     :maskClosable="false"
-    title="选择正价产品"
+    title="选择产品"
     v-model="isShow"
     @cancle="isShow=false"
     width="80%">
-    <div class="table-operator">
-      <a-button id="chooseProducts-brand" type="primary" class="button-error" @click="">选择产品品牌</a-button>
-      <a-button id="chooseProducts-type" type="primary" class="button-info" @click="">选择产品分类</a-button>
-      <a-button id="chooseProducts-product" type="primary" class="button-success" @click="">选择产品</a-button>
+    <div class="products-con">
+      <div>
+        <!-- 搜索条件 -->
+        <div class="table-page-search-wrapper">
+          <a-form layout="inline" @keyup.enter.native="$refs.table.refresh(true)">
+            <a-row :gutter="15">
+              <a-col :md="6" :sm="24">
+                <a-form-item label="产品编码">
+                  <a-input id="productInfoList-code" v-model.trim="queryParam.code" allowClear placeholder="请输入产品编码"/>
+                </a-form-item>
+              </a-col>
+              <a-col :md="6" :sm="24">
+                <a-form-item label="产品品牌">
+                  <a-select
+                    placeholder="请选择产品品牌"
+                    id="productInfoList-productBrandSn"
+                    allowClear
+                    v-model="queryParam.productBrandSn"
+                    :showSearch="true"
+                    option-filter-prop="children"
+                    :filter-option="filterOption">
+                    <a-select-option v-for="item in productBrandList" :key="item.brandSn" :value="item.brandSn">{{ item.brandName }}</a-select-option>
+                  </a-select>
+                </a-form-item>
+              </a-col>
+              <a-col :md="6" :sm="24">
+                <a-form-item label="产品分类">
+                  <a-cascader
+                    @change="changeProductType"
+                    change-on-select
+                    v-model="productType"
+                    expand-trigger="hover"
+                    :options="productTypeList"
+                    :fieldNames="{ label: 'productTypeName', value: 'productTypeSn', children: 'children' }"
+                    id="productInfoList-productType"
+                    placeholder="请选择产品分类"
+                    allowClear />
+                </a-form-item>
+              </a-col>
+              <a-col :md="6" :sm="24">
+                <a-button style="margin-bottom: 18px;" type="primary" @click="$refs.table.refresh(true)" :disabled="disabled" id="productInfoList-refresh">查询</a-button>
+                <a-button style="margin: 0 0 18px 8px" @click="resetSearchForm" :disabled="disabled" id="productInfoList-reset">重置</a-button>
+              </a-col>
+            </a-row>
+          </a-form>
+        </div>
+        <!-- 列表 -->
+        <s-table
+          class="sTable"
+          ref="table"
+          size="small"
+          :rowKey="(record) => record.id"
+          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+          :columns="columns"
+          :data="loadData"
+          :scroll="{ y: 400 }"
+          :showPagination="false"
+          bordered>
+        </s-table>
+      </div>
+      <!-- 按钮 -->
+      <div class="btn-con">
+        <a-button
+          type="primary"
+          id="chooseProducts-submit"
+          size="large"
+          class="button-primary"
+          style="padding: 0 60px;">保存</a-button>
+        <a-button
+          id="chooseProducts-cancel"
+          size="large"
+          class="button-cancel"
+          @click="isShow=false"
+          style="padding: 0 60px;margin-left: 15px;">取消</a-button>
+      </div>
     </div>
   </a-modal>
 </template>
 
 <script>
+import { STable } from '@/components'
+import { dealerProductList } from '@/api/dealerProduct'
+import { dealerProductBrandQuery } from '@/api/dealerProductBrand'
+import { dealerProductTypeList } from '@/api/dealerProductType'
 export default {
   name: 'ChooseProductsModal',
+  components: { STable },
   props: {
     openModal: { //  弹框显示状态
       type: Boolean,
@@ -35,11 +111,88 @@ export default {
   },
   data () {
     return {
-      isShow: this.openModal //  是否打开弹框
+      isShow: this.openModal, //  是否打开弹框
+      queryParam: { //  查询条件
+        code: '', //  产品编码
+        productBrandSn: undefined, //  产品品牌
+        productTypeSn1: '', //  产品一级分类
+        productTypeSn2: '', //  产品二级分类
+        productTypeSn3: '' //  产品三级分类
+      },
+      disabled: false, //  查询、重置按钮是否可操作
+      columns: [
+        { title: '序号', dataIndex: 'no', width: 80, align: 'center' },
+        { title: '产品编码', dataIndex: 'code', align: 'center' },
+        { title: '产品名称', dataIndex: 'name', align: 'center', ellipsis: true, customRender: function (text) { return text || '--' } }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        this.disabled = true
+        return dealerProductList(Object.assign(parameter, this.queryParam)).then(res => {
+          const 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
+          return data
+        })
+      },
+      productType: [],
+      productBrandList: [], //  品牌下拉数据
+      productTypeList: [], //  分类下拉数据
+      selectedRowKeys: [],
+      selectedRows: []
     }
   },
   methods: {
-
+    //  重置
+    resetSearchForm () {
+      this.queryParam.code = ''
+      this.queryParam.productBrandSn = undefined
+      this.queryParam.productTypeSn1 = ''
+      this.queryParam.productTypeSn2 = ''
+      this.queryParam.productTypeSn3 = ''
+      this.productType = []
+      this.$refs.table.refresh(true)
+    },
+    onSelectChange (selectedRowKeys, selectedRows) {
+      console.log('selectedRowKeys changed: ', selectedRowKeys, selectedRows)
+      this.selectedRowKeys = selectedRowKeys
+      this.selectedRows = selectedRows
+    },
+    //  产品分类  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] : ''
+    },
+    filterOption (input, option) {
+      console.log(option.componentOptions.children[0].text, 'option')
+      return (
+        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      )
+    },
+    //  产品品牌  列表
+    getProductBrand () {
+      dealerProductBrandQuery({ 'sysFlag': '0' }).then(res => {
+        if (res.status == 200) {
+          this.productBrandList = res.data
+        } else {
+          this.productBrandList = []
+        }
+      })
+    },
+    //  产品分类  列表
+    getProductType () {
+      dealerProductTypeList({ 'sysFlag': '0' }).then(res => {
+        if (res.status == 200) {
+          this.productTypeList = res.data
+        } else {
+          this.productTypeList = []
+        }
+      })
+    }
   },
   watch: {
     //  父页面传过来的弹框状态
@@ -50,11 +203,25 @@ export default {
     isShow (newValue, oldValue) {
       if (!newValue) {
         this.$emit('close')
+      } else {
+        this.getProductBrand()
+        this.getProductType()
       }
     }
   }
 }
 </script>
 
-<style>
+<style lang="less" scoped>
+  .chooseProducts-modal{
+    .products-con{
+      .btn-con{
+        text-align: center;
+        margin: 30px 0 20px;
+        .button-cancel{
+          font-size: 12px;
+        }
+      }
+    }
+  }
 </style>

+ 148 - 0
src/views/promotionRulesManagement/promotionRules/chooseTypeModal.vue

@@ -0,0 +1,148 @@
+<template>
+  <a-modal
+    centered
+    class="chooseType-modal"
+    :footer="null"
+    :maskClosable="false"
+    title="选择产品分类"
+    v-model="isShow"
+    @cancle="isShow=false"
+    width="50%">
+    <div class="chooseType-con">
+      <a-tree
+        checkable
+        @check="onCheck"
+        @expand="onExpand"
+        :expandedKeys="expandedKeys"
+        :autoExpandParent="autoExpandParent"
+        v-model="checkedKeys"
+        :treeData="treeData"
+      />
+      <!-- 按钮 -->
+      <div class="btn-con">
+        <a-button
+          type="primary"
+          id="chooseType-submit"
+          size="large"
+          class="button-primary"
+          style="padding: 0 60px;">保存</a-button>
+        <a-button
+          id="chooseType-cancel"
+          size="large"
+          class="button-cancel"
+          @click="isShow=false"
+          style="padding: 0 60px;margin-left: 15px;">取消</a-button>
+      </div>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+export default {
+  name: 'ChooseTypeModal',
+  props: {
+    openModal: { //  弹框显示状态
+      type: Boolean,
+      default: false
+    },
+    itemId: {
+      type: [Number, String],
+      default: ''
+    },
+    nowData: {
+      type: Object,
+      default: null
+    }
+  },
+  data () {
+    return {
+      isShow: this.openModal, //  是否打开弹框
+      expandedKeys: ['0-0-0', '0-0-1'],
+      autoExpandParent: true,
+      checkedKeys: ['0-0-0'],
+      selectedKeys: [],
+      treeData: [
+        {
+          title: '0-0',
+          key: '0-0',
+          children: [
+            {
+              title: '0-0-0',
+              key: '0-0-0',
+              children: [
+                { title: '0-0-0-0', key: '0-0-0-0' },
+                { title: '0-0-0-1', key: '0-0-0-1' },
+                { title: '0-0-0-2', key: '0-0-0-2' }
+              ]
+            },
+            {
+              title: '0-0-1',
+              key: '0-0-1',
+              children: [
+                { title: '0-0-1-0', key: '0-0-1-0' },
+                { title: '0-0-1-1', key: '0-0-1-1' },
+                { title: '0-0-1-2', key: '0-0-1-2' }
+              ]
+            },
+            {
+              title: '0-0-2',
+              key: '0-0-2'
+            }
+          ]
+        },
+        {
+          title: '0-1',
+          key: '0-1',
+          children: [
+            { title: '0-1-0-0', key: '0-1-0-0' },
+            { title: '0-1-0-1', key: '0-1-0-1' },
+            { title: '0-1-0-2', key: '0-1-0-2' }
+          ]
+        },
+        {
+          title: '0-2',
+          key: '0-2'
+        }
+      ]
+    }
+  },
+  methods: {
+    onExpand (expandedKeys) {
+      console.log('onExpand', expandedKeys)
+      this.expandedKeys = expandedKeys
+      this.autoExpandParent = false
+    },
+    onCheck (checkedKeys, info) {
+      console.log('onCheck', checkedKeys, info)
+      // this.checkedData = [...checkedKeys, ...info.halfCheckedKeys]
+      this.checkedKeys = checkedKeys
+    }
+  },
+  watch: {
+    //  父页面传过来的弹框状态
+    openModal (newValue, oldValue) {
+      this.isShow = newValue
+    },
+    //  重定义的弹框状态
+    isShow (newValue, oldValue) {
+      if (!newValue) {
+        this.$emit('close')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .chooseType-modal{
+    .chooseType-con{
+      .btn-con{
+        text-align: center;
+        margin: 30px 0 20px;
+        .button-cancel{
+          font-size: 12px;
+        }
+      }
+    }
+  }
+</style>

+ 3 - 3
src/views/promotionRulesManagement/promotionRules/edit.vue

@@ -232,15 +232,15 @@
       </div>
     </a-affix>
     <!-- 选择正价产品 -->
-    <chooseProductsModal :openModal="openModal" @click="openModal=false" />
+    <choosePosPriceProductsModal :openModal="openModal" @close="openModal=false" />
   </div>
 </template>
 
 <script>
 import moment from 'moment'
-import ChooseProductsModal from './chooseProductsModal.vue'
+import ChoosePosPriceProductsModal from './choosePosPriceProductsModal.vue'
 export default {
-  components: { ChooseProductsModal },
+  components: { ChoosePosPriceProductsModal },
   data () {
     return {
       formItemLayout: {

+ 144 - 0
src/views/promotionRulesManagement/promotionRules/importGuideModal.vue

@@ -0,0 +1,144 @@
+<template>
+  <a-modal
+    centered
+    class="importGuide-modal"
+    :footer="null"
+    :maskClosable="false"
+    title="导入"
+    v-model="isShow"
+    @cancle="isShow=false"
+    :width="750">
+    <div class="importGuide-con">
+      <div class="explain-con">
+        <div class="explain-item">
+          <div class="explain-tit">
+            <span>1</span>准备导入
+          </div>
+          <p>所有允许导入的数据字段请参考模板,数据字段不符合规则,整条不予以导入。</p>
+          <ul>
+            <li>1) “产品编码”字段为必填项。</li>
+            <li>2) “起订量限制“为选项,只可选择”按整箱‘或者“按设置数量”,选择“按设置数量”时,“起订数量”为必填项。</li>
+          </ul>
+          <a-button type="link" icon="download">下载导入模板</a-button>
+        </div>
+        <div class="explain-item">
+          <div class="explain-tit">
+            <span>2</span>上传数据文件
+          </div>
+          <p>目前支持的文件类型*.xls,*.xlsx.</p>
+          <a-button type="primary" class="button-info" icon="plus-circle">添加文件</a-button>
+        </div>
+      </div>
+      <!-- 按钮 -->
+      <div class="btn-con">
+        <a-button
+          type="primary"
+          id="importGuide-nextStep"
+          size="large"
+          class="button-primary"
+          @click="handlerNextStep"
+          style="padding: 0 60px;">下一步</a-button>
+        <a-button
+          id="importGuide-cancel"
+          size="large"
+          class="button-cancel"
+          @click="isShow=false"
+          style="padding: 0 60px;margin-left: 15px;">取消</a-button>
+      </div>
+    </div>
+    <!-- 导入 -->
+    <chooseImportModal :openModal="openImportModal" @close="openImportModal=false" />
+  </a-modal>
+</template>
+
+<script>
+import ChooseImportModal from './chooseImportModal.vue'
+export default {
+  name: 'ImportGuideModal',
+  components: { ChooseImportModal },
+  props: {
+    openModal: { //  弹框显示状态
+      type: Boolean,
+      default: false
+    },
+    itemId: {
+      type: [Number, String],
+      default: ''
+    },
+    nowData: {
+      type: Object,
+      default: null
+    }
+  },
+  data () {
+    return {
+      isShow: this.openModal, //  是否打开弹框
+      openImportModal: false //  导入
+    }
+  },
+  methods: {
+    // 下一步
+    handlerNextStep () {
+      this.openImportModal = true
+      this.$emit('close')
+    }
+  },
+  watch: {
+    //  父页面传过来的弹框状态
+    openModal (newValue, oldValue) {
+      this.isShow = newValue
+    },
+    //  重定义的弹框状态
+    isShow (newValue, oldValue) {
+      if (!newValue) {
+        this.$emit('close')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .importGuide-modal{
+    .importGuide-con{
+      .explain-con{
+        .explain-item{
+          margin-bottom: 15px;
+          .explain-tit{
+            font-weight: bold;
+            span{
+              display: inline-block;
+              width: 18px;
+              height: 18px;
+              line-height: 16px;
+              text-align: center;
+              margin-right: 5px;
+              border-radius: 50%;
+              border: 1px solid rgba(0, 0, 0, 0.3);
+            }
+          }
+          p{
+            margin: 8px 0;
+            padding-left: 23px;
+          }
+          ul{
+            list-style: none;
+            padding: 0;
+            padding-left: 23px;
+            margin: 0;
+            li{
+              line-height: 26px;
+            }
+          }
+        }
+      }
+      .btn-con{
+        text-align: center;
+        margin: 30px 0 20px;
+        .button-cancel{
+          font-size: 12px;
+        }
+      }
+    }
+  }
+</style>