channel_manage/src/views/channel/useCondition/index.vue

<!--
 * @Descripttion: 使用情况
 * @version: 1.0
 * @Author: zzx
 * @Date: 2024-11-09 16:08:16
 * @LastEditors: zzx
 * @LastEditTime: 2024-11-21 18:00: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-input v-model="listQuery.ecName" class="input-width" placeholder="请输入渠道名称"
                            clearable></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
        <el-card class="operate-container" shadow="hover">
            <i class="el-icon-tickets"></i>
            <span>数据列表</span>
        </el-card>
        <div class="table-container">
            <el-table ref="adminTable" :data="list" style="width: 100%" v-loading="listLoading" border>
                <el-table-column label="渠道编号" width="100" align="center" prop="appId"></el-table-column>
                <el-table-column label="渠道名称" align="center" prop="thirdPartyName"></el-table-column>
                <el-table-column label="使用状态" align="center">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.status === 1">正常</el-tag>
                        <el-tag type="danger" v-else>禁用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="渠道上账总金额/元" align="center" prop="topAllMoney"></el-table-column>
                <el-table-column label="渠道应付总金额/元" width="160" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.totalPayable || "0" }}
                    </template>
                </el-table-column>
                <el-table-column label="用户充值总金额/元" width="160" align="center" prop="userTopAllMoney"></el-table-column>
                <el-table-column label="用户消费总金额/元" width="140" align="center"
                    prop="userConsumeAllMoney"></el-table-column>
                <el-table-column label="用户退款总金额/元" width="140" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.userRefundAllMoney || "0" }}
                    </template>
                </el-table-column>
                <el-table-column label="用户剩余总金额/元" width="140" align="center" prop="userBalance"></el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" plain @click="handleUpdate(scope.$index, scope.row)"
                            v-if="scope.row.status === 1">
                            上账
                        </el-button>
                        <el-button size="mini" type="success" plain @click="SettleAccount(scope.$index, scope.row)"
                            v-else>
                            结算
                        </el-button>
                        <el-button size="mini" type="danger" plain @click="forbiddenStatus(scope.$index, scope.row)"
                            v-if="scope.row.status === 1">
                            禁用
                        </el-button>
                        <el-button size="mini" type="warning" plain @click="enable(scope.$index, scope.row)" v-else>
                            启用
                        </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>
        <el-dialog title="提示" :visible.sync="forbiddenDialogVisible" width="30%">
            <span v-if="isforbidden === false">此操作将会禁用该渠道的所有用户(正在充电的用户，会在本次充电完成后被禁用)，使其无法充电，是否继续。</span>
            <span v-else>该操作会将该渠道禁用的用户，重新启用，是否继续。</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="forbiddenDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmForbidden">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog :title="isEdit ? '渠道上账' : '渠道结算'" :visible.sync="dialogVisible" width="40%">
            <el-form :model="admin" ref="adminForm" label-width="150px" :rules="rules" size="small">
                <div style="font-size: 18px; font-weight: bold">渠道信息</div>
                <el-form-item label="渠道编号：">
                    <template><span style="color: #969595">{{ admin.appId }}</span></template>
                </el-form-item>
                <el-form-item label="渠道名称：">
                    <template><span style="color: #969595">{{
                        admin.thirdPartyName
                            }}</span></template>
                </el-form-item>
                <div style="font-size: 18px; font-weight: bold">使用情况</div>
                <el-form-item label="渠道上账总金额/元：">
                    <template><span style="color: #969595">{{
                        admin.topAllMoney
                            }}</span></template>
                </el-form-item>
                <el-form-item label="渠道应付总金额/元：">
                    <template><span style="color: #969595">{{
                        admin.totalPayable || "0"
                            }}</span></template>
                </el-form-item>
                <el-form-item label="本次上账金额/元：" prop="money">
                    <el-input v-model="admin.money" placeholder="请输入上账金额" type="number" :rows="5"
                        style="width: 250px"></el-input>
                    <el-checkbox v-if="!isEdit" v-model="admin.checked">负数</el-checkbox>
                </el-form-item>
                <!-- <el-form-item label="上传凭证：">
                    <uploadImg :limit="1" :file-list="fileList" @getUrl="getUrl($event)" @delUrl="delUrl($event)"
                        :disabled="true"></uploadImg>
                </el-form-item> -->
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false" size="small">取 消</el-button>
                <el-button type="primary" @click="handleDialogConfirm()" size="small">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { useConditionList, updateStatus, upTheAccount } from "@/api/channel";
import { formatDate } from "@/utils/date";
import uploadImg from '@/components/Upload/uploadImg'
const defaultListQuery = {
    pageNum: 1,
    pageSize: 10,
    ecName: null,
};
const defaultAdmin = {
    id: null,
    username: null,
    password: null,
    nickName: null,
    email: null,
    note: null,
    status: 1,
};
export default {
    name: "useCondition",
    components: { uploadImg },
    data() {
        return {
            fileList: [],
            upImg: '',
            setQuery: {},
            isforbidden: false,
            forbiddenDialogVisible: false,
            listQuery: Object.assign({}, defaultListQuery),
            list: null,
            total: null,
            listLoading: false,
            dialogVisible: false,
            admin: Object.assign({}, defaultAdmin),
            isEdit: false,
            allocRoleIds: [],
            allRoleList: [],
            allocAdminId: null,
            rules: {
                money: [{ required: true, message: "请输入金额", trigger: "blur" }],
            },
        };
    },
    watch: {},
    created() {
        this.getList();
    },
    filters: {
        formatDateTime(time) {
            if (time == null || time === "") {
                return "N/A";
            }
            let date = new Date(time);
            return formatDate(date, "yyyy-MM-dd hh:mm:ss");
        },
    },
    methods: {
        //函数
        getUrl(getUrl) {
            this.upImg = getUrl;
        },
        delUrl(getUrl) {
        },

        // 启用
        enable(index, row) {
            this.isforbidden = true;
            this.forbiddenDialogVisible = true;
            this.setQuery = row;
        },
        // 禁用
        forbiddenStatus(index, row) {
            this.isforbidden = false;
            this.forbiddenDialogVisible = true;
            this.setQuery = row;
        },

        // 确认禁用/启用
        confirmForbidden() {
            let isEnable = "";
            if (this.isforbidden === true) {
                isEnable = 1;
            } else {
                isEnable = 2;
            }
            updateStatus(this.setQuery.thirdPartyId, isEnable).then((res) => {
                this.forbiddenDialogVisible = false;
                if (res.code == 200) {
                    this.$message({
                        message: "修改成功！",
                        type: "success",
                    });
                    this.getList();
                }
            });
        },

        // 结算
        SettleAccount(index, row) {
            this.dialogVisible = true;
            this.isEdit = false;
            this.admin = Object.assign({}, row);
        },

        // 上账
        handleUpdate(index, row) {
            this.dialogVisible = true;
            this.isEdit = true;
            this.admin = Object.assign({}, row);
        },

        handleResetSearch() {
            this.listQuery = Object.assign({}, defaultListQuery);
        },
        handleSearchList() {
            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();
        },

        handleDialogConfirm() {
            this.$confirm("是否要确认?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                let updateData = {
                    money: this.admin.money,
                    thirdPartyInfoId: this.admin.thirdPartyId,
                    type: this.isEdit == true ? 1 : 2,
                    voucherPic: this.upImg,
                };
                upTheAccount({ ...updateData }).then((response) => {
                    if (response.code == 200) {
                        this.$message({
                            message: this.isEdit == true ? "上账成功！" : "结算成功！",
                            type: "success",
                        });
                        this.fileList = [];
                        this.$refs["adminForm"].resetFields();
                        this.dialogVisible = false;
                        this.getList();
                    } else {
                        this.$message({
                            message: response.msg,
                            type: "error",
                        });
                    }
                });
            });
        },
        getList() {
            this.listLoading = true;
            useConditionList(this.listQuery).then((response) => {
                this.listLoading = false;
                this.list = response.data.list;
                this.total = response.data.total;
            });
        },
    },
};
</script>
<style></style>