民警信息头像处理

src/views/modules/police/police-add-or-update.vue

@@ -6,15 +6,28 @@
             <el-form-item label="民警名称" prop="policeName">
                 <el-input v-model="dataForm.policeName" placeholder="民警名称"></el-input>
             </el-form-item>
-            <el-form-item label="民警照片地址" prop="policeAvatar">
-                <el-input v-model="dataForm.policeAvatar" placeholder="民警照片地址"></el-input>
+            <el-form-item label="民警照片"
+                          v-loading="loading"
+                          prop="policeAvatar">
+                <el-upload class="avatar-uploader"
+                           :action="uploadUrl"
+                           :show-file-list="false"
+                           :on-success="handleAvatarActSuccess"
+                           :on-error="handelError"
+                           :before-upload="beforeAvatarUpload">
+                    <img v-if="dataForm.policeAvatar"
+                         :src="dataForm.policeAvatar"
+                         class="avatar">
+                    <i v-else
+                       class="el-icon-plus avatar-uploader-icon"></i>
+                    <div slot="tip"
+                         class="el-upload__tip">只能上传jpg/png文件，且不超过500kb
+                    </div>
+                </el-upload>
             </el-form-item>
             <el-form-item label="民警联系方式" prop="policeTel">
                 <el-input v-model="dataForm.policeTel" placeholder="民警联系方式"></el-input>
             </el-form-item>
-            <el-form-item label="警号" prop="policeNo">
-                <el-input v-model="dataForm.policeNo" placeholder="警号"></el-input>
-            </el-form-item>
             <el-form-item label="民警所在机构名称"
                           prop="deptId">
                 <el-cascader v-model="dataForm.deptId" style="width: 100%"
@@ -25,12 +38,6 @@
                              filterable
                              collapse-tags></el-cascader>
             </el-form-item>
-            <el-form-item label="是否展示" prop="displayFlag">
-                <el-radio-group v-model="dataForm.displayFlag">
-                    <el-radio :label="'1'">是</el-radio>
-                    <el-radio :label="'0'">否</el-radio>
-                </el-radio-group>
-            </el-form-item>
         </el-form>
         <template slot="footer">
             <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
@@ -41,6 +48,7 @@
 
 <script>
     import debounce from 'lodash/debounce'
+    import Cookies from "js-cookie";
 
     export default {
         data() {
@@ -67,8 +75,15 @@
                     parentDeptNames: ''
                 },
                 options: [],
+                loading: false,
+                uploadUrl: '',
             }
         },
+        created() {
+            this.$nextTick(() => {
+                this.uploadUrl = `${window.SITE_CONFIG['apiURL']}/oss/file/upload?token=${Cookies.get('token')}`
+            })
+        },
         computed: {
             dataRule() {
                 return {
@@ -169,6 +184,16 @@
             deptHandleChange(value) {
                 this.dataForm.deptId = value.slice(-1).shift();
             },
+            handleAvatarActSuccess(res, file) {
+                this.loading = false
+                this.dataForm.policeAvatar = res.data.url
+            },
+            beforeAvatarUpload(file) {
+                this.loading = true
+            },
+            handelError() {
+                this.loading = false
+            },
             // 表单提交
             dataFormSubmitHandle: debounce(function () {
                 this.dataForm.deptName = this.$refs['grid'].inputValue;
@@ -196,3 +221,31 @@
         }
     }
 </script>
+<style scope>
+    .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;
+        color: #8c939d;
+        width: 178px;
+        height: 178px;
+        line-height: 178px;
+        text-align: center;
+    }
+
+    .avatar {
+        width: 178px;
+        height: 178px;
+        display: block;
+    }
+</style>

src/views/modules/police/police.vue

@@ -35,7 +35,26 @@
                       @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
                 <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
                 <el-table-column prop="policeName" label="民警姓名" header-align="center" align="center"></el-table-column>
-                <el-table-column prop="policeAvatar" label="照片" header-align="center" align="center"></el-table-column>
+                <el-table-column align="center"
+                                 label="照片"
+                                 :show-overflow-tooltip="true"
+                                 prop="policeAvatar">
+                    <template slot-scope="scope">
+                        <el-popover placement="right"
+                                    title=""
+                                    trigger="click"
+                                    class="big_image">
+                            <el-image slot="reference"
+                                      min-width="70"
+                                      height="70"
+                                      v-if="scope.row.policeAvatar"
+                                      :src="scope.row.policeAvatar"
+                                      :alt="scope.row.policeAvatar"></el-image>
+                            <img class="big_image"
+                                 :src="scope.row.policeAvatar"/>
+                        </el-popover>
+                    </template>
+                </el-table-column>
                 <el-table-column prop="policeTel" label="联系方式" header-align="center" align="center"></el-table-column>
                 <el-table-column prop="deptName" label="所属社区" header-align="center" align="center"></el-table-column>
                 <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
@@ -152,3 +171,9 @@
         }
     }
 </script>
+<style scoped>
+    .big_image {
+        width: 300px;
+        height: 300px;
+    }
+</style>