dy-admin-manager/src/views/studentManager/modals/addMusic.vue

<template>
  <div>
    <el-form :model="musicForm" label-width="100px" ref="form">
      <el-form-item
        label="乐器分类"
        prop="goodsCategoryId"
        :rules="[
          { required: true, message: '请选择乐器分类', trigger: 'blur' },
        ]"
      >
        <el-form-item>
          <el-select
            style="width: 400px !important"
            v-model.trim="musicForm.goodsCategoryId"
            filterable
            clearable
            @change="changeCategory"
            placeholder="乐器分类"
          >
            <el-option
              v-for="(item, index) in typeList"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form-item>
      <el-form-item
        label="乐器名称"
        prop="goodsId"
        :rules="[
          { required: true, message: '请选择乐器名称', trigger: 'blur' },
        ]"
      >
        <el-select
          style="width: 400px !important"
          :disabled="!musicForm.goodsCategoryId"
          v-model.trim="musicForm.goodsId"
          filterable
          clearable
          placeholder="乐器名称"
        >
          <el-option
            v-for="(item, index) in musicList"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="是否乐保"
        prop="status"
        :rules="[
          { required: true, message: '请选择是否乐保', trigger: 'blur' },
        ]"
      >
        <el-select
          style="width: 400px !important"
          v-model.trim="musicForm.status"
          clearable
          placeholder="是否乐保"
        >
          <el-option value="0" label="否"></el-option>
          <el-option value="1" label="是"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="乐保有效期"
        :rules="[
          { required: true, message: '请选择乐保有效期', trigger: 'blur' },
        ]"
        v-if="musicForm.status == 1"
        prop="date"
      >
        <el-date-picker
          style="width: 400px"
          v-model="musicForm.date"
          :clearable="false"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          :picker-options="{ firstDayOfWeek: 1 }"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { goodsQuery } from "@/api/businessManager";
import { addStudentInstrument, updateStudentInstrument } from "@/api/buildTeam";
import { getTimes } from "@/utils";
import dayjs from 'dayjs'
export default {
  props: ["categoryList", "operationData", "operationStatus"],
  data() {
    return {
      musicForm: {
        studentId: this.$route.query.userId,
        goodsId: "",
        goodsCategoryId: "",
        status: "",
        date: [],
      },
      typeList: this.categoryList,
      musicList: [],
    };
  },
  async mounted() {
    console.log(this.operationData)
    let operationData = this.operationData
    if(operationData) {
      let musicForm = this.musicForm
      musicForm.goodsCategoryId = operationData.goodsCategoryId
      if(operationData.goodsCategoryId) {
        await this.changeCategory(operationData.goodsCategoryId)
      }
      musicForm.goodsId = operationData.goodsId
      musicForm.goodsName = operationData.goodsName
      musicForm.status = operationData.status + ''
      if(operationData.startTime && operationData.endTime) {
        musicForm.date = [(operationData.startTime), (operationData.endTime)]
      } else {
        musicForm.date = []
      }

      musicForm.id = operationData.id
    }
  },
  methods: {
    changeCategory(val) {
      this.musicForm.goodsName = "";
      this.musicForm.goodsId = null;
      if (val) {
        goodsQuery({ goodsCategoryId: val, rows: 99999, type: 'INSTRUMENT' }).then((res) => {
          if (res.code == 200 && res.data) {
            this.musicList = res.data.rows;
          }
        });
      }
    },
    addMusicSubmit() {
      this.$refs.form.validate(async (res) => {
        if (res) {
          try {
            const { date, ...rest } = this.musicForm;
            let obj = {
              ...rest,
              ...getTimes(date, ["startTime", "endTime"], 'YYYY-MM-DD HH:mm:ss'),
            };
            if(this.operationStatus == 'create') {
              const res = await addStudentInstrument(obj);
              this.$message.success('添加成功')
            } else if(this.operationStatus == 'update') {
              const res = await updateStudentInstrument(obj);
              this.$message.success('修改成功')
            }
            this.$emit('close')
            this.$emit('getList')
          } catch (e) {
            console.log(e);
          }
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
</style>