gunter-kgd 1.0.0 → 1.0.2

package/components/common/dropdown.vue

@@ -0,0 +1,227 @@
+<template>
+  <div class="dropdown-wrapper" :class="{ 'dropdown-disabled': disabled }">
+    <div
+      class="dropdown-trigger"
+      @click="toggleDropdown"
+      :class="{ 'dropdown-active': isOpen }"
+      :disabled="disabled"
+    >
+      <span class="dropdown-value">{{ selectedLabel || placeholder }}</span>
+      <span class="dropdown-arrow"></span>
+    </div>
+    <ul
+      class="dropdown-menu"
+      v-if="isOpen"
+      @click.stop="handleMenuClick"
+    >
+      <li
+        v-for="(option, index) in options"
+        :key="index"
+        class="dropdown-item"
+        :class="{ 'dropdown-item-selected': option.value === selectedValue }"
+        @click="selectOption(option)"
+      >
+        {{ option.label }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Dropdown',
+  props: {
+    // 下拉选项数组，格式: [{ label: '选项1', value: 'value1' }]
+    options: {
+      type: Array,
+      required: true
+    },
+    // 默认选中值
+    value: {
+      type: [String, Number],
+      default: ''
+    },
+    // 占位符文本
+    placeholder: {
+      type: String,
+      default: '请选择'
+    },
+    // 是否禁用
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      isOpen: false,
+      selectedValue: this.value,
+    }
+  },
+  watch: {
+    // 监听外部value变化
+    value(newVal) {
+      this.selectedValue = newVal;
+    },
+    // 监听选项变化，确保选中值有效
+    options() {
+      this.validateSelectedValue();
+    }
+  },
+  mounted() {
+    // 点击外部关闭下拉框
+    document.addEventListener('click', this.closeDropdown);
+  },
+  beforeDestroy() {
+    // 移除事件监听
+    document.removeEventListener('click', this.closeDropdown);
+  },
+  computed: {
+    selectedLabel() {
+      const selectedOption = this.options.find(option => option.value === this.selectedValue);
+      return selectedOption ? selectedOption.label : this.placeholder;
+    }
+  },
+  methods: {
+    // 切换下拉框显示状态
+    toggleDropdown() {
+      if (!this.disabled) {
+        this.isOpen = !this.isOpen;
+      }
+    },
+    // 关闭下拉框
+    closeDropdown(e) {
+      if (!this.$el.contains(e.target)) {
+        this.isOpen = false;
+      }
+    },
+    // 阻止事件冒泡
+    handleMenuClick(e) {
+      e.stopPropagation();
+    },
+    // 选择选项
+    selectOption(option) {
+      this.selectedValue = option.value;
+      this.isOpen = false;
+      // 触发change事件，传递选中的选项和值
+      this.$emit('change', option, option.value);
+      this.$emit('input', option.value);
+    },
+    // 验证选中值是否在选项中存在
+    validateSelectedValue() {
+      const optionValues = this.options.map(option => option.value);
+      if (!optionValues.includes(this.selectedValue)) {
+        this.selectedValue = '';
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.dropdown-wrapper {
+  position: relative;
+  display: inline-block;
+  font-size: 14px;
+  max-width: 200px;
+}
+
+.dropdown-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 6px 10px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  background-color: #fff;
+  cursor: pointer;
+  transition: border-color 0.3s;
+  box-sizing: border-box;
+  user-select: none;
+
+  &:hover {
+    border-color: #00a578;
+  }
+
+  &:focus {
+    outline: none;
+    border-color: #00a578;
+    box-shadow: 0 0 0 2px rgba(0, 165, 120, 0.2);
+  }
+
+  &.dropdown-active {
+    border-color: #00a578;
+    border-radius: 4px 4px 0 0;
+  }
+}
+
+.dropdown-value {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dropdown-arrow {
+  width: 0;
+  height: 0;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 4px solid #606266;
+  margin-left: 8px;
+  transition: transform 0.3s;
+
+  .dropdown-active & {
+    transform: rotate(180deg);
+  }
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  background-color: #fff;
+  border: 1px solid #dcdfe6;
+  border-radius: 0 0 4px 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  z-index: 10;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.dropdown-item {
+  padding: 8px 12px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+  user-select: none;
+
+  &:hover {
+    background-color: #f5f7fa;
+  }
+
+  &.dropdown-item-selected {
+    color: #00a578;
+    background-color: #00A57833;
+  }
+}
+
+.dropdown-disabled {
+  .dropdown-trigger {
+    cursor: not-allowed;
+    background-color: #f5f7fa;
+    color: #c0c4cc;
+
+    &:hover {
+      border-color: #dcdfe6;
+    }
+  }
+
+  .dropdown-arrow {
+    border-top-color: #c0c4cc;
+  }
+}
+</style>

package/components/common/loading.vue

@@ -0,0 +1,67 @@
+<template>
+    <div :style="{color:color}" class="loadBox">
+        <div v-show="showLoading" class="gj-loading"></div>
+        <div style="color: #ccc" v-show="!showLoading">
+            <slot></slot>
+        </div>
+
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "loading",
+        props:{
+            color:{
+                default:'#3396fb',
+                type:String
+            },
+            showLoading:{
+                default:true,
+                type:Boolean
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    .loadBox{
+        height: 50px;
+        line-height: 50px;
+        text-align: center;
+    }
+    .gj-loading {
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        color: inherit;
+        vertical-align: middle;
+        pointer-events: none;
+        border: 2px solid currentcolor;
+        border-bottom-color: transparent;
+        border-radius: 50%;
+        -webkit-animation: 1s gj-loading linear infinite;
+        animation: 1s gj-loading linear infinite;
+        position: relative;
+    }
+    @-webkit-keyframes gj-loading {
+        0% {
+            -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+        }
+        100% {
+            -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+        }
+    }
+    @keyframes gj-loading {
+        0% {
+            -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+        }
+        100% {
+            -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+        }
+    }
+</style>

package/components/gante_test/auto-scroll.js

@@ -0,0 +1,32 @@
+export default {
+    data(){
+        return{
+            scrollFn: null
+        }
+    },
+    methods:{
+        autoScroll(e,scrollEl){
+            if(!scrollEl) return;
+            let scaleX = 0,sacleY = 0;
+            if(e.clientX >= window.innerWidth - 40 || e.clientX >= scrollEl.getBoundingClientRect().right - 40){
+                scaleX = 1
+            }
+            if(e.clientX <= scrollEl.getBoundingClientRect().left + 40){
+                scaleX = -1
+            }
+            if(e.clientY >= window.innerHeight - 40 || e.clientY >= scrollEl.getBoundingClientRect().bottom - 40){
+                sacleY = 1
+            }
+            if(e.clientY <= scrollEl.getBoundingClientRect().top + 40){
+                sacleY = -1
+            }
+            if(this.scrollFn){
+                clearInterval(this.scrollFn);
+            }
+            this.scrollFn = setInterval(()=>{
+                scrollEl.scrollLeft += scaleX*20;
+                scrollEl.scrollTop += sacleY*20;
+            },30)
+        }
+    }
+}

package/components/gante_test/calendar.vue

@@ -0,0 +1,257 @@
+<template>
+  <div @click.stop v-show="showCalendar" v-outclick="show_calendar" :style="{left:left+'px',top:top+'px'}" class="calendar-box">
+    <div class="change-time">
+      <span @click.stop="changeIndex(-1,'year')" class="last"><<</span>
+      <span @click.stop="changeIndex(-1,'month')" style="margin-left: 10px" class="last"><</span>
+      <span>{{disp_date | day_filter}}</span>
+      <span @click.stop="changeIndex(1,'year')" style="margin-left: 10px" class="next">>></span>
+      <span @click.stop="changeIndex(1,'month')" class="next">></span>
+    </div>
+    <ul class="calendar-head">
+      <li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li><li>日</li>
+    </ul>
+    <div v-for="(month,index) in monthList" :key="index" class="month swiper-item">
+      <!--<ul v-for="(week,weekindex) in month" :key="weekindex">-->
+        <li v-for="(day,dayindex) in month" @click="chooseDay(day.year,day.month,day.day,day.othermonth)">
+          <div class="week-day" :class="{ischecked:checkedDay==day.date,othermonth:day.othermonth,istoday:day.istoday}">
+             {{day.day}}
+          </div>
+        </li>
+      <!--</ul>-->
+    </div>
+    <div class="calendar-bottom">
+      <div @click="to_today" class="today-button">今天</div>
+    </div>
+  </div>
+</template>
+<script>
+    import outclick from '../../utils/click-outside'
+  export default{
+      data(){
+        return{
+          disp_date:new Date(),
+          today:new Date(),
+          current_day:new Date(),
+          monthList:[],
+          showCalendar:false,
+          checkedDay:'0000-00-00',
+        }
+      },
+      directives:{
+          outclick
+      },
+      props:{
+        left:Number,
+        top:Number,
+        value:Boolean,
+        choose_date:{
+          default:new Date()
+        }
+      },
+    methods:{
+      show_calendar(){
+        this.showCalendar = false
+      },
+      to_today(){
+        this.current_day = new Date()
+        this.checkedDay = this.format(new Date().getFullYear(),new Date().getMonth(),new Date().getDate())
+        this.showCalendar = false
+        this.$emit('change',this.current_day)
+      },
+      chooseDay(year,month,day){
+        this.current_day = new Date(year,month,day)
+        this.checkedDay = this.format(year,month,day)
+        this.showCalendar = false
+        this.$emit('change',this.current_day)
+      },
+      format(year,month,day){
+        month++
+        month<10&&(month='0'+month)
+        day<10&&(day='0'+day)
+        return year + '-' + month + '-' + day;
+      },
+      getMonth(year,month){  //创建单月历
+        var monthArr = []
+        var dt_first = new Date(year,month,1)   //每个月第一天
+        var dt_last = new Date(year,month+1,0)   //每个月最后一天
+        var monthLength = dt_last.getDate()-dt_first.getDate()+1
+        var daylist =[];
+        var space = (dt_first.getDay() - 1 + 7) % 7   //月历前面空格
+        //console.log(year,month)
+        for(var i = -space;i<36;i+=7){
+          var week = []
+          for(var j=0;j<7;j++){
+            var day = i+j+1
+            if(day>0 && day<=monthLength){
+              week.push({
+                mode:'month',
+                day:day,
+                year:year,
+                month:month,
+                date:this.format(year,month,day),
+                istoday:(this.today.getFullYear()==year && this.today.getMonth()==month && this.today.getDate() == day)?true:false,
+                ischecked:false
+              })
+            }else{
+              //其它月份
+              //week.push({})
+              var newdt = new Date(year,month,day)
+              var _year = newdt.getFullYear()
+              var _month = newdt.getMonth()
+              var _day = newdt.getDate()
+              week.push({
+                mode:'month',
+                day:_day,
+                year:_year,
+                month:_month,
+                date:this.format(_year,_month,_day),
+                ischecked:false,
+                othermonth:day<=0?-1:1,
+              })
+            }
+          }
+          monthArr.push(week)
+        }
+        return monthArr
+      },
+      getOneMonth(){
+        var year = this.disp_date.getFullYear()
+        var month = this.disp_date.getMonth()
+        this.monthList=this.getMonth(year,month)
+      },
+      changeIndex(index,mode){
+        if(index){
+          if(mode == 'month'){
+            var _tmpdt = new Date(this.disp_date.getFullYear(),this.disp_date.getMonth()+index,0)
+            var maxday = _tmpdt.getDate()
+            var _day = maxday<this.disp_date.getDate()?maxday:this.disp_date.getDate()
+            this.disp_date = new Date(this.disp_date.getFullYear(),this.disp_date.getMonth()+index,_day)
+          }else if(mode == 'year'){
+            var _tmpdt = new Date(this.disp_date.getFullYear()+index,this.disp_date.getMonth(),0)
+            var maxday = _tmpdt.getDate()
+            var _day = maxday<this.disp_date.getDate()?maxday:this.disp_date.getDate()
+            this.disp_date = new Date(this.disp_date.getFullYear()+index,this.disp_date.getMonth(),_day)
+          }
+          this.getOneMonth()
+        }
+      }
+    },
+    watch:{
+      value(val){
+        this.showCalendar=val
+      },
+      choose_date(val){
+        if(val){
+          this.disp_date = this.choose_date
+          this.getOneMonth()
+          this.checkedDay = this.format(this.disp_date.getFullYear(),this.disp_date.getMonth(),this.disp_date.getDate())
+        }
+      },
+      showCalendar(val){
+        this.$emit('input',val)
+      }
+    },
+    filters:{
+      day_filter(value){
+        if(value){
+          var year = value.getFullYear()
+          var month = value.getMonth()+1
+          return year+'年'+month+'月'
+        }
+      }
+    },
+    destroyed(){
+      document.removeEventListener('click',this.show_calendar,false)
+    }
+  }
+</script>
+<style scoped>
+  .calendar-box{
+    position: fixed;
+    width:250px;
+    z-index:1000;
+    font-size: 13px;
+    border: 1px solid #ebeef5 ;
+    box-sizing: border-box;
+    background: #fff;
+    box-shadow: 1px 1px 8px #333;
+  }
+  .change-time{
+    padding: 5px 10px;
+    text-align: center;
+    background: #ffffff;
+    color: rgba(0, 0, 0, 0.85);
+    font-weight: 500;
+    border-bottom: 1px solid #ebeef5;
+  }
+  .last{
+    float: left;
+    cursor: pointer;
+    color: rgb(0 0 0 / 45%);
+  }
+  .next{
+    float: right;
+    cursor: pointer;
+    color: rgb(0 0 0 / 45%);
+  }
+  .last:hover,.next:hover{
+    background: #cfe6dc;
+  }
+  .calendar-head{
+    padding: 0;
+    display: flex;
+    justify-content: space-evenly;
+    height:30px;
+    line-height: 30px;
+  }
+  .calendar-head li{
+    width: 27px !important;
+    text-align: center;
+  }
+  .swiper-item{
+    display: flex;
+    justify-content: space-evenly;
+  }
+  .month li{
+    width: 27px !important;
+    overflow: hidden;
+    transition: background .2s ease;
+    cursor: pointer;
+  }
+  .month li:hover{
+      background: #efefef;
+  }
+  .week-day{
+    font-size:12px;
+    text-align: center;
+    overflow: hidden;
+    z-index: 1;
+    transition: all .1s ease;
+    height: 27px;
+    width: 27px;
+    line-height: 27px;
+    border-radius: 3px;
+  }
+  .calendar-bottom{
+    border-top: 1px solid #ccc;
+  }
+  .today-button{
+    width: 46px;
+    height: 22px;
+    line-height: 22px;
+    color: #00A578;
+    text-align: center;
+    border-radius: 2px;
+    margin: 5px auto;
+    cursor: pointer;
+  }
+  .othermonth{
+    color: #dcafaf;
+  }
+  .istoday{
+    border: 1px solid #00A578 !important;
+  }
+  .ischecked{
+    background: #8bd9ba !important;
+  }
+</style>

package/components/gante_test/commit.js

@@ -0,0 +1,2 @@
+import Vue from 'vue'
+export default new Vue()