zydx-plus 1.0.5 → 1.0.7

package/src/components/calendar/src/sloarToLunar.js

@@ -0,0 +1,195 @@
+/* 公历转农历代码思路：
+1、建立农历年份查询表
+2、计算输入公历日期与公历基准的相差天数
+3、从农历基准开始遍历农历查询表，计算自农历基准之后每一年的天数，并用相差天数依次相减，确定农历年份
+4、利用剩余相差天数以及农历每个月的天数确定农历月份
+5、利用剩余相差天数确定农历哪一天 */
+var lunarYearTool = {
+	// 农历1949-2100年查询表
+	lunarYearArr: [
+		0x0b557, //1949
+		0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5b0, 0x14573, 0x052b0, 0x0a9a8, 0x0e950, 0x06aa0, //1950-1959
+		0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, //1960-1969
+		0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b6a0, 0x195a6, //1970-1979
+		0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570, //1980-1989
+		0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x055c0, 0x0ab60, 0x096d5, 0x092e0, //1990-1999
+		0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5, //2000-2009
+		0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930, //2010-2019
+		0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, //2020-2029
+		0x05aa0, 0x076a3, 0x096d0, 0x04afb, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45, //2030-2039
+		0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0, //2040-2049
+		0x14b63, 0x09370, 0x049f8, 0x04970, 0x064b0, 0x168a6, 0x0ea50, 0x06b20, 0x1a6c4, 0x0aae0, //2050-2059
+		0x0a2e0, 0x0d2e3, 0x0c960, 0x0d557, 0x0d4a0, 0x0da50, 0x05d55, 0x056a0, 0x0a6d0, 0x055d4, //2060-2069
+		0x052d0, 0x0a9b8, 0x0a950, 0x0b4a0, 0x0b6a6, 0x0ad50, 0x055a0, 0x0aba4, 0x0a5b0, 0x052b0, //2070-2079
+		0x0b273, 0x06930, 0x07337, 0x06aa0, 0x0ad50, 0x14b55, 0x04b60, 0x0a570, 0x054e4, 0x0d160, //2080-2089
+		0x0e968, 0x0d520, 0x0daa0, 0x16aa6, 0x056d0, 0x04ae0, 0x0a9d4, 0x0a2d0, 0x0d150, 0x0f252, //2090-2099
+		0x0d520 //2100
+	],
+	lunarMonth: ['正', '二', '三', '四', '五', '六', '七', '八', '九', '十', '冬', '腊'],
+	lunarDay: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '初', '廿'],
+	tianGan: ['甲', '乙', '丙', '丁', '戊', '己', '庚', '辛', '壬', '癸'],
+	diZhi: ['子', '丑', '寅', '卯', '辰', '巳', '午', '未', '申', '酉', '戌', '亥'],
+	/**
+	 * @description 	公历转农历函数
+	 * @param {int} sy 	年份
+	 * @param {int} sm 	月份
+	 * @param {int} sd	日期
+	 * */
+	sloarToLunar: function(sy, sm, sd) { // 
+		let that = this;
+		// 输入的月份减1处理
+		sm -= 1;
+
+		// 计算与公历基准的相差天数
+		// Date.UTC()返回的是距离公历1970年1月1日的毫秒数,传入的月份需要减1
+		let daySpan = (Date.UTC(sy, sm, sd) - Date.UTC(1949, 0, 29)) / (24 * 60 * 60 * 1000) + 1;
+		let ly, lm, ld;
+		// 确定输出的农历年份
+		for (let j = 0; j < that.lunarYearArr.length; j++) {
+			let tempDaySpan = that.lunarYearDays(that.lunarYearArr[j]);
+			daySpan -= tempDaySpan
+			if (daySpan <= 0) {
+				ly = 1949 + j;
+				// 获取农历年份确定后的剩余天数
+				daySpan += tempDaySpan;
+				break
+			}
+		}
+
+		// 确定输出的农历月份
+		let lunarYearMonthsList = that.lunarYearMonths(that.lunarYearArr[ly - 1949])
+		let hasLeapMonth_Result = that.hasLeapMonth(that.lunarYearArr[ly - 1949]);
+		for (let k = 0; k < lunarYearMonthsList.length; k++) {
+			daySpan -= lunarYearMonthsList[k];
+			if (daySpan <= 0) {
+				// 有闰月时，月份的数组长度会变成13，因此，当闰月月份小于等于k时，lm不需要加1
+				if (hasLeapMonth_Result && hasLeapMonth_Result <= k) {
+					if (hasLeapMonth_Result < k) {
+						lm = k;
+					} else if (hasLeapMonth_Result === k) {
+						lm = '闰' + k;
+					} else {
+						lm = k + 1;
+					}
+				} else {
+					lm = k + 1;
+				}
+				// 获取农历月份确定后的剩余天数
+				daySpan += lunarYearMonthsList[k];
+				break
+			}
+		}
+
+		// 确定输出农历哪一天
+		ld = daySpan;
+
+		// 将计算出来的农历月份转换成汉字月份，闰月需要在前面加上闰字
+		if (hasLeapMonth_Result && (typeof(lm) === 'string' && lm.indexOf('闰') > -1)) {
+			lm = `闰${this.lunarMonth[/\d/.exec(lm) - 1]}`
+		} else {
+			lm = that.lunarMonth[lm - 1];
+		}
+
+		// 将计算出来的农历年份转换为天干地支年
+		ly = that.getTianGan(ly) + that.getDiZhi(ly);
+
+		// 将计算出来的农历天数转换成汉字
+		if (ld < 11) {
+			ld = `${this.lunarDay[10]}${this.lunarDay[ld-1]}`
+		} else if (ld > 10 && ld < 20) {
+			ld = `${this.lunarDay[9]}${this.lunarDay[ld-11]}`
+		} else if (ld === 20) {
+			ld = `${this.lunarDay[1]}${this.lunarDay[9]}`
+		} else if (ld > 20 && ld < 30) {
+			ld = `${this.lunarDay[11]}${this.lunarDay[ld-21]}`
+		} else if (ld === 30) {
+			ld = `${this.lunarDay[2]}${this.lunarDay[9]}`
+		}
+
+		return {
+			lunarYear: ly,
+			lunarMonth: lm,
+			lunarDay: ld,
+		}
+	},
+	/**
+	 * @description 计算农历年是否有闰月，参数为存储农历年的16进制
+	 * 				农历年份信息用16进制存储，其中16进制的最后1位可以用于判断是否有闰月
+	 * */
+	hasLeapMonth: function(ly) {
+		// 获取16进制的最后1位，需要用到&与运算符
+		if (ly & 0xf) {
+			return ly & 0xf
+		} else {
+			return false
+		}
+	},
+	/**
+	 * @description 如果有闰月，计算农历闰月天数，参数为存储农历年的16进制
+	 *				农历年份信息用16进制存储，其中16进制的第1位（0x除外）可以用于表示闰月是大月还是小月
+	 * */
+	leapMonthDays: function(ly) {
+		if (this.hasLeapMonth(ly)) {
+			// 获取16进制的第1位（0x除外）
+			return (ly & 0xf0000) ? 30 : 29
+		} else {
+			return 0
+		}
+	},
+	/**
+	 * @description 计算农历一年的总天数，参数为存储农历年的16进制
+	 *				农历年份信息用16进制存储，其中16进制的第2-4位（0x除外）可以用于表示正常月是大月还是小月
+	 * */
+	lunarYearDays: function(ly) {
+		let totalDays = 0;
+
+		// 获取正常月的天数，并累加
+		// 获取16进制的第2-4位，需要用到>>移位运算符
+		for (let i = 0x8000; i > 0x8; i >>= 1) {
+			let monthDays = (ly & i) ? 30 : 29;
+			totalDays += monthDays;
+		}
+		// 如果有闰月，需要把闰月的天数加上
+		if (this.hasLeapMonth(ly)) {
+			totalDays += this.leapMonthDays(ly);
+		}
+
+		return totalDays
+	},
+	/**
+	 * @description 获取农历每个月的天数  参数需传入16进制数值
+	 * */
+	lunarYearMonths: function(ly) {
+		let monthArr = [];
+		let that = this;
+		// 获取正常月的天数，并添加到monthArr数组中
+		// 获取16进制的第2-4位，需要用到>>移位运算符
+		for (let i = 0x8000; i > 0x8; i >>= 1) {
+			monthArr.push((ly & i) ? 30 : 29);
+		}
+		// 如果有闰月，需要把闰月的天数加上
+		if (this.hasLeapMonth(ly)) {
+			monthArr.splice(this.hasLeapMonth(ly), 0, that.leapMonthDays(ly));
+		}
+
+		return monthArr
+	},
+	/**
+	 * @description 将农历年转换为天干，参数为农历年
+	 * */
+	getTianGan: function(ly) {
+		let tianGanKey = (ly - 3) % 10;
+		if (tianGanKey === 0) tianGanKey = 10;
+		return this.tianGan[tianGanKey - 1]
+	},
+	/**
+	 * @description 将农历年转换为地支，参数为农历年
+	 * */
+	getDiZhi: function(ly) {
+		let diZhiKey = (ly - 3) % 12;
+		if (diZhiKey === 0) diZhiKey = 12;
+		return this.diZhi[diZhiKey - 1]
+	}
+}
+
+export default lunarYearTool;

package/src/components/tipBox/index.js

@@ -1,7 +1,35 @@
-import publicTable from './src/main';
+import { createVNode, render } from 'vue'
+import XtxConfirm from './src/main.vue'
 
-publicTable.install = function(Vue) {
-    Vue.component(publicTable.name, publicTable);
-};
+// 准备div容器
+const divNode = createVNode('div', { class: 'xtx-confirm-container' })
+render(divNode, document.body)
+// 获取 DOM 节点, 用于挂载组件或卸载组件
+const container = divNode.el
 
-export default publicTable;
+// 导出函数可通过调用 Confirm() 函数动态创建 XtxConfirm 组件
+const Confirm = ({ type, url ,title, promptContent, middle, cancelShow, inputArr }) => {
+    // 返回 Promise 对象
+    return new Promise((resolve, reject) => {
+        // 2. 点击确认按钮，触发resolve同时销毁组件
+        const submit = () => {
+            let val = '点击确认'
+            if(type === 'input') {
+                val = inputArr.map(x => {
+                    return x.value
+                })
+            }
+            render(null, container)
+            resolve(val)
+        }
+        // 3. 点击取消按钮，触发reject同时销毁组件
+        const cancel = () => {
+            render(null, container)
+            reject('点击取消')
+        }
+        // 1. 创建 XtxConfirm 组件
+        const VNode = createVNode(XtxConfirm, { type, url ,title, promptContent, middle, cancelShow, inputArr, submit, cancel })
+        render(VNode, container)
+    })
+}
+export default Confirm

package/src/components/tipBox/src/main.vue

@@ -11,6 +11,16 @@
             <div class="tip-img" v-if="type === 'img'">
               <img :src="url" />
             </div>
+            <div class="tip-img" v-if="type === 'input'">
+              <div class="tip-input" v-for="(item,index) in inputArr" :key="index">
+                <span>{{ item.name }}</span>
+                <input v-if="item.type === 'input'" type="text" :placeholder="item.placeholder" v-model="item.value" :disabled="item.disabled" />
+                <select v-if="item.type === 'select'" :disabled="item.disabled" v-model="item.value" :placeholder="item.placeholder">
+                  <option value="1" v-for="(it,ind) in item.option" :key="ind">{{ it.name }}</option>
+                </select>
+                <div v-if="item.type === 'text'" class="text">{{ item.value }}</div>
+              </div>
+            </div>
           </div>
         </div>
         <div class="tip-btnBox">
@@ -46,21 +56,23 @@ export default {
       type: Boolean,
       default: true
     },
-    cancelShow: {
+    cancelShow: { //是否显示取消按钮
       type: Boolean,
       default: true
-    }
-  },
-  data () {
-    return {}
-  },
-  methods: {
-    submit: function (val) {
-      this.$emit('rheResults', val)
     },
-    cancel: function () {
-      this.$emit('cancel')
-    }
+    inputArr: { // 弹窗的提示标题
+      type: Array,
+      default: []
+    },
+    // 确认按钮
+    submit: {
+      type: Function,
+      default: () => {}
+    },
+    cancel: {
+      type: Function,
+      default: () => {}
+    },
   }
 }
 </script>

package/src/components/tipBox/src/zydxStyle.css

@@ -16,6 +16,7 @@
   border-radius: 5px;
   border: 5px rgba(0, 0, 0, .1) solid;
   margin: 0 auto;
+  box-sizing: border-box;
 }
 .tip-boxContent{
   max-height: 600px;
@@ -79,9 +80,47 @@ font-size: 12px;
   text-align: center;
 }
 .tip-img{
-  width: 70%;
+  width: 100%;
   display: inline-block;
 }
 .tip-img>img{
   width: 100%;
 }
+.tip-input{
+  display: inline-block;
+  padding-bottom: 15px;
+}
+.tip-input:last-child{
+  padding-bottom: 0;
+}
+.tip-input>span{
+  font-size: 16px;
+  font-weight: bold;
+  display: inline-block;
+  line-height: 30px;
+  padding-right: 10px;
+}
+.tip-input>input{
+  width: 210px;
+  height: 30px;
+  box-sizing: border-box;
+  font-size: 16px;
+  outline: none;
+  padding-left: 10px;
+  border: 1px solid #ccc;
+}
+.tip-input>select{
+  width: 210px;
+  height: 30px;
+  box-sizing: border-box;
+  font-size: 16px;
+  outline: none;
+  padding-left: 10px;
+  border: 1px solid #ccc;
+}
+.text{
+  display: inline-block;
+  font-size: 16px;
+  width: 210px;
+  text-align: left;
+}

package/src/index.js

@@ -1,24 +1,20 @@
 import tipBox from './components/tipBox/index';
-import menuTree from './components/menuTree/index';
+import Calendar from './components/calendar/index';
 
 const components = [
-    tipBox,
-    menuTree
+    Calendar
 ];
 
-const install = function(Vue, opts = {}) {
+function install(app) {
     components.forEach(component => {
-        Vue.component(component.name, component);
+        app.component(component.name, component);
     });
-};
-
-if (typeof window !== 'undefined' && window.Vue) {
-    install(window.Vue);
+    app.config.globalProperties.$message = tipBox
 }
 
 export default {
-    version: '1.0.5',
+    version: '1.0.7',
     install,
-    tipBox,
-    menuTree
+    Calendar
 };
+

package/src/components/menuTree/index.js

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

package/src/components/menuTree/src/ZydxMenuTree.vue

@@ -1,135 +0,0 @@
-<template>
-  <div class="menuTree">
-    <slot></slot>
-    <div v-for="(item, index) in targetTree" :key="index">
-      <zydx-menu-tree-info
-        :nodeSet="nodeSet"
-        :isShowLine="isShowLine"
-        :isShowUpDown="isShowUpDown"
-        :menu-info="item"
-        :selectItem="selectItem"
-        @clickItem="clickItem"
-      ></zydx-menu-tree-info>
-    </div>
-  </div>
-</template>
-
-<script>
-import zydxMenuTreeInfo from "./ZydxMenuTreeInfo";
-export default {
-  name: "zydx-menu-tree",
-  components: {
-    zydxMenuTreeInfo,
-  },
-  props: {
-    // 是否显示展开收起动作
-    isShowUpDown: {
-      type: Boolean,
-      default: false,
-    },
-    // 是否显示底线
-    isShowLine: {
-      type: Boolean,
-      default: false,
-    },
-    // 节点设置
-    nodeSet: {
-      type: Number,
-      default: 2,
-    },
-    // 选择当前的节点
-    selectItem: {
-      type: Object,
-      default: function () {
-        return {};
-      },
-    },
-    // 树数据
-    treeData: {
-      type: Array,
-      required: true,
-    },
-  },
-  computed: {
-    targetTree: function () {
-      let that = this;
-      let targetTree = [];
-      let minLevel = "";
-      that.treeData.map(function (item) {
-        if (that.isShowUpDown) {
-          // 如果设置收起展开， 添加控制变量
-          that.$set(item, "isShowUpDown", false);
-        } else {
-          that.$set(item, "isShowUpDown", true);
-        }
-        if (minLevel === "") {
-          minLevel = item.level;
-        } else {
-          if (item.level < minLevel) {
-            minLevel = item.level;
-          }
-        }
-      });
-      this.treeData.map(function (item) {
-        if (item.level === minLevel) {
-          targetTree.push(item);
-        }
-      });
-      targetTree.map(function (item) {
-        that.forArr(that.treeData, item);
-      });
-      if (that.isShowUpDown) {
-        for (let i = 0; i < targetTree.length; i++) {
-          this.setIsShowUpDown(targetTree[i], i);
-        }
-      }
-      return targetTree;
-    },
-  },
-  methods: {
-    // 原始目录树转换方法
-    forArr: function (arr, obj) {
-      let that = this;
-      let newArr = [];
-      arr.map(function (item) {
-        if (item.pcatalogId === obj.catalogId) {
-          newArr.push(item);
-        }
-      });
-      if (newArr.length === 0) {
-        return false;
-      }
-      obj.children = newArr;
-      newArr.map(function (item) {
-        that.forArr(arr, item);
-      });
-    },
-    // 点击回调事件
-    clickItem(item) {
-      this.$emit("clickItem", item);
-    },
-    // 递归调用修改状态
-    setIsShowUpDown(item, index) {
-      if (index === 0) {
-        let children = item.children;
-        if (children && children.length !== 0) {
-          this.$set(item, "isShowUpDown", true);
-          for (let i = 0; i < children.length; i++) {
-            this.setIsShowUpDown(children[i], i);
-          }
-        }
-      }
-    },
-  },
-};
-</script>
-
-<style scoped>
-.menuTree {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  padding: 0px 10px;
-}
-
-</style>

package/src/components/menuTree/src/ZydxMenuTreeInfo.vue

@@ -1,163 +0,0 @@
-/**
-* @开发者：  zmy
-* @描述：  目录树通用组件
-* @创建时间: 2022-08-16 11:00:00
-* @内容:
-必传值：名字/类型/默认值/作用
-menuInfo 目录树数据
-非必传值：
-nodeSet 传入当前的节点设置， 小于当前节点设置不可点，灰色
-selectItem 传入当前选择的节点，是一个对象
-* @回调事件：
-* clickItem 点击点前节点的回调， 返回点击的节点
-@组件内方法：
-*/
-<template>
-  <div>
-    <div
-      class="lineHeight30"
-      :class="menuInfo.level === 0 ? '' : 'marginLeft14'"
-    >
-      <div
-        style="display: flex; flex-direction: row"
-        :style="this.isShowLine ? 'border-bottom: 1px #CCCCCC dashed;' : ''"
-      >
-        <div
-          class="widthB100 ellipse cursor"
-          :class="menuTitleStyle"
-          @click.stop="clickItem(menuInfo)"
-        >
-          {{ menuInfo.title }}
-        </div>
-        <div v-show="isShowUpDown && menuInfo.children">
-          <span
-            class="iconfont"
-            v-html="defaultFont"
-            @click="clickFont(menuInfo)"
-          ></span>
-        </div>
-      </div>
-      <div v-show="menuInfo.isShowUpDown">
-        <div v-for="(item, index) in menuInfo.children" :key="index">
-          <zydx-menu-tree-info
-            :isShowUpDown="isShowUpDown"
-            :isShowLine="isShowLine"
-            :selectItem="selectItem"
-            :menu-info="item"
-            :nodeSet="nodeSet"
-            @clickItem="clickItem"
-          >
-          </zydx-menu-tree-info>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import zydxMenuTreeInfo from "./ZydxMenuTreeInfo";
-export default {
-  name: "zydx-menu-tree-info",
-  components: {
-    zydxMenuTreeInfo,
-  },
-  props: {
-    // 是否显示展开收起动作
-    isShowUpDown: {
-      type: Boolean,
-      default: false,
-    },
-    // 是否显示底线
-    isShowLine: {
-      type: Boolean,
-      default: false,
-    },
-    // 节点等级设置
-    nodeSet: {
-      type: Number,
-      required: true,
-    },
-    // 选择当前的节点
-    selectItem: {
-      type: Object,
-      default: function () {
-        return {};
-      },
-    },
-    // 树数据
-    menuInfo: {
-      type: Object,
-      required: true,
-    },
-  },
-  computed: {
-    defaultFont() {
-      if (this.menuInfo.isShowUpDown) {
-        return "&#xeaf5;";
-      }
-      return "&#xeaf3;";
-    },
-    menuTitleStyle() {
-      let ar = [];
-      console.log(this.nodeSet);
-      if (parseInt(this.menuInfo.level) > parseInt(this.nodeSet)) {
-        ar.push("disable");
-      }
-      if (this.selectItem === this.menuInfo) {
-        ar.push("active");
-      }
-      return ar;
-    },
-  },
-  methods: {
-    clickItem(item) {
-      this.$emit("clickItem", item);
-    },
-    clickFont(item) {
-      item.isShowUpDown = !item.isShowUpDown;
-      // if (item.isShowUpDown) {
-      //     this.defaultFont = '&#xeaf5;'
-      // } else {
-      //     this.defaultFont = '&#xeaf3;'
-      // }
-    },
-  },
-};
-</script>
-
-<style scoped>
-@font-face {
-  font-family: "iconfont";
-  src: url("iconfont.ttf?t=1660878683989") format("truetype");
-}
-.iconfont {
-  font-family: "iconfont" !important;
-  font-size: 16px;
-  font-style: normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  cursor: pointer;
-}
-.cursor {
-  cursor: pointer;
-}
-.disable {
-  color: #7c7c7c;
-  pointer-events: none;
-  cursor: default;
-}
-.border_bottom {
-  border-bottom: 1px #cccccc dashed;
-}
-.active {
-  color: #00ff00;
-}
-.ellipse {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-.marginLeft14 {
-  margin-left: 14px;
-}
-</style>