1039 lines
29 KiB
Vue
1039 lines
29 KiB
Vue
<template>
|
|
<!-- 装备维保页面 -->
|
|
<div class="app-container">
|
|
<!-- 搜索表单 -->
|
|
<el-form
|
|
ref="searchFormRef"
|
|
:model="searchParams"
|
|
:rules="searchFormRules"
|
|
:inline="true"
|
|
label-width="auto" size="small"
|
|
>
|
|
<el-card class="search-box">
|
|
<el-row :gutter="20" type="flex">
|
|
<el-col :span="6">
|
|
<el-form-item label="装备编码" prop="deviceCode">
|
|
<el-input
|
|
v-model.trim="searchParams.deviceCode"
|
|
placeholder="请输入装备编码"
|
|
clearable
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6" >
|
|
<el-form-item label="质检次数" prop="minNum">
|
|
<el-input
|
|
v-model="searchParams.minNum"
|
|
placeholder="质检次数"
|
|
inputmode="numeric"
|
|
size="small"
|
|
style="width: 100px"
|
|
/> -
|
|
<el-input
|
|
v-model.trim="searchParams.maxNum"
|
|
placeholder="质检次数"
|
|
inputmode="numeric"
|
|
size="small"
|
|
style="width: 100px"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="9">
|
|
<el-form-item label="质检日期" prop="leaseStatus">
|
|
<el-date-picker
|
|
v-model="qcTime"
|
|
type="daterange"
|
|
placeholder="最新质检日期"
|
|
range-separator="-"
|
|
value-format="yyyy-MM-dd"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="9">
|
|
<el-form-item label="更新日期" prop="createTime">
|
|
<el-date-picker
|
|
v-model="createTime"
|
|
type="daterange"
|
|
placeholder="更新日期"
|
|
range-separator="-"
|
|
value-format="yyyy-MM-dd"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="24" style="text-align: right;">
|
|
<el-button type="primary" icon="el-icon-search" size="mini" class="primary-lease" @click="onSearch">查询</el-button>
|
|
<el-button icon="el-icon-refresh" size="mini" class="primary-lease" @click="onReset">重置</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
</el-card>
|
|
</el-form>
|
|
<el-card class="content-box">
|
|
<div class="table-container">
|
|
<!-- 维保列表表格 -->
|
|
<el-table
|
|
:data="qualityLis"
|
|
border
|
|
stripe
|
|
show-overflow-tooltip
|
|
>
|
|
<el-table-column label="序号" type="index" align="center" width="80"/>
|
|
<el-table-column prop="deviceCode" label="装备编码" align="center"/>
|
|
<el-table-column prop="deviceName" label="装备名称" align="center"/>
|
|
<el-table-column prop="qcTime" label="最新质检日期" align="center"/>
|
|
<el-table-column prop="createBy" label="创建人" align="center" width="120"/>
|
|
<el-table-column prop="createTime" label="上传时间" align="center"/>
|
|
<el-table-column prop="updateTime" label="更新时间" align="center"/>
|
|
<el-table-column label="操作" align="center" width="280">
|
|
<template slot-scope="{ row }">
|
|
<el-button
|
|
size="mini"
|
|
type="primary"
|
|
class="primary-lease"
|
|
@click="handleOpenAddDialog(row)"
|
|
>
|
|
新建
|
|
</el-button>
|
|
<el-button
|
|
size="mini"
|
|
type="primary"
|
|
class="primary-lease"
|
|
@click="handleOpenDetailDialog(row)"
|
|
>
|
|
装备质检记录
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div class="pagination-wrapper">
|
|
<!-- 分页组件 -->
|
|
<pagination
|
|
:total="total"
|
|
:page.sync="searchParams.pageNum"
|
|
:limit.sync="searchParams.pageSize"
|
|
@pagination="getLeaseListData"
|
|
/>
|
|
</div>
|
|
|
|
</el-card>
|
|
<!-- 新增/详情对话框 -->
|
|
<el-dialog
|
|
:title="dialogTitle"
|
|
:visible.sync="addOrEditDialogVisible"
|
|
:width="dialogTitle === '质检新增' ? '40%' : '60%'"
|
|
align-center
|
|
destroy-on-close
|
|
@close="onClose"
|
|
>
|
|
<!-- 新增质检表单 -->
|
|
<template v-if="dialogTitle === '质检新增'">
|
|
<el-form
|
|
v-if="addOrEditDialogVisible"
|
|
ref="addOrEditFormRef"
|
|
:model="addOrEditForm"
|
|
:rules="addOrEditFormRules"
|
|
label-width="auto"
|
|
label-position="right"
|
|
>
|
|
<el-row :gutter="20">
|
|
<el-col :span="24">
|
|
<el-form-item label="质检员" prop="qcUser">
|
|
<el-input
|
|
v-model="addOrEditForm.qcUser"
|
|
placeholder="请输入质检员"
|
|
clearable
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="24">
|
|
<el-form-item label="质检日期" prop="qcTime">
|
|
<el-date-picker
|
|
v-model="addOrEditForm.qcTime"
|
|
type="date"
|
|
placeholder="请选择质检日期"
|
|
value-format="yyyy-MM-dd"
|
|
clearable
|
|
style="width: 100%"
|
|
@change="onQcChange"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="24">
|
|
<el-form-item label="下次质检日期" prop="nextCheckTime">
|
|
<el-date-picker
|
|
v-model="addOrEditForm.nextCheckTime"
|
|
type="date"
|
|
placeholder="请选择下次质检日期"
|
|
value-format="yyyy-MM-dd"
|
|
clearable
|
|
style="width: 100%"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="24">
|
|
<el-form-item label="质检附件" prop="fileInfoList">
|
|
<!-- 使用el-upload替换自定义上传组件 -->
|
|
<el-upload
|
|
:action="uploadUrl"
|
|
:headers="{ Authorization: getToken() }"
|
|
:file-list="fileList"
|
|
:on-success="handleUploadSuccess"
|
|
:on-error="handleUploadError"
|
|
:on-remove="handleRemove"
|
|
:before-upload="beforeUpload"
|
|
:limit="1"
|
|
:on-exceed="handleExceed"
|
|
accept=".jpg,.png,.pdf,.doc,.docx"
|
|
list-type="picture-card"
|
|
>
|
|
<i class="el-icon-plus" style="font-size: 48px; color: #aaa;"></i>
|
|
<div slot="tip" class="el-upload__tip">
|
|
支持格式：.jpg、.png、.pdf、.doc、.docx 单个文件大小不能超过10M
|
|
</div>
|
|
</el-upload>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
</template>
|
|
|
|
<!-- 质检记录详情 -->
|
|
<template v-if="dialogTitle === '质检记录'">
|
|
<el-row style="padding-bottom: 20px">
|
|
<el-col :span="6">
|
|
<span>装备编号：</span>
|
|
<span>{{ qualityDetails.deviceCode }}</span>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<span>装备名称：</span>
|
|
<span>{{ qualityDetails.deviceName }}</span>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<!-- 详情页搜索表单 -->
|
|
<el-form
|
|
ref="searchFormRefInDialog"
|
|
:model="searchParamsInDialog"
|
|
:inline="true"
|
|
size="default"
|
|
label-width="0"
|
|
>
|
|
<el-row>
|
|
<el-col :span="6">
|
|
<el-form-item prop="qcCode">
|
|
<el-input
|
|
v-model="searchParamsInDialog.qcCode"
|
|
placeholder="请输入质检编码"
|
|
clearable
|
|
style="width: 100%"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item>
|
|
<el-date-picker
|
|
v-model="qcTime_1"
|
|
type="daterange"
|
|
placeholder="质检日期"
|
|
range-separator="-"
|
|
value-format="yyyy-MM-dd"
|
|
start-placeholder="质检日期"
|
|
end-placeholder="质检日期"
|
|
style="width: 100%"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item>
|
|
<el-date-picker
|
|
v-model="createTime_1"
|
|
type="daterange"
|
|
placeholder="上传日期"
|
|
range-separator="-"
|
|
value-format="yyyy-MM-dd"
|
|
start-placeholder="上传日期"
|
|
end-placeholder="上传日期"
|
|
style="width: 100%"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item>
|
|
<el-button type="primary" icon="el-icon-search" class="primary-lease" @click="getLeaseListDataInDialog">查询</el-button>
|
|
<el-button icon="el-icon-refresh" class="primary-lease" @click="onResetInDialog">重置</el-button>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
|
|
<!-- 详情表格 -->
|
|
<el-table
|
|
:data="qualityDetailsList"
|
|
border
|
|
stripe
|
|
show-overflow-tooltip
|
|
>
|
|
<el-table-column label="序号" type="index" align="center" width="80"/>
|
|
<el-table-column prop="qcCode" label="质检编码" align="center"/>
|
|
<el-table-column prop="qcTime" label="维修保养日期" align="center"/>
|
|
<el-table-column prop="nickName" label="上传人" align="center" width="120"/>
|
|
<el-table-column prop="createTime" label="上传时间" align="center"/>
|
|
<el-table-column label="附件" align="center">
|
|
<template slot-scope="{ row }">
|
|
<el-image
|
|
v-if="row.url.includes('.jpg') || row.url.includes('.png')"
|
|
:src="row.url"
|
|
:zoom-rate="1.2"
|
|
:max-scale="7"
|
|
:min-scale="0.2"
|
|
:preview-src-list="[row.url]"
|
|
:initial-index="0"
|
|
:z-index="9999999999"
|
|
:preview-teleported="true"
|
|
style="width: 60px; height: 60px"
|
|
fit="cover"
|
|
/>
|
|
<span v-else>
|
|
<a
|
|
:href="row.url"
|
|
target="_blank"
|
|
style="color: #00a288; text-decoration: underline; cursor: pointer"
|
|
>
|
|
查看
|
|
</a>
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" align="center" width="80">
|
|
<template slot-scope="{ row }">
|
|
<el-popconfirm
|
|
width="220"
|
|
icon-color="#626AEF"
|
|
title="确定删除该记录吗？"
|
|
@confirm="onDelete(row)"
|
|
>
|
|
<template #reference>
|
|
<el-button size="small" type="danger"> 删除</el-button>
|
|
</template>
|
|
<template #actions="{ confirm }">
|
|
<el-button type="primary" class="primary-lease" size="small">取消</el-button>
|
|
<el-button type="primary" class="primary-lease" size="small" @click="confirm()">确定</el-button>
|
|
</template>
|
|
</el-popconfirm>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<!-- 详情页分页 -->
|
|
<pagination
|
|
:total="totalInDialog"
|
|
:page.sync="searchParamsInDialog.pageNum"
|
|
:limit.sync="searchParamsInDialog.pageSize"
|
|
@pagination="getLeaseListDataInDialog"
|
|
/>
|
|
</template>
|
|
|
|
<!-- 对话框底部按钮 -->
|
|
<template #footer v-if="dialogTitle === '质检新增'">
|
|
<div class="dialog-footer">
|
|
<el-button type="primary" class="primary-lease" @click="onCancel">取消</el-button>
|
|
<el-button type="primary" class="primary-lease" @click="onSubmit">提交</el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
addQualityDataApi,
|
|
getQualityListApi,
|
|
getQualityDetailsApi,
|
|
qualityDeleteByIdApi,
|
|
getAssociationListApi
|
|
} from '@/api/EquipmentServicing/index'
|
|
import { getSelectEquipmentListAPI } from '@/api/EquipmentLedger/equ-out'
|
|
import { getToken } from '@/utils/auth' // 引入获取token的工具函数
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
// 列表数据相关
|
|
total: 0,
|
|
qualityLis: [],
|
|
associationList: [],
|
|
|
|
// 详情页相关
|
|
totalInDialog: 0,
|
|
qualityDetailsList: [],
|
|
qualityDetails: {},
|
|
|
|
// 时间选择器相关
|
|
qcTime: [],
|
|
createTime: [],
|
|
qcTime_1: [],
|
|
createTime_1: [],
|
|
|
|
// 对话框相关
|
|
dialogTitle: '',
|
|
addOrEditDialogVisible: false,
|
|
isRepublish: true,
|
|
|
|
// 搜索参数
|
|
searchParams: {
|
|
deviceCode: '',
|
|
qcStartTime: '',
|
|
qcEndTime: '',
|
|
createStartTime: '',
|
|
createEndTime: '',
|
|
minNum: '',
|
|
maxNum: '',
|
|
pageSize: 10,
|
|
pageNum: 1
|
|
},
|
|
|
|
// 详情页搜索参数
|
|
searchParamsInDialog: {
|
|
id: '',
|
|
qcCode: '',
|
|
qcStartTime: '',
|
|
qcEndTime: '',
|
|
createStartTime: '',
|
|
createEndTime: '',
|
|
maId: '',
|
|
pageSize: 10,
|
|
pageNum: 1
|
|
},
|
|
|
|
// 表单数据
|
|
addOrEditForm: {
|
|
maId: '',
|
|
qcName: '',
|
|
qcUser: '',
|
|
qcTime: '',
|
|
nextCheckTime: '',
|
|
fileInfoList: [], // 存储上传成功的文件信息
|
|
},
|
|
|
|
// 文件上传相关
|
|
fileList: [], // el-upload使用的文件列表
|
|
uploadUrl: process.env.VUE_APP_BASE_API + '/file/upload',
|
|
warningDays: 0
|
|
}
|
|
},
|
|
computed: {
|
|
// 搜索表单验证规则
|
|
searchFormRules() {
|
|
return {
|
|
minNum: [
|
|
{
|
|
pattern: /^[1-9][0-9]*$/,
|
|
message: '请输入大于0的正整数',
|
|
trigger: 'blur'
|
|
},
|
|
{ validator: this.checkMinNum, trigger: 'blur' }
|
|
],
|
|
maxNum: [
|
|
{
|
|
pattern: /^[1-9][0-9]*$/,
|
|
message: '请输入大于0的正整数',
|
|
trigger: 'blur'
|
|
},
|
|
{ validator: this.checkMaxNum, trigger: 'blur' }
|
|
]
|
|
}
|
|
},
|
|
// 新增表单验证规则
|
|
addOrEditFormRules() {
|
|
return {
|
|
maId: [{ required: true, message: '请选择关联装备', trigger: 'change' }],
|
|
nextCheckTime: [{ required: true, message: '请输入下次质检日期', trigger: 'blur' }],
|
|
qcUser: [{ required: true, message: '请输入质检员', trigger: 'change' }],
|
|
qcTime: [{ required: true, message: '请选择质检日期', trigger: 'change' }],
|
|
fileInfoList: [{ required: true, message: '请上传质检附件', trigger: 'blur' }]
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
getToken,
|
|
// 验证最小次数不能大于最大次数
|
|
checkMinNum(rule, value, callback) {
|
|
const maxNum = parseInt(this.searchParams.maxNum)
|
|
if (value > maxNum && maxNum > 0) {
|
|
return callback(new Error('查询开始次数不能大于查询结束次数'))
|
|
}
|
|
callback()
|
|
},
|
|
// 验证最大次数不能小于最小次数
|
|
checkMaxNum(rule, value, callback) {
|
|
const minNum = parseInt(this.searchParams.minNum)
|
|
if (value < minNum && minNum > 0) {
|
|
return callback(new Error('查询结束次数不能小于查询开始次数'))
|
|
}
|
|
callback()
|
|
},
|
|
|
|
// 获取列表数据
|
|
async getLeaseListData() {
|
|
// 处理日期范围
|
|
if (this.qcTime.length > 0) {
|
|
console.log(this.qcTime)
|
|
this.searchParams.qcStartTime = this.qcTime[0]
|
|
this.searchParams.qcEndTime = this.qcTime[1]
|
|
}
|
|
if (this.createTime.length > 0) {
|
|
this.searchParams.createStartTime = this.createTime[0]
|
|
this.searchParams.createEndTime = this.createTime[1]
|
|
}
|
|
|
|
try {
|
|
getQualityListApi(this.searchParams).then((res) => {
|
|
console.log(res)
|
|
this.qualityLis = res.data.rows
|
|
this.total = res.data.total
|
|
})
|
|
} catch (error) {
|
|
console.error('获取质检列表失败:', error)
|
|
this.$message.error('获取数据失败，请重试')
|
|
}
|
|
},
|
|
|
|
// 搜索
|
|
onSearch() {
|
|
this.$refs.searchFormRef.validate(valid => {
|
|
if (valid) {
|
|
this.getLeaseListData()
|
|
}
|
|
})
|
|
},
|
|
|
|
// 重置搜索条件
|
|
onReset() {
|
|
this.qcTime = []
|
|
this.createTime = []
|
|
this.searchParams = {
|
|
deviceCode: '',
|
|
qcStartTime: '',
|
|
qcEndTime: '',
|
|
createStartTime: '',
|
|
createEndTime: '',
|
|
minNum: '',
|
|
maxNum: '',
|
|
pageSize: 10,
|
|
pageNum: 1
|
|
}
|
|
this.$refs.searchFormRef.resetFields()
|
|
this.getLeaseListData()
|
|
},
|
|
|
|
// 获取关联装备列表
|
|
async getAssociationListData() {
|
|
try {
|
|
const res = await getAssociationListApi()
|
|
this.associationList = res.data
|
|
} catch (error) {
|
|
console.error('获取关联装备失败:', error)
|
|
this.$message.error('获取关联装备失败，请重试')
|
|
}
|
|
},
|
|
|
|
// 打开新增对话框
|
|
handleOpenAddDialog(row) {
|
|
this.isRepublish = true
|
|
this.dialogTitle = '质检新增'
|
|
this.addOrEditDialogVisible = true
|
|
// 重置表单和文件列表
|
|
this.addOrEditForm = {
|
|
maId: row.maId,
|
|
qcName: '',
|
|
qcUser: '',
|
|
qcTime: '',
|
|
nextCheckTime: '',
|
|
fileInfoList: [],
|
|
}
|
|
this.fileList = []
|
|
this.warningDays = row.maintenanceAlarmDay
|
|
},
|
|
|
|
// 打开详情对话框
|
|
handleOpenDetailDialog(row) {
|
|
this.qualityDetails = row
|
|
this.searchParamsInDialog.maId = row.maId
|
|
this.searchParamsInDialog.qcCode = ''
|
|
this.qcTime_1 = []
|
|
this.createTime_1 = []
|
|
this.searchParamsInDialog.qcStartTime = ''
|
|
this.searchParamsInDialog.qcEndTime = ''
|
|
this.searchParamsInDialog.createStartTime = ''
|
|
this.searchParamsInDialog.createEndTime = ''
|
|
this.dialogTitle = '质检记录'
|
|
this.addOrEditDialogVisible = true
|
|
this.getLeaseListDataInDialog()
|
|
},
|
|
|
|
// 获取详情列表数据
|
|
async getLeaseListDataInDialog() {
|
|
// 处理日期范围
|
|
if (this.qcTime_1.length > 0) {
|
|
this.searchParamsInDialog.qcStartTime = this.qcTime_1[0]
|
|
this.searchParamsInDialog.qcEndTime = this.qcTime_1[1]
|
|
}
|
|
if (this.createTime_1.length > 0) {
|
|
this.searchParamsInDialog.createStartTime = this.createTime_1[0]
|
|
this.searchParamsInDialog.createEndTime = this.createTime_1[1]
|
|
}
|
|
|
|
try {
|
|
const { data: res } = await getQualityDetailsApi(this.searchParamsInDialog)
|
|
this.qualityDetailsList = res.rows
|
|
this.totalInDialog = res.total
|
|
} catch (error) {
|
|
console.error('获取质检详情失败:', error)
|
|
this.$message.error('获取详情数据失败，请重试')
|
|
}
|
|
},
|
|
|
|
// 重置详情页搜索条件
|
|
onResetInDialog() {
|
|
this.qcTime_1 = []
|
|
this.createTime_1 = []
|
|
this.searchParamsInDialog = {
|
|
...this.searchParamsInDialog,
|
|
qcCode: '',
|
|
qcStartTime: '',
|
|
qcEndTime: '',
|
|
createStartTime: '',
|
|
createEndTime: '',
|
|
pageNum: 1,
|
|
pageSize: 10
|
|
}
|
|
this.$refs.searchFormRefInDialog.resetFields()
|
|
this.getLeaseListDataInDialog()
|
|
},
|
|
|
|
// 删除质检记录
|
|
async onDelete(row) {
|
|
try {
|
|
const res = await qualityDeleteByIdApi({
|
|
fileId: row.fileId,
|
|
maId: row.maId
|
|
})
|
|
if (res.code === 200) {
|
|
this.$message.success('删除成功')
|
|
this.getLeaseListData()
|
|
this.getLeaseListDataInDialog()
|
|
} else {
|
|
this.$message.error(res.msg || '删除失败')
|
|
}
|
|
} catch (error) {
|
|
console.error('删除质检记录失败:', error)
|
|
// this.$message.error('删除失败，请重试')
|
|
}
|
|
},
|
|
|
|
// 提交新增表单
|
|
onSubmit() {
|
|
this.$refs.addOrEditFormRef.validate(async valid => {
|
|
if (valid) {
|
|
try {
|
|
const res = await addQualityDataApi(this.addOrEditForm)
|
|
if (res.code === 200) {
|
|
this.$message.success('提交成功')
|
|
this.addOrEditDialogVisible = false
|
|
this.getLeaseListData()
|
|
} else {
|
|
this.$message.error(res.msg || '提交失败')
|
|
}
|
|
} catch (error) {
|
|
console.error('提交质检数据失败:', error)
|
|
this.$message.error('提交失败，请重试')
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
// 取消
|
|
onCancel() {
|
|
this.addOrEditDialogVisible = false
|
|
},
|
|
|
|
// 关闭对话框
|
|
onClose() {
|
|
if (this.dialogTitle !== '质检记录') {
|
|
this.$refs.addOrEditFormRef.resetFields()
|
|
this.fileList = []
|
|
this.addOrEditForm.fileInfoList = []
|
|
}
|
|
},
|
|
|
|
// 文件上传成功处理
|
|
handleUploadSuccess(response, file, fileList) {
|
|
if (response.code === 200) {
|
|
this.$message.success('文件上传成功')
|
|
// 按后端返回格式调整文件信息
|
|
let fileUrl = ''
|
|
if (process.env.VUE_APP_BASE_API !== '/iws/jxhzb-api') {
|
|
fileUrl = response.data.url // 公司-测试环境
|
|
} else {
|
|
fileUrl = 'http://sgwpdm.ah.sgcc.com.cn/iws/ahbns/' + response.data.url // 宏源-测试环境
|
|
}
|
|
|
|
// 更新表单文件列表
|
|
this.addOrEditForm.fileInfoList = [{
|
|
fileName: file.name,
|
|
fileUrl: fileUrl,
|
|
fileId: response.data.fileId // 假设后端返回fileId
|
|
}]
|
|
} else {
|
|
this.$message.error(response.msg || '文件上传失败')
|
|
// 上传失败时从文件列表中移除
|
|
this.fileList = this.fileList.filter(f => f.uid !== file.uid)
|
|
}
|
|
},
|
|
|
|
// 文件上传失败处理
|
|
handleUploadError(error, file, fileList) {
|
|
this.$message.error('文件上传失败，请重试')
|
|
// 从文件列表中移除失败的文件
|
|
this.fileList = this.fileList.filter(f => f.uid !== file.uid)
|
|
},
|
|
|
|
// 移除文件处理
|
|
handleRemove(file, fileList) {
|
|
this.fileList = fileList
|
|
// 同时清空表单中的文件信息
|
|
this.addOrEditForm.fileInfoList = []
|
|
},
|
|
|
|
// 上传前校验
|
|
beforeUpload(file) {
|
|
// 校验文件大小
|
|
const isLt10M = file.size / 1024 / 1024 < 10
|
|
if (!isLt10M) {
|
|
this.$message.error('上传文件大小不能超过 10MB!')
|
|
return false
|
|
}
|
|
|
|
// 校验文件类型
|
|
const fileExtension = file.name.split('.').pop().toLowerCase()
|
|
const allowedTypes = ['jpg', 'png', 'pdf', 'doc', 'docx']
|
|
if (!allowedTypes.includes(fileExtension)) {
|
|
this.$message.error('只支持 jpg、png、pdf、doc、docx 格式的文件!')
|
|
return false
|
|
}
|
|
|
|
return true
|
|
},
|
|
|
|
// 超过文件数量限制处理
|
|
handleExceed(files, fileList) {
|
|
this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，已自动忽略多余文件。`)
|
|
},
|
|
|
|
// 质检日期变化时自动计算下次质检日期
|
|
onQcChange(value) {
|
|
if (!value || !this.warningDays) return
|
|
const currentDate = new Date(value)
|
|
currentDate.setDate(currentDate.getDate() + this.warningDays)
|
|
this.addOrEditForm.nextCheckTime = this.formatDate(currentDate)
|
|
},
|
|
|
|
// 格式化日期
|
|
formatDate(date) {
|
|
const year = date.getFullYear()
|
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
|
const day = String(date.getDate()).padStart(2, '0')
|
|
const hours = String(date.getHours()).padStart(2, '0')
|
|
const minutes = String(date.getMinutes()).padStart(2, '0')
|
|
const seconds = String(date.getSeconds()).padStart(2, '0')
|
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getLeaseListData()
|
|
this.getAssociationListData()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.app-container {
|
|
padding: 20px;
|
|
}
|
|
|
|
.page-header {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
padding-bottom: 15px;
|
|
border-bottom: 1px solid #e6e6e6;
|
|
|
|
.page-title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #303133;
|
|
}
|
|
}
|
|
|
|
::v-deep .el-form--inline .el-form-item {
|
|
margin-right: 6px;
|
|
width: 95%;
|
|
}
|
|
|
|
::v-deep .upload-tip .el-form-item__label {
|
|
color: transparent;
|
|
}
|
|
|
|
::v-deep .el-pagination {
|
|
justify-content: flex-end;
|
|
padding: 5px 0;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
::v-deep .el-pagination.is-background .el-pager li.is-active {
|
|
background-color: #3cb4a6;
|
|
}
|
|
|
|
::v-deep .el-dialog {
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
margin: 0 !important;
|
|
position: absolute !important;
|
|
top: 50% !important;
|
|
left: 50% !important;
|
|
transform: translate(-50%, -50%) !important;
|
|
max-height: 100vh !important;
|
|
|
|
.el-dialog__body {
|
|
flex: 1;
|
|
overflow-y: scroll !important;
|
|
}
|
|
|
|
.dialog-content {
|
|
padding: 20px;
|
|
}
|
|
}
|
|
|
|
::v-deep .el-upload--picture-card {
|
|
width: 100px;
|
|
height: 100px;
|
|
line-height: 100px;
|
|
}
|
|
|
|
.img-list {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.img-items {
|
|
width: 100px;
|
|
height: 100px;
|
|
margin-right: 8px;
|
|
position: relative;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.mask-img {
|
|
visibility: hidden;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: #000;
|
|
opacity: 0.5;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.delete-icon {
|
|
font-size: 20px;
|
|
cursor: pointer;
|
|
z-index: 9;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.img-items:hover .mask-img {
|
|
visibility: visible;
|
|
}
|
|
}
|
|
|
|
.search-box {
|
|
margin-bottom: 20px;
|
|
border-radius: 8px;
|
|
padding: 0;
|
|
}
|
|
|
|
.content-box {
|
|
border-radius: 8px;
|
|
height: calc(100vh - 260px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
|
|
::v-deep .el-card__body {
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
height: 100% !important;
|
|
padding: 20px;
|
|
}
|
|
|
|
.el-row:first-child {
|
|
margin-bottom: 16px;
|
|
flex-shrink: 0;
|
|
|
|
.el-col {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
}
|
|
|
|
.table-container {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
margin-bottom: 0;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.pagination-wrapper {
|
|
flex-shrink: 0;
|
|
padding-top: 6px;
|
|
margin-top: auto;
|
|
|
|
::v-deep .pagination-container {
|
|
padding: 0px 20px !important;
|
|
margin-bottom: 30px;
|
|
}
|
|
}
|
|
|
|
::v-deep .el-table {
|
|
// 启用斑马纹
|
|
&.el-table--striped .el-table__body {
|
|
tr.el-table__row--striped td {
|
|
background-color: #F6FBFA !important; // 浅紫色
|
|
}
|
|
}
|
|
|
|
.el-table__header {
|
|
background: #E9F0EE;
|
|
|
|
th {
|
|
background: #E9F0EE !important;
|
|
color: #606266;
|
|
font-weight: 600;
|
|
height: 50px;
|
|
}
|
|
}
|
|
|
|
&.el-table--striped .el-table__body tr.el-table__row:hover>td.el-table__cell {
|
|
background-color: #CCF1E9 !important;
|
|
}
|
|
}
|
|
}
|
|
.dialog-table {
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
|
|
::v-deep .el-table {
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
|
|
// 启用斑马纹
|
|
&.el-table--striped .el-table__body {
|
|
tr.el-table__row--striped td {
|
|
background-color: #F6FBFA !important;
|
|
}
|
|
}
|
|
|
|
.el-table__header {
|
|
background: #E9F0EE;
|
|
|
|
th {
|
|
background: #E9F0EE !important;
|
|
color: #606266;
|
|
font-weight: 600;
|
|
height: 45px;
|
|
font-size: 14px;
|
|
border-bottom: 2px solid #e4e7ed;
|
|
}
|
|
}
|
|
|
|
.el-table__body {
|
|
tr {
|
|
transition: all 0.2s ease;
|
|
|
|
&:hover {
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
td {
|
|
padding: 12px 8px;
|
|
font-size: 13px;
|
|
border-bottom: 1px solid #f0f2f5;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.el-table--striped .el-table__body tr.el-table__row:hover>td.el-table__cell {
|
|
background-color: #CCF1E9 !important;
|
|
}
|
|
|
|
// 表格边框优化
|
|
&::before {
|
|
display: none;
|
|
}
|
|
|
|
&::after {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
::v-deep .el-table {
|
|
// 启用斑马纹
|
|
&.el-table--striped .el-table__body {
|
|
tr.el-table__row--striped td {
|
|
background-color: #F6FBFA !important; // 浅紫色
|
|
}
|
|
}
|
|
|
|
.el-table__header {
|
|
background: #E9F0EE;
|
|
|
|
th {
|
|
background: #E9F0EE !important;
|
|
color: #606266;
|
|
font-weight: 600;
|
|
height: 50px;
|
|
}
|
|
}
|
|
|
|
&.el-table--striped .el-table__body tr.el-table__row:hover>td.el-table__cell {
|
|
background-color: #CCF1E9 !important;
|
|
}
|
|
}
|
|
</style>
|
|
|