yudao-admin-yiqun/yudao-ui-admin-vue3/src/views/pressure/acceptorder/index.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-button label="已撤回" value="500" />
      </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"
  />
  <RejectDialog
    v-if="cancelDialogVisible2"
    v-model:modelValue="cancelDialogVisible2"
    title="撤回原因"
    :apiParams="cancelParams2"
    :apiFn="AcceptOrderApi.withdrawAcceptOrder"
    reasonLabel="原因"
    reasonProp="reason"
    @success="handleUpdateSuccess"
  />
  <AcceptOrderFlowRecord
    v-if="acceptOrderFlowRecordVisible"
    v-model:visible="acceptOrderFlowRecordVisible"
    :id="recordId"
  />
  <AcceptOrderDetail v-if="detailVisible" v-model:visible="detailVisible" :id="detailId" :pageType="pageType" @success="handleSubmitSuccess"/>
  <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"/>
  <unitContainerForm ref="unitContainerFormRef" />
</template>
  
  <script setup lang="tsx">
  import RejectDialog from '@/views/pressure/components/RejectDialog.vue'
  import AcceptOrderFlowRecord from '@/views/pressure/components/AcceptOrderFlowRecord.vue'
  import AcceptOrderDetail from '@/views/pressure/acceptorder/detail.vue'
  import AcceptOrderBoilerDetail from '@/views/pressure2/acceptorder/boilerDetail.vue'
  import AcceptOrderPipeDetail from '@/views/pressure2/acceptorder/pipeDetail.vue'
  import unitContainerForm from '@/components/unitContainerForm/index.vue'
  import SmartTable from '@/components/SmartTable/SmartTable'
  import dayjs from 'dayjs'
  import { AcceptOrderApi } from '@/api/pressure/acceptorder'
  import { useDictStore } from '@/store/modules/dict'
  import { useRoute } from 'vue-router'
  import { useUserStore } from '@/store/modules/user'
  import { usePageLoading } from '@/hooks/web/usePageLoading'
  import { SmartInstanceExpose, SmartTableColumn, SmartSearchFormOptionItem } from '@/types/table'
  import { getDeptList } from '@/api/laboratory/dept'
  const dictStore = useDictStore()
  const userStore = useUserStore()
  const getCurrentUserRoles = computed(() => userStore.getRoles)

  const { loadStart, loadDone } = usePageLoading()
  const unitContainerFormRef = ref<InstanceType<typeof unitContainerForm>>()
  const userInfo = computed(() => userStore.user)
  const deptList = ref<SmartSearchFormOptionItem[]>([])
  const fetchDeptList = async () => {
  return new Promise<SmartSearchFormOptionItem[]>((resolve, reject) => {
    getDeptList({})
      .then((res) => {
        const options = res.map((item) => ({
          label: item.name,
          value: item.id
        }))
        deptList.value = options
        resolve(options)
      })
      .catch(() => {
        resolve([])
      })
  })
}
  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: 150,
      search: {
        type: 'input'
      },
      render: (row, value) => <el-button link type="primary" onClick={() => handleOpenDetail(row)}>{ value || '-'}</el-button>
    },
    {
      label: '设备注册代码',
      prop: 'equipCode',
      width: 140,
      hidden: true,
      search: {
        type: 'input'
      },
    },
    {
      label: '使用单位',
      prop: 'unitName',
      width: 240,
      search: {
        type: 'input'
      },
      render: (row, value) => <div  style="color: #015293; cursor: pointer" onClick={()=>handleUnitCodeFn(row.unitCode)}>{value || '-'}</div>
    },
  {
    prop: 'deptId',
    label: '部门',
    width: 120,
    fieldProps: {
      align: 'center'
    },
    search: {
      type: 'custom-select',
      fieldProps: {
        placeholder: '请选择部门',
        remoteFn: fetchDeptList
      }
    },
    render: (row: any, value) => {
      return value ? deptList.value.find((item) => item.value === value)?.label : '-'
    }
  },
    {
      label: '检验性质',
      prop: 'checkType',
      width: 100,
      search: {
        type: 'select',  // 改为select类型
        options: Object.entries(checkTypeMap).map(([value, label]) => ({
          label,
          value: parseInt(value)  // 确保值是数字类型
        }))
      },
      render: (row, 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>
                </> : <div>
                <el-button link type="primary" onClick={()=>handleGetFlowRecord(row)}>流转记录</el-button>
                <el-button link type="primary" onClick={()=>handleGetFlowCnacel(row)}>撤回</el-button>
                </div>
              }
              
            </>
          case 300: 
            // <el-button link type="primary" onClick={()=>handleCancelAcceptOrder(row)}>作废受理单</el-button>
            //  <el-button link type="primary" onClick={()=>handleCancelAcceptOrder(row)}>作废受理单</el-button> 
            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={()=>handleGetFlowRecord(row)}>流转记录</el-button>
                <el-button link type="primary" onClick={()=>handleReviewRejectReason(row)}>查看回退原因</el-button>
              </>
         case 500:
            return <> <el-button link type="primary" onClick={()=>handleSubmitAgain(row)}>重新提交</el-button> 
                    <el-button link type="primary" onClick={()=>handleGetFlowRecord(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>({
    // bpmUserId: userInfo.value.id,
    // bpmUserId: '',
    status: ['100'],
    deptId: userStore.user.deptId
  })
  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 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 handleGetFlowCnacel = async (row?: any) => { 
    // let orderNos = ''
    if(row.submitUser?.id != userInfo.value.id) {
      return ElMessage.warning('只能撤回自己提交的受理单');
    } 
   cancelDialogVisible2.value = true
    cancelParams2.value = {
      id: row.id
    }
    // if(row) {
    //   orderNos = row.acceptNo
    // } 
    // ElMessageBox.confirm(`确定撤回受理单【${orderNos}】？`, '提示', {
    //   confirmButtonText: '确定',
    //   cancelButtonText: '取消',
    //   type: 'warning'
    // }).then(() => {
    //   loading.value = true
    //   AcceptOrderApi.withdrawAcceptOrder({id: row.id}).then(() => {
    //     ElMessage.success(`受理单成功【${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 cancelDialogVisible2 = ref(false)
  const cancelParams = ref({})
  const cancelParams2 = 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
    }
    loadStart()
    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 AcceptOrderApi.getAcceptOrderPage(params)
      dataList.value = data?.list || []
      total.value = data?.total || 0
    } catch {
      dataList.value = []
      total.value = 0
      loadDone()
    } finally {
      loading.value = false
      loadDone()
    }
  }

  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 detailId = ref('')
  const pageType = ref('')
  const boilerDetailVisible = ref(false)
  const pipeDetailVisible = ref(false)

  // 打开受理单详情
  const handleOpenDetail = (row) => {
     // 根据不同设备类型跳转不同页面
    switch (row.equipMainType){
      case 200:
        boilerDetailVisible.value = true
        detailId.value = row.id
        pageType.value = row.status === '300' && !isAuditPage.value  ? 'edit' : 'detail'
        break;
      case 300:
        pipeDetailVisible.value = true
        detailId.value = row.id
        pageType.value = row.status === '300' && !isAuditPage.value  ? 'edit' : 'detail'
        break
      case 100:
      default:
        detailVisible.value = true
        detailId.value = row.id
        pageType.value = row.status === '300' && !isAuditPage.value  ? 'edit' : 'detail'
        break;
    }
   
  }
  // 重新提交-受理单
  const handleSubmitAgain = async (row) => {
    detailVisible.value = true
    detailId.value = row.id
    pageType.value = 'edit'
  }
  const handleUnitCodeFn = (code) => {
    if (!code) {
      return ElMessage.warning('该单位信息异常！')
    }
    unitContainerFormRef.value?.open('', code)
  }
  const handleSubmitSuccess = () => {
    getOrderList()
  }
  </script>