feat: 新增月租车页面

kongdeqiang

2025-01-06 92146b2ca987538074c380f07f567ca85347dd13

feat: 新增月租车页面

 public/words/administratorReturn.docx

Binary files differ

 src/components/page/MonthFeePay.vue

New file
@@ -0,0 +1,201 @@
<template>
    <div class="weizhang-box">
        <div class="weizhang-main-box">
            <div class="weizhang-main-top">
              <h1>月租车办理</h1>
            </div>
            <div class="weizhang-main-bootom">
                <div class="weizhang-main-form">
                    <el-form label-width="100px" :model="statisticData" label-position="left">
                        <el-form-item label="车牌号：" style="margin-left: 25px;">
                            <el-input v-model="statisticData.carNo" ></el-input>
                        </el-form-item>
                        <el-form-item label="手机号：" style="margin-left: 25px;">
                            <el-input v-model="statisticData.phone" ></el-input>
                        </el-form-item>
                        <el-form-item label="姓名：" style="margin-left: 25px;">
                            <el-input v-model="statisticData.name" ></el-input>
                        </el-form-item>
                        <el-form-item label="选择全部：" style="margin-left: 25px;">
                          <el-select v-model="statisticData.allFlag" :onchange="changeAll">
                            <el-option label="单个" :value=0></el-option>
                            <el-option label="全部" :value=1></el-option>
                          </el-select>
                        </el-form-item>
                      <el-form-item v-if="statisticData.allFlag == 0" label="停车场：" style="margin-left: 25px;">
                        <el-select v-model="statisticData.parkId" :onchange="changePark">
                          <el-option v-for="item in table1" :key="item.id" :label="item.name" :value="item.id" ></el-option>
                        </el-select>
                      </el-form-item>
                        <el-form-item class="weizhang-footer-box" style="display: flex;justify-content: center;margin-top: 4.498vh" label-width="0" v-if="showFlag">
                            <el-button class="jiaofei-btn" type="primary" @click="pay()" >查询</el-button>
                        </el-form-item>
                    </el-form>

                </div>

            </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: 'dashboard',
        data() {
            return {
                ticketId:"",
                table1:[],
                statisticData:{
                  allFlag:0
                },
                showFlag:true,
            }
        },
        created(){
          var url = window.location.href;
          var cs = url.split('?')[1];
          var cs_arr = cs.split('&');
          var cs={};
          for(var i=0;i<cs_arr.length;i++){
            cs[cs_arr[i].split('=')[0]] = cs_arr[i].split('=')[1]
          }
          this.statisticData.parkId = cs.id;
          this.$byutil.postData(this, this.$systemconfig.basePath+'/ffzf/park/findAll', null, res => {
            this.table1 = res.data;

            this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/whiteListRule/getByParkId', {parkId:cs.id}, res => {
              this.statisticData.parkId = res.data.id;
            })
          })
        },
        methods: {
            pay(){
              this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/monthFeePay/pay', this.statisticData, res => {
                if(res.code == 0){
                  //未查询到月票，可正常缴费

                }else {
                  //查询到月票，续费

                }
              })
            },
          changePark(){

          },
          changeAll(){

          }

        }
    }

</script>


<style lang="scss">
    .weizhang-main-bootom{
        .el-input__inner{
            border:none;
        }
        .el-form-item__label{
            color: #000;
            font-weight: 600;
        }
    }
    .weizhang-footer-box{
        .el-form-item__content{
            width: 100%;
            display: flex;
            justify-content: center;
        }
        .el-button--small{
            padding: 11px 15px;
            font-size: 0.347rem  /* 26/75 */;
        }
    }

</style>
<style lang="scss" scoped>
h1,h2,h3,h4,h5{
    font-family: '苹方 中等';
    font-weight: normal;
}
.weizhang-header{
    display: flex;
    height: 12.8vw  /* 96/7.5 */;
    align-items: center;
    border-bottom:1px solid rgba(154,154,154,0.2);
    .text{
        flex: 1;
        text-align: center;
        h1{
            font-size: 2.699vh  /* 36/13.34 */;
        }
    }
    .right{
        width: 6.747vh  /* 90/13.34 */;
    }
    .leftjiantou{
        font-size: 5.33vw;
        width: 6.747vh  /* 90/13.34 */;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
.weizhang-main-box{
    width: 100%;
    display: flex;
    flex-direction: column;
    padding:5.33vw  /* 40/7.5 */;
}
.weizhang-main-top{
    height: 22.489vh  /* 300/13.34 */;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
    .money{
        font-size: 6.93vw  /* 52/7.5 */;
        font-weight: 550;
    }
    .weizhang{
        font-size: 0.4rem  /* 30/75 */;
        line-height: 2;
        font-weight: normal;
        margin-top:1.33vw  /* 10/7.5 */;
        color: #000;
    }
}
    .weizhang-main-form{
    }
    .weizhang-tiaokuan{
        margin-top: 2.67vw  /* 20/7.5 */;
        h1{
            font-size:3.2vw  /* 24/7.5 */;
            color: #999999;
            text-indent: 2.5em;
            line-height: 2;
        }
    }
    .jiaofei-btn{
        width: 64.53vw  /* 484/7.5 */;
        border-radius: 5.33vw  /* 40/7.5 */;
        background-image: linear-gradient(to right,#33b1fe,#0679dc);
    }
.logoPhone{
    margin-top: 0.67vw;
    width: 1.333rem  /* 100/75 */;
    height: 1.333rem  /* 100/75 */;
}
.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
    margin-bottom: 10px;
}
.weizhang-main-bootom{
    margin-top: 0.333rem  /* 25/75 */;
}
</style>

 src/components/page/paymentLog/index.vue

New file
@@ -0,0 +1,114 @@
<template>
    <div>
        <div style="padding: 10px 10px 0px 10px;">
            <el-form :inline="true" :model="searchForm">
              <el-form-item label="停车场">
                <el-select v-model="searchForm.parkId" clearable>
                  <el-option v-for="item in table1" :key="item.id" :label="item.name" :value="item.id" ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="车牌号">
                <el-input v-model="searchForm.carNo" clearable></el-input>
              </el-form-item>
              <el-form-item label="姓名">
                <el-input v-model="searchForm.name" clearable></el-input>
              </el-form-item>
              <el-form-item label="手机号">
                <el-input v-model="searchForm.phone" clearable></el-input>
              </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" @click="onSearch" icon="el-icon-search">查询</el-button>
                </el-form-item>
            </el-form>
        </div>

        <el-table :height="tableHeight" :data="pageData.rows" v-loading="pageData.isLoading" border style="width:100%;border:1px solid #bcbec2;">
            <el-table-column type="index" width="50" label="序号" align="center"> </el-table-column>
            <el-table-column prop="name" label="停车场" align="center" width="150"></el-table-column>
            <el-table-column
                prop="carNo"
                header-align="center"
                align="center"
                label="车牌号">
            </el-table-column>
            <el-table-column prop="name" label="名称" align="center"></el-table-column>
            <el-table-column prop="phone" label="手机号" align="center"></el-table-column>
            <el-table-column prop="money" label="缴费金额" align="center"></el-table-column>
        </el-table>
        <el-pagination background @size-change="onPageSizeChange" @current-change="onCurrentPageChange" :current-page="pageData.currentPage" :page-size="pageData.pageSize" :total="pageData.total" style="float: right"></el-pagination>
    </div>
</template>

<script>
    export default {
        name: "index",
        data: function () {
            return {
                flag:false,
                flag2:false,
                searchForm: {
                    name: '',
                    carNo:'',
                    type:null,
                    date: null
                },
                pageData: this.$byutil.defaultPageData(),
                formData: {
                    type: 0,
                    parkId:null,
                    carNo:null,
                    phone:0,
                    sixMonthMoney:0,
                    yearMoney:0,
                    name: '',
                    createBy:'',
                    updateBy:''
                },
                ids:[],
                urlPath:this.$systemconfig.basePath + '/ffzf/paymentLog/',
                table1:[],
                userName:'',
              tableHeight:500,
            }
        },
        mounted() {
          let username = localStorage.getItem('name')
          this.formData.createBy = username
          this.userName = username
            this.loadData();
            this.$byutil.postData(this, this.$systemconfig.basePath+'/ffzf/park/findAll', this.formData, res => {
                this.table1 = res.data;
            })
          this.tableHeight = window.innerHeight - 260
        },
        methods: {
            selectChange(value){
                if(value==1){
                    this.flag2 = true;
                }else{
                    this.flag2 = false;
                }
            },

            loadData() {
                this.$byutil.loadPageData(this, this.urlPath+'findPage', this.searchForm);
            },
            onSearch() {
                this.pageData = this.$byutil.defaultPageData();
                this.loadData();
            },
            onPageSizeChange(val) {
                this.pageData.pageSize = val;
                this.loadData();
            },
            onCurrentPageChange(val) {
                this.pageData.page = val;
                this.loadData();
            },
        }
    }
</script>

<style scoped>

</style>

 src/components/page/whiteList/index.vue

@@ -11,6 +11,12 @@
                <el-option label="月票" :value="1"></el-option>
              </el-select>
              </el-form-item>
              <el-form-item label="来源">
                <el-select  v-model="searchForm.payFlag" placeholder="请选择" clearable>
                  <el-option label="系统添加" :value="0"></el-option>
                  <el-option label="自主缴费" :value="1"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="选择结束时间">
                <div class="date-box">
                  <el-date-picker type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd"
@@ -34,9 +40,16 @@
                    <p v-if="scope.row.type==1">月票</p>
                </template>
            </el-table-column>
          <el-table-column prop="payFlag" label="添加类型" align="center" width="100">
            <template slot-scope="scope">
              <p v-if="scope.row.payFlag==0">系统添加</p>
              <p v-if="scope.row.payFlag==1">自主缴费</p>
            </template>
          </el-table-column>
            <el-table-column prop="startTime" label="月票开始日期" align="center"></el-table-column>
            <el-table-column prop="endTime" label="月票结束日期" align="center"></el-table-column>
            <el-table-column prop="name" label="停车场" align="center"></el-table-column>
          <el-table-column prop="phone" label="手机号" align="center"></el-table-column>
            <el-table-column prop="createBy" label="操作人" align="center"></el-table-column>
            <el-table-column label="操作" fixed="right" width="150" align="center">
                <template slot-scope="scope">
@@ -89,7 +102,8 @@
                    name: '',
                    carNo:'',
                    type:null,
                    date: null
                    date: null,
                    payFlag:null
                },
                pageData: this.$byutil.defaultPageData(),
                formData: {
@@ -158,7 +172,8 @@
                    type: 0,
                    endTime: '',
                    startTime: '',
                    parkIds: null
                    parkIds: null,
                    payFlag:0
                }
            },
            onEdit(row) {

 src/components/page/whiteListRule/index.vue

New file
@@ -0,0 +1,196 @@
<template>
    <div>
        <div style="padding: 10px 10px 0px 10px;">
            <el-form :inline="true" :model="searchForm">
              <el-form-item label="停车场">
                <el-select v-model="searchForm.parkId" clearable>
                  <el-option v-for="item in table1" :key="item.id" :label="item.name" :value="item.id" ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="类型">
              <el-select  v-model="searchForm.type" placeholder="类型" clearable>
                <el-option label="单个" :value=0></el-option>
                <el-option label="全部" :value=1></el-option>
              </el-select>
              </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" @click="onSearch" icon="el-icon-search">查询</el-button>
                    <el-button type="primary" size="small" @click="onAdd" icon="el-icon-plus">增加</el-button>
                </el-form-item>
            </el-form>
        </div>

        <el-table :height="tableHeight" :data="pageData.rows" v-loading="pageData.isLoading" border style="width:100%;border:1px solid #bcbec2;">
            <el-table-column type="index" width="50" label="序号" align="center"> </el-table-column>
            <el-table-column prop="type" label="类型" align="center" width="100">
                <template slot-scope="scope">
                    <p v-if="scope.row.type==0">单个</p>
                    <p v-if="scope.row.type==1">全部</p>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="停车场" align="center" width="150"></el-table-column>
            <el-table-column prop="monthMoney" label="单月金额" align="center"></el-table-column>
            <el-table-column prop="threeMonthMoney" label="三个月金额" align="center"></el-table-column>
            <el-table-column prop="sixMonthMoney" label="六个月金额" align="center"></el-table-column>
            <el-table-column prop="yearMoney" label="一年金额" align="center"></el-table-column>
            <el-table-column label="操作" fixed="right" width="150" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" @click="onEdit(scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="onDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @size-change="onPageSizeChange" @current-change="onCurrentPageChange" :current-page="pageData.currentPage" :page-size="pageData.pageSize" :total="pageData.total" style="float: right"></el-pagination>

        <el-dialog title="编辑" :visible.sync="flag" width="30%">
            <el-form :model="formData" ref="formData" label-width="100px">
                <el-form-item label="类型" prop="type" :rules="[{ required: true, message: '请选择类型', trigger: 'change'}]">
                    <el-select v-model="formData.type" @change="selectChange">
                        <el-option label="全部" :value=1></el-option>
                        <el-option label="单个" :value=0></el-option>
                    </el-select>
                </el-form-item>
              <el-form-item label="停车场" prop="parkId" v-if="flag2">
                <el-select v-model="formData.parkId" clearable>
                  <el-option v-for="item in table1" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="单月金额" prop="monthMoney">
                <el-input-number v-model="formData.monthMoney" :min="0"></el-input-number>
              </el-form-item>
              <el-form-item label="三个月金额" prop="threeMonthMoney">
                <el-input-number v-model="formData.threeMonthMoney" :min="0"></el-input-number>
              </el-form-item>
              <el-form-item label="六个月金额" prop="sixMonthMoney">
                <el-input-number v-model="formData.sixMonthMoney" :min="0"></el-input-number>
              </el-form-item>
              <el-form-item label="一年金额" prop="yearMoney">
                <el-input-number v-model="formData.yearMoney" :min="0"></el-input-number>
              </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="flag = false">取 消</el-button>
                <el-button type="primary" @click="onSave">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "index",
        data: function () {
            return {
                flag:false,
                flag2:false,
                searchForm: {
                    name: '',
                    carNo:'',
                    type:null,
                    date: null
                },
                pageData: this.$byutil.defaultPageData(),
                formData: {
                    type: 1,
                    parkId:null,
                    monthMoney:0,
                    threeMonthMoney:0,
                    sixMonthMoney:0,
                    yearMoney:0,
                    name: '',
                    createBy:'',
                    updateBy:''
                },
                ids:[],
                urlPath:this.$systemconfig.basePath + '/ffzf/whiteListRule/',
                table1:[],
                userName:'',
              tableHeight:500,
            }
        },
        mounted() {
          let username = localStorage.getItem('name')
          this.formData.createBy = username
          this.userName = username
            this.loadData();
            this.$byutil.postData(this, this.$systemconfig.basePath+'/ffzf/park/findAll', this.formData, res => {
                this.table1 = res.data;
            })
          this.tableHeight = window.innerHeight - 260
        },
        methods: {
            selectChange(value){
                if(value==0){
                    this.flag2 = true;
                }else{
                    this.flag2 = false;
                }
            },
            onSave(){
                this.$refs['formData'].validate((valid) => {
                    if (valid) {
                        this.$byutil.postData(this, this.urlPath+'save', this.formData, res => {
                            this.$refs['formData'].resetFields();
                            this.flag=false;
                            this.$message({message:'保存成功', type: 'success'});
                            this.loadData();
                        })
                    } else {
                        return false;
                    }
                });
            },
            loadData() {
                this.$byutil.loadPageData(this, this.urlPath+'findPage', this.searchForm);
            },
            onSearch() {
                this.pageData = this.$byutil.defaultPageData();
                this.loadData();
            },
            onAdd() {
                this.flag=true;
                this.flag2=false;
                this.$refs['formData'].resetFields();
                this.formData = {
                    carNo: '',
                    type: 1,
                    endTime: '',
                    startTime: '',
                    parkIds: null
                }
            },
            onEdit(row) {
                this.flag=true;
                this.ids = []
                this.formData  = row;
                this.formData.updateBy = this.userName
                if(row.type==1){
                  this.ids = this.formData.parkIds.split(",")
                  this.ids = this.ids.map(function(data){
                    return +data;
                  });
                  this.flag2=true;
                }
            },
            onDelete(row) {
                this.$byutil.deleteData(this,this.urlPath+"delete",{id:row.id}, res => {
                    this.$message({message: '删除成功', type: 'success'});
                    this.loadData();
                })
            },
            onPageSizeChange(val) {
                this.pageData.pageSize = val;
                this.loadData();
            },
            onCurrentPageChange(val) {
                this.pageData.page = val;
                this.loadData();
            },
        }
    }
</script>

<style scoped>

</style>

 src/router/index.js

@@ -55,6 +55,16 @@
                    meta: { title: '泊车发票管理' }
                },
                {
                    path: '/whiteListRule',
                    component: resolve => require(['../components/page/whiteListRule/index.vue'], resolve),
                    meta: { title: '月票车规则管理' }
                },
                {
                    path: '/paymentLog',
                    component: resolve => require(['../components/page/paymentLog/index.vue'], resolve),
                    meta: { title: '缴费日志管理' }
                },
                {
                    path: '/whiteList',
                    component: resolve => require(['../components/page/whiteList/index.vue'], resolve),
                    meta: { title: '白名单' }
@@ -195,6 +205,11 @@
            component: resolve => require(['../components/page/EditParkNum'], resolve),
            meta: { title: '车位数量' }
        },
        {
            path: '/monthFeePay',
            component: resolve => require(['../components/page/MonthFeePay.vue'], resolve),
            meta: { title: '月租车缴费' }
        },
    ]
})


 src/store/state.js

@@ -62,6 +62,18 @@
                    indexUrl: "barrierOpenLog"
                },
                {
                    icon: 'el-icon-document',
                    name: '月票车规则管理',
                    parentId: 2,
                    indexUrl: "whiteListRule"
                },
                {
                    icon: 'el-icon-document',
                    name: '缴费日志管理',
                    parentId: 2,
                    indexUrl: "paymentLog"
                },
                {
                  icon: 'el-icon-document',
                  name: '白名单管理',
                  parentId: 2,
@@ -153,6 +165,18 @@
                },
                {
                    icon: 'el-icon-document',
                    name: '月票车规则管理',
                    parentId: 2,
                    indexUrl: "whiteListRule"
                },
                {
                    icon: 'el-icon-document',
                    name: '缴费日志管理',
                    parentId: 2,
                    indexUrl: "paymentLog"
                },
                {
                    icon: 'el-icon-document',
                    name: '手动抬杆记录',
                    parentId: 2,
                    indexUrl: "barrierOpenLog"