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

<!--
 * @Descripttion: 批量设置分销佣金
 * @version: 1.0
 * @Author: zzx
 * @Date: 2025-02-08 10：18:00
 * @LastEditors: zzx tigerzouzx@foxmail.com
 * @LastEditTime: 
-->
<template>
    <div class="app-container">
        <el-card class="operate-container" shadow="hover">
            <i class="el-icon-tickets"></i>
            <span>批量设置分销佣金</span>
            <back-button style="float: right; margin-right: 15px"></back-button>
        </el-card>
        <div class="table-container" style="background-color: #fff;">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="一级分销员" prop="checkedCities">
                    <el-checkbox :indeterminate="isIndeterminate" v-model="ruleForm.checkAll"
                        @change="handleCheckAllChange">全选</el-checkbox>
                    <div class="check-layout">
                        <el-checkbox-group v-model="ruleForm.checkedCities" @change="handleCheckedCitiesChange">
                            <el-checkbox v-for="city in cities" :label="city" :key="city" name="type">{{ city
                                }}</el-checkbox>
                        </el-checkbox-group>
                    </div>
                </el-form-item>
                <el-form-item label="设备所属方" prop="checkedBelonging">
                    <el-checkbox-group v-model="ruleForm.checkedBelonging" @change="handleBelongingChange">
                        <el-checkbox v-for="belong in belongingList" :label="belong" :key="belong" name="belonging">{{
                            belong }}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-form>
            <div style="margin-top: 15px;">
                <div class="table-tips">
                    <div>
                        渠道1的充电时段及费用信息
                    </div>
                    <div>
                        提示：设置成功后，勾选的分销员的渠道所有站点都将修改为下表中的代理价
                    </div>
                </div>
                <el-table ref="adminTable" :data="dialogList" style="width: 100%" v-loading="dialogListLoading" border>
                    <el-table-column label="时间段" align="center" prop="time"></el-table-column>
                    <el-table-column label="电费(元/度)" align="center" prop="electrovalence"></el-table-column>
                    <el-table-column label="结算服务费(元)" align="center" prop="servicePrice"></el-table-column>           
                    <el-table-column label="结算费合计(元)" align="center" prop="eprice"></el-table-column>
                    <el-table-column label="运营服务费(元)" align="center" prop="addServicePrice"></el-table-column>
                    <el-table-column label="销售合计价(元)" align="center" prop="platformPrice"></el-table-column>
                    <el-table-column label="一级代理价(元)" align="center" prop="">
                        <template slot-scope="scope">
                            <el-tooltip class="item" v-if="scope.row.isEdit === false" effect="dark" content="单击编辑"
                                placement="left">
                                <span class="edit" @click="toggleEdit(scope.row)">{{
                                    scope.row.firstLevelPrice }}</span>
                            </el-tooltip>
                            <el-input v-else v-model="editInput" size="small"
                                oninput="value=value.replace(/[^\d.]/g,'')" style="width: 200px;"
                                @blur="saveEdit(scope.row)">
                                <i slot="suffix" size="small" class="el-icon-check" @click="confrimEdit(scope.row)"></i>
                                <i slot="suffix" size="small" class="el-icon-close" @click="cancelEdit(scope.row)"></i>
                            </el-input>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div style="margin-top: 20px" align="center">
            <el-button size="small" type="primary">确定</el-button>
            <el-button size="small">取消</el-button>
        </div>
    </div>
</template>
<script>
const cityOptions = ['上海', '北京', '广州', '深圳'];
const levelOptions = ['渠道一', '渠道二', '渠道三'];
export default {
    data() {
        return {
            // 多选start
            cities: cityOptions,
            isIndeterminate: false,
            checkAll: false,
            // 多选end
            // 设备选择start
            belongingList: levelOptions,
            ruleForm: {
                checkedCities: [],
                checkedBelonging: [],

            },
            rules: {
                checkedCities: [
                    { type: 'array', required: true, message: '请至少选择一个分销员', trigger: 'change' }
                ],
                checkedBelonging: [
                    { type: 'array', required: true, message: '请至少选择一个设备所属方', trigger: 'change' }
                ]
            },
            // 设备选择end
            // 渠道商电费列表数据start
            dialogList: null,
            dialogListLoading: false,
            // 渠道商电费列表数据end
        }
    },
    created() {
    },
    computed: {
    },
    methods: {
        handleCheckAllChange(val) {
            console.log(val, '---全选框数据');
            this.ruleForm.checkedCities = val ? cityOptions : [];
            this.isIndeterminate = false;
        },
        handleCheckedCitiesChange(value) {
            console.log(value, '---选择框数据');
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.cities.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
        },
        // 设备商选择
        handleBelongingChange(val) {
            console.log(val, '---设备商选择');
        }
    },
}
</script>
<style lang="scss" scoped>
.check-layout {
    margin-top: 15px;
    border: 1px solid #dcdfe6;
    padding-left: 10px;
}
.table-tips{
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    margin-bottom: 10px;
    &>div:last-child{
        color: #f70000;
    }
}
</style>