ruoyi-miniapp/pages/task.vue

<template>
  <cs-page :selected="1" title="执法任务" isTab>
    <view class="page-container page">
      <view class="drop-box">
        <van-dropdown-menu active-color="#17C653">
          <van-dropdown-item
            :value="queryParams.createDeptId"
            :options="getDropdownOption('dept')"
            @change="
              v => {
                querySelect(v, 'createDeptId')
              }
            "
          />
          <van-dropdown-item
            :value="queryParams.zf_lx"
            :options="getDropdownOption('zf_lx')"
            @change="
              v => {
                querySelect(v, 'zf_lx')
              }
            "
          />
          <van-dropdown-item
            :value="queryParams.select_week"
            :options="getDropdownOption('select_week')"
            @change="
              v => {
                querySelect(v, 'select_week')
              }
            "
          />
        </van-dropdown-menu>
      </view>

      <scroll-view
        scroll-y="true"
        :refresher-enabled="true"
        @refresherrefresh="refresherrefresh"
        :refresher-triggered="refresherTriggered"
        @refresherpulling="refresherpulling"
        @scrolltolower="loadMore"
        class="list"
        :enable-flex="true"
        :style="{ height: `${listHeight}px` }"
      >
        <view
          v-for="task in list"
          :key="task.id"
          class="wd-flex wd-items-center enterprise"
          @click="goDetail(task.id)"
        >
          <view class="rate">
            <van-circle
              :value="task.status == '3' ? 0 : task.pace"
              size="56"
              type="2d"
              color="#17c653"
              :layer-color="task.status == '2' ? '#EAFFF1' : '#F1F1F4'"
              :canvasId="`canvas-${task.id}`"
            >
              <template>
                <u-count-to
                  :startVal="0"
                  :endVal="task.pace"
                  fontSize="16"
                  bold
                  duration="1000"
                  color="#071437"
                ></u-count-to>
                <text style="color: #071437; font-size: 24rpx">%</text>
              </template>
            </van-circle>
          </view>
          <view class="wd-flex wd-flex-col">
            <text
              class="wd-font-800 wd-text-15"
              style="
                padding-right: 3rem;
                margin-bottom: 4rpx;
                white-space: nowrap;
                text-overflow: ellipsis;
                width: 432rpx;
                overflow: hidden;
              "
            >
              {{ task.title }}
            </text>
            <view class="wd-flex" style="margin-top: 4rpx">
              <u-icon
                name="calendar"
                size="18"
                :color="task.status == '2' ? '#17C653' : '#78829D'"
              ></u-icon>
              <text
                class="address wd-text-12"
                style="margin-left: 4rpx"
                :style="{
                  color: task.status == '2' ? '#17C653' : '#78829D'
                }"
              >
                于{{
                  $util.formatDate(task.endDate, 'YYYY年MM月DD日')
                }}结束
              </text>
            </view>
            <view class="tagList" style="margin-top: 16rpx">
              <view class="tag" v-if="task.deptName">
                {{ task.deptName }}
              </view>
              <view class="tag">
                {{
                  $dict.echoDicValue(dictMap.task_priority, task.priority)
                }}
              </view>
              <view
                class="tag"
                v-for="(tag, index) in task.tagList"
                :key="index"
              >
                {{ tag }}
              </view>
            </view>
          </view>
          <view class="audit">
            <cs-dict-tag
              :dict="dictMap.task_state"
              :value="task.status"
            ></cs-dict-tag>
          </view>
        </view>
        <u-loadmore
          :status="load"
          marginTop="12"
          marginBottom="12"
          v-if="load !== 'nomore'"
        />
        <view style="height: 96rpx; width: 100%" v-else></view>
        <cs-emty marginTop="24" v-if="list.length == 0"></cs-emty>
      </scroll-view>
    </view>
  </cs-page>
</template>

<script>
import {
  getDictBatchByType,
  getDeptTree,
  getTagData
} from '@/api/system/dict.js'
import { TaskApi } from '@/api/task/index.js'
export default {
  data() {
    return {
      queryParams: {
        pageSize: 10,
        pageNo: 1,
        zf_lx: '',
        priority: '',
        createDeptId: '',
        select_week: '',
        tagList: ''
      },
      listHeight: 0,
      refresherTriggered: false,
      list: [],
      load: 'loadmore',
      dictMap: {}
    }
  },
  async onLoad() {
    await this.getDict()
  },
  onReady() {
    this.getPageHeight()
    this.queryEnterprise()
  },
  methods: {
    getPageHeight() {
      const query = uni.createSelectorQuery().in(this)
      query
        .select('.page')
        .boundingClientRect(data => {
          this.listHeight = data.height - 55 - 25
        })
        .exec()
    },
    async getList() {
      uni.showToast({
        title: '加载中',
        mask: true,
        icon: 'loading'
      })
      this.load = 'loading'
      const res = await TaskApi.getList(this.queryParams)
      this.list.push(
        ...res.data.list.map((i, index) => {
          return {
            ...i,
            pace: (i.taskFinishNum / i.taskExecNum) * 100
          }
        })
      )
      this.load = 'loadmore'
      if (this.list.length >= res.data.total) {
        this.load = 'nomore'
      }
      uni.hideToast()
    },
    async getDict() {
      const dept = await TaskApi.getDept()
      const tags = await getTagData(['zf_lx'].join(','))
      const dict = await getDictBatchByType({
        type: ['select_week', 'task_state', 'task_priority'].join(',')
      })
      let tagMap = {}
      tags.data.forEach(t => {
        tagMap[t.tagCode] = t.children
      })
      this.dictMap = {
        ...tagMap,
        ...dict.data,
        dept: dept.data
      }
    },
    getDropdownOption(key) {
      if (!this.dictMap[key]) return []
      const keyMap = {
        task_priority: '按等级',
        zf_lx: '按类型',
        dept: '按发布',
        select_week: '按周期'
      }
      if (['zf_lx'].includes(key)) {
        return [
          { value: '', text: keyMap[key] },
          ...this.dictMap[key].map(d => {
            return {
              value: d.id,
              text: d.tagName
            }
          })
        ]
      }
      if (['dept'].includes(key)) {
        return [
          { value: '', text: keyMap[key] },
          ...this.dictMap[key].map(d => {
            return {
              value: d.value,
              text: d.label
            }
          })
        ]
      }

      return [
        { value: '', text: keyMap[key] },
        ...this.dictMap[key].map(d => {
          return {
            value: d.value,
            text: d.label
          }
        })
      ]
    },
    querySelect(v, key) {
      this.queryParams[key] = v.detail
      this.queryEnterprise()
    },
    queryEnterprise() {
      this.queryParams.pageNo = 1
      this.load = 'loadmore'
      this.list = []
      this.queryParams.tagList = [this.queryParams.zf_lx]
        .filter(i => i != '')
        .join()
      this.getList()
    },
    loadMore() {
      if (this.load == 'nomore') {
        uni.showToast({
          title: '没有更多了',
          icon: 'none'
        })
        return
      }
      this.queryParams.pageNo++
      this.getList()
    },
    refresherpulling() {
      const that = this
      if (!this.refresherTriggered) {
        this.refresherTriggered = true
        setTimeout(() => {
          that.refresherTriggered = false
        }, 1000)
      }
    },
    refresherrefresh() {
      this.resetQuery()
    },
    async resetQuery() {
      this.queryParams = {
        pageSize: 10,
        pageNo: 1,
        zf_lx: '',
        priority: '',
        createDeptId: '',
        select_week: '',
        tagList: ''
      }
      await this.queryEnterprise()
    },
    goDetail(id) {
      uni.navigateTo({
        url: `/sub/task/detail?id=${id}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.page-container {
  height: 100%;
  overflow: hidden;
}
.list {
  padding: 0 24rpx;
}
.enterprise {
  padding: 24rpx;
  background-color: #fff;
  border-radius: $cs-border-radius;
  gap: 24rpx;
  margin-top: 24rpx;
  position: relative;
  overflow: hidden;
  font-size: 24rpx;
  border: 2rpx solid var(--LightMode-Grey-Grey-100, #f9f9f9);
  &:last-child {
    margin-bottom: 48rpx;
  }
  &:active {
    background-color: $cs-color-touch;
  }
  .address {
    color: $uni-text-color-grey;
  }
  .audit {
    position: absolute;
    right: 0;
    top: 0;
    transform-origin: 50% 50%;
    transform: translateX(33px) translateY(9px) rotateZ(45deg);
  }
  .rate {
    position: relative;
  }
}
.drop-box {
  padding: 24rpx;
  border-bottom: 2rpx solid #f1f1f4;
  background-color: #fff;
  ::v-deep .van-dropdown-menu {
    box-shadow: none;
    height: fit-content !important;
    font-size: 26rpx;
    padding: 12rpx 24rpx;
  }
}

::v-deep .u-list {
  padding: 24rpx;
}

::v-deep .u-count-num {
  font-size: 16px;
  font-family: 'WeChat Sans Std';
  font-weight: 800;
}
</style>