pms-iot-vue/src/views/pms/iotprojecttask/index.vue

<script setup lang="ts">
import { useTableComponents } from '@/components/ZmTable/useTableComponents'
import { IotProjectTaskScheduleApi } from '@/api/pms/iotprojecttaskschedule'
import { IotProjectTaskApi, IotProjectTaskVO } from '@/api/pms/iotprojecttask'
import * as DeptApi from '@/api/system/dept'
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import dayjs from 'dayjs'

defineOptions({ name: 'IotProjectTask' })

type ProjectTaskRow = IotProjectTaskVO & {
  manufactureName?: string
  contractName?: string
  contractCode?: string
  deptNames?: string
  statusLabel?: string
  createTime?: string
}

interface QueryParams extends PageParam {
  companyId?: number
  projectId?: number
  manufactureName?: string
  contractName?: string
  contractCode?: string
  wellName?: string
  wellType?: string
  location?: string
  technique?: string
  workloadDesign?: string
  createTime?: string[]
  userName?: string
  userId?: number
  platformFlag?: string
  remark?: string
  deptName?: string
}

interface PlanRow {
  id?: number
  status: string
  startTime: string
  endTime: string
  showEndTime: boolean
}

const message = useMessage()
const { t } = useI18n()
const { push } = useRouter()
const { ZmTable, ZmTableColumn } = useTableComponents<ProjectTaskRow>()

const COMPLETED_STATUS = 'wg'
const REPORT_DEPT_ID = 163

const initQuery: QueryParams = {
  pageNo: 1,
  pageSize: 10,
  companyId: undefined,
  projectId: undefined,
  manufactureName: '',
  contractName: undefined,
  contractCode: undefined,
  wellName: undefined,
  wellType: undefined,
  location: undefined,
  technique: undefined,
  workloadDesign: undefined,
  createTime: [],
  userName: undefined,
  userId: undefined,
  platformFlag: '',
  remark: undefined,
  deptName: undefined
}

const queryParams = reactive<QueryParams>({ ...initQuery })
const queryFormRef = ref()
const loading = ref(false)
const exportLoading = ref(false)
const list = ref<ProjectTaskRow[]>([])
const total = ref(0)
const companyDeptList = ref<any[]>([])

const planDialogVisible = ref(false)
const planList = ref<PlanRow[]>([])
const saveLoading = ref(false)
const currentRow = ref<ProjectTaskRow | null>(null)
const workProgressDictOptions = ref<any[]>([])
const generateReportDialogVisible = ref(false)
const generateReportLoading = ref(false)
const generateReportRow = ref<ProjectTaskRow | null>(null)
const reportDate = ref('')

const getWorkProgressDictOptions = () => {
  workProgressDictOptions.value = getStrDictOptions(DICT_TYPE.PMS_PROJECT_TASK_SCHEDULE)
}

const timestampToDateTime = (timestamp: number | string | null | undefined): string => {
  if (timestamp === null || timestamp === undefined || timestamp === '') return ''

  let value = typeof timestamp === 'string' ? Number.parseInt(timestamp, 10) : timestamp
  if (Number.isNaN(value)) return ''
  if (value < 1000000000000) value *= 1000

  return dayjs(value).format('YYYY-MM-DD HH:mm')
}

const openPlanDialog = async (row: ProjectTaskRow) => {
  currentRow.value = row
  planList.value = []

  try {
    getWorkProgressDictOptions()
    const taskSchedules = await IotProjectTaskScheduleApi.getIotProjectTaskSchedules({
      taskId: row.id
    })

    if (taskSchedules?.length) {
      planList.value = taskSchedules.map((plan: any) => {
        const status = plan.status
        return {
          id: plan.id,
          status,
          startTime: timestampToDateTime(plan.startTime),
          endTime: timestampToDateTime(plan.endTime),
          showEndTime: status !== COMPLETED_STATUS
        }
      })
    }

    planDialogVisible.value = true
  } catch {
    message.error('获取计划数据失败')
  }
}

const rowShowEndTime = (row: PlanRow) => row.showEndTime

const onStatusChange = (row: PlanRow) => {
  if (row.status === COMPLETED_STATUS) {
    row.showEndTime = false
    row.endTime = ''
    return
  }

  row.showEndTime = true
}

const addNewRow = () => {
  planList.value.push({
    status: '',
    startTime: '',
    endTime: '',
    showEndTime: true
  })
}

const removeRow = (index: number) => {
  planList.value.splice(index, 1)
}

const savePlan = async () => {
  try {
    saveLoading.value = true

    for (let index = 0; index < planList.value.length; index++) {
      if (!planList.value[index].status) {
        message.error(`第${index + 1}行请选择施工状态`)
        return
      }
    }

    const submitData = planList.value.map((item) => ({
      id: item.id,
      taskId: currentRow.value?.id,
      status: item.status,
      startTime: item.startTime ? new Date(item.startTime).getTime() : null,
      endTime:
        item.status !== COMPLETED_STATUS && item.endTime ? new Date(item.endTime).getTime() : null
    }))

    await IotProjectTaskScheduleApi.saveTaskSchedule(submitData)
    message.success('保存成功')
    planDialogVisible.value = false
    getList()
  } catch {
    message.error('保存失败')
  } finally {
    saveLoading.value = false
  }
}

const openGenerateReportDialog = (row: ProjectTaskRow) => {
  generateReportRow.value = row
  reportDate.value = ''
  generateReportDialogVisible.value = true
}

const submitGenerateReport = async () => {
  if (!generateReportRow.value?.id) {
    message.error('未找到任务信息')
    return
  }
  if (!reportDate.value) {
    message.error('请选择日报日期')
    return
  }

  try {
    generateReportLoading.value = true
    await IotProjectTaskApi.generateReport({
      id: generateReportRow.value.id,
      reportDate: dayjs(reportDate.value).valueOf()
    })
    message.success('生成日报成功')
    generateReportDialogVisible.value = false
  } catch {
    message.error('生成日报失败')
  } finally {
    generateReportLoading.value = false
  }
}

const getList = async () => {
  loading.value = true
  try {
    const data = await IotProjectTaskApi.getIotProjectTaskList(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

const resetQuery = () => {
  Object.assign(queryParams, { ...initQuery })
  queryFormRef.value?.resetFields()
  handleQuery()
}

const handleSizeChange = (val: number) => {
  queryParams.pageSize = val
  handleQuery()
}

const handleCurrentChange = (val: number) => {
  queryParams.pageNo = val
  getList()
}

const openForm = (type: string, id?: number, projectId?: number) => {
  if (id === undefined) {
    push({ name: 'IotProjectTaskInfo', params: { type } })
    return
  }

  push({ name: 'IotProjectTaskInfo', params: { type, id, projectId } })
}

const handleDelete = async (id: number) => {
  try {
    await message.delConfirm()
    await IotProjectTaskApi.deleteIotProjectTask(id)
    message.success(t('common.delSuccess'))
    await getList()
  } catch {}
}

const handleExport = async () => {
  try {
    exportLoading.value = true
    const data = await IotProjectTaskApi.exportIotProjectTask(queryParams)
    download.excel(data, '项目信息任务拆分.xls')
  } finally {
    exportLoading.value = false
  }
}

onMounted(async () => {
  companyDeptList.value = await DeptApi.companyLevelDepts()
  getWorkProgressDictOptions()
  getList()
})
</script>

<template>
  <div
    class="iot-project-task-page grid grid-rows-[auto_1fr] gap-4 h-[calc(100vh-20px-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))]"
  >
    <el-form
      ref="queryFormRef"
      :model="queryParams"
      size="default"
      label-width="72px"
      class="iot-project-task-query bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-6 py-3 min-w-0"
    >
      <div class="query-row">
        <el-form-item label="公司" prop="companyId">
          <el-select
            v-model="queryParams.companyId"
            placeholder="请选择公司"
            clearable
            filterable
            class="w-full"
          >
            <el-option
              v-for="item in companyDeptList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="客户名称" prop="manufactureName">
          <el-input
            v-model="queryParams.manufactureName"
            placeholder="请输入客户名称"
            clearable
            class="w-full"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="合同名称" prop="contractName">
          <el-input
            v-model="queryParams.contractName"
            placeholder="请输入合同名称"
            clearable
            class="w-full"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="合同编号" prop="contractCode">
          <el-input
            v-model="queryParams.contractCode"
            placeholder="请输入合同编号"
            clearable
            class="w-full"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="施工队伍" prop="deptName">
          <el-input
            v-model="queryParams.deptName"
            placeholder="请输入施工队伍"
            clearable
            class="w-full"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="井号" prop="wellName">
          <el-input
            v-model="queryParams.wellName"
            placeholder="请输入井号"
            clearable
            class="w-full"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="平台井" prop="platformFlag">
          <el-select
            v-model="queryParams.platformFlag"
            placeholder="请选择平台井"
            clearable
            class="w-full"
            @change="handleQuery"
          >
            <el-option label="全部" value="A" />
            <el-option label="是" value="Y" />
            <el-option label="否" value="N" />
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间" prop="createTime">
          <el-date-picker
            v-model="queryParams.createTime"
            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-full"
          />
        </el-form-item>

        <el-form-item class="query-actions">
          <el-button type="primary" @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 type="success" plain :loading="exportLoading" @click="handleExport">
            <Icon icon="ep:download" class="mr-5px" />导出
          </el-button>
        </el-form-item>
      </div>
    </el-form>

    <div class="bg-white dark:bg-[#1d1e1f] shadow rounded-lg flex flex-col p-4 min-w-0 min-h-0">
      <div class="flex-1 relative min-h-0">
        <el-auto-resizer class="absolute">
          <template #default="{ width, height }">
            <ZmTable
              :data="list"
              :loading="loading"
              :width="width"
              :height="height"
              :max-height="height"
              show-border
            >
              <ZmTableColumn
                type="index"
                :label="t('monitor.serial')"
                :width="70"
                fixed="left"
                hide-in-column-settings
              />
              <ZmTableColumn prop="manufactureName" label="客户名称" min-width="180" fixed="left" />
              <ZmTableColumn prop="contractName" label="合同名称" min-width="220" />
              <ZmTableColumn prop="contractCode" label="合同编号" min-width="150" />
              <ZmTableColumn prop="wellName" label="井号" min-width="120" />
              <ZmTableColumn prop="location" label="施工地点" min-width="140" />
              <ZmTableColumn prop="deptNames" label="施工队伍" min-width="150" />
              <ZmTableColumn prop="statusLabel" label="施工状态" min-width="120" />
              <ZmTableColumn prop="createTime" label="创建时间" min-width="180">
                <template #default="{ row }">
                  {{ dateFormatter(row, null, row.createTime) }}
                </template>
              </ZmTableColumn>
              <ZmTableColumn label="操作" width="220" fixed="right" action>
                <template #default="{ row }">
                  <el-button
                    link
                    type="primary"
                    @click="openPlanDialog(row)"
                    v-hasPermi="['rq:iot-project-task:update']"
                  >
                    计划
                  </el-button>
                  <el-button
                    v-if="Number(row.deptId) === REPORT_DEPT_ID"
                    link
                    type="primary"
                    @click="openGenerateReportDialog(row)"
                  >
                    生成日报
                  </el-button>
                  <el-button
                    link
                    type="primary"
                    @click="openForm('update', row.id, row.projectId)"
                    v-hasPermi="['rq:iot-project-task:update']"
                  >
                    编辑
                  </el-button>
                  <el-button
                    link
                    type="danger"
                    @click="handleDelete(row.id)"
                    v-hasPermi="['rq:iot-project-task:delete']"
                  >
                    删除
                  </el-button>
                </template>
              </ZmTableColumn>
            </ZmTable>
          </template>
        </el-auto-resizer>
      </div>

      <div class="h-8 mt-2 flex items-center justify-end">
        <el-pagination
          v-show="total > 0"
          size="default"
          :current-page="queryParams.pageNo"
          :page-size="queryParams.pageSize"
          :background="true"
          :page-sizes="[10, 20, 30, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>

  <el-dialog
    v-model="planDialogVisible"
    :title="`${currentRow?.contractName || ''} - ${currentRow?.wellName || ''} - 任务计划`"
    width="80%"
  >
    <div class="mb-15px">
      <el-button type="primary" @click="addNewRow">
        <Icon icon="ep:plus" class="mr-5px" />新增行
      </el-button>
    </div>

    <el-table :data="planList" border stripe>
      <el-table-column label="序号" width="60" align="center">
        <template #default="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="施工状态" min-width="200">
        <template #default="scope">
          <el-select
            v-model="scope.row.status"
            placeholder="请选择施工状态"
            clearable
            class="w-full"
            @change="onStatusChange(scope.row)"
          >
            <el-option
              v-for="dict in workProgressDictOptions"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="开始时间" min-width="200">
        <template #default="scope">
          <el-date-picker
            v-model="scope.row.startTime"
            type="datetime"
            placeholder="选择开始时间"
            value-format="YYYY-MM-DD HH:mm"
            format="YYYY-MM-DD HH:mm"
            class="w-full"
          />
        </template>
      </el-table-column>
      <el-table-column label="结束时间" min-width="200">
        <template #default="scope">
          <el-date-picker
            v-if="rowShowEndTime(scope.row)"
            v-model="scope.row.endTime"
            type="datetime"
            placeholder="选择结束时间"
            value-format="YYYY-MM-DD HH:mm"
            format="YYYY-MM-DD HH:mm"
            class="w-full"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100" align="center">
        <template #default="scope">
          <el-button link type="danger" @click="removeRow(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="planDialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="saveLoading" @click="savePlan">保存</el-button>
      </span>
    </template>
  </el-dialog>

  <el-dialog v-model="generateReportDialogVisible" title="生成日报" width="420px">
    <el-form size="default" label-width="80px">
      <el-form-item label="日报日期" required>
        <el-date-picker
          v-model="reportDate"
          type="date"
          placeholder="请选择日期"
          value-format="YYYY-MM-DD"
          format="YYYY-MM-DD"
          class="w-full!"
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button size="default" @click="generateReportDialogVisible = false">取消</el-button>
        <el-button
          size="default"
          type="primary"
          :loading="generateReportLoading"
          @click="submitGenerateReport"
        >
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 生成日报 Dialog -->
  <el-dialog v-model="generateReportDialogVisible" title="生成日报" width="420px">
    <el-form size="default" label-width="80px">
      <el-form-item label="日报日期" required>
        <el-date-picker
          v-model="reportDate"
          type="date"
          placeholder="请选择日期"
          value-format="YYYY-MM-DD"
          format="YYYY-MM-DD"
          class="w-full!"
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button size="default" @click="generateReportDialogVisible = false">取消</el-button>
        <el-button
          size="default"
          type="primary"
          @click="submitGenerateReport"
          :loading="generateReportLoading"
        >
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.iot-project-task-query {
  display: block;
}

.query-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(270px, 1fr));
  align-items: center;
  gap: 14px 28px;
  min-width: 0;
}

.query-actions {
  justify-self: end;
}

.query-actions :deep(.el-form-item__content) {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 10px;
}

.query-actions :deep(.el-button) {
  margin-left: 0;
}

:deep(.el-form-item) {
  margin-bottom: 0;
}

@media (width >= 2200px) {
  .query-actions {
    grid-column: 4;
  }
}

@media (width <= 1800px) {
  .query-row {
    grid-template-columns: repeat(3, minmax(270px, 1fr));
  }

  .query-actions {
    justify-self: start;
  }
}

@media (width <= 1500px) {
  .query-row {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 12px 18px;
  }

  .query-control {
    width: 210px;
  }

  .query-control--small {
    width: 160px;
  }

  .query-control--date {
    width: 280px;
  }
}

@media (width <= 1200px) {
  .iot-project-task-page {
    grid-template-rows: auto minmax(480px, 1fr);
    height: auto;
    min-height: calc(
      100vh - 20px - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height)
    );
  }

  .query-actions {
    width: 100%;
    justify-self: start;
  }

  .query-actions :deep(.el-form-item__content) {
    justify-content: flex-start;
  }
}

@media (width <= 768px) {
  .iot-project-task-query {
    padding: 12px;
  }

  .query-row,
  .query-row :deep(.el-form-item),
  .query-actions {
    width: 100%;
  }

  .query-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .query-control,
  .query-control--small,
  .query-control--date {
    width: 100%;
  }

  .query-actions :deep(.el-form-item__content) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }

  .query-actions :deep(.el-button) {
    width: 100%;
    margin-left: 0;
  }
}
</style>