fix(i18n): 🐛 dayjs 切换语言不更新

fixed: #54

demo/App.vue

@@ -40,6 +40,7 @@
         end-key="endTime"
         expand-all
         highlight-date
+        locale="zh-cn"
         :dark="isDark"
         :gantt-column-size="colSize"
         :show-checkbox="showCheckbox"
@@ -114,7 +115,7 @@
 
           <template #title="data">
             <div>
-              <div>name---{{data}}</div>
+              <div>name---{{ data }}</div>
               <div>line2</div>
               <!-- <div>{{ a }}</div> -->
             </div>
@@ -138,8 +139,8 @@
 
         <XGanttColumn label="时间">
           <template #title="data">
-              <div style="padding: 12px 0">time from slot - {{data}}</div>
-            </template>
+            <div style="padding: 12px 0">time from slot - {{ data }}</div>
+          </template>
 
           <XGanttColumn prop="startTime" width="150" center :merge="merge4" />
 
@@ -151,9 +152,7 @@
             :merge="merge4"
           >
             <template #default="{ row }">
-              <div
-                :style="{ backgroundColor: `#${555}`, color: '#789' }"
-              >
+              <div :style="{ backgroundColor: `#${555}`, color: '#789' }">
                 abc - {{ row }}
               </div>
             </template>
@@ -199,7 +198,7 @@
       <button @click="() => (colSize = 'large')">大</button>
     </div>
     <button @click="changeUnit1">切换单位</button>
-    <button @click="() => useProgress = !useProgress">使用进度</button>
+    <button @click="() => (useProgress = !useProgress)">使用进度</button>
   </div>
 
   <div v-else aria-label="多页">
@@ -221,6 +220,7 @@
           :show-weekend="showWeekend2"
           :show-today="showToday2"
           :show-expand="showExpand2"
+          :unit="unit2"
           :data="dataList2"
           :links="linkList2"
           :header-style="headerStyle2"
@@ -296,6 +296,7 @@
         <button @click="() => (colSize2 = 'normal')">中</button>
         <button @click="() => (colSize2 = 'large')">大</button>
       </div>
+      <button @click="changeUnit2">切换单位</button>
     </div>
 
     <div style="padding-bottom: 10px">
@@ -444,6 +445,7 @@ export default defineComponent({
       showWeekend2: true,
       showToday2: true,
       showExpand2: true,
+      unit2: 'day',
       levelColor2: ['#123456', '#654321'] as string[],
       headerStyle2: {
         bgColor: '#684',
@@ -565,7 +567,7 @@ export default defineComponent({
     this.dataList2 = [
       {
         index: INDEX++,
-        startDate: '2023-05-01',
+        startDate: '2023-04-28',
         endDate: '2023-05-10',
         name: '2号数据: 1'
       },
@@ -661,12 +663,12 @@ export default defineComponent({
 
     merge4: function (data: any) {
       // return data.row.id % 4 !== 0;
-      return false
+      return false;
     },
 
     merge5: function (data: any) {
       // return data.row.id % 5 !== 0;
-      return false
+      return false;
     },
 
     handleMove: function ({
@@ -961,6 +963,12 @@ export default defineComponent({
       this.dataList2 = [...this.dataList2];
     },
 
+    changeUnit2() {
+      const u = ['month', 'week', 'day', 'hour'];
+      this.unit2 = u[(u.indexOf(this.unit2) + 1) % u.length];
+      console.log('this.unit2', this.unit2);
+    },
+
     handleClickDelete2() {
       console.log(this.dataList2.shift());
     },

demo/demo.vue

@@ -157,40 +157,70 @@ import DatePicker from './components/DatePicker.vue';
 
 let id = 0;
 
-const ganttData = reactive<any>([]);
+// const ganttData = reactive<any>([]);
 
-for (let i = 0; i < 50; i++) {
-  onAdd();
-}
+// for (let i = 0; i < 50; i++) {
+//   onAdd();
+// }
 
-ganttData[0].children = [
-  {
-    index: ++id,
-    name: 'sub-t' + id,
-    startDate: new Date(2023, 3, 5),
-    endDate: new Date(2023, 3, 5, 23, 59, 59),
-    progress: 0.8,
-    o: { t1: 'a', t2: 'b' }
-  },
+// ganttData[0].children = [
+//   {
+//     index: ++id,
+//     name: 'sub-t' + id,
+//     startDate: new Date(2023, 3, 5),
+//     endDate: new Date(2023, 3, 5, 23, 59, 59),
+//     progress: 0.8,
+//     o: { t1: 'a', t2: 'b' }
+//   },
+//   {
+//     index: ++id,
+//     name: 'sub-t' + id,
+//     startDate: new Date(2023, 3, 6),
+//     endDate: new Date(2023, 3, 10),
+//     progress: 0.5,
+//     o: { t1: 'a', t2: 'b' },
+//     children: [
+//       {
+//         index: ++id,
+//         name: 'sub-sub-t' + id,
+//         startDate: new Date(2023, 3, 5),
+//         endDate: new Date(2023, 3, 10),
+//         progress: 0.3333333333,
+//         o: { t1: 'a', t2: 'b' }
+//       }
+//     ]
+//   }
+// ];
+
+const ganttData = reactive([
   {
-    index: ++id,
-    name: 'sub-t' + id,
-    startDate: new Date(2023, 3, 6),
-    endDate: new Date(2023, 3, 10),
-    progress: 0.5,
-    o: { t1: 'a', t2: 'b' },
+    index: '2',
+    type: 1,
+    startDate: new Date('2022-02-19'),
+    endDate: new Date('2022-07-24'),
     children: [
       {
-        index: ++id,
-        name: 'sub-sub-t' + id,
-        startDate: new Date(2023, 3, 5),
-        endDate: new Date(2023, 3, 10),
-        progress: 0.3333333333,
-        o: { t1: 'a', t2: 'b' }
+        index: '20000001',
+        startDate: new Date('2022-03-09'),
+        endDate: new Date('2022-07-17'),
+        children: [
+          {
+            index: '2000000101',
+            startDate: new Date('2022-03-09'),
+            endDate: new Date('2022-07-17'),
+            children: []
+          },
+          {
+            index: '2000000102',
+            startDate: new Date('2022-03-09'),
+            endDate: new Date('2022-06-19'),
+            children: []
+          }
+        ]
       }
     ]
   }
-];
+]);
 
 let linkId = 1;
 const ganttLinks = reactive([

demo/main.ts

@@ -1,16 +1,8 @@
 import { createApp } from 'vue';
 import App from './App.vue';
 // import App from './demo.vue';
-import dayjs from 'dayjs';
-import 'dayjs/locale/zh-cn';
-
-import Gantt from '../src/index';
-
-dayjs.locale('zh-cn');
-
-console.log('main', dayjs.locale());
-
-// import Gantt from '../dist/index.es';
-// import '../dist/style.css';
+import Gantt from '../dist/index.es';
+// import Gantt from '../src/index';
+import '../dist/style.css';
 
 createApp(App).use(Gantt).mount('#app');

src/components/root/index.vue

@@ -84,10 +84,14 @@ import useLinks from '@/composables/useLinks';
 import Variables from '@/constants/vars';
 import useExport from '@/composables/useExport';
 import useElement from '@/composables/useElement';
+import { setLocale } from '@/utils/date';
 
 const containerId = uuid(10);
 const props = defineProps(rootProps);
 
+// 本地化
+setLocale(props.locale);
+
 // #region 挂载实例
 const { rootRef } = useRoot();
 // #endregion

src/components/root/rootProps.ts

@@ -236,5 +236,13 @@ export default {
   draggable: {
     type: [Object, Boolean] as PropType<boolean | Partial<DraggableOptions>>,
     default: false
+  },
+
+  /**
+   * 国际化
+   */
+  locale: {
+    type: String,
+    default: 'en'
   }
 };

src/utils/date.ts

@@ -1,8 +1,11 @@
 import dayjs from 'dayjs';
 import weekOfYear from 'dayjs/plugin/weekOfYear';
 import IsoWeek from 'dayjs/plugin/isoWeek';
+import localeData from 'dayjs/plugin/localeData';
+import updateLocale from 'dayjs/plugin/updateLocale';
 import advancedFormat from 'dayjs/plugin/advancedFormat';
 import Variables from '@/constants/vars';
+import './lang';
 
 /** ********************************** */
 /** *** 下面方法全部使用 dayjs 实现 **** */
@@ -15,8 +18,30 @@ dayjs.extend(IsoWeek);
 // 添加自定义格式化
 dayjs.extend(advancedFormat);
 
+// 添加本地化
+dayjs.extend(localeData);
+dayjs.extend(updateLocale);
+
 export const day = dayjs;
 
+let L = 'en';
+
+export function setLocale(locale: string) {
+  if (L === locale) return;
+
+  L = locale;
+  day.locale(locale);
+}
+
+/**
+ * 更新本地化
+ */
+export function updateLocaleData() {
+  dayjs.updateLocale(L, {
+    weekStart: 1
+  });
+}
+
 /**
  * 获取对应单位的毫秒数
  * @param unit