dy-admin-manager/src/views/resetTeaming/modals/payLeBao.vue

<template>
  <div class="teamCourseList">
    <p class="coreTitle">
      乐保

      <el-form-item
        label="是否展示"
        prop="isShowMusicInsuranceForPay"
        v-if="allCourseCurrentPrice == 0"
        class="titleFormItem"
      >
        <el-select
          style="width: 100% !important"
          v-model="form.isShowMusicInsuranceForPay"
          placeholder="请选择是否展乐保费用"
          size="mini"
        >
          <el-option label="是" :value="true"> </el-option>
          <el-option label="否" :value="false"> </el-option>
        </el-select>
      </el-form-item>
    </p>
    <el-table
      class="courseTable"
      :data="form.leBaoList"
      style="width: 100% !important; background: #f9f9f9"
      :header-cell-style="{ background: '#F9F9F9', color: '#444' }"
    >
      <el-table-column width="170px" label="乐器保养">
        <template slot-scope="scope">
          <p>乐器保养</p>
        </template>
      </el-table-column>
      <el-table-column label="年限" prop="num" key="num" width="170px">
        <template slot-scope="scope">
          <el-form-item
            :prop="'leBaoList.' + scope.$index + '.num'"
            :rules="[
              {
                required: true,
                message: '请输入年限',
                trigger: 'blur',
              },
            ]"
          >
            <!--    @change="
                            $listeners.priceChange(scope.row, scope.$index)
                          " -->
            <el-input-number
              style="width: 90% !important"
              class="number-input"
              v-model="form.leBaoList[scope.$index].num"
              :controls="false"
              :precision="0"
              :min="0"
              @change="changeYear"
              placeholder="请输入年限"
            />
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column
        label="售价(元)"
        prop="actualAmount"
        key="actualAmount"
        width="170px"
      >
        <template slot-scope="scope">
          <el-form-item
            :prop="'leBaoList.' + scope.$index + '.actualAmount'"
            :rules="{
              required: true,
              message: '请输入售价',
              trigger: 'blur',
            }"
          >
            <!-- $listeners.moneyChange -->
            <el-input-number
              style="width: 90% !important"
              class="number-input"
              v-model="form.leBaoList[scope.$index].actualAmount"
              :controls="false"
              :precision="0"
              :min="0"
              @change="change"
              :disabled="true"
              placeholder="请输入售价"
            />
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column
        prop="originalAmount"
        key="originalAmount"
        label="原价(元)"
        width="170px"
      >
        <template slot-scope="scope">
          <el-form-item
            :prop="'leBaoList.' + scope.$index + '.originalAmount'"
            :rules="{
              required: true,
              message: '请输入原价',
              trigger: 'blur',
            }"
          >
            <el-input-number
              style="width: 90% !important"
              class="number-input"
              v-model="form.leBaoList[scope.$index].originalAmount"
              :controls="false"
              :precision="0"
              :min="0"
              :disabled="true"
              placeholder="请输入原价"
            />
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column prop="close" key="close">
        <template slot-scope="scope"> </template>
      </el-table-column>
    </el-table>
    <!--          v-if="!isCommon && $listeners.create"  @click="$listeners.create"-->
    <!-- <el-button icon="el-icon-plus" plain class="addBtn">新增课程类型</el-button> -->
  </div>
</template>
<script>
export default {
  props: ["form", "leBaoInfo"],
  data() {
    return {
      charges: [],
      clearable: false,
      isDisabled: false,
      courseUnitPriceSettingsByType: [],
      boolOptionsOptions: [],
    };
  },
  methods: {
    changeYear(val) {
      this.leBaoInfo.forEach((element) => {
        if (element.id == "189") {
          this.$set(
            this.form.leBaoList[0],
            "actualAmount",
            val * element.paranValue
          );
        }
        if (element.id == "202") {
          this.$set(
            this.form.leBaoList[0],
            "originalAmount",
            val * element.paranValue
          );
        }
      });
    },
    change() {},
  },
  computed: {
    allCourseCurrentPrice() {
      let price = 0;
      this.form.leBaoList.forEach((element) => {
        price += element.actualAmount;
      });
      if (price > 0) {
        this.form.isShowMusicInsuranceForPay = true;
      }
      return price;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "~@/views/resetTeaming/modals/pay.scss";
</style>