提交一部分民政评分新版

src/components/AiDrawer.vue

@@ -1,7 +1,8 @@
 <template>
   <section class="AiDrawer">
-    <AiPagePicker type="custom" :ops="ops">
+    <AiPagePicker type="custom" :ops="ops" @select="getSeal">
-      <div class="placeholder">{{ placeholder }}</div>
+      <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 {

src/components/pages/sealDrawer.vue

@@ -1,13 +1,11 @@
 <template>
   <section class="sealDrawer">
     <slot name="tools"/>
-    <div class="resetSignature" @click.stop="handleClean">
+    <div class="resetSignature left" @click.stop="handleClean">重写</div>
-      <span>重写</span>
+    <div class="resetSignature" @click.stop="submit">提交</div>
-    </div>
     <div v-if="drawPlaceholder" class="placeholder">{{ placeholder }}</div>
-    <canvas disable-scroll type="canvas" canvas-id="drawer" id="drawer" @mousedown.stop="handleDrawStart($event)"
+    <canvas disable-scroll type="canvas" canvas-id="drawer" id="drawer" @mousedown.stop="handleDrawStart"
-            @mouseup.stop="handleDrawEnd" @mouseleave="handleDrawEnd"
+            @mouseup.stop="handleDrawEnd" @mouseleave="handleDrawEnd" @mousemove.stop="handleDrawing"
-            @mousemove.stop="handleDrawing($event)"
             @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.setLineWidth(3)
-          this.drawer.shadowColor = '#333'
+          this.drawer.setShadow(0, 0, 2, '#333')
-          this.drawer.strokeStyle = '#333'
+          this.drawer.setStrokeStyle('#333')
-          this.drawer.shadowBlur = 2
         }
       })
     },
     handleDrawStart(e) {
       this.drawing = true
-      const canvasX = e.offsetX
+      const {x, y} = e.changedTouches?.[0] || {}
-      const canvasY = e.offsetY
       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()
+        const {x, y} = e.changedTouches?.[0] || {}
-        let canvasX
+        // // 连接到移动的位置并上色
-        let canvasY
+        this.drawer.lineTo(x, y)
-        // 根据触发事件类型来进行定位
+        this.drawer.stroke()
-        if (e.type == "touchmove") {
+        this.drawer.draw(true)
-          canvasX = e.changedTouches[0].clientX - t.x
+        this.drawer?.beginPath()
-          canvasY = e.changedTouches[0].clientY - t.y
+        this.drawer?.moveTo(x, y)
-        } else {
-          canvasX = e.offsetX
-          canvasY = e.offsetY
-        }
-        // 连接到移动的位置并上色
-        this.drawer?.lineTo(canvasX, canvasY)
-        this.drawer?.stroke()
       }
     },
     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: #fff;
-    color: rgba(#fff, .6);
     cursor: pointer;
     right: 16px;
     top: 16px;
+    font-size: 20px;
+    z-index: 2;
 
-    .AiIcon {
+    &.left {
-      width: auto;
+      right: unset;
-      height: auto;
+      left: 16px;
-    }
-
-    &:hover {
-      color: #fff;
     }
   }
 

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: {},

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) {
+    handleDetailItem(item) {
-      return this.detail.find(e => e.id == id) || {}
+      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>