Merge remote-tracking branch 'origin/song' into temp

CHANGELOG.md

@@ -66,6 +66,7 @@
 ### 🔨 代码重构
 范围|描述|commitId
 --|--|--
+ - | project 代码健壮性完善 | [a3202c5](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/a3202c5)
  - | 下滑时间轴添加备注 | [4fd20e3](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/4fd20e3)
  template | eslint prettier sass uview tailwindcss | [9c966a1](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/9c966a1)
 

src/apis/plugin.js

@@ -1,9 +1,11 @@
 const apiUrl = process.env.VUE_APP_API_URL;
 const mock = `${apiUrl}/defaultwbs`;
+const plugin = `${apiUrl}/pluginshop/plugin`;
 
 const install = (Vue, vm) => {
   vm.$u.api = { ...vm.$u.api } || {};
-  vm.$u.api.getPlugin = param => vm.$u.post(`${mock}/plugin`, { param });
+  vm.$u.api.getPlugin = param => vm.$u.post(`${mock}/plugin`, param);
+  vm.$u.api.getOtherPlugin = param => vm.$u.post(`${plugin}/query`, param);
 };
 
 export default { install };

src/components/Globals/Globals.vue

@@ -3,14 +3,14 @@
     <u-card :show-foot="false" :show-head="false" :style="{ height: isShrink ? '96rpx' : '300rpx' }" border-radius="25" margin="0">
       <view slot="body">
         <scroll-view :scrollY="true" :style="{ height: isShrink ? '40rpx' : '240rpx' }">
-          <skeleton :banner="false" :loading="loading" :row="4" animate class="mt-2 u-line-2 skeleton"></skeleton>
+          <skeleton :banner="false" :loading="!plugins.length" :row="4" animate class="mt-2 u-line-2 skeleton"></skeleton>
           <view class="p-0 u-col-between">
-            <view class="grid grid-cols-3 gap-2 h-36" v-if="plugins.length">
+            <view class="grid grid-cols-3 gap-2 h-auto" v-if="plugins.length">
               <Plugin
-                :class="getClass(plugin.col, plugin.row)"
+                :class="getClass(plugin.colspan, plugin.rowspan)"
                 :key="pluginIndex"
-                :pluginId="pluginId"
-                :styleType="styleType"
+                :pluginId="plugin.pluginId"
+                :styleType="plugin.styleType || 0"
                 v-for="(plugin, pluginIndex) in plugins"
               />
             </view>
@@ -31,16 +31,16 @@ export default {
   props: { plugins: { type: Array, default: () => [] } },
   data() {
     return {
-      loading: true,
+      // loading: true,
       pluginId: 0,
       styleType: 0,
       task: null,
     };
   },
 
-  mounted() {
-    setTimeout(() => (this.loading = false), 2000);
-  },
+  // mounted() {
+  //   setTimeout(() => (this.loading = false), 2000);
+  // },
   computed: mapState('home', ['isShrink']),
   methods: {
     getClass(col, row) {

src/components/Plugin/Plugin.vue

@@ -1,28 +1,64 @@
 <template>
-  <view v-if="pluginContent && pluginContent.html" style="height: 100%">
-    <!-- <view> {{ pluginContent.html }} </view> -->
-    <view v-html="pluginContent.html" style="height: 100%"> </view>
-    <!-- <u-parse :html="pluginContent.html" ref="ht-box"></u-parse> -->
+  <view>
+    <view style="height: 100%" v-if="pluginContent">
+      <view v-if="pluginContent.html">
+        <view style="height: 100%" v-html="pluginContent.html"></view>
+      </view>
+      <view v-else>
+        <view v-if="item && item.name">
+          <p-task-title :item="item" v-if="pluginId === '1'" />
+          <p-task-description :item="item" v-if="pluginId === '2'" />
+          <p-task-duration-delay :item="item" v-if="pluginId === '3'" />
+          <p-task-start-time-delay :item="item" v-if="pluginId === '4'" />
+          <p-deliverable :item="item" v-if="pluginId === '5'" />
+          <p-subtasks :item="item" v-if="pluginId === '6'" />
+          <p-subproject :item="item" v-if="pluginId === '7'" />
+          <p-task-countdown :item="item" v-if="pluginId === '8'" />
+        </view>
+      </view>
+    </view>
   </view>
 </template>
 
 <script>
 export default {
   name: 'Plugin',
+  props: {
+    item: {
+      default: () => {},
+      type: Object,
+    },
+    pluginId: {
+      default: '0',
+      type: String,
+    },
+    styleType: {
+      default: 0,
+      type: Number,
+    },
+  },
   data() {
     return { pluginContent: null };
   },
-  async mounted() {
+  async created() {
     await this.getPlugin();
-    console.log(this.pluginContent.js);
+    if (this.pluginContent.js) {
+      var scriptDom = document.createElement('script');
+      scriptDom.id = `p${this.pluginContent.pluginId}`;
+      scriptDom.innerHTML = this.pluginContent.js;
+      document.body.append(scriptDom);
+    }
   },
   methods: {
     async getPlugin() {
-      const res = await this.$u.api.getPlugin({
-        pluginId: 0,
-        styleType: 0,
+      const { pluginId, styleType } = this;
+      const res = await this.$u.api.getOtherPlugin({
+        pluginId,
+        styleType,
       });
+      this.$emit('changeLoading', false);
       this.pluginContent = res;
+      console.log(this.pluginContent);
     },
   },
 };

src/components/Roles/Roles.vue

@@ -93,7 +93,7 @@ export default {
         //改变index 即手动点击切换 我在此时将当前元素赋值给左边距 实现自动滚动
         this.setCurrentRole(index);
         // 清空定期任务数据
-        this.setTasks([]);
+        this.setTasks();
         // 根据时间基准点和角色查找定期任务
         await this.$emit('getTasksByRole');
       } catch (error) {

src/components/TimeLine/TimeLine.vue

@@ -13,9 +13,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>
 
@@ -61,13 +61,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);
     },
 
@@ -77,11 +78,18 @@ export default {
       if (tasks && tasks.length) {
         let tasksHeight = 0;
         const scrollHeight = document.getElementById('scroll').clientHeight;
+        let width = document.documentElement.clientWidth;
         for (let i = 0; i < 3; i++) {
           // TODO: 高度不对
-          // if (tasks[i].panel && tasks[i].panel.height) {
-          //   tasksHeight += +tasks[i].panel.height + 42;
-          // }
+          if (tasks[i].panel && tasks[i].panel.height) {
+            // 如果后台返回了高度，就用返回得任务面板高度 + 固定边距42
+            tasksHeight += +tasks[i].panel.height + 42;
+          } else {
+            // 如果没有返回高度，就用rem + 固定边距42
+            // 因为 u-card 在没有返回高度时 固定高度为 h-16 = 4rem
+            // 所里这里 += 1rem + 42 = width / 20 + 42
+            tasksHeight += (width / 20) * 4 + 42;
+          }
         }
         this.top = tasksHeight - scrollHeight / 2;
         console.log('this.top: ', this.top);

src/components/TimeLine/component/TimeBox.vue

@@ -1,11 +1,12 @@
 <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>
+            <span>{{ $moment(+item.planStart).format('MM-DD HH:mm') }}</span>
+          </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,20 +18,34 @@
       </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"
+            v-if="item.plugins && item.plugins.length"
+          >
             <!-- 任务面板插件 -->
             <view slot="body">
-              <view :key="pluginIndex" class="p-0 u-col-between u-skeleton" v-for="(plugin, pluginIndex) in item.plugins">
-                <!-- <view :key="p.pluginId" v-for="p in plugin">
-                  <p-task-title :item="item" v-if="p.pluginId === 1" />
-                  <p-task-description :item="item" v-if="p.pluginId === 2" />
-                  <p-task-duration-delay :item="item" v-if="p.pluginId === 3" />
-                  <p-task-start-time-delay :item="item" v-if="p.pluginId === 4" />
-                  <p-deliverable :item="item" v-if="p.pluginId === 5" />
-                  <p-subtasks :item="item" v-if="p.pluginId === 6" />
-                  <p-subproject :item="item" v-if="p.pluginId === 7" />
-                  <p-task-countdown :item="item" v-if="p.pluginId === 8" />
-                </view>-->
+              <view v-if="!item.plugins && !item.plugins.length && taskLoading">
+                <skeleton :banner="false" :loading="true" :row="4" animate class="mt-2 u-line-2 skeleton"></skeleton>
+              </view>
+              <view class="p-0 u-col-between" v-else>
+                <view :key="pIndex" v-for="(p, pIndex) in item.plugins">
+                  <view class="grid gap-2" v-if="p.length">
+                    <Plugin
+                      :class="getClass(plugin.colspan, plugin.rowspan)"
+                      :item="item"
+                      :key="pluginIndex"
+                      :pluginId="plugin.pluginId"
+                      :styleType="styleType"
+                      @changeLoading="taskLoading = false"
+                      v-for="(plugin, pluginIndex) in p"
+                    />
+                  </view>
+                </view>
               </view>
             </view>
           </u-card>
@@ -44,12 +59,13 @@
 <script>
 import { mapState, mapMutations } from 'vuex';
 import TimeStatus from './TimeStatus.vue';
+import Skeleton from '@/components/Skeleton/Skeleton';
 
 export default {
   name: 'TimeBox',
-  components: { TimeStatus },
+  components: { TimeStatus, Skeleton },
   data() {
-    return { currentComponent: '' };
+    return { currentComponent: '', styleType: 0, taskLoading: true };
   },
 
   computed: mapState('home', ['roleId', 'timeNode', 'timeUnit', 'tasks']),
@@ -57,7 +73,7 @@ export default {
   created() {},
 
   methods: {
-    ...mapMutations('home', ['setTipsContent', 'setTipsContent']),
+    ...mapMutations('home', ['setTipsContent', 'setTipsContent', 'setTimeNode']),
 
     // 设置任务面板高度
     setHeight(panel) {
@@ -67,6 +83,16 @@ export default {
         return 'auto';
       }
     },
+
+    // 点击任务面板 修改store时间基准点
+    changeTimeNode(time) {
+      this.setTimeNode(time);
+    },
+
+    // 设置网格布局
+    getClass(col, row) {
+      return [`row-span-${row}`, `col-span-${col}`];
+    },
   },
 };
 </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/mock/mock.js

@@ -177,11 +177,11 @@ export default [
             plugins: [
               [
                 {
-                  col: 123,
+                  col: 1,
                   colspan: 123,
                   param: 123,
-                  pluginId: 123456789,
-                  row: 123,
+                  pluginId: 13,
+                  row: 2,
                   rowspan: 123,
                 },
               ],
@@ -226,11 +226,11 @@ export default [
             plugins: [
               [
                 {
-                  col: 123,
+                  col: 1,
                   colspan: 123,
                   param: 123,
-                  pluginId: 123456789,
-                  row: 123,
+                  pluginId: 13,
+                  row: 1,
                   rowspan: 123,
                 },
               ],
@@ -387,7 +387,7 @@ export default [
         msg: 'ok',
         success: true,
         data: {
-          html: 'string',
+          html: '<div style="background:#0f0;height:100%"></div>',
           id: 13,
           intro: 'string',
           js: 'string',

src/pages/project/project.vue

@@ -30,6 +30,29 @@ export default {
     this.init(options);
   },
 
+  watch: {
+    /**
+     * 当时间基准点发生变化时
+     * 重新根据时间和角色查询普通日常任务
+     * 永久日常任务不发生改变
+     */
+    async timeNode() {
+      // 根据时间和角色查找日常任务
+      await this.getGlobal();
+    },
+    /**
+     * 当角色发生变化时
+     * 重新查询永久日常任务和普通日常任务
+     */
+    async roleId() {
+      this.setTimeNode(new Date().getTime());
+      // 根据角色查找永久的日常任务
+      await this.getPermanent();
+      // 根据时间和角色查找日常任务
+      await this.getGlobal();
+    },
+  },
+
   mounted() {
     this.height = window.screen.height + 'px';
   },
@@ -44,6 +67,7 @@ export default {
       'setDownTasks',
       'setDailyTasks',
       'setProjectName',
+      'setTimeNode',
     ]),
     ...mapActions('user', ['getUserId']),
     ...mapActions('home', ['getProjectById', 'getRoles', 'handleRegularTask']),
@@ -141,8 +165,11 @@ export default {
      */
     async getPermanent() {
       try {
+        this.allPlugins = [];
         const res = await this.$u.api.getPermanent({ roleId: this.roleId });
-        // TODO:
+        for (let item of res) {
+          this.allPlugins = this.allPlugins.concat(item.plugins);
+        }
         console.log('res', res);
       } catch (error) {
         console.log('error: ', error);
@@ -157,12 +184,13 @@ export default {
      */
     async getGlobal() {
       try {
+        this.timePlugins = [];
         const { roleId, timeNode, timeUnit } = this;
         const params = { roleId, timeNode, timeUnit };
         const res = await this.$u.api.getGlobal(params);
         for (let task of res) {
           for (let item of task.plugins) {
-            this.plugins.push(...item);
+            this.timePlugins.push(...item);
           }
         }
         this.setDailyTasks(res);
@@ -176,15 +204,20 @@ export default {
       try {
         await this.getTasks({ queryType: 0 });
         await this.getTasks({ queryType: 1 });
-        // 查上下的任务
+        // 查上页的任务
         const upQuery = {
           timeNode: +this.tasks[0].planStart,
           queryType: 0,
           queryNum: 6,
         };
         await this.getTasks(upQuery);
+
+        // 查下页的任务
+        // 时间基准点=最后一个任务的开始时间+当前时间颗粒度
+        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,
         };

src/store/home/mutations.js

@@ -125,7 +125,12 @@ const mutations = {
     if (!data || !data.length) {
       state.topEnd = true;
     }
-    state.tasks = [...data.concat(state.tasks)] || [];
+    console.log('!state.tasks.plugins.length: ', !state.tasks[0].name);
+    if (!state.tasks[0].name) {
+      state.tasks = [...data];
+    } else {
+      state.tasks = [...data.concat(state.tasks)];
+    }
   },
 
   /**
@@ -137,16 +142,36 @@ const mutations = {
     if (!data || !data.length) {
       state.bottomEnd = true;
     }
-    state.tasks = [...state.tasks.concat(data)] || [];
+    if (!state.tasks[0].name) {
+      state.tasks = [...data];
+    } else {
+      state.tasks = [...state.tasks.concat(data)];
+    }
   },
 
   /**
    * 清空定期任务数据
    * @param {Object} state
-   * @param {Array} data 服务端返回的模板数组
    */
-  setTasks(state, data) {
-    state.tasks = data || [];
+  setTasks(state) {
+    const data = [
+      {
+        panel: {},
+        plugins: [],
+        planStart: new Date().getTime(),
+      },
+      {
+        panel: {},
+        plugins: [],
+        planStart: new Date().getTime(),
+      },
+      {
+        panel: {},
+        plugins: [],
+        planStart: new Date().getTime(),
+      },
+    ];
+    state.tasks = data;
   },
 
   /**

src/store/home/state.js

@@ -14,22 +14,23 @@ 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: [], // 定期任务
+  tasks: [
+    {
+      panel: {},
+      plugins: [],
+      planStart: new Date().getTime(),
+    },
+    {
+      panel: {},
+      plugins: [],
+      planStart: new Date().getTime(),
+    },
+    {
+      panel: {},
+      plugins: [],
+      planStart: new Date().getTime(),
+    },
+  ], // 定期任务
   topEnd: false, // 时间轴向上查任务到顶了
   bottomEnd: false, // 时间轴向下查任务到底了
   dailyTasks: [], // 日常任务

src/utils/time.js

@@ -30,6 +30,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
@@ -286,6 +297,7 @@ const formatStartTimeToCycleTime = (cycle, time) => {
 export default {
   formatNumber,
   formatTime,
+  add,
   convertTime,
   secondToMinute,
   setTimestampToStr,