jsowell-charger-web/jsowell-ui/src/views/pile/station/splitConfig.vue

<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >
          新增
        </el-button>
      </el-col>
    </el-row>
    <el-table :data="carList" stripe style="width: 100%; margin-top: 20px">
      <el-table-column label="分润人" align="center" prop="aaa" />
      <el-table-column label="电费比例（%）" align="center" prop="bbb">
        <template slot-scope="scope">
          <el-input
            style="width: 200px"
            v-model="scope.row.bbb"
            placeholder="请输入手机号码"
          />
        </template>
      </el-table-column>
      <el-table-column label="服务费比例（%）" align="center" prop="ccc">
        <template slot-scope="scope">
          <el-input
            style="width: 200px"
            v-model="scope.row.ccc"
            placeholder="请输入手机号码"
          />
        </template>
      </el-table-column>
      <el-table-column label="是否承担手续费" align="center" width="200">
        <template slot-scope="scope">
          <!-- <el-switch
            v-model="scope.row.state"
            active-text="是"
            inactive-text="否"
          ></el-switch> -->
          <el-switch
            v-model="scope.row.state"
          ></el-switch>
        </template>
      </el-table-column>
    </el-table>
    <div class="save">
      <el-button type="primary" @click="getSave"> 保存 </el-button>
    </div>
    <!-- 添加分润人弹框 -->
    <el-dialog
      title="添加分润人"
      :visible.sync="open"
      width="600px"
      append-to-body
      :before-close="cancel"
    >
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="选择运营商">
          <el-select
            v-model="createMerchantVip.targetMerchantId"
            clearable
            filterable
            placeholder="请选择运营商"
            @change="$forceUpdate()"
          >
            <el-option
              v-for="item in merchantList"
              :key="item.merchantId"
              :label="item.merchantName"
              :value="item.merchantId"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getMerchantListByAuth } from "@/api/member/info";
export default {
  data() {
    return {
      // 是否显示弹出层
      open: false,
      // 运营商列表
      merchantList: [],
      // 表单参数
      form: {},
      createMerchantVip: {},
      carList: [
        {
          aaa: "运营商A",
          bbb: "20",
          ccc: "20",
          state: false,
        },
        {
          aaa: "运营商B",
          bbb: "60",
          ccc: "40",
          state: true,
        },
        {
          aaa: "运营商C",
          bbb: "30",
          ccc: "40",
          state: true,
        },
      ],
    };
  },
  created() {
    this.getMerchantList();
  },
  methods: {
    /** 新增按钮操作 */
    handleAdd() {
      this.open = true;
    },
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.createMerchantVip = {};
    },
    // 获取运营商列表
    getMerchantList() {
      getMerchantListByAuth().then((response) => {
        console.log("response", response);
        this.merchantList = response.obj;
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        this.$modal.msgSuccess("新增成功");
        this.open = false;
        // this.getList();
      });
    },
    // 保存
    getSave() {
      let totalBbbA = 0;
      this.carList.forEach((car) => {
        totalBbbA += Number(car.bbb);
      });
      // 检查总和是否等于100
      if (totalBbbA != 100) return this.$modal.msgError("电费分成比例相加必须等于100%");
      let totalBbbB = 0;
      this.carList.forEach((car) => {
        totalBbbB += Number(car.ccc);
      });
      // 检查总和是否等于100
      if (totalBbbB != 100) return this.$modal.msgError("服务费分成比例相加必须等于100%");
      let trueCount = 0;
      this.carList.forEach((car) => {
        if (car.state) trueCount++;
      });
      // 检查是否只有一个人承担手续费
      if (trueCount != 1) return this.$modal.msgError("手续费只能有一个人承担");
    },
  },
};
</script>

<style scoped>
.save {
  text-align: right;
  margin-top: 20px;
}
</style>