saas_entrepot_admin/src/views/education/classManageMent/otherPlatforms/manageClass/baseInfo.vue

<template>
  <div id="baseInfo">
    <div class="YZsty">
      <el-row :gutter="20">
        <el-form
          label-position="right"
          label-width="130px"
          :model="listData"
          :rules="rules"
          ref="listData"
        >
          <el-col :span="24">
            <el-form-item label="所属商品课程">
              <div class="flex_s">
                <div>商品编码：{{ listData.goodsList[0].code }}</div>
                <div style="display: flex">
                  <div>商品业务层级：</div>
                  <div style="flex: 1">
                    {{
                      `${listData.goodsList[0].educationName}-${listData.goodsList[0].projectName}-${listData.goodsList[0].businessName}`
                    }}
                  </div>
                </div>
                <div>学时：{{ listData.goodsList[0].classHours }}</div>
                <div>年份：{{ listData.goodsList[0].year }}</div>
                <div>商品名称：{{ listData.goodsList[0].goodsName }}</div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <div class="fgx"></div>
          </el-col>
          <el-col :span="12">
            <el-form-item label="班级编码" prop="gradeCode">
              <el-input
                disabled
                v-model="listData.gradeCode"
                placeholder="请填写班级编码"
              ></el-input>
            </el-form-item>
            <el-form-item label="班级名称" prop="className">
              <el-input
                v-model="listData.className"
                placeholder="请填写班级名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="学员上限" prop="studentUpper">
              <el-input-number
                :min="minNums"
                :controls="false"
                v-model="listData.studentUpper"
                placeholder="请填写学员上限"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="当前学员人数" prop="studentNum">
              <el-input-number
                :min="minNums"
                :controls="false"
                disabled
                v-model="listData.studentNum"
                placeholder="请填写学员上限"
              ></el-input-number>
            </el-form-item>
            <el-form-item
              label="开放学习时间"
              :prop="
                listData.learningStatus == 3
                  ? 'learningTimeStart'
                  : 'learningStatus'
              "
            >
              <!-- <el-button
              style="margin-right: 14px"
              size="mini"
              v-if="listData.learningStatus"
              @click="listData.learningStatus = ''"
              >清除选择</el-button
            > -->
              <el-radio-group
                v-model="listData.learningStatus"
                @change="changeLearning"
              >
                <el-radio :label="1">即刻</el-radio>
                <el-radio :label="2">待定</el-radio>
                <el-radio :label="3">日期</el-radio>
              </el-radio-group>
              <el-date-picker
                v-if="listData.learningStatus === 3"
                v-model="listData.learningTimeStart"
                type="datetime"
                value-format="timestamp"
                placeholder="请选择开放学习时间"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="状态" prop="status">
              <el-radio-group v-model="listData.status">
                <el-radio :label="1">有效</el-radio>
                <el-radio :label="0">无效</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="官方班级号">
              <el-button
                style="margin-right: 14px"
                size="mini"
                v-if="
                  (listData.classStatus || listData.classStatus === 0) &&
                  !classStatusDis
                "
                @click="clearClassNumber"
                >清除选择</el-button
              >
              <el-radio-group
                v-model="listData.classStatus"
                @change="changeClassStatus"
                :disabled="classStatusDis"
              >
                <el-radio :label="0">预报名(未开班)</el-radio>
                <el-radio :label="1">已开班</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              label=""
              prop="officialName"
              v-if="listData.classStatus === 1"
            >
              <el-input
                :disabled="classStatusDis"
                placeholder="请填写继教二建官方班级"
                v-model="listData.officialName"
              ></el-input>
            </el-form-item>
            <div class="dis_style" v-if="listData.classStatus === 1">
              <el-form-item label="班级有效期" prop="classStartTime">
                <el-date-picker
                  v-model="listData.classStartTime"
                  type="datetime"
                  value-format="timestamp"
                  placeholder="选择开始日期时间"
                  @change="changeTimeList1"
                  :disabled="classStartStatus"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label-width="10px" label="" prop="classEndTime">
                <el-date-picker
                  v-model="listData.classEndTime"
                  type="datetime"
                  value-format="timestamp"
                  placeholder="选择结束日期时间"
                  @change="changeTimeList2"
                  :disabled="classEndStatus"
                >
                </el-date-picker>
              </el-form-item>
            </div>

            <!-- <el-tooltip class="item" effect="dark" placement="right">
                <div slot="content">
                  商品学习有效期：{{
                    $methodsTools.onlyForma(
                      listData.goodsList[0].studyStartTime
                    )
                  }}
                  至
                  {{
                    $methodsTools.onlyForma(listData.goodsList[0].studyEndTime)
                  }}
                </div>
                <i
                  style="margin-left: 10px; font-size: 20px; color: #e6a23c"
                  v-show="timeArrays.length"
                  class="el-icon-warning"
                ></i>
              </el-tooltip> -->
            <el-form-item label="考期" prop="examineId">
              <el-select
                v-model="listData.examineId"
                placeholder="请选择考期"
                clearable
              >
                <el-option
                  v-for="(item, index) in courseExamine"
                  :key="index"
                  :label="item.examineName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="报考地区(省)" prop="areasId">
              <el-select
                v-model="listData.areasId"
                placeholder="请选择报考地区(省)"
                @change="getNewCityList"
                clearable
              >
                <el-option
                  v-for="(item, index) in areas"
                  :key="index"
                  :label="item.areaName"
                  :value="item.areaId"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="报考地区(地市)"
              :prop="listData.areasId ? 'cityId' : ''"
              v-if="listData.areasId"
            >
              <el-select
                v-model="listData.cityId"
                placeholder="请选择报考地区(地市)"
                clearable
              >
                <el-option
                  v-for="(item, index) in newCityList"
                  :key="index"
                  :label="item.areaName"
                  :value="item.areaId"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="指派班主任">
              <el-select
                v-model="listData.sysUserId"
                placeholder="请选择指派班主任"
                clearable
              >
                <el-option
                  v-for="(item, index) in teacherList"
                  :key="index"
                  :label="item.nickName"
                  :value="item.userId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <div v-if="statusShow === 1">
              <el-form-item label="官方信息推送" prop="interfacePushId">
                <el-select
                  v-model="listData.interfacePushId"
                  placeholder="请选择官方信息推送"
                  :disabled="copyData.interfacePushId ? true : false"
                  clearable
                >
                  <el-option
                    v-for="(item, index) in type1List"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="官方学时推送" prop="interfacePeriodId">
                <el-select
                  v-model="listData.interfacePeriodId"
                  placeholder="请选择官方学时推送"
                  :disabled="copyData.interfacePeriodId ? true : false"
                  clearable
                >
                  <el-option
                    v-for="(item, index) in type3List"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="官方账号标记(有接口+标记功能)">
                <el-select
                  v-model="listData.interfaceAccountId"
                  placeholder="请选择官方学习账号开通"
                  :disabled="
                    copyData.noInterfaceAccountId || copyData.interfaceAccountId
                      ? true : listData.noInterfaceAccountId ? true
                      : false
                  "
                  clearable
                >
                  <el-option
                    v-for="(item, index) in type2List"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="官方账号标记(无接口+标记功能)">
                <el-select
                  v-model="listData.noInterfaceAccountId"
                  placeholder="请选择官方账号标记(无接口+标记功能)"
                  :disabled="
                    copyData.noInterfaceAccountId || copyData.interfaceAccountId
                      ? true : listData.interfaceAccountId ? true
                      : false
                  "
                  clearable
                >
                  <el-option
                    v-for="(item, index) in type4List"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <!-- <el-form-item
                v-if="listData.interfaceAccountId"
                label="学习网址"
                prop="officialLearningUrl"
              >
                <el-input
                  v-model="listData.officialLearningUrl"
                  placeholder="请输入学习的网址"
                ></el-input>
              </el-form-item> -->
            </div>
            <el-form-item label="备注" prop="remark">
              <el-input
                type="textarea"
                :rows="5"
                v-model="listData.remark"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" style="text-align: center">
            <el-button @click="backPage">返回</el-button>
            <el-button type="primary" @click="submitForm('listData')"
              >确定</el-button
            >
          </el-col>
        </el-form>
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      copyData: {},
      classStartStatus: false,
      classEndStatus: false,
      minNums: 0,
      listData: {
        goodsList: [{}],
      },
      rules: {
        className: [
          { required: true, message: "请填写班级名称", trigger: "blur" },
        ],
        officialLearningUrl: [
          { required: true, message: "请输入学习的网址", trigger: "blur" },
        ],
        officialName: [
          { required: true, message: "请填写官方班级", trigger: "blur" },
        ],
        studentUpper: [
          { required: true, message: "请填写学员上限", trigger: "blur" },
          {
            validator(rule, value, callback) {
              var reg = /^[1-9]\d*$/;
              if (reg.test(value)) {
                callback();
              } else {
                callback(new Error("请规范输入学员上限数量"));
              }
            },
            trigger: "blur",
          },
        ],
        studentNum: [
          { required: true, message: "请填写学员上限", trigger: "blur" },
        ],
        classStartTime: [
          { required: true, message: "请选择开始时间", trigger: "change" },
        ],
        classEndTime: [
          { required: true, message: "请选择结束时间", trigger: "change" },
        ],
        status: [{ required: true, message: "请选择状态", trigger: "change" }],
        learningTimeStart: [
          {
            type: "date",
            required: true,
            message: "请选择开放学习时间",
            trigger: "change",
          },
        ],
        cityId: [
          {
            required: true,
            message: "请选择报考地市",
            trigger: ["blur", "change"],
          },
        ],
      },
      cityList: [],
      classStatusDis: false,
      newCityList: [],
      //	1官方推送 2官方学习账号开通 3官方学时推送
      type1List: [],
      type2List: [],
      type3List: [],
      type4List: [],
      teacherList: [],
      statusShow: 0, //0隐藏1出现
      timeArrays: [], //限制班级有效期时间
      disabledFunc: false,
    };
  },
  computed: { ...mapGetters(["courseExamine", "areas"]) },
  mounted() {
    this.$modal.loading("正在导入数据，请稍后...");
    this.getInfoCityDict();
    this.getVoselect();
    this.search();
  },
  methods: {
    clearClassNumber() {
      this.listData.classStatus = "";
      this.changeClassStatus();
    },
    changeTimeList1(arr) {
      if (!arr) {
        return;
      }
      // if (arr < this.timeArrays[0] || arr >= this.timeArrays[1]) {
      //   this.$message.warning("超出商品学习有效期，请重新选择");
      //   this.listData.classStartTime = "";
      // } else
      if (this.listData.classEndTime && arr > this.listData.classEndTime) {
        this.$message.warning("开始时间不能大于等于结束时间，请重新选择");
        this.listData.classStartTime = "";
      }
    },
    changeTimeList2(arr) {
      if (!arr) {
        return;
      }
      // if (arr < this.timeArrays[0] || arr > this.timeArrays[1]) {
      //   this.$message.warning("超出商品学习有效期，请重新选择");
      //   this.listData.classEndTime = "";
      // } else
      if (this.listData.classStartTime && arr <= this.listData.classStartTime) {
        this.$message.warning("结束时间不能小于等于开始时间，请重新选择");
        this.listData.classEndTime = "";
      }
    },
    //   初始获取数据
    search() {
      this.$api
        .obtainGradegrade(this.$route.query.id)
        .then((res) => {
          if (res.data.classStatus === 1) {
            this.classStatusDis = true;
          }
          if (res.data.areasId) {
            this.newCityList = this.cityList.filter((item) => {
              return item.parentId == res.data.areasId;
            });
          }
          if (res.data.learningStatus === 3) {
            res.data.learningTimeStart = this.$methodsTools.time10to13(
              res.data.learningTimeStart,
              2
            );
          }
          if (res.data.classStartTime && res.data.classEndTime) {
            res.data.classStartTime = this.$methodsTools.time10to13(
              res.data.classStartTime,
              2
            );
            res.data.classEndTime = this.$methodsTools.time10to13(
              res.data.classEndTime,
              2
            );
            // classStartStatus
            if (new Date().getTime() > res.data.classEndTime) {
              this.classStartStatus = true;
              this.classEndStatus = true;
            } else {
              this.classStartStatus = true;
            }
          }
          if (
            res.data.goodsList[0].studyStartTime &&
            res.data.goodsList[0].studyEndTime
          ) {
            this.timeArrays = [
              this.$methodsTools.time10to13(
                res.data.goodsList[0].studyStartTime,
                2
              ),
              this.$methodsTools.time10to13(
                res.data.goodsList[0].studyEndTime,
                2
              ),
            ];
          }
          this.minNums = res.data.studentNum;
          this.copyData = JSON.parse(JSON.stringify(res.data));
          this.listData = res.data;
        })
        .finally(() => {
          this.$modal.closeLoading();
        });
    },
    //官方接口是否出现
    getVoselect() {
      this.$api.inquirelistInterfaceVoselect().then((res) => {
        if (res.data === 1) {
          this.getGFList();
        }
        this.statusShow = res.data;
      });
      this.$api
        .obtainUserList({ status: 1, roleName: "班主任" })
        .then((res) => {
          this.teacherList = res.rows;
        });
    },
    //获取官方接口
    getGFList() {
      this.$api.inquirelistInterfaceVo().then((res) => {
        res.rows.forEach((item) => {
          if (item.type === 1) {
            this.type1List.push(item);
          }
          if (item.type === 2) {
            this.type2List.push(item);
          }
          if (item.type === 3) {
            this.type3List.push(item);
          }
          if (item.type === 4) {
            this.type4List.push(item);
          }
        });
      });
    },
    //获取地市列表
    getInfoCityDict() {
      this.$api.inquireapplyCityList({ status: 1, areaType: 2 }).then((res) => {
        this.cityList = res.rows;
      });
    },
    //获取最新地市列表
    getNewCityList(n) {
      this.newCityList = this.cityList.filter((item) => {
        return item.parentId == n;
      });
      this.listData.cityId = "";
    },
    //改变开放学习状态-清空选择框
    changeLearning() {
      this.listData.learningTimeStart = "";
    },
    //改变班级号状态-清空输入框
    changeClassStatus() {
      this.listData.officialName = "";
      this.listData.classStartTime = "";
      this.listData.classEndTime = "";
      this.$nextTick(() => {
        this.$refs.listData.clearValidate();
      });
    },
    //返回
    backPage() {
      this.$store.dispatch("tagsView/delView", this.$route).then((res) => {
        this.$router.push({
          path: "classList",
        });
      });
    },
    //表单验证
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.submit(); //提交
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //提交
    submit() {
      var data = JSON.parse(JSON.stringify(this.listData));
      if (!data.classStartTime && !data.classEndTime) {
        data.classStartTime = null;
        data.classEndTime = null;
      } else {
        if (data.classStartTime && data.classEndTime) {
          data.classStartTime = data.classStartTime / 1000;
          data.classEndTime = data.classEndTime / 1000;
        } else {
          this.$message.warning("请选择班级有效期的开始时间与结束时间");
          return;
        }
      }
      if (data.learningStatus === 3) {
        data.learningTimeStart = this.listData.learningTimeStart / 1000;
      }
      // if(!data.interfaceAccountId){
      //   delete data.officialLearningUrl
      // }
      delete data.goodsList;
      this.$api.editGradegrade(data).then((res) => {
        this.$message.success("修改成功");
        this.search();
      });
    },
  },
};
</script>

<style lang="less" scoped>
.YZsty {
  background-color: #eee;
  padding: 30px;
  margin-top: 16px;
}
/deep/.el-button {
  border-radius: 8px;
}
/deep/.el-dialog {
  border-radius: 8px;
  .el-dialog__header {
    padding: 0;
    .hearders {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0px 18px 0px 20px;
      border-bottom: 1px solid #e2e2e2;
      .leftTitle {
        font-size: 14px;
        font-weight: bold;
        color: #2f4378;
      }
      .rightBoxs {
        display: flex;
        align-items: center;
        img {
          width: 14px;
          height: 14px;
          margin-left: 13px;
          cursor: pointer;
        }
      }
    }
  }
  .el-dialog__footer {
    padding: 0;
    .dialog-footer {
      padding: 0px 40px;
      height: 70px;
      border-top: 1px solid #e2e2e2;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
}
/deep/.radioTables > .el-radio__label {
  display: none;
}
.fgx {
  border-bottom: 1px dashed #999;
  margin-bottom: 20px;
}
.flex_s {
  display: flex;
  // align-items: center;
  flex-wrap: wrap;
  & > div {
    flex-shrink: 0;
    width: 33%;
    font-weight: bold;
  }
}
.dis_style {
  display: flex;
  align-items: center;
}
</style>