123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117 |
- <template>
- <a-drawer
- :zIndex="zIndex"
- :title="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>
- <!-- 查询配件列表 -->
- <!-- 正常产品 -->
- <queryPart v-if="cptype==0" ref="partQuery" :newLoading="isInster" @add="insterProduct"></queryPart>
- <!-- 活动产品 -->
- <activeQueryPart v-if="cptype==1" ref="partQuery" :newLoading="isInster" @add="insterProduct"></activeQueryPart>
- <!-- 累计产品 -->
- <cumulativeProduct v-if="cptype==2" ref="partQuery" :newLoading="isInster" @add="insterProduct"></cumulativeProduct>
- </div>
- </div>
- </a-spin>
- </a-drawer>
- </template>
- <script>
- import queryPart from './queryPart.vue'
- import activeQueryPart from './activeQueryPart.vue'
- import cumulativeProduct from './cumulativeProduct.vue'
- export default {
- name: 'ChooseProductsModal',
- components: { queryPart, activeQueryPart, cumulativeProduct },
- props: {
- openModal: { // 弹框显示状态
- type: Boolean,
- default: false
- },
- chooseData: { // 已选数据
- type: Array,
- default: () => {
- return []
- }
- },
- isInster: { // 弹框显示状态
- type: Boolean,
- default: false
- },
- zIndex: { // 层级
- type: [String, Number],
- default: 1000
- }
- },
- data () {
- return {
- spinning: false,
- cptype: 3, // 组件类型
- isShow: this.openModal, // 是否打开弹框
- orderData: null, // 订单数据
- promoData: null, // 促销活动数据
- title: '选择产品'
- }
- },
- methods: {
- // 关闭弹框
- onClose () {
- this.$emit('close')
- },
- // 添加产品,
- // row 产品信息, promoProductClz 促销产品类型, 0 正常产品
- insterProduct (row, promoProductClz) {
- this.$emit('addProduct', row, this.promoData, promoProductClz, this.cptype)
- },
- // 初始化数据,
- // data 销售单详情数据, promo 促销活动规则数据, type 组件类型
- pageInit (data, promo, type) {
- this.cptype = type
- this.orderData = data
- this.promoData = promo
- this.title = type == 2 ? '累计产品' : '选择产品'
- this.$nextTick(() => {
- this.$refs.partQuery.pageInit(data, promo)
- })
- }
- },
- watch: {
- // 父页面传过来的弹框状态
- openModal (newValue, oldValue) {
- this.isShow = newValue
- },
- // 重定义的弹框状态
- isShow (newValue, oldValue) {
- if (!newValue) {
- this.$emit('close', this.cptype)
- this.cptype = 3
- }
- }
- }
- }
- </script>
- <style lang="less" scoped>
- .chooseProducts-modal{
- .products-con{
- .btn-con{
- text-align: center;
- margin: 30px 0 20px;
- .button-cancel{
- font-size: 12px;
- }
- }
- }
- }
- </style>
|