opms_wechat/pages/schedule/supervise/index.vue

<!--
 * @Author: liuzhenlin 461480418@qq.ocm
 * @Date: 2023-02-22 11:11:21
 * @LastEditors: liuzhenlin
 * @LastEditTime: 2023-03-06 15:47:47
 * @Description: file content
 * @FilePath: \oms\pages\schedule\supervise\index.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="linkToDetail(v)">
          <u-row>
            <u-col span="12">
              <view class="header">
                <u-text color="#272C36" bold :text="v.taskTitle"></u-text>
                <view class="flex mt20">
                  <view class="flex_1">
                    <u-text color="#272C36" size="26rpx" :text="selectDictLabel(taskTypeOption, v.taskType)"></u-text>
                  </view>
                  <view>
                    <u-text color="#AEB3BB" size="26rpx" :text="parseTime(v.taskStartDate, '{y}-{m}-{d}')"></u-text>
                  </view>
                </view>
              </view>
              <view class="content">
                <u-row type="flex" customStyle="padding:10rpx 0">
                  <u-col :span="3"><u-text text="状态" size="26rpx" color="#AEB3BB"></u-text></u-col>
                  <u-col :span="9">
                    <u-text
                      :text="selectDictLabel(taskStatusOption, v.taskStatus)"
                      size="26rpx"
                      color="#272C36"></u-text>
                  </u-col>
                </u-row>
                <u-row type="flex" customStyle="padding:10rpx 0">
                  <u-col :span="3"><u-text text="督办来源" size="26rpx" color="#AEB3BB"></u-text></u-col>
                  <u-col :span="9">
                    <u-text :text="selectDictLabel(sourceOption, v.source)" size="26rpx" color="#272C36"></u-text>
                  </u-col>
                </u-row>
                <u-row type="flex" customStyle="padding:10rpx 0">
                  <u-col :span="3"><u-text text="是否超期" size="26rpx" color="#AEB3BB"></u-text></u-col>
                  <u-col :span="9">
                    <u-text
                      :text="isNotOverdue(parseTime(v.taskEndDate, '{y}-{m}-{d} 23:59:59')) ? '否' : '是'"
                      size="26rpx"
                      color="#272C36"></u-text>
                  </u-col>
                </u-row>
                <u-row type="flex" customStyle="padding:10rpx 0">
                  <u-col :span="3"><u-text text="督办内容" size="26rpx" color="#AEB3BB"></u-text></u-col>
                  <u-col :span="9"><u-text :text="v.taskDesc" size="26rpx" color="#272C36"></u-text></u-col>
                </u-row>
                <u-row type="flex" customStyle="padding:10rpx 0">
                  <u-col :span="3"><u-text text="负责人" size="26rpx" color="#AEB3BB"></u-text></u-col>
                  <u-col :span="9">
                    <u-text :text="selectDictLabel(userList, v.mainUserId)" size="26rpx" color="#272C36"></u-text>
                  </u-col>
                </u-row>
                <u-row type="flex" customStyle="padding:10rpx 0">
                  <u-col :span="3"><u-text text="协办人" size="26rpx" color="#AEB3BB"></u-text></u-col>
                  <u-col :span="9">
                    <u-text :text="generateOwnerUser(v.ownerUserId)" size="26rpx" color="#272C36"></u-text>
                  </u-col>
                </u-row>
                <u-row type="flex" customStyle="padding:10rpx 0">
                  <u-col :span="3"><u-text text="监办人" size="26rpx" color="#AEB3BB"></u-text></u-col>
                  <u-col :span="9">
                    <u-text :text="selectDictLabel(userList, v.watchUserId)" size="26rpx" color="#272C36"></u-text>
                  </u-col>
                </u-row>
                <u-row type="flex" customStyle="padding:10rpx 0">
                  <u-col :span="3"><u-text text="督办人" size="26rpx" color="#AEB3BB"></u-text></u-col>
                  <u-col :span="9">
                    <u-text :text="selectDictLabel(userList, v.supervisorUserId)" size="26rpx" color="#272C36"></u-text>
                  </u-col>
                </u-row>
              </view>
            </u-col>
          </u-row>
        </view>
        <u-loadmore :status="loadStatus" />
      </scroll-view>
    </view>
  </view>
</template>

<script>
  import taskApi from '@/api/task'
  import userApi from '@/api/system/user'
  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, //列表元素数量
        taskTypeOption: [], //督办类型
        sourceOption: [], //来源列表
        userList: [], //用户列表
        taskStatusOption: [
          {
            key: '10',
            value: '发起',
          },
          {
            key: '20',
            value: '进行中',
          },
          {
            key: '30',
            value: '流程完成',
          },
          {
            key: '40',
            value: '审批拒绝',
          },
          {
            key: '50',
            value: '撤销',
          },
        ], //督办状态
      }
    },

    mounted() {
      this.getOptions()
    },

    methods: {
      getOptions() {
        Promise.all([this.getDicts('task_type'), this.getDicts('plat_task_source'), userApi.getList()])
          .then(([types, source, user]) => {
            this.taskTypeOption = types.data.values || []
            this.sourceOption = source.data.values || []
            this.userList = user.data.list.map((item) => ({ key: '' + item.id, value: item.nickName }))
            this.getSuperviseData()
          })
          .catch((err) => console.log(err))
      },
      // 判断是否没有超期
      isNotOverdue(date) {
        return new Date() <= new Date(date)
      },
      // 协办人
      generateOwnerUser(ids = null) {
        let nameArr = []
        if (ids) {
          let idList = ids.split(',')
          idList.forEach((item) => {
            let findUser = this.userList.find((user) => user.key == item)
            if (findUser && findUser.value) nameArr.push(findUser.value)
          })
        }
        return nameArr.join(',')
      },
      // 上拉滚动
      lower() {
        if (this.taskList.length < this.taskTotal && this.loadStatus != 'loading') {
          this.$u.throttle(this.getSuperviseData(), 2000, false)
        }
      },
      linkToDetail(v) {
        uni.navigateTo({
          //保留当前页面，跳转到应用内的某个页面
          url: '/pages/schedule/supervise/details?id=' + v.id + '&type=' + this.curTabIndex,
        })
      },
      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'
        } else {
          this.loadStatus = 'nomore'
        }
      },
      // 改变tab
      changeTabs(data) {
        this.curTabIndex = data.status
        this.searchList(true)
      },
    },
  }
</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 {
          background: #f6f7fb;
          border: 1px solid #ceccca;
          border-radius: 20rpx;
          margin-bottom: 32rpx;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
          .header {
            padding: 30rpx 30rpx 15rpx;
            border-bottom: 2rpx solid #ceccca;
          }
          .content {
            padding: 15rpx 30rpx 30rpx;
          }
        }
      }
    }
    .mr10 {
      margin-right: 10rpx;
    }
    .mt20 {
      margin-top: 20rpx;
    }
  }
</style>