dy-admin-manager/src/views/HumanResources/index.vue

<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>
      人力资源表
    </h2>
    <div class="m-core">
      <div
        class="newBand"
        v-permission="'employeeInfo/insert'"
        @click="openTypes('create')"
      >
        添加
      </div>
      <!-- 搜索标题 -->
      <saveform
        :inline="true"
        ref="searchForm"
        class="searchForm"
        :model.sync="searchForm"
      >
        <el-form-item prop="userNameOrIdOrMobile">
          <el-input
            placeholder="姓名手机号"
            v-model.trim="searchForm.userNameOrIdOrMobile"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item prop="sourceFrom">
          <el-select
            v-model.trim="searchForm.sourceFrom"
            clearable
            filterable
            placeholder="请选择信息来源"
          >
            <el-option label="BOSS" value="BOSS"></el-option>
            <el-option label="转介绍" value="转介绍"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="status">
          <el-select
            v-model.trim="searchForm.status"
            clearable
            filterable
            placeholder="请选择人员状态"
          >
            <el-option label="未录用" value="NOT_EMPLOYED"></el-option>
            <el-option label="面试中" value="INTERVIEWING"></el-option>
            <el-option label="储备" value="RESERVE"></el-option>
            <el-option label="兼职" value="PART_TIME"></el-option>
            <el-option label="全职" value="FULL_TIME"></el-option>
            <el-option label="离职" value="DIMISSION"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="position">
          <el-select
            v-model.trim="searchForm.position"
            clearable
            filterable
            placeholder="请选择职位"
          >
            <el-option label="指导老师" value="ADVISER"></el-option>
            <el-option label="乐团主管" value="ACADEMIC"></el-option>
            <el-option label="乐队指导" value="TEACHING"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="organId">
          <el-select
            v-model.trim="searchForm.organId"
            placeholder="请选择分部"
            clearable
            filterable
          >
            <el-option
              v-for="(item, index) in organList"
              :key="index"
              :value="item.id"
              :label="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="subjectId" :label-width="formLabelWidth">
          <el-select
            v-model.trim="searchForm.subjectId"
            clearable
            filterable
            placeholder="请选择声部"
          >
            <el-option
              v-for="(item, index) in subjectList"
              :key="index"
              :value="item.id"
              :label="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="dates" :label-width="formLabelWidth">
          <el-date-picker
            v-model="searchForm.dates"
            type="daterange"
            style="width: 405px"
            range-separator="至"
            start-placeholder="更新开始日期"
            end-placeholder="更新结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item prop="operator">
          <el-input
            placeholder="归属管理HR"
            v-model.trim="searchForm.operator"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="search" type="danger">搜索</el-button>
          <el-button
            @click="onReSet"
            type="primary"
            style="background-color: #409eff; border-color: #409eff"
            >重置</el-button
          >
        </el-form-item>
      </saveform>
      <div class="tableWrap">
        <el-table
          :data="tableList"
          :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
        >
          <el-table-column
            width="120px"
            align="center"
            prop="id"
            label="编号"
          ></el-table-column>
          <el-table-column align="center" prop="realName" label="姓名">
            <template slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                :content="scope.row.realName"
                placement="top"
              >
                <copy-text>{{ scope.row.realName }}</copy-text>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="mobileNo" label="手机号">
            <template slot-scope="scope">
              <div>
                <copy-text>{{ scope.row.mobileNo }}</copy-text>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="wechatNo"
            label="微信"
          ></el-table-column>
          <el-table-column align="center" label="学历信息">
            <template slot-scope="scope">
              <el-button @click="openEducation(scope.row)" type="text"
                >查看学历</el-button
              >
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="subjectName"
            label="声部"
            width="200px"
          >
            <template slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                :content="scope.row.subjectName"
                placement="top"
              >
                <span>{{ scope.row.subjectName }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="liveCity"
            label="所在城市"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="intentionCity"
            label="工作意向"
            width="100px"
          >
            <template slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                :content="scope.row.intentionCity"
                placement="top"
              >
                <span>{{ scope.row.intentionCity }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="assessmentResult"
            label="评估结果"
            width="200px"
          >
            <template slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                :content="scope.row.assessmentResult"
                placement="top"
              >
                <span>{{ scope.row.assessmentResult }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="otherComment"
            label="其它综合情况"
            width="200px"
          >
            <template slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                :content="scope.row.otherComment"
                placement="top"
              >
                <span>{{ scope.row.otherComment }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="sourceFrom"
            label="信息来源"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="entryDate"
            label="入职时间"
            width="150px"
          >
            <template slot-scope="scope">
              {{ scope.row.entryDate | dayjsFormat }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="position" label="职位">
            <template slot-scope="scope">
              {{ scope.row.position | jobType }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="organName"
            label="分部"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="isProbationPeriod"
            label="是否试用期"
          >
            <template slot-scope="scope">
              {{
                typeof scope.row.isProbationPeriod === "boolean"
                  ? scope.row.isProbationPeriod
                    ? "是"
                    : "否"
                  : ""
              }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="status" label="人员状态">
            <template slot-scope="scope">
              {{ scope.row.status | hrStatus }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="idCard"
            label="证件号码"
            width="200px"
          ></el-table-column>
          <el-table-column align="center" prop="age" label="年龄">
            <template slot-scope="scope">
              {{ scope.row.age > 0 ? scope.row.age : "" }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="gender" label="性别">
            <template slot-scope="scope">
              {{
                typeof scope.row.gender === "boolean"
                  ? scope.row.gender
                    ? "男"
                    : "女"
                  : ""
              }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="bankCardNo"
            label="银行卡号"
            width="200px"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="bankAddress"
            label="开户行"
            width="200px"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="emergencyContactName"
            label="紧急联系人"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="emergencyContactRelation"
            label="紧急联系人关系"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="emergencyContactPhone"
            label="紧急联系人电话"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="updateTime"
            label="最后一次操作时间时间"
            width="160px"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="operatorName"
            label="归属管理HR"
          >
             <template slot-scope="scope">
              <div>
                <copy-text>{{ scope.row.operatorName }}</copy-text>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="resignationDate"
            label="离职时间"
            width="150px"
          >
            <template slot-scope="scope">
              {{ scope.row.resignationDate | dayjsFormat }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" fixed="right">
            <template slot-scope="scope">
              <el-button
                v-permission="'employeeInfo/update'"
                @click="openTypes('update', scope.row)"
                type="text"
                >修改</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          :total.sync="pageInfo.total"
          :page.sync="pageInfo.page"
          :limit.sync="pageInfo.limit"
          :page-sizes="pageInfo.page_size"
          sync
          @pagination="getList"
        />
      </div>
    </div>
    <el-dialog
      :title="formTitle[formActionTitle]"
      :visible.sync="typeStatus"
      destroy-on-close
      :close-on-click-modal="false"
      @close="onFormClose('ruleForm')"
      width="1050px"
    >
      <hrform
        :detail.sync="rowDetail"
        v-if="typeStatus"
        :organList="organList"
        :subjectList="subjectList"
        :close="onFormClose"
        :getList="getList"
      />
    </el-dialog>
    <el-dialog
      title="查看学历信息"
      :visible.sync="educationVisible"
      destroy-on-close
      :close-on-click-modal="false"
      @close="educationVisible = false"
      width="600px"
    >
      <el-table
        :data="educationList"
        :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
      >
        <el-table-column
          align="center"
          prop="level"
          label="学历"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="school"
          label="毕业学校"
        ></el-table-column>
        <el-table-column align="center" prop="year" label="毕业时间">
          <template slot-scope="scope">
            {{ scope.row.year | dayjsFormat }}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import pagination from "@/components/Pagination/index";
import saveform from "@/components/save-form";
import dayjs from "dayjs";
import hrform from "./form";
// import store from '@/store'
import {
  helpCenterCatalogList,
  employeeInfo,
  helpCenterContentModify,
  helpCenterContentDelete,
} from "@/api/appTenant";
import { getEmployeeOrgan, getSubject } from "@/api/buildTeam";
import { subjectListTree } from "@/api/specialSetting";

export const getTimes = (times, keys = []) => {
  if (times && times.length) {
    return {
      [keys[0] || "start"]: dayjs(times[0]).format("YYYY-MM-DD"),
      [keys[1] || "start"]: dayjs(times[1]).format("YYYY-MM-DD"),
    };
  }
  return {};
};
const initSearch = {
  organId: "",
  jobNature: "",
  position: "",
  subjectId: "",
  userNameOrIdOrMobile: "",
  operator: "",
  dates: [],
};
export default {
  components: { pagination, hrform, saveform },
  name: "helpCategory",
  data() {
    return {
      searchForm: {
        ...initSearch,
      },
      educationVisible: false,
      treeList: [],
      tableList: [],
      educationList: [],
      formActionTitle: "create",
      formTitle: {
        create: "添加人员",
        update: "修改人员",
      },
      typeStatus: false, // 添加教学点
      formLabelWidth: "100px",
      form: {
        title: null, // 标题
        content: null, // 内容
        catalogId: null, // 分类编号
      },
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        content: [{ required: true, message: "请输入内容", trigger: "blur" }],
        catalogId: [
          { required: true, message: "请输入选择分类", trigger: "blur" },
        ],
        // subjectIds: [{ required: true, message: "请选择声部组合", trigger: "change" }]
      },
      pageInfo: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
      rowDetail: null,
      tempTreeList: [],
      organList: [],
      subjectList: [],
    };
  },
  activated() {
    this.getList();
    this.getSubjectList();
    //
  },
  mounted() {
    this.getList();
    this.getSubjectList();
    this.getTreeList();
  },
  computed: {
    subjectListObj() {
      const data = {};
      for (let i = 0; i < this.subjectList.length; i++) {
        const item = this.subjectList[i];
        data[item.id] = item.name;
      }
      return data;
    },
    organListObj() {
      const data = {};
      for (let i = 0; i < this.organList.length; i++) {
        const item = this.organList[i];
        data[item.id] = item.name;
      }
      return data;
    },
  },
  mounted() {
    this.getList();
    // this.getTreeList()
    getEmployeeOrgan().then((res) => {
      if (res.code == 200) {
        this.organList = res.data;
      }
    });
    this.getSubjectList();
  },
  methods: {
    getSubjectList() {
      getSubject({
        delFlag: 0,
        tenantId: 1,
      }).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 = result;
        }
      });
    },
    openEducation(row) {
      try {
        this.educationList = row.educationalBackground
          ? JSON.parse(row.educationalBackground)
          : [];
        this.educationVisible = true;
      } catch (error) {
        this.$message.error("数据解析失败");
      }
    },
    onTypeDelOpeation(row) {
      this.$confirm("您是否删除该内容?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          helpCenterContentDelete({ id: row.id }).then((res) => {
            this.messageTips("删除", res);
          });
        })
        .catch(() => {});
    },
    search() {
      this.$refs.searchForm.validate((valid) => {
        this.pageInfo = {
          ...this.pageInfo,
          page: 1,
        };
        this.getList();
      });
    },
    onReSet() {
      this.pageInfo = {
        ...this.pageInfo,
        page: 1,
      };
      this.$refs.searchForm.resetFields();
      this.getList();
    },
    onTypeSubmit(formName) {
      // 添加数据
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.formActionTitle == "create") {
            let params = {
              title: this.form.title, // 标题
              content: this.form.content, // 内容
              catalogId: this.form.catalogId[this.form.catalogId.length - 1], // 分类编号
            };
            helpCenterContentModify(params).then((res) => {
              this.messageTips("添加", res);
            });
          } else if (this.formActionTitle == "update") {
            let params = {
              id: this.form.id,
              title: this.form.title, // 标题
              content: this.form.content, // 内容
              catalogId: this.form.catalogId[this.form.catalogId.length - 1], // 分类编号
            };
            helpCenterContentModify(params).then((res) => {
              this.messageTips("修改", res);
            });
          }
        } else {
          return false;
        }
      });
    },
    messageTips(title, res) {
      if (res.code == 200) {
        this.$message.success(title + "成功");
        this.typeStatus = false;
        this.getList();
      } else {
        this.$message.error(res.msg);
      }
    },
    getList() {
      const { dates, ...rest } = this.searchForm;
      console.log(dates);
      let params = {
        ...rest,
        ...getTimes(dates, ["startDate", "endDate"]),
        page: this.pageInfo.page,
        rows: this.pageInfo.limit,
      };
      employeeInfo(params).then((res) => {
        let result = res.data;
        if (res.code == 200) {
          this.tableList = result.rows;
          this.pageInfo.total = result.total;
        }
      });
    },
    getTreeList() {
      helpCenterCatalogList({
        parentId: 0,
      }).then((res) => {
        let result = res.data;
        if (res.code == 200) {
          this.treeList = this.setTableData(result);
        }
      });
    },
    setTableData(result) {
      let list = [];
      list = result.map((res) => {
        let tempList = {};
        tempList = {
          value: res.id,
          label: res.text,
          parentId: res.parentId,
        };
        if (res.children && res.children.length > 0) {
          tempList.children = this.setTableData(res.children);
        }
        return tempList;
      });
      return list;
    },
    openTypes(type, row) {
      this.rowDetail = { ...row };
      this.typeStatus = true;
      this.formActionTitle = type;
      if (type == "update") {
        // 修改的时候赋值
        this.form = {
          id: row.id,
          title: row.title, // 标题
          content: row.content, // 内容
          catalogId: this.getAllIds(row), // 分类编号
        };
      }
    },
    onToUrl() {
      this.$router.push("/insideSetting/helpCategory");
    },
    getAllIds(row) {
      let idAndParent = []; // idAndParent保存 Tree所有节点的id和parentId
      this.getIdAndParent(this.treeList, idAndParent);
      let parentIds = []; // 用于保存选中节点的父节点及父节点的父节点
      this.getId(row.catalogId, parentIds, idAndParent);
      return parentIds.reverse(); //反转数组
    },
    getIdAndParent(tree, idAndParentIds) {
      // idAndParentIds用来保存所有节点的id，parentId
      // 对原有的数据结构进行遍历，拿出所有节点的id，parentId到一个一维数组中。
      tree.forEach((item) => {
        let mid = {
          id: item.value,
          parentId: item.parentId,
        };
        idAndParentIds.push(mid);
        if (item.children) {
          this.getIdAndParent(item.children, idAndParentIds);
        }
      });
    },
    getId(id, parentIds, idAndParent) {
      idAndParent.forEach((item) => {
        if (item.id == id) {
          parentIds.push(id);
          if (item.parentId != -1) {
            this.getId(item.parentId, parentIds, idAndParent);
          }
        }
      });
    },
    onFormClose(formName) {
      this.rowDetail = null;
      this.typeStatus = false;
      // 关闭弹窗重置验证
      this.form = {
        title: null, // 标题
        content: null, // 内容
        catalogId: [], // 分类编号
      };
      // this.$refs.cascader.handleClear()
      // this.$refs[formName].resetFields();
    },
  },
};
</script>
<style lang="scss" scoped>
.el-button--primary {
  background: #14928a;
  border-color: #14928a;
  color: #fff;
  &:hover,
  &:active,
  &:focus {
    background: #14928a;
    border-color: #14928a;
    color: #fff;
  }
}
/deep/.el-date-editor.el-input {
  width: 100% !important;
}
/deep/.el-select {
  width: 100% !important;
}
/deep/.el-table .cell {
  display: -webkit-box;
  overflow: hidden;
  max-height: 45px;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
/deep/.el-dialog__body {
  padding: 10px 20px;
}
.newBand {
  display: inline-block;
}
</style>