crm-mobile/pages_task/index.vue

<template>
  <view v-if="!refreshPage" class="uni-app">
    <view class="status-bar" />
    <view class="main-container">
      <wk-nav-bar title="任务" :show-left="!showTabbar">
        <!-- #ifndef MP-WEIXIN -->
        <button
          class="button white-btn"
          @click="handleToSearch">
          <text class="wk wk-search" />
        </button>
        <!-- #endif -->
      </wk-nav-bar>

      <!-- #ifdef MP-WEIXIN -->
      <view class="search-box linear-gradient">
        <view class="box" @click="handleToSearch">
          <text class="wk wk-search" />
          <text class="wk-placeholder">
            请输入任务名称
          </text>
        </view>
      </view>
      <!-- #endif -->

      <view class="filter-group">
        <wk-base-filter :tabs="taskOptions" @filter="handleFilter" />
      </view>

      <wk-scroll-view
        :status="listStatus"
        class="list-scroll"
        @refresh="getList({}, true)"
        @loadmore="getList()">
        <task-item
          v-for="(item, index) in listData"
          :key="index"
          :index="index"
          :item-data="item"
          @status="handleToChangeStatus" />
      </wk-scroll-view>
    </view>

    <wk-drag-button
      v-if="showAddBtn"
      @click="handleToAdd">
      <view class="wk-drag-btn">
        <text class="wk wk-plus icon" />
      </view>
    </wk-drag-button>

    <uni-popup ref="popup" type="dialog">
      <uni-popup-dialog
        :content="dialogMsg"
        type="warning"
        @confirm="handleDialogConfirm" />
    </uni-popup>

    <wk-tabbar
      v-if="showTabbar"
      v-model="footerIndex"
      :list="mixinFooterNav" />
  </view>
</template>

<script>
  import {
    QueryTaskList,
    SetWorkTaskStatus,
    SaveWorkTask
  } from 'API/oa/task'
  import TaskItem from './components/taskItem.vue'

  import tabbar from '@/mixins/tabbar.js'
  import mainListMixins from '@/mixins/mainList.js'
  import { mapGetters } from 'vuex'

  export default {
    name: 'TaskIndex',
    components: {
      TaskItem
    },
    mixins: [tabbar, mainListMixins],
    data() {
      return {
        guid: null,
        filterData: {
          type: 1,
          status: 1
        },

        refreshPage: false,

        taskOptions: [
          {
            label: '任务类型',
            field: 'type',
            value: 0,
            valueData: 0,
            options: [
              {label: '全部', value: 0},
              {label: '我负责的', value: 1},
              {label: '我参与的', value: 3}
            ]
          },
          {
            label: '任务状态',
            field: 'status',
            value: 1,
            valueData: 1,
            options: [
              {label: '全部', value: '_delete_'},
              {label: '正在进行', value: 1},
              {label: '已结束', value: 5}
            ]
          },
          {
            label: '优先级',
            field: 'priority',
            value: '_delete_',
            valueData: 0,
            options: [
              {label: '全部', value: '_delete_'},
              {label: '高', value: 3},
              {label: '中', value: 2},
              {label: '低', value: 1},
              {label: '无', value: 0},
            ]
          },
        ],

        dialogMsg: '',
        dialogConfig: null
      }
    },
    computed: {
      showAddBtn() {
        // return this.$auth('crm.customer.save')
        return true
      }
    },
    onShow() {
      if (this.refreshPage) {
        this.$nextTick(() => {
          this.refreshPage = false
          this.getList({}, true)
        })
      }
    },
    onLoad(options) {
      if (options.type) {
        const val = Number(options.type)
        if (!isNaN(val)) {
          const findIndex = this.taskOptions[0].options.findIndex(o => o.value === val)
          if (findIndex !== -1) {
            this.taskOptions[0].valueData = findIndex
            this.taskOptions[0].value = val
            this.filterData.type = val
          }
        }
      }
      this.getList()
    },
    methods: {
      getList(params = {}, refresh = false) {
        this.listStatus = 'loading'
        if (refresh) {
          this.listParams.page = 0
        }
        this.listParams.page++
        this.listParams = Object.assign(this.listParams, params)

        QueryTaskList({
        ...this.listParams,
        ...this.filterData
        }).then(response => {
          const res = response.page
          if (this.listParams.page === 1) {
            this.listData = []
          }
          this.listData = this.listData.concat(res.list)
          if (res.hasOwnProperty('lastPage')) {
            this.listStatus = res.lastPage ? 'noMore' : 'more'
          } else {
            this.listStatus = res.list.length === 0 ? 'noMore' : 'more'
          }
        }).catch(() => {
          this.listStatus = 'more'
        })
      },

      handleToSearch() {
        this.$Router.navigateTo('/pages_task/search')
      },

      handleFilter(item) {
        this.filterData[item.field] = item.value
        if (this.filterData.status === '_delete_') {
          delete this.filterData.status
        }
        if (this.filterData.priority === '_delete_') {
          delete this.filterData.priority
        }
        this.getList({}, true)
      },

      handleToChangeStatus(data) {
        this.dialogMsg = '您确定要更改该任务的状态吗?'
        this.dialogConfig = data
        this.$refs.popup.open()
      },

      handleDialogConfirm(next) {
        if (!this.dialogConfig) {
          next()
          return
        }
        SetWorkTaskStatus({
          taskId: this.dialogConfig.taskId,
          status: this.dialogConfig.status
        }).then(() => {
          this.$toast('更改成功')
          const index = this.dialogConfig.index
          this.listData[index].status = this.dialogConfig.status
          this.$set(this.listData, index, this.listData[index])
          next()
          this.dialogConfig = null
        }).catch(() => {})
      },

      handleToAdd() {
        this.$Router.navigateTo({
          url: '/pages_task/add'
        })
      }
    }
  }
</script>

<style scoped lang="scss">
.main-container {
  .white-btn {
    .wk-search {
      font-weight: 400;
      font-size: 42rpx;
    }
  }

  .search-box {
    width: 100%;
    padding: 10rpx 32rpx 20rpx;

    .box {
      width: 100%;
      height: 62rpx;
      color: #BBBBBB;
      background-color: white;
      border-radius: 12rpx;
      padding: 0 20rpx;
      @include left;

      .wk-search {
        margin-right: 15rpx;
      }
    }
  }

  .list-scroll {
    flex: 1;
    overflow-y: hidden;
  }
}
</style>