xmf_saas_web/src/views/Payment/PayPlan/addBillDrawer.vue

<template>
    <a-drawer title="添加手动生成账单" :width="820" :visible="isVisibleDrawer" :body-style="{ paddingBottom: '80px' }" @close="onClose">
        <div class="drawer-content">
            <div style="display: flex">
                <div class="inner-content">
                    <a-tree v-model="checkedKeys" @check="onCheck"
                    :selectable="false" :tree-data="roomTreeData" checkable :replace-fields="replaceFields"></a-tree>
                </div>
                <div class="inner-content">
                    <a-table :data-source="tableData" :columns="columns" :pagination="false"
                        :row-selection="{
                            selectedRowKeys: this.form.chargesIds,
                            onChange: selectionChoosed,
                        }"
                        :row-key="
                            (record, index) => {
                            return record.id;
                            }
                        ">
                        <template slot="title">
                            <span style="font-weight: 600">收费标准</span>
                        </template>
                    </a-table>
                    <a-form-model title="基础信息">
                        <a-row>
                            <a-col :span="24">
                                <a-form-model-item label="账单名称">
                                    <a-input v-model="form.name"></a-input>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="24">
                                <a-form-model-item label="选择时间">
                                    <a-range-picker v-model="selTime"  @change="timeChange" value-format="YYYY-MM-DD HH:mm:ss"></a-range-picker>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                    </a-form-model>
                </div>
            </div>
        </div>
        <div class="drawer-footer">
            <a-button :style="{ marginRight: '8px' }" @click="onClose">
                关闭
            </a-button>
            <a-button type="primary" @click="onSubmit"> 提交 </a-button>
        </div>
    </a-drawer>
</template>

<script>
import {findEstateCascade} from "@/api/basic/estate"
import { chargesList } from "@/api/payment/chargeStandardManage";
import { manuallyGenerateBills } from "@/api/payment/payPlan"
function deleteIds(lists) {
	// 楼栋id和房屋id有重复，导致数形控件选择不可用，把除房屋id外的全改为undefined
	lists.forEach((list) => {
		if (list.childList) {
			list.id = undefined;
			deleteIds(list.childList);
		} else {
			return;
		}
	});
}
export default {
    name: 'addBillDrawer',
    props: {
		visible: Boolean,
	},
    watch: {
		visible: {
			handler(newValue) {
				this.isVisibleDrawer = newValue;
			},
			immediate: true,
		},
	},
    mounted() {
        this.getApi()  
    },
    data() {
        return {
            form: {
                estateIds: [],
                chargesIds: [],
                name: '',
                billDateStart: '',
                billDateEnd: '',
            },
            isVisibleDrawer: false,
            roomTreeData: [],
            replaceFields: {
                children: 'childList',
                title: 'name',
                key: 'id'
            },
            checkedKeys: [],
            //收费标准
            tableData: [],
            columns: [
                {title: "费用名称", dataIndex: "name"},
                {title: "计费方式", dataIndex: "billingType"},
                {title: "计量方式", dataIndex: "calculateType"},
                {title: "计量单价", dataIndex: "calculateUnit",
                customRender: function (calculateUnit) {
                    return (calculateUnit*1).toFixed(2)
                },
                },
                {title: "备注", dataIndex: "remarks"},
            ],
            selTime: []
        }
    },
    methods: {
        getApi() {
            findEstateCascade().then(res => {
                let data = res.data;
                // data.forEach(ele => {
                //     ele.childList.forEach(el => {
                //         el.checkable = false
                //     });
                //     ele.checkable = false
                // })
                this.roomTreeData = data
                deleteIds(this.roomTreeData);
            });
            chargesList({pageNum: 1,size: 1000}).then(res => {
                let data = res.data.rows;
                this.tableData = data;
            })
        },
        onClose() {
			this.$emit("onClose");
		},
        onCheck(checkedKeys) {
            let ids = [];
			for (let id of checkedKeys) {
				if (typeof id == "number") {
					ids.push(id);
				}
			}
            this.form.estateIds = ids;
        },
        //收费标准
        selectionChoosed(data) {
            this.form.chargesIds = data;
        },
        timeChange(val) {
            this.form.billDateStart = this.selTime[0];
            this.form.billDateEnd = this.selTime[1];
        },
        success(){
			this.$emit('success')
		},
        addClose() {
            this.onClose();
            this.form = {
                estateIds: [],
                chargesIds: [],
                name: '',
                billDateStart: '',
                billDateEnd: '',
            };
            this.checkedKeys = [];
            this.selTime = []
        },
        onSubmit() {
            manuallyGenerateBills(this.form).then(res => {
                if(res.code === 200){
					this.$message.success(res.msg)
                    this.addClose();
					this.success()
				} else {
					this.$message.error(res.msg)
				}
            })
        }
    }
}
</script>

<style lang="less">
.inner-content {
    padding :8px 8px 8px 16px
}
</style>