swordpass-ui 1.0.0

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

package/packages/FormItem/src/main.vue

@@ -0,0 +1,167 @@
+<template>
+  <el-form-item
+    class="cl-form-item"
+    :label="label"
+    :label-width="finalLabelWidth"
+    :class="formItemClass"
+  >
+    <slot></slot>
+    <slot slot="label" name="label"></slot>
+  </el-form-item>
+</template>
+
+<script>
+  export default {
+    name: 'ClFormItem',
+    componentName: 'ClFormItem',
+    inject: {
+      elForm: {
+        default: '',
+      },
+    },
+    props: {
+      label: {
+        type: String,
+        default: '',
+      },
+      align: {
+        type: String,
+        validator: function(value) {
+          return ['left', 'center', 'right', 'justify'].indexOf(value) !== -1
+        },
+      },
+      labelColor: {
+        type: String,
+      },
+      labelWidth: {
+        type: String,
+      },
+      customColon: {
+        type: Boolean,
+        default: false,
+      },
+      required: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    data() {
+      return {
+        formItemAlign: null,
+      }
+    },
+    computed: {
+      finalLabelWidth() {
+        return this.labelWidth
+          ? this.labelWidth
+          : this.elForm && this.elForm.labelWidth
+          ? this.elForm.labelWidth
+          : '100px'
+      },
+      formItemClass: function() {
+        let _className = []
+        const formItemAlignVal = this.align
+          ? this.align
+          : this.formItemAlign
+          ? this.formItemAlign
+          : ''
+        if (!this.customColon) {
+          _className.push('cl-form-item-colon')
+        }
+        switch (formItemAlignVal) {
+          case 'left':
+            _className.push('cl-form-item-left')
+            break
+          case 'center':
+            _className.push('cl-form-item-center')
+            break
+          case 'right':
+            _className.push('cl-form-item-right')
+            break
+          case 'justify':
+            _className.push('cl-form-item-justify')
+        }
+        if (this.$slots.default) {
+          for (let i = 0; i < this.$slots.default.length; i++) {
+            let _vNode = this.$slots.default[i]
+            if (_vNode.componentOptions && _vNode.componentOptions.propsData) {
+              let propsData = _vNode.componentOptions.propsData
+              let _validate = propsData.validate
+
+              if (!_validate && _vNode.data.directives) {
+                let validateArry = _vNode.data.directives.filter(
+                  (item) => item.name == 'validate'
+                )
+                if (validateArry && validateArry.length > 0) {
+                  _validate = validateArry[0].value
+                }
+              }
+              if (this.required) {
+                _className.push('is-required')
+              } else if (
+                _validate &&
+                _validate.constructor == Object &&
+                _validate.required
+              ) {
+                _className.push('is-required')
+              } else if (
+                _validate &&
+                _validate.constructor == String &&
+                _validate.indexOf('required') != -1
+              ) {
+                _className.push('is-required')
+              } else if (
+                _validate &&
+                _validate.constructor == String &&
+                _validate.indexOf('required') != -1
+              ) {
+                _className.push('is-required')
+              } else if (propsData.permission == 'b') {
+                _className.push('is-required')
+              }
+              if (
+                propsData.permission === 'r' &&
+                _className.indexOf('is-required') != -1
+              ) {
+                _className = _className.filter((item) => item != 'is-required')
+              }
+              break
+            }
+          }
+        }
+        return _className.join(' ')
+      },
+    },
+    created() {
+      this.$on('formExtend:update', (formExtend) => {
+        this.formItemAlign = formExtend.formItemAlign
+      })
+    },
+    mounted() {
+      if (this.labelColor) {
+        this.$el.firstElementChild &&
+          (this.$el.firstElementChild.style.color = this.labelColor)
+      }
+    },
+  }
+</script>
+
+<style scoped>
+  .cl-form-item-colon ::v-deep .el-form-item__label::after {
+    content: ':';
+  }
+  .cl-form-item-left ::v-deep .el-form-item__label {
+    text-align: left;
+  }
+  .cl-form-item-center ::v-deep .el-form-item__label {
+    text-align: center;
+  }
+  .cl-form-item-right ::v-deep .el-form-item__label {
+    text-align: right;
+  }
+  .cl-form-item-justify ::v-deep .el-form-item__label {
+    text-align: justify;
+    text-justify: distribute-all-lines;
+    text-align-last: justify;
+  }
+</style>

package/packages/Global/index.js

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