|
|
@@ -0,0 +1,255 @@
|
|
|
+<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-card :body-style="{ padding: '10px' }" shadow="always" style="width: 90%;">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>事迹</span>
|
|
|
+ </div>
|
|
|
+ <div v-html="personal.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-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"
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ />
|
|
|
+ </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 size="small" v-model="messageForm.type" @change="tepyChange">
|
|
|
+ <el-radio-button :label="1">留言语</el-radio-button>
|
|
|
+ <el-radio-button :label="2">留念语</el-radio-button>
|
|
|
+ <el-radio-button :label="3">缅怀语</el-radio-button>
|
|
|
+ </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="modelCurrentChange">
|
|
|
+ <el-table-column label="选择留言" prop="contents" />
|
|
|
+ </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,allPersonalModel,getPersonalModel,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:{
|
|
|
+ type: 1, //设置默认
|
|
|
+ },
|
|
|
+ // 总条数
|
|
|
+ total: 0,
|
|
|
+ // 查询参数
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ personalId: null
|
|
|
+ },
|
|
|
+ // 表单校验
|
|
|
+ rules: {
|
|
|
+ name: [
|
|
|
+ { required: true, message: "请输入姓名", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.pid = this.$route.params && this.$route.params.id;
|
|
|
+ this.personalImg.personalId = this.pid;
|
|
|
+ this.getContent(this.pid);
|
|
|
+ this.getImgs(this.pid);
|
|
|
+ this.getModels(this.messageForm.type);
|
|
|
+ this.getMessageList();
|
|
|
+ this.messageForm.type = 1;
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getContent(id) {
|
|
|
+ getPersonal(id).then((response) => {
|
|
|
+ this.personal = response.data;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getImgs(id) {
|
|
|
+ allPersonalImg(this.personalImg).then((res) => {
|
|
|
+ if (res.code !== 200) {
|
|
|
+ this.$message.error("获取照片列表失败");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var apiUrl = process.env.VUE_APP_BASE_API;
|
|
|
+ var items = res.data;
|
|
|
+ for (const i in items) {
|
|
|
+ var url = apiUrl + items[i].url;
|
|
|
+ this.picList.push({ key: items[i].id, value: url });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getModels(type){
|
|
|
+ getPersonalModel(type).then((res) => {
|
|
|
+ this.modelOptions = res.data;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ modelCurrentChange(row){
|
|
|
+ this.messageForm.contents = row.contents;
|
|
|
+ },
|
|
|
+ handleSizeChange: function(size) {
|
|
|
+ this.queryParams.pageSize = size
|
|
|
+ this.getMessageList();
|
|
|
+ },
|
|
|
+ handleCurrentChange: function(currentPage) {
|
|
|
+ this.queryParams.pageNum = currentPage
|
|
|
+ this.getMessageList();
|
|
|
+ },
|
|
|
+ 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;
|
|
|
+ },
|
|
|
+ tepyChange(label){
|
|
|
+ this.getModels(label);
|
|
|
+ }
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+.clearfix:before,
|
|
|
+.clearfix:after {
|
|
|
+ display: table;
|
|
|
+ content: "";
|
|
|
+}
|
|
|
+.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>
|
Alex