zjugis_OA/client/src/views/OaSystem/personnelManagement/rchbkPage/index.vue

<template>
  <div class="oa-sys-list-view">
    <div class="searchBox">
      <div class="form">
        <span class="formSpan">姓名：</span>
        <el-input v-model="formData.nickname" placeholder="请输入姓名" style="width: 210px" />
      </div>
      <div class="form">
        <span class="formSpan">部门：</span>
        <el-tree-select
          v-model="formData.deptId"
          :data="deptList"
          :props="defaultProps"
          check-strictly
          default-expand-all
          node-key="id"
          placeholder="请选择部门"
          clearable
        />
      </div>
      <div class="form">
        <span class="formSpan">岗位：</span>
        <el-select
          clearable
          width="160px"
          v-model="formData.ypgw"
          class="m-2"
          placeholder="请选择岗位"
        >
          <el-option
            v-for="item in postType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="form">
        <span class="formSpan">等级：</span>
        <el-select
          clearable
          width="160px"
          v-model="formData.djcd"
          class="m-2"
          placeholder="请选择等级"
        >
          <el-option
            v-for="item in level"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="from">
        <div class="btnBox">
          <el-button type="primary" style="background: #3485ff" @click="onSearchHandle">
            <img src="@/assets/imgs/OA/search.png" class="mr-8px" alt="" />
            查询</el-button
          >
        </div>
      </div>
    </div>
    <div class="tableBox">
      <TableLayout :is-loading="loading" :data="list">
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column label="姓名" prop="nickname" width="150" />
        <el-table-column label="所在部门" align="center" prop="deptName" />
        <el-table-column show-overflow-tooltip="true" label="面试时间" align="center" prop="mssj">
          <template #default="scope">
            <span>{{ formatDate(scope.row.mssj) }}</span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip="true" label="报到日期" align="center" prop="bdrq">
          <template #default="scope">
            <span>{{ formatDate(scope.row.bdrq) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="岗位" align="center" prop="ypgw">
          <template #default="scope">
            {{ getDictLabel(DICT_TYPE.POST_TYPE, scope.row.ypgw) }}
          </template>
        </el-table-column>
        <el-table-column label="初定等级" align="center" prop="djcd">
          <template #default="scope">
            {{ getDictLabel(DICT_TYPE.ABILITY_LEVEL, scope.row.djcd) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center" fixed="right">
          <template #default="scope">
            <div class="operateBtn">
              <span @click="lookClick(scope.row)">查看</span>
              <span @click="operateClick(scope.row)" style="margin-left: 20px">报到</span>
            </div>
          </template>
        </el-table-column>
      </TableLayout>

      <div class="pageBox">
        <el-pagination
          v-model:current-page="formData.pageNo"
          :page-size="formData.pageSize"
          background
          layout="total, prev, pager, next, jumper"
          :total="total"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <el-dialog v-model="dialogVisible" title="入职办理" width="1200px">
      <div class="dialog_content">
        <el-form :model="form" ref="formEl" :rules="rules" label-width="120px">
          <h4 class="title_form">基本信息</h4>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="员工姓名">
                <el-input v-model="form.nickname" :disabled="true" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="身份证号" prop="cardid">
                <el-input v-model="form.cardid" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="手机号" prop="mobilePhone">
                <el-input v-model="form.mobilePhone" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="性别" prop="sex">
                <el-select v-model="form.sex" style="width: 100%">
                  <el-option
                    v-for="item in sexTypes"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="民族" prop="nation">
                <el-select v-model="form.nation" style="width: 100%">
                  <el-option
                    v-for="item in nationTypes"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="出生日期" prop="birthday">
                <el-date-picker
                  type="date"
                  value-format="YYYY-MM-DD"
                  v-model="form.birthday"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="婚姻状况" prop="hyzk">
                <el-select v-model="form.hyzk" style="width: 100%">
                  <el-option
                    v-for="item in hyTypes"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="户口性质" prop="hkxz">
                <el-select v-model="form.hkxz" style="width: 100%">
                  <el-option
                    v-for="item in hkTypes"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="政治面貌" prop="zzmm">
                <el-select v-model="form.zzmm" style="width: 100%">
                  <el-option
                    v-for="item in polityTypes"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="在岗职位" prop="drzw">
                <el-select v-model="form.drzw" style="width: 100%">
                  <el-option
                    v-for="item in postTypes"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="状态" prop="state">
                <el-select v-model="form.state" style="width: 100%">
                  <el-option
                    v-for="item in staffStateTypes"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="参加工作时间" prop="cjgzsj">
                <el-date-picker
                  type="date"
                  value-format="YYYY-MM-DD"
                  v-model="form.cjgzsj"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="合同签订时间" prop="htqdsj">
                <el-date-picker
                  type="date"
                  value-format="YYYY-MM-DD"
                  v-model="form.htqdsj"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="合同到期时间" prop="htdqs">
                <el-date-picker
                  type="date"
                  value-format="YYYY-MM-DD"
                  v-model="form.htdqs"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="入职时间" prop="rgssj">
                <el-date-picker
                  type="date"
                  value-format="YYYY-MM-DD"
                  v-model="form.rgssj"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="初始司龄(年)" prop="cssl">
                <el-input v-model="form.cssl" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="年限(天)" prop="nj">
                <el-input v-model="form.nj" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="户口所在地" prop="hkszd">
                <el-input v-model="form.hkszd" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="现居住地址" prop="xjzdz">
                <el-input v-model="form.xjzdz" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="签订公司">
                <TreeSelectV2
                  :data="assigneeTree"
                  :props="{ label: 'name', value: 'id' }"
                  v-model="form.qdgsid"
                  :filter-method="filterNodeMethod"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所属部门">
                <DeptTree v-model="form.ssbm" placeholder="请选择所属部门" style="width: 100%" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="指导人">
                <UserOrgTree v-model="form.zdr" placeholder="请选择指导人" style="width: 100%" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="试用期(月)">
                <el-input v-model="form.syq" />
              </el-form-item>
            </el-col>
            <el-col :span="8" />
          </el-row>
          <h4 class="title_form">工资卡信息</h4>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="开户银行">
                <el-input v-model="form.khyh" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="银行卡号">
                <el-input v-model="form.yhzh" />
              </el-form-item>
            </el-col>
          </el-row>
          <h4 class="title_form">教育信息</h4>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="毕业院校" prop="byxx">
                <el-input v-model="form.byxx" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="毕业时间" prop="bysj">
                <el-date-picker
                  type="date"
                  value-format="YYYY-MM-DD"
                  v-model="form.bysj"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="专业" prop="major">
                <el-input v-model="form.major" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="最高学历" prop="zgxl">
                <el-input v-model="form.zgxl" />
              </el-form-item>
            </el-col>
          </el-row>
          <h4 class="title_form">紧急联系人信息</h4>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="联系人姓名" prop="jjlxrxm">
                <el-input v-model="form.jjlxrxm" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系人电话" prop="jjlxrhm">
                <el-input v-model="form.jjlxrhm" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系人关系" prop="jjlxrgx">
                <el-input v-model="form.jjlxrgx" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="title_box">
          <h4 class="title_form">家庭成员信息</h4>
          <el-button type="primary" @click="addFamilyHandle">新增</el-button>
        </div>
        <div class="tableBox">
          <el-table :data="familyTables" :border="true">
            <el-table-column
              v-for="(item, index) in familyColumns"
              :label="item['title']"
              :key="index"
            >
              <template #default="scope">
                <el-input v-model="scope.row[item.key]" :disabled="scope.row['disabled']" />
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <div class="operateBtn">
                  <span @click="saveFamilyHandle(scope.row)">{{
                    scope.row.disabled ? '编辑' : '保存'
                  }}</span>
                  <span
                    @click="deleteFamilyHandle(scope.row, scope.$index)"
                    style="margin-left: 20px"
                  >
                    删除
                  </span>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitHandle"> 提交 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { defaultProps, handleTree } from '@/utils/tree'
import request from '@/config/axios'
import { DICT_TYPE, getDictLabel, getDictOptions } from '@/utils/dict'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import TableLayout from '../../oaViews/layout/TableLayout.vue'
import { formatDate } from '@/utils/formatTime'
import * as DeptApi from '@/api/system/dept'
import { arrFlatten } from '@/views/OaSystem/attendanceCenter/attendAuth'
import UserOrgTree from '@/views/OaSystem/components/UserOrgTree/index.vue'
import DeptTree from '@/views/OaSystem/components/DeptTree/index.vue'
import TreeSelectV2 from '@/components/TreeSelectV2/index.vue'
import { filterNodeMethod } from '@/utils/tree'
import { useQuery } from '@tanstack/vue-query'
import { queryCompanyTree } from '@/service/contract'
import { form, familyColumns, rules } from './common'

defineOptions({ name: 'RchbkPage' })

const postType = getDictOptions(DICT_TYPE.POST_TYPE)
const level = getDictOptions(DICT_TYPE.ABILITY_LEVEL)
const nationTypes = getDictOptions(DICT_TYPE.NATION_TYPE)
const hyTypes = getDictOptions(DICT_TYPE.HY_TYPES)
const hkTypes = getDictOptions(DICT_TYPE.HK_TYPES)
const polityTypes = getDictOptions(DICT_TYPE.POLITY_TYPES)
const postTypes = getDictOptions(DICT_TYPE.POST_TYPE)
const staffStateTypes = getDictOptions(DICT_TYPE.STAFF_STATE_TYPES)
const sexTypes = getDictOptions(DICT_TYPE.SEX_TYPES)

const router = useRouter()

const formData = ref<{
  pageNo: number
  pageSize: number
  deptId: string
  nickname: string
  deptName: string
  ypgw: any
  djcd: any
}>({
  pageNo: 1,
  pageSize: 15,
  deptId: '',
  nickname: '',
  deptName: '',
  ypgw: '',
  djcd: ''
})

const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数
const deptList = ref<Tree[]>([]) // 树形结构
const deptSort: any = ref([])
const initTreeDeps = async () => {
  DeptApi.getSimpleDeptList().then((res) => {
    deptList.value = handleTree(res)
    deptSort.value = arrFlatten(res, 'children')
  })
}

/***
 * 查询受托方数据
 * **/
const { data: assigneeTree } = useQuery(['assigneeTree'], async () => await queryCompanyTree(), {
  staleTime: Infinity
})
/** 查询列表 */
const queryListByPage = async () => {
  loading.value = true
  try {
    const urlApi = `/interview/page`
    const sendData = {
      ...formData.value
    }
    const result = await request.get({ url: urlApi, params: sendData }, '/business')
    list.value = result['list']
    total.value = result['total']
    loading.value = false
  } catch (error) {
    loading.value = false
  }
}

const lookClick = (row: any) => {
  router.push({
    path: '/processLook',
    query: {
      url:
        `${
          import.meta.env.VITE_PROCESS_DETAIL_URI
        }/IFlowInstance/redirectFlowPage?flowInstanceId=` + row.instanceId
    }
  })
}
const dialogVisible = ref<boolean>(false)
const operateClick = (row: any) => {
  dialogVisible.value = true
  form.value.userId = row.userId
  form.value.nickname = row.nickname
}
const formEl = ref<any>(null)
const submitHandle = async () => {
  await formEl.value.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      insertStaffRecords()
    } else {
      console.log('error submit!', fields)
    }
  })
}
/** 新增入职人员 */
const insertStaffRecords = async () => {
  try {
    const urlApi = `/adm/staff-records/insert`
    form.value.familyList = familyTables.value as never[]
    const result = await request.post({ url: urlApi, data: form.value })
    dialogVisible.value = false
    queryListByPage()
  } catch (error) {
    loading.value = false
  }
}

interface FamilyType {
  name: string
  xb: string
  gzdw: string
  zz: string
  lxdh: string
  gx: string
  disabled: boolean
}
const familyTables = ref<FamilyType[]>([])
const addFamilyHandle = () => {
  familyTables.value.push({
    name: '',
    xb: '',
    gzdw: '',
    zz: '',
    lxdh: '',
    gx: '',
    disabled: false
  })
}
const saveFamilyHandle = (item) => {
  item.disabled = !item.disabled
}
const deleteFamilyHandle = (item, index) => {
  familyTables.value.splice(index, 1)
}
/** 搜索按钮操作 */
const onSearchHandle = (): void => {
  queryListByPage()
}

/** 分页操作 */
const handleCurrentChange = (): void => {
  queryListByPage()
}

/** 初始化 */
onMounted(() => {
  initTreeDeps()
  queryListByPage()
})
</script>

<style lang="scss" scoped>
.dialog_content {
  padding: 0px 20px;
}
.title_box {
  display: flex;
  justify-content: space-between;
}
.title_form {
  font-size: 18px;
  margin-bottom: 15px;
}
.operateBtn {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  width: auto !important;
  span {
    color: #2e77e6;
    white-space: nowrap;
  }
}
.tableBox {
  :deep(.el-input.is-disabled .el-input__wrapper) {
    background: none !important;
    box-shadow: none !important;
  }
  :deep(.el-input.is-disabled .el-input__inner) {
    color: #333 !important;
    -webkit-text-fill-color: #333 !important;
  }
}
</style>