n20-common-lib 1.1.98

package/src/assets/css/rootvar.scss

@@ -0,0 +1,139 @@
+@import './element-variables.scss';
+$--color-FFBF00: #ffbf00;
+
+:root {
+  // Color
+  --color-primary: #{$--color-primary};
+  --color-white: #{$--color-white};
+  --color-black: #{$--color-black};
+  --color-primary-light-1: #{$--color-primary-light-1};
+  --color-primary-light-2: #{$--color-primary-light-2};
+  --color-primary-light-3: #{$--color-primary-light-3};
+  --color-primary-light-4: #{$--color-primary-light-4};
+  --color-primary-light-5: #{$--color-primary-light-5};
+  --color-primary-light-6: #{$--color-primary-light-6};
+  --color-primary-light-7: #{$--color-primary-light-7};
+  --color-primary-light-8: #{$--color-primary-light-8};
+  --color-primary-light-9: #{$--color-primary-light-9};
+  --color-success: #{$--color-success};
+  --color-warning: #{$--color-warning};
+  --color-danger: #{$--color-danger};
+  --color-info: #{$--color-info};
+  --color-success-light: #{$--color-success-light};
+  --color-warning-light: #{$--color-warning-light};
+  --color-danger-light: #{$--color-danger-light};
+  --color-info-light: #{$--color-info-light};
+  --color-success-lighter: #{$--color-success-lighter};
+  --color-warning-lighter: #{$--color-warning-lighter};
+  --color-danger-lighter: #{$--color-danger-lighter};
+  --color-info-lighter: #{$--color-info-lighter};
+  --button-disabled-background-color: #{$--button-disabled-background-color};
+
+  --color-mask: #{rgba($--color-black, 0.45)};
+
+  --color-primary-hover: #{$--color-primary-hover};
+  --color-success-hover: #{$--color-success-hover};
+  --color-warning-hover: #{$--color-warning-hover};
+  --color-danger-hover: #{$--color-danger-hover};
+  --color-info-hover: #{$--color-info-hover};
+
+  --color-primary-01: #{rgba($--color-primary, 0.1)};
+  --color-primary-04: #{rgba($--color-primary, 0.4)};
+
+  --color-warning-01: #{rgba($--color-warning, 0.1)};
+  --color-warning-04: #{rgba($--color-warning, 0.4)};
+
+  --color-FFBF00: #{$--color-FFBF00};
+  --color-FFBF00-hover: #{mix($--color-black, $--color-FFBF00, 10%)};
+  --color-FFBF00-01: #{rgba($--color-FFBF00, 0.1)};
+  --color-FFBF00-04: #{rgba($--color-FFBF00, 0.4)};
+
+  --color-success-01: #{rgba($--color-success, 0.1)};
+  --color-success-04: #{rgba($--color-success, 0.4)};
+
+  // Text
+  --color-text-primary: #{$--color-text-primary};
+  --color-text-regular: #{$--color-text-regular};
+  --color-text-secondary: #{$--color-text-secondary};
+  --color-text-placeholder: #{$--color-text-placeholder};
+  // Border
+  --border-color-base: #{$--border-color-base};
+  --border-color-light: #{$--border-color-light};
+  --table-row-hover-background-color: #{$--table-row-hover-background-color};
+  --border-color-lighter: #{$--border-color-lighter};
+  --border-color-extra-light: #{$--border-color-extra-light};
+  // Background
+  --background-color-base: #{$--background-color-base};
+  --button-default-border-color: #{$--button-default-border-color};
+  // Link
+  --link-color: #{$--link-color};
+  --link-hover-color: #{$--link-hover-color};
+  // fontSize
+  --font-family-pingfang: 'Pingfang SC';
+  --font-family-yahei: 'Microsoft YaHe';
+  --font-size-extra-large: #{$--font-size-extra-large};
+  --font-size-large: #{$--font-size-large};
+  --font-size-medium: #{$--font-size-medium};
+  --font-size-base: #{$--font-size-base};
+  --font-size-small: #{$--font-size-small};
+  --font-size-extra-small: #{$--font-size-extra-small};
+  // fontWeight
+  --font-weight-bold: #{$--font-weight-bold};
+  --font-weight-primary: #{$--font-weight-primary};
+  --font-weight-secondary: #{$--font-weight-secondary};
+  // fontLineHeight
+  --font-line-height-primary: #{$--font-line-height-primary};
+  --font-line-height-secondary: #{$--font-line-height-secondary};
+  --font-color-disabled-base: #{$--font-color-disabled-base};
+  // Size
+  --size-base: #{$--size-base};
+  // Icon
+  --icon-color: #{$--icon-color};
+  --icon-color-base: #{$--icon-color-base};
+  // Radius
+  --border-radius-base: #{$--border-radius-base};
+
+  // line-height
+  --line-height-16: 16px;
+  --line-height-18: 18px;
+  --line-height-22: 22px;
+  --line-height-24: 24px;
+  --line-height-28: 28px;
+  --line-height-32: 32px;
+
+  --background-linear-gradient: linear-gradient(
+    to bottom right,
+    #{mix($--color-white, $--color-primary, 8.5%)},
+    #{$--color-primary}
+  );
+  --color-success-linear-gradient: linear-gradient(
+    to bottom right,
+    #{mix($--color-white, $--color-success, 8.5%)},
+    #{$--color-success}
+  );
+  --color-FFBF00-linear-gradient: linear-gradient(
+    to bottom right,
+    #{mix($--color-white, $--color-FFBF00, 8.5%)},
+    #{$--color-FFBF00}
+  );
+  --color-warning-linear-gradient: linear-gradient(
+    to bottom right,
+    #{mix($--color-white, $--color-warning, 8.5%)},
+    #{$--color-warning}
+  );
+
+  --color-F48393: #f48393;
+  --color-F4CC7A: #f4cc7a;
+  --color-63D9AE: #63d9ae;
+  --color-73A0FA: #73a0fa;
+  --color-83D0EF: #83d0ef;
+  --color-BEE56F: #bee56f;
+  --color-EADF72: #eadf72;
+  --color-F1B688: #f1b688;
+  --color-F9C0B5: #f9c0b5;
+  --color-F49583: #f49583;
+  --color-EC5E5E: #ec5e5e;
+  --color-AE89E0: #ae89e0;
+  --color-5F5CD2: #5f5cd2;
+  --color-7585A2: #7585a2;
+}

package/src/assets/css/select.scss

@@ -0,0 +1,26 @@
+.el-select.remote-icon-auto {
+  .el-select__caret {
+    &::before {
+         content: '\E6E1';
+     }
+  }
+  .is-focus {
+    .el-select__caret {
+        transform: rotate(0deg);
+    }
+  }
+}
+.el-select.remote-icon {
+  .el-select__caret {
+    &::before {
+         content: '\E6E1';
+     }
+  }
+  &.remote-icon-expand {
+    .is-focus {
+      .el-select__caret {
+          transform: rotate(0deg);
+      }
+    }
+  }
+}

package/src/assets/css/title-pop.scss

@@ -0,0 +1,4 @@
+.n20-title-pop {
+  min-width: auto;
+  padding: 6px;
+}

package/src/assets/getJsonc.js

@@ -0,0 +1,50 @@
+/* 引入不被打包的配置文件 */
+import stripJsonc from 'strip-json-comments'
+import realUrl from './realUrl'
+/* 前端(内存)缓存 */
+const jsoncs = {}
+
+export default function getJsonc(url, sync) {
+  const _url = realUrl(url)
+  if (sync) {
+    if (jsoncs[url + '?sync']) {
+      return jsoncs[url + '?sync']
+    } else {
+      const oAjax = new XMLHttpRequest()
+      oAjax.open('GET', _url, false)
+      oAjax.send()
+      if (oAjax.readyState === 4 && oAjax.status === 200) {
+        try {
+          const _data = JSON.parse(stripJsonc(oAjax.responseText))
+          jsoncs[url + '?sync'] = _data
+          jsoncs[url] = Promise.resolve(_data)
+        } catch (error) {
+          throw { error: url + ' illegal file', content: oAjax.responseText }
+        }
+      }
+      return jsoncs[url + '?sync']
+    }
+  } else {
+    if (jsoncs[url]) {
+      return jsoncs[url]
+    } else {
+      const oAjax = new XMLHttpRequest()
+      oAjax.open('GET', _url, true)
+      oAjax.send()
+      jsoncs[url] = new Promise((resolve, reject) => {
+        oAjax.onreadystatechange = () => {
+          if (oAjax.readyState === 4 && oAjax.status === 200) {
+            try {
+              const _data = JSON.parse(stripJsonc(oAjax.responseText))
+              jsoncs[url + '?sync'] = _data
+              resolve(_data)
+            } catch (error) {
+              throw { error: url + ' illegal file', content: oAjax.responseText }
+            }
+          }
+        }
+      })
+      return jsoncs[url]
+    }
+  }
+}

package/src/assets/realUrl.js

@@ -0,0 +1,12 @@
+/* 前缀,针对乾坤做了处理 */
+const prefix = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ || process.env.BASE_URL || '/'
+
+export default function realUrl(url) {
+  if (/^http(s)?:|\/\//.test(url)) {
+    return url
+  } else if (/^\//.test(url)) {
+    return prefix + url.replace(/^\//, '')
+  } else {
+    return url
+  }
+}

package/src/components/Anchor/AnchorItem.vue

@@ -0,0 +1,30 @@
+<template>
+  <ExpandablePane :id="id" :default-expand.sync="show" :title="title"
+    ><slot></slot
+  ></ExpandablePane>
+</template>
+
+<script>
+import ExpandablePane from '../Expandable/main.vue'
+export default {
+  name: 'AnchorItem',
+  components: {
+    ExpandablePane
+  },
+  props: {
+    title: {
+      type: String,
+      default: undefined
+    },
+    id: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      show: true
+    }
+  }
+}
+</script>

package/src/components/Anchor/index.vue

@@ -0,0 +1,185 @@
+<template>
+  <el-scrollbar id="page-scrollbar" style="height: 100%">
+    <div ref="Anchor">
+      <slot></slot>
+      <ul class="n20-anchor">
+        <li
+          v-for="(item, index) in AnchorNavList"
+          :key="index"
+          :class="[
+            'n20-anchor-item',
+            value === item.id ? 'n20-anchor-activit' : ''
+          ]"
+          @click="getAnchorItem(item.id, index)"
+        >
+          {{ item.title }}
+        </li>
+      </ul>
+    </div>
+  </el-scrollbar>
+</template>
+
+<script>
+import {
+  getScrollContainer,
+  vueDebounce
+} from '../../utils/getScrollContainer.js'
+
+export default {
+  name: 'Anchor',
+  props: {
+    scrollDom: {
+      type: String,
+      default: ''
+    },
+    // 默认选中tab按钮
+    value: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      AnchorNavList: [], // 按钮数据
+      AnchorNavMap: {}, // 楼层高度的映射
+      scrollDisabled: false, //禁止滚动函数执行
+      valueType: 1, //当前楼层改变的类型，1是组件传递、按钮直达改变，2是通过滚动监听自动改变
+      scrollFunDebounceFun: vueDebounce('scrollFun', 100)
+    }
+  },
+  computed: {
+    scrollWrap() {
+      if (this.scrollDom) {
+        return document.querySelector(this.scrollDom)
+      } else {
+        return getScrollContainer(this.$refs.Anchor, true)
+      }
+    }
+  },
+  watch: {
+    // 监听楼层变化，当为父组件传递，或者按钮直达时，手动滚动到当前楼层
+    value: function (val) {
+      this.valueType === 1 && this.scrollDomFun(this.AnchorNavMap[val])
+    }
+  },
+  async mounted() {
+    await this.init()
+    // 如果传了当前楼层，直接到达对应的高度
+    if (this.value) {
+      this.scrollWrap.scrollTop = this.AnchorNavMap[this.value]
+    } else {
+      //没有传楼层，则根据当前高度自动获取
+      this.getAnchorValue(this.scrollWrap.scrollTop)
+    }
+    this.scrollWrap.addEventListener('scroll', this.scrollFunDebounce)
+  },
+  beforeDestroy() {
+    this.scrollWrap.removeEventListener('scroll', this.scrollFunDebounce)
+  },
+  methods: {
+    // 初始化，获取电梯按钮数据，获取楼层高度映射
+    init() {
+      let parentTop =
+        this.$refs.Anchor.getBoundingClientRect().top -
+        this.scrollWrap.getBoundingClientRect().top
+      let list = this.$children[0].$children.map((item) => {
+        let rect = item.$el.getBoundingClientRect()
+        let itemScrollTop = item.$el.offsetTop
+        this.AnchorNavMap[item.id] = itemScrollTop
+        return {
+          scrollTop: itemScrollTop,
+          top: rect.top - parentTop,
+          bottom: rect.bottom - parentTop,
+          height: rect.height,
+          title: item.title,
+          id: item.id
+        }
+      })
+      // 去掉多余的节点
+      this.AnchorNavList = list.filter(
+        (val) => val.id !== undefined && val.title !== undefined
+      )
+    },
+    //滚动的函数
+    scrollFun(e) {
+      this.getAnchorValue(e.target.scrollTop)
+    },
+    scrollFunDebounce(e) {
+      !this.scrollDisabled && this.scrollFunDebounceFun(e)
+    },
+    // 根据当前高度获取楼层位置
+    getAnchorValue(scrollTop) {
+      let arr = []
+      for (let i = 0; i < this.AnchorNavList.length; i++) {
+        let item = this.AnchorNavList[i]
+        let height = this.scrollWrap.getBoundingClientRect().height + scrollTop
+        let value = 0
+        if (scrollTop <= item.top) {
+          value = height - item.top
+          if (value > item.height) {
+            value = item.height
+          } else if (value < 0) {
+            value = 0
+          }
+        } else if (scrollTop > item.top && scrollTop <= item.bottom) {
+          value = item.bottom - scrollTop
+        }
+        value = value / item.height
+        arr.push(value)
+      }
+      let max = Math.max(...arr)
+      for (let i = 0; i < arr.length; i++) {
+        if (arr[i] === max) {
+          this.valueType = 2
+          this.$emit('input', this.AnchorNavList[i].id)
+          break
+        }
+      }
+    },
+    getAnchorItem(id, i) {
+      //直达楼层
+      if (id === this.value || this.scrollDisabled) {
+        return
+      }
+      this.$children[0].$children[i].show = true
+      this.valueType = 1
+      this.$emit('input', id)
+    },
+    // 模拟滚动
+    scrollDomFun(itemScrollTop) {
+      this.scrollDisabled = true //模拟滚动过程中，禁用直达楼层和监听的滚动事件
+      let speed = 50
+      let scrollTop = this.scrollWrap.scrollTop
+      if (itemScrollTop > scrollTop) {
+        // 向下滚动
+        let timer = setInterval(() => {
+          scrollTop += speed
+          if (scrollTop < itemScrollTop) {
+            this.scrollWrap.scrollTop = scrollTop
+          } else {
+            this.scrollWrap.scrollTop = itemScrollTop
+            clearInterval(timer)
+            setTimeout(() => {
+              this.scrollDisabled = false
+            }, 100)
+          }
+        }, 20)
+      } else {
+        // 向上滚动
+        let timer = setInterval(() => {
+          scrollTop -= speed
+          if (scrollTop >= itemScrollTop) {
+            this.scrollWrap.scrollTop = scrollTop
+          } else {
+            this.scrollWrap.scrollTop = itemScrollTop
+            clearInterval(timer)
+            setTimeout(() => {
+              this.scrollDisabled = false
+            }, 100)
+          }
+        }, 20)
+      }
+    }
+  }
+}
+</script>

package/src/components/ApprovalButtons/index.vue

@@ -0,0 +1,232 @@
+/* 审批按钮组 */
+<template>
+  <div>
+    <el-form label-position="left" label-width="5em">
+      <el-form-item label="审批意见" :error="errMsg">
+        <el-input
+          ref="msg-input"
+          v-model="messageC"
+          type="textarea"
+          placeholder="请输入操作意见（50字以内），批准该意见为非必填，驳回/作废该意见为必填！"
+          :maxlength="50"
+          :autosize="{ minRows: 1 }"
+        />
+      </el-form-item>
+    </el-form>
+
+    <div class="text-c">
+      <el-button plain @click="goFrom">返 回</el-button>
+      <el-button v-if="authList.includes('reject')" plain @click="rejectFn"
+        >驳回至发起人</el-button
+      >
+      <el-button
+        v-if="authList.includes('rejectPre')"
+        plain
+        @click="rejectPreFn"
+        >驳回至上一节点</el-button
+      >
+      <el-button
+        v-if="authList.includes('approval')"
+        type="primary"
+        @click="approvalFn"
+        >批 准</el-button
+      >
+      <el-button
+        v-if="authList.includes('discard')"
+        type="danger"
+        plain
+        @click="discardFn"
+        >作 废</el-button
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from '../../utils/axios'
+import { linkGo } from '../../utils/urlToGo'
+import { closeTagsForBackPage } from '../../plugins/CompatibleOld'
+
+export default {
+  name: 'ApprovalButtons',
+  props: {
+    message: {
+      type: String,
+      default: ''
+    },
+    formData: {
+      type: Object,
+      default: () => ({})
+    },
+    signText: {
+      type: String,
+      default: undefined
+    }
+  },
+  data() {
+    this.msgisSync = !!this.$listeners['update:message']
+    return {
+      messageIn: '',
+      errMsg: undefined,
+      taskId: '',
+      taskDefKey: '',
+      authList: []
+    }
+  },
+  computed: {
+    messageC: {
+      get() {
+        return this.msgisSync ? this.message : this.messageIn
+      },
+      set(val) {
+        if (this.msgisSync) {
+          this.$emit('update:message', val)
+        } else {
+          this.messageIn = val
+        }
+      }
+    }
+  },
+  created() {
+    this.taskId = this.$route.query.taskId
+    this.getBtns()
+  },
+  methods: {
+    // 换回到发起页
+    goFrom() {
+      let pathname = location.pathname
+      linkGo()
+      this.$nextTick(() => {
+        closeTagsForBackPage(pathname)
+      })
+    },
+    // 动态获取按钮
+    getBtns() {
+      if (!this.taskId) return false
+
+      axios
+        .get('/bems/activiti/admin/todo/authList/' + this.taskId, null, {
+          loading: false,
+          noMsg: true
+        })
+        .then(({ data = {} }) => {
+          let { taskDefKey, menuAuthority } = data
+
+          this.taskDefKey = taskDefKey
+
+          if (menuAuthority) {
+            this.authList = menuAuthority.split('|')
+          } else {
+            this.authList = ['reject', 'rejectPre', 'approval', 'discard']
+          }
+        })
+        .catch(() => {
+          this.authList = ['reject', 'rejectPre', 'approval', 'discard']
+        })
+    },
+    // 获取提交参数
+    getParam() {
+      let { typeCode, taskId, groupNo } = this.$route.query
+      return [
+        {
+          typeCode,
+          taskId,
+          groupNo,
+          taskDefKey: this.taskDefKey,
+          message: this.messageC,
+          formData: JSON.stringify(this.formData),
+          signText: this.signText
+        }
+      ]
+    },
+    // 提交后的提示
+    thenMsg(data = {}, str = '操作') {
+      let { failCount, failList = {} } = data
+      if (failCount > 0) {
+        if (Array.isArray(failList)) {
+          let _failList = {}
+          failList.forEach((f = {}) => {
+            Object.assign(_failList, f)
+          })
+          failList = _failList
+        }
+        let errArr = Object.values(failList)
+        if (errArr.length > 0) {
+          this.$message.error(errArr.join('、'))
+        } else {
+          this.$message.error(str + '失败')
+        }
+      } else {
+        this.$message.success(str + '成功')
+        this.goFrom()
+      }
+    },
+    errMsgFn(str = '') {
+      this.$refs['msg-input'].focus()
+      this.errMsg = str + '操作，意见不能为空'
+      setTimeout(() => {
+        this.errMsg = undefined
+      }, 1000)
+    },
+    // 如果有前置处理,先执行前置处理
+    beforeFn(bFn, callFn) {
+      if (!bFn) {
+        callFn()
+      } else if (bFn instanceof Promise) {
+        bFn().then(callFn)
+      } else if (bFn instanceof Function) {
+        bFn(callFn)
+      }
+    },
+    // 驳回
+    rejectFn() {
+      if (!this.messageC) {
+        return this.errMsgFn('驳回')
+      }
+      this.beforeFn(this.$attrs.beforeReject, () => {
+        axios
+          .post('/bems/activiti/admin/todo/reject', this.getParam())
+          .then(({ data }) => {
+            this.thenMsg(data, '驳回至发起人')
+          })
+      })
+    },
+    // 驳回到上一步
+    rejectPreFn() {
+      if (!this.messageC) {
+        return this.errMsgFn('驳回')
+      }
+      this.beforeFn(this.$attrs.beforeRejectPre, () => {
+        axios
+          .post('/bems/activiti/admin/todo/rejectpre', this.getParam())
+          .then(({ data }) => {
+            this.thenMsg(data, '驳回至上一节')
+          })
+      })
+    },
+    // 审批
+    approvalFn() {
+      this.beforeFn(this.$attrs.beforeRatify, () => {
+        axios
+          .post('/bems/activiti/admin/todo/advance', this.getParam())
+          .then(({ data }) => {
+            this.thenMsg(data, '批准')
+          })
+      })
+    },
+    // 作废
+    discardFn() {
+      if (!this.messageC) {
+        return this.errMsgFn('作废')
+      }
+      this.beforeFn(this.$attrs.beforeDiscard, () => {
+        axios
+          .post('/bems/activiti/admin/todo/cancle', this.getParam())
+          .then(({ data }) => {
+            this.thenMsg(data, '作废')
+          })
+      })
+    }
+  }
+}
+</script>