add personalImg

src/api/system/personalImg.js

@@ -0,0 +1,71 @@
+import request from '@/utils/request'
+
+// 查询个人页 图片列表
+export function listPersonalImg(query) {
+  return request({
+    url: '/system/personalImg/list',
+    method: 'get',
+    params: query
+  })
+}
+// 查询个人页 图片列表
+export function allPersonalImg(query) {
+  return request({
+    url: '/system/personalImg/all',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询个人页 图片详细
+export function getPersonalImg(id) {
+  return request({
+    url: '/system/personalImg/' + id,
+    method: 'get'
+  })
+}
+
+// 新增个人页 图片
+export function addPersonalImg(data) {
+  return request({
+    url: '/system/personalImg',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改个人页 图片
+export function updatePersonalImg(data) {
+  return request({
+    url: '/system/personalImg',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除个人页 图片
+export function delPersonalImg(id) {
+  return request({
+    url: '/system/personalImg/' + id,
+    method: 'delete'
+  })
+}
+
+// 导出个人页 图片
+export function exportPersonalImg(query) {
+  return request({
+    url: '/system/personalImg/export',
+    method: 'get',
+    params: query
+  })
+}
+
+
+// 上传图片 
+export function uploadFile(data) {
+  return request({
+    url: '/system/personalImg/upload',
+    method: 'post',
+    data: data
+  })
+}

src/router/index.js

@@ -93,6 +93,19 @@ export const constantRoutes = [
     ]
   },
   {
+    path: '/personal',
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: 'detail/pic/:id(\\d+)',
+        component: (resolve) => require(['@/views/system/personalPage/detail/pic'], resolve),
+        name: 'PersonalImg',
+        meta: { title: '个人照片', icon: '' }
+      }
+    ]
+  },
+  {
     path: '/job',
     component: Layout,
     hidden: true,

src/views/system/personalPage/detail/pic.vue

@@ -0,0 +1,118 @@
+<template>
+    <div style="margin:10px;">
+      <el-form>
+        <el-form-item label-width="0px" prop="picture" style="width: 100%;">
+            <el-upload ref="upload"
+                action="#"
+                list-type="picture-card"
+                :on-preview="handlePictureCardPreview"
+                :on-remove="handleRemove"
+                :http-request="uploadAvatar"
+                :before-upload="beforeAvatarUpload"
+                :file-list="fileList"
+            >
+                <i class="el-icon-plus"></i>
+            </el-upload>
+            <el-dialog :visible.sync="dialogVisible">
+                <img width="100%" :src="dialogImageUrl" alt="">
+            </el-dialog>
+        </el-form-item>
+      </el-form>
+    </div>
+</template>
+
+<script>
+
+import { uploadFile,allPersonalImg } from "@/api/system/personalImg";
+
+export default {
+  name: "PersonalImg",
+  data() {
+    return {
+        dialogImageUrl: '',
+        dialogVisible: false,
+        picList: [],
+        fileList: [],
+        personalImg: {
+            personalId: null,
+            url: null
+        }
+    };
+  },
+  created() {
+      debugger
+    const pid = this.$route.params && this.$route.params.id;
+    this.personalImg.personalId = pid;
+    this.getList(pid);
+  },
+  methods: {
+    getList(pid){
+      debugger
+        allPersonalImg(this.personalImg).then(res => {
+            // this.picList.push({ key: res.id, value: res.url })
+        })
+    },
+    uploadAvatar(item) { 
+      debugger
+        const formData = new FormData()
+        formData.append('file', item.file)
+        formData.append('item', this.personalImg)
+        const uid = item.file.uid
+        uploadFile(formData).then(res => {
+            this.picList.push({ key: uid, value: res.url })
+        }).catch(() => {
+            this.$message.error('上传失败，请重新上传')
+            this.emptyUpload()
+        })
+    },
+    beforeAvatarUpload(file) { 
+        const isJPG = file.type === 'image/jpeg';
+        const isPng = file.type === 'image/png';
+        const isLt2M = file.size / 1024 / 1024 < 2;
+
+        if (!isJPG && !isPng) {
+            this.$message.error('上传图片只能是 JPG或png 格式!')
+        }
+        if (!isLt2M) {
+            this.$message.error('上传图片大小不能超过 2MB!')
+        }
+        return (isJPG || isPng) && isLt2M
+    },
+    handleRemove(file, fileList) {
+        for (const i in this.picList) {
+        if (this.picList[i].key === file.uid) {
+            this.picList.splice(i, 1)
+        }
+        }
+    },
+    handlePictureCardPreview(file) {
+        this.dialogImageUrl = file.url
+        this.dialogVisible = true
+    },
+    /**
+     * 清空上传组件
+     */
+    emptyUpload() {
+        const mainImg = this.$refs.upload
+        if (mainImg) {
+            if (mainImg.length) {
+                mainImg.forEach(item => {
+                item.clearFiles()
+                })
+            } else {
+                this.$refs.upload.clearFiles()
+            }
+        }
+    }
+  }
+}
+</script>
+
+
+<style>
+ .el-upload-list--picture-card .el-upload-list__item {
+     height: auto;
+     width: 20%;
+     vertical-align: middle;
+ }
+</style>

src/views/system/personalPage/index.vue

@@ -75,7 +75,17 @@
     <el-table v-loading="loading" :data="pageList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="客户姓名" align="center" prop="customer" />
-      <el-table-column label="干系人姓名" align="center" prop="stakeholder" />
+
+      <!-- <el-table-column label="干系人姓名" align="center" prop="stakeholder" /> -->
+      <el-table-column label="干系人姓名" align="center" :show-overflow-tooltip="true">
+        <template slot-scope="scope">
+          <router-link :to="'/personal/detail/pic/' + scope.row.id" class="link-type">
+            <span>{{ scope.row.stakeholder }}</span>
+          </router-link>
+        </template>
+      </el-table-column>
+
+
       <el-table-column label="干系人生日" align="center" prop="stakeholderBirthday" width="180">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.stakeholderBirthday, '{y}-{m}-{d}') }}</span>