vue3 -点击按钮进入新的页面

一、调用页面

//路由

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)

        })

        }

      })

  }