n20-common-lib 1.3.3 → 1.3.6

package/src/components/NstcG6Components/NstcSticky/NstcSticky.vue

@@ -1,97 +0,0 @@
-<!--
-  功能：    固定位置页面控件
-  作者：    nstc
-  创建时间： 2021-02-05
--->
-
-<template>
-  <div :style="{height:height+'px',zIndex:zIndex}">
-    <div
-        :class="className"
-        :style="{top:(isSticky ? stickyTop +'px' : ''),zIndex:zIndex,position:position,width:width,height:height+'px'}"
-    >
-      <slot>
-        <div>sticky</div>
-      </slot>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'NstcSticky',
-  props: {
-    stickyTop: {
-      type: Number,
-      default: 0
-    },
-    zIndex: {
-      type: Number,
-      default: 1
-    },
-    className: {
-      type: String,
-      default: ''
-    }
-  },
-  data() {
-    return {
-      active: false,
-      position: '',
-      width: undefined,
-      height: undefined,
-      isSticky: false
-    }
-  },
-  mounted() {
-    this.height = this.$el.getBoundingClientRect().height
-    window.addEventListener('scroll', this.handleScroll,true)
-    window.addEventListener('resize', this.handleResize, true)
-  },
-  activated() {
-    this.handleScroll()
-  },
-  destroyed() {
-    window.removeEventListener('scroll', this.handleScroll)
-    window.removeEventListener('resize', this.handleResize)
-  },
-  methods: {
-    sticky() {
-      if (this.active) {
-        return
-      }
-      this.position = 'fixed'
-      this.active = true
-      this.width = this.width + 'px'
-      this.isSticky = true
-    },
-    handleReset() {
-      if (!this.active) {
-        return
-      }
-      this.reset()
-    },
-    reset() {
-      this.position = ''
-      this.width = 'auto'
-      this.active = false
-      this.isSticky = false
-    },
-    handleScroll() {
-      const width = this.$el.getBoundingClientRect().width
-      this.width = width || 'auto'
-      const offsetTop = this.$el.getBoundingClientRect().top
-      if (offsetTop < this.stickyTop) {
-        this.sticky()
-        return
-      }
-      this.handleReset()
-    },
-    handleResize() {
-      if (this.isSticky) {
-        this.width = this.$el.getBoundingClientRect().width + 'px'
-      }
-    }
-  }
-}
-</script>

package/src/components/NstcG6Components/NstcSvgIcon/NstcSvgIcon.vue

@@ -1,72 +0,0 @@
-<!--
-  功能：    加载svg图片组件
-  作者：    nstc
-  创建时间： 2021-02-05
--->
-<template>
-  <div
-    v-if="isExternal"
-    :style="styleExternalIcon"
-    class="svg-external-icon svg-icon"
-    v-on="$listeners"
-  />
-  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
-    <use :xlink:href="iconName" />
-  </svg>
-</template>
-
-<script>
-import { isExternal } from '../../../utils/validate'
-
-export default {
-  name: 'NstcSvgIcon',
-  props: {
-    iconClass: {
-      type: String,
-      required: true
-    },
-    className: {
-      type: String,
-      default: ''
-    }
-  },
-  computed: {
-    isExternal() {
-      return isExternal(this.iconClass)
-    },
-    iconName() {
-      return `#icon-${this.iconClass}`
-    },
-    svgClass() {
-      if (this.className) {
-        return 'svg-icon ' + this.className
-      } else {
-        return 'svg-icon'
-      }
-    },
-    styleExternalIcon() {
-      return {
-        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
-        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
-      }
-    }
-  }
-}
-</script>
-
-<style>
-.svg-icon {
-  width: 1em;
-  height: 1em;
-  vertical-align: -0.15em;
-  fill: currentColor;
-  overflow: hidden;
-}
-
-.svg-external-icon {
-  background-color: currentColor;
-  mask-size: cover !important;
-  display: inline-block;
-}
-</style>
-

package/src/components/NstcG6Components/NstcTab/NstcTab.vue

@@ -1,80 +0,0 @@
-<!--
-  功能：    tab切换组件
-  作者：    nstc
-  创建时间： 2021-02-04
--->
-<template>
-  <div class="nstc-tab-custom">
-    <el-tabs
-        v-model="_value"
-        v-bind="$attrs"
-        class="nstc-tab"
-        v-on="$listeners"
-    >
-      <el-tab-pane
-          v-for="tab in options"
-          :key="tab.value"
-          v-bind="tab"
-          :name="tab.value"
-      />
-    </el-tabs>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'NstcTab',
-
-  inheritAttrs: false,
-
-  props: {
-    value: {
-      type: String,
-      default: ''
-    },
-
-    options: {
-      type: Array,
-      default: () => []
-    }
-  },
-
-  computed: {
-    _value: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('input', val)
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-.nstc-tab {
-  font-size: 16px;
-  .el-tabs_{
-    &_item {
-      font-size: 16px !important;
-      height: 24px !important;
-      line-height: 24px!important;
-      padding: 0 14px!important;
-    }
-    &_item.is-active {
-      color: #007aff !important;
-      font-weight: 500;
-    }
-    &_item:hover {
-      color: #007aff  !important;
-      cursor: pointer
-    }
-    &_nav-wrap::after {
-      background-color: rgba(0,0,0,0);
-    }
-  }
-}
-
-</style>
-

package/src/components/NstcG6Components/NstcTabWithBadge/NstcTabWithBadge.vue

@@ -1,45 +0,0 @@
-<template>
-  <div class="tab-with-badge">
-    <el-badge
-        v-for="tab in options"
-        :key="tab.value"
-        :value="tab.badgeValue"
-        v-bind="tab"
-        :hidden="!tab.badgeValue"
-        :class="{ active: value === tab.value }"
-    >
-      <span @click="handleClick(tab)">
-        {{ tab.label }}
-      </span>
-    </el-badge>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'NstcTabWithBadge',
-
-  props: {
-    value: {
-      type: String,
-      default: ''
-    },
-
-    options: {
-      type: Array,
-      default: () => []
-    }
-  },
-
-  methods: {
-    handleClick(tab) {
-      this.$emit('input', tab.value)
-      this.$emit('change', tab)
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-@import "index";
-</style>

package/src/components/NstcG6Components/NstcTabWithBadge/index.scss

@@ -1,31 +0,0 @@
-.tab-with-badge {
-  display: flex;
-  align-items: center;
-  .el-badge {
-    padding: 4px 0;
-    margin: 0 20px;
-    cursor: pointer;
-    &:not(:last-child)::after {
-      content: "";
-      display: inline-block;
-      height: 100%;
-      width: 1px;
-      background-color:  #8a8a8a;
-      position: absolute;
-      right: -20px;
-      top: 0;
-    }
-    &:first-child {
-      margin-left: 0;
-    }
-    &:last-child {
-      margin-right: 0;
-    }
-    &:hover {
-      color: #007aff;
-    }
-    &.active {
-      color: #007aff;
-    }
-  }
-}

package/src/components/NstcG6Components/NstcTable/ElTableColumnCustom/index.vue

@@ -1,292 +0,0 @@
-<template>
-  <!-- 多级结构 -->
-  <el-table-column
-      v-if="column.children && column.children.length"
-      :key="column.prop"
-      v-bind="column"
-      :header-align="headerAlign"
-      :align="column.align"
-  >
-    <template v-if="column.explains" v-slot:header>
-      <template v-if="column.explains">
-        <el-button class="explain-txt">
-          {{ column.label }}
-          <el-tooltip class="item" effect="dark" placement="top-start">
-            <div slot="content" v-html="column.explains"/>
-            <!--            <img-->
-            <!--              :src="tipSrc"-->
-            <!--              alt=""-->
-            <!--              class="tipsImg"-->
-            <!--            >-->
-          </el-tooltip>
-        </el-button>
-      </template>
-    </template>
-    <ElTableColumnCustom
-        v-for="subColumn in column.children"
-        :key="`${column.prop || column.label}--${
-        subColumn.prop || subColumn.label
-      }`"
-        :column="subColumn"
-    />
-  </el-table-column>
-
-  <!-- scope注入 -->
-  <el-table-column
-      v-else-if="
-      column[`customSortable`] ||
-      column.component ||
-      column.header ||
-      column.handlers
-    "
-      :key="column.prop || column.label"
-      v-bind="column"
-      :header-align="headerAlign"
-      :align="column.align"
-  >
-    <!--  插入组件  -->
-    <template v-if="column.component || column.handlers" v-slot:default="scope">
-      <template v-if="column.handlers">
-        <template v-for="(handler, idx) in getHandlers(column, scope)">
-          <el-link
-              v-if="idx < breakNum && !handler.hidden"
-              :key="idx"
-              type="primary"
-              :disabled="!!handler.disabled"
-              style="margin-right: 10px"
-              @click="handleCommand(handler, scope)"
-          >
-            {{ handler.label }}
-          </el-link>
-        </template>
-
-        <ElDropdown
-            v-if="getHandlers(column, scope).length > breakNum"
-            placement="bottom-start"
-            :options="getHandlers(column, scope).slice(breakNum)"
-            @command="(item) => handleCommand(item, scope)"
-        >
-          <el-link>
-            <i class="el-icon-more"/>
-          </el-link>
-        </ElDropdown>
-      </template>
-
-      <template v-else>
-        <component
-            :is="compile(column.component, column, scope)"
-            v-if="'template' in column.component"
-        />
-        <component
-            :is="column.component"
-            v-else
-            :column="column"
-            :scope="scope"
-        />
-      </template>
-    </template>
-
-    <!--  插入表头  -->
-    <template
-        v-if="column.header || column[`customSortable`]"
-        v-slot:header="scope"
-    >
-      <template v-if="column.header">
-        <component
-            :is="compile(column.header, column, scope)"
-            v-if="'template' in column.header"
-        />
-        <component :is="column.header" v-else :column="column" :scope="scope"/>
-      </template>
-
-      <template v-if="column.customSortable">
-        <span class="sort-btn" @click="descend(column.prop)">
-          {{ column.label }}
-          <i
-              :class="[
-              'icon-anjiangxupailie',
-              'sort-btn-icon',
-              { active: sortProp === column.prop },
-            ]"
-          />
-        </span>
-      </template>
-    </template>
-  </el-table-column>
-
-  <!-- 只显示占比条和百分比 -->
-  <el-table-column
-      v-else-if="column.progress"
-      :key="column.prop"
-      v-bind="column"
-      :header-align="headerAlign"
-      :align="column.align"
-  >
-    <template slot-scope="scope">
-      <el-progress
-          :percentage="scope.row[column.progress.valueKey]"
-          v-bind="column.progress"
-          type="line"
-      />
-    </template>
-  </el-table-column>
-
-  <!--显示原始值与占比条和百分比值 -->
-  <el-table-column
-      v-else-if="column.valueProgress"
-      :key="column.prop"
-      v-bind="column"
-      :header-align="headerAlign"
-      :align="column.align"
-  >
-    <template slot-scope="scope">
-      <span class="progressbar-value">{{
-          scope.row[scope.column.property]
-        }}</span>
-      <el-progress
-          :percentage="scope.row[column.valueProgress.valueKey]"
-          v-bind="column.valueProgress"
-          type="line"
-      />
-    </template>
-  </el-table-column>
-
-  <el-table-column
-      v-else
-      :key="column.prop || column.label"
-      v-bind="column"
-      :header-align="headerAlign"
-      :align="column.align"
-      show-overflow-tooltip
-  />
-</template>
-
-<script>
-import Vue from "vue";
-
-export default {
-  name: "ElTableColumnCustom",
-
-  props: {
-    column: {
-      default: () => {
-      },
-      type: Object,
-    },
-
-    sortProp: {
-      default: "",
-      type: String,
-    },
-
-    breakNum: {
-      type: [Number, String],
-      default: 2,
-    },
-  },
-
-  data() {
-    return {
-      // tipSrc
-    };
-  },
-
-  computed: {
-    headerAlign() {
-      const {headerAlign} = this.column;
-
-      return headerAlign || "center";
-    },
-
-    getHandlers() {
-      return ({handlers, formatHandlers}, scope) => {
-        return formatHandlers ? formatHandlers(handlers, scope) : handlers;
-      };
-    },
-  },
-
-  methods: {
-    compile(component, column, slotScope) {
-      const template = Vue.compile(component.template);
-      const data = {
-        data() {
-          return Object.assign({}, component.data, {
-            column,
-            scope: slotScope,
-          });
-        },
-      };
-      let obj = Object.assign({}, template, data, component);
-      //将传进的propData设置到新建的组件的data里面
-      if (obj.propData) {
-        if (obj.data) {
-          let dataObj = obj.data();
-          let keys = Object.keys(dataObj);
-          if (keys.length > 0) {
-            obj.data = function data() {
-              let map = {};
-              keys.forEach((key) => {
-                map[key] = dataObj[key];
-              });
-              //把传进的propData也塞进去
-              map = {...map, ...obj.propData};
-              return map;
-            };
-          }
-        }
-      }
-      return obj;
-    },
-
-    descend(prop) {
-      this.$emit("sortPropChange", prop);
-    },
-
-    async handleCommand(item, scope) {
-      try {
-        item.disabled = true;
-
-        item.handler && (await item.handler(scope));
-      } catch (err) {
-        console.error(err);
-      } finally {
-        // eslint-disable-next-line require-atomic-updates
-        item.disabled = false;
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-.sort-btn {
-  display: inline-block;
-  width: 100%;
-  // padding: 0 10px 0 0;
-  background-color: transparent;
-  color: inherit;
-  border: none;
-  font-size: inherit;
-  font-weight: inherit;
-  min-width: 100%;
-  position: relative;
-  white-space: normal;
-
-  &-icon {
-    cursor: pointer;
-    color: #c8cdde;
-    position: absolute;
-    right: -4px;
-    top: 58%;
-    transform: translateY(-50%);
-
-    &.active {
-      color: #258ff8;
-    }
-
-    &:hover {
-      color: #258ff8;
-    }
-  }
-}
-</style>