Merge branch 'wrr' of dd.tall.wiki:wally/TALL-MUI-3 into wrr

4 years ago · 719a074fa6
5 changed files with 489 additions and 9 deletions
--- a/src/common/styles/iconfont+.scss
+++ b/src/common/styles/iconfont+.scss
@ -0,0 +1,25 @@
+@font-face {
+  font-family: 'custom-icon'; /* Project id 2685595 */
+  src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAVsAAsAAAAACgAAAAUfAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDHAqGfIV2ATYCJAMQCwoABCAFhQsHURurCMiuMYUxPrWYbZJ11AENNuDWinu9B3343wTPy36/c+WrJmkq4NUbnswqIdo6oyVCh0pjZM3kN/Sb+9vabmY0s5OZwYtCdsO5QNnpi6ia8CLyL4qgGGt7b54+glfxrBKtmXWGqFaCp0B7SiATEr1ANPXvGzvOkmQsS994MvzlXijX3tRv70+uPsD5P2a6+rgS+DYAiUqMLBrYLNryeeZlUwrdgcsp3zK86iB34z4IiBvJJR7XVDYCxyMKmYEvKb1YEAXLkZ6hgJKT8gqiiArC0K2pSryAEPRW3AB48n5e/iSGEiqUpF9oa4fQglNvlF+/krv/O0w+Mra/NDxdQQgY6M1MLnvV2nOSwNYjES+ySM0BlCVK0Wvbz9vn/6foq+JGjX95YJRAMnRukoAZju0YzSLB8HWdBMXXc/oJcJ3MjoIIpAsgJwhUvkUYmwyUFcbgMUNP8NZs7bxRHjnzp3oxW69OvXx796hdkdpN5y5Ebxkdwyy0i/vNo9wbK1Xk1tF54gvn5PfeNWr37ctTr8YwJ4XR/NAFC9xLZaNP2FbujgGf9ZwyD3DnQc33oheKon7aLHNKrdlOcW+0bV5gW7ibN8+jySFrJfPtigKKzb6vTcXsU1BaIFpe6HwCu/HkmhO2hddjq6Os03jJqjnAq0/wSUKsCLT6KWyVajV+esn9acKTJM832i45UpN9vEPRUT/rJt1Vl7sTtltjd1k1fPmx0O7qFsi9o/lcd+Piclq/x9+580euFfJOCmlCHm/aHdDEN/PVN2zf9aPirdu0KH7P0SfDgoYGPQFri6pmqOdydenxe+I+WE4sH5ScnFTZJ+RLfZZHvhxl+quLBcFV4bqiUqj8l3pCPinq2zdJobhZQax0/jn2f2PJLqEkFUKCDGdd67Hz6D/QX4mH+54XSbEkO1wwcsrateiYAnm2zJj4XzyIP9iZJnPb2yQxR7jJ0iyxJGZOZNQb5edFksqISkmx1C8hrsyzYxI92fKrJEUZRVVE8EfIvDkhSo+Dj/vvmGKPBEm+ISJUYzGXqGI63CfMLYviAmXcHlXBldMNmsSZESsm7p81fsPwjGLxrMnDPa52Cvf9K/u+bBkq9nogPMTf6hWWem4in+r5+O+msp5NnqCxc74uZw8BPnaYGyL7iGpFM6qiCGYIzm4BL6ccX5slzxpOHy1i2UhUcchS+VJUpKlS3BzxfVT8lW8BEVPoJtfHVEeU/vg2X8xlNFB4xED/XyMHq8EtAARbEjtvdvYsqQWCpGk26h+cxt/IEQ39nbL/c1x/46efq5IwYTz+IRqY+sd54MMBnGyKATz1lKgWBcCVmPYRGLYoiBsK+MVckPekD2HhPTpEQiGCKqIGTUId6WCEDIFlZBiswbiuOkpvs4eRkFQeNMzEUJTthyrtDZqy+0gHXxEhbMiQYeAH4w4i4biERkws4iCFoBZrGYzpadasM6MQ3WlBrAnXOtdDptNIcUJ6aG6GnEWPS7EEdXyBswSaIdfdCksXk4iQDtNxrAnT9HsxaDSyWDvHtkEaqVsRas+Mi9MVvYmaZk2gCAeiIJAWpsVgGD0ay0znHEJonSwQlgle8XvqQYxORhSuOo8CSzOI47h6MhhMArV4GLKEa4ZmneEqiy6MRAiig1lcrp0eo5mzGjIaNhamvXhSG4iGqLW2sLTLFEcK6aBc9bh80wWvAeL0m3okIhmpSIuvI0TRrSZoRvYm1gwH06zRuOFr7IrwlkFGnIPazkEAAAA=')
+    format('woff2');
+}
+
+.custom-icon {
+  font-family: 'custom-icon' !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.custom-icon-attachment:before {
+  content: '\e7e1';
+}
+
+.custom-icon-moneycollect:before {
+  content: '\e7cd';
+}
+
+.custom-icon-C-bxl-redux:before {
+  content: '\e608';
+}
--- a/src/common/styles/iconfont.scss
+++ b/src/common/styles/iconfont.scss
--- a/src/components/Roles/component/RoleList.vue
+++ b/src/components/Roles/component/RoleList.vue
@ -0,0 +1,224 @@
+<template>
+  <view>
+    <view class="home-box u-skeleton">
+      <scroll-view :enable-flex="true" :scroll-left="scrollLeft" :throttle="false" scroll-with-animation scroll-x>
+        <view class="tab-box">
+          <view :key="index" @click="changeIndex(item.id, index)" class="tab-item" v-for="(item, index) in roles">
+            <view :class="setColor(item.mine, item.id)" class="tab-children u-skeleton-fillet">{{ item.name }}</view>
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+    <u-skeleton :animation="true" :loading="loading" bg-color="#fff"></u-skeleton>
+  </view>
+</template>
+
+<script>
+import { mapState, mapMutations, mapActions } from 'vuex';
+
+export default {
+  name: 'RoleList',
+  data() {
+    return {
+      tabIndex: 0, //当前访问的 index 默认为0
+      tabList: [], //tab dom节点集合
+      scrollLeft: 0, //scrollview需要滚动的距离
+      loading: false, // 是否显示骨架屏组件
+      roles: [
+        {
+          id: 1,
+          name: '项目经理',
+          mine: 0,
+          pm: 1,
+          sequence: 1,
+        },
+        {
+          id: 2,
+          name: '运维',
+          mine: 0,
+          pm: 0,
+          sequence: 2,
+        },
+      ],
+    };
+  },
+
+  computed: { ...mapState('home', ['visibleRoles', 'roleId', 'tasks']) },
+
+  watch: {
+    visibleRoles(val) {
+      if (val && val.length) {
+        this.roles = [...this.visibleRoles];
+        this.loading = false;
+      }
+    },
+  },
+
+  mounted() {
+    if (!this.visibleRoles || !this.visibleRoles.length) {
+      this.loading = true;
+    }
+  },
+
+  methods: {
+    ...mapMutations('home', ['setRoleId']),
+    ...mapActions('home', ['handleRegularTask']),
+
+    setCurrentRole(index) {
+      const data = document.getElementsByClassName('tab-children');
+      // 获取当前所有子元素 并插入到 tabList 列表中
+      data.forEach(item => {
+        this.tabList.push({
+          width: item.clientWidth,
+          left: item.offsetLeft,
+        });
+      });
+      //当前滚动的位置
+      let left = 0;
+      let screenWidth = window.screen.width;
+      for (let i = 0; i < index; i++) {
+        left += this.tabList[i].width + this.tabList[i].left * 2;
+      }
+      left += this.tabList[index].width;
+      this.scrollLeft = left - screenWidth / 2;
+    },
+
+    async changeIndex(id, index) {
+      this.setRoleId(id);
+      //改变index 即手动点击切换 我在此时将当前元素赋值给左边距 实现自动滚动
+      this.setCurrentRole(index);
+      // 根据时间基准点和角色查找定期任务
+      await this.$emit('getTasks', { queryType: 0 });
+      await this.$emit('getTasks', { queryType: 1 });
+      console.log('this.tasks && this.tasks.length: ', this.tasks && this.tasks.length);
+      if (this.tasks && this.tasks.length) {
+        // 查上下的任务
+        const upQuery = {
+          timeNode: +this.tasks[0].planStart,
+          queryType: 0,
+          queryNum: 6,
+        };
+        console.log('upQuery: ', upQuery);
+        await this.$emit('getTasks', upQuery);
+        const downQuery = {
+          timeNode: +this.tasks[this.tasks.length - 1].planStart,
+          queryType: 0,
+          queryNum: 6,
+        };
+        console.log('downQuery: ', downQuery);
+        await this.$emit('getTasks', downQuery);
+      }
+    },
+
+    // 设置文字颜色
+    setColor(mine, id) {
+      const { roleId } = this;
+      if (mine === '1' && roleId === id) {
+        return 'default-tab-choice';
+      }
+      if (mine === '1' && roleId !== id) {
+        return 'default-tab-item';
+      }
+      if (mine === '0' && roleId === id) {
+        return 'tab-choice';
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.home-box {
+  // 对此盒子进行 sticky 粘性定位
+  position: sticky;
+  top: 0;
+  background: #fff; // 设置背景 否则会透明
+
+  /* #ifdef H5 */
+  //粘性定位 在h5下 加 原生头部高度 44px
+  top: 88rpx;
+  /* #endif */
+
+  .tab-box {
+    position: relative;
+    white-space: nowrap;
+    // height: 84rpx;
+
+    .tab-item {
+      // width: 20%;
+      // height: 84rpx;
+      padding: 20rpx 24rpx;
+      position: relative;
+      display: inline-block;
+      text-align: center;
+      font-size: 30rpx;
+      transition-property: background-color, width;
+    }
+
+    .default-tab-item {
+      color: $roleChoiceColor;
+    }
+
+    .default-tab-choice {
+      //当前选中 基于此类名给与底部选中框
+      position: relative;
+      color: $roleChoiceColor;
+      font-weight: 600;
+    }
+
+    .default-tab-choice:before {
+      content: '';
+      position: absolute;
+      left: 0;
+      bottom: -20rpx;
+      width: 100%;
+      height: 6rpx;
+      border-radius: 2rpx;
+      background: $roleChoiceColor;
+    }
+
+    .tab-choice {
+      //当前选中 基于此类名给与底部选中框
+      position: relative;
+      color: $uni-color-primary;
+      font-weight: 600;
+    }
+
+    .tab-choice:before {
+      content: '';
+      position: absolute;
+      left: 0;
+      bottom: -20rpx;
+      width: 100%;
+      height: 6rpx;
+      border-radius: 2rpx;
+      background: $uni-color-primary;
+    }
+  }
+}
+
+// // 删除 底部滚动条
+/* #ifndef APP-NVUE */
+::-webkit-scrollbar,
+::-webkit-scrollbar,
+::-webkit-scrollbar {
+  display: none;
+  width: 0 !important;
+  height: 0 !important;
+  -webkit-appearance: none;
+  background: transparent;
+}
+
+/* #endif */
+/* #ifdef H5 */
+// 通过样式穿透，隐藏H5下，scroll-view下的滚动条
+scroll-view ::v-deep ::-webkit-scrollbar {
+  display: none;
+}
+
+/* #endif */
+
+.skeleton {
+  height: 44rpx;
+}
+</style>
--- a/src/components/TimeLine/component/TimeBox.vue
+++ b/src/components/TimeLine/component/TimeBox.vue
@ -5,7 +5,6 @@
        <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>
            <view class="flex justify-between" style="min-width: 180rpx">
              <u-icon custom-prefix="custom-icon" name="C-bxl-redux" size="34"></u-icon>
--- a/src/components/Title/Title.vue
+++ b/src/components/Title/Title.vue
@ -5,10 +5,10 @@
        <view>{{ project.name }}</view>
      </view>
      <view class="mr-2" slot="right">
-        <u-icon class="m-1" name="checkmark-circle"></u-icon>
-        <u-icon class="m-1" name="reload"></u-icon>
-        <u-icon class="m-1" name="home"></u-icon>
-        <u-icon class="m-1" name="more-dot-fill"></u-icon>
+        <u-icon class="m-1" name="xuanzhong2" custom-prefix="custom-icon" size="38"></u-icon>
+        <u-icon class="m-1" name="shuaxin1" custom-prefix="custom-icon" size="38"></u-icon>
+        <u-icon class="m-1" name="home" custom-prefix="custom-icon" size="38"></u-icon>
+        <u-icon class="m-1" name="xuanxiang" custom-prefix="custom-icon" size="38"></u-icon>
      </view>
    </u-navbar>
  </view>