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" :rules="[{ required: true, message: '选择回访类型' }]">
        <el-cascader
          :disabled="isMainGo || !!useVisitType"
          expand-trigger="hover"
          clearable
          style="width: 80% !important"
          placeholder="请选择回访类型"
          :options="visitChiose"
          v-model="visitForm.visitType"
          @change="changeVisitType"
        >
        </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" v-if="!(visitForm.visitType[0]=='常规回访'&&visitForm.visitType[1]=='考勤申诉')">
        <el-input
          type="textarea"
          v-model="visitForm.overview"
          style="width: 80% !important"
          placeholder="请输入学员情况"
          :rows="3"
          maxlength="400"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item
        label="家长反馈"
        prop="feedback"
        v-if="visitForm.visitType[0] != '小课回访'&&!(visitForm.visitType[0]=='常规回访'&&visitForm.visitType[1]=='考勤申诉')"
      >
        <el-input
          type="textarea"
          v-model="visitForm.feedback"
          style="width: 80% !important"
          placeholder="请输入家长反馈"
          :rows="3"
          maxlength="400"
          show-word-limit
        ></el-input>
      </el-form-item>


      <el-form-item
        label="学员状态"
        prop="feedbackType"
        v-if="visitForm.visitType[0] == '小课回访'"
        :rules="[{ required: true, message: '选择学员状态' }]"
      >
        <el-radio-group
          v-model="visitForm.feedbackType"
          @change="
            () => {
              visitForm.feedbackTypeDesc = '';
            }
          "
        >
          <el-radio-button
            :label="item.value"
            v-for="(item, index) in feedbackTypeList"
            :key="index"
            >{{ item.label }}</el-radio-button
          >
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="家长反馈"
        prop="changeFeedbackTypeDesc"
        v-if="(visitForm.visitType[0]=='常规回访'&&visitForm.visitType[1]=='考勤申诉')"
        :rules="[{ required: true, message: '选择家长反馈' }]"
      >
      <el-radio-group v-model="visitForm.feedbackTypeDesc" @change="changeFeedbackTypeDesc">
          <el-radio-button
            :label="item.value"
            v-for="(item, index) in feedbackTypeDescList"
            :key="index"
            >{{ item.label }}</el-radio-button
          >
        </el-radio-group>
      </el-form-item>
      <!-- <el-form-item
        label="反馈详情"
        prop="feedbackTypeDesc"
        :rules="[{ required: true, message: '选择反馈详情' }]"
        v-if="
          (visitForm.feedbackType == 'THINKING' ||
            visitForm.feedbackType == 'LOST') &&
          visitForm.visitType[0] == '小课回访'
        "
      >
        <el-radio-group v-model="visitForm.feedbackTypeDesc">
          <el-radio-button
            :label="item.value"
            v-for="(item, index) in feedbackTypeDescList"
            :key="index"
            >{{ item.label }}</el-radio-button
          >
        </el-radio-group>
      </el-form-item> -->
      <!-- probStatus   -->
      <el-form-item
        label="问题状态"
        prop="probStatus"
        :rules="[{ required: true, message: '选择问题状态' }]"
      >
        <el-radio-group v-model="visitForm.probStatus">
          <el-radio-button label="1" >已解决</el-radio-button>
          <el-radio-button label="0">待跟进</el-radio-button>
        </el-radio-group>
      </el-form-item>


      <!--   :rules="[{ required: true, message: '请输入家长反馈内容' }]" -->
      <el-form-item
        label="原因"
        prop="feedback"
        :rules="[{ required: visitForm.feedbackTypeDesc=='OTHER'?true:false, message: '请输入家长反馈内容' }]"
        v-if="visitForm.visitType[0] == '小课回访' || (visitForm.visitType[0]=='常规回访'&&visitForm.visitType[1]=='考勤申诉'&&visitForm.feedbackTypeDesc=='OTHER')"
      >
        <el-input
          type="textarea"
          v-model="visitForm.feedback"
          style="width: 80% !important"
          placeholder="原因"
          :rows="3"
          maxlength="400"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item label="回访图片">
        <div style="width: 80% !important">
          <uploadImageList :uploaded="visitForm.attachments" />
        </div>
      </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,
  feedbackTypeList,
  feedbackTypeDescList,
} 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:visitChiose1,
      feedbackTypeList,
      feedbackTypeDescList:[{label:'生病',value:'SICK'},{label:'有事',value:'SOMETHING'},{label:'不想参加',value:'NO_PARTICIPATE'},{label:'其他',value:'OTHER'}]
      ,
      visitForm: {
        musicGroupId: "",
        overview: "",
        purpose: "",
        studentId: "",
        type: "",
        visitTime: "",
        visitType: [],
        feedback: "",
        studentName: "",
        attachments: [],
        feedbackTypeDesc: "",
        feedbackType: "",
        probStatus:'0'
      },
      visitRules: {
        // overview: [{ required: true, message: "请输入学生近况" }],
        probStatus: [{ required: true, message: "请选择问题状态" }],
        visitTime: [{ 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);
      this.$forceUpdate();
      console.log('useVisitType',this.useVisitType,this.visitForm)
    } else {
      this.visitChiose = visitChiose1;
    }
  },
  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;
    },
    isRequire() {
      if (
        this.visitForm.feedbackType == "THINKING" ||
        this.visitForm.feedbackType == "PENDING_PAYMENT"
      ) {
        return false;
      } else {
        return true;
      }
    },
  },
  methods: {
    submitAddVisit() {
      this.$refs.visitForm.validate((res) => {
        if (res) {
          const { visitType, ...rest } = this.visitForm;
          let attachmentsList = this.visitForm.attachments.map((item) => {
            return item.url;
          });
          const data = {
            ...rest,
            objectId: this.detail.id,
            studentName: this.userName,
            musicGroupId: this.detail.musicGroupId,
            studentId: this.studentId,
            type: visitType[0],
            purpose: visitType[1],
            attachments: attachmentsList.join(","),
          };
          addVisit(cleanDeep(data)).then((res) => {
            if (res.code === 200) {
              this.$message.success("保存成功");
              this.$emit("close");
              this.$emit("submited");
            }
          });
        }
      });
    },
    changeVisitType(val) {

      this.visitForm.feedbackTypeDesc = "";
      this.visitForm.feedbackType = "";
      this.visitForm.overview = "";
      this.visitForm.feedback = "";
    },
    changeFeedbackTypeDesc(val){
      console.log('changeFeedbackTypeDesc')
      this.visitForm.overview = "";
      this.visitForm.feedback = "";
    }
  },
};
</script>
<style lang="scss" scoped>
.visitBtnWrap {
  position: absolute;
  right: 90px;
  top: 82px;
  z-index: 20;
}
</style>