dy-admin-manager/src/views/withdrawal-application/modals/visit.vue

<template>
  <div>
    <el-form
      :model="visitForm"
      label-width="120px"
      label-position="right"
      ref="visitForm"
      :rules="visitRules"
    >
      <el-form-item label="学生姓名">
        <p>{{ userName }}</p>
      </el-form-item>
      <el-form-item label="回访类型" prop="visitType">
        <el-cascader
          expand-trigger="hover"
          clearable
          style="width: 80% !important"
          placeholder="请选择回访类型"
          :options="visitChiose"
          v-model="visitForm.visitType"
        >
        </el-cascader>
      </el-form-item>
      <el-form-item label="回访日期" prop="visitTime">
        <el-date-picker
          v-model.trim="visitForm.visitTime"
          align="right"
          type="date"
          style="width: 80% !important"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="学员情况" prop="overview">
        <el-input
          type="textarea"
          v-model="visitForm.overview"
          style="width: 80% !important"
          placeholder="请输入学员情况"
          :rows="3"
          maxlength="50"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item label="家长反馈" prop="feedback">
        <el-input
          type="textarea"
          v-model="visitForm.feedback"
          style="width: 80% !important"
          placeholder="请输入家长反馈"
          :rows="3"
          maxlength="50"
          show-word-limit
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: right;margin-right: 15%;">
      <el-button @click="$emit('close')">取 消</el-button>
      <el-button type="primary" @click="submitAddVisit">确 定</el-button>
    </div>
  </div>
</template>
<script>
import cleanDeep from 'clean-deep'
import { visitChiose } from "@/utils/searchArray";
import { addVisit } from "@/views/returnVisitManager/api"
export default {
  props: ['detail', 'username'],
  data() {
    return {
      visitChiose,
      visitForm: {
        musicGroupId: "",
        overview: "",
        purpose: "",
        studentId: "",
        type: "",
        visitTime: "",
        visitType: "",
        feedback: "",
        studentName: "",
      },
      visitRules: {
        overview: [{ required: true, message: "请输入学生近况" }],
        feedback: [{ required: true, message: "请输入家长反馈" }],
        visitTime: [{ required: true, message: "请输入回访时间" }],
        visitType: [{ required: true, message: "请选择回访类型" }],
      },
    }
  },
  computed: {
    userName() {
      return this.username || this.detail.user?.username
    }
  },
  methods: {
    submitAddVisit() {
      this.$refs.visitForm.validate((res) => {
        if (res) {
          const { visitType, ...rest } = this.visitForm
          const data = {
            ...rest,
            objectId: this.detail.id,
            studentName: this.userName,
            musicGroupId: this.detail.musicGroupId,
            studentId: this.detail.userId,
            type: visitType[0],
            purpose: visitType[1],
          }
          addVisit(cleanDeep(data)).then((res) => {
            if (res.code === 200) {
              this.$message.success("新增成功");
              this.$emit('close')
              this.$emit('submited')
            }
          });
        }
      });
    },
  }
}
</script>