zc_saas_admin/src/views/Marketing/goods/spec/specAdd.vue

<template>
  <div id="specAdd">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="170px"
      hide-required-asterisk
    >
      <template v-if="!isNext">
        <el-form-item label="使用的业务层次" required>
          <div style="display: flex">
            <el-form-item prop="educationTypeId">
              <el-select
                style="margin-right: 24px"
                v-model="ruleForm.educationTypeId"
                placeholder="请选择教育类型"
                :disabled="isNext"
                @change="changeEduType"
              >
                <el-option
                  v-for="(item, index) in eduTypeOptions"
                  :key="index"
                  :label="item.educationName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item prop="businessId">
              <el-select
                :disabled="isNext"
                v-model="ruleForm.businessId"
                placeholder="请选择业务层次"
              >
                <el-option
                  v-for="(item, index) in newCourTypeOptions"
                  :key="index"
                  :label="item.projectName + '-' + item.businessName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model.trim="ruleForm.name" style="width: 220px"></el-input>
        </el-form-item>
        <el-form-item label="商品规格" class="eee" prop="specList">
          <div class="spec-title">最多添加两个商品规格类型</div>
          <Spec-box
            ref="specBox"
            v-for="(item, index) in ruleForm.specList"
            :key="index"
            v-model="ruleForm.specList"
            :num="index"
          >
          </Spec-box>
          <el-button
            :disabled="ruleForm.specList.length >= 2"
            size="mini"
            style="margin: 20px"
            type="primary"
            icon="el-icon-plus"
            @click="addSpec"
            >添加规则</el-button
          >
        </el-form-item>
        <el-form-item label=" " style="margin-top: 40px">
          <el-button type="primary" @click="submitForm">下一步</el-button>
        </el-form-item></template
      >
      <template v-else>
        <el-form-item label="商品配置">
          <Config-table
            :businessId="ruleForm.businessId"
            :educationTypeId="ruleForm.educationTypeId"
            :tableData="tableData"
            :specList="ruleForm.specList"
          ></Config-table>
        </el-form-item>
        <el-form-item label=" " style="margin-top: 40px">
          <el-button type="primary" @click="isNext = false">上一步</el-button>
          <el-button type="primary" @click="back">返回</el-button>
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>

<script>
import SpecBox from "./compoent/SpecBox.vue";
import ConfigTable from "./compoent/configTable.vue";
import { getSpecDetail, changeSpec } from "@/api/resource/good";
export default {
  data() {
    var checkList = (rule, value, callback) => {
      if (!this.ruleForm.specList.length) {
        callback(new Error("请先添加规则"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {},
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        educationTypeId: [
          { required: true, message: "请选择教育类型", trigger: "change" },
        ],
        businessId: [
          { required: true, message: "请选择业务层次", trigger: "change" },
        ],
        specList: [{ validator: checkList }],
      },
      isNext: false,
      eduTypeOptions: [],
      newCourTypeOptions: [],
      tableData: [],
    };
  },
  methods: {
    changeEduType() {
      this.ruleForm.businessId = undefined;
      this.newCourTypeOptions = [];
      this.$api
        .inquirebusinessList({
          status: 1,
          educationId: this.ruleForm.educationTypeId,
        })
        .then((res) => {
          this.newCourTypeOptions = res.rows;
        });
    },
    resetFrom() {
      this.ruleForm = {
        educationTypeId: undefined,
        businessId: undefined,
        specTemplateId: "",
        name: "",
        specList: [],
      };
      this.addSpec();
    },
    addSpec() {
      if (this.ruleForm.specList.length == 2) {
        return this.$message({
          message: "最多添加两个商品规格",
          type: "warning",
        });
      }
      this.ruleForm.specList.push({
        name: "",
        specAttrList: [{ name: "", sort: undefined }],
      });
    },
    submitForm() {
      this.checkSpecBox() &&
        changeSpec(this.ruleForm).then((res) => {
          this.isNext = true;
          // this.ruleForm.specTemplateId = res.data[0].specTemplateId;
          this.getSpecDetail(res.data[0].specTemplateId)
          res.data.map((ele) => {
            ele.attrListVos.map((e, i) => {
              ele["value" + i] = e.value;
            });
          });
          this.tableData = res.data;
        });
    },
    checkSpecBox() {
      let boxs = [this, ...this.$refs.specBox];
      let result = true;
      for (const box of boxs) {
        box.$refs["ruleForm"].validate((valid) => {
          if (!valid) result = false;
        });
      }
      return result;
    },
    getSpecDetail(id) {
      getSpecDetail(id).then((res) => {
        Object.keys(this.ruleForm).map((e) => {
          this.ruleForm[e] = res.data[e];
        });
      });
    },
    back() {
      this.$router.go(-1);
    },
  },
  computed: {},
  created() {
    this.resetFrom();
    this.$api.inquireCourseEducationType({ status: 1 }).then((res) => {
      this.eduTypeOptions = res.rows;
    });
  },
  components: {
    SpecBox,
    ConfigTable,
  },
};
</script>

<style  lang="scss" scoped>
#specAdd {
  padding-top: 30px;
  .spec-title {
    padding-left: 20px;
    height: 20px;
    color: #999;
  }
  .el-form {
    /deep/ {
      .eee {
        .el-form-item__content {
          margin-top: 20px;
          background: #eee;
        }
      }
    }
  }
}
</style>