n20-common-lib 1.3.10 → 1.3.11

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

@@ -0,0 +1,270 @@
+<template>
+  <div
+      class="nstc-input-tag"
+      @mouseenter="!disabled && (isHover = true)"
+      @mouseleave="!disabled && (isHover = false)"
+  >
+    <div
+        class="el-select__tags"
+        :ref="`nstc-input-tag-${random}`"
+        :id="`nstc-input-tag-${random}`"
+    >
+      <template v-if="tags.length">
+        <el-tag
+            v-if="tags.length === 1"
+            type="info"
+            :closable="closable"
+            @close="handleClose(0)"
+        >
+          <span>{{ tags[0][props.label] }}</span>
+        </el-tag>
+        <template v-else-if="collapseTags && tags.length > 1">
+          <el-tag type="info" :closable="closable" @close="handleClose(0)">
+            <span :title="tags[0][props.label]">{{
+                tags[0][props.label].length > 5
+                    ? tags[0][props.label].substring(0, 5) + "..."
+                    : tags[0][props.label]
+              }}</span>
+          </el-tag>
+          <el-tag type="info" disable-transitions>
+            <span class="el-select__tags-text">+ {{ tags.length - 1 }}</span>
+          </el-tag>
+        </template>
+        <el-tags
+            v-else
+            v-for="(tag, index) in tags"
+            :key="index"
+            type="info"
+            :closable="closable"
+            disable-transitions
+            @close="handleClose(index)"
+        >
+          <span :title="tag[props.value]">{{
+              tag[props.value].length > 6
+                  ? tag[props.value].substring(0, 6) + "..."
+                  : tag[props.value]
+            }}</span>
+        </el-tags>
+      </template>
+      <input
+          v-model="inputValue"
+          type="text"
+          class="el-select__input"
+          :disabled="disabled"
+          @input="handleInput"
+          @blur="handBlur"
+          @focus="isFocus = true"
+          ref="input"
+      />
+    </div>
+    <div
+        :class="[
+        'nstc-input-tag-wrapper',
+        'el-input',
+        'el-input--suffix',
+        { 'is-focus': isFocus },
+      ]"
+    >
+      <input
+          type="text"
+          readonly="readonly"
+          autocomplete="off"
+          :placeholder="tags.length || inputValue ? '' : '请选择'"
+          class="el-input__inner"
+          :style="{ height: baseInputHeight + 'px' }"
+      />
+      <!-- :style="{
+          height:
+            tags.length === 0
+              ? baseInputHeight + 'px'
+              : (Math.ceil(contentWidth / wrapperWidth) || 1) *
+                  baseInputHeight +
+                'px',
+        }" -->
+      <span class="el-input__suffix">
+        <span
+            v-if="isHover && tags.length"
+            slot="suffix"
+            class="icon-close el-icon-circle-close"
+            @click="handleClear"
+        ></span>
+        <span class="el-input__suffix-inner" v-else>
+          <i
+              :class="[
+              'el-select__caret',
+              'el-input__icon',
+              'el-icon-arrow-up',
+              { 'is-reverse': isFocus },
+            ]"
+          ></i>
+        </span>
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "InputTag",
+  props: {
+    value: {
+      type: Array,
+      default: () => [],
+    },
+    closable: {
+      type: Boolean,
+      default: true,
+    },
+    clearable: {
+      type: Boolean,
+      default: true,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    collapseTags: {
+      type: Boolean,
+      default: true,
+    },
+    props: {
+      type: Object,
+      default: () => {
+        return {
+          label: "label",
+          value: "value",
+        };
+      },
+    },
+  },
+  data() {
+    return {
+      random: Date.now(),
+      inputValue: "",
+      isFocus: false,
+      isHover: false,
+      baseInputHeight: 32,
+      wrapperWidth: 0,
+      contentWidth: 0,
+    };
+  },
+  computed: {
+    tags: {
+      get() {
+        return this.value;
+      },
+      set(val) {
+        this.$emit("input", val);
+      },
+    },
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.tags = val;
+      },
+      deep: true,
+      Immediate: true,
+    },
+    tags: {
+      handler(val) {
+        this.inputValue = "";
+        this.handleInput();
+        this.$emit("input", val);
+        this.contentWidth = this.getContentWidth();
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    this.contentWidth = this.getContentWidth();
+    this.wrapperWidth = this.$refs[`nstc-input-tag-${this.random}`].clientWidth;
+  },
+  methods: {
+    handBlur() {
+      this.isFocus = false;
+      this.$emit("clearFilterText");
+      this.inputValue = "";
+    },
+    handleInput() {
+      this.$emit("input-value", this.inputValue);
+    },
+    handleClose(index) {
+      this.tags.splice(index, 1);
+    },
+    handleClear(e) {
+      e.stopPropagation();
+      // this.tags = [];  // bug: 直接修改引用地址不会生效
+      // 这里暂时倒序挨个删除
+      for (let i = this.tags.length - 1; i >= 0; i--) {
+        this.tags.splice(i, 1);
+      }
+    },
+    getContentWidth() {
+      let contentWidth = 0;
+      const tags = document.querySelectorAll(
+          `#nstc-input-tag-${this.random} .el-tag`
+      );
+      tags.forEach((tag) => {
+        contentWidth += tag.offsetWidth;
+      });
+      return contentWidth;
+    },
+  },
+};
+</script>
+<style scoped>
+.nstc-input-tag {
+  position: relative;
+  width: 224px;
+}
+
+.nstc-input-tag .el-select__tags {
+  width: calc(100% - 30px);
+}
+
+.nstc-input-tag .el-select__tags input {
+  flex: 1;
+  width: 0;
+}
+
+.nstc-input-tag-wrapper.is-focus input {
+  border-color: #409eff;
+}
+
+.nstc-input-tag .el-tag {
+  display: flex;
+  max-width: calc(100% - 30px);
+  height: 24px;
+  line-height: 24px;
+  margin-left: 10px;
+}
+
+.nstc-input-tag .el-tag > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.nstc-input-tag::v-deep .el-tag > i {
+  margin-top: 5px !important;
+}
+
+.nstc-input-tag-wrapper i {
+  transform: rotate(180deg);
+  transition: 0.3s;
+}
+
+.nstc-input-tag-wrapper i.is-reverse {
+  transform: rotate(0deg);
+}
+
+.nstc-input-tag-wrapper .el-input__suffix {
+  pointer-events: unset;
+}
+
+.nstc-input-tag-wrapper .icon-close {
+  width: 25px;
+  right: 5px;
+  text-align: center;
+  cursor: pointer;
+}
+</style>

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

@@ -0,0 +1,24 @@
+<!--
+  功能：    审批页面按钮
+  作者：    nstc
+  创建时间： 2021-08-11
+-->
+<template>
+  <div class="nstc-approvel">
+    <ApprovalRecord />
+    <ApprovalButtons />
+  </div>
+</template>
+
+<script>
+import ApprovalRecord from '../../../src/components/ApprovalRecord/index.vue'
+import ApprovalButtons from '../../../src/components/ApprovalButtons/index.vue'
+
+export default {
+  name: 'NstcApprovel',
+  components: {
+    ApprovalRecord,
+    ApprovalButtons
+  }
+}
+</script>

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

@@ -0,0 +1,150 @@
+<template>
+  <transition :name="transitionName">
+    <div
+        v-show="visible"
+        :style="customStyle"
+        class="back-to-ceiling"
+        @click="backToTop"
+    >
+      <svg
+          width="16"
+          height="16"
+          viewBox="0 0 17 17"
+          xmlns="http://www.w3.org/2000/svg"
+          class="Icon Icon--backToTopArrow"
+          aria-hidden="true"
+          style="height:16px;width:16px"
+      ><path d="M12.036 15.59a1 1 0 0 1-.997.995H5.032a.996.996 0 0 1-.997-.996V8.584H1.03c-1.1 0-1.36-.633-.578-1.416L7.33.29a1.003 1.003 0 0 1 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.004z" /></svg>
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: 'NstcBackToTop',
+  props: {
+    visibilityHeight: {
+      type: Number,
+      default: 400
+    },
+    backPosition: {
+      type: Number,
+      default: 0
+    },
+    customStyle: {
+      type: Object,
+      default: function() {
+        return {
+          right: '50px',
+          bottom: '70px',
+          width: '40px',
+          height: '40px',
+          'border-radius': '4px',
+          'line-height': '45px',
+          background: '#e7eaf1'
+        }
+      }
+    },
+    transitionName: {
+      type: String,
+      default: 'fade'
+    },
+    scrollBoxClassName: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      interval: null,
+      isMoving: false,
+      pageYOffset: 0,
+      scrollBox: ''
+    }
+  },
+  mounted() {
+    window.addEventListener('scroll', this.handleScroll,true)
+  },
+  beforeDestroy() {
+    if (this.scrollBox) {
+      this.scrollBox && this.scrollBox.removeEventListener('scroll', this.handleScroll)
+    } else {
+      window.removeEventListener('scroll', this.handleScroll)
+    }
+    if (this.interval) {
+      clearInterval(this.interval)
+    }
+  },
+  methods: {
+    handleScroll() {
+      this.scrollTop = document.getElementsByClassName(this.scrollBoxClassName)[0].scrollTop ||
+           window.pageYOffset ||
+           document.documentElement.scrollTop ||
+           document.body.scrollTop
+      this.visible = this.scrollTop > this.visibilityHeight
+    },
+    backToTop() {
+      document.getElementsByClassName(this.scrollBoxClassName)[0].scrollTo(0,0)
+      // console.log(55,this.isMoving)
+      // if (this.isMoving) return
+      // const start = this.pageYOffset
+      // let i = 0
+      // this.isMoving = true
+      // this.interval = setInterval(() => {
+      //   console.log(66,start)
+      //   const next = Math.floor(this.easeInOutQuad(20 * i, start, -start, 500))
+      //   if (next <= this.backPosition) {
+      //     if (this.scrollBox) {
+      //       this.scrollBox.scrollTo(0, this.backPosition)
+      //     } else {
+      //       window.scrollTo(0, this.backPosition)
+      //     }
+      //     clearInterval(this.interval)
+      //     this.isMoving = false
+      //   } else {
+      //     if (this.scrollBox) {
+      //       this.scrollBox.scrollTo(0, next)
+      //     } else {
+      //       window.scrollTo(0, next)
+      //     }
+      //   }
+      //   i++
+      // }, 16.7)
+    },
+    // easeInOutQuad(t, b, c, d) {
+    //   if ((t /= d / 2) < 1) return c / 2 * t * t + b
+    //   return -c / 2 * (--t * (t - 2) - 1) + b
+    // }
+  }
+}
+</script>
+
+<style>
+.back-to-ceiling {
+  position: fixed;
+  display: inline-block;
+  text-align: center;
+  cursor: pointer;
+  z-index: 3000;
+}
+
+.back-to-ceiling:hover {
+  background: #d5dbe7;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity .5s;
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0
+}
+
+.back-to-ceiling .Icon {
+  fill: #9aaabf;
+  background: none;
+}
+</style>

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

@@ -0,0 +1,123 @@
+<template>
+  <div class="BranchLazyLoad">
+    <el-select
+      v-model="registerForm.branchBankNo"
+      v-el-select-loadmore="loadMore"
+      :default-first-option="true"
+      :filterable="true"
+      clearable
+      remote
+      :remote-method="remoteMethod"
+      @change="changeBranchBank"
+      @blur="blurBranchBank"
+    >
+      <el-option
+        v-for="(item, index) in accountAssociateBankDb"
+        :key="index"
+        :label="item.label"
+        :value="item.value"
+      />
+    </el-select>
+  </div>
+</template>
+
+<script>
+import axios from '../../utils/axios'
+export default {
+  name: 'NstcBranchLazyLoad',
+  directives: {
+    'el-select-loadmore': {
+      bind(el, binding) {
+        const SELECTWRAP_DOM = el.querySelector(
+          '.el-select-dropdown .el-select-dropdown__wrap'
+        )
+        SELECTWRAP_DOM.addEventListener('scroll', function () {
+          const condition =
+            this.scrollHeight - this.scrollTop <= this.clientHeight
+          if (condition) {
+            binding.value()
+          }
+        })
+      }
+    }
+  },
+  props: {
+    url: {
+      type: String,
+      message: ''
+    }
+  },
+  data() {
+    return {
+      associatePagination: {
+        'page.current': 0,
+        'page.size': 20,
+        // key: 'branchBank',
+        branchBankName: null,
+        branchBankNo: null
+      },
+      registerForm: {
+        branchBankNo: ''
+      },
+      accountAssociateBankDb: []
+    }
+  },
+  async created() {
+    await this.loadMore()
+  },
+  methods: {
+    /**
+     * remoteMethod
+     */
+    remoteMethod(query) {
+      if (query !== '') {
+        this.associatePagination['page.current'] = 1
+        this.associatePagination['page.size'] = 20
+        this.associatePagination.branchBankName = query
+        this.getAssociateBank('query')
+      }
+    },
+    /**
+     * 获取支行下拉值
+     */
+    async getAssociateBank(flag) {
+      flag === 'loadMore' && this.associatePagination['page.current']++
+      // this.associatePagination.bankNo = this.applyForm.bankNo
+      await axios
+        .get(this.url, this.associatePagination)
+        .then((res) => {
+          res = res.data.map((i) => {
+            return {
+              label: i[`branchBankName`],
+              value: i[`cnapsNo`],
+              bankNo: i[`bankNo`]
+            }
+          })
+          if (flag === 'query') {
+            this.accountAssociateBankDb = res
+          } else {
+            this.accountAssociateBankDb =
+              this.accountAssociateBankDb.concat(res)
+          }
+        })
+        .catch(() => {})
+    },
+    /**
+     * 支行失去焦点
+     */
+    blurBranchBank() {
+      if (!this.registerForm.branchBankNo) {
+        setTimeout(() => {
+          this.remoteMethod()
+        }, 30)
+      }
+    },
+    changeBranchBank() {
+      this.$emit('branchbankNo', this.registerForm.branchBankNo)
+    },
+    async loadMore() {
+      await this.getAssociateBank('loadMore')
+    }
+  }
+}
+</script>