yudao-admin-yiqun/yudao-ui-admin-vue3/src/views/pressure2/acceptorder/pipeIndex.vue

<template>
  <SmartTable
    ref="SmartTableRef"
    v-model:columns="columns"
    v-model:pageNo="pageNo"
    v-model:pageSize="pageSize"
    v-model:formData="searchFormData"
    :total="total"
    :data="dataList"
    :loading="loading"
    :buttons="tableButtons"
    @on-page-no-change="() => getOrderList()"
    @on-page-size-change="() => getOrderList()"
    @on-reset="() => {
      isClaim = '100'
      handleQuery()
    }"
    @on-search="() => getOrderList()"
    @refresh="() => getOrderList()"
  >
    <template #toolbarRowExtra>
      <el-radio-group v-model="isClaim" @change="handleQuery">
        <el-radio-button label="全部" value="all" />
        <el-radio-button label="已通过" value="200" />
        <el-radio-button label="审核中" value="100" />
        <el-radio-button label="已拒绝" value="300" />
      </el-radio-group>
    </template>
  </SmartTable>
  <RejectDialog
    v-if="rejectDialogVisible"
    v-model:modelValue="rejectDialogVisible"
    title="批量拒绝"
    :apiParams="rejectParams"
    :apiFn="AcceptOrderApi.rejectBatchAcceptOrder"
    reasonLabel="拒绝原因"
    reasonProp="reason"
    @success="handleUpdateSuccess"
  />
  <RejectDialog
    v-if="cancelDialogVisible"
    v-model:modelValue="cancelDialogVisible"
    title="作废原因"
    :apiParams="cancelParams"
    :apiFn="AcceptOrderApi.cancelAcceptOrder"
    reasonLabel="原因"
    reasonProp="reason"
    @success="handleUpdateSuccess"
  />
  <AcceptOrderFlowRecord
    v-if="acceptOrderFlowRecordVisible"
    v-model:visible="acceptOrderFlowRecordVisible"
    :id="recordId"
  />
  <AcceptOrderBoilerDetail v-if="boilerDetailVisible" v-model:visible="boilerDetailVisible" :id="detailId" :pageType="pageType" @success="handleSubmitSuccess"/>
  <AcceptOrderPipeDetail v-if="pipeDetailVisible" v-model:visible="pipeDetailVisible" :id="detailId" :pageType="pageType" @success="handleSubmitSuccess"/>
</template>
  
  <script setup lang="tsx">
  import RejectDialog from '@/views/pressure/components/RejectDialog.vue'
  import AcceptOrderFlowRecord from '@/views/pressure/components/AcceptOrderFlowRecord.vue'
  import AcceptOrderBoilerDetail from '@/views/pressure2/acceptorder/boilerDetail.vue'
  import AcceptOrderPipeDetail from '@/views/pressure2/acceptorder/pipeDetail.vue'
  import SmartTable from '@/components/SmartTable/SmartTable'
  import dayjs from 'dayjs'
  import { AcceptOrderApi } from '@/api/pressure/acceptorder'
  import { PipeAcceptOrderApi } from '@/api/pressure2/pipeacceptorder'
  import { useDictStore } from '@/store/modules/dict'
  import { useRoute } from 'vue-router'
  import { useUserStore } from '@/store/modules/user'
  import { SmartInstanceExpose, SmartTableColumn } from '@/types/table'
  import {ElMessage} from "element-plus";
  import {
    allCheckTypeMap,
    checkTypeMap,
    PressureEquipMainTypeMap,
    PressureEquipTypeMap
  } from "@/utils/constants";
  const dictStore = useDictStore()
  const userStore = useUserStore()
  const getCurrentUserRoles = computed(() => userStore.getRoles)

  const route = useRoute()
  const isAuditPage = computed(() => route.path.includes('/accept-order-audit'))
  const getOrderStatus = computed(() => dictStore.getDictMap['bpm_audit_status'] || [])
  const getTypeColor = computed(() => {
    return (status) => {
      const statusMap = {
        '100': 'primary',
        '200': 'success',
        '300': 'danger',
        '400': 'warning',
        '500': 'danger'
      }
      return statusMap[status]
    }
  })
  // 收费方式映射
  const feeTypeMap = {
    100: '非合同收费',
    200: '合同收费'
  }

  // 检验性质映射
  const checkTypeMap = {
    100: '定期检查',
    200: '年度检查',
    300: '超年限检查'
  }
  const columns = ref<SmartTableColumn[]>([
    {
      type: 'selection',
      width: 60,
      align: 'center'
    },
    {
      label: '受理单号',
      prop: 'acceptNo',
      width: 140,
      search: {
        type: 'input'
      },
      render: (row, value) => <el-button link type="primary" onClick={() => handleOpenDetail(row)}>{ value || '-'}</el-button>
    },
    {
      label: '使用单位',
      prop: 'unitName',
      width: 240,
      search: {
        type: 'input'
      },
      render: (row, value) => {return value || '-'}
    },
    {
      label: '设备类型',
      prop: 'equipMainType',
      width: 100,
      search: {
        type: 'select',
        options: Object.entries(PressureEquipMainTypeMap).map(([value, label]) => ({
          label,
          value: parseInt(value)  // 确保值是数字类型
        }))
      },
      render: (row, value) => {
        return PressureEquipMainTypeMap[row.equipMainType]
      }
    },
    {
      label: '检验性质',
      prop: 'checkType',
      width: 100,
      search: {
        type: 'select',  // 改为select类型
        options: Object.entries(checkTypeMap).map(([value, label]) => ({
          label,
          value: parseInt(value)  // 确保值是数字类型
        }))
      },
      render: (row, value) => {
        if (row.equipMainType)
        return !value ? '-' : allCheckTypeMap[row.equipMainType][value]
        return !value ? '-' : checkTypeMap[value]
      }
    },
    {
      label: '检验时间',
      prop: 'appointmentDate',
      width: 120, // 增加宽度从120改为240
      search: {
        type: 'daterange', // 改为日期范围选择器
        span: 6, // 增加搜索框宽度
        fieldProps: {
          style: { width: '100%' } // 确保日期选择器占满可用空间
        }
      },
      render: (row, appointmentDate) => {return !appointmentDate ? '-' : dayjs(appointmentDate).format('YYYY-MM-DD')}
    },
    {
      label: '检验员',
      prop: 'checkers',
      width: 120,
      search: {
        type: 'input'
      },
      render: (row, checkers) => {
        const checkersName = checkers?.length ? checkers?.map(x => x?.nickname || '') : []
        const displayText = checkers.map(x => x?.nickname ||  '').join(' | ')

        return (
          <el-popover
            placement="top-start"
            title="检验员列表"
            width="240"
            trigger="hover"
            content={`已选 ${checkersName?.length || 0} 人：\n${displayText}`}
          >
            {{
              reference: () => (
                <div class="m-2">
                  {checkersName?.length && checkersName?.length > 2 ? `${checkersName.slice(0, 2).join(' | ')}...` : checkersName?.join(' | ')}
                </div>
              )
            }}
          </el-popover>
        );
      }
    },
    {
      label: '收费方式',
      prop: 'feeType',
      width: 120,
      search: {
        type: 'select',
        options: Object.entries(feeTypeMap).map(([value, label]) => ({
          label,
          value: parseInt(value)  // 确保值是数字类型
        }))
      },
      render: (row, value) => {return !value ? '-' : feeTypeMap[value]}
    },
    {
      label: '合同编号',
      prop: 'contractNo',
      width: 120,
      search: {
        type: 'input'
      },
      render: (row, value) => {return value || '-'}
    },
    {
      label: '受理单状态',
      prop: 'status',
      width: 100,
      // search: {
      //   type: 'select',
      //   options: getOrderStatus.value,
      //   fieldProps:{
      //     multiple: true
      //   }
      // },
      render: (row, value) =>
      <el-tag type={getTypeColor.value(row.status)}>
        {!row.status ? '-' : getOrderStatus.value.find(x => x.value === row.status.toString())?.label}
      </el-tag>
    },
    {
      label: '当前流程',
      prop: 'currentNode',
      width: 200,
      render: (row, currentNode) => {
        switch(row.status) {
          case 100:
            return <>
              <div>当前节点：{currentNode}</div>
              <div>状态：审核中</div>
            </>
          case 200: 
            return <>
              <div>当前节点：{currentNode}</div>
              <div>{row?.currentAuditor? (`${row.currentAuditor?.nickname}(${row.currentAuditor?.employeeNo}) 已通过`) : '-'}</div>
            </>
          case 300:
            return <>
              <div>当前节点：{currentNode}</div>
              <div>状态：{`${row.currentAuditor?.nickname}(${row.currentAuditor?.employeeNo})`} 已拒绝</div>
            </>
          case 400: 
            return '-'
          default:
            return '-'
        }
      }
    },
    {
      label: '备注',
      prop: 'remark',
      width: 200,
      render: (row, value) => {return value || '-'}
    },
    {
      label: '受理单提交人',
      prop: 'submitUser',
      width: 100,
      search: {
        type: 'input'
      },
      render: (row, submitUser) => {return !submitUser ? '-' : submitUser?.nickname}
    },
    {
      label: '受理单提交时间',
      prop: 'submitTime',
      width: 240, // 增加宽度，从120改为240或更大
      search: {
        type: 'daterange',
        span: 6, // 可以增加搜索框的span值，控制其在搜索表单中占据的宽度
        fieldProps: {
          style: { width: '100%' } // 确保日期选择器占满整个可用空间
        }
      },
      render: (row, submitTime) => {
        return !submitTime ? '-' : dayjs(submitTime).format('YYYY-MM-DD HH:mm:ss')
      }
    },
    {
      label: '审核人',
      prop: 'bpmUserId',
      hidden: true,
      width: 240, // 增加宽度，从120改为240或更大
      search: {
        type: 'selectUserModal',
        span: 6, 
      },
    },
    {
      label: '操作',
      prop: '',
      width: 140,
      fieldProps: {
        fixed: 'right',
      },
      render: (row) => {
        switch (row.status) {
          case 200:
          case 400:
            return <el-button link type="primary" onClick={()=>handleGetFlowRecord(row)}>流转记录</el-button>
          case 100:
            return <>
              {
                isAuditPage.value ? <>
                  {
                    ((row.currentNode === '业务审核' && getCurrentUserRoles.value.includes('business_review')) || (row.currentNode === '容器技术审核' && getCurrentUserRoles.value.includes('technical_review')))
                    &&
                    <>
                      <el-button link type="primary" onClick={()=>handleBatchPassOrder(row)}>通过</el-button> 
                      <el-button link type="primary" onClick={()=>handleBatchRejectOrder(row)}>拒绝</el-button>
                    </>
                  }
                  <>
                    <el-button link type="primary" onClick={()=>handleGetFlowRecord(row)}>流转记录</el-button>
                  </>
                </> :
                  <>
                    <el-button link type="primary" onClick={()=>handleGetFlowRecord(row)}>流转记录</el-button>
                  </>
              }
              
            </>
          case 300: 
            return !isAuditPage.value
                ?
              <>
                <el-button link type="primary" onClick={()=>handleSubmitAgain(row)}>重新提交</el-button> 
                <el-button link type="primary" onClick={()=>handleGetFlowRecord(row)}>流转记录</el-button>
                <el-button link type="primary" onClick={()=>handleCancelAcceptOrder(row)}>作废受理单</el-button>
              </>
                :
              <>
                <el-button link type="primary" onClick={()=>handleGetFlowRecord(row)}>流转记录</el-button>
                <el-button link type="primary" onClick={()=>handleReviewRejectReason(row)}>查看回退原因</el-button>
              </>
        }
      }
    },
  ])
  const tableButtons = computed(() => isAuditPage.value ? [
    {
      label: '',
      render: () => <el-button onClick={() => handleBatchPassOrder()} type="primary">批量通过</el-button>
    },
    {
      label: '',
      render: () => <el-button onClick={() => handleBatchRejectOrder()} type="danger">批量拒绝</el-button>
    }
  ] : [])
  const pageNo = ref(1)
  const pageSize = ref(10)
  const total = ref(0)
  const searchFormData = ref<Recordable>({
    status: ['100'],
  })
  const loading = ref(false)
  const dataList = ref([])
  const SmartTableRef = ref<SmartInstanceExpose>()
  const isClaim = ref('100')
  
  // 处理状态筛选查询
  const handleQuery = () => {
    if (isClaim.value === 'all') {
      // 清除状态筛选
      delete searchFormData.value.status
    } else {
      // 设置状态筛选
      searchFormData.value.status = [isClaim.value]
    }
    // 重置页码并触发查询
    pageNo.value = 1
    getOrderList()
  }
  

  
  // 流转记录
  const acceptOrderFlowRecordVisible = ref(false)
  const recordId = ref('')
  const handleGetFlowRecord = async (row) => {
    acceptOrderFlowRecordVisible.value = true
    recordId.value = row.id
  }

  //测试生成任务单
  const handleAuditTest = async (row) => {
    const submitData = {
      id:row.id,
      reason:'意见'
    }
    const res = await PipeAcceptOrderApi.auditTest(submitData);
    ElMessage.success(res)
  }

  // 批量通过受理单
  const handleBatchPassOrder = async (row?: any) => {
    let ids:string[] = []
    let orderNos = ''
    if(row) {
      ids = [row.id]
      orderNos = row.acceptNo
    } else {
      const selectedRows = SmartTableRef.value?.getTableRef().getSelectionRows();
      if (!selectedRows || selectedRows.length === 0) {
        ElMessage.warning('请选择受理单');
        return;
      }
      const selectedStatus = selectedRows.every((item: Record<string, any>)=> item.status == '100')
      if (selectedStatus === false) {
        return ElMessage.warning('请选择审核中状态的受理单');
      }
      ids = selectedRows.map(x => x.id)
      orderNos = selectedRows.map(x => x.acceptNo).join(', ')
    }

    ElMessageBox.confirm(`确定${!row ? '批量' : ''}通过受理单【${orderNos}】？`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      loading.value = true
      AcceptOrderApi.passBatchAcceptOrder({ids}).then(() => {
        ElMessage.success(row ? `受理单成功【${orderNos}】通过成功` : '批量通过受理单成功');
        getOrderList();
      })
    }).catch(() => {
      console.log('已取消')
    })
  }

  // 批量拒绝受理单
  const rejectDialogVisible = ref(false)
  const rejectParams = ref({})
  const handleBatchRejectOrder = async (row?: any) => {
    let ids:string[] = []

    if(row) {
      ids = [row.id]
    } else {
      const selectedRows = SmartTableRef.value?.getTableRef().getSelectionRows();
      if (!selectedRows || selectedRows.length === 0) {
        ElMessage.warning('请选择受理单');
        return;
      }
      const selectedStatus = selectedRows.every((item: Record<string, any>)=> item.status == '100')
      if (selectedStatus === false) {
        return ElMessage.warning('请选择审核中状态的受理单');
      }
      ids = selectedRows.map(x => x.id)
    }
    
    rejectDialogVisible.value = true
    rejectParams.value = {
      ids
    }
  }

  // 作废受理单
  const cancelDialogVisible = ref(false)
  const cancelParams = ref({})
  const handleCancelAcceptOrder = async (row) => {
    cancelDialogVisible.value = true
    cancelParams.value = {
      id: row.id
    }
  }

  // 查看回退原因
  const handleReviewRejectReason = (row) => {
    ElMessageBox.confirm(`拒绝原因：${row.reason}`, '查看回退原因', {
      confirmButtonText: '确定',
      cancelButtonText: '关闭',
      type: 'warning'
    })
  }

  const handleUpdateSuccess = () => {
    getOrderList()
  }

  // 获取受理单列表
  const getOrderList = async () => {
    loading.value = true
    const params: Record<string, any> = {
      pageNo: pageNo.value,
      pageSize: pageSize.value,
      ...searchFormData.value,
      isAudit: true
    }
    try {
      // 处理submitTime日期范围
      if (params.submitTime && Array.isArray(params.submitTime) && params.submitTime.length === 2) {
        // 设置起始日期为当天的00:00:00
        const startDate = dayjs(params.submitTime[0]).startOf('day').format('YYYY-MM-DD HH:mm:ss')
        // 设置结束日期为当天的23:59:59
        const endDate = dayjs(params.submitTime[1]).endOf('day').format('YYYY-MM-DD HH:mm:ss')

        // 替换原始参数中的submitTime
        params.submitTimeStart = startDate
        params.submitTimeEnd = endDate
        // 删除原始的submitTime参数
        delete params.submitTime
      }
      // 处理appointmentDate日期范围 - 保持数组格式，但添加时间部分
      if (params.appointmentDate && Array.isArray(params.appointmentDate) && params.appointmentDate.length === 2) {
        // 设置起始日期为当天的00:00:00
        params.appointmentDate[0] = dayjs(params.appointmentDate[0]).format('YYYY-MM-DD')
        // 设置结束日期为当天的23:59:59
        params.appointmentDate[1] = dayjs(params.appointmentDate[1]).format('YYYY-MM-DD')
      }

      const data = await PipeAcceptOrderApi.getAcceptOrderPage(params)
      dataList.value = data.list
      total.value = data.total
    } finally {
      loading.value = false
    }
  }

  onMounted(() => {
    const { unitName, filterCancel, bpmUserId } = route.query as Recordable
    if(unitName){
      searchFormData.value.unitName = unitName
    }
    if(filterCancel){
      const otherStatus = getOrderStatus.value.filter(x => x.value != filterCancel).map(i=>`${i.value}`)
      searchFormData.value.status = otherStatus
    }
     if(bpmUserId){
      searchFormData.value.bpmUserId = bpmUserId
    }
    SmartTableRef.value?.setSearchForm(searchFormData.value)
    getOrderList()
  })

  const detailVisible = ref(false)
  const boilerDetailVisible = ref(false)
  const pipeDetailVisible = ref(false)
  const detailId = ref('')
  const pageType = ref('')
  // 打开受理单详情
  const handleOpenDetail = (row) => {
    // 根据不同设备类型页面打开详情
    switch (row.equipMainType) {
      case 200:
        boilerDetailVisible.value = true
        break;
      case 300:
        pipeDetailVisible.value = true
        break;
      default:
        detailVisible.value = true
        break;
    }
    detailId.value = row.id
    pageType.value = row.status === '300' && !isAuditPage.value  ? 'edit' : 'detail'
  }
  // 重新提交-受理单
  const handleSubmitAgain = async (row) => {
    // 根据不同设备类型页面打开详情
    switch (row.equipMainType) {
      case 200:
        boilerDetailVisible.value = true
        break;
      case 300:
        pipeDetailVisible.value = true
        break;
      default:
        detailVisible.value = true
        break;
    }
    detailId.value = row.id
    pageType.value = 'edit'
  }
  const handleSubmitSuccess = () => {
    getOrderList()
  }
  </script>