n20-common-lib 1.3.10 → 1.3.11

package/nstc-g6/components/NstcSticky/NstcSticky.vue

@@ -0,0 +1,97 @@
+<!--
+  功能：    固定位置页面控件
+  作者：    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/nstc-g6/components/NstcSvgIcon/NstcSvgIcon.vue

@@ -0,0 +1,72 @@
+<!--
+  功能：    加载svg图片组件
+  作者：    nstc
+  创建时间： 2021-02-05
+-->
+<template>
+  <div
+    v-if="isExternal"
+    :style="styleExternalIcon"
+    class="svg-external-icon svg-icon"
+    v-on="$listeners"
+  ></div>
+  <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/nstc-g6/components/NstcTab/NstcTab.vue

@@ -0,0 +1,80 @@
+<!--
+  功能：    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/nstc-g6/components/NstcTabWithBadge/NstcTabWithBadge.vue

@@ -0,0 +1,45 @@
+<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/nstc-g6/components/NstcTabWithBadge/index.scss

@@ -0,0 +1,31 @@
+.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/nstc-g6/components/NstcTable/ElTableColumnCustom/index.vue

@@ -0,0 +1,292 @@
+<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>