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)

}

三、下拉框中的值选中之后渲染不及时

?

1 2 3 4 5 6 7 8 9 10 11 12

<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)

        })

        }

      })

  }