解决后端需要接收Date类型参数，前端传过来的是字符串的问题。
在pojo中对特定的date类型属性加了以下配置
@DateTimeFormat来控制入参，@JsonFormat来控制出参
复制
@JsonFormat(pattern="yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")
@DateTimeFormat(pattern="yyyy-MM-dd HH:mm:ss")
private Date payTime;
参考教程
Spring Boot jackson（Date类型入参、格式化，以及如何处理null）
以下为vue其他组件：
elementui需要配合得表单为：
<el-date-picker v-model="dataForm.startTime" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss"> </el-date-picker>
图片展示
<el-table-column prop="img1" header-align="center" align="center" label="图片1" width="200">
<template slot-scope="scope">
<img :src="scope.row.img1" style="height: 200px;width: 200px;" />
</template>
</el-table-column>
<el-table-column prop="img2" header-align="center" align="center" label="图片2" width="200">
<template slot-scope="scope">
<img :src="scope.row.img2" style="height: 200px;width: 200px;" />
</template>
</el-table-column>
<el-table-column prop="img3" header-align="center" align="center" label="图片3" width="200">
<template slot-scope="scope">
<img :src="scope.row.img3" style="height: 200px;width: 200px;" />
</template>
</el-table-column>
图片上传
<el-form-item label="图片1" prop="img1"> <el-input v-model="dataForm.img1" placeholder="图片1"></el-input> <el-upload class="upload-demo" :action="imgUrl" multiple :limit="1" :on-exceed="handleExceed" :file-list="fileList1" :on-success="doc1" :on-error="handleAvatarError"> <el-button size="small" type="primary">点击上传</el-button> </el-upload> </el-form-item> <el-form-item label="图片2" prop="img2"> <el-input v-model="dataForm.img2" placeholder="图片2"></el-input> <el-upload class="upload-demo" :action="imgUrl" multiple :limit="1" :on-exceed="handleExceed" :file-list="fileList2" :on-success="doc2" :on-error="handleAvatarError"> <el-button size="small" type="primary">点击上传</el-button> </el-upload> </el-form-item> <el-form-item label="图片3" prop="img3"> <el-input v-model="dataForm.img3" placeholder="图片3"></el-input> <el-upload class="upload-demo" :action="imgUrl" multiple :limit="1" :on-exceed="handleExceed" :file-list="fileList3" :on-success="doc3" :on-error="handleAvatarError"> <el-button size="small" type="primary">点击上传</el-button> </el-upload> </el-form-item>
vue data
fileList1: [],
fileList2: [],
fileList3: [],
imgUrl: 'http://127.0.0.1:8080/renren-fast/uploads/local',
methoed
handleAvatarError(res, file) {
this.$message.error('文件太大');
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
},
doc1(res, file) {
this.$message({
message: '上传成功',
type: 'success'
});
if (res.code == 0) {
this.dataForm.img1 = res.msg;
}
},
doc2(res, file) {
this.$message({
message: '上传成功',
type: 'success'
});
if (res.code == 0) {
this.dataForm.img2 = res.msg;
}
},
doc3(res, file) {
this.$message({
message: '上传成功',
type: 'success'
});
if (res.code == 0) {
this.dataForm.img3 = res.msg;
}
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }？`);
},
uviewui
select用法
template
<u-form-item label="类型" :label-width="150">
<u-input v-model="form.type" type="select" :border="false" @click="showType = true" />
<u-select v-model="showType" :list="typeList" @confirm="confirmType"></u-select>
</u-form-item>
data
showType:false, typeList:[ { value: '生活', label: '生活' }, { value: '学习', label: '学习' }, { value: '问答', label: '问答' }, { value: '活动', label: '活动' } ],
js
confirmType(e){ this.form.type=e[0].value },
uviewui下拉联动
<u-form-item label="捐赠救灾事项" :label-width="200">
<u-input v-model="form.rescue" type="select" :border="false" @click="show = true" />
<u-select v-model="show" :list="list" @confirm="confirm"></u-select>
</u-form-item>
show: false, list: [],
getList() { this.$http.post(this.$api.rescue.list + '?page=1&limit=9999&', {}).then( res => { if (res.code === 0) { this.list = res.page.list this.list.map(item => { item.value = item.id item.label = item.name }) console.log(this.list) } else { uni.showToast({ icon: "none", title: "失败：" + res.msg }) } }) },
confirm(e) {
console.log(e)
this.form.rescue = e[0].label
this.form.rescueId = e[0].value
},
created() { this.getList() },
vue下拉框
<el-form-item label="活动区域">
<el-select v-model="form.region" placeholder="请选择" filterable >
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
elementui 省市区地址级联
https://www.jianshu.com/p/e63fa331f320
elementui的下拉框联动
界面
<el-form-item label="供应商" prop="supplierId">
<el-select v-model="dataForm.supplierId" placeholder="请选择" filterable >
<el-option v-for="item in supplierList" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item>
js
supplierList:[], this.getSupplier(); getSupplier() { this.$http({ url: this.$http.adornUrl('/generator/supplier/list'), method: 'get', params: this.$http.adornParams({
'page': 1, 'limit': 9999 }) }).then(({ data }) => { if (data && data.code === 0) { this.supplierList= data.page.list } else { this.$message.error(data.msg) } }) },
走马灯
<el-carousel :interval="4000" type="card" height="600px" indicator-position="outside">
<el-carousel-item v-for="item in imagesBox" :key="item.id">
<img :src="item.idView" style="width: 100%;height: 1000px;">
</el-carousel-item>
</el-carousel>
js
imagesBox: [{ id: 0, idView: require("../../assets/img/1.jpg") }, { id: 1, idView: require("../../assets/img/2.jpg") }, { id: 2, idView: require("../../assets/img/3.jpg") }, { id: 3, idView: require("../../assets/img/4.jpg") }, ],
数据权限：
自己只能修改删除自己的，管理员不限
<template slot-scope="scope">
<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)"
v-if="(isAuth('generator:drugs:update') && user.userId == scope.row.createBy) || user.userId==1">修改</el-button>
<el-button type="text" size="small" @click="deleteHandle(scope.row.id)"
v-if="(isAuth('generator:drugs:delete') && user.userId == scope.row.createBy) || user.userId==1">删除</el-button>
</template>
查询自己的信息
user: {} this.getinfo() getinfo() { this.$http({ url: this.$http.adornUrl('/sys/user/info'), method: 'get' }).then(({ data }) => { if (data && data.code === 0) { this.user = data.user } }) },
卡片形式展示表格数据
<template>
<div class="mod-config">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item>
<el-input v-model="dataForm.name" placeholder="名称" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">查询</el-button>
<el-button v-if="isAuth('generator:good:save')" type="primary" @click="addOrUpdateHandle()">新增
</el-button>
</el-form-item>
</el-form>
<el-row>
<el-col :span="6" v-for="(item, index) in dataList" :key="item.id">
<el-card style="margin: 20px;height: 420px;">
<img :src="item.img1" class="image">
<div style="padding: 14px;">
<span>{{item.name}}</span>
<div class="bottom clearfix">
<div style="display: flex;justify-content: space-between;">
<div style="color: red;line-height: 12px;font-size: 18px;font-weight: bold;">¥:
{{item.price}}
</div>
<div>
<el-button type="text" class="button" @click="buy(item.id)">购买</el-button>
<el-button type="text" class="button" style="margin-right: 10px;"
@click="addshopcar(item.id)">加购</el-button>
<el-button type="text" class="button" @click="godetail(item)">详情</el-button>
<el-button type="text" class="button" @click="addOrUpdateHandle(item.id)"
v-if="isAuth('generator:good:update')">修改
</el-button>
<el-button type="text" class="button" @click="deleteHandle(item.id)"
v-if="isAuth('generator:good:delete')">删除</el-button>
</div>
</div>
</div>
</div>
</el-card>
</el-col>
</el-row>
<!-- <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
:page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination> -->
<!-- 弹窗, 新增 / 修改 -->
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
<el-dialog title="下订单" :close-on-click-modal="false" :visible.sync="orderVisible">
<el-form :model="dataForm2" :rules="dataRule2" ref="dataForm2" @keyup.enter.native="dataFormSubmit2()"
label-width="80px">
<el-form-item label="姓名" prop="name">
<el-select v-model="dataForm2.name" placeholder="请选择" @change="changeAddress">
<el-option v-for="item in supplierList" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="地址" prop="address">
<el-input v-model="dataForm2.address" placeholder="地址" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="详细地址" prop="detail">
<el-input v-model="dataForm2.detail" placeholder="详细地址" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="手机" prop="phone">
<el-input v-model="dataForm2.phone" placeholder="手机" :disabled="true"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="orderVisible = false">取消</el-button>
<el-button type="primary" @click="dataFormSubmit2()">确定</el-button>
</span>
</el-dialog>
<el-dialog title="详情" :visible.sync="detailVisible" :fullscreen='true'>
<el-row>
<el-col :span="6">
<div class="grid-content bg-purple"></div>
</el-col>
<el-col :span="12">
<div style="text-align: center;">
<h1>{{good.name}}</h1>
</div>
<el-carousel :interval="4000" type="card" height="400px" indicator-position="outside">
<el-carousel-item>
<img :src="good.img1" style="width: 80%;height: 400px;">
</el-carousel-item>
<el-carousel-item>
<img :src="good.img2" style="width: 80%;height: 400px;">
</el-carousel-item>
<el-carousel-item>
<img :src="good.img3" style="width: 800%;height: 400px;">
</el-carousel-item>
</el-carousel>
<el-card class="box-card">
<div style="display: flex;justify-content: space-around;">
<h3>类型：{{good.type}}</h3>
<h3>销量：{{good.xiaoliang}}</h3>
<h3 style="color: red;">价格：{{good.price}}</h3>
</div>
<div>
<el-button type="success" @click="addshopcar(good.id)">加入购物车</el-button>
<el-button @click="buy(good.id)" type="primary">立即购买</el-button>
</div>
<h3>介绍</h3>
<div>{{good.introduce}}</div>
<h3>发货地点</h3>
<div>{{good.deliveryPoint}}</div>
<h3>厂家</h3>
<div>{{good.manufactor}}</div>
<h3>保障</h3>
<div>{{good.guarantee}}</div>
<h3>产品参数</h3>
<div>{{good.productParameters}}</div>
</el-card>
<el-card class="box-card" style="margin-top: 20px;" v-if="tongjiList.length!=0">
<div slot="header" class="clearfix">
<h3>好评差评率</h3>
</div>
<div style="display: flex;justify-content: space-around;">
<div id="myChart" :style="{width: '500px', height: '500px'}"></div>
</div>
</el-card>
<el-card class="box-card" style="margin-top: 20px;">
<div slot="header" class="clearfix">
<h3>评论列表</h3>
</div>
<div v-for="item in commentList">
<h4>用户名：{{item.username}}</h4>
<div style="display: flex;justify-content: space-between;">
<div>评价：{{item.content}}</div>
<div>类型：{{item.type}}</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="6">
<div class="grid-content bg-purple"></div>
</el-col>
</el-row>
</el-dialog>
</div>
</template>
<script>
import AddOrUpdate from './good-add-or-update'
export default {
data() {
return {
commentList: [],
list1: [],
detailVisible: false,
good: {},
supplierList: [],
dataRule2: {
name: [{
required: true,
message: '姓名不能为空',
trigger: 'blur'
}],
address: [{
required: true,
message: '地址不能为空',
trigger: 'blur'
}],
phone: [{
required: true,
message: '手机不能为空',
trigger: 'blur'
}]
},
dataForm2: {},
orderVisible: false,
currentDate: new Date(),
dataForm: {
name: ''
},
dataList: [],
pageIndex: 1,
pageSize: 9999,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false,
tongjiList: []
}
},
components: {
AddOrUpdate
},
mounted() {
//this.drawLine1();
},
activated() {
this.getDataList()
this.getSupplier()
},
methods: {
drawLine1() {
this.$http({
url: this.$http.adornUrl('/generator/comment/tongji'),
method: 'post',
data: this.$http.adornData({
'goodId': this.good.id
})
}).then(({
data
}) => {
if (data && data.code === 0) {
console.log(data)
this.tongjiList = data.list
this.tongjiList.map(item => {
item.value = item.num
})
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('myChart'))
// 绘制图表
myChart.setOption({
title: {
text: '好评差评率',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [{
name: '数量',
type: 'pie',
radius: '50%',
data: this.tongjiList,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
});
}
})
},
godetail(item) {
this.good = item
this.detailVisible = true
//pinjia
this.$http({
url: this.$http.adornUrl('/generator/comment/listByGoodId'),
method: 'post',
data: this.$http.adornData({
'goodId': this.good.id,
})
}).then(({
data
}) => {
if (data && data.code === 0) {
this.commentList = data.list
} else {
this.$message.error(data.msg)
}
})
this.drawLine1();
},
addshopcar(id) {
this.$http({
url: this.$http.adornUrl('/generator/shopcar/save'),
method: 'post',
data: this.$http.adornData({
'goodId': id,
})
}).then(({
data
}) => {
this.orderVisible = false
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.visible = false
this.getDataList()
}
})
} else {
this.$message.error(data.msg)
}
})
},
changeAddress(e) {
console.log(e)
this.supplierList.map(item => {
if (item.id == e) {
this.dataForm2.name = item.name
this.dataForm2.phone = item.phone
this.dataForm2.address = item.address
this.dataForm2.detail = item.detail
}
})
},
dataFormSubmit2() {
this.$refs['dataForm2'].validate((valid) => {
if (valid) {
this.$http({
url: this.$http.adornUrl('/generator/myorder/buy'),
method: 'post',
data: this.$http.adornData({
'goodId': this.dataForm2.goodId,
'name': this.dataForm2.name,
'phone': this.dataForm2.phone,
'address': this.dataForm2.address
})
}).then(({
data
}) => {
this.orderVisible = false
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.visible = false
this.getDataList()
}
})
} else {
this.$message.error(data.msg)
}
})
}
})
},
buy(id) {
this.dataForm2.goodId = id
this.orderVisible = true
},
getSupplier() {
this.$http({
url: this.$http.adornUrl('/generator/address/mylist'),
method: 'post',
data: this.$http.adornData({
'page': 1,
'limit': 9999
})
}).then(({
data
}) => {
if (data && data.code === 0) {
this.supplierList = data.page.list
} else {
this.$message.error(data.msg)
}
})
},
// 获取数据列表
getDataList() {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/generator/good/list'),
method: 'get',
params: this.$http.adornParams({
'page': this.pageIndex,
'limit': this.pageSize,
'name': this.dataForm.name
})
}).then(({
data
}) => {
if (data && data.code === 0) {
this.dataList = data.page.list
this.totalPage = data.page.totalCount
} else {
this.dataList = []
this.totalPage = 0
}
this.dataListLoading = false
})
},
// 每页数
sizeChangeHandle(val) {
this.pageSize = val
this.pageIndex = 1
this.getDataList()
},
// 当前页
currentChangeHandle(val) {
this.pageIndex = val
this.getDataList()
},
// 多选
selectionChangeHandle(val) {
this.dataListSelections = val
},
// 新增 / 修改
addOrUpdateHandle(id) {
this.addOrUpdateVisible = true
this.$nextTick(() => {
this.$refs.addOrUpdate.init(id)
})
},
// 删除
deleteHandle(id) {
var ids = id ? [id] : this.dataListSelections.map(item => {
return item.id
})
this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$http({
url: this.$http.adornUrl('/generator/good/delete'),
method: 'post',
data: this.$http.adornData(ids, false)
}).then(({
data
}) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.getDataList()
}
})
} else {
this.$message.error(data.msg)
}
})
})
}
}
}
</script>
<style>
.time {
font-size: 13px;
color: #999;
}
.bottom {
margin-top: 13px;
line-height: 12px;
}
.button {
padding: 0;
float: right;
}
.image {
width: 100%;
height: 300px;
display: block;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #ffffff;
}
.bg-purple {
background: #ffffff;
}
.bg-purple-light {
background: #ffffff;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
</style>
end
浙公网安备 33010602011771号