拼图汇报

src/saas/AppCountryAlbum/components/report/MeetingMminutes.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="MeetingMminutes">
-    <table class="table" border="1" cellspacing="0" cellpadding="16px" bordercolor="#2774CE" @click="choose" ref="home">
+  <div class="MeetingMminutes" ref="report">
+    <table @click="linkTo" class="table" border="1" cellspacing="0" cellpadding="16px" bordercolor="#2774CE">
       <tr>
         <th colspan="4" class="title">会议纪要</th>
       </tr>
@@ -33,14 +33,14 @@
         <td colspan="3">2022-01-21 周五</td>
       </tr>
     </table>
-    <div class="bottom">
+    <div class="imgs">
+      <image :src="item" v-for="(item, index) in imgs" mode="widthFix" :key="index" />
+    </div>
+    <div class="bottom" data-html2canvas-ignore ref="add">
       <div class="add">
-        <div class="add-btn" @click="choose">
+        <div class="add-btn" @click="addPhoto">
           <span>添加图片</span>
         </div>
-        <div class="add-btn">
-          <span>添加文字</span>
-        </div>
       </div>
     </div>
   </div>
@@ -53,30 +53,95 @@
 
     label: '会议纪要',
 
+    props: ['config'],
+
     data () {
       return {
-
+        title: '巡查日志',
+        subTitle: '',
+        reporter: '',
+        date: '',
+        remark: '',
+        address: '',
+        weather: '',
+        isShowTitle: true,
+        isShowWeather: true,
+        isShowDate: true,
+        isShowReporter: false,
+        isShowAddress: false,
+        isShowRemark: false,
+        imgs: [],
+        configList: []
       }
     },
 
-    onLoad () {
+    watch: {
+      configList: {
+        handler: function (v) {
+          if (v.length) {
+            const title = v.filter(v => v.type === '17')[0]
+            const reporter = v.filter(v => v.type === '24')[0]
+            const date = v.filter(v => v.type === '1')[0]
+            const address = v.filter(v => v.type === '23')[0]
+            const remark = v.filter(v => v.type === '25')[0]
+            const weather = v.filter(v => v.type === '2')[0]
+            this.isShowTitle = title.status === '1'
+            this.isShowRemark = remark.status === '1'
+            this.isShowReporter = reporter.status === '1'
+            this.isShowWeather = weather.status === '1'
+            this.isShowDate = date.status === '1'
+            this.isShowAddress = address.status === '1'
+            this.title = title.defaultValue || '巡查日志'
+            this.weather = weather.defaultValue || '晴转多云'
+            this.address = date.defaultValue || '武汉天地'
+            this.reporter = reporter.defaultValue || ''
+            this.date = date.defaultValue || this.$dayjs(new Date).format('YYYY-MM-DD')
+            this.remark = remark.defaultValue || ''
+          }
+        },
+        deep: true
+      }
+    },
 
+    mounted () {
+      this.configList = JSON.parse(JSON.stringify(this.config))
+
+      uni.$on('change', e => {
+        this.configList = e
+      })
     },
 
     methods: {
-      choose () {
-        html2canvas(this.$refs.home, {
+      screenshot () {
+        const height = this.$refs.report.offsetHeight - this.$refs.add.offsetHeight
+
+        return html2canvas(this.$refs.report, {
           allowTaint: true,
           useCORS: true,
-          backgroundColor: '#fff',
-          width: this.$refs.home.offsetWidth,
-          scale: 2,
-        }).then((canvas) => {
-          let dataURL = canvas.toDataURL("image/png");
-          this.src = dataURL
-          console.log(dataURL)
-        }).catch(e => {
-          console.log(e)
+          height
+        })
+      },
+
+      addPhoto () {
+        uni.chooseImage({
+          count: 1,
+          sizeType: ['compressed'],
+          success: res => {
+            let formData = new FormData()
+            formData.append('file', res.tempFiles[0])
+            this.$http.post('/admin/file/add2?type=image', formData).then(res => {
+              if (res.code === 0) {
+                this.imgs.push(res.data.url)
+              }
+            })
+          }
+        })
+      },
+
+      linkTo () {
+        uni.setStorageSync('waterConfig', this.configList)
+        uni.navigateTo({
+          url: './WatermarkConfig'
         })
       }
     }
@@ -88,6 +153,14 @@
     padding: 48px 32px 0;
     background: #fff;
 
+    .imgs {
+      margin-top: 2px;
+      image {
+        display: block;
+        width: 100%;
+      }
+    }
+
     .table {
       width: 100%;
       margin: 0;