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>
      <!-- 搜索标题 -->
      <el-form :inline="true" class="searchForm" v-model.trim="searchForm">
        <el-form-item>
          <el-input placeholder="姓名手机号" v-model.trim="searchForm.userNameOrIdOrMobile" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <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>
          <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>
          <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>
          <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="subjectIds"
          :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>
          <el-button @click="getList" type="danger">搜索</el-button>
          <el-button @click="onReSet" type="primary" style="background-color: #409EFF;border-color: #409EFF;">重置</el-button>
        </el-form-item>
      </el-form>
      <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">
                <span>{{ scope.row.realName}}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="mobileNo" label="手机号"></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"></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="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="typeStatus"
      destroy-on-close
      :close-on-click-modal="false"
      @close="onFormClose('ruleForm')"
      width="1050px"
    >
      <hrform :detail.sync="rowDetail" :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 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'

const initSearch = {
  organId: '',
  jobNature: '',
  position: '',
  subjectId: '',
  userNameOrIdOrMobile: '',
}
export default {
  components: { pagination, hrform },
  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()
    // 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(() => {
      })
    },
    onReSet() {
      this.searchForm = {...initSearch}
      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() {
      let params = {
        ...this.searchForm,
        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>