feat: 插件参数处理调整

CHANGELOG.md

@@ -52,6 +52,7 @@
 ### 🐛 Bug 修复
 范围|描述|commitId
 --|--|--
+ role | 切换角色的逻辑修正完善 | 4ae534f
  task任务逻辑完善 | 减少初始global及regular的不必要请求 | bd4bd38
  - | 上下滑动加载定期任务 | 4090d89
  - | 上下滚动时间轴 | d533a01

src/components/Plugin/Plugin.vue

@@ -1,22 +1,19 @@
 <template>
-  <view class="u-font-14">
-    <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" />
-          <!-- <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 class="u-font-14" style="height: 100%">
+    <view v-if="pluginContent">
+      <view style="height: 100%" v-html="pluginContent"></view>
+    </view>
+
+    <view v-else>
+      <p-task-title :name="task.name" v-if="pluginId === '1'" />
+      <p-task-description :text="task.description" v-if="pluginId === '2'" />
+      <p-task-duration-delay :realDuration="task.realDuration" :planDuration="task.planDuration" v-if="pluginId === '3'" />
+      <p-task-start-time-delay :realStart="task.realStart" :planStart="task.planStart" v-if="pluginId === '4'" />
+      <!-- <p-task-start-time-delay :task="task" v-if="pluginId === '4'" /> -->
+      <!-- <p-deliverable :task="task" v-if="pluginId === '5'" /> -->
+      <!-- <p-subtasks :task="task" v-if="pluginId === '6'" /> -->
+      <!-- <p-subproject :task="task" v-if="pluginId === '7'" /> -->
+      <!-- <p-task-countdown :task="task" v-if="pluginId === '8'" /> -->
     </view>
   </view>
 </template>
@@ -25,48 +22,60 @@
 export default {
   name: 'Plugin',
   props: {
-    item: {
-      default: () => {},
-      type: Object,
-    },
-    pluginId: {
-      default: '1',
-      type: String,
-    },
-    styleType: {
-      default: 0,
-      type: Number,
-    },
-    pluginTaskId: {
-      default: '0',
-      type: String,
-    },
+    task: { default: () => {}, type: Object },
+    pluginId: { default: '1', type: String },
+    styleType: { default: 0, type: Number },
+    pluginTaskId: { default: '0', type: String },
   },
 
   data() {
     return { pluginContent: null };
   },
 
-  async created() {
-    await this.getPlugin();
-    let domList = Array.from(document.getElementsByTagName('script'));
-    const index = domList.findIndex(item => item.id === `p${this.pluginContent.pluginId}`);
-    if (this.pluginContent.js && index === -1) {
-      var scriptDom = document.createElement('script');
-      scriptDom.id = `p${this.pluginContent.pluginId}`;
-      scriptDom.innerHTML = this.pluginContent.js;
-      document.body.append(scriptDom);
-    }
+  created() {
+    this.getPlugin();
   },
 
   methods: {
+    // 获取插件信息
     async getPlugin() {
       const { pluginId, styleType } = this;
-      const res = await this.$u.api.getOtherPlugin({
+      const data = await this.$u.api.getOtherPlugin({
         pluginId,
         styleType,
       });
-      this.pluginContent = res;
+      if (!data || !data.id) return;
+      if (data.html) {
+        // 查有没有data-root=“xxx” 有的话 将xxx替换为 pluginTaskId
+        const reg = /data-root="(\w+)"/gi;
+        if (reg.test(data.html)) {
+          const str = data.html.replace(RegExp.$1, this.pluginTaskId);
+          this.pluginContent = str;
+        } else {
+          this.pluginContent = data.html;
+        }
+      }
+      if (data.js) {
+        if (reg.test(data.js)) {
+          const str = data.js.replace(RegExp.$1, this.pluginTaskId);
+          this.handleDom(str);
+        } else {
+          this.handleDom(data.js);
+        }
+      }
+    },
+
+    // 创建script dom
+    handleDom(js) {
+      const { pluginId } = this;
+      let domList = Array.from(document.getElementsByTagName('script'));
+      const index = domList.findIndex(item => item.id === `p${pluginId}`);
+      if (js && index === -1) {
+        const scriptDom = document.createElement('script');
+        scriptDom.id = `p${pluginId}`;
+        scriptDom.innerHTML = js;
+        document.body.append(scriptDom);
+      }
     },
   },
 };

src/components/TimeLine/component/TimeBox.vue

@@ -1,12 +1,12 @@
 <template>
   <view class="column">
-    <view :key="index" v-for="(item, index) in tasks">
+    <view :key="index" v-for="(task, index) in tasks">
       <view class="flex">
-        <TimeStatus :content="JSON.stringify(item.process)" :status="item.process" />
+        <TimeStatus :content="JSON.stringify(task.process)" :status="task.process" />
 
         <view class="flex items-center justify-between flex-1 ml-2 task-column">
           <view>
-            <span>{{ $moment(+item.planStart).format(startTimeFormat) }}</span>
+            <span>{{ $moment(+task.planStart).format(startTimeFormat) }}</span>
           </view>
 
           <!-- 任务功能菜单 -->
@@ -18,27 +18,29 @@
           <u-card
             :show-foot="false"
             :show-head="false"
-            :style="{ height: setHeight(item.panel) }"
-            @click="changeTimeNode(item.planStart)"
+            :style="{ height: setHeight(task.panel) }"
+            @click="onClickTask(+task.planStart)"
             class="h-16"
             margin="0"
-            v-if="item.plugins"
+            v-if="task.plugins && task.plugins.length"
           >
             <!-- 任务面板插件 -->
             <view slot="body">
-              <view v-if="!item.plugins.length">
+              <!-- TODO: 逻辑不完善 -->
+              <view v-if="!task.plugins.length">
                 <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">
+                <view :key="pIndex" v-for="(row, pIndex) in task.plugins">
+                  <view class="grid gap-2" v-if="row.length">
                     <Plugin
                       :class="getClass(plugin.col, plugin.row)"
-                      :item="item"
+                      :task="task"
                       :key="plugin.pluginTaskId"
                       :pluginId="plugin.pluginId"
                       :styleType="styleType || 0"
-                      v-for="plugin in p"
+                      v-for="plugin in row"
                     />
                   </view>
                 </view>
@@ -48,14 +50,15 @@
         </view>
       </view>
     </view>
+    <!-- 局部弹框操作栏 -->
     <Tips />
   </view>
 </template>
 
 <script>
-import { mapState, mapMutations, mapGetters } from 'vuex';
-import TimeStatus from './TimeStatus.vue';
+import { mapState, mapMutations, mapGetters, mapActions } from 'vuex';
 import Skeleton from '@/components/Skeleton/Skeleton';
+import TimeStatus from './TimeStatus.vue';
 import TaskTools from './TaskTools.vue';
 
 export default {
@@ -67,11 +70,12 @@ export default {
 
   computed: {
     ...mapState('role', ['roleId']),
-    ...mapState('task', ['timeNode', 'timeUnit', 'tasks', 'taskLoading']),
+    ...mapState('task', ['timeUnit', 'tasks', 'taskLoading']),
     ...mapGetters('task', ['startTimeFormat']),
   },
 
   methods: {
+    ...mapActions('task', ['getGlobal']),
     ...mapMutations('task', ['setTipsContent', 'setTipsContent', 'setTimeNode']),
 
     // 设置任务面板高度
@@ -83,9 +87,13 @@ export default {
       }
     },
 
-    // 点击任务面板 修改store时间基准点
-    changeTimeNode(time) {
-      this.setTimeNode(time);
+    /**
+     * 点击了定期任务的面板 更新可变的日常任务
+     * @param {number} planStart 任务计划开始时间
+     */
+    onClickTask(planStart) {
+      const param = { roleId: this.roleId, timeNode: planStart, timeUnit: this.timeUnit };
+      this.getGlobal(param);
     },
 
     // 设置网格布局

src/plugins/p-task-description/p-task-description.vue

@@ -1,20 +1,11 @@
 <template>
   <!-- 任务描述 -->
-  <view>{{ item.description }}</view>
+  <view>{{ text }}</view>
 </template>
 
 <script>
 export default {
   name: 'p-task-description',
-  props: { item: { type: Object, default: null } },
-  data() {
-    return {};
-  },
-
-  computed: {},
-  methods: {},
-  watch: {},
+  props: { text: { type: String, default: '' } },
 };
 </script>
-
-<style></style>

src/plugins/p-task-duration-delay/p-task-duration-delay.vue

@@ -1,28 +1,20 @@
 <template>
-  <view v-if="item.realDuration && item.planDuration">
+  <view v-if="realDuration && planDuration">
     <!-- 任务时长延迟插件 -->
     <!-- 超时 -->
-    <span class="text-green-500 font-bold" v-if="+item.realDuration > +item.planDuration"
-      >+{{ $t.time.formatDuration(+item.realDuration - +item.planDuration) }}</span
-    >
+    <span class="font-bold text-green-500" v-if="+realDuration > +planDuration">
+      +{{ $t.time.formatDuration(+realDuration - +planDuration) }}
+    </span>
     <!-- 延时 -->
-    <span class="text-red-500 font-bold" v-if="+item.realDuration < +item.planDuration"
-      >-{{ $t.time.formatDuration(+item.planDuration - +item.realDuration) }}</span
-    >
+    <span class="font-bold text-red-500" v-if="+realDuration < +planDuration">
+      -{{ $t.time.formatDuration(+planDuration - +realDuration) }}
+    </span>
   </view>
 </template>
 
 <script>
 export default {
   name: 'p-task-duration-delay',
-  props: { item: { type: Object, default: null } },
-  data() {
-    return {};
-  },
-  computed: {},
-  methods: {},
-  watch: {},
+  props: { planDuration: { type: String, default: '0' }, realDuration: { type: String, default: '0' } },
 };
 </script>
-
-<style></style>

src/plugins/p-task-start-time-delay/p-task-start-time-delay.vue

@@ -1,23 +1,14 @@
 <template>
-  <view v-if="item.realStart && item.planStart">
+  <view v-if="realStart && planStart">
     <!-- 任务开始时间延迟插件 -->
     <!-- 超时 -->
-    <span>{{ $t.time.formatDuration(+item.realStart - +item.planStart) }}</span>
+    <span>{{ $t.time.formatDuration(+realStart - +planStart) }}</span>
   </view>
 </template>
 
 <script>
 export default {
   name: 'p-task-start-time-delay',
-  props: { item: { type: Object, default: null } },
-  data() {
-    return {};
-  },
-
-  computed: {},
-  methods: {},
-  watch: {},
+  props: { realStart: { type: String, default: '0' }, planStart: { type: String, default: '0' } },
 };
 </script>
-
-<style></style>

src/plugins/p-task-title/p-task-title.vue

@@ -1,20 +1,11 @@
 <template>
   <!-- 任务名插件 -->
-  <view>{{ item.name }}</view>
+  <view>{{ name }}</view>
 </template>
 
 <script>
 export default {
   name: 'p-task-title',
-  props: { item: { type: Object, default: null } },
-  data() {
-    return {};
-  },
-
-  computed: {},
-  methods: {},
-  watch: {},
+  props: { name: { type: String, default: '' } },
 };
 </script>
-
-<style></style>

src/store/task/actions.js

@@ -16,7 +16,7 @@ const actions = {
   /**
    * 根据时间和角色查找日常任务
    * @param {*} commit
-   * @param {object} param 请求参数
+   * @param {object} param 请求参数 roleId, timeNode, timeUnit
    */
   async getGlobal({ commit }, param) {
     try {

src/store/task/getters.js

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

src/store/task/mutations.js

@@ -96,7 +96,7 @@ const mutations = {
     if (!data || !data.length) {
       state.bottomEnd = true;
     }
-    if (!state.tasks[0].name) {
+    if (!state.tasks[0] || !state.tasks[0].name) {
       state.tasks = [...data];
     } else {
       state.tasks = [...state.tasks.concat(data)];

src/store/user/actions.js

@@ -11,7 +11,7 @@ const actions = {
       commit('setUser', res);
       return res;
     } catch (error) {
-      throw error || '获取个人信息失败';
+      uni.$t.ui.showToast(error.msg || '获取个人信息失败');
     }
   },
 };