duoji-frontend/src/views/roadwayManage/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"
            >
                <div class="across-layout">
                    <a-form-item label="巷道名称" :label-col="formItemAcrossLayout.labelCol">
                        <a-input
                            v-decorator="['name', { rules: [{ required: true, message: '请输入巷道名称!' }] }]"
                        />
                    </a-form-item>
                    <a-form-item label="PLC-ID" :label-col="formItemAcrossLayout.labelCol">
                        <a-input
                            v-decorator="['plcPort', { rules: [{ required: true, message: '请输入PLC-ID!' }] }]"
                        />
                    </a-form-item>
                </div>
                <div class="across-layout">
                    <a-form-item label="PLC IP地址" :label-col="formItemAcrossLayout.labelCol">
                        <a-input
                            v-decorator="['plcIp', { rules: [{ required: true, message: '请输入PLC IP地址!' }] }]"
                        />
                    </a-form-item>
                    <a-form-item label="端口" :label-col="formItemAcrossLayout.labelCol">
                        <a-input
                            v-decorator="['plcId', { rules: [{ required: true, message: '请输入端口!' }] }]"
                        />
                    </a-form-item>
                </div>
                <a-divider></a-divider>

                <div class="leftType">
                    <h3>左货架</h3>
                    <a-form-item label="类型" :label-col="formItemVerticalLayout.labelCol">
                        <a-select
                            v-decorator="[
                               'leftType',
                               { rules: [{ required: true, message: '请选择类型!' }] },
                            ]"
                            placeholder="选择类型"
                            @change="handleSelectChangeLeft"
                        >
                            <a-select-option value="0">
                                单伸
                            </a-select-option>
                            <a-select-option value="1">
                                双伸
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                    <div class="across-layout">
                        <a-form-item label="货架规格" :label-col="{ span:7}">
                            <a-input
                                v-decorator="['leftRow', { rules: [{ required: true, message: '请输入行数!' }] }]"
                                suffix="行"
                            />
                        </a-form-item>
                        <a-form-item label="" :wrapper-col="{span:20}">
                            <a-input
                                v-decorator="['leftColumn', { rules: [{ required: true, message: '请输入列数!' }] }]"
                                suffix="列"
                            />
                        </a-form-item>
                    </div>
                    <div class="across-layout" v-if="leftType =='0'">
                        <a-form-item label="货架号" :label-col="formItemAcrossLayout.labelCol">
                            <a-input
                                v-decorator="['leftShelveId', { rules: [{ required: true, message: '请输入货架号!' }] }]"
                            />
                        </a-form-item>
                    </div>
                    <div class="across-layout" v-if="leftType =='1'">
                        <a-form-item label="内货架号" :label-col="formItemAcrossLayout.labelCol">
                            <a-input
                                v-decorator="['leftInsideShelveId', { rules: [{ required: true, message: '请输入内货架号!' }] }]"
                            />
                        </a-form-item>
                        <a-form-item label="外货架号" :label-col="formItemAcrossLayout.labelCol">
                            <a-input
                                v-decorator="['leftOutsideShelveId', { rules: [{ required: true, message: '请输入外货架号!' }] }]"
                            />
                        </a-form-item>
                    </div>
                    <a-divider></a-divider>
                </div>

                <div class="leftType">
                    <h3>右货架</h3>
                    <a-form-item label="类型" :label-col="formItemVerticalLayout.labelCol">
                        <a-select
                            v-decorator="[
                               'rightType',
                               { rules: [{ required: true, message: '请选择类型!' }] },
                            ]"
                            placeholder="选择类型"
                            @change="handleSelectChangeRight"
                        >
                            <a-select-option value="0">
                                单伸
                            </a-select-option>
                            <a-select-option value="1">
                                双伸
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                    <div class="across-layout">
                        <a-form-item label="货架规格" :label-col="{ span:7}">
                            <a-input
                                v-decorator="['rightRow', { rules: [{ required: true, message: '请输入行!' }] }]"
                                suffix="行"
                            />
                        </a-form-item>
                        <a-form-item label="" :wrapper-col="{span:20}">
                            <a-input
                                v-decorator="['rightColumn', { rules: [{ required: true, message: '请输入列!' }] }]"
                                suffix="列"
                            />
                        </a-form-item>
                    </div>
                    <div class="across-layout" v-if="rightType =='0'">
                        <a-form-item label="货架号" :label-col="formItemAcrossLayout.labelCol">
                            <a-input
                                v-decorator="['rightShelveId', { rules: [{ required: true, message: '请输入货架号!' }] }]"
                            />
                        </a-form-item>
                    </div>
                    <div class="across-layout" v-if="rightType =='1'">
                        <a-form-item label="内货架号" :label-col="formItemAcrossLayout.labelCol">
                            <a-input
                                v-decorator="['rightInsideShelveId', { rules: [{ required: true, message: '请输入内货架号!' }] }]"
                            />
                        </a-form-item>
                        <a-form-item label="外货架号" :label-col="formItemAcrossLayout.labelCol">
                            <a-input
                                v-decorator="['rightOutsideShelveId', { rules: [{ required: true, message: '请输入外货架号!' }] }]"
                            />
                        </a-form-item>
                    </div>
                    <a-divider></a-divider>
                </div>
                <div  v-if="cameraList.length>0">
                    <a-form-item label="球机1" :label-col="formItemVerticalLayout.labelCol">
                        <a-select
                            v-decorator="[
                               'camera1Id',
                            ]"
                            placeholder="选择球机"
                            @dropdownVisibleChange="handleSelectCamera"
                        >
                            <a-select-option v-for="item in cameraList" :key="item.id" :value="item.id">
                                {{item.name}}
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item label="球机2" :label-col="formItemVerticalLayout.labelCol">
                        <a-select
                            v-decorator="[
                               'camera2Id',
                            ]"
                            placeholder="选择球机"
                        >
                            <a-select-option v-for="item in cameraList" :key="item.id" :value="item.id">
                                {{item.name}}
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                </div>
                <div v-else>
                    <a-form-item label="球机1" :label-col="formItemVerticalLayout.labelCol">
                        <a-select
                            v-decorator="[
                               'camera1Name',
                            ]"
                            placeholder="选择球机"
                            @dropdownVisibleChange="handleSelectCamera"
                        >
                            <a-select-option v-for="item in cameraList" :key="item.id" :value="item.id">
                                {{item.name}}
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item label="球机2" :label-col="formItemVerticalLayout.labelCol">
                        <a-select
                            v-decorator="[
                               'camera2Name',
                            ]"
                            placeholder="选择球机"
                        >
                            <a-select-option v-for="item in cameraList" :key="item.id" :value="item.id">
                                {{item.name}}
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                </div>

            </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.xxx(); //newVal存在的话执行this.xxx()函数
        },
        modelTitle: function(newVal){
            this.title = newVal;
        },
        modelData: function(newVal){
            console.log(newVal)
            if(newVal.id){
                this.mdata=newVal
                this.leftType=newVal.leftType
                this.rightType=newVal.rightType
                this.id = newVal.id
                // console.log('触发了watch，重新赋值')
                this.$nextTick(()=>{   //this.$nextTick解决不能在表单渲染之前赋值的报错问题
                    this.form.setFieldsValue({  //setFieldsValue 表示对form表单重新设置值
                        name: newVal.name,
                        plcId: newVal.plcId,
                        plcIp: newVal.plcIp,
                        plcPort: newVal.plcPort,
                        leftType: newVal.leftType === null ? '' : newVal.leftType === 0 ? '单伸' : '双伸',
                        leftRow: newVal.leftRow,
                        leftColumn: newVal.leftColumn,
                        leftShelveId: newVal.leftShelveId,
                        leftInsideShelveId: newVal.leftInsideShelveId,
                        leftOutsideShelveId: newVal.leftOutsideShelveId,
                        rightType: newVal.rightType === null ? '' : newVal.rightType === 0 ? '单伸' : '双伸',
                        rightRow: newVal.rightRow,
                        rightColumn: newVal.rightColumn,
                        rightShelveId: newVal.rightShelveId,
                        rightInsideShelveId:newVal.rightInsideShelveId,
                        rightOutsideShelveId:newVal.rightOutsideShelveId,
                        camera1Id:newVal.camera1Name,
                        camera2Id:newVal.camera2Name,
                        camera1Name:newVal.camera1Name,
                        camera2Name:newVal.camera2Name
                    })
                })
            }

        },
    },
    data() {
        return {
            isShow:false,
            title:'',
            closable:false,//取消model模态框右上角的X号
            formItemAcrossLayout,
            formItemVerticalLayout,
            confirmLoading: false,
            form: this.$form.createForm(this, { name: 'dynamic_rule' }),
            leftType:'',
            rightType:'',
            id:'',
            cameraList:[],
            mdata:[]
        };
    },
    mounted() {
        console.log('mounted执行了')
    },
    methods: {
        handleOk() {
            this.confirmLoading = true;
            setTimeout(() => {
                this.form.validateFields((err, values) => {
                    console.log(values)
                    values.leftColumn = Number(values.leftColumn)
                    values.leftRow = Number(values.leftRow)
                    values.leftType = Number(values.leftType)
                    values.plcPort = Number(values.plcPort)
                    values.plcId = Number(values.plcId)
                    values.rightColumn = Number(values.rightColumn)
                    values.rightRow = Number(values.rightRow)
                    values.rightType = Number(values.rightType)
                    if (!err) {
                        console.log(this.title)
                        if (this.title == '新增巷道') {
                            this.$api.httpApi.addStreet({
                                data: values
                            }).then(res => {
                                if (res.code == 200) {
                                    this.$emit('sure', false)
                                    this.$message.success('新增巷道成功');
                                }
                            }).catch(err => {

                            });
                        }else if(this.title=='编辑巷道'){
                            values.id = this.id
                            switch (values.leftType) {
                            case '单伸':
                                values.leftType='0'
                                break;
                            case '双伸':
                                values.leftType='1'
                                break;
                            }
                            switch (values.rightType) {
                            case '单伸':
                                values.rightType='0'
                                break;
                            case '双伸':
                                values.rightType='1'
                                break;
                            }
                            if(!this.cameraList.length>0){
                                // console.log(this.mdata.camera1Id)
                                values.camera1Id = this.mdata.camera1Id
                                values.camera2Id = this.mdata.camera2Id
                            }
                            this.$api.httpApi.editStreet({
                                data:values
                            }).then(res => {
                                if(res.code==200){
                                    this.$emit('sure',false)
                                    this.$message.success('编辑巷道成功');
                                }
                            }).catch(err => {

                            });
                        }
                    }
                });
                this.confirmLoading = false;
            }, 500);
        },
        handleCancel() {
            console.log('Clicked cancel button');
            console.log(this.title);
            this.$emit('close',false,{}) //第二个参数表示每次$emit的时候就将modelData重新赋值，使watch 监听的modelData：函数不断监听到变化而触发，解决默认只触发一次下次再点开详情为空值的问题
        },

        handleSelectChangeLeft(value) {
            console.log(value);
            this.form.setFieldsValue({ //setFieldsValue 表示对form表单重新设置值
                leftInsideShelveId:'',
                leftOutsideShelveId:'',
                leftShelveId:''
            })
            this.leftType = value   //判断渲染左货架单伸或者双伸的时会用到，在这里赋值给data实例
        },
        handleSelectChangeRight(value) {
            this.form.setFieldsValue({ //setFieldsValue 表示对form表单重新设置值
                rightInsideShelveId:'',
                rightOutsideShelveId:'',
                rightShelveId:''
            })
            this.rightType = value  //判断渲染右货架单伸或者双伸的时会用到，在这里赋值给data实例
        },
        handleSelectCamera(){
            this.$api.httpApi.getCameraList({
                data: {
                    pageNum:0,
                    pageSize:0,
                }
            }).then(res => {
                this.cameraList = res.data.list;
            }).catch(err => {

            });
        }
    },
};
</script>
<style lang="scss" scoped>
    .p-model{
        .across-layout{
            display: flex;
        }
        .ant-divider-horizontal{
           margin:6px 0;
        }
    }
</style>