hotel-saas-tenant-frontend/src/views/settings/components/roomModules/moreSet/moreModal.vue

<template>
<!-- <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="handleCancel"
    cancelText="关闭">
    <bus-market-member-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit"></bus-market-member-form>
  </j-modal> -->
<j-modal destroyOnClose title="详细设置" :width="'50%'" :footer="null" :visible="visible" :okButtonProps="{ class:{'jee-hidden': disableSubmit} }" @ok="handleOk" @cancel="handleCancel">
    <a-card style="width:100%" :tab-list="tabListNoTitle" :active-tab-key="noTitleKey" @tabChange="key => onTabChange(key, 'noTitleKey')">
        <BusMarketMemberForm ref="realForm" @ok="submitCallback" :disabled="disableSubmit" v-show="noTitleKey=='commodity'" />
        <GoodImg @saveOk="handleCancel" ref="goodImg" v-show="noTitleKey=='goodImg'" />
        <FoodSet v-show="noTitleKey=='foodSet'" />
    </a-card>
</j-modal>
</template>

<script>
const tabListNoTitle=[
        {
          key: 'commodity',
          tab: '商品小程序设置',
        },
        {
          key: 'goodImg',
          tab: '商品图片',
        },
        {
          key: 'foodSet',
          tab: '餐饮设置',
        }
      ]
import BusMarketMemberForm from './commodity.vue'
// import GoodImg from './goodImg.vue'
import GoodImg from '../roomLayoutDetailForm/roomLayoutImage.vue'
import FoodSet from './foodSet.vue'
import { computed } from 'vue'
export default {
    name: 'BusMarketMemberModal',
    components: {
        BusMarketMemberForm,
        GoodImg,
        FoodSet
    },
    data() {
        return {
            title: '',
            width: 800,
            visible: false,
            disableSubmit: false,
            tabListNoTitle,
            key: 'tab1',
            noTitleKey: 'commodity',
            model:{}
        }
    },
    provide(){
        return{
            modelData:computed(()=> this.model)
        }
    },
    methods: {
        add() {
            this.visible = true
            this.$nextTick(() => {
                this.$refs.realForm.add();
            })
        },
        edit(record) {
            console.log(record);
            this.visible = true
            this.$nextTick(() => {
                this.model = record
                this.$refs.realForm.edit(record);
                console.log('refs.realForm',this.$refs.realForm);
            })
        },
        close() {
            this.$emit('close');
            this.visible = false;
        },
        handleOk() {
            this.$refs.realForm.submitForm();
        },
        submitCallback() {
            this.$emit('ok');
            this.visible = false;
        },
        handleCancel() {
            this.close()
        },
        //更多设置切换卡片
        onTabChange(key, type) {
            console.log(key, type);
            this[type] = key;
            if (key = 'goodImg') {
                this.model.url = true
                this.$refs.goodImg.setData(this.model)
            }
        },
    }
}
</script>