zydx-plus 1.2.18 → 1.3.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zydx-plus",
-  "version": "1.2.18",
+  "version": "1.3.21",
   "description": "Vue.js",
   "main": "src/index.js",
   "files": [

package/src/components/pagination/src/pagination.vue

@@ -57,9 +57,11 @@
         </template>
       </button>
       <div class="paginator_info">
-        <input type="input"
+        <input type="text"
+               @keyup="handleKeyup"
                class="paginator_input"
-               v-model.number="page" />
+               v-model.number="page"
+               @input="handleInput" />
         <span>/</span>
         <span>{{ pages }}</span>
       </div>
@@ -112,6 +114,18 @@
 <script>
 import { defineComponent } from 'vue'
 import useOffsetPagination from './useOffsetPagination.vue';
+export const debounceTimer = 500
+export function debounce(fn, delay = debounceTimer) {
+  var timeoutID = null
+  return function () {
+    clearTimeout(timeoutID)
+    var args = arguments
+    var that = this
+    timeoutID = setTimeout(function () {
+      fn.apply(that, args)
+    }, delay)
+  }
+}
 export default defineComponent({
   name: 'zydx-pagination',
   components: {
@@ -145,6 +159,24 @@ export default defineComponent({
     pageChange: function (v) {
       this.$emit('page:change', v)
       this.page = v
+    },
+    handleInput: debounce(function (e) {
+      let input = Number(e.target.value)
+      if (input > this.pages) {
+        this.page = this.pages
+        this.$emit('page:change', this.page)
+        return
+      }
+      if (input < 1) {
+        this.page = 1
+        this.$emit('page:change', 1)
+        return
+      }
+      this.page = input
+      this.$emit('page:change', this.page)
+    }),
+    handleKeyup: function (e) {
+      this.page = e.target.value.replace(/[^\d]/, '')
     }
   },
   computed: {
@@ -154,16 +186,6 @@ export default defineComponent({
 
   },
   watch: {
-    page: {
-      handler: function (v) {
-        if (v >= this.pages) {
-          this.page = Number(String(this.page).slice(2))
-        }
-        if (v <= 1) {
-          this.page = 1
-        }
-      }
-    },
     currentPage: {
       handler: function (v) {
         if (v >= this.pages) {

package/src/components/pagination/src/useOffsetPagination.vue

@@ -68,6 +68,8 @@ export default defineComponent({
           this.isLoading = false
           this.isNextClicked = false
           this.isPrevClicked = false
+        } else {
+          this.isLoading = true
         }
       },
       immediate: true

package/src/components/spinner/index.js

@@ -0,0 +1,27 @@
+import { createVNode, render } from 'vue'
+import spinner from './src/spinner.vue'
+
+// 准备div容器
+const divNode = createVNode('div', { class: 'spinner-container' })
+render(divNode, document.body)
+// 获取 DOM 节点, 用于挂载组件或卸载组件
+const container = divNode.el
+let instance = null
+
+const Modal = () => {
+  const destory = () => {
+    render(null, container)
+  }
+  let VNode
+  if (!instance) {
+    VNode = createVNode(spinner, {})
+    instance = VNode
+  }
+  return {
+    open: function () {
+      render(VNode, container)
+    },
+    close: () => destory()
+  }
+}
+export default Modal

package/src/components/spinner/src/spinner.vue

@@ -0,0 +1,173 @@
+<template>
+  <Teleport to="body">
+    <transition>
+      <div class="mask">
+        <div class="spinner_wrapper">
+          <div class="lds-roller">
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </Teleport>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: 'zydx-spinner',
+  mounted() {
+    document.querySelector('body').style.overflow = 'hidden'
+  },
+  beforeUnmount() {
+    document.querySelector('body').style.overflow = 'auto'
+  },
+})
+</script>
+
+<style  scoped>
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+
+.mask {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: transparent;
+  z-index: 1300;
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+
+.spinner_wrapper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.lds-roller {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+
+.lds-roller div {
+  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  transform-origin: 40px 40px;
+}
+
+.lds-roller div:after {
+  content: " ";
+  display: block;
+  position: absolute;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #bdbdbd;
+  margin: -4px 0 0 -4px;
+}
+
+.lds-roller div:nth-child(1) {
+  animation-delay: -0.036s;
+}
+
+.lds-roller div:nth-child(1):after {
+  top: 63px;
+  left: 63px;
+}
+
+.lds-roller div:nth-child(2) {
+  animation-delay: -0.072s;
+}
+
+.lds-roller div:nth-child(2):after {
+  top: 68px;
+  left: 56px;
+}
+
+.lds-roller div:nth-child(3) {
+  animation-delay: -0.108s;
+}
+
+.lds-roller div:nth-child(3):after {
+  top: 71px;
+  left: 48px;
+}
+
+.lds-roller div:nth-child(4) {
+  animation-delay: -0.144s;
+}
+
+.lds-roller div:nth-child(4):after {
+  top: 72px;
+  left: 40px;
+}
+
+.lds-roller div:nth-child(5) {
+  animation-delay: -0.18s;
+}
+
+.lds-roller div:nth-child(5):after {
+  top: 71px;
+  left: 32px;
+}
+
+.lds-roller div:nth-child(6) {
+  animation-delay: -0.216s;
+}
+
+.lds-roller div:nth-child(6):after {
+  top: 68px;
+  left: 24px;
+}
+
+.lds-roller div:nth-child(7) {
+  animation-delay: -0.252s;
+}
+
+.lds-roller div:nth-child(7):after {
+  top: 63px;
+  left: 17px;
+}
+
+.lds-roller div:nth-child(8) {
+  animation-delay: -0.288s;
+}
+
+.lds-roller div:nth-child(8):after {
+  top: 56px;
+  left: 12px;
+}
+
+@keyframes lds-roller {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/src/components/titleBox/index.js

@@ -0,0 +1,7 @@
+import publicTable from './src/zydxTopicDry';
+
+publicTable.install = function(Vue) {
+    Vue.component(publicTable.name, publicTable);
+};
+
+export default publicTable;

package/src/components/titleBox/src/zydxStyle.css

@@ -0,0 +1,39 @@
+.title_box {
+  display: flex;
+  flex-direction: row;
+}
+
+.title_box>div:first-child {
+  flex-grow: 1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  line-height: 30px;
+}
+
+.title_box>div:last-child {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  text-indent: 0em;
+}
+
+.title_box_a {
+  width: 100%;
+  text-align: left;
+  line-height: 30px;
+  overflow: hidden;
+}
+
+.title_box_a>div {
+  display: inline;
+}
+
+.title_box_a>div:last-child {
+  float: right;
+  flex-direction: row;
+  display: flex;
+  align-items: center;
+  height: 30px;
+  text-indent: 0em;
+}

package/src/components/titleBox/src/zydxTopicDry.vue

@@ -0,0 +1,54 @@
+/**
+* @描述：  题干一类的通用样式（比如：左侧文字，右侧按钮）
+* @创建时间: 2022-08-12 11:19:00
+* @内容:
+必传值：名字/类型/默认值/作用
+非必传值：
+isHide 是否都在一行显示， true 超出一行的部分。。。。。
+* @回调事件：
+@组件内方法：
+*/
+<template>
+    <div>
+        <div :class="title_style" :style="text_indent">
+            <div>
+                <slot name="title_slot"></slot>
+            </div>
+            <div>
+                <slot name="button_slot"></slot>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'zydx-topic-dry',
+    computed: { // 计算属性
+        title_style () {
+            if (this.is_hide) {
+                return 'title_box'
+            }
+            return 'title_box_a'
+        },
+        text_indent () {
+          return "text-indent: "+this.indent_em+"em;"
+        }
+    },
+    props: {
+        is_hide: { // 是否都在一行显示， true 超出一行的部分显示...
+            type: Boolean,
+            default: false
+        },
+        indent_em: { // 首行缩进em
+            type: Number,
+            default: 0
+        }
+    },
+    mounted() {
+    }
+}
+</script>
+
+<style scoped src="./zydxStyle.css">
+</style>

package/src/components/tree/src/tree.vue

@@ -47,6 +47,13 @@ export default {
     height: {
       type: String,
       default: '30px'
+    },
+    /**
+     **    
+     */
+    default_expand_key: {
+      type: Array,
+      default: () => []
     }
   },
   data() {
@@ -55,8 +62,8 @@ export default {
     }
   },
   mounted() {
-
   },
+
   watch: {
     data: {
       handler: function (v) {
@@ -74,16 +81,17 @@ export default {
       }
       let output = []
       for (const leaf of array) {
+        const { id } = leaf
         let next = {
           ...leaf,
-          isOpen: false,
+          isOpen: this.default_expand_key.includes(id),
           children: leaf.children ? this.traverse(leaf.children) : []
         }
         output.push(next)
       }
       return output
     },
-    handleClick: function (tree) {
+    handleClick: async function (tree) {
       this.$emit('update:select', tree)
       const { id } = tree
       this.treeData = this.treeData.map((item) => {
@@ -115,7 +123,8 @@ export default {
   <div class="tree"
        :key="tree.id"
        v-for="(tree) in treeData">
-    <div class="tree_node"
+    <div :data-id="tree.id"
+         class="tree_node"
          :class="{ 'tree_node_active': tree.isOpen }"
          @click="handleClick(tree)">
       <template v-if="tree.level">
@@ -143,6 +152,7 @@ export default {
       <tree :data="tree.children"
             :active_color="active_color"
             :border="border"
+            :default_expand_key="default_expand_key"
             :key="tree.id"
             @update:select="updateSelect"
             :accordian="accordian"></tree>
@@ -168,7 +178,7 @@ export default {
   justify-content: flex-start;
   text-align: left;
   height: v-bind(height);
-  cursor: pointer;
+  cursor: grabbing;
   gap: 16px;
   border-bottom: v-bind(border)
 }

package/src/components/year/index.js

@@ -0,0 +1,6 @@
+import main from './src/year';
+
+main.install = function(Vue) {
+    Vue.component(main.name, main);
+};
+export default main;

package/src/components/year/src/year.vue

@@ -0,0 +1,153 @@
+<template>
+   <div class="year">
+      <div class="year-cont">
+        <div class='calendar-Time-header under_line'>
+          <span class='calendar-lastMonth' @click="last">{{ lastText }}</span>
+          <span class='calendar-TimeH'>{{ yearData }}</span>
+          <span class='calendar-nextMonth' @click="next">{{ nextText }}</span>
+        </div>
+        <div class="year-list">
+          <div class="year-li" :class="{active: item === timeObj}" v-for="item in yearList" @click="yearTap(item)">
+            <span>{{ item }}</span>
+          </div>
+          <div class="year-li">
+            <span></span>
+          </div>
+        </div>
+      </div>
+   </div>
+</template>
+
+<script>
+export default {
+  name: "zydx-year",
+  props: {
+    lastText: {
+      type: String,
+      default: '《'
+    },
+    nextText: {
+      type: String,
+      default: '》'
+    },
+    yearStart: { //最低年
+      type: String,
+      default: '1970'
+    },
+    yearEnd: { //最高年
+      type: String,
+      default: '2100'
+    },
+  },
+  data() {
+    return {
+      yearData: '',
+      yearList: [],
+      min: 0,
+      max: 0,
+      timeObj: 0
+    }
+  },
+  created() {
+    this.render();
+  },
+  methods: {
+    render() {
+      this.timeObj = new Date().getFullYear();
+      this.min = this.timeObj - 5
+      this.max = this.timeObj + 5
+      this.yearFun()
+    },
+    yearFun() {
+      this.yearList = []
+      if(this.min < Number(this.yearStart)) {
+        this.min = Number(this.yearStart)
+        this.max = Number(this.yearStart) + 10
+      }
+      if(this.max > Number(this.yearEnd)) {
+        this.min = Number(this.yearEnd) - 10
+        this.max = Number(this.yearEnd)
+      }
+      this.yearData = `${this.min}-${this.max}`
+      for(let i = this.min; i < this.max+1; i++) {
+        this.yearList.push(i)
+      }
+    },
+    last() {
+      this.min = this.min - 10
+      this.max = this.max - 10
+      this.yearFun()
+    },
+    next() {
+      this.min = this.min + 10
+      this.max = this.max + 10
+      this.yearFun()
+    },
+    yearTap(data) {
+      this.$emit('confirm',data)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.year{
+  position: absolute;
+  top: 22px;
+  right: 0;
+  width: 300px;
+  z-index: 100;
+  background-color: #fff;
+  box-shadow: 0 0 4px 1px #ccc;
+  border-radius: 5px;
+  padding: 0 10px;
+  display: grid;
+  user-select: none;
+}
+.calendar-Time-header{
+  text-align: center;
+  vertical-align: middle;
+  padding: 15px 0;
+  font-size: 14px;
+}
+.calendar-lastMonth{
+  width: 30px;
+  font-size: 12px;
+  margin-right: 70px;
+  padding: 0 5px;
+  text-align: center;
+  cursor: pointer;
+}
+.calendar-nextMonth{
+  width: 30px;
+  text-align: center;
+  margin-left: 70px;
+  font-size: 12px;
+  padding: 0 5px;
+  cursor: pointer;
+}
+.year-list{
+  margin-bottom: 20px;
+  overflow: hidden;
+  border-left: 1px solid #ccc;
+  border-top: 1px solid #ccc;
+}
+.year-li{
+  width: 25%;
+  float: left;
+  text-align: center;
+  height: 70px;
+  line-height: 70px;
+  font-size: 14px;
+  border-right: 1px solid #ccc;
+  border-bottom: 1px solid #ccc;
+  cursor: pointer;
+}
+.year-li:hover{
+  color: #c64c10;
+}
+.active{
+  font-weight: 600;
+  color: #c64c10;
+}
+</style>

package/src/index.js

@@ -6,6 +6,7 @@ import coloring from './components/coloring/index';
 import tree from './components/tree/index';
 import Pagination from './components/pagination/index';
 import Select from './components/select/index';
+import Year from './components/year/index';
 
 const components = [
     Calendar,
@@ -14,7 +15,8 @@ const components = [
     coloring,
     tree,
     Pagination,
-    Select
+    Select,
+    Year
 ];
 
 function install(app) {
@@ -25,7 +27,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.2.18',
+    version: '1.3.21',
     install,
     Calendar,
     Message,
@@ -34,6 +36,7 @@ export default {
     coloring,
     tree,
     Pagination,
-    Select
+    Select,
+    Year
 };