dy-admin-manager/src/views/reaplceMusicPlayer/modals/resetInfo.vue

<template>
  <div>
    <el-form :model="form" label-width="80px" :inline="true" ref='form'>
      <el-form-item label="学员姓名">
        <div style="width: 180px">{{ detail.userName }}</div>
      </el-form-item>
      <el-form-item label="联系电话">
        <div>{{ detail.mobileNo }}</div>
      </el-form-item>
      <br />
      <el-form-item prop="subjectId" label="声部"  :rules="[{required: true, message: '请选择声部'}]">
        <el-select
          v-model.trim="form.subjectId"
          filterable
          clearable
          placeholder="请选择声部"
          @change="changeSound"
        >
          <el-option
            v-for="(item, i) in soundList"
            :key="i"
            :label="item.text"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="instrumentsId" label="品牌型号" >
        <el-select
          v-model.trim="form.instrumentsId"
          filterable
          clearable
          placeholder="请选择品牌型号"
        >
          <el-option
            v-for="(item, index) in branchList"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { getInstrumentSoundList,updateInstrumentActivity } from "../api";
const soundList = [
  { text: "长笛", value: 2 },
  { text: "单簧管", value: 4 },
  { text: "萨克斯", value: 5 },
  { text: "小号", value: 12 },
  { text: "圆号", value: 13 },
  { text: "长号", value: 14 },
  { text: "上低音号", value: 15 },
  { text: "大号", value: 17 },
  { text: "打击乐", value: 23 },
];
export default {
  props: ["detail"],
  data() {
    return {
      form: {
        id:this.detail.id,
        subjectId: "",
        instrumentsId: "",
      },
      branchList: [],
      soundList
    };
  },
  async mounted() {
    console.log(this.detail)
    await this.$store.dispatch("setSubjects");
    this.changeSound(this.detail.subjectId);
    this.form.subjectId = this.detail.subjectId;
    this.form.instrumentsId = this.detail.instrumentsId;
  },
  methods: {
    async changeSound(val) {
      this.form.instrumentsId = "";
      if (val) {
        try {
          const res = await getInstrumentSoundList({
            subjectId: val,
            organId: this.detail.organId,
            page: 1,
            rows: 999,
          });
          this.branchList = res.data.rows.map((item) => {
            return {
              name: item.brand + item.specification,
              id: item.id,
            };
          });
        } catch (e) {
          console.log(e);
        }
      }
    },
    submited(){
      this.$refs.form.validate( async (flag)=>{
        if(flag){
          try{
           const res = await updateInstrumentActivity({...this.form})
           this.$message.success('修改成功')
           this.$emit('close')
           this.$emit('getList')
          }catch(e){
            console.log(e)
          }

        }
      })
      // updateInstrumentActivity
    },


  },
};
</script>