VUE+cube-ui框架 修改和删除数据
cube-ui框架文档网址:https://didi.github.io/cube-ui/#/zh-CN/docs/action-sheet首先展示页面效果:编辑的时候会获取到你长按的列表的课程名称下面就是代码:<template><div><template v-for="(item,index) in list"><div class="row" :c
·
cube-ui框架文档网址:https://didi.github.io/cube-ui/#/zh-CN/docs/action-sheet
首先展示页面效果:
编辑的时候会获取到你长按的列表的课程名称
下面就是代码:
<template>
<div>
<template v-for="(item,index) in list">
<div class="row" :class="{ active : index == currentIndex}" @touchstart.prevent="start(index)" @touchend.prevent="test">
<img src="../../assets/class.png" alt="" class="course">
<div class="left">{{item.coursename}}</div>
<div class="right">{{item.updatetime}}</div>
</div>
</template>
</div>
</template>
<script>
export default {
data: function() {
return {
currentIndex: -1,
index: -1,
list: [],
}
},
mounted() {
let token = sessionStorage.getItem('token')
this.$request({
method: 'post',
url: '/schoolmanager.course/index',
data: {
token
}
}).then(res => {
//因为后台传过来的时间是年月日时分秒,所以我在前台就对时间做了处理,用map方法对传过来的数据进行遍历,修改数据中包含的时间
this.list = res.message.map(item=>{
item['updatetime']=this.$formatYmd(item['updatetime'])
return item
})
}).catch(res => {})
},
methods: {
start: function(index) {
clearTimeout(this.timer)
this.timer = setTimeout(() => {
this.showActive()
console.log(index)
}, 800)
this.currentIndex = index
this.index = index
},
test: function() {
clearTimeout(this.timer)
this.currentIndex = -1
console.log('touchend')
},
showActive() {
this.$createActionSheet({
title: '操作提示',
active: 0,
data: [{
content: '编辑'
},
{
content: '删除'
},
],
onSelect: (item, index) => {
console.log(index)
if (index == 0) {
//编辑
this.edit(this.index)
} else if (index == 1) {
//删除
this.del(this.index)
}
},
}).show()
},
edit: function(index) {
this.dialog = this.$createDialog({
type: 'prompt',
title: '编辑课程名称',
prompt: {
value: this.list[index].coursename,
placeholder: '请输入课程名称'
},
onConfirm: (e, promptValue) => {
//班级名称
let coursename = promptValue
let courseid=this.list[index].courseid
let token = sessionStorage.getItem('token')
let data = {
token: token,
coursename: coursename,
courseid:courseid
}
this.$request({
method: 'post',
url: '/schoolmanager.course/edit',
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: () => {
// res.message['updatetime']=this.$formatYmd(res.message['updatetime'])
this.list[index].coursename = promptValue
}
}).show()
}
}).catch(res => {})
}
}).show()
},
del: function(index) {
console.log(index)
let coursename = this.list[index].coursename
this.$createDialog({
type: 'confirm',
icon: 'cubeic-alert',
content: '是否删除' + coursename,
confirmBtn: {
text: '确定',
active: true,
disabled: false,
href: 'javascript:;'
},
cancelBtn: {
text: '取消',
active: false,
disabled: false,
href: 'javascript:;'
},
onConfirm: () => {
let courseid = this.list[index].courseid
let token = sessionStorage.getItem('token')
let data = {
token: token,
courseid: courseid
}
this.$request({
method: 'post',
url: '/schoolmanager.course/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.splice(index, 1)
}
}).show()
}
}).catch(res => {})
}
}).show()
}
}
}
</script>
<style scoped>
.row {
box-sizing: border-box;
padding: 15px 20px 15px 0px;
display: flex;
justify-content: space-between;
position: relative;
line-height: 25px;
}
.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.5);
}
.left {
text-align: left;
flex-grow: 0;
padding-left: 10px;
}
.right {
flex-grow: 1;
text-align: right;
color: gray;
}
.active {
background-color: #ccc;
}
.btn{
margin-top: 20px;
}
.course{
width: 25px;
height: 25px;
}
</style>
其中用到的组件都是cube-ui框架中的,想具体了解的,请去cube-ui框架文档中了解
我的前台代码中用res.error进行判断操作是否成功了,因为我的后台操作成功会返回error为false,操作失败会返回error为true,用一个标志来区分操作的成功与否
还有处理时间的那个$formatYmd,是封装了一个common.js
common.js代码:
//转换成年月日
//str: 2020-05-26 15:30:56
const formatYmd=function(str){
let date = new Date(str)
let year = date.getFullYear()
let month = date.getMonth() + 1
let day = date.getDate()
return [year,month,day].join('-')
}
export {
formatYmd
}
再在main.js中进行引用,这样就可以使用了,
import {formatYmd} from './common.js'
Vue.prototype.$formatYmd = formatYmd
还有就是vue代码中,我所用的方法,是封装了一个request.js,这个js中的具体内容,请去看我的另一篇博客(分组后对数据进行归档和删除),在这个博客里面有具体内容及如何使用。
更多推荐
已为社区贡献2条内容
所有评论(0)