yudao-admin-yiqun/yudao-ui-admin-vue3/src/views/pressure2/refuseAnnualInspection/index.vue

<!--
 * @Author: zhuMingXi
 * @Date: 2025/07/31 15:34:30
 * @LastEditors: zhuMingXi
 * @LastEditTime: 2025/07/31 15:34:30
 * @Description: 拒绝年检
 * @FilePath:  FilePath
 -->

<template>
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <div class="flex gap-2">
      <el-form
        class="-mb-15px flex-1"
        :model="queryParams"
        ref="queryFormRef"
        :inline="true"
        label-width="100px"
      >
        <el-row getter="24">
          <el-col v-bind="ElColSpanConfig">
            <el-form-item label="设备注册代码" prop="equipCode" class="w-full">
              <el-input
                v-model="queryParams.equipCode"
                placeholder="请输入设备注册代码"
                clearable
                @keyup.enter="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col v-bind="ElColSpanConfig">
            <el-form-item class="w-full" label="使用证编号" prop="useRegisterNo">
              <el-input
                v-model="queryParams.useRegisterNo"
                placeholder="请输入使用证编号"
                clearable
                @keyup.enter="handleQuery"
                class="w-full"
              />
            </el-form-item>
          </el-col>
          <el-col v-bind="ElColSpanConfig">
            <el-form-item class="w-full" label="产品编号" prop="productNo">
              <el-input
                v-model="queryParams.productNo"
                placeholder="请输入产品编号"
                clearable
                @keyup.enter="handleQuery"
                class="w-full"
              />
            </el-form-item>
          </el-col>
          <el-col v-bind="ElColSpanConfig">
            <el-form-item class="w-full" label="设备种类" prop="equipType">
              <el-select v-model="queryParams.equipType" placeholder="请选择设备种类" clearable>
                <el-option
                  v-for="dict in equipPipeTypeOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
<!--          <el-col v-bind="ElColSpanConfig">-->
<!--            <el-form-item label="检验性质" prop="checkTypeName" class="w-full">-->
<!--              <el-select v-model="queryParams.checkTypeName" placeholder="请选择" clearable>-->
<!--                <el-option-->
<!--                  v-for="(item) in allCheckTypeOptions"-->
<!--                  :key="item.value"-->
<!--                  :label="item.label"-->
<!--                  :value="item.value"-->
<!--                />-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
        </el-row>
        <el-collapse-transition>
          <el-row getter="24" v-show="isSearchExpanded">
            <el-col v-bind="ElColSpanConfig">
              <el-form-item class="w-full" label="单位名称" prop="unitName">
                <el-input
                  class="w-full"
                  v-model="queryParams.unitName"
                  placeholder="请输入单位名称"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col v-bind="ElColSpanConfig">
              <el-form-item class="w-full" label="区域" prop="equipDistrict">
                <AreaSelect
                  v-model="queryParams.equipDistrict"
                  :areaType="'gz'"
                  :flag="false"
                  placeholder="请选择区域"
                  class="w-full"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-collapse-transition>
      </el-form>
      <div>
        <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-button link @click="isSearchExpanded = !isSearchExpanded">
          <el-icon>
            <ArrowUp v-if="isSearchExpanded" />
            <ArrowDown v-else />
          </el-icon>
          {{ isSearchExpanded ? '收起' : '展开' }}
        </el-button>
      </div>
    </div>
  </ContentWrap>

  <!-- 列表 -->
  <ContentWrap>
    <el-row class="mb-2">
      <el-button type="primary" @click="handleExport">导出</el-button>
      <el-button type="primary" @click="handleBatchReturn">批量退回</el-button>
      <el-button type="primary" @click="handleReturnRecord">退回记录</el-button>
    </el-row>
    <el-table v-loading="loading" :data="list" :stripe="true" border ref="tableRef">
      <el-table-column type="selection" width="50" align="center" fixed="left" />
      <el-table-column label="操作" align="center" width="135" fixed="left">
        <template #default="scope">
          <el-button link type="primary" @click="handleRemark(scope.row)"> 备注 </el-button>
          <el-button link type="primary" @click="handleReturn(scope.row)"> 退回 </el-button>
        </template>
      </el-table-column>
      <el-table-column
        label="设备类型"
        align="center"
        prop="equipMainType"
        min-width="100"
        show-overflow-tooltip
      >
        <template #default="{row}">
          <div>{{equipMainTypeList.find((x) => x.value == row.equipMainType)?.label || '-'}}</div>
        </template>
      </el-table-column>
      <el-table-column label="设备注册代码" align="center" prop="equipCode" min-width="150">
        <template #default="{ row }">
          <div>
            {{ row.equipCode }}
            <el-tag v-if="row.productNo" type="success">
              {{ row.productNo }}
            </el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="单位名称"
        align="center"
        prop="unitName"
        min-width="200"
        show-overflow-tooltip
      >
       <template #default="{row}">
        <div style="color: #015293; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" @click="handleUnitCodeFn(row.unitCode)">{{row.unitName}}</div>
       </template>
      </el-table-column>
      <el-table-column label="区域" align="center" prop="equipDistrictName" min-width="130" />
      <el-table-column label="使用证编号" align="center" prop="useRegisterNo" min-width="130" />
      <el-table-column label="检验性质" align="center" prop="checkTypeName" min-width="120">
        <template #default="{ row }">
          {{ row.checkTypeName || '-'}}
        </template>
      </el-table-column>
      <el-table-column label="运行状态" align="center" prop="equipStatusName" min-width="120">
        <template #default="{ row }">
           {{ row.equipStatusName || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="下次检验日期" align="center" prop="nextCheckDate" width="120">
        <template #default="{ row }">
          {{ row.nextCheckDate ? formatArrayDate(row.nextCheckDate) : '-' }}
        </template>
      </el-table-column>
<!--      <el-table-column label="下次年检" align="center" prop="nextYearCheckDate" width="120">-->
<!--        <template #default="{ row }">-->
<!--          {{ row.nextYearCheckDate ? formatArrayDate(row.nextYearCheckDate) : '-' }}-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column label="超年限检验" align="center" prop="nextExpiredCheckDate" width="120">-->
<!--        <template #default="{ row }">-->
<!--          {{ row.nextExpiredCheckDate ? formatArrayDate(row.nextExpiredCheckDate) : '-' }}-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="设备种类" align="center" prop="equipType" min-width="120">
        <template #default="{ row }">
          {{ getEquipTypeLabel(row) }}
        </template>
      </el-table-column>
      <el-table-column
        label="拒检原因"
        align="center"
        prop="reasonDict"
        min-width="150"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          {{ getRowReason(row) }}
        </template>
      </el-table-column>
      <el-table-column
        label="说明"
        align="center"
        prop="reason"
        min-width="220"
        show-overflow-tooltip
      />
      <el-table-column
        label="备注"
        align="center"
        prop="remark"
        min-width="220"
        show-overflow-tooltip
      />
    </el-table>
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </ContentWrap>

  <!-- 表单弹窗：添加/修改 -->
  <RefuseAnnualInspectionRemarkForm ref="formRef" @success="getList" />
  <unitContainerForm ref="unitContainerFormRef" />
</template>

<script setup lang="ts">
import { formatArrayDate } from '@/utils/formatTime'
import fetchAPis, { ListItemVo } from './index.api'
import RefuseAnnualInspectionRemarkForm from './RefuseAnnualInspectionRemarkForm.vue'
import { DICT_TYPE, getStrDictOptions, mergeDictOptionsWithValueAsLabel } from '@/utils/dict'
import { ElMessageBox, ElTable } from 'element-plus'
import unitContainerForm from '@/components/unitContainerForm/index.vue'
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
import AreaSelect from '@/views/pressure/appointmentconfirmorderrefuseitem/components/AreaSelect.vue'
import { useRouter } from 'vue-router'

defineOptions({ name: 'RefuseAnnualInspectionPressure2' })

const router = useRouter()
const dictStore = useDictStore()

const equipBoilerTypeOptions = getStrDictOptions(DICT_TYPE.SYSTEM_EQUIP_BOILER_TYPE)
const equipMainTypeList = dictStore.getDictMap[DICT_TYPE.PRESSURE2_EQUIP_MAIN_TYPE]
const equipPipeTypeOptions = getStrDictOptions(DICT_TYPE.PIPE_TYPE)
const getEquipTypeLabel = (row) => {

  if (row.equipMainType == PressureEquipMainType.BOILER){
    const item = equipBoilerTypeOptions.find((x) => x.value == row.equipType)
    return item?.label || '锅炉'
  }else if (row.equipMainType == PressureEquipMainType.PIPE){
    const item = equipPipeTypeOptions.find((x) => x.value == row.equipType)
    return item?.label || '管道'
  }


}
const unitContainerFormRef = ref<InstanceType<typeof unitContainerForm>>()
const isSearchExpanded = ref(false)
const ElColSpanConfig = reactive({
  // xs: 12,
  // sm: 12,
  // md: 8,
  // lg: 8,
  // xl: 6
  span: 6
})
const loading = ref(true) // 列表的加载中
const list = ref<ListItemVo[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive<Recordable>({
  //   isReportCity: false,
  //   equipType: 100,
  pageNo: 1,
  pageSize: 10
  // createTime: [],
  // checkType: '',
  // equipCode: ''
})

const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中

import { useDictStore } from '@/store/modules/dict'
import {
  AppointmentConfirmOrderRefuseItemApi,
  AppointmentConfirmOrderRefuseItemVO
} from '@/api/pressure2/appointmentconfirmorderrefuseitem'
import {
  PressureEquipMainType,
} from "@/utils/constants";
import download from "@/utils/download";
const getReasonDictStatus = computed(() => dictStore.getDictMap['refuseInspectedCategory'])
const getRowReason = (row) => {
  return getReasonDictStatus.value.find((x) => x.value == row.reasonDict)?.label || '-'
}

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await fetchAPis.getPageList(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

/** 添加/修改操作 */
const formRef = ref()

/**备注 */
const handleRemark = (row: ListItemVo) => {
  formRef.value.open('备注', row.id)
}
/** 退回操作 */
const handleReturn = (row: ListItemVo) => {
  ElMessageBox.confirm('确认退回？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    fetchAPis.rollback({ id: row.id, scene: row.scene, businessType: 2 }).then((res) => {
      if (res) {
        ElMessage.success('退回成功')
        getList()
      }
    })
  })
}
/** 提交 */
// const handleSubmit = (row: ListItemVo) => {
//   ElMessageBox.confirm('确认提交？', '提示', {
//     confirmButtonText: '确定',
//     cancelButtonText: '取消',
//     type: 'warning'
//   }).then(() => {
//     const fetchFn = row.checkType === '200' ? fetchAPis.submitCreate : fetchAPis.submitAudit
//     fetchFn({ id: row.id }).then((res) => {
//       if (res) {
//         ElMessage.success('提交成功')
//         getList()
//       }
//     })
//   })
// }

/** 导出按钮操作 */
const message = useMessage() // 消息弹窗
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
    const data =
      await AppointmentConfirmOrderRefuseItemApi.exportRefuseYearCheckExcel(
        queryParams
      )
    download.excel(data, '拒绝年检设备项目.xls')
  } catch {
  } finally {
    exportLoading.value = false
  }
}
const handleUnitCodeFn = (code) => {
  if (!code) {
    return ElMessage.warning('该单位信息异常！')
  }
  unitContainerFormRef.value?.open('', code)
}
/**批量退回 */
const tableRef = ref<InstanceType<typeof ElTable>>()
const handleBatchReturn = async () => {
  const selectedRows: AppointmentConfirmOrderRefuseItemVO[] =
    tableRef.value?.getSelectionRows() || []
  if (!selectedRows.length) return ElMessage.warning('请选择数据')
  const yearCheckIdVOS = selectedRows.map((row) => {
    return {
      id: row.id,
      scene: row.scene,
      businessType: 2
    }
  })
  ElMessageBox.confirm('确认批量退回？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    loading.value = true
    AppointmentConfirmOrderRefuseItemApi.batchRollback({ yearCheckIdVOS })
      .then((res) => {
        if (res) {
          ElMessage.success('批量退回成功')
          getList()
        }
      })
      .finally(() => {
        loading.value = false
      })
  })
}

/**退回记录 */
const handleReturnRecord = async () => {
  router.push({ name: 'TerminationInspectionReturnRecordYearPressure2' })
}

/** 初始化 **/
onMounted(() => {
  getList()
})
</script>