完成个人生平页面功能，实现模板一

src/api/common/template.js

@@ -24,4 +24,39 @@ export function getPersonal(id) {
       method: 'get'
     })
   }
-  
+  
+// 查询个人页 留言模板列表
+export function allPersonalModel(query) {
+  return request({
+    headers:  {
+      'isToken': false,
+    },
+    url: '/template/allModel',
+    method: 'get',
+    params: query
+  })
+}
+
+// 新增个人页留言
+export function addMessage(data) {
+  return request({
+    headers:  {
+      'isToken': false,
+    },
+    url: '/template/addMessage',
+    method: 'post',
+    data: data
+  })
+}
+
+// 查询留言列表
+export function messageList(query) {
+  return request({
+    headers:  {
+      'isToken': false,
+    },
+    url: '/template/messageList',
+    method: 'get',
+    params: query
+  })
+}

src/views/system/personalMessage/index.vue

@@ -9,6 +9,15 @@
             <el-option v-for="dict in typeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"></el-option>
         </el-select>
       </el-form-item>
+      <el-form-item label="留言人" prop="name">
+        <el-input
+          v-model="queryParams.contents"
+          placeholder="请输入留言人名称"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
       <el-form-item label="留言内容" prop="contents">
         <el-input
           v-model="queryParams.contents"
@@ -42,6 +51,7 @@
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="主键id" align="center" prop="id" v-if="false"/>
       <el-table-column label="类型" align="center" prop="type" :formatter="typeFormat" width="50" />
+      <el-table-column label="留言人" align="center" prop="name" width="100" />
       <el-table-column label="留言内容" align="center" prop="contents" width="500" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
@@ -72,6 +82,9 @@
               <el-option v-for="dict in typeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"></el-option>
           </el-select>
         </el-form-item>
+        <el-form-item label="留言人" prop="name">
+          <el-input v-model="form.name" placeholder="请输入留言人" />
+        </el-form-item>
         <el-form-item label="留言内容" prop="contents">
           <el-input type="textarea" rows="3" v-model="form.contents" placeholder="请输入留言内容" />
         </el-form-item>
@@ -118,6 +131,7 @@ export default {
         pageNum: 1,
         pageSize: 10,
         personalId: null,
+        name: null,
         type: null,
         contents: null,
         model: null,
@@ -171,6 +185,7 @@ export default {
       this.form = {
         id: null,
         personalId: null,
+        name: null,
         type: null,
         contents: null,
         model: null,

src/views/template/t1.vue

@@ -1,35 +1,30 @@
 <template>
   <div>
+    <div class="add-message" @click="handleOpen"> + </div>
+
     <el-form>
-      <el-col :style="{ padding: '0px 0px 10px' }" style="display:flex;justify-content:center;">
+      <el-col :style="{ padding: '1px 0px 10px' }" 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>
-          <img :src="personal.avatar" />
+          <img :src="baseUrl+personal.avatar" height="100" width="100" />
           <div>{{personal.stakeholder}}</div>
-          <div>{{personal.stakeholderBirthday}}</div>
+          <div>诞辰：{{personal.stakeholderBirthday}}</div>
         </el-card>
       </el-col>
-    </el-form>
-
-    <el-form>
+      
       <el-col :style="{ padding: '0px 0px 10px' }" style="display:flex;justify-content:center;">
         <el-card :body-style="{ padding: '10px' }" shadow="always" style="width: 90%;">
           <div slot="header" class="clearfix">
-            <span>平生描述</span>
+            <span>事迹</span>
           </div>
           <div v-html="personal.content"></div>
         </el-card>
       </el-col>
-    </el-form>
 
     <div style="width: 100%;display:flex;justify-content:center;">
       <el-card :body-style="{ padding: '0px' }" shadow="always" style="width: 90%;">
         <div slot="header" class="clearfix">
-          <span>干系人照片</span>
+          <span>时光流影</span>
         </div>
-        <el-form>
           <el-col
             :span="5"
             v-for="item in picList"
@@ -46,25 +41,110 @@
               ></el-image>
             </el-card>
           </el-col>
-        </el-form>
       </el-card>
     </div>
+
+      <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-table v-loading="loading" :data="messageOptions">
+            <el-table-column label="TA的留念" prop="name" width="80" />
+            <el-table-column prop="contents" />
+          </el-table>
+          <br />
+          <el-pagination small layout="prev, pager, next"
+            v-show="total>0"
+            :page-size="queryParams.pageSize"
+            :current-page="queryParams.pageNum"
+            :total="total"
+          />
+      </el-card>
+      </el-col>
+  </el-form>
+
+    <el-drawer
+      :size="'70%'"
+      :wrapperClosable="false"
+      :close-on-press-escape="false"
+      :destroy-on-close="true"
+      :visible.sync="drawer"
+      :direction="direction"
+      :before-close="handleClose">
+
+      <div class="drawer__content">
+
+        <el-form ref="messageForm" :model="messageForm" :rules="rules">
+          <el-form-item label="姓名" prop="name" :label-width="'80px'">
+            <el-col :span="20">
+            <el-input v-model="messageForm.name" placeholder="请输入您的姓名" />
+            </el-col>
+          </el-form-item>
+          <el-form-item :label-width="'80px'">
+            <el-radio-group v-model="messageForm.type">
+              <el-radio :label="1">留言语</el-radio>
+              <el-radio :label="2">留念语</el-radio>
+              <el-radio :label="3">缅怀语</el-radio>
+            </el-radio-group>
+          </el-form-item>
+
+          <el-form-item :label-width="'10px'">
+            
+          <div class="box-card">
+            <el-table v-loading="loading" 
+              height="250"
+              :border="true"
+              :data="modelOptions" 
+              highlight-current-row 
+              @current-change="handleCurrentChange">
+              <el-table-column label="选择留言" prop="contents"> </el-table-column>
+            </el-table>
+          </div>
+
+          </el-form-item>
+        </el-form>
+        <div class="drawer__footer">
+          <el-button type="primary" @click="addMessages" :loading="loading">留言</el-button>
+        </div>
+      </div>
+
+    </el-drawer>
+
   </div>
 </template>
 
 <script>
-import { allPersonalImg, getPersonal } from "@/api/common/template";
+import { allPersonalImg, getPersonal,allPersonalModel,addMessage,messageList } from "@/api/common/template";
 import { setToken } from "@/utils/auth";
 
 export default {
   data() {
     return {
+      drawer: false,
+      loading: false,
+      direction: 'btt',
+      baseUrl: process.env.VUE_APP_BASE_API,
       pid: 0,
       personal: {},
       personalImg: {
         personalId: null,
       },
+      messageOptions: [],
+      modelOptions: [],
       picList: [],
+      messageForm:{},
+      // 总条数
+      total: 0,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        personalId: null
+      },
+      // 表单校验
+      rules: {
+        name: [
+          { required: true, message: "请输入姓名", trigger: "blur" },
+        ],
+      }
     };
   },
   created() {
@@ -72,12 +152,13 @@ export default {
     this.personalImg.personalId = this.pid;
     this.getContent(this.pid);
     this.getImgs(this.pid);
+    this.getModels();
+    this.getMessageList();
   },
   methods: {
     getContent(id) {
       getPersonal(id).then((response) => {
         this.personal = response.data;
-        console.log(this.personal);
       });
     },
     getImgs(id) {
@@ -94,6 +175,42 @@ export default {
         }
       });
     },
+    getModels(){
+      allPersonalModel().then((res) => {
+        this.modelOptions = res.data;
+      });
+    },
+    handleCurrentChange(row){
+      this.messageForm.contents = row.contents;
+    },
+    getMessageList(){
+      this.loading = true;
+      this.queryParams.personalId = this.personalImg.personalId;
+      messageList(this.queryParams).then(response => {
+        this.messageOptions = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    addMessages(){
+      this.loading = true;
+      this.messageForm.personalId = this.personalImg.personalId;
+      addMessage(this.messageForm).then(response => {
+        if (response.code === 200) {
+          this.msgSuccess("留言成功");
+          this.loading = false;
+          this.drawer = false;
+          this.getMessageList();
+        }
+      });
+      this.loading = false;
+    },
+    handleOpen (){
+      this.drawer = true;
+    },
+    handleClose (){
+      this.drawer = false;
+    }
   },
 };
 </script>
@@ -107,4 +224,47 @@ export default {
 .clearfix:after {
   clear: both;
 }
+
+.add-message {
+  position: fixed;
+  background-color: #1890ff;
+  width: 40px;
+  height: 40px;
+  right: 40px; 
+  bottom: 40px;
+  border-radius: 50%;
+  color: #fff;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  font-size: 20px;
+  -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
+  cursor: pointer;
+  z-index: 5;
+}
+.drawer__content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+.drawer__footer {
+  text-align:center
+}
+.el-drawer__header {
+    margin-bottom: 8px;
+    padding: 10 5 10;
+}
+.box-card {
+  height: 250px;
+  width: 95%;
+  overflow:auto;
+  background:#fff;
+}
 </style>