refactor(task beginTime): 格式化任务开始时间

CHANGELOG.md

@@ -52,6 +52,7 @@
 ### 🐛 Bug 修复
 范围|描述|commitId
 --|--|--
+ task任务逻辑完善 | 减少初始global及regular的不必要请求 | bd4bd38
  - | 上下滑动加载定期任务 | 4090d89
  - | 上下滚动时间轴 | d533a01
  - | 下拉加载定期任务传参，时间格式化修改 | 0b95a0e

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "tall-mui-cli",
+  "name": "TALL",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint",
     "fix": "vue-cli-service lint --fix",
     "dev:h5": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-serve --mode development",
+    "dev:h5-pro": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-serve --mode production",
     "build:h5-test": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build --mode development",
     "build:h5": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build --mode production",
     "build:app-plus": "cross-env NODE_ENV=production UNI_PLATFORM=app-plus vue-cli-service uni-build",

src/components/TimeLine/TimeLine.vue

@@ -13,11 +13,11 @@
     id="scroll"
   >
     <!-- 时间轴 -->
-    <u-divider bg-color="#f3f4f6" class="pt-5" fontSize="14px" v-if="topEnd">到顶啦</u-divider>
+    <!-- <u-divider bg-color="#f3f4f6" class="pt-5" fontSize="14px" v-if="topEnd">到顶啦</u-divider> -->
 
     <TimeBox />
 
-    <u-divider bg-color="#f3f4f6" class="pb-5" fontSize="14px" v-if="bottomEnd">到底啦</u-divider>
+    <!-- <u-divider bg-color="#f3f4f6" class="pb-5" fontSize="14px" v-if="bottomEnd">到底啦</u-divider> -->
   </scroll-view>
 </template>
 

src/components/TimeLine/component/TaskTools.vue

@@ -0,0 +1,11 @@
+<template>
+  <view class="flex justify-between" style="min-width: 90px">
+    <u-icon custom-prefix="custom-icon" name="C-bxl-redux" size="17px"></u-icon>
+    <u-icon custom-prefix="custom-icon" name="attachment" size="21px"></u-icon>
+    <u-icon custom-prefix="custom-icon" name="moneycollect" size="20px"></u-icon>
+  </view>
+</template>
+
+<script>
+export default {};
+</script>

src/components/TimeLine/component/TimeBox.vue

@@ -3,17 +3,14 @@
     <view :key="index" v-for="(item, index) in tasks">
       <view class="flex">
         <TimeStatus :content="JSON.stringify(item.process)" :status="item.process" />
+
         <view class="flex items-center justify-between flex-1 ml-2 task-column">
           <view>
-            <span>{{ $moment(+item.planStart).format('MM-DD HH:mm') }}</span>
+            <span>{{ $moment(+item.planStart).format(startTimeFormat) }}</span>
-          </view>
-          <view>
-            <view class="flex justify-between" style="min-width: 90px">
-              <u-icon custom-prefix="custom-icon" name="C-bxl-redux" size="17px"></u-icon>
-              <u-icon custom-prefix="custom-icon" name="attachment" size="21px"></u-icon>
-              <u-icon custom-prefix="custom-icon" name="moneycollect" size="20px"></u-icon>
-            </view>
           </view>
+
+          <!-- 任务功能菜单 -->
+          <TaskTools />
         </view>
       </view>
       <view class="border-l-2 border-gray-300 plugin">
@@ -56,13 +53,14 @@
 </template>
 
 <script>
-import { mapState, mapMutations } from 'vuex';
+import { mapState, mapMutations, mapGetters } from 'vuex';
 import TimeStatus from './TimeStatus.vue';
 import Skeleton from '@/components/Skeleton/Skeleton';
+import TaskTools from './TaskTools.vue';
 
 export default {
   name: 'TimeBox',
-  components: { TimeStatus, Skeleton },
+  components: { TimeStatus, Skeleton, TaskTools },
   data() {
     return { currentComponent: '', styleType: 0 };
   },
@@ -70,6 +68,7 @@ export default {
   computed: {
     ...mapState('role', ['roleId']),
     ...mapState('task', ['timeNode', 'timeUnit', 'tasks', 'taskLoading']),
+    ...mapGetters('task', ['startTimeFormat']),
   },
 
   methods: {

src/config/time.js

@@ -1,17 +1,17 @@
 export default {
   timeUnits: [
     // 时间颗粒度
-    { id: 0, value: '毫秒' },
+    { id: 0, value: '毫秒', format: 'x', cycle: 'YY-M-D HH:mm:ss' },
-    { id: 1, value: '秒' },
+    { id: 1, value: '秒', format: 'x', cycle: 'YY-M-D HH:mm:ss' },
-    { id: 2, value: '分' },
+    { id: 2, value: '分', format: 'ss', cycle: 'YY-M-D HH:mm' },
-    { id: 3, value: '时' },
+    { id: 3, value: '时', format: 'mm', cycle: 'YY-M-D HH时' },
-    { id: 4, value: '天' },
+    { id: 4, value: '天', format: 'D日 HH:mm', cycle: 'YY-M-D' },
-    { id: 5, value: '周' },
+    { id: 5, value: '周', format: 'D日 HH:mm', cycle: '' },
-    { id: 6, value: '月' },
+    { id: 6, value: '月', format: 'D日 H:m', cycle: 'YYYY年' },
-    { id: 7, value: '季度' },
+    { id: 7, value: '季度', format: '', cycle: 'YYYY年' },
-    { id: 8, value: '年' },
+    { id: 8, value: '年', format: 'YYYY', cycle: '' },
-    { id: 9, value: '年代' },
+    { id: 9, value: '年代', format: '', cycle: '' },
-    { id: 10, value: '世纪' },
+    { id: 10, value: '世纪', format: '', cycle: '' },
-    { id: 11, value: '千年' },
+    { id: 11, value: '千年', format: '', cycle: '' },
   ],
 };

src/store/project/state.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 const state = {
   project: { name: '加载中...' }, // 当前项目信息
 };

src/store/task/getters.js

@@ -3,6 +3,13 @@ const getters = {
   globals({ dailyTasks, permanents }) {
     return [...permanents, ...dailyTasks];
   },
+
+  // 计算任务开始时间的格式
+  startTimeFormat({ timeUnit }) {
+    console.log(uni.$t);
+    const target = uni.$t.timeConfig.timeUnits.find(item => item.id === timeUnit);
+    return target.format || 'D日 HH:mm';
+  },
 };
 
 export default getters;

src/utils/tall.js

@@ -1,4 +1,5 @@
 import app from '@/config/app.js';
+import timeConfig from '@/config/time';
 import zIndex from '@/config/zIndex.js';
 import plugin from '@/config/plugin.js';
 import storage from '@/utils/storage.js';
@@ -11,6 +12,7 @@ const $t = {
   plugin, // 插件相关配置信息
   storage, // 本地存储storage封装
   time, // 时间处理
+  timeConfig, // 时间相关配置
   ui, // ui界面提示相关
 };