yoga-manager-ui/src/components/sc/course/feeModeHour.vue

<template>
  <el-row style="margin-bottom: 10px">
    <el-col v-if="feeModeHour" :span="24">
      <label class="el-form-item__label" style="width: 100px;">扣费标准:
      </label>
      <el-table
        :data="feeModeTableData"
        border
        class="fee-table"
      >
        <el-table-column
          prop="courseType"
          label="课程类别"
          width="200"
        >
          <template slot-scope="scope">
            <div class="select-with-btn-container">
              <el-select
                v-model="scope.row.courseTypeId"
                placeholder="请选择课程类别"
                clearable
                filterable
                default-first-option
                :loading="loadingSelect"
                @change="handleCourseTypeChange(scope.row)"
              >
                <el-option
                  v-for="item in getAvailableCourseTypeOptions(scope.$index)"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
                />
              </el-select>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          prop="cnt"
          label="扣卡次数"
          width="160"
        >
          <template slot="header"><span class="header-need-input">扣卡次数</span></template>
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.cnt" size="small" controls-position="right" :min="1"  :precision="1" label="输入扣卡次数" />
          </template>
        </el-table-column>

        <el-table-column
          prop="totalFee"
          label="或扣费金额(每节)"
          width="160"
        >
          <template slot="header"><span class="header-need-input">或扣费金额(每节)</span></template>
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.totalFee" size="small" controls-position="right" :min="0" :precision="2" label="请输入金额" />
          </template>
        </el-table-column>

        <el-table-column
          label="操作"
          width="120"
          align="center"
        >
          <template slot-scope="scope">
            <!-- 关键修改1：仅最后一行显示添加按钮 -->
            <el-button
              v-if="scope.$index === feeModeTableData.length - 1"
              style="padding: 3px 5px;"
              type="primary"
              icon="el-icon-plus"
              size="mini"
              @click="handleAddFeeMode(scope)"
            />
            <el-button
              v-if="canDel(scope)"
              style="padding: 3px 5px;margin-left: 5px;"
              type="danger"
              icon="el-icon-minus"
              size="mini"
              @click="handleDeleteFeeMode(scope)"
            />
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
</template>

<script>
export default {
  props: {
    // 全部课程类型
    courseTypeOptions: {
      type: Array,
      default: () => []
    },
    // 已选择课程类型（初始化用）
    hadChooseType: {
      type: Array,
      default: () => []
    },

  },
  data() {
    return {
      feeModeHour: true,
      feeModeTableData: [],
      // key-value形式存储 所有课程类型 (courseTypeId => courseType)
      courseTypeOptionsMap: {},
      loadingSelect: false
    }
  },
  watch: {
    // 监听课程类型选项变化，构建映射表并初始化表格
    courseTypeOptions: {
      immediate: true,
      handler(newValue) {
        // 构建courseTypeId到courseType的映射
        this.courseTypeOptionsMap = newValue.reduce((map, item) => {
          map[item.courseTypeId] = item.courseType;
          return map;
        }, {});

        // 初始化表格数据
        this.initFeeModeTableData();
      }
    },
    // 监听已选择课程类型变更（仅初始化用）
    hadChooseType: {
      immediate: true,
      handler(newVal) {
        if (!this.feeModeHour) return;
        this.initFeeModeTableData(newVal);
      }
    },
    // 监听是否显示本收费模式
    feeModeHour(newVal) {
      if (newVal) {
        this.initFeeModeTableData();
      } else {
        this.feeModeTableData = [];
      }
    }
  },
  methods: {
    // 初始化扣费标准表格数据
    initFeeModeTableData(initIds = this.hadChooseType) {
      // 避免重复初始化
      if (this.feeModeTableData.length > 0) return;

      let tableData = [];

      if (initIds.length > 0) {
        // 有初始化ID时，按ID初始化行
        tableData = initIds.map(id => ({
          courseTypeId: id,
          courseType: this.courseTypeOptionsMap[id] || '',
          cnt: 1,
          totalFee: 0
        }));
      } else {
        // 无初始化ID时，默认选中第一个可用课程类型
        const firstOption = this.courseTypeOptions[0] || {};
        tableData = [{
          courseTypeId: firstOption.id || '',
          courseType: firstOption.label|| '',
          cnt: 1,
          totalFee: 0
        }];
      }

      this.feeModeTableData = tableData;
    },
    // 课程类型选择变更时更新courseType字段
    handleCourseTypeChange(row) {
      row.courseType = this.courseTypeOptionsMap[row.courseTypeId] || '';
    },
    // 获取当前行可用的课程类别选项（排除其他行已选中的）
    getAvailableCourseTypeOptions(currentIndex) {
      // 收集除当前行外，其他行已选中的courseTypeId
      const selectedIds = this.feeModeTableData
        .filter((_, index) => index !== currentIndex)
        .map(item => item.courseTypeId)
        .filter(id => id);

      // 过滤出未被选中的课程类别
      const availableOptions = this.courseTypeOptions.filter(item => !selectedIds.includes(item.id));
      return availableOptions;
    },
    // 新增扣费标准行（关键修改2：默认选中第一个可用选项）
    handleAddFeeMode() {
      // 获取新增行可用的第一个课程类型
      const availableOptions = this.getAvailableCourseTypeOptions(this.feeModeTableData.length);
      const firstOption = availableOptions[0] || {};

      this.feeModeTableData.push({
        courseTypeId: firstOption.id || '',
        courseType: firstOption.label || '',
        cnt: 1,
        totalFee: 0
      });
    },
    // 删除扣费标准行
    handleDeleteFeeMode(scope) {
      this.feeModeTableData.splice(scope.$index, 1);
    },
    // 判断是否显示删除按钮（仅一行时不显示）
    canDel() {
      return this.feeModeTableData.length > 1;
    }
  }
};
</script>

<style scoped>
.fee-table {
  margin-left: 10px;
  width: calc(100% - 10px);
}
.select-with-btn-container {
  width: 100%;
}
.header-need-input {
  color: #606266;
}

</style>