n20-common-lib 1.1.98

package/src/components/ApprovalCard/index.vue

@@ -0,0 +1,128 @@
+/* 审批进度 */
+<template>
+  <div class="n20-approve-wrap">
+    <el-timeline :reverse="true">
+      <el-timeline-item
+        v-for="(item, i) in approvalData"
+        :key="i"
+        :type="item | typeF(status)"
+        :hide-timestamp="true"
+      >
+        <div class="n20-time">
+          <div>{{ item.endTime | dataF }}</div>
+          <div>{{ item.endTime | timeF }}</div>
+        </div>
+        <div class="flex-box">
+          <div class="n20-worker m-r-s">
+            <span class="worker-icon cl-icon-user"></span>
+            <span>{{ item.assignee }}</span>
+          </div>
+          <div class="n20-approval m-r-s">
+            <template v-if="item.result == status.submit">提交</template>
+            <template v-else-if="item.result == status.end">结束</template>
+            <template v-else-if="item.result == status.approval">
+              审批意见：批准
+            </template>
+            <template v-else-if="item.result == status.reject">
+              审批意见：<span class="n20-approval-reject">驳回</span></template
+            >
+          </div>
+          <div v-if="item.suggestion" class="n20-description-c flex-item">
+            {{ item.suggestion }}
+          </div>
+        </div>
+      </el-timeline-item>
+    </el-timeline>
+  </div>
+</template>
+
+<script>
+import axios from '../../utils/axios'
+export default {
+  name: 'ApproveCard',
+  filters: {
+    typeF(item, status) {
+      let result = item.result
+      switch (result) {
+        case status.submit:
+          return 'primary'
+        case status.approval:
+          return 'primary'
+        case status.reject:
+          return 'danger'
+        default:
+          return undefined
+      }
+    },
+    dataF(_t) {
+      let t = _t || ''
+      let ts = t.split(' ') || ['', '']
+      return ts[0]
+    },
+    timeF(_t) {
+      let t = _t || ''
+      let ts = t.split(' ') || ['', '']
+      return ts[1]
+    }
+  },
+  props: {
+    close: {
+      type: Boolean,
+      default: false
+    },
+    status: {
+      type: Object,
+      default: () => ({
+        waiting: 0,
+        submit: 1,
+        approval: 2,
+        reject: 3,
+        end: 4
+      })
+    },
+    approvalData: {
+      type: Array,
+      default: () => []
+    },
+    procInstId: {
+      type: String,
+      default: undefined
+    }
+  },
+  created() {
+    if (this.procInstId) {
+      axios
+        .get('/bems/activiti/sample/Q003', {
+          procInstId: this.procInstId
+        })
+        .then(({ data = [] }) => {
+          let approvalData = []
+          data.forEach((item) => {
+            let _item = {
+              endTime: item.endTime || '',
+              assignee: item.assignee,
+              suggestion: item.suggestion
+            }
+            if ('approvalState' in item) {
+              _item.result = item.approvalState
+            } else {
+              if (item.taskName === '开始') {
+                _item.result = 1
+              } else if (item.taskName === '结束') {
+                _item.result = 4
+              } else if (!item.endTime) {
+                _item.result = 0
+              } else if (item.rejectFlag === 1) {
+                _item.result = 3
+              } else {
+                _item.result = 2
+              }
+            }
+            approvalData.push(_item)
+          })
+          this.approvalData.push(...approvalData)
+        })
+    }
+  }
+}
+</script>

package/src/components/ApprovalRecord/approvalImg.vue

@@ -0,0 +1,39 @@
+/* 审批流程图 */
+<template>
+  <div class="approve-img">
+    <img v-if="blobUrl" :src="blobUrl" />
+  </div>
+</template>
+
+<script>
+import axios from '../../utils/axios'
+
+export default {
+  name: 'ApprovalImg',
+  props: {
+    // blobUrl: {
+    //   type: String,
+    //   default: undefined
+    // }
+  },
+  data() {
+    return {
+      blobUrl: undefined
+    }
+  },
+  created() {
+    axios
+      .get('/bems/activiti/sample/Q004', {
+        procInstId: this.$route.query.processInstanceId
+      })
+      .then(({ data }) => {
+        if (data) {
+          let file = new File([data], '流程图.svg', {
+            type: 'image/svg+xml'
+          })
+          this.blobUrl = URL.createObjectURL(file)
+        }
+      })
+  }
+}
+</script>

package/src/components/ApprovalRecord/index.vue

@@ -0,0 +1,59 @@
+/* 审批记录 */
+<template>
+  <div>
+    <expandableWrap title="审批记录" :show-expand="false">
+      <template slot="tips">
+        <el-button plain size="mini" :disabled="false" @click="cardV = true"
+          >审批进度查看</el-button
+        >
+        <el-button plain size="mini" :disabled="false" @click="imgV = true"
+          >流程图查看</el-button
+        >
+      </template>
+    </expandableWrap>
+    <el-dialog
+      title="审批记录"
+      :visible.sync="cardV"
+      width="700"
+      class="p-a-0"
+      append-to-body
+      top="10vh"
+    >
+      <approvalCard
+        class="p-a"
+        :proc-inst-id="$route.query.processInstanceId"
+        style="height: 70vh; overflow: auto"
+      />
+    </el-dialog>
+    <el-dialog
+      title="查看流程"
+      :visible.sync="imgV"
+      width="65%"
+      class="p-a-0"
+      append-to-body
+      top="10vh"
+    >
+      <approvalImg class="text-c p-a" style="height: 70vh; overflow: auto" />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import expandableWrap from '../Expandable/index.vue'
+import approvalCard from '../ApprovalCard/index.vue'
+import approvalImg from './approvalImg.vue'
+export default {
+  name: 'ApprovalRecord',
+  components: {
+    expandableWrap,
+    approvalCard,
+    approvalImg
+  },
+  data() {
+    return {
+      cardV: false,
+      imgV: false
+    }
+  }
+}
+</script>

package/src/components/Button/button-group.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="text-c m-t">
+    <el-button
+      v-for="item in btns"
+      :key="item.label"
+      :type="item.type"
+      :plain="item.plain"
+      size="small"
+      @click="$emit(item.emit)"
+      >{{ item.label }}</el-button
+    >
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ButtonGroup',
+  props: {
+    include: {
+      type: Array,
+      default: () => ['back']
+    }
+  },
+  computed: {
+    btns() {
+      let btns = []
+      let btnt = this.include || []
+      if (btnt.includes('back')) {
+        btns.push({ emit: 'back', label: '返回', plain: true })
+      }
+
+      if (btnt.includes('preStep')) {
+        btns.push({
+          emit: 'preStep',
+          label: '上一步',
+          type: 'primary',
+          plain: false
+        })
+      }
+
+      if (btnt.includes('refuse')) {
+        btns.push({ emit: 'refuse', label: '驳回', plain: true })
+      }
+
+      if (btnt.includes('copy')) {
+        btns.push({ emit: 'copy', label: '复制', plain: true })
+      }
+
+      if (btnt.includes('rejected')) {
+        btns.push({ emit: 'rejected', label: '拒绝', plain: true })
+      }
+
+      if (btnt.includes('pass')) {
+        btns.push({
+          emit: 'pass',
+          label: '通过',
+          type: 'primary',
+          plain: false
+        })
+      }
+
+      if (btnt.includes('agree')) {
+        btns.push({
+          emit: 'agree',
+          label: '同意',
+          type: 'primary',
+          plain: false
+        })
+      }
+
+      if (btnt.includes('reset')) {
+        btns.push({
+          emit: 'reset',
+          label: '重置',
+          type: 'warning',
+          plain: true
+        })
+      }
+
+      if (btnt.includes('stash')) {
+        btns.push({
+          emit: 'stash',
+          label: '暂存',
+          type: 'primary',
+          plain: true
+        })
+      }
+
+      if (btnt.includes('save')) {
+        btns.push({
+          emit: 'save',
+          label: '保存',
+          type: 'primary',
+          plain: false
+        })
+      }
+
+      if (btnt.includes('submit')) {
+        btns.push({
+          emit: 'submit',
+          label: '提交',
+          type: 'primary',
+          plain: false
+        })
+      }
+
+      if (btnt.includes('fileInfo')) {
+        btns.push({ emit: 'fileInfo', label: '附件信息', plain: true })
+      }
+
+      if (btnt.includes('information')) {
+        btns.push({ emit: 'information', label: '附件信息', plain: true })
+      }
+
+      if (btnt.includes('print')) {
+        btns.push({
+          emit: 'print',
+          label: '打印',
+          type: 'primary',
+          plain: false
+        })
+      }
+
+      if (btnt.includes('nextStep')) {
+        btns.push({
+          emit: 'nextStep',
+          label: '下一步',
+          type: 'primary',
+          plain: false
+        })
+      }
+
+      if (btnt.includes('orderCancel')) {
+        btns.push({
+          emit: 'orderCancel',
+          label: '预约取消',
+          type: 'warning',
+          plain: true
+        })
+      }
+
+      if (btnt.includes('cancle')) {
+        btns.push({ emit: 'cancle', label: '取消', plain: true })
+      }
+
+      return btns
+    }
+  }
+}
+</script>

package/src/components/Button/icon-group-button.vue

@@ -0,0 +1,61 @@
+<template>
+  <el-button-group class="n20-icon-group-button">
+    <el-button
+      :icon="leftIcon"
+      :plain="left === 'default'"
+      :type="left"
+      size="mini"
+      style="width: 31.5px"
+      @click="handleClick(active)"
+    />
+    <el-button
+      :icon="rightIcon"
+      :plain="right === 'default'"
+      :type="right"
+      size="mini"
+      style="width: 31.5px"
+      @click="handleClick(!active)"
+    />
+  </el-button-group>
+</template>
+
+<script>
+export default {
+  name: 'IconGroupButton',
+  props: {
+    leftIcon: {
+      type: String,
+      default: 'n20-icon-a-quanjiedianxuanzhong'
+    },
+    rightIcon: {
+      type: String,
+      default: 'n20-icon-zishenbanlijiedian'
+    },
+    active: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      left: 'default',
+      right: 'default'
+    }
+  },
+  mounted() {
+    this.handleClick(this.active)
+  },
+  methods: {
+    handleClick(t) {
+      this.$emit('click', t)
+      if (t) {
+        this.left = 'primary'
+        this.right = 'default'
+      } else {
+        this.left = 'default'
+        this.right = 'primary'
+      }
+    }
+  }
+}
+</script>

package/src/components/Button/index.vue

@@ -0,0 +1,56 @@
+<template>
+  <el-button
+    :type="oType"
+    :plain="plain"
+    :disabled="disabled"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <slot></slot>
+  </el-button>
+</template>
+
+<script>
+export default {
+  name: 'Button',
+  props: {
+    type: {
+      type: String,
+      default: 'primary',
+      validator(v) {
+        return ['default', 'primary', 'info', 'danger', 'warning'].includes(v)
+      }
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    oType() {
+      switch (this.type) {
+        case 'default':
+        case 'primary':
+          return 'primary'
+        case 'info':
+          return undefined
+        case 'danger':
+          return 'danger'
+        case 'warning':
+          return 'warning'
+        default:
+          return 'primary'
+      }
+    },
+    plain() {
+      switch (this.type) {
+        case 'default':
+        case 'primary':
+          return false
+        default:
+          return true
+      }
+    }
+  }
+}
+</script>

package/src/components/ContentLoading/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <div v-loading="loading" :element-loading-text="loadingText"></div>
+</template>
+
+<script>
+export default {
+  name: 'ContentLoading',
+  data() {
+    return {
+      loading: true,
+      loadingText: '加载中',
+      timeout: 12000
+    }
+  },
+  mounted() {
+    this.setTimeOut()
+  },
+  activated() {
+    this.setTimeOut()
+  },
+  deactivated() {
+    this.clearTimeOut()
+  },
+  beforeDestroy() {
+    this.clearTimeOut()
+  },
+  methods: {
+    setTimeOut() {
+      clearTimeout(this.sT)
+
+      this.sT = setTimeout(() => {
+        this.loadingText = '请求超时，请刷新尝试'
+      }, this.timeout)
+    },
+    clearTimeOut() {
+      this.loadingText = '加载中'
+      clearTimeout(this.sT)
+    }
+  }
+}
+</script>

package/src/components/ContentNull/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <empty-box type="404">
+    <div slot="content">暂无访问权限</div>
+  </empty-box>
+</template>
+
+<script>
+import EmptyBox from '../Empty/index.vue'
+export default {
+  name: 'ContentNull',
+  components: {
+    EmptyBox
+  },
+  data() {
+    this.isNull = true
+    return {}
+  }
+}
+</script>

package/src/components/DatePicker/index.vue

@@ -0,0 +1,27 @@
+<template>
+  <el-date-picker
+    ref="date-picker"
+    class="n20-date-editor"
+    :class="{ 'has-value': clearable && value }"
+    v-bind="$attrs"
+    :value="value"
+    :clearable="clearable"
+    v-on="$listeners"
+  />
+</template>
+
+<script>
+export default {
+  name: 'DatePicker',
+  props: {
+    value: {
+      type: [String, Number, Date],
+      default: undefined
+    },
+    clearable: {
+      type: Boolean,
+      default: true
+    }
+  }
+}
+</script>