|
|
@@ -0,0 +1,755 @@
|
|
|
+<template>
|
|
|
+ <div class="p-2">
|
|
|
+ <!-- 搜索区域 -->
|
|
|
+ <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
|
|
|
+ <div v-show="showSearch" class="mb-[10px]">
|
|
|
+ <el-card shadow="hover">
|
|
|
+ <el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
|
|
+ <el-form-item label="上报编号" prop="reportNo">
|
|
|
+ <el-input v-model="queryParams.reportNo" placeholder="请输入上报编号" clearable @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="作业类型" prop="workType">
|
|
|
+ <el-select v-model="queryParams.workType" placeholder="请选择作业类型" clearable>
|
|
|
+ <el-option label="临时施工上报" value="临时施工上报" />
|
|
|
+ <el-option label="改造工程上报" value="改造工程上报" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="项目名称" prop="projectName">
|
|
|
+ <el-input v-model="queryParams.projectName" placeholder="请输入项目名称" clearable @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="审核状态" prop="auditStatus">
|
|
|
+ <el-select v-model="queryParams.auditStatus" placeholder="请选择审核状态" clearable>
|
|
|
+ <el-option label="待审核" value="1" />
|
|
|
+ <el-option label="已通过" value="0" />
|
|
|
+ <el-option label="已驳回" value="2" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
|
|
+ <el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ </transition>
|
|
|
+
|
|
|
+ <!-- 列表区域 -->
|
|
|
+ <el-card shadow="hover">
|
|
|
+ <template #header>
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button v-has-permi="['riskctrl:workReport:add']" type="primary" plain icon="Plus" @click="handleAdd()">新增作业上报</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button v-has-permi="['riskctrl:workReport:edit']" type="success" plain :disabled="single" icon="Edit" @click="handleUpdate()">修改</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button type="info" plain :disabled="single" icon="View" @click="handleDetail()">详情</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button v-has-permi="['riskctrl:workReport:remove']" type="danger" plain :disabled="multiple" icon="Delete" @click="handleDelete()">删除</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button v-has-permi="['riskctrl:workReport:audit']" type="warning" plain :disabled="single" icon="Select" @click="handleAudit()">审核</el-button>
|
|
|
+ </el-col>
|
|
|
+ <right-toolbar v-model:show-search="showSearch" :columns="columns" :search="true" @query-table="getList"></right-toolbar>
|
|
|
+ </el-row>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <el-table v-loading="loading" border :data="reportList" @selection-change="handleSelectionChange">
|
|
|
+ <el-table-column type="selection" width="50" align="center" />
|
|
|
+ <el-table-column v-if="columns[0].visible" key="reportNo" label="上报编号" align="center" prop="reportNo" width="160" />
|
|
|
+ <el-table-column v-if="columns[1].visible" key="workType" label="作业类型" align="center" prop="workType" width="120" />
|
|
|
+ <el-table-column v-if="columns[2].visible" key="projectName" label="项目名称" align="center" prop="projectName" :show-overflow-tooltip="true" />
|
|
|
+ <el-table-column v-if="columns[3].visible" key="startTime" label="施工开始时间" align="center" prop="startTime" width="160" />
|
|
|
+ <el-table-column v-if="columns[4].visible" key="endTime" label="施工结束时间" align="center" prop="endTime" width="160" />
|
|
|
+ <el-table-column v-if="columns[5].visible" key="safetyOfficer" label="现场安全员" align="center" prop="safetyOfficer" width="120" />
|
|
|
+ <el-table-column v-if="columns[6].visible" key="contactPhone" label="联系电话" align="center" prop="contactPhone" width="130" />
|
|
|
+ <el-table-column v-if="columns[7].visible" key="auditStatus" label="审核状态" align="center" prop="auditStatus" width="100">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-tag v-if="scope.row.auditStatus === '0'" type="success">已通过</el-tag>
|
|
|
+ <el-tag v-else-if="scope.row.auditStatus === '1'" type="warning">待审核</el-tag>
|
|
|
+ <el-tag v-else-if="scope.row.auditStatus === '2'" type="danger">已驳回</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column v-if="columns[8].visible" label="创建时间" align="center" prop="createTime" width="160" />
|
|
|
+ <el-table-column label="操作" fixed="right" width="260" class-name="small-padding fixed-width">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-tooltip content="详情" placement="top">
|
|
|
+ <el-button link type="info" icon="View" @click="handleDetail(scope.row)"></el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip content="修改" placement="top">
|
|
|
+ <el-button v-has-permi="['riskctrl:workReport:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip content="审核" placement="top">
|
|
|
+ <el-button v-has-permi="['riskctrl:workReport:audit']" link type="warning" icon="Select" @click="handleAudit(scope.row)"></el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip content="删除" placement="top">
|
|
|
+ <el-button v-has-permi="['riskctrl:workReport:remove']" link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <!-- 新增/修改弹窗 -->
|
|
|
+ <el-dialog v-model="open" :title="title" width="800px" append-to-body :close-on-click-modal="false" destroy-on-close>
|
|
|
+ <el-form ref="reportFormRef" :model="form" :rules="rules" label-width="120px">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="作业类型" prop="workType">
|
|
|
+ <el-select v-model="form.workType" placeholder="请选择作业类型" class="w-full">
|
|
|
+ <el-option label="临时施工上报" value="临时施工上报" />
|
|
|
+ <el-option label="改造工程上报" value="改造工程上报" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="项目名称" prop="projectName">
|
|
|
+ <el-input v-model="form.projectName" placeholder="请输入项目名称" maxlength="200" show-word-limit />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="施工开始时间" prop="startTime">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="form.startTime"
|
|
|
+ type="datetime"
|
|
|
+ value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
+ placeholder="请选择施工开始时间"
|
|
|
+ class="w-full"
|
|
|
+ :disabled-date="startDisabledDate"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="施工结束时间" prop="endTime">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="form.endTime"
|
|
|
+ type="datetime"
|
|
|
+ value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
+ placeholder="请选择施工结束时间"
|
|
|
+ class="w-full"
|
|
|
+ :disabled-date="endDisabledDate"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="现场安全员" prop="safetyOfficer">
|
|
|
+ <el-input v-model="form.safetyOfficer" placeholder="请输入现场安全员姓名" maxlength="50" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="联系电话" prop="contactPhone">
|
|
|
+ <el-input v-model="form.contactPhone" placeholder="请输入联系电话" maxlength="20" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-form-item label="现场施工图片" prop="workImages">
|
|
|
+ <el-upload
|
|
|
+ v-model:file-list="workImageList"
|
|
|
+ :action="uploadUrl"
|
|
|
+ :headers="uploadHeaders"
|
|
|
+ list-type="picture-card"
|
|
|
+ :accept="'image/jpeg,image/png'"
|
|
|
+ :limit="5"
|
|
|
+ :on-success="handleWorkImageSuccess"
|
|
|
+ :on-remove="handleWorkImageRemove"
|
|
|
+ :on-exceed="handleImageExceed"
|
|
|
+ :before-upload="beforeWorkImageUpload"
|
|
|
+ >
|
|
|
+ <el-icon><Plus /></el-icon>
|
|
|
+ <template #tip>
|
|
|
+ <div class="el-upload__tip">点击上传现场施工图片,仅支持 JPG/PNG 格式,单张不超过 5MB,最多 5 张</div>
|
|
|
+ </template>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="施工证件" prop="permitFiles">
|
|
|
+ <el-upload
|
|
|
+ ref="permitUploadRef"
|
|
|
+ v-model:file-list="permitFileList"
|
|
|
+ :action="uploadUrl"
|
|
|
+ :headers="uploadHeaders"
|
|
|
+ :accept="'.pdf,.jpg,.jpeg,.png'"
|
|
|
+ :limit="1"
|
|
|
+ :on-success="handlePermitFileSuccess"
|
|
|
+ :on-remove="handlePermitFileRemove"
|
|
|
+ :before-upload="beforePermitFileUpload"
|
|
|
+ >
|
|
|
+ <el-button type="primary">点击上传施工证件</el-button>
|
|
|
+ <template #tip>
|
|
|
+ <div class="el-upload__tip">支持 PDF、JPG、PNG 格式,单个文件不超过 10MB</div>
|
|
|
+ </template>
|
|
|
+ <template #file="{ file }">
|
|
|
+ <div class="permit-file-item">
|
|
|
+ <el-icon style="margin-right: 8px;"><Document /></el-icon>
|
|
|
+ <el-link type="primary" :href="file.url || file.response?.data?.url" target="_blank" :underline="false">
|
|
|
+ {{ file.name }}
|
|
|
+ </el-link>
|
|
|
+ <span class="permit-file-remove" @click="handlePermitFileRemove(file)">
|
|
|
+ <el-icon><Close /></el-icon>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="施工说明" prop="workDesc">
|
|
|
+ <el-input
|
|
|
+ v-model="form.workDesc"
|
|
|
+ type="textarea"
|
|
|
+ :rows="4"
|
|
|
+ placeholder="请输入施工说明,补充作业细节、风险点等"
|
|
|
+ maxlength="500"
|
|
|
+ show-word-limit
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="备注" prop="remark">
|
|
|
+ <el-input v-model="form.remark" type="textarea" :rows="2" placeholder="请输入备注" maxlength="500" show-word-limit />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button type="primary" :loading="buttonLoading" @click="submitForm">确 定</el-button>
|
|
|
+ <el-button @click="cancel">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!-- 审核弹窗 -->
|
|
|
+ <el-dialog v-model="auditOpen" title="作业审核" width="600px" append-to-body :close-on-click-modal="false" destroy-on-close>
|
|
|
+ <el-form ref="auditFormRef" :model="auditForm" :rules="auditRules" label-width="100px">
|
|
|
+ <el-form-item label="审核结果" prop="auditStatus">
|
|
|
+ <el-radio-group v-model="auditForm.auditStatus">
|
|
|
+ <el-radio value="0">审核通过</el-radio>
|
|
|
+ <el-radio value="2">审核不通过</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="审核意见" prop="auditComment">
|
|
|
+ <el-input v-model="auditForm.auditComment" type="textarea" :rows="4" placeholder="请输入审核意见" maxlength="500" show-word-limit />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="submitAudit">确 定</el-button>
|
|
|
+ <el-button @click="auditOpen = false">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!-- 详情弹窗 -->
|
|
|
+ <el-dialog v-model="detailOpen" title="作业上报详情" width="800px" append-to-body :close-on-click-modal="false" destroy-on-close>
|
|
|
+ <el-descriptions :column="2" border size="default">
|
|
|
+ <el-descriptions-item label="上报编号">{{ detailData.reportNo }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="作业类型">{{ detailData.workType }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="项目名称">{{ detailData.projectName }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="审核状态">
|
|
|
+ <el-tag v-if="detailData.auditStatus === '0'" type="success">已通过</el-tag>
|
|
|
+ <el-tag v-else-if="detailData.auditStatus === '1'" type="warning">待审核</el-tag>
|
|
|
+ <el-tag v-else-if="detailData.auditStatus === '2'" type="danger">已驳回</el-tag>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="施工开始时间">{{ detailData.startTime }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="施工结束时间">{{ detailData.endTime }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="现场安全员">{{ detailData.safetyOfficer }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="联系电话">{{ detailData.contactPhone }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item v-if="detailData.auditStatus !== '1'" label="审核意见" :span="2">{{ detailData.auditComment || '-' }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="施工说明" :span="2">{{ detailData.workDesc || '-' }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="备注" :span="2">{{ detailData.remark || '-' }}</el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+
|
|
|
+ <el-divider content-position="left">现场施工图片</el-divider>
|
|
|
+ <div v-if="detailImageUrls.length > 0" style="display: flex; flex-wrap: wrap; gap: 10px;">
|
|
|
+ <el-image
|
|
|
+ v-for="(url, idx) in detailImageUrls"
|
|
|
+ :key="idx"
|
|
|
+ :src="url"
|
|
|
+ :preview-src-list="detailImageUrls"
|
|
|
+ :initial-index="idx"
|
|
|
+ fit="cover"
|
|
|
+ style="width: 120px; height: 120px; border-radius: 6px; cursor: pointer;"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <el-empty v-else description="暂无施工图片" :image-size="60" />
|
|
|
+
|
|
|
+ <el-divider content-position="left">施工证件</el-divider>
|
|
|
+ <div v-if="detailPermitUrls.length > 0">
|
|
|
+ <div v-for="(url, idx) in detailPermitUrls" :key="idx" style="margin-bottom: 8px;">
|
|
|
+ <el-link type="primary" :href="url" target="_blank">
|
|
|
+ <el-icon><Document /></el-icon>
|
|
|
+ {{ getFileNameFromUrl(url) }}
|
|
|
+ </el-link>
|
|
|
+ <el-tag v-if="isPdfUrl(url)" size="small" type="info" style="margin-left: 8px;">PDF</el-tag>
|
|
|
+ <el-tag v-else size="small" type="success" style="margin-left: 8px;">图片</el-tag>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-empty v-else description="暂无施工证件" :image-size="60" />
|
|
|
+
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button @click="detailOpen = false">关 闭</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup name="WorkReport" lang="ts">
|
|
|
+import { ref, reactive, onMounted, nextTick } from 'vue';
|
|
|
+import type { ComponentInternalInstance } from 'vue';
|
|
|
+import type { ElFormInstance } from 'element-plus';
|
|
|
+import { Plus, Document, Close } from '@element-plus/icons-vue';
|
|
|
+import { getCurrentInstance } from 'vue';
|
|
|
+import {
|
|
|
+ listWorkReport, getWorkReport, delWorkReport,
|
|
|
+ addWorkReport, updateWorkReport, auditWorkReport
|
|
|
+} from '@/api/riskctrl/workReport';
|
|
|
+import type { WorkReportVO } from '@/api/riskctrl/workReport/types';
|
|
|
+import { getToken } from '@/utils/auth';
|
|
|
+
|
|
|
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
|
+
|
|
|
+const reportList = ref<WorkReportVO[]>([]);
|
|
|
+const loading = ref(true);
|
|
|
+const buttonLoading = ref(false);
|
|
|
+const showSearch = ref(true);
|
|
|
+const ids = ref<Array<string | number>>([]);
|
|
|
+const single = ref(true);
|
|
|
+const multiple = ref(true);
|
|
|
+const total = ref(0);
|
|
|
+const title = ref('');
|
|
|
+const open = ref(false);
|
|
|
+const auditOpen = ref(false);
|
|
|
+
|
|
|
+const queryFormRef = ref<ElFormInstance>();
|
|
|
+const reportFormRef = ref<ElFormInstance>();
|
|
|
+const auditFormRef = ref<ElFormInstance>();
|
|
|
+
|
|
|
+const uploadUrl = ref(import.meta.env.VITE_APP_BASE_API + '/resource/oss/upload');
|
|
|
+const uploadHeaders = ref({ Authorization: 'Bearer ' + getToken(), clientid: import.meta.env.VITE_APP_CLIENT_ID });
|
|
|
+
|
|
|
+const workImageList = ref<any[]>([]);
|
|
|
+const permitFileList = ref<any[]>([]);
|
|
|
+
|
|
|
+interface ReportQuery {
|
|
|
+ pageNum: number;
|
|
|
+ pageSize: number;
|
|
|
+ reportNo?: string;
|
|
|
+ projectName?: string;
|
|
|
+ workType?: string;
|
|
|
+ auditStatus?: string;
|
|
|
+}
|
|
|
+
|
|
|
+interface ReportForm {
|
|
|
+ reportId?: string | number;
|
|
|
+ reportNo?: string;
|
|
|
+ workType: string;
|
|
|
+ projectName: string;
|
|
|
+ startTime: string;
|
|
|
+ endTime: string;
|
|
|
+ safetyOfficer: string;
|
|
|
+ contactPhone: string;
|
|
|
+ workImages: string;
|
|
|
+ permitFiles: string;
|
|
|
+ workDesc: string;
|
|
|
+ remark: string;
|
|
|
+}
|
|
|
+
|
|
|
+interface AuditFormType {
|
|
|
+ reportId?: string | number;
|
|
|
+ auditStatus: string;
|
|
|
+ auditComment: string;
|
|
|
+}
|
|
|
+
|
|
|
+const queryParams = reactive<ReportQuery>({
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ reportNo: undefined,
|
|
|
+ projectName: undefined,
|
|
|
+ workType: undefined,
|
|
|
+ auditStatus: undefined
|
|
|
+});
|
|
|
+
|
|
|
+const form = reactive<ReportForm>({
|
|
|
+ reportId: undefined,
|
|
|
+ reportNo: '',
|
|
|
+ workType: '',
|
|
|
+ projectName: '',
|
|
|
+ startTime: '',
|
|
|
+ endTime: '',
|
|
|
+ safetyOfficer: '',
|
|
|
+ contactPhone: '',
|
|
|
+ workImages: '',
|
|
|
+ permitFiles: '',
|
|
|
+ workDesc: '',
|
|
|
+ remark: ''
|
|
|
+});
|
|
|
+
|
|
|
+const auditForm = reactive<AuditFormType>({
|
|
|
+ reportId: undefined,
|
|
|
+ auditStatus: '',
|
|
|
+ auditComment: ''
|
|
|
+});
|
|
|
+
|
|
|
+// 详情弹窗
|
|
|
+const detailOpen = ref(false);
|
|
|
+const detailData = ref<WorkReportVO>({});
|
|
|
+const detailImageUrls = ref<string[]>([]);
|
|
|
+const detailPermitUrls = ref<string[]>([]);
|
|
|
+
|
|
|
+/** 手机号/固话验证 */
|
|
|
+const validatePhone = (_rule: any, value: string, callback: any) => {
|
|
|
+ if (!value) {
|
|
|
+ callback();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const mobile = /^1[3-9]\d{9}$/;
|
|
|
+ const phone = /^0\d{2,3}-?\d{7,8}$/;
|
|
|
+ if (mobile.test(value) || phone.test(value)) {
|
|
|
+ callback();
|
|
|
+ } else {
|
|
|
+ callback(new Error('请输入正确的手机号或固定电话格式'));
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const rules = {
|
|
|
+ workType: [{ required: true, message: '请选择作业类型', trigger: 'change' }],
|
|
|
+ projectName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
|
|
|
+ startTime: [{ required: true, message: '请选择施工开始时间', trigger: 'change' }],
|
|
|
+ endTime: [
|
|
|
+ { required: true, message: '请选择施工结束时间', trigger: 'change' },
|
|
|
+ {
|
|
|
+ validator: (_rule: any, value: string, callback: any) => {
|
|
|
+ if (value && form.startTime && value <= form.startTime) {
|
|
|
+ callback(new Error('施工结束时间必须晚于施工开始时间'));
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ trigger: 'change'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ safetyOfficer: [{ required: true, message: '请输入现场安全员姓名', trigger: 'blur' }],
|
|
|
+ contactPhone: [{ validator: validatePhone, trigger: 'blur' }]
|
|
|
+};
|
|
|
+
|
|
|
+const auditRules = {
|
|
|
+ auditStatus: [{ required: true, message: '请选择审核结果', trigger: 'change' }]
|
|
|
+};
|
|
|
+
|
|
|
+const columns = ref([
|
|
|
+ { key: 0, label: '上报编号', visible: true },
|
|
|
+ { key: 1, label: '作业类型', visible: true },
|
|
|
+ { key: 2, label: '项目名称', visible: true },
|
|
|
+ { key: 3, label: '施工开始时间', visible: true },
|
|
|
+ { key: 4, label: '施工结束时间', visible: true },
|
|
|
+ { key: 5, label: '现场安全员', visible: true },
|
|
|
+ { key: 6, label: '联系电话', visible: true },
|
|
|
+ { key: 7, label: '审核状态', visible: true },
|
|
|
+ { key: 8, label: '创建时间', visible: true }
|
|
|
+]);
|
|
|
+
|
|
|
+/** 施工开始时间禁用未来日期(可选:不晚于当前时间) */
|
|
|
+const startDisabledDate = (date: Date) => {
|
|
|
+ // return date.getTime() > Date.now(); // 开启则禁止选择未来时间
|
|
|
+ return false;
|
|
|
+};
|
|
|
+
|
|
|
+/** 施工结束时间不能早于开始时间 */
|
|
|
+const endDisabledDate = (date: Date) => {
|
|
|
+ if (form.startTime) {
|
|
|
+ return date.getTime() < new Date(form.startTime).getTime();
|
|
|
+ }
|
|
|
+ return false;
|
|
|
+};
|
|
|
+
|
|
|
+/** 获取列表 */
|
|
|
+const getList = async () => {
|
|
|
+ loading.value = true;
|
|
|
+ try {
|
|
|
+ const res: any = await listWorkReport(queryParams as any);
|
|
|
+ reportList.value = res.rows || [];
|
|
|
+ total.value = res.total || 0;
|
|
|
+ } catch (e) {
|
|
|
+ console.error('加载作业上报列表失败', e);
|
|
|
+ } finally {
|
|
|
+ loading.value = false;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const cancel = () => {
|
|
|
+ open.value = false;
|
|
|
+ reset();
|
|
|
+};
|
|
|
+
|
|
|
+const reset = () => {
|
|
|
+ form.reportId = undefined;
|
|
|
+ form.reportNo = '';
|
|
|
+ form.workType = '';
|
|
|
+ form.projectName = '';
|
|
|
+ form.startTime = '';
|
|
|
+ form.endTime = '';
|
|
|
+ form.safetyOfficer = '';
|
|
|
+ form.contactPhone = '';
|
|
|
+ form.workImages = '';
|
|
|
+ form.permitFiles = '';
|
|
|
+ form.workDesc = '';
|
|
|
+ form.remark = '';
|
|
|
+ workImageList.value = [];
|
|
|
+ permitFileList.value = [];
|
|
|
+ nextTick(() => {
|
|
|
+ reportFormRef.value?.resetFields();
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+const handleQuery = () => {
|
|
|
+ queryParams.pageNum = 1;
|
|
|
+ getList();
|
|
|
+};
|
|
|
+
|
|
|
+const resetQuery = () => {
|
|
|
+ queryFormRef.value?.resetFields();
|
|
|
+ handleQuery();
|
|
|
+};
|
|
|
+
|
|
|
+const handleSelectionChange = (selection: WorkReportVO[]) => {
|
|
|
+ ids.value = selection.map((item) => item.reportId);
|
|
|
+ single.value = selection.length !== 1;
|
|
|
+ multiple.value = !selection.length;
|
|
|
+};
|
|
|
+
|
|
|
+/** 新增 */
|
|
|
+const handleAdd = () => {
|
|
|
+ reset();
|
|
|
+ open.value = true;
|
|
|
+ title.value = '新增作业上报表单';
|
|
|
+};
|
|
|
+
|
|
|
+/** 修改 */
|
|
|
+const handleUpdate = async (row?: WorkReportVO) => {
|
|
|
+ reset();
|
|
|
+ const reportId = row?.reportId || ids.value[0];
|
|
|
+ const res: any = await getWorkReport(reportId);
|
|
|
+ const data = res.data;
|
|
|
+ Object.assign(form, data);
|
|
|
+ // 回显图片列表
|
|
|
+ if (data.workImages) {
|
|
|
+ const urls = data.workImages.split(',').filter(Boolean);
|
|
|
+ workImageList.value = urls.map((url: string, idx: number) => ({
|
|
|
+ name: 'image_' + idx,
|
|
|
+ url: url,
|
|
|
+ response: { data: { url: url } }
|
|
|
+ }));
|
|
|
+ }
|
|
|
+ // 回显证件列表
|
|
|
+ if (data.permitFiles) {
|
|
|
+ const urls = data.permitFiles.split(',').filter(Boolean);
|
|
|
+ permitFileList.value = urls.map((url: string, idx: number) => ({
|
|
|
+ name: 'permit_' + idx,
|
|
|
+ url: url,
|
|
|
+ response: { data: { url: url } }
|
|
|
+ }));
|
|
|
+ }
|
|
|
+ open.value = true;
|
|
|
+ title.value = '修改作业上报';
|
|
|
+};
|
|
|
+
|
|
|
+/** 详情查看 */
|
|
|
+const handleDetail = async (row?: WorkReportVO) => {
|
|
|
+ const reportId = row?.reportId || ids.value[0];
|
|
|
+ try {
|
|
|
+ const res: any = await getWorkReport(reportId);
|
|
|
+ detailData.value = res.data;
|
|
|
+ // 解析图片和证件URL
|
|
|
+ detailImageUrls.value = res.data.workImages
|
|
|
+ ? res.data.workImages.split(',').filter(Boolean)
|
|
|
+ : [];
|
|
|
+ detailPermitUrls.value = res.data.permitFiles
|
|
|
+ ? res.data.permitFiles.split(',').filter(Boolean)
|
|
|
+ : [];
|
|
|
+ detailOpen.value = true;
|
|
|
+ } catch (e) {
|
|
|
+ console.error('获取详情失败', e);
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+/** 从URL提取文件名 */
|
|
|
+const getFileNameFromUrl = (url: string) => {
|
|
|
+ if (!url) return '未知文件';
|
|
|
+ const parts = url.split('/');
|
|
|
+ return parts[parts.length - 1] || '未知文件';
|
|
|
+};
|
|
|
+
|
|
|
+/** 判断是否为PDF文件 */
|
|
|
+const isPdfUrl = (url: string) => {
|
|
|
+ return url?.toLowerCase().endsWith('.pdf');
|
|
|
+};
|
|
|
+
|
|
|
+/** 提交表单 */
|
|
|
+const submitForm = () => {
|
|
|
+ reportFormRef.value?.validate(async (valid: boolean) => {
|
|
|
+ if (valid) {
|
|
|
+ buttonLoading.value = true;
|
|
|
+ try {
|
|
|
+ // 拼接图片路径
|
|
|
+ form.workImages = workImageList.value
|
|
|
+ .filter((f: any) => f.response?.data?.url || f.url)
|
|
|
+ .map((f: any) => f.response?.data?.url || f.url)
|
|
|
+ .join(',');
|
|
|
+ // 拼接证件路径
|
|
|
+ form.permitFiles = permitFileList.value
|
|
|
+ .filter((f: any) => f.response?.data?.url || f.url)
|
|
|
+ .map((f: any) => f.response?.data?.url || f.url)
|
|
|
+ .join(',');
|
|
|
+
|
|
|
+ if (form.reportId) {
|
|
|
+ await updateWorkReport(form as any);
|
|
|
+ proxy?.$modal.msgSuccess('修改成功');
|
|
|
+ } else {
|
|
|
+ await addWorkReport(form as any);
|
|
|
+ proxy?.$modal.msgSuccess('新增成功');
|
|
|
+ }
|
|
|
+ open.value = false;
|
|
|
+ await getList();
|
|
|
+ } catch (e) {
|
|
|
+ console.error('提交失败', e);
|
|
|
+ } finally {
|
|
|
+ buttonLoading.value = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+/** 图片上传成功 */
|
|
|
+const handleWorkImageSuccess = (response: any, _file: any) => {
|
|
|
+ if (response.code !== 200) {
|
|
|
+ proxy?.$modal.msgError(response.msg || '上传失败');
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+/** 图片移除 */
|
|
|
+const handleWorkImageRemove = (_file: any) => {
|
|
|
+ // 从列表中移除
|
|
|
+};
|
|
|
+
|
|
|
+/** 超出图片数量限制 */
|
|
|
+const handleImageExceed = () => {
|
|
|
+ proxy?.$modal.msgError('最多只能上传 5 张图片');
|
|
|
+};
|
|
|
+
|
|
|
+/** 图片上传前校验 */
|
|
|
+const beforeWorkImageUpload = (file: any) => {
|
|
|
+ const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
|
|
|
+ if (!isJpgOrPng) {
|
|
|
+ proxy?.$modal.msgError('仅支持 JPG、PNG 格式的图片');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ const isLt5M = file.size / 1024 / 1024 < 5;
|
|
|
+ if (!isLt5M) {
|
|
|
+ proxy?.$modal.msgError('单张图片大小不能超过 5MB');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+};
|
|
|
+
|
|
|
+/** 证件上传成功 */
|
|
|
+const handlePermitFileSuccess = (response: any, _file: any) => {
|
|
|
+ if (response.code !== 200) {
|
|
|
+ proxy?.$modal.msgError(response.msg || '上传失败');
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+/** 证件移除 */
|
|
|
+const handlePermitFileRemove = (_file: any) => {};
|
|
|
+
|
|
|
+/** 证件上传前校验 */
|
|
|
+const beforePermitFileUpload = (file: any) => {
|
|
|
+ const allowedTypes = ['application/pdf', 'image/jpeg', 'image/png'];
|
|
|
+ if (!allowedTypes.includes(file.type)) {
|
|
|
+ proxy?.$modal.msgError('仅支持 PDF、JPG、PNG 格式的文件');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ const isLt10M = file.size / 1024 / 1024 < 10;
|
|
|
+ if (!isLt10M) {
|
|
|
+ proxy?.$modal.msgError('文件大小不能超过 10MB');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+};
|
|
|
+
|
|
|
+/** 审核 */
|
|
|
+const handleAudit = async (row?: WorkReportVO) => {
|
|
|
+ const reportId = row?.reportId || ids.value[0];
|
|
|
+ const res: any = await getWorkReport(reportId);
|
|
|
+ auditForm.reportId = res.data.reportId;
|
|
|
+ auditForm.auditStatus = '';
|
|
|
+ auditForm.auditComment = '';
|
|
|
+ auditOpen.value = true;
|
|
|
+};
|
|
|
+
|
|
|
+/** 提交审核 */
|
|
|
+const submitAudit = () => {
|
|
|
+ auditFormRef.value?.validate(async (valid: boolean) => {
|
|
|
+ if (valid) {
|
|
|
+ try {
|
|
|
+ await auditWorkReport({
|
|
|
+ reportId: auditForm.reportId,
|
|
|
+ auditStatus: auditForm.auditStatus,
|
|
|
+ auditComment: auditForm.auditComment
|
|
|
+ } as any);
|
|
|
+ proxy?.$modal.msgSuccess('审核完成');
|
|
|
+ auditOpen.value = false;
|
|
|
+ await getList();
|
|
|
+ } catch (e) {
|
|
|
+ console.error('审核失败', e);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+/** 删除 */
|
|
|
+const handleDelete = async (row?: WorkReportVO) => {
|
|
|
+ const reportIds = row?.reportId || ids.value;
|
|
|
+ await proxy?.$modal.confirm('是否确认删除选中的作业上报数据?');
|
|
|
+ try {
|
|
|
+ await delWorkReport(reportIds);
|
|
|
+ proxy?.$modal.msgSuccess('删除成功');
|
|
|
+ await getList();
|
|
|
+ } catch (e) {
|
|
|
+ console.error('删除失败', e);
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ getList();
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.permit-file-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 6px 10px;
|
|
|
+ border: 1px solid var(--el-border-color);
|
|
|
+ border-radius: 6px;
|
|
|
+ margin-top: 6px;
|
|
|
+ background: var(--el-fill-color-light);
|
|
|
+}
|
|
|
+.permit-file-item .el-link {
|
|
|
+ flex: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+.permit-file-remove {
|
|
|
+ cursor: pointer;
|
|
|
+ color: var(--el-text-color-secondary);
|
|
|
+ margin-left: 8px;
|
|
|
+}
|
|
|
+.permit-file-remove:hover {
|
|
|
+ color: var(--el-color-danger);
|
|
|
+}
|
|
|
+</style>
|