duoji-frontend/src/views/cameraManage/model.vue

<template>
    <div v-if="isShow">
        <a-modal
            v-model="isShow"
            :title="title"
            :closable="closable"
            @ok="handleOk"
            @cancel="handleCancel"
            ok-text="确认"
            cancel-text="取消"
            class="p-model"
        >
            <a-form
                :form="form"
                :wrapper-col="formItemAcrossLayout.wrapperCol"
            >
                <a-form-item label="球机名称" :label-col="formItemVerticalLayout.labelCol">
                    <a-input
                        v-decorator="['name', { rules: [{ required: true, message: '请输入球机名称!' }] }]"
                    />
                </a-form-item>
                <a-form-item label="球机IP" :label-col="formItemVerticalLayout.labelCol">
                    <a-select
                        v-decorator="[
                           'ip',
                           { rules: [{ required: true, message: '请选择球机IP!' }] },
                        ]"
                        placeholder="选择球机IP"
                    >
                        <a-select-option value="192.168.11.6">
                            192.168.11.6
                        </a-select-option>
                        <a-select-option value="192.168.16.4">
                            192.168.16.4
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="rtsp流地址" :label-col="formItemVerticalLayout.labelCol">
                    <a-input
                        v-decorator="['rtsp', { rules: [{ required: true, message: '请输入rtsp流地址!' }] }]"
                    />
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>
<script>
var formItemAcrossLayout = {  //formItemAcrossLayout当表单内item横向排列时用
    labelCol: { span: 8 },    //lable长度
    wrapperCol: { span: 14 },  //input长度
};
var formItemVerticalLayout = { //formItemVerticalLayout当表单内item纵向排列时用
    labelCol: { span: 4 },
    wrapperCol: { span: 8, offset: 4 },
};
export default {
    props:[ 'visible', 'modelTitle', 'modelData'],
    watch: {
        //监听并接收父组件的visible并赋值给isShow（子组件接收父组件props传过来的值时不能起一样的类名，会报重复定义的错）
        visible: function(newVal){
            this.isShow = newVal;  //newVal即是visible
            // newVal && this.showConfirm(); //newVal存在的话执行showConfirm函数
        },
        modelTitle: function(newVal){
            this.title = newVal;
        },
        modelData: function(newVal){
            // console.log(newVal)
            if(newVal.id){
                this.mdata=newVal
                this.id = newVal.id
                // console.log('触发了watch，重新赋值')
                this.$nextTick(()=>{   //this.$nextTick解决不能在表单渲染之前赋值的报错问题
                    this.form.setFieldsValue({  //setFieldsValue 表示对form表单重新设置值
                        name:newVal.name,
                        ip:newVal.ip,
                        rtsp:newVal.rtsp
                    })
                })
            }

        },
    },
    data() {
        return {
            isShow:false,
            title:'',
            closable:false,//取消model模态框右上角的X号
            formItemAcrossLayout,
            formItemVerticalLayout,
            confirmLoading: false,
            form: this.$form.createForm(this, { name: 'dynamic_rule' }),
            id:'',
            mdata:[]
        };
    },
    mounted() {
        console.log('mounted执行了')
    },
    methods: {
        handleOk() {
            this.confirmLoading = true;
            setTimeout(() => {
                this.form.validateFields((err, values) => {
                    console.log(values)
                    if (!err) {
                        console.log(this.title)
                        if(this.title=='新增球机'){
                            this.$api.httpApi.addCamera({
                                data:values
                            }).then(res => {
                                if(res.code==200){
                                    this.$emit('sure',false)
                                    this.$message.success('新增球机成功');
                                }
                            });
                        }else if(this.title=='编辑球机'){
                            values.id = this.id
                            this.$api.httpApi.editCamera({
                                data:values
                            }).then(res => {
                                if(res.code==200){
                                    this.$emit('sure',false)
                                    this.$message.success('编辑球机成功');
                                }
                            });
                        }
                    }
                });
                this.confirmLoading = false;
            }, 500);
        },
        handleCancel() {
            console.log('Clicked cancel button');
            console.log(this.title);
            this.$emit('close',false,{})
        },
    },
};
</script>
<style lang="scss" scoped>
    .p-model{
        .across-layout{
            display: flex;
        }
        .ant-divider-horizontal{
            margin:6px 0;
        }
    }
</style>