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

<template>
    <div class="app-container">
        <el-form
            :model="queryParams"
            ref="queryForm"
            size="small"
            :inline="true"
            label-width="168px"
            @submit.native.prevent
        >
            <el-form-item label="订单编号" prop="orderCode">
                <el-input
                    v-model="queryParams.orderCode"
                    placeholder="请输入订单编号"
                    clearable
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>

            <el-form-item label="手机号码" prop="mobileNumber">
                <el-input
                    v-model="queryParams.mobileNumber"
                    placeholder="请输入手机号码"
                    clearable
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <div v-if="buttonBoolean">
                <el-form-item label="订单编号" prop="orderCode">
                    <el-input
                        v-model="queryParams.orderCode"
                        placeholder="请输入订单编号"
                        clearable
                        @keyup.enter.native="handleQuery"
                    />
                </el-form-item>

                <el-form-item label="订单编号" prop="orderCode">
                    <el-input
                        v-model="queryParams.orderCode"
                        placeholder="请输入订单编号"
                        clearable
                        @keyup.enter.native="handleQuery"
                    />
                </el-form-item>

                <el-form-item label="订单编号" prop="orderCode">
                    <el-input
                        v-model="queryParams.orderCode"
                        placeholder="请输入订单编号"
                        clearable
                        @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
            </div>
            <el-button
                @click="showOrHide()"
                style="
                    border-color: white;
                    background-color: white;
                    font-size: x-small;
                    color: #50bfff;
                    padding: 1px 2px;
                    margin-left: 40%;
                    margin-top: 0px;
                    margin-bottom: 15px;
                "
                :icon="icon"
            >{{ showOrHideText }}
            </el-button>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    size="mini"
                    @click="handleQuery"
                >搜索
                </el-button
                >
            </el-col>
            <el-col :span="1.5">
                <el-button
                    icon="el-icon-refresh"
                    size="mini"
                    @click="resetQuery"
                >重置
                </el-button
                >
            </el-col>
            <el-button
                type="warning"
                plain
                icon="el-icon-download"
                size="mini"
                @click="handleExport"
                v-hasPermi="['order:order:export']"
            >导出
            </el-button
            >
        </el-row>
        <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>