yudao-admin-yiqun/yudao-ui-admin-vue3/src/views/pressure2/boilerchecker/task.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="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="checkDate">
        <el-date-picker
          v-model="queryParams.checkDate"
          value-format="YYYY-MM-DD HH:mm:ss"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
          class="!w-240px"
        />
      </el-form-item>
<!--      <el-form-item label="检验员" prop="appoinmentUserName">-->
<!--        <el-input-->
<!--          v-model="queryParams.appoinmentUserName"-->
<!--          placeholder="请输入检验员名称"-->
<!--          clearable-->
<!--          @keyup.enter="handleQuery"-->
<!--          class="!w-240px"-->
<!--        />-->
<!--      </el-form-item>-->
      <el-form-item label="检验员" prop="checkUserIds">
        <el-select
          class="!w-240px"
          v-model="queryParams.checkUserIds"
          readonly
          clearable
          placeholder="请选择检验员"
          multiple
          popper-class="user-select-popper"
          @click.stop.prevent="() => handleOpenUserDialog(recheckStrIdsOpts, 'checkUserIds')"
        >
          <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="contractNo">
        <el-input
          v-model="queryParams.contractNo"
          placeholder="请输入合同编号"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="任务状态" prop="status">
        <el-select
          v-model="queryParams.taskStatus"
          placeholder="请选择任务状态"
          clearable
          class="!w-240px"
        >
          <el-option label="全部" value="all" />
          <el-option v-for="(item, key) in filteredTaskStatusMap" :key="key" :label="item" :value="key"/>
        </el-select>
      </el-form-item>
      <el-form-item label="受理单提交人" prop="submitIds">
        <el-select
          class="!w-240px"
          v-model="queryParams.submitIds"
          readonly
          clearable
          placeholder="请选择受理单提交人"
          multiple
          popper-class="user-select-popper"
          @click.stop.prevent="() => handleOpenUserDialog(recheckStrIdsOpts, 'submitIds')"
        >
          <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="submitTime">
        <el-date-picker
          v-model="queryParams.submitTime"
          value-format="YYYY-MM-DD HH:mm:ss"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
          class="!w-240px"
        />
      </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-button type="primary" @click="handleBatchConfirmationFn" :disabled="selectedRows.length === 0">批量办结确认</el-button>
    <el-table ref="tableRef" v-loading="loading" :data="list" :stripe="true" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="30" />
      <el-table-column label="任务单号" align="center" prop="orderNo" min-width="150px" />
      <el-table-column label="使用单位" align="center" prop="unitName" min-width="150px" />
      <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="equipNum" min-width="150px"/>
      <el-table-column label="任务单状态" align="center" prop="taskStatus" min-width="150px">
        <template #default="scope">
          <el-tag :type="getTypeColor(scope.row.taskStatus)">{{ PressureTaskOrderTaskStatusMap[scope.row.taskStatus] }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column 
        label="检验时间" 
        align="center" 
        prop="checkDate" 
        min-width="120px" 
      >
        <template #default="scope">
          {{ formatArrayDate(scope.row.checkDate) }}
        </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 : '-' }}
        </template>
      </el-table-column>
      <el-table-column label="检验员" align="center" prop="appoinmentUser" min-width="150px">
        <template #default="scope">
          <div v-if="scope.row.appoinmentUser && scope.row.appoinmentUser.length > 0">
            <div v-for="user in scope.row.appoinmentUser" :key="user.id">
              {{ user.nickname }} ({{ user.employeeNo }})
            </div>
          </div>
          <div v-else>-</div>
        </template>
      </el-table-column>
      <el-table-column label="收费方式" align="center" prop="feeType" min-width="100px">
        <template #default="scope">
          {{ PressureFeeTypeMap[scope.row.feeType] }}
        </template>
      </el-table-column>
      <el-table-column label="合同编号" align="center" prop="contractNo" min-width="150px">
        <template #default="scope">
          {{ scope.row.contractNo ? scope.row.contractNo : '-' }}
        </template>
      </el-table-column>
      <el-table-column label="变更记录" align="center" prop="changeLogCount" min-width="100px">
        <template #default="scope">
          <div v-if="scope.row.changeLogCount > 0">
            <el-link type="primary" @click="showChangeLog(scope.row)">{{ scope.row.changeLogCount }}</el-link>
          </div>
          <div v-else>-</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" min-width="180px" fixed="right">
        <template #default="scope">
          <!-- 认领 -->
          <el-button
            v-if="scope.row.taskStatus === PressureTaskOrderTaskStatus.WAIT_CONFIRM"
            link
            type="primary"
            @click="handleConfirm(scope.row.id)"
          >
            认领
          </el-button>
          <!-- 取消认领 -->
          <el-button
            v-if="scope.row.taskStatus === PressureTaskOrderTaskStatus.CONFIRMED"
            link
            type="primary"
            :disabled="scope.row.manager?.id !== userStore?.user?.id"
            @click="handleCancelConfirm(scope.row.id)"
          >
            取消认领
          </el-button>

          <!-- 办结确认 -->
          <el-button
            link
            type="primary"
            v-if="scope.row.taskStatus == 710"
            @click="handleConfirmationFn(scope.row.id)"
          >
            办结确认
          </el-button>

          <el-button
            link
            type="primary"
            @click="handleEdit(scope.row.id)"
          >
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </ContentWrap>

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

    <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 { ref, reactive, onMounted, computed } from 'vue'
import { formatArrayDate } from '@/utils/formatTime'
import { BoilerTaskOrderApi, BoilerTaskOrderVO } from '@/api/pressure2/boilertaskorder'
import { PressureBoilerCheckTypeMap, PressureFeeTypeMap, PressureTaskOrderTaskStatusMap, PressureTaskOrderTaskStatus } from '@/utils/constants'
import {ElMessageBox, ElMessage, ElTable} from 'element-plus'
import { useRouter } from 'vue-router'
// 在script部分
import { getUserPage } from '@/api/system/user'
import SmartTable from "@/components/SmartTable/SmartTable";
import { getUserList } from '@/api/common/user'
import {useUserStore} from "@/store/modules/user";

// 定义用户搜索相关的响应式变量
const userOptions = ref([])
const userSearchLoading = ref(false)

const router = useRouter()
const tableRef = ref<InstanceType<typeof ElTable>>()
const selectedRows = ref<BoilerTaskOrderVO[]>([]) // 选中的行

// 通过输入的值查询对应受理单提交人名字
// 远程搜索用户方法
const remoteSearchUsers = (query) => {
  if (query) {
    userSearchLoading.value = true
    getUserPage({
      pageNo: 1,
      pageSize: 10,
      nickName: query
    }).then(response => {
      const users = response.list || []
      userOptions.value = users.map(user => ({
        value: user.id,         // 值是用户ID
        label: user.nickname,   // 显示的是用户昵称
        key: user.id            // 用于v-for的key
      }))
    }).finally(() => {
      userSearchLoading.value = false
    })
  } else {
    userOptions.value = []
  }
}

// 剔除查询模块中不需要的选项
const filteredTaskStatusMap = computed(() => {
  const result = {};

  // 需要剔除的状态
  const excludeStatus = [
    PressureTaskOrderTaskStatus.RECORD_INPUT,   // 记录录入 500
    PressureTaskOrderTaskStatus.RECORD_CHECK,   // 记录校核 510
    PressureTaskOrderTaskStatus.REPORT_INPUT,   // 报告编制 520
    PressureTaskOrderTaskStatus.REPORT_AUDIT,   // 报告审核 600
    PressureTaskOrderTaskStatus.REPORT_APPROVE  // 报告审批 700
  ];

  // 只保留不在排除列表中的状态
  Object.entries(PressureTaskOrderTaskStatusMap).forEach(([key, value]) => {
    if (!excludeStatus.includes(Number(key))) {
      result[key] = value;
    }
  });

  return result;
});

const getTypeColor = (status: string | number) => {
  const statusMap = {
    [PressureTaskOrderTaskStatus.WAIT_CONFIRM]: 'primary',
    [PressureTaskOrderTaskStatus.CANCELLED]: 'info',
    [PressureTaskOrderTaskStatus.AUDITING_EDIT]: 'warning',
    [PressureTaskOrderTaskStatus.AUDITING_CANCEL]: 'warning',
    [PressureTaskOrderTaskStatus.AUDITING_TIME]: 'warning',
    [PressureTaskOrderTaskStatus.CONFIRMED]: 'success',
    [PressureTaskOrderTaskStatus.RECORD_INPUT]: 'warning',
    [PressureTaskOrderTaskStatus.RECORD_CHECK]: 'warning',
    [PressureTaskOrderTaskStatus.REPORT_INPUT]: 'warning',
    [PressureTaskOrderTaskStatus.REPORT_AUDIT]: 'warning',
    [PressureTaskOrderTaskStatus.REPORT_APPROVE]: 'warning',
    [PressureTaskOrderTaskStatus.REPORT_END]: 'success'
  };
  return statusMap[status] || 'info';
}

/** 承压任务单 列表 */
defineOptions({ name: 'CheckerTaskList' })

const loading = ref(true)
const list = ref<BoilerTaskOrderVO[]>([])
const total = ref(0)
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  orderNo: undefined,
  unitName: undefined,
  checkType: undefined,
  checkDate: [],
  checkUserIds: [],
  submitIds:[],
  contractNo: undefined,
  taskStatus: 'all',
  submitTime: [],
  equipMainType: 200,
})
const queryFormRef = ref()

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const params = { ...queryParams }
    if (params.taskStatus === 'all') {
      params.taskStatus = undefined
    }
    const data = await BoilerTaskOrderApi.getBoilerTaskOrderPage(params)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

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

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

// 修改后的编辑/查看详情操作
const handleEdit = (id: string) => {
  router.push({
    name: 'BoilerTaskOrderView',
    query: {
      id,
      type: 'checker'
    }
  })
}

// 变更记录
const showChangeLog = (row: BoilerTaskOrderVO) => {
  console.log('ChangeLog:', row)
}

// 认领
const handleConfirm = async (id: string) => {
  try {
    await ElMessageBox.confirm('是否认领该任务单？', '认领提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    await BoilerTaskOrderApi.confirmTaskOrder({ id, "confirm": true })
    ElMessage.success('认领成功')
    getList()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('认领失败')
      console.error('Confirm error:', error)
    }
  }
}

// 取消认领
const handleCancelConfirm = async (id: string) => {
  try {
    await ElMessageBox.confirm('是否取消认领该任务单？', '取消认领提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    await BoilerTaskOrderApi.confirmTaskOrder({ id, "confirm": false })
    ElMessage.success('取消认领成功')
    getList()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('取消认领失败')
      console.error('Cancel confirm error:', error)
    }
  }
}

// 批量办结确认
const handleBatchConfirmationFn = async () => {
  const list = tableRef?.value?.getSelectionRows()
  if (list.length === 0) {
    ElMessage.warning('请选择需要办结确认的任务！')
    return
  }
  const flag = list.every(
    (item) => item.taskStatus === PressureTaskOrderTaskStatus.REPORT_CONFIRMATION
  )
  if (!flag) {
    ElMessage.warning('请选择状态为办结确认的任务！')
    return
  }
  const ids = list.map((item) => item.id)
  try {
    await ElMessageBox.confirm('确认要批量办结确认吗？此操作不可撤销。', '办结确认', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    })
    const submitResult = await BoilerTaskOrderApi.finishApi({
      ids
    })

    if (submitResult) {
      ElMessage.success('办结确认成功！')
      // 清除所有选择
      tableRef?.value?.clearSelection()
      getList()
    }
  } catch (err) {
    ElMessage.info('已取消办结确认操作')
  }
}

//办结确认
const handleConfirmationFn = async (id: string) => {
  try {
    await ElMessageBox.confirm('确认要办结确认该任务吗？此操作不可撤销。', '办结确认', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    })
    const ids = [id]
    const submitResult = await BoilerTaskOrderApi.finishApi({
      ids
    })

    if (submitResult) {
      ElMessage.success('办结确认成功！')
      // 清除所有选择
      tableRef?.value?.clearSelection()
      getList()
    }
  } catch (err) {
    ElMessage.info('已取消办结确认操作')
  }
}

// 人员选择弹窗 start
const userTableRef = ref()
const userStore = useUserStore()
const userInfo = computed(() => userStore.user)
const fieldKey = ref('')
const customUserDialogVisible = ref(false)
const checkFormOptions = ref<any[]>([])
interface UserListQuery {
  nickName: string
  pageNo: number
  pageSize: number
  total?: number
}
const userQueryData = reactive<UserListQuery>({
  nickName: '',
  pageNo: 1,
  pageSize: 10,
  total: 0
})
const recheckStrIdsOpts = ref<any[]>([
  { id: userInfo.value.id, nickName: userInfo.value?.nickname }
])
const userTableList = ref<any[]>([])
const userColumns = ref<any[]>([
  {
    type: 'selection',
    width: '50px'
  },
  {
    label: '工号',
    prop: 'employeeNo'
  },
  {
    label: '姓名',
    prop: 'nickname'
  },
  {
    label: '部门',
    prop: 'deptName'
  }
])

const handleUserConfirm = () => {
  const selectRows = userTableRef.value.getTableRef().getSelectionRows()
  // 过滤组合合成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 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()
}

// 人员选择弹窗 end

/** 表格选择框变化 */
const handleSelectionChange = (selection: BoilerTaskOrderVO[]) => {
  selectedRows.value = selection
}

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

<style lang="scss" scoped>

</style>