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

<template>
  <div>
    <div class="visitBtnWrap">
      <auth auths='studentAttendance/findStudentAttendance'>
          <el-button type="text" @click="recordVisible = true">学员考勤</el-button>
      </auth>
       <auth :auths="['webCurseHomework/getStudentHomeWorks','extracurricularExercisesReply/queryPageList']">
         <el-button type="text" @click="workVisible=true">作业情况</el-button>
       </auth>
    </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
          :disabled='isMainGo || !!useVisitType'
          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"
           :picker-options="pickerOptions"
        ></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>
    <el-dialog
      title="学员考勤"
      width="1020px"
      :visible.sync="recordVisible"
      append-to-body
      v-if="recordVisible"
    >
    <record  :studentId="this.detail.userId"/>
    </el-dialog>

    <el-dialog
      v-if="workVisible"
      title="作业列表"
      width="1020px"
      :visible.sync="workVisible"
      append-to-body
    >
    <studentWork :studentId="this.detail.userId"/>
    </el-dialog>
  </div>
</template>
<script>
import cleanDeep from "clean-deep";
import { visitChiose,visitChiose1 } from "@/utils/searchArray";
import { addVisit } from "@/views/returnVisitManager/api";
import record from './record'
import studentWork from './studentWork'
export default {
  // useVisitType 自定义回访类型
  props: ["detail", "username",'isMainGo', "useVisitType"],
  components:{record,studentWork},
  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: "请选择回访类型" }],
      },
      recordVisible:false,
      workVisible:false,
        pickerOptions: {
        firstDayOfWeek: 1,
        disabledDate(time) {
          return time.getTime() > new Date().getTime();
        },
      },
    };
  },
  mounted(){
    if(this.isMainGo){
      this.visitChiose = visitChiose1
      this.$set(this.visitForm,'visitType',['常规回访','考勤申诉'])
    } else if(this.useVisitType) {
      this.visitChiose = visitChiose1
      this.$set(this.visitForm,'visitType', this.useVisitType)
    } else{
      this.visitChiose = visitChiose
    }
  },
  computed: {
    userName() {
      return this.username || this.detail.user?.username || this.detail.realName || this.detail.userName || this.detail.studentName
    },
    studentId(){
      return this.detail.userId || this.detail.studentId
    }
  },
  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.studentId,
            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>
<style lang="scss" scoped>
.visitBtnWrap {
  position: absolute;
  right: 90px;
  top: 82px;
  z-index: 20;
}
</style>