生成个人生平页面url 二维码

src/api/system/personalPage.js

@@ -71,4 +71,13 @@ export function uploadAvatar(data) {
     method: 'post',
     data: data
   })
+}
+
+// 获取二维码
+export function getQrcode(param) {
+  return request({
+    url: '/system/personal/page/qrcode',
+    method: 'get',
+    params: param
+  })
 }

src/views/system/personalMessage/index.vue

@@ -27,25 +27,6 @@
     <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:message: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:message:edit']"
-        >修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
           type="danger"
           icon="el-icon-delete"
           size="mini"
@@ -60,22 +41,13 @@
     <el-table v-loading="loading" :data="messageList" @selection-change="handleSelectionChange">
       <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" />
       <el-table-column label="类型" align="center" prop="type" :formatter="typeFormat" width="50" />
-      <el-table-column label="留言内容" align="center" prop="contents" />
-      <el-table-column label="备注" align="center" prop="remark" />
+      <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">
           <el-button
             size="mini"
             type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['system:message:edit']"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
             v-hasPermi="['system:message:remove']"
@@ -100,11 +72,8 @@
               <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="model">
-          <el-input v-model="form.model" placeholder="请输入内容模板" />
-        </el-form-item>
         <el-form-item label="留言内容" prop="contents">
-          <el-input v-model="form.contents" placeholder="请输入留言内容" />
+          <el-input type="textarea" rows="3" v-model="form.contents" placeholder="请输入留言内容" />
         </el-form-item>
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />

src/views/system/personalModel/index.vue

@@ -71,7 +71,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="contents" />
-      <el-table-column label="是否启用 Y是 N否" align="center" prop="enable" />
+      <el-table-column label="启用" align="center" prop="enable" :formatter="enableFormat" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button
@@ -104,10 +104,12 @@
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="留念内容" prop="contents">
-          <el-input v-model="form.contents" placeholder="请输入留念内容" />
+          <el-input type="textarea" :rows="3" v-model="form.contents" placeholder="请输入留念内容" />
         </el-form-item>
-        <el-form-item label="是否启用 Y是 N否" prop="enable">
-          <el-input v-model="form.enable" placeholder="请输入是否启用 Y是 N否" />
+        <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-form>
       <div slot="footer" class="dialog-footer">
@@ -150,6 +152,7 @@ export default {
         contents: null,
         enable: null
       },
+      enableOptions: [],
       // 表单参数
       form: {},
       // 表单校验
@@ -159,6 +162,9 @@ export default {
   },
   created() {
     this.getList();
+    this.getDicts('common_state').then(response => {
+      this.enableOptions = response.data;
+    });
   },
   methods: {
     /** 查询个人页留言模板列表 */
@@ -170,6 +176,10 @@ export default {
         this.loading = false;
       });
     },
+    // 启用 字典翻译
+    enableFormat(row, column) {
+      return this.selectDictLabel(this.enableOptions, row.enable);
+    },
     // 取消按钮
     cancel() {
       this.open = false;

src/views/system/personalPage/index.vue

@@ -60,15 +60,6 @@
           v-hasPermi="['system:personalPage:remove']"
         >删除</el-button>
       </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['system:personalPage:export']"
-        >导出</el-button>
-      </el-col>
 	  <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
@@ -109,22 +100,29 @@
             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-chat-line-square"
             @click="handleMessage(scope.row)"
             v-hasPermi="['system:personal:message:list']"
-          >留言记录</el-button>
+          >留言</el-button>
           <el-button
             size="mini"
             type="text"
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
-            v-hasPermi="['system:personalPage:edit']"
+            v-hasPermi="['system:personal:page:edit']"
           >修改</el-button>
           <el-button
             size="mini"
             type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
-            v-hasPermi="['system:personalPage:remove']"
+            v-hasPermi="['system:personal:page:remove']"
           >删除</el-button>
         </template>
       </el-table-column>
@@ -173,6 +171,14 @@
                 <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">
@@ -200,10 +206,11 @@
 </template>
 
 <script>
-import { listPersonal, getPersonal, delPersonal, addPersonal, updatePersonal, exportPersonal,changeEnable } from "@/api/system/personalPage";
+import { listPersonal, getPersonal, delPersonal, addPersonal, updatePersonal, exportPersonal,changeEnable,getQrcode } from "@/api/system/personalPage";
 import { listTemplate } from "@/api/system/templatePage";
 import Editor from '@/components/Editor';
 import personalAvatar from "./detail/personalAvatar";
+import qrcodeImg from '@/assets/image/qrcode_img.jpg'
 
 export default {
   name: "personalPage",
@@ -213,6 +220,8 @@ export default {
   },
   data() {
     return {
+      codeImg: qrcodeImg,
+      codeUrl: "",
       // 遮罩层
       loading: true,
       // 选中数组
@@ -361,6 +370,7 @@ export default {
         this.form = response.data;
         this.open = true;
         this.title = "修改个人页";
+        this.getQrcodeImg(row);
       });
     },
     /** 提交按钮 */
@@ -414,13 +424,31 @@ export default {
           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",