update

src/components/opinionDialog.vue

 <template>
     <div class="opinion-container">
-      <el-dialog title="意见反馈" :center="true" :visible.sync="dialogFormVisible" :before-close="beforeClose">
+      <el-dialog title="意见反馈" :center="true" :visible.sync="dialogFormVisible" :before-close="beforeClose" :close-on-click-modal="false">
         <el-form :model="form" :rules="rules" ref="opinionForm" >
 
           <el-form-item label="意见反馈：" :label-width="formLabelWidth" prop="opinion">
-            <el-input type="textarea" :rows="10" :maxlength="maxlength" v-model="form.opinion" autocomplete="off" placeholder="请告诉我们您遇到的问题或者建议"></el-input>
+            <el-input type="textarea" :rows="5" :maxlength="maxlength" v-model="form.opinion" autocomplete="off" placeholder="请告诉我们您遇到的问题或者建议"></el-input>
             <span class="text-count">{{currentCount}}/{{maxlength}}</span>
           </el-form-item>
 
@@ -32,7 +32,7 @@
           </el-form-item>
 
           <el-form-item label="联系方式：" :label-width="formLabelWidth" prop="contact">
-            <el-input v-model="form.contact" maxlength="11" autocomplete="off" placeholder="请输入您的联系方式，如有需要我们会尽快联系您"></el-input>
+            <el-input v-model="form.contact" autocomplete="off" placeholder="请输入您的联系方式，如有需要我们会尽快联系您" class="contact-info"></el-input>
           </el-form-item>
 
         </el-form>
@@ -251,6 +251,9 @@
     .el-upload-list--picture .el-upload-list__item-status-label{
       background: #449284;
     }
+    .el-dialog--center .el-dialog__body{
+      padding: 25px 25px 0;
+    }
     .el-dialog__footer{
       padding: 0;
     }
@@ -283,7 +286,9 @@
       }
     }
   }
-
+  .contact-info{
+    width: 100% !important;
+  }
   .result-opinion{
     border-radius: 8px!important;
     text-align: center;

src/utils/patients/patientsapi.js

@@ -104,6 +104,16 @@ export const refreshCode = data => {
   })
 }
 
+export const getLabelsInfo = params => {
+  return fetch({
+    headers,
+    url: getBaseUrl(`healths/qrcodes/getLabelsInfo`),
+    method: 'get',
+    params: params,
+    description: '获取分组信息',
+  })
+}
+
 // 分组管理
 export const getLabelList = (params) => {
   return fetch({

src/views/layout/header.vue

@@ -107,7 +107,7 @@ export default {
     box-sizing: border-box;
     height: 64px;
     width: 100%;
-    z-index: 1000;
+    // z-index: 1000;
     font-size: 22px;
     line-height: 64px;
     color: #fff;

src/views/patients/new-manage/components/qr-code-import.vue

@@ -9,15 +9,14 @@
       </el-alert>
       <div class="qr-group">
         <p class="label-name">二维码分组：</p>
-        <template v-for="labelItem in currentLabelList">
-          <el-tag size="small" :key="labelItem">{{labelItem}}</el-tag> 
+        <template v-for="(labelItem, index) in labelsInfoList">
+          <el-tag size="small" :key="index">{{labelItem.labelName}}</el-tag> 
         </template>
         <el-tag size="small" class="choose-group" @click="handleChooseGroup">+ 选择分组</el-tag>
       </div>
       <div class="qr-pic-wrap">
         <div class="qr-box">
           <div class="pic">
-            <!-- <vue-qr :text="qrCodeInfo.qrcodeUrl" class="qr-code-img"></vue-qr> -->
             <canvas id="msg"></canvas>
             <el-button icon="el-icon-download" class="qr-download-btn" @click="handleQRDownloadModal">下载二维码</el-button>
           </div>  
@@ -42,8 +41,10 @@
       <p class="under-title-tips">选择分组后，会自动生成相应的分组二维码，居民扫码后直接进入该分组</p>
       <el-row class="row-in-line">
         <el-button size="small" class="clear-select" :disabled="choosedLabelList.length<1" @click="handleClearSelect">清空选择</el-button>
-        <el-button type="primary" class="right" size="small" @click="handleGoToLabelManage">分组管理</el-button>
-        <p class="tips">未找到分组可去分组管理新建分组</p>
+        <template v-if="!showDownloadQRModal">
+          <el-button type="primary" class="right" size="small" @click="handleGoToLabelManage">分组管理</el-button>
+          <p class="tips">未找到分组可去分组管理新建分组</p>
+        </template>
       </el-row>
       <div class="list-wrap">
         <el-checkbox-group v-model="choosedLabelList">
@@ -55,8 +56,8 @@
         </el-checkbox-group>
       </div>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="showChooseLabelModal = false" size="small">取 消</el-button>
-        <el-button type="primary" @click="handleAfterChooseLabel" size="small">确 定</el-button>
+        <el-button @click="handleCloseChooseLabelModal" size="small">取 消</el-button>
+        <el-button type="primary" @click="handleAfterChooseLabel" size="small">{{showDownloadQRModal == false ? '确 定' : '确定下载'}}</el-button>
       </span>
     </el-dialog>
     <!-- 重新加载当前分组列表 -->
@@ -73,7 +74,7 @@
       </span>
     </el-dialog>
     <!-- 下载二维码 弹窗 -->
-    <el-dialog
+    <!-- <el-dialog
       class="download-qr-modal"
       title="下载二维码"
       :visible.sync="showDownloadQRModal"
@@ -100,7 +101,7 @@
         <el-button @click="showDownloadQRModal = false">取 消</el-button>
         <el-button type="primary" @click="handleGoToDownloadQR">确定下载</el-button>
       </span>
-    </el-dialog>
+    </el-dialog> -->
   </div>
 </template>
 
@@ -110,6 +111,7 @@
     getQRCode,
     refreshCode,
     getLabelList,
+    getLabelsInfo,
   } from "@/utils/patients/patientsapi";
 
   export default {
@@ -118,7 +120,7 @@
       return {
         showChooseLabelModal: false,
         showReloadLabelModal: false,
-        showDownloadQRModal: false,
+        showDownloadQRModal: false,   //下载二维码弹窗时， 是否隐藏“选择分组”里的分组管理部分
         currentQRDownloadGroup: '',
         qrCodeInfo: {
           qrcodeUrl: '',
@@ -127,6 +129,7 @@
           id: '',
           labelIds: '',
         },
+        labelsInfoList: [],
         currentLabelList: [],
         labelNameList: [],
         choosedLabelList: [],
@@ -156,7 +159,19 @@
         first: true,
       });
     },
+    watch: {
+      showChooseLabelModal: function(val) {
+        if(val == false){
+          console.log('%c 隐藏选择分组', 'color: red;', val)
+          this.labelNameList = [];
+          this.choosedLabelList = [];
+        }
+      },
+    },
     methods: {
+      handleCloseChooseLabelModal() {
+        this.showChooseLabelModal = false;
+      },
       // 二维码录入
       goToGetQRCode(params){
         getQRCode(params).then(res => {
@@ -164,9 +179,13 @@
             let data = res.data;
             this.qrCodeInfo = data;
             if(data.labelIds != ''){
-              this.currentLabelList = data.labelIds.split(',');
+              let temp = data.labelIds.split(',');
+              this.currentLabelList = this.formatList(temp);
             }
             this.calculateQRCode(data.qrcodeUrl);
+            this.handleGetLabelsInfo({
+              labelIds: data.labelIds,
+            });
           }else{
             this.$message({
               message: '获取二维码失败，请重新再试',
@@ -175,6 +194,18 @@
           }
         })
       },
+      formatList(arr) {
+        return arr.map((item, index) => {
+          return parseInt(item);
+        })
+      },
+      handleGetLabelsInfo(params) {
+        getLabelsInfo(params).then(res => {
+          if(res.code == '000000'){
+            this.labelsInfoList = res.data;
+          }
+        })
+      },
       calculateQRCode(val){
         // 获取页面的canvas
         var msg= document.getElementById('msg')
@@ -184,7 +215,9 @@
         })
       },
       handleChooseGroup() {
-        this.showChooseLabelModal = true;
+        this.showDownloadQRModal = false;  
+        // 回显已经选择的label
+        this.choosedLabelList = this.currentLabelList;
         this.goToGetGroupList();
       },
       handleRefreshCode() {
@@ -198,7 +231,8 @@
             let data = res.data;
             this.qrCodeInfo = data;
             if(data.labelIds != ''){
-              this.currentLabelList = data.labelIds.split(',');
+              let temp = data.labelIds.split(',');
+              this.currentLabelList = this.formatList(temp);
             }
           }else{
             this.$message({
@@ -209,7 +243,11 @@
         })
       },
       handleQRDownloadModal() {
-        this.showDownloadQRModal = true;
+        this.showDownloadQRModal = true;   
+        // 回显已经选择的label
+        this.choosedLabelList = this.currentLabelList;
+        this.goToGetGroupList();
+
       },
       handleGoToDownloadQR() {
         alert('待接口OK')
@@ -222,13 +260,18 @@
           });
           return;
         }
-        this.showChooseLabelModal = false;
-        this.goToGetQRCode({
-          labelIds: this.choosedLabelList.join(','),
-          id: '',
-          first: false,
-        });
-        this.choosedLabelList = [];
+        if( this.showDownloadQRModal == false ){
+          this.showChooseLabelModal = false;
+          this.goToGetQRCode({
+            labelIds: this.choosedLabelList.join(','),
+            id: '',
+            first: false,
+          });
+          this.choosedLabelList = [];
+        }else{
+          alert('去下载二维码。。。')
+        }
+        
       },
       handleClearSelect() {
         this.choosedLabelList = [];
@@ -245,6 +288,7 @@
           // console.log('获取分组列表>> ', data)
           if(data.data && data.data.labelNameList){
             this.labelNameList = data.data.labelNameList;
+            this.showChooseLabelModal = true;
           }
         }).catch(err => {
           console.log('error: ', err)