dy-admin-manager/src/views/studentManager/components/studentVisit.vue

<template>
  <div>
    <!-- class="m-container" -->
    <div class="m-core">
      <save-form
        :inline="true"
        @submit="search"
        @reset="onReSet"
        :model="searchForm"
        save-key="studentManager-returnVisitList"
        ref="searchForm"
      >
        <el-form-item>
          <el-select
            v-model.trim="searchForm.visiterType"
            placeholder="请选择角色"
            clearable
            filterable
          >
            <el-option value="TEACHER" label="指导老师"></el-option>
            <el-option value="EDU_TEACHER" label="乐团主管"></el-option>
          </el-select>
        </el-form-item>

        <!-- @change="handleChange" -->
        <el-form-item>
          <el-cascader
            expand-trigger="hover"
            clearable
            placeholder="请选择回访类型"
            :options="visitChiose"
            v-model="searchForm.typeList"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model.trim="searchForm.probStatus"
            placeholder="问题状态"
            clearable
            filterable
          >
            <el-option :value="0" label="待跟进"></el-option>
            <el-option :value="1" label="已解决"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-date-picker
            v-model.trim="searchForm.timer"
            style="width: 420px"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="回访开始日期"
            end-placeholder="回访结束日期"
            :picker-options="{
              firstDayOfWeek: 1,
            }"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" native-type="submit">搜索</el-button>
          <el-button native-type="reset" type="primary">重置</el-button>
          <el-button
            v-if="permission('export/studentVisitRecord')"
            type="primary"
            @click="onExport"
            >导出</el-button
          >
        </el-form-item>
      </save-form>
      <el-button type="primary"    v-if="permission('visit/add/studentVisit')" style="margin-bottom:20px" @click="visitVisible= true">新增回访</el-button>
      <div class="tableWrap">
        <el-table
          :data="tableList"
          :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
        >
          <el-table-column align="center" prop="teacherName" label="老师姓名">
            <template slot-scope="scope">
              <copy-text>{{ scope.row.teacherName }}</copy-text>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="organName" label="所属分部">
            <template slot-scope="scope">
              <copy-text>{{ scope.row.organName }}</copy-text>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="visiterType" label="角色">
            <template slot-scope="scope">
              <div>
                {{ scope.row.visiterType | visiterType }}
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column align="center" prop="studentId" label="学生ID">
            <template slot-scope="scope">
              <copy-text>{{ scope.row.studentId }}</copy-text>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="studentName" label="学生姓名">
            <template slot-scope="scope">
              <copy-text>{{ scope.row.studentName }}</copy-text>
            </template>
          </el-table-column> -->

          <el-table-column align="center" prop="type" label="回访类型">
          </el-table-column>
          <el-table-column align="center" prop="purpose" label="回访目的">
          </el-table-column>
          <el-table-column align="center" prop="probStatus" label="问题状态">
            <template slot-scope="scope">
              <div>
                {{ scope.row.probStatus ? "已解决" : "待跟进" }}
              </div>
            </template>
          </el-table-column>

          <el-table-column align="center" prop="name" label="回访图片">
            <template slot-scope="scope">
              <div class="flexBox">
                <el-image
                  v-if="scope.row.attachments"
                  style="width: 60px; height: 60px"
                  fit="cover"
                  :src="scope.row.attachments.split(',')[0]"
                  :previewSrcList="scope.row.attachments.split(',')"
                >
                </el-image>
                <p v-if="scope.row.attachments.split(',').length - 1 > 0">
                  +{{ scope.row.attachments.split(",").length - 1 }}
                </p>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="visitTime" label="回访时间">
            <template slot-scope="scope">
              <div>
                {{
                  scope.row.visitTime ? scope.row.visitTime.split(" ")[0] : "--"
                }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="masterTeacherName" label="操作">
            <template slot-scope="scope">
              <div>
                <el-button type="text" @click="lookDetail(scope.row)"
                  >查看</el-button
                >
                <el-button
                  type="text"
                  v-if="
                    !scope.row.probStatus &&
                    permission('visit/updateProbStatus')
                  "
                  @click="updateState(scope.row)"
                  >状态修改</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          save-key="studentManager-returnVisitList"
          sync
          :total.sync="rules.total"
          :page.sync="rules.page"
          :limit.sync="rules.limit"
          :page-sizes="rules.page_size"
          @pagination="getList"
        />
      </div>
    </div>
    <el-dialog
      title="回访详情"
      width="740px"
      v-if="detailVisible"
      :visible.sync="detailVisible"
    >
      <div>
        <descriptions :column="2" v-if="activeRow" class="returnDialog">
          <descriptions-item label="老师姓名:">{{
            activeRow.teacherName
          }}</descriptions-item>
          <descriptions-item label="所属分部:">{{
            activeRow.organName
          }}</descriptions-item>
          <descriptions-item label="角色:">{{
            activeRow.visiterType | visiterType
          }}</descriptions-item>
          <descriptions-item label="学生姓名:">{{
            activeRow.studentName
          }}</descriptions-item>
          <descriptions-item label="回访类型:">{{
            activeRow.type
          }}</descriptions-item>
          <descriptions-item label="回访目的:">{{
            activeRow.purpose
          }}</descriptions-item>
          <descriptions-item
            label="家长反馈:"
            v-if="activeRow.type == '小课回访'"
            >{{
              activeRow.feedbackType | feedbackTypeFilter
            }}</descriptions-item
          >
          <descriptions-item
            label="反馈详情:"
            v-if="
              (activeRow.feedbackType == 'THINKING' ||
                activeRow.feedbackType == 'LOST') &&
              activeRow.type == '小课回访'
            "
            >{{
              activeRow.feedbackTypeDesc | feedbackTypeDescFilter
            }}</descriptions-item
          >
          <descriptions-item label="问题状态:">{{
            activeRow.probStatus ? "已解决" : "待跟进"
          }}</descriptions-item>

          <descriptions-item label="回访情况:" :span="6">{{
            activeRow.overview
          }}</descriptions-item>
          <descriptions-item
            :label="(activeRow.type == '小课回访' ||  activeRow.purpose == '考勤申诉') ? '原因' : '家长反馈'"
            :span="6"
            >{{ activeRow.feedback }}</descriptions-item
          >
          <descriptions-item label="回访图片" :span="6">
            <div class="list" v-if="imageList.length > 0">
              <div v-for="item in imageList" :key="item.url" class="item">
                <el-image
                  v-if="item"
                  :src="item"
                  :preview-src-list="imageList.map((item) => item)"
                  class="img"
                >
                </el-image>
              </div>
            </div>
            <empty v-else />
          </descriptions-item>
        </descriptions>
      </div>
    </el-dialog>
    <el-dialog
      title="新增回访"
      width="760px"
      :visible.sync="visitVisible"
      append-to-body
    >
      <visit
        v-if="visitVisible"
        :detail="{
          studentName:$route.query.username,
          studentId: $route.query.userId,
        }"
        :username="$route.query.username"
        @close="visitVisible = false"
        @submited="getList"
        :isMainGo="false"
        :useVisitType="false"
      />
    </el-dialog>
  </div>
</template>
<script>
import { visitChiose1 } from "@/utils/searchArray";
import { Export } from "@/utils/downLoadFile";
import pagination from "@/components/Pagination/index";
import { getEmployeeOrgan } from "@/api/buildTeam";
import {
  getVisitList,
  updateProbStatus,
} from "@/views/returnVisitManager/api.js";
import cleanDeep from "clean-deep";
import { getTimes } from "@/utils";
import { resetQuery } from "@/utils/utils";
import { permission } from "@/utils/directivePage";
import visit from "@/views/withdrawal-application/modals/visit";
import qs from "qs";
export default {
  components: { pagination,visit },
  data() {
    return {
      searchForm: {
        search: "",
        organId: "",
        visiterType: "",
        typeList: [],
        timer: [],
      },

      visitChiose: visitChiose1,
      organList: [],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
      tableList: [],
      imageList: [],
      detailVisible: false,
      activeRow: null,
      visitVisible:false
    };
  },
  mounted() {
    // getEmployeeOrgan().then((res) => {
    //   if (res.code == 200) {
    //     this.organList = res.data;
    //   }
    // });
    this.$store.dispatch("setBranchs");

    if (this.$route.query) {
      // 兼容老功能
      if (this.$route.query.search) {
        this.searchForm.search = this.$route.query.teacher;
        this.searchForm.search = this.$route.query.search;
      }

      this.searchForm.timer = this.$route.query.timer;
    }
    if (this.$route.query.typeList && this.$route.query.typeList.length > 0) {
      this.searchForm.typeList = this.$route.query.typeList;
    }
    this.getList();
    if (this.$route.query.search || this.$route.query.timer) {
      // console.log( )
      resetQuery(this, { timer: undefined, search: undefined });
    }
  },
  // activated() {
  //   this.getList();
  // },
  methods: {
    handleChange(val) {
      this.searchForm.type = val[0];
      this.searchForm.purpose = val[1];
    },
    search() {
      // this.$router.replace({query:{...this.$route.query,timer:undefined,teacher:undefined}})

      this.rules.page = 1;
      this.getList();
    },
    onReSet() {
      this.type = [];
      this.timer = [];
      this.searchForm = {
        search: "",
        organId: "",
        visiterType: "",
        type: "",
        purpose: "",
        typeList: [],
        timer: [],
      };
      this.search();
    },
    getList() {
      // cleanDeep
      let { timer, typeList, ...rest } = this.searchForm;
      let type,
        purpose = null;
      if (typeList.length > 0) {
        type = typeList[0];
        purpose = typeList[1];
      }

      let params = {
        ...rest,
        page: this.rules.page,
        rows: this.rules.limit,
        ...getTimes(timer, ["startTime", "endTime"]),
        type,
        purpose,
        studentId: this.$route.query.userId,
      };
      getVisitList(cleanDeep(params)).then((res) => {
        if (res.code == 200) {
          this.tableList = res.data.rows;
          this.rules.total = res.data.total;
        }
      });
    },
    lookDetail(row) {
      this.activeRow = row;
      this.imageList = this.activeRow.attachments.split(",");
      this.detailVisible = true;
    },
    updateState(row) {
      this.$confirm("是否将问题状态更变为'已解决'", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then((res) => {
        updateProbStatus({ id: row.id, probStatus: 1 }).then((res) => {
          this.$message.success("修改成功");
          this.getList();
        });
      });
    },
    changeTimer(val) {
      if (val && val.length > 0) {
        this.searchForm.startTime = this.timer[0];
        this.searchForm.endTime = this.timer[1];
      } else {
        this.searchForm.startTime = null;
        this.searchForm.endTime = null;
      }
    },
    permission(str) {
      return permission(str);
    },
    onExport() {
      let { timer, typeList, ...rest } = this.searchForm;
      let type,
        purpose = null;
      if (typeList.length > 0) {
        type = typeList[0];
        purpose = typeList[1];
      }

      let params = {
        ...rest,
        page: this.rules.page,
        rows: this.rules.limit,
        ...getTimes(timer, ["startTime", "endTime"]),
        type,
        purpose,
      };
      Export(
        this,
        {
          url: "/api-web/export/studentVisitRecord",
          params: qs.stringify(
            cleanDeep({
              ...params,
            })
          ),
          fileName: `学员回访导出.xls`,
          method: "post",
        },
        "确定导出学员回访"
      );
    },
  },
  watch: {
    detailVisible(val) {
      if (!val) {
        this.activeRow = null;
        this.imageList = [];
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.msg {
  min-width: 120px;
}
.label {
  width: 520px;
}
::v-deep .description-title {
  margin-bottom: 0;
}
.returnDialog {
  ::v-deep .description-view {
    .description-content {
      white-space: normal !important;
    }
  }
}
.flexBox {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.img-container {
  margin: 10px auto;
}
.item {
  width: 150px;
  margin-top: 10px;
  margin-right: 10px;
  display: inline-block;
  position: relative;
}
.img {
  width: 150px;
  height: 150px;
}
.ctrl-bar {
  background-color: rgba(0, 0, 0, 0.45);
  height: 30px;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 15px;
  i {
    color: #fff;
    cursor: pointer;
  }
}
</style>