提交一部分民政评分新版

2022-12-08 13:38:03 +08:00
parent b6dc935b17
commit 0c2edd2b9f
4 changed files with 102 additions and 59 deletions
--- a/src/components/AiDrawer.vue
+++ b/src/components/AiDrawer.vue
@@ -1,7 +1,8 @@
 <template>
  <section class="AiDrawer">
-    <AiPagePicker type="custom" :ops="ops">
-      <div class="placeholder">{{ placeholder }}</div>
+    <AiPagePicker type="custom" :ops="ops" @select="getSeal">
+      <img class="sealImage" v-if="seal" :src="seal"/>
+      <div v-else class="placeholder">{{ placeholder }}</div>
    </AiPagePicker>
  </section>
 </template>
@@ -17,7 +18,7 @@ export default {
    event: "input"
  },
  props: {
-    seal: String,
+    seal: {default: null},
    placeholder: {type: String, default: "请在此处清晰书写你的签名"},
  },
  data() {
@@ -26,6 +27,11 @@ export default {
        url: "/components/pages/sealDrawer"
      }
    }
+  },
+  methods: {
+    getSeal(image) {
+      this.$emit("input", image)
+    }
  }
 }
 </script>
@@ -42,6 +48,11 @@ export default {
    & > div {
      height: 100%;
    }
+
+    .sealImage {
+      width: 100%;
+      height: 100%;
+    }
  }

  .placeholder {
--- a/src/components/pages/sealDrawer.vue
+++ b/src/components/pages/sealDrawer.vue
@@ -1,13 +1,11 @@
 <template>
  <section class="sealDrawer">
    <slot name="tools"/>
-    <div class="resetSignature" @click.stop="handleClean">
-      <span>重写</span>
-    </div>
+    <div class="resetSignature left" @click.stop="handleClean">重写</div>
+    <div class="resetSignature" @click.stop="submit">提交</div>
    <div v-if="drawPlaceholder" class="placeholder">{{ placeholder }}</div>
-    <canvas disable-scroll type="canvas" canvas-id="drawer" id="drawer" @mousedown.stop="handleDrawStart($event)"
-            @mouseup.stop="handleDrawEnd" @mouseleave="handleDrawEnd"
-            @mousemove.stop="handleDrawing($event)"
+    <canvas disable-scroll type="canvas" canvas-id="drawer" id="drawer" @mousedown.stop="handleDrawStart"
+            @mouseup.stop="handleDrawEnd" @mouseleave="handleDrawEnd" @mousemove.stop="handleDrawing"
            @touchstart.stop="handleDrawStart" @touchend.stop="handleDrawEnd" @touchmove="handleDrawing"/>
  </section>
 </template>
@@ -16,12 +14,7 @@
 export default {
  name: "sealDrawer",
  appName: "签名",
-  model: {
-    prop: "seal",
-    event: "input"
-  },
  props: {
-    seal: String,
    placeholder: {type: String, default: "请在此处清晰书写你的签名"},
  },
  data() {
@@ -45,48 +38,51 @@ export default {
        let canvas = uni.createCanvasContext("drawer")
        if (canvas) {
          this.drawer = canvas
-          this.drawer.lineWidth = 3
-          this.drawer.shadowColor = '#333'
-          this.drawer.strokeStyle = '#333'
-          this.drawer.shadowBlur = 2
+          this.drawer.setLineWidth(3)
+          this.drawer.setShadow(0, 0, 2, '#333')
+          this.drawer.setStrokeStyle('#333')
        }
      })
    },
    handleDrawStart(e) {
      this.drawing = true
-      const canvasX = e.offsetX
-      const canvasY = e.offsetY
+      const {x, y} = e.changedTouches?.[0] || {}
      this.drawer?.beginPath()
-      this.drawer?.moveTo(canvasX, canvasY)
+      this.drawer?.moveTo(x, y)
    },
    handleDrawEnd() {
      this.drawing = false
-      const result = this.drawer.canvas?.toDataURL("image/png", 1)
-      this.$emit("input", result)
-      this.$emit("update:seal", result)
    },
    handleDrawing(e) {
-      console.log(e)
      if (this.drawing) {
-        const t = e.target?.getBoundingClientRect()
-        let canvasX
-        let canvasY
-        // 根据触发事件类型来进行定位
-        if (e.type == "touchmove") {
-          canvasX = e.changedTouches[0].clientX - t.x
-          canvasY = e.changedTouches[0].clientY - t.y
-        } else {
-          canvasX = e.offsetX
-          canvasY = e.offsetY
-        }
-        // 连接到移动的位置并上色
-        this.drawer?.lineTo(canvasX, canvasY)
-        this.drawer?.stroke()
+        const {x, y} = e.changedTouches?.[0] || {}
+        // // 连接到移动的位置并上色
+        this.drawer.lineTo(x, y)
+        this.drawer.stroke()
+        this.drawer.draw(true)
+        this.drawer?.beginPath()
+        this.drawer?.moveTo(x, y)
      }
    },
    handleClean() {
-      this.drawer.clearRect(0, 0, this.drawer.canvas.width, this.drawer.canvas.height)
+      this.drawer.clearRect(0, 0, document.body.clientWidth, document.body.clientHeight)
+      this.drawer.draw()
      this.drawPlaceholder = true
+    },
+    submit() {
+      uni.canvasToTempFilePath({
+        canvasId: 'drawer',
+        quality: 1,
+        success: res => {
+          // 在H5平台下，tempFilePath 为 base64
+          const result = res.tempFilePath
+          uni.navigateBack({
+            success: () => {
+              uni.$emit("pagePicker:custom", result)
+            }
+          })
+        }
+      })
    }
  }
 }
@@ -116,19 +112,16 @@ export default {
    display: flex;
    align-items: center;
    justify-content: center;
-    gap: 8px;
-    color: rgba(#fff, .6);
+    color: #fff;
    cursor: pointer;
    right: 16px;
    top: 16px;
+    font-size: 20px;
+    z-index: 2;

-    .AiIcon {
-      width: auto;
-      height: auto;
-    }
-
-    &:hover {
-      color: #fff;
+    &.left {
+      right: unset;
+      left: 16px;
    }
  }

--- a/src/project/hljmz/AppRecoScore/lib/dynaComponent.vue
+++ b/src/project/hljmz/AppRecoScore/lib/dynaComponent.vue
@@ -2,30 +2,39 @@
  <section class="dynaComponent">
    <AiDate v-if="item.fieldType=='date'" v-model="value"/>
    <textarea v-else-if="item.fieldType=='textarea'" v-model="value" placeholder="请输入"/>
+    <input type="number" v-else-if="item.fieldType=='score'" v-model="value" placeholder="请输入"/>
+    <AiRadio v-else-if="item.fieldType=='radio'" v-model="value" :dict="item.dictionaryCode"/>
+    <AiCheckbox v-else-if="item.fieldType=='checkbox'" v-model="value" :dict="item.dictionaryCode"/>
+    <AiSelect v-else-if="item.fieldType=='select'" v-model="value" :dict="item.dictionaryCode"/>
    <AiDrawer v-else-if="item.fieldType=='sign'" v-model="value" placeholder="开始签名"/>
+    <AiUploader v-else-if="item.fieldType=='upload'" multiple :def.sync="value" action="/admin/file/add2"/>
    <input v-else v-model="value" placeholder="请输入"/>
-
  </section>
 </template>

 <script>
 import AiDate from "../../../../components/AiDate";
 import AiDrawer from "../../../../components/AiDrawer";
+import AiRadio from "../../../../components/AiRadio";
+import AiSelect from "../../../../components/AiSelect";
+import AiCheckbox from "../../../../components/AiCheckbox";
+import AiUploader from "../../../../components/AiUploader";

 export default {
  name: "dynaComponent",
-  components: {AiDrawer, AiDate},
+  components: {AiUploader, AiCheckbox, AiSelect, AiRadio, AiDrawer, AiDate},
  props: {
    item: {default: () => ({})}
  },
  watch: {
    value(v) {
      this.$emit("update:item", {...this.item, fieldValue: v})
+      this.$emit("input", {...this.item, fieldValue: v})
    }
  },
  data() {
    return {
-      value: ""
+      value: null
    }
  },
  methods: {},
--- a/src/project/hljmz/AppRecoScore/rsDetail.vue
+++ b/src/project/hljmz/AppRecoScore/rsDetail.vue
@@ -10,15 +10,16 @@
          <div class="subLabel" v-text="key"/>
          <AiItem v-for="row in item" :key="row.id" :label="row.fieldName" topLabel>
            <div class="mar-t8" slot="sub" v-if="row.explain" v-text="row.explain"/>
-            <dyna-component :item.sync="row"/>
+            <dyna-component :item.sync="row" @input="handleDetailItem"/>
          </AiItem>
        </template>
        <AiItem v-else :label="item.fieldName" topLabel>
          <div class="mar-t8" slot="sub" v-if="item.explain" v-text="item.explain"/>
-          <dyna-component :item.sync="item"/>
+          <dyna-component :item.sync="item" @input="handleDetailItem"/>
        </AiItem>
      </template>
    </AiGroup>
+    <AiBottomBtn text="提交" @click="submit"/>
  </section>
 </template>

@@ -26,10 +27,11 @@
 import AiItem from "../../../components/AiItem";
 import AiGroup from "../../../components/AiGroup";
 import DynaComponent from "./lib/dynaComponent";
+import AiBottomBtn from "../../../components/AiBottomBtn";

 export default {
  name: "rsDetail",
-  components: {DynaComponent, AiGroup, AiItem},
+  components: {AiBottomBtn, DynaComponent, AiGroup, AiItem},
  appName: "考核评分",
  data() {
    return {
@@ -76,14 +78,42 @@ export default {
        }
      })
    },
-    getItem(id) {
-      return this.detail.find(e => e.id == id) || {}
+    handleDetailItem(item) {
+      this.detail.map(e => {
+        if (e.id == item.id) {
+          e.fieldValue = item.fieldValue
+        }
+      })
+    },
+    submit() {
+      if (!this.detail.filter(e => e.inputType == '0')?.some(e => {
+        const desc = [e.groupLevel1Name, e.groupLevel2Name, e.fieldName].filter(Boolean)?.join("-")
+        if (e.mustFill == 1 && !e.fieldValue) {
+          this.$u.toast("请填写" + desc)
+          return true
+        } else if (e.maxScore > 0 && e.maxScore < e.fieldValue) {
+          this.$u.toast(`${desc}请输入正确范围(0~${e.maxScore})`)
+          return true
+        } else return false
+      })) {
+        const {$route: {query: {taskDetailId, taskId}}, detail: fields} = this
+        this.$http.post("/app/appassessmentscorev2task/commit", {
+          taskDetailId, taskId, fields
+        }).then(res => {
+          if (res?.code == 0) {
+            this.$u.toast("提交成功!")
+            uni.navigateBack()
+          }
+        })
+      }
    }
  },
+  created() {
+    this.getDetail()
+    this.getTask()
+  },
  onShow() {
    document.title = this.$options.appName
-    this.getDetail()
-    this.getTask()
  },
 }
 </script>