乡村相册

2022-05-26 11:08:12 +08:00
parent e626c92c82
commit 844ac6dc6b
6 changed files with 300 additions and 188 deletions
--- a/src/saas/AppCountryAlbum/components/report/Daily.vue
+++ b/src/saas/AppCountryAlbum/components/report/Daily.vue
@@ -20,30 +20,38 @@
          <label>总结：</label>
          <span class="">{{ remark }}</span>
        </div>
-        <div class="imgs">
-          <image :src="item" v-for="(item, index) in imgs" mode="widthFix" :key="index" />
-        </div>
+        <RenderContent style="margin-top: 20px" :richList="richList" @onLongpress="onLongpress"></RenderContent>
      </div>
      <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" @click.stop="content = '', isShowText = true">
          <span>添加文字</span>
-        </div> -->
+        </div>
      </div>
    </div>
+    <u-modal v-model="isShowText" @confirm="confirm" title="文本">
+			<view class="slot-content">
+				<textarea placeholder="请输入文本" :maxlength="-1" v-model="content"></textarea>
+			</view>
+		</u-modal>
  </div>
 </template>

 <script>
  import html2canvas from 'html2canvas'
+  import RenderContent from './RenderContent.vue'
  export default {
    name: 'Daily',
    label: '日报',

    props: ['config'],

+    components: {
+      RenderContent
+    },
+
    data () {
      return {
        imgs: [],
@@ -60,6 +68,10 @@
        isShowReporter: true,
        isShowUnit: true,
        isShowRemark: false,
+        richList: [],
+        isShowText: false,
+        content: '',
+        currIndex: -1
      }
    },

@@ -116,6 +128,17 @@
        })
      },

+      onLongpress (e) {
+        if (e.action === 'remove') {
+          this.richList.splice(e.index, 1)
+        } else {
+          this.currIndex = e.index
+          this.content = e.value
+
+          this.isShowText = true
+        }
+      },
+
      addPhoto () {
        uni.chooseImage({
          count: 1,
@@ -125,13 +148,31 @@
            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)
+                this.richList.push({
+                  type: 'img',
+                  value: res.data.url
+                })
              }
            })
          }
        })
      },

+      confirm () {
+        if (this.currIndex >= 0) {
+          this.richList[this.currIndex].value = this.content
+        } else {
+          this.richList.push({
+            type: 'text',
+            value: this.content
+          })
+        }
+
+        this.isShowText = false
+        this.content = ''
+        this.currIndex = -1
+      },
+
      linkTo () {
        uni.setStorageSync('waterConfig', this.configList)
        uni.navigateTo({
@@ -151,17 +192,12 @@
      box-sizing: border-box;
    }

-    .imgs {
+    .slot-content {
      margin-top: 20px;
+      padding: 0 30px;

-      image {
-        display: block;
+      textarea {
        width: 100%;
-        margin-bottom: 10px;
-
-        &:last-child {
-          margin-bottom: 20px;
-        }
      }
    }

--- a/src/saas/AppCountryAlbum/components/report/InspectLog.vue
+++ b/src/saas/AppCountryAlbum/components/report/InspectLog.vue
@@ -22,27 +22,38 @@
          <label>巡查情况：</label>
          <span>{{ remark }}</span>
        </div>
-        <div class="imgs">
-          <image :src="item" v-for="(item, index) in imgs" mode="widthFix" :key="index" />
-        </div>
+        <RenderContent class="RenderContent" style="margin-top: 20px" :richList="richList" @onLongpress="onLongpress"></RenderContent>
      </div>
      <div class="add" data-html2canvas-ignore ref="add">
        <div class="add-btn" @click="addPhoto">
          <span>添加图片</span>
        </div>
+        <div class="add-btn" @click.stop="content = '', isShowText = true">
+          <span>添加文字</span>
+        </div>
      </div>
    </div>
+    <u-modal v-model="isShowText" @confirm="confirm" title="文本">
+			<view class="slot-content">
+				<textarea placeholder="请输入文本" :maxlength="-1" v-model="content"></textarea>
+			</view>
+		</u-modal>
  </div>
 </template>

 <script>
  import html2canvas from 'html2canvas'
+  import RenderContent from './RenderContent.vue'
  export default {
    name: 'InspectLog',
    label: '巡查日志',

    props: ['config'],

+    components: {
+      RenderContent
+    },
+
    data () {
      return {
        title: '巡查日志',
@@ -59,7 +70,11 @@
        isShowAddress: false,
        isShowRemark: false,
        imgs: [],
-        configList: []
+        configList: [],
+        richList: [],
+        isShowText: false,
+        content: '',
+        currIndex: -1
      }
    },

@@ -122,6 +137,17 @@
        })
      },

+      onLongpress (e) {
+        if (e.action === 'remove') {
+          this.richList.splice(e.index, 1)
+        } else {
+          this.currIndex = e.index
+          this.content = e.value
+
+          this.isShowText = true
+        }
+      },
+
      addPhoto () {
        uni.chooseImage({
          count: 1,
@@ -131,13 +157,31 @@
            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)
+                this.richList.push({
+                  type: 'img',
+                  value: res.data.url
+                })
              }
            })
          }
        })
      },

+      confirm () {
+        if (this.currIndex >= 0) {
+          this.richList[this.currIndex].value = this.content
+        } else {
+          this.richList.push({
+            type: 'text',
+            value: this.content
+          })
+        }
+
+        this.isShowText = false
+        this.content = ''
+        this.currIndex = -1
+      },
+
      linkTo () {
        uni.setStorageSync('waterConfig', this.configList)
        uni.navigateTo({
@@ -158,17 +202,18 @@
      box-sizing: border-box;
    }

-    .imgs {
+    ::v-deep .RenderContent {
+      p {
+        color: #fff;
+      }
+    }
+
+    .slot-content {
      margin-top: 20px;
+      padding: 0 30px;

-      image {
-        display: block;
+      textarea {
        width: 100%;
-        margin-bottom: 10px;
-
-        &:last-child {
-          margin-bottom: 20px;
-        }
      }
    }

--- a/src/saas/AppCountryAlbum/components/report/MeetingMminutes.vue
+++ b/src/saas/AppCountryAlbum/components/report/MeetingMminutes.vue
@@ -33,21 +33,28 @@
        <td colspan="3">{{ remark }}</td>
      </tr>
    </table>
-    <div class="imgs">
-      <image :src="item" v-for="(item, index) in imgs" mode="widthFix" :key="index" />
-    </div>
+    <RenderContent style="margin-top: 20px" :richList="richList" @onLongpress="onLongpress"></RenderContent>
    <div class="bottom" data-html2canvas-ignore ref="add">
      <div class="add">
        <div class="add-btn" @click="addPhoto">
          <span>添加图片</span>
        </div>
+        <div class="add-btn" @click.stop="content = '', isShowText = true">
+          <span>添加文字</span>
+        </div>
      </div>
    </div>
+    <u-modal v-model="isShowText" @confirm="confirm" title="文本">
+			<view class="slot-content">
+				<textarea placeholder="请输入文本" :maxlength="-1" v-model="content"></textarea>
+			</view>
+		</u-modal>
  </div>
 </template>

 <script>
  import html2canvas from 'html2canvas'
+  import RenderContent from './RenderContent.vue'
  export default {
    name: 'MeetingMminutes',

@@ -55,6 +62,10 @@

    props: ['config'],

+    components: {
+      RenderContent
+    },
+
    data () {
      return {
        title: '巡查日志',
@@ -76,7 +87,11 @@
        isShowRemark: true,
        isShowHoster: true,
        imgs: [],
-        configList: []
+        configList: [],
+        richList: [],
+        isShowText: false,
+        content: '',
+        currIndex: -1
      }
    },

@@ -142,6 +157,17 @@
        })
      },

+      onLongpress (e) {
+        if (e.action === 'remove') {
+          this.richList.splice(e.index, 1)
+        } else {
+          this.currIndex = e.index
+          this.content = e.value
+
+          this.isShowText = true
+        }
+      },
+
      addPhoto () {
        uni.chooseImage({
          count: 1,
@@ -151,13 +177,31 @@
            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)
+                this.richList.push({
+                  type: 'img',
+                  value: res.data.url
+                })
              }
            })
          }
        })
      },

+      confirm () {
+        if (this.currIndex >= 0) {
+          this.richList[this.currIndex].value = this.content
+        } else {
+          this.richList.push({
+            type: 'text',
+            value: this.content
+          })
+        }
+
+        this.isShowText = false
+        this.content = ''
+        this.currIndex = -1
+      },
+
      linkTo () {
        uni.setStorageSync('waterConfig', this.configList)
        uni.navigateTo({
@@ -173,17 +217,12 @@
    padding: 48px 32px 0;
    background: #fff;

-    .imgs {
+    .slot-content {
      margin-top: 20px;
+      padding: 0 30px;

-      image {
-        display: block;
+      textarea {
        width: 100%;
-        margin-bottom: 10px;
-
-        &:last-child {
-          margin-bottom: 20px;
-        }
      }
    }

--- a/src/saas/AppCountryAlbum/components/report/RenderContent.vue
+++ b/src/saas/AppCountryAlbum/components/report/RenderContent.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="rich">
+    <div class="rich-item" v-for="(item, index) in richList" :key="index">
+      <p @longpress="onLongpress(item, index)" v-if="item.type === 'text'">{{ item.value }}</p>
+      <image @longpress="onLongpress(item, index)" @click="prview(item.value)" v-else mode="widthFix" :src="item.value" />
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: ['richList'],
+
+    data () {
+      return {
+
+      }
+    },
+
+    methods: {
+      onLongpress (item, index) {
+        if (item.type === 'text') {
+          uni.showActionSheet({
+            itemList: ['编辑', '删除'],
+            success: res => {
+              this.$emit('onLongpress', {
+                type: item.type,
+                value: item.value,
+                index: index,
+                action: res.tapIndex === 0 ? 'edit' : 'remove'
+              })
+            }
+          })
+        } else {
+          uni.showActionSheet({
+            itemList: ['删除'],
+            success: () => {
+              this.$emit('onLongpress', {
+                type: item.type,
+                value: item.value,
+                index: index,
+                action: 'remove'
+              })
+            }
+          })
+        }
+      },
+
+      prview (url) {
+        uni.previewImage({
+          urls: [url],
+          current: url
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .rich {
+    .rich-item {
+      margin-bottom: 20rpx;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      p {
+        line-height: 1.3;
+        word-break: break-all;
+        text-align: justify;
+        font-size: 30rpx;
+        color: #333;
+      }
+
+      image {
+        display: block;
+        width: 100%;
+      }
+    }
+  }
+</style>
--- a/src/saas/AppCountryAlbum/components/report/WorkReport.vue
+++ b/src/saas/AppCountryAlbum/components/report/WorkReport.vue
@@ -19,30 +19,39 @@
        <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>
+        <RenderContent :richList="richList" @onLongpress="onLongpress"></RenderContent>
      </div>
      <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" @click.stop="content = '', isShowText = true">
          <span>添加文字</span>
-        </div> -->
+        </div>
      </div>
    </div>
+    <u-modal v-model="isShowText" @confirm="confirm" title="文本">
+			<view class="slot-content">
+				<textarea placeholder="请输入文本" :maxlength="-1" v-model="content"></textarea>
+			</view>
+		</u-modal>
  </div>
 </template>

 <script>
  import html2canvas from 'html2canvas'
+  import RenderContent from './RenderContent.vue'
+
  export default {
    name: 'WorkReport',
    label: '工作汇报',

    props: ['config'],

+    components: {
+      RenderContent
+    },
+
    data () {
      return {
        title: '工作汇报',
@@ -58,7 +67,11 @@
        isShowUnit: true,
        isShowRemark: false,
        imgs: [],
-        configList: []
+        configList: [],
+        richList: [],
+        isShowText: false,
+        content: '',
+        currIndex: -1
      }
    },

@@ -115,6 +128,17 @@
        })
      },

+      onLongpress (e) {
+        if (e.action === 'remove') {
+          this.richList.splice(e.index, 1)
+        } else {
+          this.currIndex = e.index
+          this.content = e.value
+
+          this.isShowText = true
+        }
+      },
+
      addPhoto () {
        uni.chooseImage({
          count: 1,
@@ -124,13 +148,31 @@
            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)
+                this.richList.push({
+                  type: 'img',
+                  value: res.data.url
+                })
              }
            })
          }
        })
      },

+      confirm () {
+        if (this.currIndex >= 0) {
+          this.richList[this.currIndex].value = this.content
+        } else {
+          this.richList.push({
+            type: 'text',
+            value: this.content
+          })
+        }
+
+        this.isShowText = false
+        this.content = ''
+        this.currIndex = -1
+      },
+
      linkTo () {
        uni.setStorageSync('waterConfig', this.configList)
        uni.navigateTo({
@@ -150,6 +192,15 @@
      box-sizing: border-box;
    }

+    .slot-content {
+      margin-top: 20px;
+      padding: 0 30px;
+
+      textarea {
+        width: 100%;
+      }
+    }
+
    & > image {
      position: fixed;
      top: 0;