heli-mes/mes-ui/mes-ui-admin-vue3/src/views/heli/partprocess/detail.vue

<template>
	<el-card class="hl-card" style="position: relative">
		<template #header>
		  <span>详情页</span>
		</template>
		  <el-card class="hl-card-info">
		    <template #header>
		      <div class="hl-card-info-icona"></div><span class="hl-card-info-text">子项目信息</span>
          <label style="display: inline-flex; align-items: center; margin-left: 40px;">
            <el-checkbox class="large-checkbox" v-model="formData.flag" style="order: 1;"  @change="change"/>
            <span style="order: 2; margin-left: 10px;">不显示已完成</span>
          </label>
		    </template>
      </el-card>
        <ContentWrap>
          <el-table v-loading="loading" :data="list"  :show-overflow-tooltip="true"    class="hl-table custom-hover-table" height="250" border   @row-click="rowClick" :cell-class-name="cellClassName5">
            <el-table-column type="index" width="100" fixed label="序号" align="center" />
            <el-table-column label="子项目名称" align="center" prop="projectSubName"  />
            <el-table-column  label="任务" align="center" prop="subType"  />
            <el-table-column  label="预计开始时间" align="center" prop="startTwoDimDate" :formatter="dateFormatter2" />
            <el-table-column label="预计结束时间" align="center" prop="twoDimDate" :formatter="dateFormatter2" />
            <el-table-column label="工单状态" align="center" prop="status" />
            <el-table-column label="生产进度" align="center" prop="productionSchedule" >
              <template #default="scope">
                <el-progress :percentage="scope.row.productionSchedule" />
              </template>
            </el-table-column>

          </el-table>
        </ContentWrap>



    <el-card class="hl-card-info">
      <template #header>
        <div class="hl-card-info-icona"></div><span class="hl-card-info-text">工单信息</span>
        <label style="display: inline-flex; align-items: center; margin-left: 40px;">
          <el-checkbox class="large-checkbox" v-model="formData.statusflag" style="order: 1;"  @change="change1"/>
          <span style="order: 2; margin-left: 10px;">不显示已完成</span>
        </label>
      </template>
    </el-card>
    <ContentWrap v-if="type=='sheji'">
      <el-table  :data="list1"  :show-overflow-tooltip="true" class="hl-table" height="500" border :cell-class-name="cellClassName">
        <el-table-column type="index" width="100" fixed label="序号" align="center" />
        <el-table-column label="子项目名称" align="center" prop="name"  />
        <el-table-column  label="工艺设计" align="center" prop="type"  />
        <el-table-column  label="预计开始时间" align="center" prop="startTwoDimDate"  :formatter="dateFormatter2"/>
        <el-table-column label="预计结束时间" align="center" prop="twoDimDate"  :formatter="dateFormatter2"/>
        <el-table-column label="预计工时(H)" align="center" prop="designNum" />
        <el-table-column label="实际工时(H)" align="center" prop="workHours" />
        <el-table-column label="负责人" align="center" prop="twoDimOwnerName" />
        <el-table-column label="最后报工时间" align="center" prop="time" :formatter="dateFormatter2"/>
        <el-table-column label="完工" align="center" prop="percentage" />
        <el-table-column label="任务状态" align="center" prop="status" />
      </el-table>
    </ContentWrap>
    <ContentWrap v-if="type=='waixei'">
      <el-table  :data="list2"  :show-overflow-tooltip="true" class="hl-table" height="500" border :cell-class-name="cellClassName1">
        <el-table-column type="index" width="100" fixed label="序号" align="center" />
        <el-table-column label="子项目名称" align="center" prop="projectSubName"  />
        <el-table-column  label="零件名称" align="center" prop="materialName"  />
        <el-table-column  label="工序" align="center" prop="procedureName"  />
        <el-table-column label="要求完成日期" align="center" prop="endTime"  :formatter="dateFormatter2"/>
        <el-table-column label="负责人" align="center" prop="ownerName" />
        <el-table-column label="采购数量" align="center" prop="purchaseAmounts" />
        <el-table-column label="收货日期" align="center" prop="receivingTime" :formatter="dateFormatter2"/>
        <el-table-column label="零件采购" align="center" prop="partsProcurement" />
        <el-table-column label="派工单状态" align="center" prop="receiving" />
      </el-table>
    </ContentWrap>
    <ContentWrap v-if="type=='jiagong'">
      <el-table  :data="list3"  :show-overflow-tooltip="true" class="hl-table" height="500" border :cell-class-name="cellClassName2">
        <el-table-column type="index" width="100" fixed label="序号" align="center" />
        <el-table-column label="子项目名称" align="center" prop="projectSubName"  />
        <el-table-column  label="零件名称" align="center" prop="materialName"  />
        <el-table-column  label="工序" align="center" prop="procedureName"  />
        <el-table-column  label="预计开始时间" align="center" prop="startTime"  :formatter="dateFormatter2"/>
        <el-table-column label="预计结束时间" align="center" prop="endTime"  :formatter="dateFormatter2"/>
        <el-table-column label="负责人" align="center" prop="ownerName" />
        <el-table-column label="派工数量" align="center" prop="amount" />
        <el-table-column label="预计工时(天)" align="center" prop="workTime" />
        <el-table-column label="实际工时(天)" align="center" prop="workingHour" />
        <el-table-column label="报工进度(%)" align="center" prop="percentage" />
        <el-table-column label="派工单状态" align="center" prop="report" />
        <el-table-column label="是否过程检" align="center" prop="checkYn" >
          <template #default="scope">
            {{scope.row.checkYn=='0'?"是":"否"}}
          </template>
        </el-table-column>
      </el-table>
    </ContentWrap>
    <ContentWrap v-if="type=='guochengjian'">
      <el-table  :data="list4"  :show-overflow-tooltip="true" class="hl-table" height="500" border :cell-class-name="cellClassName3">
        <el-table-column type="index" width="100" fixed label="序号" align="center" />
        <el-table-column label="子项目名称" align="center" prop="projectSubName"  />
        <el-table-column  label="零件名称" align="center" prop="materialName"  />
        <el-table-column  label="工序" align="center" prop="procedureName"  />
        <el-table-column label="是否过程检" align="center" prop="checkYn" >
          <template #default="scope">
            {{scope.row.checkYn=='0'?"是":"否"}}
          </template>
        </el-table-column>
        <el-table-column label="过程检状态" align="center" prop="report" />
        <el-table-column label="负责人" align="center" prop="ownerName" />
        <el-table-column  label="报工时间" align="center" prop="endTime"  :formatter="dateFormatter2"/>
      </el-table>
    </ContentWrap>
    <ContentWrap v-if="type=='zhuangpei'">
      <el-table  :data="list5"  :show-overflow-tooltip="true" class="hl-table" height="500" border :cell-class-name="cellClassName4">
        <el-table-column type="index" width="100" fixed label="序号" align="center" />
        <el-table-column label="子项目名称" align="center" prop="projectSubName"  />
        <el-table-column  label="工序" align="center" prop="procedureName"  />
        <el-table-column  label="预计开始时间" align="center" prop="startTime"  :formatter="dateFormatter2"/>
        <el-table-column label="预计结束时间" align="center" prop="endTime"  :formatter="dateFormatter2"/>
        <el-table-column label="负责人" align="center" prop="ownerName" />
        <el-table-column label="派工数量" align="center" prop="amount" />
        <el-table-column label="预计工时(天)" align="center" prop="workTime" />
        <el-table-column label="派工人数" align="center" prop="bgAmount" />
        <el-table-column label="实际工时(天)" align="center" prop="workingHour" />
        <el-table-column label="报工进度(%)" align="center" prop="percentage" />
        <el-table-column label="派工单状态" align="center" prop="report" />
        <el-table-column label="成品检" align="center" prop="finishedProduct" />
      </el-table>
    </ContentWrap>
		<div class="text-center hl-footer">
		  <el-button @click="() => router.back()" size="large">取 消</el-button>
		</div>
	</el-card>

</template>

<script setup lang="ts">
import {inject, ref} from 'vue'
import {dateFormatter2} from "@/utils/formatTime";
import * as PlansubdetailApi from '@/api/heli/plansubdetail'

const loading = ref(false) // 列表的加载中
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const { query } = useRoute()
const router = useRouter()
const reload = inject('reload')
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const list = ref([])
const list1 = ref([]) // 设计数据
const list2 = ref([]) // 外协数据
const list3 = ref([]) // 加工数据
const list4 = ref([]) // 过程检数据
const list5 = ref([]) // 装配任务数据
const type = ref('')
const type1 = ref('')
const formData = reactive({
  id:undefined,
  projectSubId:undefined,
  flag:true,
  statusflag:true
})
	//初始化方法
	onMounted(async () => {
    console.log(query)
		formData.projectSubId = query.projectSubId
    await getList()
    const queryParams = reactive({
      projectSubId:formData.projectSubId,
      statusflag:formData.statusflag
    })
    if (list.value){
      const hasDesignTask = list.value.some(item => item.subType == "设计任务");
      if (hasDesignTask){
        list1.value= await PlansubdetailApi.getList1(queryParams)
        type.value='sheji'
        type1.value='sheji'
      }
    }

  })
const change = (val) => {
  getList()
}
const change1 =async (val) => {
  const queryParams = reactive({
    projectSubId:formData.projectSubId,
    statusflag:formData.statusflag
  })
  type.value=type1.value
  if (type.value=='sheji'){
    list1.value= await PlansubdetailApi.getList1(queryParams)
    if (list1.value.length<=0){
      type1.value=type.value
      type.value=''
    }

  }else if (type.value=='waixei'){
    list2.value= await PlansubdetailApi.getList2(queryParams)
    if (list2.value.length<=0){
      type1.value=type.value
      type.value=''
    }
  }else if (type.value=='jiagong'){
    list3.value= await PlansubdetailApi.getList3(queryParams)
    if (list3.value.length<=0){
      type1.value=type.value
      type.value=''
    }
  }else if (type.value=='guochengjian'){
    list4.value= await PlansubdetailApi.getList4(queryParams)
    if (list4.value.length<=0){
      type1.value=type.value
      type.value=''
    }
  }else if (type.value=='zhuangpei'){
    list5.value= await PlansubdetailApi.getList5(queryParams)
    console.log(list5.value.length)
    if (list5.value.length<=0){
      type1.value=type.value
      type.value=''
    }
  }
}
/** 处理某一行的点击 */
const rowClick = async (row) => {
  console.log(type1.value);
  const queryParams = reactive({
    projectSubId:formData.projectSubId,
    statusflag:formData.statusflag
  })
  type.value=''

  if (row.subType=='设计任务'){
    list1.value= await PlansubdetailApi.getList1(queryParams)
    if (list1.value.length>0){
      type.value='sheji'
    }
    type1.value='sheji'
  }else if (row.subType=='外协任务'){
    list2.value= await PlansubdetailApi.getList2(queryParams)
    if (list2.value.length>0){
      type.value='waixei'
    }
    type1.value='waixei'
  }else if (row.subType=='加工任务'){
    list3.value= await PlansubdetailApi.getList3(queryParams)
    if (list3.value.length>0){
      type.value='jiagong'
    }
    type1.value='jiagong'
  }else if (row.subType=='过程检任务'){
    list4.value= await PlansubdetailApi.getList4(queryParams)
    if (list4.value.length>0){
      type.value='guochengjian'
    }
    type1.value='guochengjian'
  }else{
    list5.value= await PlansubdetailApi.getList5(queryParams)
    if (list5.value.length>0){
      type.value='zhuangpei'
    }
    type1.value='zhuangpei'
  }
}
const cellClassName = ({ row,column }) => {
  if (column.label === '任务状态' && row.statusFlag) {
    return row.statusFlag === '1' ? 'warning-row1' :"";
  }

}
const cellClassName1 = ({ row,column }) => {
  if (column.label === '派工单状态' && row.receivingFlag) {
    return row.receivingFlag === '1' ? 'warning-row1' :"";
  }
}
const cellClassName2 = ({ row,column }) => {
  if (column.label === '派工单状态' && row.reportFlag) {
    return row.reportFlag === '1' ? 'warning-row1' :"";
  }
}
const cellClassName3 = ({ row,column }) => {
  if (column.label === '过程检状态' && row.reportFlag) {
    return row.reportFlag === '1' ? 'warning-row1' :"";
  }
}
const cellClassName4 = ({ row,column }) => {
  if (column.label === '派工单状态' && row.reportFlag) {
    return row.reportFlag === '1' ? 'warning-row1' :"";
  }
}
const cellClassName5 = ({ row,column }) => {
  if (column.label === '工单状态' && row.statusFlag) {
    return row.statusFlag === '1' ? 'warning-row1' :"";
  }

}
/** 查询设计列表 */
const getList = async () => {
  loading.value = true
  try {
    const queryParams = reactive({
      projectSubId:formData.projectSubId,
      flag:formData.flag==true?"0":"1"
    })
    const data = await PlansubdetailApi.getList(queryParams)
    list.value = data
  } finally {
    loading.value = false
  }
}

</script>

<style scoped>

:deep(.warning-row1) {
  background-color:#d9001b !important;
}

  .large-checkbox {
    transform: scale(1.5); /* 方法1：使用scale放大 */
    /* 或者 */
    /* 方法2：通过调整字体大小 */
    /* font-size: 18px; */
  }
  /* 添加 hover 效果 */
  .custom-hover-table ::v-deep .el-table__body tr:hover>td {
    background-color: #e8e8e8  !important;
    cursor: pointer; /* 如果需要鼠标变为手型 */
  }

  /* 如果表格有固定列，也需要设置 hover 效果 */
  .custom-hover-table ::v-deep .el-table__fixed,
  .custom-hover-table ::v-deep .el-table__fixed-right {
    box-shadow: none;
  }

  .custom-hover-table ::v-deep .el-table__fixed tr:hover>td,
  .custom-hover-table ::v-deep .el-table__fixed-right tr:hover>td {
    background-color: #e8e8e8 !important;
  }
</style>