问卷表单

src/sass/AppAskForm/PreviewForm.vue

@@ -21,7 +21,7 @@
         </div>
         <div class="components-item__filed">
           <template v-if="(item.type === 'radio')">
-            <u-radio-group v-model="item.value" wrap>
+            <u-radio-group :value="formInfo[`field_${index}`]" wrap>
               <u-radio :name="field.label" v-for="(field, i) in item.options" :key="i">
                 <image :src="field.img[0].url" v-if="field.img.length"/>
                 <span>{{ field.label }}</span>
@@ -30,7 +30,7 @@
           </template>
           <template v-if="(item.type === 'checkbox')">
             <u-checkbox-group wrap>
-              <u-checkbox :name="field.label" v-model="field.checked1" v-for="(field, i) in item.options" :key="i">
+              <u-checkbox :name="field.label" :value="formInfo[`field_${index}`].indexOf(field.label)" v-for="(field, i) in item.options" :key="i">
                 <image :src="field.img[0].url" v-if="field.img.length"/>
                 <span>{{ field.label }}</span>
               </u-checkbox>
@@ -38,24 +38,25 @@
           </template>
           <template v-if="(item.type === 'select')">
             <div class="components-item__select">
-              <span>{{ item.placeholder }}</span>
+              <span>{{ formInfo[`field_${index}`] || item.placeholder }}</span>
               <u-icon name="arrow-down" color="#DEDFDF"/>
             </div>
           </template>
           <template v-if="(item.type === 'upload')">
-            <div class="components-item__select components-item__textarea components-item__upload">
+            <image style="display: block; max-width: 100%;margin: 0 auto" v-if="formInfo[`field_${index}`]" :src="formInfo[`field_${index}`]" />
+            <div v-else class="components-item__select components-item__textarea components-item__upload">
               <image :src="`${$cdn}askform/upload.png`"/>
               <span>选择图片（2M以内）</span>
             </div>
           </template>
           <template v-if="(item.type === 'input')">
             <div class="components-item__select">
-              <span>{{ item.placeholder }}</span>
+              <span>{{ formInfo[`field_${index}`] || item.placeholder }}</span>
             </div>
           </template>
           <template v-if="(item.type === 'textarea')">
             <div class="components-item__select components-item__textarea">
-              <span>{{ item.placeholder }}</span>
+              <span>{{ formInfo[`field_${index}`]|| item.placeholder }}</span>
             </div>
           </template>
         </div>
@@ -97,38 +98,28 @@ export default {
       type: 0,
       id: '',
       touchStart: 0,
-      ...params
+      ...params,
+      formInfo: {}
     }
   },
 
-  mounted () {
+  onLoad (query) {
     document.title = '表单预览'
+    query.id && this.getInfo(query.id, query.formId)
   },
 
   methods: {
-    getInfo(id) {
+    getInfo(id, formId) {
-      uni.showLoading()
+      this.$http.post(`/app/appquestionnairetemplate/queryDataInfoById?id=${formId}&dataId=${id}`).then(res => {
-      this.$http.post(`/app/appquestionnairetemplate/queryDetailById?id=${id}`).then(res => {
         if (res.code == 0) {
-          this.form = {
+          this.formInfo = res.data
-            ...res.data,
-            headPicture: res.data.headPicture
-          }
 
-          this.type = res.data.type
+          this.targetList.forEach((item, index) => {
-
+            if (item.type === 'checkbox' && this.formInfo[`field_${index}`]) {
-          this.targetList = res.data.fields.map(item => {
+              this.formInfo[`field_${index}`] = this.formInfo[`field_${index}`].split(',')
-            return JSON.parse(item.fieldInfo)
+            }
           })
-
-          this.pageShow = true
-        } else {
-          this.$u.toast(res.msg)
         }
-
-        uni.hideLoading()
-      }).catch(() => {
-        uni.hideLoading()
       })
     }
   }

src/sass/AppAskForm/Statistical.vue

@@ -15,38 +15,44 @@
           </span>
         </div>
         <div class="topic-list">
-          <div class="topic-item" v-for="(item, index) in subjectList" :key="index">
+          <div class="topic-item" :class="[['radio', 'checkbox', 'select'].indexOf(item.fieldType) === -1 ? 'topic-item__active' : '']" v-for="(item, index) in subjectList" :key="index">
-            <h2>{{ item.fieldName }}（{{ item.fixedLabel }}）</h2>
+            <template v-if="['radio', 'checkbox', 'select'].indexOf(item.fieldType) > -1">
-            <div class="topic-item__wrapper">
+              <h2>{{ item.fieldName }}（{{ item.fixedLabel }}）</h2>
-              <div class="option-item" v-for="(filed, i) in item.options" :key="i" v-show="['radio', 'checkbox', 'select'].indexOf(item.fieldType) > -1">
+              <div class="topic-item__wrapper">
-                <div class="option-item__left">
+                <div class="option-item" v-for="(filed, i) in item.options" :key="i">
-                  <h2>{{ filed.label }}：</h2>
+                  <div class="option-item__left">
-                  <!-- <span>每周监测</span> -->
+                    <h2>{{ filed.label }}：</h2>
-                </div>
+                    <!-- <span>每周监测</span> -->
-                <div class="option-item__right">
+                  </div>
-                  <span>{{ filed.c }}票</span>
+                  <div class="option-item__right">
-                  <span>{{ (((filed.c || 0) / fieldDataCount[`field_${index}`]) * 100).toFixed(2) }}%</span>
+                    <span>{{ filed.c }}票</span>
+                    <span>{{ (((filed.c || 0) / fieldDataCount[`field_${index}`]) * 100).toFixed(2) }}%</span>
+                  </div>
                 </div>
               </div>
-            </div>
+            </template>
+            <template v-else>
+              <h2 class="topic-item__left">{{ item.fieldName }}（{{ item.fixedLabel }}）</h2>
+              <span>共{{ fieldDataCount[`field_${index}`] }}条数据</span>
+            </template>
           </div>
         </div>
       </div>
       <div class="user-list" v-show="currIndex === 1">
-        <div class="user-item" v-for="(item, index) in 10" :key="index">
+        <div class="user-item" v-for="(item, index) in list" :key="index">
           <div class="user-item__left">
             <image src="https://p26-passport.byteacctimg.com/img/user-avatar/6401428bcd3b2b9bfed4f31cca07b798~300x300.image" />
             <div class="right">
               <div class="right-top">
-                <h2>且听风吟</h2>
+                <h2>{{ item.residentName }}</h2>
-                <span>微信用户</span>
+                <span>{{ $dict.getLabel('wxUserType', item.userType) }}</span>
               </div>
-              <p>2021-10-10 10:30:00</p>
+              <p>{{ item.commitTime }}</p>
             </div>
           </div>
           <div class="user-item__right">
-            <p>分值: 10</p>
+            <p>分值: {{ item.totalScore }}</p>
-            <div>查看表单</div>
+            <div @click="toPreview(item.id)">查看表单</div>
           </div>
         </div>
       </div>
@@ -71,12 +77,18 @@
         total: 0,
         pageShow: false,
         form: {},
+        search: {
+          size: 15,
+          current: 1
+        },
+        isMore: false,
         fieldTypeCount: [],
         fieldValueDistribution: [],
         fieldDataCount: {},
         isShowForm: false,
         targetList: [],
-        formInfo: {}
+        formInfo: {},
+        list: []
       }
     },
 
@@ -87,6 +99,10 @@
       this.$nextTick(() => {
         this.getInfo()
         this.getFormInfo()
+
+        this.$dict.load(['wxUserType']).then(() => {
+          this.getList()
+        })
       })
     },
 
@@ -102,6 +118,42 @@
         })
       },
 
+      toPreview(id) {
+        localStorage.setItem("toPreviewForm", JSON.stringify({form: this.info, targetList: this.targetList}))
+        uni.navigateTo({url: `./PreviewForm?id=${id}&formId=${this.info.id}`})
+      },
+
+      getList() {
+        if (this.isMore) return
+        this.$http.post(`/app/appquestionnairetemplate/statisticsResident?id=${this.id}`, null, {
+          params: {
+            ...this.search
+          }
+        }).then(res => {
+          if (res.code == 0) {
+            if (this.search.current > 1) {
+              this.list = [...this.list, ...res.data.records]
+            } else {
+              this.list = res.data.records
+            }
+
+            uni.hideLoading()
+
+            if (res.data.records.length < 10) {
+              this.isMore = true
+
+              return false
+            }
+
+            this.search.current = this.search.current + 1
+          } else {
+            uni.hideLoading()
+          }
+        }).catch(() => {
+          uni.hideLoading()
+        })
+      },
+
       mapType(type) {
         return {
           upload: '上传图片',
@@ -151,6 +203,10 @@
           }
         })
       }
+    },
+
+    onReachBottom() {
+      this.getList()
     }
   }
 </script>
@@ -262,6 +318,29 @@
           font-size: 32px;
         }
 
+        &.topic-item__active {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin: 40px 32px 0;
+          padding: 34px 32px;
+          background: #EFF7FF;
+          border-radius: 16px;
+          border: 1px solid #CCCCCC;
+
+          h2 {
+            flex: 1;
+            margin-right: 9px;
+            font-weight: 600;
+            font-size: 32px;
+            color: #333333;
+          }
+
+          span {
+            color: #666666;
+          }
+        }
+
         .option-item {
           display: flex;
           align-items: center;