workflow-mobile/mixins/list.js

import {dibootApi} from '@/utils/dibootApi'
import more from './more'

export default {
	mixins: [more],
	data() {
		return {
			primaryKey: 'id',
			// 请求接口基础路径
			baseApi: '/',
			// 列表数据接口
			listApi: '',
			// 删除接口
			deleteApiPrefix: '',
			// 是否在页面初始化时自动加载列表数据
			getListFromMixin: true,
			// 与查询条件绑定的参数（会被查询表单重置和改变的参数）
			queryParam: {},
			// 用户自定义查询条件
			customQueryParam: {},
			// //下拉刷新的状态
			triggered: false, 
			// load状态
			status: 'loadmore',
			loadText: {
				loadmore: '上拉加载更多',
				loading: '努力加载中',
				nomore: '没有更多了'
			},
			// 分页
			page: {
				pageIndex: 1,
				pageSize: 20,
				totalCount: 0,
				totalPage: 0
			},
			// 激活的Index
			activeIndex: -100,
			// 是否弹出删除
			deleteShow: false,
			// 右滑菜单列表
			actionOptions: [{
				text: '编辑',
				type: 'handleUpdate',
				style: {
					backgroundColor: this.$color.warning
				}
			}, {
				text: '删除',
				type: 'handleDelete',
				style: {
					backgroundColor: this.$color.error
				}
			}],
			// 数据列表
			list: [],
			// 是否允许访问详情
			allowGoDetail: true,
			// 状态栏高度
			diStatusBarHeight: 0,
			// 阻止重复发送
			keyMap: {}
		}
	},
	onLoad() {
		this.diStatusBarHeight = uni.getSystemInfoSync().statusBarHeight
		
	},
	onShow() {
		this.activeIndex = -100
		this.getListFromMixin && this.getList(true)
	},
	methods: {
		/**
		 * 新增
		 */
		handleCreate() {
			uni.navigateTo({
				url: './form'
			})
		},
		/*
		 * 详情
		 */
		handleDetail(id) {
			if(!this.allowGoDetail) {
				return
			}
			uni.navigateTo({
				url:`./detail?id=${id}`
			})
		},
		/* 
		 * 编辑
		 */
		handleUpdate(id) {
			uni.navigateTo({
				url: `./form?id=${id}`
			})
		},
		/**
		 * 删除
		 */
		handleDelete(id) {
			this.deleteShow = true
			this.activeIndex = id
		},
		/**
		 * 确认删除
		 * @param {Object} id
		 */
		async handleConfirmDel() {
			try{
				const deleteApiPrefix = this.deleteApiPrefix ? this.deleteApiPrefix : ''
				const res = await dibootApi.delete(`${this.baseApi}${deleteApiPrefix}/${this.activeIndex}`)
				this.showToast(res.msg, res.code === 0 ? 'success' : 'error')
			}catch(e){
				console.log(e)
				this.showToast('网络异常！')
			} finally {
				this.page.pageIndex = 1
				this.getList(true)
				this.handleCancelDel()
			}
			
		},
		/**
		 * 取消删除
		 */
		handleCancelDel() {
			this.deleteShow = false
			this.activeIndex = -100
		},
		/*
		 * 打开左滑操作
		 */
		handleActiveSwipeAction(index) {
			this.activeIndex = index
		},
		/**
		 * 点击左滑按钮
		 * @param {Number} index  所在列表的primaryKey
		 * @param {Number} optionIdx  操作列表actionOptions的下标
		 */
		handleActionClick(index, optionIdx) {
			this[this.actionOptions[optionIdx]['type']](index)
		},
		/**
		 * 下拉刷新
		 */
		handlePullDownRefresh() {
			if (this.triggered) return
			this.triggered = true
			this.page.pageIndex = 1
			this.getList(true)
		},
		/**
		 * 触底加载
		 */
		handleOnreachBottom() {
			// 将当前pageIndex制作成下标，并查看缓存中是否存在指定下标的值
			const key = `_${this.page.pageIndex}`
			const value = this.keyMap[key]
			// 如果value存在，表示缓存有值，那么阻止请求
			if(value) {
				return 
			}
			// value不存在，表示第一次请求,设置占位
			this.keyMap[key] = 'temp'
			this.status = 'nomore'
			if (this.page.pageIndex <= this.page.totalPage) {
				this.getList()
			}
		},
		/**
		 * 获取数据列表
		 */
		async getList(replace = false) {
			try{
				this.status = 'loading'
				const tempQueryParam = this.buildQueryParamPage()
				const res = await dibootApi.get(this.listApi ? `${this.baseApi}/${this.listApi}` : `${this.baseApi}/list`, tempQueryParam)
				if (res.code === 0) {
					this.list = replace ? res.data : this.list.concat(res.data)
					this.page = res.page
					this.page.pageIndex++
                    console.log('获取到的数据列表是',this.list)
				} else {
					this.showToast(res.msg)
				}
			}catch(e){
				//TODO handle the exception
			} finally {
				this.triggered = false
				this.status = (this.list || []).length == this.page.totalCount ? 'nomore' : 'loadmore'
			}
			
		},
		buildQueryParamPage() {
			this.queryParam.pageIndex = this.page.pageIndex
			return Object.assign(this.queryParam, this.customQueryParam)
		},
		/**
		 * 展示提示
		 * @param {Object} title 提示内容
		 * @param {Object} icon 提示icon, 默认使用error
		 */
		showToast(title, icon = 'error') {
			uni.showToast({
			    title,
				icon
			});
		}
	},
	computed: {
		listMargin() {
			return `margin: ${this.list.length === 0 ? 0 : 20}rpx`
		}
	}
}