java-collect-fees-front/src/views/mis/customerManagement/customer-index.vue

<template>
    <div class="mis-pageBox">
        <!-- 主页 -->
        <el-container>
            <el-header height="40px">
                <el-row>
                    <el-col :span="18">
                        <div style="display:flex;align-items:center;">
                            所属公司：<cpsCompany v-model="queryParams.companyBranch" size="small" style="width:150px"
                                @change="changeGs">
                            </cpsCompany>&nbsp;
                            所属片区：<cpsSelect v-model="queryParams.mrArea" size="small" skey="cbpq"
                                :params="{ company_branch: queryParams.companyBranch }" isDisabled="all"
                                :refresh="cbpqRefresh" @change="changeCbpq" style="width:150px">
                            </cpsSelect>&nbsp;
                            所属表册：<cpsSelect v-model="queryParams.mrBook" size="small" skey="cbb"
                                :params="{ company_branch: queryParams.companyBranch, mr_area: queryParams.mrArea }"
                                isDisabled="all" :refresh="cbbRefresh" :labelGroup=true :filterable=true
                                style="width:150px"></cpsSelect>&nbsp;
                            关 键 字：<el-input v-model="queryParams.searchText" size="small" style="width:150px;"
                                placeholder="输入关键字" clearable @keyup.enter.native="clickQuery()" />&nbsp;
                            <!-- <el-button-group>
                            <el-button type="primary" size="small" icon="el-icon-search"
                                @click="clickQuery()">查询</el-button>
                            <el-tooltip content="高级搜索" placement="top" effect="light">
                                <el-button type="primary" size="small" icon="el-icon-arrow-up"
                                    style="padding-left: 6px;padding-right:6px;" @click="advancedQuery"></el-button>
                            </el-tooltip>
                        </el-button-group> -->
                            <el-dropdown split-button type="primary" size="small" placement="top" @click="clickQuery()"
                                @command="advancedQuery">
                                <i class="el-icon-search"></i> 查询
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item command="advancedQuery">高级搜索</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                    </el-col>
                    <el-col :span="6" class="list-opCol">
                        <el-button type="success" size="small" icon="el-icon-plus" @click="clickAdd()">添加</el-button>
                        <el-button type="warning" size="small" icon="el-icon-edit" @click="clickModify()"
                            :disabled="disabledModify">修改</el-button>
                        <el-button type="danger" size="small" icon="el-icon-delete" @click="clickDelete()"
                            :disabled="disabledDelete">作废</el-button>
                        <el-popover placement="top-start" title="提示" width="200" trigger="hover"
                            content="数据量大时等待时间可能较长，请您耐心等待！">
                            <el-button slot="reference" type="info" size="small" icon="el-icon-document"
                                @click="clickExport()">导出</el-button>
                        </el-popover>
                        <!-- <el-button type="info" size="small" icon="el-icon-document" @click="clickExport()">导出</el-button> -->
                    </el-col>
                </el-row>
            </el-header>
            <el-main>
                <tfTable :table-data="dataList" :column="columns" :for-id="true" :pagination="true"
                    :currentpage="pageInfo.current" :pagesize="pageInfo.size" :total="pageInfo.tableTotal" :border="true"
                    :multiple="false" :fixed="true" :isdelete="false" :is-select="false" :stripe="true"
                    @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange"
                    @handleSelectionChange="handleSelectionChange" @rowDblclick="showDetail" @detail="showDetail"
                    @sortChange="onCustomerSortChange" @rowClick="handleRowClick" />
            </el-main>
        </el-container>
        <!-- 详情页 -->
        <el-dialog v-if="dialogVisible" v-dialogDrag :title="dialogTitle" top="0vh" :visible.sync="dialogVisible"
            width="70%" height="100%">
            <tfDetail :detailData="detailData" :editState="editState" ref="dForm" />
            <template slot="footer">
                <el-button type="primary" icon="el-icon-check" @click="clickSave()" v-if="!editState">确 定</el-button>
                <el-button icon="el-icon-close" @click="clickCancel()">关 闭</el-button>
            </template>
        </el-dialog>

        <!-- 高级搜索 -->
        <el-drawer title="高级搜索" :visible.sync="drawerDialog" direction="ttb" size="350px" ref="drawer">
            <el-container>
                <el-main>
                    <el-row type="flex" style="padding:8px 12px;">
                        <!-- 左侧 -->
                        <el-col :span="16" style="border-left:1px solid whitesmoke;">
                            <el-tag>筛选条件</el-tag>
                            <div class="filterDiv">
                                <div style="margin:5px;">
                                    所属公司：<cpsCompany v-model="queryParams.companyBranch" size="small" style="width:180px"
                                        @change="changeGs">
                                    </cpsCompany>&nbsp;
                                    所属片区：<cpsSelect v-model="queryParams.mrArea" size="small" skey="cbpq"
                                        :params="{ company_branch: queryParams.companyBranch }" isDisabled="all"
                                        :refresh="cbpqRefresh" @change="changeCbpq" style="width:180px">
                                    </cpsSelect>&nbsp;
                                    所属表册：<cpsSelect v-model="queryParams.mrBook" size="small" skey="cbb"
                                        :params="{ company_branch: queryParams.companyBranch, mr_area: queryParams.mrArea }"
                                        isDisabled="all" :refresh="cbbRefresh" :labelGroup=true :filterable=true
                                        style="width:180px"></cpsSelect>&nbsp;
                                </div>
                                <div style="margin:5px;">
                                    用户状态：<cpsSelect v-model="queryParams.customerState" size="small" skey="yhzt"
                                        style="width:180px;" isDisabled="all">
                                    </cpsSelect>&nbsp;
                                    用水性质：<cpsSelect v-model="queryParams.priceCode" size="small" skey="sj"
                                        style="width:180px;">
                                    </cpsSelect>&nbsp;
                                    表具类型：<cpsSelect v-model="queryParams.priceCode" size="small" skey="sblb"
                                        style="width:180px;">
                                    </cpsSelect>&nbsp;
                                </div>
                                <div style="margin:5px;">
                                    关&nbsp;键&nbsp;字&nbsp;：<el-input v-model="queryParams.searchText" size="small"
                                        style="width:440px;" placeholder="输入编号、姓名、地址、电话" clearable />&nbsp;
                                </div>
                                <div style="margin:5px;">
                                    建档日期：<el-date-picker v-model="dprCreatedDate" type="daterange" align="right"
                                        unlink-panels range-separator="至" start-placeholder="建档开始日期"
                                        end-placeholder="建档结束日期" value-format="yyyy-MM-dd" :picker-options="pickerOptions"
                                        size="small" style="width:438px;" @change="() => {
                                            if (this.dprCreatedDate && this.dprCreatedDate.length > 0) {
                                                this.queryParams.createdDatetime_start = this.dprCreatedDate[0];
                                                this.queryParams.createdDatetime_end = this.dprCreatedDate[1];
                                            } else {
                                                this.queryParams.createdDatetime_start = undefined;
                                                this.queryParams.createdDatetime_end = undefined;
                                            }
                                        }">
                                    </el-date-picker>
                                </div>
                            </div>
                        </el-col>
                        <!-- 右侧 -->
                        <el-col :span="8" style="border-left:1px solid whitesmoke;">
                            <el-tag>分类匹配</el-tag>
                            <div class="filterDiv">
                                <div style="margin:5px;">
                                    用户编号：<el-input v-model="queryParams.searchText" placeholder="请输入" size="small"
                                        style="width:200px;"></el-input>
                                </div>
                                <div style="margin:5px;">
                                    用户姓名：<el-input v-model="queryParams.searchText" placeholder="请输入" size="small"
                                        style="width:200px;"></el-input>
                                </div>
                                <div style="margin:5px;">
                                    用户地址：<el-input v-model="queryParams.searchText" placeholder="请输入" size="small"
                                        style="width:200px;"></el-input>
                                </div>
                                <div style="margin:5px;">
                                    联系电话：<el-input v-model="queryParams.searchText" placeholder="请输入" size="small"
                                        style="width:200px;"></el-input>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </el-main>
                <el-footer style="text-align:right;padding-top:8px;">
                    <el-button type="primary" icon="el-icon-check" @click="() => {
                        this.pageInfo.current = 1
                        this.bindList(true)
                    }">确 定</el-button>
                    <el-button icon="el-icon-close" @click="$refs.drawer.closeDrawer()">关 闭</el-button>
                </el-footer>
            </el-container>
        </el-drawer>
    </div>
</template>
  
<script>
import '@/views/mis/common/assets/styles/misStyle.scss'
import { DateHelper, FileHelper } from '@/views/mis/common/assets/scripts/utils.js'
import { Customer } from '@/views/mis/common/api/customerManagement.js'
import tfTable 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'
import tfDetail from './customer-form.vue'
export default {
    components: { cpsSelect, cpsCompany, tfTable, tfDetail },
    props: ['data'],
    data() {
        return {
            /* ----- 主页 ----- */
            cbpqRefresh: false,
            cbbRefresh: false,
            queryParams: {
                companyBranch: undefined,//公司
                mrArea: undefined,//片区
                mrBook: undefined,//抄表本
                searchText: undefined,//模糊查询

                //以下为高级查询附加参数
                customerState: undefined,//用户状态
                priceCode: undefined,//用水性质
                meterType: undefined,//水表类型
                createdDatetime_start: undefined,//开始建档日期
                createdDatetime_end: undefined//结束建档日期
            },
            disabledModify: true,
            disabledDelete: true,
            operationType: '',//编辑类型，'save','saveUpdate'
            pageInfo: { current: 1, size: 20, tableTotal: 1, 'orders[0].asc': 'true', 'orders[0].column': 'customerNo' }, // 分页数据
            columns: [
                {
                    label: '所属片区',
                    prop: 'mrAreaName',
                    align: 'left'
                },
                {
                    label: '所属表册',
                    prop: 'mrBookName',
                    align: 'left'
                },
                {
                    label: '用户编号',
                    prop: 'customerNo',
                    align: 'center',
                    sortable: true
                },
                {
                    label: '用户姓名',
                    prop: 'customerName',
                    align: 'center'
                },
                {
                    label: '用户地址',
                    prop: 'customerAddress',
                    align: 'left',
                    sortable: true
                },
                {
                    label: '联系电话',
                    prop: 'customerPhone',
                    align: 'center'
                },
                {
                    label: '申请日期',
                    prop: 'applyDatetime',
                    align: 'center',
                    sortable: true,
                    formatter: function (row, column, value, index) {
                        return DateHelper.formatterDate(value);
                    }
                },
                {
                    label: '建档日期',
                    prop: 'createdDatetime',
                    align: 'center',
                    sortable: true,
                    formatter: function (row, column, value, index) {
                        return DateHelper.formatterDate(value);
                    }
                },
                {
                    label: '建档人员',
                    prop: 'createdOname',
                    align: 'center'
                },
                {
                    label: '用户状态',
                    prop: 'customerState',
                    align: 'center',
                    formatter: function (row, column, value, index) {
                        if (value == '作废用户') {
                            // return Object.assign({}, { 'background-color': '#CDCDCD', 'text-decoration': 'line-through' }, definedParams)
                            return '<div><span class="el-tag el-tag--danger el-tag--light">' + value + '</span></div>'
                        }
                        return value;
                    }
                }
            ],
            dataList: [], // 表格数据
            selectionsData: [], // 表格选中数据
            selectedRow: {}, //表格选中行

            /* ----- 详情页 ----- */
            dialogTitle: '新增',
            editState: false,//编辑状态，true：禁用；false：启用
            dialogVisible: false,
            detailData: {
                daCustomer: {
                    companyBranch: [],
                    mrArea: undefined,
                    mrBook: undefined,
                    customerNo: undefined,
                    customerName: undefined,
                    customerAddress: undefined,
                    customerPhone: undefined,
                    customerState: undefined,
                    certType: undefined,
                    certNo: undefined,
                    applyDatetime: undefined,
                    population: undefined,
                    yearCumQuantity: undefined,//年度累计量
                    month_cum_quantity: undefined,//月累积量
                    createdDatetime: undefined,
                    activateState: undefined,
                    activateDatetime: undefined,
                    payMode: undefined,
                    contractState: undefined,
                    contractDatetime: undefined,
                    contractNo: undefined,
                    homePhone: undefined,
                    email: undefined,
                    customerNameShort: undefined,
                    sex: undefined,
                    customerType: undefined,
                    regionCode: undefined,
                    remark: undefined,
                    createdSerialNo: undefined,
                    operatorCode: undefined,
                    operatorName: undefined,
                    operatorDatetime: undefined,
                    createdOcode: undefined,
                    createdOname: undefined
                },
                daMeter: {
                    meterState: undefined,
                    mrFrequency: undefined,
                    priceCode: undefined,
                    meterType: undefined,
                    meterFactory: undefined,
                    meterFactoryDatetime: undefined,
                    meterModel: undefined,
                    meterCaliber: undefined,
                    meterNo: undefined,
                    meterRange: undefined,
                    meterPosition: undefined,
                    meterBaseReading: undefined,
                    meterCardNo: undefined,
                    meterCardId: undefined,
                    sewageFeeFlag: undefined,
                    garbageFeeFlag: undefined,
                    garbageFeeMode: undefined,
                    garbageFeePrice: undefined,
                    icState: undefined,
                    icActivateDatetime: undefined,
                    icId: undefined
                }
            },

            /* ----- 高级搜索 ----- */
            drawerDialog: false,
            dprCreatedDate: [],
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            }
        }
    },
    watch: {
        selectedRow(value) {
            this.disabledModify = value == null;
            this.disabledDelete = value == null;
        },
        dialogVisible(newVal, oldVal) {
            if (!newVal) {
                this.resetDetailData()
            }
        }
    },
    created() {

    },
    mounted() {
        this.bindList();
    },
    methods: {
        /* ----- 方法 ----- */
        /**
         * @description 绑定列表
         * @param {Boolean} 是否高级查询（true：是，false：否），默认false
         */
        bindList(sfgjcx = false) {
            // 追加分页参数
            let params = Object.assign({}, this.pageInfo, this.queryParams);
            if (!sfgjcx) {
                params.customerState = undefined;
                params.priceCode = undefined;
                params.meterType = undefined;
                params.createdDatetime_start = undefined;
                params.createdDatetime_end = undefined;
            }

            this.dataList = []
            this.selectedRow = null;
            Customer.query(params).then((res) => {
                if (res.code !== 1) {
                    this.$message.error('查询失败!')
                    return
                }
                // 数据总数
                this.pageInfo.tableTotal = res.result.total
                this.dataList = res.result.records
            }).catch((ex) => {
                this.$message.error("查询失败！");
            }).finally(() => {
            });
        },
        resetDetailData() {
            // 表单数据
            for (var key in this.detailData) {
                if (this.detailData[key].constructor === Object) {
                    for (var key2 in this.detailData[key]) {
                        this.detailData[key][key2] = undefined;
                    }
                } else {
                    this.detailData[key] = undefined
                }
            }
        },
        save() {
            let params = Object.assign({}, this.detailData);
            params.daCustomer.operatorCode = this.$store.state.user.username;
            params.daCustomer.operatorName = this.$store.state.user.realName;
            params.daCustomer.operatorDatetime = DateHelper.getNowFormatDate(true);
            params.daCustomer.createdOcode = params.daCustomer.operatorCode;
            params.daCustomer.createdOname = params.daCustomer.operatorName;
            // switch处理
            if (params.daCustomer.activateState == '0') params.daCustomer.activateDatetime = undefined;
            if (params.daCustomer.contractState == '0') {
                params.daCustomer.contractNo = '';
                params.daCustomer.contractDatetime = undefined;
            }
            if (params.daMeter.garbageFeeFlag == '0') {
                params.daMeter.garbageFeeMode = '';
                params.daMeter.garbageFeePrice = 0.00;
            }
            if (params.daMeter.icState == '0') {
                params.daMeter.icId = undefined;
                params.daMeter.icActivateDatetime = undefined;
            }
            // console.log(JSON.stringify(params));
            Customer.cmdCustomerAndMeter(params, { operationType: this.operationType }).then(res => {
                if (res.code == 1) {
                    this.bindList();
                    this.$message.success("保存成功!");
                    this.dialogVisible = false;
                }
            });
        },
        delete() {
            let params = {
                daCustomer: {
                    customerNo: this.selectionsData[0].customerNo,
                    customerState: '4'
                },
                daMeter: {
                    meterCardId: this.selectionsData[0].meterCardId
                }
            }

            console.log(JSON.stringify(params));
            Customer.cmdCustomerAndMeter(params, { operationType: this.operationType }).then(res => {
                if (res.code == 1) {
                    this.bindList();
                    this.$message.success("作废成功!");
                }
            })
        },
        async export() {
            // 追加分页参数
            let params = Object.assign({}, this.queryParams);
            await Customer.exportFile(params).then((res) => {
                FileHelper.exportExcel(res, '用户档案信息.xlsx');
            }).catch((ex) => {
                this.$message.error("导出失败！");
            }).finally(() => {
            });
        },
        /**
         * @description 显示详情
         */
        showDetail(data) {
            this.selectedRow = data;
            var cbkh = '', cbkhList = this.selectedRow.cbkhList.split(',')
            if (cbkhList.length == 1) {
                cbkh = cbkhList[0]
            } else if (cbkhList.length > 1) {
                cbkh = cbkhList[0]
                this.$message('该用户存在多表，请在“水表档案管理”中进行多表查看。');
            }

            //查询用户
            Customer.queryCustomer(this.selectedRow.customerNo).then((res) => {
                if (res.code == 1) {
                    this.detailData.daCustomer = res.result
                    this.detailData.daCustomer.mrArea = this.detailData.daCustomer.mrArea.toString();
                    this.detailData.daCustomer.mrBook = this.detailData.daCustomer.mrBook.toString();

                    //查询表具
                    Customer.queryMeter(this.selectedRow.customerNo, this.selectedRow.customerNo + cbkh).then((res) => {
                        if (res.code == 1) {
                            this.detailData.daMeter = res.result
                        }

                        this.operationType = 'saveUpdate';
                        this.dialogTitle = "查看";
                        this.editState = true;
                        this.dialogVisible = true;// 显示弹窗

                    }).catch((ex) => {
                        this.$message.error("查询表具信息失败！");
                    });
                }

            }).catch((ex) => {
                this.$message.error("查询用户信息失败！");
            });
        },

        /* ----- dom事件 ----- */
        changeGs(value) {
            this.queryParams.companyBranch = value;
            this.cbpqRefresh = !this.cbpqRefresh;
            this.queryParams.mrArea = '';
            this.changeCbpq(this.queryParams.mrArea);
        },
        changeCbpq(value) {
            this.cbbRefresh = !this.cbbRefresh;
            this.queryParams.mrBook = '';
        },
        /**
         * @description 查询
         */
        clickQuery() {
            this.pageInfo.current = 1
            this.bindList()
        },
        /**
         * @description 添加
         */
        clickAdd() {
            this.detailData.daCustomer.certType = "1";
            this.detailData.daCustomer.population = 3;
            this.detailData.daCustomer.yearCumQuantity = 0;
            this.detailData.daMeter.meterState = "1";
            this.detailData.daMeter.mrFrequency = "1";
            this.detailData.daMeter.meterBaseReading = 0;
            this.detailData.daMeter.garbageFeePrice = 0.00;
            this.detailData.daCustomer.customerType = '1';
            this.detailData.daCustomer.operatorName = this.$store.state.user.realName
            this.detailData.daCustomer.operatorDatetime = DateHelper.getNowFormatDate(true);

            this.operationType = 'save';
            this.dialogTitle = "添加";
            this.editState = false;
            this.dialogVisible = true;// 显示弹窗
        },
        /**
         * @description 修改
         */
        clickModify() {
            //this.selectedRow = this.selectionsData[0];
            if (this.selectedRow.customerState == '作废用户') {
                this.$message({
                    message: '作废用户不能修改！',
                    type: 'warning'
                });
                return;
            }

            var cbkhList = this.selectedRow.cbkhList.split(',')
            if (cbkhList.length == 1) {
                //查询用户
                Customer.queryCustomer(this.selectedRow.customerNo).then((res) => {
                    if (res.code == 1) {
                        this.detailData.daCustomer = res.result
                        this.detailData.daCustomer.mrArea = this.detailData.daCustomer.mrArea.toString();
                        this.detailData.daCustomer.mrBook = this.detailData.daCustomer.mrBook.toString();

                        //查询表具
                        Customer.queryMeter(this.selectedRow.customerNo, this.selectedRow.customerNo + cbkhList[0]).then((res) => {
                            if (res.code == 1) {
                                this.detailData.daMeter = res.result

                                this.operationType = 'saveUpdate';
                                this.dialogTitle = "修改";
                                this.editState = false;
                                this.dialogVisible = true;// 显示弹窗
                            }

                        }).catch((ex) => {
                            this.$message.error("查询表具信息失败！");
                        });
                    }

                }).catch((ex) => {
                    this.$message.error("查询用户信息失败！");
                });
            } else if (cbkhList.length > 1) {
                this.$message('该用户存在多表，请在“水表档案管理”中进行修改。');
            }
        },
        /**
         * @description 删除
         */
        clickDelete() {
            this.$confirm('确定作废吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.operationType = 'saveUpdate'
                this.delete();
            })
        },
        clickExport() {
            this.export();
        },
        clickCancel() {
            this.dialogVisible = false // 关闭弹窗
        },
        clickSave() {
            let flag = this.$refs.dForm.validate();
            if (flag) {
                // if (this.operationType) this.add();// 新增
                // else this.modify();// 修改
                this.save();
            }
        },

        /* ----- 组件事件 ----- */
        /**
         * @description 改变当前页
         */
        handleCurrentChange(current) {
            this.pageInfo.current = current
            this.bindList()
        },
        /**
         * @description 分页每页条数
         */
        handleSizeChange(size) {
            this.pageInfo.size = size
            this.bindList()
        },
        /**
         * @description 选择改变
         */
        handleSelectionChange(rows) {
            this.selectionsData = rows
        },
        //排序事件
        onCustomerSortChange(arrOrder) {
            this.pageInfo['orders[0].asc'] = arrOrder[0];
            this.pageInfo['orders[0].column'] = arrOrder[1];
            this.bindList();
        },
        handleRowClick(row) {
            this.selectedRow = row
        },

        /* ----- 高级搜索 ----- */
        advancedQuery(e) {
            this.drawerDialog = true;
        }
    }
}
</script>
<style lang="scss" scoped></style>