123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105 |
- <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>
- <!-- 查询配件列表 -->
- <queryPart v-if="cptype==0" ref="partQuery" :newLoading="isInster" @add="insterProduct"></queryPart>
- <activeQueryPart v-if="cptype==1" ref="partQuery" :newLoading="isInster" @add="insterProduct"></activeQueryPart>
- </div>
- </div>
- </a-spin>
- </a-drawer>
- </template>
- <script>
- import queryPart from './queryPart.vue'
- import activeQueryPart from './activeQueryPart.vue'
- export default {
- name: 'ChooseProductsModal',
- components: { queryPart, activeQueryPart },
- 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
- }
- },
-
- methods: {
- onClose () {
- this.$emit('close')
- },
- // 添加产品
- insterProduct (row, promotionFlag, promoProductClz) {
- this.$emit('addProduct', row, promotionFlag, promoProductClz)
- },
- pageInit(data, promo, type){
- console.log(data, promo, type)
- this.cptype = type
- this.orderData = data
- 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>
|