VOL框架 自定义页面的实现方法（模板）

VOL框架 前端自定义页面的实现方法（模板）

后端用视图生成代码，entity及业务类

<template>
    <div class="view-container">
        <div class="grid-search">
            <!-- header表头 -->
            <div class="view-header">
                <!-- 图标及标题 -->
                <div class="desc-text">
                    <i class="el-icon-s-grid" />
                    <span>{{header.name}}</span>
                </div>
                <!-- 文字说明 -->
                <div class="notice">
                    <span>{{header.text}}</span>
                </div>
                <!--查询字段-->
                <div class="search-line" >
                    <vol-form
                        label-width="80"
                        ref="myform"
                        class=""
                        :formFields="searchFields"
                        :formRules="formOptions"
                    ></vol-form>
                </div>
                <!-- 按钮 -->
                <div class="btn-group">
                    <el-button type="primary" size="small" @click="search">
                        <i class="el-icon-search"></i>查询</el-button
                    >
                    <el-button type="warning" size="small" @click="showSettle()">
                        <i class="el-icon-date"></i>月末结算</el-button
                    >
                </div>
          </div>
          <!-- table数据表 -->
          <vol-table
                ref="table"
                :columns="columns"
                :pagination-hide="true"
                :height="240"
                :url="url"
                :ck="false"
                :index="true"
                @rowClick="rowClick"
                @loadBefore="loadTableBefore"
                @loadAfter="loadTableAfter"
          ></vol-table>
        </div>
    </div>
    <!-- 从表 -->
    <div class="view-container">
        <div class="grid-search">
            <!-- table数据表 -->
            <vol-table
                ref="subtable"
                :columns="subcolumns"
                :pagination-hide="false"
                :height="480"
                :url="suburl"
                :ck="false"
                :index="true"
                :defaultLoadPage="false"
                @loadBefore="loadSubTableBefore"
            ></vol-table>
        </div>
    </div>
    
    <vol-box
        :lazy="true"
        v-model="volbox.model"
        title="月末汽量结算"
        :height="400"
        :width="700"
        :padding="5"
        :onModelClose="onModelClose">
        <VolForm
            ref="volform"
            :loadKey="loadKey"
            :formFields="formFields"
            :formRules="formRules">
        </VolForm>
        <template #footer>
            <div>
                <el-button type="primary" size="small" @click="startSettle" v-if="settleFlag">开始结算</el-button >
                <!-- <el-button type="warning" size="small" @click="reSettle" v-if="!settleFlag">重新结算</el-button > -->
                <el-button type="default" size="small" @click="volbox.model = false" >关闭</el-button >
            </div>
        </template>
    </vol-box>
    
  </template>
  
  <script>
    import VolTable from "@/components/basic/VolTable.vue";
    import VolForm from "@/components/basic/VolForm.vue";
    import VolBox from "@/components/basic/VolBox.vue";
    export default {
        components: { VolTable, VolForm,VolBox },

        data() {
            return {
                //表头的图标、名称、说明
                header:{
                    icon:"el-icon-s-grid",
                    name:"月末汽量结算",
                    text:"",
                },
                //查询条件字段
                searchFields: {
                    yearmonth: this.base.getDate(false).substring(0,7),
                    //yearmonth: '',
                },
                formOptions: [
                    //表单配置见表单组件文档
                    [
                        {
                            title: "结算月度",
                            range: false,
                            colSize: 8,
                            field: "yearmonth",
                            type: "month",
                            onChange:(val)=>{
                                this.searchFields.yearmonth=val;
                            }
                        },
                    ],
                ],
                //viewModel: false, //点击单元格时弹出框
                url: "api/ST_MeterMonthVolMain/getPageData", //后台加载数据的url
                columns: [
                        {field:'MonthCompMainID',title:'主键id',type:'guid',width:110,hidden:true,require:true,align:'left'},
                        {field:'ConfirmState',title:'确认状态',type:'string',bind:{ key:'ConfirmState',data:[]},width:110,align:'left'},         
                        {field:'MeterMonth',title:'结算月度',type:'date',width:150,align:'left'},
                        {field:'StartDate',title:'结算开始日期',type:'date',width:150,align:'left'},
                        {field:'EndDate',title:'结算结束日期',type:'date',width:150,align:'left'},
                        {field:'MeterCount',title:'结算仪表数量',type:'int',width:110,align:'left'},
                        {field:'Creator',title:'结算人',type:'string',width:100,align:'left'},
                        {field:'ComputeDate',title:'结算时间',type:'date',width:150,align:'left'},
                        {field:'Confirmor',title:'确认人',type:'string',width:120,align:'left'},
                        {field:'ConfirmDate',title:'确认时间',type:'date',width:150,align:'left'},
            
                        {field:'CreateID',title:'创建人id',type:'int',width:100,hidden:true,align:'left'},
                        {field:'CreateDate',title:'创建时间',type:'datetime',width:150,align:'left',hidden:true},
                        {field:'ModifyID',title:'修改人id',type:'int',width:100,hidden:true,align:'left'},
                        {field:'Modifier',title:'修改人',type:'string',width:100,align:'left',hidden:true},
                        {field:'ModifyDate',title:'修改时间',type:'datetime',width:150,align:'left',hidden:true},
                        {field:'ConfirmId',title:'确认人id',type:'int',width:110,align:'left',hidden:true},
                        {field:'Remark',title:'备注',type:'string',width:220,align:'left',hidden:true},
                        {field:'CompanyCode',title:'分公司编号',type:'string',bind:{ key:'分公司编号',data:[]},width:110,align:'left',hidden:true}
                ],
                //弹窗参数
                volbox:{
                    model:false,
                },
                settleFlag:true,
                //表单参数
                formFields:{MonthCompMainID:'',MeterMonth:'',StartDate:'',EndDate:''},
                formRules:[
                    [{field:'MonthCompMainID',title:'主表主键id',hidden:true}],
                    [{field:'MeterMonth',title:'结算月度',type:'month'},],
                    [{field:'StartDate',title:'结算开始日期',type:'date'},
                    {field:'EndDate',title:'结算结束日期',type:'date'},]
                ],

                //以下为从表相关参数 MonthCompMainID
                mainid:"",
                //suburl:`api/ST_MeterMonthVol/getPageData`,
                suburl:`api/ST_MeterMonthVol/getSubList`,
                subcolumns:[
                    {field:'MonthCompID',title:'仪表用量主键',type:'int',width:110,hidden:true,require:true,align:'left'},
                    {field:'MonthCompMainID',title:'主表主键id',type:'guid',width:110,hidden:true,require:true,align:'left'},
                    {field:'MeterID',title:'仪表ID',type:'decimal',bind:{ key:'仪表ID',data:[]},width:110,align:'left',hidden:true},
                    {field:'IsException',title:'是否异常',type:'byte',bind:{ key:'enable',data:[]},width:110,align:'left'},
                    {field:'ExceptionType',title:'异常类型',type:'string',bind:{ key:'异常类型',data:[]},width:110,align:'left'},
                    {field:'MeterName',title:'仪表名称',type:'string',width:170,align:'left'},
                    {field:'CustCode',title:'客户编号',type:'string',width:80,align:'left'},
                    {field:'CustName',title:'客户名称',type:'string',width:190,align:'left'},
                    {field:'ValveState',title:'供汽状态',type:'int',bind:{ key:'ValveState',data:[]},width:80,align:'center'},
                    {field:'MeterMonth',title:'结算月度',type:'string',width:110,align:'center'},
                    {field:'CompVol',title:'计算汽量',type:'decimal',width:110,align:'right'},
                    {field:'FinalVol',title:'收费汽量',type:'decimal',width:110,align:'right'},
                    {field:'StartNum',title:'表初数',type:'decimal',width:110,align:'right'},
                    {field:'EndNum',title:'表末数',type:'decimal',width:110,align:'right'},
                    {field:'SubVol',title:'末-初',type:'decimal',width:110,align:'right'},
                    {field:'DailyVolSum',title:'日累加量',type:'decimal',width:110,align:'right'},
                    {field:'Price',title:'单价',type:'decimal',width:110,align:'right'},
                    {field:'ReceivableFee',title:'金额',type:'decimal',width:110,align:'right'},
                    {field:'FeeDate',title:'费用产生日期',type:'date',width:150,align:'left'},
                    {field:'NoticePrintFlag',title:'打印标识',type:'string',bind:{ key:'enable',data:[]},width:110,align:'center'},
                    {field:'Remark',title:'备注',type:'string',width:220,align:'left'},

                    {field:'PipeLineID',title:'管线ID',type:'int',bind:{ key:'管线ID',data:[]},width:80,align:'left',hidden:true},
                    {field:'StartDate',title:'起始日期',type:'datetime',width:150,align:'left',hidden:true},
                    {field:'EndDate',title:'截止日期',type:'datetime',width:150,align:'left',hidden:true},
                    {field:'InvFlag',title:'发票标识',type:'string',bind:{ key:'发票标识',data:[]},width:110,align:'left',hidden:true},
                    {field:'MiniCostType',title:'包量方式',type:'string',bind:{ key:'包量方式',data:[]},width:110,align:'left',hidden:true},
                    {field:'MiniUsedAmount',title:'包量吨数',type:'decimal',width:110,align:'left',hidden:true},
                    {field:'LossRate',title:'网损率',type:'decimal',width:110,align:'left',hidden:true},
                    {field:'IsNetFee',title:'是否网络费',type:'byte',bind:{ key:'是否选择',data:[]},width:110,align:'left',hidden:true},
                    {field:'CompanyCode',title:'分公司编号',type:'string',bind:{ key:'分公司编号',data:[]},width:110,align:'left',hidden:true}
                ],
            };
        },
        methods: {
            getformRules(field) {
                let option;
                this.formRules.forEach((x) => {
                    x.forEach((item) => {
                        if (item.field == field) {
                            option = item;
                        }
                    });
                });
                return option;
            },
            onInit(){
                
                //操作按钮
                this.columns.push({
                    title: '操作',
                    hidden: false,
                    align: "center",
                    fixed: 'right',
                    width: 120,
                    render: (h, { row, column, index }) => {
                        if(row.ConfirmState!=1){
                            return <div onClick={(e) => { e.stopPropagation();}}>
                                    <el-button 
                                        type="primary" plain size="small" style="padding: 10px !important;"
                                        onClick={(e) => { 
                                            e.stopPropagation()
                                            //弹窗确认窗口
                                            this.$confirm('确认该条数据吗?', '警告', {
                                                confirmButtonText: '确定',
                                                cancelButtonText: '取消',
                                                type: 'warning',
                                                center: true
                                            }).then(() => {
                                                let url = `/api/ST_MeterMonthVolMain/Confirm?id=${row.MonthCompMainID}`;
                                                this.http.post(url).then(x => {
                                                    if (!x.status) return this.$message.error(x.message);
                                                    this.$message.success(x.message);
                                                    this.search();
                                                });
                                            });
                                        }}
                                    >确认</el-button>
                                    <el-button 
                                        type="warning" plain size="small" style="padding: 10px !important;"
                                        onClick={(e) => { 
                                            e.stopPropagation()
                                            //弹窗确认窗口
                                            this.$confirm('确定要取消结算吗?', '警告', {
                                                confirmButtonText: '确定',
                                                cancelButtonText: '取消',
                                                type: 'warning',
                                                center: true
                                            }).then(() => {
                                                //console.log(row.MonthCompMainID)
                                                this.delSettle(row.MonthCompMainID)
                                            });
                                        }}
                                    >取消结算</el-button>
                                    {/* <el-button 
                                        type="warning" plain size="small" style="padding: 10px !important;"
                                        onClick={(e) => { 
                                            e.stopPropagation()
                                            //弹窗确认窗口
                                            this.$confirm('确定要重新结算吗?', '警告', {
                                                confirmButtonText: '确定',
                                                cancelButtonText: '取消',
                                                type: 'warning',
                                                center: true
                                            }).then(() => {
                                                //this.showSettle(false)
                                                this.volbox.model=true;
                                                this.settleFlag=false;
                                                this.formFields.MonthCompMainID=row.MonthCompMainID;
                                                this.formFields.MeterMonth=row.MeterMonth;
                                                this.formFields.StartDate=row.StartDate;
                                                this.formFields.EndDate=row.EndDate;
                                            });
                                        }}
                                    >重新结算</el-button> */}
                                </div>
                        }
                    }
                })
                //表单  选择年月同时给StartDate EndDate赋值
                var formRules=this.getformRules("MeterMonth")
                formRules.onChange = (val, item) =>{
                    let ym=val.split('-');
                    var year=ym[0];
                    var month=ym[1];
                    if(month=='01'){
                        year=ym[0]-1;
                        month='12';
                    }
                    else{
                        month=month-1;
                    }
                    if(month<10){
                        month="0"+month
                    }
                    this.formFields.StartDate=year+"-"+month+"-25";
                    this.formFields.EndDate=val+"-24";
                }
                
            },
            //点击查询时生成查询条件
            loadTableBefore(param, callBack) {
                //生成查询条件
                param.wheres = [
                    {
                        name: "yearmonth",
                        value: this.searchFields.yearmonth,
                    },
                ];
                callBack(true); //此处必须进行回调，返回处理结果，如果是false，则不会执行后台查询
            },
            loadTableAfter(data, callBack) {
                //此处是从后台加数据后，你可以在渲染表格前，预先处理返回的数据
                //console.log("loadTableAfter"+JSON.stringify(data))
                if(data.length==0){
                    this.mainid=''
                }
                else{
                    this.mainid=data[0].MonthCompMainID
                    
                }
                this.$refs.subtable.load()
                callBack(true); 
            },
            rowClick ({ row, column, event }) {
                this.mainid=row.MonthCompMainID;
                this.$refs.subtable.load()
            },
            //点击查询时生成查询条件
            loadSubTableBefore(param, callBack) {
                //生成查询条件
                param.wheres = [
                    {
                        name: "MonthCompMainID",
                        value: this.mainid,
                    },
                ];
                callBack(true); //此处必须进行回调，返回处理结果，如果是false，则不会执行后台查询
            },
            search() {
                this.$refs.table.load();

            },
            //显示结算表单volbox
            showSettle(){
                this.formFields.MonthCompMainID='';
                var val=this.base.getDate(false).substring(0,7);
                this.formFields.MeterMonth=val;
                let ym=val.split('-');
                var year=ym[0];
                var month=ym[1];
                if(month=='01'){
                    year=ym[0]-1;
                    month='12';
                }
                else{
                    month=month-1;
                }
                if(month<10){
                    month="0"+month
                }
                this.formFields.StartDate=year+"-"+month+"-25";
                this.formFields.EndDate=val+"-24";
                // this.formFields.StartDate='';
                // this.formFields.EndDate='';
                this.settleFlag=true;
                this.volbox.model=true;
            },
            //开始结算
            startSettle(){
                //this.$Message.success("开始结算")
                console.log("formFields:"+JSON.stringify(this.formFields.MeterMonth));
                let url = `/api/ST_MeterMonthVolMain/Settle?metermonth=${this.formFields.MeterMonth}&startdate=${this.formFields.StartDate}&enddate=${this.formFields.EndDate}&flag=0`;
                //如果参数很少后台又不想创建model,将参数放url上
                //let url=''api/表名/方法名?a=1&b=2'
                this.http.post(url).then(x => {
                    if (!x.status){
                        if(x.message=="xx"){
                            //弹窗确认窗口
                            this.$confirm('与上次结算日期不连续是否继续结算?', '警告', {
                                confirmButtonText: '继续',
                                cancelButtonText: '取消',
                                type: 'warning',
                                center: true
                            }).then(() => {
                                url=`/api/ST_MeterMonthVolMain/Settle?metermonth=${this.formFields.MeterMonth}&startdate=${this.formFields.StartDate}&enddate=${this.formFields.EndDate}&flag=1`;
                                this.http.post(url).then(x => {
                                    if (!x.status) return this.$message.error(x.message);
                                    this.$message.success(x.message);
                                });
                            });
                        }
                        else{
                            return this.$message.error(x.message);
                        }
                    } 
                    if(x.message!="xx"){
                        this.$message.success(x.message);
                        this.volbox.model=false;
                        this.search()
                    }
                });
            },
            //取消结算
            delSettle(id){
                let url = `/api/ST_MeterMonthVolMain/delSettle?mainid=${id}`;
                this.http.post(url).then(x => {
                    if (!x.status) return this.$message.error(x.message);
                    this.$message.success(x.message);
                    this.search()
                });
            },
            // //重新结算
            // reSettle(){
            //     let url = `/api/ST_MeterMonthVolMain/ReSettle?mainid=${this.formFields.MonthCompMainID}&metermonth=${this.formFields.MeterMonth}&startdate=${this.formFields.StartDate}&enddate=${this.formFields.EndDate}`;
            //     //如果参数很少后台又不想创建model,将参数放url上
            //     //let url=''api/表名/方法名?a=1&b=2'
            //     this.http.post(url).then(x => {
            //         if (!x.status) return this.$message.error(x.message);
            //         this.$message.success(x.message);
            //         this.volbox.model=false;
            //     });
            // }
        },    
        mounted(){
            this.onInit();
        }
    };
  </script>
  
  <style lang="less" scoped>
    @import '@/components/basic/ViewGrid/ViewGrid.less';
  </style>