vue实现票价阶梯表，票价九九乘法表

​
要求：
选择线路，点击票价配置，弹出页面，列出线路下的所有站点间的价格，如果没有设置，默认为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>

​