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

<template>
<a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
        <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
            <a-row>
                <a-col :span="12" type='flex' justify="start">
                    <a-form-model-item label="app是否上架" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
                        <a-switch :checked="model.appState" @change="switchState" ></a-switch>
                    </a-form-model-item>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="12" type='flex' justify="start">
                    <a-form-model-item style="width:100%" label="能否储值卡" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
                        <a-switch :checked="model.canStoreCard" @change="storeChange" ></a-switch>
                    </a-form-model-item>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="12">
                    <a-form-model-item label="能否积分支付" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
                        <a-switch :checked="model.canIntegralPay" @change="integralPayChange" ></a-switch>
                    </a-form-model-item>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="12">
                    <a-form-model-item label="积分支付价格" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
                        <a-input-number v-model="model.integralPrice" :min="0" />
                    </a-form-model-item>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="24">
                    <a-form-model-item label="描述" :labelCol="{span:'2',offset:'0'}" :wrapperCol="wrapperCol" prop="">
                        <j-editor v-model="model.remark" />
                    </a-form-model-item>
                </a-col>
            </a-row>
            <a-button @click="submitForm">确认</a-button>
        </a-form-model>

    </j-form-container>
</a-spin>
</template>

<script>
import { getRoomPlans, getSelectList } from "@/api/api";
import { httpAction, getAction } from "@/api/manage";
import { validateDuplicateValue } from "@/utils/util";
import { getUnit } from '@/api/good'

export default {
    name: "BusMarketMemberForm",
    inject:['treeData', 'dataSource'],
    props: {
        disabled: {
            type: Boolean,
            default: false,
            required: false,
        },
    },
    data() {
        return {
            unitData:[],
            options: [{
                label: '张三',
                value: '1'
            }],
            model: {
                id: "",
                hotelId: 0,
                goodType: '',
                goodUnit: '',
                barCode: '',
                bid:null,
                name:'',
                sellingPrice:'',
                purchases:null,
                salesVolume:null,
                inventory:null,
                appState:false,
                canStoreCard:false,
                canIntegralPay:false
            },
            labelCol: {
                xs: {
                    span: 24
                },
                sm: {
                    span: 5
                },
            },
            wrapperCol: {
                xs: {
                    span: 24
                },
                sm: {
                    span: 16
                },
            },
            confirmLoading: false,
            validatorRules: {
                name: [{
                    required: true,
                    message: "请输入房型!"
                }],
                marketPrice: [{
                    required: true,
                    message: "请填写门市价!"
                }],
                canLivePersonNum: [{
                    required: true,
                    message: "请填写可住人数!"
                }],
                breakfastNum: [{
                    required: true,
                    message: "请填写早餐数量!"
                }],
                lunchNum: [{
                    required: true,
                    message: "请填写中餐数量!"
                }],
                dinnerNum: [{
                    required: true,
                    message: "请填写晚餐数量!"
                }],
            },
            url: {
                // add: "/rooms/cesRoomLayout/save",
                add:'/rooms/cesGoods/create',
                // edit: "/rooms/cesRoomLayout/modify",
                edit:'/rooms/cesGoods/modify',
                delete:'/rooms/cesGoods/delete'
                // queryById: "/rooms/cesRoomLayout/queryById",
            },
            iconChooseVisible: false,
            roomPlans: [],
            members: [],
            arr:[]
        };
    },
    computed: {
        formDisabled() {
            return this.disabled;
        },
    },
    created() {
        var _info = JSON.parse(localStorage.getItem("storeInfo"));
        if (_info) {
            this.model.hotelId = _info.id;
            this.initData();
            this.getData()
        }
        console.log(111111111111,this.treeData);
        this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
        onChange(e) {
            console.log(e);
            this.model.goodType = e[e.length-1]
            console.log(this.model.goodType);
        },
        handleChange(e, options) {
            console.log(e);
            this.model.goodUnit = e
        },
        initData() {
            getRoomPlans(this.model.hotelId, null).then((res) => {
                if (res.success) {
                    this.roomPlans = res.result;
                }
            });

        },
        selectIcons() {
            this.iconChooseVisible = true;
        },
        handleIconCancel() {
            this.iconChooseVisible = false;
        },
        handleIconChoose(value) {
            console.log(value);
            this.model.icon = value;
            this.iconChooseVisible = false;
        },
        add() {
            this.edit(this.modelDefault);
        },
        //筛选分类数组
        filterType(array, id){
            let arr = []
            array.forEach((item, index)=>{
                if (item.id==id) {
                    this.arr[0] = item.parentId
                    this.arr[1] = item.id
                    return
                }else if(Array.isArray(item.children) && item.children){
                    this.filterType(item.children, id)
                }
            })
        },
        edit(record) {
            console.log(22222222,record);
            // this.model = Object.assign({}, record);
            this.model = JSON.parse(JSON.stringify(record))
            
            console.log(this.filterType(this.treeData, record.goodType));
            console.log(this.model);
            this.visible = true;
            // getSelectList({
            //     id: this.model.id
            // }).then((res) => {
            //     if (res.success) {
            //         this.members = res.result;
            //     }
            // });
        },
        submitForm() {
            const that = this;
            // 触发表单验证
            debugger
            this.$refs.form.validate((valid) => {
                if (valid) {
                    that.confirmLoading = true;
                    let httpurl = "";
                    let method = "";
                    if (!this.model.id) {
                        httpurl += this.url.add;
                        method = "post";
                    } else {
                        httpurl += this.url.edit;
                        method = "put";
                    }
                    if (this.model.payFlag == 0) {
                        this.model.payAmount = 0;
                    }
                    httpAction(httpurl, this.model, method)
                        .then((res) => {
                            if (res.success) {
                                that.$message.success(res.message);
                                that.$emit("ok");
                            } else {
                                that.$message.warning(res.message);
                            }
                        })
                        .finally(() => {
                            that.confirmLoading = false;
                        });
                }
            });
        },
        getData(){
            getUnit({pageNo:1,pageSize:1000}).then(res=>{
                console.log(res);
                if (res.code && res.code==200) {
                    this.unitData = res.result.records
                }
            })
        },
        switchState(e){
            console.log('这是滑动按钮触发',e);
            this.model.appState = e
        },
        storeChange(e){
            console.log(e);
            this.model.canStoreCard = e
        },
        integralPayChange(e){
            console.log(e);
            this.model.canIntegralPay = e
        }
    },
};
</script>

<style scoped>
.avatar-uploader>.ant-upload {
    width: 104px;
    height: 104px;
}
</style>