Merge pull request 'master' (#50) from master into lukeyan

Reviewed-on: #50

src/components/upload.vue

@@ -0,0 +1,483 @@
+<template>
+    <div class="img-upload-container">
+        <div class="img-upload" :class="{ 'limit-num': fileList.length >= limit, 'mini': size === 'small' }">
+            <el-upload class="avatar-uploader" ref="upload" :action="url" :headers="{ 'Authorization': token }"
+                :file-list="fileList" list-type="picture-card" :on-success="handleSuccess" :on-remove="handleRemove"
+                :data="{ fileType, villageCode }" :limit="1" :on-preview="handlePictureCardPreview"
+                :before-upload="beforeAvatarUpload">
+                <i class="el-icon-plus"></i>
+                <p class="el-upload__tip" slot="tip" v-if="tips">{{ tips }}</p>
+                <p class="el-upload__tip" slot="tip" v-if="tips2">{{ tips2 }}</p>
+                <div slot="file" slot-scope="{file}" class="img-con">
+                    <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
+                    <span class="el-upload-list__item-actions">
+                        <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
+                            <i class="el-icon-zoom-in"></i>
+                        </span>
+                        <span class="el-upload-list__item-delete" @click="handleRemove(file)">
+                            <i class="el-icon-delete"></i>
+                        </span>
+                        <span v-if="size === 'small'" style="display:block;marginLeft:0" class="el-upload-list__item-delete"
+                            @click="onChangeHandle(file)">
+                            <i class="el-icon-edit"></i>
+                        </span>
+                        <span v-else class="el-upload-list__item-delete" @click="onChangeHandle(file)">
+                            <i class="el-icon-edit"></i>
+                        </span>
+                    </span>
+                </div>
+            </el-upload>
+
+            <el-dialog :visible.sync="dialogVisible">
+                <img width="100%" append-to-body :src="dialogImageUrl" alt />
+            </el-dialog>
+        </div>
+    </div>
+</template>
+  
+<script>
+import { getToken } from '@/utils/auth'
+export default {
+    name: 'ImgUpload',
+    componentName: 'ImgUpload',
+    data() {
+        return {
+            imgWidth: 0,
+            imgHeight: 0,
+            // url: `http://${window.location.host}/hjapi/common/upload`, // 图片上传接口地址
+            url: `http://192.168.0.188:8118/zhapi/common/upload`, // 图片上传接口地址
+            fileList: [],
+            dialogImageUrl: '',
+            dialogVisible: false,
+            picIndex: -1,
+            vmodelType: '',
+            token: '',
+            villageData: {},
+            imageUrl: ''
+        }
+    },
+    props: {
+        value: {
+            type: [String, Array]
+        },
+        tips: {
+            type: String,
+            default: ''
+        },
+        tips2: {
+            type: String,
+            default: ''
+        },
+        size: {
+            type: String,
+            default: 'medium' // small
+        },
+        limit: {
+            type: Number,
+            default: 2
+        },
+        limitSize: {
+            type: Number,
+            default: 10
+        },
+        valueType: {
+            type: String,
+            default: 'String' // Object
+        },
+        // 是否校验图片尺寸，默认不校验
+        isCheckPicSize: {
+            type: Boolean,
+            default: false
+        },
+        checkWidth: {
+            type: Number,
+            default: 0 // 图片限制宽度
+        },
+        checkHeight: {
+            type: Number,
+            default: 0 // 图片限制高度
+        },
+        topLimitWidth: {
+            type: Number,
+            default: 0 // 图片限制宽度上限（有时需要校验上传图片宽度在一个范围内）
+        },
+        topLimitHeight: {
+            type: Number,
+            default: 0 // 图片限制高度上限（有时需要校验上传图片高度在一个范围内）
+        },
+        busiType: {
+            type: Number,
+            default: 2
+        },
+        index: {
+            type: Number,
+            default: -1 // 当前图片index，限制可以上传多张时，针对某一张进行操作，需要知道当前的index
+        },
+        limitType: {
+            type: String,
+            default: '' // gif,webp/gif/webp （限制上传格式）
+        },
+        fileType: {
+            type: String,
+            default: 'userpic'
+        },
+        villageCode: {
+            default: ''
+        }
+    },
+    watch: {
+        value: {
+            deep: true,
+            handler: function (val) {
+                if (val) {
+                    if (this.valueType === 'Object') {
+                        this.fileList = this.value.map(item => ({ id: item.id, url: item.url, name: item.name }))
+                    } else {
+                        if (this.vmodelType === 'array') {
+                            this.fileList = this.value.map(item => ({ url: item }))
+                        } else {
+                            this.fileList = [{ url: val }]
+                        }
+                    }
+                } else {
+                    this.fileList = []
+                }
+            }
+        }
+    },
+    created() {
+        this.agetToken()
+        if (this.valueType === 'Object') {
+            this.vmodelType = 'array'
+        } else {
+            const res = this.isString(this.value)
+            if (res === true) {
+                this.vmodelType = 'string'
+            } else {
+                this.vmodelType = 'array'
+            }
+        }
+        // console.log('created vmodelType', this.vmodelType)
+        if (this.value) {
+            if (this.valueType === 'Object') {
+                this.fileList = this.value.map(item => ({
+                    id: item.id ? item.id : '',
+                    url: item.url,
+                    name: item.name
+                }))
+            } else {
+                if (this.vmodelType === 'array') {
+                    this.fileList = this.value.map(item => ({ url: item }))
+                } else {
+                    this.fileList = [{ url: this.value }]
+                }
+            }
+        }
+    },
+    mounted() {
+    },
+    methods: {
+        agetToken() {
+            this.token = 'Bearer ' + getToken()
+        },
+        findItem(uid) {
+            this.fileList.forEach((ele, i) => {
+                if (uid === ele.uid) {
+                    this.picIndex = i
+                }
+            })
+        },
+        onChangeHandle(file) {
+            // console.log('onChangeHandle', file, this.fileList)
+            this.findItem(file.uid)
+            this.$refs.upload.$refs['upload-inner'].handleClick()
+        },
+        beforeAvatarUpload(file) {
+            const imgType = file.type
+            const isLtSize = file.size / 1024 / 1024 < this.limitSize
+            const TYPE_NOGIFWEBP = ['image/png', 'image/jpeg', 'image/jpg']
+            const TYPE_NOGIF = ['image/png', 'image/jpeg', 'image/jpg', 'image/webp']
+            const TYPE_NOWEBP = ['image/png', 'image/jpeg', 'image/jpg', 'image/gif']
+            const TYPE_ALL = ['image/png', 'image/jpeg', 'image/jpg', 'image/gif', 'image/webp']
+            let isType = true
+            if (this.limitType && this.limitType.indexOf('gif') !== -1 && this.limitType.indexOf('webp') !== -1) {
+                if (TYPE_NOGIFWEBP.indexOf(imgType) === -1) {
+                    isType = false
+                    this.$message.error('仅支持上传 jpg、png、jpeg、gif、webp 格式的图片!')
+                }
+            } else if (this.limitType && this.limitType.indexOf('gif') === -1 && this.limitType.indexOf('webp') === -1) {
+                if (TYPE_NOGIFWEBP.indexOf(imgType) === -1) {
+                    isType = false
+                    this.$message.error('仅支持上传 jpg、png、jpeg 格式的图片!')
+                }
+            } else if (this.limitType && this.limitType.indexOf('webp') !== -1) {
+                if (TYPE_NOGIF.indexOf(imgType) === -1) {
+                    isType = false
+                    this.$message.error('仅支持上传 jpg、png、jpeg、webp 格式的图片!')
+                }
+            } else if (this.limitType && this.limitType.indexOf('gif') !== -1) {
+                if (TYPE_NOWEBP.indexOf(imgType) === -1) {
+                    isType = false
+                    this.$message.error('仅支持上传 jpg、png、jpeg、gif 格式的图片!')
+                }
+            } else {
+                if (TYPE_ALL.indexOf(imgType) === -1) {
+                    isType = false
+                    this.$message.error('仅支持上传 jpg、png、jpeg、webp、gif 格式的图片!')
+                }
+            }
+
+            if (!isLtSize) {
+                this.$message.error(`上传图片大小不能超过${this.limitSize}MB!`)
+            }
+            if (this.isCheckPicSize === true) {
+                const width = this.checkWidth
+                const height = this.checkHeight
+                const topWidth = this.topLimitWidth
+                const topHeight = this.topLimitHeight
+                const that = this
+                const isSize = new Promise((resolve, reject) => {
+                    // window对象，将blob或file读取成一个url
+                    const _URL = window.URL || window.webkitURL
+                    const img = new Image()
+                    // image对象的onload事件，当图片加载完成后执行的函数
+                    img.onload = () => {
+                        that.imgWidth = img.width
+                        that.imgHeight = img.height
+                        if (width && height) { // 校验图片的宽度和高度
+                            let valid = false
+                            if (topWidth && topHeight) {
+                                // 校验图片宽度和高度范围
+                                valid = ((width <= img.width) && (img.width <= topWidth)) && ((height <= img.height) && (img.height <= topHeight))
+                            } else if (topHeight) {
+                                // 校验图片高度范围
+                                valid = img.width === width && ((height <= img.height) && (img.height <= topHeight))
+                            } else if (topWidth) {
+                                // 校验图片宽度范围
+                                valid = ((width <= img.width) && (img.width <= topWidth)) && img.height === height
+                            } else {
+                                // 校验图片宽度、高度固定值
+                                valid = img.width === width && height === img.height
+                            }
+                            valid ? resolve() : reject(new Error('error'))
+                        } else if (width) { // 只校验图片的宽度
+                            let valid = false
+                            if (topWidth) {
+                                // 校验图片宽度范围
+                                valid = (width <= img.width) && (img.width <= topWidth)
+                            } else {
+                                // 校验图片宽度固定值
+                                valid = img.width === width
+                            }
+                            valid ? resolve() : reject(new Error('error'))
+                        } if (height) { // 只校验图片的高度
+                            let valid = false
+                            if (topHeight) {
+                                // 校验图片高度范围
+                                valid = (height <= img.height) && (img.height <= topHeight)
+                            } else {
+                                // 校验图片高度固定值
+                                valid = img.height === height
+                            }
+                            valid ? resolve() : reject(new Error('error'))
+                        }
+                    }
+                    img.src = _URL.createObjectURL(file)
+                }).then(() => {
+                    return file
+                }, () => {
+                    let text = ''
+                    if (width && height) {
+                        if (topWidth && topHeight) {
+                            text = `图片尺寸限制为：宽度${width}~${topWidth}px，高度${height}~${topHeight}px！`
+                        } else if (topHeight) {
+                            text = `图片尺寸限制为：宽度${width}px，高度${height}~${topHeight}px！`
+                        } else if (topWidth) {
+                            text = `图片尺寸限制为：宽度${width}~${topWidth}px，高度${height}px！`
+                        } else {
+                            text = `图片尺寸限制为：宽度${width}px，高度${height}px！`
+                        }
+                    } else if (width) {
+                        if (topWidth) {
+                            text = `图片尺寸限制为：宽度${width}~${topWidth}px！`
+                        } else {
+                            text = `图片尺寸限制为：宽度${width}px！`
+                        }
+                    } else if (height) {
+                        if (topHeight) {
+                            text = `图片尺寸限制为：高度${height}~${topHeight}px！`
+                        } else {
+                            text = `图片尺寸限制为：高度${height}px！`
+                        }
+                    }
+                    this.$message.error(text)
+                    return Promise.reject(new Error('error'))
+                })
+                return isType && isLtSize && isSize
+            } else {
+                // window对象，将blob或file读取成一个url
+                const _URL = window.URL || window.webkitURL
+                const img = new Image()
+                img.onload = () => { // image对象的onload事件，当图片加载完成后执行的函数
+                    this.imgWidth = img.width
+                    this.imgHeight = img.height
+                    // console.log('getWidthAndHeight', this.imgWidth, this.imgHeight)
+                }
+                img.src = _URL.createObjectURL(file)
+                return isType && isLtSize
+            }
+        },
+        // 判断是否是String
+        isString(str) {
+            return ((str instanceof String) || (typeof str).toLowerCase() === 'string')
+        },
+        handleRemove(file) {
+            this.findItem(file.uid)
+            this.fileList.splice(this.picIndex, 1)
+            // fileList = JSON.parse(JSON.stringify(this.fileList))
+            // this.exportImg(fileList)
+        },
+        handleSuccess(res, file, fileList) {
+
+
+            console.log(fileList, 'success');
+            console.log(this.picIndex, 'this.picIndex');
+            if (this.picIndex !== -1) {
+                fileList.splice(this.picIndex, 1)
+            }
+            // this.exportImg(fileList)
+            console.log(res.url, 'res.url');
+            this.imageUrl = res.url
+            this.$emit('upSuccess', res.url)
+        },
+        handleError(err) {
+            this.$message.error(err)
+        },
+        handlePictureCardPreview(file) {
+            this.dialogImageUrl = file.url
+            this.dialogVisible = true
+        },
+        exportImg(fileList = []) {
+            // console.log('exportImg fileList', fileList)
+            this.fileList = fileList
+            if (fileList.length !== 0) {
+                if (this.valueType === 'Object') {
+                    const imgs = fileList.map(item => {
+                        if (item.response && item.response.result) {
+                            item.id = item.response.result[0].id
+                            item.url = item.response.result[0].url + '&width=' + this.imgWidth + '&height=' + this.imgHeight
+                            item.name = item.response.result[0].fileName
+                        }
+                        return {
+                            id: item.id,
+                            url: item.url,
+                            name: item.name
+                        }
+                    })
+                    this.$emit('input', imgs)
+                    // console.log('exportImg imgs', imgs)
+                } else {
+                    if (this.vmodelType === 'array') {
+                        const imgs = fileList.map(item => {
+                            if (item.response && item.response.result) {
+                                item.url = item.response.result[0].url + '&width=' + this.imgWidth + '&height=' + this.imgHeight
+                            }
+                            return item.url
+                        })
+                        this.$emit('input', imgs)
+                        // console.log('exportImg imgs', imgs)
+                    } else {
+                        const resUrl = fileList[0].response.result[0].url + '&width=' + this.imgWidth + '&height=' + this.imgHeight
+                        this.$emit('input', resUrl)
+                        // console.log('exportImg resUrl', resUrl)
+                    }
+                }
+            } else {
+                this.$emit('input', '')
+            }
+            this.picIndex = -1
+        }
+    }
+}
+</script>
+  
+<style lang='less'>
+@small-size: 80px;
+
+.img-upload&&.limit-num {
+    .el-upload--picture-card {
+        display: none !important;
+    }
+}
+
+.el-upload--picture-card {
+    background: url("~@/assets/companyFile/uploadicon.png") center no-repeat !important;
+    background-size: 40% 40% !important;
+
+    .el-icon-plus {
+        display: none;
+    }
+}
+
+.img-upload&&.mini {
+    .el-upload {
+        border: 1px dashed #d9d9d9;
+        border-radius: 6px;
+        cursor: pointer;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .el-upload-list__item {
+        width: @small-size;
+        height: @small-size;
+        text-align: center;
+        /*去除upload组件过渡效果*/
+        transition: none !important;
+    }
+
+    .el-upload--picture-card {
+        width: @small-size;
+        height: @small-size;
+        line-height: @small-size;
+        text-align: center;
+    }
+}
+
+.el-upload-list__item&&.is-success {
+    .img-con {
+        width: 100%;
+        height: 100%;
+    }
+}
+
+.avatar-uploader .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+}
+
+.avatar-uploader .el-upload:hover {
+    border-color: #409eff;
+}
+
+.avatar-uploader-icon {
+    font-size: 28px;
+    position: relative;
+    color: #8c939d;
+    width: 220px;
+    height: 220px;
+    background: url("~@/assets/companyFile/uploadicon.png") center no-repeat !important;
+    background-size: 40% 40% !important;
+
+    div {
+        position: absolute;
+        top: 160px;
+        left: 16px;
+        font-size: 19px;
+    }
+}
+</style>
+  

src/main.js

@@ -5,8 +5,10 @@ import 'element-ui/lib/theme-chalk/index.css';
 import router from './router'
 import store from './store'
 import Message from './components/message';
+import erupload from "./components/upload";
 Vue.use(ElementUI);
 Vue.use(Message)
+Vue.component('erupload', erupload)
 
 const vm = new Vue({
   el: '#app',

src/views/archives/fangke.vue

@@ -14,7 +14,7 @@
             <el-form-item label="人员姓名：" class="formItem">
                 <el-input v-model.trim="formInline.visitName" clearable class="formIpt"></el-input>
             </el-form-item>
-            <el-button type="primary" @click="getList()">搜索</el-button>
+            <el-button type="primary" @click="getList(1)">搜索</el-button>
         </el-form>
         <div class="monitorBox">
             <el-table :cell-style="{ background: 'revert' }" :data="tableData" class="table"
@@ -116,7 +116,10 @@ export default {
         // }
     },
     methods: {
-        getList() {
+        getList(val) {
+            if (val) {
+                this.pageNum = val
+            }
             tbSafeCompanyVisit({ pageSize: this.pageSize, pageNum: this.pageNum, ...this.formInline, companyId: this.companyID }).then(res => {
                 this.tableData = res.data
                 this.total = res.total

src/views/systemManagement/companyList/components/companyDataDialog.vue

@@ -1,23 +1,12 @@
 <!-- 新增企业或者查看企业名单 -->
 <template>
-  <el-dialog
-    class="dialog"
-    :title="dialogTitle"
-    :visible.sync="visible"
-    :close-on-click-modal="false"
-    width="970px"
-  >
+  <el-dialog class="dialog" :title="dialogTitle" :visible.sync="visible" :close-on-click-modal="false" width="970px">
     <div class="form_body">
       <div class="commerceMessage">
         <p>企业工商信息</p>
         <!-- 为适应上传图片表单布局把企业工商表单拆分 -->
         <div class="commerceMessage_one">
-          <el-form
-            ref="commerceMessage_form"
-            :model="form"
-            :rules="rules"
-            class="commerceMessage_form"
-          >
+          <el-form ref="commerceMessage_form" :model="form" :rules="rules" class="commerceMessage_form">
             <el-form-item label="企业名称" prop="companyName">
               <el-input v-model="form.companyName"></el-input>
             </el-form-item>
@@ -46,43 +35,27 @@
               <el-input v-model="form.businessStatus"></el-input>
             </el-form-item>
           </el-form>
-          <el-upload
-            ref="upload"
-            class="avatar-uploader"
-            accept=".jpg,.jpeg,.png,.gif,.JPG,.JPEG"
-            :action="upUrl"
-            :show-file-list="false"
-            :on-success="handleAvatarSuccess"
-          >
-            <img
-              v-if="imageUrl"
-              :src="imageUrl"
-              class="avatar"
-              @error="setDefaultImage"
-            />
+          <!-- <el-upload ref="upload" class="avatar-uploader" accept=".jpg,.jpeg,.png,.gif,.JPG,.JPEG" :action="upUrl"
+            :headers="upheaders" :show-file-list="false" :on-success="handleAvatarSuccess">
+            <img v-if="imageUrl" :src="imageUrl" class="avatar" @error="setDefaultImage" />
             <div v-else class="avatar-uploader-icon">
               <div>点击上传企业封面图片</div>
             </div>
-          </el-upload>
+          </el-upload> -->
+          <erupload class="avatar-uploader" v-model="form.picUrl" :tips="'点击上传图片'" :tips2="'（只能上传一张）'" :size="'medium'"
+            :limit="1" :fileType="'villagepic'" :limitSize="5" @upSuccess="upSuccess">
+          </erupload>
+
         </div>
         <!-- 为适应上传图片表单布局把企业工商表单拆分,剩余部分 -->
-        <el-form
-          ref="commerceMessage_form_two"
-          :model="form"
-          :rules="rules"
-          class="commerceMessage_form_two"
-        >
+        <el-form ref="commerceMessage_form_two" :model="form" :rules="rules" class="commerceMessage_form_two">
           <el-form-item label="企业登记注册地" prop="registerAddress">
             <el-input v-model="form.registerAddress"></el-input>
           </el-form-item>
           <el-form-item label="企业类型" prop="companyTypes">
             <el-checkbox-group v-model="form.companyTypes">
-              <el-checkbox
-                @change="company_choice($event, item)"
-                v-for="item in checkList"
-                :key="item.id"
-                :label="item.label"
-                >{{ item.label }}
+              <el-checkbox @change="company_choice($event, item)" v-for="item in checkList" :key="item.id"
+                :label="item.label">{{ item.label }}
               </el-checkbox>
             </el-checkbox-group>
           </el-form-item>
@@ -94,11 +67,7 @@
       <!-- 企业联系人信息表单 -->
       <div class="company_person_message">
         <p>企业联系人信息</p>
-        <el-form
-          ref="company_person_message_form"
-          :model="form"
-          class="company_person_message_form"
-        >
+        <el-form ref="company_person_message_form" :model="form" class="company_person_message_form">
           <el-form-item label="安全责任人" prop="emergencyContact">
             <el-input v-model="form.emergencyContact"></el-input>
           </el-form-item>
@@ -110,83 +79,35 @@
       <!-- 企业位置信息表单 -->
       <div class="company_position">
         <p>企业位置信息</p>
-        <el-form
-          ref="company_position_form"
-          :model="form"
-          :rules="rules"
-          class="company_position_form"
-        >
+        <el-form ref="company_position_form" :model="form" :rules="rules" class="company_position_form">
           <el-form-item label="省份名称" prop="provinceName">
-            <el-select
-              v-model="form.provinceName"
-              @change="checkCity"
-              placeholder="请选择省份名称"
-            >
-              <el-option
-                v-for="item in form.province"
-                :key="item.areaCode"
-                :label="item.areaName"
-                :value="item.areaCode"
-              >
+            <el-select v-model="form.provinceName" @change="checkCity" placeholder="请选择省份名称">
+              <el-option v-for="item in form.province" :key="item.areaCode" :label="item.areaName" :value="item.areaCode">
               </el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="城市名称" prop="cityName">
-            <el-select
-              v-model="form.cityName"
-              @change="checkCounty"
-              placeholder="请选择城市名称"
-            >
-              <el-option
-                v-for="item in form.city"
-                :key="item.areaCode"
-                :label="item.areaName"
-                :value="item.areaCode"
-              >
+            <el-select v-model="form.cityName" @change="checkCounty" placeholder="请选择城市名称">
+              <el-option v-for="item in form.city" :key="item.areaCode" :label="item.areaName" :value="item.areaCode">
               </el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="区县名称" prop="areaName">
-            <el-select
-              v-model="form.areaName"
-              @change="checkTown"
-              placeholder="请选择区县名称"
-            >
-              <el-option
-                v-for="item in form.county"
-                :key="item.areaCode"
-                :label="item.areaName"
-                :value="item.areaCode"
-              >
+            <el-select v-model="form.areaName" @change="checkTown" placeholder="请选择区县名称">
+              <el-option v-for="item in form.county" :key="item.areaCode" :label="item.areaName" :value="item.areaCode">
               </el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="街道/乡镇名称" prop="blockName">
-            <el-select
-              v-model="form.blockName"
-              @change="checkCommunity"
-              placeholder="请选择街道/乡镇名称"
-            >
-              <el-option
-                v-for="item in form.township"
-                :key="item.areaCode"
-                :label="item.areaName"
-                :value="item.areaCode"
-              >
+            <el-select v-model="form.blockName" @change="checkCommunity" placeholder="请选择街道/乡镇名称">
+              <el-option v-for="item in form.township" :key="item.areaCode" :label="item.areaName" :value="item.areaCode">
               </el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="社区/村名称" prop="streetName">
-            <el-select
-              v-model="form.streetName"
-              placeholder="请选择社区/村名称"
-            >
-              <el-option
-                v-for="item in form.community"
-                :key="item.areaCode"
-                :label="item.areaName"
-                :value="item.areaCode"
-              >
+            <el-select v-model="form.streetName" placeholder="请选择社区/村名称">
+              <el-option v-for="item in form.community" :key="item.areaCode" :label="item.areaName"
+                :value="item.areaCode">
               </el-option>
             </el-select>
           </el-form-item>
@@ -198,11 +119,7 @@
             <el-input v-model="form.latitude"></el-input>
           </el-form-item>
           <el-form-item> </el-form-item>
-          <el-form-item
-            label="企业地址"
-            prop="companyAddress"
-            class="companyAddress_text"
-          >
+          <el-form-item label="企业地址" prop="companyAddress" class="companyAddress_text">
             <el-input v-model="form.companyAddress"></el-input>
           </el-form-item>
         </el-form>
@@ -210,25 +127,14 @@
       <!-- 管辖区信息表单 -->
       <div class="jurisdiction">
         <p>管辖区信息</p>
-        <el-form
-          ref="jurisdiction_form"
-          :model="form"
-          class="jurisdiction_form"
-        >
+        <el-form ref="jurisdiction_form" :model="form" class="jurisdiction_form">
           <el-form-item label="辖区派出所编码" prop="policeDistrictCode">
             <el-input v-model="form.policeDistrictCode"></el-input>
           </el-form-item>
           <el-form-item label="辖区派出所名称" prop="policeDistrictCn">
-            <el-select
-              v-model="form.policeDistrictCn"
-              placeholder="请选择辖区派出所名称"
-            >
-              <el-option
-                v-for="item in form.jurisdiction"
-                :key="item.dictValue"
-                :label="item.dictLabel"
-                :value="item.dictValue"
-              >
+            <el-select v-model="form.policeDistrictCn" placeholder="请选择辖区派出所名称">
+              <el-option v-for="item in form.jurisdiction" :key="item.dictValue" :label="item.dictLabel"
+                :value="item.dictValue">
               </el-option>
             </el-select>
           </el-form-item>
@@ -476,6 +382,10 @@ export default {
           .toString();
       }
     },
+    upSuccess(val) {
+      console.log(val, '图片上传成功回调参数');
+      this.form.picUrl = val
+    },
     // 确定数据
     async saveFormData() {
       delete this.form.city
@@ -559,6 +469,15 @@ export default {
       color: #fff;
       text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
     }
+
+    .el-upload__tip {
+      margin: 5px 0 5px 17px;
+      padding: 0;
+    }
+
+    .el-upload__tip:last-child {
+      font-size: 12px;
+    }
   }
 
   .el-button {
@@ -637,9 +556,11 @@ export default {
     background: url("~@/assets/companyFile/242112.png") no-repeat !important;
     background-size: 100% 100% !important;
   }
+
   .commerceMessage {
     margin-top: -17px;
   }
+
   /* 为适应上传图片表单布局把企业工商表单拆分 */
   .commerceMessage_one {
     display: flex;
@@ -759,8 +680,10 @@ export default {
         }
       }
     }
+
     .el-form-item.companyAddress_text {
       width: 870px !important;
+
       .el-form-item__content {
         .el-input__inner {
           width: 762px;

src/views/systemManagement/correlationEquipment/components/equipmentTable.vue

@@ -6,24 +6,15 @@
     <div v-if="display_search" class="equipment_data_search">
       <el-form :inline="true" :model="search" class="search_data">
         <el-form-item>
-          <el-input
-            v-model="search.equipment"
-            placeholder="输入设备名称搜索"
-          ></el-input>
+          <el-input v-model="search.equipment" placeholder="输入设备名称搜索"></el-input>
         </el-form-item>
         <el-form-item>
           <el-form-item>
-            <el-input
-              v-model="search.channel_code"
-              placeholder="输入通道国际编码搜索"
-            ></el-input>
+            <el-input v-model="search.channel_code" placeholder="输入通道国际编码搜索"></el-input>
           </el-form-item>
         </el-form-item>
         <el-form-item>
-          <el-input
-            v-model="search.equipment_ip"
-            placeholder="输入设备IP搜索"
-          ></el-input>
+          <el-input v-model="search.equipment_ip" placeholder="输入设备IP搜索"></el-input>
         </el-form-item>
         <el-form-item>
           <el-button @click="onSubmitVideo">搜索</el-button>
@@ -36,17 +27,11 @@
     <div v-else class="equipment_data_search">
       <el-form :inline="true" :model="search" class="search_data">
         <el-form-item>
-          <el-input
-            v-model="search.equipment"
-            placeholder="输入设备名称搜索"
-          ></el-input>
+          <el-input v-model="search.equipment" placeholder="输入设备名称搜索"></el-input>
         </el-form-item>
         <el-form-item>
           <el-form-item>
-            <el-input
-              v-model="search.ip"
-              placeholder="输入IP名称搜索"
-            ></el-input>
+            <el-input v-model="search.ip" placeholder="输入IP名称搜索"></el-input>
           </el-form-item>
         </el-form-item>
         <el-form-item>
@@ -59,59 +44,30 @@
     </div>
     <!-- 增删按钮 -->
     <div class="equipment_data_btn">
-      <el-button
-        v-for="item in btnList"
-        :key="item.value"
-        @click="openDialog(item.value)"
-      >
+      <el-button v-for="item in btnList" :key="item.value" @click="openDialog(item.value)">
         <i :class="`el-icon-${item.icon}`" />
-        {{ item.label }}</el-button
-      >
+        {{ item.label }}</el-button>
     </div>
     <!-- 表格 -->
     <div class="equipment_data_table">
-      <el-table
-        :cell-style="{ background: 'revert' }"
-        :header-cell-style="table_header"
-        :data="pushTableData"
-        :highlight-current-row="true"
-      >
+      <el-table :cell-style="{ background: 'revert' }" :header-cell-style="table_header" :data="pushTableData"
+        :highlight-current-row="true" height="250">
         <el-table-column type="selection" width="55"> </el-table-column>
-        <el-table-column
-          v-for="item in tableColumn"
-          :key="item.prop"
-          :prop="item.prop"
-          :label="item.label"
-          :width="item.width"
-        ></el-table-column>
+        <el-table-column v-for="item in tableColumn" :key="item.prop" :prop="item.prop" :label="item.label"
+          :width="item.width"></el-table-column>
         <el-table-column prop="operation" label="操作">
           <template slot-scope="scope">
-            <el-button
-              size="small"
-              class="operation"
-              @click="openDialog('2', scope.row)"
-              >编辑
+            <el-button size="small" class="operation" @click="openDialog('2', scope.row)">编辑
             </el-button>
-            <el-button
-              size="small"
-              class="operation"
-              @click="openDialog('5', scope.row)"
-              >详情
+            <el-button size="small" class="operation" @click="openDialog('5', scope.row)">详情
             </el-button>
           </template>
         </el-table-column>
       </el-table>
     </div>
     <div class="equipment_data_pagination">
-      <el-pagination
-        :background="true"
-        @current-change="handleCurrentChange"
-        :page-sizes="[4]"
-        :page-size="PageSize"
-        :current-page="pageNum"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="pushTableData.length"
-      >
+      <el-pagination :background="true" @current-change="handleCurrentChange" :page-sizes="[4]" :page-size="PageSize"
+        :current-page="pageNum" layout="total, sizes, prev, pager, next, jumper" :total="pushTableData.length">
       </el-pagination>
     </div>
     <AddVideoDialog ref="addVideoDialog"></AddVideoDialog>
@@ -334,11 +290,13 @@ export default {
 
   .equipment_data_search {
     margin-left: 12px;
+
     /deep/.el-input__inner {
       border-radius: 0px 0px 0px 0px;
       background: #3c4b4a;
       color: #fff;
     }
+
     .el-button {
       width: 100%;
       border: 1px solid #4a6072;
@@ -346,6 +304,7 @@ export default {
       border-radius: 0px !important;
       background: #323f43;
     }
+
     .el-button:focus,
     .el-button:hover {
       border: 1px solid#34e1b3;
@@ -353,8 +312,10 @@ export default {
       background-size: 100% 100% !important;
     }
   }
+
   .equipment_data_btn {
     margin-left: 12px;
+
     .el-button {
       width: 90px;
       height: 5vh;
@@ -364,6 +325,7 @@ export default {
       background: url("~@/assets/companyFile/btn1.png") no-repeat !important;
       background-size: 100% 100% !important;
     }
+
     .el-button:focus,
     .el-button:hover {
       filter: brightness(200%);
@@ -381,20 +343,39 @@ export default {
     .el-table__expanded-cell {
       color: #fff;
       background-color: transparent;
+
     }
 
     /deep/.el-table {
-      height: 27vh;
+      .el-table__body-wrapper {
+
+        overflow: auto;
+
+        &::-webkit-scrollbar {
+          width: 3px;
+        }
+
+        // 滚动条里面默认的小方块,自定义样式
+        &::-webkit-scrollbar-thumb {
+          background: #4CF993;
+          border-radius: 2px;
+        }
+
+        // 滚动条里面的轨道
+        &::-webkit-scrollbar-track {
+          background: transparent;
+        }
+
+      }
+
       thead {
         text-align: center;
         color: #fff;
         font-weight: 500;
-        background: linear-gradient(
-          to right,
+        background: linear-gradient(to right,
             #284f49,
             #2f6363,
-          #233b38
-        ) !important;
+            #233b38) !important;
 
         & th {
           background-color: transparent;
@@ -404,6 +385,7 @@ export default {
           background-color: transparent;
         }
       }
+
       tr {
         background: #233438;
       }
@@ -416,6 +398,7 @@ export default {
       width: 100%;
       height: 0px;
     }
+
     /deep/.el-button.operation {
       width: 40px;
       height: 30px;
@@ -423,6 +406,7 @@ export default {
       border: 0px;
       color: #fff;
     }
+
     /deep/.el-button.operation:hover,
     .el-button.operation:focus {
       width: 40px;
@@ -436,30 +420,36 @@ export default {
 
   .el-pagination {
     margin-left: 50%;
+
     /deep/.el-pagination__total {
       color: #fff;
     }
+
     /deep/.el-input__inner {
       border-radius: 0px;
       background: #3c4b4a;
       color: #fff;
     }
+
     /deep/.btn-prev {
       border-radius: 0px;
       background: #3c4b4a;
       color: #fff;
     }
+
     /deep/ul {
       li {
         background: #3c4b4a;
         color: #fff;
       }
     }
+
     /deep/.btn-next {
       border-radius: 0px;
       background: #3c4b4a;
       color: #fff;
     }
+
     /deep/ .el-pager {
       li {
         background: #3c4b4a !important;