dy-admin-manager/src/views/teacherManager/teacherList.vue

<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>
      老师管理
    </h2>
    <div class="m-core">

      <!-- 搜索标题 -->
      <save-form
        :inline="true"
        @submit="search"
        @reset="onReSet"
        class="searchForm"
        :model="searchForm"
        ref="searchForm"
      >
        <el-form-item>
          <el-input
            v-model.trim="searchForm.search"
            clearable
               @keyup.enter.native="
              (e) => {
                e.target.blur();
                $refs.searchForm.save();
                search();
              }
            "
            placeholder="老师姓名或电话"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model.trim="searchForm.lockFlag"
            clearable
            filterable
            placeholder="老师状态"
          >
            <el-option
              v-for="item in teacherStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            style="width: 100% !important"
            filterable
            clearable
            v-model.trim="searchForm.subjectId"
            placeholder="专业技能"
          >
            <el-option
              v-for="(item, i) in selects.subjects"
              :key="i"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
          <!-- <el-select
            v-model.trim="searchForm.subjectId"
            filterable
            clearable
            placeholder="专业技能"
          >
            <el-option-group
              v-for="group in subjectList"
              :key="group.label"
              :label="group.label"
            >
              <el-option
                v-for="item in group.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-option-group>
          </el-select> -->
        </el-form-item>
        <el-form-item>
          <el-select
            v-model.trim="searchForm.organId"
            filterable
            clearable
            multiple
            collapse-tags
            placeholder="请选择分部"
          >
            <el-option
              v-for="item in selects.branchs"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model.trim="searchForm.jobNature"
            filterable
            clearable
            placeholder="工作类型"
          >
            <el-option
              v-for="item in jobNature"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model.trim="searchForm.isProbationPeriod"
            clearable
            filterable
            placeholder="员工状态"
          >
            <el-option v-for="item in ProbationPeriodList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            <!-- <el-option label="正式" value="0"></el-option>
            <el-option label="试用" value="1"></el-option>
            <el-option label="实习" value="3"></el-option> -->
          </el-select>
        </el-form-item>
        <!-- isSupportExtraPracticeLesson -->
        <el-form-item>
          <el-select
            v-model.trim="searchForm.isSupportExtraPracticeLesson"
            clearable
            filterable
            placeholder="开放陪练"
          >
            <el-option label="是" value="true"></el-option>
            <el-option label="否" value="false"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button native-type="submit" type="danger">搜索</el-button>
          <el-button native-type="reset" type="primary">重置</el-button>
          <el-button
            type="primary"
            v-permission="'export/teacherList'"
            @click="downLoadTeacher"
            >导出</el-button>
        </el-form-item>
      </save-form>
      <el-button
        v-permission="'/teacherOperationAdd'"
          @click="onTeacher('create')"
        type="primary"
        style="margin-bottom:20px"
      >
        老师新增
      </el-button>
      <!-- 列表 -->
      <div class="tableWrap">
        <el-table
          :data="tableList"
          :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
        >
          <el-table-column
            align="center"
            prop="id"
            label="老师编号"
          ></el-table-column>
          <el-table-column align="center" prop="realName" label="老师名称">
            <template slot-scope="scope">
              <div>
                <p>{{ scope.row.realName }}</p>
                <p v-if="scope.row.memo">{{ "(" + scope.row.memo + ")" }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="organName"
            label="所属分部"
          ></el-table-column>
          <el-table-column align="center" width="150px" label="老师状态">
            <template slot-scope="scope">{{
              scope.row.lockFlag | teacherStatus
            }}</template>
          </el-table-column>
          <el-table-column
            align="center"
            :show-overflow-tooltip="true"
            width="200px"
            label="专业技能"
          >
            <template slot-scope="scope">
              <span
                style="max-height: 68px; display: block"
                :title="scope.row.splitSubjectName"
                >{{ scope.row.splitSubjectName }}</span
              >
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="phone"
            width="150px"
            label="联系电话"
          ></el-table-column>
          <el-table-column align="center" label="工作类型">
            <template slot-scope="scope">{{
              scope.row.jobNature | jobNature
            }}</template>
          </el-table-column>
          <el-table-column align="center" label="员工状态">
            <template slot-scope="scope">
              {{ scope.row.isProbationPeriod | ProbationPeriod }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="vipNum"
            label="已开小课"
          ></el-table-column>
          <el-table-column align="center" width="130px" label="试听课安排">
            <template slot-scope="scope">{{
              scope.row.demoNum > 0 ? "是" : "否"
            }}</template>
          </el-table-column>
          <el-table-column align="center" width="120px" label="开放网管课">
            <template slot-scope="scope">{{
              scope.row.isSupportExtraPracticeLesson ? "是" : "否"
            }}</template>
          </el-table-column>

          <!-- <el-table-column align="center" label="运营指标">
            <template slot-scope="scope">
              <el-button type="text" @click="gotoOperating(scope.row)">{{
                scope.row.operatingIndex + "%"
              }}</el-button>
            </template>
          </el-table-column>
          <el-table-column align="center" label="服务指标">
            <template slot-scope="scope">
              <el-button type="text" @click="gotoAfterSchool(scope.row)">{{
                scope.row.serviceIndex + "%"
              }}</el-button>
            </template>
          </el-table-column> -->
          <el-table-column align="center" label="转正日期">
            <template slot-scope="scope">
              <div>
                {{ scope.row.formalStaffDate | dayjsFormat }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="离职日期">
            <template slot-scope="scope">
              <div>
                {{ scope.row.demissionDate | dayjsFormat }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            fixed="right"
            width="200"
            label="操作"
          >
            <template slot-scope="scope">
              <!--   let search = JSON.stringify(this.searchForm)
              let rules = JSON.stringify(this.pageInfo)-->
              <auth auths="/teacherDetail">
                <router-link
                  class="el-button--text"
                  :to="{
                    path: `/business/teacherDetail?teacherId=${scope.row.id}&teacherName=${scope.row.realName}`,
                  }"
                  >查看</router-link>
              </auth>
              <auth auths="/teacherOperationUpdate">
                <el-button
                  @click="onTeacher('update', scope.row)"
                  type="text"
                  >修改</el-button
                >
              </auth>

              <auth :auths="scope.row.lockFlag == 1 ? 'employee/employeeOperate/UNLOCK' : 'employee/employeeOperate/LOCK'">
                <el-button
                  @click="onStaffOperation('LOCK_UNLOCK', scope.row)"
                  type="text"
                  >{{ scope.row.lockFlag == 1 ? "解冻" : "冻结" }}</el-button
                >
              </auth>

              <auth auths="user/updatePassword2">
                <el-button
                  @click="resetPassWrod(scope.row)"
                  type="text"
                  >修改密码</el-button
                >
              </auth>

              <el-button
                v-if="scope.row.contractUrl"
                @click="onDownloadProtocol(scope.row)"
                type="text"
                >下载协议</el-button>
              <!--  -->
            </template>
          </el-table-column>
        </el-table>
        <pagination
          sync
          :total.sync="pageInfo.total"
          :page.sync="pageInfo.page"
          :limit.sync="pageInfo.limit"
          :page-sizes="pageInfo.page_size"
          @pagination="getList"
        />
      </div>
    </div>

    <el-dialog
      title="修改密码"
      :visible.sync="passwrodVisiable"
      :before-close="closePassWord"
      width="400px"
    >
      <el-form :model="passwrodForm" ref="passwrodForm" :inline="true">
        <el-form-item
          label="手机号"
          prop="phone"
          label-width="80px"
          :rules="[
            { required: true, message: '手机号不能为空', trigger: 'blur' },
            {
              pattern: /^1\d{10}$/,
              message: '请输入正确的手机号',
              trigger: 'blur',
            },
          ]"
        >
          <copy-text>{{ passwrodForm.phone }}</copy-text>
        </el-form-item>
        <el-form-item
          label="输入密码"
          prop="password"
          label-width="80px"
          :rules="[
            { required: true, message: '密码不能为空', trigger: 'blur' },
            {
              pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/,
              message: '密码为6-20位数字和字母组合',
              trigger: 'blur',
            },
          ]"
        >
          <el-input v-model.trim="passwrodForm.password"></el-input>
        </el-form-item>
        <el-form-item
          label="再次输入"
          prop="password2"
          label-width="80px"
          :rules="[
            { required: true, message: '密码不能为空', trigger: 'blur' },
            {
              pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/,
              message: '密码为6-20位数字和字母组合',
              trigger: 'blur',
            },
          ]"
        >
          <el-input v-model.trim="passwrodForm.password2"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="passwrodVisiable = false">取 消</el-button>
        <el-button type="primary" @click="submitResetPassWord">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import pagination from "@/components/Pagination/index";
import { teacherQueryPage } from "@/api/teacherManager";
import { employeeOperate } from "@/api/systemManage";
// import { subjectListTree } from "@/api/specialSetting";
import { resetPassword2 } from "@/api/buildTeam";
import { Export } from "@/utils/downLoadFile";
import cleanDeep from 'clean-deep'
import { jobNature, teacherStatus, ProbationPeriodList } from "@/utils/searchArray";
import store from "@/store";
export default {
  name: "teacherList",
  components: {
    pagination,
  },
  data() {
    return {
      searchForm: {
        lockFlag: null,
        isProbationPeriod: null,
        jobNature: null,
        subjectId: null,
        organId: [],
        search: null, // 老师姓名或电话
        isSupportExtraPracticeLesson: null,
      },
      jobNature: jobNature, // 工作类型
      teacherStatus: teacherStatus, // 老师状态
      ProbationPeriodList: ProbationPeriodList,
      subjectList: [], // 声部列表
      branchList: [], // 分部列表
      tableList: [],
      // organId: store.getters.organ,
      pageInfo: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 1, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
      passwrodVisiable: false,
      passwrodForm: {
        phone: "",
        password: "",
        password2: "",
      },
      activatedRow: null,
      lookServer: false,
      infoList: [],
    };
  },
  // activated() {
  //   this.__init();
  //   this.getList();
  // },
  mounted() {
       if (this.$route.params.search) {
      this.searchForm.search = this.$route.params.search;
    }
    this.__init();
    this.getList();
  },
  methods: {
    search() {
      this.pageInfo.page = 1;
      this.getList();
    },
    async __init() {
      // 获取分部
      await this.$store.dispatch("setBranchs");

      await this.$store.dispatch("setSubjects");
    },
    onTeacher(type, row) {
      let params = {
        type: type,
      };
      if (row) {
        params.teacherId = row.id;
        params.teacherName = row.realName;
      }
      let path = "/business/teacherOperation";
      //  (params)
      //  teacherId=${scope.row.id}&teacherName=${scope.row.realName}
      this.$router.push(
        {
          path: path,
          query: params,
        },
        (router) => {
          if (type == "update") {
            router.meta.title = "老师修改";
          } else {
            router.meta.title = "老师新增";
          }
        }
      );
    },
    downLoadTeacher() {
      let params = {...this.searchForm};
      params.lockFlag ? params.lockFlag : (params.lockFlag = null);
      params.isProbationPeriod
        ? params.isProbationPeriod
        : (params.isProbationPeriod = null);
      params.jobNature ? params.jobNature : (params.jobNature = null);
      // params.subjectId?params.subjectId:params.subjectId = null
      params.subjectId ? params.subjectId : (params.subjectId = null);
      params.search ? params.search : (params.search = null);
      params.organId = this.searchForm.organId.join(',')
      params.isSupportExtraPracticeLesson
        ? params.isSupportExtraPracticeLesson
        : (params.isSupportExtraPracticeLesson = null);
      Export(
        this,
        {
          url: "/api-web/export/teacherList",
          fileName:`老师列表导出.xls`,
          params:cleanDeep( {
            ...params
          }),
        },
        "是否确认导出老师列表？"
      );
    },
    onDownloadProtocol(item) {
      window.location.href = item.contractUrl;
    },
    getList() {
      let params = {...this.searchForm};
      // params.organId = this.organId
      // searchForm: {
      //   lockFlag: null,
      //   isProbationPeriod: null,
      //   jobNature: null,
      //   subjectId: null,
      //   organId: null,
      //   search: null, // 老师姓名或电话
      //   isSupportExtraPracticeLesson:null
      // },
      params.lockFlag ? params.lockFlag : (params.lockFlag = null);
      params.isProbationPeriod
        ? params.isProbationPeriod
        : (params.isProbationPeriod = null);
      params.jobNature ? params.jobNature : (params.jobNature = null);
      // params.subjectId?params.subjectId:params.subjectId = null
      params.subjectId ? params.subjectId : (params.subjectId = null);
      params.search ? params.search : (params.search = null);
      params.isSupportExtraPracticeLesson
        ? params.isSupportExtraPracticeLesson
        : (params.isSupportExtraPracticeLesson = null);
      params.rows = this.pageInfo.limit;
      params.page = this.pageInfo.page;
      params.organId = this.searchForm.organId.join(',')
      teacherQueryPage(params).then((res) => {
        if (res.code == 200) {
          //  (res)
          this.tableList = res.data.rows;
          this.pageInfo.total = res.data.total;
        }
      });
    },
    onStaffOperation(type, data) {
      let str = "";
      if (data.lockFlag != 1) {
        str = `是否冻结${data.realName}老师？`;
      } else {
        str = `是否解冻${data.realName}老师？`;
      }
      this.$confirm(str, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          employeeOperate({
            employeeId: data.id,
            operate: type,
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success("更改成功");
              this.roleStatus = false;
              this.getList();
            } else {
              this.$message.error(res.msg);
            }
          });
        })
        .catch(() => {});
    },
    onReSet() {
      this.searchForm = {
        lockFlag: null,
        isProbationPeriod: null,
        jobNature: null,
        organId: [],
        subjectId: null,
        search: null,
      };
      this.search()
    },
    resetPassWrod(row) {
      this.activatedRow = row;
      this.passwrodForm.phone = row.phone;
      this.passwrodVisiable = true;
    },
    closePassWord() {
      this.activatedRow = null;
      this.passwrodForm = {
        phone: "",
        password: "",
        password2: "",
      };
      this.$refs["passwrodForm"].resetFields();
      this.passwrodVisiable = false;
    },
    submitResetPassWord() {
      if (this.passwrodForm.password !== this.passwrodForm.password2) {
        this.$message.error("两次密码必须相同");
        return;
      }
      this.$refs["passwrodForm"].validate((res) => {
        if (res) {
          // 发请求
          resetPassword2({
            mobile: this.passwrodForm.phone,
            newPassword: this.passwrodForm.password,
            userId: this.activatedRow.id,
          }).then((res) => {
            if (res.code == 200) {
              // 修改成功
              this.$message.success("修改成功");
              this.closePassWord();
            }
          });
        }
      });
    },


  },
};
</script>
<style lang="scss" scoped>
.el-button + .el-button {
  margin-left: 0;
}
.hanlderWrap {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

</style>