crm-mobile/pages_oa/legwork/component/legworkList.vue

<template>
  <view class="move-area">
    <!-- <view class="filter-group"></view> -->

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

    <wk-drag-button
      v-if="showAdd"
      @click="handleAdd">
      <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>
  </view>
</template>

<script>
  import { LegworkList, DeleteById } from 'API/oa/legwork'

  import LegworkItem from './legworkItem.vue'

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

  export default {
    name: 'LegworkList',
    components: {
      LegworkItem
    },
    mixins: [mainListMixins],
    data() {
      return {
        dialogMsg: '',
        selectedId: null,
      }
    },
    computed: {
    ...mapGetters({
      userInfo: 'user/userInfo'
    }),
    showAdd() {
      return this.$auth('crm.outwork.save')
    }
    },
    mounted() {
      this.getList()
    },
    methods: {
      getList(flag = false) {
        if (this.loading) return
        this.loading = true
        if (flag) {
          this.listParams.page = 0
        }
        this.listParams.page++
        this.listStatus = 'loading'
        let userId = null
        if (!this.$isEmpty(this.userInfo)) {
          userId = this.userInfo.userId
        } else {
          const userInfo = uni.getStorageSync('userInfo') || {}
          userId = userInfo.userId || ''
        }
        LegworkList({
          userId: userId,
        ...this.listParams
        }).then(res => {
          console.log('legwork list: ', res)
          this.loading = false
          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.loading = false
          this.listStatus = 'more'
        })
      },

      handleToDelete(id) {
        this.selectedId = id
        this.dialogMsg = '您确定要删除这一条外勤记录吗？'
        this.$refs.popup.open()
      },
      handleDialogConfirm(next) {
        next()
        DeleteById({
          id: this.selectedId
        }).then(() => {
          this.$toast('删除成功！')
          this.getList(true)
        }).catch()
      },

      handleAdd() {
        this.$Router.navigateTo('/pages_oa/legwork/add')
      }
    }
  }
</script>

<style scoped lang="scss">
	.move-area {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;

		.list-scroll {
			flex: 1;
			width: 100%;
			overflow: hidden;
			padding-top: 20rpx;
		}
	}
</style>