n20-common-lib 1.1.10

package/src/assets/css/element.dev.scss

@@ -0,0 +1,5 @@
+@import './element-variables.scss';
+/* 改变 icon 字体路径变量，必需 */
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
+
+@import '~element-ui/packages/theme-chalk/src/index';

package/src/assets/css/font-icon.scss

@@ -0,0 +1,22 @@
+@import url('//at.alicdn.com/t/font_2782772_v2yjhk8rgm7.css');
+
+.cl-icon- {
+  font-family: 'core-lib-iconfont' !important;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  vertical-align: baseline;
+  display: inline-block;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+[class^='cl-icon-'],
+[class*=' cl-icon-'] {
+  @extend .cl-icon-;
+}
+.el-icon-date:before {
+  @extend .cl-icon-;
+  content: '\e602';
+}

package/src/assets/css/index.dev.scss

@@ -0,0 +1,3 @@
+@import './element-variables.scss';
+
+@import './_coreLib.scss';

package/src/assets/css/index.scss

@@ -0,0 +1,8 @@
+@import '~normalize.css';
+
+@import './element-variables.scss';
+
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
+@import '~element-ui/packages/theme-chalk/src/index';
+
+@import './_coreLib.scss';

package/src/assets/css/normalize.scss

@@ -0,0 +1,243 @@
+$--font-size-base: 14px !default;
+$--border-color-base: #dcdfe6 !default;
+
+body {
+  font-size: $--font-size-base;
+}
+li {
+  list-style: none;
+}
+iframe {
+  border: 0;
+  outline: none;
+}
+
+/* 菜单滚动条 */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  width: 6px;
+  background-color: #d3d9e6;
+}
+
+::-webkit-scrollbar-track-piece {
+  width: 6px;
+}
+
+@mixin set-pm($m, $p) {
+  .p-a#{$m} {
+    padding: $p;
+  }
+
+  .p-t#{$m} {
+    padding-top: $p;
+  }
+
+  .p-b#{$m} {
+    padding-bottom: $p;
+  }
+
+  .p-l#{$m} {
+    padding-left: $p;
+  }
+
+  .p-r#{$m} {
+    padding-right: $p;
+  }
+
+  .m-a#{$m} {
+    margin: $p;
+  }
+
+  .m-t#{$m} {
+    margin-top: $p;
+  }
+
+  .m-b#{$m} {
+    margin-bottom: $p;
+  }
+
+  .m-l#{$m} {
+    margin-left: $p;
+  }
+
+  .m-r#{$m} {
+    margin-right: $p;
+  }
+}
+
+/* 内外边距 */
+@include set-pm('', 16px !important);
+@include set-pm('-xl', 32px !important);
+@include set-pm('-lg', 24px !important);
+@include set-pm('-m', 16px !important);
+@include set-pm('-s', 8px !important);
+@include set-pm('-0', 0 !important);
+
+/* 浮动布局 */
+.left,
+.float-left {
+  float: left;
+}
+
+.right,
+.float-right {
+  float: right;
+}
+
+.overflow {
+  height: auto;
+  overflow: hidden;
+}
+
+.overflow-clear {
+  &:after {
+    content: '';
+    display: block;
+    clear: both;
+  }
+}
+
+/* 行内块元素水平垂直对齐方式 */
+.b-center {
+  text-align: center;
+  & > * {
+    display: inline-block;
+    vertical-align: bottom;
+  }
+}
+
+.b-vertical {
+  font-size: 0;
+  & > * {
+    vertical-align: middle;
+    display: inline-block;
+    font-size: 14px;
+  }
+  &:before {
+    content: '';
+    vertical-align: middle;
+    display: inline-block;
+    width: 0px;
+    height: 100%;
+  }
+}
+
+/* 文字居中 */
+.text {
+  &-c {
+    text-align: center !important;
+  }
+  &-l {
+    text-align: left !important;
+  }
+  &-r {
+    text-align: right !important;
+  }
+  &-lr {
+    text-align: justify;
+    text-justify: inter-word;
+  }
+}
+
+/* 弹性盒模型 */
+.flex {
+  &-box {
+    display: flex;
+  }
+  &-column {
+    display: flex;
+    flex-direction: column;
+  }
+  > * {
+    flex: none;
+  }
+  &-v {
+    align-items: center;
+  }
+  &-l {
+    justify-content: flex-start;
+  }
+  &-r {
+    justify-content: flex-start;
+  }
+  &-c {
+    justify-content: center;
+  }
+  &-lr {
+    justify-content: space-between;
+  }
+}
+
+.flex-item {
+  flex: auto;
+}
+@for $n from 0 to 10 {
+  .flex-#{$n} {
+    flex: $n $n auto;
+  }
+}
+
+/* 旋转图标90度 */
+.rotate90 {
+  display: inline-block;
+  transform: rotate(90deg);
+  cursor: pointer;
+}
+
+/* 清除背景色 */
+.bg {
+  &-none {
+    background: none !important;
+  }
+}
+
+/* 边框 */
+.bd {
+  &-none {
+    border: none !important;
+  }
+  &-a {
+    border: 1px solid $--border-color-base;
+  }
+  &-t {
+    border-top: 1px solid $--border-color-base;
+  }
+  &-l {
+    border-left: 1px solid $--border-color-base;
+  }
+  &-r {
+    border-right: 1px solid $--border-color-base;
+  }
+  &-b {
+    border-bottom: 1px solid $--border-color-base;
+  }
+}
+
+/* 设置弹窗内容区内边距 */
+.el-dialog__wrapper {
+  &.p-a-0 {
+    .el-dialog__body {
+      padding: 0;
+    }
+  }
+  &.p-t-0 {
+    .el-dialog__body {
+      padding-top: 0;
+    }
+  }
+  &.p-b-0 {
+    .el-dialog__body {
+      padding-bottom: 0;
+    }
+  }
+}

package/src/assets/css/rootvar.scss

@@ -0,0 +1,66 @@
+@import './element-variables.scss';
+
+: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};
+  // 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};
+  --border-color-lighter: #{$--border-color-lighter};
+  --border-color-extra-light: #{$--border-color-extra-light};
+  // Background
+  --background-color-base: #{$--background-color-base};
+  // Link
+  --link-color: #{$--link-color};
+  --link-hover-color: #{$--link-hover-color};
+  // fontSize
+  --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-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};
+  --font-weight-primary: #{$--font-weight-primary};
+  // Icon
+  --font-weight-primary: #{$--font-weight-primary};
+  --font-weight-primary: #{$--font-weight-primary};
+  // Radius
+  --border-radius-base: #{$--border-radius-base};
+}

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

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

package/src/assets/getJsonc.js

@@ -0,0 +1,51 @@
+/* 引入不被打包的配置文件 */
+import stripJsonc from 'strip-json-comments'
+/* 前缀,针对乾坤做了处理 */
+const prefix = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ || process.env.BASE_URL || '/'
+/* 前端(内存)缓存 */
+const jsoncs = {}
+
+export default function getJsonc(url, sync) {
+  const _url = /^\/[^/]/.test(url) ? prefix + url.replace(/^\//, '') : 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/postMessage.js

@@ -0,0 +1,2 @@
+import MessagePro from '@/assets/postMessageC'
+export default new MessagePro('sub_1')

package/src/assets/postMessageC.js

@@ -0,0 +1,37 @@
+export default class MessagePro {
+  constructor(appName) {
+    this.appName = appName
+    this.messageFns = []
+
+    window.addEventListener(
+      'message',
+      (ev) => {
+        if (ev.origin !== window.origin) return
+        const { targetName, originName } = ev.data
+        if (targetName === this.appName || (targetName === '*' && originName !== this.appName)) {
+          this.messageFns.forEach((fn) => fn(ev))
+        }
+      },
+      false
+    )
+  }
+  on(fn) {
+    if (fn) {
+      let _i = this.messageFns.indexOf(fn)
+      _i === -1 && this.messageFns.push(fn)
+    }
+  }
+  off(fn) {
+    if (fn) {
+      let _i = this.messageFns.indexOf(fn)
+      _i !== -1 && this.messageFns.splice(_i, 1)
+    } else {
+      this.messageFns = []
+    }
+  }
+  emit(data, targetOrigin, targetName) {
+    let target = targetOrigin || window.origin
+    let _data = Object.assign({}, data, { targetName, originName: this.appName })
+    window.postMessage(_data, target)
+  }
+}

package/src/components/ApproveCard/index.vue

@@ -0,0 +1,83 @@
+/**
+* author: zhengwei
+* time: 2021-9-2
+*/
+<template>
+  <el-card v-if="isClose" class="cl-approve-card">
+    <div slot="header">
+      <span>审批记录</span>
+      <i
+        v-if="close"
+        class="el-icon-close"
+        style="float: right; padding: 3px 0"
+        @click="isClose = !isClose"
+      ></i>
+    </div>
+    <div class="cl-approve-list">
+      <div
+        v-for="(item, index) in approvalData"
+        :key="index"
+        class="cl-approve-item"
+      >
+        <div class="cl-approve-item-exist">
+          <div class="cl-approve-item-time">{{ item.endTime }}</div>
+          <div
+            class="cl-approve-item-origin"
+            :class="{
+              'cl-approve-origin-bgc': item.result === 1,
+              'cl-approve-origin-bgc-no': item.result === 2
+            }"
+          ></div>
+          <span class="cl-approve-icon cl-icon-user"></span>
+          <span v-if="typeof item.assignee === 'string'">{{
+            item.assignee
+          }}</span>
+          <span v-else @click="isShow = !isShow">
+            <span v-if="isShow">{{ item.assignee[0] + '...' }}</span>
+            <span v-else>
+              <span v-for="(val, index) in item.assignee" :key="index">
+                <span style="margin: 5px 0">{{ val }}</span>
+              </span>
+            </span>
+          </span>
+          <span
+            v-if="item.optResult"
+            class="cl-approve-node box-nav"
+            :class="{ 'cl-approve-origin-color-no': item.result === 2 }"
+            >{{ item.optResult }}</span
+          >
+          <span v-if="item.suggestion" class="cl-approve-node"
+            >审批意见：{{ item.suggestion }}</span
+          >
+        </div>
+        <div
+          v-if="approvalData.length !== index + 1"
+          class="cl-approve-connect"
+          :style="item.endTime ? 'background:#1677FF' : ''"
+        ></div>
+      </div>
+    </div>
+  </el-card>
+</template>
+
+<script>
+export default {
+  name: 'ApproveCard',
+  props: {
+    approvalData: {
+      type: Array,
+      default: () => []
+    },
+    close: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      isShow: true,
+      isClose: true
+    }
+  }
+}
+</script>

package/src/components/DatePicker/index.vue

@@ -0,0 +1,22 @@
+<template>
+  <el-date-picker
+    ref="date-picker"
+    :class="{ 'has-value': value }"
+    v-bind="$attrs"
+    :value="value"
+    xxxx
+    v-on="$listeners"
+  />
+</template>
+
+<script>
+export default {
+  name: 'DatePicker',
+  props: {
+    // eslint-disable-next-line vue/require-prop-types
+    value: {
+      default: undefined
+    }
+  }
+}
+</script>

package/src/components/Dialog/index.vue

@@ -0,0 +1,115 @@
+<template>
+  <el-dialog
+    :title="title"
+    :visible.sync="dialogVisible"
+    :width="width"
+    :modal="modal"
+    :top="top"
+    :fullscreen="fullscreen"
+    :modal-append-to-body="modalAppendToBody"
+    :append-to-body="appendToBody"
+    :lock-scroll="lockScroll"
+    :close-on-click-modal="closeOnClickModal"
+    :close-on-press-escape="closeOnPressEscape"
+    :before-close="beforeClose"
+    :custom-class="customClass"
+    :show-close="showClose"
+    :center="center"
+    :destroy-on-close="destroyOnClose"
+    @open="open"
+    @opened="opened"
+    @close="close"
+    @closed="closed"
+  >
+    <slot></slot>
+    <span slot="footer" class="dialog-footer">
+      <slot name="footerBtn"></slot>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'Dialog',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    width: {
+      type: String,
+      default: '30%'
+    },
+    top: {
+      type: String,
+      default: '15vh'
+    },
+    fullscreen: {
+      type: Boolean,
+      default: false
+    },
+    dialogVisible: {
+      type: Boolean,
+      default: false
+    },
+    appendToBody: {
+      type: Boolean,
+      default: false
+    },
+    modalAppendToBody: {
+      type: Boolean,
+      default: true
+    },
+    lockScroll: {
+      type: Boolean,
+      default: true
+    },
+    modal: {
+      type: Boolean,
+      default: true
+    },
+    closeOnClickModal: {
+      type: Boolean,
+      default: false
+    },
+    beforeClose: {
+      type: Function,
+      default: () => {}
+    },
+    customClass: {
+      type: String,
+      default: ''
+    },
+    closeOnPressEscape: {
+      type: Boolean,
+      default: true
+    },
+    showClose: {
+      type: Boolean,
+      default: true
+    },
+    center: {
+      type: Boolean,
+      default: false
+    },
+    destroyOnClose: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    open() {
+      this.$emit('open')
+    },
+    opened() {
+      this.$emit('opened')
+    },
+    close() {
+      this.$emit('close')
+    },
+    closed() {
+      this.$emit('closed')
+    }
+  }
+}
+</script>