vant 列表【增删改查】 和 表单
1.列表
{{ item.newsTitle }}
{{ item.createTime }}
新增
修改
删除
import {
listNews, delNews
} from "@/api/business/news/news.js";
import {Toast} from "vant";
export default {
name: 'Test',
data() {
return {
isFixedHeight: true,
refreshing: false,
loading: false,
finished: false,
dataList: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
newsTitle: undefined,
newsType: undefined,
status: undefined
},
};
},
methods: {
getCoverImage(res) {
return process.env.VUE_APP_BASE_API + res
},
onClickLeft() {
//返回上一页
this.$router.go(-1)
},
getList() {
listNews(this.queryParams).then(response => {
if (this.refreshing) {
this.dataList = [];
this.refreshing = false;
}
// 加载状态结束
this.loading = false;
this.dataList = this.dataList.concat(response.rows);//追加数据
this.finished = !response.hasNext;
this.queryParams.pageNum += 1;//页数+1
});
},
onRefresh() {
this.queryParams.pageNum = 1
// 清空列表数据
this.dataList = []
this.finished = false;
// 重新加载数据
// 将 loading 设置为 true，表示处于加载状态
this.loading = true;
this.getList();
},
/** 新增按钮操作 */
handleAdd() {
this.$router.push({path: '/form/', query: {id: '0', type: '1'}})
},
/** 编辑按钮操作 */
handleUpdate(id) {
this.$router.push({path: '/form/', query: {id: id, type: '3'}})
},
handleDelete(id, index) {
this.Dialog.confirm({
title: '提醒',
message: '是否删除当前新闻？',
}).then(() => {
return delNews(id);
}).then(() => {
// this.onRefresh();
this.dataList.splice(index, 1)
Toast("删除成功");
});
}
},
created() {
// this.getList();
}
}
.container {
width: 100%;
height: 100%;
}
.itemList {
margin: 10px;
background-color: #ffffff;
padding: 10px;
border-radius: 5px;
}
.doItem {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.news-right {
display: flex;
flex-direction: column;
justify-content: space-between;
}
2.表单
提交
import {
getDicts, uploadCoverImage, addNews, getNews, updateNews
} from "@/api/business/news/news.js";
import {Toast} from "vant";
// import {
// getNews,
// addNews,
// updateNews
// } from "@/api/business/news/news.js";
export default {
name: 'Form',
data() {
return {
isFixedHeight: true,
value: '',
showPicker: false,
// 新闻类型数据字典
newsTypeOptions: [],
newsTypeOptions2: [],
switchChecked: true,
coverFileList: [],
fileListShow: [],
//页面上存的暂时图片地址List
fileListPut: [],
form: {}
};
},
methods: {
//返回键
onClickLeft() {
this.$router.go(-1)
}
,
getNewsType() {
getDicts("business_news_type").then(response => {
this.newsTypeOptions2 = response.data
this.newsTypeOptions = response.data.map(item => {
const classCode = item.dictValue;
const text = item.dictLabel;
return {
text, //必须用text变量表示选择器中的选项，其他的没有要求
classCode
};
});
});
}
,
//新闻状态
switchChange(checked) {
this.Dialog.confirm({
title: '提醒',
message: '是否切换新闻状态？',
}).then(() => {
this.switchChecked = checked;
});
},
onConfirm(value) {
this.value = value.text;
this.form.newsType = value.classCode
this.showPicker = false;
console.log("类型", this.form.newsType)
}
,
// eslint-disable-next-line no-unused-vars
// 组件方法 获取 流
// eslint-disable-next-line no-unused-vars
onRead(file) {
let fd = new FormData()
fd.append('file', file.file)
uploadCoverImage(fd).then(response => {
this.form.newsBanner = response.imgUrl
});
},
onReads(file) {
let fd = new FormData()
fd.append('file', file.file)
uploadCoverImage(fd).then(response => {
//设置图片访问路径
const imgObjectUrl = process.env.VUE_APP_BASE_API + response.imgUrl;
// const imgObjectUrl = res.imgUrl;
//这是每个成功上传图片，以对象的形式保存在一个数组中，进而以JSON格式保存在数据库中某个字段里
let currentFile = {name: '', url: ''};
currentFile.name = file.name;
currentFile.url = imgObjectUrl;
//往此数组中保存当前图片对象
this.fileListPut.push(currentFile);
});
},
//删除照片
handleRemove() {
this.coverFileList = [];
this.form.newsBanner = ''
},
//删除照片
handleRemoves(event) {
//根据传进来删除的file里图片，同时删除保存在fileListPut的相同图片
if (this.fileListPut.length > 0) {
// eslint-disable-next-line no-unused-vars
this.fileListPut = this.fileListPut.filter((item, index) => {
return item.url !== event.url;
})
}
},
newsTypeFormat(name) {
return this.selectDictLabel(this.newsTypeOptions2, name);
},
getDetails(id) {
getNews(id).then(response => {
this.form = response.data;
this.value = this.newsTypeFormat(this.form.newsType);
this.switchChecked = this.form.status === '0';
if (this.form.newsBanner) {
this.coverFileList.push({name: 1, url: process.env.VUE_APP_BASE_API + this.form.newsBanner})
}
// console.log(this.form.newsFiles)
//修改图片集合
if (this.form.newsFiles !== '') {
this.fileListShow = JSON.parse(this.form.newsFiles)
this.fileListPut = JSON.parse(this.form.newsFiles);
}
});
},
submitForm() {
if (this.switchChecked) {
this.form.status = '0'
} else {
this.form.status = '1'
}
this.form.newsFiles = JSON.stringify(this.fileListPut);
if (this.form.newsId !== undefined) {
// eslint-disable-next-line no-unused-vars
updateNews(this.form).then(response => {
Toast("修改成功");
this.$router.go(-1)
});
} else {
// eslint-disable-next-line no-unused-vars
addNews(this.form).then(response => {
Toast("新增成功");
this.$router.go(-1)
});
}
}
}
,
created() {
const newsId = this.$route.query && this.$route.query.id;
const type = this.$route.query && this.$route.query.type;
this.getNewsType()
if (type === '3') {
this.getDetails(newsId);
}
}
}
