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">
                <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.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>