yudao-admin-yiqun/yudao-ui-admin-vue3/src/views/pressure2/boilerchecker/recordCheck.vue

<template>
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="100px"
    >
      <el-form-item label="任务单号" prop="orderNo">
        <el-input
          v-model="queryParams.orderNo"
          placeholder="请输入任务单号"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="记录编号" prop="recordNo">
        <el-input
          v-model="queryParams.recordNo"
          placeholder="请输入记录编号"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="设备注册代码" prop="equipCode">
        <el-input
          v-model="queryParams.equipCode"
          placeholder="请输入设备注册代码"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="出厂编号" prop="productCode">
        <el-input
          v-model="queryParams.productCode"
          placeholder="请输入出厂编号"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="单位名称" prop="unitName">
        <el-input
          v-model="queryParams.unitName"
          placeholder="请输入单位名称"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="检验类型" prop="checkType">
        <el-select
          v-model="queryParams.checkType"
          placeholder="请选择检验类型"
          clearable
          class="!w-240px"
        >
          <el-option
            v-for="(item, key) in PressureBoilerCheckTypeMap"
            :key="key"
            :label="item"
            :value="key"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="检验项目" prop="checkProject">
        <el-input
          v-model="queryParams.checkProject"
          placeholder="请输入检验项目"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="检验员" prop="checkUserStrIds">
        <el-select
          class="!w-240px"
          v-model="queryParams.checkUserStrIds"
          readonly
          clearable
          placeholder="请选择检验员"
          multiple
          popper-class="user-select-popper"
          @click.stop.prevent="() => handleOpenUserDialog(recheckStrIdsOpts, 'checkUserStrIds')"
        >
          <el-option
            v-for="child in recheckStrIdsOpts"
            :key="child && child.id"
            :label="child.nickName"
            :value="child.id"
          />
        </el-select>
      </el-form-item>
<!--      <el-form-item label="已检天数" prop="checkedDays">-->
<!--        <el-input-->
<!--          v-model="queryParams.checkedDays"-->
<!--          placeholder="请输入已检天数"-->
<!--          clearable-->
<!--          @keyup.enter="handleQuery"-->
<!--          class="!w-240px"-->
<!--        />-->
<!--      </el-form-item>-->
      <el-form-item label="审核状态" prop="recheckStatus">
        <el-select v-model="queryParams.recheckStatus" placeholder="请选择审核状态" clearable class="!w-240px">
          <el-option label="全部" value="all" />
          <el-option
            v-for="(item, key) in PressureCheckerRecheckStatusMap"
            :key="key"
            :label="item"
            :value="key"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="校核人" prop="recheckStrIds">
        <el-select
          class="!w-240px"
          v-model="queryParams.recheckStrIds"
          readonly
          clearable
          placeholder="请选择校核人"
          multiple
          popper-class="user-select-popper"
          @click.stop.prevent="() => handleOpenUserDialog(recheckStrIdsOpts, 'recheckStrIds')"
        >
          <el-option
            v-for="child in recheckStrIdsOpts"
            :key="child && child.id"
            :label="child.nickName"
            :value="child.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="项目负责人" prop="managerStrIds">
        <el-select
          class="!w-240px"
          v-model="queryParams.managerStrIds"
          readonly
          clearable
          placeholder="请选择项目负责人"
          multiple
          popper-class="user-select-popper"
          @click.stop.prevent="() => handleOpenUserDialog(recheckStrIdsOpts, 'managerStrIds')"
        >
          <el-option
            v-for="child in recheckStrIdsOpts"
            :key="child && child.id"
            :label="child.nickName"
            :value="child.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>

  <!-- 列表 -->
  <ContentWrap>
    <!-- <el-radio-group class="mb-20px"  v-model="isClaim" @change="handleQuery">
      <el-radio-button label="全部" value="all" />
      <el-radio-button label="审核中" value="100" />
      <el-radio-button label="已通过" value="200" />
      <el-radio-button label="已拒绝" value="300" />
    </el-radio-group> -->
    <el-table v-loading="loading" :data="list" :stripe="true" border>
      <el-table-column label="任务单号" align="center" prop="orderNo" min-width="150px" />
      <el-table-column label="记录编号" align="center" prop="subReportNo" min-width="205px">
        <template #default="scope">
          <div class="report-number-cell">
            <span
              v-if="getReportTypeIcon(scope.row.reportType)"
              :class="getReportTypeIconClass(scope.row.reportType)"
            >
              {{ getReportTypeIcon(scope.row.reportType) }}
            </span>
            <span>{{ scope.row.subReportNo || '-' }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="设备注册代码" align="center" prop="equipCode" min-width="200px">
        <template #default="{ row }">
          {{ row.equipCode }}
          <div class="mt-8px">
            <el-tag v-if="row.productCode" type="success">
              {{ row.productCode }}
            </el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="检验性质" align="center" prop="checkType" min-width="120px">
        <template #default="scope">
          {{ PressureBoilerCheckTypeMap[scope.row.checkType] || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="单位名称" align="center" prop="unitName" min-width="200px" />
      <el-table-column label="检验项目" align="center" prop="reportName" min-width="150px">
        <template #default="{row}">
          <template v-if="!row.recheckList || !row.recheckList?.length">
            <el-row style="justify-content: center;">{{ getReportDisplayName(row, row.reportId, row.reportName) }}</el-row>
          </template>
          <template v-else>
            <el-row style="justify-content: center;" v-for="item in row.recheckList" :key="JSON.stringify(item)">{{ getReportDisplayName(row, item.reportId, item.reportName) }}</el-row>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="项目负责人" align="center" prop="manager" min-width="120px">
        <template #default="scope">
          {{
            scope.row.manager
              ? `${scope.row.manager.nickname} (${scope.row.manager.employeeNo})`
              : '-'
          }}
        </template>
      </el-table-column>
      <el-table-column label="检验员" align="center" prop="checkUsers" min-width="150px">
        <template #default="scope">
          <div v-if="scope.row.checkUsers && scope.row.checkUsers.length > 0">
            <div v-for="user in scope.row.checkUsers" :key="user.id">
              {{ user.nickname }} ({{ user.employeeNo }})
            </div>
          </div>
          <div v-else>-</div>
        </template>
      </el-table-column>
      <el-table-column label="校核人" align="center" prop="dataEntry" min-width="120px">
        <template #default="scope">
          {{ scope.row.recheckName || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="剩余期限（工作日）" align="center" prop="workDays" min-width="100px">
        <template #default="scope">
          {{ scope.row.workDays || '10' }}
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="recheckStatus" min-width="120px">
        <template #default="scope">
          <el-tag :type="getStatusTagType(scope.row.recheckStatus)">
            {{ PressureCheckerRecheckStatusMap[scope.row.recheckStatus] || '未知状态' }}
          </el-tag>
        </template>
      </el-table-column>
      <!-- 退回原因 -->
      <el-table-column label="退回原因" align="center" prop="recheckReason" min-width="150px">
        <template #default="scope">
          {{ scope.row.recheckReason || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="提交时间" align="center" prop="submitTime" min-width="155px">
        <template #default="scope">
          {{ formatDate(scope.row.submitTime) }}
        </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column label="操作" align="center" min-width="150px" fixed="right">
        <template #default="scope">
          <el-button
            link
            type="primary"
            @click="handleCheck(scope.row)"
            v-if="scope.row.recheckStatus === PressureCheckerRecheckStatus.AUDITING"
          >
            校核
          </el-button>
          <el-button
            link
            type="primary"
            @click="handleView(scope.row)"
            v-if="scope.row.recheckStatus !== PressureCheckerRecheckStatus.AUDITING"
          >
            详情
          </el-button>

          <el-button link type="primary" @click="handleShowRecord(scope.row)"> 流转记录 </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </ContentWrap>
  <AuditCheckRecord
    v-if="showAuditCheckRecord"
    v-model:visible="showAuditCheckRecord"
    :reportUrl="reportUrl"
    v-model:recheckInfo="recheckInfo"
    :auditId="auditId"
    :id="idValue"
    :apiParams="auditApiParams"
    :pageType="pageType"
    :flagStatus="true"
    :equipId="equipId"
    :reportType="reportType"
    :rejectFn="!recheckInfo?.recheckList ? BoilerTaskOrderApi.rejectRecordTemplateAudit : BoilerTaskOrderApi.batchRejectRecheck"
    :passFn="!recheckInfo?.recheckList ? BoilerTaskOrderApi.passRecordTemplateAudit : BoilerTaskOrderApi.batchPassRecheck"
    @close="handleCloseAuditDetail"
  />

  <!-- 流转记录对话框 -->
  <ReportRecordDialog v-model:visible="showRecordDialog" :selected-item="selectedRecordItem" />

  <!-- 选择人员公共弹窗 -->
  <CustomDialog
    v-model="customUserDialogVisible"
    :dialogAttrs="{
      zIndex: 10006
    }"
    @confirm="handleUserConfirm"
  >
    <el-input
      v-model="userQueryData.nickName"
      clearable
      placeholder="请输入名称"
      @keyup.enter="handleFetchUserList"
      style="margin-bottom: 14px"
    >
      <template #append>
        <el-button @click="handleFetchUserList">
          <Icon icon="ep:search" />
        </el-button>
      </template>
    </el-input>

    <SmartTable
      ref="userTableRef"
      v-model:pageNo="userQueryData.pageNo"
      v-model:pagesize="userQueryData.pageSize"
      :total="userQueryData.total"
      v-model:columns="userColumns"
      :data="userTableList"
      :buttons="[]"
      :showSettingTools="false"
      :showSearch="false"
      :showRefresh="false"
      @on-page-size-change="onPageSizeChange"
      @on-page-no-change="onPageNoChange"
    />
  </CustomDialog>
</template>

<script setup lang="ts">
import AuditCheckRecord from './AuditCheckRecord.vue'
import ReportRecordDialog from './components/ReportRecordDialog.vue'
import { ref, reactive, onMounted, computed } from 'vue'
import { useMessage } from '@/hooks/web/useMessage'
import { BoilerTaskOrderApi } from '@/api/pressure2/boilertaskorder'
import {
  PressureCheckerRecheckStatus,
  PressureReportType, PressureBoilerCheckTypeMap, PressureCheckerMyTaskStatusMap
} from '@/utils/constants'
import SmartTable from '@/components/SmartTable/SmartTable'
import { getUserList } from '@/api/common/user'
import { useUserStore } from '@/store/modules/user'
import { cloneDeep } from 'lodash-es'
import { useRoute } from 'vue-router'
import { formatDate } from '@/utils/formatTime'


const PressureCheckerRecheckStatusMap = {
  [PressureCheckerRecheckStatus.AUDITING]: '审核中',
  [PressureCheckerRecheckStatus.APPROVED]: '已通过',
  [PressureCheckerRecheckStatus.REJECTED]: '退回',
}

const route = useRoute()
const userStore = useUserStore()
const userInfo = computed(() => userStore.user)
/** 记录校核页面 */
defineOptions({ name: 'BoilerCheckerRecordCheck' })
const fieldKey = ref('')
const loading = ref(true)
const list = ref<any[]>([])
const total = ref(0)
// 人员选择弹窗
const checkFormOptions = ref<any[]>([])
const queryParams = reactive<Recordable>({
  pageNo: 1,
  pageSize: 10,
  orderNo: undefined,
  recordNo: undefined,
  productCode: undefined,
  equipCode: undefined,
  unitName: undefined,
  checkType: undefined,
  checkProject: undefined,
  // checkUserStrIds: [userInfo.value.id], //检验员, 用户id集合
  checkUserStrIds: [], //检验员, 用户id集合
  checkedDays: undefined,
  //status: 'all',
  recheckStrIds: [userInfo.value.id],
  managerStrIds: [], //项目负责人,用户id集合
  recheckStatus: '100'
})

const queryFormRef = ref()
const message = useMessage()

// 获取状态标签类型
const getStatusTagType = (
  status: number
): 'success' | 'warning' | 'info' | 'primary' | 'danger' => {
  const statusTagMap: Record<number, 'success' | 'warning' | 'info' | 'primary' | 'danger'> = {
    [PressureCheckerRecheckStatus.AUDITING]: 'primary',
    [PressureCheckerRecheckStatus.APPROVED]: 'success',
    [PressureCheckerRecheckStatus.REJECTED]: 'danger'
  }
  return statusTagMap[status] || 'info'
}

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const params: Record<string, any> = cloneDeep(queryParams)
    params.recheckStrIds = params.recheckStrIds.join(',')
    params.managerStrIds = params.managerStrIds.join(',')
    params.checkUserStrIds = params.checkUserStrIds.join(',')
    //if(params.status === 'all') delete params.status
    if(params.recheckStatus === 'all') delete params.recheckStatus
    if(!params.recheckStrIds) delete params.recheckStrIds
    if(!params.managerStrIds) delete params.managerStrIds
    if(!params.checkUserStrIds) delete params.checkUserStrIds
    const data = await BoilerTaskOrderApi.getTaskOrderOrderItemRecheckPage(params)
    list.value = data.list || []
    total.value = data.total || 0
  } catch (error) {
    console.error('获取记录校核列表失败:', error)
    message.error('获取列表数据失败')
  } finally {
    loading.value = false
  }
}
// const isClaim = ref('100')
/** 搜索按钮操作 */
const handleQuery = () => {
  // if (isClaim.value === 'all') {
  //   // 清除状态筛选
  //   delete queryParams.recheckStatus
  // } else {
  //   // 设置状态筛选
  //   queryParams.recheckStatus = [isClaim.value]
  // }
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  queryParams.recheckStrIds = [userInfo.value.id]
  handleQuery()
}

/** 校核 */
const showAuditCheckRecord = ref(false)
const reportUrl = ref('')
const auditId = ref('')
const idValue = ref('')
const equipId = ref('')
const auditApiParams = ref({})
const reportType = ref(0)
const pageType = ref('check')
const recheckInfo = ref({})
const handleCheck = async (row: any) => {
  //测试先注释
  //if (!row.reportUrl) return ElMessage.warning('缺少记录文件地址，请联系管理员！')
  pageType.value = 'check'
  showAuditCheckRecord.value = true
  reportUrl.value = row.reportUrl
  auditId.value = row.reportId
  equipId.value = row.equipId
  idValue.value = row.id
  auditApiParams.value = {
    id: row.reportId
  }
  // 从后端获取同一 orderItemId + 当前校核人 的所有待校核项（跨报告合并），不受分页影响
  const relatedItems = await BoilerTaskOrderApi.getRecheckRelatedItems(row.id)
  recheckInfo.value = {
    ...row,
    recheckList: relatedItems || []
  }
  //console.log(row.reportType, !row.reportType ? 0 : Number(row.reportType))
  reportType.value = !row.reportType ? 0 : Number(row.reportType)
  console.log(equipId.value);
}

// 审核详情页面关闭回调
const handleCloseAuditDetail = () => {
  auditApiParams.value = {}
  reportType.value = 0
  getList()
}
/** 查看详情 */
const handleView = (row: any) => {
  // 根据实际需求实现详情查看功能
  pageType.value = 'detail'
  showAuditCheckRecord.value = true
  reportUrl.value = row.reportUrl
  auditId.value = row.reportId
  equipId.value = row.equipId
  idValue.value = row.id
  auditApiParams.value = {
    id: row.reportId
  }
  reportType.value = row.reportType
  // message.info('详情查看功能待实现')
}

/** 流转记录对话框状态 */
const showRecordDialog = ref(false)
const selectedRecordItem = ref<any>(null)

// 显示流转记录
const handleShowRecord = (row: any) => {
  selectedRecordItem.value = {
    ...row,
    id: row.reportId || row.id
  }
  showRecordDialog.value = true
}

// 人员选择弹窗
// const checkFormItem = ref<any>({})
const recheckStrIdsOpts = ref<any[]>([
  { id: userInfo.value.id, nickName: userInfo.value?.nickname }
])

const userTableRef = ref()
const customUserDialogVisible = ref(false)
interface UserListQuery {
  nickName: string
  pageNo: number
  pageSize: number
  total?: number
}

const userQueryData = reactive<UserListQuery>({
  nickName: '',
  pageNo: 1,
  pageSize: 10,
  total: 0
})

const userTableList = ref<any[]>([])
const userColumns = ref<any[]>([
  {
    type: 'selection',
    width: '50px'
  },
  {
    label: '工号',
    prop: 'employeeNo'
  },
  {
    label: '姓名',
    prop: 'nickname'
  },
  {
    label: '部门',
    prop: 'deptName'
  }
])
// 打开用户选择框
const handleOpenUserDialog = (options: any, key: string) => {
  checkFormOptions.value = options
  userQueryData.nickName = ''
  fieldKey.value = key
  userQueryData.pageNo = 1
  userQueryData.pageSize = 10
  handleFetchUserList()
}

// 获取用户信息
const handleFetchUserList = async () => {
  const queryParams: UserListQuery = {
    ...userQueryData
  }
  delete queryParams.total
  const result = await getUserList(queryParams)
  userTableList.value = result.list
  userQueryData.total = result.total
  customUserDialogVisible.value = true
}

const onPageSizeChange = (val) => {
  userQueryData.pageSize = val
  handleFetchUserList()
}
const onPageNoChange = (val) => {
  userQueryData.pageNo = val
  handleFetchUserList()
}
const handleUserConfirm = () => {
  console.log('getTableRef', userTableRef.value.getTableRef())
  const selectRows = userTableRef.value.getTableRef().getSelectionRows()
  console.log('selectRows', selectRows)
  // 过滤组合合成options
  const currOptions = checkFormOptions.value.map((item) => item.id) || []
  selectRows
    .filter((item) => !currOptions.includes(item.id))
    .forEach((item) => {
      checkFormOptions.value.push({
        id: item.id,
        nickName: item.nickname,
        employeeNo: item.employeeNo
      })
    })
  queryParams[fieldKey.value] = [
    ...new Set([...queryParams[fieldKey.value], ...selectRows.map((row) => row.id)])
  ]
  customUserDialogVisible.value = false
}

 // 获取报告类型图标样式类
const getReportTypeIconClass = (reportType): string => {
  reportType = Number(reportType)
  switch (reportType) {
    case PressureReportType.MAIN: // 100 主报告
      return 'report-type-icon main'
    case PressureReportType.SUB: // 200 子报告
      return 'report-type-icon sub'
    case PressureReportType.SINGLE: // 300 独审报告
      return 'report-type-icon single'
    case PressureReportType.SUBCONTRACT:
      return 'report-type-icon subcontract'
    default:
      return 'report-type-icon'
  }
}

// 获取报告类型图标
const getReportTypeIcon = (reportType) => {
  reportType = Number(reportType)
  switch (reportType) {
    case PressureReportType.MAIN: // 100 主报告
      return '主'
    case PressureReportType.SINGLE: // 300 独审报告
      return '独'
    case PressureReportType.SUB: // 200 子报告
      return '子'
    case PressureReportType.SUBCONTRACT:
      return '分'
    default:
      return null // 子报告或未知类型不显示图标
  }
}

// 获取检验项目显示名称（电站锅炉内检有部件的项目，名称前加"部件名-"）
const getReportDisplayName = (row: any, reportId: string, reportName: string): string => {
  // 优先使用子报告自身的 partName，其次使用 row 的 partName
  let partName = ''
  if (row?.recheckList && row.recheckList.length) {
    const item = row.recheckList.find((r: any) => r.reportId === reportId)
    partName = item?.partName || ''
  }
  if (!partName) {
    partName = row?.partName || ''
  }
  if (partName) {
    return `${partName}-${reportName || ''}`
  }
  return reportName || ''
}

watch(() => route.path, async () => {
  if (route.path === '/gljy/record-check/boiler') {
    await getList()
  }
})

/** 初始化 */
onMounted(() => {
  const { searchUserId } = route.query
  if (searchUserId) {
    queryParams.checkUserStrIds = []
    queryParams.recheckStrIds = [searchUserId as string]
    queryParams.managerStrIds = []
  }
  getList()
})
</script>

<style lang="scss" scoped>
// 可以添加必要的样式
</style>
<style lang="scss" scoped>
.user-select-popper {
  display: none !important;
}

.report-number-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;

  .report-type-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background-color: var(--el-color-primary);
    color: white;
    border-radius: 3px;
    font-size: 12px;
    font-weight: bold;
    flex-shrink: 0;

    &.main {
      background-color: var(--el-color-primary); // 主报告使用系统primary颜色
    }
    &.sub {
      background-color: var(--el-color-primary); // 主报告使用系统primary颜色
    }

    &.single {
      background-color: #e6a23c; // 独审报告使用橙色
    }
    &.subcontract {
      background-color: #afadf6; // 分包项目使用蓝色
    }
  }
}
</style>