ZhaoYang
3 weeks ago
7 changed files with 1155 additions and 530 deletions
-
13chenhai-ui/src/api/vet/qualification.js
-
507chenhai-ui/src/views/system/vet/aduit/index.vue
-
16chenhai-ui/src/views/vet/comments/index.vue
-
41chenhai-ui/src/views/vet/info/index.vue
-
351chenhai-ui/src/views/vet/notification/index.vue
-
54chenhai-ui/src/views/vet/qualification/index.vue
-
703chenhai-ui/src/views/vet/syQualification/index.vue
@ -0,0 +1,703 @@ |
|||||
|
<template> |
||||
|
<div class="app-container"> |
||||
|
<!-- 搜索表单 --> |
||||
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px"> |
||||
|
<el-form-item label="证书编号" prop="certificateNo"> |
||||
|
<el-input v-model="queryParams.certificateNo" placeholder="请输入证书编号" clearable |
||||
|
@keyup.enter.native="handleQuery" style="width: 180px" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="证书名称" prop="certName"> |
||||
|
<el-input v-model="queryParams.certName" placeholder="请输入证书名称" clearable @keyup.enter.native="handleQuery" |
||||
|
style="width: 200px" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="发证机构" prop="issueOrg"> |
||||
|
<el-input v-model="queryParams.issueOrg" placeholder="请输入发证机构" clearable @keyup.enter.native="handleQuery" |
||||
|
style="width: 200px" /> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="证书状态" prop="certStatus"> |
||||
|
<el-select v-model="queryParams.certStatus" placeholder="请选择证书状态" clearable style="width: 120px"> |
||||
|
<el-option v-for="dict in dict.type.certificate_status" :key="dict.value" :label="dict.label" |
||||
|
:value="dict.value" /> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> |
||||
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
|
||||
|
<!-- 资质基本信息卡片 - 反显当前选中的资质信息 --> |
||||
|
<el-card class="qualification-info-card" shadow="hover" v-if="currentQualification" style="margin-bottom: 20px;"> |
||||
|
<div slot="header" class="clearfix"> |
||||
|
<span><i class="el-icon-document"></i> 资质基本信息</span> |
||||
|
</div> |
||||
|
<el-row :gutter="20"> |
||||
|
<el-col :span="6"> |
||||
|
<div class="info-item"> |
||||
|
<div class="info-label">真实姓名：</div> |
||||
|
<div class="info-value">{{ currentQualification.realName || '-' }}</div> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :span="6"> |
||||
|
<div class="info-item"> |
||||
|
<div class="info-label">身份证号：</div> |
||||
|
<div class="info-value">{{ currentQualification.idCard || '-' }}</div> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :span="6"> |
||||
|
<div class="info-item"> |
||||
|
<div class="info-label">资质类型：</div> |
||||
|
<div class="info-value"> |
||||
|
<el-tag size="small" type="success">{{ getDictLabel('qualification_type', |
||||
|
currentQualification.qualificationType) }}</el-tag> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :span="6"> |
||||
|
<div class="info-item"> |
||||
|
<div class="info-label">审核状态：</div> |
||||
|
<div class="info-value"> |
||||
|
<el-tag size="small"> |
||||
|
{{ getDictLabel('qualification_shenhe', currentQualification.auditStatus) }} |
||||
|
</el-tag> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row :gutter="20" style="margin-top: 12px;"> |
||||
|
<el-col :span="24"> |
||||
|
<div class="info-item"> |
||||
|
<div class="info-label">经营范围：</div> |
||||
|
<div class="info-value"> |
||||
|
<template> |
||||
|
<el-tag v-for="scopeId in currentQualification.scopeIds" :key="scopeId" size="small" |
||||
|
type="info" style="margin-right: 8px; margin-bottom: 4px;"> |
||||
|
{{ getDictLabel('scope_names', scopeId) }} |
||||
|
</el-tag> |
||||
|
</template> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</el-card> |
||||
|
|
||||
|
<!-- 操作按钮 --> |
||||
|
<el-row :gutter="10" class="mb8"> |
||||
|
<el-col :span="1.5"> |
||||
|
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" |
||||
|
v-hasPermi="['vet:qualification:add']">新增</el-button> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
|
||||
|
<!-- 证书列表 --> |
||||
|
<el-alert v-if="!certificateList || certificateList.length === 0" title="暂无资质证书" type="info" :closable="false" |
||||
|
style="margin-bottom: 20px;" /> |
||||
|
|
||||
|
<el-table v-else v-loading="loading" :data="certificateList" border style="width: 100%"> |
||||
|
<el-table-column type="selection" width="55" align="center" /> |
||||
|
<el-table-column prop="certificateNo" label="证书编号" align="center" :show-overflow-tooltip="true" /> |
||||
|
<el-table-column prop="certName" label="证书名称" align="center" :show-overflow-tooltip="true" /> |
||||
|
<el-table-column label="发证机构" align="center" prop="issueOrg" :show-overflow-tooltip="true"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="scope.row.issueOrg">{{ scope.row.issueOrg }}</span> |
||||
|
<span v-else style="color: #909399">-</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="证书文件" prop="certificateFiles" align="center" width="100"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="scope.row.certificateFiles"> |
||||
|
<template v-if="isImageFile(scope.row.certificateFiles)"> |
||||
|
<el-button type="text" icon="el-icon-view" |
||||
|
@click="previewCertificate(scope.row.certificateFiles)" |
||||
|
style="color: #409EFF;font-size: 20px"> |
||||
|
</el-button> |
||||
|
</template> |
||||
|
<template v-else-if="isPdfFile(scope.row.certificateFiles)"> |
||||
|
<el-button type="text" icon="el-icon-download" @click="downloadFile(scope.row.certificateFiles)" |
||||
|
style="color: #287c07;font-size: 20px"> |
||||
|
</el-button> |
||||
|
</template> |
||||
|
</span> |
||||
|
<span v-else style="color: #909399">-</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="issueDate" label="发证日期" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span>{{ parseTime(scope.row.issueDate, '{y}-{m}-{d}') }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="expireDate" label="到期日期" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span>{{ parseTime(scope.row.expireDate, '{y}-{m}-{d}') }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="证书状态" align="center" prop="certStatus"> |
||||
|
<template slot-scope="scope"> |
||||
|
<dict-tag :options="dict.type.certificate_status" :value="scope.row.certStatus" /> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button size="mini" type="text" icon="el-icon-edit" style="color: #42B983" |
||||
|
@click="handleUpdate(scope.row)" |
||||
|
class="info-btn alter-btn">修改</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
<div class="pagestyle" v-if="total > 0"> |
||||
|
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" |
||||
|
:limit.sync="queryParams.pageSize" @pagination="getCertificateList" /> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 图片预览弹窗 --> |
||||
|
<el-dialog :visible.sync="previewDialogVisible" width="80%" append-to-body> |
||||
|
<div style="text-align: center; padding: 20px;"> |
||||
|
<img :src="getImageUrl(previewFileUrl)" style="max-width: 100%; max-height: 70vh; height: auto;" /> |
||||
|
</div> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button @click="previewDialogVisible = false">关 闭</el-button> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
|
||||
|
<!-- 添加或修改兽医资质弹窗 --> |
||||
|
<el-dialog :title="title" :visible.sync="open" width="80%" append-to-body> |
||||
|
<el-alert v-if="authInfo" type="success" :closable="false" show-icon style="margin-bottom: 20px;"> |
||||
|
<span>已通过实名认证，姓名和身份证已自动填充并锁定</span> |
||||
|
</el-alert> |
||||
|
|
||||
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px"> |
||||
|
<el-form-item label="真实姓名" prop="realName"> |
||||
|
<el-input v-model="form.realName" placeholder="请输入真实姓名" :readonly="realNameReadOnly" |
||||
|
:disabled="realNameReadOnly"> |
||||
|
<template v-if="realNameReadOnly" slot="suffix"> |
||||
|
<el-tooltip content="已通过实名认证" placement="top"> |
||||
|
<i class="el-icon-success" style="color: #67C23A; line-height: 32px;"></i> |
||||
|
</el-tooltip> |
||||
|
</template> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="身份证号" prop="idCard"> |
||||
|
<el-input v-model="form.idCard" placeholder="请输入身份证号" :readonly="idCardReadOnly" |
||||
|
:disabled="idCardReadOnly"> |
||||
|
<template v-if="idCardReadOnly" slot="suffix"> |
||||
|
<el-tooltip content="已通过实名认证" placement="top"> |
||||
|
<i class="el-icon-success" style="color: #67C23A; line-height: 32px;"></i> |
||||
|
</el-tooltip> |
||||
|
</template> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="证书编号" prop="certificateNo"> |
||||
|
<el-input v-model="form.certificateNo" placeholder="请输入证书编号" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="证书名称" prop="certName"> |
||||
|
<el-input v-model="form.certName" placeholder="请输入证书名称" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="发证机构" prop="issueOrg"> |
||||
|
<el-input v-model="form.issueOrg" placeholder="请输入发证机构" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="发证日期" prop="issueDate"> |
||||
|
<el-date-picker clearable v-model="form.issueDate" type="date" value-format="yyyy-MM-dd" |
||||
|
placeholder="请选择发证日期" style="width: 100%"> |
||||
|
</el-date-picker> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="到期日期" prop="expireDate"> |
||||
|
<el-date-picker clearable v-model="form.expireDate" type="date" value-format="yyyy-MM-dd" |
||||
|
placeholder="请选择到期日期" style="width: 100%"> |
||||
|
</el-date-picker> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="证书文件" prop="certificateFiles"> |
||||
|
<file-upload v-model="form.certificateFiles" :limit="1" :file-type="['pdf', 'png', 'jpg', 'jpeg']" /> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button type="primary" @click="submitForm">{{ isAddMode ? '提交审核' : '重新提交审核' }}</el-button> |
||||
|
<el-button @click="cancel">取 消</el-button> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { |
||||
|
listQualification, |
||||
|
getQualificationCertificates, |
||||
|
getQualificationCertificatesDetail, |
||||
|
addqualification, |
||||
|
updateAndSubmitQualification |
||||
|
} from "@/api/vet/qualification" |
||||
|
import { getUserInfo } from "@/api/system/user" |
||||
|
|
||||
|
export default { |
||||
|
name: "Qualification", |
||||
|
dicts: ['qualification_shenhe', 'qualification_type', 'scope_names', 'certificate_status'], |
||||
|
data() { |
||||
|
return { |
||||
|
baseUrl: process.env.VUE_APP_BASE_API, |
||||
|
previewFileUrl: '', |
||||
|
loading: false, |
||||
|
currentQualification: null, // 当前选中的资质信息（用于反显） |
||||
|
certificateList: [], |
||||
|
total: 0, |
||||
|
title: "", |
||||
|
open: false, |
||||
|
previewDialogVisible: false, |
||||
|
showSearch: true, |
||||
|
|
||||
|
// 实名认证相关 |
||||
|
authInfo: null, |
||||
|
realNameReadOnly: false, |
||||
|
idCardReadOnly: false, |
||||
|
authInfoFetched: false, |
||||
|
isAddMode: true, |
||||
|
|
||||
|
queryParams: { |
||||
|
pageNum: 1, |
||||
|
pageSize: 10, |
||||
|
certificateNo: null, |
||||
|
certName: null, |
||||
|
issueOrg: null, |
||||
|
certStatus: null |
||||
|
}, |
||||
|
|
||||
|
form: {}, |
||||
|
|
||||
|
rules: { |
||||
|
certificateNo: [ |
||||
|
{ required: true, message: "证书编号不能为空", trigger: "blur" } |
||||
|
], |
||||
|
certName: [ |
||||
|
{ required: true, message: "证书名称不能为空", trigger: "blur" } |
||||
|
], |
||||
|
issueOrg: [ |
||||
|
{ required: true, message: "发证机构不能为空", trigger: "blur" } |
||||
|
], |
||||
|
issueDate: [ |
||||
|
{ required: true, message: "发证日期不能为空", trigger: "change" } |
||||
|
], |
||||
|
expireDate: [ |
||||
|
{ required: true, message: "到期日期不能为空", trigger: "change" } |
||||
|
], |
||||
|
certificateFiles: [ |
||||
|
{ required: true, message: "证书文件不能为空", trigger: "blur" } |
||||
|
] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
created() { |
||||
|
this.getList() |
||||
|
this.getCertificateList() |
||||
|
this.getUserAuthInfo() |
||||
|
|
||||
|
const codeId = this.$route.query.id |
||||
|
if(codeId){ |
||||
|
this.handleUpdate(codeId) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
watch: { |
||||
|
open(val) { |
||||
|
if (val) { |
||||
|
this.$nextTick(() => { |
||||
|
this.fillAuthInfoToForm() |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
// 获取用户实名认证信息 |
||||
|
async getUserAuthInfo() { |
||||
|
if (this.authInfoFetched) return |
||||
|
|
||||
|
try { |
||||
|
const res = await getUserInfo() |
||||
|
if (res.code === 200) { |
||||
|
const userInfo = res.data |
||||
|
if (userInfo.authStatus === '已认证') { |
||||
|
this.authInfo = userInfo |
||||
|
this.realNameReadOnly = true |
||||
|
this.idCardReadOnly = true |
||||
|
this.authInfoFetched = true |
||||
|
|
||||
|
if (this.open) { |
||||
|
this.fillAuthInfoToForm() |
||||
|
} |
||||
|
} else if (userInfo.authStatus === '未认证') { |
||||
|
this.authInfoFetched = true |
||||
|
} |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.error('获取用户实名信息失败:', error) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 填充实名信息到表单 |
||||
|
fillAuthInfoToForm() { |
||||
|
if (this.authInfo) { |
||||
|
this.$set(this.form, 'realName', this.authInfo.realName) |
||||
|
this.$set(this.form, 'idCard', this.authInfo.idCard) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 查询资质信息列表 |
||||
|
getList() { |
||||
|
this.loading = true |
||||
|
listQualification().then(response => { |
||||
|
if (response.code === 200 && response.rows && response.rows.length > 0) { |
||||
|
// 保存当前选中的资质信息用于反显 |
||||
|
this.currentQualification = response.rows[0] |
||||
|
this.total = response.total |
||||
|
} else { |
||||
|
this.loading = false |
||||
|
this.currentQualification = null |
||||
|
this.certificateList = [] |
||||
|
this.total = 0 |
||||
|
} |
||||
|
}).catch(() => { |
||||
|
this.loading = false |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
// 获取证书列表 |
||||
|
getCertificateList() { |
||||
|
this.loading = true |
||||
|
getQualificationCertificates(this.queryParams).then(response => { |
||||
|
if (response.code === 200) { |
||||
|
this.certificateList = response.rows || [] |
||||
|
} else { |
||||
|
this.certificateList = [] |
||||
|
} |
||||
|
this.loading = false |
||||
|
}).catch(() => { |
||||
|
this.certificateList = [] |
||||
|
this.loading = false |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
// 根据字典值获取标签 |
||||
|
getDictLabel(dictType, value) { |
||||
|
const dict = this.dict.type[dictType] |
||||
|
if (dict && value) { |
||||
|
const item = dict.find(item => item.value === value) |
||||
|
return item ? item.label : value |
||||
|
} |
||||
|
return value || '-' |
||||
|
}, |
||||
|
|
||||
|
// 获取完整的图片URL |
||||
|
getImageUrl(filePath) { |
||||
|
return `${this.baseUrl}${filePath}` |
||||
|
}, |
||||
|
|
||||
|
// 判断是否为图片文件 |
||||
|
isImageFile(filePath) { |
||||
|
if (!filePath) return false; |
||||
|
const imageExts = ['.png', '.jpg', '.jpeg']; |
||||
|
const ext = filePath.substring(filePath.lastIndexOf('.')).toLowerCase(); |
||||
|
return imageExts.includes(ext); |
||||
|
}, |
||||
|
|
||||
|
// 判断是否为PDF文件 |
||||
|
isPdfFile(filePath) { |
||||
|
if (!filePath) return false; |
||||
|
const ext = filePath.substring(filePath.lastIndexOf('.')).toLowerCase(); |
||||
|
return ext === '.pdf'; |
||||
|
}, |
||||
|
|
||||
|
// 预览图片 |
||||
|
previewCertificate(filePath) { |
||||
|
this.previewFileUrl = filePath; |
||||
|
this.previewDialogVisible = true; |
||||
|
}, |
||||
|
|
||||
|
// 下载文件 |
||||
|
downloadFile(filePath) { |
||||
|
const fullUrl = this.getImageUrl(filePath); |
||||
|
const link = document.createElement('a'); |
||||
|
link.href = fullUrl; |
||||
|
const fileName = filePath.substring(filePath.lastIndexOf('/') + 1); |
||||
|
link.download = fileName; |
||||
|
document.body.appendChild(link); |
||||
|
link.click(); |
||||
|
document.body.removeChild(link); |
||||
|
this.$modal.msgSuccess('开始下载文件'); |
||||
|
}, |
||||
|
|
||||
|
// 统一提交入口 |
||||
|
submitForm() { |
||||
|
if (this.isAddMode) { |
||||
|
this.handleAddSubmit() |
||||
|
} else { |
||||
|
this.handleResubmit() |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 新增提交 |
||||
|
handleAddSubmit() { |
||||
|
this.$refs["form"].validate(valid => { |
||||
|
if (valid) { |
||||
|
const submitData = { |
||||
|
realName: this.form.realName || (this.authInfo ? this.authInfo.realName : null), |
||||
|
idCard: this.form.idCard || (this.authInfo ? this.authInfo.idCard : null), |
||||
|
certificateNo: this.form.certificateNo, |
||||
|
certName: this.form.certName, |
||||
|
issueOrg: this.form.issueOrg, |
||||
|
issueDate: this.form.issueDate, |
||||
|
expireDate: this.form.expireDate, |
||||
|
certificateFiles: this.form.certificateFiles, |
||||
|
auditStatus: '0' |
||||
|
} |
||||
|
|
||||
|
addqualification(submitData).then(response => { |
||||
|
if (response.code === 200) { |
||||
|
this.$modal.msgSuccess("提交审核成功") |
||||
|
this.open = false |
||||
|
this.getCertificateList() |
||||
|
this.reset() |
||||
|
} else { |
||||
|
this.$modal.msgError(response.msg || "提交审核失败") |
||||
|
} |
||||
|
}).catch(error => { |
||||
|
console.error('提交审核失败:', error) |
||||
|
this.$modal.msgError("提交审核失败，请稍后重试") |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
// 重新提交审核 |
||||
|
handleResubmit() { |
||||
|
this.$refs["form"].validate(valid => { |
||||
|
if (valid) { |
||||
|
const submitData = { |
||||
|
certId: this.form.certId, |
||||
|
qualificationId: this.currentQualification ? this.currentQualification.qualificationId : null, |
||||
|
realName: this.form.realName || (this.authInfo ? this.authInfo.realName : null), |
||||
|
idCard: this.form.idCard || (this.authInfo ? this.authInfo.idCard : null), |
||||
|
certificateNo: this.form.certificateNo, |
||||
|
certName: this.form.certName, |
||||
|
issueOrg: this.form.issueOrg, |
||||
|
issueDate: this.form.issueDate, |
||||
|
expireDate: this.form.expireDate, |
||||
|
certificateFiles: this.form.certificateFiles, |
||||
|
auditStatus: '0' |
||||
|
} |
||||
|
|
||||
|
updateAndSubmitQualification(submitData).then(response => { |
||||
|
if (response.code === 200) { |
||||
|
this.$modal.msgSuccess("重新提交审核成功") |
||||
|
this.open = false |
||||
|
this.getCertificateList() |
||||
|
this.reset() |
||||
|
} else { |
||||
|
this.$modal.msgError(response.msg || "重新提交审核失败") |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
/** 新增按钮操作 */ |
||||
|
handleAdd() { |
||||
|
this.reset() |
||||
|
this.open = true |
||||
|
this.isAddMode = true |
||||
|
this.title = "添加资质信息" |
||||
|
|
||||
|
if (!this.authInfoFetched) { |
||||
|
this.getUserAuthInfo() |
||||
|
} |
||||
|
this.fillAuthInfoToForm() |
||||
|
}, |
||||
|
|
||||
|
/** 修改按钮操作 */ |
||||
|
handleUpdate(row) { |
||||
|
this.reset() |
||||
|
this.isAddMode = false |
||||
|
const id = row.certId || row |
||||
|
getQualificationCertificatesDetail(id).then(res => { |
||||
|
this.form = res.data |
||||
|
}) |
||||
|
|
||||
|
if (!this.authInfoFetched) { |
||||
|
this.getUserAuthInfo() |
||||
|
} |
||||
|
this.fillAuthInfoToForm() |
||||
|
|
||||
|
this.open = true |
||||
|
this.title = "修改资质证书信息" |
||||
|
}, |
||||
|
|
||||
|
// 取消按钮 |
||||
|
cancel() { |
||||
|
this.open = false |
||||
|
this.reset() |
||||
|
}, |
||||
|
|
||||
|
// 重置表单 |
||||
|
reset() { |
||||
|
this.form = { |
||||
|
certificateNo: null, |
||||
|
certName: null, |
||||
|
issueOrg: null, |
||||
|
issueDate: null, |
||||
|
expireDate: null, |
||||
|
certificateFiles: null, |
||||
|
certId: null |
||||
|
} |
||||
|
this.resetForm("form") |
||||
|
|
||||
|
if (this.authInfo) { |
||||
|
this.$nextTick(() => { |
||||
|
this.fillAuthInfoToForm() |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 搜索按钮操作 |
||||
|
handleQuery() { |
||||
|
this.queryParams.pageNum = 1 |
||||
|
this.getCertificateList() |
||||
|
}, |
||||
|
|
||||
|
// 重置按钮操作 |
||||
|
resetQuery() { |
||||
|
this.resetForm("queryForm") |
||||
|
this.handleQuery() |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
/* 资质信息卡片样式 */ |
||||
|
.qualification-info-card { |
||||
|
border-radius: 8px; |
||||
|
margin-bottom: 20px; |
||||
|
border-left: 4px solid #42B983; |
||||
|
} |
||||
|
|
||||
|
.qualification-info-card ::v-deep .el-card__header { |
||||
|
background-color: #f8fafc; |
||||
|
border-bottom: 1px solid #eef2f7; |
||||
|
padding: 12px 20px; |
||||
|
font-weight: 600; |
||||
|
color: #2c7a4d; |
||||
|
} |
||||
|
|
||||
|
.info-item { |
||||
|
display: flex; |
||||
|
align-items: baseline; |
||||
|
line-height: 32px; |
||||
|
} |
||||
|
|
||||
|
.info-label { |
||||
|
min-width: 80px; |
||||
|
color: #909399; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
|
||||
|
.info-value { |
||||
|
color: #303133; |
||||
|
font-size: 14px; |
||||
|
font-weight: 500; |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
/* 操作按钮样式 */ |
||||
|
.el-button--text { |
||||
|
padding: 6px 10px; |
||||
|
margin: 0 2px; |
||||
|
min-width: 50px; |
||||
|
} |
||||
|
|
||||
|
/* 状态标签样式 */ |
||||
|
.el-tag { |
||||
|
margin: 2px; |
||||
|
} |
||||
|
|
||||
|
.pagestyle .el-input { |
||||
|
width: auto !important; |
||||
|
} |
||||
|
|
||||
|
/* 操作按钮 */ |
||||
|
.info-btn { |
||||
|
padding: 6px 10px; |
||||
|
border-radius: 4px; |
||||
|
margin: 0 10px; |
||||
|
transition: all 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
.alter-btn:hover { |
||||
|
background-color: rgb(230, 255, 238); |
||||
|
transform: translateY(-1px); |
||||
|
} |
||||
|
|
||||
|
/* 弹窗样式 */ |
||||
|
::v-deep .el-dialog { |
||||
|
border-radius: 12px; |
||||
|
overflow: hidden; |
||||
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12); |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-dialog__header { |
||||
|
background: linear-gradient(135deg, #2c7a4d 0%, #42b983 100%); |
||||
|
padding: 18px 24px; |
||||
|
border-bottom: none; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-dialog__title { |
||||
|
font-size: 17px; |
||||
|
font-weight: 600; |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-dialog__body { |
||||
|
padding: 28px 24px 20px; |
||||
|
background-color: #f8fafc; |
||||
|
max-height: 70vh; |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-form-item { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-form-item__label { |
||||
|
font-weight: 500; |
||||
|
color: #2d3748; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-input__inner, |
||||
|
::v-deep .el-textarea__inner { |
||||
|
border-radius: 8px; |
||||
|
border: 1px solid #dcdfe6; |
||||
|
transition: all 0.3s; |
||||
|
background-color: #fcfdfe; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-input__inner:focus, |
||||
|
::v-deep .el-textarea__inner:focus { |
||||
|
border-color: #42B983; |
||||
|
box-shadow: 0 0 0 3px rgb(230, 255, 238); |
||||
|
background-color: white; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-dialog__footer { |
||||
|
padding: 20px 24px; |
||||
|
background-color: #f8fafc; |
||||
|
border-top: 1px solid #eef2f7; |
||||
|
border-radius: 0 0 12px 12px; |
||||
|
} |
||||
|
|
||||
|
.mb8 { |
||||
|
margin-bottom: 8px; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue