three-trees-ui 1.0.0

package/packages/Preview/src/watermark.js

@@ -0,0 +1,124 @@
+export default function watermark(teleport, options = {}) {
+  //默认设置
+  const defaultOptions = {
+    text: () => 'watermark',
+    watermark_x: 20, //水印起始位置x轴坐标
+    watermark_y: 80, //水印起始位置Y轴坐标
+    watermark_rows: 0, //水印行数
+    watermark_cols: 0, //水印列数
+    watermark_x_space: 50, //水印x轴间隔
+    watermark_y_space: 50, //水印y轴间隔
+    watermark_color: '#ccc', //水印字体颜色
+    watermark_alpha: 0.4, //水印透明度
+    watermark_fontsize: '14px', //水印字体大小
+    watermark_font: '微软雅黑', //水印字体
+    watermark_width: 166, //水印宽度
+    watermark_height: 100, //水印长度
+    watermark_angle: 20, //水印倾斜度数
+  }
+  const settings = Object.assign(defaultOptions, options)
+  const container = document.querySelector(teleport)
+  const containerWidth = container.clientWidth
+  const offsetLeft = container.offsetLeft
+  settings.watermark_x = offsetLeft
+  if (arguments.length === 1 && typeof arguments[0] === 'object') {
+    const src = arguments[0] || {}
+    for (const key in src) {
+      if (src[key] && settings[key] && src[key] === settings[key]) continue
+      else if (src[key]) settings[key] = src[key]
+    }
+  }
+  const oTemp = document.createDocumentFragment()
+  //获取页面最大宽度
+  let page_width = containerWidth
+  //获取页面最大高度
+  let page_height = Math.max(
+    document.body.scrollHeight,
+    document.body.clientHeight
+  ) //+ 450;
+  page_height = Math.max(page_height, window.innerHeight - 30)
+  //如果将水印列数设置为0，或水印列数设置过大，超过页面最大宽度，则重新计算水印列数和水印x轴间隔
+  if (
+    settings.watermark_cols == 0 ||
+    parseInt(
+      settings.watermark_x +
+        settings.watermark_width * settings.watermark_cols +
+        settings.watermark_x_space * (settings.watermark_cols - 1)
+    ) > page_width
+  ) {
+    settings.watermark_cols = parseInt(
+      (page_width - settings.watermark_x + settings.watermark_x_space) /
+        (settings.watermark_width + settings.watermark_x_space)
+    )
+    settings.watermark_x_space = parseInt(
+      (page_width -
+        settings.watermark_x -
+        settings.watermark_width * settings.watermark_cols) /
+        (settings.watermark_cols - 1)
+    )
+  }
+  //如果将水印行数设置为0，或水印行数设置过大，超过页面最大长度，则重新计算水印行数和水印y轴间隔
+  if (
+    settings.watermark_rows == 0 ||
+    parseInt(
+      settings.watermark_y +
+        settings.watermark_height * settings.watermark_rows +
+        settings.watermark_y_space * (settings.watermark_rows - 1)
+    ) > page_height
+  ) {
+    settings.watermark_rows = parseInt(
+      (settings.watermark_y_space + page_height - settings.watermark_y) /
+        (settings.watermark_height + settings.watermark_y_space)
+    )
+    settings.watermark_y_space = parseInt(
+      (page_height -
+        settings.watermark_y -
+        settings.watermark_height * settings.watermark_rows) /
+        (settings.watermark_rows - 1)
+    )
+  }
+  let x
+  let y
+  for (var i = 0; i < settings.watermark_rows; i++) {
+    y =
+      settings.watermark_y +
+      (settings.watermark_y_space + settings.watermark_height) * i
+    for (var j = 0; j < settings.watermark_cols; j++) {
+      x =
+        settings.watermark_x +
+        (settings.watermark_width + settings.watermark_x_space) * j
+      const mask_div = document.createElement('div')
+      mask_div.id = 'mask_div' + i + j
+      mask_div.className = 'mask_div'
+      mask_div.appendChild(document.createTextNode(settings.text()))
+      //设置水印div倾斜显示
+      mask_div.style.webkitTransform =
+        'rotate(-' + settings.watermark_angle + 'deg)'
+      mask_div.style.MozTransform =
+        'rotate(-' + settings.watermark_angle + 'deg)'
+      mask_div.style.msTransform =
+        'rotate(-' + settings.watermark_angle + 'deg)'
+      mask_div.style.OTransform = 'rotate(-' + settings.watermark_angle + 'deg)'
+      mask_div.style.transform = 'rotate(-' + settings.watermark_angle + 'deg)'
+      mask_div.style.visibility = ''
+      mask_div.style.position = 'absolute'
+      mask_div.style.left = x + 'px'
+      mask_div.style.top = y + 'px'
+      mask_div.style.overflow = 'hidden'
+      mask_div.style.zIndex = '9999'
+      //让水印不遮挡页面的点击事件
+      mask_div.style.pointerEvents = 'none'
+      mask_div.style.opacity = settings.watermark_alpha
+      mask_div.style.fontSize = settings.watermark_fontsize
+      mask_div.style.fontFamily = settings.watermark_font
+      mask_div.style.fontWeight = 'bold'
+      mask_div.style.color = settings.watermark_color
+      mask_div.style.textAlign = 'center'
+      mask_div.style.width = settings.watermark_width + 'px'
+      mask_div.style.height = settings.watermark_height + 'px'
+      mask_div.style.display = 'block'
+      oTemp.appendChild(mask_div)
+    }
+  }
+  container.appendChild(oTemp)
+}

package/packages/ProcessRecord/index.js

@@ -0,0 +1,7 @@
+import ProcessRecord from './src/main.vue'
+
+ProcessRecord.install = function(Vue) {
+  Vue.component(ProcessRecord.name, ProcessRecord)
+}
+
+export default ProcessRecord

package/packages/ProcessRecord/src/main.vue

@@ -0,0 +1,396 @@
+<template>
+  <div v-if="dialogVisible" class="record-wrap">
+    <el-dialog title="审批记录" :visible.sync="dialogVisible" width="80%">
+      <div v-if="dialogVisible" class="record-content">
+        <ht-table
+          :data="rows"
+          :show-export="false"
+          :show-custom-column="false"
+          :nopagination="true"
+          @loading="loadData"
+        >
+          <ht-table-column
+            width="50"
+            align="center"
+            label="序号"
+            type="index"
+          />
+          <ht-table-column
+            label="审批节点"
+            width="170"
+            align="center"
+            prop="taskName"
+            show-overflow-tooltip
+          />
+          <ht-table-column
+            prop="qualfiedNames"
+            label="待审批人"
+            show-overflow-tooltip
+            width="110"
+            align="center"
+          >
+            <template #default="{ row }">
+              <span
+                v-if="
+                  row.status != 'awaiting_check' &&
+                    qualfiedsName(row.qualfiedNames, true) < 2
+                "
+              >
+                {{ row.qualfiedNames }}
+              </span>
+              <span
+                v-if="
+                  row.status === 'awaiting_check' &&
+                    row.qualfieds &&
+                    row.qualfieds.length === 1 &&
+                    !row.qualfieds[0].users
+                "
+              >
+                {{ row.qualfiedNames }}
+              </span>
+              <el-popover
+                v-if="
+                  row.status == 'awaiting_check' ||
+                    qualfiedsName(row.qualfiedNames, true) > 1
+                "
+                placement="right"
+                popper-class="right-popover"
+                trigger="hover"
+              >
+                <div>
+                  <p class="qualfied_names">名称</p>
+                  <div
+                    v-if="isQualfiedListHasUser(row.qualfieds)"
+                    class="btn__wrap"
+                  >
+                    <p v-for="(item, index) in row.qualfieds" :key="index">
+                      <el-tooltip
+                        v-if="item.users"
+                        class="item"
+                        effect="light"
+                        placement="top"
+                        :content="item.users"
+                      >
+                        <el-button plain size="mini">{{ item.name }}</el-button>
+                      </el-tooltip>
+                      <el-button v-if="!item.users" plain size="mini">
+                        {{ item.name }}
+                      </el-button>
+                    </p>
+                  </div>
+                  <div v-else class="btn__wrap">
+                    <p
+                      v-for="(item, index) in qualfiedsName(
+                        row.qualfiedNames,
+                        false
+                      )"
+                      :key="index"
+                    >
+                      <el-button plain size="mini">{{ item }}</el-button>
+                    </p>
+                  </div>
+                </div>
+                <i
+                  v-if="
+                    isQualfiedListHasUser(row.qualfieds) ||
+                      qualfiedsName(row.qualfiedNames, true) > 1
+                  "
+                  slot="reference"
+                  class="el-icon-more qualfied-more__icon"
+                ></i>
+              </el-popover>
+            </template>
+          </ht-table-column>
+          <ht-table-column
+            label="处理人"
+            width="110"
+            align="center"
+            prop="auditorName"
+            show-overflow-tooltip
+          />
+          <ht-table-column
+            align="center"
+            label="处理情况"
+            width="140"
+            show-overflow-tooltip
+          >
+            <template #default="{ row }">
+              <span v-if="row.statusVal == '待审批'">
+                {{ row.isRead == 0 ? '待阅' : '已阅' }}
+              </span>
+              <span v-else>
+                {{ row.statusVal }}
+              </span>
+            </template>
+          </ht-table-column>
+
+          <ht-table-column
+            label="处理意见"
+            show-overflow-tooltip
+            align="center"
+          >
+            <template #default="{ row }">
+              <strong>
+                <span style="white-space: pre-wrap">{{ row.opinion }}</span>
+              </strong>
+              <br />
+              <div
+                v-if="row.filesArray && row.filesArray.length != 0"
+                class="appendix"
+              >
+                <div class="title">附件：</div>
+                <div
+                  v-for="(item, index) in row.filesArray"
+                  :key="index"
+                  style="cursor: pointer"
+                >
+                  <el-tag @click="search(item)">{{ item.name }}</el-tag>
+                </div>
+              </div>
+              <br />
+            </template>
+          </ht-table-column>
+
+          <ht-table-column
+            label="操作时间"
+            width="170"
+            align="center"
+            show-overflow-tooltip
+          >
+            <template #default="{ row }">
+              <span>{{ row.completeTime }}</span>
+            </template>
+          </ht-table-column>
+
+          <ht-table-column
+            align="center"
+            label="停留时长"
+            width="110"
+            show-overflow-tooltip
+          >
+            <template #default="{ row }">
+              <span>{{ formatTimeLag(row) }}</span>
+            </template>
+          </ht-table-column>
+        </ht-table>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+  import utils from '@/utils.js'
+
+  export default {
+    name: 'ProcessRecord',
+    props: {
+      instId: String,
+      taskId: String,
+      referOpinion: Boolean,
+      nodeType: String,
+      defId: String,
+      nodeId: String,
+      myReadType: {
+        type: String,
+        default: '',
+      },
+    },
+    data() {
+      return {
+        src: '',
+        data: { taskId: '', referOpinion: false },
+        fileId: '',
+        // 获取row的key值
+        // getRowKeys(row) {
+        //   return row.id
+        // },
+        previewNodeFormDialogVisible: false,
+        opinionSelectNodeId: '',
+        opinionInstId: '',
+        opinionTaskId: '',
+        opinionFormData: '',
+        opinionTaskName: '',
+        opinionProcDefId: '',
+        rows: [], // 表格数据
+        dialogVisible: false,
+      }
+    },
+    created() {
+      this.initParams()
+    },
+    methods: {
+      showDialog() {
+        this.dialogVisible = true
+      },
+      initParams() {
+        if (this.instId) {
+          this.data.instId = this.instId
+          this.data.taskId = this.taskId
+          this.data.referOpinion = this.referOpinion
+          this.data.nodeType = this.nodeType
+          this.data.defId = this.defId
+          this.data.nodeId = this.nodeId
+          //类型为我的请求时添加参数isRequest进行过滤
+          if (this.myReadType === 'request') {
+            this.data.isRequest = true
+          }
+        }
+      },
+      qualfiedsName(names, isLength) {
+        if (names && isLength) {
+          return names.split(',').length
+        }
+        if (names && !isLength) {
+          return names.split(',')
+        }
+      },
+      isQualfiedListHasUser(data) {
+        if (Array.isArray(data)) {
+          for (let i = 0; i < data.length; i++) {
+            if (data[i].users) {
+              return true
+            }
+          }
+          return false
+        }
+      },
+      //持续时间
+      formatTimeLag(row) {
+        let endTimes = null
+        if (!row.completeTime) {
+          endTimes = utils.formatDate(new Date())
+        } else {
+          endTimes = row.completeTime
+        }
+        const { days, hours, minutes, seconds } = utils.dateDuration(
+          row.createTime,
+          endTimes
+        )
+        if (days > 0) return days + '天'
+        if (hours > 0) return hours + '小时'
+        if (minutes > 0) return minutes + '分钟'
+        if (minutes == 0 && seconds >= 0) return '小于1分钟'
+      },
+      search(item) {
+        this.$preview(item)
+      },
+      loadData(param, cb) {
+        const params = {
+          instId: this.instId,
+          taskId: this.taskId,
+          referOpinion: this.referOpinion,
+          nodeType: this.nodeType,
+          defId: this.defId,
+          nodeId: this.nodeId,
+        }
+        this.$requestConfig
+          .getOpinionsById(params)
+          .then((response) => {
+            response.map((e) => {
+              //有可能出现e.files是"\"\""的情况
+              if (e.files && JSON.parse(e.files)) {
+                e.filesArray = JSON.parse(JSON.parse(e.files))
+              }
+            })
+            if (response && response.length) {
+              this.rows = response.filter((item) => item.status !== 'skip')
+            }
+          })
+          .finally(() => {
+            cb()
+          })
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  .el-message-box__body {
+    border-top: none;
+  }
+  .el-main {
+    padding: 0;
+  }
+  .record-wrap {
+    padding: 20px;
+    background: #fff;
+  }
+  .appendix {
+    padding: 5px 0px;
+    text-align: left;
+  }
+
+  .appendix_left {
+    padding: 0 15px;
+    border-left: 1px solid #d8d8d8;
+  }
+
+  .appendix_right {
+    padding: 0 15px 0 0;
+  }
+
+  .title {
+    display: block;
+    font-weight: bold;
+    color: #a2a2a2;
+  }
+
+  .record-container {
+    padding-bottom: 10px;
+    border-bottom: 1px solid #ebeef5;
+  }
+
+  .record-container > span {
+    padding-left: 10px;
+    font-size: 14px;
+    font-weight: bold;
+    color: #666;
+    // border-left: 3px solid $--theme-color;
+  }
+
+  .record-content {
+    padding: 20px 0;
+  }
+
+  .files {
+    font-size: 12px;
+    color: #5eade6;
+    cursor: pointer;
+  }
+
+  .files:hover {
+    // color: $--theme-color;
+  }
+
+  ::v-deep .el-table .cell.el-tooltip {
+    min-width: 50px;
+  }
+
+  ::v-deep .el-table .cell {
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    padding-right: 10px;
+    padding-left: 10px;
+    overflow: hidden;
+    line-height: 23px;
+    text-overflow: ellipsis;
+    word-break: break-all;
+    white-space: nowrap;
+  }
+  ::v-deep .owner-span {
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .btn__wrap {
+    display: flex;
+    flex-wrap: wrap;
+    p {
+      margin: 0;
+    }
+  }
+  .qualfied-more__icon {
+    &:hover {
+      cursor: pointer;
+    }
+  }
+</style>

package/packages/Qrcode/index.js

@@ -0,0 +1,7 @@
+import Qrcode from './src/Qrcode.vue'
+
+Qrcode.install = function(Vue) {
+  Vue.component(Qrcode.name, Qrcode)
+}
+
+export default Qrcode

package/packages/Qrcode/src/Qrcode.vue

@@ -0,0 +1,110 @@
+<template>
+  <div v-if="permission != 'n'" :style="containerStyle">
+    <canvas v-show="showCode" ref="htQrcode" class="qr-canvas"></canvas>
+    <!-- <el-skeleton v-if="!showCode" :rows="3" animated /> -->
+    <template v-if="!showCode">
+      <span>-</span>
+      <div class="error-tooltip" v-if="instId && !isSupportMobile">请绑定手机表单</div>
+    </template>
+  </div>
+</template>
+
+<script>
+  import permission from '@/mixins/permission.js'
+  export default {
+    name: 'HtQrcode',
+    mixins: [permission],
+    props: {
+      width: {
+        type: Number,
+        default: 130,
+      },
+      height: {
+        type: Number,
+        default: 130,
+      },
+      url: String,
+      instId: [String, Number],
+      isSupportMobile: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    data() {
+      return {
+        showCode: false,
+        curUrl: null,
+        
+      }
+    },
+    computed: {
+      containerStyle() {
+        return {
+          width: `${this.width}px`,
+          height: `${this.height}px`,
+          display: 'inline-block',
+        }
+      },
+      urlVal() {
+        return this.curUrl ? this.curUrl : this.url
+      },
+    },
+    watch: {
+      urlVal: {
+        handler: function(newVal) {
+          if (newVal) {
+            this.$nextTick(() => this.initQrcode())
+          }
+        },
+        immediate: true,
+      },
+    },
+    mounted() {
+      if (!this.url && this.instId && this.isSupportMobile) {
+        this.getQrcodeUrl()
+      }
+    },
+    methods: {
+      getQrcodeUrl() {
+        // 未传入url时，调用外部方法获取url
+        if (this.$requestConfig.getQrcodeUrl) {
+          const result = this.$requestConfig.getQrcodeUrl(this.instId)
+          if (result) {
+            if (result.constructor == Promise) {
+              result.then((data) => {
+                this.curUrl = data && data.value.shortUrl
+              })
+            } else if (result.constructor == String) {
+              this.curUrl = result
+            }
+          }
+        }
+      },
+      initQrcode() {
+        let noErr = true
+        this.$qrcode.toCanvas(
+          this.$refs.htQrcode,
+          `${this.$requestConfig.getBaseMobileUrl()}/${this.urlVal}`,
+          function(error) {
+            if (error) {
+              noErr = false
+              throw error
+            }
+          }
+        )
+        this.showCode = noErr
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  .qr-canvas {
+    height: 100% !important;
+    width: 100% !important;
+  }
+  .error-tooltip {
+    color: #f56c6c;
+    font-size: 12px;
+    line-height: 10px;
+  }
+</style>

package/packages/QuerySqlPreview/index.js

@@ -0,0 +1,7 @@
+import QuerySqlPreview from './src/QuerySqlPreview.vue'
+
+QuerySqlPreview.install = function(Vue) {
+  Vue.component(QuerySqlPreview.name, QuerySqlPreview)
+}
+
+export default QuerySqlPreview