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

<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>
      老师列表
    </h2>
    <div class="m-core">
      <div
        class="newBand"
        v-permission="'/teacherOperationAdd'"
        @click="onTeacher('create')"
      >
        老师新增
      </div>
      <!-- 搜索标题 -->
      <save-form
        :inline="true"
        @submit="search"
        @reset="onReSet"
        class="searchForm"
        :model="searchForm"
      >
        <el-form-item>
          <el-input
            v-model.trim="searchForm.search"
            @keyup.enter.native="getList"
            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
            placeholder="请选择分部"
          >
            <el-option
              v-for="item in selects.branchs"
              :key="item.id"
              :label="item.name"
              :value="item.id"> </el-option>
            ></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 label="正式" value="0"></el-option>
            <el-option label="试用" value="1"></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-form-item>
      </save-form>
      <!-- 列表 -->
      <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 == 0 ? "正式" : "试用" }}
            </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"
            fixed="right"
            width="200"
            label="操作"
          >
            <template slot-scope="scope">
              <!--   let search = JSON.stringify(this.searchForm)
              let rules = JSON.stringify(this.pageInfo)-->
              <router-link
                v-permission="'/teacherDetail'"
                class="el-button--text"
                :to="{
                  path: `/business/teacherDetail?teacherId=${scope.row.id}&teacherName=${scope.row.realName}`,
                }"
                >查看</router-link
              >
              <el-button
                v-permission="'/teacherIperationUpdate'"
                @click="onTeacher('update', scope.row)"
                type="text"
                >修改</el-button
              >
              <el-button
                v-permission="'employee/employeeOperate'"
                @click="onStaffOperation('LOCK_UNLOCK', scope.row)"
                type="text"
                >{{ scope.row.lockFlag == 1 ? "解冻" : "冻结" }}</el-button
              >
              <!--  -->
              <el-button
                v-permission="'api-auth/user/updatePassword2'"
                @click="resetPassWrod(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',
            },
          ]"
        >
          <el-input
            v-model.trim="passwrodForm.phone"
            minlength="11"
            maxlength="11"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="输入密码"
          prop="password"
          label-width="80px"
          :rules="[
            { required: true, message: '密码不能为空', trigger: 'blur' },
            {
              pattern: /^[\w]{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: /^[\w]{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 { jobNature, teacherStatus } 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: null,
        search: null, // 老师姓名或电话
        isSupportExtraPracticeLesson: null,
      },
      jobNature: jobNature, // 工作类型
      teacherStatus: teacherStatus, // 老师状态
      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,
    };
  },
  // activated() {
  //   this.__init();
  //   this.getList();
  // },
  mounted() {
    this.__init();
    this.getList();
  },
  methods: {
    search() {
      this.pageInfo.page = 1;
      this.getList();
    },
    async __init() {
      // 获取分部
      await this.$store.dispatch('setBranchs')

      await this.$store.dispatch('setSubjects')
      // getEmployeeOrgan().then((res) => {
      //   if (res.code == 200) {
      //     this.branchList = [];
      //     res.data.forEach((item) => {
      //       this.branchList.push({
      //         label: item.name,
      //         value: item.id,
      //       });
      //     });
      //   }
      // });

      // subjectListTree({
      //   delFlag: "NO",
      //   rows: 9999,
      // }).then((res) => {
      //   let result = res.data;
      //   if (res.code == 200) {
      //     let tempArray = [];
      //     result.rows.forEach((item, index) => {
      //       let subject = [];
      //       item.subjects.forEach((s) => {
      //         subject.push({
      //           value: s.id,
      //           label: s.name,
      //         });
      //       });

      //       tempArray[index] = {
      //         label: item.name,
      //         options: subject,
      //       };
      //     });
      //     this.subjectList = tempArray;
      //   }
      // });
      // this.getList();
    },
    onTeacher(type, row) {
      let params = {
        type: type,
      };
      if (row) {
        params.teacherId = row.id;
      }
      let path = "/business/teacherOperation";
      if (type == "update") {
        path = "/business/teacherOperationUpdate";
      }
      this.$router.push({
        path: path,
        query: params,
      });
    },
    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;
      teacherQueryPage(params).then((res) => {
        if (res.code == 200) {
          // console.log(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: null,
        subjectId: null,
        search: null,
      };
    },
    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();
            }
          });
        }
      });
    },
    gotoAfterSchool(row) {
      // 需要的参数 id
      this.$router.push({
        path: "/operateManager/serverIndexList",
        query: { teacherId: row.id, activeIndex: "2" },
      });
    },
    gotoOperating(row) {
      this.$router.push({
        path: "/operateManager/operateStudent",
        query: { teacherId: row.id, operatingTag: "1" },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.el-button + .el-button {
  margin-left: 0;
}
</style>