jsowell-charger-web/jsowell-ui/src/views/financial/merchant.vue

<template>
    <div class="app-container">
        <el-table
            :data="merchantList"
            stripe
            border
            style="width: 100%">
            <el-table-column
                prop="merchantName"
                label="运营商"
                align="center"
            />
            <el-table-column
                prop="organizationCode"
                label="组织机构代码"
                align="center"
            />
            <el-table-column
                prop="status"
                label="状态"
                align="center"
                width="130"
            >
                <template slot-scope="scope">
                    <dict-tag
                        :options="dict.type.merchant_status"
                        :value="scope.row.status"
                    />
                </template>
            </el-table-column>
            <el-table-column
                prop="managerName"
                label="联系人"
                align="center"
                width="130"
            />
            <el-table-column
                prop="managerPhone"
                label="联系方式"
                align="center"
                width="300"
            />
            <el-table-column
                prop="createTime"
                label="入驻时间"
                align="center"
            />
            <el-table-column
                prop="address"
                label="操作"
                align="center">
                <template slot-scope="scope"> 
                    <!--  :to="'/merchant/detail/index/' + scope.row.id" -->
                    <router-link
                        :to="{path:'/financial/merchant/merchantVirtual', query: {merchantId: scope.row.id}} "
                        class="link-type"
                    >
                        <span>虚拟财务</span>
                    </router-link>
                    <router-link
                        :to="{path:'/financial/merchant/cleanFinancial', query: {merchantId: scope.row.id}} "
                        class="link-type"
                    >
                        <span style="margin-left:10px;color: darkblue;">清分财务</span>
                    </router-link>
                </template>
            </el-table-column>
        </el-table>
        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getFinancialMerchantList"
        />
    </div>

</template>

<script>

import {getFinancialMerchantList} from "@/api/pile/merchant";

export default {
    dicts: ["merchant_status"],
    data() {
        return {
            // 运营商列表
            merchantList: [],

            showOrHideText: "显示更多查询条件",
            buttonBoolean: false,
            //图标，可根据自己的需求匹配
            icon: "el-icon-caret-bottom",

            total: 0,
            queryParams: {
                pageNum: 1,
                pageSize: 10
            }
        };
    },
    created() {
        this.getFinancialMerchantList();
    },
    methods: {
        showOrHide() {
            if (this.buttonBoolean) {
                this.icon = "el-icon-caret-bottom";
                this.showOrHideText = "显示更多查询条件";
                this.buttonBoolean = !this.buttonBoolean;
            } else {
                this.icon = "el-icon-caret-top";
                this.showOrHideText = "收起";
                this.buttonBoolean = !this.buttonBoolean;
            }
        },
        // 获取运营商列表
        getFinancialMerchantList() {
            getFinancialMerchantList(this.queryParams).then((response) => {
                this.merchantList = response.rows;
                this.total = response.total;
            })
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            // 获取订单列表
            // this.getList();
            // 获取订单总金额
            // this.getOrderTotalData();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            // this.handleQuery();
        },
        /** 导出按钮操作 */
        handleExport() {
            // this.download(
            //     "order/order/export",
            //     {
            //         ...this.queryParams,
            //     },
            //     `order_${new Date().getTime()}.xlsx`
            // );
        },
    },
};
</script>
<style lang="scss" scoped>
::v-deep
.el-descriptions--medium:not(.is-bordered)
.el-descriptions-item__cell {
    padding-bottom: 4px;
}

::v-deep .el-descriptions__header {
    margin-bottom: 10px;
}

.cardview-box {
    width: 100%;
    margin-bottom: 12px;
    font-size: 16px;
    color: #4a4a4a;
    border: 1px solid #f0f0f0;
}

.cardview-static {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-content: center;
    padding: 0 10px;
    height: 46px;
    line-height: 46px;
    background-color: #f0f0f0;
}

.flex {
    display: flex;
    justify-content: space-between;
    align-content: center;
    margin-bottom: 10px;
}
</style>