refactor(tip): 任务状态显示及tip组件数据的重构

CHANGELOG.md

@@ -1,4 +1,4 @@
-# 0.1.0 (2021-08-02)
+# 0.1.0 (2021-08-03)
 
 ### 🌟 新功能
 范围|描述|commitId
@@ -97,6 +97,7 @@
  task beginTime | 格式化任务开始时间 | fbc0301
  template | eslint prettier sass uview tailwindcss | 9c966a1
  - | 下滑时间轴添加备注 | 4fd20e3
+ - | 任务状态重构 | 4693655
  - | 删除多余的技术验证界面 | 542ae5b
  - | 界面样式调整 | 4367249
  - | 重构store分层 | 5f6fff8

src/components/TimeLine/TimeLine.vue

@@ -29,6 +29,7 @@ import TimeBox from './component/TimeBox.vue';
 export default {
   name: 'TimeLine',
   components: { TimeBox },
+
   data() {
     return { top: 0 };
   },

src/components/TimeLine/component/TimeBox.vue

@@ -2,7 +2,7 @@
   <view class="column">
     <view :key="index" v-for="(task, index) in tasks">
       <view class="flex">
-        <TimeStatus :content="JSON.stringify(task.process)" :status="task.process" />
+        <TimeStatus :task-name="task.name" :status="task.process" :task-id="task.id" />
 
         <view class="flex items-center justify-between flex-1 ml-2 task-column">
           <view>{{ $moment(+task.planStart).format(startTimeFormat) }}</view>
@@ -64,6 +64,7 @@ import TaskTools from './TaskTools.vue';
 export default {
   name: 'TimeBox',
   components: { TimeStatus, Skeleton, TaskTools },
+
   data() {
     return { currentComponent: '', styleType: 0 };
   },

src/components/TimeLine/component/TimeStatus.vue

@@ -1,59 +1,12 @@
 <template>
   <view class="u-font-14">
-    <!-- 0 未开始 -->
+    <view class="flex items-center justify-center rounded-full icon-column" :style="{ color: orderStyle.color }" @tap="changeStatus">
-    <view
+      <u-circle-progress :percent="100" :active-color="orderStyle.color" bg-color="rgba(255,255,255,0)" border-width="4" width="66">
-      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" 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">
-            <u-icon name="checkmark" size="30"></u-icon>
+            <u-icon :name="orderStyle.icon" v-if="orderStyle.icon" size="30"></u-icon>
-          </view>
+            <template v-else>{{ time }}</template>
-        </view>
-      </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" 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" 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">
-            <u-icon name="play-right-fill" size="30"></u-icon>
-          </view>
-        </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)" border-width="6" width="66">
-        <view class="u-progress-content">
-          <view class="u-progress-dot"></view>
-          <view class="u-progress-info">
-            <u-icon name="pause" size="30"></u-icon>
           </view>
         </view>
       </u-circle-progress>
@@ -62,24 +15,19 @@
 </template>
 
 <script>
-import { mapMutations } from 'vuex';
+import { mapState, 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 },
+    taskName: { default: '', type: String },
+    taskId: { type: String, default: '' },
   },
 
   data() {
     return {
-      status: 2,
+      // status: 3,
       time: 20,
       start: [{ text: '确认开始任务', color: 'blue' }],
       pause: [{ text: '继续' }, { text: '重新开始任务', color: 'blue' }, { text: '结束' }],
@@ -89,51 +37,61 @@ export default {
   },
 
   computed: {
+    ...mapState('task', ['tip']),
     // 图标文本颜色
+    // 任务状态 0未开始 1进行中 2暂停中 3已完成
     orderStyle() {
-      let color = 'text-gray-400';
+      let color = '#9CA3AF';
-      let icon = '';
+      let icon = 'play-right-fill';
       switch (this.status) {
         case 1: // 进行中
-          color = 'text-blue-400';
+          color = '#60A5FA';
+          icon = '';
           break;
-        case 2:
+        case 2: // 暂停中
-          color = 'text-red-400';
+          color = '#F87171';
+          icon = 'pause';
           break;
-        case 3:
+        case 3: // 已结束
-          color = 'text-green-400';
+          color = '#34D399';
+          icon = 'checkmark';
           break;
         default:
           // 未开始
-          color = 'text-gray-400';
+          color = '#9CA3AF';
+          icon = 'play-right';
           break;
       }
-      return { color };
+      return { color, icon };
     },
   },
 
   methods: {
-    ...mapMutations('task', ['setClient', 'setTips', 'setStatus', 'setTipsContent']),
+    ...mapMutations('task', ['setTip']),
 
-    chooseList() {
+    /**
-      return this.start;
+     * 点击了图标 修改任务状态
-    },
+     * @param {object} event
+     */
+    changeStatus(event) {
+      const { status, taskId, taskName, tip } = this;
+      tip.status = status;
+      tip.taskId = taskId;
+      tip.left = event.target.x;
+      tip.top = event.target.y;
+      tip.show = true;
+      tip.text = this.genetateTips(status, taskName);
 
-    changeStatus(e, num) {
+      this.setTip(tip);
-      this.setStatus(num);
-      this.setTipsContent(this.chooseTips(num, this.content));
-      const client = {
-        left: e.target.x,
-        top: e.target.y,
-      };
-      this.setClient(client);
-      this.setTips(true);
     },
 
-    chooseTips(num, content) {
+    /**
-      switch (num) {
+     * 计算tip的标题内容
+     */
+    genetateTips(status, content) {
+      switch (status) {
         case 0:
-          return `确认开始任务${content}吗？`;
+          return `确认开始任务"${content}"吗？`;
         case 1:
           return `请选择要执行的操作`;
         case 2:

src/components/Tips/Tips.vue

@@ -3,45 +3,42 @@
     class="fixed shadow-2xl"
     style="z-index: 1000"
     :style="{
-      left: client.left + 'px',
+      left: tip.left + 'px',
-      top: height - client.top > 110 ? client.top + 'px' : '',
+      top: height - tip.top > 110 ? tip.top + 'px' : '',
-      bottom: height - client.top > 110 ? '' : '10px',
+      bottom: height - tip.top > 110 ? '' : '10px',
     }"
     id="u-icard"
   >
     <u-card
       :title="title"
       style="width: 500rpx; margin: 0 !important"
-      v-if="showTips"
+      v-if="tip.show"
       titleSize="28"
       :headStyle="headStyle"
       :footStyle="footStyle"
     >
-      <view class="" slot="body"> {{ tipsContent }} </view>
+      <view class="" slot="body"> {{ tip.text }} </view>
-      <view class="flex ustify-between" slot="foot">
+      <view class="flex justify-end" slot="foot">
-        <u-button size="mini" @tap="clickCancel">取消</u-button>
+        <u-button size="mini" @tap="onCancel">取消</u-button>
-        <u-button v-if="status === 1" size="mini" @tap="clickCancel">暂停</u-button>
+        <u-button v-if="tip.status === 1" size="mini" @tap="onPause">暂停</u-button>
-        <u-button v-if="status === 2" size="mini" @tap="clickCancel">继续</u-button>
+        <u-button v-if="tip.status === 2" size="mini" @tap="onContinu">继续</u-button>
-        <u-button v-if="status === 1 || status === 2" size="mini" @tap="clickCancel">重新开始</u-button>
+        <u-button v-if="tip.status === 1 || tip.status === 2" size="mini" @tap="onRestart">重新开始</u-button>
-        <u-button v-if="status === 1 || status === 2" type="primary" size="mini" @tap="clickCancel">结束</u-button>
+        <u-button v-if="tip.status === 1 || tip.status === 2" type="primary" size="mini" @tap="onComplete">结束</u-button>
-        <u-button v-if="status === 0 || status === 3" type="primary" size="mini" @tap="clickOk">确定</u-button>
+        <u-button v-if="tip.status === 0 || tip.status === 3" type="primary" size="mini" @tap="onConfirm">确定</u-button>
       </view>
     </u-card>
-    <u-toast ref="uToast" />
   </view>
 </template>
 
 <script>
 import { mapState, mapMutations } from 'vuex';
+
 export default {
   name: 'Tips',
-  props: {
+  props: { title: { default: '提示', type: String } },
-    title: {
+
-      default: '提示',
+  computed: mapState('task', ['tip']),
-      type: String,
+
-    },
-  },
-  computed: mapState('task', ['client', 'showTips', 'status', 'tipsContent']),
   data() {
     return {
       footStyle: { padding: '4px 15px' },
@@ -49,24 +46,33 @@ export default {
       height: 0,
     };
   },
+
   mounted() {
     this.height = window.screen.height;
   },
+
   methods: {
-    ...mapMutations('task', ['setTips']),
+    ...mapMutations('task', ['setTipShow']),
-    clickOk() {
+    // 点击了确认
-      this.$refs.uToast.show({
+    onConfirm() {
-        title: '点击了确定',
+      this.onCancel();
-        type: 'success',
-      });
-      this.setTips(false);
     },
-    clickCancel() {
+
-      this.$refs.uToast.show({
+    // TODO: 暂停
-        title: '点击了取消',
+    onPause() {},
-        type: 'error',
+
-      });
+    // 重新开始
-      this.setTips(false);
+    onRestart() {},
+
+    // 结束完成
+    onComplete() {},
+
+    // 继续
+    onContinu() {},
+
+    // 点击了取消
+    onCancel() {
+      this.setTipShow(false);
     },
   },
 };

src/store/task/mutations.js

@@ -18,39 +18,31 @@ const mutations = {
   },
 
   /**
-   * 存储鼠标点击位置
+   * 设置tip的值
-   * @param { object } state
+   * @param {object} state
-   * @param { object } data
+   * @param {object} data
-   */
-  setClient(state, data) {
-    state.client = { ...data };
-  },
-
-  /**
-   * 是否显示tips
-   * @param { object } state
-   * @param { boolean } data
    */
-  setTips(state, data) {
+  setTip(state, data) {
-    state.showTips = data;
+    if (!data) return;
+    state.tip = { ...data };
   },
 
   /**
    * 是否显示tips
    * @param { object } state
-   * @param { number } data
+   * @param { boolean } show
    */
-  setStatus(state, data) {
+  setTipShow(state, show) {
-    state.status = data;
+    state.tip.show = show;
   },
 
   /**
    * 是否显示tips
    * @param { object } state
-   * @param { string } data
+   * @param { number } status
    */
-  setTipsContent(state, data) {
+  setStatus(state, status) {
-    state.tipsContent = data;
+    state.tip.status = status;
   },
 
   /**

src/store/task/state.js

@@ -1,13 +1,21 @@
 const state = {
   scrollTop: 0,
   isShrink: false, // true: 收起， false：展开
-  client: {
+  tip: {
+    taskId: '', // 当前正在修改状态的任务的id
+    show: false,
+    status: 0, // 所点击任务的当前状态码
+    text: '',
     left: 0, // 鼠标点击位置距离左边的距离
     top: 0, // 鼠标点击位置距离上边的距离
   },
-  showTips: false,
+  // client: {
-  status: 0, // 点击了时间轴上的哪种样式，默认点击了开始
+  //   left: 0, // 鼠标点击位置距离左边的距离
-  tipsContent: '', // 提示框内的内容，需要传入
+  //   top: 0, // 鼠标点击位置距离上边的距离
+  // },
+  // showTips: false,
+  // status: 0, // 点击了时间轴上的哪种样式，默认点击了开始
+  // tipsContent: '', // 提示框内的内容，需要传入
   timeNode: new Date().getTime(), // 时间基准点
   timeUnit: 4, // 时间颗粒度
   topEnd: false, // 时间轴向上查任务到顶了