表册批量设置前端所有功能

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

@@ -0,0 +1,519 @@
+<template>
+    <div class="mis-layout">
+        <div style="height:80px;">
+            <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="companyBranch" size="small" @change="onCompanyChange" style="width:150px">
+                    </cpsCompany>
+                </div>
+            </div>
+        </div>
+        <div class="mis-layout-left">
+            <div class="mis-layout-header" style="height:43px;overflow: hidden;">
+                <div class="pannel-header" style="line-height: 30px;">
+                    <span style="font-size:14px">所属片区：</span>
+                    <cpsSelect ref="sspqLeft" v-model="queryLeftParams.mrArea" skey="cbpq"
+                        :params="{ company_Branch: companyBranch }" isDisabled="all" size="mini" style="width:150px"
+                        :refresh="cbpqRefresh">
+                    </cpsSelect>
+                    <el-input v-model="queryLeftParams.searchText" size="mini" style="width:180px;" placeholder="用户编号、姓名、地址"
+                        clearable @change="onSearchLeft()" />
+                    <el-button type="primary" icon="el-icon-search" @click="onSearchLeft()" size="mini">查询</el-button>
+                </div>
+            </div>
+            <div class="mis-layout-main" style="height: calc(100% - 43px);">
+                <TableItem :table-data="listDataLeft" :column="columnDataLeft" :for-id="false" :pagination="true"
+                    :pagesize="pageInfoLeft.size" :currentpage="pageInfoLeft.current" :border="true" :multiple="true"
+                    :total="pageInfoLeft.total" :isdelete="false" :is-select="false" :stripe="false"
+                    @handleCurrentChange="onHandleCurrentChange" @handleSelectionChange="onHandleSelectionChange"
+                    @handleSizeChange="onHandleSizeChange" @sortChange="onSortChange" />
+            </div>
+        </div>
+        <div class="mis-layout-center">
+            <div style="display:flex;justify-content:center;align-items:center;height: 100%;flex-direction: column;">
+                <div style=" margin-bottom: 20px;">
+                    <el-button type="primary" icon="el-icon-right" @click="onSelectAllotment()" size="mini"
+                        :disabled="selectedLeft.length == 0">选择分配</el-button>
+                </div>
+                <div style=" margin-bottom: 5px;">
+                    <el-button type="primary" icon="el-icon-right" @click="onAllAllotment()" size="mini"
+                        :disabled="this.queryRightParams.mrBook == ''">全部分配</el-button>
+                </div>
+                <el-divider></el-divider>
+                <div style=" margin-bottom: 20px;">
+                    <el-button type="primary" icon="el-icon-back" @click="onSelectCancel()" size="mini"
+                        :disabled="selectedRight.length == 0">选择撤销</el-button>
+                </div>
+                <div style=" margin-bottom: 20px;">
+                    <el-button type="primary" icon="el-icon-back" @click="onSelectAllCancel()" size="mini"
+                        :disabled="this.queryRightParams.mrBook == ''">全部撤销</el-button>
+                </div>
+            </div>
+        </div>
+        <div class="mis-layout-right">
+            <div class="mis-layout-header" style="height:43px;overflow: hidden;">
+                <div class="pannel-header" style="border-left:1px;font-size:14px">
+                    <span>所属片区：</span>
+                    <cpsSelect v-model="queryRightParams.mrArea" skey="cbpq" :params="{ company_Branch: companyBranch }"
+                        isDisabled="all" size="mini" style="width:150px" :refresh="cbpqRefresh" @change="changeCbpq">
+                    </cpsSelect>
+                    <span>所属表册：</span>
+                    <cpsSelect ref="sscbb" v-model="queryRightParams.mrBook" skey="cbb" :labelGroup="true"
+                        :filterable="true" :params="{ company_Branch: companyBranch, MR_AREA: queryRightParams.mrArea }"
+                        isDisabled="all" size="small" :refresh="cbbRefresh" style="width:150px">
+                    </cpsSelect>
+                    <el-input v-model="queryRightParams.searchText" size="mini" style="width:180px;"
+                        placeholder="用户编号、姓名、地址" clearable @change="onSearchRight()" />
+                    <el-button type="primary" icon="el-icon-search" @click="onSearchRight()" size="mini">查询</el-button>
+                </div>
+            </div>
+            <div class="mis-layout-main" style="height: calc(100% - 43px);">
+                <TableItem :table-data="listDataRight" :column="columnDataRight" :for-id="false" :pagination="true"
+                    :pagesize="pageInfoRight.size" :currentpage="pageInfoRight.current" :border="true" :multiple="true"
+                    :total="pageInfoRight.total" :isdelete="false" :is-select="false" :stripe="false"
+                    @handleCurrentChange="onHandleCurrentChangeRight" @handleSizeChange="onHandleSizeChangeRight"
+                    @sortChange="onSortChangeRight" @handleSelectionChange="onHandleSelectionChangeRight" />
+            </div>
+        </div>
+    </div>
+</template> 
+<script>
+import '@/views/mis/common/assets/styles/misStyle.scss';
+import { MrAreaBatchSet } 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 {
+            companyBranch: "",
+            queryLeftParams: {
+                mrArea: "",
+                searchText: ""
+            },
+            queryRightParams: {
+                mrArea: "",
+                mrBook: "",
+                searchText: ""
+            },
+            pageInfoLeft: {
+                current: 1,
+                size: 20,
+                total: 1,
+                'orders[0].asc': 'true',
+                'orders[0].column': 'customerNo'
+            },
+            pageInfoRight: {
+                current: 1,
+                size: 20,
+                total: 1,
+                'orders[0].asc': 'true',
+                'orders[0].column': 'customerNo'
+            },
+            columnDataLeft: [{
+                label: '用户编号',
+                prop: 'customerNo',
+                align: 'center',
+                sortable: true
+            },
+            {
+                label: '用户姓名',
+                prop: 'customerName',
+                align: 'center',
+                sortable: true
+            },
+            {
+                label: '用户地址',
+                prop: 'customerAddress',
+                align: 'center',
+                sortable: true
+            }],
+            columnDataRight: [{
+                label: '用户编号',
+                prop: 'customerNo',
+                align: 'center',
+                sortable: true
+            },
+            {
+                label: '用户姓名',
+                prop: 'customerName',
+                align: 'center',
+                sortable: true
+            },
+            {
+                label: '用户地址',
+                prop: 'customerAddress',
+                align: 'center',
+                sortable: true
+            }],
+            listDataLeft: [],
+            listDataRight: [],
+            cbpqRefresh: false,
+            cbbRefresh: false,
+            selectedLeft: [], //选中的左侧列表数据
+            selectedRight: [] //选中的右侧列表数据
+        }
+    },
+    watch: {
+    },
+    created() {
+    },
+    mounted() {
+        this.onReload();
+    },
+    destroyed() {
+    },
+    methods: {
+        /***********************************公共事件方法***********************************/
+        /**
+         * 公司下拉事件
+         * @param {公司编码值} value 
+         */
+        onCompanyChange(value) {
+            this.queryLeftParams.mrArea = "";
+            this.queryRightParams.mrArea = "";
+            this.companyBranch = value;
+            this.cbpqRefresh = !this.cbpqRefresh;
+        },
+        //刷新列表数据
+        onReload() {
+            this.getDataLeft();
+            this.getDataRight();
+        },
+        /***********************************左侧列表事件方法***********************************/
+        /**
+          * 查询左侧列表事件
+          */
+        onSearchLeft() {
+            this.getDataLeft();
+        },
+        /**
+         * 未分配列表数据
+         */
+        getDataLeft() {
+            //追加分页参数 
+            let params = Object.assign({}, this.pageInfoLeft, this.queryLeftParams);
+            params.companyBranch = this.companyBranch;
+            this.listDataLeft = [];
+            MrAreaBatchSet.getUnAllotList(params).then((res) => {
+                if (res.code !== 1) {
+                    this.$message.error('未分配列表信息获取出错!');
+                    return;
+                }
+                //数据总数
+                this.pageInfoLeft.total = res.result.total;
+                this.listDataLeft = res.result.records;
+            });
+        },
+        /**
+         * 分页每页条数事件
+         * @param {int} pageSize 页码大小
+         */
+        onHandleSizeChange(pageSize) {
+            this.pageInfoLeft.size = pageSize;
+            this.getDataLeft();
+        },
+        /**
+         * 改变当前页事件
+         * @param {int} currentPage 当前页码
+         */
+        onHandleCurrentChange(currentPage) {
+            this.pageInfoLeft.current = currentPage;
+            this.getDataLeft();
+        },
+        /**
+         * 当选择项发生变化时会触发该事件
+         */
+        onHandleSelectionChange(rows) {
+            if (rows.length > 0) {
+                this.selectedLeft = [];
+                rows.forEach(item => {
+                    this.selectedLeft.push(item.customerNo);
+                });
+            } else {
+                this.selectedLeft = [];
+                this.listDataRight = [];
+            }
+        },
+        /**
+         * 排序事件
+         * @param {array} arrOrder 排序数组
+         */
+        onSortChange(arrOrder) {
+            this.pageInfoLeft['orders[0].asc'] = (arrOrder[0] == "true" ? "asc" : (arrOrder[0] == "false" ? "desc" : ""));
+            this.pageInfoLeft['orders[0].column'] = arrOrder[1];
+            this.getDataLeft();
+        },
+        /***********************************右侧信息列表***********************************/
+        /**
+         * 查询用户列表按钮事件
+         */
+        onSearchRight() {
+            this.getDataRight();
+        },
+        /**
+         * 查询已分配的用户列表数据
+         */
+        getDataRight() {
+            //追加分页参数 
+            let params = Object.assign({}, this.pageInfoRight, this.queryRightParams);
+            params.companyBranch = this.companyBranch;
+            this.listDataRight = [];
+            MrAreaBatchSet.getAllotList(params).then((res) => {
+                if (res.code !== 1) {
+                    this.$message.error('已分配列表信息获取出错!');
+                    return;
+                }
+                //数据总数
+                this.pageInfoRight.total = res.result.total;
+                this.listDataRight = res.result.records;
+            });
+        },
+        /**
+        * 分页每页条数事件
+        * @param {int} pageSize 页码大小
+        */
+        onHandleSizeChangeRight(pageSize) {
+            this.pageInfoRight.size = pageSize;
+            this.getDataRight();
+        },
+        /**
+         * 改变当前页事件
+         * @param {int} currentPage 当前页码
+         */
+        onHandleCurrentChangeRight(currentPage) {
+            this.pageInfoRight.current = currentPage;
+            this.getDataRight();
+        },
+        /**
+         * 排序事件
+         * @param {array} arrOrder 排序数组
+         */
+        onSortChangeRight(arrOrder) {
+            this.pageInfoRight['orders[0].asc'] = (arrOrder[0] == "true" ? "asc" : (arrOrder[0] == "false" ? "desc" : ""));
+            this.pageInfoRight['orders[0].column'] = arrOrder[1];
+            this.getDataRight();
+        },
+        /**
+         * 当选择项发生变化时会触发该事件
+         */
+        onHandleSelectionChangeRight(rows) {
+            this.selectedRight = [];
+            if (rows.length > 0) {
+                rows.forEach(item => {
+                    this.selectedRight.push(item.customerNo);
+                });
+            }
+        },
+        /**
+       * 
+       * @param {string} value 抄表片区
+       */
+        changeCbpq(value) {
+            this.cbbRefresh = !this.cbbRefresh;
+            this.queryRightParams.mrBook = '';
+        },
+        /***********************************中间按钮事件***********************************/
+        /**
+         * 选择分配
+         */
+        onSelectAllotment() {
+            if (this.selectedLeft.length == 0) {
+                this.$message.error('请至少选择一个待分配的用户!');
+                return;
+            }
+            if (this.queryRightParams.mrBook == "") {
+                this.$message.error('请选择需要分配到的抄表册！');
+                return;
+            }
+            let tipMsg = "请确认是否将选择的用户分配至抄表册【" + this.$refs.sscbb.getSelectedText() + "】？";
+            this.$confirm(tipMsg, '温馨提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                let params = { mrBook: this.queryRightParams.mrBook, customerNos: this.selectedLeft.join(',') };
+                MrAreaBatchSet.selectAllotment(params).then((res) => {
+                    if (res.code == 1) {
+                        this.$message.success(res.message);
+                        this.onReload();
+                    } else {
+                        this.$message.error(res.message);
+                    }
+                });
+            }).catch(() => {
+
+            });
+        },
+        /**
+         * 全部分配
+         */
+        onAllAllotment() {
+            if (this.queryRightParams.mrBook == "") {
+                this.$message.error('请选择需要分配到的抄表册！');
+                return;
+            }
+            let sspqText = this.$refs.sspqLeft.getSelectedText();
+            sspqText = sspqText == undefined ? "" : sspqText;
+            let tipMsg = "请确认是否将片区【" + sspqText + "】中未分配抄表册的用户，全部分配至抄表册【" + this.$refs.sscbb.getSelectedText() + "】？";
+            this.$confirm(tipMsg, '温馨提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                let params = { mrArea: this.queryLeftParams.mrArea, mrBook: this.queryRightParams.mrBook };
+                MrAreaBatchSet.allAllotment(params).then((res) => {
+                    if (res.code == 1) {
+                        this.$message.success(res.message);
+                        this.onReload();
+                    } else {
+                        this.$message.error(res.message);
+                    }
+                });
+            }).catch(() => {
+
+            });
+        },
+        /**
+         * 选择撤销
+         */
+        onSelectCancel() {
+            if (this.selectedRight.length == 0) {
+                this.$message.error('请至少选择一个待撤销的用户!');
+                return;
+            }
+            let sspqText = this.$refs.sspqLeft.getSelectedText();
+            sspqText = sspqText == undefined ? "" : sspqText;
+            let tipMsg = "请确认是否将选中的用户撤销至抄表片区【" + sspqText + "】？";
+            this.$confirm(tipMsg, '温馨提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                let params = { mrArea: this.queryLeftParams.mrArea, customerNos: this.selectedRight.join(',') };
+                MrAreaBatchSet.selectCancel(params).then((res) => {
+                    if (res.code == 1) {
+                        this.$message.success(res.message);
+                        this.onReload();
+                    } else {
+                        this.$message.error(res.message);
+                    }
+                });
+            }).catch(() => {
+
+            });
+        },
+        /**
+         * 全部撤销
+         */
+        onSelectAllCancel() {
+            if (this.queryRightParams.mrBook == "") {
+                this.$message.error('请选择一个右侧的抄表册数据!');
+                return;
+            }
+            var lccpqmc = this.$refs.sspqLeft.getSelectedText();
+            lccpqmc = lccpqmc == undefined ? "" : lccpqmc;
+            var rcbbmc = this.$refs.sscbb.getSelectedText();
+            let tipMsg = "请确认是否将抄表册【" + rcbbmc + "】中的用户全部撤销至片区【" + lccpqmc + "】？";
+            this.$confirm(tipMsg, '温馨提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                let params = { mrArea: this.queryLeftParams.mrArea, mrBook: this.queryRightParams.mrBook };
+                MrAreaBatchSet.allCancel(params).then((res) => {
+                    if (res.code == 1) {
+                        this.$message.success(res.message);
+                        this.onReload();
+                    } else {
+                        this.$message.error(res.message);
+                    }
+                });
+            }).catch(() => {
+
+            });
+        }
+        /*****************************************************************************/
+    }
+}
+</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: 45%;
+        height: calc(100% - 80px);
+        float: left;
+        border-right: 1px solid #ddd;
+    }
+
+    .mis-layout-center {
+        width: 10%;
+        height: calc(100% - 80px);
+        float: left;
+    }
+
+    .mis-layout-right {
+        width: 45%;
+        height: calc(100% - 80px);
+        float: left;
+        border-left: 1px solid #ddd;
+    }
+
+    .mis-layout-header {
+        width: 100%;
+        height: 80px;
+        overflow: auto;
+    }
+
+    .mis-layout-main {
+        width: 100%;
+        height: calc(100% - 80px);
+        padding: 3px;
+    }
+
+    .pannel-header {
+        padding: 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: 5px;
+        float: left;
+    }
+}
+</style>
+