three-trees-ui 1.0.0

package/packages/FileUpload/index.js

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

package/packages/FileUpload/src/main.vue

@@ -0,0 +1,242 @@
+<template>
+  <div class="file-upload-container">
+    <el-upload
+      ref="elUploadEl"
+      :list-type="listType"
+      :action="actionUrl"
+      :file-list="files"
+      :headers="header"
+      :show-file-list="false"
+      :accept="accept"
+      :limit="limit"
+      :multiple="multiple"
+      :before-upload="handleBeforeUpload"
+      :on-progress="handleProgress"
+      :on-exceed="handleExceed"
+      :on-success="handleSuccess"
+      :on-error="handleError"
+      :with-credentials="withCredentials"
+    >
+      <el-tooltip placement="top" effect="light">
+        <div slot="content">
+          <span>附件格式支持：{{ acceptLabel }}</span>
+          <br />
+          <span>附件大小限制：单个文件不超过{{ size }}MB</span>
+          <br />
+          <span>附件个数限制：最多{{ limit }}个</span>
+        </div>
+        <el-button v-if="!readonly" size="mini" round icon="el-icon-plus">
+          上传
+        </el-button>
+      </el-tooltip>
+    </el-upload>
+
+    <el-button
+      v-if="!readonly && files.length > 0"
+      v-popconfirm="{ content: '确定要清空吗？', confirm: handleClear }"
+      size="mini"
+      round
+      icon="el-icon-delete"
+    >
+      清空
+    </el-button>
+
+    <slot name="append"></slot>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'HtFileUpload',
+    props: {
+      withCredentials: {
+        type: Boolean,
+        default: false,
+      },
+      value: {
+        type: Array,
+        required: true,
+      },
+      actionUrl: {
+        type: String,
+        required: true,
+      },
+      listType: {
+        type: String,
+      },
+      multiple: {
+        type: Boolean,
+      },
+      accept: {
+        type: String,
+      },
+      limit: {
+        type: Number,
+        default: 5,
+      },
+      header: {
+        type: Object,
+      },
+      size: {
+        type: Number,
+        default: 50,
+      },
+      readonly: {
+        type: Boolean,
+        default: false,
+      },
+      beforeUpload: {
+        type: Function,
+      },
+      onSuccess: {
+        type: Function,
+      },
+      onExceed: {
+        type: Function,
+      },
+      onError: {
+        type: Function,
+      },
+    },
+    data() {
+      return {
+        files: [],
+      }
+    },
+    computed: {
+      acceptLabel: function() {
+        return this.accept ? this.accept : '所有格式'
+      },
+    },
+    watch: {
+      value: {
+        handler(val) {
+          if (val && val.length < 1) {
+            this.files = []
+          } else {
+            this.files = val
+          }
+        },
+        deep: true,
+        immediate: true,
+      },
+    },
+    created() {
+      this.files = this.value || []
+    },
+    methods: {
+      reload(files) {
+        this.files = files
+      },
+      // 附件是否超过最大尺寸
+      exceedFileSize(file) {
+        return file.size > this.size * 1024 * 1024
+      },
+      handleBeforeUpload(file) {
+        let resultVal = false
+        if (this.exceedFileSize(file)) {
+          let computerSize = this.$options.filters['computerSize'](file.size)
+          this.$message({
+            message: `附件的大小为${computerSize}，超过了允许的最大尺寸${this.size}MB.`,
+            type: 'warning',
+          })
+          resultVal = false
+        } else {
+          resultVal = true
+        }
+
+        if (
+          this.beforeUpload &&
+          this.beforeUpload.constructor == Function &&
+          resultVal
+        ) {
+          resultVal = this.beforeUpload(file)
+        }
+
+        if (resultVal) {
+          this.files.push(file)
+        }
+
+        return resultVal
+      },
+      handleProgress(event, file, fileList) {
+        const index = this.files.findIndex((m) => m === file)
+        index > -1 && this.$set(this.files, index, file)
+        this.$emit('on-progress', event, file, fileList)
+      },
+      handleExceed(files, fileList) {
+        if (this.onExceed && this.onExceed.constructor == Function) {
+          this.onExceed(files, fileList)
+        } else {
+          this.$message({
+            message: `最多允许上传${this.limit}个附件.`,
+            type: 'warning',
+          })
+        }
+      },
+      handleSuccess(response, file, fileList) {
+        if (this.onSuccess && this.onSuccess.constructor == Function) {
+          this.onSuccess(response, file, fileList)
+        }
+        const index = this.files.findIndex((m) => m === file)
+        file.state = 'success'
+        index > -1 && this.$set(this.files, index, file)
+      },
+      handleError(err, file, fileList) {
+        if (this.onError && this.onError.constructor == Function) {
+          this.onError(err, file, fileList)
+        }
+        this.$emit('handle-error', err, file, fileList)
+        const index = this.files.findIndex((m) => m === file)
+        file.state = 'exception'
+        index > -1 && this.$set(this.files, index, file)
+        this.$message({
+          message: `附件${file.name}上传失败.`,
+          type: 'error',
+          onClose: () => {
+            this.files.remove(file)
+          },
+        })
+      },
+      handleClear() {
+        this.files.forEach((m) => {
+          this.abort(m)
+        })
+        this.$refs.elUploadEl.clearFiles()
+        this.files = []
+        this.$emit('clear')
+      },
+      abort(file) {
+        // 附件还在上传中，则中止上传。
+        if (file && file.status === 'uploading') {
+          this.$refs.elUploadEl.abort(file)
+        }
+      },
+      remove(file) {
+        this.abort(file)
+        this.files.remove(file)
+        for (var i = 0; i < this.files.length; i++) {
+          if (this.files[i].uid == file.uid) {
+            this.files.splice(i, 1) //删除数组某一项
+          }
+        }
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  .el-upload {
+    display: inline;
+    text-align: center;
+    cursor: pointer;
+    outline: none;
+  }
+
+  .file-upload-container {
+    margin-bottom: 10px;
+  }
+
+  div.file-upload-container > div {
+    display: inline-block;
+    margin-right: 10px;
+  }
+</style>

package/packages/FlowChart/index.js

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

package/packages/FlowChart/src/main.vue

@@ -0,0 +1,386 @@
+<template>
+  <div>
+    <el-dialog
+      width="80%"
+      title="流程图"
+      :visible.sync="showFlowChart"
+      :close-on-click-modal="false"
+      append-to-body
+      :custom-class="customClass"
+    >
+      <div class="btn-group">
+        <div v-for="item in btnList" :key="item.id" class="btn-item">
+          <span class="icon" :style="{ background: item.bgColor }"></span>
+          <span class="label">{{ item.label }}</span>
+        </div>
+      </div>
+
+      <div class="flow-chart">
+        <div
+          :style="{
+            position: 'relative',
+            width: imgWidth + 'px',
+            height: imgHeight + 'px',
+            background: 'url(' + backGroundImg + ') no-repeat',
+          }"
+        >
+          <template v-for="layout in listLayout">
+            <el-popover
+              v-if="instId"
+              :key="layout.nodeId"
+              trigger="hover"
+              placement="bottom-start"
+            >
+              <div v-if="nodeOpinions[layout.nodeId]" class="options">
+                <div class="title">任务审批详情</div>
+                <!-- 已审批/待审批节点 -->
+                <template v-if="hasOpinion(layout)">
+                  <table v-for="op in getData(layout)" :key="op.id">
+                    <tr>
+                      <td class="label">任务名称</td>
+                      <td class="value">{{ op.taskName }}</td>
+                    </tr>
+                    <tr v-show="op.auditor">
+                      <td class="label">执行人</td>
+                      <td class="value">{{ op.auditorName }}</td>
+                    </tr>
+                    <tr v-show="!op.auditor">
+                      <td class="label">
+                        <span>候选人</span>
+                        <el-tooltip
+                          effect="light"
+                          content="有资格审批的用户及用户组"
+                          placement="right"
+                        >
+                          <i class="el-icon-question"></i>
+                        </el-tooltip>
+                      </td>
+                      <td class="value">
+                        <span v-for="user in op.qualfieds" :key="user.id">
+                          <el-button v-if="!user.users" :disabled="true">
+                            {{ user.name }}
+                          </el-button>
+                          <el-tooltip
+                            v-if="user.users"
+                            effect="light"
+                            :content="user.users"
+                            placement="top"
+                          >
+                            <el-button>{{ user.name }}</el-button>
+                          </el-tooltip>
+                        </span>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td class="label">开始时间</td>
+                      <td class="value">{{ op.createTime }}</td>
+                    </tr>
+                    <tr>
+                      <td class="label">结束时间</td>
+                      <td class="value">{{ op.completeTime }}</td>
+                    </tr>
+                    <tr>
+                      <td class="label">审批用时</td>
+                      <td class="value">{{ op.durMs | calcDuration }}</td>
+                    </tr>
+                    <tr>
+                      <td class="label">状态</td>
+                      <td class="value">{{ op.statusVal }}</td>
+                    </tr>
+                    <tr>
+                      <td class="label">意见</td>
+                      <td class="opinion">{{ op.opinion }}</td>
+                    </tr>
+                  </table>
+                </template>
+
+                <!-- 未审批节点 -->
+                <template v-else>
+                  <div class="sub-title">节点设置详情</div>
+                  <table>
+                    <tr>
+                      <td class="label">状态</td>
+                      <td class="value">未产生过任务</td>
+                    </tr>
+                    <tr>
+                      <td class="label">
+                        <span>暂定候选人</span>
+                        <el-tooltip
+                          effect="light"
+                          content="暂定的有审批资格的用户及用户组，实际候选人要在产生任务以后才能确定"
+                          placement="right"
+                        >
+                          <i class="el-icon-question"></i>
+                        </el-tooltip>
+                      </td>
+                      <td class="value">
+                        <span v-for="user in getData(layout)" :key="user.id">
+                          <el-button
+                            v-if="!user.users"
+                            :disabled="true"
+                            style="margin-right: 5px"
+                          >
+                            {{ user.name }}
+                          </el-button>
+                          <el-tooltip
+                            v-else
+                            effect="light"
+                            :content="user.users"
+                            placement="top"
+                          >
+                            <el-button>
+                              {{ user.name }}
+                            </el-button>
+                          </el-tooltip>
+                        </span>
+                      </td>
+                    </tr>
+                  </table>
+                </template>
+              </div>
+
+              <el-button
+                v-if="showLayout(layout)"
+                slot="reference"
+                :style="getStyle(layout)"
+              ></el-button>
+            </el-popover>
+          </template>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  const btnList = [
+    { id: 1, label: '待审批', bgColor: '#FF0000' },
+    { id: 2, label: '提交', bgColor: '#F89800' },
+    { id: 3, label: '重新提交', bgColor: '#FFE76E' },
+    { id: 4, label: '同意', bgColor: '#00FF00' },
+    { id: 5, label: '挂起', bgColor: '#C33A1F' },
+    { id: 6, label: '反对', bgColor: '#0000FF' },
+    { id: 7, label: '驳回', bgColor: '#8A0902' },
+    { id: 8, label: '驳回到发起人', bgColor: '#FFA500' },
+    { id: 9, label: '撤回', bgColor: '#023B62' },
+    { id: 10, label: '撤回到发起人', bgColor: '#F23B62' },
+    { id: 11, label: '会签通过', bgColor: '#338848' },
+    { id: 12, label: '会签不通过', bgColor: '#82B7D7' },
+    { id: 13, label: '人工终止', bgColor: '#EEAF97' },
+    { id: 14, label: '完成', bgColor: '#4A4A4A' },
+  ]
+  export default {
+    name: 'FlowChart',
+    filters: {
+      calcDuration(ts) {
+        let duration = '',
+          st = 1000,
+          mt = 60 * st,
+          ht = 60 * mt,
+          dt = 24 * ht,
+          days = Math.floor(ts / dt),
+          hours = Math.floor((ts % dt) / ht),
+          mins = Math.floor((ts % ht) / mt),
+          secs = Math.floor((ts % mt) / st)
+        if (days > 0) duration += days + '天'
+        if (hours > 0) duration += hours + '小时'
+        if (mins > 0) duration += mins + '分钟'
+        if (secs > 0) duration += secs + '秒'
+        return duration
+      },
+    },
+
+    props: {
+      defId: {
+        type: String,
+        default: '',
+      },
+      instId: {
+        type: String,
+        default: '',
+      },
+      bpmnInstId: {
+        type: String,
+        default: '',
+      },
+      customClass: {
+        type: String,
+        default: '',
+      },
+    },
+    data() {
+      return {
+        showFlowChart: false,
+
+        btnList: btnList,
+        imgWidth: '',
+        imgHeight: '',
+        backGroundImg: '',
+        listLayout: '',
+        nodeOpinions: [],
+      }
+    },
+    methods: {
+      showLayout(layout) {
+        const taskNames = ['USERTASK', 'SIGNTASK', 'CUSTOMSIGNTASK']
+        return taskNames.includes(layout.nodeType)
+      },
+      hasOpinion(layout) {
+        return this.nodeOpinions[layout.nodeId].hasOpinion
+      },
+      getData(layout) {
+        return this.nodeOpinions[layout.nodeId].data
+      },
+      getStyle(layout) {
+        return {
+          position: 'absolute',
+          top: layout.y + 'px',
+          left: layout.x + 'px',
+          width: layout.width + 'px',
+          height: layout.height + 'px',
+          border: 'none',
+          background: 'none',
+        }
+      },
+      handleOpen() {
+        this.showFlowChart = true
+
+        const data = {
+          defId: this.defId,
+          instId: this.instId,
+          bpmnInstId: this.bpmnInstId,
+        }
+        this.$requestConfig.instanceFlowImage(data, (instFlowInfo) => {
+          const { defId, instanceId, bpmDefLayout } = instFlowInfo
+          let myDefId = ''
+          if (['', 'null', 'undefined'].includes(instanceId)) {
+            myDefId = defId
+          }
+          this.$requestConfig.getBpmImage('', instanceId, myDefId, (res) => {
+            this.imgWidth = bpmDefLayout.width
+            this.imgHeight = bpmDefLayout.height
+            this.backGroundImg = res
+
+            bpmDefLayout.listLayout.forEach((item) => {
+              const style = {
+                position: 'absolute',
+                left: item.x + 'px',
+                top: item.y + 'px',
+                width: item.width + 'px',
+                height: item.height + 'px',
+              }
+              item.style = style
+            })
+            this.listLayout = bpmDefLayout.listLayout
+
+            const tempIds = []
+            this.listLayout.forEach((layout) => {
+              const { nodeId, nodeType } = layout
+              if (['USERTASK', 'SIGNTASK'].includes(nodeType)) {
+                tempIds.push(nodeId)
+              }
+            })
+
+            let nodeIds = tempIds.join(',')
+            const data = { instId: this.instId, nodeIds }
+            if (this.instId) {
+              this.$requestConfig.getNodeOpinions(data, (options) => {
+                if (options) {
+                  for (const key in options) {
+                    const { data, hasOpinion } = options[key]
+                    if (data && hasOpinion) {
+                      data.forEach((ele) => {
+                        if (ele.qualfieds) {
+                          ele.qualfieds = eval('(' + ele.qualfieds + ')')
+                        }
+                      })
+                    }
+                  }
+                }
+                if (nodeIds && tempIds.length == 1) {
+                  this.nodeOpinions = {
+                    [nodeIds]: options,
+                  }
+                } else {
+                  this.nodeOpinions = options
+                }
+              })
+            }
+          })
+        })
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .btn-group {
+    display: flex;
+    flex-wrap: wrap;
+    .btn-item {
+      display: flex;
+      align-items: center;
+      margin: 0 15px 5px 0;
+      .icon {
+        display: inline-block;
+        width: 12px;
+        height: 12px;
+        margin-right: 5px;
+        border: 1px solid #868686;
+      }
+      .lable {
+        color: #606266;
+      }
+    }
+  }
+  .flow-chart {
+    overflow: auto;
+    min-height: 500px;
+    margin-top: 30px;
+  }
+  .title {
+    font-size: 14px;
+    font-weight: bold;
+    margin-bottom: 10px;
+  }
+  .sub-title {
+    font-size: 12px;
+  }
+  .options {
+    max-height: 420px;
+    overflow-y: auto;
+
+    ::v-deep table {
+      margin-bottom: 10px;
+      font-size: 12px;
+      border-spacing: 0;
+      border-bottom: 1px solid #e7eaec;
+      border-left: 1px solid #e7eaec;
+      td {
+        padding: 8px;
+        line-height: 1.42857;
+        border-top: 1px solid #e7eaec;
+        border-right: 1px solid #e7eaec;
+        vertical-align: middle;
+      }
+      .label {
+        width: 80px;
+        font-weight: bold;
+      }
+      .value {
+        width: 160px;
+      }
+      .opinion {
+        max-width: 250px;
+        min-width: 250px;
+        word-wrap: break-word;
+      }
+    }
+  }
+  ::v-deep .start-btn__flow-chart {
+    width: 60% !important;
+    .flow-chart {
+      min-height: unset;
+    }
+  }
+</style>

package/packages/FormItem/index.js

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