|
|
@@ -20,16 +20,14 @@
|
|
|
v-model="queryParams.classify"
|
|
|
placeholder="证书类别"
|
|
|
clearable
|
|
|
- class="!w-150px"
|
|
|
- >
|
|
|
+ class="!w-150px">
|
|
|
<el-option
|
|
|
v-for="dict in getStrDictOptions(DICT_TYPE.PERSON_CERT).concat(
|
|
|
getStrDictOptions(DICT_TYPE.ORG_CERT)
|
|
|
)"
|
|
|
:key="dict.value"
|
|
|
:label="dict.label"
|
|
|
- :value="dict.value"
|
|
|
- />
|
|
|
+ :value="dict.value" />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
|
|
|
@@ -42,14 +40,12 @@
|
|
|
v-model="queryParams.expired"
|
|
|
placeholder="请选择是否过期"
|
|
|
clearable
|
|
|
- style="width: 150px"
|
|
|
- >
|
|
|
+ style="width: 150px">
|
|
|
<el-option
|
|
|
v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
|
|
|
:key="dict.value"
|
|
|
:label="dict.label"
|
|
|
- :value="dict.value"
|
|
|
- />
|
|
|
+ :value="dict.value" />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
|
|
|
@@ -75,10 +71,11 @@
|
|
|
<zm-table
|
|
|
:loading="loading"
|
|
|
:data="list"
|
|
|
- height="calc(80vh - 220px)"
|
|
|
+ height="calc(74.5vh - 220px)"
|
|
|
:show-overflow-tooltip="true"
|
|
|
:row-style="tableRowStyle"
|
|
|
- >
|
|
|
+ :row-class-name="tableRowClassName">
|
|
|
+ >
|
|
|
<zm-table-column :label="t('monitor.serial')" width="70" align="center">
|
|
|
<template #default="scope">
|
|
|
{{ scope.$index + 1 }}
|
|
|
@@ -96,8 +93,7 @@
|
|
|
<dict-tag
|
|
|
v-if="scope.row.type === 'organization'"
|
|
|
:type="DICT_TYPE.ORG_CERT"
|
|
|
- :value="scope.row.classify"
|
|
|
- />
|
|
|
+ :value="scope.row.classify" />
|
|
|
<dict-tag v-else :type="DICT_TYPE.PERSON_CERT" :value="scope.row.classify" />
|
|
|
</template>
|
|
|
</zm-table-column>
|
|
|
@@ -132,8 +128,7 @@
|
|
|
align="center"
|
|
|
fixed="right"
|
|
|
min-width="180px"
|
|
|
- action
|
|
|
- >
|
|
|
+ action>
|
|
|
<template #default="scope">
|
|
|
<el-button link type="primary" @click="handleEdit(scope.row)"> 编辑 </el-button>
|
|
|
<el-button link type="danger" @click="handleDelete(scope.row.id)"> 删除 </el-button>
|
|
|
@@ -141,8 +136,7 @@
|
|
|
link
|
|
|
type="success"
|
|
|
v-if="scope.row.certPic"
|
|
|
- @click="handleViewImage(scope.row.certPic)"
|
|
|
- >
|
|
|
+ @click="handleViewImage(scope.row.certPic)">
|
|
|
查看证书
|
|
|
</el-button>
|
|
|
</template>
|
|
|
@@ -154,8 +148,7 @@
|
|
|
:total="total"
|
|
|
v-model:page="queryParams.pageNo"
|
|
|
v-model:limit="queryParams.pageSize"
|
|
|
- @pagination="getList"
|
|
|
- />
|
|
|
+ @pagination="getList" />
|
|
|
</ContentWrap>
|
|
|
|
|
|
<ContentWrap style="margin-top: -5px">
|
|
|
@@ -164,6 +157,17 @@
|
|
|
<Bell />
|
|
|
</template>
|
|
|
</el-alert>
|
|
|
+
|
|
|
+ <el-alert
|
|
|
+ title="证书60天橙色预警"
|
|
|
+ type="warning"
|
|
|
+ show-icon
|
|
|
+ :closable="false"
|
|
|
+ style="margin-top: 5px">
|
|
|
+ <template #icon>
|
|
|
+ <Bell />
|
|
|
+ </template>
|
|
|
+ </el-alert>
|
|
|
</ContentWrap>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
@@ -174,21 +178,18 @@
|
|
|
v-model="dialogVisible"
|
|
|
width="600px"
|
|
|
destroy-on-close
|
|
|
- @close="closeDialog"
|
|
|
- >
|
|
|
+ @close="closeDialog">
|
|
|
<el-form
|
|
|
ref="formRef"
|
|
|
:model="formData"
|
|
|
:rules="formRules"
|
|
|
label-width="120px"
|
|
|
- v-loading="formLoading"
|
|
|
- >
|
|
|
+ v-loading="formLoading">
|
|
|
<el-form-item label="证书类型" prop="type">
|
|
|
<el-select
|
|
|
v-model="formData.type"
|
|
|
placeholder="请选择证书类型"
|
|
|
- @change="formData.classify = ''"
|
|
|
- >
|
|
|
+ @change="formData.classify = ''">
|
|
|
<el-option label="个人证书" value="personal" />
|
|
|
<el-option label="组织证书" value="organization" />
|
|
|
<el-option label="其他" value="other" />
|
|
|
@@ -201,22 +202,19 @@
|
|
|
v-if="formData.type === 'personal'"
|
|
|
v-model="formData.classify"
|
|
|
placeholder="证书类别"
|
|
|
- clearable
|
|
|
- >
|
|
|
+ clearable>
|
|
|
<el-option
|
|
|
v-for="dict in getStrDictOptions(DICT_TYPE.PERSON_CERT)"
|
|
|
:key="dict.value"
|
|
|
:label="dict.label"
|
|
|
- :value="dict.value"
|
|
|
- />
|
|
|
+ :value="dict.value" />
|
|
|
</el-select>
|
|
|
<el-select v-else v-model="formData.classify" placeholder="证书类别" clearable>
|
|
|
<el-option
|
|
|
v-for="dict in getStrDictOptions(DICT_TYPE.ORG_CERT)"
|
|
|
:key="dict.value"
|
|
|
:label="dict.label"
|
|
|
- :value="dict.value"
|
|
|
- />
|
|
|
+ :value="dict.value" />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
|
|
|
@@ -234,8 +232,7 @@
|
|
|
node-key="id"
|
|
|
filterable
|
|
|
placeholder="请选择所在部门"
|
|
|
- @change="handleDeptChange"
|
|
|
- />
|
|
|
+ @change="handleDeptChange" />
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item label="所属人" prop="userName">
|
|
|
@@ -256,8 +253,7 @@
|
|
|
type="date"
|
|
|
value-format="x"
|
|
|
placeholder="请选择颁发时间"
|
|
|
- style="width: 100%"
|
|
|
- />
|
|
|
+ style="width: 100%" />
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item label="有效期" prop="certExpire">
|
|
|
@@ -266,8 +262,7 @@
|
|
|
type="date"
|
|
|
value-format="x"
|
|
|
placeholder="请选择有效期"
|
|
|
- style="width: 100%"
|
|
|
- />
|
|
|
+ style="width: 100%" />
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item label="到期前提醒" prop="noticeBefore">
|
|
|
@@ -276,8 +271,7 @@
|
|
|
:min="0"
|
|
|
:max="365"
|
|
|
placeholder="请输入提前多少天提醒"
|
|
|
- style="width: 100%"
|
|
|
- />
|
|
|
+ style="width: 100%" />
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item label="备注" prop="remark">
|
|
|
@@ -286,8 +280,7 @@
|
|
|
v-model="formData.remark"
|
|
|
:rows="2"
|
|
|
placeholder="请输入备注"
|
|
|
- style="width: 100%"
|
|
|
- />
|
|
|
+ style="width: 100%" />
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item label="证书图片" prop="certPic">
|
|
|
@@ -305,15 +298,13 @@
|
|
|
<el-dialog :title="imageDialogTitle" v-model="imageDialogVisible" width="800px" center>
|
|
|
<!-- <img :src="imagePreviewUrl" alt="证书图片" style="max-width: 100%; max-height: 80vh" /> -->
|
|
|
<div
|
|
|
- style="display: flex; justify-content: center; align-items: center; flex-direction: column"
|
|
|
- >
|
|
|
+ style="display: flex; justify-content: center; align-items: center; flex-direction: column">
|
|
|
<img
|
|
|
v-for="url in imagePreviewUrl"
|
|
|
:src="url"
|
|
|
:key="url"
|
|
|
alt="证书图片"
|
|
|
- style="max-width: 100%"
|
|
|
- />
|
|
|
+ style="max-width: 100%" />
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
</template>
|
|
|
@@ -568,9 +559,22 @@ const tableRowStyle = ({ row }) => {
|
|
|
if (row.expired) {
|
|
|
return { backgroundColor: '#ffe6e6' }
|
|
|
}
|
|
|
+ if (row.alertWarn) {
|
|
|
+ return { backgroundColor: '#e19f1a' }
|
|
|
+ }
|
|
|
return {}
|
|
|
}
|
|
|
|
|
|
+const tableRowClassName = ({ row }) => {
|
|
|
+ if (row.expired) {
|
|
|
+ return 'expired-row'
|
|
|
+ }
|
|
|
+ if (row.alertWarn) {
|
|
|
+ return 'alert-warn-row'
|
|
|
+ }
|
|
|
+ return ''
|
|
|
+}
|
|
|
+
|
|
|
// 提交表单
|
|
|
const submitForm = async () => {
|
|
|
if (!formRef.value) return
|
|
|
@@ -654,23 +658,48 @@ onMounted(async () => {
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-::deep(.el-tree--highlight-current) {
|
|
|
+:deep(.el-tree--highlight-current) {
|
|
|
height: 200px !important;
|
|
|
}
|
|
|
-::deep(.el-transfer-panel__body) {
|
|
|
+:deep(.el-transfer-panel__body) {
|
|
|
height: 700px !important;
|
|
|
}
|
|
|
-.image-preview {
|
|
|
- margin-top: 10px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
+
|
|
|
+/* 过期行的红色背景 - 基础状态 */
|
|
|
+:deep(.el-table__body tr.expired-row > td.el-table__cell) {
|
|
|
+ background-color: #ffe6e6 !important;
|
|
|
}
|
|
|
|
|
|
-::deep(.el-table__body tr.expired-row) {
|
|
|
+/* 过期行 - 鼠标悬浮状态 */
|
|
|
+:deep(.el-table__body tr.expired-row:hover > td.el-table__cell) {
|
|
|
+ background-color: #ffcccc !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 确保斑马纹不影响过期行 */
|
|
|
+:deep(.el-table__body tr.expired-row.el-table__row--striped > td.el-table__cell) {
|
|
|
background-color: #ffe6e6 !important;
|
|
|
}
|
|
|
|
|
|
-::deep(.el-table__body tr.expired-row:hover td) {
|
|
|
+:deep(.el-table__body tr.expired-row.el-table__row--striped:hover > td.el-table__cell) {
|
|
|
background-color: #ffcccc !important;
|
|
|
}
|
|
|
+
|
|
|
+/* 预警行的橙色背景 - 基础状态 */
|
|
|
+:deep(.el-table__body tr.alert-warn-row > td.el-table__cell) {
|
|
|
+ background-color: #fff1df !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 预警行 - 鼠标悬浮状态 */
|
|
|
+:deep(.el-table__body tr.alert-warn-row:hover > td.el-table__cell) {
|
|
|
+ background-color: #ffe2bf !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 确保斑马纹不影响预警行 */
|
|
|
+:deep(.el-table__body tr.alert-warn-row.el-table__row--striped > td.el-table__cell) {
|
|
|
+ background-color: #fff1df !important;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-table__body tr.alert-warn-row.el-table__row--striped:hover > td.el-table__cell) {
|
|
|
+ background-color: #ffe2bf !important;
|
|
|
+}
|
|
|
</style>
|
