SAAS-FRONTEND/src/views/lng/Lng_GroupSet.vue

<template>
  <div>
    <div
      class="accordion"
      :id="'accordionExample' + index"
      v-for="(ele, index) in list"
      :key="index"
    >
      <div class="card  m-auto" style="width: 500px">
        <div class="card-header" :id="'headingOne' + index">
          <h2 class="mb-0">
            <button
              class="btn btn-link btn-block text-left"
              type="button"
              data-toggle="collapse"
              :data-target="'#collapseOne' + index"
              aria-expanded="true"
              :aria-controls="'collapseOne' + index"
            >
              {{ ele.stationName }}
            </button>
          </h2>
        </div>

        <div
          :id="'collapseOne' + index"
          class="collapse"
          :aria-labelledby="'headingOne' + index"
          :data-parent="'#accordionExample' + index"
        >
          <div class="card-body">
            <el-form
              :model="ele"
              status-icon
              :ref="'listForm' + index"
              label-width="120px"
              class="demo-ruleForm w-75 m-auto"
            >
              <el-form-item label="结算优惠类型" prop="settlementType">
                <el-radio-group
                  v-model="ele.settlementType"
                  :disabled="!ele.editFlag"
                >
                  <el-radio label="1">直降</el-radio>
                  <el-radio label="2">折扣</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="结算优惠金额" prop="settlementPrice">
                {{ ele.settlementType == 1 ? "直降" : "折扣" }}
                <input
                  type="text"
                  class="form-control form-control-sm d-inline-block"
                  style="width: 80px"
                  v-model.number="ele.settlementPrice"
                  :disabled="!ele.editFlag"
                />
                {{ ele.settlementType == 1 ? "元" : "%" }}
              </el-form-item>
              <el-form-item label="司机优惠折扣" prop="driverPrice">
                折扣
                <input
                  type="text"
                  class="form-control form-control-sm d-inline-block"
                  style="width: 80px"
                  v-model.number="ele.driverPrice"
                  :disabled="!ele.editFlag"
                />
                %
              </el-form-item>
              <el-form-item label="站点交易余额" prop="balance">
                {{ ele.balance === null ? 0 : ele.balance }}
                <a href="#"
                  class="mb-2 ml-2"
                  icon="el-icon-edit"
                  @click="toggleBalanceFlag(ele)"
                  >{{ !ele.balanceFlag ? "调整" : "收起" }}
                </a>
                <div class="mt-2" v-show="!!ele.balanceFlag">
                  <select
                    class="custom-select custom-select-sm mb-1 mr-1"
                    :id="'inputGroupSelect' + index"
                    style="width: 50px"
                    :disabled="!ele.balanceFlag"
                    v-model.number="ele.type"
                  >
                    <option value="+"> + </option>
                    <option value="-"> - </option>
                  </select>
                  <input
                    type="text"
                    class="form-control form-control-sm d-inline-block"
                    style="width: 80px"
                    :disabled="!ele.balanceFlag"
                    v-model.number="ele.amt"
                  />

                  <el-button
                    class="btn btn-outline-dark btn-sm mb-1 ml-1"
                    :disabled="!ele.balanceFlag"
                    @click="changeBalance(ele, index)"
                  >
                    确认
                  </el-button>
                </div>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  @click="submitForm(ele,index)"
                  class="mr-2"
                  :disabled="!ele.editFlag"
                  >提交</el-button
                >
                <el-button @click="toggleEditFlag(ele,index)" >{{
                  !ele.editFlag ? "修改" : "取消"
                }}</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { 
getLngList, 
getLngSingle,
updateInfo,
balanceChange
} from "@/api/lng";

export default {
  name: "Lng_GroupSet",
  data() {
    return {
      list: [
        {
          settlementType: "1",
          settlementPrice: 1,
          driverPrice: 97,
          balance: 1000,
        },
        {
          settlementType: "1",
          settlementPrice: 2,
          driverPrice: 95,
          balance: 2000,
        },
      ],
    };
  },
  created() {
    this.getLngList();
  },
  methods: {
    getLngSingle(id, index) {
      return getLngSingle(id)
        .then((res) => {
          if (res.code == 200) {
            console.log(res.data);
            this.list[index] = res.data;
            this.list = [...this.list];
          } else {
            throw new Error("");
          }
        })
        .catch(() => {
          this.msgError("拉取气站列表失败");
        });
    },
    getLngList() {
      getLngList()
        .then((res) => {
          if (res.code == 200) {
            this.list = res.rows;
          } else {
            throw new Error("");
          }
        })
        .catch(() => {
          this.msgError("拉取气站列表失败");
        });
    },
    toggleBalanceFlag(ele) {
      ele.type = "+"
      ele.balanceFlag = !ele.balanceFlag;
      ele.editFlag = false;
      this.list = [...this.list];
    },
    toggleEditFlag(ele, index) {
      ele.editFlag = !ele.editFlag;
      ele.balanceFlag = false;
      if (!ele.editFlag) {
        this.getLngSingle(ele.id, index)
      }else{
        this.list = [...this.list];
      }
    },
    submitForm(ele, index){
      updateInfo(ele).then((res)=>{
        if(res.code == 200){
          this.getLngSingle(ele.id, index).then((res)=>{
            this.editFlag = false
          })
        }else{
          throw new Error("");
        }
      }).catch(()=>{
        this.msgError("修改失败，请刷新后重试")
      }) 
    },
    changeBalance(ele, index){
      if(!ele.type || !ele.amt || !ele.deptId || ele.amt<=0){
        this.msgError("请正确填写参数")
        return;
      }
      balanceChange({
        type:ele.type,
        amt:ele.amt,
        stationId: ele.deptId
      }).then((res)=>{
        if(res.code == 200){
          this.getLngSingle(ele.id,index).then((res)=>{
            ele.type = '+'
            ele.amt = 0
            ele.balanceFlag = false;
          })
        }else{
          throw new Error("");
        }
      }).catch(()=>{
        this.msgError("修改失败，请刷新后重试")
      })
    }
  },
};
</script>

<style>
</style>