优化

src/api/dataAnalysis/projectSafety.js

@@ -72,3 +72,22 @@ export function deleteVideoSafetyAnalysisAPI(data) {
         data,
     })
 }
+
+// 下载模板
+export function downloadProjectTemplateAPI(data = {}) {
+    return request({
+        url: '/background/sj/safety/downloadFile',
+        method: 'get',
+        responseType: 'blob',
+        params: data,
+    })
+}
+
+// 导入工程安全分析一本账列表
+export function importProjectSafetyAnalysisAPI(data) {
+    return requestFormData({
+        url: '/background/sj/safety/importFileData',
+        method: 'post',
+        data,
+    })
+}

src/components/UploadFileFormData/index.vue

@@ -0,0 +1,265 @@
+<template>
+    <div>
+        <el-upload
+            action="#"
+            :limit="limit"
+            :auto-upload="false"
+            :multiple="multiple"
+            :show-file-list="true"
+            :on-error="handleError"
+            :on-exceed="handleExceed"
+            :file-list="fileListInner"
+            :on-remove="handleRemove"
+            :on-change="handleChange"
+            :before-upload="handleBeforeUpload"
+        >
+            <el-button type="text" icon="el-icon-upload" v-if="!isDetail">
+                点击上传
+            </el-button>
+            <div slot="tip" class="el-upload__tip" v-if="!isDetail">
+                {{ uploadTip }}
+            </div>
+        </el-upload>
+    </div>
+</template>
+
+<script>
+import { getToken } from '@/utils/auth'
+export default {
+    props: {
+        // 文件列表
+        fileList: {
+            type: Array,
+            default: () => [],
+        },
+        // 上传地址
+        uploadFileUrl: {
+            type: String,
+            default: '',
+        },
+        // 文件类型
+        fileType: {
+            type: Array,
+            default: ['png', 'jpg', 'jpeg'],
+        },
+        // 文件大小
+        fileSize: {
+            type: Number,
+            default: 10,
+        },
+        // 限制数量
+        limit: {
+            type: Number,
+            default: 1,
+        },
+        // 是否多选
+        multiple: {
+            type: Boolean,
+            default: false,
+        },
+        // 是否为查看详情
+        isDetail: {
+            type: Boolean,
+            default: false,
+        },
+        // 是否上传的数量已经满足
+        isUploaded: {
+            type: Boolean,
+            default: false,
+        },
+        uploadTip: {
+            type: String,
+            default: '请上传文件',
+        },
+    },
+    data() {
+        return {
+            // addOrEditForm: {
+            //     fileList: [],
+            // },
+            headers: {
+                Authorization: 'Bearer ' + getToken(),
+            },
+            dialogInnerVisible: false,
+            previewUrl: '',
+            deleteFileList: [],
+        }
+    },
+    methods: {
+        // 删除
+        async handleRemove(file, fileList) {
+            // if (file.response && file.response.data.length > 0) {
+            //     this.$emit('deleteFile', {
+            //         filePath: file.response.data[0].filePath,
+            //         isNew: true,
+            //     })
+            // } else {
+            //     if (file.isNew) {
+            //         this.$emit('deleteFile', {
+            //             filePath: file.filePath,
+            //             isNew: true,
+            //         })
+            //     } else {
+            //         this.$emit('deleteFile', {
+            //             filePath: file.filePath,
+            //             isNew: false,
+            //         })
+            //     }
+            // }
+            this.$emit('update:fileList', fileList)
+        },
+
+        // 预览
+        handlePreview(file) {
+            this.dialogInnerVisible = true
+            this.previewUrl = file.url
+        },
+
+        // 上传成功
+        handleSuccess(response, file, fileList) {
+            this.$emit('update:fileList', [])
+            if (response.code === 200) {
+                this.$emit('update:fileList', fileList)
+                this.$emit('uploadSuccess')
+            } else {
+                this.$modal.msgError('上传失败')
+            }
+            this.$modal.closeLoading()
+        },
+
+        // 上传失败
+        handleError() {
+            this.$modal.msgError('上传失败')
+            this.$modal.closeLoading()
+        },
+
+        // 上传前
+        handleBeforeUpload(file) {
+            // 根据file的name的后缀判断是否符合要求
+            // console.log(file, 'file')
+            const isFormat = this.fileType.some((e) => file.name.endsWith(e))
+            if (!isFormat) {
+                this.$modal.msgError(
+                    `文件格式不正确, 请上传${this.fileType.join(
+                        '、',
+                    )}格式的文件!`,
+                )
+                return false
+            }
+            // 判断文件大小
+            const isLt = file.size / 1024 / 1024 < this.fileSize
+            if (!isLt) {
+                this.$modal.msgError(`图片大小不能超过 ${this.fileSize} MB`)
+                return false
+            }
+
+            // 判断文件名称是否过长
+            if (file.name.length > 30) {
+                this.$modal.msgError('文件名称不能超过30个字符')
+                return false
+            }
+
+            this.$modal.loading('图片正在上传，请稍候...')
+            // 替换文件路径中的#号
+            const newFileName = file.name.replace(/#/g, '@')
+            const newFile = new File([file], newFileName, { type: file.type })
+
+            // 修改原始文件的name属性
+            Object.defineProperty(file, 'name', {
+                value: newFileName,
+            })
+
+            return true
+        },
+
+        // 超出限制
+        handleExceed(files, fileList) {
+            this.$modal.msgError(`上传的文件数量不能超过 ${this.limit} 个`)
+        },
+
+        // 文件发生变化
+        handleChange(file, fileList) {
+            // console.log(file, fileList, 'file, fileList')
+
+            const isFormat = this.fileType.some((e) => file.name.endsWith(e))
+            if (!isFormat) {
+                this.$modal.msgError(
+                    `文件格式不正确, 请上传${this.fileType.join(
+                        '、',
+                    )}格式的文件!`,
+                )
+
+                this.$emit(
+                    'update:fileList',
+                    fileList.filter((item) => item.uid !== file.uid),
+                )
+                return false
+            }
+            // 判断文件大小
+            const isLt = file.size / 1024 / 1024 < this.fileSize
+            if (!isLt) {
+                this.$modal.msgError(`图片大小不能超过 ${this.fileSize} MB`)
+                this.$emit(
+                    'update:fileList',
+                    fileList.filter((item) => item.uid !== file.uid),
+                )
+                return false
+            }
+
+            // 判断文件名称是否过长
+            if (file.name.length > 40) {
+                this.$modal.msgError('文件名称不能超过40个字符')
+                this.$emit(
+                    'update:fileList',
+                    fileList.filter((item) => item.uid !== file.uid),
+                )
+                return false
+            }
+
+            // // 替换文件路径中的#号
+            // const newFileName = file.name.replace(/#/g, '@')
+            // const newFile = new File([file], newFileName, { type: file.type })
+
+            // // 修改原始文件的name属性
+            // Object.defineProperty(file, 'name', {
+            //     value: newFileName,
+            // })
+
+            this.$emit('update:fileList', fileList)
+        },
+    },
+
+    computed: {
+        fileListInner: {
+            get() {
+                return this.fileList
+            },
+            set(newValue) {
+                this.$emit('update:fileList', newValue)
+            },
+        },
+    },
+}
+</script>
+
+<style scoped lang="scss">
+::v-deep .el-upload--picture-card {
+    position: relative;
+    margin-right: 10px;
+
+    .upload-img-box {
+        position: absolute;
+        bottom: -15%;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+}
+::v-deep .upload-img .el-upload--picture-card {
+    display: none;
+}
+</style>

src/views/dataAnalysis/projectSafety/components/addAndEditFormOne.vue

@@ -33,13 +33,26 @@
             <el-row>
                 <el-col :span="12">
                     <el-form-item label="风险等级" prop="riskLevel">
-                        <el-input
+                        <!-- <el-input
                             clearable
                             maxlength="50"
                             show-word-limit
                             placeholder="请输入风险等级"
                             v-model.trim="addAndEditForm.riskLevel"
-                        />
+                        /> -->
+                        <el-select
+                            v-model="addAndEditForm.riskLevel"
+                            placeholder="请选择风险等级"
+                            clearable
+                            style="width: 100%"
+                            filterable
+                        >
+                            <el-option label="Ⅰ" value="1" />
+                            <el-option label="Ⅱ" value="2" />
+                            <el-option label="Ⅲ" value="3" />
+                            <el-option label="Ⅳ" value="4" />
+                            <el-option label="Ⅴ" value="5" />
+                        </el-select>
                     </el-form-item>
                 </el-col>
                 <el-col :span="12">

src/views/dataAnalysis/projectSafety/index.vue

@@ -23,11 +23,25 @@
                     />
                 </el-form-item>
                 <el-form-item label="风险等级">
-                    <el-input
+                    <!-- <el-input
                         v-model="queryParams_1.riskLevel"
                         clearable
                         placeholder="请输入风险等级"
-                    />
+                    /> -->
+
+                    <el-select
+                        v-model="queryParams_1.riskLevel"
+                        placeholder="请选择风险等级"
+                        clearable
+                        style="width: 100%"
+                        filterable
+                    >
+                        <el-option label="Ⅰ" value="1" />
+                        <el-option label="Ⅱ" value="2" />
+                        <el-option label="Ⅲ" value="3" />
+                        <el-option label="Ⅳ" value="4" />
+                        <el-option label="Ⅴ" value="5" />
+                    </el-select>
                 </el-form-item>
                 <el-form-item>
                     <el-button
@@ -52,6 +66,22 @@
                     >
                         新增
                     </el-button>
+
+                    <el-button
+                        size="mini"
+                        type="primary"
+                        @click="onHandleImport"
+                    >
+                        导入
+                    </el-button>
+
+                    <el-button
+                        size="mini"
+                        type="primary"
+                        @click="onHandleDownloadTemplate"
+                    >
+                        下载模板
+                    </el-button>
                 </el-form-item>
             </el-form>
 
@@ -78,6 +108,10 @@
                             </el-tag>
                         </template>
 
+                        <template v-else-if="column.prop === 'riskLevel'">
+                            {{ indexToRiskLevel(scope.row.riskLevel) }}
+                        </template>
+
                         <template v-else>
                             {{ scope.row[column.prop] }}
                         </template>
@@ -229,6 +263,37 @@
                 </el-button>
             </div>
         </el-dialog>
+
+        <el-dialog
+            append-to-body
+            width="40%"
+            v-if="importDialogVisible"
+            :visible.sync="importDialogVisible"
+            title="数据导入"
+        >
+            <UploadFileFormData
+                :limit="1"
+                :file-size="50"
+                :multiple="false"
+                :file-type="['xls', 'xlsx']"
+                uploadTip="请导入xls、xlsx格式文件"
+                :file-list.sync="importFileList"
+            />
+
+            <el-row class="dialog-footer-btn">
+                <el-button size="mini" @click="onHandleCancelImport">
+                    取消
+                </el-button>
+                <el-button
+                    size="mini"
+                    type="primary"
+                    v-loading.fullscreen.lock="loading"
+                    @click="onHandleConfirmImport"
+                >
+                    确定
+                </el-button>
+            </el-row>
+        </el-dialog>
     </div>
 </template>
 
@@ -238,16 +303,22 @@ import {
     deleteProjectSafetyAnalysisAPI,
     getVideoSafetyAnalysisListAPI,
     deleteVideoSafetyAnalysisAPI,
+    downloadProjectTemplateAPI,
+    importProjectSafetyAnalysisAPI,
 } from '@/api/dataAnalysis/projectSafety'
 
+import { downloadFile } from '@/utils/download'
+
 import AddAndEditFormOne from './components/addAndEditFormOne.vue'
 import AddAndEditFormTwo from './components/addAndEditFormTwo.vue'
+import UploadFileFormData from '@/components/UploadFileFormData'
 
 export default {
     name: 'ProjectQuality',
     components: {
         AddAndEditFormOne,
         AddAndEditFormTwo,
+        UploadFileFormData,
     },
     data() {
         return {
@@ -260,7 +331,10 @@ export default {
             safetyType: '风险一本账',
             projectList: [], // 风险一本账列表
             projectList_1: [], // 视频风险分析列表
+            importFileList: [], // 导入文件列表
             addAndEditDialogVisible: false,
+            importDialogVisible: false,
+            loading: false,
             addAndEditDialogTitle: '',
             tableColumns: [
                 {
@@ -430,6 +504,23 @@ export default {
             })
         },
 
+        indexToRiskLevel(index) {
+            switch (index) {
+                case '1':
+                    return 'Ⅰ'
+                case '2':
+                    return 'Ⅱ'
+                case '3':
+                    return 'Ⅲ'
+                case '4':
+                    return 'Ⅳ'
+                case '5':
+                    return 'Ⅴ'
+                default:
+                    return ''
+            }
+        },
+
         // 提交工程质量
         async onHandleSubmit() {
             if (this.safetyType === '风险一本账') {
@@ -460,6 +551,68 @@ export default {
                 }
             }
         },
+
+        // 导入
+        onHandleImport() {
+            this.importDialogVisible = true
+            this.importFileList = []
+        },
+
+        // 下载模板
+        onHandleDownloadTemplate() {
+            downloadProjectTemplateAPI().then((res) => {
+                downloadFile({
+                    fileName: '模板.xlsx',
+                    fileData: res,
+                    fileType: 'application/vnd.ms-excel;charset=utf-8',
+                })
+            })
+        },
+
+        // 取消上传
+        onHandleCancelImport() {
+            this.importFileList = []
+            this.dialogConfig.outerVisible = false
+        },
+
+        // 确定上传
+        async onHandleConfirmImport() {
+            if (this.importFileList.length > 0) {
+                const formData = new FormData()
+                // 增加全局loading
+                this.loading = true
+                formData.append('file', this.importFileList[0].raw)
+                const res = await importProjectSafetyAnalysisAPI(formData)
+
+                this.loading = false
+
+                if (res.code === 200) {
+                    this.$message.success('导入成功')
+                    this.importFileList = []
+                    this.importDialogVisible = false
+                    this.getProjectSafetyAnalysisList()
+                } else {
+                    this.$message.error(res.msg)
+                }
+            } else {
+                this.$confirm(
+                    '当前未选择文件，确定后将关闭上传页面？',
+                    '温馨提示',
+                    {
+                        confirmButtonText: '确定',
+                        cancelButtonText: '取消',
+                        type: 'warning',
+                    },
+                )
+                    .then(async () => {
+                        this.importFileList = []
+                        this.importDialogVisible = false
+                    })
+                    .catch(() => {
+                        // console.log('取消')
+                    })
+            }
+        },
     },
 }
 </script>
@@ -483,4 +636,9 @@ export default {
         box-sizing: border-box !important;
     }
 }
+
+.dialog-footer-btn {
+    text-align: right;
+    margin-top: 20px;
+}
 </style>