fix: 下拉加载定期任务传参，时间格式化修改

CHANGELOG.md

@@ -1,4 +1,4 @@
-# 0.1.0 (2021-07-22)
+# 0.1.0 (2021-07-23)
 
 ### 🌟 新功能
 范围|描述|commitId
@@ -15,6 +15,7 @@
  - | 时间轴修改状态时提示框增加 | [e841392](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/e841392)
  - | 提交到本地 | [9cbe411](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/9cbe411)
  - | 添加时间轴上下滚动 | [2b81bbc](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/2b81bbc)
+ - | 引入dayjs | [29b8b93](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/29b8b93)
  - | db store | [6414c4f](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/6414c4f)
  - | indexedDB | [687394e](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/687394e)
  - | post 封装 | [da52e94](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/da52e94)

src/components/TimeLine/TimeLine.vue

@@ -20,9 +20,9 @@
     id="scroll"
   >
     <!-- 时间轴 -->
-    <u-divider bg-color="#f3f4f6" v-if="topEnd">到顶啦</u-divider>
+    <u-divider bg-color="#f3f4f6" class="pt-5" v-if="topEnd">到顶啦</u-divider>
     <TimeBox />
-    <u-divider bg-color="#f3f4f6" v-if="bottomEnd">到底啦</u-divider>
+    <u-divider bg-color="#f3f4f6" class="pb-5" v-if="bottomEnd">到底啦</u-divider>
   </scroll-view>
 </template>
 
@@ -67,13 +67,14 @@ export default {
     // 滚动到底部
     async handleScrollBottom() {
       if (this.bottomEnd) return;
-      // TODO: 时间基准点=最后一个任务的开始时间+当前时间颗粒度
+      // 时间基准点=最后一个任务的开始时间+当前时间颗粒度
+      const cycle = this.$t.time.computeCycle('天');
+      const timeNode = this.$t.time.add(+this.tasks[this.tasks.length - 1].planStart, 1, cycle).valueOf();
       const downQuery = {
-        timeNode: +this.tasks[this.tasks.length - 1].planStart,
+        timeNode,
         queryType: 1,
         queryNum: 6,
       };
-      console.log('downQuery: ', downQuery);
       await this.$emit('getTasks', downQuery);
     },
 

src/components/TimeLine/component/TimeBox.vue

@@ -1,11 +1,10 @@
 <template>
-  <view class="px-3 pb-10">
+  <view class="px-3 py-5">
     <view :key="index" v-for="(item, index) in tasks">
-      <view class="flex items-center">
+      <view class="flex">
         <TimeStatus :content="JSON.stringify(item.process)" :status="item.process" />
-        <view class="flex justify-between flex-1 ml-2">
-          <view>{{ +item.planStart | date('mm-dd hh:MM') }}</view>
-          <!-- {{ item.planDuration }} -->
+        <view class="flex justify-between items-center flex-1 ml-2">
+          <view>{{ $moment(+item.planStart).format('MM-DD HH:mm') }} {{ $t.time.formatDuration(item.planDuration) }}</view>
           <view>
             <view class="flex justify-between" style="min-width: 180rpx">
               <u-icon custom-prefix="custom-icon" name="C-bxl-redux" size="34"></u-icon>
@@ -17,7 +16,14 @@
       </view>
       <view class="border-l-2 border-gray-300 ml-3.5 my-2">
         <view class="ml-4 overflow-hidden shadow-lg task-box">
-          <u-card :show-foot="false" :show-head="false" :style="{ height: setHeight(item.panel) }" class="h-16" margin="0">
+          <u-card
+            :show-foot="false"
+            :show-head="false"
+            :style="{ height: setHeight(item.panel) }"
+            @click="changeTimeNode(item.planStart)"
+            class="h-16"
+            margin="0"
+          >
             <!-- 任务面板插件 -->
             <view slot="body">
               <view :key="pluginIndex" class="p-0 u-col-between u-skeleton" v-for="(plugin, pluginIndex) in item.plugins">
@@ -57,7 +63,7 @@ export default {
   created() {},
 
   methods: {
-    ...mapMutations('home', ['setTipsContent', 'setTipsContent']),
+    ...mapMutations('home', ['setTipsContent', 'setTipsContent', 'setTimeNode']),
 
     // 设置任务面板高度
     setHeight(panel) {
@@ -67,6 +73,11 @@ export default {
         return 'auto';
       }
     },
+
+    // 点击任务面板 修改store时间基准点
+    changeTimeNode(time) {
+      this.setTimeNode(time);
+    },
   },
 };
 </script>

src/config/time.js

@@ -0,0 +1,17 @@
+export default {
+  timeUnits: [
+    // 时间颗粒度
+    { id: 0, value: '毫秒' },
+    { id: 1, value: '秒' },
+    { id: 2, value: '分' },
+    { id: 3, value: '时' },
+    { id: 4, value: '天' },
+    { id: 5, value: '周' },
+    { id: 6, value: '月' },
+    { id: 7, value: '季度' },
+    { id: 8, value: '年' },
+    { id: 9, value: '年代' },
+    { id: 10, value: '世纪' },
+    { id: 11, value: '千年' },
+  ],
+};

src/main.js

@@ -17,9 +17,11 @@ Vue.use(indexedDB);
 //#endif
 
 Vue.config.productionTip = false;
+Vue.prototype.$moment = dayjs;
 Vue.use(uView);
 Vue.use(Tall);
-Vue.use(dayjs);
+
+dayjs.locale('zh-cn');
 
 App.mpType = 'app';
 

src/pages/project/project.vue

@@ -23,6 +23,7 @@ export default {
 
   async onLoad(options) {
     console.log('options: ', options);
+
     // this.openPage();
     const TOKEN = uni.getStorageSync('anyringToken');
     if (!TOKEN || !this.token) {
@@ -109,8 +110,7 @@ export default {
      */
     async getPermanent() {
       try {
-        const res = await this.$u.api.getPermanent({ roleId: this.roleId });
-        console.log('res', res);
+        await this.$u.api.getPermanent({ roleId: this.roleId });
       } catch (error) {
         console.log('error: ', error);
       }

src/store/home/state.js

@@ -14,21 +14,6 @@ const state = {
   roleId: '', // 当前展示查看的角色id
   timeNode: new Date().getTime(), // 时间基准点
   timeUnit: 4, // // 时间颗粒度
-  timeUnits: [
-    // 时间颗粒度
-    { id: 0, value: '毫秒' },
-    { id: 1, value: '秒' },
-    { id: 2, value: '分' },
-    { id: 3, value: '时' },
-    { id: 4, value: '天' },
-    { id: 5, value: '周' },
-    { id: 6, value: '月' },
-    { id: 7, value: '季度' },
-    { id: 8, value: '年' },
-    { id: 9, value: '年代' },
-    { id: 10, value: '世纪' },
-    { id: 11, value: '千年' },
-  ],
   tasks: [], // 定期任务
   topEnd: false, // 时间轴向上查任务到顶了
   bottomEnd: false, // 时间轴向下查任务到底了

src/utils/time.js

@@ -29,6 +29,17 @@ const formatTime = beginTime => {
   return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}`;
 };
 
+/**
+ * 添加一定时间的时长
+ * @param {number | date} time
+ * @param {number} num
+ * @param {string} cycle
+ */
+const add = (time, num, cycle) => {
+  const str = dayjs(time).add(num, cycle);
+  return str;
+};
+
 /**
  * 时间转换 08:00 转换成8小时0分钟
  * @param {string} time
@@ -285,6 +296,7 @@ const formatStartTimeToCycleTime = (cycle, time) => {
 export default {
   formatNumber,
   formatTime,
+  add,
   convertTime,
   secondToMinute,
   setTimestampToStr,