<template>
<div class="wrapper">
<div
v-for="(item, index) in dataList"
:key="index+999"
class="con"
>
<h3>数据节点{{ index + 1 }}</h3>
<el-form :model="item" label-width="130px" label-position="right">
<el-form-item label="节点类型:">
<el-radio-group v-model="item.type">
<el-radio :label="0">仓储</el-radio>
<el-radio :label="1">运输</el-radio>
</el-radio-group>
</el-form-item>
<el-form
v-if="item.type===0"
ref="dataForm1"
key="A"
:model="item"
:rules="rulesTypeObj[`timeRules${index}`]"
label-width="130px"
label-position="right"
>
<el-form-item label="入库时间:" prop="startTime" class="is-required">
<el-date-picker
v-model="item.startTime"
type="datetime"
placeholder="选择日期时间"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd HH:mm"
@change="changTime($event,index)"
/>
</el-form-item>
<el-form-item label="出库时间:" prop="endTime" class="is-required">
<el-date-picker
v-model="item.endTime"
type="datetime"
placeholder="选择日期时间"
align="right"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd HH:mm"
@change="changTime($event,index)"
/>
</el-form-item>
</el-form>
<el-form
v-else
ref="dataForm2"
key="B"
:model="item"
:rules="rulesTypeObj[`timeRules${index}`]"
label-width="130px"
label-position="right"
>
<el-form-item label="启运时间:" prop="startTime" class="is-required">
<el-date-picker
v-model="item.startTime"
type="datetime"
placeholder="选择日期时间"
align="right"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd HH:mm"
@change="changTime($event,index)"
/>
</el-form-item>
<el-form-item label="抵达时间:" prop="endTime" class="is-required">
<el-date-picker
v-model="item.endTime"
type="datetime"
placeholder="选择日期时间"
align="right"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd HH:mm"
@change="changTime($event,index)"
/>
</el-form-item>
<el-form-item label="运输工具:" prop="positions" class="is-required">
<el-button type="text" @click="handelSelect(item,index)">选择</el-button>
</el-form-item>
</el-form>
</el-form>
<el-button
class="con-addBtn"
type="text"
icon="el-icon-circle-plus"
@click="addFormData(index)"
/>
<el-button
v-if="index !== 0"
class="con-delBtn"
type="text"
icon="el-icon-remove"
@click="delFormData(index)"
/>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
dataObj: {
type: 0, // 0仓储 1运输
startTime: '',
endTime: '',
positions: []
},
dataList: [
{
type: 0, // 0仓储 1运输
startTime: '',
endTime: '',
positions: []
}
],
rulesTypeObj: {},
}
},
computed: {
dataListNew() {
return JSON.parse(JSON.stringify(this.dataList))
}
},
watch: {
dataListNew: {
handler(val, old) {
if (val) {
this.getRulesType()
}
},
deep: true,
imediate: true
}
},
methods: {
getRulesType() {
this.dataList.forEach((item, index) => {
this.rulesTypeObj[`timeRules${index}`] = {
startTime: [
{
required: true,
validator(rule, value, callback) {
const start = Date.parse(new Date(value)) / 1000
const end = Date.parse(new Date(item.endTime)) / 1000
if (!value) {
callback(new Error('请选择入库时间'))
} else if (start && end && start > end) {
callback(new Error('请选择正确的时间范围'))
} else {
callback()
}
},
trigger: 'blur'
}
],
endTime: [
{
required: true,
validator(rule, value, callback) {
const end = Date.parse(new Date(value)) / 1000
const start = Date.parse(new Date(item.startTime)) / 1000
if (!value) {
callback(new Error('请选择出库时间'))
} else if (start && end && start > end) {
callback(new Error('请选择正确的时间范围'))
} else {
callback()
}
},
trigger: 'blur'
}
],
positions: [
{
required: true,
validator(rule, value, callback) {
if (value.length === 0) {
callback(new Error('请选择运输工具'))
} else {
callback()
}
},
trigger: 'change'
}
]
}
})
},
// 添加数据节点表单
addFormData(index) {
const arr = cloneObj(this.dataObj) //cloneObj:深拷贝方法,外部引入和不相关代码删了
this.dataList.push(arr)
// this.dataList[index + 1].startTime = this.subTime(
// this.dataList[index].endTime
// )
},
delFormData(index) {
this.dataList.splice(index, 1)
},
}
}
</script>
<style lang="less" scoped>
/deep/ .sty {
margin-top: 7vh !important;
}
.whereForm {
.dataId {
padding: 0px 10px;
background-color: #e4e4e4;
}
/deep/.el-input {
width: 360px;
}
border-bottom: 3px dashed #999;
}
/deep/.el-dialog__body {
height: 500px;
overflow-y: scroll;
}
.content {
.con {
position: relative;
/deep/.el-input {
width: 300px;
}
border-bottom: 3px dashed #999;
.con-addBtn {
position: absolute;
right: 66px;
bottom: 0px;
font-size: 23px;
}
.con-delBtn {
position: absolute;
right: 0px;
bottom: 0px;
font-size: 23px;
color: #f56c6c;
}
}
.con:last-child {
border: none;
}
}
.thWItem {
width: 175px;
}
</style>
循环表单,点击按钮新增及添加自定义校验
于 2023-09-27 11:06:33 首次发布