|
|
|
|
@ -1,47 +1,313 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div v-if="visible">
|
|
|
|
|
<div v-if="isShow">
|
|
|
|
|
<a-modal
|
|
|
|
|
:title="modelTitle"
|
|
|
|
|
:visible="visible"
|
|
|
|
|
:confirm-loading="confirmLoading"
|
|
|
|
|
v-model="isShow"
|
|
|
|
|
:title="title"
|
|
|
|
|
:closable="closable"
|
|
|
|
|
@ok="handleOk"
|
|
|
|
|
@cancel="handleCancel"
|
|
|
|
|
ok-text="确认" cancel-text="取消"
|
|
|
|
|
ok-text="确认"
|
|
|
|
|
cancel-text="取消"
|
|
|
|
|
class="p-model"
|
|
|
|
|
>
|
|
|
|
|
<p>gfgdfgdfgdf</p>
|
|
|
|
|
<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="['plcId', { rules: [{ required: true, message: '请输入PLC-ID!' }] }]"
|
|
|
|
|
/>
|
|
|
|
|
</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>
|
|
|
|
|
|
|
|
|
|
<a-form-item label="球机1" :label-col="formItemVerticalLayout.labelCol">
|
|
|
|
|
<a-select
|
|
|
|
|
v-decorator="[
|
|
|
|
|
'camera1Id',
|
|
|
|
|
]"
|
|
|
|
|
placeholder="选择球机"
|
|
|
|
|
>
|
|
|
|
|
<a-select-option value="0">
|
|
|
|
|
单伸
|
|
|
|
|
</a-select-option>
|
|
|
|
|
<a-select-option value="1">
|
|
|
|
|
双伸
|
|
|
|
|
</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 value="0">
|
|
|
|
|
单伸
|
|
|
|
|
</a-select-option>
|
|
|
|
|
<a-select-option value="1">
|
|
|
|
|
双伸
|
|
|
|
|
</a-select-option>
|
|
|
|
|
</a-select>
|
|
|
|
|
</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:{
|
|
|
|
|
type:Boolean
|
|
|
|
|
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){
|
|
|
|
|
if(newVal.id){
|
|
|
|
|
this.mdata=newVal
|
|
|
|
|
this.leftType=newVal.leftType
|
|
|
|
|
this.rightType=newVal.rightType
|
|
|
|
|
console.log('更新了')
|
|
|
|
|
this.$nextTick(()=>{
|
|
|
|
|
this.form.setFieldsValue({ //setFieldsValue 表示对form表单重新设置值
|
|
|
|
|
name:newVal.name,
|
|
|
|
|
plcId:newVal.plcId,
|
|
|
|
|
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.camera1Id,
|
|
|
|
|
camera2Id:newVal.camera2Id
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
modelTitle:{
|
|
|
|
|
type:String
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
isShow:false,
|
|
|
|
|
title:'',
|
|
|
|
|
closable:false,//取消model模态框右上角的X号
|
|
|
|
|
formItemAcrossLayout,
|
|
|
|
|
formItemVerticalLayout,
|
|
|
|
|
confirmLoading: false,
|
|
|
|
|
form: this.$form.createForm(this, { name: 'dynamic_rule' }),
|
|
|
|
|
leftType:'',
|
|
|
|
|
rightType:'',
|
|
|
|
|
mdata:[]
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
|
|
|
|
|
console.log('mounted执行了')
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
handleOk() {
|
|
|
|
|
this.confirmLoading = true;
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.$emit('sure',false)
|
|
|
|
|
this.form.validateFields((err, values) => {
|
|
|
|
|
console.log(values)
|
|
|
|
|
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('新增巷道成功');
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}else if(this.title=='编辑巷道'){
|
|
|
|
|
this.$api.httpApi.addStreet({
|
|
|
|
|
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');
|
|
|
|
|
this.$emit('close',false)
|
|
|
|
|
console.log(this.title);
|
|
|
|
|
this.$emit('close',false,{})
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
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实例
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.p-model{
|
|
|
|
|
.across-layout{
|
|
|
|
|
display: flex;
|
|
|
|
|
}
|
|
|
|
|
.ant-divider-horizontal{
|
|
|
|
|
margin:6px 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
张鑫
5 years ago