一、调用页面
//路由
import { useRouter } from 'vue-router
let $router = useRouter()
// 车组调整页面
const handleCar=(row:any) =>{
$router.push({path:"/test/edit",query:{setCode:row.setCode,lineName:row.lineName}})
}
二、新打开的页面
import useTagsViewStore from '@/store/modules/tagsView'
//路由
import { useRouter, useRoute } from 'vue-router'
let $router = useRouter()
let route = useRoute()
// 参数定义
const state = reactive({
setId:'',
setCode:'',
rosteringDate:'',
lineName:'',
plateNumber:'',
property:'',
isLoading:false,
showVehicle:false,
showPerson:false,
show:false,
selectShow:false,
adjustTableData:[],
tempIndex:0,
oriTableData:[]
})
const {
setId,
setCode,
rosteringDate,
lineName,
plateNumber,
property,
showVehicle,
isLoading,
showPerson,
show,
selectShow,
adjustTableData,
tempIndex,
oriTableData
} = toRefs(state)
// DOM挂载完成调用
onMounted (() =>{
// 接收父组件传过来的值
state.lineName = route.query.lineName
state.plateNumber = route.query.plateNumber
state.setCode = route.query.setCode
state.rosteringDate = route.query.rosteringDate
state.setId = route.query.setId
handleSearch(state.setId,state.rosteringDate)
})
// 返回
const tagsView = useTagsViewStore()
const handleBack = () => {
tagsView.delCurrentView()
$router.go(-1)
}
三、下拉框中的值选中之后渲染不及时
<el-table-column prop="dueTime" label="时间段" >
<template #default="scope">
<el-select v-model="scope.row.time" :key="updateKey" placeholder="请选择" @change="value => {changeTime(value, scope.row);}" :disabled="selectShow" >
<el-option
v-for="item in timeList"
:key="item.key"
:label="item.value"
:value="item.key">
</el-option>
</el-select>
</template>
</el-table-column>
const updateKey=ref(0)
// 选择替班时间
const changeTime=(data:any,row:any) =>{
let timeArr = data.split("-");
if (timeArr.length > 1){
row.startTime = timeArr[0]
row.endTime = timeArr[1]
row.dueTime =timeArr;
row.time = data;
updateKey.value++
}
}
四、新增校验
import type { FormInstance, FormRules } from 'element-plus'
const rules = ref<FormRules>({
customerId: [ { required: true, message: '请选择', trigger: [ 'blur', 'change' ] } ],
lineId: [ { required: true, message: '请选择', trigger: [ 'blur', 'change' ] } ],
taskType: [ { required: true, message: '请选择', trigger: [ 'blur', 'change' ] } ],
scheduleType: [ { required: true, message: '请选择', trigger: [ 'blur', 'change' ] } ],
remark: [
{ trigger: [ 'blur', 'change' ] },
{ max: 256, message: '最多输入256个字符！' }
],
});
五、确定方法
const submitForm = async (formEl: FormInstance | undefined) => {
if (!formEl) return
await formEl.validate((valid) => {
if (valid) {
if(state.tableData.moringBranchs.length == 0 && state.tableData.nightBranchs.length == 0 && state.tableData.turnInBranchs.length == 0 && state.tableData.ATMBranchs.length == 0) {
return
}
// 保存相关数据
let params={
earlyBranch:state.tableData.moringBranchs,
lateBranch:state.tableData.nightBranchs,
doorstep:state.tableData.turnInBranchs,
selfDevices:state.tableData.ATMBranchs,
lineId:state.lineId,
rosteringDate:state.rosteringDate,
setCode:state.setCode,
scheduleType:editForm.value.scheduleType,
customerId:editForm.value.customerId,
remark:editForm.value.remark
}
batchTaskUpdate(params).then((res) =>{
ElMessage({message:'成功！',type:'success'})
tagsView.delCurrentView()
$router.go(-1)
})
}
})
}