|
|
<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="巷道標識" :label-col="formItemAcrossLayout.labelCol">
|
|
|
<a-input
|
|
|
v-decorator="['plcId', { rules: [{ required: true, message: '請輸入巷道標識!' }] }]"
|
|
|
/>
|
|
|
</a-form-item>
|
|
|
</div>
|
|
|
<div class="across-layout">
|
|
|
<a-form-item label="PLC IP" :label-col="formItemAcrossLayout.labelCol">
|
|
|
<a-input
|
|
|
v-decorator="['plcIp']"
|
|
|
/>
|
|
|
</a-form-item>
|
|
|
<a-form-item label="PLC PORT" :label-col="formItemAcrossLayout.labelCol">
|
|
|
<a-input
|
|
|
v-decorator="['plcPort']"
|
|
|
/>
|
|
|
</a-form-item>
|
|
|
</div>
|
|
|
<div class="across-layout">
|
|
|
<a-form-item label="光源IP" :label-col="formItemAcrossLayout.labelCol">
|
|
|
<a-input
|
|
|
v-decorator="['lightSourceIp']"
|
|
|
/>
|
|
|
</a-form-item>
|
|
|
<a-form-item label="光源 PORT" :label-col="formItemAcrossLayout.labelCol">
|
|
|
<a-input
|
|
|
v-decorator="['lightSourcePort']"
|
|
|
/>
|
|
|
</a-form-item>
|
|
|
</div>
|
|
|
<div class="across-layout">
|
|
|
<a-form-item label="RFID IP" :label-col="formItemAcrossLayout.labelCol">
|
|
|
<a-input
|
|
|
v-decorator="['RFIDIp']"
|
|
|
/>
|
|
|
</a-form-item>
|
|
|
<a-form-item label="RFID PORT" :label-col="formItemAcrossLayout.labelCol">
|
|
|
<a-input
|
|
|
v-decorator="['RFIDPort']"
|
|
|
/>
|
|
|
</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>
|
|
|
<div class="across-layout">
|
|
|
<a-form-item label="掃碼槍IP" :label-col="formItemAcrossLayout.labelCol">
|
|
|
<a-input
|
|
|
v-decorator="['leftSensorGunIp']"
|
|
|
/>
|
|
|
</a-form-item>
|
|
|
<a-form-item label="掃碼槍PORT" :label-col="formItemAcrossLayout.labelCol">
|
|
|
<a-input
|
|
|
v-decorator="['leftSensorGunPort']"
|
|
|
/>
|
|
|
</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>
|
|
|
<div class="across-layout">
|
|
|
<a-form-item label="掃碼槍IP" :label-col="formItemAcrossLayout.labelCol">
|
|
|
<a-input
|
|
|
v-decorator="['rightSensorGunIp']"
|
|
|
/>
|
|
|
</a-form-item>
|
|
|
<a-form-item label="掃碼槍PORT" :label-col="formItemAcrossLayout.labelCol">
|
|
|
<a-input
|
|
|
v-decorator="['rightSensorGunPort']"
|
|
|
/>
|
|
|
</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,
|
|
|
lightSourceIp: newVal.lightSourceIp,
|
|
|
lightSourcePort: newVal.lightSourcePort,
|
|
|
RFIDIp: newVal.RFIDIp,
|
|
|
RFIDPort: newVal.RFIDPort,
|
|
|
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,
|
|
|
leftSensorGunIp:newVal.leftSensorGunIp,
|
|
|
rightSensorGunIp:newVal.rightSensorGunIp,
|
|
|
leftSensorGunPort:newVal.leftSensorGunPort,
|
|
|
rightSensorGunPort:newVal.rightSensorGunPort,
|
|
|
camera1Id:newVal.camera1Id,
|
|
|
camera2Id:newVal.camera2Id,
|
|
|
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.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>
|