ZhaoYang
3 weeks ago
7 changed files with 1155 additions and 530 deletions
-
13chenhai-ui/src/api/vet/qualification.js
-
371chenhai-ui/src/views/system/vet/aduit/index.vue
-
16chenhai-ui/src/views/vet/comments/index.vue
-
41chenhai-ui/src/views/vet/info/index.vue
-
339chenhai-ui/src/views/vet/notification/index.vue
-
50chenhai-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