抄表算费基础布局

src/views/mis/meterReadingManagement/bwMeterReadCalcFee-index.vue

@@ -1,12 +1,474 @@
 <template>
-    <el-container>
-        <el-header>Header</el-header>
-        <el-container>
-            <el-aside width="200px">Aside</el-aside>
-            <el-container>
-                <el-main>Main</el-main>
-                <el-footer>Footer</el-footer>
-            </el-container>
-        </el-container>
-    </el-container>
-</template>
+    <div class="mis-layout">
+        <div style="height:90px;">
+            <div class="mis-layout-header">
+                <div class="pannel-header">
+                    <div class="pannel-title">
+                        <div class="pannel-split">
+                        </div>基础信息
+                    </div>
+                </div>
+                <div class="filter-option">
+                    <span>所属公司：</span>
+                    <cpsCompany v-model="queryParams.companyBranch" size="small" @change="onCompanyChange">
+                    </cpsCompany>
+                    <span>所属片区：</span>
+                    <cpsSelect v-model="queryParams.mrArea" skey="cbpq"
+                        :params="{ company_Branch: queryParams.companyBranch }" isDisabled="all" size="small"
+                        style="width:200px" :refresh="cbpqRefresh">
+                    </cpsSelect>
+                    <span>财务日期：</span>
+                    <cpsSelect skey="cwrq" :params="{ gd_flag: '0' }" isDisabled="all" orderWay="desc" size="small"
+                        :clearable="false" :isSelectedFirstOption="true" style="width:200px">
+                    </cpsSelect>
+                    <el-button type="primary" icon="el-icon-refresh" @click="onSearch()" size="small">刷新</el-button>
+                </div>
+            </div>
+        </div>
+        <div class="mis-layout-left">
+            <div class="mis-layout-header" style="height:36px;overflow: hidden;">
+                <div class="pannel-header">
+                    <div class="pannel-title">
+                        <div class="pannel-split">
+                        </div>抄表册选择（请选择单个抄表册进行计算）
+                    </div>
+                </div>
+            </div>
+            <div class="mis-layout-main" style="height: calc(100% - 36px);">
+                <TableItem :table-data="listData" :column="columnData" :for-id="false" :pagination="true"
+                    :pagesize="pageInfo.size" :currentpage="pageInfo.current" :border="true" :multiple="false"
+                    :total="pageInfo.total" :isdelete="false" :is-select="false" :stripe="false"
+                    @handleCurrentChange="onHandleCurrentChange" @rowClick="onRowClick"
+                    @handleSizeChange="onHandleSizeChange" @sortChange="onSortChange" />
+            </div>
+        </div>
+        <div class="mis-layout-right">
+            <div class="mis-layout-header" style="height:90px;">
+                <div class="pannel-header" style="border-left:1px;">
+                    <div class="pannel-title">
+                        <div class="pannel-split">
+                        </div>可算费用户明细列表
+                    </div>
+                </div>
+                <div class="filter-option">
+                    <el-input v-model="queryParams.searchText" size="small" style="width:220px;" placeholder="用户编号、姓名、地址"
+                        clearable @change="clickQuery()" />
+                    <el-button type="primary" icon="el-icon-search" @click="onSearch()" size="small">查询</el-button>
+                    <el-button type="primary" icon="el-icon-s-custom" @click="onSearch()" size="small">算费（按选中用户）</el-button>
+                    <el-button type="primary" icon="el-icon-notebook-1" @click="onSearch()"
+                        size="small">算费（按选中抄表册）</el-button>
+                </div>
+            </div>
+            <div class="mis-layout-main" style="height: calc(100% - 90px);">
+                <TableItem :table-data="listData" :column="columnData" :for-id="false" :pagination="true"
+                    :pagesize="pageInfo.size" :currentpage="pageInfo.current" :border="true" :multiple="false"
+                    :total="pageInfo.total" :isdelete="false" :is-select="false" :stripe="false"
+                    @handleCurrentChange="onHandleCurrentChange" @rowClick="onRowClick"
+                    @handleSizeChange="onHandleSizeChange" @sortChange="onSortChange" />
+            </div>
+        </div>
+    </div>
+</template> 
+<script>
+import '@/views/mis/common/assets/styles/misStyle.scss';
+import { MeterReading } from '@/views/mis/common/api/meterReadingApi.js';
+import TableItem from '@/components/TableAuto/index.vue';
+import cpsSelect from '@/views/mis/common/components/cps-select.vue';
+import cpsCompany from '@/views/mis/common/components/cps-company.vue';
+export default {
+    name: 'MeterReadEntry',
+    components: { TableItem, cpsCompany, cpsSelect },
+    data() {
+        return {
+            queryParams: {
+                companyBranch: "",
+                mrArea: "",
+                mrBook: "",
+                searchText: "",
+                mrOCode: "",
+                mrMode: "",
+                mrFlag: ""
+            },//搜索条件表单对象   
+            listInfoSelection: [], // 用户档案表格选中数据 
+            pageInfo: {
+                current: 1,
+                size: 20,
+                total: 1,
+                sortOrder: 'asc',
+                sortProperty: 'mrOrderNo'
+            }, //用户档案分页数据 
+            columnData: [
+                {
+                    label: '用户编号',
+                    prop: 'customerNo',
+                    align: 'center',
+                    sortable: true,
+                    //fixed: true,
+                    //width: 120
+                },
+                {
+                    label: '抄表卡ID',
+                    prop: 'meterCardId',
+                    align: 'center',
+                    sortable: true,
+                    //fixed: true,
+                    //width: 120
+                },
+                {
+                    label: '用户姓名',
+                    prop: 'customerName',
+                    align: 'center',
+                    sortable: true,
+                    //fixed: true,
+                    //width: 130
+                }
+            ],
+            listData: [], // table表格数据  
+            detailForm: {
+                customerAddress: undefined,
+                thisReading: undefined,
+                quantity: undefined,
+                mrMode: undefined,
+                lastReading: undefined,
+                yearMonth: undefined,
+                meterRange: undefined,
+                remark: undefined,
+                mrTypeName: undefined,
+                jjl: undefined,
+                newMeterBreading: undefined,
+                customerName: undefined,
+                meterCardId: undefined,
+                rowId: undefined,
+                mrType: undefined,
+                oldMeterEreading: undefined,
+                mrModeName: undefined,
+                meterNo: undefined,
+                calFlag: undefined,
+                mrFlag: undefined,
+                customerMobile: undefined,
+                customerNo: undefined
+            },
+            labelData: {
+                scds: "上次读数",
+                bcds: "本次读数",
+                isXhb: false,           //是否为洗换表
+                isModifyScds: false,    //修改上次读数
+                isDisabledSaveBtn: true //是否禁用保存按钮
+            },
+            rules: {
+                lastReading: [{ required: true, message: '请输入读数', trigger: 'blur' }],
+                oldMeterEreading: [{ required: true, message: '请输入旧表止数', trigger: 'blur' }],
+                newMeterBreading: [{ required: true, message: '请输入新表起数', trigger: 'blur' }],
+                thisReading: [{ required: true, message: '请输入读数', trigger: 'blur' }],
+                jjl: [{ required: true, message: '请输入加减量', trigger: 'blur' }]
+            },
+            cbpqRefresh: false
+        }
+    },
+    watch: {
+    },
+    created() {
+    },
+    mounted() {
+        // this.queryParams.mrFlag="0";//默认加载未抄表的数据
+        // this.getData();
+    },
+    destroyed() {
+    },
+    methods: {
+        /***********************************事件方法***********************************/
+        /**
+         * 查询按钮事件
+         */
+        onSearch() {
+            this.clearPageInfo();
+            this.listInfoSelection = [];
+            this.labelData.isDisabledSaveBtn = true;
+            this.getData();
+        },
+        /**
+         * 查询用户档案数据
+         */
+        getData() {
+            //追加分页参数 
+            let params = Object.assign({}, this.pageInfo, this.queryParams);
+            this.listData = [];
+            MeterReading.queryList(params).then((res) => {
+                if (res.code !== 1) {
+                    this.$message.error('抄表计划信息获取出错!');
+                    return;
+                }
+                //数据总数
+                this.pageInfo.total = res.result.total;
+                this.listData = res.result.records;
+            });
+        },
+        /**
+         * 分页每页条数事件
+         * @param {int} pageSize 页码大小
+         */
+        onHandleSizeChange(pageSize) {
+            this.pageInfo.size = pageSize;
+            this.getData();
+        },
+        /**
+         * 改变当前页事件
+         * @param {int} currentPage 当前页码
+         */
+        onHandleCurrentChange(currentPage) {
+            this.pageInfo.current = currentPage;
+            this.getData();
+        },
+        /**
+         * 单击行内容事件
+         * @param {object} row 当前行row对象数据
+         */
+        onRowClick(row) {
+            this.clearPageInfo();
+            let rowData = Object.assign({}, row);
+            this.listInfoSelection = Object.assign({}, rowData, { rowIndex: row.rowIndex });
+            this.detailForm = rowData;
+            this.detailForm.mrType = this.detailForm.mrType.toString();
+            this.onMrTypeChange(this.detailForm.mrType, null);
+
+            this.setFormInfo(row);
+
+            this.$nextTick(() => {
+                this.$refs["detailForm"].validate();
+            });
+
+            this.labelData.isDisabledSaveBtn = false;
+        },
+        /**
+         * 排序事件
+         * @param {array} arrOrder 排序数组
+         */
+        onSortChange(arrOrder) {
+            this.pageInfo['sortOrder'] = (arrOrder[0] == "true" ? "asc" : (arrOrder[0] == "false" ? "desc" : ""));
+            this.pageInfo['sortProperty'] = arrOrder[1];
+            this.getData();
+        },
+        /**
+         * 换表保存处理按钮 
+         */
+        submitForm() {
+            this.$refs["detailForm"].validate((valid) => {
+                if (valid) {
+                    this.saveInfo();
+                } else {
+                    this.$message.error("请将必填项填写完整后再保存！");
+                }
+            });
+        },
+        /**
+         * 清除页面相关数据
+         */
+        clearPageInfo() {
+            // 表单数据
+            for (var key in this.detailForm) {
+                let tempValue = "";
+                if (typeof key === "number" || typeof key === "bigint") tempValue = 0;
+                this.detailForm[key] = tempValue;
+            }
+            this.$refs["detailForm"].resetFields();
+        },
+        /**
+         * 计算实际水量
+         */
+        calcHjsl(isReturn) {
+            this.$refs.btnSave.$el.focus();//设置保存按钮获取焦点
+            var sjsl = 0;
+            var v_cblx = this.detailForm.mrType;
+            var scds = this.detailForm.lastReading;
+            var jbzd = this.detailForm.oldMeterEreading;
+            var xbqd = this.detailForm.newMeterBreading;
+            var bcds = this.detailForm.thisReading;
+            var jjl = this.detailForm.jjl;
+            if (v_cblx == "0") {//正常                
+                sjsl = bcds - scds + jjl;
+            } else if (v_cblx == "-1") { //表倒走               
+                sjsl = Math.abs(bcds - scds) + jjl;
+            }
+            else if (v_cblx == "-2") { //表满度               
+                var v_sblc = this.detailForm.meterRange;
+                var sbmdValue = Math.pow(10, v_sblc) - 1;
+                sjsl = Math.abs(sbmdValue - scds + bcds) + jjl;
+            }
+            else if (v_cblx == "-3") { //洗换表               
+                sjsl = (jbzd - scds) + (bcds - xbqd);
+            }
+            this.detailForm.quantity = sjsl;
+
+            if (isReturn) {
+                var data = {};
+                data.sjsl = sjsl;
+                data.cblx = v_cblx;
+                data.scds = scds;
+                data.jbzd = jbzd;
+                data.xbqd = xbqd;
+                data.bcds = bcds;
+                data.jjl = jjl;
+                return data;
+            }
+        },
+        /**
+         * 抄表类型下拉事件
+         */
+        onMrTypeChange(value, selText) {
+            if (selText) this.detailForm.remark = "#" + selText + "#";
+            if (value == "-3") {//洗换表  
+                this.labelData.isXhb = true;
+                this.labelData.scds = "旧表起数";
+                this.labelData.bcds = "新表止数";
+            } else {
+                this.labelData.isXhb = false;
+                this.labelData.scds = "上次读数";
+                this.labelData.bcds = "本次读数";
+            }
+            this.detailForm.oldMeterEreading = this.detailForm.newMeterBreading
+                = this.detailForm.thisReading = this.detailForm.jjl = this.detailForm.quantity = 0;
+            this.$nextTick(() => {
+                this.$refs.bcds.select();
+            });
+        },
+        /**
+         * 设置表单信息
+         * @param {object} row 行对象
+         */
+        setFormInfo(row) {
+            var isChk = this.labelData.isModifyScds;
+            if (isChk) {
+                this.modifyReadNum(false);
+            }
+            //设置表单信息
+            if (row) {
+                if (row.mrFlag == "0") {
+                    //未抄表的情况下，对抄表方式和抄表类型进行默认赋值处理
+                    if (this.detailForm.mrMode == "") this.detailForm.mrMode = "01";
+                    if (this.detailForm.mrType == "") this.detailForm.mrType = "0";
+                }
+                if (row.calFlag == "1") {
+                    //已算费的情况下进行提示
+                    this.$message.error("当前抄表记录已算费！");
+                    this.listInfoSelection = [];
+                }
+            }
+        },
+        /**
+         * 修改底数
+         * @param {boolean} isChk 是否选中
+         */
+        modifyReadNum(isChk) {
+            this.labelData.isModifyScds = isChk;
+            if (!isChk) {
+                let selRow = this.listInfoSelection;
+                let v_scds = selRow ? selRow.lastReading : 0;
+                this.detailForm.lastReading = v_scds;
+            }
+            this.$nextTick(() => {
+                this.$refs.scds.select();
+            });
+        },
+        /**
+       * 公司下拉事件
+       * @param {公司编码值} value 
+       */
+        onCompanyChange(value) {
+            this.queryParams.mrArea = "";
+            this.queryParams.companyBranch = value;
+            this.cbpqRefresh = !this.cbpqRefresh;
+        }
+
+        /*****************************************************************************/
+    }
+}
+</script>
+<style lang='scss' scoped>
+.mis-layout {
+    width: 99%;
+    border: 1px solid #ddd;
+    margin: 0.5%;
+    height: 98%;
+    border-radius: 5px;
+
+    .mis-layout-left {
+        width: 35%;
+        height: calc(100% - 90px);
+        float: left;
+        border-right: 1px solid #ddd;
+    }
+
+    .mis-layout-right {
+        width: 65%;
+        height: calc(100% - 90px);
+        float: left;
+    }
+
+    .mis-layout-header {
+        width: 100%;
+        height: 90px;
+        overflow: auto;
+    }
+
+    .mis-layout-main {
+        width: 100%;
+        height: calc(100% - 90px);
+        padding: 3px;
+    }
+
+    .pannel-header {
+        padding: 5px;
+        padding-bottom: 5px;
+        border-bottom: 1px solid #ddd;
+    }
+
+    .pannel-title {
+        font-weight: bold;
+        color: #777;
+        height: 25px;
+        line-height: 25px;
+    }
+
+    .pannel-split {
+        width: 4px;
+        height: 25px;
+        background: linear-gradient(0deg, #0991F1, #5B76F9);
+        float: left;
+        margin-right: 5px;
+    }
+
+    .filter-option {
+        width: 100%;
+        height: auto;
+        font-size: 14px;
+        border-bottom: 1px solid #ddd;
+        padding: 10px 5px;
+        float: left;
+    }
+}
+
+/* 只读的 input 样式重写 */
+.grayBgColor>:first-child {
+    background-color: #FAFAFA;
+}
+
+.redTextColor>:first-child {
+    color: red;
+    background-color: #FAFAFA;
+}
+
+/*重写input-number的样式*/
+/deep/ .el-input input[role='spinbutton'] {
+    color: #409EFF;
+    font-weight: bold;
+    font-size: 16px;
+    text-align: left;
+}
+
+.buttonStyle {
+    margin-top: 25px;
+    float: left;
+    margin-left: 35%;
+}
+</style>
+