首页 > 其他分享 >vue3 用法汇总（二）

vue3 用法汇总（二）

时间：2023-11-03 10:56:08浏览次数：43  
标签：00 const column 汇总 value 用法 vue3 property row

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>

　　

标签：00,const,column,汇总,value,用法,vue3,property,row
From： https://www.cnblogs.com/flyShare/p/17806961.html

相关文章

  • 串口的相关知识汇总连接
    串口和USB的区别串口通信的介绍WIKI[RS-232]接口标准......
  • js中的includes用法
    includes可用于查找数组和字符串是否包含某元素，包含返回true，否则返回false1、数组letarr=[1,2,3,4,5]arr.includes[4]//truearr.includes[9]//false2、字符串varstr="Helloworld"str.includes("world")//truestr.includes("wo")//truestr.include......
  • WPF InputHitTest的用法
    一、定义InputHitTest是一个用于检测鼠标指针是否命中某个可视元素的方法。它可以返回命中的最上层元素。 二、用法：①首先，我们需要获取InputHitTest方法所需的参数，即鼠标指针的位置。可以通过Mouse类的GetPosition方法来获取当前鼠标指针的位置：Pointposition=Mouse.Ge......
  • C# WinFrom Application下的方法以及用法
    https://blog.csdn.net/weixin_44867439/article/details/132792736https://zhidao.baidu.com/question/177942555374414204.htmlApplication.Exit()：用于退出应用程序。它会触发FormClosing事件，并允许窗体执行清理操作。一般来说，Application.Exit用于正常关闭应用程序。Applic......
  • vue3.0父级组件调用子组件方法
    vue3.0父级组件调用子组件方法场景：在页面开发过程中，我经常涉及到不同组件之间的元素和方法的调用。就此记录在vue3.0项目，也是我开发的开源项目中的实现方式。父级组件调用子级1.应用场景以下以我的代码实现为例：在左侧菜单中，通过点击新建会话，在会话列表中新建一个会话框。其中......
  • vue3项目 - 手写可拖拽带进度监控的文件上传组件
    1.实现原理： 原生的上传文件组件： <inputref="uploadFileRef"style="display:none"type="file"/> 自定义上传区域：  拖拽事件添加（dragover，dragenter，drop），点击事件添加（click）调用原生上传组件的click事件：uploadFileRef.value.click()监听元素上传组件的值回传事件：c......
  • vue3 google浏览器格式化控制台打印的数据
    ......
  • Windows常用运维命令汇总-学习笔记
    基本网络命令ipconfig/all                                     查看IP地址whoami                                           查询账号所属权限whoami/all               ......
  • vuejs3.0 从入门到精通——基于 Vite 搭建 Vue3 项目
    基于Vite搭建Vue3项目 一、为什么选Vitehttps://www.vitejs.net/ 在浏览器支持ES模块之前，JavaScript并没有提供的原生机制让开发者以模块化的方式进行开发。这也正是我们对“打包”这个概念熟悉的原因：使用工具抓取、处理并将我们的源码模块串联成可以在浏览器中运......
  • 3个Excel表格中每个门店物品不同，想要汇总在一起（方法三）
    大家好，我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Python自动化办公处理的问题，一起来看看吧。上一篇文章中，我们已经看到了第一种解决办法了，这一篇文章我们一起来看看另外一种方法。二、实现过程这里【瑜亮老师】给了一个代码和思路，如下所示：`# 读取E......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99