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"></el-input>
        </el-form-item>
        <el-form-item>
          <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>
          <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-group v-for="group in subjectList"
                             :key="group.label"
                             :label="group.label">
              <el-option v-for="item in group.options"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-option-group>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="getList" type="danger">搜索</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="姓名"></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="subjectId" label="声部">
            <template slot-scope="scope">
              {{ subjectListObj[scope.row.subjectId] }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="liveCity" label="所在城市"></el-table-column>
          <el-table-column align="center" prop="intentionCity" label="工作意向"></el-table-column>
          <el-table-column align="center" prop="isInterviewed" label="是否经过评估">
            <template slot-scope="scope">
              {{ scope.row.gender ? '是' : '否' }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="otherComment" label="其它综合情况"></el-table-column>
          <el-table-column align="center" prop="entryDate" label="入职时间">
            <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="organId" label="分部">
            <template slot-scope="scope">
              {{ organListObj[scope.row.organId] }}
            </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" prop="isProbationPeriod" label="员工状态">
            <template slot-scope="scope">
              {{ scope.row.isProbationPeriod ? '正式' : '试用' }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="idCard" label="证件号码"></el-table-column>
          <el-table-column align="center" prop="age" label="年龄"></el-table-column>
          <el-table-column align="center" prop="gender" label="性别">
            <template slot-scope="scope">
              {{ scope.row.gender ? '男' : '女' }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="bankCardNo" label="银行卡号"></el-table-column>
          <el-table-column align="center" prop="bankAddress" label="开户行"></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="resignationDate" label="离职时间">
            <template slot-scope="scope">
              {{ scope.row.resignationDate | dayjsFormat}}
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <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" />
    </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 } from '@/api/buildTeam'
import { subjectListTree } from '@/api/specialSetting'
export default {
  components: { pagination, hrform },
  name: "helpCategory",
  data() {
    return {
      searchForm: {
        organId: '',
        jobNature: '',
        position: '',
        subjectId: '',
        userNameOrIdOrMobile: '',
      },
      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.getTreeList()
  },
  computed: {
    subjectListObj() {
      const data = {}
      for (let i = 0; i < this.subjectList.length; i++) {
        const item = this.subjectList[i];
        for (let j = 0; j < item.options.length; j++) {
          const option = item.options[j];
          data[option.value] = option.label
        }
      }
      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;
      }
    })
    subjectListTree({
        delFlag: 0,
        rows: 9999
      }).then(res => {
        let result = res.data
        if (res.code == 200) {
          let tempArray = []
          result.rows.forEach((item, index) => {
            let subject = []
            item.subjects.forEach(s => {
              subject.push({
                value: s.id,
                label: s.name
              })
            })

            tempArray[index] = {
              label: item.name,
              options: subject
            }
          })
          this.subjectList = tempArray
        }
      })
  },
  methods: {
    openEducation(row) {
      try {
        this.educationList = 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(() => {
      })

    },
    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;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
/deep/.el-dialog__body {
  padding: 10px 20px;
}
.newBand {
  display: inline-block;
}
</style>