bug

packages/work/AppAskForm/components/Statistics.vue

@@ -127,11 +127,11 @@
           </div>
         </div>
         <ai-dialog
-            customFooter
+          customFooter
-            :visible.sync="isShowForm"
+          :visible.sync="isShowForm"
-            @onConfirm="isShowForm = false"
+          @onConfirm="isShowForm = false"
-            width="800px"
+          width="800px"
-            title="表单">
+          title="表单">
             <div class="middle-content form">
               <div class="middle-content__wrapper">
                 <div>

project/hlj/app/AppRatingTask/components/FormDetail.vue

@@ -83,6 +83,13 @@
                     </div>
                   </template>
                 </el-table-column>
+                <el-table-column slot="options" width="100px" fixed="right" label="操作" align="center">
+                  <template slot-scope="{ row }">
+                    <div class="table-options">
+                      <el-button type="text" @click="showDetail(row.id)">查看内容</el-button>
+                    </div>
+                  </template>
+                </el-table-column>
               </ai-table>
             </div>
           </div>
@@ -124,6 +131,76 @@
           </div>
         </template>
       </ai-card>
+      <ai-dialog
+        customFooter
+        :visible.sync="isShow"
+        @onConfirm="isShow = false"
+        width="800px"
+        title="表单">
+          <div class="middle-content form">
+            <div class="middle-content__wrapper">
+              <div>
+                <div class="left-item__item left-item__item--banner" key="banner" v-if="info.headPicture">
+                  <img :src="info.headPicture">
+                </div>
+                <div class="left-item__item left-item__item--formname" key="title">
+                  <h2>{{ info.title }}</h2>
+                </div>
+                <div class="left-item__item left-item__item--text" key="text">
+                  <p>{{ info.tableExplain }}</p>
+                </div>
+              </div>
+              <div
+                class="left-item__item components-item"
+                v-for="(item, i) in targetList"
+                :key="i">
+              <div class="left-item__item--title">
+                <i :style="{opacity: item.required ? 1 : 0}">*</i>
+                <span>{{ i + 1 }}.</span>
+                <h2>{{ item.label }}</h2>
+              </div>
+              <div class="left-item__item--wrapper">
+                <template v-if="(item.type === 'radio')">
+                  <div class="radio-item" v-for="(field, index) in item.options" :key="index">
+                    <input type="radio" disabled :value="field.label" v-model="formInfo[`field_${i}`]"/>
+                    <img :src="field.img[0].url" v-if="field.img.length">
+                    <label>{{ field.label }}</label>
+                  </div>
+                </template>
+                <template v-if="item.type === 'upload'">
+                  <img style="width: 100%; height: 100%;" :src="formInfo[`field_${i}`]" v-if="formInfo[`field_${i}`]">
+                  <div class="left-item__item--upload" v-else>
+                    <span>图片</span>
+                  </div>
+                </template>
+                <template v-if="item.type === 'select'">
+                  <el-input resize="none" class="preview" type="textarea" style="color: #333" :placeholder="item.placeholder" v-model="formInfo[`field_${i}`]" disabled></el-input>
+                </template>
+                <template v-if="(item.type === 'checkbox')">
+                  <div class="radio-item" v-for="(field, index) in item.options" :key="index">
+                    <input type="checkbox" disabled :value="field.label" v-model="formInfo[`field_${i}`]"/>
+                    <img :src="field.img[0].url" v-if="field.img.length">
+                    <label>{{ field.label }}</label>
+                  </div>
+                </template>
+                <template v-if="(item.type === 'input')">
+                  <div class="text-item">
+                    <input :placeholder="item.placeholder" v-model="formInfo[`field_${i}`]" disabled>
+                  </div>
+                </template>
+                <template v-if="(item.type === 'textarea')">
+                  <div class="textarea-item" resize="none">
+                    <textarea :placeholder="item.placeholder" v-model="formInfo[`field_${i}`]" disabled></textarea>
+                  </div>
+                </template>
+              </div>
+            </div>
+          </div>
+        </div>
+        <template #footer>
+          <el-button @click="isShow = false">关闭</el-button>
+        </template>
+      </ai-dialog>
     </template>
   </ai-detail>
 </template>
@@ -144,6 +221,7 @@
         total2: 0,
         name1: '',
         name2: '',
+        info: {},
         search1: {
           current: 1,
           size: 10,
@@ -179,7 +257,10 @@
             dictName: '已填报',
             dictValue: '1'
           }
-        ]
+        ],
+        formInfo: {},
+        isShow: false,
+        targetList: []
       }
     },
 
@@ -194,6 +275,29 @@
         this.instance.post(`/app/appassessmentscortask/taskTemplateDetail?id=${id}`).then(res => {
           if (res.code === 0) {
             this.info = res.data
+            this.instance.post(`/app/appassessmentscoretemplate/queryDetailById?id=${res.data.templateId}`).then(res => {
+              if (res.code === 0) {
+                this.targetList = res.data.fields.map(item => {
+                  return JSON.parse(item.fieldInfo)
+                })
+              }
+            })
+          }
+        })
+      },
+
+      showDetail (id) {
+        this.instance.post(`/app/appassessmentscortask/queryDataInfoById?taskDetailId=${id}&dataId=${id}`).then(res => {
+          if (res.code == 0) {
+            this.formInfo = res.data
+
+            this.targetList.forEach((item, index) => {
+              if (item.type === 'checkbox' && this.formInfo[`field_${index}`]) {
+                this.formInfo[`field_${index}`] = this.formInfo[`field_${index}`].split(',')
+              }
+            })
+
+            this.isShow = true
           }
         })
       },
@@ -288,5 +392,169 @@
       }
     }
   }
+  .form {
+    .left-item__item--banner {
+      img {
+        width: 100%;
+        height: 235px;
+      }
+
+      .config-item__banner {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        width: 100%;
+        height: 235px;
+        line-height: 1;
+        border: 1px dashed #bbb;
+
+        span {
+          margin-top: 4px;
+          color: #555555;
+          font-size: 14px;
+        }
+
+        i {
+          font-size: 30px;
+          color: #8899bb;
+        }
+      }
+    }
+
+    .left-item__item--formname {
+      margin: 16px 0 32px;
+      padding: 0 12px;
+      color: #333333;
+      font-size: 15px;
+      font-weight: normal;
+      text-align: center;
+      word-break: break-all;
+    }
+
+    .left-item__item--text {
+      line-height: 20px;
+      // margin-bottom: 48px;
+      padding: 0 12px 20px;
+      text-align: justify;
+      color: #666;
+      font-size: 14px;
+      word-break: break-all;
+    }
+
+    .components-item {
+      position: relative;
+      padding: 16px 16px;
+
+      .left-item__item--wrapper {
+        & > img {
+          max-width: 300px;
+        }
+      }
+
+      .left-item__item--upload {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        width: 120px;
+        height: 120px;
+        border-radius: 6px;
+        border: 1px dashed #bbb;
+
+        i {
+          font-size: 24px;
+          color: #8899bb;
+        }
+
+        span {
+          margin-top: 4px;
+          font-size: 12px;
+          color: #555;
+        }
+      }
+
+      .text-item {
+        input {
+          display: block;
+          width: 100%;
+          height: 40px;
+          border: none;
+          border-bottom: 1px solid #ddd;
+
+          &:focus {
+            outline: none;
+          }
+
+          &:disabled {
+            background: #fff;
+          }
+        }
+      }
+
+      .textarea-item {
+        textarea {
+          width: 100%;
+          height: 120px;
+          resize: none;
+          border: 1px solid #ddd;
+          padding: 10px;
+
+          &:focus {
+            outline: none;
+          }
+
+          &:disabled {
+            background: #fff;
+          }
+        }
+      }
+
+      .radio-item {
+        display: flex;
+        margin-bottom: 10px;
+
+        input {
+          position: relative;
+          top: 2px;
+        }
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+
+        label {
+          margin-left: 10px;
+        }
+
+        img {
+          width: 60px;
+          margin-left: 10px;
+        }
+      }
+    }
+
+    .left-item__item--title {
+      display: flex;
+      margin-bottom: 10px;
+
+      i {
+        position: relative;
+        top: 3px;
+        margin-right: 5px;
+        color: #E22120;
+      }
+
+      span {
+        position: relative;
+        top: 3px;
+      }
+
+      h2 {
+        color: #333333;
+        font-size: 15px;
+      }
+    }
+  }
 }
 </style>