人力资源部分

package.json

@@ -18,7 +18,7 @@
     "browserslist": "^4.13.0",
     "caniuse-lite": "^1.0.30001109",
     "clean-deep": "^3.3.0",
-    "dayjs": "^1.8.34",
+    "dayjs": "^1.8.35",
     "default-passive-events": "^1.0.10",
     "element-ui": "^2.12.0",
     "i": "^0.3.6",

src/api/appTenant.js

@@ -46,7 +46,7 @@ export function helpCenterCatalogList(data) {
   })
 }
 
-// 帮助中心分类列表 添加或修改  
+// 帮助中心分类列表 添加或修改
 export function helpCenterCatalogModify(data) {
   return request({
     url: '/api-cms/helpCenterCatalog/modify',
@@ -101,4 +101,29 @@ export function sysSuggestionList(data) {
   })
 }
 
-  
+// 人力资源列表
+export function employeeInfo(data) {
+  return request({
+    method: 'get',
+    url: '/api-web/employeeInfo/queryPage',
+    params: data
+  })
+}
+
+// 人力资源添加
+export function employeeCreate(data) {
+  return request({
+    method: 'post',
+    url: '/api-web/employeeInfo/insert',
+    data
+  })
+}
+
+// 人力资源修改
+export function employeeUpdate(data) {
+  return request({
+    method: 'post',
+    url: '/api-web/employeeInfo/update',
+    data
+  })
+}

src/components/Descriptions/Descriptions.vue

@@ -0,0 +1,157 @@
+/**
+* 详情描述组件
+* https://github.com/winkay/vue-descriptions-component/blob/master/src/components/Descriptions/Descriptions.vue
+*/
+<template>
+  <div>
+    <div class="description-title">
+      <slot name='title'>{{title}}</slot>
+    </div>
+    <div class="description-view">
+      <table class="description-table">
+        <tbody>
+          <tr :key="key" class="description-tr" v-for="(row, key) in rows">
+            <template v-for="(item, index) in row">
+              <th class="description-label" :key="'label-' + key + '-' + index">
+                {{item.label}}
+              </th>
+              <td class="description-content" :colSpan="item.span*2-1" :key="'content-' + key + '-' + index">
+                <description-content :item="item"></description-content>
+              </td>
+            </template>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Descriptions',
+  components: {
+    // 描述内容子组件渲染
+    DescriptionContent: {
+      props: {
+        item: Object
+      },
+      render(h) {
+        return this.item.children
+      }
+    }
+  },
+  props: {
+    title: null, // 描述内容标题
+    column: { // 每行显示的项目个数
+      type: Number,
+      default: 4
+    }
+  },
+  data() {
+    return {
+      rows: []
+    }
+  },
+  watch: {
+    column(value) {
+      this.generateChildrenRow(this.$slots.default || [])
+    }
+  },
+  mounted() {
+    this.generateChildrenRow(this.$slots.default || [])
+  },
+  methods: {
+    // 获取描述内容子项
+    generateChildrenRow(dataSource) {
+      const dataList = dataSource.filter(item => item.tag === 'descriptions-item')
+      console.log(dataList)
+      this.rows = []
+      let leftSpan = this.column
+      let children = []
+      dataList.forEach((item, index) => {
+        const itemAttrs = item.data.attrs || {}
+        // 处理column与span之间的关系
+        if (leftSpan <= (itemAttrs.span || 1)) { // 剩余的列数小于设置的span个数
+          itemAttrs.span = leftSpan
+          leftSpan = 0
+        } else {
+          leftSpan -= itemAttrs.span || 1
+        }
+        children.push({
+          span: itemAttrs.span || 1,
+          label: (item.data && itemAttrs.label) || '',
+          ...item
+        })
+        if (leftSpan <= 0) {
+          leftSpan = this.column
+          this.$set(this.rows, this.rows.length, children)
+          children = []
+        }
+        // 最后一行
+        if (dataList.length % this.column < this.column && index === (dataList.length - 1)) {
+          this.$set(this.rows, this.rows.length, children)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .description-title {
+    margin-bottom: 20px;
+    color: rgba(0,0,0,.85);
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 1.5;
+  }
+  .description-view {
+    width: 100%;
+    border: 1px solid #e8e8e8;
+  }
+  .description-view .description-table {
+    width: 100%;
+    /* border: 1px solid #e8e8e8; */
+    border-collapse: collapse;
+    table-layout: fixed;
+  }
+  .description-view .description-tr {
+    border-bottom: 1px solid #e8e8e8;
+    width: 100%;
+  }
+  .description-view .description-tr:last-child {
+    border-bottom: none;
+  }
+  .description-view .description-label {
+    border-right: 1px solid #e8e8e8;
+    background-color: #fafafa;
+    color: rgba(0, 0, 0, 0.85);
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 22px;
+    /* margin-right: 8px; */
+    padding: 12px 16px;
+    white-space: nowrap;
+    display: table-cell;
+  }
+  .description-view .description-label:after {
+    content: ""; /** content: ":" */
+    margin: 0 8px 0 2px;
+    position: relative;
+    top: -0.5px;
+  }
+  .description-view .description-content {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    border-right: 1px solid #e8e8e8;
+    font-size: 14px;
+    line-height: 1.5;
+    padding: 12px 16px;
+    color: rgba(0, 0, 0, 0.65);
+    display: table-cell;
+  }
+  .description-tr .description-content:last-child {
+    border-right: none;
+  }
+</style>

src/components/Descriptions/index.js

@@ -0,0 +1,3 @@
+import Descriptions from './Descriptions.vue'
+Descriptions.install = Vue => Vue.component(Descriptions.name, Descriptions)
+export default Descriptions

src/router/index.js

@@ -311,6 +311,8 @@ export const asyncRoutes = {
   adapayOperation: () => import('@/views/adapayAccount/form'),
   // 日历课表
   calendarList: () => import('@/views/teacherManager/teacherDetail/components/calendarList'),
-  returnVisitList: () => import('@/views/returnVisitManager/returnVisitList')
+  returnVisitList: () => import('@/views/returnVisitManager/returnVisitList'),
+  // 人力资源
+  HumanResources: () => import('@/views/HumanResources'),
 }
 export default router

src/utils/vueFilter.js

@@ -1,4 +1,5 @@
 import Vue from 'vue'
+import dayjs from 'dayjs'
 
 // 合并数组
 Vue.filter('joinArray', (value, type) => {
@@ -130,6 +131,13 @@ Vue.filter('studentTeamStatus', value => {
 })
 
 // 时间处理
+Vue.filter('dayjsFormat', (value) => {
+  if (value) {
+    return dayjs(value).format('YYYY-MM-DD')
+  } else {
+    return value
+  }
+})
 Vue.filter('formatTimer', (value) => {
   if (value) {
     return value.split(' ')[0]
@@ -237,7 +245,7 @@ Vue.filter('orderType', value => {
   return template[value]
 })
 
-// 
+//
 Vue.filter('paymentChannelType', value => {
   let template = {
     PER: "个人",
@@ -548,4 +556,4 @@ Vue.filter('visiterType', value => {
     'EDU_TEACHER': "教务老师",
   }
   return template[value]
-})
+})

src/views/HumanResources/form.vue

@@ -0,0 +1,486 @@
+<template>
+  <div>
+    <div class="description-title">
+      <span>基本信息</span>
+    </div>
+    <el-form :model="form" :rules="rules" ref="ruleForm" label-width="0px">
+      <div class="description-view">
+        <table class="description-table">
+          <tbody>
+            <tr class="description-tr">
+              <th class="description-label">姓名</th>
+              <td class="description-content">
+                <!-- <span :title='form.realName' v-if="detail">{{form.realName}}</span> -->
+                <el-input v-model="form.realName" size="mini" placeholder="请输入姓名"/>
+              </td>
+              <th class="description-label">手机号</th>
+              <td class="description-content">
+                <!-- <span :title='form.mobileNo' v-if="detail">{{form.mobileNo}}</span> -->
+                <el-input size="mini" v-model="form.mobileNo" placeholder="请输入手机号"/>
+              </td>
+              <th class="description-label">微信号</th>
+              <td class="description-content">
+                <!-- <span :title='form.wechatNo' v-if="detail">{{form.wechatNo}}</span> -->
+                <el-input size="mini" v-model="form.wechatNo" placeholder="请输入微信号"/>
+              </td>
+            </tr>
+            <tr class="description-tr" v-for="(item, index) in educations" :key="index">
+              <th class="description-label desc-item">
+                <span class="close">
+                  <i v-if="index === 0" @click="addEducation" class="el-icon-circle-plus-outline"/>
+                  <i v-else @click="removeEducation(index)" class="el-icon-remove-outline"/>
+                </span>学历</th>
+              <td class="description-content">
+                <!-- <span :title='form.realName' v-if="detail">{{form.realName}}</span> -->
+                <el-input v-model="educations[index].level" size="mini" placeholder="请输入学历"/>
+              </td>
+              <th class="description-label">学校</th>
+              <td class="description-content">
+                <!-- <span :title='form.mobileNo' v-if="detail">{{form.mobileNo}}</span> -->
+                <el-input size="mini" v-model="educations[index].school" placeholder="请输入学校"/>
+              </td>
+              <th class="description-label">毕业时间</th>
+              <td class="description-content">
+                <!-- <span :title='form.wechatNo' v-if="detail">{{form.wechatNo}}</span> -->
+                <el-date-picker
+                  type="month"
+                  placeholder="请选择毕业时间"
+                  size="mini"
+                  v-model="educations[index].year"
+                />
+              </td>
+            </tr>
+            <tr class="description-tr">
+              <th class="description-label">所在城市</th>
+              <td class="description-content">
+                <!-- <span :title='form.liveCity' v-if="detail">{{form.liveCity}}</span> -->
+                <el-input size="mini" v-model.trim="form.liveCity" placeholder="请输入所在城市"/>
+              </td>
+              <th class="description-label">工作意向</th>
+              <td class="description-content">
+                <!-- <span :title='form.intentionCity' v-if="detail">{{form.intentionCity}}</span> -->
+                <el-input size="mini" v-model.trim="form.intentionCity" placeholder="请输入工作意向"/>
+              </td>
+              <th class="description-label">声部</th>
+              <td class="description-content">
+                <!-- <span :title='form.subjectId' v-if="detail">{{form.subjectId}}</span> -->
+                <el-select
+                  v-model.trim="form.subjectId"
+                  clearable
+                  filterable
+                  size="mini"
+                  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>
+              </td>
+            </tr>
+            <tr class="description-tr">
+              <th class="description-label">是否经过评估</th>
+              <td class="description-content">
+                <!-- <span v-if="detail" :title='form.isInterviewed'>{{form.isInterviewed}}</span> -->
+                <el-select size="mini" v-model.trim="form.isInterviewed"
+                            clearable
+                            filterable
+                            placeholder="请选择是否经过评估">
+                  <el-option label="是"
+                              :value="true"></el-option>
+                  <el-option label="否"
+                              :value="false"></el-option>
+                </el-select>
+              </td>
+              <th class="description-label">其他综合情况</th>
+              <td class="description-content" colspan="3">
+                <!-- <span :title='form.otherComment' v-if="detail">{{form.otherComment}}</span> -->
+                <el-input size="mini" v-model.trim="form.otherComment" placeholder="请输入其他综合情况"/>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div class="description-title" style="margin-top: 20px">
+        <span>在职信息</span>
+      </div>
+      <div class="description-view">
+        <table class="description-table">
+          <tbody>
+            <tr class="description-tr">
+              <th class="description-label">入职日期</th>
+              <td class="description-content">
+                <!-- <span :title='form.entryDate' v-if="detail">{{form.entryDate}}</span> -->
+                <el-date-picker
+                  type="date"
+                  placeholder="选择入职日期"
+                  size="mini"
+                  v-model="form.entryDate"
+                />
+              </td>
+              <th class="description-label">职位</th>
+              <td class="description-content">
+                <!-- <span v-if="detail" :title='form.position'>{{form.position}}</span> -->
+                <el-select v-model.trim="form.position"
+                            clearable
+                            filterable
+                            size="mini"
+                            placeholder="请选择职位">
+                    <el-option label="指导老师"
+                              value="ADVISER"></el-option>
+                    <el-option label="教务老师"
+                              value="ACADEMIC"></el-option>
+                    <el-option label="乐队指导"
+                              value="TEACHING"></el-option>
+                  </el-select>
+              </td>
+              <th class="description-label">分部</th>
+              <td class="description-content">
+                <!-- <span v-if="detail" :title='form.organId'>{{form.organId}}</span> -->
+                <el-select v-model.trim="form.organId"
+                    placeholder='请选择分部'
+                    clearable
+                    filterable
+                    size="mini"
+                  >
+                    <el-option v-for='(item,index) in organList'
+                      :key="index"
+                      :value="item.id"
+                      :label="item.name"
+                    >
+                    </el-option>
+                  </el-select>
+              </td>
+            </tr>
+            <tr class="description-tr">
+              <th class="description-label">员工类型</th>
+              <td class="description-content">
+                <!-- <span v-if="detail" :title='form.jobNature'>{{form.jobNature}}</span> -->
+                <el-select size="mini" v-model.trim="form.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>
+              </td>
+              <th class="description-label">员工状态</th>
+              <td class="description-content">
+                <!-- <span v-if="detail" :title='form.isProbationPeriod'>{{form.isProbationPeriod}}</span> -->
+                <el-select size="mini" v-model.trim="form.isProbationPeriod"
+                            clearable
+                            filterable
+                            placeholder="请选择员工状态">
+                  <el-option label="正式"
+                              :value="true"></el-option>
+                  <el-option label="试用"
+                              :value="false"></el-option>
+                </el-select>
+              </td>
+              <th class="description-label">离职日期</th>
+              <td class="description-content">
+                <!-- <span :title='form.resignationDate' v-if="detail">{{form.resignationDate}}</span> -->
+                <el-date-picker
+                  type="date"
+                  placeholder="选择离职日期"
+                  size="mini"
+                  v-model="form.resignationDate"
+                />
+              </td>
+            </tr>
+            <tr class="description-tr">
+              <th class="description-label">证件号码</th>
+              <td class="description-content" colspan="5">
+                <!-- <span :title='form.idCard' v-if="detail">{{form.idCard}}</span> -->
+                <el-input size="mini" v-model="form.idCard" placeholder="请输入证件号码"/>
+              </td>
+            </tr>
+            <tr class="description-tr">
+              <th class="description-label">年龄</th>
+              <td class="description-content">
+                <el-form-item prop="age">
+                  <el-input v-model="form.age" size="mini" placeholder="请输入年龄"/>
+                </el-form-item>
+              </td>
+              <th class="description-label">性别</th>
+              <td class="description-content" colspan="3">
+                <!-- <span v-if="detail" :title='form.gender'>{{form.gender}}</span> -->
+                <el-select size="mini" v-model.trim="form.gender"
+                            clearable
+                            filterable
+                            placeholder="请选择性别">
+                  <el-option label="男"
+                              :value="true"></el-option>
+                  <el-option label="女"
+                              :value="false"></el-option>
+                </el-select>
+              </td>
+            </tr>
+            <tr class="description-tr">
+              <th class="description-label">开户行</th>
+              <td class="description-content">
+                <!-- <span :title='form.bankAddress' v-if="detail">{{form.bankAddress}}</span> -->
+                <el-input size="mini" v-model="form.bankAddress" placeholder="请输入开户行"/>
+              </td>
+              <th class="description-label">银行卡号</th>
+              <td class="description-content" colspan="3">
+                <!-- <span :title='form.bankCardNo' v-if="detail">{{form.bankCardNo}}</span> -->
+                <el-input size="mini" v-model="form.bankCardNo" placeholder="请输入银行卡号"/>
+              </td>
+            </tr>
+            <tr class="description-tr">
+              <th class="description-label">紧急联系人姓名</th>
+              <td class="description-content">
+                <!-- <span :title='form.emergencyContactName' v-if="detail">{{form.emergencyContactName}}</span> -->
+                <el-input size="mini" v-model.trim="form.emergencyContactName" placeholder="请输入紧急联系人姓名"/>
+              </td>
+              <th class="description-label">紧急联系人关系</th>
+              <td class="description-content">
+                <!-- <span :title='form.emergencyContactRelation' v-if="detail">{{form.emergencyContactRelation}}</span> -->
+                <el-input size="mini" v-model.trim="form.emergencyContactRelation" placeholder="请输入紧急联系人关系"/>
+              </td>
+              <th class="description-label">紧急联系人电话</th>
+              <td class="description-content">
+                <!-- <span :title='form.emergencyContactPhone' v-if="detail">{{form.emergencyContactPhone}}</span> -->
+                <el-input size="mini" v-model.trim="form.emergencyContactPhone" placeholder="请输入紧急联系人电话"/>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </el-form>
+    <span class="dialog-footer">
+      <el-button @click="close('ruleForm')">取 消</el-button>
+      <el-button type="primary" class="main-button" @click="onTypeSubmit('ruleForm')">确 定</el-button>
+    </span>
+  </div>
+</template>
+<script>
+// import Vue from 'vue'
+import { employeeCreate, employeeUpdate } from '@/api/appTenant'
+import Descriptions from '@/components/Descriptions'
+
+// Vue.use(Descriptions)
+export default {
+  name: 'hrform',
+  props: ['detail', 'subjectList', 'organList', 'close'],
+  components: {
+    descriptions: Descriptions
+  },
+  data() {
+    return {
+      realName: '',
+      form: {
+        age: '',
+        bankAddress: '',
+        bankCardNo: '',
+        birthdate: '',
+        createTime: '',
+        educationalBackground: '',
+        emergencyContactName: '',
+        emergencyContactPhone: '',
+        emergencyContactRelation: '',
+        entryDate: '',
+        gender: true,
+        idCard: '',
+        intentionCity: '',
+        isInterviewed: true,
+        isProbationPeriod: true,
+        jobNature: '',
+        liveCity: '',
+        mobileNo: '',
+        otherComment: '',
+        position: '',
+        realName: '',
+        resignationDate: '',
+        subjectId: '',
+        wechatNo: '',
+      },
+      rules: {
+        age: [
+          { required: true, message: '请输入年龄', trigger: 'blur' },
+        ],
+        // bankAddress: [
+        //   { required: true, message: '请输入年龄', trigger: 'blur' },
+        // ],
+        // bankAddress: [
+        //   { required: true, message: '请输入年龄', trigger: 'blur' },
+        // ],
+        // bankAddress: [
+        //   { required: true, message: '请输入年龄', trigger: 'blur' },
+        // ],
+        // bankAddress: [
+        //   { required: true, message: '请输入年龄', trigger: 'blur' },
+        // ],
+        // bankAddress: [
+        //   { required: true, message: '请输入年龄', trigger: 'blur' },
+        // ],
+        // bankAddress: [
+        //   { required: true, message: '请输入年龄', trigger: 'blur' },
+        // ],
+        // bankAddress: [
+        //   { required: true, message: '请输入年龄', trigger: 'blur' },
+        // ],
+        // bankAddress: [
+        //   { required: true, message: '请输入年龄', trigger: 'blur' },
+        // ],
+        // bankAddress: [
+        //   { required: true, message: '请输入年龄', trigger: 'blur' },
+        // ],
+        // bankAddress: [
+        //   { required: true, message: '请输入年龄', trigger: 'blur' },
+        // ],
+        // bankAddress: [
+        //   { required: true, message: '请输入年龄', trigger: 'blur' },
+        // ],
+        // bankAddress: [
+        //   { required: true, message: '请输入年龄', trigger: 'blur' },
+        // ],
+        // bankAddress: [
+        //   { required: true, message: '请输入年龄', trigger: 'blur' },
+        // ],
+        // bankAddress: [
+        //   { required: true, message: '请输入年龄', trigger: 'blur' },
+        // ],
+      },
+      educations: []
+    }
+  },
+  watch: {
+    detail() {
+     this.updateData()
+    }
+  },
+  mounted() {
+    this.updateData()
+  },
+  methods: {
+    updateData() {
+      if (this.detail) {
+        this.form = Object.assign({}, this.detail)
+        try {
+          this.educations = JSON.parse(this.detail.educationalBackground)
+        } catch (error) {}
+      } else {
+        this.educations = [{level: '', school: '', year: ''}]
+      }
+    },
+    addEducation() {
+      this.educations = [...this.educations, {level: '', school: '', year: ''}]
+    },
+    removeEducation(index) {
+      this.educations[index] = null
+      this.educations = this.educations.filter(item => !!item)
+    },
+    onTypeSubmit() {
+      this.$refs['ruleForm'].validate(valid => {
+        console.log(valid)
+      })
+      // const { $message } = this
+      // this.form.educationalBackground = JSON.stringify(this.educations)
+      // if (this.detail) {
+      //   employeeUpdate(Object.assign({id: this.detail.id}, this.form))
+      //   .then(res => {
+      //     if (res.code === 200) {
+      //       $message.success('修改成功')
+      //       this.close('ruleForm')
+      //     }
+      //   })
+      // } else {
+      //   employeeCreate(this.form)
+      //   .then(res => {
+      //     if (res.code === 200) {
+      //       $message.success('创建成功')
+      //       this.close('ruleForm')
+      //     }
+      //   })
+      // }
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+  .desc-item{
+    position: relative;
+    .close{
+      position: absolute;
+      left: 10px;
+      cursor: pointer;
+    }
+  }
+  .main-button{
+    background-color: #14928a;
+    border-color: #14928a;
+  }
+  .dialog-footer{
+    display: block;
+    text-align: right;
+    margin-top: 20px;
+  }
+  .description-title {
+    margin-bottom: 20px;
+    color: rgba(0,0,0,.85);
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 1.5;
+  }
+  .description-view {
+    width: 100%;
+    border: 1px solid #e8e8e8;
+  }
+  .description-view .description-table {
+    width: 100%;
+    /* border: 1px solid #e8e8e8; */
+    border-collapse: collapse;
+    table-layout: fixed;
+  }
+  .description-view .description-tr {
+    border-bottom: 1px solid #e8e8e8;
+    width: 100%;
+  }
+  .description-view .description-tr:last-child {
+    border-bottom: none;
+  }
+  .description-view .description-label {
+    border-right: 1px solid #e8e8e8;
+    background-color: #fafafa;
+    color: rgba(0, 0, 0, 0.85);
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 22px;
+    /* margin-right: 8px; */
+    padding: 12px 16px;
+    white-space: nowrap;
+    display: table-cell;
+  }
+  .description-view .description-label:after {
+    content: ""; /** content: ":" */
+    margin: 0 8px 0 2px;
+    position: relative;
+    top: -0.5px;
+  }
+  .description-view .description-content {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    border-right: 1px solid #e8e8e8;
+    font-size: 14px;
+    line-height: 1.5;
+    padding: 12px 16px;
+    color: rgba(0, 0, 0, 0.65);
+    display: table-cell;
+  }
+  .description-tr .description-content:last-child {
+    border-right: none;
+  }
+</style>

src/views/HumanResources/index.vue

@@ -0,0 +1,506 @@
+
+<template>
+  <div class="m-container">
+    <h2>
+      <div class="squrt"></div>人力资源表
+    </h2>
+    <div class="m-core">
+      <div class="newBand" v-permission="'helpCenterContent/modify'" @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="'helpCenterContent/modify'" @click="openTypes('update', scope.row)" type="text">修改</el-button>
+              <!-- <el-button @click="onTypeDelOpeation(scope.row)"
+                v-permission="'helpCenterContent/delete'" 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>