opms_wechat/pages/schedule/components/supervise.vue

<!--
 * @Author: liuzhenlin 461480418@qq.ocm
 * @Date: 2023-01-16 14:35:18
 * @LastEditors: liuzhenlin
 * @LastEditTime: 2023-02-16 17:07:46
 * @Description: file content
 * @FilePath: \oms\pages\schedule\components\supervise.vue
-->
<template>
  <view class="supervise-main">
    <u-tabs
      :list="list"
      @change="changeTabs"
      :current="curTabIndex - 1"
      :scrollable="false"
      :activeStyle="{
        color: '#323232',
        fontWeight: 'bold',
      }"
      :inactiveStyle="{
        color: '#969696',
      }"></u-tabs>
    <!-- 列表 -->
    <view class="data-scroll-wrap">
      <u-empty mode="list" text="暂无督办数据" v-if="taskList.length == 0"></u-empty>
      <scroll-view v-else class="data-list" :scroll-top="scrollTop" :scroll-y="true" @scrolltolower="lower">
        <view class="todo-item" v-for="(v, i) in taskList" :key="i" @click="showDesc(v)">
          <u-row>
            <u-col span="12">
              <view class="header">
                <u-row>
                  <u-col span="12">
                    <view class="flex_l">
                      <image class="todo-img" src="../../../static/images/todo-img.png" mode="scaleToFill" />
                      <text class="tit-txt flex_1">
                        {{ v.taskTitle }}
                      </text>
                      <view class="do-status" :class="'status' + v.taskStatus">{{ setTaskStatus(v.taskStatus) }}</view>
                    </view>
                  </u-col>
                </u-row>
                <view class="content flex">
                  <text class="content-txt text-ellipsis">
                    {{ v.taskDesc }}
                  </text>
                </view>
                <view class="content-footer flex_l">
                  <text class="date mr10">
                    {{ parseTime(v.taskStartDate, '{m}-{d} {h}:{i}') }}
                  </text>
                  <text class="date mr10">-</text>
                  <text class="date">{{ parseTime(v.taskEndDate, '{m}-{d} {h}:{i}') }}</text>
                </view>
              </view>
            </u-col>
          </u-row>
        </view>
        <u-loadmore :status="loadStatus" />
      </scroll-view>
    </view>
    <u-modal :show="showModal" :content="content" @confirm="showModal = false"></u-modal>
  </view>
</template>

<script>
  import taskApi from '../../../api/task'
  import to from 'await-to-js'
  export default {
    name: 'omsTodo',

    data() {
      return {
        curTabIndex: 1, //tabs状态
        loadStatus: '', //加载状态
        list: [
          {
            name: '我的待办',
            status: 1,
          },
          {
            name: '我发起的',
            status: 2,
          },
          {
            name: '我处理的',
            status: 3,
          },
        ],
        pageNum: 0,
        pageSize: 10,
        taskList: [], //客户列表
        taskTotal: 0, //列表元素数量
        showModal: false,
        content: '', //modal内容
      }
    },

    mounted() {
      this.getSuperviseData()
    },

    methods: {
      // 上拉滚动
      lower() {
        if (this.taskList.length < this.taskTotal && this.loadStatus != 'loading') {
          this.$u.throttle(this.getSuperviseData(), 2000, false)
        }
      },
      showDesc(v) {
        console.log(v.taskDesc)
        if (v.taskDesc) {
          this.showModal = true
          this.content = v.taskDesc
        }
      },
      searchList() {
        this.pageNum = 0
        this.getSuperviseData(true)
      },
      async getSuperviseData(reset) {
        this.loadStatus = 'loading'
        this.pageNum++
        let params = {
          operateType: '' + this.curTabIndex,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        }
        const [err, res] = await to(taskApi.getList(params))
        if (err) {
          this.loadStatus = 'nomore'
          return
        }
        if (res && res.code == 200) {
          if (reset) {
            this.taskList = res.data.list || []
          } else {
            this.taskList = [...this.taskList, ...(res.data.list || [])]
          }
          this.taskTotal = res.data.total
          this.loadStatus = this.taskList.length == this.taskTotal ? 'nomore' : 'loadmore'
          console.log(this.loadStatus)
        } else {
          this.loadStatus = 'nomore'
        }
      },
      // 改变tab
      changeTabs(data) {
        console.log(data)
        this.curTabIndex = data.status
        this.searchList(true)
      },
      setTaskStatus(status) {
        let statusObj = {
          10: '已发起',
          20: '进行中',
          30: '已完成',
        }
        return statusObj[status]
      },
    },
  }
</script>

<style lang="scss" scoped>
  .supervise-main {
    height: 100%;
    .data-scroll-wrap {
      height: calc(100vh - 366rpx);
      padding: 30rpx 0;
      .data-list {
        width: 100%;
        height: 100%;
        background: #ffffff;
        overflow: auto;
        .todo-item {
          padding: 12rpx 40rpx 12rpx 46rpx;
          background: #f2f3f5;
          border-radius: 15rpx;
          margin-bottom: 32rpx;
          .tit-txt {
            font-size: 28rpx;
            font-weight: bold;
            color: #323232;
          }
          .content-txt {
            font-size: 28rpx;
            color: #646464;
          }
          .user-txt {
            font-size: 20rpx;
            color: #646464;
          }
          .header {
            .todo-img {
              flex: 0 0 24rpx;
              height: 24rpx;
              margin-right: 12rpx;
            }
            .do-status {
              width: 70rpx;
              height: 30rpx;
              border-radius: 0rpx 15rpx 0rpx 0rpx;
              text-align: center;
              line-height: 30rpx;
              font-size: 18rpx;
            }
          }
          .content {
            padding: 12rpx 0 12rpx 40rpx;
            font-size: 28rpx;
            color: #646464;
          }
          .content-footer {
            padding: 0 0 12rpx 40rpx;
            .date {
              font-size: 24rpx;
              color: #969696;
            }
            .user-img {
              width: 46rpx;
              height: 46rpx;
              border-radius: 50%;
              margin-right: 15rpx;
            }
          }
        }
        .status10 {
          color: #4096fb;
          background: rgba(64, 150, 251, 0.2);
        }
        .status20 {
          background: rgba(255, 184, 60, 0.2);
          color: #ffb83c;
        }
        .status30 {
          color: #fe6936;
          background: rgba(254, 105, 54, 0.2);
        }
      }
    }
    .mr10 {
      margin-right: 10rpx;
    }
  }
</style>