提取docx、xlsx、xls文件内容并填充,修改页面样式
This commit is contained in:
parent
df332f8138
commit
3e39671644
|
|
@ -38,11 +38,11 @@
|
|||
"file-saver": "2.0.5",
|
||||
"fuse.js": "6.4.3",
|
||||
"highlight.js": "9.18.5",
|
||||
"jquery": "^3.6.0",
|
||||
"jquery-mousewheel": "^3.1.13",
|
||||
"js-beautify": "1.13.0",
|
||||
"js-cookie": "3.0.1",
|
||||
"jsencrypt": "3.0.0-rc.1",
|
||||
"jquery": "^3.6.0",
|
||||
"jquery-mousewheel": "^3.1.13",
|
||||
"jszip": "^3.10.1",
|
||||
"lodash": "^4.17.21",
|
||||
"luckysheet": "^2.1.13",
|
||||
|
|
|
|||
|
|
@ -1,20 +1,20 @@
|
|||
<template>
|
||||
<div class="upload-container">
|
||||
<el-upload
|
||||
ref="upload"
|
||||
class="upload-demo"
|
||||
drag
|
||||
action="#"
|
||||
multiple
|
||||
<el-upload
|
||||
ref="upload"
|
||||
class="upload-demo"
|
||||
drag
|
||||
action="#"
|
||||
multiple
|
||||
:show-file-list="true"
|
||||
:before-upload="beforeUpload"
|
||||
:on-remove="handleRemove"
|
||||
:before-upload="beforeUpload"
|
||||
:on-remove="handleRemove"
|
||||
:on-change="handleFileChange"
|
||||
:on-exceed="handleExceed"
|
||||
:file-list="files"
|
||||
:accept="accept"
|
||||
:on-exceed="handleExceed"
|
||||
:file-list="files"
|
||||
:accept="accept"
|
||||
:limit="limitUploadNum"
|
||||
:auto-upload="autoUpload"
|
||||
:auto-upload="autoUpload"
|
||||
:http-request="customUpload"
|
||||
>
|
||||
<div class="upload-content">
|
||||
|
|
@ -63,6 +63,8 @@ import {
|
|||
uploadSmallFile,
|
||||
uploadLargeFile,
|
||||
} from '@/api/common/uploadFile.js'
|
||||
import mammoth from 'mammoth'
|
||||
import * as XLSX from 'xlsx'
|
||||
|
||||
// 常量定义
|
||||
const FILE_STATUS = {
|
||||
|
|
@ -214,7 +216,7 @@ export default {
|
|||
// 文件变化处理
|
||||
handleFileChange(file, fileList) {
|
||||
if (this.shouldIgnoreFileChange(file.status)) return
|
||||
|
||||
|
||||
this.files = this.formatFileList(fileList)
|
||||
this.updatePreview(fileList)
|
||||
},
|
||||
|
|
@ -222,11 +224,11 @@ export default {
|
|||
// 文件超出限制处理
|
||||
handleExceed(files, fileList) {
|
||||
console.log('文件超出限制处理', files, fileList)
|
||||
|
||||
|
||||
if (files.length > 0) {
|
||||
// 触发删除事件
|
||||
this.$emit('del-file', { ...fileList[0], response: fileList[0].res })
|
||||
|
||||
|
||||
// 清空并添加新文件
|
||||
this.files = []
|
||||
const newFile = files[0]
|
||||
|
|
@ -258,7 +260,7 @@ export default {
|
|||
|
||||
this.updatePreview(fileList)
|
||||
this.files = this.formatFileList(fileList)
|
||||
|
||||
|
||||
const delFileObj = this.findFileByRawFile(file.raw)
|
||||
if (delFileObj) {
|
||||
delFileObj.response = delFileObj.res
|
||||
|
|
@ -273,7 +275,7 @@ export default {
|
|||
async customUpload(options) {
|
||||
const { file } = options
|
||||
this.isUploading = true
|
||||
|
||||
|
||||
const uploadFileObj = this.findFileByRawFile(file)
|
||||
if (!uploadFileObj) {
|
||||
this.handleError(new Error('文件对象不存在'), file)
|
||||
|
|
@ -282,14 +284,14 @@ export default {
|
|||
|
||||
const fileUid = uploadFileObj.uid
|
||||
const statusText = this.fileUploadRule.fields_json ? '识别中' : '上传中'
|
||||
|
||||
|
||||
this.updateFileStatus(fileUid, FILE_STATUS.UPLOADING, statusText, null, 0)
|
||||
this.$bus.$emit('startUpload', statusText)
|
||||
|
||||
try {
|
||||
const formData = this.createFormData(file)
|
||||
const res = await this.uploadFile(formData, file.size)
|
||||
|
||||
|
||||
if (res.code === 200) {
|
||||
this.handleSuccess(res, uploadFileObj)
|
||||
} else {
|
||||
|
|
@ -304,10 +306,26 @@ export default {
|
|||
|
||||
// 上传成功处理
|
||||
handleSuccess(response, file) {
|
||||
this.$bus.$emit('endUpload')
|
||||
this.updateFileStatus(file.uid, FILE_STATUS.SUCCESS, '', response.data, 100)
|
||||
this.$emit('file-change', this.getCurrentFiles(), this.type)
|
||||
this.isUploading = false
|
||||
const fileExt = this.getFileExtension(file.name);
|
||||
if (fileExt === 'docx') {
|
||||
this.parseDocxFile(file.raw).then(text => {
|
||||
// 将解析出的文本传递给父组件处理OCR逻辑
|
||||
this.$emit('docx-content', text);
|
||||
});
|
||||
}
|
||||
|
||||
else if (fileExt === 'xlsx' || fileExt === 'xls') {
|
||||
this.parseXlsxFile(file.raw).then(text => {
|
||||
this.$emit('xlsx-content', text); // 触发xlsx内容事件
|
||||
}).catch(err => {
|
||||
console.error('xlsx解析失败:', err);
|
||||
});
|
||||
}
|
||||
|
||||
this.$bus.$emit('endUpload')
|
||||
this.updateFileStatus(file.uid, FILE_STATUS.SUCCESS, '', response.data, 100)
|
||||
this.$emit('file-change', this.getCurrentFiles(), this.type)
|
||||
this.isUploading = false
|
||||
},
|
||||
|
||||
// 上传失败处理
|
||||
|
|
@ -318,6 +336,53 @@ export default {
|
|||
this.isUploading = false
|
||||
},
|
||||
|
||||
parseDocxFile(file) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = function(e) {
|
||||
const arrayBuffer = e.target.result;
|
||||
// 使用mammoth解析docx
|
||||
mammoth.extractRawText({ arrayBuffer })
|
||||
.then(result => {
|
||||
resolve(result.value); // 提取的纯文本内容
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('docx解析失败:', err);
|
||||
reject(err);
|
||||
});
|
||||
};
|
||||
reader.readAsArrayBuffer(file);
|
||||
|
||||
});
|
||||
},
|
||||
|
||||
parseXlsxFile(file) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = function(e) {
|
||||
try {
|
||||
// 读取二进制数据
|
||||
const data = new Uint8Array(e.target.result);
|
||||
// 解析Excel文件
|
||||
const workbook = XLSX.read(data, { type: 'array' });
|
||||
// 获取第一个工作表
|
||||
const firstSheetName = workbook.SheetNames[0];
|
||||
const worksheet = workbook.Sheets[firstSheetName];
|
||||
// 转换为JSON(只解析前100行,避免大文件性能问题)
|
||||
const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, range: 0, raw: false });
|
||||
// 转换为文本格式(按行拼接,用换行分隔)
|
||||
const text = jsonData.map(row => row.join('\t')).join('\n');
|
||||
resolve(text);
|
||||
} catch (err) {
|
||||
console.error('xlsx解析失败:', err);
|
||||
reject(err);
|
||||
}
|
||||
};
|
||||
// 读取文件为二进制
|
||||
reader.readAsArrayBuffer(file);
|
||||
});
|
||||
},
|
||||
|
||||
// 工具方法
|
||||
getFileExtension(filename) {
|
||||
return filename.split('.').pop().toLowerCase()
|
||||
|
|
@ -337,7 +402,7 @@ export default {
|
|||
async uploadFile(formData, fileSize) {
|
||||
const isLargeFile = fileSize > DEFAULT_FILE_SIZE
|
||||
const hasOcr = !!this.fileUploadRule.fields_json
|
||||
|
||||
|
||||
if (isLargeFile) {
|
||||
return hasOcr ? await uploadLargeFileByOcr(formData) : await uploadLargeFile(formData)
|
||||
} else {
|
||||
|
|
@ -346,8 +411,8 @@ export default {
|
|||
},
|
||||
|
||||
findFileByRawFile(rawFile) {
|
||||
return this.files.find(item =>
|
||||
item.raw === rawFile ||
|
||||
return this.files.find(item =>
|
||||
item.raw === rawFile ||
|
||||
(item.name === rawFile.name && item.size === rawFile.size)
|
||||
)
|
||||
},
|
||||
|
|
@ -369,10 +434,10 @@ export default {
|
|||
}
|
||||
|
||||
const updatedFile = { ...this.files[fileIndex], status }
|
||||
|
||||
|
||||
if (statusText) updatedFile.statusText = statusText
|
||||
if (percentage !== null) updatedFile.percentage = Math.max(0, Math.min(100, percentage))
|
||||
|
||||
|
||||
if (responseData) {
|
||||
updatedFile.response = responseData
|
||||
updatedFile.response.businessType = this.fileUploadRule?.fileUploadType
|
||||
|
|
@ -455,7 +520,7 @@ export default {
|
|||
isDocumentFile(file) {
|
||||
if (!file || !file.name) return false
|
||||
const fileExtension = this.getFileExtension(file.name)
|
||||
return ['pdf', 'doc', 'docx', 'xls', 'xlsx'].includes(fileExtension) ||
|
||||
return ['pdf', 'doc', 'docx', 'xls', 'xlsx'].includes(fileExtension) ||
|
||||
(file && file.fileType === FILE_TYPES.DOCUMENT)
|
||||
},
|
||||
|
||||
|
|
@ -468,8 +533,8 @@ export default {
|
|||
if (fileList.length === 1 && fileList[0]) {
|
||||
const file = fileList[0].raw || fileList[0]
|
||||
if (this.isImageFile(file)) {
|
||||
fileList[0].lsFilePath ?
|
||||
this.generateImagePreviewFromPath(fileList[0]) :
|
||||
fileList[0].lsFilePath ?
|
||||
this.generateImagePreviewFromPath(fileList[0]) :
|
||||
this.generateImagePreview(file)
|
||||
} else if (this.isDocumentFile(file)) {
|
||||
this.generateDocumentPreview(file)
|
||||
|
|
@ -515,12 +580,12 @@ export default {
|
|||
if (fileList.length > 0) {
|
||||
const firstFile = fileList[0]
|
||||
if (firstFile?.lsFilePath) {
|
||||
this.isImageFile(firstFile) ?
|
||||
this.generateImagePreviewFromPath(firstFile) :
|
||||
this.isImageFile(firstFile) ?
|
||||
this.generateImagePreviewFromPath(firstFile) :
|
||||
this.generateDocumentPreview(firstFile)
|
||||
} else if (firstFile?.raw) {
|
||||
this.isImageFile(firstFile.raw) ?
|
||||
this.generateImagePreview(firstFile.raw) :
|
||||
this.isImageFile(firstFile.raw) ?
|
||||
this.generateImagePreview(firstFile.raw) :
|
||||
this.generateDocumentPreview(firstFile.raw)
|
||||
} else {
|
||||
this.clearPreview()
|
||||
|
|
|
|||
|
|
@ -101,6 +101,8 @@ export default {
|
|||
this.$refs.financialStatement.validate()
|
||||
])
|
||||
|
||||
console.log('处理后的年份:', financeReportData);
|
||||
|
||||
// 2. 初始化提交数据,合并两个子组件的非文件字段
|
||||
const formData = {
|
||||
...financeReportData, // 财务报告的非文件字段(fileName、reportYear 等)
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@
|
|||
@del-file="handleDelFile"
|
||||
:uploadType="uploadType"
|
||||
:maxFileTips="maxFileTips"
|
||||
@docx-content="handleDocxContent"
|
||||
:limitUploadNum="1"
|
||||
type="finance_report"
|
||||
:show-file-list="true"
|
||||
|
|
@ -69,7 +70,7 @@ export default {
|
|||
dicts: ['identification_tag'],
|
||||
data() {
|
||||
return {
|
||||
uploadType: 'pdf、doc、docx',
|
||||
uploadType: 'docx',
|
||||
maxFileTips: '100MB',
|
||||
ocrRuleList: ['finance_report'],
|
||||
fileUploadList: [],
|
||||
|
|
@ -112,7 +113,58 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
setFormData(data) {
|
||||
|
||||
handleDocxContent(text) {
|
||||
// 模拟OCR返回格式,将docx文本包装成现有逻辑可处理的结构
|
||||
|
||||
const mockOcrResult = {
|
||||
status_code: 200,
|
||||
data: {
|
||||
chat_res: this.extractInfoFromDocx(text) // 从文本中提取关键信息
|
||||
}
|
||||
};
|
||||
// 复用OCR结果处理逻辑(填充报告年份)
|
||||
this.handleOcrResultWithMock(mockOcrResult);
|
||||
},
|
||||
|
||||
// 从docx文本中提取信息(核心:根据业务规则匹配关键词)
|
||||
extractInfoFromDocx(text) {
|
||||
console.log("text", text);
|
||||
// 优化正则:匹配“年份:2026”“年份:2026”“2026年”“2026年度”等格式
|
||||
const yearMatch = text.match(
|
||||
/(年份|报告年份|年度)\s*[::]\s*(\d{4})|(\d{4})\s*(年|年度)/
|
||||
);
|
||||
console.log("yearMatch", yearMatch);
|
||||
// 提取匹配到的年份(优先取冒号后的年份,再取数字+年/年度的格式)
|
||||
const year = yearMatch ? (yearMatch[2] || yearMatch[3]) : '';
|
||||
return { "报告年份": year };
|
||||
},
|
||||
|
||||
// 复用原OCR结果处理逻辑
|
||||
handleOcrResultWithMock(ocrResult) {
|
||||
|
||||
if (ocrResult.status_code === 200) {
|
||||
const chat_res = ocrResult.data?.chat_res;
|
||||
if (chat_res && typeof chat_res === 'object') {
|
||||
Object.keys(chat_res).forEach(key => {
|
||||
const formField = this.ocrResultParams[key];
|
||||
if (formField === 'reportYear' && chat_res[key]) {
|
||||
const year = chat_res[key].replace(/[^\d]/g, '');
|
||||
this.formData[formField] = year.length === 4 ? year : '';
|
||||
}
|
||||
});
|
||||
|
||||
this.$message.success('docx内容解析成功,已自动填充报告年份');
|
||||
this.$refs.financeReportForm.validateField('reportYear');
|
||||
}
|
||||
} else {
|
||||
this.$message.error(`年份提取失败: ${ocrResult.status_msg || '未找到有效年份'}`);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
|
||||
setFormData(data) {
|
||||
// 财务报告文件:不手动生成uid
|
||||
const financeFiles = Array.isArray(data.fileList)
|
||||
? data.fileList.filter(file => file && file.businessType === 'finance_report')
|
||||
|
|
@ -125,11 +177,22 @@ export default {
|
|||
}))
|
||||
: [];
|
||||
|
||||
let reportYear = data.reportYear || '';
|
||||
if (reportYear) {
|
||||
if (typeof reportYear === 'string') {
|
||||
reportYear = reportYear.split('-')[0];
|
||||
}
|
||||
if (typeof reportYear === 'number') {
|
||||
reportYear = reportYear.toString();
|
||||
}
|
||||
}
|
||||
|
||||
this.formData = {
|
||||
...(data || {}),
|
||||
fileList: financeFiles,
|
||||
fileName: financeFiles.length > 0 ? this.getFileName(financeFiles[0]) : '',
|
||||
delFileList: []
|
||||
delFileList: [],
|
||||
reportYear: reportYear,
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -148,12 +211,10 @@ export default {
|
|||
|
||||
handleFileChange(files, type) {
|
||||
if (type === 'finance_report' && files instanceof Array) {
|
||||
// 处理文件替换逻辑
|
||||
if (files.length > 0 && files[0].response) { // 验证上传成功
|
||||
// 标记为已完成替换
|
||||
if (files.length > 0 && files[0].response) {
|
||||
this.isReplacingFile = false;
|
||||
|
||||
// 处理旧文件删除
|
||||
// 处理旧文件删除(保持不变)
|
||||
if (this.formData.fileList.length > 0) {
|
||||
const oldFile = this.formData.fileList[0];
|
||||
const delPath = oldFile?.response?.fileRes?.filePath || oldFile?.filePath || null;
|
||||
|
|
@ -169,16 +230,28 @@ export default {
|
|||
|
||||
this.formData.fileList = markedFiles;
|
||||
|
||||
// 提取文件名逻辑不变
|
||||
// 提取文件名(保持不变)
|
||||
if (markedFiles.length > 0) {
|
||||
const originalFileName = this.getFileName(markedFiles[0])
|
||||
const safeFileName = originalFileName.replace(/--+/g, '-')
|
||||
this.formData.fileName = safeFileName
|
||||
this.$refs.financeReportForm.validateField('fileName')
|
||||
}
|
||||
this.handleOcrResult(markedFiles)
|
||||
|
||||
//根据文件类型选择解析方式
|
||||
const firstFile = markedFiles[0];
|
||||
const fileExt = this.getFileExt(firstFile).toLowerCase(); // 获取文件后缀
|
||||
if (['doc', 'docx'].includes(fileExt)) {
|
||||
// doc/docx文件:只执行你的自定义解析(不调用OCR)
|
||||
} else if (['pdf', 'jpg', 'jpeg', 'png'].includes(fileExt)) {
|
||||
// pdf/图片:执行原OCR逻辑
|
||||
this.handleOcrResult(markedFiles);
|
||||
} else {
|
||||
// 其他格式:提示不支持
|
||||
this.$message.warning('不支持的文件格式,无法解析年份');
|
||||
}
|
||||
|
||||
} else if (!this.isReplacingFile) {
|
||||
// 只有非替换操作才清空文件列表
|
||||
this.formData.fileList = [];
|
||||
this.formData.fileName = '';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@
|
|||
:maxFileTips="maxFileTips"
|
||||
:limitUploadNum="1"
|
||||
type="financial_statement"
|
||||
@xlsx-content="handleXlsxContent"
|
||||
:show-file-list="true"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
|
@ -144,7 +145,7 @@ export default {
|
|||
dicts: ['identification_tag'],
|
||||
data() {
|
||||
return {
|
||||
uploadType: 'pdf、doc、docx',
|
||||
uploadType: 'xlsx、xls',
|
||||
maxFileTips: '100MB',
|
||||
ocrRuleList: ['financial_statement'],
|
||||
fileUploadList: [],
|
||||
|
|
@ -231,6 +232,56 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
handleXlsxContent(text) {
|
||||
this.$bus.$emit('startUpload', '正在解析Excel财务数据')
|
||||
|
||||
try {
|
||||
// 从Excel文本中提取财务数据
|
||||
const financialData = this.extractFinancialDataFromText(text);
|
||||
// 填充到表单
|
||||
this.fillFormWithFinancialData(financialData);
|
||||
this.$message.success('Excel解析成功,已自动填充财务数据');
|
||||
} catch (error) {
|
||||
this.$message.error(`Excel解析失败: ${error.message}`);
|
||||
} finally {
|
||||
this.$bus.$emit('endUpload');
|
||||
}
|
||||
},
|
||||
|
||||
// 从文本中提取财务数据(核心逻辑)
|
||||
extractFinancialDataFromText(text) {
|
||||
const data = {};
|
||||
const keywords = Object.keys(this.ocrResultParams); // 获取所有财务指标关键词
|
||||
|
||||
// 遍历每个关键词,在文本中匹配对应值
|
||||
keywords.forEach(keyword => {
|
||||
// 正则:匹配"关键词: 值"或"关键词 值"(支持中英文标点、空格)
|
||||
const regex = new RegExp(`${keyword}\\s*[::]?\\s*([\\d,.%]+)`, 'i');
|
||||
const match = text.match(regex);
|
||||
|
||||
if (match && match[1]) {
|
||||
// 提取数值(去除千分位逗号等干扰符)
|
||||
data[keyword] = match[1].replace(/,/g, '').trim();
|
||||
}
|
||||
});
|
||||
|
||||
return data;
|
||||
},
|
||||
|
||||
// 将提取的财务数据填充到表单
|
||||
fillFormWithFinancialData(financialData) {
|
||||
Object.keys(financialData).forEach(keyword => {
|
||||
const formField = this.ocrResultParams[keyword];
|
||||
if (formField) {
|
||||
// 保留数字、小数点和百分号(清除其他字符)
|
||||
this.formData[formField] = financialData[keyword].replace(/[^\d.%]/g, '');
|
||||
}
|
||||
});
|
||||
// 触发表单验证
|
||||
this.$refs.financialStatementForm.validate();
|
||||
},
|
||||
|
||||
setFormData(data) {
|
||||
// 财务报表文件:不手动生成uid
|
||||
const financialFiles = Array.isArray(data.fileList)
|
||||
|
|
@ -284,9 +335,14 @@ export default {
|
|||
})).slice(-1);
|
||||
|
||||
this.formData.fileList = markedFiles;
|
||||
this.handleOcrResult(markedFiles)
|
||||
const fileExt = this.getFileExt(markedFiles[0]);
|
||||
if (['xls', 'xlsx'].includes(fileExt)) {
|
||||
// 已通过@xlsx-content处理,此处无需额外操作
|
||||
} else {
|
||||
// 非Excel文件走原有OCR逻辑
|
||||
this.handleOcrResult(markedFiles);
|
||||
}
|
||||
} else if (!this.isReplacingFile) {
|
||||
// 只有非替换操作才清空文件列表
|
||||
this.formData.fileList = [];
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -106,7 +106,7 @@ export default {
|
|||
dicts: ['identification_tag'],
|
||||
data() {
|
||||
return {
|
||||
uploadType: 'doc、docx',
|
||||
uploadType: 'jpg、png、pdf',
|
||||
maxFileTips: '100MB',
|
||||
ocrRuleList: ['qualification_certificate'], // 资质证书OCR识别规则
|
||||
fileUploadList: [],
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@
|
|||
<!-- 资质卡片网格 -->
|
||||
<div class="qualification-grid">
|
||||
<!-- 新增资质卡片 -->
|
||||
<div class="grid-item">
|
||||
<div class="qualification-card-wrapper">
|
||||
<div
|
||||
class="qualification-card create-card"
|
||||
@click="handleAdd"
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
</div>
|
||||
|
||||
<!-- 资质信息卡片及下方的过期提示 -->
|
||||
<div class="grid-item" v-for="item in qualificationList" :key="item.qualificationId">
|
||||
<div class="qualification-card-wrapper" v-for="item in qualificationList" :key="item.qualificationId">
|
||||
<!-- 卡片本身 -->
|
||||
<div class="qualification-card">
|
||||
<div class="qualification-header">
|
||||
|
|
@ -114,8 +114,8 @@
|
|||
</div>
|
||||
|
||||
<!-- 过期提示 -->
|
||||
<div class="expired-tag" v-if="item.isExpired">
|
||||
<i class="el-icon-warning"></i> {{ item.certificateName || '证书' }}已过期
|
||||
<div class="expired-tags" v-if="item.isExpired">
|
||||
<span class="expired-text">证书已过期</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -220,7 +220,6 @@ export default {
|
|||
methods: {
|
||||
|
||||
loadQualificationTypeDict() {
|
||||
|
||||
// getDicts 的参数是字典类型编码:qualification_type
|
||||
this.getDicts('qualification_type').then(response => {
|
||||
this.qualificationTypeOptions = response.data.map(item => ({
|
||||
|
|
@ -459,36 +458,35 @@ export default {
|
|||
.qualification-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 20px;
|
||||
gap: 24px;
|
||||
margin-bottom: 30px;
|
||||
max-height: calc(100vh - 280px);
|
||||
overflow-y: auto;
|
||||
padding: 10px;
|
||||
padding: 20px 6px 20px 0px;
|
||||
align-items: start;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 4px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #c1c1c1;
|
||||
border-radius: 4px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover {
|
||||
background: #a8a8a8;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 网格项容器(包含卡片和下方提示)
|
||||
.grid-item {
|
||||
// 卡片容器(包含卡片和下方提示)
|
||||
.qualification-card-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px; // 卡片与下方提示的间距
|
||||
}
|
||||
|
||||
.qualification-card {
|
||||
|
|
@ -645,19 +643,22 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
// 过期提示:放在qualification-card标签的外部下方
|
||||
.expired-tag {
|
||||
padding: 6px 0;
|
||||
text-align: center;
|
||||
background: transparent; // 与页面背景一致
|
||||
color: #ff4d4f; // 字体红色
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
width: 100%; // 与卡片同宽
|
||||
// 过期提示样式
|
||||
.expired-tags {
|
||||
padding: 8px 12px;
|
||||
flex-shrink: 0;
|
||||
|
||||
i {
|
||||
margin-right: 5px;
|
||||
.expired-text {
|
||||
display: block;
|
||||
color: #db3e29;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
word-break: break-all;
|
||||
|
||||
i {
|
||||
margin-right: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue