t20-common-lib 0.7.5 → 0.7.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "t20-common-lib",
-  "version": "0.7.5",
+  "version": "0.7.7",
   "description": "T20",
   "private": false,
   "main": "dist/index.js",
@@ -30,22 +30,33 @@
   "dependencies": {
     "core-js": "^2.6.12",
     "element-ui": "^2.15.13",
+    "n20-common-lib": "^2.16.24",
     "normalize.css": "^8.0.1",
     "vue": "^2.6.14",
-    "vue-server-renderer": "^2.6.14"
+    "vue-server-renderer": "^2.6.14",
+    "vxe-table": "^3.6.17"
   },
   "devDependencies": {
+    "@babel/core": "^7.28.4",
+    "@babel/preset-env": "^7.28.3",
+    "@vue/babel-helper-vue-jsx-merge-props": "^1.4.0",
+    "@vue/babel-preset-jsx": "^1.4.0",
     "@vue/cli-plugin-babel": "~4.5.19",
     "@vue/cli-plugin-eslint": "~4.5.19",
     "@vue/cli-service": "~4.5.19",
     "@vue/component-compiler-utils": "^3.3.0",
     "babel-eslint": "^10.1.0",
+    "babel-loader": "^10.0.0",
     "babel-plugin-component": "^1.1.1",
+    "browserify-fs": "^1.0.0",
     "cross-env": "^7.0.3",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
     "node-sass": "^4.14.1",
+    "os-browserify": "^0.3.0",
+    "path-browserify": "^1.0.1",
     "postcss-loader": "^3.0.0",
+    "process": "^0.11.10",
     "rimraf": "^3.0.2",
     "sass-loader": "^8.0.2",
     "vue-template-compiler": "^2.6.14",

package/packages/common-collapse/index.js

@@ -0,0 +1,8 @@
+import CommonCollapse from './src/main';
+
+/* istanbul ignore next */
+CommonCollapse.install = function(Vue) {
+  Vue.component(CommonCollapse.name, CommonCollapse);
+};
+
+export default CommonCollapse;

package/packages/common-collapse/src/main.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="collapse" :class="{ 'm-b-s': !_isCollapse }">
+    <el-collapse-transition v-if="$slots.default && showCard">
+      <div class="collapse-content" v-show="!_isCollapse">
+        <slot />
+      </div>
+    </el-collapse-transition>
+    <div class="collapse-slot">
+      <el-button v-if="showCard" class="rotate90" :icon="_isCollapse? 'el-icon-d-arrow-right': 'el-icon-d-arrow-left'" plain onlyicon size="mini"  @click="handleToggle"/>
+      <el-button icon="el-icon-setting" plain onlyicon size="mini"  @click="toSettings" />
+      <slot name="action" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CommonCollapse',
+  props: {
+    permission: {
+      type: String,
+      default: ''
+    },
+    value: {
+      type: Boolean,
+      default: false
+    },
+    showCard: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      isCollapse: false
+    }
+  },
+  computed: {
+    hasUsedVModel() {
+      return 'value' in this.$options.propsData
+    },
+    _isCollapse: {
+      get() {
+        return this.hasUsedVModel ? this.value : this.isCollapse
+      },
+      set(val) {
+        if (this.hasUsedVModel) {
+          this.$emit('input', val)
+        } else {
+          this.isCollapse = val
+        }
+      }
+    }
+  },
+  methods: {
+    toSettings() {
+      this.$emit('toSettings')
+    },
+    // 切换 显示/隐藏
+    handleToggle() {
+      this._isCollapse = !this._isCollapse
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.collapse {
+  position: relative;
+  &-slot {
+    z-index: 99999;
+    position: absolute;
+    top: -28px;
+    right: 0;
+    height: 24px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    .el-icon {
+      color: var(--color-text-regular);
+      cursor: pointer;
+      font-weight: bold;
+      font-size: 18px;
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+$--button-margin-left: 6px;
+
+.el-button--primary,
+.el-button--default,
+.el-button--default.is-plain,
+.el-button--warning.is-plain,
+.el-button--danger.is-plain {
+  min-width: 72px;
+}
+
+.el-dropdown__caret-button,
+.el-button[onlyicon] {
+  min-width: auto;
+}
+
+.el-button.button-4em {
+  min-width: 72px;
+}
+
+.el-button+.el-button {
+  margin-left: $--button-margin-left;
+}
+
+.el-button+.el-dropdown {
+  margin-left: $--button-margin-left;
+}
+
+.el-button--mini+.el-button--mini {
+  margin-left: $--button-margin-left;
+}
+
+.el-button[onlyicon] {
+
+  &.el-button--default,
+  &.el-button--medium,
+  &.el-button--small {
+    padding: 8px;
+  }
+
+  &.el-button--mini {
+    padding: 5px;
+  }
+}
+
+.el-button--info {
+
+  &,
+  &:focus {
+    background-color: var(--color-info);
+    border-color: var(--color-info);
+  }
+
+  &:hover {
+    background: var(--color-info-hover);
+    border-color: var(--color-info-hover);
+  }
+}
+
+</style>

package/packages/main-page/src/main.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex-column">
+  <div class="flex-column" :class="$slots.header ? 'main-page' : ''">
     <div v-if="$slots.header" class="header">
       <slot name="header"></slot>
     </div>
@@ -40,4 +40,9 @@ export default {
   height: 32px; 
   line-height: 32px;
 }
+
+.main-page {
+  padding: 0 !important;
+  background: #f0f2f5;
+}
 </style>

package/packages/statis-card/src/main.vue

@@ -64,7 +64,7 @@ export default {
      * @param {Boolean} isAmount - 是否作为金额处理
      */
     cardFormatAmount(value, type = 'value') {
-      const language = localStorage.getItem('pageLang') || 'zh'
+      const language = 'zh'
       const unitMap = {
         'en': {
           'thousand': 'K',

package/packages/tab-pane/src/main.vue

@@ -125,4 +125,62 @@ export default {
   margin-right: 0!important;
   margin-left: 10px!important;
 }
+
 </style>
+
+<style lang="scss">
+
+.n20-secondary-tab {
+  .el-tabs__header {
+    margin-bottom: 0;
+  }
+  .el-tabs__nav-wrap::after {
+    display: none;
+  }
+  .el-tabs__item {
+    font-weight: 400;
+    height: 27px;
+    line-height: 26px;
+    padding: 0 10px;
+    &.is-active {
+      font-weight: 500;
+      &::after {
+        content: '';
+        height: 2px;
+        background-color: #007aff;
+        display: block;
+        margin-top: -1px;
+      }
+    }
+    &.is-disabled {
+      cursor: no-drop;
+      &::after {
+        background-color: #cccccc;
+      }
+    }
+  }
+
+  .el-tabs__item-badge {
+    width: 6px;
+    height: 6px;
+    background: var(--color-danger);
+    position: absolute;
+    right: 6px;
+    top: 2px;
+    border-radius: 3px;
+  }
+  .el-tabs__item.is-top:last-child {
+    .el-tabs__item-badge {
+      right: -4px;
+    }
+  }
+  .el-tabs__active-bar {
+    display: none;
+  }
+
+  .el-tabs__nav-prev,
+  .el-tabs__nav-next {
+    line-height: 28px;
+  }
+}
+</style>

package/src/index.js

@@ -7,13 +7,15 @@ import MainPage from '../packages/main-page/index.js'
 import TablePage from '../packages/table-page/index.js'
 import TabPane from '../packages/tab-pane/index.js'
 import StatisCard from '../packages/statis-card/index.js'
+import CommonCollapse from '../packages/common-collapse/index.js'
 
 // 存储组件列表
 const components = [
   MainPage,
   TablePage,
   TabPane,
-  StatisCard
+  StatisCard,
+  CommonCollapse
 ]
 
 // 定义 install 方法，接收 Vue 作为参数
@@ -45,6 +47,7 @@ export {
   MainPage,
   TablePage,
   StatisCard,
+  CommonCollapse,
   TabPane,
   repairEl,
   getColumnWidth,