合并分支 'dev' 到 'master'

Dev

查看合并请求 !1

README.md

-# app
+需要用到axios[^9.19.2]、dingtalk-jsapi[^2.9.14]、qs[^6.9.1]、typescript[^3.8.3]、rxjs[^6.5.2]</br>
+需要用到webpack的import()动态加载模块。</br>
+在babel.config.js中配置"retainLines": true，以便更加准确的再async中打断点;
+```
+module.exports = {
+  env: {
+    development: {
+      sourceMaps: true,
+      retainLines: true
+    }
+  },
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}
 
-## Project setup
 ```
-yarn install
-```
-
-### Compiles and hot-reloads for development
-```
-yarn serve
-```
-
-### Compiles and minifies for production
-```
-yarn build
-```
-
-### Run your unit tests
-```
-yarn test:unit
-```
-
-### Run your end-to-end tests
-```
-yarn test:e2e
-```
-
-### Lints and fixes files
-```
-yarn lint
-```
-
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).

android/app/src/main/AndroidManifest.xml

@@ -8,7 +8,8 @@
         android:label="@string/app_name"
         android:roundIcon="@mipmap/ic_launcher_round"
         android:supportsRtl="true"
-        android:theme="@style/AppTheme">
+        android:theme="@style/AppTheme"
+        android:networkSecurityConfig="@xml/network_security_config">
 
         <activity
             android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode"

android/app/src/main/res/xml/network_security_config.xml

+<?xml version='1.0' encoding='utf-8'?>
+<network-security-config>
+    <base-config cleartextTrafficPermitted="true">
+        <trust-anchors>
+            <certificates src="system"/>
+        </trust-anchors>
+    </base-config>
+</network-security-config>
\ No newline at end of file

capacitor.config.json

@@ -5,20 +5,13 @@
     "npmClient": "yarn",
     "webDir": "www",
     "cordova": {},
-    "server": {
-        "url": "127.0.0.1:8080",
-        "hostname": "app",
-        "iosScheme": "vue",
-        "androidScheme": "vue",
-        "allowNavigation": [
-            "example.org",
-            "*.example.org",
-            "192.0.2.1"
-        ]
-    },
     "overrideUserAgent": "my custom user agent",
     "appendUserAgent": "string to append",
     "backgroundColor": "#ffffffff",
+    "hideLogs": true,
+    "server": {
+        "url": "http://192.168.1.2:8080"
+    },
     "android": {
         "overrideUserAgent": "my custom user agent for Android",
         "appendUserAgent": "string to append for Android",

package.json

@@ -6,7 +6,7 @@
     "serve": "node --max_old_space_size=8102 ./node_modules/@vue/cli-service/bin/vue-cli-service serve --mode test",
     "dev-serve": "node --max_old_space_size=8102 ./node_modules/@vue/cli-service/bin/vue-cli-service serve --mode development",
     "build": "node --max_old_space_size=8102 ./node_modules/@vue/cli-service/bin/vue-cli-service build",
-    "build-native-app": "node --max_old_space_size=8102 ./node_modules/@vue/cli-service/bin/vue-cli-service build --mode nativeapp",
+    "build-hybrid-app": "node --max_old_space_size=8102 ./node_modules/@vue/cli-service/bin/vue-cli-service build --mode hybridapp",
     "dev-build": "node --max_old_space_size=8102 ./node_modules/@vue/cli-service/bin/vue-cli-service build --mode development",
     "lint": "vue-cli-service lint"
   },

src/app-register.ts

@@ -52,7 +52,9 @@ export const AppComponents = {
         v.component('app-list-swipe', () => import('@/components/app-list-swipe/app-list-swipe.vue'));
         v.component('app-mob-rate', () => import('@/components/app-mob-rate/app-mob-rate.vue'));
         v.component('app-mob-select-drop-down', () => import('@/components/app-mob-select-drop-down/app-mob-select-drop-down.vue'));
-        v.component('app-mob-textarea',() => import('./components/app-mob-textarea/app-mob-textarea.vue'))
+        v.component('app-mob-textarea',() => import('./components/app-mob-textarea/app-mob-textarea.vue'));
+        // 日历组件
+        v.component('app-calendar',() => import('@/components/app-calendar/app-calendar.vue'));
 
         // 编辑器 BEGIN
         // 图片选择
@@ -71,8 +73,6 @@ export const AppComponents = {
         v.component('app-mob-dropdown-list', () => import('@/components/app-mob-dropdown-list/app-mob-dropdown-list.vue')); 
         //下拉单选
         v.component('app-mob-mpicker', () => import('@/components/app-mob-mpicker/app-mob-mpicker.vue'));  
-        //下拉单选(多语言) 
-        v.component('app-mob-dropdown-list-dynamic', () => import('@/components/app-mob-dropdown-list-dynamic/app-mob-dropdown-list-dynamic.vue'));   
         //span
         v.component('app-mob-span', () => import('@/components/app-mob-span/app-mob-span.vue'));   
         //录音 

src/components/app-calendar/app-calendar.vue

+<template>
+  <div class="mpvue-calendar" ref="calendar">
+    <div class="calendar-tools" v-if="!isMonthRange">
+      <div class="calendar-prev" @click="prev">
+        <img :src="arrowLeft" v-if="!!arrowLeft">
+        <i class="iconfont icon-arrow-left" v-else></i>
+      </div>
+      <div class="calendar-next"  @click="next">
+        <img :src="arrowRight" v-if="!!arrowRight">
+        <i class="iconfont icon-arrow-right" v-else></i>
+      </div>
+      <div class="calendar-info" @click.stop="changeYear">
+        <div class="mc-month">
+          <div
+            :class="['mc-month-inner', oversliding ? '' : 'month-transition']"
+            :style="{'top': monthPosition + unit}"
+            v-if="isIos"
+          >
+            <span v-for="(m, i) in monthsLoop" :key="i" >{{m}}</span>
+          </div>
+          <div class="mc-month-text" v-else>{{monthText}}</div>
+        </div>
+        <div class="mc-year">{{year}}</div>
+      </div>
+    </div>
+    <table cellpadding="5">
+      <div class="mc-head" :class="['mc-head', {'mc-month-range-mode-head': isMonthRange}]">
+        <div class="mc-head-box">
+          <div v-for="(week, index) in weeks" :key="index" class="mc-week">{{week}}</div>
+        </div>
+      </div>
+      <div
+        :class="['mc-body', {'mc-range-mode': range, 'week-switch': weekSwitch && !isMonthRange, 'month-range-mode': isMonthRange}]"
+        v-for="(days, index) in monthRangeDays"
+        :key='index'
+      >
+        <div class="month-rang-head" v-if="isMonthRange">{{rangeOfMonths[index][2]}}</div>
+        <tr v-for="(day,k1) in days" :key="k1" :class="{'gregorianStyle': !lunar}">
+          <td
+            v-for="(child,k2) in day"
+            :key="k2"
+            :class="[{'selected': child.selected, 'mc-today-element': child.isToday, 'disabled': child.disabled,
+             'mc-range-select-one': rangeBgHide && child.selected, 'lunarStyle': lunar, 'mc-range-row-first': k2 === 0 && child.selected,
+              'month-last-date': child.lastDay, 'month-first-date': 1 === child.day, 'mc-range-row-last': k2 === 6 && child.selected,
+               'mc-last-month': child.lastMonth, 'mc-next-month': child.nextMonth}, child.className, child.rangeClassName]"
+            @click="select(k1, k2, child, $event, index)"
+            class="mc-day"
+            :style="itemStyle()"
+          >
+            <span v-if="showToday.show && child.isToday" class="mc-today calendar-date">{{showToday.text}}</span>
+            <span :class="[{'mc-date-red': k2 === (monFirst ? 5 : 0) || k2 === 6}, 'calendar-date']" v-else>{{child.day}}</span>
+            <div class="slot-element" v-if="!!child.content">{{child.content}}</div>
+            <div class="mc-text remark-text" v-if="child.eventName && !clean">{{child.eventName}}</div>
+            <div class="mc-dot" v-if="child.eventName && clean" />
+            <!-- user -->
+            <template v-for="(usersign,us) in sign">
+            <div  class="sign" v-if="usersign.time==child.date" :key="us">
+                <div class="sign-item" v-for="(sigin,si) in usersign.evens" :key="si" :style="{color: sigin.color}">—</div>
+            </div>
+            </template>
+            <div
+              class="mc-text"
+              :class="{'isLunarFestival': child.isAlmanac || child.isLunarFestival, 'isGregorianFestival': child.isGregorianFestival, 'isTerm': child.isTerm}"
+              v-if="lunar && (!child.eventName || clean)"
+            >
+              {{child.almanac || child.lunar}}
+            </div>
+            <div class="mc-range-bg" v-if="range && child.selected" />
+          </td>
+        </tr>
+      </div>
+    </table>
+    <div class="mpvue-calendar-change" :class="{'show': yearsShow}">
+      <div class="calendar-years" v-if="!weekSwitch">
+        <span v-for="y in years" :key="y" @click.stop="selectYear(y)" :class="{'active': y === year}">{{y}}</span>
+      </div>
+      <div :class="['calendar-months', {'calendar-week-switch-months': weekSwitch}]">
+        <span v-for="(m, i) in months" :key="m" @click.stop="changeMonth(i)" :class="{'active': i === month}">{{m}}</span>
+      </div>
+    </div>
+        <!-- user -->
+    <div v-if="isChangeStyle" @click="changeStyle()"  class="changebox">
+        <div v-if="changebtntop"  class="changeStyle_bottom"></div>
+        <div v-if="!changebtntop" class="changeStyle_top"></div>
+    </div>
+    <!-- user -->
+    <div v-if="illustration" class="illustration">
+      <div v-for="(il,index) in illustration" :key="index" class="illustration-item"><div :style="{color: il.color}" class="illustration-color">—</div><div class="illustration-text">{{il.text}}</div></div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import calendar, {defaultLunar, defaultGregorian, todayString, isBrowser} from './calendarinit.js';
+  import './icon.css';
+  export default {
+    props: {
+      multi: {
+        type: Boolean,
+        default: false
+      },
+      illustration:{
+        type: Array,
+        default: null
+        },
+      arrowLeft: {
+        type: String,
+        default: ''
+      },
+      arrowRight: {
+        type: String,
+        default: ''
+      },
+      clean: {
+        type: Boolean,
+        default: false
+      },
+      now: {
+        type: [String, Boolean],
+        default: true
+      },
+      range: {
+        type: Boolean,
+        default: false
+      },
+      completion: {
+        type: Boolean,
+        default: false
+      },
+      value: {
+        type: Array,
+        default() {
+          return [];
+        }
+      },
+      begin: {
+        type: Array,
+        default() {
+          return [];
+        }
+      },
+      end: {
+        type: Array,
+        default() {
+          return [];
+        }
+      },
+      zero: {
+        type: Boolean,
+        default: false
+      },
+      disabled: {
+        type: Array,
+        default() {
+          return [];
+        }
+      },
+      almanacs: {
+        type: Object,
+        default() {
+          return {};
+        }
+      },
+      tileContent: {
+        type: Array,
+        default() {
+          return [];
+        }
+      },
+      sign:{type: Array, default:[]
+        },
+      lunar: {
+        type: Boolean,
+        default: false
+      },
+      monFirst: {
+        type: Boolean,
+        default: false
+      },
+      weeks: {
+        type: Array,
+        default() {
+          return this.monFirst ? ['一', '二', '三', '四', '五', '六', '日'] : ['日', '一', '二', '三', '四', '五', '六'];
+        }
+      },
+      months: {
+        type: Array,
+        default() {
+          return ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
+        }
+      },
+      events: {
+        type: Object,
+        default() {
+          return {};
+        }
+      },
+      isChangeStyle:{
+        type: Boolean,
+        default: false
+      },
+      weekSwitch: {
+        type: Boolean,
+        default: false
+      },
+      monthRange: {
+        type: Array,
+        default() {
+          return [];
+        }
+      },
+      responsive: {
+        type: Boolean,
+        default: false
+      },
+      rangeMonthFormat: {
+        type: String,
+        default: ''
+      }
+    },
+    data() {
+      return {
+        changebtntop: false,
+        years: [],
+        yearsShow: false,
+        year: 0,
+        month: 0,
+        monthPosition: 0,
+        day: 0,
+        days: [],
+        multiDays: [],
+        today: [],
+        handleMultiDay: [],
+        firstRender: true,
+        isIos: true,
+        showToday: {},
+        monthText: '',
+        festival: {
+          lunar: defaultLunar,
+          gregorian: defaultGregorian,
+        },
+        rangeBegin: [],
+        rangeEnd: [],
+        multiDaysData: [],
+        monthsLoop: [],
+        itemWidth: 50,
+        unit: isBrowser ? 'px' : 'rpx',
+        positionH: isBrowser ? -24 : -40,
+        monthIndex: 0,
+        oversliding: false,
+        rangeBgHide: false,
+        monthRangeDays: [],
+        rangeOfMonths: [],
+        monthDays: [],
+        weekIndex: 0,
+        startWeekIndex: 0,
+        positionWeek: true,
+        isMonthRange: false,
+      };
+    },
+    computed: {
+
+    },
+    watch: {
+      events() {
+        if (this.isRendeRangeMode()) return;
+        this.render(this.year, this.month, '_WATCHRENDER_', 'events');
+      },
+      disabled() {
+        if (this.isRendeRangeMode()) return;
+        this.render(this.year, this.month, '_WATCHRENDER_', 'disabled');
+      },
+      value() {
+        if (this.isRendeRangeMode('_WATCHRENDERVALUE_')) return;
+        const {value} = this;
+        let year = value[0] || this.year;
+        let month = value[1] - 1 || this.month;
+        let day;
+        if (this.multi) {
+          if (this.isUserSelect) {
+            year = this.year;
+            month = this.month;
+            this.isUserSelect = false;
+          } else {
+            year = (value[value.length - 1] || [])[0] || this.year;
+            month = (value[value.length - 1]|| [])[1] - 1 || this.month;
+          }
+        } else if (this.range) {
+          if (this.isUserSelect) {
+            year = this.year;
+            month = this.month;
+            this.isUserSelect = false;
+          } else {
+            if (value.length) {
+              year = value[0][0];
+              month = value[0][1] - 1;
+              day = value[0][2];
+            }
+            return this.render(year, month, '_WATCHRENDERVALUE_', [year, month, day]);
+          }
+        }
+        this.render(year, month, '_WATCHRENDERVALUE_');
+      },
+      tileContent() {
+        if (this.isRendeRangeMode()) return;
+        this.render(this.year, this.month, '_WATCHRENDER_', 'tileContent');
+      },
+      almanacs() {
+        if (this.isRendeRangeMode()) return;
+        this.render(this.year, this.month, '_WATCHRENDER_', 'almanacs');
+      },
+      monthRange() {
+        if (this.isRendeRangeMode()) return;
+        this.render(this.year, this.month, '_WATCHRENDER_', 'almanacs');
+      },
+      responsive() {
+        if (this.responsive) this.addResponsiveListener();
+      },
+      weekSwitch() {
+        if (this.isRendeRangeMode()) return;
+        this.render(this.year, this.month, '_WATCHRENDER_', 'almanacs');
+      }
+    },
+    created() {
+      this.isMonthRange = !!this.monthRange.length;
+      const loopArray = this.months.concat();
+      loopArray.unshift(this.months[this.months.length - 1]);
+      loopArray.push(this.months[0]);
+      this.monthsLoop = loopArray;
+      this.monthsLoopCopy = this.monthsLoop.concat();
+    },
+    mounted() {
+      const self = this;
+      this.resize();
+      if (!isBrowser) {
+        wx.getSystemInfo({
+          success(res) {
+            self.isIos = (res.system.split(' ') || [])[0] === 'iOS';
+          }
+        });
+      } else if (this.responsive) {
+        this.addResponsiveListener();
+      }
+      this.oversliding = true;
+      this.initRender = true;
+      this.init();
+    },
+    beforeDestroy() {
+      if (isBrowser) {
+        window.removeEventListener('resize', this.resize);
+      }
+    },
+    methods: {
+      itemStyle() {
+        return {
+          width: `50px`,
+          height: `50px`,
+          fontSize: `${50 / 4}px`,
+          lineHeight: `50px`
+        };
+      },
+      changeStyle(){
+        this.changebtntop = !this.changebtntop;
+        this.render(this.year, this.month);
+      },
+      init() {
+        const now = new Date();
+        this.year = now.getFullYear();
+        this.month = now.getMonth();
+        this.day = now.getDate();
+        this.monthIndex = this.month + 1;
+        if (this.value.length || this.multi) {
+          if (this.range) {
+            this.year = Number(this.value[0][0]);
+            this.month = this.value[0][1] - 1;
+            this.day = Number(this.value[0][2]);
+            const yearEnd = Number(this.value[1][0]);
+            const monthEnd = this.value[1][1] - 1;
+            const dayEnd = this.value[1][2];
+            this.rangeBegin = [this.year, this.month, this.day];
+            this.rangeEnd = [yearEnd, monthEnd, dayEnd];
+          } else if (this.multi) {
+            this.multiDays = this.value;
+            const {handleMultiDay} = this;
+            if (this.firstRender) {
+              this.firstRender = false;
+              const thatYear = (this.value[0] || [])[0];
+              const thatMonth = (this.value[0] || [])[1];
+              if (isFinite(thatYear) && isFinite(thatMonth)) {
+                this.month = parseInt(thatMonth, 10) - 1;
+                this.year = parseInt(thatYear, 10);
+              }
+            } else if (this.handleMultiDay.length) {
+              this.month = parseInt(handleMultiDay[handleMultiDay.length - 1][1], 10) - 1;
+              this.year = parseInt(handleMultiDay[handleMultiDay.length - 1][0], 10);
+              this.handleMultiDay = [];
+            } else {
+              this.month = parseInt(this.value[this.value.length - 1][1], 10) - 1;
+              this.year = parseInt(this.value[this.value.length - 1][0], 10);
+            }
+            this.day = parseInt((this.value[0] || [])[2], 10);
+          } else {
+            this.year = parseInt(this.value[0], 10);
+            this.month = parseInt(this.value[1], 10) - 1;
+            this.day = parseInt(this.value[2], 10);
+          }
+        }
+        this.updateHeadMonth();
+        if (this.isRendeRangeMode()) return;
+        this.render(this.year, this.month);
+      },
+      renderOption(year, month, i, playload) {
+        const weekSwitch = this.monthRange.length ? false : this.weekSwitch;
+        const {value: selectSplit} = this;
+        const isMonthModeCurrentMonth = !weekSwitch && !playload;
+        const disabledFilter = (disabled) => disabled.find(v => {
+          const dayArr = v.split('-');
+          return year === Number(dayArr[0]) && month === (dayArr[1] - 1) && i === Number(dayArr[2]);
+        });
+        if (this.range) {
+          const lastDay = new Date(year, month + 1, 0).getDate() === i ? {lastDay: true} : null;
+          const options = Object.assign(
+            {day: i},
+            this.getLunarInfo(year, month + 1, i),
+            this.getEvents(year, month + 1, i),
+            lastDay
+          );
+          const {date, day} = options;
+          const copyRangeBegin = this.rangeBegin.concat();
+          const copyRangeEnd = this.rangeEnd.concat();
+          copyRangeBegin[1] += 1;
+          copyRangeEnd[1] += 1;
+          if (weekSwitch || isMonthModeCurrentMonth) {
+            (copyRangeEnd.join('-') === date) && (options.rangeClassName = 'mc-range-end');
+            (copyRangeBegin.join('-') === date) && (options.rangeClassName = 'mc-range-begin');
+          }
+          if (year === copyRangeEnd[0] && (month + 1) === copyRangeEnd[1] && day === (copyRangeEnd[2] - 1)) {
+            options.rangeClassName = options.rangeClassName ? ['mc-range-begin', 'mc-range-second-to-last'] : 'mc-range-second-to-last';
+          }
+          if (this.rangeBegin.length) {
+            const beginTime = +new Date(this.rangeBegin[0], this.rangeBegin[1], this.rangeBegin[2]);
+            const endTime = +new Date(this.rangeEnd[0], this.rangeEnd[1], this.rangeEnd[2]);
+            const stepTime = +new Date(year, month, i);
+            if (beginTime <= stepTime && endTime >= stepTime) {
+              options.selected = true;
+            }
+          }
+          if (this.begin.length) {
+            const beginTime = +new Date(parseInt(this.begin[0], 10), parseInt(this.begin[1], 10) - 1, parseInt(this.begin[2], 10));
+            if (beginTime > +new Date(year, month, i)) {
+              options.disabled = true;
+            }
+          }
+          if (this.end.length) {
+            const endTime = Number(new Date(parseInt(this.end[0], 10), parseInt(this.end[1], 10) - 1, parseInt(this.end[2], 10)));
+            if (endTime < Number(new Date(year, month, i))) {
+              options.disabled = true;
+            }
+          }
+          if (playload && !weekSwitch) {
+            options.disabled = true;
+          } else if (this.disabled.length && disabledFilter(this.disabled)) {
+            options.disabled = true;
+          }
+          const monthFirstDay = `${year}-${month + 1}-1`;
+          const monthLastDay = `${year}-${month + 1}-${new Date(year, month + 1, 0).getDate()}`;
+          (monthFirstDay === date && options.selected && !options.rangeClassName) && (options.rangeClassName = 'mc-range-month-first');
+          (monthLastDay === date && options.selected && !options.rangeClassName) && (options.rangeClassName = 'mc-range-month-last');
+          this.isCurrentMonthToday(options) && (options.isToday = true);
+          (!weekSwitch && playload) && (options.selected = false);
+          return options;
+        }
+        if (this.multi) {
+          let options;
+          if (this.value.find(v => year === v[0] && (month === v[1] - 1) && i === v[2])) {
+            options = Object.assign(
+              {day: i, selected: true},
+              this.getLunarInfo(year, month + 1, i),
+              this.getEvents(year, month + 1, i)
+            );
+          } else {
+            options = Object.assign(
+              {day: i, selected: false},
+              this.getLunarInfo(year, month + 1, i),
+              this.getEvents(year, month + 1, i)
+            );
+            if (this.begin.length) {
+              const beginTime = +new Date(parseInt(this.begin[0], 10), parseInt(this.begin[1], 10) - 1, parseInt(this.begin[2], 10));
+              if (beginTime > +(new Date(year, month, i))) {
+                options.disabled = true;
+              }
+            }
+            if (this.end.length) {
+              const endTime = +new Date(parseInt(this.end[0], 10), parseInt(this.end[1], 10) - 1, parseInt(this.end[2], 10));
+              if (endTime < +(new Date(year, month, i))) {
+                options.disabled = true;
+              }
+            }
+            if (this.disabled.length && disabledFilter(this.disabled)) {
+              options.disabled = true;
+            }
+          }
+          this.isCurrentMonthToday(options) && (options.isToday = true);
+          if (playload && !weekSwitch) {
+            options.disabled = true;
+            options.selected = false;
+          }
+          return options;
+        } else {
+          const options = {};
+          const monthHuman = month + 1;
+          if (selectSplit[0] === year && selectSplit[1] === monthHuman && selectSplit[2] === i) {
+            Object.assign(
+              options,
+              {day: i, selected: true},
+              this.getLunarInfo(year, monthHuman, i),
+              this.getEvents(year, monthHuman, i)
+            );
+          } else {
+            Object.assign(
+              options,
+              {day: i, selected: false},
+              this.getLunarInfo(year, monthHuman, i),
+              this.getEvents(year, monthHuman, i)
+            );
+            if (this.begin.length) {
+              const beginTime = +new Date(parseInt(this.begin[0], 10), parseInt(this.begin[1], 10) - 1, parseInt(this.begin[2], 10));
+              if (beginTime > Number(new Date(year, month, i))) {
+                options.disabled = true;
+              }
+            }
+            if (this.end.length) {
+              const endTime = +new Date(parseInt(this.end[0], 10), parseInt(this.end[1], 10) - 1, parseInt(this.end[2], 10));
+              if (endTime < +(new Date(year, month, i))) {
+                options.disabled = true;
+              }
+            }
+            if (this.disabled.length && disabledFilter(this.disabled)) {
+              options.disabled = true;
+            }
+          }
+          this.isCurrentMonthToday(options) && (options.isToday = true);
+          if (playload && !weekSwitch) {
+            options.disabled = true;
+            options.selected = false;
+          }
+          return options;
+        }
+      },
+      isCurrentMonthToday(options) {
+        const isToday = todayString === options.date;
+        if (!isToday) return false;
+        return this.weekSwitch ? isToday : (Number(todayString.split('-')[1]) === this.month + 1);
+      },
+      watchRender(type) {
+        const {weekSwitch} = this;
+        const daysDeepCopy = JSON.parse(JSON.stringify(this.monthDays));
+        if (type === 'events') {
+          const events = this.events || {};
+          Object.keys(events).forEach(value => {
+            daysDeepCopy.some(v => v.some(vv => {
+              if (vv.date === value) {
+                vv.eventName = events[value];
+                return true;
+              }
+            }));
+          });
+        } else if (type === 'disabled') {
+          const disabled = this.disabled || [];
+          disabled.forEach(value => {
+            daysDeepCopy.some(v => v.some(vv => {
+              if (vv.date === value) {
+                vv.disabled = true;
+                return true;
+              }
+            }));
+          });
+        } else if (type === 'almanacs') {
+          const almanacs = this.almanacs || {};
+          Object.keys(almanacs).forEach(value => {
+            daysDeepCopy.some(v => v.some(vv => {
+              if (vv.date.slice(5, 20) === value) {
+                const [y, m, d] = vv.date.split('-');
+                Object.assign(vv, this.getLunarInfo(y, m, d));
+                return true;
+              }
+            }));
+          });
+        } else if (type === 'tileContent') {
+          const tileContent = this.tileContent || [];
+          tileContent.forEach(value => {
+            daysDeepCopy.some(v => v.some(vv => {
+              if (vv.date === value.date) {
+                vv.className = value.className;
+                vv.content = value.content;
+                return true;
+              }
+            }));
+          });
+        }
+        this.monthDays = daysDeepCopy;
+        if (weekSwitch) {
+          this.days = [daysDeepCopy[this.weekIndex]];
+          this.monthRangeDays = [this.days];
+        } else {
+          this.days = daysDeepCopy;
+          this.monthRangeDays = [this.days];
+        }
+      },
+      render(y, m, renderer, payload) {
+        const {weekSwitch} = this;
+        const isCustomRender = renderer === 'CUSTOMRENDER';
+        const isWatchRenderValue = renderer === '_WATCHRENDERVALUE_';
+        this.year = y;
+        this.month = m;
+        if (renderer === '_WATCHRENDER_') return this.watchRender(payload);
+        if (this.range && isWatchRenderValue) {
+          if (!Array.isArray((this.value || [])[0])) {
+            this.rangeBegin = [];
+            this.rangeEnd = [];
+          } else {
+            this.rangeBegin = [this.value[0][0], this.value[0][1] - 1, this.value[0][2]];
+            this.rangeEnd = [this.value[1][0], this.value[1][1] - 1, this.value[1][2]];
+          }
+        }
+        if (isWatchRenderValue && weekSwitch) {
+          this.positionWeek = true;
+        }
+        if (isCustomRender) {
+          this.year = y;
+          this.month = m;
+          this.positionWeek = true;
+          if (weekSwitch && !payload) {
+            this.startWeekIndex = 0;
+            this.weekIndex = 0;
+          }
+          this.updateHeadMonth();
+        }
+        const firstDayOfMonth = new Date(y, m, 1).getDay();
+        const lastDateOfMonth = new Date(y, m + 1, 0).getDate();
+        const lastDayOfLastMonth = new Date(y, m, 0).getDate();
+        this.year = y;
+        let i = 1;
+        let line = 0;
+        let nextMonthPushDays = 1;
+        const temp = [];
+        for (i; i <= lastDateOfMonth; i++) {
+          const day = new Date(y, m, i).getDay();
+          let k;
+          if (day === 0) {
+            temp[line] = [];
+          } else if (i === 1) {
+            temp[line] = [];
+            k = lastDayOfLastMonth - firstDayOfMonth + 1;
+            for (let j = 0; j < firstDayOfMonth; j++) { //generate prev month surplus option
+              temp[line].push(Object.assign(
+                this.renderOption(this.computedPrevYear(y, m), this.computedPrevMonth(false, m), k, 'prevMonth'),
+                {lastMonth: true}
+              ));
+              k++;
+            }
+          }
+          temp[line].push(this.renderOption(y, m, i)); //generate current month option
+          if (day === 6 && i < lastDateOfMonth) {
+            line++;
+          } else if (i === lastDateOfMonth) {
+            let nextDay = 1;
+            const lastDateOfMonthLength = this.monFirst ? 7 : 6;
+            for (let d = day; d < lastDateOfMonthLength; d++) { //generate next month surplus option
+              temp[line].push(Object.assign(
+                this.renderOption(this.computedNextYear(y, m), this.computedNextMonth(false, m), nextDay, 'nextMonth'),
+                {nextMonth: true}
+              ));
+              nextDay++;
+            }
+            nextMonthPushDays = nextDay;
+          }
+        }
+        const {completion} = this;
+        if (this.monFirst) {
+          if (!firstDayOfMonth) {
+            let lastMonthDay = lastDayOfLastMonth;
+            const LastMonthItems = [];
+            for (let d = 1; d <= 7; d++) {
+              LastMonthItems.unshift(Object.assign(
+                this.renderOption(this.computedPrevYear(y, m), this.computedPrevMonth(false, m), lastMonthDay, 'prevMonth'),
+                {lastMonth: true}
+              ));
+              lastMonthDay--;
+            }
+            temp.unshift(LastMonthItems);
+          }
+          temp.forEach((item, index) => {
+            if (!index) {
+              return item.splice(0, 1);
+            }
+            temp[index - 1].length < 7 && temp[index - 1].push(item.splice(0, 1)[0]);
+          });
+          if (this.isMonthRange && temp[temp.length - 1][0].nextMonth) {
+            temp.splice(temp.length - 1, 1); //if the first day of last line is nextMonth, delete this line
+          }
+          if (!completion && !weekSwitch) {
+            const lastIndex = temp.length - 1;
+            const secondToLastIndex = lastIndex - 1;
+            const differentMonth = temp[lastIndex][0].date.split('-')[1] !== temp[secondToLastIndex][6].date.split('-')[1];
+            differentMonth && temp.splice(lastIndex, 1);
+          }
+        }
+        if (completion && !weekSwitch && temp.length <= 5 && nextMonthPushDays > 0) {
+          for (let completionIndex = temp.length; completionIndex <= 5; completionIndex++) {
+            temp[completionIndex] = [];
+            const start = nextMonthPushDays + (completionIndex - line - 1) * 7;
+            for (let d = start; d <= start + 6; d++) {
+              temp[completionIndex].push(Object.assign(
+                {day: d, disabled: true, nextMonth: true},
+                this.getLunarInfo(this.computedNextYear(y, m), this.computedNextMonth(true, m), d),
+                this.getEvents(this.computedNextYear(y, m), this.computedNextMonth(true, m), d)
+              ));
+            }
+          }
+        }
+        if (this.tileContent.length) {
+          temp.forEach((item, index) => {
+            item.forEach(v => {
+              const contents = this.tileContent.find(val => val.date === v.date);
+              if (contents) {
+                const {className, content} = contents || {};
+                v.className = className;
+                v.content = content;
+              }
+            });
+          });
+        }
+        if (weekSwitch || this.changebtntop) {
+          const tempLength = temp.length;
+          const lastLineMonth = temp[tempLength - 1][0].date.split('-')[1]; // last line month
+          const secondLastMonth = temp[tempLength - 2][0].date.split('-')[1]; // second-to-last line month
+          lastLineMonth !== secondLastMonth && temp.splice(tempLength - 1, 1);
+        }
+        this.monthDays = temp;
+        if (weekSwitch && !this.isMonthRange || this.changebtntop) {
+          if (this.positionWeek) {
+            let payloadDay = '';
+            let searchIndex = true;
+            if (Array.isArray(payload)) { //range
+              payloadDay = [payload[0], payload[1] + 1, payload[2]].join('-');
+            } else if (this.multi || isWatchRenderValue) {
+              if (this.thisTimeSelect) {
+                payloadDay = this.thisTimeSelect;
+              } else {
+                payloadDay = this.multi ? this.value[this.value.length - 1].join('-') : this.value.join('-');
+              }
+            }
+            if (payload === 'SETTODAY') {
+              payloadDay = todayString;
+            } else if (isCustomRender) {
+              if (typeof payload === 'string') {
+                payloadDay = [y, Number(m) + 1, payload].join('-');
+                searchIndex = true;
+              } else if (typeof payload === 'number') {
+                const setIndex = payload > temp.length ? temp.length - 1 : payload;
+                this.startWeekIndex = setIndex;
+                this.weekIndex = setIndex;
+                this.positionWeek = false;
+                searchIndex = false;
+              }
+            }
+            const positionDay = payloadDay || todayString;
+            if (searchIndex) {
+              temp.some((v, index) => {
+                const isWeekNow = v.find(vv => vv.date === positionDay);
+                if (isWeekNow) {
+                  this.startWeekIndex = index;
+                  this.weekIndex = index;
+                  return true;
+                }
+              });
+            }
+            this.positionWeek = false;
+          }
+          this.days = [temp[this.startWeekIndex]];
+          if(this.changebtntop){
+            let days = temp.filter((item)=>{
+              return item.some((day)=>{
+                return day.selected  == true;
+              }) == true
+            })
+            if(days.length > 0){
+                this.days = days;
+            }
+          }
+          if (this.initRender) {
+            this.setMonthRangeofWeekSwitch();
+            this.initRender = false;
+          }
+        } else {
+          this.days = temp;
+        }
+        const todayText = '今';
+        if (typeof this.now === 'boolean' && !this.now) {
+          this.showToday = {show: false};
+        } else if (typeof this.now === 'string') {
+          this.showToday = {
+            show: true,
+            text: this.now || todayText
+          };
+        } else {
+          this.showToday = {
+            show: true,
+            text: todayText
+          };
+        }
+        this.monthRangeDays = [this.days];
+        isWatchRenderValue && this.updateHeadMonth();
+        return this.days;
+      },
+      rendeRange(renderer) {
+        const range = [];
+        const self = this;
+        const monthRange = this.monthRange;
+        function formatDateText(fYear, fMonth) {
+          const reg = /([y]+)(.*?)([M]+)(.*?)$/i;
+          const rangeMonthFormat = self.rangeMonthFormat || 'yyyy-MM';
+          reg.exec(rangeMonthFormat);
+          return String(fYear).substring(4 - RegExp.$1.length) + RegExp.$2 + String(fMonth).substring(2 - RegExp.$3.length) + RegExp.$4;
+        }
+        if (monthRange[0] === monthRange[1]) {
+          const [y, m] = monthRange[0].split('-');
+          range.push([Number(y), Number(m), formatDateText(y, m)]);
+        } else {
+          const monthRangeOfStart = monthRange[0].split('-');
+          const monthRangeOfEnd = monthRange[1].split('-');
+          let startYear = +monthRangeOfStart[0];
+          let startMonth = +monthRangeOfStart[1];
+          const endYear = +monthRangeOfEnd[0];
+          const endtMonth = +monthRangeOfEnd[1] > 12 ? 12 : +monthRangeOfEnd[1];
+          while (startYear < endYear || startMonth <= endtMonth) {
+            range.push([startYear, startMonth, formatDateText(startYear, startMonth)]);
+            if (startMonth === 12 && startYear !== endYear) {
+              startYear++;
+              startMonth = 0;
+            }
+            startMonth++;
+          }
+        }
+        this.rangeOfMonths = range;
+        const monthsRange = range.map(item => {
+          const [yearParam, monthParam] = item;
+          return this.render(yearParam, monthParam - 1, renderer);
+        });
+        this.monthRangeDays = monthsRange;
+      },
+      isRendeRangeMode(renderer) {
+        this.isMonthRange = !!this.monthRange.length;
+        if (this.isMonthRange) {
+          this.rendeRange(renderer);
+          return true;
+        }
+      },
+      renderer(y, m, w) {
+        const renderY = y || this.year;
+        const renderM = typeof parseInt(m, 10) === 'number' ? (m - 1) : this.month;
+        this.initRender = true;
+        this.render(renderY, renderM, 'CUSTOMRENDER', w);
+        !this.weekSwitch && (this.monthsLoop = this.monthsLoopCopy.concat());
+      },
+      computedPrevYear(year, month) {
+        let value = year;
+        if ((month - 1) < 0) {
+          value--;
+        }
+        return value;
+      },
+      computedPrevMonth(isString, month) {
+        let value = month;
+        if ((month - 1) < 0) {
+          value = 11;
+        } else {
+          value--;
+        }
+        if (isString) {
+          return value + 1;
+        }
+        return value;
+      },
+      computedNextYear(year, month) {
+        let value = year;
+        if ((month + 1) > 11) {
+          value++;
+        }
+        return value;
+      },
+      computedNextMonth(isString, month) {
+        let value = month;
+        if ((month + 1) > 11) {
+          value = 0;
+        } else {
+          value++;
+        }
+        if (isString) {
+          return value + 1;
+        }
+        return value;
+      },
+      getLunarInfo(y, m, d) {
+        const lunarInfo = calendar.solar2lunar(y, m, d);
+        const {Term, lMonth, lDay, lYear} = lunarInfo || {};
+        let yearEve = '';
+        if (lMonth === 12 && lDay === calendar.monthDays(lYear, 12)) {
+          yearEve = '除夕';
+        }
+        let lunarValue = lunarInfo.IDayCn;
+        let isLunarFestival = false;
+        let isGregorianFestival = false;
+        if (this.festival.lunar[`${lunarInfo.lMonth}-${lunarInfo.lDay}`]) {
+          lunarValue = this.festival.lunar[`${lunarInfo.lMonth}-${lunarInfo.lDay}`];
+          isLunarFestival = true;
+        } else if (this.festival.gregorian[`${m}-${d}`]) {
+          lunarValue = this.festival.gregorian[`${m}-${d}`];
+          isGregorianFestival = true;
+        }
+        const lunarInfoObj = {
+          date: `${y}-${m}-${d}`,
+          lunar: yearEve || Term || lunarValue,
+          isLunarFestival,
+          isGregorianFestival,
+          isTerm: !!yearEve || lunarInfo.isTerm
+        };
+        if (Object.keys(this.almanacs).length) {
+          Object.assign(lunarInfoObj, {
+            almanac: this.almanacs[`${m}-${d}`] || '',
+            isAlmanac: !!this.almanacs[`${m}-${d}`]
+          });
+        }
+        return lunarInfoObj;
+      },
+      getEvents(y, m, d) {
+        if (!Object.keys(this.events).length) return;
+        const eventName = this.events[`${y}-${m}-${d}`];
+        const data = {};
+        if (eventName) {
+          data.eventName = eventName;
+        }
+        return data;
+      },
+      prev(e) {
+        e && e.stopPropagation();
+        if (this.isMonthRange) return;
+        const weekSwitch = this.weekSwitch;
+        const changeMonth = (changed) => {
+          if (this.monthIndex === 1) {
+            this.oversliding = false;
+            this.month = 11;
+            this.year = parseInt(this.year, 10) - 1;
+            this.monthIndex = this.monthIndex - 1;
+          } else if (this.monthIndex === 0) {
+            this.oversliding = true;
+            this.monthIndex = 12;
+            setTimeout(() => this.prev(e), 50);
+            return this.updateHeadMonth('custom');
+          } else if (this.monthIndex === 13) {
+            this.month = 11;
+            this.year = parseInt(this.year, 10) - 1;
+            this.monthIndex = this.monthIndex - 1;
+          } else {
+            this.oversliding = false;
+            this.month = parseInt(this.month, 10) - 1;
+            this.monthIndex = this.monthIndex - 1;
+          }
+          this.updateHeadMonth('custom');
+          this.render(this.year, this.month);
+          (typeof changed === 'function') && changed();
+          const weekIndex = weekSwitch ? this.weekIndex : undefined;
+          this.$emit('prev', this.year, this.month + 1, weekIndex);
+        };
+        if (!this.weekSwitch) return changeMonth();
+        const changeWeek = () => {
+          this.weekIndex = this.weekIndex - 1;
+          this.days = [this.monthDays[this.weekIndex]];
+          this.monthRangeDays = [this.days];
+          this.setMonthRangeofWeekSwitch();
+          this.$emit('prev', this.year, this.month + 1, this.weekIndex);
+        };
+        const currentWeek = (this.days[0] || [])[0] || {};
+        if (currentWeek.lastMonth || currentWeek.day === 1) {
+          const monthChenged = () => {
+            const lastMonthLength = this.monthDays.length;
+            const startWeekIndex = currentWeek.lastMonth ? lastMonthLength - 1 : lastMonthLength;
+            this.startWeekIndex = startWeekIndex;
+            this.weekIndex = startWeekIndex;
+            changeWeek();
+          };
+          changeMonth(monthChenged);
+        } else {
+          changeWeek();
+        }
+      },
+      next(e) {
+        e && e.stopPropagation();
+        if (this.isMonthRange) return;
+        const weekSwitch = this.weekSwitch;
+        const changeMonth = () => {
+          if (this.monthIndex === 12) {
+            this.oversliding = false;
+            this.month = 0;
+            this.year = parseInt(this.year, 10) + 1;
+            this.monthIndex = this.monthIndex + 1;
+          } else if (this.monthIndex === 0 && this.month === 11) {
+            this.oversliding = false;
+            this.month = 0;
+            this.year = parseInt(this.year, 10) + 1;
+            this.monthIndex = this.monthIndex + 1;
+          } else if (this.monthIndex === 13) {
+            this.oversliding = true;
+            this.monthIndex = 1;
+            setTimeout(() => this.next(e), 50);
+            return this.updateHeadMonth('custom');
+          } else {
+            this.oversliding = false;
+            this.month = parseInt(this.month, 10) + 1;
+            this.monthIndex = this.monthIndex + 1;
+          }
+          this.updateHeadMonth('custom');
+          this.render(this.year, this.month);
+          const weekIndex = weekSwitch ? this.weekIndex : undefined;
+          this.$emit('next', this.year, this.month + 1, weekIndex);
+        };
+        if (!this.weekSwitch) return changeMonth();
+        const changeWeek = () => {
+          this.weekIndex = this.weekIndex + 1;
+          this.days = [this.monthDays[this.weekIndex]];
+          this.monthRangeDays = [this.days];
+          this.setMonthRangeofWeekSwitch();
+          this.$emit('next', this.year, this.month + 1, this.weekIndex);
+        };
+        const currentWeek = (this.days[0] || [])[6] || {};
+        if (currentWeek.nextMonth || currentWeek.day === (new Date(this.year, this.month + 1, 0).getDate())) {
+          const startWeekIndex = currentWeek.nextMonth ? 1 : 0;
+          this.startWeekIndex = startWeekIndex;
+          this.weekIndex = startWeekIndex;
+          changeMonth();
+        } else {
+          changeWeek();
+        }
+      },
+      select(k1, k2, data, e, monthIndex) {
+        e && e.stopPropagation();
+        const weekSwitch = this.weekSwitch;
+        if (data.lastMonth && !weekSwitch) {
+          return this.prev(e);
+        }
+        if (data.nextMonth && !weekSwitch) {
+          return this.next(e);
+        }
+        if (data.disabled) return;
+        (data || {}).event = (this.events || {})[data.date] || '';
+        const {selected, day, date} = data;
+        const selectedDates = date.split('-');
+        const selectYear = Number(selectedDates[0]);
+        const selectMonth = selectedDates[1] - 1;
+        const selectMonthHuman = Number(selectedDates[1]);
+        const selectDay = Number(selectedDates[2]);
+        if (this.range) {
+          this.isUserSelect = true;
+          const rangeDate = (dateArray) => dateArray.map((v, k) => {
+            const value = k === 1 ? v + 1 : v;
+            return this.zero ? this.zeroPad(value) : value;
+          });
+          if (this.rangeBegin.length === 0 || this.rangeEndTemp !== 0) {
+            this.rangeBegin = [selectYear, selectMonth, selectDay];
+            this.rangeBeginTemp = this.rangeBegin;
+            this.rangeEnd = [selectYear, selectMonth, selectDay];
+            this.thisTimeSelect = this.rangeEnd;
+            this.rangeEndTemp = 0;
+            this.$emit('select', rangeDate(this.rangeBegin), undefined);
+          } else {
+            this.rangeEnd = [selectYear, selectMonth, selectDay];
+            this.thisTimeSelect = [selectYear, selectMonth, selectDay];
+            if (this.rangeBegin.join('-') === this.rangeEnd.join('-')) {
+              return this.rangeEndTemp = 0;
+            }
+            this.rangeEndTemp = 1;
+            if (+new Date(this.rangeEnd[0], this.rangeEnd[1], this.rangeEnd[2]) < +new Date(this.rangeBegin[0], this.rangeBegin[1], this.rangeBegin[2])) {
+              this.rangeBegin = this.rangeEnd;
+              this.rangeEnd = this.rangeBeginTemp;
+            }
+            const begin = rangeDate(this.rangeBegin);
+            const end = rangeDate(this.rangeEnd);
+            this.value.splice(0, 1, begin);
+            this.value.splice(1, 1, end);
+            this.$emit('select', begin, end);
+          }
+          this.rangeBgHide = !this.rangeEndTemp || (this.rangeBegin.join('-') === this.rangeEnd.join('-'));
+          this.positionWeek = true;
+          if (this.isMonthRange) {
+            this.rendeRange();
+          } else {
+            this.render(this.year, this.month, undefined, this.thisTimeSelect);
+          }
+        } else if (this.multi) {
+          this.isUserSelect = true;
+          const filterDayIndex = this.value.findIndex(v => v.join('-') === date);
+          if (~filterDayIndex) {
+            this.handleMultiDay = this.value.splice(filterDayIndex, 1);
+          } else {
+            this.value.push([Number(Number(selectedDates[0])), Number(selectedDates[1]), day]);
+          }
+          this.monthRangeDays[monthIndex][k1][k2].selected = !selected;
+          this.multiDaysData = this.value.map(dateItem => {
+            const [year, month, d] = dateItem;
+            return Object.assign(
+              {day: d, selected: true},
+              this.getLunarInfo(year, month, d),
+              this.getEvents(year, month, d)
+            );
+          });
+          this.thisTimeSelect = date;
+          this.$emit('select', this.value, this.multiDaysData);
+        } else {
+          const valueClone = this.value.splice();
+          const currentSelected = valueClone.join('-');
+          this.monthRangeDays.some(value => value.some(v => !!v.find(vv => {
+            if (vv.date === currentSelected) {
+              vv.selected = false;
+              return true;
+            }
+          })));
+          this.monthRangeDays[monthIndex][k1][k2].selected = true;
+          this.day = day;
+          const selectDate = [selectYear, selectMonthHuman, selectDay];
+          this.value[0] = selectYear;
+          this.value[1] = selectMonthHuman;
+          this.value[2] = selectDay;
+          this.today = [k1, k2];
+          this.$emit('select', selectDate, data);
+        }
+      },
+      changeYear() {
+        if (this.yearsShow) {
+          this.yearsShow = false;
+          return false;
+        }
+        this.yearsShow = true;
+        this.years = [];
+        for (let i = this.year - 5; i < this.year + 7; i++) {
+          this.years.push(i);
+        }
+      },
+      changeMonth(value) {
+        this.oversliding && (this.oversliding = false);
+        this.yearsShow = false;
+        this.month = value;
+        this.render(this.year, this.month, 'CUSTOMRENDER', 0);
+        this.updateHeadMonth();
+        this.weekSwitch && this.setMonthRangeofWeekSwitch();
+        this.$emit('selectMonth', this.month + 1, this.year);
+      },
+      selectYear(value) {
+        this.yearsShow = false;
+        this.year = value;
+        this.render(this.year, this.month);
+        this.$emit('selectYear', value);
+      },
+      setToday() {
+        const now = new Date();
+        this.year = now.getFullYear();
+        this.month = now.getMonth();
+        this.day = now.getDate();
+        this.positionWeek = true;
+        this.render(this.year, this.month, undefined, 'SETTODAY');
+        this.updateHeadMonth();
+      },
+      setMonthRangeofWeekSwitch() {
+        this.monthsLoop = this.monthsLoopCopy.concat();
+        this.days[0].reduce((prev, current) => {
+          if (!prev) return;
+          const prveDate = ((prev || {}).date || '').split('-');
+          const prevYear = prveDate[0];
+          const prevMonth = prveDate[1];
+          const currentMonth = ((current || {}).date || '').split('-')[1];
+          if (prevMonth === currentMonth) {
+            return current;
+          }
+          const prevMonthText = this.months[prevMonth - 1];
+          const currentMonthText = this.months[currentMonth - 1];
+          this.monthsLoop[this.monthIndex] = `${prevMonthText}~${currentMonthText}`;
+        });
+      },
+      dateInfo(y, m, d) {
+        return calendar.solar2lunar(y, m, d);
+      },
+      zeroPad(n) {
+        return String(n < 10 ? `0${n}` : n);
+      },
+      updateHeadMonth(type) {
+        if (!type) this.monthIndex = this.month + 1;
+        this.monthPosition = this.monthIndex * this.positionH;
+        this.monthText = this.months[this.month];
+      },
+      addResponsiveListener() {
+        window.addEventListener('resize', this.resize);
+      },
+      resize() {
+        const calendarRef = this.$refs.calendar;
+        this.itemWidth = (calendarRef.clientWidth/7 - 4).toFixed(5);
+      }
+    }
+  };
+</script>
\ No newline at end of file

src/components/app-calendar/browser-style.css

+.mpvue-calendar {
+    margin:auto;
+    width: 100%;
+    min-width:350px;
+    background: #fff;
+    user-select:none;
+    position: relative;
+}
+.calendar-tools{
+    height:40px;
+    font-size: 20px;
+    line-height: 40px;
+    color:#5e7a88;
+    box-shadow: 0px 4px 8px rgba(25, 47, 89, 0.1);
+    margin-bottom: 20px;
+    border-top: 1px solid rgba(200, 200, 200, .1);
+}
+.calendar-tools span{
+    cursor: pointer;
+}
+.calendar-prev{
+    width: 14.28571429%;
+    float:left;
+    text-align: center;
+}
+.calendar-prev img, .calendar-next img{
+    width: 34px;
+    height: 34px;
+}
+.calendar-info{
+    font-size:16px;
+    line-height: 1.3;
+    text-align: center;
+    width: 220px;
+    margin: 0 auto;
+}
+.calendar-info>div.mc-month{
+    margin:auto;
+    height:24px;
+    width:100px;
+    text-align: center;
+    color:#5e7a88;
+    overflow: hidden;
+    position: relative;
+}
+.calendar-info>div.mc-month .mc-month-inner{
+    position: absolute;
+    left:0;
+    top:0;
+    height:480px;
+}
+.month-transition{
+    transition:top .5s cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+.calendar-info .mc-month-text{
+    display:block;
+    font-size:28px;
+    height:40px;
+    width:200px;
+    overflow:hidden;
+    text-align:center;
+}
+.calendar-info>div.mc-month .mc-month-inner>span{
+    display: block;
+    font-size: 14px;
+    height:24px;
+    line-height:24px;
+    width:100px;
+    overflow: hidden;
+    text-align: center;
+}
+.calendar-info>div.mc-year{
+    font-size:10px;
+    line-height: 1;
+    color:#999;
+}
+.calendar-next{
+    width: 14.28571429%;
+    float:right;
+    text-align: center;
+}
+.mpvue-calendar table {
+    clear: both;
+    width: 100%;
+    margin-bottom:10px;
+    border-collapse: collapse;
+    color: #444444;
+}
+.mpvue-calendar td {
+    margin:2px !important;
+    padding: 4px;
+    width: 14.28571429%;
+    box-sizing: border-box;
+    text-align: center;
+    vertical-align: middle;
+    font-size:14px;
+    cursor: pointer;
+    position: relative;
+    vertical-align: top;
+}
+.mpvue-calendar td.mc-week{
+    font-size:10px;
+    pointer-events:none !important;
+    cursor: default !important;
+}
+.mpvue-calendar td.disabled {
+    color: #ccc;
+}
+.mpvue-calendar td.disabled div{
+    color: #ccc;
+}
+.mpvue-calendar td span{
+    display:block;
+    height:100%;
+    width:100%;
+    margin:0px auto;
+    border-radius:50%;
+    position: relative;
+    z-index: 3;
+}
+.mpvue-calendar td:not(.disabled) span.mc-date-red{
+    color:#ea6151;
+}
+.mc-today{
+    color: #3b75fb;
+}
+.mpvue-calendar td.selected span{
+    background-color: #3b75fb;
+    color: #fff;
+    border-radius: 50%;
+}
+.mpvue-calendar td .mc-text{
+    box-sizing: border-box;
+    height: 0.7em;
+    overflow: hidden;
+    text-overflow:ellipsis;
+    white-space: nowrap;
+    position: absolute;
+    bottom: 0px;
+    left: 0;
+    right: 0;
+    text-align: center;
+    font-size: 0.7em;
+    line-height: 0.7em;
+    z-index: 4;
+}
+.mpvue-calendar td .isGregorianFestival,
+.mpvue-calendar td .isTerm,
+.mpvue-calendar td .isLunarFestival{
+    color:#ea6151;
+}
+.mpvue-calendar td.selected span.mc-date-red{
+    background-color: #3b75fb;
+    color: #fff;
+}
+.selected .mc-text {
+    color: #fff !important;
+}
+.mpvue-calendar .lunarStyle .mc-text{
+    overflow: visible;
+    bottom: 20%;
+}
+.mpvue-calendar thead td {
+    text-transform: uppercase;
+    height:30px;
+    vertical-align: middle;
+}
+.mc-head {
+    margin-bottom: 10px;
+}
+.mc-head div {
+    overflow: hidden;
+}
+.mc-head-box div {
+    flex:1;
+    text-align: center;
+    font-size: 18px;
+}
+.mc-head-box {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-content: space-between
+}
+.mc-body {
+    padding-bottom: 20px;
+}
+.mc-body tr {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-content: space-between;
+}
+.mc-dot {
+    width: 8px;
+    height: 8px;
+    background-color: #ea6151;
+    border-radius: 50%;
+    position: absolute;
+    bottom: -4px;
+    left: 50%;
+    margin-left: -4px;
+    z-index: 5;
+}
+.remark-text {
+    box-sizing: border-box;
+    height: 0.7em;
+    overflow: hidden;
+    text-overflow:ellipsis;
+    white-space: nowrap;
+    position: absolute;
+    bottom: 0px;
+    left: 0;
+    right: 0;
+    text-align: center;
+    font-size: 0.7em;
+    line-height: 0.7em;
+    z-index: 5;
+}
+.slot-element{
+    line-height: normal;
+    position: absolute;
+    z-index: 5;
+}
+.mpvue-calendar-change{
+    position: absolute;
+    left:0px;
+    top:42px;
+    right:0px;
+    bottom:0px;
+    background:#fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap:wrap;
+    overflow: auto;
+    transition:all .5s cubic-bezier(0.075, 0.82, 0.165, 1);
+    opacity: 0;
+    pointer-events: none;
+    transform: translateY(-10px);
+    z-index: 9;
+}
+.mpvue-calendar-change.show{
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateY(0px);
+}
+.mpvue-calendar-change span{
+    margin:4px 2%;
+    display: inline-block;
+    line-height: 30px;
+    border-radius: 20px;
+    text-align:center;
+    color:#999;
+    width: 20%;
+    float: left;
+    text-align: center;
+    border-radius: 40px;
+    box-sizing: border-box;
+    margin-bottom: 4%;
+    cursor: pointer;
+}
+.mpvue-calendar-change span.active{
+    background-color: #587dff;
+    box-shadow: 2px 2px 2px rgba(88, 125, 255, 0.7);
+    color:#fff;
+}
+.mpvue-calendar-change .calendar-week-switch-months{
+    height: 100%;
+}
+.mpvue-calendar-change .calendar-week-switch-months span {
+    margin-bottom: 10px;
+    margin-top: 0px;
+}
+.calendar-years, .calendar-months{
+    height: 50%;
+    width: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+    position: relative;
+}
+.calendar-years:after {
+    content: '';
+    display: block;
+    width: 86%;
+    height: 1px;
+    background-color: #eee;
+    position: absolute;
+    bottom: 2%;
+    left: 7%;
+}
+/*range background*/
+.mc-range-mode .selected .mc-range-bg{
+    content: '';
+    display: block;
+    width: 150%;
+    height: 100%;
+    background-color: #01a1ed;
+    position: relative;
+    top: -100%;
+    left: 50%;
+}
+.mpvue-calendar .mc-range-mode .selected .calendar-date{
+    background-color: transparent;
+}
+.mpvue-calendar .mc-range-mode .mc-range-row-last .calendar-date, .mpvue-calendar .mc-range-mode .mc-range-row-first .calendar-date{
+    border-radius: 4px;
+    background-color: #01a1ed;
+}
+.mpvue-calendar .mc-range-mode .mc-range-month-first.selected .calendar-date, .mpvue-calendar .mc-range-mode .mc-range-month-last.selected .calendar-date{
+    background-color: #01a1ed;
+    border-radius: 4px;
+}
+.mc-range-mode .mc-range-month-last .mc-range-bg{
+    background-color: transparent;
+    border-radius: 4px;
+}
+.mc-range-mode .mc-range-end .mc-range-bg, .mc-range-mode .mc-range-row-last .mc-range-bg{
+    display: none;
+}
+.mc-range-row-first.mc-range-end .mc-range-bg{
+    display: block;
+    margin-left: -50%;
+    width: 50%;
+    border-radius: 4px;
+}
+.mpvue-calendar .mc-range-row-first.mc-range-end.month-first-date .mc-range-bg{
+    margin-left: 0px;
+}
+.mc-range-row-last.mc-range-begin .mc-range-bg{
+    display: block;
+    width: 50%;
+    border-radius: 4px;
+}
+.mpvue-calendar .mc-range-mode .selected.mc-range-second-to-last span{
+    background-color: #01a1ed;
+    border-radius: 4px;
+}
+.mc-range-begin.mc-range-second-to-last{
+    background-color: #01a1ed;
+    border-radius: 4px;
+}
+.mpvue-calendar .mc-range-mode .mc-range-end span.calendar-date, .mpvue-calendar .mc-range-mode .mc-range-begin span.calendar-date{
+    background-color: #3b75fb;
+    color: #fff;
+    border-radius: 50%;
+}
+.mpvue-calendar .mc-range-mode .month-last-date.mc-range-begin .mc-range-bg{
+    display: block;
+    width: 50%;
+    border-radius: 4px;
+}
+.mpvue-calendar .mc-range-mode .month-first-date.mc-range-end .mc-range-bg{
+    display: block;
+    width: 50%;
+    border-radius: 4px;
+    left: 0px;
+}
+.calendar-wrapper .mpvue-calendar .mc-range-mode .mc-range-select-one div.mc-range-bg{
+    display: none;
+}
+.mc-range-mode .mc-range-second-to-last .mc-range-bg{
+    border-radius: 0px 25% 25% 0px;
+}
+.mc-today-element .calendar-date{
+    background-color: rgba(25, 47, 89, 0.1);
+    border-radius: 4px;
+}
+/*week switch*/
+.mpvue-calendar .mc-range-mode.week-switch .month-last-date.mc-range-begin .mc-range-bg{
+    width: 150%;
+    border-radius: 0px 20% 20% 0px;
+}
+.mpvue-calendar .mc-range-mode.week-switch .mc-range-month-last .mc-range-bg{
+    background-color: #01a1ed;
+    border-radius: 0px 20% 20% 0px;
+}
+/*month range*/
+.mpvue-calendar .month-range-mode{
+  border-bottom: 1px solid #f2f2f2;
+  position: relative;
+}
+.mpvue-calendar .mc-month-range-mode-head{
+  box-shadow: 0 4px 8px rgba(25,47,89,.1);
+  padding: 8px 0px;
+  position: sticky;
+  top: 0px;
+  background-color: #fff;
+  z-index: 9;
+}
+.month-range-mode .month-rang-head {
+  text-align: left;
+  margin: 10px 0px;
+  padding-left: 10px;
+}
+.month-range-mode .mc-last-month, .month-range-mode .mc-next-month{
+  opacity: 0 !important;
+}
+.month-text-background{
+  position: absolute;
+  font-size: 140px;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  line-height: 2.4;
+}
\ No newline at end of file

src/components/app-calendar/calendarinit.js

+/* eslint-disable */
+/**
+ * @1900-2100区间内的公历、农历互转
+ * @charset UTF-8
+ * @Author  Jea杨(JJonline@JJonline.Cn)
+ * @Time    2014-7-21
+ * @Time    2016-8-13 Fixed 2033hex、Attribution Annals
+ * @Time    2016-9-25 Fixed lunar LeapMonth Param Bug
+ * @Version 1.0.2
+ * @公历转农历：calendar.solar2lunar(1987,11,01); //[you can ignore params of prefix 0]
+ * @农历转公历：calendar.lunar2solar(1987,09,10); //[you can ignore params of prefix 0]
+ */
+var calendar = {
+
+    /**
+     * 农历1900-2100的润大小信息表
+     * @Array Of Property
+     * @return Hex
+     */
+    lunarInfo:[0x04bd8,0x04ae0,0x0a570,0x054d5,0x0d260,0x0d950,0x16554,0x056a0,0x09ad0,0x055d2,//1900-1909
+      0x04ae0,0x0a5b6,0x0a4d0,0x0d250,0x1d255,0x0b540,0x0d6a0,0x0ada2,0x095b0,0x14977,//1910-1919
+      0x04970,0x0a4b0,0x0b4b5,0x06a50,0x06d40,0x1ab54,0x02b60,0x09570,0x052f2,0x04970,//1920-1929
+      0x06566,0x0d4a0,0x0ea50,0x06e95,0x05ad0,0x02b60,0x186e3,0x092e0,0x1c8d7,0x0c950,//1930-1939
+      0x0d4a0,0x1d8a6,0x0b550,0x056a0,0x1a5b4,0x025d0,0x092d0,0x0d2b2,0x0a950,0x0b557,//1940-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
+      /**Add By JJonline@JJonline.Cn**/
+      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
+  
+    /**
+     * 公历每个月份的天数普通表
+     * @Array Of Property
+     * @return Number
+     */
+    solarMonth:[31,28,31,30,31,30,31,31,30,31,30,31],
+  
+    /**
+     * 天干地支之天干速查表
+     * @Array Of Property trans["甲","乙","丙","丁","戊","己","庚","辛","壬","癸"]
+     * @return Cn string
+     */
+    Gan:["\u7532","\u4e59","\u4e19","\u4e01","\u620a","\u5df1","\u5e9a","\u8f9b","\u58ec","\u7678"],
+  
+    /**
+     * 天干地支之地支速查表
+     * @Array Of Property
+     * @trans["子","丑","寅","卯","辰","巳","午","未","申","酉","戌","亥"]
+     * @return Cn string
+     */
+    Zhi:["\u5b50","\u4e11","\u5bc5","\u536f","\u8fb0","\u5df3","\u5348","\u672a","\u7533","\u9149","\u620c","\u4ea5"],
+  
+    /**
+     * 天干地支之地支速查表<=>生肖
+     * @Array Of Property
+     * @trans["鼠","牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗","猪"]
+     * @return Cn string
+     */
+    Animals:["\u9f20","\u725b","\u864e","\u5154","\u9f99","\u86c7","\u9a6c","\u7f8a","\u7334","\u9e21","\u72d7","\u732a"],
+  
+    /**
+     * 24节气速查表
+     * @Array Of Property
+     * @trans["小寒","大寒","立春","雨水","惊蛰","春分","清明","谷雨","立夏","小满","芒种","夏至","小暑","大暑","立秋","处暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至"]
+     * @return Cn string
+     */
+    solarTerm:["\u5c0f\u5bd2","\u5927\u5bd2","\u7acb\u6625","\u96e8\u6c34","\u60ca\u86f0","\u6625\u5206","\u6e05\u660e","\u8c37\u96e8","\u7acb\u590f","\u5c0f\u6ee1","\u8292\u79cd","\u590f\u81f3","\u5c0f\u6691","\u5927\u6691","\u7acb\u79cb","\u5904\u6691","\u767d\u9732","\u79cb\u5206","\u5bd2\u9732","\u971c\u964d","\u7acb\u51ac","\u5c0f\u96ea","\u5927\u96ea","\u51ac\u81f3"],
+  
+    /**
+     * 1900-2100各年的24节气日期速查表
+     * @Array Of Property
+     * @return 0x string For splice
+     */
+    sTermInfo:['9778397bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e','97bcf97c3598082c95f8c965cc920f',
+      '97bd0b06bdb0722c965ce1cfcc920f','b027097bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e',
+      '97bcf97c359801ec95f8c965cc920f','97bd0b06bdb0722c965ce1cfcc920f','b027097bd097c36b0b6fc9274c91aa',
+      '97b6b97bd19801ec9210c965cc920e','97bcf97c359801ec95f8c965cc920f','97bd0b06bdb0722c965ce1cfcc920f',
+      'b027097bd097c36b0b6fc9274c91aa','9778397bd19801ec9210c965cc920e','97b6b97bd19801ec95f8c965cc920f',
+      '97bd09801d98082c95f8e1cfcc920f','97bd097bd097c36b0b6fc9210c8dc2','9778397bd197c36c9210c9274c91aa',
+      '97b6b97bd19801ec95f8c965cc920e','97bd09801d98082c95f8e1cfcc920f','97bd097bd097c36b0b6fc9210c8dc2',
+      '9778397bd097c36c9210c9274c91aa','97b6b97bd19801ec95f8c965cc920e','97bcf97c3598082c95f8e1cfcc920f',
+      '97bd097bd097c36b0b6fc9210c8dc2','9778397bd097c36c9210c9274c91aa','97b6b97bd19801ec9210c965cc920e',
+      '97bcf97c3598082c95f8c965cc920f','97bd097bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa',
+      '97b6b97bd19801ec9210c965cc920e','97bcf97c3598082c95f8c965cc920f','97bd097bd097c35b0b6fc920fb0722',
+      '9778397bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e','97bcf97c359801ec95f8c965cc920f',
+      '97bd097bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e',
+      '97bcf97c359801ec95f8c965cc920f','97bd097bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa',
+      '97b6b97bd19801ec9210c965cc920e','97bcf97c359801ec95f8c965cc920f','97bd097bd07f595b0b6fc920fb0722',
+      '9778397bd097c36b0b6fc9210c8dc2','9778397bd19801ec9210c9274c920e','97b6b97bd19801ec95f8c965cc920f',
+      '97bd07f5307f595b0b0bc920fb0722','7f0e397bd097c36b0b6fc9210c8dc2','9778397bd097c36c9210c9274c920e',
+      '97b6b97bd19801ec95f8c965cc920f','97bd07f5307f595b0b0bc920fb0722','7f0e397bd097c36b0b6fc9210c8dc2',
+      '9778397bd097c36c9210c9274c91aa','97b6b97bd19801ec9210c965cc920e','97bd07f1487f595b0b0bc920fb0722',
+      '7f0e397bd097c36b0b6fc9210c8dc2','9778397bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e',
+      '97bcf7f1487f595b0b0bb0b6fb0722','7f0e397bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa',
+      '97b6b97bd19801ec9210c965cc920e','97bcf7f1487f595b0b0bb0b6fb0722','7f0e397bd097c35b0b6fc920fb0722',
+      '9778397bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e','97bcf7f1487f531b0b0bb0b6fb0722',
+      '7f0e397bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e',
+      '97bcf7f1487f531b0b0bb0b6fb0722','7f0e397bd07f595b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa',
+      '97b6b97bd19801ec9210c9274c920e','97bcf7f0e47f531b0b0bb0b6fb0722','7f0e397bd07f595b0b0bc920fb0722',
+      '9778397bd097c36b0b6fc9210c91aa','97b6b97bd197c36c9210c9274c920e','97bcf7f0e47f531b0b0bb0b6fb0722',
+      '7f0e397bd07f595b0b0bc920fb0722','9778397bd097c36b0b6fc9210c8dc2','9778397bd097c36c9210c9274c920e',
+      '97b6b7f0e47f531b0723b0b6fb0722','7f0e37f5307f595b0b0bc920fb0722','7f0e397bd097c36b0b6fc9210c8dc2',
+      '9778397bd097c36b0b70c9274c91aa','97b6b7f0e47f531b0723b0b6fb0721','7f0e37f1487f595b0b0bb0b6fb0722',
+      '7f0e397bd097c35b0b6fc9210c8dc2','9778397bd097c36b0b6fc9274c91aa','97b6b7f0e47f531b0723b0b6fb0721',
+      '7f0e27f1487f595b0b0bb0b6fb0722','7f0e397bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa',
+      '97b6b7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722','7f0e397bd097c35b0b6fc920fb0722',
+      '9778397bd097c36b0b6fc9274c91aa','97b6b7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722',
+      '7f0e397bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa','97b6b7f0e47f531b0723b0b6fb0721',
+      '7f0e27f1487f531b0b0bb0b6fb0722','7f0e397bd07f595b0b0bc920fb0722','9778397bd097c36b0b6fc9274c91aa',
+      '97b6b7f0e47f531b0723b0787b0721','7f0e27f0e47f531b0b0bb0b6fb0722','7f0e397bd07f595b0b0bc920fb0722',
+      '9778397bd097c36b0b6fc9210c91aa','97b6b7f0e47f149b0723b0787b0721','7f0e27f0e47f531b0723b0b6fb0722',
+      '7f0e397bd07f595b0b0bc920fb0722','9778397bd097c36b0b6fc9210c8dc2','977837f0e37f149b0723b0787b0721',
+      '7f07e7f0e47f531b0723b0b6fb0722','7f0e37f5307f595b0b0bc920fb0722','7f0e397bd097c35b0b6fc9210c8dc2',
+      '977837f0e37f14998082b0787b0721','7f07e7f0e47f531b0723b0b6fb0721','7f0e37f1487f595b0b0bb0b6fb0722',
+      '7f0e397bd097c35b0b6fc9210c8dc2','977837f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721',
+      '7f0e27f1487f531b0b0bb0b6fb0722','7f0e397bd097c35b0b6fc920fb0722','977837f0e37f14998082b0787b06bd',
+      '7f07e7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722','7f0e397bd097c35b0b6fc920fb0722',
+      '977837f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722',
+      '7f0e397bd07f595b0b0bc920fb0722','977837f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721',
+      '7f0e27f1487f531b0b0bb0b6fb0722','7f0e397bd07f595b0b0bc920fb0722','977837f0e37f14998082b0787b06bd',
+      '7f07e7f0e47f149b0723b0787b0721','7f0e27f0e47f531b0b0bb0b6fb0722','7f0e397bd07f595b0b0bc920fb0722',
+      '977837f0e37f14998082b0723b06bd','7f07e7f0e37f149b0723b0787b0721','7f0e27f0e47f531b0723b0b6fb0722',
+      '7f0e397bd07f595b0b0bc920fb0722','977837f0e37f14898082b0723b02d5','7ec967f0e37f14998082b0787b0721',
+      '7f07e7f0e47f531b0723b0b6fb0722','7f0e37f1487f595b0b0bb0b6fb0722','7f0e37f0e37f14898082b0723b02d5',
+      '7ec967f0e37f14998082b0787b0721','7f07e7f0e47f531b0723b0b6fb0722','7f0e37f1487f531b0b0bb0b6fb0722',
+      '7f0e37f0e37f14898082b0723b02d5','7ec967f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721',
+      '7f0e37f1487f531b0b0bb0b6fb0722','7f0e37f0e37f14898082b072297c35','7ec967f0e37f14998082b0787b06bd',
+      '7f07e7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722','7f0e37f0e37f14898082b072297c35',
+      '7ec967f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722',
+      '7f0e37f0e366aa89801eb072297c35','7ec967f0e37f14998082b0787b06bd','7f07e7f0e47f149b0723b0787b0721',
+      '7f0e27f1487f531b0b0bb0b6fb0722','7f0e37f0e366aa89801eb072297c35','7ec967f0e37f14998082b0723b06bd',
+      '7f07e7f0e47f149b0723b0787b0721','7f0e27f0e47f531b0723b0b6fb0722','7f0e37f0e366aa89801eb072297c35',
+      '7ec967f0e37f14998082b0723b06bd','7f07e7f0e37f14998083b0787b0721','7f0e27f0e47f531b0723b0b6fb0722',
+      '7f0e37f0e366aa89801eb072297c35','7ec967f0e37f14898082b0723b02d5','7f07e7f0e37f14998082b0787b0721',
+      '7f07e7f0e47f531b0723b0b6fb0722','7f0e36665b66aa89801e9808297c35','665f67f0e37f14898082b0723b02d5',
+      '7ec967f0e37f14998082b0787b0721','7f07e7f0e47f531b0723b0b6fb0722','7f0e36665b66a449801e9808297c35',
+      '665f67f0e37f14898082b0723b02d5','7ec967f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721',
+      '7f0e36665b66a449801e9808297c35','665f67f0e37f14898082b072297c35','7ec967f0e37f14998082b0787b06bd',
+      '7f07e7f0e47f531b0723b0b6fb0721','7f0e26665b66a449801e9808297c35','665f67f0e37f1489801eb072297c35',
+      '7ec967f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722'],
+  
+    /**
+     * 数字转中文速查表
+     * @Array Of Property
+     * @trans ['日','一','二','三','四','五','六','七','八','九','十']
+     * @return Cn string
+     */
+    nStr1:["\u65e5","\u4e00","\u4e8c","\u4e09","\u56db","\u4e94","\u516d","\u4e03","\u516b","\u4e5d","\u5341"],
+  
+    /**
+     * 日期转农历称呼速查表
+     * @Array Of Property
+     * @trans ['初','十','廿','卅']
+     * @return Cn string
+     */
+    nStr2:["\u521d","\u5341","\u5eff","\u5345"],
+  
+    /**
+     * 月份转农历称呼速查表
+     * @Array Of Property
+     * @trans ['正','一','二','三','四','五','六','七','八','九','十','冬','腊']
+     * @return Cn string
+     */
+    nStr3:["\u6b63","\u4e8c","\u4e09","\u56db","\u4e94","\u516d","\u4e03","\u516b","\u4e5d","\u5341","\u51ac","\u814a"],
+  
+    /**
+     * 返回农历y年一整年的总天数
+     * @param lunar Year
+     * @return Number
+     * @eg:var count = calendar.lYearDays(1987) ;//count=387
+     */
+    lYearDays:function(y) {
+      var i, sum = 348;
+      for(i=0x8000; i>0x8; i>>=1) { sum += (calendar.lunarInfo[y-1900] & i)? 1: 0; }
+      return(sum+calendar.leapDays(y));
+    },
+  
+    /**
+     * 返回农历y年闰月是哪个月；若y年没有闰月 则返回0
+     * @param lunar Year
+     * @return Number (0-12)
+     * @eg:var leapMonth = calendar.leapMonth(1987) ;//leapMonth=6
+     */
+    leapMonth:function(y) { //闰字编码 \u95f0
+      return(calendar.lunarInfo[y-1900] & 0xf);
+    },
+  
+    /**
+     * 返回农历y年闰月的天数 若该年没有闰月则返回0
+     * @param lunar Year
+     * @return Number (0、29、30)
+     * @eg:var leapMonthDay = calendar.leapDays(1987) ;//leapMonthDay=29
+     */
+    leapDays:function(y) {
+      if(calendar.leapMonth(y))  {
+        return((calendar.lunarInfo[y-1900] & 0x10000)? 30: 29);
+      }
+      return(0);
+    },
+  
+    /**
+     * 返回农历y年m月（非闰月）的总天数，计算m为闰月时的天数请使用leapDays方法
+     * @param lunar Year
+     * @return Number (-1、29、30)
+     * @eg:var MonthDay = calendar.monthDays(1987,9) ;//MonthDay=29
+     */
+    monthDays:function(y,m) {
+      if(m>12 || m<1) {return -1}//月份参数从1至12，参数错误返回-1
+      return( (calendar.lunarInfo[y-1900] & (0x10000>>m))? 30: 29 );
+    },
+  
+    /**
+     * 返回公历(!)y年m月的天数
+     * @param solar Year
+     * @return Number (-1、28、29、30、31)
+     * @eg:var solarMonthDay = calendar.leapDays(1987) ;//solarMonthDay=30
+     */
+    solarDays:function(y,m) {
+      if(m>12 || m<1) {return -1} //若参数错误 返回-1
+      var ms = m-1;
+      if(ms==1) { //2月份的闰平规律测算后确认返回28或29
+        return(((y%4 == 0) && (y%100 != 0) || (y%400 == 0))? 29: 28);
+      }else {
+        return(calendar.solarMonth[ms]);
+      }
+    },
+  
+    /**
+     * 农历年份转换为干支纪年
+     * @param  lYear 农历年的年份数
+     * @return Cn string
+     */
+    toGanZhiYear:function(lYear) {
+      var ganKey = (lYear - 3) % 10;
+      var zhiKey = (lYear - 3) % 12;
+      if(ganKey == 0) ganKey = 10;//如果余数为0则为最后一个天干
+      if(zhiKey == 0) zhiKey = 12;//如果余数为0则为最后一个地支
+      return calendar.Gan[ganKey-1] + calendar.Zhi[zhiKey-1];
+  
+    },
+  
+    /**
+     * 公历月、日判断所属星座
+     * @param  cMonth [description]
+     * @param  cDay [description]
+     * @return Cn string
+     */
+    toAstro:function(cMonth,cDay) {
+      var s   = "\u9b54\u7faf\u6c34\u74f6\u53cc\u9c7c\u767d\u7f8a\u91d1\u725b\u53cc\u5b50\u5de8\u87f9\u72ee\u5b50\u5904\u5973\u5929\u79e4\u5929\u874e\u5c04\u624b\u9b54\u7faf";
+      var arr = [20,19,21,21,21,22,23,23,23,23,22,22];
+      return s.substr(cMonth*2 - (cDay < arr[cMonth-1] ? 2 : 0),2) + "\u5ea7";//座
+    },
+  
+    /**
+     * 传入offset偏移量返回干支
+     * @param offset 相对甲子的偏移量
+     * @return Cn string
+     */
+    toGanZhi:function(offset) {
+      return calendar.Gan[offset%10] + calendar.Zhi[offset%12];
+    },
+  
+    /**
+     * 传入公历(!)y年获得该年第n个节气的公历日期
+     * @param y公历年(1900-2100)；n二十四节气中的第几个节气(1~24)；从n=1(小寒)算起
+     * @return day Number
+     * @eg:var _24 = calendar.getTerm(1987,3) ;//_24=4;意即1987年2月4日立春
+     */
+    getTerm:function(y,n) {
+      if(y<1900 || y>2100) {return -1;}
+      if(n<1 || n>24) {return -1;}
+      var _table = calendar.sTermInfo[y-1900];
+      var _info = [
+        parseInt('0x'+_table.substr(0,5)).toString() ,
+        parseInt('0x'+_table.substr(5,5)).toString(),
+        parseInt('0x'+_table.substr(10,5)).toString(),
+        parseInt('0x'+_table.substr(15,5)).toString(),
+        parseInt('0x'+_table.substr(20,5)).toString(),
+        parseInt('0x'+_table.substr(25,5)).toString()
+      ];
+      var _calday = [
+        _info[0].substr(0,1),
+        _info[0].substr(1,2),
+        _info[0].substr(3,1),
+        _info[0].substr(4,2),
+  
+        _info[1].substr(0,1),
+        _info[1].substr(1,2),
+        _info[1].substr(3,1),
+        _info[1].substr(4,2),
+  
+        _info[2].substr(0,1),
+        _info[2].substr(1,2),
+        _info[2].substr(3,1),
+        _info[2].substr(4,2),
+  
+        _info[3].substr(0,1),
+        _info[3].substr(1,2),
+        _info[3].substr(3,1),
+        _info[3].substr(4,2),
+  
+        _info[4].substr(0,1),
+        _info[4].substr(1,2),
+        _info[4].substr(3,1),
+        _info[4].substr(4,2),
+  
+        _info[5].substr(0,1),
+        _info[5].substr(1,2),
+        _info[5].substr(3,1),
+        _info[5].substr(4,2),
+      ];
+      return parseInt(_calday[n-1]);
+    },
+  
+    /**
+     * 传入农历数字月份返回汉语通俗表示法
+     * @param lunar month
+     * @return Cn string
+     * @eg:var cnMonth = calendar.toChinaMonth(12) ;//cnMonth='腊月'
+     */
+    toChinaMonth:function(m) { // 月 => \u6708
+      if(m>12 || m<1) {return -1} //若参数错误 返回-1
+      var s = calendar.nStr3[m-1];
+      s+= "\u6708";//加上月字
+      return s;
+    },
+  
+    /**
+     * 传入农历日期数字返回汉字表示法
+     * @param lunar day
+     * @return Cn string
+     * @eg:var cnDay = calendar.toChinaDay(21) ;//cnMonth='廿一'
+     */
+    toChinaDay:function(d){ //日 => \u65e5
+      var s;
+      switch (d) {
+        case 10:
+          s = '\u521d\u5341'; break;
+        case 20:
+          s = '\u4e8c\u5341'; break;
+          break;
+        case 30:
+          s = '\u4e09\u5341'; break;
+          break;
+        default :
+          s = calendar.nStr2[Math.floor(d/10)];
+          s += calendar.nStr1[d%10];
+      }
+      return(s);
+    },
+  
+    /**
+     * 年份转生肖[!仅能大致转换] => 精确划分生肖分界线是“立春”
+     * @param y year
+     * @return Cn string
+     * @eg:var animal = calendar.getAnimal(1987) ;//animal='兔'
+     */
+    getAnimal: function(y) {
+      return calendar.Animals[(y - 4) % 12]
+    },
+  
+    /**
+     * 传入阳历年月日获得详细的公历、农历object信息 <=>JSON
+     * @param y  solar year
+     * @param m  solar month
+     * @param d  solar day
+     * @return JSON object
+     * @eg:console.log(calendar.solar2lunar(1987,11,01));
+     */
+    solar2lunar:function (y,m,d) { //参数区间1900.1.31~2100.12.31
+      if(y<1900 || y>2100) {return -1;}//年份限定、上限
+      if(y==1900&&m==1&&d<31) {return -1;}//下限
+      if(!y) { //未传参  获得当天
+        var objDate = new Date();
+      }else {
+        var objDate = new Date(y,parseInt(m)-1,d)
+      }
+      var i, leap=0, temp=0;
+      //修正ymd参数
+      var y = objDate.getFullYear(),m = objDate.getMonth()+1,d = objDate.getDate();
+      var offset   = (Date.UTC(objDate.getFullYear(),objDate.getMonth(),objDate.getDate()) - Date.UTC(1900,0,31))/86400000;
+      for(i=1900; i<2101 && offset>0; i++) { temp=calendar.lYearDays(i); offset-=temp; }
+      if(offset<0) { offset+=temp; i--; }
+  
+      //是否今天
+      var isTodayObj = new Date(),isToday=false;
+      if(isTodayObj.getFullYear()==y && isTodayObj.getMonth()+1==m && isTodayObj.getDate()==d) {
+        isToday = true;
+      }
+      //星期几
+      var nWeek = objDate.getDay(),cWeek = calendar.nStr1[nWeek];
+      if(nWeek==0) {nWeek =7;}//数字表示周几顺应天朝周一开始的惯例
+      //农历年
+      var year = i;
+  
+      var leap = calendar.leapMonth(i); //闰哪个月
+      var isLeap = false;
+  
+      //效验闰月
+      for(i=1; i<13 && offset>0; i++) {
+        //闰月
+        if(leap>0 && i==(leap+1) && isLeap==false){
+          --i;
+          isLeap = true; temp = calendar.leapDays(year); //计算农历闰月天数
+        }
+        else{
+          temp = calendar.monthDays(year, i);//计算农历普通月天数
+        }
+        //解除闰月
+        if(isLeap==true && i==(leap+1)) { isLeap = false; }
+        offset -= temp;
+      }
+  
+      if(offset==0 && leap>0 && i==leap+1)
+        if(isLeap){
+          isLeap = false;
+        }else{
+          isLeap = true; --i;
+        }
+      if(offset<0){ offset += temp; --i; }
+      //农历月
+      var month   = i;
+      //农历日
+      var day     = offset + 1;
+  
+      //天干地支处理
+      var sm      =   m-1;
+      var gzY     =   calendar.toGanZhiYear(year);
+  
+      //月柱 1900年1月小寒以前为 丙子月(60进制12)
+      var firstNode   = calendar.getTerm(year,(m*2-1));//返回当月「节」为几日开始
+      var secondNode  = calendar.getTerm(year,(m*2));//返回当月「节」为几日开始
+  
+      //依据12节气修正干支月
+      var gzM     =   calendar.toGanZhi((y-1900)*12+m+11);
+      if(d>=firstNode) {
+        gzM     =   calendar.toGanZhi((y-1900)*12+m+12);
+      }
+  
+      //传入的日期的节气与否
+      var isTerm = false;
+      var Term   = null;
+      if(firstNode==d) {
+        isTerm  = true;
+        Term    = calendar.solarTerm[m*2-2];
+      }
+      if(secondNode==d) {
+        isTerm  = true;
+        Term    = calendar.solarTerm[m*2-1];
+      }
+      //日柱 当月一日与 1900/1/1 相差天数
+      var dayCyclical = Date.UTC(y,sm,1,0,0,0,0)/86400000+25567+10;
+      var gzD = calendar.toGanZhi(dayCyclical+d-1);
+      //该日期所属的星座
+      var astro = calendar.toAstro(m,d);
+  
+      return {'lYear':year,'lMonth':month,'lDay':day,'Animal':calendar.getAnimal(year),'IMonthCn':(isLeap?"\u95f0":'')+calendar.toChinaMonth(month),'IDayCn':calendar.toChinaDay(day),'cYear':y,'cMonth':m,'cDay':d,'gzYear':gzY,'gzMonth':gzM,'gzDay':gzD,'isToday':isToday,'isLeap':isLeap,'nWeek':nWeek,'ncWeek':"\u661f\u671f"+cWeek,'isTerm':isTerm,'Term':Term,'astro':astro};
+    },
+  
+    /**
+     * 传入农历年月日以及传入的月份是否闰月获得详细的公历、农历object信息 <=>JSON
+     * @param y  lunar year
+     * @param m  lunar month
+     * @param d  lunar day
+     * @param isLeapMonth  lunar month is leap or not.[如果是农历闰月第四个参数赋值true即可]
+     * @return JSON object
+     * @eg:console.log(calendar.lunar2solar(1987,9,10));
+     */
+    lunar2solar:function(y,m,d,isLeapMonth) {   //参数区间1900.1.31~2100.12.1
+      var isLeapMonth = !!isLeapMonth;
+      var leapOffset  = 0;
+      var leapMonth   = calendar.leapMonth(y);
+      var leapDay     = calendar.leapDays(y);
+      if(isLeapMonth&&(leapMonth!=m)) {return -1;}//传参要求计算该闰月公历 但该年得出的闰月与传参的月份并不同
+      if(y==2100&&m==12&&d>1 || y==1900&&m==1&&d<31) {return -1;}//超出了最大极限值
+      var day  = calendar.monthDays(y,m);
+      var _day = day;
+      //bugFix 2016-9-25
+      //if month is leap, _day use leapDays method
+      if(isLeapMonth) {
+        _day = calendar.leapDays(y,m);
+      }
+      if(y < 1900 || y > 2100 || d > _day) {return -1;}//参数合法性效验
+  
+      //计算农历的时间差
+      var offset = 0;
+      for(var i=1900;i<y;i++) {
+        offset+=calendar.lYearDays(i);
+      }
+      var leap = 0,isAdd= false;
+      for(var i=1;i<m;i++) {
+        leap = calendar.leapMonth(y);
+        if(!isAdd) {//处理闰月
+          if(leap<=i && leap>0) {
+            offset+=calendar.leapDays(y);isAdd = true;
+          }
+        }
+        offset+=calendar.monthDays(y,i);
+      }
+      //转换闰月农历 需补充该年闰月的前一个月的时差
+      if(isLeapMonth) {offset+=day;}
+      //1900年农历正月一日的公历时间为1900年1月30日0时0分0秒(该时间也是本农历的最开始起始点)
+      var stmap   =   Date.UTC(1900,1,30,0,0,0);
+      var calObj  =   new Date((offset+d-31)*86400000+stmap);
+      var cY      =   calObj.getUTCFullYear();
+      var cM      =   calObj.getUTCMonth()+1;
+      var cD      =   calObj.getUTCDate();
+  
+      return calendar.solar2lunar(cY,cM,cD);
+    }
+  };
+  
+  export var defaultLunar = {
+    '1-1': '春节',
+    '1-15': '元宵节',
+    '2-2': '龙头节',
+    '5-5': '端午节',
+    '7-7': '七夕节',
+    '7-15': '中元节',
+    '8-15': '中秋节',
+    '9-9': '重阳节',
+    '10-1': '寒衣节',
+    '10-15': '下元节',
+    '12-8': '腊八节',
+    '12-23': '小年',
+  };
+  
+  export var defaultGregorian = {
+    '1-1': '元旦',
+    '2-14': '情人节',
+    '3-8': '妇女节',
+    '3-12': '植树节',
+    '5-1': '劳动节',
+    '5-4': '青年节',
+    '6-1': '儿童节',
+    '7-1': '建党节',
+    '8-1': '建军节',
+    '9-10': '教师节',
+    '10-1': '国庆节',
+    '12-24': '平安夜',
+    '12-25': '圣诞节',
+  };
+  
+  export var isBrowser = !!window;
+  
+  var now = new Date();
+  export var todayString = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('-');
+  
+  
+  export default calendar;
\ No newline at end of file

src/components/app-calendar/icon.css

+@font-face {font-family: "iconfont";
+    src: url('data:font/truetype;charset=utf-8;base64,d09GRgABAAAAAASEAAsAAAAABuwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY7d0f0Y21hcAAAAYAAAABTAAABhmJUzs9nbHlmAAAB1AAAALcAAADIzC0F5mhlYWQAAAKMAAAALwAAADYS7IZUaGhlYQAAArwAAAAcAAAAJAfeA4RobXR4AAAC2AAAAAwAAAAMDAAAAGxvY2EAAALkAAAACAAAAAgANgBkbWF4cAAAAuwAAAAfAAAAIAEOACluYW1lAAADDAAAAUUAAAJtPlT+fXBvc3QAAARUAAAALQAAAEOUPjuMeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGByeMj5jYm7438AQw9zA0AAUZgTJAQDdSgvleJztkMERgDAIBPdIzMOxEB8W5MvuTRsRMHbhzSwHR/IBWIDiHE4FXYjQ6akyL6yZ13zT3IXd6jYGfO6S75q7xT81fm1Z9zlZXOsl+j5BD35IDU4AeJwVzUEOwUAYBeD/mfxTEso/mkEJoYluqgtajUjYsHEOSytncROJK/QErjNMd+8lL+8jEP3eqq8uNCPiokK1L4t1ihzVCSPMEekAep3mQCh4tpVm95JWz2QGj3iyiN3LZMJBODU49IMuDxk32YifuI89X4+xqwcsHUtEjfVVWt1p5MvWNs9RY4RowNLrJ7Tq8ZKNN7wmvMp8jBc7PDpW3RPfPrISV5ss4QEO9pxcdrix/gMMIyHOAHicY2BkYGAAYmNBZtV4fpuvDNwsDCBw/dlCBQT9fzMLA3MKkMvBwAQSBQDyNAlAAHicY2BkYGBu+N/AEMPCAAJAkpEBFTADAEcJAmwEAAAABAAAAAQAAAAAAAAAADYAZHicY2BkYGBgZpBlANEMDExAzAWEDAz/wXwGAAuHATgAeJxlj01OwzAQhV/6B6QSqqhgh+QFYgEo/RGrblhUavdddN+mTpsqiSPHrdQDcB6OwAk4AtyAO/BIJ5s2lsffvHljTwDc4Acejt8t95E9XDI7cg0XuBeuU38QbpBfhJto41W4Rf1N2MczpsJtdGF5g9e4YvaEd2EPHXwI13CNT+E69S/hBvlbuIk7/Aq30PHqwj7mXle4jUcv9sdWL5xeqeVBxaHJIpM5v4KZXu+Sha3S6pxrW8QmU4OgX0lTnWlb3VPs10PnIhVZk6oJqzpJjMqt2erQBRvn8lGvF4kehCblWGP+tsYCjnEFhSUOjDFCGGSIyujoO1Vm9K+xQ8Jee1Y9zed0WxTU/3OFAQL0z1xTurLSeTpPgT1fG1J1dCtuy56UNJFezUkSskJe1rZUQuoBNmVXjhF6XNGJPyhnSP8ACVpuyAAAAHicY2BigAAuBuyAmZGJkZmRhYEnKzMxryS/tDgjMS+dC8qpzC9lYAAAiPIJlAAAAA==');
+}
+
+.iconfont {
+    font-family:"iconfont" !important;
+    font-size:16px;
+    font-style:normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-arrow-right:before { content: "\e602"; }
+
+.icon-arrow-left:before { content: "\e501"; }
+.sign {
+    top: 88%;
+    overflow: hidden;
+    position: absolute;
+    right: calc( 50% - 8px);
+    height: 28px;
+}
+.sign-item{
+    line-height: 1;
+    height: 4px;
+    color: #ccc;
+  }
+.changeStyle_bottom{
+    border-color: rgb(135, 135, 135);
+    border-width: 0 0 2px 2px;
+    border-style: solid;
+    -webkit-transform: rotateZ(-45deg);
+    transform: rotateZ(-45deg);
+    width: 10px;
+    height: 10px;
+    position: absolute;
+    right: calc(50% - 7px );
+    -webkit-transition: 100 unset;
+    transition: 100 unset;
+    top: 3px;
+}
+.changebox{
+    position: relative;
+    height: 7px;
+}
+.changeStyle_top{
+    border-color: rgb(104, 96, 96);
+    border-width: 0 0 2px 2px;
+    border-style: solid;
+    -webkit-transform: rotateZ(-45deg);
+    transform: rotateZ(136deg);
+    width: 10px;
+    height: 10px;
+    position: absolute;
+    right: calc(50% - 7px );
+    transition: 100 unset;
+    top: 3px;
+}
+.illustration-color {
+    color: #ccc;
+}
+.illustration-item {
+    padding: 10px;
+    display: flex;
+    align-items: center;
+
+}
+.illustration {
+    display: flex;
+    justify-content: flex-end;
+}
+.illustration-text {
+    padding-left: 10px;
+    font-size: 12px;
+}
\ No newline at end of file

src/components/app-calendar/style.css

+.mpvue-calendar {
+    margin:auto;
+    width: 100%;
+    min-width:300rpx;
+    background: #fff;
+    user-select:none;
+    position: relative;
+  }
+
+  .calendar-tools{
+    height:40px;
+    font-size: 20px;
+    line-height: 40px;
+    color:#5e7a88;
+    box-shadow: 0rpx 4rpx 8rpx rgba(25, 47, 89, 0.1);
+    margin-bottom: 30rpx;
+    border-top: 1px solid rgba(200, 200, 200, .1);
+  }
+  .calendar-prev{
+    width: 14.28571429%;
+    float:left;
+    text-align: center;
+  }
+  .calendar-prev img, .calendar-next img{
+    width: 34rpx;
+    height: 34rpx;
+  }
+  .calendar-info{
+    padding-top: 3px;
+    font-size:16px;
+    line-height: 1.3;
+    text-align: center;
+    width: 220rpx;
+    margin: 0 auto;
+  }
+  .calendar-info>div.mc-month{
+    margin:auto;
+    height:40rpx;
+    width:100px;
+    text-align: center;
+    color:#5e7a88;
+    overflow: hidden;
+    position: relative;
+  }
+  .calendar-info>div.mc-month .mc-month-inner{
+    position: absolute;
+    left:0;
+    top:0;
+    height:480rpx;
+  }
+  .month-transition{
+    transition:top .5s cubic-bezier(0.075, 0.82, 0.165, 1);
+  }
+  .calendar-info .mc-month-text{
+    display:block;
+    font-size:28rpx;
+    height:40rpx;
+    width:200rpx;
+    overflow:hidden;
+    text-align:center;
+  }
+  .calendar-info>div.mc-month .mc-month-inner>span{
+    display: block;
+    font-size: 14px;
+    height:20px;
+    width:100px;
+    overflow: hidden;
+    text-align: center;
+  }
+  .calendar-info>div.mc-year{
+    font-size:10px;
+    line-height: 1;
+    color:#999;
+  }
+  .calendar-next{
+    width: 14.28571429%;
+    float:right;
+    text-align: center;
+  }
+  .mpvue-calendar table {
+    clear: both;
+    width: 100%;
+    margin-bottom:10px;
+    border-collapse: collapse;
+    color: #444444;
+  }
+  .mpvue-calendar td {
+    margin:2px !important;
+    padding:0px 0;
+    width: 14.28571429%;
+    height:88rpx;
+    text-align: center;
+    vertical-align: middle;
+    font-size:14px;
+    line-height: 125%;
+    cursor: pointer;
+    position: relative;
+    vertical-align: top;
+  }
+  .mpvue-calendar td.mc-week{
+    font-size:10px;
+    pointer-events:none !important;
+    cursor: default !important;
+  }
+  .mpvue-calendar td.disabled {
+    color: #ccc;
+  }
+  .mpvue-calendar td.disabled div{
+    color: #ccc;
+  }
+  .mpvue-calendar td span{
+    display:block;
+    height:76rpx;
+    width:76rpx;
+    font-size: 28rpx;
+    line-height:76rpx;
+    margin:0px auto;
+    position: relative;
+    z-index: 3;
+  }
+  .mpvue-calendar td:not(.disabled) span.mc-date-red{
+    color:#ea6151;
+  }
+  .mc-today{
+    color: #3b75fb;
+  }
+  .mpvue-calendar td.selected span{
+    background-color: #3b75fb;
+    color: #fff;
+    border-radius:50%;
+  }
+  .mpvue-calendar td .mc-text{
+    position: absolute;
+    top:28px;
+    left:0;
+    right:0;
+    text-align: center;
+    padding:2px;
+    font-size:20rpx;
+    line-height: 1.2;
+    color:#444;
+    z-index: 4;
+  }
+  .mpvue-calendar td .isGregorianFestival,
+  .mpvue-calendar td .isTerm,
+  .mpvue-calendar td .isLunarFestival{
+    color:#ea6151;
+  }
+  .mpvue-calendar td.selected span.mc-date-red{
+    background-color: #3b75fb;
+    color: #fff;
+  }
+  .selected .mc-text {
+    color: #fff !important;
+  }
+  .mpvue-calendar .lunarStyle span{
+    width: 80rpx;
+    height: 80rpx;
+    line-height:54rpx;
+  }
+  .mpvue-calendar .lunarStyle .mc-text{
+    top: 44rpx;
+  }
+  .mpvue-calendar thead td {
+    text-transform: uppercase;
+    height:30px;
+    vertical-align: middle;
+  }
+  .mc-head {
+    margin-bottom: 20rpx;
+  }
+  .mc-head div {
+    overflow: hidden;
+  }
+  .mc-head-box div {
+    flex:1;
+    text-align: center;
+  }
+  .mc-head-box {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-content: space-between
+  }
+  .mc-head-box div {
+    font-size: 28rpx;
+  }
+  .mc-body tr {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-content: space-between
+  }
+  .mc-dot {
+    width: 10rpx;
+    height: 10rpx;
+    background-color: #ea6151;
+    border-radius: 50%;
+    margin: 0 auto;
+    margin-top: 5rpx;
+    position: absolute;
+    bottom: -5rpx;
+    left: 50%;
+    margin-left: -5rpx;
+    z-index: 5;
+  }
+  .remark-text {
+    padding-left: 8rpx;
+    padding-right: 8rpx;
+    box-sizing: border-box;
+    height: 34rpx;
+    overflow: hidden;
+    text-overflow:ellipsis;
+    white-space: nowrap;
+  }
+  .slot-element{
+    line-height: normal;
+    position: absolute;
+    z-index: 5;
+  }
+  .mpvue-calendar-change{
+    position: absolute;
+    left:0rpx;
+    top:85rpx;
+    right:0rpx;
+    bottom:0rpx;
+    background:#fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap:wrap;
+    overflow: auto;
+    transition:all .5s cubic-bezier(0.075, 0.82, 0.165, 1);
+    opacity: 0;
+    pointer-events: none;
+    transform: translateY(-10px);
+    z-index: 9;
+  }
+  .mpvue-calendar-change.show{
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateY(0px);
+  }
+  .mpvue-calendar-change span{
+    margin:4px 2%;
+    display: inline-block;
+    line-height: 30px;
+    border-radius: 20px;
+    text-align:center;
+    color:#999;
+    width: 20%;
+    float: left;
+    text-align: center;
+    border-radius: 40px;
+    box-sizing: border-box;
+    margin-bottom: 4%;
+  }
+  .mpvue-calendar-change span.active{
+    background-color: #587dff;
+    box-shadow: 2px 2px 2px rgba(88, 125, 255, 0.7);
+    color:#fff;
+  }
+  .mpvue-calendar-change .calendar-week-switch-months{
+    height: 100%;
+    padding: 10rpx 20rpx;
+  }
+  .mpvue-calendar-change .calendar-week-switch-months span {
+    margin-bottom: 20rpx;
+    margin-top: 0px;
+    font-size: 26rpx;
+    line-height: 40rpx;
+  }
+  .calendar-years, .calendar-months{
+    height: 50%;
+    width: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+    position: relative;
+  }
+  .calendar-years:after {
+    content: '';
+    display: block;
+    width: 86%;
+    height: 1rpx;
+    background-color: #eee;
+    position: absolute;
+    bottom: 2%;
+    left: 7%;
+  }
+  /*range background*/
+  .mc-range-mode .selected .mc-range-bg{
+    content: '';
+    display: block;
+    width: 110rpx;
+    height: 80rpx;
+    background-color: #01a1ed;
+    position: absolute;
+    top: 0rpx;
+    left: 50%;
+  }
+  .mpvue-calendar .mc-range-mode .selected .calendar-date{
+    background-color: transparent;
+  }
+  .mpvue-calendar .mc-range-mode .mc-range-row-last span.calendar-date, .mpvue-calendar .mc-range-mode .mc-range-row-first span.calendar-date{
+    border-radius: 6rpx;
+    background-color: #01a1ed;
+  }
+  .mpvue-calendar .mc-range-mode .mc-range-month-first.selected .calendar-date, .mpvue-calendar .mc-range-mode .mc-range-month-last.selected .calendar-date{
+    border-radius: 6rpx;
+    background-color: #01a1ed;
+  }
+  .mc-range-mode .mc-range-month-last .mc-range-bg{
+    background-color: transparent;
+    border-radius: 6rpx;
+  }
+  .mc-range-mode .mc-range-end .mc-range-bg, .mc-range-mode .mc-range-row-last .mc-range-bg{
+    display: none;
+  }
+  .mpvue-calendar .mc-range-mode .mc-range-end span.calendar-date, .mpvue-calendar .mc-range-mode .mc-range-begin span.calendar-date{
+    background-color: #3b75fb;
+    color: #fff;
+    border-radius: 50%;
+  }
+  .mc-range-mode .mc-range-row-first.mc-range-end .mc-range-bg{
+    display: block;
+    border-radius: 6rpx;
+    width: 40rpx;
+    left: 5px;
+  }
+  .mpvue-calendar .mc-range-row-first.mc-range-end.month-first-date .mc-range-bg{
+    margin-left: 0px;
+  }
+  .mc-range-mode .mc-range-row-last.mc-range-begin .mc-range-bg{
+    display: block;
+    border-radius: 4rpx;
+    width: 40rpx;
+    right: 10px;
+  }
+  .mpvue-calendar .mc-range-mode .month-last-date.mc-range-begin .mc-range-bg{
+    display: block;
+    width: 40rpx;
+    border-radius: 6rpx;
+  }
+  .mpvue-calendar .mc-range-mode .month-first-date.mc-range-end .mc-range-bg{
+    display: block;
+    width: 40rpx;
+    border-radius: 6rpx;
+    left: 10rpx;
+  }
+  .mpvue-calendar .mc-range-mode .mc-range-select-one div.mc-range-bg{
+    display: none !important;
+  }
+  .mc-body .mc-today-element .calendar-date{
+    background-color: rgba(25, 47, 89, 0.1);
+    border-radius: 6rpx;
+  }
+  /*week switch*/
+  .mpvue-calendar .mc-range-mode.week-switch .month-last-date.mc-range-begin .mc-range-bg{
+    width: 130%;
+    border-radius: 0px 20% 20% 0px;
+  }
+  .mpvue-calendar .mc-range-mode.week-switch .mc-range-month-last .mc-range-bg{
+    background-color: #01a1ed;
+    border-radius: 0px 20% 20% 0px;
+  }
+  /*month range*/
+  .mpvue-calendar .month-range-mode{
+    border-bottom: 1px solid #f2f2f2;
+    position: relative;
+  }
+  .mpvue-calendar .mc-month-range-mode-head{
+    box-shadow: 0 4px 8px rgba(25,47,89,.1);
+    padding: 15rpx 0rpx;
+    position: sticky;
+    top: 0px;
+    background-color: #fff;
+    z-index: 9;
+  }
+  .month-range-mode .month-rang-head {
+    text-align: left;
+    margin: 20rpx 0px;
+    padding-left: 40rpx;
+    font-size: 28rpx;
+  }
+  .month-range-mode .mc-last-month, .month-range-mode .mc-next-month{
+    opacity: 0 !important;
+  }
+  .month-text-background{
+    position: absolute;
+    font-size: 140px;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    line-height: 2.4;
+  }

src/components/app-mob-dropdown-list-dynamic/app-mob-dropdown-list-dynamic.less

-.dropdown-list-dynamic{
-    display: inline-block;
-}
-

src/components/app-mob-dropdown-list-dynamic/app-mob-dropdown-list-dynamic.vue

-<template>
-    <!-- <ion-select :disabled="disabled === true ? true : false" :value="currentVal" interface="popover" @ionChange="change">
-        <ion-select-option
-        v-for="(item,index) in items"
-        :key="index"
-        :value="item.value"
-        >{{($t('userCustom.'+tag+'.'+item.value)!== ('userCustom.'+tag+'.'+item.value))?$t('userCustom.'+tag+'.'+item.value) : item.text}}</ion-select-option>
-    </ion-select> -->
-
-        <div class="app-mobile-select">
-        <ion-icon v-if="currentVal" name="close-circle-outline" @click="clear"></ion-icon>
-        <ion-select  :value="currentVal" :disabled="disabled ? disabled : false" @ionChange="change" interface="action-sheet" :cancel-text="$t('cancel_text')">
-              <template v-for="item of items">
-                <ion-select-option :key="item.value" :value="item.value">{{($t('userCustom.'+tag+'.'+item.value)!== ('userCustom.'+tag+'.'+item.value))?$t('userCustom.'+tag+'.'+item.value) : item.text}}</ion-select-option>
-              </template>
-        </ion-select>
-    </div> 
-</template>
-
-<script lang="ts">
-import { Vue, Component, Watch, Prop, Model } from 'vue-property-decorator';
-import CodeListService from "@app-core/service/app/code-list-service";
-
-@Component({
-    i18n: {
-        messages: {
-            'ZH-CN': {
-                placeholder: '请选择...',
-                cancel_text: '取消'
-            },
-            'EN-US': {
-                placeholder: 'please select...',
-                cancel_text: 'cancel'
-            }
-        }
-    }
-})
-export default class DropDownListDynamic extends Vue {
-    /**
-     * 代码表服务对象
-     *
-     * @type {CodeListService}
-     * @memberof DropDownListDynamic
-     */  
-    public codeListService:CodeListService = new CodeListService();
-
-    /**
-     * 额外参数
-     *
-     * @type {*}
-     * @memberof DropDownListDynamic
-     */
-    public otherParam:any;
-
-    /**
-     * 查询参数
-     * @type {*}
-     * @memberof DropDownListDynamic
-     */
-    public queryParam:any;
-
-    /**
-     * 当前选中值
-     * @type {any}
-     * @memberof DropDownListDynamic
-     */
-    @Model('change') readonly itemValue!: any;
-
-    /**
-     * 代码表标识
-     *
-     * @type {string}
-     * @memberof DropDownListDynamic
-     */
-    @Prop() public tag?: string;
-
-    /**
-     * 代码表类型
-     *
-     * @type {string}
-     * @memberof DropDownListDynamic
-     */
-    @Prop() public codelistType?: string;
-
-    /**
-     * 传入表单数据
-     *
-     * @type {*}
-     * @memberof DropDownListDynamic
-     */
-    @Prop() public data?: any;
-
-  /**
-     * 监听表单数据
-     *
-     * @memberof DropDownListDynamic
-     */    
-    @Watch('data',{ deep: true })
-    onDataChange(newVal: any, val: any){
-        if(newVal){
-            this.handleOtherParam();
-        }
-    }
-
-    /**
-     * 传入额外参数
-     *
-     * @type {*}
-     * @memberof DropDownListDynamic
-     */
-    @Prop() public itemParam?: any;
-
-    /**
-     * 是否禁用
-     * @type {any}
-     * @memberof DropDownListDynamic
-     * 
-     */
-    @Prop() public disabled?: any;
-
-    /**
-     * 是否支持过滤
-     * @type {boolean}
-     * @memberof DropDownListDynamic
-     */
-    @Prop() public filterable?: boolean;
-
-    /**
-     * 下拉选提示内容
-     * @type {string}
-     * @memberof DropDownListDynamic
-     */
-    @Prop() public placeholder?: string;
-
-
-    /**
-     * 计算属性(当前值)
-     * @type {any}
-     * @memberof DropDownListDynamic
-     */
-    set currentVal(data: any) {
-      
-    }
-    
-    /**
-     * change事件
-     */
-    public change(data:any) {
-        this.$emit('change',data.detail.value);
-    }
-
-    /**
-     * 获取值对象
-     *
-     * @memberof DropDownListDynamic
-     */
-    get currentVal() {
-        return this.itemValue;
-    }
-
-    /**
-     * 代码表
-     *
-     * @type {any[]}
-     * @memberof DropDownListDynamic
-     */
-    public items: any[] = [];
-
-    /**
-     * 处理额外参数
-     */
-    public handleOtherParam(){
-        if(this.itemParam){
-            this.queryParam = {};
-            this.otherParam = this.itemParam.parentdata;
-            if(this.otherParam && Object.keys(this.otherParam).length >0){
-                Object.keys(this.otherParam).forEach((item:any) =>{
-                    let value: string | null = this.otherParam[item];
-                    if (value && value.startsWith('%') && value.endsWith('%')) {
-                        const key = value.substring(1, value.length - 1);
-                        if (this.data && this.data.hasOwnProperty(key)) {
-                            value = (this.data[key] !== null && this.data[key] !== undefined) ? this.data[key] : null;
-                        } else {
-                            value = null;
-                        }
-                    }
-                    Object.assign(this.queryParam,{[item]:value});
-                })
-            }
-        }
-    }
-
-    /**
-     * vue  生命周期
-     *
-     * @memberof DropDownListDynamic
-     */
-    public created() {
-      if(this.tag && Object.is(this.codelistType,"STATIC")){
-          const codelist = this.$store.getters.getCodeList(this.tag);
-          if (codelist) {
-              this.items = [...JSON.parse(JSON.stringify(codelist.items))];
-          } else {
-              console.log(`----${this.tag}----代码表不存在`);
-          }
-      }else if(this.tag && Object.is(this.codelistType,"DYNAMIC")){
-          this.codeListService.getItems(this.tag,this.queryParam).then((res:any) => {
-              this.items = res;
-          }).catch((error:any) => {
-              console.log(`----${this.tag}----代码表不存在`);
-          });
-      }
-    }
-    
-    /**
-     * 下拉点击事件
-     *
-     * @param {*} $event
-     * @memberof DropDownListDynamic
-     */
-    public onClick($event:any){
-        if($event){
-            if(this.tag && Object.is(this.codelistType,"DYNAMIC")){
-                this.codeListService.getItems(this.tag,this.queryParam).then((res:any) => {
-                    this.items = res;
-                }).catch((error:any) => {
-                    console.log(`----${this.tag}----代码表不存在`);
-                });
-            }
-        }
-    }
-
-    /**
-     * 清空值
-     * @memberof AppSelect
-     */
-    public clear(){
-        this.currentVal = '';
-        this.$emit('change','')
-    }
-
-}
-</script>
-
-<style lang='less'>
-@import './app-mob-dropdown-list-dynamic.less';
-</style>
\ No newline at end of file

src/components/app-mob-file-upload/app-mob-file-upload.vue

 <template>
-  <div class="app-mobile-file-upload">
-    <ion-item-group v-if="files.length > 0">
-      <ion-item v-for="file in files" :key="file.id">
-        <ion-label><a class="file">{{file.name}}</a></ion-label>
-        <ion-icon name="close-circle-outline" @click="onDelete(file, null)"></ion-icon>
-      </ion-item>
-    </ion-item-group>
-    <ion-row>
-      <van-uploader :class="singleChoiceBtnState" multiple="false" :disabled="state" :result-type="resultType"
-        :before-read="beforeRead" :after-read="afterRead">
-        <ion-button color="primary">
-          <ion-icon slot="start" name="image-outline"></ion-icon>
-          {{$t('uploadtext')}}
-        </ion-button>
-      </van-uploader>
-    </ion-row>
-
-  </div>
+    <div class="app-mobile-file-upload">
+        <ion-item-group v-if="files.length > 0">
+        <ion-item v-for="file in files" :key="file.id">
+            <ion-label><a class="file">{{file.name}}</a></ion-label>
+            <ion-icon name="close-circle-outline" @click="onDelete(file, null)"></ion-icon>
+        </ion-item>
+        </ion-item-group>
+        <ion-row>
+        <van-uploader :class="singleChoiceBtnState" multiple="false" :disabled="state" :result-type="resultType"
+            :before-read="beforeRead" :after-read="afterRead">
+            <ion-button color="primary">
+            <ion-icon slot="start" name="image-outline"></ion-icon>
+            {{$t('uploadtext')}}
+            </ion-button>
+        </van-uploader>
+        </ion-row>
+    </div>
 </template>
 
 <script lang="ts">
-  import {Vue,Component, Prop,Provide,Emit,Watch} from 'vue-property-decorator';
-  import {Environment} from '@/environments/environment';
-  import { Subject, Unsubscribable} from 'rxjs';
-  import Axios from 'axios';
+import { Vue, Component, Prop, Provide, Emit, Watch } from 'vue-property-decorator';
+import { Environment } from '@/environments/environment';
+import { Subject, Unsubscribable } from 'rxjs';
+import Axios from 'axios';
 
-  import { Uploader} from 'vant';
+import { Uploader } from 'vant';
 
-  Vue.use(Uploader);
-  @Component({
+Vue.use(Uploader);
+@Component({
     i18n: {
         messages: {
             'ZH-CN': {
@@ -40,8 +39,8 @@
         }
     },
     components: {}
-  })
-  export default class AppMobFileUpload extends Vue {
+})
+export default class AppMobFileUpload extends Vue {
     // MOB LOGIC BEGIN
     /**
      * 单选按钮状态
@@ -50,11 +49,11 @@
      * @type {Array<string>}
      * @memberof AppMobFileUpload
      */
-    get singleChoiceBtnState(): Array < string > {
-      return [
-        this.files.length > 0 ? 'file-list' : '',
-        !this.multiple && this.files.length === 1 ? 'hidden-choice-button' : '',
-      ];
+    get singleChoiceBtnState(): Array<string> {
+        return [
+            this.files.length > 0 ? 'file-list' : '',
+            !this.multiple && this.files.length === 1 ? 'hidden-choice-button' : '',
+        ];
     }
 
     /**
@@ -62,18 +61,18 @@
      *
      * @readonly
      * @type {boolean}
-     * @memberof AppMobPicture
+     * @memberof AppMobFileUpload
      */
     get state(): boolean {
-      // 禁用
-      if (this.disabled) {
-        return true;
-      }
-      // 单选
-      if (!this.multiple && this.files.length === 1) {
-        return true;
-      }
-      return false;
+        // 禁用
+        if (this.disabled) {
+            return true;
+        }
+        // 单选
+        if (!this.multiple && this.files.length === 1) {
+            return true;
+        }
+        return false;
     }
 
     /**
@@ -81,15 +80,15 @@
      *
      * @private
      * @type {Array<any>}
-     * @memberof AppMobPicture
+     * @memberof AppMobFileUpload
      */
-    private devFiles: Array < any > = [];
+    private devFiles: Array<any> = [];
 
     /**
      * 文件上传模式
      *
      * @type {string}
-     * @memberof AppMobPicture
+     * @memberof AppMobFileUpload
      */
     public resultType: string = process.env.NODE_ENV === 'development' ? 'dataUrl' : 'file';
 
@@ -98,13 +97,13 @@
      *
      * @param {*} file 文件信息
      * @param {*} detail 详情
-     * @memberof AppMobPicture
+     * @memberof AppMobFileUpload
      */
     public onDelete(file: any, detail: any): void {
-      this.onRemove({
-        id: file.id,
-        name: file.name
-      }, this.files);
+        this.onRemove({
+            id: file.id,
+            name: file.name
+        }, this.files);
     }
 
     /**
@@ -113,17 +112,17 @@
      * @param {*} file
      * @param {*} detail
      * @returns {boolean}
-     * @memberof AppMobPicture
+     * @memberof AppMobFileUpload
      */
     public beforeRead(file: any, detail: any): boolean {
-      if (file && Array.isArray(file)) {
-        this.$notify({
-          type: 'warning',
-          message: '该功能只支持单个文件上传'
-        });
-        return false;
-      }
-      return true;
+        if (file && Array.isArray(file)) {
+            this.$notify({
+                type: 'warning',
+                message: '该功能只支持单个文件上传'
+            });
+            return false;
+        }
+        return true;
     }
 
     /**
@@ -132,31 +131,31 @@
      * @protected
      * @param {*} file 文件信息
      * @param {*} detail 详情
-     * @memberof AppMobPicture
+     * @memberof AppMobFileUpload
      */
     protected afterRead(file: any, detail: any): void {
-      const params = new FormData()
-      params.append('file', file.file, file.file.name)
-      const config = {
-        headers: {
-          'Content-Type': 'multipart/form-data'
-        }
-      }
-      Axios.post(this.uploadUrl, params, config).then((response: any) => {
-        if (response && response.data && response.status === 200) {
-          let data: any = response.data;
-          if (process.env.NODE_ENV === 'development') {
-            this.devFiles.push(Object.assign({}, data, {
-              url: file.content
-            }));
-          }
-          this.onSuccess(data, file, this.files);
-        } else {
-          this.onError(response, file, this.files);
+        const params = new FormData()
+        params.append('file', file.file, file.file.name)
+        const config = {
+            headers: {
+                'Content-Type': 'multipart/form-data'
+            }
         }
-      }).catch((response: any) => {
-        this.onError(response, file, this.files);
-      });
+        Axios.post(this.uploadUrl, params, config).then((response: any) => {
+            if (response && response.data && response.status === 200) {
+                let data: any = response.data;
+                if (process.env.NODE_ENV === 'development') {
+                    this.devFiles.push(Object.assign({}, data, {
+                        url: file.content
+                    }));
+                }
+                this.onSuccess(data, file, this.files);
+            } else {
+                this.onError(response, file, this.files);
+            }
+        }).catch((response: any) => {
+            this.onError(response, file, this.files);
+        });
     }
     // MOB LOGIC END
 
@@ -164,24 +163,24 @@
      * 表单状态
      *
      * @type {Subject<any>}
-     * @memberof AppMobPicture
+     * @memberof AppMobFileUpload
      */
-    @Prop() public formState ? : Subject < any >
+    @Prop() public formState?: Subject<any>
 
-      /**
-       * 是否忽略表单项书香值变化
-       *
-       * @type {boolean}
-       * @memberof AppMobPicture
-       */
-      @Prop() public ignorefieldvaluechange ? : boolean;
+    /**
+     * 是否忽略表单项书香值变化
+     *
+     * @type {boolean}
+     * @memberof AppMobFileUpload
+     */
+    @Prop() public ignorefieldvaluechange?: boolean;
 
     /**
      * 表单状态事件
      *
      * @private
      * @type {(Unsubscribable | undefined)}
-     * @memberof AppMobPicture
+     * @memberof AppMobFileUpload
      */
     private formStateEvent: Unsubscribable | undefined;
 
@@ -189,7 +188,7 @@
      * 表单数据
      *
      * @type {string}
-     * @memberof AppMobPicture
+     * @memberof AppMobFileUpload
      */
     @Prop() public data!: string;
 
@@ -197,9 +196,9 @@
      * 初始化值
      *
      * @type {*}
-     * @memberof AppMobPicture
+     * @memberof AppMobFileUpload
      */
-    @Prop() public value ? : any;
+    @Prop() public value?: any;
 
     /**
      * 数据值变化
@@ -207,26 +206,26 @@
      * @param {*} newval
      * @param {*} val
      * @returns
-     * @memberof AppMobPicture
+     * @memberof AppMobFileUpload
      */
     @Watch('value')
     onValueChange(newval: any, val: any) {
-      if (this.ignorefieldvaluechange) {
-        return;
-      }
-      if (newval) {
-        this.files = JSON.parse(newval);
-        this.dataProcess();
-      } else {
-        this.files = [];
-      }
+        if (this.ignorefieldvaluechange) {
+            return;
+        }
+        if (newval) {
+            this.files = JSON.parse(newval);
+            this.dataProcess();
+        } else {
+            this.files = [];
+        }
     }
 
     /**
      * 所属表单项名称
      *
      * @type {string}
-     * @memberof AppMobPicture
+     * @memberof AppMobFileUpload
      */
     @Prop() public name!: string;
 
@@ -234,84 +233,84 @@
      * 是否禁用
      *
      * @type {boolean}
-     * @memberof AppMobPicture
+     * @memberof AppMobFileUpload
      */
-    @Prop() public disabled ? : boolean;
+    @Prop() public disabled?: boolean;
 
     /**
      * 上传参数
      *
      * @type {string}
-     * @memberof AppMobPicture
+     * @memberof AppMobFileUpload
      */
-    @Prop() public uploadparams ? : string;
+    @Prop() public uploadparams?: string;
 
     /**
      * 下载参数
      *
      * @type {string}
-     * @memberof AppMobPicture
+     * @memberof AppMobFileUpload
      */
-    @Prop() public exportparams ? : string;
+    @Prop() public exportparams?: string;
 
     /**
      * 自定义参数
      *
      * @type {*}
-     * @memberof AppMobPicture
+     * @memberof AppMobFileUpload
      */
-    @Prop() public customparams ? : any;
+    @Prop() public customparams?: any;
 
     /**
      * 上传文件路径
      *
-     * @memberof AppMobPicture
+     * @memberof AppMobFileUpload
      */
     public uploadUrl = Environment.BaseUrl + Environment.UploadFile;
 
     /**
      * 下载文件路径
      *
-     * @memberof AppMobPicture
+     * @memberof AppMobFileUpload
      */
     public downloadUrl = Environment.BaseUrl + Environment.ExportFile;
 
     /**
      * 文件列表
      *
-     * @memberof AppMobPicture
+     * @memberof AppMobFileUpload
      */
-    @Provide() public files: Array < any > = [];
+    @Provide() public files: Array<any> = [];
 
     /**
      * 上传keys
      *
      * @type {Array<any>}
-     * @memberof AppMobPicture
+     * @memberof AppMobFileUpload
      */
-    public upload_keys: Array < any > = [];
+    public upload_keys: Array<any> = [];
 
     /**
      * 导出keys
      *
      * @type {Array<any>}
-     * @memberof AppMobPicture
+     * @memberof AppMobFileUpload
      */
-    public export_keys: Array < any > = [];
+    public export_keys: Array<any> = [];
 
     /**
      * 自定义数组
      *
      * @type {Array<any>}
-     * @memberof AppMobPicture
+     * @memberof AppMobFileUpload
      */
-    public custom_arr: Array < any > = [];
+    public custom_arr: Array<any> = [];
 
     /**
      * 应用参数
      *
      * @type {*}
-     * @memberof AppMobPicture
+     * @memberof AppMobFileUpload
      */
     public appData: any = "";
 
@@ -319,148 +318,150 @@
      * 数据处理
      *
      * @private
-     * @memberof AppMobPicture
+     * @memberof AppMobFileUpload
      */
     private dataProcess(): void {
-      let upload_arr: Array < string > = [];
-      let export_arr: Array < string > = [];
-      const _data: any = JSON.parse(this.data);
-      this.upload_keys.forEach((key: string) => {
-        upload_arr.push(`${key}=${_data[key]}`);
-      });
-      this.export_keys.forEach((key: string) => {
-        export_arr.push(`${key}=${_data[key]}`);
-      });
-
-      let _url = `${Environment.BaseUrl}${Environment.UploadFile}`;
-      if (upload_arr.length > 0 || this.custom_arr.length > 0) {
-        _url = `${_url}?${upload_arr.join('&')}${upload_arr.length > 0 ? '&' : ''}${this.custom_arr.join('&')}`;
-      }
-      this.uploadUrl = _url;
-
-      this.files.forEach((file: any) => {
-        if (process.env.NODE_ENV === 'development') {
-          let index = this.devFiles.findIndex((devFile: any) => Object.is(devFile.id, file.id));
-          if (index !== -1) {
-            file.url = this.devFiles[index].url;
-            file.isImage = true;
-          }
-          return;
-        }
-        let url = `${this.downloadUrl}/${file.id}`;
+        let upload_arr: Array<string> = [];
+        let export_arr: Array<string> = [];
+        const _data: any = JSON.parse(this.data);
+        this.upload_keys.forEach((key: string) => {
+            upload_arr.push(`${key}=${_data[key]}`);
+        });
+        this.export_keys.forEach((key: string) => {
+            export_arr.push(`${key}=${_data[key]}`);
+        });
+
+        let _url = `${Environment.BaseUrl}${Environment.UploadFile}`;
         if (upload_arr.length > 0 || this.custom_arr.length > 0) {
-          url = `${url}?${upload_arr.join('&')}${upload_arr.length > 0 ? '&' : ''}${this.custom_arr.join('&')}`;
+            _url = `${_url}?${upload_arr.join('&')}${upload_arr.length > 0 ? '&' : ''}${this.custom_arr.join('&')}`;
         }
-        file.url = url;
-      });
+        this.uploadUrl = _url;
+
+        this.files.forEach((file: any) => {
+            if (process.env.NODE_ENV === 'development') {
+                let index = this.devFiles.findIndex((devFile: any) => Object.is(devFile.id, file.id));
+                if (index !== -1) {
+                    file.url = this.devFiles[index].url;
+                    file.isImage = true;
+                }
+                return;
+            }
+            let url = `${this.downloadUrl}/${file.id}`;
+            if (upload_arr.length > 0 || this.custom_arr.length > 0) {
+                url = `${url}?${upload_arr.join('&')}${upload_arr.length > 0 ? '&' : ''}${this.custom_arr.join('&')}`;
+            }
+            file.url = url;
+        });
     }
 
     /**
      * vue 生命周期
      *
-     * @memberof AppMobPicture
+     * @memberof AppMobFileUpload
      */
     public created() {
-      if (this.formState) {
-        this.formStateEvent = this.formState.subscribe(($event: any) => {
-          // 表单加载完成
-          if (Object.is($event.type, 'load')) {
-            if (this.value) {
-              // console.log(this.value);
-              this.files = JSON.parse(this.value);
-            }
-            this.dataProcess();
-          }
-        });
-      }
+        if (this.formState) {
+            this.formStateEvent = this.formState.subscribe(($event: any) => {
+                // 表单加载完成
+                if (Object.is($event.type, 'load')) {
+                    if (this.value) {
+                        // console.log(this.value);
+                        this.files = JSON.parse(this.value);
+                    }
+                    this.dataProcess();
+                }
+            });
+        }
     }
 
     /**
      * vue 生命周期
      *
-     * @memberof AppMobPicture
+     * @memberof AppMobFileUpload
      */
     public mounted() {
-      this.appData = this.$store.getters.getAppData();
-
-      let custom_arr: Array < string > = [];
-      let upload_keys: Array < string > = [];
-      let export_keys: Array < string > = [];
-
-      if (this.uploadparams && !Object.is(this.uploadparams, '')) {
-        upload_keys = this.uploadparams.split(';');
-      }
-      if (this.exportparams && !Object.is(this.exportparams, '')) {
-        export_keys = this.exportparams.split(';');
-      }
-      if (this.customparams && !Object.is(this.customparams, '')) {
-        Object.keys(this.customparams).forEach((name: string) => {
-          custom_arr.push(`${name}=${this.customparams[name]}`);
-        });
-      }
-      this.upload_keys = upload_keys;
-      this.export_keys = export_keys;
-      this.custom_arr = custom_arr;
+        this.appData = this.$store.getters.getAppData();
+
+        let custom_arr: Array<string> = [];
+        let upload_keys: Array<string> = [];
+        let export_keys: Array<string> = [];
+
+        if (this.uploadparams && !Object.is(this.uploadparams, '')) {
+            upload_keys = this.uploadparams.split(';');
+        }
+        if (this.exportparams && !Object.is(this.exportparams, '')) {
+            export_keys = this.exportparams.split(';');
+        }
+        if (this.customparams && !Object.is(this.customparams, '')) {
+            Object.keys(this.customparams).forEach((name: string) => {
+                custom_arr.push(`${name}=${this.customparams[name]}`);
+            });
+        }
+        this.upload_keys = upload_keys;
+        this.export_keys = export_keys;
+        this.custom_arr = custom_arr;
 
-      if (this.value) {
-        this.files = JSON.parse(this.value);
-      }
-      this.dataProcess();
+        if (this.value) {
+            this.files = JSON.parse(this.value);
+        }
+        this.dataProcess();
 
-      this.changeLabelStyle();
+        this.changeLabelStyle();
 
     }
 
     /**
      * 修改label默认样式
-     * @memberof AppMobPicture
+     * @memberof AppMobFileUpload
      */
     public changeLabelStyle() {
-      document.querySelectorAll(".app-mobile-file-upload").forEach((element: any) => {
-        let prev = this.getNearEle(element, 1);
-        prev.style.transform = 'none';
-      })
+        document.querySelectorAll(".app-mobile-file-upload").forEach((element: any) => {
+            let prev = this.getNearEle(element, 1);
+            if (prev) {
+                prev.style.transform = 'none';
+            }
+        })
     }
 
     /**
      * 查找相邻前一个元素
      * 
-     *  @memberof AppMobPicture
+     *  @memberof AppMobFileUpload
      */
     public getNearEle(ele: any, type: any) {
-      type = type == 1 ? "previousSibling" : "nextSibling";
-      var nearEle = ele[type];
-      while (nearEle) {
-        if (nearEle.nodeType === 1) {
-          return nearEle;
-        }
-        nearEle = nearEle[type];
-        if (!nearEle) {
-          break;
+        type = type == 1 ? "previousSibling" : "nextSibling";
+        var nearEle = ele[type];
+        while (nearEle) {
+            if (nearEle.nodeType === 1) {
+                return nearEle;
+            }
+            nearEle = nearEle[type];
+            if (!nearEle) {
+                break;
+            }
         }
-      }
-      return null;
+        return null;
     }
 
     /**
      * 组件销毁
      *
-     * @memberof AppMobPicture
+     * @memberof AppMobFileUpload
      */
     public destroyed(): void {
-      if (this.formStateEvent) {
-        this.formStateEvent.unsubscribe();
-      }
+        if (this.formStateEvent) {
+            this.formStateEvent.unsubscribe();
+        }
     }
 
     /**
      * 上传之前
      *
      * @param {*} file
-     * @memberof AppMobPicture
+     * @memberof AppMobFileUpload
      */
     public beforeUpload(file: any) {
-      // console.log('上传之前');
+        // console.log('上传之前');
     }
 
     /**
@@ -470,30 +471,30 @@
      * @param {*} file
      * @param {*} fileList
      * @returns
-     * @memberof AppMobPicture
+     * @memberof AppMobFileUpload
      */
     public onSuccess(response: any, file: any, fileList: any) {
-      if (!response) {
-        return;
-      }
-      const data = {
-        name: response.name,
-        id: response.id
-      };
-      let arr: Array < any > = [];
-      this.files.forEach((_file: any) => {
-        arr.push({
-          name: _file.name,
-          id: _file.id
-        })
-      });
-      arr.push(data);
-
-      let value: any = arr.length > 0 ? JSON.stringify(arr) : null;
-      this.$emit('formitemvaluechange', {
-        name: this.name,
-        value: value
-      });
+        if (!response) {
+            return;
+        }
+        const data = {
+            name: response.name,
+            id: response.id
+        };
+        let arr: Array<any> = [];
+        this.files.forEach((_file: any) => {
+            arr.push({
+                name: _file.name,
+                id: _file.id
+            })
+        });
+        arr.push(data);
+
+        let value: any = arr.length > 0 ? JSON.stringify(arr) : null;
+        this.$emit('formitemvaluechange', {
+            name: this.name,
+            value: value
+        });
     }
 
     /**
@@ -502,13 +503,13 @@
      * @param {*} error
      * @param {*} file
      * @param {*} fileList
-     * @memberof AppMobPicture
+     * @memberof AppMobFileUpload
      */
     public onError(error: any, file: any, fileList: any) {
-      this.$notify({
-        type: 'danger',
-        message: '上传失败'
-      });
+        this.$notify({
+            type: 'danger',
+            message: '上传失败'
+        });
     }
 
     /**
@@ -516,40 +517,40 @@
      *
      * @param {*} file
      * @param {*} fileList
-     * @memberof AppMobPicture
+     * @memberof AppMobFileUpload
      */
     public onRemove(file: any, fileList: any) {
-      let arr: Array < any > = [];
-      fileList.forEach((f: any) => {
-        if (f.id != file.id) {
-          arr.push({
-            name: f.name,
-            id: f.id
-          });
-        }
-      });
-      let value: any = arr.length > 0 ? JSON.stringify(arr) : null;
-      this.$emit('formitemvaluechange', {
-        name: this.name,
-        value: value
-      });
+        let arr: Array<any> = [];
+        fileList.forEach((f: any) => {
+            if (f.id != file.id) {
+                arr.push({
+                    name: f.name,
+                    id: f.id
+                });
+            }
+        });
+        let value: any = arr.length > 0 ? JSON.stringify(arr) : null;
+        this.$emit('formitemvaluechange', {
+            name: this.name,
+            value: value
+        });
     }
 
     /**
      * 下载文件
      *
      * @param {*} file
-     * @memberof AppMobPicture
+     * @memberof AppMobFileUpload
      */
     public onDownload(file: any) {
-      window.open(file.url);
+        window.open(file.url);
     }
 
     /**
      * 预览图片地址
      *
      * @type {string}
-     * @memberof AppMobPicture
+     * @memberof AppMobFileUpload
      */
     public dialogImageUrl: string = '';
 
@@ -557,7 +558,7 @@
      * 是否显示预览界面
      *
      * @type {boolean}
-     * @memberof AppMobPicture
+     * @memberof AppMobFileUpload
      */
     public dialogVisible: boolean = false;
 
@@ -565,23 +566,21 @@
      * 是否支持多个上传
      *
      * @type {boolean}
-     * @memberof AppMobPicture
+     * @memberof AppMobFileUpload
      */
-    @Prop({
-      default: true
-    }) public multiple ? : boolean;
+    @Prop({ default: true }) public multiple?: boolean;
 
     /**
      * 预览
      *
      * @param {*} file
-     * @memberof AppMobPicture
+     * @memberof AppMobFileUpload
      */
     public onPreview(file: any) {
-      this.dialogImageUrl = file.url;
-      this.dialogVisible = true;
+        this.dialogImageUrl = file.url;
+        this.dialogVisible = true;
     }
-  }
+}
 </script>
 
 <style lang="less">

src/components/app-mob-picture/app-mob-picture.vue

@@ -395,11 +395,13 @@ export default class AppMobPicture extends Vue {
      * @memberof AppMobPicture
      */
     public changeLabelStyle() {
-      document.querySelectorAll(".app-mobile-picture").forEach((element: any) => {
-        let prev = this.getNearEle(element, 1);
-        prev.style.transform = 'none';
-        prev.style.marginBottom = "10px";
-      })
+        document.querySelectorAll(".app-mobile-picture").forEach((element: any) => {
+            let prev = this.getNearEle(element, 1);
+            if (prev) {
+                prev.style.transform = 'none';
+                prev.style.marginBottom = "10px";
+            }
+        });
     }
 
     /**

src/components/app-mob-radio-list/app-mob-radio-list.vue

 <template>
-  <ion-list class="app-mobile-radio-list">
-    <ion-radio-group  :value="value" @ionChange="change">
-      <ion-item  v-for="(item,index) in options" :key="index">
-        <ion-label>{{item.text}}</ion-label>
-        <ion-radio  :disabled="item.disabled" color="success" :value="item.value"></ion-radio>  
-      </ion-item>
-    </ion-radio-group>
-  </ion-list>
+    <ion-list class="app-mobile-radio-list">
+        <ion-radio-group  :value="value" @ionChange="change">
+        <ion-item  v-for="(item,index) in options" :key="index">
+            <ion-label>{{item.text}}</ion-label>
+            <ion-radio  :disabled="item.disabled" color="success" :value="item.value"></ion-radio>  
+        </ion-item>
+        </ion-radio-group>
+    </ion-list>
 </template>
 
 <script lang="ts">
-import {
-  Vue,
-  Component,
-  Prop,
-  Provide,
-  Emit,
-  Watch
-} from "vue-property-decorator";
+import { Vue, Component, Prop } from "vue-property-decorator";
 import CodeListService from "@app-core/service/app/code-list-service";
 
 @Component({
-  components: {}
+    components: {}
 })
 export default class AppMobRadio extends Vue {
+
     /**
      * 代码表服务对象
      *
      * @type {CodeListService}
      * @memberof AppMobRadio
      */
-
-    public codeListService: CodeListService = new CodeListService();
+    public codeListService: CodeListService = CodeListService.getInstance();
 
     /**
      * 代码表标识
@@ -39,7 +32,7 @@ export default class AppMobRadio extends Vue {
      * @type {string}
      * @memberof AppMobRadio
      */
-    @Prop() public tag?: string;
+    @Prop() public tag!: string;
 
     /**
      * 代码表类型
@@ -75,29 +68,53 @@ export default class AppMobRadio extends Vue {
 
     /**
      * change事件
+     *
+     * @param {*} data
+     * @memberof AppMobRadio
      */
     public change(data: any) {
-      this.$emit("change", data.detail.value);
+        this.$emit("change", data.detail.value);
     }
 
+    /**
+     *  vue 生命周期
+     *
+     * @returns
+     * @memberof AppMobRadio
+     */
     public created() {
-      if (this.tag && this.type) {
-        if (Object.is(this.type, "dynamic")) {
-          this.codeListService
-            .getItems(this.tag)
-            .then((res: any) => {
-              this.options = res;
-            })
-            .catch((error: any) => {
-              this.options = [];
-            });
+        if (!this.tag || !this.type) {
+            return;
+        }
+        this.loadItems();
+    }
+
+    /**
+     * 加载 数据
+     *
+     * @private
+     * @returns {Promise<any>}
+     * @memberof AppMobRadio
+     */
+    private async loadItems(): Promise<any> {
+        if (Object.is(this.type, 'dynamic')) {
+            const response: any = await this.codeListService.getItems(this.tag);
+            if (response && response.status === 200) {
+                this.options = response.data;
+            } else {
+                this.options = [];
+            }
         } else {
-          this.options = this.$store.getters.getCodeListItems(this.tag);
+            this.options = this.$store.getters.getCodeListItems(this.tag);
         }
-      }
     }
 
-    public mounted(){
+    /**
+     *  vue 生命周期
+     *
+     * @memberof AppMobRadio
+     */
+    public mounted() {
         this.changeLabelStyle();
     }
 
@@ -106,10 +123,12 @@ export default class AppMobRadio extends Vue {
      * @memberof AppMobPicture
      */
     public changeLabelStyle() {
-      document.querySelectorAll(".app-mobile-radio-list").forEach((element: any) => {
-        let prev = this.getNearEle(element, 1);
-        prev.style.transform = 'none';
-      })
+        document.querySelectorAll(".app-mobile-radio-list").forEach((element: any) => {
+            let prev = this.getNearEle(element, 1);
+            if (prev) {
+                prev.style.transform = 'none';
+            }
+        })
     }
 
     /**
@@ -118,20 +137,21 @@ export default class AppMobRadio extends Vue {
      *  @memberof AppMobPicture
      */
     public getNearEle(ele: any, type: any) {
-      type = type == 1 ? "previousSibling" : "nextSibling";
-      var nearEle = ele[type];
-      while (nearEle) {
-        if (nearEle.nodeType === 1) {
-          return nearEle;
+        type = type == 1 ? "previousSibling" : "nextSibling";
+        var nearEle = ele[type];
+        while (nearEle) {
+            if (nearEle.nodeType === 1) {
+                return nearEle;
+            }
+            nearEle = nearEle[type];
+            if (!nearEle) {
+                break;
+            }
         }
-        nearEle = nearEle[type];
-        if (!nearEle) {
-          break;
-        }
-      }
-      return null;
+        return null;
     }
 }
 </script>
+
 <style lang="less">
 </style>
\ No newline at end of file

src/ibiz-core/control-service/calendar-service-base.ts

@@ -32,6 +32,7 @@ export class CalendarServiceBase extends MdServiceBase {
      * @memberof CalendarServiceBase
      */
     protected async loadDEDataSet(action: string, context: any, data: any, calendarItem: string, serviceName?: string): Promise<any[]> {
+        this.model.itemType = calendarItem;
         if (serviceName) {
             const service: any = await this.getService(serviceName);
             const response: HttpResponse = await service[action](context, data);

src/utils/interceptor/ignore-proxy.ts

+const ignoreProxyMap: Map<string, string> = new Map();
+ignoreProxyMap.set('./assets/json/data-dictionary.json', './assets/json/data-dictionary.json')
+
+export default ignoreProxyMap;
\ No newline at end of file

src/utils/interceptor/interceptor.ts

 import { Store } from 'vuex';
 import axios from 'axios';
 import Router from 'vue-router';
+import ignoreProxyMap from './ignore-proxy';
 
 
 /**
@@ -87,9 +88,13 @@ export class Interceptors {
                 const token = window.localStorage.getItem('token');
                 config.headers.Authorization = `Bearer ${token}`;
             }
-            // if (!config.url.startsWith('https://') && !config.url.startsWith('http://')) {
-            //     config.url = Environment.BaseUrl + config.url;
-            // }
+            
+            // 混合 app 代理处理
+            if (Object.is(process.env.VUE_APP_CURRENTMODE, 'hybridapp') && !config.url.startsWith('https://') && !config.url.startsWith('http://')) {
+                if (!ignoreProxyMap.has(config.url)) {
+                    config.url = process.env.VUE_APP_PROXY + config.url;
+                }
+            }
             return config;
         }, (error: any) => {
             return Promise.reject(error);

tslint.json

@@ -10,7 +10,7 @@
   },
   "rules": {
     "quotemark": false,
-    "indent": [true, "spaces", 2],
+    "indent": [true, "spaces", 4],
     "interface-name": false,
     "ordered-imports": false,
     "object-literal-sort-keys": false,