feat: 设置小红点

CHANGELOG.md

@@ -1,4 +1,4 @@
-# 0.1.0 (2021-08-10)
+# 0.1.0 (2021-08-11)
 
 ### 🌟 新功能
 范围|描述|commitId
@@ -48,6 +48,7 @@
  - | 代码格式细节调整 | [cb2532b](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/cb2532b)
  - | 任务快捷方式图标增加 | [4aba872](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/4aba872)
  - | 修改角色样式 | [73e268e](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/73e268e)
+ - | 删除console.log | [5064a38](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/5064a38)
  - | 删除多余字段 | [5ae3973](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/5ae3973)
  - | 删除插件携带的多余文件 | [0f392bb](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/0f392bb)
  - | 删除没用代码 | [34b20e1](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/34b20e1)

src/apis/tall.js

@@ -7,6 +7,8 @@ const install = (Vue, vm) => {
   vm.$u.api.getToken = userId => vm.$u.get(`${tall}/users/userId`, { userId });
   // 获取项目列表
   vm.$u.api.getProjects = (startTime, endTime) => vm.$u.post(`${tall}/project/query`, { startTime, endTime });
+  // 查询日历是否有小红点
+  vm.$u.api.findRedPoint = (startTime, endTime) => vm.$u.post(`${tall}/project/day`, { startTime, endTime });
 };
 
 export default { install };

src/components/Calendar/Calendar.vue

@@ -39,7 +39,7 @@
                 <view class="date" :class="[item.isToday ? todayClass : '', item.fullDate === selectedDate ? checkedClass : '']">
                   {{ item.time.getDate() }}
                 </view>
-                <view class="dot-show" v-if="item.info" :style="dotStyle"> </view>
+                <view class="dot-show" v-if="item.info === '1'" :style="dotStyle"> </view>
               </view>
             </template>
             <template v-else>
@@ -86,9 +86,10 @@
     <view class="flex justify-center u-font-18" style="color: #3b82f6" @click="goback"> 今日 </view>
   </view>
 </template>
-mb-3
+
 <script>
-import { gegerateDates, dateEqual, formatDate } from './generateDates.js';
+import { mapState } from 'vuex';
+import { gegerateDates, formatDate } from './generateDates.js';
 
 export default {
   props: {
@@ -96,12 +97,6 @@ export default {
       type: Number,
       default: 500,
     },
-    dotList: {
-      type: Array, /// 打点日期列表
-      default() {
-        return [];
-      },
-    },
     showBack: {
       type: Boolean, // 是否返回今日
       default: false,
@@ -117,7 +112,7 @@ export default {
     dotStyle: {
       type: Object, // 打点日期的自定义样式
       default() {
-        return { background: '#FF0000' };
+        return { background: '#DC2626' };
       },
     },
   },
@@ -125,11 +120,12 @@ export default {
   watch: {
     dotList: function (newvalue) {
       const days = this.days.slice(0);
-      newvalue.forEach(item => {
-        const index = days.findIndex(ditem => ditem.fullDate === item.date);
-        if (index > 0) {
-          days[index].info = item;
-        }
+      days.forEach((day, i) => {
+        newvalue.forEach((item, j) => {
+          if (i === j) {
+            day.info = item;
+          }
+        });
       });
       this.days = days;
     },
@@ -143,14 +139,14 @@ export default {
       currentMonth: '',
       currentDate: '',
       days: [],
-      weekMode: false, // false -> 月  true -> 显示周
+      // weekMode: false, // false -> 月  true -> 显示周
       swiper: [0, 1, 2],
-      // dotList: [], // 打点的日期列表
       selectedDate: formatDate(new Date(), 'yyyy-MM-dd'), // 当前选中的日期
     };
   },
 
   computed: {
+    ...mapState('project', ['dotList', 'weekMode']),
     sheight() {
       // 根据年月判断有多少行
       // 判断该月有多少天
@@ -268,13 +264,13 @@ export default {
         // 	this.selectedDate = formatDate(new Date(this.currentYear, this.currentMonth-1,1), 'yyyy-MM-dd')
         // }
       }
-      days.forEach(day => {
-        const dot = this.dotList.find(item => {
-          return dateEqual(item.date, day.fullDate);
+      // 设置小红点
+      days.forEach((day, i) => {
+        this.dotList.forEach((item, j) => {
+          if (i === j) {
+            day.info = item;
+          }
         });
-        if (dot) {
-          day.info = dot;
-        }
       });
       this.days = days;
       // 派发事件,时间发生改变
@@ -458,8 +454,8 @@ export default {
     border-radius: 25px;
   }
   .dot-show {
-    width: 8px;
-    height: 8px;
+    width: 6px;
+    height: 6px;
     // background: red;
     border-radius: 5px;
     position: absolute;

src/components/TimeLine/component/TimeStatus.vue

@@ -92,17 +92,17 @@ export default {
      * 点击了图标 修改任务状态
      * @param {object} event
      */
-    changeStatus() {
-      return false;
-      // 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(event) {
+      // return false;
+      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);
 
-      // this.setTip(tip);
+      this.setTip(tip);
     },
 
     // 计算圆环的弧度百分比

src/components/Tips/Tips.vue

@@ -81,6 +81,7 @@ export default {
         // this.$router.go(0);
       } catch (error) {
         console.log(error);
+        this.$t.ui.showToast(error.msg || '操作失败');
       }
     },
 

src/components/Upload/Upload.vue

@@ -9,7 +9,7 @@
 <script>
 export default {
   methods: {
-    // 倒入wbs
+    // 导入wbs
     async handleUpload() {
       try {
         const data = await this.$u.api.import();

src/pages/index/index.vue

@@ -2,7 +2,7 @@
   <view class="bg-gray-50">
     <view class="relative">
       <!-- 日历 -->
-      <Calendar @selected-change="onDateChange" :show-back="true" :dot-list="days" />
+      <Calendar @selected-change="onDateChange" :show-back="true" />
       <!-- 上传 导入wbs -->
       <Upload @show-alert="onShowAlert" />
     </view>
@@ -30,12 +30,7 @@ import { mapState, mapMutations } from 'vuex';
 export default {
   data() {
     return {
-      days: [
-        { date: '2020-08-14' },
-        { date: '2020-08-27' },
-        { date: '2020-08-09' },
-        // {date: '2020-08-16'}
-      ],
+      days: [],
       alert: {
         show: false,
         title: '',
@@ -50,6 +45,7 @@ export default {
     token(value) {
       if (!value) return;
       this.getProjects();
+      this.handleFindPoint();
     },
   },
 
@@ -57,10 +53,20 @@ export default {
     console.log('index onShow');
     if (!this.token) return;
     this.getProjects();
+    this.handleFindPoint();
+  },
+
+  onPageScroll(res) {
+    // console.log('页面滚动了', res.scrollTop);
+    if (res.scrollTop > 0) {
+      this.setWeekMode(true);
+    } else {
+      this.setWeekMode(false);
+    }
   },
 
   methods: {
-    ...mapMutations('project', ['setProjects']),
+    ...mapMutations('project', ['setProjects', 'setDotList', 'setWeekMode']),
 
     // 获取项目列表
     async getProjects(start = this.$moment().startOf('day').valueOf(), end = this.$moment().endOf('day').valueOf()) {
@@ -72,10 +78,24 @@ export default {
       }
     },
 
-    changeList() {
-      this.days = [{ date: '2021-08-03' }, { date: '2021-08-04' }, { date: '2021-08-06' }];
+    /**
+     * 查询小红点
+     * @param { string } endTime 结束时间
+     * @param { string } startTime 开始时间
+     */
+    async handleFindPoint(start = this.$moment().startOf('month').valueOf(), end = this.$moment().endOf('month').valueOf()) {
+      try {
+        const data = await this.$u.api.findRedPoint(start, end);
+        this.setDotList(data);
+      } catch (error) {
+        console.log('error: ', error);
+      }
     },
 
+    // changeList() {
+    //   this.days = [{ date: '2021-08-03' }, { date: '2021-08-04' }, { date: '2021-08-06' }];
+    // },
+
     onDateChange(event) {
       console.log(event);
     },

src/pages/project/project.vue

@@ -1,5 +1,17 @@
 <template>
   <view :style="{ height: height }" class="flex flex-col overflow-hidden u-font-14">
+    <!-- 全局提示框 -->
+    <u-alert-tips
+      class="top-0 -inset-x-0"
+      style="position: fixed !important; z-index: 999"
+      type="error"
+      :close-able="true"
+      :title="alert.title"
+      :show="alert.show"
+      :description="alert.description"
+      @close="alert.show = false"
+    ></u-alert-tips>
+
     <!-- 标题栏 -->
     <Title />
 
@@ -28,6 +40,7 @@ export default {
     ...mapState('user', ['user', 'token']),
     ...mapState('role', ['visibleRoles', 'roleId']),
     ...mapState('task', ['timeNode', 'timeUnit', 'tasks']),
+    ...mapState('project', ['alert']),
     ...mapGetters('task', ['timeGranularity']),
   },
 

src/plugins/p-wbs-import/p-wbs-import.vue

@@ -1,3 +1,40 @@
 <template>
-  <view>导入wbs</view>
+  <view>
+    <view @tap="handleUpload">{{ task.name }}</view>
+  </view>
 </template>
+
+<script>
+import { mapState, mapMutations } from 'vuex';
+
+export default {
+  name: 'p-wbs-import',
+  props: {
+    task: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {};
+  },
+
+  computed: mapState('project', ['alert']),
+
+  methods: {
+    ...mapMutations('project', ['setShowAlert']),
+
+    // 导入wbs
+    async handleUpload() {
+      try {
+        const data = await this.$u.api.import();
+        // 导入WBS成功后
+        // 直接打开导入的项目
+        console.log('data: ', data);
+      } catch (error) {
+        this.setShowAlert(error);
+      }
+    },
+  },
+};
+</script>

src/store/project/mutations.js

@@ -29,6 +29,36 @@ const mutations = {
   setProjectName(state, data) {
     state.project.name = data;
   },
+
+  /**
+   * 设置alert展示消息
+   * @param { object } state
+   * @param { Boolean } event
+   */
+  setShowAlert(state, event) {
+    state.alert.description = event || '发生了点小意外';
+    state.alert.show = true;
+
+    setTimeout(() => (state.alert.show = false), 10000);
+  },
+
+  /**
+   * 设置小红点
+   * @param { object } state
+   * @param { string } data
+   */
+  setDotList(state, data) {
+    state.dotList = data;
+  },
+
+  /**
+   * 设置日历是否展开收缩
+   * @param { object } state
+   * @param { boolean } show
+   */
+  setWeekMode(state, show) {
+    state.weekMode = show;
+  },
 };
 
 export default mutations;

src/store/project/state.js

@@ -2,6 +2,14 @@
 const state = {
   project: { name: '加载中...' }, // 当前项目信息
   projects: [], // 项目列表
+  alert: {
+    // 全局提示框
+    show: false,
+    title: '',
+    description: '',
+  },
+  dotList: [], // 小红点
+  weekMode: false, // 日历展开收缩
 };
 
 export default state;