VUE+cube-ui框架实现数据分组后进行归档和删除的操作

本文链接：https://blog.csdn.net/weixin_45595203/article/details/106473511

cube-ui框架文档网址：https://didi.github.io/cube-ui/#/zh-CN/docs/action-sheet

首先展示效果：

长按弹出归或删除操作点击归档页面效果

我这里是归档，我这里的归档就是把该班课的状态改为禁用（我的数据库中有设置该班课的状态的一个字段），禁用成功后会在页面消失

下面就是这个页面的所有代码

<template>
	<div class="page">
		<div class="swipe-wrapper">
			<template v-for="(group,title) in list">
				<div class="group">
					<div class="title">{{title}}</div>
					<template v-for="item in group">
						<div class="row" 
						:class="{ active : item === currentIndex}"
						 @touchstart.prevent="start(item)"
						 @touchend.prevent="test">
							<img src="../../assets/everyclass.png" alt="" class="ban">
							<div class="left">{{item.coursename}}</div>
							<div class="right">{{item.ccid}}</div>
						</div>
					</template>
				</div>
			</template>
		</div>
	</div>
</template>

<script>
	//循环数据进行分组的函数，下面多次调用，我就直接把它写成一个函数了
	function info(item){
		let list = {}
		item.forEach((e, i, arr) => {
			let classname = e.classname
			if (list[classname]) {
				list[classname].push(e)
			} else {
				list[classname] = [e]
			}
		})
		return list
	}
	export default {
		data: function() {
			return {
				info:'',
				currentIndex: -1,
				list: {},
				banke: require('@/assets/class.png'),
			}
		},
		mounted() {
			//我在登录的时候将token存进了sessionStorage
			let token = sessionStorage.getItem('token')
			//将token传给后台，查看是否失效，如果失效得重新登录
			//如果你不用token的话就不用写这两句了
			let data = {
				token: token
			}
			this.$request({
				method: 'post',
				url: '/banjimanager.banke/index',
				data: data
			}).then(res => {
				//在这里调用info()函数，将数据进行分组
				this.list = info(res.message)
			}).catch(res => {})
		},
		methods: {
			start: function(item) {
				//清除计时器clearTimeout
				clearTimeout(this.timer)	
				//在长按800毫秒后，调用showActive()方法，显示归档或删除的操作
				this.timer = setTimeout(() => {
					this.showActive()
				}, 800)
				this.currentIndex = item
				//把当前长按的列表的数据存储到info中
				this.info=item
			},
			test: function() {
				clearTimeout(this.timer)
				this.currentIndex = -1
			},
			showActive() {
				this.$createActionSheet({
					title: '操作提示',
					active: 0,
					data: [{
							content: '归档'
						},
						{
							content: '删除'
						},
					],
					onSelect: (item, index) => {
						if (index == 0) {
							//归档
							this.gd(this.info)
						} else if (index == 1) {
							//删除
							this.del(this.info)
						}
					},
				}).show()
			},
			gd: function(item) {
				let coursename = item.coursename
				let classname = item.classname
				let ccid = item.ccid
				this.$createDialog({
					type: 'confirm',
					icon: 'cubeic-alert',
					content: '是否归档'+classname + coursename,
					confirmBtn: {
						text: '确定',
						active: true,
						disabled: false,
						href: 'javascript:;'
					},
					cancelBtn: {
						text: '取消',
						active: false,
						disabled: false,
						href: 'javascript:;'
					},
					onConfirm: (e, promptValue) => {
						//班级名称
						let ccid = item.ccid
						let token = sessionStorage.getItem('token')
						let data = {
							token: token,
							ccid: ccid
						}
						this.$request({
							method: 'post',
							url: '/banjimanager.banke/gd',
							data: data
						}).then(res => {
							if (res.error == true) {
								this.$createToast({
									type: 'error',
									txt: res.message,
									time: 1000,
								}).show()
							} else {
								this.$createToast({
									type: 'correct',
									txt: res.message,
									time: 1000,
									onTimeout: () => {
										this.list=info(res.banke)
									}
								}).show()
							}
						}).catch(res => {})
					}
				}).show()
			},
			del: function(item) {
				let coursename = item.coursename
				let classname = item.classname
				let ccid = item.ccid
				this.$createDialog({
					type: 'confirm',
					icon: 'cubeic-alert',
					content: '是否删除' +classname + coursename,
					confirmBtn: {
						text: '确定',
						active: true,
						disabled: false,
						href: 'javascript:;'
					},
					cancelBtn: {
						text: '取消',
						active: false,
						disabled: false,
						href: 'javascript:;'
					},
					onConfirm: () => {
						let ccid = item.ccid
						let token = sessionStorage.getItem('token')
						let data = {
							token: token,
							ccid: ccid
						}
						this.$request({
							method: 'post',
							url: '/banjimanager.banke/delete',
							data: data
						}).then(res => {
							if (res.error == true) {
								this.$createToast({
									type: 'error',
									txt: res.message,
									time: 1000,
								}).show()
							} else {
								this.$createToast({
									type: 'correct',
									txt: res.message,
									time: 1000,
									onTimeout: () => {
										this.list=info(res.banke)
									}
								}).show()
							}
						}).catch(res => {})
					}
				}).show()
			}
		}
	}
</script>

<style scoped>
	.title {
		background-color: #f8f8ff;
		line-height: 30px;
	}

	.active {
		background-color: #ccc;
	}

	.row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 35px;
		position: relative;
		margin-top: 12px;
	}

	.row::after {
		display: block;
		content: '';
		position: absolute;
		width: 100%;
		height: 1px;
		bottom: 0;
		left: 0;
		border-bottom: 1px solid #ebebeb;
		-webkit-transform-origin: 0 bottom;
		transform-origin: 0 bottom;
		transform: scaleY(0.3);
	}

	.left {
		padding-left: 10px;
		text-align: left;
		flex-grow: 0;
	}

	.right {
		flex-grow: 1;
		text-align: right;
		color: gray;
	}

	.group {
		margin: 10px;
	}
	.ban {
		width: 35px;
		height: 25px;
	}
</style>

这其中用到了cube-ui框架中的几个组件，Dialog,Toast,ActionSheet,如果想要深入了解这些组件的功能，请去cube-ui框架文档中了解，网址在开头已经写了，

在代码中this.$request是封装了一个request.js，直接引用的，注意：这个request.js是与App.vue同级的

request.js文件的内容如下：

import Vue from 'vue'
import axios from 'axios'
import qs from 'qs'
import {
	Toast,
	Dialog
} from 'cube-ui'

Vue.use(Toast,Dialog)

//开发环境和生产环境，baseUrl不能一样
//这里的路径按照自己项目后台的路径来
const baseUrl = process.env.NODE_ENV === 'production' ? 'http://localhost/tp/public/index.php/index' : '/api'

const toast = Toast.$create({
	txt: 'Loading...',
	mask: false,
	time: 0
})


//创建 axios实例  
var instance = axios.create({
	baseURL: baseUrl,
	transformRequest: [function(data, headers) {
		// Do whatever you want to transform the data
		return qs.stringify(data) //将json对象转换成字符串
	}],
});

//发送请求之前
instance.interceptors.request.use(config => {
	// Do something before request is sent
	toast.show()
	return config;
}, error => {
	// Do something with request error
	return Promise.reject(error);
});

// 请求接收到之后
instance.interceptors.response.use(response => {
	// Do something with response data
	toast.hide()
	let data = response.data
	if (data.error == true) {
		Dialog.$create({
			type: 'alert',
			content: data.message,
			icon: 'cubeic-alert'
		}).show()
		return Promise.reject(response.data)
	} else {
		return response.data
	}
}, error => {
	// Do something with response error
	toast.hide()
	Dialog.$create({
		type: 'alert',
		content: '服务器出现错误',
		icon: 'cubeic-alert'
	}).show()
	return Promise.reject(response.data)
});

export default instance

封装好了之后，需要在main.js中进行引用，在main中加入以下两句话就可以了

import request from './request.js'
Vue.prototype.$request = request

之后就可以用this.$request向后台发送请求了。

ok！！！到这里就可以进行编辑和删除的操作了，

但是还需要注意一点，就是在你删除或归档或者其他操作成功后，需要再向前台返回你的需要分组的数据，例如我的是班课，我把我班课中的某一个删除了，删除成功了之后就需要再次查询班课中所有的数据并且返回给前台，调用在script中写的那个info()函数，对数据重新分组。

VUE+cube-ui框架 实现数据分组后进行归档和删除的操作

VUE+cube-ui框架实现数据分组后进行归档和删除的操作