tire-platform-ui/src/views/client/detailsInfo.vue

<template>
    <div>
        <div class="borderless">
            <div class="customer-head">
                <div class="customer-back">
                    <el-button type="danger" style="border: none;background: none;color: red" icon="el-icon-arrow-left"
                        @click="backToList">返回列表
                    </el-button>
                </div>
                <div class="add-customer-btn">
                    <el-button type="primary" size="small" @click="editCustomer">
                        编辑
                    </el-button>
                </div>
            </div>
        </div>
        <containerTitle title="基础信息" style="margin-top: 60px"></containerTitle>
        <basic-container v-loading="loading">
            <span style="font-size: 18px;font-weight: 600;">{{ form.cname }}</span>
            <containerTitle title="应收款项" style="margin-top:5px"></containerTitle>
            <table border="0" width="100%" v-loading="loading">
                <tr>
                    <td class="stat-td">
                        <img src="@/assets/img/contractAmountBg.png" class="stat-img">
                        <div class="stat-tip">
                            <div class="money">
                                <span style="font-size:20px;">￥</span>
                                <avue-count-up :end="form.debitAmount"></avue-count-up>
                            </div>
                            <div class="title">合同金额</div>
                        </div>
                    </td>
                    <td class="stat-td">
                        <img src="@/assets/img/deliveredBg.png" class="stat-img">
                        <div class="stat-tip">
                            <div class="money">
                                <span style="font-size:20px;">￥</span>
                                <avue-count-up :end="form.deliveringAmount"></avue-count-up>
                            </div>
                            <div class="title">已送货</div>
                        </div>
                    </td>
                    <td class="stat-td">
                        <img src="@/assets/img/advanceCollectionBg.png" class="stat-img">
                        <div class="stat-tip">
                            <div class="money">
                                <span style="font-size:20px;">￥</span>
                                <avue-count-up :end="form.advancePayment"></avue-count-up>
                            </div>
                            <div class="title">预收款</div>
                        </div>
                    </td>
                    <td class="stat-td">
                        <img src="@/assets/img/uncollectedBg.png" class="stat-img">
                        <div class="stat-tip">
                            <div class="money">
                                <span style="font-size:20px;">￥</span>
                                <avue-count-up :end="form.balanceAmount"></avue-count-up>
                            </div>
                            <div class="title">未收款</div>
                        </div>
                    </td>
                    <td class="stat-td">
                        <img src="@/assets/img/receivableBg.png" class="stat-img">
                        <div class="stat-tip">
                            <div class="money">
                                <span style="font-size:20px;">￥</span>
                                <avue-count-up :end="form.settlmentAmount"></avue-count-up>
                            </div>
                            <div class="title">已收款</div>
                        </div>
                    </td>
                </tr>
            </table>
        </basic-container>
        <containerTitle title="明细信息"></containerTitle>
        <basic-container v-loading="loading">
            <el-tabs v-model="activeName">
                <el-tab-pane label="销售记录" name="first">
                    <avue-crud ref="crud" :option="sellOption" :data="sellList" :page.sync="page" :search.sync="search"
                        @search-change="searchChange" @current-change="currentChange" @size-change="sizeChange"
                        @refresh-change="refreshChange" @on-load="onLoad" :table-loading="loading"
                        @saveColumn="saveColumn" @resetColumn="resetColumn" :cell-style="cellStyle"
                        @search-criteria-switch="searchCriteriaSwitch">
                        <template slot="menuLeft">
                            <!-- <el-button type="primary" size="mini">新建销售单
                            </el-button> -->
                            <el-button size="mini">收款
                            </el-button>
                            <el-button size="mini">送货
                            </el-button>
                        </template>
                        <template slot="corpIdSearch">
                            <crop-select v-model="search.corpId" corpType="KH"></crop-select>
                        </template>
                        <template slot-scope="{ row, index }" slot="corpId">
                            <span style="color: #409EFF;cursor: pointer" @click.stop="editOpen(row, 2)">{{ row.corpsName
                            }}
                            </span>
                        </template>
                        <template slot="businesDateSearch">
                            <el-date-picker v-model="search.businesDate" type="daterange" start-placeholder="开始日期"
                                end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss"
                                :default-time="['00:00:00', '23:59:59']" :picker-options="pickerOptions">
                            </el-date-picker>
                        </template>
                    </avue-crud>
                </el-tab-pane>
                <el-tab-pane label="资金往来" name="second">
                    <avue-crud ref="crud2" :option="capitalOption" :data="capitalList" :page.sync="page2"
                        :search.sync="search2" @search-change="searchChange2" @current-change="currentChange2"
                        @size-change="sizeChange2" @refresh-change="refreshChange2" @on-load="onLoad2"
                        :table-loading="loading2" @saveColumn="saveColumn2" @resetColumn="resetColumn2"
                        :cell-style="cellStyle" @search-criteria-switch="searchCriteriaSwitch2">
                        <template slot="menuLeft">
                            <el-button size="mini">收款
                            </el-button>
                        </template>
                        <template slot="settlementDateSearch">
                            <el-date-picker v-model="search2.settlementDate" type="daterange" start-placeholder="开始日期"
                                end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss"
                                :default-time="['00:00:00', '23:59:59']" :picker-options="pickerOptions">
                            </el-date-picker>
                        </template>
                    </avue-crud>
                </el-tab-pane>
                <el-tab-pane label="客户信息" name="third">
                    <div style="display:flex;justify-content: flex-end;">
                        <el-button size="mini">禁用</el-button>
                        <el-button type="primary" size="mini">打印</el-button>
                    </div>
                    <el-row class="client_info">
                        <el-col :span="4">客户名称</el-col>
                        <el-col :span="4">{{ form.cname | nameFileter }}</el-col>
                        <el-col :span="4">期初欠款</el-col>
                        <el-col :span="4">{{ form.arrears | nameFileter }}</el-col>
                        <el-col :span="4">电话</el-col>
                        <el-col :span="4">{{ form.tel | nameFileter }}</el-col>
                    </el-row>
                    <el-row class="client_info">
                        <el-col :span="4">备用电话</el-col>
                        <el-col :span="4">{{ form.telephone | nameFileter }}</el-col>
                        <el-col :span="4">传真</el-col>
                        <el-col :span="4">{{ form.fax | nameFileter }}</el-col>
                        <el-col :span="4">邮箱</el-col>
                        <el-col :span="4">{{ form.mailbox | nameFileter }}</el-col>
                    </el-row>
                    <el-row class="client_info">
                        <el-col :span="4">备注</el-col>
                        <el-col :span="20">{{ form.remarks | nameFileter }}</el-col>
                    </el-row>
                    <el-row class="client_info" v-for="(item, index) in corpsAddrList" :key="index">
                        <el-col :span="2"><i class="el-icon-location"></i></el-col>
                        <el-col :span="4">送货地址</el-col>
                        <el-col :span="18">{{ item.detailedAddress }}</el-col>
                    </el-row>
                </el-tab-pane>
            </el-tabs>
        </basic-container>
    </div>
</template>
  
<script>
import { optionList, sellOption, capitalOption } from "./js/optionList";
import { getList, getCorpsAll, gainUser, getCorpType, getAllgoods } from "@/api/basicData/salesOrder";
import { getDetails,getSellList } from "@/api/basicData/client";
import { validatenull } from "@/util/validate";
export default {
    name: "index",
    data() {
        return {
            loading: false,
            loading2: false,
            form: {
                debitAmount: 0,
                deliveringAmount: 0,
                advancePayment: 0,
                balanceAmount: 0,
                settlmentAmount: 0
            },
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
                pageSizes: [10, 20, 30, 40, 50, 100, 200, 300, 400, 500]
            },
            page2: {
                pageSize: 20,
                currentPage: 1,
                total: 0,
                pageSizes: [20]
            },
            activeName: "first",
            search: {},
            search2: {},
            sellOption: {},
            capitalOption: {},
            sellList: [],
            capitalList: [],
            corpsAddrList: [],
            pickerOptions: {
                shortcuts: [
                    {
                        text: '当天',
                        onClick(picker) {
                            const date = new Date();
                            const start = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0);
                            const end = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59);
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            const start = new Date(date.getFullYear(), date.getMonth(), date.getDate() - 1, 0, 0, 0);
                            const end = new Date(date.getFullYear(), date.getMonth(), date.getDate() - 1, 23, 59, 59);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '当月',
                        onClick(picker) {
                            const date = new Date();
                            const start = new Date(date.getFullYear(), date.getMonth(), 1, 0, 0, 0);
                            const end = new Date(date.getFullYear(), date.getMonth() + 1, 0, 23, 59, 59);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '当季',
                        onClick(picker) {
                            const date = new Date();
                            const start = new Date(date.getFullYear(), parseInt(date.getMonth() / 3) * 3, 1, 0, 0, 0);
                            const end = new Date(date.getFullYear(), parseInt(date.getMonth() / 3) * 3 + 3, 0, 23, 59, 59);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '当年',
                        onClick(picker) {
                            const date = new Date();
                            const start = new Date(date.getFullYear(), date.getMonth(), 1, 0, 0, 0);
                            const end = new Date(date.getFullYear() + 1, 0, 0, 23, 59, 59);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一周',
                        onClick(picker) {
                            const date = new Date();
                            const start = new Date(date.getFullYear(), date.getMonth(), date.getDate() - 7, 0, 0, 0);
                            const end = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近二周',
                        onClick(picker) {
                            const date = new Date();
                            const start = new Date(date.getFullYear(), date.getMonth(), date.getDate() - 7 * 2, 0, 0, 0);
                            const end = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三周',
                        onClick(picker) {
                            const date = new Date();
                            const start = new Date(date.getFullYear(), date.getMonth(), date.getDate() - 7 * 3, 0, 0, 0);
                            const end = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
            },
        };
    },
    props: {
        detailData: {
            type: Object
        }
    },
    filters: {
        nameFileter(val) {
            return validatenull(val) ? '-' : val
        }
    },
    async created() {
        this.sellOption = await this.getColumnData(
            this.getColumnName(208.1),
            sellOption
        );
        this.capitalOption = await this.getColumnData(
            this.getColumnName(223),
            capitalOption
        );
        // this.sellOption.height = window.innerHeight - 330;
        if (this.detailData.id) {
            this.getDetail(this.detailData.id);
        }
        this.getAllWorkDicts()
    },
    methods: {
        getAllWorkDicts() {
            gainUser().then(res => {
                this.findObject(this.sellOption.column, "createUser").dicData = res.data.data;
            })
            getCorpType({ corpType: 'KH' }).then(res => {
                this.findObject(this.sellOption.column, "corpType").dicData = res.data.data
            });
            getAllgoods().then(res => {
                this.findObject(this.sellOption.column, "cname").dicData = res.data.data
            });
            this.getWorkDicts("account").then(res => {
                this.findObject(this.capitalOption.column, "account").dicData = res.data.data;
            });
        },
        cellStyle() {
            return "padding:0;height:40px;";
        },
        searchCriteriaSwitch(type) {
            if (type) {
                this.sellOption.height = this.sellOption.height - 46;
            } else {
                this.sellOption.height = this.sellOption.height + 46;
            }
            this.$refs.crud.getTableHeight();
        },
        //点击搜索按钮触发
        searchChange(params, done) {
            this.page.currentPage = 1;
            this.onLoad(this.page, params);
            done();
        },
        refreshChange() {
            this.onLoad(this.page, this.search);
        },
        currentChange(val) {
            this.page.currentPage = val;
        },
        sizeChange(val) {
            this.page.currentPage = 1;
            this.page.pageSize = val;
        },
        onLoad(page, params = {}) {
            let data = this.deepClone(Object.assign(params, this.search));
            data.billType = 'XS';
            data.tradeType = 'YPJ';
            if (data.businesDate) {
                data.orderStartDate = data.businesDate[0];
                data.orderEndDate = data.businesDate[1];
            }
            delete data.businesDate
            data.corpId = this.detailData.id;
            this.loading = true;
            getList(
                page.currentPage,
                page.pageSize,
                data
            )
                .then(res => {
                    this.sellList = res.data.data.records ? res.data.data.records : [];
                    this.page.total = res.data.data.total;
                })
                .finally(() => {
                    this.loading = false;
                });
        },
        onLoad2(page, params = {}) {
            let data = this.deepClone(Object.assign(params, this.search2));
            if (data.settlementDate) {
                data.settlementStartDate = data.settlementDate[0];
                data.settlementEndDate = data.settlementDate[1];
            }
            delete data.settlementDate
            data.corpId = this.detailData.id;
            this.loading = true;
            getSellList(
                page.currentPage,
                page.pageSize,
                data
            )
                .then(res => {
                    this.capitalList = res.data.data.records ? res.data.data.records : [];
                    this.page2.total = res.data.data.total;
                })
                .finally(() => {
                    this.loading = false;
                });
        },
        searchCriteriaSwitch2(type) {
            if (type) {
                this.capitalOption.height = this.capitalOption.height - 46;
            } else {
                this.capitalOption.height = this.capitalOption.height + 46;
            }
            this.$refs.crud2.getTableHeight();
        },
        //点击搜索按钮触发
        searchChange2(params, done) {
            this.page2.currentPage = 1;
            this.onLoad2(this.page2, params);
            done();
        },
        refreshChange2() {
            this.onLoad2(this.page2, this.search2);
        },
        currentChange2(val) {
            this.page2.currentPage = val;
        },
        sizeChange2(val) {
            this.page2.currentPage = 1;
            this.page2.pageSize = val;
        },
        getDetail(id) {
            this.loading = true
            getDetails({ id: id })
                .then(res => {
                    this.form = res.data.data;
                    this.corpsAddrList = res.data.data.corpsAddrList;
                })
                .finally(() => {
                    this.loading = false;
                });
        },
        editCustomer(){
            this.$emit('editOpen',this.form,1)
        },
        async saveColumn() {
            const inSave = await this.saveColumnData(
                this.getColumnName(208.1),
                this.sellOption
            );
            if (inSave) {
                this.$nextTick(() => {
                    this.$refs.crud.doLayout();
                });
                this.$message.success("保存成功");
                //关闭窗口
                this.$refs.crud.$refs.dialogColumn.columnBox = false;
            }
        },
        async resetColumn() {
            this.sellOption = sellOption;
            const inSave = await this.delColumnData(
                this.getColumnName(208.1),
                sellOption
            );
            if (inSave) {
                this.$nextTick(() => {
                    this.$refs.crud.doLayout();
                });
                this.getAllWorkDicts()
                this.$message.success("重置成功");
                this.$refs.crud.$refs.dialogColumn.columnBox = false;
            }
        },
        async saveColumn2() {
            const inSave = await this.saveColumnData(
                this.getColumnName(223),
                this.capitalOption
            );
            if (inSave) {
                this.$nextTick(() => {
                    this.$refs.crud2.doLayout();
                });
                this.$message.success("保存成功");
                //关闭窗口
                this.$refs.crud2.$refs.dialogColumn.columnBox = false;
            }
        },
        async resetColumn2() {
            this.capitalOption = capitalOption;
            const inSave = await this.delColumnData(
                this.getColumnName(223),
                capitalOption
            );
            if (inSave) {
                this.$nextTick(() => {
                    this.$refs.crud2.doLayout();
                });
                this.getAllWorkDicts()
                this.$message.success("重置成功");
                this.$refs.crud2.$refs.dialogColumn.columnBox = false;
            }
        },
        //返回列表
        backToList() {
            this.$emit("goBack");
        }
    }
};
</script>
  
<style lang="scss" scoped>
.page-crad ::v-deep .basic-container__card {
    height: 94.2vh;
}

.stat-td {
    text-align: center;
    position: relative;
}

.stat-img {
    width: 95%;
    height: 75px;
}

.stat-tip {
    position: absolute;
    left: 15px;
    top: 5px;

    .money {
        color: #fff;
        font-size: 28px;
        font-weight: 600;
    }

    .title {
        color: #fff;
        font-size: 14px;
        text-align: left;
        margin-top: 4px;
    }
}

.client_info {
    font-size: 14px;
    color: #333;
    line-height: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
}
</style>