hrp-ui-base 1.0.1 → 1.0.2

package/packages/approval-process/packages/components/sign/modules/full-screen-sign.vue

@@ -0,0 +1,20 @@
+<template>
+    <div class="fixBoxFullScreen">
+
+
+    </div>
+</template>
+<script lang="ts" setup>
+
+</script>
+<style lang="scss" scoped>
+.fixBoxFullScreen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 2999;
+    background: #0bbd8725;
+}
+</style>

package/packages/approval-process/packages/components/urge-dialog/index.vue

@@ -0,0 +1,121 @@
+<!-- 
+ * @description: 
+ * @fileName: index.vue 
+ * @author: huatuo 
+!-->
+<template>
+  <div>
+    <el-dialog v-model="dialogVisible" title="催办" width="800">
+      <div class="content-box">
+        <div class="content-line-box">
+          <div style="width:80px;font-size: 14px;color: var(--custom-theme-text-1);">接收人：</div>
+          <div style="display:flex;width:calc(100% - 80px);flex-direction: row;justify-content: flex-start;align-items: flex-start;word-break: break-all;font-size: 14px;color: var(--custom-theme-text-1);">
+            {{ urgeMemberList.map((item) => item.userName).join(',') }}
+          </div>
+          <span v-if="(!(Array.isArray(urgeMemberList) && urgeMemberList.length > 0))">-</span>
+        </div>
+        <div class="content-line-box">
+          <span>催办标题：</span>
+          <span style="display:block;width:calc(100% - 80px);">{{ (userName ? userName : '-') + '提醒您审批' + props.title
+          }}</span>
+        </div>
+        <div class="content-line-box">
+          <span>催办内容：</span>
+          <el-input v-model="messageValue" :autosize="{ minRows: 2 }" type="textarea" placeholder="请输入..." maxlength="200"
+            show-word-limit ref="sendMessageValueInputRef" class="comment-input-box" />
+
+        </div>
+      </div>
+      <template #footer>
+
+        <div class="dialog-footer">
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="urgeTodo">
+            确认
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, reactive, } from 'vue'
+import { ElMessageBox, ElMessage } from "element-plus"
+import FlowInstanceController from "hrp-ui-base/api/bms/flow/FlowInstanceController";
+import UserBaseInfoVo from "hrp-ui-base/api/bms/flow/bo/UserBaseInfoVo"
+import HomeController from "hrp-ui-base/api/bms/home/HomeController";
+
+const dialogVisible = ref(false)
+const formId = ref<string>("")
+const taskId = ref<string>("")
+const messageValue = ref<string>("")
+const props = defineProps(["title"])
+const emits = defineEmits(["success"])
+const urgeTodo = async () => {
+  await FlowInstanceController.urgeTodoFlowInstance({ businessFormId: formId.value, message: messageValue.value }).then((data) => {
+    if (data.code == 200) {
+      ElMessage.success("催办成功！")
+      emits("success")
+      dialogVisible.value = false
+    }
+  })
+}
+// open 方法 
+const open = (aimFormId: string, aimTaskId: string) => {
+  dialogVisible.value = true
+  formId.value = aimFormId
+  taskId.value = aimTaskId
+  messageValue.value = "" // 清空催办内容
+  getUserConfig()
+  getUrgeMemberList()
+
+}
+const userName = ref("")
+const getUserConfig = async () => {
+  await HomeController.getPersonalization().then((data: any) => {
+    if (data.code == 200 && data.res) {
+      userName.value = data.res.userBaseInfoVo.userName
+    }
+  })
+}
+/** 获取催办的人员列表 */
+const urgeMemberList = ref<UserBaseInfoVo[]>([])
+const getUrgeMemberList = async () => {
+  await FlowInstanceController.urgeTodoUserList(taskId.value).then((data) => {
+    if (data.code == 200 && data.res) {
+      urgeMemberList.value = data.res
+    }
+  })
+}
+defineExpose({
+  open
+})
+</script>
+
+<style scoped lang='scss'>
+.content-box {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  width: 100%;
+  height: auto;
+}
+
+.content-line-box {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  margin-bottom: 12px;
+
+  span {
+    font-size: 14px;
+    color: var(--custom-theme-text-1);
+    display: block;
+    width: 80px;
+  }
+}
+</style>

package/packages/approval-process/packages/components/vue-esign/index.vue

@@ -0,0 +1,289 @@
+<template>
+  <canvas ref="canvas" @mousedown="mouseDown" @mousemove="mouseMove" @mouseup="mouseUp"
+  @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd"></canvas>
+</template>
+
+<script>
+export default {
+  props: {
+    width: {
+      type: Number,
+      default: 800
+    },
+    height: {
+      type: Number,
+      default: 300
+    },
+    lineWidth: {
+      type: Number,
+      default: 4
+    },
+    lineColor: {
+      type: String,
+      default: '#000000'
+    },
+    bgColor: {
+      type: String,
+      default: ''
+    },
+    isCrop: {
+      type: Boolean,
+      default: false
+    },
+    isClearBgColor: {
+      type: Boolean,
+      default: true
+    },
+    format: {
+      type: String,
+      default: 'image/png'
+    },
+    quality: {
+      type: Number,
+      default: 1
+    }
+  },
+  data () {
+    return {
+      hasDrew: false,
+      resultImg: '',
+      points: [],
+      canvasTxt: null,
+      startX: 0,
+      startY: 0,
+      isDrawing: false,
+      sratio: 1
+    }
+  },
+  computed: {
+    ratio () {
+      return this.height / this.width
+    },
+    stageInfo () {
+      return this.$refs.canvas.getBoundingClientRect()
+    },
+    myBg () {
+      return this.bgColor ? this.bgColor : 'rgba(255, 255, 255, 0)'
+    }
+  },
+  watch: {
+    'myBg': function (newVal) {
+      this.$refs.canvas.style.background = newVal
+    }
+  },
+  beforeMount () {
+    window.addEventListener('resize', this.$_resizeHandler)
+  },
+  beforeDestroy () {
+    window.removeEventListener('resize', this.$_resizeHandler)
+  },
+  mounted () {
+    const canvas = this.$refs.canvas
+    canvas.height = this.height
+    canvas.width = this.width
+    canvas.style.background = this.myBg
+    this.$_resizeHandler()
+    // 在画板以外松开鼠标后冻结画笔
+    document.onmouseup = () => {
+      this.isDrawing = false
+    }
+  },
+  methods: {
+    $_resizeHandler () {
+      const canvas = this.$refs.canvas
+      canvas.style.width = this.width + "px"
+      const realw = parseFloat(window.getComputedStyle(canvas).width)
+      canvas.style.height = this.ratio * realw + "px";
+      this.canvasTxt = canvas.getContext('2d')
+      this.canvasTxt.scale(1 * this.sratio, 1 * this.sratio)
+      this.sratio = realw / this.width
+      this.canvasTxt.scale(1 / this.sratio, 1 / this.sratio)
+    },
+    // pc
+    mouseDown (e) {
+      e = e || event
+      e.preventDefault()
+      this.isDrawing = true
+      this.hasDrew = true
+      let obj = {
+        x: e.offsetX,
+        y: e.offsetY
+      }
+      this.drawStart(obj)
+    },
+    mouseMove (e) {
+      e = e || event
+      e.preventDefault()
+      if (this.isDrawing) {
+        let obj = {
+          x: e.offsetX,
+          y: e.offsetY
+        }
+        this.drawMove(obj)
+      }
+    },
+    mouseUp (e) {
+      e = e || event
+      e.preventDefault()
+      let obj = {
+        x: e.offsetX,
+        y: e.offsetY
+      }
+      this.drawEnd(obj)
+      this.isDrawing = false
+    },
+    // mobile
+    touchStart (e) {
+      e = e || event
+      e.preventDefault()
+      this.hasDrew = true
+      if (e.touches.length === 1) {
+        let obj = {
+          x: e.targetTouches[0].clientX - this.$refs.canvas.getBoundingClientRect().left,
+          y: e.targetTouches[0].clientY - this.$refs.canvas.getBoundingClientRect().top
+        }
+        this.drawStart(obj)
+      }
+    },
+    touchMove (e) {
+      e = e || event
+      e.preventDefault()
+      if (e.touches.length === 1) {
+        let obj = {
+          x: e.targetTouches[0].clientX - this.$refs.canvas.getBoundingClientRect().left,
+          y: e.targetTouches[0].clientY - this.$refs.canvas.getBoundingClientRect().top
+        }
+        this.drawMove(obj)
+      }
+    },
+    touchEnd (e) {
+      e = e || event
+      e.preventDefault()
+      if (e.touches.length === 1) {
+        let obj = {
+          x: e.targetTouches[0].clientX - this.$refs.canvas.getBoundingClientRect().left,
+          y: e.targetTouches[0].clientY - this.$refs.canvas.getBoundingClientRect().top
+        }
+        this.drawEnd(obj)
+      }
+    },
+    // 绘制
+    drawStart (obj) {
+      this.startX = obj.x
+      this.startY = obj.y
+      this.canvasTxt.beginPath()
+      this.canvasTxt.moveTo(this.startX, this.startY)
+      this.canvasTxt.lineTo(obj.x, obj.y)
+      this.canvasTxt.lineCap = 'round'
+      this.canvasTxt.lineJoin = 'round'
+      this.canvasTxt.lineWidth = this.lineWidth * this.sratio
+      this.canvasTxt.stroke()
+      this.canvasTxt.closePath()
+      this.points.push(obj)
+    },
+    drawMove (obj) {
+      this.canvasTxt.beginPath()
+      this.canvasTxt.moveTo(this.startX, this.startY)
+      this.canvasTxt.lineTo(obj.x, obj.y)
+      this.canvasTxt.strokeStyle = this.lineColor
+      this.canvasTxt.lineWidth = this.lineWidth * this.sratio
+      this.canvasTxt.lineCap = 'round'
+      this.canvasTxt.lineJoin = 'round'
+      this.canvasTxt.stroke()
+      this.canvasTxt.closePath()
+      this.startY = obj.y
+      this.startX = obj.x
+      this.points.push(obj)
+    },
+    drawEnd (obj) {
+      this.canvasTxt.beginPath()
+      this.canvasTxt.moveTo(this.startX, this.startY)
+      this.canvasTxt.lineTo(obj.x, obj.y)
+      this.canvasTxt.lineCap = 'round'
+      this.canvasTxt.lineJoin = 'round'
+      this.canvasTxt.stroke()
+      this.canvasTxt.closePath()
+      this.points.push(obj)
+      this.points.push({x: -1, y: -1})
+    },
+    // 操作
+    generate (options) {
+      let imgFormat = options && options.format ? options.format: this.format
+      let imgQuality = options && options.quality ? options.quality: this.quality
+      const pm =  new Promise((resolve, reject) => {
+        if (!this.hasDrew) {
+          reject(`Warning: Not Signned!`)
+          return
+        }
+        var resImgData = this.canvasTxt.getImageData(0, 0, this.$refs.canvas.width, this.$refs.canvas.height)
+        this.canvasTxt.globalCompositeOperation = "destination-over"
+        this.canvasTxt.fillStyle = this.myBg
+        this.canvasTxt.fillRect(0,0,this.$refs.canvas.width ,this.$refs.canvas.height)
+        this.resultImg = this.$refs.canvas.toDataURL(imgFormat, imgQuality)
+        var resultImg = this.resultImg
+        this.canvasTxt.clearRect(0, 0, this.$refs.canvas.width ,this.$refs.canvas.height)
+        this.canvasTxt.putImageData(resImgData, 0, 0)
+        this.canvasTxt.globalCompositeOperation = "source-over"
+        if (this.isCrop) {
+          const crop_area = this.getCropArea(resImgData.data)
+          var crop_canvas = document.createElement('canvas')
+          const crop_ctx = crop_canvas.getContext('2d')
+          crop_canvas.width = crop_area[2] - crop_area[0]
+          crop_canvas.height = crop_area[3] - crop_area[1]
+          const crop_imgData = this.canvasTxt.getImageData(...crop_area)
+          crop_ctx.globalCompositeOperation = "destination-over"
+          crop_ctx.putImageData(crop_imgData, 0, 0)
+          crop_ctx.fillStyle = this.myBg
+          crop_ctx.fillRect(0, 0, crop_canvas.width , crop_canvas.height)
+          resultImg = crop_canvas.toDataURL(imgFormat, imgQuality)
+          crop_canvas = null
+        }
+        resolve(resultImg)
+      })
+      return pm
+    },
+    reset () {
+      this.canvasTxt.clearRect(
+        0,
+        0,
+        this.$refs.canvas.width,
+        this.$refs.canvas.height
+      )
+      if (this.isClearBgColor) {
+        this.$emit('update:bgColor', '')
+        this.$refs.canvas.style.background = 'rgba(255, 255, 255, 0)'
+      }
+      this.points = []
+      this.hasDrew = false
+      this.resultImg = ''
+    },
+    getCropArea (imgData) {
+      var topX = this.$refs.canvas.width; var btmX = 0; var topY = this.$refs.canvas.height; var btnY = 0
+      for (var i = 0; i < this.$refs.canvas.width; i++) {
+        for (var j = 0; j < this.$refs.canvas.height; j++) {
+          var pos = (i + this.$refs.canvas.width * j) * 4
+          if (imgData[pos] > 0 || imgData[pos + 1] > 0 || imgData[pos + 2] || imgData[pos + 3] > 0) {
+            btnY = Math.max(j, btnY)
+            btmX = Math.max(i, btmX)
+            topY = Math.min(j, topY)
+            topX = Math.min(i, topX)
+          }
+        }
+      }
+      topX++
+      btmX++
+      topY++
+      btnY++
+      const data = [topX, topY, btmX, btnY]
+      return data
+    }
+  }
+}
+</script>
+
+<style scoped>
+canvas {
+  max-width: 100%;
+  display: block;
+}
+</style>

package/packages/approval-process/packages/flow/approve-component/approve-success.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="flexColumnCenterCenter pagebox">
+    <svg t="1685501957729" class="icon pageboxIcon" viewBox="0 0 1024 1024" version="1.1"
+      xmlns="http://www.w3.org/2000/svg" p-id="4801" width="200" height="200">
+      <path
+        d="M450.048 919.552H200.192c-15.36 0-28.16-12.8-28.16-28.16v-757.76c0-15.36 12.8-28.16 28.16-28.16H824.32c15.36 0 28.16 12.8 28.16 28.16v412.672c0 15.36-15.36 28.16-30.72 28.16s-30.72-12.8-30.72-28.16V166.912H233.472v690.688h216.576c15.36 0 28.16 15.36 28.16 30.72 0 15.872-12.288 31.232-28.16 31.232z"
+        fill="#67c23a" p-id="4802"></path>
+      <path
+        d="M667.136 366.592H343.04c-15.36 0-28.16-12.8-28.16-28.16s12.8-28.16 28.16-28.16h324.608c15.36 0 28.16 12.8 28.16 28.16s-12.8 28.16-28.672 28.16z m-120.32 137.728H343.04c-15.36 0-28.16-12.8-28.16-28.16s12.8-28.16 28.16-28.16h204.288c15.36 0 28.16 12.8 28.16 28.16s-12.8 28.16-28.672 28.16zM452.608 645.12H343.04c-15.36 0-28.16-12.8-28.16-28.16S327.68 588.8 343.04 588.8h110.08c15.36 0 28.16 12.8 28.16 28.16s-13.312 28.16-28.672 28.16z m212.992 289.792c-8.192 0-16.384-3.072-23.04-9.728l-119.296-122.368c-12.288-12.8-12.288-32.768 0.512-45.056 12.8-12.288 32.768-12.288 45.056 0.512l96.768 99.328 193.536-188.416c12.8-12.288 32.768-12.288 45.056 0.512 12.288 12.8 12.288 32.768-0.512 45.056l-216.064 210.944c-6.144 6.144-14.336 9.216-22.016 9.216z"
+        fill="#67c23a" p-id="4803"></path>
+    </svg>
+    <div class="pageboxMessage">
+      当前表单提交成功，请退出当前页面
+    </div>
+    <!-- 暂时隐藏 -->
+    <!-- <el-button type="primary" @click="goNextAudit" class="pageboxButton" size="default">下条审批</el-button> -->
+    <el-button @click="back" class="pageboxButton" size="default" style="width:88px">返回</el-button>
+  </div>
+</template>
+<script lang="ts" setup>
+// import FlowCrudController from "hrp-ui-base/api/work-flow/form-related/formRelatedController";
+import FlowInstanceController from "hrp-ui-base/api/bms/flow/FlowInstanceController"
+import { ElMessage } from "element-plus";
+const closeCurentPage = () => {
+  window.location.href = "about:blank"; window.close();
+}
+const reload = () => {
+  location.reload();
+}
+const emits = defineEmits(['next', "backList"])
+const goNextAudit = async () => {
+  await FlowInstanceController.getNextInstance().then((data) => {
+    if (data.code == 200 && data.res) {
+      if (data.res.businessFormId && data.res.approveUrl) {
+        let auditPath = data.res.approveUrl.replace('/:formId', '/' + data.res.businessFormId).replace('/:id', '/' + data.res.businessFormId).replace('/:taskId', '/' + data.res.nodeId)
+        emits("next", {
+          url: auditPath,
+          funSystem: data.res.funSystem,
+          menuId: data.res.menuId,
+          menuName: data.res.menuName,
+          breadcrumbName: data.res.breadcrumbName,
+        })
+      } 
+      // else {
+      //   ElMessage.error('当前配置有误，请检查流应用配置！')
+      // }
+    }
+  })
+}
+/** 返回 */
+const back = () => {
+  emits("backList")
+}
+</script>
+<style lang="scss" scoped>
+@use '../styles/common.scss';
+
+.pagebox {
+  width: 100%;
+  height: 100%;
+  background: var(--custom-theme-fill-7);
+
+  .pageboxIcon {
+    font-size: 30px;
+    width: 100px;
+    height: 100px;
+    margin-bottom: 18px;
+  }
+
+  .pageboxMessage {
+    font-size: 18px;
+    font-weight: bold;
+    color: var(--el-text-color-regular);
+    margin-bottom: 28px;
+  }
+
+  .pageboxButton {
+    margin-bottom: 8px;
+    margin-left: 0px;
+  }
+}
+</style>

package/packages/approval-process/packages/flow/approve-component/route-params-error.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="flexColumnCenterCenter pagebox">
+    <svg t="1685502217846" class="icon pageboxIcon" viewBox="0 0 1024 1024" version="1.1"
+      xmlns="http://www.w3.org/2000/svg" p-id="9355" width="200" height="200">
+      <path
+        d="M955.7 856l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zM480 416c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v184c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V416z m32 352c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48z"
+        p-id="9356" fill="#d81e06"></path>
+    </svg>
+    <div class="pageboxMessage">
+      当前数据不存在或被删除，请退出当前页面
+    </div>
+    <el-button type="primary" @click="back" class="pageboxButton" size="default" style="width:88px">返回</el-button>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue'
+const emits = defineEmits(["backList"])
+const closeCurentPage = () => {
+  window.location.href = "about:blank"; window.close();
+}
+/** 返回 */
+const back = () => {
+  emits("backList")
+}
+</script>
+<style lang="scss" scoped>
+@use '../styles/common.scss';
+
+.pagebox {
+  width: 100%;
+  height: 100%;
+  background: var(--custom-theme-fill-7);
+
+  .pageboxIcon {
+    font-size: 30px;
+    width: 100px;
+    height: 100px;
+    margin-bottom: 18px;
+  }
+
+  .pageboxMessage {
+    font-size: 18px;
+    font-weight: bold;
+    color: rgba(0, 0, 0, 0.75);
+    margin-bottom: 28px;
+  }
+
+}
+</style>

package/packages/approval-process/packages/flow/approve-component/submit-success.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="flexColumnCenterCenter pagebox">
+    <svg t="1685501957729" class="icon pageboxIcon" viewBox="0 0 1024 1024" version="1.1"
+      xmlns="http://www.w3.org/2000/svg" p-id="4801" width="200" height="200">
+      <path
+        d="M450.048 919.552H200.192c-15.36 0-28.16-12.8-28.16-28.16v-757.76c0-15.36 12.8-28.16 28.16-28.16H824.32c15.36 0 28.16 12.8 28.16 28.16v412.672c0 15.36-15.36 28.16-30.72 28.16s-30.72-12.8-30.72-28.16V166.912H233.472v690.688h216.576c15.36 0 28.16 15.36 28.16 30.72 0 15.872-12.288 31.232-28.16 31.232z"
+        fill="#67c23a" p-id="4802"></path>
+      <path
+        d="M667.136 366.592H343.04c-15.36 0-28.16-12.8-28.16-28.16s12.8-28.16 28.16-28.16h324.608c15.36 0 28.16 12.8 28.16 28.16s-12.8 28.16-28.672 28.16z m-120.32 137.728H343.04c-15.36 0-28.16-12.8-28.16-28.16s12.8-28.16 28.16-28.16h204.288c15.36 0 28.16 12.8 28.16 28.16s-12.8 28.16-28.672 28.16zM452.608 645.12H343.04c-15.36 0-28.16-12.8-28.16-28.16S327.68 588.8 343.04 588.8h110.08c15.36 0 28.16 12.8 28.16 28.16s-13.312 28.16-28.672 28.16z m212.992 289.792c-8.192 0-16.384-3.072-23.04-9.728l-119.296-122.368c-12.288-12.8-12.288-32.768 0.512-45.056 12.8-12.288 32.768-12.288 45.056 0.512l96.768 99.328 193.536-188.416c12.8-12.288 32.768-12.288 45.056 0.512 12.288 12.8 12.288 32.768-0.512 45.056l-216.064 210.944c-6.144 6.144-14.336 9.216-22.016 9.216z"
+        fill="#67c23a" p-id="4803"></path>
+    </svg>
+    <div class="pageboxMessage">
+      当前表单提交成功，请退出当前页面
+    </div>
+    <el-button type="primary" @click="submitNew" class="pageboxButton" size="default">再次发起</el-button>
+    <el-button @click="back" class="pageboxButton" size="default" style="width:88px">返回</el-button>
+  </div>
+</template>
+<script lang="ts" setup>
+const emits = defineEmits(['success', "backList"])
+const closeCurentPage = () => {
+  window.location.href = "about:blank"; window.close();
+}
+const submitNew = () => {
+  emits("success")
+}
+/** 返回 */
+const back = () => {
+  emits("backList")
+}
+</script>
+<style lang="scss" scoped>
+@use '../styles/common.scss';
+
+.pagebox {
+  width: 100%;
+  height: 100%;
+  background: var(--custom-theme-fill-7);
+
+  .pageboxIcon {
+    font-size: 30px;
+    width: 100px;
+    height: 100px;
+    margin-bottom: 18px;
+  }
+
+  .pageboxMessage {
+    font-size: 18px;
+    font-weight: bold;
+    color: var(--el-text-color-regular);
+    margin-bottom: 28px;
+  }
+
+  .pageboxButton {
+    margin-bottom: 8px;
+    margin-left: 0px;
+  }
+}
+</style>