refactor: 任务状态重构

.eslintrc.js

@@ -19,6 +19,13 @@ module.exports = {
     'vue/max-attributes-per-line': 'off',
     'vue/multiline-html-element-content-newline': 'off',
     'vue/html-indent': 'off',
+    'vue/html-closing-bracket-newline': [
+      'error',
+      {
+        singleline: 'never',
+        multiline: 'always',
+      },
+    ],
   },
 
   parserOptions: { parser: 'babel-eslint' },

CHANGELOG.md

@@ -6,6 +6,7 @@
  - | db store | 6414c4f
  - | indexedDB | 687394e
  pinch | alloy finger实现图片的pinch放大缩小 | de01343
+ plugin | 插件添加了token及param参数 | aeb0292
  - | post 封装 | da52e94
  - | tall插件封装 | 1bcb920
  - | ws storage | 21b3a06

src/components/Plugin/Plugin.vue

@@ -73,7 +73,7 @@ export default {
       const reg = /data-root=["|']?(\w+)["|']?/gi;
       // console.log(data.html);
       let uuid = '';
-      // FIXME: 没有兼容只有js 没有html的情况
+      // FIXME: 没有兼容  只有js, 没有html的情况
       if (data.html) {
         // 查有没有data-root=“xxx” 有的话 将xxx替换为 pluginTaskId
 

src/components/TimeLine/component/TimeBox.vue

@@ -5,9 +5,7 @@
         <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(+task.planStart).format(startTimeFormat) }}</span>
-          </view>
+          <view>{{ $moment(+task.planStart).format(startTimeFormat) }}</view>
 
           <!-- 任务功能菜单 -->
           <TaskTools />

src/components/TimeLine/component/TimeStatus.vue

@@ -1,11 +1,13 @@
 <template>
   <view class="u-font-14">
+    <!-- 0 未开始 -->
     <view
-      class="flex items-center justify-center text-blue-400 rounded-full icon-column"
+      class="flex items-center justify-center rounded-full icon-column"
+      :class="[orderStyle.color]"
       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">
+      <u-circle-progress :percent="100" active-color="#2979ff" bg-color="rgba(255,255,255,0)" border-width="4" width="66">
         <view class="u-progress-content">
           <view class="u-progress-dot"></view>
           <view class="u-progress-info">
@@ -15,20 +17,23 @@
       </u-circle-progress>
     </view>
 
+    <!-- 1 进行中 -->
     <view class="flex items-center justify-center text-black rounded-full icon-column" 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">
+      <u-circle-progress :percent="80" active-color="#2979ff" bg-color="rgba(255,255,255,0)" border-width="6" width="66">
         <view class="u-progress-content">
           <view class="u-progress-dot"></view>
           <view class="u-progress-info">{{ time }}</view>
         </view>
       </u-circle-progress>
     </view>
+
+    <!-- 2 暂停中 -->
     <view
       class="flex items-center justify-center text-gray-400 rounded-full icon-column"
       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">
+      <u-circle-progress :percent="40" active-color="#2979ff" bg-color="rgba(255,255,255,0)" border-width="6" width="66">
         <view class="u-progress-content">
           <view class="u-progress-dot"></view>
           <view class="u-progress-info">
@@ -37,12 +42,14 @@
         </view>
       </u-circle-progress>
     </view>
+
+    <!-- 3 已完成 -->
     <view
       class="flex items-center justify-center font-black text-red-800 rounded-full icon-column"
       @tap="changeStatus($event, 3)"
       v-if="status === 3"
     >
-      <u-circle-progress :percent="80" active-color="#2979ff" bg-color="rgba(255,255,255,0)" borderWidth="6" width="66">
+      <u-circle-progress :percent="80" active-color="#2979ff" bg-color="rgba(255,255,255,0)" border-width="6" width="66">
         <view class="u-progress-content">
           <view class="u-progress-dot"></view>
           <view class="u-progress-info">
@@ -53,18 +60,26 @@
     </view>
   </view>
 </template>
+
 <script>
 import { mapMutations } from 'vuex';
 
+// 任务状态 0未开始 1进行中 2暂停中 3已完成
+
+// 颜色
+// 图标
+// 数字
+
 export default {
   name: 'TimeStatus',
   props: {
-    status: { default: 0, type: Number },
+    // status: { default: 0, type: Number },
     content: { default: '', type: String },
   },
 
   data() {
     return {
+      status: 2,
       time: 20,
       start: [{ text: '确认开始任务', color: 'blue' }],
       pause: [{ text: '继续' }, { text: '重新开始任务', color: 'blue' }, { text: '结束' }],
@@ -72,6 +87,31 @@ export default {
       again: [{ text: '重新开始任务', color: 'blue' }],
     };
   },
+
+  computed: {
+    // 图标文本颜色
+    orderStyle() {
+      let color = 'text-gray-400';
+      let icon = '';
+      switch (this.status) {
+        case 1: // 进行中
+          color = 'text-blue-400';
+          break;
+        case 2:
+          color = 'text-red-400';
+          break;
+        case 3:
+          color = 'text-green-400';
+          break;
+        default:
+          // 未开始
+          color = 'text-gray-400';
+          break;
+      }
+      return { color };
+    },
+  },
+
   methods: {
     ...mapMutations('task', ['setClient', 'setTips', 'setStatus', 'setTipsContent']),