item-management-web/src/views/finance/fine.vue

<template>
    <div class="app-container organization-index">
        <div class="title-container">
            <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card" style="margin-top: 10px;">
            <el-tab-pane label="资产业务" name="ASSET_BUSINESS">
                <y-page-list-layout :page-list="pageData" :page-para="queryDTO" :get-page-list="page">
                    <template slot="left">
                        <el-input v-model="queryDTO.keyWord" placeholder="关键字(项⽬编号或产品号)" clearable style="width: 300px;float: left;"></el-input>
                        <el-input v-model="queryDTO.invoiceNo" placeholder="发票号" clearable style="margin-left: 20px;width: 150px;float: left;"></el-input>
                        <el-input v-model="queryDTO.clientManagerName" placeholder="客户经理" clearable style="margin-left: 20px;width: 150px;float: left;"></el-input>
                        <el-select v-model="queryDTO.status" filterable placeholder="是否确认" clearable style="margin-left: 20px;width: 150px;float: left;">
                            <el-option label="已确认" value="true"></el-option>
                            <el-option label="未确认" value="false"></el-option>
                        </el-select>
                        <el-date-picker
                            v-model="findDate"
                            type="daterange"
                            align="center"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="罚款⽇期（开始）"
                            end-placeholder="罚款⽇期（结束）"
                            :picker-options="pickerOptions"
                            value-format="yyyy-MM-dd"
                            style="margin-left: 20px;width: 300px;float: left;"
                        ></el-date-picker>
                        <el-button class="filter-item" style="margin-left:20px;float: left;" type="primary" @click="page()" round>搜索</el-button>
                        <el-button class="filter-item" style="float: left;" round type="success" @click="resetSearch()">重置</el-button>
                        <el-button class="filter-item" style="float: left;" round type="warning" @click="fineListExport()">导出</el-button>
                    </template>
                    <parentTable ref="table" v-loading="listLoading" :data="pageData.records" slot="table" style="width: 100%;">
                        <el-table-column label="项⽬编号" align="center" width="150">
                            <template slot-scope="{row}">
                                <span>{{ row.orderId }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="项⽬名称" align="center" width="250">
                            <template slot-scope="{row}">
                                <span>{{ row.orderName}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="产品号" align="center" width="250">
                            <template slot-scope="{row}">
                                <span>{{ row.productionNo}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="产品类型" align="center" width="250">
                            <template slot-scope="{row}">
                                <span>{{ row.productionType }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="发票号" align="center" width="150">
                            <template slot-scope="{row}">
                                <span>{{ row.invoiceNo }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="应收⾦额" align="center" width="150">
                            <template slot-scope="{row}">
                                <span>{{ row.shouldAmount }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="标准收费" align="center" width="150">
                            <template slot-scope="{row}">
                                <span>{{ row.standardAmount }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="客户经理" align="center" width="150">
                            <template slot-scope="{row}">
                                <span>{{ row.clientManagerName}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="超期天数" align="center" width="150">
                            <template slot-scope="{row}">
                                <span>{{ row.overdueDay}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="客户名称" align="center" width="150">
                            <template slot-scope="{row}">
                                <span>{{ row.customerName }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="业务来源" align="center" width="150">
                            <template slot-scope="{row}">
                                <span>{{ row.customerSubName }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="委托方" align="center" width="150">
                            <template slot-scope="{row}">
                                <span>{{ row.bailor}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="罚款⾦额" align="center" width="150">
                            <template slot-scope="{row}">
                                <span>{{ row.fineAmount }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="实际罚款⾦额" align="center" width="150">
                            <template slot-scope="{row}">
                                <span>{{ row.realFineAmount }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="是否确认" align="center" width="150">
                            <template slot-scope="{row}">
                                <span>{{ row.status ? '已确认' : '未确认' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="罚款⽇期" align="center" width="150">
                            <template slot-scope="{row}">
                                <span>{{ row.punishDate }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="客户经理情况说明" align="center" width="150">
                            <template slot-scope="{row}">
                                <span>{{ row.explain }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center" width="160" fixed="right">
                            <template slot-scope="{row}">
                                <PermissionButton menu-code="_views_finance_fine_explain" class-name="filter-item" name type="text" @click="openExplain(row)" />
                                <PermissionButton menu-code="_views_finance_fine_confirm" class-name="filter-item" name type="text" @click="confirmFineAmount(row.id)" />
                                <PermissionButton menu-code="_views_finance_fine_edit_amount" class-name="filter-item" name type="text" @click="openEditFineAmount(row)" />
                            </template>
                        </el-table-column>
                    </parentTable>
                </y-page-list-layout>
            </el-tab-pane>
            <el-tab-pane label="大中型业务" name="MAJOR_BUSINESS">
                <y-page-list-layout :page-list="pageData" :page-para="queryDTO" :get-page-list="page">
                    <template slot="left">
                        <el-input v-model="queryDTO.keyWord" placeholder="关键字(项⽬编号或产品号)" clearable style="width: 300px;float: left;"></el-input>
                        <el-input v-model="queryDTO.invoiceNo" placeholder="发票号" clearable style="margin-left: 20px;width: 150px;float: left;"></el-input>
                        <el-input v-model="queryDTO.clientManagerName" placeholder="客户经理" clearable style="margin-left: 20px;width: 150px;float: left;"></el-input>
                        <el-select v-model="queryDTO.status" filterable placeholder="是否确认" clearable style="margin-left: 20px;width: 150px;float: left;">
                            <el-option label="已确认" value="true"></el-option>
                            <el-option label="未确认" value="false"></el-option>
                        </el-select>
                        <el-date-picker
                            v-model="findDate"
                            type="daterange"
                            align="center"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="罚款⽇期（开始）"
                            end-placeholder="罚款⽇期（结束）"
                            :picker-options="pickerOptions"
                            value-format="yyyy-MM-dd"
                            style="margin-left: 20px;width: 300px;float: left;"
                        ></el-date-picker>
                        <el-button class="filter-item" style="margin-left:20px;float: left;" type="primary" @click="page()" round>搜索</el-button>
                        <el-button class="filter-item" style="float: left;" round type="success" @click="resetSearch()">重置</el-button>
                        <el-button class="filter-item" style="float: left;" round type="warning" @click="fineListExport()">导出</el-button>
                    </template>
                    <parentTable ref="table" v-loading="listLoading" :data="pageData.records" slot="table" style="width: 100%;">
                        <el-table-column label="项⽬编号" align="center" width="150">
                            <template slot-scope="{row}">
                                <span>{{ row.orderId }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="项⽬名称" align="center" width="250">
                            <template slot-scope="{row}">
                                <span>{{ row.orderName}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="产品号" align="center" width="250">
                            <template slot-scope="{row}">
                                <span>{{ row.productionNo}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="产品类型" align="center" width="250">
                            <template slot-scope="{row}">
                                <span>{{ row.productionType }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="发票号" align="center" width="150">
                            <template slot-scope="{row}">
                                <span>{{ row.invoiceNo }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="应收⾦额" align="center" width="150">
                            <template slot-scope="{row}">
                                <span>{{ row.shouldAmount }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="标准收费" align="center" width="150">
                            <template slot-scope="{row}">
                                <span>{{ row.standardAmount }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="客户经理" align="center" width="150">
                            <template slot-scope="{row}">
                                <span>{{ row.clientManagerName}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="超期天数" align="center" width="150">
                            <template slot-scope="{row}">
                                <span>{{ row.overdueDay}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="客户名称" align="center" width="150">
                            <template slot-scope="{row}">
                                <span>{{ row.customerName }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="业务来源" align="center" width="150">
                            <template slot-scope="{row}">
                                <span>{{ row.customerSubName }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="委托方" align="center" width="150">
                            <template slot-scope="{row}">
                                <span>{{ row.bailor}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="罚款⾦额" align="center" width="150">
                            <template slot-scope="{row}">
                                <span>{{ row.fineAmount }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="实际罚款⾦额" align="center" width="150">
                            <template slot-scope="{row}">
                                <span>{{ row.realFineAmount }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="是否确认" align="center" width="150">
                            <template slot-scope="{row}">
                                <span>{{ row.status ? '已确认' : '未确认' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="罚款⽇期" align="center" width="150">
                            <template slot-scope="{row}">
                                <span>{{ row.punishDate }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="客户经理情况说明" align="center" width="150">
                            <template slot-scope="{row}">
                                <span>{{ row.explain }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center" width="160" fixed="right">
                            <template slot-scope="{row}">
                                <PermissionButton menu-code="_views_finance_fine_explain" class-name="filter-item" name type="text" @click="openExplain(row)" />
                                <PermissionButton menu-code="_views_finance_fine_confirm" class-name="filter-item" name type="text" @click="confirmFineAmount(row.id)" />
                                <PermissionButton menu-code="_views_finance_fine_edit_amount" class-name="filter-item" name type="text" @click="openEditFineAmount(row)" />
                            </template>
                        </el-table-column>
                    </parentTable>
                </y-page-list-layout>
            </el-tab-pane>
            <el-tab-pane label="个贷业务" name="PERSONAL_BUSINESS">
                <y-page-list-layout :page-list="pageData" :page-para="queryDTO" :get-page-list="page">
                    <template slot="left">
                        <el-input v-model="queryDTO.keyWord" placeholder="关键字(项⽬编号)" clearable style="width: 300px;float: left;"></el-input>
                        <el-input v-model="queryDTO.invoiceNo" placeholder="发票号" clearable style="margin-left: 20px;width: 150px;float: left;"></el-input>
                        <el-input v-model="queryDTO.clientManagerName" placeholder="客户经理" clearable style="margin-left: 20px;width: 150px;float: left;"></el-input>
                        <el-select v-model="queryDTO.status" filterable placeholder="是否确认" clearable style="margin-left: 20px;width: 150px;float: left;">
                            <el-option label="已确认" value="true"></el-option>
                            <el-option label="未确认" value="false"></el-option>
                        </el-select>
                        <el-date-picker
                            v-model="findDate"
                            type="daterange"
                            align="center"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="罚款⽇期（开始）"
                            end-placeholder="罚款⽇期（结束）"
                            :picker-options="pickerOptions"
                            value-format="yyyy-MM-dd"
                            style="margin-left: 20px;width: 300px;float: left;"
                        ></el-date-picker>
                        <el-button class="filter-item" style="margin-left:20px;float: left;" type="primary" @click="page()" round>搜索</el-button>
                        <el-button class="filter-item" style="float: left;" round type="success" @click="resetSearch()">重置</el-button>
                        <el-button class="filter-item" style="float: left;" round type="warning" @click="fineListExport()">导出</el-button>
                    </template>
                    <parentTable ref="table" v-loading="listLoading" :data="pageData.records" slot="table" style="width: 100%;">
                        <el-table-column label="项⽬编号" align="center" width="150">
                            <template slot-scope="{row}">
                                <span>{{ row.orderId }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="项⽬名称" align="center" width="250">
                            <template slot-scope="{row}">
                                <span>{{ row.orderName}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="产品类型" align="center" width="250">
                            <template slot-scope="{row}">
                                <span>{{ row.productionType }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="发票号" align="center" width="150">
                            <template slot-scope="{row}">
                                <span>{{ row.invoiceNo }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="应收⾦额" align="center" width="150">
                            <template slot-scope="{row}">
                                <span>{{ row.shouldAmount }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="客户经理" align="center" width="150">
                            <template slot-scope="{row}">
                                <span>{{ row.clientManagerName}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="超期天数" align="center" width="150">
                            <template slot-scope="{row}">
                                <span>{{ row.overdueDay}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="客户名称" align="center" width="150">
                            <template slot-scope="{row}">
                                <span>{{ row.customerName }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="业务来源" align="center" width="150">
                            <template slot-scope="{row}">
                                <span>{{ row.customerSubName }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="委托方" align="center" width="150">
                            <template slot-scope="{row}">
                                <span>{{ row.bailor}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="罚款⾦额" align="center" width="150">
                            <template slot-scope="{row}">
                                <span>{{ row.fineAmount }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="实际罚款⾦额" align="center" width="150">
                            <template slot-scope="{row}">
                                <span>{{ row.realFineAmount }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="是否确认" align="center" width="150">
                            <template slot-scope="{row}">
                                <span>{{ row.status ? '已确认' : '未确认' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="罚款⽇期" align="center" width="150">
                            <template slot-scope="{row}">
                                <span>{{ row.punishDate }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="客户经理情况说明" align="center" width="150">
                            <template slot-scope="{row}">
                                <span>{{ row.explain }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center" width="160" fixed="right">
                            <template slot-scope="{row}">
                                <PermissionButton menu-code="_views_finance_fine_explain" class-name="filter-item" name type="text" @click="openExplain(row)" />
                                <PermissionButton menu-code="_views_finance_fine_confirm" class-name="filter-item" name type="text" @click="confirmFineAmount(row.id)" />
                                <PermissionButton menu-code="_views_finance_fine_edit_amount" class-name="filter-item" name type="text" @click="openEditFineAmount(row)" />
                            </template>
                        </el-table-column>
                    </parentTable>
                </y-page-list-layout>
            </el-tab-pane>
        </el-tabs>
        <el-dialog title="情况说明" :visible.sync="explainVisible" width="40%">
            <el-form :model="updateFineForm">
                <el-form-item label="情况说明：">
                    <el-input v-model="updateFineForm.explain" type="textarea" :rows="5"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="explainVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateFine(updateFineForm)">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="修改罚款金额" :visible.sync="editFineAmountVisible" width="40%">
            <el-form :model="updateFineForm">
                <el-form-item label="情况说明：">
                    <el-input v-model="updateFineForm.explain" type="textarea" :rows="5" disabled></el-input>
                </el-form-item>
                <el-form-item label="罚款金额：">
                    <el-input v-model="updateFineForm.fineAmount" type="number"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editFineAmountVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateFine(updateFineForm)">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import Breadcrumb from '@/components/Breadcrumb';
import YPageListLayout from '@/components/YPageListLayout';

export default {
    name: 'fine',
    components: {
        Breadcrumb,
        YPageListLayout,
    },
    data() {
        return {
            activeName: 'ASSET_BUSINESS',
            listLoading: false,
            explainVisible: false,
            editFineAmountVisible: false,
            findDate: null,
            // 分页查询条件
            queryDTO: {
                page: 1,
                size: 10,
                businessType: 'ASSET_BUSINESS',
                keyWord: null,
                invoiceNo: null,
                clientManagerName: null,
                status: null,
                startPunishDate: null,
                endPunishDate: null,
            },
            pageData: { records: [] },
            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]);
                        },
                    },
                ],
            },
            updateFineForm: {
                id: null,
                explain: null,
                fineAmount: null,
            },
        };
    },
    created() {
        this.page();
    },
    methods: {
        handleClick() {
            this.queryDTO = {
                page: 1,
                size: 10,
                businessType: this.activeName,
                keyWord: null,
                invoiceNo: null,
                clientManagerName: null,
                status: null,
                startPunishDate: null,
                endPunishDate: null,
            };
            this.page();
        },
        // 重置条件
        resetSearch() {
            this.findDate = null;
            this.queryDTO = {
                page: 1,
                size: 10,
                businessType: this.activeName,
                keyWord: null,
                invoiceNo: null,
                clientManagerName: null,
                status: null,
                startPunishDate: null,
                endPunishDate: null,
            };
            this.page();
        },
        // 查询罚款记录
        page() {
            this.listLoading = true;
            if (this.findDate) {
                this.queryDTO.startPunishDate = this.findDate[0] + ' 00:00:00';
                this.queryDTO.endPunishDate = this.findDate[1] + ' 23:59:59';
            }
            this.$api.financeFine.page(this.queryDTO).then((res) => {
                this.pageData = res.data;
                this.listLoading = false;
            });
        },
        fineListExport() {
            this.$utils.exportUtil('/financeFine/export', this.queryDTO, '导出');
        },
        // 打开情况说明dialog
        openExplain(row) {
            this.explainVisible = true;
            this.updateFineForm.id = row.id;
            this.updateFineForm.explain = row.explain;
        },
        // 打开修改罚款金额dialog
        openEditFineAmount(row) {
            this.editFineAmountVisible = true;
            this.updateFineForm.id = row.id;
            this.updateFineForm.explain = row.explain;
            this.updateFineForm.fineAmount = row.fineAmount;
        },
        // 更新罚款记录
        updateFine(financeFine) {
            this.$api.financeFine.update(financeFine).then((res) => {
                if (res.code === 200 && res.data) {
                    this.$notify({
                        title: '成功',
                        message: '请求成功！',
                        type: 'success',
                        duration: 3000,
                    });
                    // 判断开的哪一个dialog并关闭
                    if (this.explainVisible) {
                        this.explainVisible = false;
                    }
                    if (this.editFineAmountVisible) {
                        this.editFineAmountVisible = false;
                    }
                    this.page();
                }
            });
        },
        // 确认罚款金额
        confirmFineAmount(id) {
            this.$api.financeFine.confirm(id).then((res) => {
                if (res.code === 200 && res.data) {
                    this.$notify({
                        title: '成功',
                        message: '请求成功！',
                        type: 'success',
                        duration: 3000,
                    });
                    this.page();
                }
            });
        },
    },
};
</script>
<style scoped lang="scss"></style>