安全证书功能完善

env/.env.dev

@@ -8,9 +8,9 @@ VITE_API_URL = '/proxyApi'
 # VITE_proxyTarget = 'http://10.40.92.74:8080'  #盛旭
 
 # VITE_proxyTarget = 'http://192.168.2.246:28080'  # 马帅 
-# VITE_proxyTarget = 'http://192.168.2.127:28080'  # 梁超 
+VITE_proxyTarget = 'http://192.168.2.127:28080'  # 梁超 
 # VITE_proxyTarget = 'http://36.33.26.201:17788/proxyApi'  # 测试服务
-VITE_proxyTarget = 'http://192.168.0.244:28580'  # 测试服务
+# VITE_proxyTarget = 'http://192.168.0.244:28580'  # 测试服务
 # VITE_proxyTarget = 'http://192.168.2.129:18080'  # 马帅j
 
 # VITE_proxyTarget = 'http://10.40.92.185:9206'  # 赵福海 ( 设备类型) 

src/components/uploadComponentNew/index.vue

@@ -61,12 +61,17 @@ const props = defineProps({
     width: {
         //上传的地址
         type: String,
-        default: '72px',
+        default: '100%',
     },
     height: {
         //上传的地址
         type: String,
-        default: '72px',
+        default: '100%',
+    },
+    justifyContent: {
+        //上传的地址
+        type: String,
+        default: 'center',
     },
     autoUpload: {
         //是否开启自动上传
@@ -274,6 +279,7 @@ const changeFileFn = (ev: any) => {
 :deep(.el-upload) {
     width: v-bind('props.width') !important;
     height: v-bind('props.height') !important;
+    justify-content: v-bind('props.justifyContent');
 }
 :deep(.el-upload-list__item) {
     width: v-bind('props.width') !important;

src/http/api/security-certificate/index.ts

@@ -0,0 +1,22 @@
+import { get, post } from '../../index'
+
+// 获取关联装备
+export const getAssociationListApi = (data: any = {}) => {
+    return get('/material-mall/dev/associationList', data)
+}
+// 新增安全证书
+export const addSafeBookApi = (data: any = {}) => {
+    return post('/material-mall/safeBook/addSafeBook', data)
+}
+// 全证书列表
+export const getSafeBookByMaIdListApi = (data: any = {}) => {
+    return get('/material-mall/safeBook/getSafeBookByMaId', data)
+}
+// 安全证书编辑
+export const editSafeBookApi = (data: any = {}) => {
+    return post('/material-mall/safeBook/editSafeBook', data)
+}
+// 安全证书列表删除
+export const delSafeBookByIdApi = (data: any = {}) => {
+    return post('/material-mall/safeBook/delSafeBook', data)
+}

src/layout/header.vue

@@ -186,7 +186,7 @@ const onJumpUser = () => {
         const isAdmin = roles.some((e: any) => e.roleKey == 'admin')
         if (isAdmin) {
             // window.location.href = `http://192.168.137.101:80/?token=${store.token}`
-            window.open(`http://192.168.137.101:80/?token=${store.token}`)
+            window.open(`http://192.168.0.244:17766/glweb/?token=${store.token}`)
         } else {
             router.push({ name: 'my-user' })
         }

src/router/index.ts

@@ -268,6 +268,17 @@ const routes: Array<RouteRecordRaw> = [
                     isLogin: true
                 },
             },
+            {
+                path: '/security-certificate',
+                name: 'security-certificate',
+                component: () => import('views/user/lessor/security-certificate/index.vue'),
+                meta: {
+                    title: '安全证书管理',
+                    keepAlive: true,
+                    AuthFlag: false,
+                    isLogin: true
+                },
+            },
             {
                 path: '/sourcingNeed',
                 name: 'sourcingNeed',

src/views/user/index.vue

@@ -69,6 +69,7 @@ const allList = [
     { title: '退租管理', name: 'rent-termination', permission: ['1'] },
     { title: '结算管理', name: 'settlement-manage', permission: ['1'] },
     { title: '质检管理', name: 'quality-manage', permission: ['1'] },
+    { title: '安全证书管理', name: 'security-certificate', permission: ['1'] },
     { title: '需求管理', name: 'sourcingNeed', permission: ['2'] },
     { title: '订单管理', name: 'orderManagement', permission: ['2'] },
 ]

src/views/user/lessor/quality-manage/index.vue

@@ -6,6 +6,7 @@
             size="default"
             label-width="0"
             ref="searchFormRef"
+            :rules="searchFormRules"
             :model="searchParams"
         >
             <el-row>
@@ -15,16 +16,32 @@
                             clearable
                             style="width: 100%"
                             placeholder="请输入装备编码"
-                            v-model="searchParams.deviceCode"
+                            v-model.trim="searchParams.deviceCode"
                         />
                     </el-form-item>
                 </el-col>
-                <el-col :span="6">
+                <el-col :span="3">
-                    <el-form-item prop="">
+                    <el-form-item prop="minNum">
-                        <el-input clearable style="width: 100%" placeholder="请输入质检次数" />
+                        <el-input
+                            inputmode="numeric"
+                            v-model="searchParams.minNum"
+                            style="width: 100%"
+                            placeholder="质检次数"
+                        />
                     </el-form-item>
                 </el-col>
-                <el-col :span="6">
+                <el-col :span="0.5" style="line-height: 1.5; margin-right: 0.5%">-</el-col>
+                <el-col :span="3">
+                    <el-form-item prop="maxNum">
+                        <el-input
+                            inputmode="numeric"
+                            v-model.trim="searchParams.maxNum"
+                            style="width: 100%"
+                            placeholder="质检次数"
+                        />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="5">
                     <el-form-item prop="leaseStatus">
                         <el-date-picker
                             v-model="qcTime"
@@ -32,8 +49,8 @@
                             style="width: 100%"
                             range-separator="-"
                             value-format="YYYY-MM-DD"
-                            start-placeholder="最新质检开始日期"
+                            start-placeholder="最新质检日期"
-                            end-placeholder="最新质检结束日期"
+                            end-placeholder="最新质检日期"
                         />
                     </el-form-item>
                 </el-col>
@@ -45,17 +62,15 @@
                             style="width: 100%"
                             range-separator="-"
                             value-format="YYYY-MM-DD"
-                            start-placeholder="更新开始日期"
+                            start-placeholder="更新日期"
-                            end-placeholder="更新结束日期"
+                            end-placeholder="更新日期"
                         />
                     </el-form-item>
                 </el-col>
             </el-row>
 
             <el-form-item>
-                <el-button @click="getLeaseListData" type="primary" class="primary-lease"
+                <el-button @click="onSearch" type="primary" class="primary-lease">查询</el-button>
-                    >查询</el-button
-                >
                 <el-button @click="onReset" type="primary" class="primary-lease">重置</el-button>
                 <el-button
                     @click="
@@ -87,7 +102,7 @@
             <el-table-column align="center" prop="deviceCode" label="装备编码" />
             <el-table-column align="center" prop="deviceName" label="装备名称" />
             <el-table-column align="center" prop="qcTime" label="最新质检日期" />
-            <el-table-column align="center" prop="createBy" label="上传人" width="120" />
+            <el-table-column align="center" prop="nickName" label="上传人" width="120" />
             <el-table-column align="center" prop="createTime" label="上传时间" />
             <el-table-column align="center" prop="updateTime" label="更新时间" />
             <el-table-column align="center" label="操作" :width="220">
@@ -178,7 +193,7 @@
                         <el-col :span="24">
                             <el-form-item label="质检名称" prop="qcName">
                                 <el-input
-                                    v-model="addOrEditForm.qcName"
+                                    v-model.trim="addOrEditForm.qcName"
                                     placeholder="请输入质检名称"
                                 />
                             </el-form-item>
@@ -290,8 +305,8 @@
                                     style="width: 100%"
                                     range-separator="-"
                                     value-format="YYYY-MM-DD"
-                                    start-placeholder="质检开始日期"
+                                    start-placeholder="质检日期"
-                                    end-placeholder="质检结束日期"
+                                    end-placeholder="质检日期"
                                 />
                             </el-form-item>
                         </el-col>
@@ -303,8 +318,8 @@
                                     style="width: 100%"
                                     range-separator="-"
                                     value-format="YYYY-MM-DD"
-                                    start-placeholder="上传开始日期"
+                                    start-placeholder="上传日期"
-                                    end-placeholder="上传结束日期"
+                                    end-placeholder="上传日期"
                                 />
                             </el-form-item>
                         </el-col>
@@ -410,6 +425,8 @@ const searchParams = reactive({
     qcEndTime: '',
     createStartTime: '',
     createEndTime: '',
+    minNum: '',
+    maxNum: '',
     pageSize: 10,
     pageNum: 1,
 })
@@ -433,6 +450,23 @@ const addOrEditForm = ref<any>({
     fileInfoTempList: [],
 })
 
+const checkMinNum = (rule: any, value: any, callback: any) => {
+    const maxNum = parseInt(searchParams.maxNum)
+
+    if (value > maxNum && maxNum > 0) {
+        return callback(new Error('查询开始次数不能大于查询结束次数'))
+    }
+    callback()
+}
+const checkMaxNum = (rule: any, value: any, callback: any) => {
+    const minNum = parseInt(searchParams.minNum)
+
+    if (value < minNum && minNum > 0) {
+        return callback(new Error('查询结束次数不能小于查询开始次数'))
+    }
+    callback()
+}
+
 const addOrEditFormRules = reactive({
     maId: [{ required: true, message: '请选择关联装备', trigger: 'change' }],
     qcName: [{ required: true, message: '请输入质检名称', trigger: 'blur' }],
@@ -440,6 +474,24 @@ const addOrEditFormRules = reactive({
     qcTime: [{ required: true, message: '请选择质检日期', trigger: 'change' }],
     fileInfoList: [{ required: true, message: '请上传质检附件', trigger: 'blur' }],
 })
+const searchFormRules = reactive({
+    minNum: [
+        {
+            pattern: /^[1-9][0-9]*$/,
+            message: '请输入大于0的正整数',
+            trigger: 'blur',
+        },
+        { validator: checkMinNum, trigger: 'blur' },
+    ],
+    maxNum: [
+        {
+            pattern: /^[1-9][0-9]*$/,
+            message: '请输入大于0的正整数',
+            trigger: 'blur',
+        },
+        { validator: checkMaxNum, trigger: 'blur' },
+    ],
+})
 
 const disabledDate = (date: any) => {
     const today = new Date()
@@ -462,6 +514,14 @@ const getLeaseListData = async () => {
     total.value = res.total
 }
 
+const onSearch = () => {
+    searchFormRef.value.validate((valid: any) => {
+        if (valid) {
+            getLeaseListData()
+        }
+    })
+}
+
 // 获取关联装备
 const getAssociationListData = async () => {
     const res: any = await getAssociationListApi()
@@ -495,7 +555,7 @@ const onResetInDialog = () => {
 }
 // 删除
 const onDelete = async (id: any, maId: any) => {
-    const res: any = await qualityDeleteByIdApi({ id, maId })
+    const res: any = await qualityDeleteByIdApi({ maId })
     if (res.code === 200) {
         ElMessage({
             type: 'success',
@@ -533,15 +593,16 @@ const onViewQualityRecord = (row: any) => {
 }
 const getLeaseListDataInDialog = async () => {
     if (qcTime_1.value.length > 0) {
-        searchParamsInDialog.qcStartTime = qcTime.value[0]
+        searchParamsInDialog.qcStartTime = qcTime_1.value[0]
-        searchParamsInDialog.qcEndTime = qcTime.value[1]
+        searchParamsInDialog.qcEndTime = qcTime_1.value[1]
     }
     if (createTime_1.value.length > 0) {
-        searchParamsInDialog.createStartTime = createTime.value[0]
+        searchParamsInDialog.createStartTime = createTime_1.value[0]
-        searchParamsInDialog.createEndTime = createTime.value[1]
+        searchParamsInDialog.createEndTime = createTime_1.value[1]
     }
     const { data: res }: any = await getQualityDetailsApi(searchParamsInDialog)
     qualityDetailsList.value = res.rows
+    totalInDialog.value = res.total
 }
 
 // 自定义事件

src/views/user/lessor/security-certificate/index.vue

@@ -0,0 +1,453 @@
+<template>
+    <!-- 安全证书管理 -->
+    <div class="app-container-content">
+        <el-form
+            :inline="true"
+            size="default"
+            label-width="0"
+            ref="searchFormRef"
+            :model="searchParams"
+        >
+            <el-row>
+                <el-col :span="6">
+                    <el-form-item prop="code">
+                        <el-input
+                            clearable
+                            style="width: 100%"
+                            placeholder="请输入装备编码"
+                            v-model.trim="searchParams.code"
+                        />
+                    </el-form-item>
+                </el-col>
+
+                <el-col :span="6">
+                    <el-form-item>
+                        <el-date-picker
+                            v-model="createTime"
+                            type="daterange"
+                            style="width: 100%"
+                            range-separator="-"
+                            value-format="YYYY-MM-DD"
+                            start-placeholder="上传开始日期"
+                            end-placeholder="上传结束日期"
+                        />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item>
+                        <el-button @click="getLeaseListData" type="primary" class="primary-lease"
+                            >查询</el-button
+                        >
+                        <el-button @click="onReset" type="primary" class="primary-lease"
+                            >重置</el-button
+                        >
+                        <el-button
+                            @click="
+                                () => {
+                                    dialogTitle = '证书新增'
+                                    addOrEditDialogVisible = true
+                                }
+                            "
+                            type="primary"
+                            class="primary-lease"
+                        >
+                            新建
+                        </el-button>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+        </el-form>
+        <!-- 表格 -->
+        <el-table
+            border
+            :data="qualityLis"
+            show-overflow-tooltip
+            :header-cell-style="{
+                color: '#fff',
+                background: '#00a288',
+            }"
+        >
+            <el-table-column align="center" label="序号" type="index" width="80" />
+            <el-table-column align="center" prop="deviceCode" label="装备编码" />
+            <el-table-column align="center" prop="deviceName" label="装备名称" />
+            <el-table-column align="center" prop="qcTime" label="证书附件">
+                <template #default="{ row }">
+                    <a
+                        :href="row.url"
+                        target="_blank"
+                        style="color: #00a288; text-decoration: underline"
+                        >查看</a
+                    >
+                </template>
+            </el-table-column>
+            <el-table-column align="center" prop="nickName" label="上传人" width="120" />
+            <el-table-column align="center" prop="createTime" label="上传时间" />
+            <el-table-column align="center" prop="updateTime" label="更新时间" />
+            <el-table-column align="center" label="操作" :width="220">
+                <template #default="{ row }">
+                    <el-button
+                        size="small"
+                        type="primary"
+                        class="primary-lease"
+                        @click="onViewQualityRecord(row)"
+                    >
+                        编辑
+                    </el-button>
+
+                    <el-popconfirm
+                        width="220"
+                        :icon="InfoFilled"
+                        icon-color="#626AEF"
+                        title="确定删除该项需求吗？"
+                        @confirm="onDelete(row.maId)"
+                    >
+                        <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
+                                class="primary-lease"
+                                type="primary"
+                                size="small"
+                                @click="confirm()"
+                            >
+                                确定
+                            </el-button>
+                        </template>
+                    </el-popconfirm>
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <PagingComponent
+            :total="total"
+            :size="searchParams.pageSize"
+            :page="searchParams.pageNum"
+            @getListChange="getLeaseListData"
+            v-model:page-num="searchParams.pageNum"
+            v-model:page-size="searchParams.pageSize"
+        />
+        <!-- 新增修改对话框 -->
+        <el-dialog
+            width="40%"
+            align-center
+            @close="onClose"
+            destroy-on-close
+            :title="dialogTitle"
+            v-model="addOrEditDialogVisible"
+        >
+            <el-form
+                label-width="auto"
+                label-position="right"
+                ref="addOrEditFormRef"
+                :model="addOrEditForm"
+                :rules="addOrEditFormRules"
+            >
+                <el-row :gutter="20">
+                    <el-col :span="24">
+                        <el-form-item label="关联装备" style="width: 100%" prop="maId">
+                            <el-select
+                                clearable
+                                style="width: 100%"
+                                placeholder="请选择关联装备"
+                                v-model="addOrEditForm.maId"
+                                @change="onMaIdChange"
+                                :disabled="dialogTitle != '证书新增'"
+                            >
+                                <el-option
+                                    :key="item.maId"
+                                    :value="item.maId * 1"
+                                    :label="item.deviceName"
+                                    v-for="item in associationList"
+                                />
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row :gutter="20">
+                    <el-col :span="24">
+                        <el-form-item label="1" style="margin-bottom: 0" class="upload-tip">
+                            支持格式：.jpg、.png 单个文件大小不能超过2M，最多可上传1张
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row :gutter="20">
+                    <el-col :span="24">
+                        <el-form-item label="安全证书附件" prop="fileInfoList">
+                            <div style="flex: 1">
+                                <UploadComponentNew
+                                    :maxSize="2"
+                                    :max-limit="1"
+                                    width="100%"
+                                    height="100%"
+                                    :multiple="true"
+                                    :autoUpload="true"
+                                    :minLimit="addOrEditForm.fileInfoList.length"
+                                    :actionUrl="uploadUrl"
+                                    listType="text"
+                                    :justifyContent="`flex-start`"
+                                    @onFileChange="onFileChange"
+                                    :acceptTypeList="['.jpg', '.png', '.pdf', '.doc']"
+                                >
+                                    <template v-slot:default>
+                                        <!-- <el-icon size="48" color="#aaa"><Plus /></el-icon> -->
+                                        <el-button
+                                            :icon="UploadFilled"
+                                            type="primary"
+                                            class="primary-lease"
+                                            >上传文件</el-button
+                                        >
+                                    </template>
+                                </UploadComponentNew>
+                            </div>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+            </el-form>
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button type="primary" class="primary-lease" @click="onCancel"
+                        >取消</el-button
+                    >
+                    <el-button class="primary-lease" type="primary" @click="onSubmit()">
+                        提交
+                    </el-button>
+                </div>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script setup lang="ts">
+import PagingComponent from 'components/PagingComponent/index.vue'
+import UploadComponentNew from 'components/uploadComponentNew/index.vue'
+import {
+    addSafeBookApi,
+    getSafeBookByMaIdListApi,
+    editSafeBookApi,
+    delSafeBookByIdApi,
+    getAssociationListApi,
+} from 'http/api/security-certificate'
+import { InfoFilled, UploadFilled } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+
+const total = ref(0)
+const createTime = ref([])
+const qualityLis = ref<any>([])
+const dialogTitle = ref('')
+const searchFormRef = ref<any>(null)
+const addOrEditFormRef = ref<any>(null)
+const addOrEditDialogVisible = ref(false)
+const associationList = ref<any>([])
+const uploadUrl = import.meta.env.VITE_API_URL + '/file/upload'
+
+const searchParams = reactive({
+    code: '',
+    startTime: '',
+    endTime: '',
+    pageSize: 10,
+    pageNum: 1,
+})
+
+const addOrEditForm = ref<any>({
+    maId: '',
+    fileInfoList: [],
+    fileInfoTempList: [],
+})
+
+const addOrEditFormRules = reactive({
+    maId: [{ required: true, message: '请选择关联装备', trigger: 'change' }],
+    fileInfoList: [{ required: true, message: '请上传证书附件', trigger: 'blur' }],
+})
+
+// 获取列表
+const getLeaseListData = async () => {
+    if (createTime.value.length > 0) {
+        searchParams.startTime = createTime.value[0]
+        searchParams.endTime = createTime.value[1]
+    }
+    const { data: res }: any = await getSafeBookByMaIdListApi(searchParams)
+    qualityLis.value = res.rows
+    total.value = res.total
+}
+
+// 获取关联装备
+const getAssociationListData = async () => {
+    const res: any = await getAssociationListApi()
+    associationList.value = res.data
+}
+
+const onMaIdChange = (id: any) => {
+    ElMessage.closeAll()
+    try {
+        associationList.value.forEach((e: any) => {
+            if (e.maId == id && e.isSafeBook === 1) {
+                ElMessage({
+                    type: 'warning',
+                    message: '当前装备证书已上传，不可重复选择！',
+                })
+                addOrEditForm.value.maId = ''
+                throw new Error()
+            }
+        })
+    } catch (error) {}
+}
+
+// 重置
+const onReset = () => {
+    createTime.value = []
+    searchParams.startTime = ''
+    searchParams.endTime = ''
+    searchParams.pageNum = 1
+    searchParams.pageSize = 10
+    searchFormRef.value.resetFields()
+    getLeaseListData()
+}
+
+// 删除
+const onDelete = async (maId: any) => {
+    const res: any = await delSafeBookByIdApi({ maId })
+    if (res.code === 200) {
+        ElMessage({
+            type: 'success',
+            message: '删除成功',
+        })
+        getLeaseListData()
+    }
+}
+
+// 提交
+const onSubmit = () => {
+    addOrEditForm.value.fileInfoList = addOrEditForm.value.fileInfoTempList
+    addOrEditFormRef.value.validate(async (valid: any) => {
+        if (valid) {
+            const SEN_API = dialogTitle.value === '证书修改' ? editSafeBookApi : addSafeBookApi
+            const res: any = await SEN_API(addOrEditForm.value)
+            if (res.code === 200) {
+                ElMessage({
+                    type: 'success',
+                    message: '提交成功',
+                })
+                addOrEditDialogVisible.value = false
+                getLeaseListData()
+            }
+        }
+    })
+}
+
+// 编辑
+const onViewQualityRecord = (row: any) => {
+    addOrEditForm.value.maId = row.maId
+    dialogTitle.value = '证书修改'
+    addOrEditDialogVisible.value = true
+}
+
+// 自定义事件
+const onFileChange = (fileList: any) => {
+    addOrEditForm.value.fileInfoTempList = []
+    const fileListTemp = fileList.map((e: any) => {
+        return {
+            fileName: e.name,
+            fileUrl: e.url,
+        }
+    })
+
+    addOrEditForm.value.fileInfoTempList.push(...fileListTemp)
+}
+
+// 取消按钮
+const onCancel = () => {
+    addOrEditDialogVisible.value = false
+}
+const onClose = () => {
+    addOrEditFormRef.value.resetFields()
+    addOrEditForm.value.fileInfoTempList = []
+    addOrEditForm.value.fileInfoList = []
+    addOrEditForm.value.maId = ''
+}
+
+onMounted(() => {
+    getLeaseListData()
+    getAssociationListData()
+})
+</script>
+
+<style lang="scss" scoped>
+:deep.upload-tip .el-form-item__label {
+    color: transparent;
+}
+.el-pagination {
+    justify-content: flex-end;
+    padding: 5px 0;
+}
+:deep.el-pagination.is-background .el-pager li.is-active {
+    background-color: #3cb4a6;
+}
+:deep.el-form--inline .el-form-item {
+    margin-right: 6px;
+    width: 95%;
+}
+
+.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;
+    }
+}
+.app-container-content {
+    :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;
+        }
+    }
+}
+</style>