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="splitName" />
      <el-table-column label="电费比例（%）" align="center" prop="electricitySplitRatio">
        <template slot-scope="scope">
          <el-input
            style="width: 200px"
            v-model="scope.row.electricitySplitRatio"
            placeholder="请输入电费比例"
          />
        </template>
      </el-table-column>
      <el-table-column label="服务费比例（%）" align="center" prop="serviceSplitRatio">
        <template slot-scope="scope">
          <el-input
            style="width: 200px"
            v-model="scope.row.serviceSplitRatio"
            placeholder="请输入服务费比例"
          />
        </template>
      </el-table-column>
      <el-table-column label="汇付会员id" align="center" prop="adapayMemberId" />
      <el-table-column label="是否承担手续费" align="center" width="200">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.feeFlag"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="deleteUpdate(scope.row.id)"
            >删除</el-button
          >
        </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.adapayMemberId"
            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";
import { getSplitConfigList, addSplitConfig } from "@/api/pile/splitConfig.js";
export default {
  props: {
    stationId: {
      type: String,
      required: true,
    },
    merchantId: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      // 是否显示弹出层
      open: false,
      // 运营商列表
      merchantList: [],
      // 表单参数
      form: {},
      createMerchantVip: {},
      carList: [],
    };
  },
  created() {
    this.getMerchantList();
    this.getList();
  },
  methods: {
    /** 新增按钮操作 */
    handleAdd() {
      this.open = true;
    },
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.createMerchantVip = {};
    },
    // 获取运营商列表
    getMerchantList() {
      getMerchantListByAuth().then((response) => {
        console.log("获取运营商列表", response);
        this.merchantList = response.obj;
      });
    },
    /** 确认按钮 */
    submitForm() {
      console.log("汇付会员id", this.createMerchantVip);
      const selectedMerchant = this.merchantList.find(
        (merchant) => merchant.merchantId === this.createMerchantVip.adapayMemberId
      );
      const newDetail = {
        splitName: selectedMerchant.merchantName,
        adapayMemberId: selectedMerchant.adapayMemberId,
        electricitySplitRatio: 0,
        serviceSplitRatio: 0,
        feeFlag: false,
      };
      this.carList.push(newDetail);
      this.open = false;
      console.log(this.carList);
    },
    // 保存
    getSave() {
      let totalBbbA = 0;
      this.carList.forEach((car) => {
        totalBbbA += Number(car.electricitySplitRatio);
      });
      // 检查总和是否等于100
      if (totalBbbA != 100) return this.$modal.msgError("电费分成比例相加必须等于100%");
      let totalBbbB = 0;
      this.carList.forEach((car) => {
        totalBbbB += Number(car.serviceSplitRatio);
      });
      // 检查总和是否等于100
      if (totalBbbB != 100) return this.$modal.msgError("服务费分成比例相加必须等于100%");
      let trueCount = 0;
      this.carList.forEach((car) => {
        if (car.feeFlag) trueCount++;
      });
      // 检查是否只有一个人承担手续费
      if (trueCount != 1) return this.$modal.msgError("手续费有且只能有1位承担方");
      const parameter = {
        merchantId: this.merchantId,
        stationId: this.stationId,
        splitUserDetailList: this.carList,
      };
      console.log("参数", parameter);
      addSplitConfig(parameter)
        .then((response) => {
          console.log("response", response);
          this.$modal.msgSuccess("保存成功");
          this.getList();
        })
        .catch((error) => {
          console.error("保存失败", error);
        });
    },
    //删除
    deleteUpdate() {},
    // 根据站点id 查询站点分成配置
    getList() {
      getSplitConfigList(this.stationId)
        .then((response) => {
          console.log("根据站点id 查询站点分成配置", response);
          this.carList = response.rows;
        })
        .catch((error) => {
          console.error("查询站点分成配置时出错", error);
        });
    },
  },
};
</script>

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