hotel-saas-tenant-frontend/src/views/settings/components/roomModules/roomNumSettings/roomImagesForm.vue

<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
  <a-form-model ref="form" :model="model">
            <a-form-model-item label="房间大图" >
                <j-image-upload class="avatar-uploader" text="上传" v-model="model.cover" ></j-image-upload>
              </a-form-model-item>
              <a-form-model-item label="图片" >
                <j-image-upload class="avatar-uploader" text="上传" v-model="model.images" :isMultiple="true"></j-image-upload>
              </a-form-model-item>
        </a-form-model>
  </j-modal>
</template>

<script>
import { roomEdit } from '@/api/roomBuildingApi'
export default {
    data() {
        return {
            title: '房间图片',
            width: '40%',
            visible: false,
            model: {
                id: null,
                cover: null,
                images: null,
            }
        }
    },
    methods: {
        // 设置模型图片数据
        setModel(data) {
            this.model = JSON.parse(JSON.stringify(data))
            this.visible = true
        },
        // save
        handleOk() {
            roomEdit(this.model).then(res => {
                if(res.code == 200) {
                    this.$message.success('保存成功')
                    this.$emit("saveOk")
                    this.visible = false
                }
            }).catch(_ => {
                this.$message.success('保存失败')
            })
        },
        // 取消
        handleCancel() {
            this.visible = false
        }
    }

}
</script>

<style>

</style>