联调周期监测
This commit is contained in:
174
src/views/pqs/business/terminal/terminaCkeck/components/form.vue
Normal file
174
src/views/pqs/business/terminal/terminaCkeck/components/form.vue
Normal file
@@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:title="dialogMode === 'detail' ? '定检详情' : '上传周期检测报告'"
|
||||
:width="dialogMode === 'detail' ? '1000px' : '600px'"
|
||||
v-model="dialogShow"
|
||||
v-if="dialogShow"
|
||||
>
|
||||
<!-- 详情区域 -->
|
||||
<div v-if="dialogMode === 'detail'">
|
||||
</div>
|
||||
<!-- 上传报告表单区域 -->
|
||||
<div v-if="dialogMode === 'upload'">
|
||||
<el-form ref="uploadFormRef" :model="uploadForm" :rules="uploadRules" label-width="120px">
|
||||
<el-form-item label="定检日期" prop="thisCheckTime">
|
||||
<el-date-picker
|
||||
v-model="uploadForm.thisCheckTime"
|
||||
type="date"
|
||||
placeholder="请选择定检日期"
|
||||
@change="calcNextCheckTime"
|
||||
style="width:100%"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="下次定检日期" prop="nextCheckTime">
|
||||
<el-date-picker
|
||||
v-model="uploadForm.nextCheckTime"
|
||||
type="date"
|
||||
placeholder="请选择下次定检日期"
|
||||
style="width:100%"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item class="uploadFile" for="-" label="设备检测报告:" prop="checkUrl">
|
||||
<el-upload
|
||||
v-model:file-list="uploadForm.checkUrl"
|
||||
ref="uploadRef"
|
||||
action=""
|
||||
:accept="acceptType"
|
||||
:limit="1"
|
||||
:on-change="(file) => choose(file, 'checkUrl')"
|
||||
:auto-upload="false"
|
||||
:on-remove="removeFile('checkUrl')"
|
||||
>
|
||||
<template #trigger>
|
||||
<el-button type="primary">上传文件</el-button>
|
||||
</template>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<el-button v-if="dialogMode === 'upload'" @click="dialogShow = false">取消</el-button>
|
||||
<el-button
|
||||
v-if="dialogMode === 'upload'"
|
||||
type="primary"
|
||||
:loading="submitLoading"
|
||||
@click="submitUploadReport"
|
||||
>
|
||||
提交
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import type { UploadFile } from 'element-plus'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { uploadFile } from '@/api/system-boot/file'
|
||||
import { userCheckUpload } from '@/api/device-boot/device'
|
||||
|
||||
const emit = defineEmits(['onSubmit'])
|
||||
|
||||
const acceptType = '.pdf,.docx'
|
||||
|
||||
const detailId = ref('')
|
||||
const dialogShow = ref(false)
|
||||
const dialogMode = ref<'detail' | 'upload'>('detail')
|
||||
const submitLoading = ref(false)
|
||||
|
||||
const uploadFormRef = ref()
|
||||
const uploadForm = reactive({
|
||||
thisCheckTime: '',
|
||||
nextCheckTime: '',
|
||||
checkUrl: [] as any[],
|
||||
devId: '',
|
||||
objId: ''
|
||||
})
|
||||
const checkUrlFile = ref('')
|
||||
|
||||
const calcNextCheckTime = (dateVal: string) => {
|
||||
if (!dateVal) {
|
||||
uploadForm.nextCheckTime = ''
|
||||
return
|
||||
}
|
||||
const date = new Date(dateVal)
|
||||
date.setFullYear(date.getFullYear() + 3)
|
||||
const y = date.getFullYear()
|
||||
const m = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const d = String(date.getDate()).padStart(2, '0')
|
||||
uploadForm.nextCheckTime = `${y}-${m}-${d}`
|
||||
}
|
||||
|
||||
const uploadRules = reactive({
|
||||
thisCheckTime: [{ required: true, message: '请选择定检日期', trigger: 'change' }],
|
||||
checkUrl: [{ required: true, message: '请上传设备检测报告', trigger: 'change' }]
|
||||
})
|
||||
|
||||
const submitUploadReport = async () => {
|
||||
await uploadFormRef.value?.validate(async (valid: boolean) => {
|
||||
if (!valid) return
|
||||
if (!uploadForm.checkUrl.length) return ElMessage.warning('请先上传检测报告文件')
|
||||
submitLoading.value = true
|
||||
try {
|
||||
const params = {
|
||||
devId: uploadForm.devId,
|
||||
objId: uploadForm.objId,
|
||||
thisCheckTime: uploadForm.thisCheckTime,
|
||||
nextCheckTime: uploadForm.nextCheckTime,
|
||||
checkUrl: checkUrlFile.value
|
||||
}
|
||||
const res = await userCheckUpload(params)
|
||||
if (res.code === 'A0000') {
|
||||
ElMessage.success('提交成功')
|
||||
dialogShow.value = false
|
||||
emit('onSubmit')
|
||||
}
|
||||
} catch (err: any) {
|
||||
ElMessage.error(err.msg || '提交失败')
|
||||
} finally {
|
||||
submitLoading.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const openUpload = (row: any) => {
|
||||
console.log("🚀 ~ openUpload ~ row:", row)
|
||||
uploadForm.thisCheckTime = ''
|
||||
uploadForm.nextCheckTime = ''
|
||||
uploadForm.checkUrl = []
|
||||
uploadForm.devId = row.devId
|
||||
uploadForm.objId = row.objId
|
||||
checkUrlFile.value = ''
|
||||
uploadFormRef.value?.clearValidate()
|
||||
dialogMode.value = 'upload'
|
||||
dialogShow.value = true
|
||||
}
|
||||
|
||||
const openDetail = (id: string) => {
|
||||
detailId.value = id
|
||||
dialogMode.value = 'detail'
|
||||
dialogShow.value = true
|
||||
}
|
||||
|
||||
const removeFile = (val: string) => {
|
||||
return (_file: UploadFile, fileList: UploadFile[]) => {
|
||||
if (val === 'checkUrl') {
|
||||
checkUrlFile.value = ''
|
||||
}
|
||||
uploadForm[val] = fileList
|
||||
}
|
||||
}
|
||||
|
||||
const choose = (e: any, field: string) => {
|
||||
uploadFile(e.raw, '/supervision/').then(res => {
|
||||
if (field === 'checkUrl') {
|
||||
checkUrlFile.value = res.data.name
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({ openUpload, openDetail })
|
||||
</script>
|
||||
@@ -34,223 +34,37 @@
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template #operation>
|
||||
<!-- <el-button icon="el-icon-Plus" type="primary" @click="addFormModel">新增定检记录</el-button>-->
|
||||
<!-- <el-button icon="el-icon-Plus" type="primary" @click="addFormModel">新增定检记录</el-button>-->
|
||||
</template>
|
||||
</TableHeader>
|
||||
<Table ref="tableRef" />
|
||||
<Table ref="tableRef" @cell-click="cellClickEvent" />
|
||||
|
||||
<!-- 共用dialogShow弹窗,区分详情/上传报告 -->
|
||||
<el-dialog
|
||||
:title="dialogMode === 'detail' ? '定检详情' : '上传周期检测报告'"
|
||||
:width="dialogMode === 'detail' ? '1000px' : '600px'"
|
||||
v-model="dialogShow"
|
||||
v-if="dialogShow"
|
||||
>
|
||||
<!-- 详情区域 -->
|
||||
<div v-if="dialogMode === 'detail'">
|
||||
</div>
|
||||
<!-- 上传报告表单区域 -->
|
||||
<div v-if="dialogMode === 'upload'">
|
||||
<el-form ref="uploadFormRef" :model="uploadForm" label-width="120px">
|
||||
|
||||
<el-form-item label="定检日期" prop="thisCheckTime" rules="[{ required: true, message: '请选择定检日期', trigger: 'change' }]">
|
||||
<el-date-picker
|
||||
v-model="uploadForm.thisCheckTime"
|
||||
type="date"
|
||||
placeholder="请选择定检日期"
|
||||
@change="calcNextCheckTime"
|
||||
style="width:100%"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="下次定检日期" prop="nextCheckTime">
|
||||
<el-date-picker v-model="uploadForm.nextCheckTime" type="date" style="width:100%" value-format="YYYY-MM-DD" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
class="uploadFile"
|
||||
for="-"
|
||||
label="设备检测报告:"
|
||||
prop="checkUrl"
|
||||
>
|
||||
<el-upload
|
||||
v-model:file-list="uploadForm.checkUrl"
|
||||
ref="uploadRef"
|
||||
action=""
|
||||
:accept="acceptType"
|
||||
:limit="1"
|
||||
:on-change="(file) => choose(file, 'checkUrl')"
|
||||
:auto-upload="false"
|
||||
:on-remove="removeFile('checkUrl')"
|
||||
>
|
||||
<template #trigger>
|
||||
<el-button type="primary" >上传文件</el-button>
|
||||
</template>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<!-- footer 放到所有v-if外层,解决编译报错 -->
|
||||
<template #footer>
|
||||
<el-button v-if="dialogMode === 'upload'" @click="dialogShow = false">取消</el-button>
|
||||
<el-button v-if="dialogMode === 'upload'" type="primary" @click="submitUploadReport">提交</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<checkForm ref="checkFormRef" @onSubmit="tableStore.index()" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, reactive, watch } from 'vue'
|
||||
import { ref, onMounted, provide, watch } from 'vue'
|
||||
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import type { UploadFile, UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { genFileId, ElMessage } from 'element-plus'
|
||||
import checkForm from './components/form.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { useAdminInfo } from '@/stores/adminInfo'
|
||||
import { uploadFile } from '@/api/system-boot/file'
|
||||
import { userCheckUpload } from '@/api/device-boot/device'
|
||||
|
||||
const acceptType = '.pdf,.docx'
|
||||
import { download } from '@/utils/fileDownLoad'
|
||||
defineOptions({
|
||||
name: 'terminal/terminaCkeck'
|
||||
})
|
||||
|
||||
// 公共依赖
|
||||
const TableHeaderRef = ref()
|
||||
const checkFormRef = ref()
|
||||
const dictData = useDictData()
|
||||
const adminInfo = useAdminInfo()
|
||||
// 地区字典(和你原有地市下拉同源)
|
||||
const areaOptionList = dictData.getBasicData('jibei_area')
|
||||
|
||||
// 详情弹窗
|
||||
const detailId = ref('')
|
||||
const dialogShow = ref(false)
|
||||
// 弹窗模式:detail=详情 upload=上传报告
|
||||
const dialogMode = ref<'detail' | 'upload'>('detail')
|
||||
const submitLoading = ref()
|
||||
|
||||
// ========== 上传报告表单补充变量 ==========
|
||||
const uploadFormRef = ref()
|
||||
const fileList = ref<any[]>([])
|
||||
const uploadForm = reactive({
|
||||
thisCheckTime: '',
|
||||
nextCheckTime: '',
|
||||
checkUrl: [],
|
||||
devId:'',
|
||||
objId:''
|
||||
})
|
||||
// 电能质量检测报告
|
||||
const checkUrlFile = ref('')
|
||||
|
||||
|
||||
// 选择定检日期,自动往后推3年
|
||||
const calcNextCheckTime = (dateVal: string) => {
|
||||
if (!dateVal) {
|
||||
uploadForm.nextCheckTime = ''
|
||||
return
|
||||
}
|
||||
const date = new Date(dateVal)
|
||||
date.setFullYear(date.getFullYear() + 3)
|
||||
// 格式化为 YYYY-MM-DD 字符串
|
||||
const y = date.getFullYear()
|
||||
const m = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const d = String(date.getDate()).padStart(2, '0')
|
||||
uploadForm.nextCheckTime = `${y}-${m}-${d}`
|
||||
}
|
||||
|
||||
|
||||
// 表单校验
|
||||
const uploadRules = reactive({
|
||||
thisCheckTime: [{ required: true, message: '请选择定检日期', trigger: 'change' }],
|
||||
checkUrl: [{ required: true, message: '请上传设备检测报告', trigger: 'change' }]
|
||||
})
|
||||
|
||||
const resetForm = () => {
|
||||
uploadForm.thisCheckTime = ''
|
||||
uploadForm.nextCheckTime = ''
|
||||
uploadForm.checkUrl = []
|
||||
}
|
||||
|
||||
|
||||
const submitUploadReport = async () => {
|
||||
await uploadFormRef.value?.validate(async (valid: boolean) => {
|
||||
if (!valid) return
|
||||
if (!uploadForm.checkUrl) return ElMessage.warning('请先上传检测报告文件')
|
||||
submitLoading.value = true
|
||||
try {
|
||||
const params = {
|
||||
devId: uploadForm.devId,
|
||||
objId: uploadForm.objId,
|
||||
thisCheckTime: uploadForm.thisCheckTime,
|
||||
nextCheckTime: uploadForm.nextCheckTime,
|
||||
checkUrl: checkUrlFile.value
|
||||
}
|
||||
const res = await userCheckUpload(params)
|
||||
if (res.code === 'A0000') {
|
||||
ElMessage.success('提交成功')
|
||||
dialogShow.value = false
|
||||
// 刷新表格
|
||||
tableStore.index()
|
||||
}
|
||||
} catch (err: any) {
|
||||
ElMessage.error(err.msg || '提交失败')
|
||||
} finally {
|
||||
submitLoading.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 打开上传弹窗,重置表单
|
||||
const openUploadDialog = (row: any) => {
|
||||
uploadForm.thisCheckTime = ''
|
||||
uploadForm.nextCheckTime = ''
|
||||
uploadForm.checkUrl = []
|
||||
uploadForm.devId = row.devId
|
||||
uploadForm.objId = row.objId
|
||||
fileList.value = []
|
||||
uploadFormRef.value?.clearValidate()
|
||||
dialogMode.value = 'upload'
|
||||
dialogShow.value = true
|
||||
}
|
||||
|
||||
|
||||
// 处理上传文件回显
|
||||
const fileRaw = (row: any, key: string) => {
|
||||
const fileFields = ['checkUrl', 'assessUrl']
|
||||
for (const field of fileFields) {
|
||||
const filePath = row[key]?.[field] ?? row[field]
|
||||
if (filePath != null && filePath.length > 0) {
|
||||
uploadForm[field] = [{ name: filePath.split('/')[2] }]
|
||||
} else {
|
||||
uploadForm[field] = []
|
||||
}
|
||||
}
|
||||
uploadFormRef.value = row[key]?.checkUrl ?? row.checkUrl ?? ''
|
||||
}
|
||||
|
||||
|
||||
//移除文件上传
|
||||
const removeFile = (val: string) => {
|
||||
return (_file: UploadFile, fileList: UploadFile[]) => {
|
||||
if (val === 'checkUrl') {
|
||||
checkUrlFile.value = ''
|
||||
}
|
||||
uploadForm[val] = fileList
|
||||
}
|
||||
}
|
||||
const choose = (e: any, field: string) => {
|
||||
uploadFile(e.raw, '/supervision/').then(res => {
|
||||
if (field === 'checkUrl') {
|
||||
checkUrlFile.value = res.data.name
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// ==========================================
|
||||
|
||||
// TableStore 表格配置(仅修改字段映射,其余不动)
|
||||
const tableStore = new TableStore({
|
||||
url: '/device-boot/alarm/terminalCheckPage',
|
||||
@@ -269,10 +83,10 @@ const tableStore = new TableStore({
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{ field: 'areaName', title: '地市', minWidth: 80 },
|
||||
{ field: 'bdName', title: '变电站', minWidth: 110 },
|
||||
{ field: 'objName', title: '监测对象', minWidth: 140 },
|
||||
{ field: 'devName', title: '终端名称', minWidth: 150 },
|
||||
{ field: 'areaName', title: '所在地市', minWidth: 100 },
|
||||
{ field: 'bdName', title: '变电站', minWidth: 150 },
|
||||
{ field: 'objName', title: '监测对象', minWidth: 180 },
|
||||
{ field: 'devName', title: '终端名称', minWidth: 180 },
|
||||
{ field: 'loginDate', title: '投运时间', minWidth: 120 },
|
||||
{ field: 'thisCheckTime', title: '本次定检时间', minWidth: 120 },
|
||||
{ field: 'nextCheckTime', title: '下次定检时间', minWidth: 120 },
|
||||
@@ -299,7 +113,7 @@ const tableStore = new TableStore({
|
||||
{
|
||||
field: 'overdueDay',
|
||||
title: '逾期天数',
|
||||
minWidth: 70,
|
||||
minWidth: 80,
|
||||
render: 'customRender',
|
||||
customRender: props => {
|
||||
const val = props.renderValue
|
||||
@@ -317,8 +131,16 @@ const tableStore = new TableStore({
|
||||
return h('span', { style: { color, fontWeight: 'bold' } }, text)
|
||||
}
|
||||
},
|
||||
{ field: 'checkUrl', title: '周期检测报告', minWidth: 120 },
|
||||
|
||||
{
|
||||
field: 'checkUrl',
|
||||
title: '周期检测报告',
|
||||
minWidth: 160,
|
||||
render: 'customRender',
|
||||
customRender: props => {
|
||||
const val = props.renderValue?.replace(/^.*?\/(.*?)\//, '') || ''
|
||||
return val ? h('span', { style: { color: 'var(--el-color-primary)', cursor: 'pointer' } }, val) : '/'
|
||||
}
|
||||
},
|
||||
// 操作列固定右侧
|
||||
{
|
||||
title: '操作',
|
||||
@@ -326,16 +148,16 @@ const tableStore = new TableStore({
|
||||
minWidth: 160,
|
||||
render: 'buttons',
|
||||
buttons: [
|
||||
{
|
||||
name: 'detail',
|
||||
title: '详情',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-EditPen',
|
||||
render: 'basicButton',
|
||||
click: row => {
|
||||
openDetail(row.devId)
|
||||
}
|
||||
},
|
||||
// {
|
||||
// name: 'detail',
|
||||
// title: '详情',
|
||||
// type: 'primary',
|
||||
// icon: 'el-icon-EditPen',
|
||||
// render: 'basicButton',
|
||||
// click: row => {
|
||||
// checkFormRef.value.openDetail(row.devId)
|
||||
// }
|
||||
// },
|
||||
{
|
||||
name: 'edit',
|
||||
title: '上传周期检测报告',
|
||||
@@ -343,7 +165,7 @@ const tableStore = new TableStore({
|
||||
icon: 'el-icon-Open',
|
||||
render: 'basicButton',
|
||||
click: row => {
|
||||
openUploadDialog(row)
|
||||
checkFormRef.value.openUpload(row)
|
||||
}
|
||||
}
|
||||
]
|
||||
@@ -361,14 +183,6 @@ tableStore.table.params.substation = ''
|
||||
tableStore.table.params.terminalName = ''
|
||||
tableStore.table.params.orgId = adminInfo.$state.deptId
|
||||
|
||||
// 打开详情弹窗
|
||||
const openDetail = (id: string) => {
|
||||
detailId.value = id
|
||||
dialogShow.value = true
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 路由跳转带ID回显编辑(复用你原有路由传参逻辑)
|
||||
const props = defineProps({
|
||||
id: { type: String, default: 'null' }
|
||||
@@ -386,13 +200,16 @@ watch(
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
// 点击行
|
||||
const cellClickEvent = ({ row, column }: any) => {
|
||||
if (column.field == 'checkUrl') {
|
||||
row.checkUrl ? download(row.checkUrl) : ''
|
||||
}
|
||||
}
|
||||
provide('tableStore', tableStore)
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
||||
@@ -89,13 +89,13 @@ const tableStore = new TableStore({
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{ field: 'city', title: '所在地市', minWidth: 80 },
|
||||
{ field: 'city', title: '所在地市', minWidth: 100 },
|
||||
/* { field: 'substation', title: '厂站名称', minWidth: 100 },*/
|
||||
{ field: 'projectName', title: '项目名称', minWidth: 150 },
|
||||
{
|
||||
field: 'userType',
|
||||
title: '用户性质',
|
||||
minWidth: 120,
|
||||
minWidth: 180,
|
||||
formatter: (obj: any) => {
|
||||
const userType = obj.row.userType
|
||||
return getUserTypeName(userType)
|
||||
@@ -104,11 +104,11 @@ const tableStore = new TableStore({
|
||||
|
||||
// { field: 'responsibleDepartment', title: '归口管理部门', minWidth: 130 },
|
||||
{ field: 'ratePower', title: '装机容量(MW)', minWidth: 80 },
|
||||
{ field: 'stationId', title: '所属电站', minWidth: 100 },
|
||||
{ field: 'stationId', title: '所属电站', minWidth: 150 },
|
||||
{
|
||||
field: 'checkUrl',
|
||||
title: '电能质量设备检测报告',
|
||||
minWidth: 170,
|
||||
minWidth: 160,
|
||||
render: 'customRender',
|
||||
customRender: props => {
|
||||
const val = props.renderValue?.replace(/^.*?\/(.*?)\//, '') || ''
|
||||
@@ -118,7 +118,7 @@ const tableStore = new TableStore({
|
||||
{
|
||||
field: 'assessUrl',
|
||||
title: '电能质量评估报告',
|
||||
minWidth: 170,
|
||||
minWidth: 160,
|
||||
render: 'customRender',
|
||||
customRender: props => {
|
||||
const val = props.renderValue?.replace(/^.*?\/(.*?)\//, '') || ''
|
||||
|
||||
Reference in New Issue
Block a user