拼图汇报

2022-05-20 11:30:24 +08:00
parent dadcebbc87
commit 757cfbbf32
4 changed files with 333 additions and 123 deletions
--- a/src/saas/AppCountryAlbum/AddReport.vue
+++ b/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)
--- a/src/saas/AppCountryAlbum/components/report/Daily.vue
+++ b/src/saas/AppCountryAlbum/components/report/Daily.vue
@@ -1,33 +1,36 @@
 <template>
-  <div class="Daily" ref="home">
-    <div class="top">
-      <span>请输入汇报单位</span>
+  <div class="Daily" ref="report">
+    <div class="top" @click="linkTo">
+      <span>{{ unit }}</span>
    </div>
-    <div class="body">
-      <h2>今日工作</h2>
-      <div class="subtitle">工作拍照汇总</div>
+    <div class="body" @click="linkTo">
+      <h2>{{ title }}</h2>
+      <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-btn">
+      <div class="add" data-html2canvas-ignore ref="add">
+        <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 () {
-        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: 4,
-        }).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'
        })
      }
    }
@@ -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;
--- a/src/saas/AppCountryAlbum/components/report/InspectLog.vue
+++ b/src/saas/AppCountryAlbum/components/report/InspectLog.vue
@@ -1,55 +1,137 @@
 <template>
-  <div class="InspectLog">
-    <div class="top">
+  <div class="InspectLog" ref="report">
+    <div class="top" @click="linkTo">
    </div>
-    <div class="body">
-      <h2>今日工作</h2>
-      <div class="subtitle">工作拍照汇总</div>
+    <div class="body" @click="linkTo">
+      <h2 v-if="isShowTitle">{{ title }}</h2>
+      <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>
+          <div class="right">
+            <i v-if="isShowDate">{{ date }} </i>
+            <i v-if="isShowWeather"> {{ weather }}</i>
          </div>
-          <i>2022-04-14 晴 22℃</i>
        </div>
-        <div class="bottom-item">
+        <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-btn">
+      <div class="add" data-html2canvas-ignore ref="add">
+        <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;

-          i {
-            font-style: normal;
+          .right {
+            display: flex;
+            align-items: center;
+
+            i {
+              font-style: normal;
+
+              &:last-child {
+                margin-left: 8px;
+              }
+            }
          }

-          &:last-child {
+          &.bottom-item__remark {
            height: auto;
            line-height: 1.3;
            padding: 12px 16px;
--- a/src/saas/AppCountryAlbum/components/report/WorkReport.vue
+++ b/src/saas/AppCountryAlbum/components/report/WorkReport.vue
@@ -1,29 +1,29 @@
 <template>
  <div class="WorkReport" ref="report">
-    <div class="top" @click="linkTo('./ReportConfig')">
-      <span>{{ form.unit || '请输入汇报单位' }}</span>
-      <span>{{ form.date || '请选择日期' }}</span>
+    <div class="top" @click="linkTo">
+      <span v-if="isShowUnit">{{ unit || '请输入汇报单位' }}</span>
+      <span v-if="isShowDate">{{ date || '请选择日期' }}</span>
    </div>
-    <div class="body" @click="linkTo('./ReportConfig')">
-      <h2>工作汇报</h2>
-      <div class="subtitle">{{ form.title || '请输入标题' }}</div>
+    <div class="body" @click="linkTo">
+      <h2 v-if="isShowTitle">{{ title }}</h2>
+      <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">
-          <label>汇报人：{{ form.name || '请输入汇报人姓名' }}</label>
+      <div class="bottom-item__wrapper">
+        <div class="bottom-item" v-if="isShowReporter" @click="linkTo">
+          <label>汇报人：{{ reporter || '请输入汇报人姓名' }}</label>
        </div>
-        <div class="bottom-item">
-          <span>备注：{{ form.remark || '请输入备注' }}</span>
+        <div class="bottom-item" v-if="isShowRemark" @click="linkTo">
+          <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: '',
-        form: {
-          unit: '',
-          title: '',
-          date: '',
-          name: '',
-          remark: ''
-        },
-        imgs: []
+        title: '工作汇报',
+        subTitle: '',
+        reporter: '',
+        date: '',
+        unit: '',
+        remark: '',
+        isShowTitle: true,
+        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)
-        e.forEach(v => {
-          this.form[v.key] = v.value
-        })
+        this.configList = e
      })
    },

    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) {
-        const data = [
-          {
-            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: '备注'
-          }
-        ]
+      linkTo () {
+        uni.setStorageSync('waterConfig', this.configList)
        uni.navigateTo({
-          url: `${path}?params=${JSON.stringify(data)}`
+          url: './WatermarkConfig'
        })
      }
    }
@@ -158,6 +154,7 @@
    }

    .imgs {
+      margin-top: 20px;
      image {
        display: block;
        width: 100%;