要求:
选择线路,点击票价配置,弹出页面,列出线路下的所有站点间的价格,如果没有设置,默认为0.可以修改。
最终实现效果:
核心代码如下:
解释一下:
siteArr和priceMap返回格式大体如下:
siteArr:[{siteId:‘1’,siteName:‘北京站’},{siteId:‘2’,siteName:‘南京站’},…]
priceMap: {‘1-2’: ‘1.11’, ‘1-3’: ‘2.22’, 2-3: 3.22 ,…}
样式如下:
本人后端开发,用了一天时间才把前后端开发完毕,特此记录一下
整体代码如下:(框架使用的是jeecg,组件使用的antdesigner,部分组件进行了封装)
<template>
<j-modal
:title="title"
:width="900"
:visible="visible"
:confirmLoading="confirmLoading"
switchFullscreen
@ok="handleOk"
@cancel="handleCancel"
okText="确认"
cancelText="取消">
<a-card :bordered="false">
<!-- table区域-begin -->
<div class="content">
<div class="row" >
<div class="col" style="width: 60px;background-color:#f0f0f0 "><b>序号</b></div>
<div class="col" style="background-color:#f0f0f0 "><b>站点</b></div>
<div class="col2"><b>票价(单位:元)</b></div>
</div>
<div class="row" v-for="(item, index) in siteArr" :key="item.id">
<div class="col" style="width: 60px">{{item.orderNum}}</div>
<div class="col">{{item.siteName}}</div>
<div class="col" v-for="subItem in index" :key="subItem">
<a-input-number :min="0" :max="1000" :precision="2" :default-value="0.00"
v-model = "priceMap[siteArr[subItem - 1].siteId + '-' + siteArr[index].siteId]" />
</div>
<div class="col2">{{item.siteName}}</div>
</div>
</div>
</a-card>
</j-modal>
</template>
<script>
import '@/assets/less/TableExpand.less'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import ticketUrl from '@api/bus/ticketUrl'
import { getAction,postAction } from '@api/manage'
export default {
name: 'bus-ticket-price-modal',
mixins: [JeecgListMixin],
components: {},
data() {
return {
title:'票价表设置',
description: '票价管理页面',
confirmLoading: false,
visible: false,
lineId:'',
// 表头
siteArr: [],
priceMap: {},
url: {
list: ticketUrl.list,
save: ticketUrl.save,
},
}
},
computed: {
},
created() {
this.queryList()
},
methods: {
showPopup(lineId) {
this.queryList(lineId);
//站点为空时,不弹出页面,给予提醒
let intervel = setInterval(()=>{
if(!this.loading){
if(this.siteArr.length==0){
this.$message.error("站点为空,请先维护站点信息!")
}else{
this.visible = true;
this.lineId = lineId;
}
clearInterval(intervel)
}
},100)
},
queryList(lineId) {
this.loading = true
getAction(this.url.list,{lineId:lineId }).then((res) => {
if (res.success) {
this.siteArr = res.result.siteArr
this.priceMap = res.result.priceMap
} else {
this.$message.warning(res.message)
}
}).finally(() => {
this.loading = false
})
},
handleCancel(){
this.$emit('ok');
this.visible = false;
},
handleOk(){
this.$confirm({
title: '提示',
content: '确认要提交吗?',
onOk: () => {
postAction(this.url.save, {priceMap :this.priceMap,lineId:this.lineId}).then((res) => {
if(res.success){
this.$message.success(res.message);
}else{
this.$message.warning(res.message);
}
}).finally(()=>{
this.handleCancel();
})
}
})
},
}
}
</script>
<style scoped>
@import '~@assets/less/common.less';
.content{
width: 100%;
}
.row{
width: 100%;
display: flex;
justify-content: flex-start;
}
.col{
width: 110px;
height: 40px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
}
.col2{
width: 120px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
}
</style>