channel_manage/src/views/distribution/peopleManage/setCommission.vue

<!--
 * @Descripttion: 设置分销佣金
 * @version: 1.0
 * @Author: zzx
 * @Date: 2024-11-27 16:08:16
 * @LastEditors: zzx tigerzouzx@foxmail.com
 * @LastEditTime: 2024-11-28 18:00
-->
<template>
    <div class="app-container">
        <el-card class="filter-container" shadow="hover">
            <div>
                <i class="el-icon-search"></i>
                <span>筛选搜索</span>
                <el-button style="float: right" type="primary" @click="handleSearchList()" size="small">
                    查询搜索
                </el-button>
                <el-button style="float: right; margin-right: 15px" @click="handleResetSearch()" size="small">
                    重置
                </el-button>
            </div>
            <div style="margin-top: 15px">
                <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
                    <el-form-item label="状态：">
                        <el-select v-model="listQuery.stationStatus" clearable placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="充电站ID：">
                        <el-input v-model="listQuery.stationId" class="input-width" placeholder="请输入充电站ID"
                            clearable></el-input>
                    </el-form-item>
                    <el-form-item label="充电站名称：">
                        <el-input v-model="listQuery.stationName" class="input-width" placeholder="请输入充电站名称"
                            clearable></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
        <el-card class="operate-container" shadow="hover">
            <div style="display: flex;align-items: center;justify-content: space-between;">
                <div style="display: flex;align-items: center;">
                    <div>
                        <i class="el-icon-tickets"></i>
                        <span>数据列表</span>
                    </div>
                    <div style="margin-left:20px;">
                        <el-descriptions class="margin-top" :column="3" size="medium" border>
                            <el-descriptions-item label="可设置电站总数"> {{ noSetCount - haveSetCount || '0' }}</el-descriptions-item>
                            <el-descriptions-item label="已设置">{{ haveSetCount || '0' }}</el-descriptions-item>
                            <el-descriptions-item label="未设置">{{ noSetCount || '0' }}</el-descriptions-item>
                        </el-descriptions>
                    </div>
                </div>
                <div>
                    <back-button></back-button>
                </div>
            </div>
        </el-card>
        <div class="table-container">
            <el-table ref="adminTable" :data="list" style="width: 100%" v-loading="listLoading" border>
                <el-table-column label="充电站ID" width="100" align="center">
                    <template slot-scope="scope">{{ scope.row.id || '--' }}</template>
                </el-table-column>
                <el-table-column label="充电站名称" align="center">
                    <template slot-scope="scope">{{ scope.row.name || '--' }}</template>
                </el-table-column>
                <el-table-column label="所在城市" align="center" prop="updateBy">
                    <template slot-scope="scope">{{ '贵阳市' }}</template>
                </el-table-column>
                <el-table-column label="设备所属方" align="center" prop="equipmentOwnerName"></el-table-column>
                <el-table-column label="详细地址" align="center" prop="addr"></el-table-column>
                <el-table-column label="场所类型" align="center">
                    <!-- 站点类型（1公共，50个人，100公交专用，101环卫专用，102物流专用，103出租车专用，255其他） -->
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.stationType == 1">公共</el-tag>
                        <el-tag type="success" v-if="scope.row.stationType == 50">个人</el-tag>
                        <el-tag type="info" v-if="scope.row.stationType == 100">公交专用</el-tag>
                        <el-tag type="warning" v-if="scope.row.stationType == 101">环卫专用</el-tag>
                        <el-tag type="danger" v-if="scope.row.stationType == 102">物流专用</el-tag>
                        <el-tag effect="plain" type="success" v-if="scope.row.stationType == 103">出租车专用</el-tag>
                        <el-tag effect="plain" type="warning" v-if="scope.row.stationType == 255">其他</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="充电终端数量" align="center" prop="equipmentnum"></el-table-column>
                <el-table-column label="站点状态" align="center">
                    <template slot-scope="scope">
                            {{ scope.row.stationStatus | stationStatusFilter }}
                    </template>
                </el-table-column>
                <el-table-column label="服务电话" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.serviceTel||'--' }}
                    </template>
                </el-table-column>
                <el-table-column label="更新时间" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.updateTime||'--' }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" v-if="isAdmin == 0" type="success" plain
                            @click="get_settingType(scope.row)">
                            设置分销佣金
                        </el-button>
                        <el-button v-if="isAdmin == 2" size="mini" type="success" plain
                            @click="settingsFirst(scope.row)">
                            设置分销佣金
                        </el-button>
                        <el-button v-if="isAdmin == 3" size="mini" type="success" plain
                            @click="settingsFirst(scope.row)">
                            查看分销佣金
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination-container">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                layout="total, sizes,prev, pager, next,jumper" :current-page.sync="listQuery.pageNum"
                :page-size="listQuery.pageSize" :page-sizes="[10, 15, 20]" :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import { chargeList } from "@/api/distribution";
const defaultListQuery = {
    pageNum: 1,
    pageSize: 10,
    adminUserId: null,
    stationId: null,
    stationName: null,
    stationStatus: null,
};
export default {
    name: "setCommission",
    data() {
        return {
            noSetCount: null,
            haveSetCount: null,
            isAdmin: null,
            listQuery: Object.assign({}, defaultListQuery),
            list: null,
            listLoading: false,
            total: null,
            options: [{
                value: 0,
                label: '未知'
            }, {
                value: 1,
                label: '建设中'
            },{
                value: 5,
                label: '关闭下线'
            },{
                value: 6,
                label: '维护中'
            },{
                value: 50,
                label: '正常使用'
            }],
        };
    },
    created() {
        this.isAdmin = localStorage.getItem("isAdmin");
        this.listQuery.adminUserId = this.$route.query.adminUserId;
        this.getList();
    },
    filters: {
        stationStatusFilter(value) {
            // 0未知，1建设中，5关闭下线，6维护中，50正常使用
            switch (value) {
                case 0:
                    return "未知";
                case 1:
                    return "建设中";
                case 5:
                    return "关闭下线";
                case 6:
                    return "维护中";
                case 50:
                    return "正常使用";
                default:
                    return "未知";
            }
        }
    },
    methods: {
        get_settingType(row) {
            this.$router.push({
                name: "settingsPrice",
                query: {
                    adminUserId: this.listQuery.adminUserId,
                    stationId: row.id,
                    name: row.name,
                }
            })
        },
        settingsFirst(row) {
            this.$router.push({
                name: "firstSetPrice",
                query: {
                    adminUserId: this.listQuery.adminUserId,
                    stationId: row.id,
                    name: row.name,
                }
            })
        },

        handleResetSearch() {
            this.date = ''
            this.listQuery = Object.assign({}, defaultListQuery);
        },
        handleSearchList() {
            this.listQuery.userId = null
            this.listQuery.pageNum = 1;
            this.getList();
        },
        handleSizeChange(val) {
            this.listQuery.pageNum = 1;
            this.listQuery.pageSize = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.listQuery.pageNum = val;
            this.getList();
        },

        getList() {
            this.listLoading = true;
            chargeList(this.listQuery).then((response) => {
                this.listLoading = false;
                this.list = response.data.page.records;
                this.total = response.data.page.total;
                this.noSetCount = response.data.noSetCount;
                this.haveSetCount = response.data.haveSetCount;
            });
        },
    },
};
</script>
<style scoped>
</style>