dy-admin-manager/src/views/categroyManager/insideSetting/staffManager.vue

<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>
      员工管理
    </h2>
    <div class="m-core">
      <save-form
        :inline="true"
        class="searchForm"
        ref="searchForm"
        @submit="search"
        @reset="reset"
        :model="searchForm"
      >
        <el-form-item prop="search">
          <el-input
            type="text"
            clearable
            v-model.trim="searchForm.search"
            @keyup.enter.native="search"
            placeholder="姓名、编号、手机号"
          ></el-input>
        </el-form-item>
        <el-form-item prop="jobNature">
          <el-select
            v-model.trim="searchForm.jobNature"
            clearable
            filterable
            placeholder="请选择工作类型"
          >
            <el-option label="全职" value="FULL_TIME"></el-option>
            <el-option label="兼职" value="PART_TIME"></el-option>
            <!-- <el-option label="临时"
                       value="TEMPORARY"></el-option> -->
          </el-select>
        </el-form-item>
        <el-form-item prop="organId">
          <el-select
            v-model.trim="searchForm.organId"
            clearable
            filterable
            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 prop="roleId">
          <!--   multiple -->
          <el-select
            v-model.trim="searchForm.roleId"
            clearable
            filterable
            placeholder="请选择角色"
          >
            <el-option
              v-for="item in roleList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></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>
      <el-button
        type="primary"
        style="margin-bottom: 20px"
        @click="roleOperation('create')"
        v-permission="'employee/add'"
        >添加</el-button
      >
      <!-- 列表 -->
      <div class="tableWrap">
        <el-table
          :data="tableList"
          :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
        >
          <el-table-column align="center" prop="id" label="员工编号">
            <template slot-scope="scope">
              <copy-text>{{ scope.row.id }}</copy-text>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="realName" label="姓名">
            <template slot-scope="scope">
              <copy-text>{{ scope.row.realName }}</copy-text>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="phone" label="手机号">
            <template slot-scope="scope">
              <copy-text>{{ scope.row.phone }}</copy-text>
            </template>
          </el-table-column>
          <el-table-column align="center" label="角色分类">
            <template slot-scope="scope">
              <tooltip
                :content="scope.row.roleNames | joinArray(',')"
              ></tooltip>
            </template>
          </el-table-column>
          <el-table-column align="center" label="职位">
            <template slot-scope="scope">
              <tooltip :content="scope.row.positionNames"></tooltip>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="jobNature" label="工作类型">
            <template slot-scope="scope">
              {{ scope.row.jobNature | jobNature }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="所属分部">
            <template slot-scope="scope">
              <tooltip
                :content="scope.row.organNameList | joinArray(',')"
              ></tooltip>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="状态"
            :formatter="formatLockFlag"
          >
          </el-table-column>
          <el-table-column align="center" label="入职时间">
            <template slot-scope="scope">
              {{ scope.row.entryDate | formatTimer }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="离职时间">
            <template slot-scope="scope">
              {{ scope.row.demissionDate | formatTimer }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="250px"
            fixed="right"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button
                @click="roleOperation('update', scope.row)"
                v-if="permission('employee/update')"
                type="text"
                >修改</el-button
              >
              <el-button
                @click="onStaffOperation('RESET_PASSWORD', scope.row)"
                v-if="permission('employee/employeeOperate/RESET_PASSWORD')"
                type="text"
                >重置密码</el-button
              >
              <el-button
                @click="onStaffOperation('LOCK_UNLOCK', scope.row)"
                v-if="
                  permission(
                    scope.row.lockFlag == 1
                      ? 'employee/employeeOperate/unlock'
                      : 'employee/employeeOperate/lock'
                  )
                "
                type="text"
                >{{ scope.row.lockFlag == 1 ? "解冻" : "冻结" }}</el-button
              >
              <el-button
                @click="onStaffOperation('REINSTATE', scope.row)"
                v-if="
                  scope.row.demissionDate &&
                  permission('employee/employeeOperate/REINSTATE')
                "
                type="text"
                >复职</el-button
              >
              <el-button
                @click="handover(scope.row)"
                v-if="
                  !scope.row.demissionDate &&
                  permission('employee/level') &&
                  permission('employee/levelDetail')
                "
                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="formTitle[formActionTitle]"
      :visible.sync="roleStatus"
      @close="onFormClose('ruleForm')"
      width="650px"
    >
      <el-form :model="form" :rules="rules" ref="ruleForm">
        <el-alert
          style="margin: 10px 0"
          title="基础信息"
          :closable="false"
          type="info"
        >
        </el-alert>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="姓名"
              prop="realName"
              :label-width="formLabelWidth"
            >
              <el-input
                v-model.trim="form.realName"
                placeholder="请输入姓名"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="性别"
              prop="gender"
              :label-width="formLabelWidth"
            >
              <el-select
                v-model.trim="form.gender"
                placeholder="请选择性别"
                clearable
                filterable
              >
                <el-option label="男" :value="1"></el-option>
                <el-option label="女" :value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="手机号"
              prop="phone"
              :label-width="formLabelWidth"
            >
              <el-input
                v-model.trim.number="form.phone"
                placeholder="请输入手机号"
                autocomplete="off"
                maxlength="11"
                :max="11"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="工作类型"
              prop="jobNature"
              :label-width="formLabelWidth"
            >
              <el-select
                v-model.trim="form.jobNature"
                clearable
                placeholder="请选择工作类型"
                filterable
              >
                <el-option label="全职" value="FULL_TIME"></el-option>
                <el-option label="兼职" value="PART_TIME"></el-option>
                <!-- <el-option label="临时"
                       value="TEMPORARY"></el-option> -->
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="入职时间"
              prop="entryDate"
              :label-width="formLabelWidth"
            >
              <el-date-picker
                v-model.trim="form.entryDate"
                type="date"
                :picker-options="{
                  firstDayOfWeek: 1,
                }"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择入职日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="邮政编码"
              prop="postalCode"
              :label-width="formLabelWidth"
            >
              <el-input
                v-model.trim="form.postalCode"
                placeholder="请输入邮政编码"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item
            label="通讯地址"
            prop="contactAddress"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model.trim="form.contactAddress"
              placeholder="请输入通讯地址"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-row>
        <el-alert
          style="margin: 10px 0"
          title="角色权限"
          :closable="false"
          type="info"
        >
        </el-alert>
        <el-row>
          <el-col :span="24">
            <el-form-item
              label="所属分部"
              prop="organIdLists"
              :label-width="formLabelWidth"
            >
              <select-all
                filterable
                clearable
                placeholder="请选择所属分部"
                collapse-tags
                v-model.trim="form.organIdLists"
                multiple
              >
                <el-option
                  v-for="item in organList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </select-all>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item
              label="员工角色"
              prop="roleIds"
              :label-width="formLabelWidth"
            >
              <select-all
                v-model.trim="form.roleIds"
                placeholder="请选择员工角色"
                clearable
                filterable
                collapse-tags
                multiple
              >
                <el-option
                  v-for="item in roleList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </select-all>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item prop="positionIds" :label-width="formLabelWidth" class="hiddenStart">
              <template slot="label">
                <p style="position: relative">
                  <span style="color: #f56c6c; margin-right: 4px">*</span>
                  员工职位
                  <el-tooltip placement="top" popper-class="mTooltip">
                    <div slot="content">
                      <p>分部经理：分部事务审批，为乐团主管分配日程安排</p>
                      <p>
                        乐团主管：具体乐团、VIP、网管课课程组负责人，管理日常教务
                      </p>
                      <p>维修技师：管理端APP乐器维修人员</p>
                      <p>
                        衔接老师：合作单位老师，可在管理端APP查看所关联乐团课程、作业
                      </p>
                      <p>HRBP：人力资源表可选择HR归属</p>
                    </div>
                    <i
                      class="el-icon-question"
                      style="
                        font-size: 18px;
                        color: #f56c6c;
                        position: relative;
                        top: 2px;
                      "
                    ></i>
                  </el-tooltip>
                </p>
              </template>
              <select-all
                v-model.trim="form.positionIds"
                placeholder="请选择员工职位"
                clearable
                filterable
                collapse-tags
                multiple
              >
                <el-option
                  v-for="item in positionList"
                  :key="item.id"
                  :label="item.roleName"
                  :value="item.id"
                ></el-option>
              </select-all>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-alert
          style="margin: 10px 0"
          title="OA信息"
          :closable="false"
          type="info"
        >
        </el-alert> -->
        <!-- <el-row>
          <el-col :span="12">
            <el-form-item
              label="所属部门"
              prop="deptIds"
              :label-width="formLabelWidth"
            >
              <el-cascader
                v-model="form.deptIds"
                placeholder="请选择所属部门"
                clearable
                style="width: 100%"
                :options="deptList"
                :show-all-levels="false"
                :collapse-tags="true"
                @change="onDeptChange"
                :props="{ multiple: true, checkStrictly: false }"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="社保分部"
              prop="deptId"
              :label-width="formLabelWidth"
            >
              <el-cascader
                v-model="form.deptId"
                placeholder="请选择社保分部"
                clearable
                style="width: 100%"
                :options="deptSmallList"
                :show-all-levels="false"
                :collapse-tags="true"
                :props="{ checkStrictly: false }"
              ></el-cascader>
            </el-form-item>
          </el-col>
        </el-row> -->

        <!-- <div v-for="(postDeptIds, index) in form.postDeptIds" :key="index">
          <el-form-item
            :label="'岗位管理' + (index + 1)"
            :label-width="formLabelWidth"
            class="setWidth"
            :prop="'postDeptIds.' + index + '.postId'"
          >
            <el-select
              filterable
              clearable
              placeholder="所属岗位"
              style="width: 180px !important"
              v-model.trim="postDeptIds.postId"
            >
              <el-option
                v-for="item in postList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            class="setWidth"
            style="margin: 0 10px; width: 190px !important"
            :prop="'postDeptIds.' + index + '.deptIds'"
          >
            <el-cascader
              v-model="postDeptIds.deptIds"
              placeholder="管理部门"
              clearable
              :options="deptList"
              :show-all-levels="false"
              :collapse-tags="true"
              :props="{ multiple: true, checkStrictly: false }"
            ></el-cascader>
          </el-form-item>
          <el-button
            icon="el-icon-minus"
            circle
            v-if="form.postDeptIds.length > 1"
            @click.prevent="removePostDept(postDeptIds)"
          ></el-button>
          <el-button
            icon="el-icon-plus"
            @click.prevent="addPostDept"
            circle
            style="margin-left: 5px"
          ></el-button>
        </div> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="roleStatus = false">取 消</el-button>
        <el-button @click="onRoleSubmit('ruleForm')" type="primary"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog title="工作交接" :visible.sync="handoverVisible" width="500px">
      <handover
        v-if="handoverVisible"
        :detail="detail"
        @close="handoverVisible = false"
        @submited="getList"
      />
    </el-dialog>
    <el-dialog
      title="教务交接"
      width="400px"
      destroy-on-close
      close-on-click-modal
      :visible.sync="educationViseble"
    >
      <el-form :model="educationForm" :inline="true" ref="educationForm">
        <el-form-item
          label="乐团主管"
          :rules="[
            {
              required: true,
              message: '请选择乐团主管',
              trigger: 'blur',
            },
          ]"
        >
          <el-select
            v-model.trim="educationForm.targetUserId"
            clearable
            filterable
          >
            <el-option
              v-for="item in selects.roles.EDUCATION"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="educationViseble = false">取 消</el-button>
        <el-button @click="submitEducation" type="primary">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import pagination from "@/components/Pagination/index";
import { permission } from "@/utils/directivePage";
import {
  queryEmployByOrganId,
  employeeOperate,
  getUserRole,
  employeeAdd,
  employeeUpdate,
  hasCourseGroupRelation,
  updateEducationTeacherId,
  queryEmployeeOrganByUser,
  getPosition,
  getDepts,
  getPosts,
} from "@/api/systemManage";
import { userRole } from "./api";
import deepClone from "@/helpers/deep-clone";
// import Treeselect from '@riophae/vue-treeselect'
// import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import Tooltip from "@/components/Tooltip/index";
import { isvalidPhone } from "@/utils/validate";
import handover from "./modals/handover";
let validPhone = (rule, value, callback) => {
  if (!value) {
    callback(new Error("请输入电话号码"));
  } else if (!isvalidPhone(value)) {
    callback(new Error("请输入正确的11位手机号码"));
  } else {
    callback();
  }
};
export default {
  name: "staffManager",
  components: { pagination, Tooltip, handover },
  data() {
    return {
      roleResetList: [],
      organList: [],
      tableList: [],
      deptList: [],
      deptSmallList: [],
      postList: [],
      educationForm: {
        targetUserId: "",
      },
      educationViseble: false,
      activeRow: null,
      pageInfo: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
      detail: null,
      handoverVisible: false,
      roleStatus: false,
      formActionTitle: "create",
      roleList: [], // 角色列表,
      roleBaseList: [], // 登陆人角色

      formTitle: {
        create: "添加员工",
        update: "修改员工",
      },
      formLabelWidth: "120px",
      form: {
        realName: null,
        gender: null,
        phone: null,
        roleIds: [],
        deptId: null, // 社保分部
        organIdLists: [],
        positionIds: [],
        postDeptIds: [
          {
            postId: null,
            deptIds: [],
          },
        ],
        deptIds: [],
        // postIds: [],
        jobNature: null,
        entryDate: null,
        contactAddress: null,
        postalCode: null,
      },
      rules: {
        realName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        gender: [{ required: true, message: "请选择性别", trigger: "change" }],
        phone: [
          {
            type: "number",
            required: true,
            validator: validPhone,
            trigger: "blur",
          },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
        roleIds: [
          {
            type: "array",
            required: true,
            message: "请选择分类",
            trigger: "change",
          },
        ],
        // deptId: [{ required: true, message: '请选择社保分部', trigger: 'change' }],
        organIdLists: [
          {
            type: "array",
            required: true,
            message: "请选择所属分部",
            trigger: "change",
          },
        ],
        positionIds: [
          {
            type: "array",
            required: true,
            message: "请选择员工职位",
            trigger: "change",
          },
        ],
        // deptIds: [{ type: 'array', required: true, message: '请选择所属部门', trigger: 'change' }],
        // postIds: [{ type: 'array', required: true, message: '请选择所属岗位', trigger: 'change' }],
        jobNature: [
          { required: true, message: "请选择工作类型", trigger: "change" },
        ],
        entryDate: [
          { required: true, message: "请选择入职时间", trigger: "blur" },
        ],
      },
      searchForm: {
        search: null,
        jobNature: null,
        organId: null,
        roleId: null,
      },
      positionList: [],
    };
  },
  mounted() {
    this.getList();
    this.getRoleList();
  },
  methods: {
    permission,
    handover(row) {
      this.detail = row;
      this.handoverVisible = true;
    },
    onBranchCheckAll() {
      this.form.organIdLists = [];

      this.organList.forEach((item) => {
        this.form.organIdLists.push(item.id);
      });
    },
    onRoleSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const { organIdLists, postDeptIds, deptIds, deptId, ...res } =
            this.form;
          let tempPost = [];
          postDeptIds.forEach((post) => {
            let tempIds = [];
            post.deptIds.forEach((item) => {
              tempIds.push(item[item.length - 1]);
            });
            tempPost.push({
              postId: post.postId,
              deptIds: tempIds,
            });
          });
          const tempDeptIds = [];
          deptIds.forEach((ds) => {
            tempDeptIds.push(ds[ds.length - 1]);
          });

          const tempDeptId = deptId ? deptId[deptId.length - 1] : "";

          let tempForm = {
            postDeptIds: JSON.stringify(tempPost),
            organIdList: organIdLists.join(","),
            deptIds: tempDeptIds,
            deptId: tempDeptId,
            ...res,
          };
          if (this.formActionTitle == "create") {
            if (this.form.id) {
              // 判断有没有Id，如果有则删除
              delete this.form.id;
            }
            employeeAdd(tempForm).then((res) => {
              this.messageTips("添加", res);
            });
          } else if (this.formActionTitle == "update") {
            employeeUpdate(tempForm).then((res) => {
              this.messageTips("修改", res);
            });
          }
        } else {
          return;
        }
      });
    },
    messageTips(title, res) {
      if (res.code == 200) {
        this.$message.success(title + "成功");
        this.roleStatus = false;
        this.getList();
      } else {
        this.$message.error(res.msg);
      }
    },
    search() {
      this.pageInfo.page = 1;
      this.getList();
    },
    reset() {
      this.$refs.searchForm.resetFields();
      this.search();
    },
    getList() {
      let searchForm = this.searchForm;
      let params = {
        search: searchForm.search ? searchForm.search : null,
        jobNature: searchForm.jobNature ? searchForm.jobNature : null,
        organId: searchForm.organId ? searchForm.organId : null,
        roleId: searchForm.roleId ? searchForm.roleId : null,
        rows: this.pageInfo.limit,
        page: this.pageInfo.page,
      };
      queryEmployByOrganId(params).then((res) => {
        if (res.code == 200 && res.data) {
          this.tableList = res.data.rows;
          this.pageInfo.total = res.data.total;
        }
      });
    },
    /** 转换菜单数据结构 */
    normalizer(node) {
      let temp = [];
      if (node.children && node.children.length > 0) {
        node.children.forEach((item) => {
          let child = this.normalizer(item, status);
          let obj = {
            value: item.deptId,
            label: item.deptName,
          };
          if (child && child.length > 0) {
            obj.children = child;
          }
          temp.push(obj);
        });
      }
      return temp;
    },
    async getRoleList() {
      // 获取角色
      getUserRole({ delFlag: 0, rows: 9999 }).then((res) => {
        let result = res.data;
        if (res.code == 200 && result && result.rows.length > 0) {
          this.roleList = [];
          result.rows.forEach((item) => {
            this.roleList.push({
              label: item.roleName,
              value: item.id,
              disabled: false,
            });
          });
        }
      });
      // 获取可编辑角色
      // try {
      //   const res = await userRole();
      //   this.roleResetList = [];
      //   res.data.forEach((item) => {
      //     this.roleResetList.push({
      //       label: item.roleName,
      //       value: item.id,
      //       disabled: false,
      //     });
      //   });
      // } catch (e) {
      //   console.log(e);
      // }

      // getDepts({ rows: 9999 }).then((res) => {
      //   if (res.code == 200 && res.data && res.data.length > 0) {
      //     const depts = res.data || [];
      //     const formatArr = [];
      //     depts.forEach((dep) => {
      //       formatArr.push({
      //         value: dep.deptId,
      //         label: dep.deptName,
      //         children: this.normalizer(dep),
      //       });
      //     });
      //     this.deptList = formatArr;
      //   }
      // });
      // 岗位
      // getPosts({ rows: 9999 }).then((res) => {
      //   if (res.code == 200 && res.data && res.data.length > 0) {
      //     this.postList = [];
      //     res.data.forEach((item) => {
      //       this.postList.push({
      //         label: item.postName,
      //         value: item.postId,
      //       });
      //     });
      //   }
      // });
      this.$store.dispatch("setBranchs");
    },
    onDeptChange(value) {
      this.form.deptId = null;
      this.deptSmallList = [];
      let selectList = value.flat(Infinity);
      selectList = [...new Set(selectList)];
      const depts = deepClone(this.deptList);
      const formatArr = [];
      depts.forEach((dep) => {
        formatArr.push({
          value: dep.value,
          label: dep.label,
          disabled: !selectList.includes(dep.value),
          children: this.normalizer2(dep, selectList),
        });
      });
      this.deptSmallList = formatArr;
    },
    /** 转换菜单数据结构 */
    normalizer2(node, selectList) {
      let temp = [];
      if (node.children && node.children.length > 0) {
        node.children.forEach((item) => {
          let child = this.normalizer2(item, selectList);
          let obj = {
            value: item.value,
            label: item.label,
            disabled: !selectList.includes(item.value),
          };
          if (child && child.length > 0) {
            obj.children = child;
          }
          temp.push(obj);
        });
      }
      return temp;
    },
    async roleOperation(type, data) {
      // 获取分部
      await queryEmployeeOrganByUser().then((res) => {
        if (res.code == 200) {
          this.organList = res.data;
        }
      });

      // 获取员工职位
      try {
        const res = await getPosition();
        this.positionList = res.data;
      } catch (e) {
        console.log(e);
      }
      this.formActionTitle = type;
      this.roleStatus = true;

      //  格式化 可选角色

      // 修改的时候
      if (type == "update") {
        let roleIdList = [...data.roleIds];
        // this.roleBaseList.forEach((item) => {
        //   if (roleIdList.indexOf(item.value) == -1) {
        //     roleIdList.push(item.value);
        //   }
        // });
        // this.roleResetList = [...this.roleList];
        // this.roleList.forEach((role) => {
        //   if (roleIdList.indexOf(role.value) != -1) {
        //     this.roleResetList.push(role);
        //   }
        // });
        // 初始化数据
        let postDeptArr = [];
        const postDept = data.postDeptIds ? JSON.parse(data.postDeptIds) : [];

        if (postDept.length > 0) {
          postDept.forEach((dept) => {
            let deptIds = dept.deptIds || [];
            let deptArr = [];
            deptIds.forEach((ds) => {
              deptArr.push(this.formatParentId(ds, this.deptList));
            });
            postDeptArr.push({
              postId: dept.postId,
              deptIds: deptArr,
            });
          });
        } else {
          postDeptArr = [
            {
              postId: null,
              deptIds: [],
            },
          ];
        }

        const deptIds = data.deptIds ? eval(data.deptIds) : [];
        const tempDeptIds = [];
        if (deptIds.length > 0) {
          deptIds.forEach((ds) => {
            tempDeptIds.push(this.formatParentId(ds, this.deptList));
          });
        }
        this.onDeptChange(tempDeptIds);
        this.form = {
          id: data.id,
          realName: data.realName,
          gender: data.gender,
          phone: Number(data.phone),
          roleIds: data.roleIds,
          deptId: data.deptId
            ? this.formatParentId(data.deptId, this.deptList)
            : null,
          positionIds: data.positionIds
            ? data.positionIds.split(",").map((i) => Number(i))
            : [],
          organIdLists: data.organIdList ? data.organIdList : [],
          jobNature: data.jobNature,
          entryDate: data.entryDate,
          contactAddress: data.contactAddress,
          postalCode: data.postalCode,
          postDeptIds: postDeptArr,
          deptIds: tempDeptIds,
        };
      } else {
        this.roleResetList = [...this.roleBaseList];
      }
    },
    formatParentId(id, list, ids = []) {
      for (const item of list) {
        if (item.children) {
          const cIds = this.formatParentId(id, item.children, [
            ...ids,
            item.value,
          ]);
          if (cIds.includes(id)) {
            return cIds;
          }
        }
        if (item.value === id) {
          return [...ids, id];
        }
      }
      return ids;
    },
    onFormClose(formName) {
      // 关闭弹窗重置验证
      this.form = {
        realName: null,
        gender: null,
        phone: null,
        roleName: null,
        roleIds: [],
        deptId: null,
        organIdLists: [],
        jobNature: null,
        entryDate: null,
        contactAddress: null,
        postalCode: null,
        deptIds: [],
        postDeptIds: [
          {
            postId: null,
            deptIds: [],
          },
        ],
      };
      this.$refs[formName].resetFields();
    },
    formatLockFlag(row) {
      let reuslt = ["正常", "冻结"];
      if (row.demissionDate) {
        return "离职";
      } else {
        return reuslt[row.lockFlag];
      }
    },
    async checkStatus(data) {
      let status;
      await hasCourseGroupRelation({ employeeId: data.id }).then(
        async (res) => {
          if (res.code === 200) {
            if (res.data.hasCourseSchedule) {
              this.$message.error("请先交接指导老师课程");
              status = false;
            } else {
              if (res.data.hasCourseGroupRelation) {
                let userId = data.id;
                await this.$store.dispatch("setOrganRole");
                this.educationViseble = true;
                status = false;
              } else {
                // 1 要弹出
                status = true;
              }
            }
          }
        }
      );

      return status;
    },
    onStaffOperation(type, data) {
      const tempStatus = type == "RESET_PASSWORD" ? true : false;
      this.$confirm(
        `您确定${tempStatus ? "重置密码" : "修改员工状态"}？`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(async () => {
          if (type === "DEMISSION" && !data.demissionDate) {
            this.activeRow = data;
            // 1.点击的是离职按钮
            // 2.判断该考级是否存在乐团主管
            const status = await this.checkStatus(data);
            if (!status) {
              return;
            }
          }
          employeeOperate({
            employeeId: data.id,
            operate: type,
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success(tempStatus ? "重置密码成功" : "更改成功");
              this.roleStatus = false;
              this.getList();
            } else {
              this.$message.error(res.msg);
            }
          });
        })
        .catch((err) => {});
    },
    submitEducation() {
      // 发请求 提交信息
      updateEducationTeacherId({
        currentUserId: this.activeRow.id,
        targetUserId: this.educationForm.targetUserId,
      }).then((res) => {
        if (res.code === 200) {
          const type = "DEMISSION";
          const data = this.activeRow;
          employeeOperate({
            employeeId: data.id,
            operate: type,
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success("更改成功");
              this.roleStatus = false;
              this.educationViseble = false;
              this.getList();
            } else {
              this.$message.error(res.msg);
            }
          });
        }
      });
    },
    removePostDept(item) {
      const index = this.form.postDeptIds.indexOf(item);
      if (index !== -1) {
        this.form.postDeptIds.splice(index, 1);
      }
    },
    addPostDept() {
      this.form.postDeptIds.push({
        postId: null,
        deptIds: [],
      });
    },
  },
  watch: {
    educationViseble(val) {
      if (!val) {
        this.educationForm.targetUserId = "";
        this.$refs["educationForm"].resetFields();
      }
    },
  },
};
</script>
<style lang="scss" scoped>
/deep/.el-dialog__body {
  // padding: 0 20px;
}
/deep/.el-select,
/deep/.el-date-editor.el-input {
  width: 100% !important;
}
.setWidth {
  display: inline-block;
}

.hiddenStart {
  /deep/.el-form-item__label:before {
    content: "" !important;
    position: absolute;
    color: transparent;
    margin-right: 4px;
  }
}
</style>