From b6dc935b17139063bd8c1648c2d7274960c6ed9f Mon Sep 17 00:00:00 2001
From: aixianling <aixianling@sinoecare.com>
Date: Wed, 7 Dec 2022 18:57:37 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E4=B8=80=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=E6=B0=91=E6=94=BF=E8=AF=84=E5=88=86=E6=96=B0=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AiDrawer.vue                   |  59 +++++++
 src/components/AiGroup.vue                    |   9 +-
 src/components/pages/sealDrawer.vue           | 147 ++++++++++++++++++
 .../hljmz/AppRecoScore/AppRecoScore.vue       |  36 ++++-
 src/project/hljmz/AppRecoScore/astDetail.vue  | 108 -------------
 .../hljmz/AppRecoScore/lib/dynaComponent.vue  |  38 +++++
 src/project/hljmz/AppRecoScore/rsDetail.vue   | 147 ++++++++++++++++++
 7 files changed, 426 insertions(+), 118 deletions(-)
 create mode 100644 src/components/AiDrawer.vue
 create mode 100644 src/components/pages/sealDrawer.vue
 delete mode 100644 src/project/hljmz/AppRecoScore/astDetail.vue
 create mode 100644 src/project/hljmz/AppRecoScore/lib/dynaComponent.vue
 create mode 100644 src/project/hljmz/AppRecoScore/rsDetail.vue

diff --git a/src/components/AiDrawer.vue b/src/components/AiDrawer.vue
new file mode 100644
index 00000000..732d7284
--- /dev/null
+++ b/src/components/AiDrawer.vue
@@ -0,0 +1,59 @@
+<template>
+  <section class="AiDrawer">
+    <AiPagePicker type="custom" :ops="ops">
+      <div class="placeholder">{{ placeholder }}</div>
+    </AiPagePicker>
+  </section>
+</template>
+
+<script>
+import AiPagePicker from "./AiPagePicker";
+
+export default {
+  name: "AiDrawer",
+  components: {AiPagePicker},
+  model: {
+    prop: "seal",
+    event: "input"
+  },
+  props: {
+    seal: String,
+    placeholder: {type: String, default: "请在此处清晰书写你的签名"},
+  },
+  data() {
+    return {
+      ops: {
+        url: "/components/pages/sealDrawer"
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AiDrawer {
+  background: #F7F7F7;
+  border: 1px solid #CCCCCC;
+  position: relative;
+
+  ::v-deep.AiPagePicker {
+    height: 200px;
+
+    & > div {
+      height: 100%;
+    }
+  }
+
+  .placeholder {
+    pointer-events: none;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    max-width: 407px;
+    text-align: center;
+    font-size: 64px;
+    color: #DDDDDD;
+  }
+}
+</style>
diff --git a/src/components/AiGroup.vue b/src/components/AiGroup.vue
index 7ccd4891..a17fbd19 100644
--- a/src/components/AiGroup.vue
+++ b/src/components/AiGroup.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="AiGroup" :class="{noBorder,description}" :style="{paddingLeft:left+'rpx'}">
+  <section class="AiGroup" :class="{noBorder,description,bottomBorder}" :style="{paddingLeft:left+'rpx'}">
     <div class="groupHeader" v-if="title" v-text="title"/>
     <slot/>
   </section>
@@ -21,7 +21,8 @@ export default {
     left: {default: 32},
     labelColor: {default: "#333"},
     description: {default: false}, //用于展示则不会又红星,会把标签的内间距去掉
-    activeStep: {default: 1}//用于步骤组件的当前步数
+    activeStep: {default: 1},//用于步骤组件的当前步数,
+    bottomBorder: Boolean
   },
   data() {
     return {
@@ -44,6 +45,10 @@ export default {
     margin-top: 16px;
   }
 
+  &.bottomBorder + .AiGroup {
+    margin-top: 0 !important;
+  }
+
   .groupHeader {
     font-weight: bold;
     font-size: 36px;
diff --git a/src/components/pages/sealDrawer.vue b/src/components/pages/sealDrawer.vue
new file mode 100644
index 00000000..82d02f16
--- /dev/null
+++ b/src/components/pages/sealDrawer.vue
@@ -0,0 +1,147 @@
+<template>
+  <section class="sealDrawer">
+    <slot name="tools"/>
+    <div class="resetSignature" @click.stop="handleClean">
+      <span>重写</span>
+    </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)"
+            @touchstart.stop="handleDrawStart" @touchend.stop="handleDrawEnd" @touchmove="handleDrawing"/>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "sealDrawer",
+  appName: "签名",
+  model: {
+    prop: "seal",
+    event: "input"
+  },
+  props: {
+    seal: String,
+    placeholder: {type: String, default: "请在此处清晰书写你的签名"},
+  },
+  data() {
+    return {
+      drawing: false,//判断是否处于绘画中
+      drawer: {},
+      drawPlaceholder: true
+    }
+  },
+  watch: {
+    drawing() {
+      this.drawPlaceholder = false
+    }
+  },
+  mounted() {
+    this.initDrawer()
+  },
+  methods: {
+    initDrawer() {
+      this.$nextTick(() => {
+        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
+        }
+      })
+    },
+    handleDrawStart(e) {
+      this.drawing = true
+      const canvasX = e.offsetX
+      const canvasY = e.offsetY
+      this.drawer?.beginPath()
+      this.drawer?.moveTo(canvasX, canvasY)
+    },
+    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()
+      }
+    },
+    handleClean() {
+      this.drawer.clearRect(0, 0, this.drawer.canvas.width, this.drawer.canvas.height)
+      this.drawPlaceholder = true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.sealDrawer {
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+  background: #F7F7F7;
+  position: relative;
+
+  #drawer {
+    width: 100%;
+    height: 100%;
+    display: block;
+    cursor: crosshair;
+  }
+
+  .resetSignature {
+    position: absolute;
+    width: 76px;
+    height: 32px;
+    background: rgba(#000, .5);
+    border-radius: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    color: rgba(#fff, .6);
+    cursor: pointer;
+    right: 16px;
+    top: 16px;
+
+    .AiIcon {
+      width: auto;
+      height: auto;
+    }
+
+    &:hover {
+      color: #fff;
+    }
+  }
+
+  .placeholder {
+    pointer-events: none;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    max-width: 407px;
+    text-align: center;
+    font-size: 64px;
+    color: #DDDDDD;
+  }
+}
+</style>
diff --git a/src/project/hljmz/AppRecoScore/AppRecoScore.vue b/src/project/hljmz/AppRecoScore/AppRecoScore.vue
index 8b41da29..3572ccd5 100644
--- a/src/project/hljmz/AppRecoScore/AppRecoScore.vue
+++ b/src/project/hljmz/AppRecoScore/AppRecoScore.vue
@@ -5,12 +5,12 @@
     </div>
     <AiTabPanes :tabs="tabs" v-model="search.type" white @change="handChangeTab"/>
     <AiGroup>
-      <div v-for="item in list" :key="item.id" class="listItem pad-r32" flex @click="handleDetail(item.id)">
+      <div v-for="item in list" :key="item.id" class="listItem pad-r32" flex @click="handleDetail(item)">
         <div class="fill mar-r20">
-          <h3 class="mar-b8" v-text="item.templateName"/>
-          <div class="sub" v-text="item.taskTitle"/>
+          <h3 class="mar-b8" v-text="item.taskTitle"/>
+          <div class="sub" v-text="`截止时间：${item.endTime}`"/>
         </div>
-        <div class="status" :class="{finish:item.unfinishedCount==0}">{{ item.unfinishedCount == 0 ? '已完成' : '尚未完成' }}</div>
+        <item-status :item="item"/>
       </div>
     </AiGroup>
     <AiEmpty class="pad-t96" v-if="!list.length"/>
@@ -21,6 +21,20 @@
 export default {
   name: "AppRecoScore",
   appName: "考核系统",
+  components: {
+    itemStatus: {
+      props: {
+        item: {default: () => ({})}
+      },
+      render(h) {
+        const {commitTime, examineStatus} = this.item,
+            color = this.$dict.getColor("integralDeclareStatus", examineStatus)
+        return h("div",
+            {class: "status", style: {color, backgroundColor: `rgba(${color},.1)`}},
+            !!commitTime ? this.$dict.getLabel("integralDeclareStatus", examineStatus) : "待填写")
+      }
+    }
+  },
   data() {
     return {
       current: 1,
@@ -53,10 +67,14 @@ export default {
         }
       })
     },
-    handleDetail(id) {
-      uni.navigateTo({url: "./astDetail?id=" + id})
+    handleDetail(item) {
+      const {taskId, taskDetailId} = item
+      uni.navigateTo({url: this.$qs.stringifyUrl({url: "./rsDetail", query: {taskId, taskDetailId}})})
     }
   },
+  created() {
+    this.$dict.load("integralDeclareStatus")
+  },
   onShow() {
     this.current = 1
     this.getList()
@@ -93,7 +111,7 @@ export default {
 
     .sub {
       font-size: 26px;
-      color: #3975C6;
+      color: #FF883C;
       line-height: 36px;
     }
 
@@ -105,7 +123,9 @@ export default {
 
     .status {
       font-size: 28px;
-      color: #FFA938;
+      color: #FF883C;
+      background-color: rgba(#FF883C, .1);
+      padding: 4px 16px;
 
       &.finish {
         color: #1CCEB0;
diff --git a/src/project/hljmz/AppRecoScore/astDetail.vue b/src/project/hljmz/AppRecoScore/astDetail.vue
deleted file mode 100644
index 5ba8ae4c..00000000
--- a/src/project/hljmz/AppRecoScore/astDetail.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<template>
-  <section class="astDetail">
-    <AiGroup left="48" class="header mar-b16">
-      <h3 flex class="mar-b8">{{ detail.templateName }}</h3>
-      <div class="color-999">开始日期：{{ $dateFormat(detail.beginTime, "YYYY-MM-DD HH:mm") }}</div>
-      <div class="color-999">截止日期：{{ $dateFormat(detail.endTime, "YYYY-MM-DD HH:mm") }}</div>
-    </AiGroup>
-    <AiGroup title="参评人员" description class="pad-t32">
-      <div flex class="pad-r32 pad-t16 pad-b16" v-for="item in list" :key="item.id" @click="handleScore(item)">
-        <div flex class="fill">
-          <AiImage class="mar-r32 circle avatar" :src="item.evaluatorsAvatar"/>
-          <div>
-            <h4>{{ item.evaluatorsName }}</h4>
-            <div class="color-999">{{ item.evaluatorsDepartments }}</div>
-          </div>
-        </div>
-        <div class="result" :class="{finish:!item.fillable}" v-text="item.resultLabel"/>
-      </div>
-      <AiEmpty class="pad-b32" v-if="!list.length"/>
-    </AiGroup>
-  </section>
-</template>
-
-<script>
-export default {
-  name: "astDetail",
-  appName: "考核评分",
-  data() {
-    return {
-      detail: {},
-      current: 1,
-      total: 0,
-      list: []
-    }
-  },
-  methods: {
-    getDetail() {
-      const {id} = this.$route.query
-      return this.$http.post("/app/appassessmentscortask/taskTemplateDetail", null, {
-        params: {id}
-      }).then(res => {
-        if (res?.data) {
-          this.detail = res.data
-        }
-      })
-    },
-    getList() {
-      const {id} = this.$route.query,
-          {current, list, total} = this
-      if (current == 1 || list.length < total) {
-        current == 1 && (this.list = [])
-        this.$http.post("/app/appassessmentscortask/myScoreList", null, {
-          params: {id, size: 999, current}
-        }).then(res => {
-          if (res?.data) {
-            res.data.records.map(e => {
-              e.fillable = !e.commitTime && this.detail.status == 1
-              e.resultLabel = !!e.commitTime ? `${e.totalScore || 0}分` : e.fillable ? "去填报" : "未填报"
-            })
-            this.list = [this.list, res.data.records].flat().filter(Boolean)
-            this.total = res.data.total
-          }
-        })
-      }
-    },
-    handleScore(item) {
-      if (this.detail.status == 1) {
-        const {id, templateId: tid} = item
-        uni.navigateTo({url: `/apps/AppAskForm/AppForm?id=${id}&tid=${tid}&from=AppAssessmentScoreTask` + (!item.fillable ? '&result=1' : '')})
-      } else {
-        this.$u.toast("任务未开始或已结束,无法填报!")
-      }
-    }
-  },
-  onShow() {
-    document.title = this.$options.appName
-    this.current = 1
-    this.getDetail().then(this.getList)
-  },
-  onReachBottom() {
-    this.current++
-    this.getList()
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.astDetail {
-  background: #f5f5f5;
-
-  .header {
-    padding: 32px 0;
-  }
-
-  h3 {
-    font-size: 40px;
-    min-height: 56px;
-  }
-
-  .result {
-    color: #FFA938;
-
-    &.finish {
-      color: #2C51CE;
-    }
-  }
-}
-</style>
diff --git a/src/project/hljmz/AppRecoScore/lib/dynaComponent.vue b/src/project/hljmz/AppRecoScore/lib/dynaComponent.vue
new file mode 100644
index 00000000..0d9ffd49
--- /dev/null
+++ b/src/project/hljmz/AppRecoScore/lib/dynaComponent.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="dynaComponent">
+    <AiDate v-if="item.fieldType=='date'" v-model="value"/>
+    <textarea v-else-if="item.fieldType=='textarea'" v-model="value" placeholder="请输入"/>
+    <AiDrawer v-else-if="item.fieldType=='sign'" v-model="value" placeholder="开始签名"/>
+    <input v-else v-model="value" placeholder="请输入"/>
+
+  </section>
+</template>
+
+<script>
+import AiDate from "../../../../components/AiDate";
+import AiDrawer from "../../../../components/AiDrawer";
+
+export default {
+  name: "dynaComponent",
+  components: {AiDrawer, AiDate},
+  props: {
+    item: {default: () => ({})}
+  },
+  watch: {
+    value(v) {
+      this.$emit("update:item", {...this.item, fieldValue: v})
+    }
+  },
+  data() {
+    return {
+      value: ""
+    }
+  },
+  methods: {},
+}
+</script>
+
+<style lang="scss" scoped>
+.dynaComponent {
+}
+</style>
diff --git a/src/project/hljmz/AppRecoScore/rsDetail.vue b/src/project/hljmz/AppRecoScore/rsDetail.vue
new file mode 100644
index 00000000..05ddc50c
--- /dev/null
+++ b/src/project/hljmz/AppRecoScore/rsDetail.vue
@@ -0,0 +1,147 @@
+<template>
+  <section class="rsDetail">
+    <AiGroup class="header" bottomBorder>
+      <h3 flex class="mar-b8">{{ task.title }}</h3>
+      <div class="color-999">截止日期：{{ $dateFormat(task.endTime, "YYYY-MM-DD HH:mm") }}</div>
+    </AiGroup>
+    <AiGroup description bottomBorder v-for="(next,label) in form" :key="label" :title="label" class="pad-t32">
+      <template v-for="(item,key) in next">
+        <template v-if="!/\d/.test(key)">
+          <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"/>
+          </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"/>
+        </AiItem>
+      </template>
+    </AiGroup>
+  </section>
+</template>
+
+<script>
+import AiItem from "../../../components/AiItem";
+import AiGroup from "../../../components/AiGroup";
+import DynaComponent from "./lib/dynaComponent";
+
+export default {
+  name: "rsDetail",
+  components: {DynaComponent, AiGroup, AiItem},
+  appName: "考核评分",
+  data() {
+    return {
+      task: {},
+      detail: [],//动态表单
+    }
+  },
+  computed: {
+    form() {
+      let form = {}
+      this.detail.map(e => {
+        if (e.inputType == "0") {
+          if (!form[e.groupLevel1Name]) {
+            form[e.groupLevel1Name] = {}
+          }
+          if (!!e.groupLevel2Name) {
+            form[e.groupLevel1Name][e.groupLevel2Name] = {...form[e.groupLevel1Name][e.groupLevel2Name], [e.id]: e}
+          } else {
+            form[e.groupLevel1Name] = {...form[e.groupLevel1Name], [e.id]: e}
+          }
+        }
+      })
+      return form
+    }
+  },
+  methods: {
+    getTask() {
+      const {taskId: id} = this.$route.query
+      return this.$http.post("/app/appassessmentscorev2task/queryDetailById", null, {
+        params: {id}
+      }).then(res => {
+        if (res?.data) {
+          this.task = res.data
+        }
+      })
+    },
+    getDetail() {
+      const {taskDetailId} = this.$route.query
+      return this.$http.post("/app/appassessmentscorev2task/queryDataInfoById2", null, {
+        params: {taskDetailId}
+      }).then(res => {
+        if (res?.data) {
+          this.detail = res.data
+        }
+      })
+    },
+    getItem(id) {
+      return this.detail.find(e => e.id == id) || {}
+    }
+  },
+  onShow() {
+    document.title = this.$options.appName
+    this.getDetail()
+    this.getTask()
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.rsDetail {
+  background: #f5f5f5;
+  font-family: PingFang-SC;
+
+  .header {
+    padding: 32px 0;
+  }
+
+  .subLabel {
+    font-weight: bold;
+    font-size: 28px;
+    color: #687DA6;
+    padding-top: 16px;
+    padding-bottom: 16px;
+  }
+
+  h3 {
+    font-size: 40px;
+    min-height: 56px;
+  }
+
+  .result {
+    color: #FFA938;
+
+    &.finish {
+      color: #2C51CE;
+    }
+  }
+
+  ::v-deep .groupHeader {
+    position: relative;
+
+    &:before {
+      position: absolute;
+      display: block;
+      content: " ";
+      width: 4px;
+      height: 24px;
+      background: #3975C6;
+      left: -8px;
+      top: 50%;
+      transform: translate(-100%, -50%);
+    }
+  }
+
+  ::v-deep .AiItem {
+    .labelPane {
+      flex-wrap: wrap;
+
+      .label {
+        font-weight: bold;
+      }
+    }
+  }
+}
+</style>