refactor: project 代码健壮性完善

CHANGELOG.md

@@ -15,6 +15,7 @@
  - | 时间基准线，默认插件 | [a33ba1e](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/a33ba1e)
  - | 时间轴修改状态时提示框增加 | [e841392](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/e841392)
  - | 时间轴界面 | [33927e9](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/33927e9)
+ - | 标题栏变化 | [3898cfe](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/3898cfe)
  - | 标题栏变化 | [c0fcd9d](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/c0fcd9d)
  - | 标题栏角色栏全局任务组件新建 | [0500cb4](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/0500cb4)
  - | 模拟接口测试 | [69e7931](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/69e7931)

src/components/TimeLine/TimeLine.vue

@@ -1,10 +1,3 @@
-<!--
- * @Author: aBin
- * @email: binbin0314@126.com
- * @Date: 2021-07-19 14:15:35
- * @LastEditors: aBin
- * @LastEditTime: 2021-07-20 14:22:11
--->
 <template>
   <!-- 时间间隔栏 -->
   <!-- <Barrier /> -->
@@ -30,6 +23,7 @@
 // import Barrier from './component/Barrier.vue';
 import { mapState, mapMutations } from 'vuex';
 import TimeBox from './component/TimeBox.vue';
+
 export default {
   name: 'TimeLine',
   components: { TimeBox },

src/components/TimeLine/component/TimeStatus.vue

@@ -1,23 +1,16 @@
-<!--
- * @Author: aBin
- * @email: binbin0314@126.com
- * @Date: 2021-07-19 15:47:38
- * @LastEditors: aBin
- * @LastEditTime: 2021-07-19 19:39:36
--->
 <template>
   <view>
-    <view class="rounded-full h-7 w-7 flex items-center justify-center text-blue-400" v-if="status === 0" @tap="changeStatus($event, 0)">
+    <view class="flex items-center justify-center text-blue-400 rounded-full h-7 w-7" v-if="status === 0" @tap="changeStatus($event, 0)">
       <u-circle-progress :percent="100" active-color="#2979ff" bgColor="rgba(255,255,255,0)" borderWidth="4" width="66">
         <view class="u-progress-content">
           <view class="u-progress-dot"></view>
-          <text class="u-progress-info">
+          <view class="u-progress-info">
             <u-icon name="checkmark" size="30"></u-icon>
-          </text>
+          </view>
         </view>
       </u-circle-progress>
     </view>
-    <view class="rounded-full h-7 w-7 flex items-center justify-center text-black" v-if="status === 1" @tap="changeStatus($event, 1)">
+    <view class="flex items-center justify-center text-black rounded-full h-7 w-7" v-if="status === 1" @tap="changeStatus($event, 1)">
       <u-circle-progress :percent="80" active-color="#2979ff" bgColor="rgba(255,255,255,0)" borderWidth="6" width="66">
         <view class="u-progress-content">
           <view class="u-progress-dot"></view>
@@ -25,27 +18,27 @@
         </view>
       </u-circle-progress>
     </view>
-    <view class="rounded-full h-7 w-7 flex items-center justify-center text-gray-400" v-if="status === 2" @tap="changeStatus($event, 2)">
+    <view class="flex items-center justify-center text-gray-400 rounded-full h-7 w-7" v-if="status === 2" @tap="changeStatus($event, 2)">
       <u-circle-progress :percent="40" active-color="#2979ff" bgColor="rgba(255,255,255,0)" borderWidth="6" width="66">
         <view class="u-progress-content">
           <view class="u-progress-dot"></view>
-          <text class="u-progress-info">
+          <view class="u-progress-info">
             <u-icon name="play-right-fill" size="30"></u-icon>
-          </text>
+          </view>
         </view>
       </u-circle-progress>
     </view>
     <view
-      class="rounded-full h-7 w-7 flex items-center justify-center text-red-800 font-black"
+      class="flex items-center justify-center font-black text-red-800 rounded-full h-7 w-7"
       v-if="status === 3"
       @tap="changeStatus($event, 3)"
     >
       <u-circle-progress :percent="80" active-color="#2979ff" bgColor="rgba(255,255,255,0)" borderWidth="6" width="66">
         <view class="u-progress-content">
           <view class="u-progress-dot"></view>
-          <text class="u-progress-info">
+          <view class="u-progress-info">
             <u-icon name="pause" size="30"></u-icon>
-          </text>
+          </view>
         </view>
       </u-circle-progress>
     </view>
@@ -53,56 +46,30 @@
 </template>
 <script>
 import { mapMutations } from 'vuex';
+
 export default {
   name: 'TimeStatus',
   props: {
-    status: {
+    status: { default: 0, type: Number },
-      default: 0,
+    content: { default: '', type: String },
-      type: Number,
-    },
-    content: {
-      default: '',
-      type: String,
-    },
   },
+
   data() {
     return {
       time: 20,
-      start: [
+      start: [{ text: '确认开始任务', color: 'blue' }],
-        {
+      pause: [{ text: '继续' }, { text: '重新开始任务', color: 'blue' }, { text: '结束' }],
-          text: '确认开始任务',
+      proceed: [{ text: '暂停' }, { text: '重新开始任务', color: 'blue' }, { text: '结束' }],
-          color: 'blue',
+      again: [{ text: '重新开始任务', color: 'blue' }],
-        },
-      ],
-      pause: [
-        { text: '继续' },
-        {
-          text: '重新开始任务',
-          color: 'blue',
-        },
-        { text: '结束' },
-      ],
-      proceed: [
-        { text: '暂停' },
-        {
-          text: '重新开始任务',
-          color: 'blue',
-        },
-        { text: '结束' },
-      ],
-      again: [
-        {
-          text: '重新开始任务',
-          color: 'blue',
-        },
-      ],
     };
   },
   methods: {
     ...mapMutations('home', ['setClient', 'setTips', 'setStatus', 'setTipsContent']),
+
     chooseList() {
       return this.start;
     },
+
     changeStatus(e, num) {
       this.setStatus(num);
       this.setTipsContent(this.chooseTips(num, this.content));
@@ -113,6 +80,7 @@ export default {
       this.setClient(client);
       this.setTips(true);
     },
+
     chooseTips(num, content) {
       switch (num) {
         case 0:

src/components/Title/Title.vue

@@ -22,15 +22,5 @@ export default {
   },
 
   computed: mapState('home', ['project']),
-
-  mounted() {},
-  methods: {},
 };
 </script>
-
-<style scoped lang="scss">
-.slot-warp {
-  display: flex;
-  justify-content: flex-end;
-}
-</style>

src/config/app.js

@@ -4,4 +4,5 @@ export default {
   V: version,
   version,
   theme: [],
+  tokenKey: 'anyringToken', // storage token key
 };

src/pages/project/project.vue

@@ -1,9 +1,13 @@
 <template>
   <view :style="{ height: height }" class="flex flex-col overflow-hidden">
+    <!-- 标题栏 -->
     <Title />
     <view class="container flex flex-col flex-1 overflow-hidden bg-gray-100">
+      <!-- 角色栏 -->
       <Roles @getTasksByRole="getTasksByRole" />
+      <!-- 日常任务 -->
       <Globals :plugins="plugins" />
+      <!-- 定期任务 -->
       <TimeLine @getTasks="getTasks" class="flex-1 overflow-hidden" ref="child" />
     </view>
   </view>
@@ -11,9 +15,10 @@
 
 <script>
 import { mapState, mapMutations, mapActions } from 'vuex';
+
 export default {
   data() {
-    return { title: 'Hello', height: '', scrollHeight: null, plugins: [] };
+    return { height: '', plugins: [] };
   },
 
   computed: {
@@ -21,32 +26,8 @@ export default {
     ...mapState('home', ['visibleRoles', 'roleId', 'timeNode', 'timeUnit', 'tasks']),
   },
 
-  async onLoad(options) {
+  onLoad(options) {
-    console.log('options: ', options);
+    this.init(options);
-    // this.openPage();
-    const TOKEN = uni.getStorageSync('anyringToken');
-    if (!TOKEN || !this.token) {
-      await this.getUserId(options.u);
-    }
-    const params = { projectId: options.p };
-    this.setProjectName(options.pname);
-    // 根据项目id获取项目信息
-    await this.getProjectById(params);
-    // 根据项目id获取角色列表
-    await this.getRoles(params);
-    this.setInitialRoleId(this.visibleRoles);
-    // 根据时间基准点和角色查找定期任务
-    await this.getTasks({ queryType: 0 });
-    await this.getTasks({ queryType: 1 });
-    // 根据角色查找永久的日常任务
-    await this.getPermanent();
-    // 根据时间和角色查找日常任务
-    await this.getGlobal();
-    // 查上下的定期任务
-    if (this.tasks && this.tasks.length) {
-      await this.getTasks({ timeNode: +this.tasks[0].planStart, queryType: 0, queryNum: 6 });
-      await this.getTasks({ timeNode: +this.tasks[this.tasks.length - 1].planStart, queryType: 1, queryNum: 6 });
-    }
   },
 
   mounted() {
@@ -66,10 +47,61 @@ export default {
     ]),
     ...mapActions('user', ['getUserId']),
     ...mapActions('home', ['getProjectById', 'getRoles', 'handleRegularTask']),
+    ...mapMutations('user', ['setToken']),
+
+    /**
+     * 初始化
+     * @param {object | null} options
+     */
+    async init(options) {
+      try {
+        if (!this.token) {
+          // store里没有token 再从本地去取
+          const TOKEN = this.$t.storage.getStorageSync(this.$t.app.tokenKey);
+          if (TOKEN) {
+            // 如果本地有token 就更新到store里边
+            this.setToken(TOKEN);
+          } else {
+            // 没有token 根据userId获取到token
+            if (!options || !options.u) {
+              // 参数里没有u (userId)提示
+              this.$t.ui.showToast('缺少用户信息参数');
+            } else {
+              await this.getUserId(options.u);
+            }
+          }
+        }
 
-    openPage() {
+        // 参数里有项目名称  就设置标题里的项目名称
-      console.log('open');
+        options && options.pname && this.setProjectName(options.pname);
-      this.$u.route('/pages/pinch/pinch');
+
+        if (!options || !options.p) {
+          // 没有项目id参数
+          this.$t.ui.showToast('缺少项目信息参数');
+        } else {
+          // 根据项目id获取项目信息
+          await this.getProjectById({ projectId: options.p });
+          // 根据项目id获取角色列表
+          await this.getRoles({ projectId: options.p });
+          this.setInitialRoleId(this.visibleRoles);
+
+          // 根据时间基准点和角色查找定期任务
+          await this.getTasks({ queryType: 0 });
+          await this.getTasks({ queryType: 1 });
+
+          // 根据角色查找 永久的日常任务
+          await this.getPermanent();
+          // 根据时间和角色查找 可变的日常任务
+          await this.getGlobal();
+          // 预加载 上下的定期任务
+          if (this.tasks && this.tasks.length) {
+            await this.getTasks({ timeNode: +this.tasks[0].planStart, queryType: 0, queryNum: 6 });
+            await this.getTasks({ timeNode: +this.tasks[this.tasks.length - 1].planStart, queryType: 1, queryNum: 6 });
+          }
+        }
+      } catch (error) {
+        console.error('project init function:', error);
+      }
     },
 
     // 设置 初始显示角色信息
@@ -110,6 +142,7 @@ export default {
     async getPermanent() {
       try {
         const res = await this.$u.api.getPermanent({ roleId: this.roleId });
+        // TODO:
         console.log('res', res);
       } catch (error) {
         console.log('error: ', error);

src/store/messages/mutations.js

@@ -1,4 +1,5 @@
-import { setStorageSync, getStorageSync, removeStorageSync } from '@/utils/storage';
+import storage from '@/utils/storage';
+const { setStorageSync, getStorageSync, removeStorageSync } = storage;
 
 const mutations = {
   /**

src/store/user/mutations.js

@@ -5,9 +5,8 @@ const mutations = {
    * @param {string} token
    */
   setToken(state, token) {
-    if (!token) return;
+    state.token = token || '';
-    state.token = token;
+    uni.$t.storage.setStorageSync(uni.$t.app.tokenKey, token || '');
-    uni.setStorageSync('anyringToken', token);
   },
 
   /**

src/utils/request.js

@@ -11,7 +11,6 @@ const install = (Vue, vm) => {
 
   // 请求拦截部分，如配置，每次请求前都会执行
   Vue.prototype.$u.http.interceptor.request = config => {
-    // TODO: 如果在白名单里 则不需要加token
     if (vm.$store.state.user.token) {
       config.header.Authorization = `Bearer ${vm.$store.state.user.token}`;
     }

src/utils/tall.js

@@ -3,6 +3,7 @@ import zIndex from '@/config/zIndex.js';
 import plugin from '@/config/plugin.js';
 import storage from '@/utils/storage.js';
 import time from '@/utils/time.js';
+import ui from '@/utils/ui.js';
 
 const $t = {
   zIndex, // 定位元素层级
@@ -10,6 +11,7 @@ const $t = {
   plugin, // 插件相关配置信息
   storage, // 本地存储storage封装
   time, // 时间处理
+  ui, // ui界面提示相关
 };
 
 uni.$t = $t;

src/utils/time.js

@@ -1,6 +1,7 @@
 import dayjs from 'dayjs';
-var advancedFormat = require('dayjs/plugin/advancedFormat');
+const advancedFormat = require('dayjs/plugin/advancedFormat');
-var weekOfYear = require('dayjs/plugin/weekOfYear');
+const weekOfYear = require('dayjs/plugin/weekOfYear');
+
 dayjs.extend(advancedFormat);
 dayjs.extend(weekOfYear);
 

src/utils/ui.js

@@ -0,0 +1,56 @@
+export default {
+  /**
+   * 显示toast
+   * @param {string} title 提示内容
+   * @param {number} duration 显示时间 默认2000
+   */
+  showToast(title, duration = 2000) {
+    return uni.showToast({
+      title,
+      icon: 'none',
+      duration,
+      mask: true,
+    });
+  },
+
+  // 隐藏toast
+  hideToast() {
+    return uni.hideToast();
+  },
+
+  /**
+   * 显示加载雪花
+   * @param {string} title
+   */
+  showLoading(title) {
+    return uni.showLoading({
+      title,
+      mask: true,
+    });
+  },
+
+  // 隐藏loading
+  hideLoading() {
+    return uni.hideLoading();
+  },
+
+  /**
+   * 显示modal弹出框
+   * @param {string} title 标题
+   * @param {string} content 内容
+   * @param {boolean} showCancel 是否显示取消按钮 默认true
+   */
+  showModal(title, content, showCancel = true) {
+    return new Promise(function (resolve, reject) {
+      uni.showModal({
+        title,
+        content,
+        showCancel,
+        success: ({ confirm, cancel }) => {
+          confirm && resolve();
+          cancel && reject();
+        },
+      });
+    });
+  },
+};