sz-kjsxy-web/src/views/coursePlan/components/addPlan.vue

<template>
  <div>
    <xy-dialog
      ref="dialog"
      :width="80"
      :is-show.sync="isShow"
      :type="'form'"
      :title="type === 'add' ? '新增计划' : '编辑计划'"
      :form="form"
      :rules="rules"
      @submit="submit"
    >
      <template v-slot:year>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red; font-weight: bold; padding-right: 4px;">*</span>计划年份：
          </div>
          <div class="xy-table-item-content">
            <el-date-picker
              v-model="form.year"
              type="year"
              value-format="yyyy"
              format="yyyy"
              placeholder="请选择计划年份"
              style="width: 100%;"
            />
          </div>
        </div>
      </template>
      <template v-slot:plan_system_id>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red; font-weight: bold; padding-right: 4px;">*</span>计划体系：
          </div>
          <div class="xy-table-item-content">
            <el-select v-model="form.plan_system_id" filterable clearable placeholder="请选择计划体系" style="width: 100%;">
              <el-option
                v-for="item in planSystemList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:course_type_id>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red; font-weight: bold; padding-right: 4px;">*</span>课程体系：
          </div>
          <div class="xy-table-item-content">
            <el-select v-model="form.course_type_id" filterable clearable placeholder="请选择课程体系" style="width: 100%;">
              <el-option
                v-for="item in courseTypesList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:course_name>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red; font-weight: bold; padding-right: 4px;">*</span>课程名称：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.course_name" placeholder="请输入课程名称" clearable style="width: 100%;" />
          </div>
        </div>
      </template>
      <template v-slot:details>
        <div class="xy-table-item">
          <div class="xy-table-item-label detail-label" style="font-weight: bold">
            <span style="color: red; font-weight: bold; padding-right: 4px;">*</span>模块/期数：
          </div>
          <div class="xy-table-item-content">
            <div class="detail-wrap">
              <div class="detail-toolbar">
                <el-button type="primary" size="small" @click="addDetail">新增一条</el-button>
              </div>
              <el-table :data="form.details" border size="small" style="width: 100%;">
                <el-table-column label="名称" min-width="180">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.name" placeholder="请输入模块/期数名称，非必填" size="small" />
                  </template>
                </el-table-column>
                <el-table-column label="月份" width="120">
                  <template slot-scope="scope">
                    <el-select v-model="scope.row.month" placeholder="月份" size="small" style="width: 100%;">
                      <el-option
                        v-for="item in monthOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column label="地点" min-width="180">
                  <template slot-scope="scope">
                    <el-select v-model="scope.row.location_id" filterable placeholder="请选择地点" size="small" style="width: 100%;">
                      <el-option
                        v-for="item in locationList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column label="负责人" min-width="160">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.owner_name" placeholder="请输入负责人" size="small" />
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="100" align="center">
                  <template slot-scope="scope">
                    <el-button type="danger" size="mini" @click="removeDetail(scope.$index)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="detail-tip">至少保留一条模块/期数；名称可不填，月份、地点、负责人必填。</div>
              <div v-if="type === 'editor'" class="danger-actions">
                <el-button type="danger" size="small" @click="handleDeletePlan">删除计划</el-button>
              </div>
            </div>
          </div>
        </div>
      </template>
    </xy-dialog>
  </div>
</template>

<script>
import { showMockPlan as show, saveMockPlan as save, destroyMockPlan as destroy } from "../mockService.js";

const getCurrentYear = () => String(new Date().getFullYear());

const createDetail = () => ({
  id: "",
  name: "",
  month: "",
  location_id: "",
  owner_name: "",
});

const getDefaultForm = () => ({
  year: getCurrentYear(),
  plan_system_id: "",
  course_type_id: "",
  course_name: "",
  details: [createDetail()],
});

export default {
  data() {
    return {
      isShow: false,
      type: "add",
      id: "",
      courseTypesList: [],
      planSystemList: [],
      locationList: [],
      form: getDefaultForm(),
      rules: {
        year: [{
          required: true,
          message: "请选择计划年份",
        }],
        plan_system_id: [{
          required: true,
          message: "请选择计划体系",
        }],
        course_type_id: [{
          required: true,
          message: "请选择课程体系",
        }],
        course_name: [{
          required: true,
          message: "请输入课程名称",
        }],
      },
      monthOptions: Array.from({ length: 12 }, (_, index) => ({
        value: index + 1,
        label: `${index + 1}月`,
      })),
    };
  },
  methods: {
    addDetail() {
      this.form.details.push(createDetail());
    },
    removeDetail(index) {
      if (this.form.details.length === 1) {
        this.$message.warning("模块/期数至少保留一条");
        return;
      }
      this.form.details.splice(index, 1);
    },
    normalizeDetail(item) {
      return {
        id: item.id || "",
        name: item.name || item.module_name || "",
        month: item.month === 0 ? 0 : Number(item.month || ""),
        location_id: item.location_id || item.location?.id || "",
        owner_name: item.owner_name || item.owner || item.principal || "",
      };
    },
    getDetailListFromResponse(res) {
      const list = res.details || res.detail_list || res.modules || res.items || [];
      if (!Array.isArray(list) || !list.length) {
        return [createDetail()];
      }
      return list.map((item) => this.normalizeDetail(item));
    },
    validateDetails() {
      if (!Array.isArray(this.form.details) || this.form.details.length === 0) {
        this.$message.warning("请至少新增一条模块/期数");
        return false;
      }
      for (let index = 0; index < this.form.details.length; index += 1) {
        const item = this.form.details[index];
        if (!item.month) {
          this.$message.warning(`第 ${index + 1} 条模块/期数未选择月份`);
          return false;
        }
        if (!item.location_id) {
          this.$message.warning(`第 ${index + 1} 条模块/期数未选择地点`);
          return false;
        }
        if (!item.owner_name) {
          this.$message.warning(`第 ${index + 1} 条模块/期数未填写负责人`);
          return false;
        }
      }
      return true;
    },
    submit() {
      if (!this.validateDetails()) {
        return;
      }
      const payload = {
        id: this.type === "editor" ? this.id : "",
        year: this.form.year,
        plan_system_id: this.form.plan_system_id,
        course_type_id: this.form.course_type_id,
        course_name: this.form.course_name,
        details: this.form.details.map((item) => ({
          id: item.id || "",
          name: item.name || "",
          month: Number(item.month),
          location_id: item.location_id,
          owner_name: item.owner_name,
        })),
      };
      save(payload).then(() => {
        this.$message({
          type: "success",
          message: this.type === "add" ? "新增成功" : "编辑成功",
        });
        this.isShow = false;
        this.$emit("refresh");
      });
    },
    getDetail() {
      show({ id: this.id }).then((res) => {
        this.form = {
          year: String(res.year || getCurrentYear()),
          plan_system_id: res.plan_system_id || res.plan_system?.id || res.plan_system_detail?.id || "",
          course_type_id: res.course_type_id || res.course_type?.id || res.type_detail?.id || "",
          course_name: res.course_name || res.name || "",
          details: this.getDetailListFromResponse(res),
        };
      });
    },
    handleDeletePlan() {
      this.$confirm(
        "删除该计划将删除所有的模块/期数，是否确认删除？",
        "提示",
        {
          type: "warning",
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }
      ).then(() => {
        destroy({ id: this.id }).then(() => {
          this.$message.success("删除成功");
          this.isShow = false;
          this.$emit("refresh");
        });
      }).catch(() => {});
    },
    resetForm() {
      this.id = "";
      this.form = getDefaultForm();
      this.$refs.dialog.reset();
    },
  },
  watch: {
    isShow(newVal) {
      if (newVal) {
        if (this.type === "editor" && this.id) {
          this.getDetail();
        }
      } else if (this.$refs.dialog) {
        this.resetForm();
      }
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .year,
::v-deep .plan_system_id,
::v-deep .course_type_id,
::v-deep .course_name,
::v-deep .details {
  flex-basis: 100%;
}

.detail-label {
  align-self: flex-start;
  padding-top: 8px;
}

.detail-wrap {
  width: 100%;
}

.detail-toolbar {
  margin-bottom: 10px;
}

.detail-tip {
  margin-top: 8px;
  font-size: 12px;
  color: #909399;
}

.danger-actions {
  margin-top: 16px;
  text-align: right;
}
</style>