vue3 用法汇总（二）
1、列表中鼠标放在不同单元格显示不同的背景颜色
<el-table
v-resize:44
:data="tableData"
class="table marking-table"
border
style='margin: 10px 0px'
highlight-current-row
element-loading-text="数据正在加载中..."
v-loading='isLoading'
header-cell-class-name="table-header"
:cell-style="cellStyle"
@cell-click="cellClick"
@selection-change="handleSelectionChange"
@cell-mouse-enter="mouseEnter"
@cell-mouse-leave="mouseLeave"
>
<el-table-column type="selection" width="55" align="center"/>
<el-table-column type="index" label="NO." width='55px'/>
<el-table-column prop="lineName" width='100px' />
<el-table-column prop="plateNumber" width='140px' />
<!-- <template #default="scope">
<el-tooltip placement="top" effect="dark" content="点击单元格可编辑" >
<span>{{scope.row.plateNumber}}</span>
</el-tooltip>
</template>
</el-table-column> -->
<el-table-column label="车组人员" align="center">
<el-table-column prop="personList" width='260px' >
<template #default="scope">
<div v-for="(item, index) in scope.row.personList" :key="index">
{{ item.personName }} - {{ item.position }}
<span v-if="item.contactInfo">-{{ item.contactInfo }}</span>
<span v-else></span>
<span v-if="item.isMaster"> - (车长)</span>
</div>
</template>
</el-table-column>
<el-table-column prop="pmPersonList" width='260px' >
<template #default="scope">
<div v-for="(item, index) in scope.row.pmPersonList" :key="index">
{{ item.personName }} - {{ item.position }}
<span v-if="item.contactInfo">-{{ item.contactInfo }}</span>
<span v-else></span>
<span v-if="item.isMaster"> - (车长)</span>
</div>
</template>
</el-table-column>
</el-table-column>
<el-table-column prop="earlyBranch" >
<template #default="scope">
<div v-for="(item, index) in scope.row.earlyBranch" :key="index">
<div> {{ item.branchName }}</div>
</div>
<el-tooltip ref="tooltipRef" placement="top" v-model:visible="visible" :virtual-ref="buttonRef" virtual-triggering >
<template #content>
<span>点击单元格可编辑</span>
</template>
</el-tooltip>
</template>
</el-table-column>
<el-table-column prop="lateBranch">
<template #default="scope">
<div v-for="(item, index) in scope.row.lateBranch" :key="index">
{{ item.branchName }}
</div>
</template>
</el-table-column>
<el-table-column prop="selfDevices" >
<template #default="scope">
<div v-for="(item, index) in scope.row.selfDevices" :key="index">
{{ item.branchName }}
</div>
</template>
</el-table-column>
<el-table-column prop="doorstep" >
<template #default="scope">
<div v-for="(item, index) in scope.row.doorstep" :key="index">
{{ item.branchName }}
</div>
</template>
</el-table-column>
<el-table-column prop="tempBranch" >
<template #default="scope">
<div v-for="(item, index) in scope.row.tempBranch" :key="index">
{{ item.branchName }}
</div>
</template>
</el-table-column>
<el-table-column label="操作" width="150px" align="center" >
<template #default="scope">
<el-button type="primary" icon="Stamp" circle plain @click="handleCar(scope.row)" />
<el-button type="success" :icon="Edit" circle plain @click="handleTask(scope.row)" />
<el-popconfirm :title="`确定删除这条记录吗`" width="260px" @confirm="delSchedule(scope.row.ids)">
<template #reference>
<el-button type="danger" title="删除" icon="Minus" size="small" circle plain></el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<!-- 网点调整弹出框 -->
<branch-adjust ref="editDialog" v-model:visible="viewState.visible" :title="viewState.title" :taskId="viewState.taskId" @close="closeEdit" />
<!--人员调整弹出框 -->
<person-adjust ref="personDialog" v-model:visible="personState.visible" @close="closePersonEdit" />
2、具体方法实现
// 弹框调整页面
import BranchAdjust from "@/views/dispatch/components/branchAdjust.vue"
// 弹框调整页面
import PersonAdjust from "@/views/dispatch/components/personAdjust.vue"
//定义dialog中的值 const viewState = reactive({ visible: false, title: '', taskId:'' })
//人员调整的弹框参数
const personDialog = ref<any>();
// 定义人员弹框中的值
const personState = reactive({
visible: false,
title: '',
})
// 单元格样式修改
const cellStyle=(row:any) =>{
if (selectRow.value === row.row && selectColumn.value === row.column) {
//点击后的颜色
return {'background-color':'#a0cfff','color': '#606266', 'font-weight':'bold'}
}
else if (hoverRow.value === row.row && hoverColumn.value === row.column){
return {'cursor':'pointer','background-color':'#a0cfff','color': '#606266'}
}
else {
return {'background-color':'#fff'}
}
}
// 将鼠标移动到单元格内,样式变化，给出可编辑提示
const hoverRow=ref();
const hoverColumn=ref();
// 控制tooltip显示隐藏
const visible = ref(false);
const buttonRef: Ref<HTMLElement | null> = ref(null); //鼠标选中的元素
const mouseEnter=(row:any,column:any,cell:any,event:any)=>{
if (column.property == "personList" || (column.property == "pmPersonList" && row.pmPersonList != null)
|| (column.property == "earlyBranch" && row.earlyTask != null) || (column.property == "lateBranch" && row.lateTask != null)
|| (column.property == "selfDevices" && row.selfTask != null) || (column.property == "doorstep" && row.doorTask !=null)){
hoverRow.value = row
hoverColumn.value = column
}
if(column.property == "personList" || (column.property == "pmPersonList" && row.pmPersonList != null)
|| (column.property == "earlyBranch" && row.earlyTask != null)||(column.property == "lateBranch" && row.lateTask != null)
|| (column.property == "selfDevices" && row.selfTask != null) || (column.property == "doorstep" && row.doorTask !=null )){
// 显示提示信息
visible.value=true
buttonRef.value = event.currentTarget
}else{
visible.value=false
}
}
// 鼠标移除单元格
const mouseLeave=(row:any ,column:any)=>{
hoverRow.value=null;
hoverColumn.value=null;
visible.value=false
}
const selectRow=ref();
const selectColumn=ref();
// 选中单元格
const cellClick=(row:any ,column:any) =>{
// 当鼠标放在列上的时候显示不同的样式
if (column.property == "personList" ||column.property == "pmPersonList" ||
column.property == "earlyBranch"||column.property == "lateBranch" || column.property == "selfDevices" || column.property == "doorstep"){
selectRow.value = row
selectColumn.value = column
scheduleId.value =row.id
}
// 如果是人员调整，直接显示之前的排班信息，只能调整人员
if(column.property == "personList" || column.property == "pmPersonList" ){
// 上午
if(column.property == "personList" && row.personList !=null && row.pmPersonList !=null){
personDialog.value.initData({ ...row },row.personList,"am");
personState.visible = true
} else if(column.property == "pmPersonList" && row.pmPersonList !=null ){
personDialog.value.initData({ ...row },row.pmPersonList,"pm");
personState.visible = true
}else if(column.property == "personList" && row.personList !=null && row.pmPersonList ==null){
personDialog.value.initData({ ...row },row.personList,"all");
personState.visible = true
}
}
// 网点调整
else if(column.property == "earlyBranch"||column.property == "lateBranch" || column.property == "selfDevices" || column.property == "doorstep"){
//是ref创建的，所以得加.value，调用子组件dialog的initEditData方法
if(column.property == "earlyBranch" && row.earlyTask != null){
passValueChild(true, '早送任务网点',row.earlyTask)
editDialog.value.initData([ ...row.earlyBranch ]);
}
else if(column.property == "lateBranch" && row.lateTask != null){
passValueChild(true, '晚收任务网点',row.lateTask)
editDialog.value.initData([...row.lateBranch]);
}
else if(column.property == "selfDevices" && row.selfTask != null){
passValueChild(true, '自助设备点',row.selfTask)
editDialog.value.initData([...row.selfDevices]);
}
else if(column.property == "doorstep" && row.doorTask != null){
passValueChild(true, '上门收款点',row.doorTask)
editDialog.value.initData([...row.doorstep]);
}
}
else{
}
}
//父类给子类传值
const passValueChild = (visible: any, title: any, taskId:any) => {
//子组件中的props接收此两个值
viewState.visible = visible
viewState.title = title
viewState.taskId =taskId
}
3、组件具体内容
<!--调整网点信息-->
<template>
<div class="edit-container" >
<el-dialog v-model="props.visible" :destroy-on-close="true" :title="props.title" @close="closeBranchDialog" :close-on-click-modal=false top="8vh" width="80%">
<el-row :gutter="20">
<!-- 显示之前的网点信息-->
<el-col :span="18">
<div style="overflow:auto;height:500px;">
<el-table
size="medium"
:border="true"
:data="branchTableData"
:row-style="changeColor"
:stripe=false
style="width: 100%;">
<el-table-column type="index" label="NO." align="center" width='55px'/>
<el-table-column prop="customerName" />
<el-table-column prop="branchName" />
<el-table-column prop="branchType">
<template #default="scope">
<option-tag :optionCode='scope.row.branchType'></option-tag>
</template>
</el-table-column>
<el-table-column prop="businessType">
<template #default="scope">
<option-tag :optionCode='scope.row.businessType'></option-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="150px">
<template #default="scope">
<el-popconfirm :title="`确定删除这条记录吗`" width="260px" @confirm="delBranch(scope.$index,scope.row)">
<template #reference>
<el-button type="danger" title="删除" icon="Minus" size="small" circle plain></el-button>
</template>
</el-popconfirm>
<el-button type="primary" title="上移" icon="ArrowUpBold" size="small" circle plain :disabled="scope.$index === 0" @click="moveUp(scope.$index, scope.row)" />
<el-button type="success" title="下移" icon="ArrowDownBold" size="small" circle plain :disabled="scope.$index === branchTableData.length -1 " @click="moveDown(scope.$index, scope.row)" />
</template>
</el-table-column>
</el-table>
</div>
</el-col>
<!-- 选择网点-->
<el-col :span="6" >
<el-tag size="large" effect="dark" style="margin-bottom:5px;">选择网点信息</el-tag>
<el-form-item style="margin-bottom:3px;">
<base-customer-org-info-tree class="tree" @getNode="getNodeData" ref="baseTree" :checkNode="paramForm.id" style="width:100%;" :getdisAbled="getdisAbled" />
</el-form-item>
<base-branch-tree ref="branchTree" :data="branchData" @getNode="getBranchNode" />
</el-col>
</el-row>
<template #footer>
<span class="dialog-footer">
<el-button @click="closeBranchDialog">取消</el-button>
<el-button type="primary" @click="handleBranchConfirm" >确定</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import { reactive, ref , onMounted, toRefs, defineProps} from 'vue'
import { ElMessage } from 'element-plus'
import { SysOptionConf } from '@/api/basic/baseOptionConf/type';
import { queryOrgtypeId } from "@/api/basic/baseCustomerOrgInfo"
import { baseCustomerOrgInfo } from "@/api/basic/baseCashboxInfo/type"
import publicMethod from '@/views/basic/common/publicMethod'
import {editForm} from '@/api/basic/baseBillboxInfo/type'
import BaseBranchTree from "@/views/basic/components/baseBranchTree.vue"
import baseCustomerOrgInfoTree from "@/views/basic/components/baseCustomerOrgInfoTree.vue"
import { tableItem as baseCustomerOrgInfoTableItem } from "@/api/basic/baseCustomerOrgInfo/type"
import { tableItem as baseBranchInfoTableItem } from "@/api/basic/baseBranchInfo/type"
import { getBranchInfoById} from "@/api/basic/baseBranchInfo/index"
import publicData from '@/views/basic/common/publicData'
import { useCounterStore } from "@/store/modules/base"
// 引入请求接口
import { updateTaskInfo } from "@/api/dispatch/reality-schedule"
import useUserStore from '@/store/modules/user'
import useCommonStore from '@/store/modules/common'
let userStore = useUserStore()
const commonStore = useCommonStore()
//定义dialog中的值
const viewState = reactive({
orgId: '',
})
//子组件用prop声明接收的参数，可以使用 defineProps() 宏来定义
const props = defineProps({
title:{
type:String,
default:''
},
visible:{
type:Boolean,
default: false
},
taskId:{
type:String,
default: ''
},
})
const businessOption =commonStore.filterOptions(publicData.businessTypeCode);
const branchTypeOption = commonStore.filterOptions(publicData.branchTypeCode);
const branchTableData=ref([])
//从父类给子组件传值，将选择的网点信息在当前页面展示
function initData(editRow:any){
if(editRow!=""){
branchTableData.value= editRow
}
}
const branchData=reactive([])
//用defineEmits声明要调用父组件的方法
//这个是父组件dialog标签上的@close，而不是父组件自己定义的方法closeEdit()
const emit = defineEmits(['close'])
// 关闭弹框
function closeBranchDialog(value:number){
branchTableData.value = {} as any
paramForm.id =''
branchTree.value.reFresh()
//执行调用父组件中的dialog @close="closeEdit"的close,value传值给父类
emit('close',value)
}
// 排序上移
const moveUp =(index:any,row:any) =>{
if(index > 0){
const up = branchTableData.value[index-1]
branchTableData.value.splice(index-1,1);
branchTableData.value.splice(index,0,up);
selectedIndex.value = index-1;
}else{
ElMessage({message:'当前网点已是第一个，不可上移！',type:'warning'})
}
}
// 排序下移
const moveDown =(index:any,row:any) =>{
if(index + 1 === branchTableData.value.length){
ElMessage({message:'当前网点已是最后一个，不可下移！',type:'warning'})
}else{
const down = branchTableData.value[index+1]
branchTableData.value.splice(index+1,1);
branchTableData.value.splice(index,0,down);
selectedIndex.value = index+1;
}
}
/**
* 改变样式
*/
const selectedIndex=ref();
const changeColor =({ row,rowIndex }) =>{
if(rowIndex === selectedIndex.value){
return {'background-color':'#a0cfff', 'font-weight':'bold'}
}
if(rowIndex % 2 === 0){
return {'background-color':'#fff'}
}
else{
return {'background-color':'#fafafa'}
}
}
// 删除网点
const delBranch =(index:any,row:any) =>{
branchTableData.value.splice(index,1);
}
// 确定按钮
const handleBranchConfirm=() =>{
// 将选中的数据保存在数据库中
const ids=ref([])
branchTableData.value.forEach(e => {
ids.value.push(e.id)
})
let param ={
taskId:props.taskId,
ids:ids.value.join()
}
// 更新任务对应的网点信息
updateTaskInfo(param).then(()=>{
closeBranchDialog(1);
})
}
const paramForm= reactive({
id:''
})
//网点调整的弹框参数
const branchTree = ref<any>();
const getNodeData = (node: baseCustomerOrgInfoTableItem) => {
if (node.parentId != "" && node.parentId != null) {
paramForm.id = node.id;
branchTree.value.reFresh(node.id)
}
}
// 选择网点信息,添加到列表
const getBranchNode = (node: baseCustomerOrgInfoTableItem) => {
if(node.orgType === publicData.customerTypeBra){
const ids = ref([])
let branchId= node.id
const exsitBranch =branchTableData.value.filter(i => i.id == branchId );
if(exsitBranch.length > 0){
ElMessage({message:'当前网点已存在！',type:'warning'})
}else{
ids.value.push(branchId)
let param={
ids: ids.value.join(),
}
// 调用分页查询接口
getBranchInfoById(param).then((res:any)=>{
let value =res[0]
branchTableData.value.push(value);
})
}
}
}
// 设置不可以选中的项目
const getdisAbled = (data: any) => {
if (data.parentId == "" || data.parentId == null) {
return true
} else {
return false
}
}
//使用defineExpose()暴露方法，别的组件才能调用
defineExpose({
initData
});
</script>
<style>
</style>
4、人员调整
<!--调整车组信息-->
<template>
<div class="edit-container" >
<el-dialog title="车组人员调整"
v-model="props.visible"
@close="closePersonDialog"
:close-on-click-modal=false
top="8vh"
width="80%">
<el-row :gutter="20">
<el-col :span="18">
<el-tag size="large" effect="dark" style="margin:5px;">原车组信息</el-tag>
<div class="temporary-schedule-edit-table">
<el-table
class="flex-table"
size="medium"
:border="true"
tooltip-effect="dark"
highlight-current-row
:data="oriTableData"
:header-cell-style="{background: '#F6F6F6', height: '10px'}"
style="width: 100%;">
<el-table-column prop="lineName" align="center"/>
<el-table-column prop="driverName" align="center"/>
<el-table-column prop="escort1Name" align="center"/>
<el-table-column prop="escort2Name" align="center"/>
<el-table-column prop="carrier1Name" align="center"/>
<el-table-column prop="carrier2Name" align="center"/>
<el-table-column label="操作" width="80px" align="center">
<template #default="scope">
<el-button type="primary" title="新增" icon="Plus" circle plain :disabled="show" @click="addTempSchedule(scope.row)"/>
</template>
</el-table-column>
</el-table>
</div>
<el-divider/>
<el-tag size="large" effect="dark" style="margin:5px;">调整信息</el-tag>
<span style="float:right;margin-right:5px;">
<span title="删除人员">
<el-button type="danger" @click="handleCellDelete" icon="Delete" circle/>
</span>
</span>
<div class="temporary-schedule-edit-table">
<el-table
class="flex-table"
size="medium"
stripe
border
tooltip-effect="dark"
highlight-current-row
:header-cell-style="{background: '#F6F6F6', height: '10px'}"
:data="adjustTableData"
:cell-style="cellStyle"
@cell-click="cellClick"
@cell-mouse-enter="mouseEnter"
@cell-mouse-leave="mouseLeave"
style="width: 100%">
<el-table-column type="index" label="NO." width='55px'/>
<el-table-column prop="lineName" align="center"/>
<el-table-column prop="dueTime" >
<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>
<el-table-column prop="driverName" align="center">
<template #default="scope">
<el-tooltip placement="top" effect="dark" content="点击单元格可替换/删除" >
<p>{{scope.row.driverName}}</p>
<p class="temporary-schedule-edit-tel">{{scope.row.driverTel}}</p>
</el-tooltip>
</template>
</el-table-column>
<el-table-column prop="escort1Name" align="center">
<template #default="scope">
<el-tooltip placement="top" effect="dark" content="点击单元格可替换/删除" >
<p>{{scope.row.escort1Name}}</p>
<p class="temporary-schedule-edit-tel">{{scope.row.escort1Tel}}</p>
</el-tooltip>
</template>
</el-table-column>
<el-table-column prop="escort2Name" align="center">
<template #default="scope">
<el-tooltip placement="top" effect="dark" content="点击单元格可替换/删除" >
<p>{{scope.row.escort2Name}}</p>
<p class="temporary-schedule-edit-tel">{{scope.row.escort2Tel}}</p>
</el-tooltip>
</template>
</el-table-column>
<el-table-column prop="carrier1Name" align="center">
<template #default="scope">
<el-tooltip placement="top" effect="dark" content="点击单元格可替换/删除" >
<p>{{scope.row.carrier1Name}}</p>
<p class="temporary-schedule-edit-tel">{{scope.row.carrier1Tel}}</p>
</el-tooltip>
</template>
</el-table-column>
<el-table-column prop="carrier2Name" align="center">
<template #default="scope">
<el-tooltip placement="top" effect="dark" content="点击单元格可替换/删除" >
<p>{{scope.row.carrier2Name}}</p>
<p class="temporary-schedule-edit-tel">{{scope.row.carrier2Tel}}</p>
</el-tooltip>
</template>
</el-table-column>
<el-table-column width="80px" label="操作" align="center">
<template #default="scope">
<el-popconfirm :title="`确定删除这条记录吗`" width="260px" @confirm="delTempSchedule(scope.$index,scope.row)">
<template #reference>
<el-button type="danger" title="删除" icon="Minus" size="small" circle plain></el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
</div>
</el-col>
<el-col :span="6" >
<div class="temporary-schedule-edit-tree" >
<el-tag size="large" effect="dark" style="margin-bottom:5px;">选择替班人员</el-tag>
<base-person-org-tree
ref="personTree"
@getNode="personData"
/>
</div>
</el-col>
</el-row>
<template #footer>
<span class="dialog-footer">
<el-button @click="closePersonDialog">取消</el-button>
<el-button type="primary" @click="handlePersonConfirm" >确定</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import { reactive, ref, onMounted,Ref,h, nextTick, createApp} from "vue"
import { ElMessage,ElMessageBox } from "element-plus";
import BasePersonOrgTree from "@/views/basic/components/basePersonOrgTree.vue"
// 引入请求接口
import { batchUpdate, checkSelectedPerson } from "@/api/dispatch/reality-schedule"
import _ from 'lodash'
const updateKey=ref(0);
// 时间段
const timeList=[
{
id: "1001",
value: "全天",
key: "00:00-24:00"
},
{
id: "1002",
value: "上午",
key: "00:00-12:00"
},
{
id: "1003",
value: "下午",
key: "12:00-24:00"
}
]
const changeRow = ref('')
const changeRowId = ref('')
const property = ref('')
const changeType = ref('')
const setId = ref('')
const show= ref(false)
const selectShow= ref(false)
// 排班日期
const rosteringDate= ref()
// 人员调整集合
const adjustTableData = ref<any>([])
// 弹框人员信息
const oriTableData = ref<any>([])
//接收父组件的传值
const tempIndex= ref(0)
//子组件用prop声明接收的参数，可以使用 defineProps() 宏来定义
const props = defineProps({
visible:{
type:Boolean,
default: false
},
})
// 界面初始化
function initData(editRow:any,list:any,type:string){
if(editRow!=""){
// 接收调整的类型
changeType.value=type
// 排班日期
rosteringDate.value = editRow.rosteringDate
adjustTableData.value=[]
oriTableData.value=[]
const tempData = ref<any>([])
// 人员赋值
list.forEach(p =>{
if(p !=null && p.position !=null){
// 车长
if(p.isMaster){
tempData.masterId = p.id
}
if(p.position == "驾驶员"){
tempData.driverName = p.personName
tempData.driverId = p.id
}
else if(p.position == "押运员1"){
tempData.escort1Name = p.personName
tempData.escort1Id = p.id
}
else if(p.position == "押运员2"){
tempData.escort2Name = p.personName
tempData.escort2Id = p.id
}
else if(p.position == "携款员1"){
tempData.carrier1Name = p.personName
tempData.carrier1Id = p.id
}
else if(p.position == "携款员2"){
tempData.carrier2Name = p.personName
tempData.carrier2Id = p.id
}
}
})
tempData.lineName =editRow.lineName
tempData.plateNumber = editRow.plateNumber
// 实时排班主键
tempData.scheduleId = editRow.id
setId.value = editRow.setId
let ids = editRow.ids
let realityId = ids.split(",");
oriTableData.value.push(_.cloneDeep(tempData));
if (adjustTableData.value.length === 0){
let tempRow = {...tempData}
tempRow.id = realityId[0]
if(type == "am"){
tempRow.time= '00:00-12:00'
tempRow.dueTime= ["00:00","12:00"]
// 新增按钮不可用
show.value = true;
selectShow.value = true;
}else if(type == "pm"){
// 新增按钮不可用
show.value = true;
selectShow.value = true;
tempRow.time= '12:00-24:00'
tempRow.dueTime= ["12:00","24:00"]
if(ids !=null && ids.length >1){
tempRow.id =realityId[1]
}
} else{
// 新增按钮可用
show.value = false;
selectShow.value = false;
tempRow.time='00:00-24:00'
tempRow.dueTime= ["00:00","24:00"]
}
tempRow.tempIndex= tempIndex.value
tempIndex.value++
adjustTableData.value.push(_.cloneDeep(tempRow))
}
}
}
const hoverRow=ref();
const hoverColumn=ref();
// 单元格样式修改
const cellStyle=(row:any) =>{
if (JSON.stringify(selectRow.value) == JSON.stringify(row.row) && JSON.stringify(selectColumn.value) == JSON.stringify(row.column)) {
//点击后的颜色
return {'background-color':'#a0cfff','color': '#606266', 'font-weight':'bold'}
}
else if (JSON.stringify(hoverRow.value) == JSON.stringify(row.row) && JSON.stringify(hoverColumn.value) == JSON.stringify(row.column)){
return {'cursor':'pointer','background-color':'#a0cfff','color': '#606266'}
}
else {
return {'background-color':'#fff'}
}
}
// 将鼠标移动到单元格内,样式变化，给出可编辑提示
const mouseEnter=(row:any,column:any,cell:any,event:any)=>{
if (column.property == "driverName" || column.property == "escort1Name"|| column.property == "escort2Name" || column.property == "carrier1Name" || column.property == "carrier2Name"){
hoverRow.value = row
hoverColumn.value= column
}
}
// 鼠标移除单元格
const mouseLeave=(row:any ,column:any)=>{
hoverRow.value=null;
hoverColumn.value=null;
}
const selectRow=ref();
const selectColumn=ref();
// 选中单元格
const cellClick=(row:any ,column:any) =>{
changeRow.value = row
changeRowId.value = row.tempIndex
property.value = column.property
// 当鼠标放在列上的时候显示不同的样式
if (column.property == "driverName" || column.property == "escort1Name"|| column.property == "escort2Name" || column.property == "carrier1Name" || column.property == "carrier2Name"){
selectRow.value = row
selectColumn.value = column
}
}
// 关闭弹框
const emit = defineEmits(['close'])
function closePersonDialog(value:number){
oriTableData.value = {} as any
//执行调用父组件中的dialog @close="closeEdit"的close,value传值给父类
emit('close',value)
}
// 添加调整信息
const addTempSchedule = (row:any) => {
if (adjustTableData.value.length > 1){
return
}
//判断是不是通过替班新增的
let tempRow = { ...row }
tempRow.dueTime = ["00:00","24:00"]
tempRow.time = "00:00-24:00"
tempRow.tempIndex = tempIndex.value
tempRow.id=""
tempRow.setId = setId.value
tempRow.startTime="00:00"
tempRow.endTime="24:00"
tempRow.rosteringDate =rosteringDate.value
tempIndex.value++
adjustTableData.value.push(tempRow)
}
const delTempSchedule = (index:any,row:any) => {
adjustTableData.value.splice(index,1);
}
// 删除人员
const handleCellDelete =() =>{
if(changeRow.value == ''){
ElMessage({message:'请先选择需要删除的人员！',type:'error'})
}else{
if (property.value == 'driverName' || property.value == "escort1Name"|| property.value == "escort2Name"
|| property.value == "carrier1Name" || property.value == "carrier2Name"){
if (workerCount(changeRow.value) >= 2){
return
}else{
ElMessageBox.confirm('确定删除选中人员吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let tempRow = changeRow.value
if(property.value == "driverName"){
tempRow.driverId = ''
tempRow.driverName =''
}
else if(property.value == "escort1Name"){
tempRow.escort1Id = ''
tempRow.escort1Name = ''
}
else if(property.value == "escort2Name"){
tempRow.escort2Id = ''
tempRow.escort2Name = ''
}
else if(property.value == "carrier1Name"){
tempRow.carrier1Id = ''
tempRow.carrier1Name = ''
}
else if(property.value == "carrier2Name"){
tempRow.carrier2Id = ''
tempRow.carrier2Name = ''
}
// 更新人员
let changeList = [];
changeList.push(tempRow)
batchUpdate(changeList).then((res) =>{
ElMessage.success('删除成功！')
})
}).catch(_ => { })
}
}
}
}
//判断当前记录中人员个数
const workerCount=(data:any) =>{
let count = 0
if (data.driverId == null || data.driverId == ''){
count++
}
if (data.escort1Id == null || data.escort1Id == ''){
count++
}
if (data.escort2Id == null || data.escort2Id == ''){
count++
}
if (data.carrier1Id == null || data.carrier1Id == ''){
count++
}
if (data.carrier2Id == null || data.carrier2Id == ''){
count++
}
return count
}
const personData=(data:any) =>{
if(data.orgName == "11"){
return
}else {
if(changeRow.value == ''){
ElMessage({message:'请先选择需要替换的人员！',type:'error'})
}else{
let param={
rosteringDate: rosteringDate.value,
id:data.id,
startTime:"",
endTime:""
}
if(changeType.value == "am"){
param.startTime="00:00"
param.endTime="12:00"
} else if(changeType.value == "am"){
param.startTime="12:00"
param.endTime="24:00"
}else{
param.startTime="00:00"
param.endTime="24:00"
}
checkSelectedPerson(param).then((res:any)=>{
// 替换当前的人员信息
let tempRow = changeRow.value
if(property.value == "driverName"){
tempRow.driverId = data.id
tempRow.driverName = data.orgName
}
else if(property.value == "escort1Name"){
tempRow.escort1Id = data.id
tempRow.escort1Name = data.orgName
}
else if(property.value == "escort2Name"){
tempRow.escort2Id = data.id
tempRow.escort2Name = data.orgName
}
else if(property.value == "carrier1Name"){
tempRow.carrier1Id = data.id
tempRow.carrier1Name = data.orgName
}
else if(property.value == "carrier2Name"){
tempRow.carrier2Id = data.id
tempRow.carrier2Name = data.orgName
}
})
}
}
}
// 人员选择确定
const handlePersonConfirm=() =>{
let count =adjustTableData.value.length;
if(count == 0){
ElMessage.error("当前车组不存在人员信息！")
return
}else{
// 有两条记录需要判断时间段选择的是否一致
if(count > 1){
let first = adjustTableData.value[0].time
let second = adjustTableData.value[1].time
// 两条记录的时间段不能一致
if(first =="00:00-24:00" || second =="00:00-24:00" || first == second ){
ElMessage.error("车组的两个时间段不能一样并且不能是全天！")
}else{
batchUpdate(JSON.parse(JSON.stringify(adjustTableData.value))).then((res) =>{
closePersonDialog(1)
})
}
}else{
batchUpdate(JSON.parse(JSON.stringify(adjustTableData.value))).then((res) =>{
closePersonDialog(1)
})
}
}
}
const changeTime=(data:any,row:any) =>{
let timeArr = data.split("-");
if (timeArr.length > 1){
row.dueTime[0] = timeArr[0]
row.dueTime[1] = timeArr[1]
row.startTime = timeArr[0]
row.endTime = timeArr[1]
updateKey.value++
}
}
//使用defineExpose()暴露方法，别的组件才能调用
defineExpose({
initData
});
</script>
