修改个人生平

src/api/common.js

@@ -8,3 +8,12 @@ export function uploadFile(data) {
     data: data
   })
 }
+
+// 获取二维码
+export function getQrcode(param) {
+  return request({
+    url: '/common/qrcode',
+    method: 'get',
+    params: param
+  })
+}

src/api/common/common.js

@@ -8,3 +8,12 @@ export function uploadFile(data) {
       data: data
     })
   }
+
+// 获取二维码
+export function getQrcode(param) {
+  return request({
+    url: '/common/qrcode',
+    method: 'get',
+    params: param
+  })
+}

src/components/Editor/index.vue

@@ -3,17 +3,29 @@
 
     <div class="editor" ref="editor" :style="styles" @change="onEditorChange($event)"></div>
     <!-- 图片上传组件辅助-->
-    <el-upload v-show="false"
+    <el-upload v-show="false" 
+      ref="uploadImg"
       class="avatar-uploader"
-      :action="uploadFile()"
+      :action="imgUploadUrl"
       name="img"
       :headers="header"
+      :data="imgData"
       :show-file-list="false"
       :on-success="uploadSuccess"
       :on-error="uploadError"
       :before-upload="beforeUpload">
     </el-upload>
-
+    <el-upload v-show="false" 
+      ref="uploadVideo"
+      class="video-uploader"
+      :action="serverUrl"
+      :headers="header"
+      :data="videoData"
+      :show-file-list="false"
+      :before-upload="beforeVideoUpload"
+      :on-success="uploadVideoSuccess"
+      :on-error="uploadVideoError">
+      </el-upload>
   </div>
 </template>
 
@@ -44,6 +56,11 @@ export default {
       type: Number,
       default: null,
     },
+    //参数
+    params: {
+      type: Object,
+      default: null,
+    }
   },
   data() {
     return {
@@ -51,9 +68,16 @@ export default {
       currentValue: "",
       content: null,
       serverUrl: process.env.VUE_APP_BASE_API+'/common/upload',
+      imgUploadUrl: process.env.VUE_APP_BASE_API+'/common/uploadImg',
       header:{
         'Authorization': 'Bearer ' + getToken()
       },
+      videoData:{
+        modName: this.params.modName+'video'
+      },
+      imgData:{
+        modName: this.params.modName+'img'
+      },
       options: {
         theme: "snow",
         bounds: document.body,
@@ -72,7 +96,7 @@ export default {
               [{ color: [] }, { background: [] }],             // 字体颜色、字体背景颜色
               [{ align: [] }],                                 // 对齐方式
               ["clean"],                                       // 清除文本格式
-              ["link", "image"],                       // 链接、图片、视频
+              ["link", "image", "video"],                       // 链接、图片、视频
               // [{clean: '源码编辑'}]
             ],
             handlers: {
@@ -105,6 +129,14 @@ export default {
                 } else {
                   this.quill.format('image', false);
                 }
+              },
+              'video': function (value) {
+                if (value) {
+                  // 触发input框选择图片文件
+                  document.querySelector('.video-uploader input').click()
+                } else {
+                  this.quill.format('video', false);
+                }
               }
             }
           }
@@ -238,6 +270,38 @@ export default {
     // 富文本图片上传失败
     uploadError() {
       this.$message.error('图片插入失败')
+    },
+    //--------视频上传-----------
+    beforeVideoUpload(file){
+      const size = file.size / 1024 / 1024  < 20;
+      if (['video/MP4','video/mp4', 'video/ogg', 'video/webm', 'video/WebM'].indexOf(file.type) == -1) {
+          this.$message.error('视频仅支持 MP4,WebM,Ogg 格式');
+          return false;
+      }
+      if (!size) {
+          this.$message.error('上传视频大小不能超过 20MB');
+          return false;
+      }
+    },
+    uploadVideoSuccess(res, file){
+      // res为服务器返回的数据
+      // 获取富文本组件实例
+      console.log(res);
+      let quill = this.Quill;
+      // 如果上传成功
+      if (res.code == 200 ) {
+        // 获取光标所在位置
+        let length = quill.getSelection().index;
+        // 插入图片 res.url为服务器返回的图片地址
+        quill.insertEmbed(length, 'video',process.env.VUE_APP_BASE_API+res.fileName);
+        // 调整光标到最后
+        quill.setSelection(length + 1)
+      } else {
+        this.$message.error('视频插入失败')
+      }
+    },
+    uploadVideoError(){
+      this.$message.error('视频插入失败')
     }
   },
 };
@@ -260,9 +324,12 @@ export default {
   padding-right: 0px;
 }
 
-.ql-snow .ql-tooltip[data-mode="video"]::before {
-  content: "请输入视频地址:";
+.quill-video {
+  display: none;
 }
+/* .ql-snow .ql-tooltip[data-mode="video"]::before {
+  content: "请输入视频地址:";
+} */
 
 .ql-snow .ql-picker.ql-size .ql-picker-label::before,
 .ql-snow .ql-picker.ql-size .ql-picker-item::before {

src/router/index.js

@@ -130,6 +130,14 @@ export const constantRoutes = [{
     hidden: true
   },
   {
+    path: '/template/t/:id(\\d+)',
+    component: (resolve) => require(['@/views/template/t'], resolve),
+    meta: {
+      title: '个人页'
+    },
+    hidden: true
+  },
+  {
     path: '/personal',
     component: Layout,
     hidden: true,

src/views/system/appUser/index.vue

@@ -158,8 +158,13 @@
             <el-form-item label="手机" prop="mobile">
               <el-input v-model="form.mobile" placeholder="请输入手机号码" :readonly="readonly" />
             </el-form-item>
-            <el-form-item label="页面模板" prop="templateId">
-              <el-input v-model="form.templateId" placeholder="请选择页面模板" />
+            <el-form-item label="个人生平" prop="qrcodeImg">
+              <el-image 
+                style="width: 36px; height: 36px"
+                :src="codeImg" 
+                @load="getQrcodeImg"
+                :preview-src-list="[codeUrl]">
+              </el-image>
             </el-form-item>
           </el-col>
 
@@ -242,6 +247,8 @@ import { listUser,pageUser, getUser, delUser, addUser, updateUser, exportUser }
 import appUserAvatar from "./detail/appUserAvatar";
 import { listFriends } from "@/api/system/friends";
 import { listFamilyByUid } from "@/api/system/family";
+import qrcodeImg from '@/assets/image/qrcode_img.jpg'
+import { getQrcode } from "@/api/common";
 
 export default {
   name: "AppUser",
@@ -304,6 +311,10 @@ export default {
         pageSize: 10,
         userId: null,
       },
+      // 固定个人模板页
+      templateRoute: "/template/t",
+      codeImg: qrcodeImg,
+      codeUrl: "",
       reFresh: 1,
       // 表单参数
       form: {},
@@ -410,6 +421,7 @@ export default {
       this.reset();
       this.open = true;
       this.title = "添加会员";
+      this.codeUrl = "";
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
@@ -421,6 +433,7 @@ export default {
         this.open = true;
         this.title = "修改会员";
       });
+      this.getQrcodeImg(row);
     },
     /** 提交按钮 */
     submitForm() {
@@ -475,6 +488,14 @@ export default {
         }).catch(function() {});
     }
     ,
+    getQrcodeImg(row) {
+      const uid = row.id;
+      const url = window.location.origin + this.templateRoute+'/' + uid + '?type=profile'
+      const param = {url:url}
+      getQrcode(param).then(res => {
+        this.codeUrl = "data:image/gif;base64," + res.img;
+      });
+    },
     myProfile(row) {
       this.$router.push({ 
         path:'/user/profiles',

src/views/system/personalPage/index.vue

@@ -66,23 +66,12 @@
     <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" width="100" />
-      <el-table-column label="干系人姓名" align="center" :show-overflow-tooltip="true" width="100" />
-      <el-table-column label="干系人生日" align="center" prop="stakeholderBirthday" width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.stakeholderBirthday, '{y}-{m}-{d}') }}</span>
-        </template>
-      </el-table-column>
+      <el-table-column label="干系人姓名" align="center" prop="stakeholder" width="100" />
       <el-table-column label="启用" align="center" width="60">
         <template slot-scope="scope">
           <el-switch v-model="scope.row.enable" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
         </template>
       </el-table-column>
-      <!-- <el-table-column label="修改人" align="center" prop="modifyBy" />
-      <el-table-column label="修改时间" align="center" prop="modifyTime" width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.modifyTime, '{y}-{m}-{d}') }}</span>
-        </template>
-      </el-table-column> -->
       <el-table-column label="备注" align="center" prop="remarks" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="250">
         <template slot-scope="scope">
@@ -107,20 +96,6 @@
             @click="handleMessage(scope.row)"
             v-hasPermi="['system:personal:message:list']"
           >留言</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-picture-outline"
-            @click="img(scope.row)"
-            v-hasPermi="['system:personal:page:add']"
-          >照片</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-video-camera"
-            @click="video(scope.row)"
-            v-hasPermi="['system:personal:page:add']"
-          >视频</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -134,24 +109,18 @@
     />
 
     <!-- 添加或修改个人页对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body :close-on-click-modal=false>
+    <el-dialog :title="title" v-if="open" :visible.sync="open" width="1000px" append-to-body :close-on-click-modal=false>
       <el-form ref="form" :model="form" :rules="rules" label-width="100px">
         <el-row :gutter="0" type="flex" justify="start">
           <el-col :span="8">
-            <el-form-item label="干系人姓名" prop="stakeholder">
-              <el-input v-model="form.stakeholder" placeholder="请输入干系人姓名" />
-            </el-form-item> 
-            <el-form-item label="姓名" prop="customer"> 
-              <el-input v-model="form.customer" placeholder="请输入客户姓名" />
-            </el-form-item>
             
-            <!-- <el-form-item label="姓名" prop="customerId">
+            <el-form-item label="客户姓名" prop="customerId">
               <el-select
                 v-model="form.customer"
                 filterable
                 remote
                 clearable
-                placeholder="请输入名字/手机号"
+                placeholder="请输入名字/手机号查询"
                 :remote-method="findCustomer"
                 @change="customerChange"
                 :loading="loadings">
@@ -162,32 +131,31 @@
                   :value="item.userId">
                 </el-option>
               </el-select>
-            </el-form-item> -->
-
-            <el-form-item label="启用" prop="enable">
-              <el-radio-group v-model="form.enable">
-                <el-radio
-                  v-for="dict in enableOptions"
-                  :key="dict.dictValue"
-                  :label="dict.dictValue"
-                >{{dict.dictLabel}}</el-radio>
-              </el-radio-group>
             </el-form-item>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item label="干系人生日" prop="stakeholderBirthday">
-              <el-date-picker clearable size="small" style="width: 200px"
-                v-model="form.stakeholderBirthday"
-                type="date"
-                value-format="yyyy-MM-dd"
-                placeholder="选择干系人生日">
-              </el-date-picker>
-            </el-form-item> 
-            <el-form-item label="模板" prop="templateId">
-              <el-select v-model="form.templateId" placeholder="请选择模板" >
-                <el-option v-for="item in templateList" :key="item.id" :label="item.title" :value="item.id"/>
+            <el-form-item label="干系人" prop="stakeholderId">
+              <el-select
+                v-model="form.stakeholder"
+                filterable
+                remote
+                clearable
+                placeholder="请输入名字/手机号查询"
+                :remote-method="findStakeholder"
+                @change="stakeholderChange"
+                :loading="loadings">
+                <el-option
+                  v-for="item in stakeholderOptions"
+                  :key="item.userId"
+                  :label="item.nickName"
+                  :value="item.userId">
+                </el-option>
               </el-select>
             </el-form-item>
+
+            <!-- <el-form-item label="干系人姓名" prop="stakeholder">
+              <el-input v-model="form.stakeholder" placeholder="请输入干系人姓名" />
+            </el-form-item>  -->
+          </el-col>
+          <el-col :span="8">
             <el-form-item label="二维码" prop="qrcode">
               <el-image 
                 style="width: 36px; height: 36px"
@@ -196,25 +164,24 @@
                 :preview-src-list="[codeUrl]">
               </el-image>
             </el-form-item>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item label-width="0px" prop="avatar">
-              <div class="text-center">
-                <personalAvatar :personal="form" :key="reFresh" />
-              </div>
+
+            <el-form-item label="启用" prop="enable">
+              <el-radio-group v-model="form.enable">
+                <el-radio
+                  v-for="dict in enableOptions"
+                  :key="dict.dictValue"
+                  :label="dict.dictValue"
+                >{{dict.dictLabel}}</el-radio>
+              </el-radio-group>
             </el-form-item>
           </el-col>
           </el-row>
 
-        <el-form-item label="备注" prop="remarks">
-          <el-input v-model="form.remarks" placeholder="请输入备注" />
-        </el-form-item>
         <el-form-item label="平生描述" prop="content">
-          <editor v-model="form.content" :min-height="292" ref="myEditor"/>
+          <editor v-model="form.content" :min-height="492" :params="editParams" ref="myEditor"/>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="viewPage">预 览</el-button>
         <el-button type="primary" @click="submitForm">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
       </div>
@@ -224,17 +191,14 @@
 
 <script>
 import { listPersonal, getPersonal, delPersonal, addPersonal, updatePersonal, exportPersonal,changeEnable,getQrcode } from "@/api/system/personalPage";
-import { listTemplate } from "@/api/system/templatePage";
 import { listUser } from "@/api/system/appUser";
 import Editor from '@/components/Editor';
-import personalAvatar from "./detail/personalAvatar";
 import qrcodeImg from '@/assets/image/qrcode_img.jpg'
 
 export default {
   name: "personalPage",
   components: {
     Editor,
-    personalAvatar
   },
   data() {
     return {
@@ -261,8 +225,8 @@ export default {
       open: false,
       // 是否启用数据字典
       enableOptions: [],
-      // 配偶
       customerOptions:[],
+      stakeholderOptions:[],
       // 查询参数
       customerParams: {
         enable: 0,
@@ -289,8 +253,12 @@ export default {
       templateParam:{
         enable: 0
       },
-      templateList: []
-
+      // 固定个人模板页
+      templateRoute: "/template/t",
+      templateList: [],
+      editParams: {
+        modName: '/personal/'
+      }
     };
   },
   watch:{
@@ -302,7 +270,6 @@ export default {
   },
   created() {
     this.getList();
-    this.getTemplateList();
     this.getDicts("sys_normal_disable").then((response) => {
       this.enableOptions = response.data;
     });
@@ -318,8 +285,31 @@ export default {
         });
       }
     },
+    findStakeholder(query){
+      if (query.length > 1) {
+        this.loadings = true;
+        this.customerParams.searchValue = query;
+        listUser(this.customerParams).then(response => {
+          this.loadings = false;
+          this.stakeholderOptions = response.data;
+        });
+      }
+    },
     customerChange(value){
       this.form.customerId = value;
+      let obj = {};
+      obj = this.customerOptions.find((item)=>{  
+         return item.userId === value;
+      });
+      this.form.customer = obj.nickName
+    },
+    stakeholderChange(value){
+      this.form.stakeholderId = value;
+      let obj = {};
+      obj = this.stakeholderOptions.find((item)=>{ 
+         return item.userId === value;
+      });
+      this.form.stakeholder = obj.nickName
     },
     /** 查询个人页列表 */
     getList() {
@@ -401,6 +391,7 @@ export default {
       this.reset();
       this.open = true;
       this.title = "添加个人页";
+      this.codeUrl = "";
     },
     /** 修改按钮操作 */
     handleUpdate(row) { 
@@ -467,8 +458,8 @@ export default {
     getQrcodeImg(row) {
       const pid = row.id;
       const tid = row.templateId;
-      const route = this.templateList.find(item => item.id === tid).route;
-      const url = window.location.origin + route+'/' + pid
+      // const route = this.templateList.find(item => item.id === tid).route;
+      const url = window.location.origin + this.templateRoute+'/' + pid + '?type=personal'
       const param = {url:url}
       getQrcode(param).then(res => {
         this.codeUrl = "data:image/gif;base64," + res.img;
@@ -478,16 +469,16 @@ export default {
       debugger
       const pid = this.form.id;
       const tid = this.form.templateId;
-      const route = this.templateList.find(item => item.id === tid).route;
-      console.log(window.location.origin + route+'/' + pid)
-      var win = window.open(window.location.origin + route+'/' + pid);
+      // const route = this.templateList.find(item => item.id === tid).route;
+      console.log(window.location.origin + this.templateRoute+'/' + pid)
+      var win = window.open(window.location.origin + this.templateRoute+'/' + pid + '?type=personal');
       win.document.title='个人页 - '+this.form.stakeholder
     },
     preview(row) {
       const pid = row.id;
       const tid = row.templateId;
-      const route = this.templateList.find(item => item.id === tid).route;
-      var win = window.open(window.location.origin + route+'/' + pid);
+      // const route = this.templateList.find(item => item.id === tid).route;
+      var win = window.open(window.location.origin + this.templateRoute+'/' + pid);
     },
     handleMessage(row) {
       this.$router.push({

src/views/system/personalPage/personalPage-bak.vue

@@ -0,0 +1,527 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="客户姓名" prop="customer">
+        <el-input
+          v-model="queryParams.customer"
+          placeholder="请输入客户姓名"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="干系人" prop="stakeholder">
+        <el-input
+          v-model="queryParams.stakeholder"
+          placeholder="请输入干系人姓名"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="是否启用" prop="enable">
+        <el-select v-model="queryParams.enable" placeholder="是否启用" clearable size="small" style="width: 240px">
+          <el-option v-for="dict in enableOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['system:personal:page:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['system:personal:page:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['system:personal:page:remove']"
+        >删除</el-button>
+      </el-col>
+	  <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <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" width="100" />
+      <el-table-column label="干系人姓名" align="center" :show-overflow-tooltip="true" width="100" />
+      <el-table-column label="干系人生日" align="center" prop="stakeholderBirthday" width="180">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.stakeholderBirthday, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="启用" align="center" width="60">
+        <template slot-scope="scope">
+          <el-switch v-model="scope.row.enable" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
+        </template>
+      </el-table-column>
+      <!-- <el-table-column label="修改人" align="center" prop="modifyBy" />
+      <el-table-column label="修改时间" align="center" prop="modifyTime" width="180">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.modifyTime, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column> -->
+      <el-table-column label="备注" align="center" prop="remarks" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="250">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-chat-line-square"
+            @click="preview(scope.row)"
+            v-hasPermi="['system:personal:message:query']"
+          >预览</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:personal:page:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-chat-line-square"
+            @click="handleMessage(scope.row)"
+            v-hasPermi="['system:personal:message:list']"
+          >留言</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-picture-outline"
+            @click="img(scope.row)"
+            v-hasPermi="['system:personal:page:add']"
+          >照片</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-video-camera"
+            @click="video(scope.row)"
+            v-hasPermi="['system:personal:page:add']"
+          >视频</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改个人页对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body :close-on-click-modal=false>
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+        <el-row :gutter="0" type="flex" justify="start">
+          <el-col :span="8">
+            <el-form-item label="干系人姓名" prop="stakeholder">
+              <el-input v-model="form.stakeholder" placeholder="请输入干系人姓名" />
+            </el-form-item> 
+            <el-form-item label="姓名" prop="customer"> 
+              <el-input v-model="form.customer" placeholder="请输入客户姓名" />
+            </el-form-item>
+            
+            <!-- <el-form-item label="姓名" prop="customerId">
+              <el-select
+                v-model="form.customer"
+                filterable
+                remote
+                clearable
+                placeholder="请输入名字/手机号"
+                :remote-method="findCustomer"
+                @change="customerChange"
+                :loading="loadings">
+                <el-option
+                  v-for="item in customerOptions"
+                  :key="item.userId"
+                  :label="item.nickName"
+                  :value="item.userId">
+                </el-option>
+              </el-select>
+            </el-form-item> -->
+
+            <el-form-item label="启用" prop="enable">
+              <el-radio-group v-model="form.enable">
+                <el-radio
+                  v-for="dict in enableOptions"
+                  :key="dict.dictValue"
+                  :label="dict.dictValue"
+                >{{dict.dictLabel}}</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="干系人生日" prop="stakeholderBirthday">
+              <el-date-picker clearable size="small" style="width: 200px"
+                v-model="form.stakeholderBirthday"
+                type="date"
+                value-format="yyyy-MM-dd"
+                placeholder="选择干系人生日">
+              </el-date-picker>
+            </el-form-item> 
+            <el-form-item label="模板" prop="templateId">
+              <el-select v-model="form.templateId" placeholder="请选择模板" >
+                <el-option v-for="item in templateList" :key="item.id" :label="item.title" :value="item.id"/>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="二维码" prop="qrcode">
+              <el-image 
+                style="width: 36px; height: 36px"
+                :src="codeImg" 
+                @load="getQrcodeImg"
+                :preview-src-list="[codeUrl]">
+              </el-image>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label-width="0px" prop="avatar">
+              <div class="text-center">
+                <personalAvatar :personal="form" :key="reFresh" />
+              </div>
+            </el-form-item>
+          </el-col>
+          </el-row>
+
+        <el-form-item label="备注" prop="remarks">
+          <el-input v-model="form.remarks" placeholder="请输入备注" />
+        </el-form-item>
+        <el-form-item label="平生描述" prop="content">
+          <editor v-model="form.content" :min-height="292" ref="myEditor"/>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="viewPage">预 览</el-button>
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listPersonal, getPersonal, delPersonal, addPersonal, updatePersonal, exportPersonal,changeEnable,getQrcode } from "@/api/system/personalPage";
+import { listTemplate } from "@/api/system/templatePage";
+import { listUser } from "@/api/system/appUser";
+import Editor from '@/components/Editor';
+import personalAvatar from "./detail/personalAvatar";
+import qrcodeImg from '@/assets/image/qrcode_img.jpg'
+
+export default {
+  name: "personalPage",
+  components: {
+    Editor,
+    personalAvatar
+  },
+  data() {
+    return {
+      codeImg: qrcodeImg,
+      codeUrl: "",
+      // 遮罩层
+      loading: true,
+      loadings: false,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 个人页表格数据
+      pageList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 是否启用数据字典
+      enableOptions: [],
+      // 配偶
+      customerOptions:[],
+      // 查询参数
+      customerParams: {
+        enable: 0,
+        searchValue: null,
+      },
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        customer: null,
+        stakeholder: null,
+        stakeholderBirthday: null,
+        enable: null,
+        modifyBy: null,
+        modifyTime: null,
+        remarks: null
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {},
+      reFresh: 1,
+
+      templateParam:{
+        enable: 0
+      },
+      templateList: []
+
+    };
+  },
+  watch:{
+    // 监听form值，只要有改变，则key值reFresh变更。
+    // 然后自定义上传图片组件personalAvatar重新渲染
+    form(){
+      ++this.reFresh
+    }
+  },
+  created() {
+    this.getList();
+    this.getTemplateList();
+    this.getDicts("sys_normal_disable").then((response) => {
+      this.enableOptions = response.data;
+    });
+  },
+  methods: {
+    findCustomer(query){
+      if (query.length > 1) {
+        this.loadings = true;
+        this.customerParams.searchValue = query;
+        listUser(this.customerParams).then(response => {
+          this.loadings = false;
+          this.customerOptions = response.data;
+        });
+      }
+    },
+    customerChange(value){
+      this.form.customerId = value;
+    },
+    /** 查询个人页列表 */
+    getList() {
+      this.loading = true;
+      listPersonal(this.queryParams).then(response => {
+        this.pageList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    getTemplateList(){
+      listTemplate(this.templateParam).then(response => {
+        this.templateList = response.rows;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        customer: null,
+        avatar : null,
+        stakeholder: null,
+        stakeholderBirthday: null,
+        enable: null,
+        createBy: null,
+        createTime: null,
+        modifyBy: null,
+        modifyTime: null,
+        remarks: null,
+        customerOptions: null
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    // 用户状态修改
+    handleStatusChange(row) {
+      let text = row.enable === "0" ? "启用" : "停用";
+      this.$confirm(
+        '确认要 ' + text + ' 吗?',
+        "警告",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }
+      )
+        .then(function () {
+          return changeEnable(row.id, row.enable);
+        })
+        .then(() => {
+          this.msgSuccess(text + "成功");
+        })
+        .catch(function () {
+          row.enable = row.enable === "0" ? "1" : "0";
+        });
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加个人页";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) { 
+      this.reset();
+      const id = row.id || this.ids
+      getPersonal(id).then(response => { 
+        this.form = response.data;
+        this.getQrcodeImg(row);
+        this.open = true;
+        this.title = "修改个人页";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.id != null) {
+            updatePersonal(this.form).then(response => {
+              if (response.code === 200) {
+                this.msgSuccess("修改成功");
+                this.open = false;
+                this.getList();
+              }
+            });
+          } else {
+            addPersonal(this.form).then(response => {
+              if (response.code === 200) {
+                this.msgSuccess("新增成功");
+                this.open = false;
+                this.getList();
+              }
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$confirm('是否确认删除个人页编号为"' + ids + '"的数据项?', "警告", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(function() {
+          return delPersonal(ids);
+        }).then(() => {
+          this.getList();
+          this.msgSuccess("删除成功");
+        }).catch(function() {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      const queryParams = this.queryParams;
+      this.$confirm('是否确认导出所有个人页数据项?', "警告", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(function() {
+          return exportPersonal(queryParams);
+        }).then(response => {
+          this.download(response.msg);
+        }).catch(function() {});
+    },
+    getQrcodeImg(row) {
+      const pid = row.id;
+      const tid = row.templateId;
+      const route = this.templateList.find(item => item.id === tid).route;
+      const url = window.location.origin + route+'/' + pid
+      const param = {url:url}
+      getQrcode(param).then(res => {
+        this.codeUrl = "data:image/gif;base64," + res.img;
+      });
+    },
+    viewPage(){
+      debugger
+      const pid = this.form.id;
+      const tid = this.form.templateId;
+      const route = this.templateList.find(item => item.id === tid).route;
+      console.log(window.location.origin + route+'/' + pid)
+      var win = window.open(window.location.origin + route+'/' + pid);
+      win.document.title='个人页 - '+this.form.stakeholder
+    },
+    preview(row) {
+      const pid = row.id;
+      const tid = row.templateId;
+      const route = this.templateList.find(item => item.id === tid).route;
+      var win = window.open(window.location.origin + route+'/' + pid);
+    },
+    handleMessage(row) {
+      this.$router.push({
+        path: "/personal/message",
+        query: {
+          mid: row.id
+        }
+      });
+    },
+    img(row) {
+      this.$router.push({
+        path: "/personal/pic",
+        query: {
+          pid: row.id
+        }
+      });
+    },
+    video(row) {
+      this.$router.push({
+        path: "/personal/video",
+        query: {
+          pid: row.id
+        }
+      });
+    },
+  }
+};
+</script>
+
+<style>
+/* .el-dialog__body {
+  padding: 10px 20px;
+} */
+/* .el-form-item {
+  margin-bottom: 8px;
+} */
+</style>

src/views/template/t2.vue → src/views/template/t.vue

@@ -4,17 +4,14 @@
 
     <el-form>
       
-      <el-col :style="{ padding: '0px 0px 10px' }" style="display:flex;justify-content:center;">
+      <el-col :style="{ padding: '0px 0px 5px' }" style="display:flex;justify-content:center;">
         <el-card :body-style="{ padding: '10px' }" shadow="always" style="width: 90%;">
-          <div slot="header" class="clearfix">
-            <span>事迹</span>
-          </div>
-          <div v-html="personal.content"></div>
+          <div v-html="content"></div>
         </el-card>
       </el-col>
 
-      <el-col :style="{ padding: '10px 0px 10px' }" style="display:flex;justify-content:center;">
-        <el-card :body-style="{ padding: '10px' }" shadow="always" style="width: 90%;">
+      <el-col :style="{ padding: '5px 0px 5px' }" style="display:flex;justify-content:center;">
+        <el-card :body-style="{ padding: '5px' }" shadow="always" style="width: 90%;">
           <el-table v-loading="loading" :data="messageOptions">
             <el-table-column label="TA的留念" prop="name" width="80" />
             <el-table-column prop="contents" />
@@ -94,6 +91,8 @@ export default {
       direction: 'btt',
       baseUrl: process.env.VUE_APP_BASE_API,
       pid: 0,
+      type: null,
+      content: null,
       personal: {},
       personalImg: {
         personalId: null,
@@ -121,18 +120,28 @@ export default {
     };
   },
   created() {
+    this.type = this.$route.query && this.$route.query.type;
     this.pid = this.$route.params && this.$route.params.id;
     this.personalImg.personalId = this.pid;
-    this.getContent(this.pid);
-    this.getImgs(this.pid);
+
+    if(this.type == 'personal'){
+      this.getContent(this.pid);
+    }else {
+      this.getProfileContent(this.pid);
+    }
+    // 留言
     this.getModels(this.messageForm.type);
     this.getMessageList();
     this.messageForm.type = 1;
   },
   methods: {
+    getProfileContent(id){
+      this.content = ""
+    },
     getContent(id) {
       getPersonal(id).then((response) => {
         this.personal = response.data;
+        this.content = this.personal.content;
       });
     },
     getImgs(id) {