拼图汇报

src/saas/AppCountryAlbum/AddReport.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="report">
-    <components class="report-item" :is="component"></components>
+    <components class="report-item" ref="reportItem" :config="currConfig" v-if="currConfig.length" :is="component"></components>
     <div class="report-list" data-html2canvas-ignore>
       <image
         v-for="(item, index) in configList"
@@ -9,7 +9,7 @@
         :class="[currIndex === index ? 'active' : '']"
         @click="changeComponent(item, index)" />
     </div>
-    <div class="report-btn">完成</div>
+    <div class="report-btn" data-html2canvas-ignore @click="save">完成</div>
   </div>
 </template>
 
@@ -39,6 +39,14 @@
       MeetingMminutes
     },
 
+    computed: {
+      currConfig () {
+        if (this.currIndex < 0 || !this.configList.length) return []
+
+        return this.configList[this.currIndex].itemList
+      }
+    },
+
     onLoad () {
       this.getConfig()
     },
@@ -52,6 +60,37 @@
         })
       },
 
+      save () {
+        this.$loading()
+        this.$refs.reportItem.screenshot().then(canvas => {
+          let dataURL = canvas.toDataURL('image/png')
+          const file = this.dataURLtoFile(dataURL, 'photo.png')
+          let formData = new FormData()
+          formData.append('file', file)
+          this.$http.post('/admin/file/add2?type=image', formData).then(res => {
+            if (res.code === 0) {
+              console.log(res.data.url)
+            }
+
+            uni.hideLoading()
+          })
+        }).catch(e => {
+          console.log(e)
+        })
+      },
+
+      dataURLtoFile (dataurl, filename) {
+        let arr = dataurl.split(',')
+        let mime = arr[0].match(/:(.*?);/)[1]
+        let bstr = atob(arr[1])
+        let n = bstr.length
+        let u8arr = new Uint8Array(n)
+        while (n--) {
+          u8arr[n] = bstr.charCodeAt(n)
+        }
+        return new File([u8arr], filename, { type: mime })
+      },
+
       changeComponent (e, index) {
         this.currIndex = index
         this.component = this.mapComponent(e.watermarkType)

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

@@ -1,33 +1,36 @@
 <template>
-  <div class="Daily" ref="home">
+  <div class="Daily" ref="report">
-    <div class="top">
+    <div class="top" @click="linkTo">
-      <span>请输入汇报单位</span>
+      <span>{{ unit }}</span>
     </div>
-    <div class="body">
+    <div class="body" @click="linkTo">
-      <h2>今日工作</h2>
+      <h2>{{ title }}</h2>
-      <div class="subtitle">工作拍照汇总</div>
+      <div class="subtitle">{{ subTitle }}</div>
     </div>
     <div class="bottom">
       <div class="bottom-item__wrapper">
-        <div class="bottom-item">
+        <div class="bottom-item" @click="linkTo">
           <div class="left">
             <label>汇报人：</label>
-            <span>鄢然</span>
+            <span>{{ reporter }}</span>
           </div>
-          <i>2022-04-14</i>
+          <i>{{ date }}</i>
         </div>
-        <div class="bottom-item">
+        <div class="bottom-item bottom-item__remark" @click="linkTo">
           <label>总结：</label>
-          <span>鄢鄢然鄢然鄢然鄢然鄢然鄢然鄢然鄢然鄢然鄢然然</span>
+          <span class="">{{ remark }}</span>
+        </div>
+        <div class="imgs">
+          <image :src="item" v-for="(item, index) in imgs" mode="widthFix" :key="index" />
         </div>
       </div>
-      <div class="add">
+      <div class="add" data-html2canvas-ignore ref="add">
-        <div class="add-btn">
+        <div class="add-btn" @click.stop="addPhoto">
           <span>添加图片</span>
         </div>
-        <div class="add-btn">
+        <!-- <div class="add-btn">
           <span>添加文字</span>
-        </div>
+        </div> -->
       </div>
     </div>
   </div>
@@ -37,33 +40,96 @@
   import html2canvas from 'html2canvas'
   export default {
     name: 'Daily',
-
     label: '日报',
 
+    props: ['config'],
+
     data () {
       return {
-
+        imgs: [],
+        configList: [],
+        title: '',
+        subTitle: '',
+        reporter: '',
+        date: '',
+        unit: '',
+        remark: '',
+        isShowTitle: true,
+        isShowSubTitle: true,
+        isShowDate: true,
+        isShowReporter: true,
+        isShowUnit: true,
+        isShowRemark: false,
       }
     },
 
-    onLoad () {
+    watch: {
+      configList: {
+        handler: function (v) {
+          if (v.length) {
+            const title = v.filter(v => v.type === '17')[0]
+            const subTitle = v.filter(v => v.type === '18')[0]
+            const reporter = v.filter(v => v.type === '19')[0]
+            const date = v.filter(v => v.type === '1')[0]
+            const unit = v.filter(v => v.type === '22')[0]
+            const remark = v.filter(v => v.type === '32')[0]
+            this.isShowTitle = title.status === '1'
+            this.isShowRemark = remark.status === '1'
+            this.isShowUnit = unit.status === '1'
+            this.isShowReporter = reporter.status === '1'
+            this.isShowDate = date.status === '1'
+            this.isShowSubTitle = subTitle.status === '1'
+            this.title = title.defaultValue || ''
+            this.subTitle = subTitle.defaultValue || ''
+            this.reporter = reporter.defaultValue || ''
+            this.date = date.defaultValue || this.$dayjs(new Date).format('YYYY-MM-DD')
+            this.unit = unit.defaultValue || ''
+            this.remark = remark.defaultValue || ''
+          }
+        },
+        deep: true
+      },
+    },
 
+    mounted () {
+      this.configList = JSON.parse(JSON.stringify(this.config))
+
+      uni.$on('change', e => {
+        this.configList = e
+      })
     },
 
     methods: {
-      choose () {
+      screenshot () {
-        html2canvas(this.$refs.home, {
+        const height = this.$refs.report.offsetHeight - this.$refs.add.offsetHeight
+
+        return html2canvas(this.$refs.report, {
           allowTaint: true,
           useCORS: true,
-          backgroundColor: '#fff',
+          height
-          width: this.$refs.home.offsetWidth,
+        })
-          scale: 4,
+      },
-        }).then((canvas) => {
+
-          let dataURL = canvas.toDataURL("image/png");
+      addPhoto () {
-          this.src = dataURL
+        uni.chooseImage({
-          console.log(dataURL)
+          count: 1,
-        }).catch(e => {
+          sizeType: ['compressed'],
-          console.log(e)
+          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'
         })
       }
     }
@@ -79,6 +145,15 @@
       box-sizing: border-box;
     }
 
+    .imgs {
+      margin-top: 20px;
+
+      image {
+        display: block;
+        width: 100%;
+      }
+    }
+
     .top {
       display: flex;
       align-items: center;
@@ -123,7 +198,7 @@
             font-style: normal;
           }
 
-          &:last-child {
+          &.bottom-item__remark {
             height: auto;
             line-height: 1.3;
             padding: 12px 16px;

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

@@ -1,55 +1,137 @@
 <template>
-  <div class="InspectLog">
+  <div class="InspectLog" ref="report">
-    <div class="top">
+    <div class="top" @click="linkTo">
     </div>
-    <div class="body">
+    <div class="body" @click="linkTo">
-      <h2>今日工作</h2>
+      <h2 v-if="isShowTitle">{{ title }}</h2>
-      <div class="subtitle">工作拍照汇总</div>
+      <div class="subtitle" v-if="isShowAddress">{{ address }}</div>
     </div>
     <div class="bottom">
-      <div class="bottom-item__wrapper">
+      <div class="bottom-item__wrapper" @click="linkTo">
         <div class="bottom-item">
-          <div class="left">
+          <div class="left" v-if="isShowAddress">
             <label>巡查人：</label>
-            <span>鄢然</span>
+            <span>{{ reporter }}</span>
           </div>
-          <i>2022-04-14 晴 22℃</i>
+          <div class="right">
+            <i v-if="isShowDate">{{ date }} </i>
+            <i v-if="isShowWeather"> {{ weather }}</i>
           </div>
-        <div class="bottom-item">
+        </div>
+        <div class="bottom-item bottom-item__remark" v-if="isShowRemark" @click="linkTo">
           <label>巡查情况：</label>
-          <span>鄢鄢然鄢然鄢然鄢然鄢然鄢然鄢然鄢然鄢然鄢然然</span>
+          <span>{{ remark }}</span>
+        </div>
+        <div class="imgs">
+          <image :src="item" v-for="(item, index) in imgs" mode="widthFix" :key="index" />
         </div>
       </div>
-      <div class="add">
+      <div class="add" data-html2canvas-ignore ref="add">
-        <div class="add-btn">
+        <div class="add-btn" @click="addPhoto">
           <span>添加图片</span>
         </div>
-        <div class="add-btn">
-          <span>添加文字</span>
-        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+  import html2canvas from 'html2canvas'
   export default {
     name: 'InspectLog',
-
     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: {
+      screenshot () {
+        const height = this.$refs.report.offsetHeight - this.$refs.add.offsetHeight
 
+        return html2canvas(this.$refs.report, {
+          allowTaint: true,
+          useCORS: true,
+          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'
+        })
+      }
     }
   }
 </script>
@@ -63,6 +145,14 @@
       box-sizing: border-box;
     }
 
+    .imgs {
+      margin-top: 2px;
+      image {
+        display: block;
+        width: 100%;
+      }
+    }
+
     .top {
       width: 100%;
       height: 16px;
@@ -102,11 +192,20 @@
           font-size: 28px;
           background: #F9FC4D;
 
+          .right {
+            display: flex;
+            align-items: center;
+
             i {
               font-style: normal;
-          }
 
               &:last-child {
+                margin-left: 8px;
+              }
+            }
+          }
+
+          &.bottom-item__remark {
             height: auto;
             line-height: 1.3;
             padding: 12px 16px;

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

@@ -1,29 +1,29 @@
 <template>
   <div class="WorkReport" ref="report">
-    <div class="top" @click="linkTo('./ReportConfig')">
+    <div class="top" @click="linkTo">
-      <span>{{ form.unit || '请输入汇报单位' }}</span>
+      <span v-if="isShowUnit">{{ unit || '请输入汇报单位' }}</span>
-      <span>{{ form.date || '请选择日期' }}</span>
+      <span v-if="isShowDate">{{ date || '请选择日期' }}</span>
     </div>
-    <div class="body" @click="linkTo('./ReportConfig')">
+    <div class="body" @click="linkTo">
-      <h2>工作汇报</h2>
+      <h2 v-if="isShowTitle">{{ title }}</h2>
-      <div class="subtitle">{{ form.title || '请输入标题' }}</div>
+      <div class="subtitle" v-if="isShowSubTitle">{{ subTitle || '请输入标题' }}</div>
       <div class="partition">
         <div><i></i></div>
       </div>
     </div>
     <div class="bottom">
-      <div class="bottom-item__wrapper" @click="linkTo('./ReportConfig')">
+      <div class="bottom-item__wrapper">
-        <div class="bottom-item">
+        <div class="bottom-item" v-if="isShowReporter" @click="linkTo">
-          <label>汇报人：{{ form.name || '请输入汇报人姓名' }}</label>
+          <label>汇报人：{{ reporter || '请输入汇报人姓名' }}</label>
         </div>
-        <div class="bottom-item">
+        <div class="bottom-item" v-if="isShowRemark" @click="linkTo">
-          <span>备注：{{ form.remark || '请输入备注' }}</span>
+          <span>备注：{{ remark }}</span>
         </div>
         <div class="imgs">
           <image :src="item" v-for="(item, index) in imgs" mode="widthFix" :key="index" />
         </div>
       </div>
-      <div class="add" data-html2canvas-ignore ref="add" @click="save">
+      <div class="add" data-html2canvas-ignore ref="add">
         <div class="add-btn" @click.stop="addPhoto">
           <span>添加图片</span>
         </div>
@@ -32,7 +32,6 @@
         </div> -->
       </div>
     </div>
-    <image v-if="waterSrc" :src="waterSrc" @click="waterSrc = ''" />
   </div>
 </template>
 
@@ -40,44 +39,73 @@
   import html2canvas from 'html2canvas'
   export default {
     name: 'WorkReport',
-
     label: '工作汇报',
 
+    props: ['config'],
+
     data () {
       return {
-        waterSrc: '',
+        title: '工作汇报',
-        form: {
+        subTitle: '',
-          unit: '',
+        reporter: '',
-          title: '',
         date: '',
-          name: '',
+        unit: '',
-          remark: ''
+        remark: '',
-        },
+        isShowTitle: true,
-        imgs: []
+        isShowSubTitle: true,
+        isShowDate: true,
+        isShowReporter: true,
+        isShowUnit: true,
+        isShowRemark: false,
+        imgs: [],
+        configList: []
       }
     },
 
+    watch: {
+      configList: {
+        handler: function (v) {
+          if (v.length) {
+            const title = v.filter(v => v.type === '17')[0]
+            const subTitle = v.filter(v => v.type === '18')[0]
+            const reporter = v.filter(v => v.type === '19')[0]
+            const date = v.filter(v => v.type === '1')[0]
+            const unit = v.filter(v => v.type === '20')[0]
+            const remark = v.filter(v => v.type === '4')[0]
+            this.isShowTitle = title.status === '1'
+            this.isShowRemark = remark.status === '1'
+            this.isShowUnit = unit.status === '1'
+            this.isShowReporter = reporter.status === '1'
+            this.isShowDate = date.status === '1'
+            this.isShowSubTitle = subTitle.status === '1'
+            this.title = title.defaultValue || ''
+            this.subTitle = subTitle.defaultValue || ''
+            this.reporter = reporter.defaultValue || ''
+            this.date = date.defaultValue || this.$dayjs(new Date).format('YYYY-MM-DD')
+            this.unit = unit.defaultValue || ''
+            this.remark = remark.defaultValue || ''
+          }
+        },
+        deep: true
+      },
+    },
+
     mounted () {
+      this.configList = JSON.parse(JSON.stringify(this.config))
+
       uni.$on('change', e => {
-        console.log(e)
+        this.configList = e
-        e.forEach(v => {
-          this.form[v.key] = v.value
-        })
       })
     },
 
     methods: {
-      save () {
+      screenshot () {
         const height = this.$refs.report.offsetHeight - this.$refs.add.offsetHeight
-        html2canvas(this.$refs.report, {
+
+        return html2canvas(this.$refs.report, {
           allowTaint: true,
           useCORS: true,
           height
-        }).then((canvas) => {
-          let dataURL = canvas.toDataURL('image/png')
-          this.waterSrc = dataURL
-        }).catch(e => {
-          console.log(e)
         })
       },
 
@@ -90,7 +118,6 @@
             formData.append('file', res.tempFiles[0])
             this.$http.post('/admin/file/add2?type=image', formData).then(res => {
               if (res.code === 0) {
-                console.log(res.data)
                 this.imgs.push(res.data.url)
               }
             })
@@ -98,41 +125,10 @@
         })
       },
 
-      linkTo (path) {
+      linkTo () {
-        const data = [
+        uni.setStorageSync('waterConfig', this.configList)
-          {
-            type: 'text',
-            key: 'unit',
-            value: '',
-            label: '汇报单位'
-          },
-          {
-            type: 'text',
-            key: 'title',
-            value: '',
-            label: '标题'
-          },
-          {
-            type: 'text',
-            key: 'name',
-            value: '',
-            label: '汇报人'
-          },
-          {
-            type: 'date',
-            key: 'date',
-            value: '',
-            label: '汇报日期'
-          },
-          {
-            type: 'textarea',
-            key: 'remark',
-            value: '',
-            label: '备注'
-          }
-        ]
         uni.navigateTo({
-          url: `${path}?params=${JSON.stringify(data)}`
+          url: './WatermarkConfig'
         })
       }
     }
@@ -158,6 +154,7 @@
     }
 
     .imgs {
+      margin-top: 20px;
       image {
         display: block;
         width: 100%;