Files
td_official/src/views/project/constructionUser/index.vue
2025-09-09 17:03:01 +08:00

1187 lines
43 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="p-2">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch" class="mb-[10px]">
<el-card shadow="hover">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="人员姓名" prop="userName">
<el-input v-model="queryParams.userName" placeholder="请输入人员姓名" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="分包公司" prop="contractorId" v-hasPermi="['contractor:contractor:list']">
<el-select v-model="queryParams.contractorId" clearable placeholder="全部">
<el-option v-for="item in contractorOpt" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="班组" prop="teamId">
<el-select v-model="queryParams.teamId" clearable placeholder="全部">
<el-option v-for="item in ProjectTeam" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="工种" prop="typeOfWork">
<el-select v-model="queryParams.typeOfWork" clearable placeholder="全部">
<el-option v-for="item in type_of_work" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="打卡" prop="clock">
<el-select v-model="queryParams.clock" clearable placeholder="全部">
<el-option v-for="item in user_clock_type" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</transition>
<el-card shadow="never">
<template #header>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['contractor:constructionUser:add']">新增 </el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="Delete"
:disabled="multiple"
@click="handleDelete()"
v-hasPermi="['contractor:constructionUser:remove']"
>
删除
</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['contractor:constructionUser:export']"
>导出
</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain icon="Edit" :disabled="multiple" @click="statusDialog = true">用户状态编辑 </el-button>
</el-col>
<el-col :span="1.5">
<el-switch
v-model="playCardStatus"
class="ml-2"
inline-prompt
style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
:loading="playCardLoding"
@change="handlePlayCardStatus"
inactive-text="一键关闭打卡"
active-text="一键开启打卡"
/>
</el-col>
<el-row @mouseover="informationStatus = true" :gutter="10" @mouseout="informationStatus = false">
<el-col :span="1.5">
<el-button type="success" plain>员工资料 </el-button>
</el-col>
<el-col :span="1.5" v-show="informationStatus">
<el-button type="primary" plain icon="Edit" @click="downloadTemplate" v-hasPermi="['contractor:constructionUserFile:download']"
>下载资料模板
</el-button>
</el-col>
<el-col :span="1.5" v-show="informationStatus">
<file-upload
v-model="filePath"
isImportInfo
:isShowTip="false"
uploadUrl="/contractor/constructionUserFile/upload/zip"
:limit="1"
:file-size="50"
>
<el-button type="warning" plain icon="Edit" v-hasPermi="['contractor:constructionUserFile:upload']">导入员工资料 </el-button>
</file-upload>
</el-col>
</el-row>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
</template>
<el-table v-loading="loading" :data="constructionUserList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="序号" type="index" width="60" align="center" />
<el-table-column label="姓名" align="center" prop="userName">
<template #default="scope">
<el-link type="primary" @click="handleUpdate(scope.row)">{{ scope.row.userName }}</el-link>
</template>
</el-table-column>
<el-table-column label="分包公司" align="center" prop="contractorVo.name" />
<el-table-column label="班组" align="center" prop="teamId">
<template #default="scope">
{{ getTeamName(scope.row.teamId) }}
</template>
</el-table-column>
<el-table-column label="联系电话" align="center" prop="phone" min-width="120" />
<el-table-column label="性别" align="center" prop="sex">
<template #default="scope">
<dict-tag :options="user_sex_type" :value="scope.row.sex" />
</template>
</el-table-column>
<el-table-column label="民族" align="center" prop="nation" />
<el-table-column label="身份证号码" align="center" prop="sfzNumber" min-width="180" />
<el-table-column label="工种" align="center" prop="typeOfWork" min-width="120">
<template #default="scope">
<dict-tag :options="type_of_work" :value="scope.row.typeOfWork" />
</template>
</el-table-column>
<el-table-column label="打卡状态" align="center" prop="clock">
<template #default="scope">
<el-switch
v-model="scope.row.clock"
class="ml-2"
inline-prompt
style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
active-text="开启"
inactive-text="禁用"
:loading="playCardLoding"
active-value="0"
inactive-value="1"
@change="handleClockStatus(scope.row)"
/>
</template>
</el-table-column>
<el-table-column label="薪水" align="center" min-width="180">
<template #default="scope">
<span class="flex justify-center">
{{ proxy.formatPrice(scope.row.salary ? scope.row.salary : scope.row.standardSalary) }}
(<dict-tag :options="wage_measure_unit_type" :value="scope.row.wageMeasureUnit"></dict-tag>)
</span>
<div class="text-blue text-sm cursor-pointer" @click="openSalaryDialog(scope.row)">{{ scope.row.salary ? '取消变更' : '变更' }}</div>
</template>
</el-table-column>
<el-table-column label="入场时间" align="center" prop="entryDate" min-width="180" />
<el-table-column label="离场时间" align="center" prop="leaveDate" min-width="180" />
<el-table-column label="状态" align="center" prop="status">
<template #default="scope">
{{ scope.row.status == 0 ? '在职' : '离职' }}
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" min-width="300">
<template #default="scope">
<el-space wrap>
<el-button link type="primary" icon="View" @click="handleShowDrawer(scope.row)" v-hasPermi="['contractor:constructionUser:query']">
详情
</el-button>
<el-button link type="success" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['contractor:constructionUser:edit']">
修改
</el-button>
<el-button link type="warning" icon="Female" @click="handlePlayCard(scope.row)"> 打卡 </el-button>
<el-button
link
type="danger"
icon="Avatar"
@click="handleJoinBlacklist(scope.row)"
v-hasPermi="['contractor:constructionBlacklist:add']"
>
黑名单
</el-button>
<!-- <el-button link type="primary" icon="Switch" @click="handleToggle(scope.row)"> 切换人脸 </el-button> -->
<el-button link type="primary" icon="Switch" @click="handleChange(scope.row)" v-hasPermi="['contractor:constructionUser:migration']">
人员迁移
</el-button>
<el-button link type="primary" icon="ChatLineSquare" @click="handleExit(scope.row)"> 入退场记录 </el-button>
<el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['contractor:constructionUser:remove']">
删除
</el-button>
<el-tooltip content="红点:部分上传,绿点:已上传,无点:未上传" placement="right" effect="dark">
<el-badge :is-dot="scope.row.fileUploadStatus != '1'" :type="uploadStatusColor(scope.row.fileUploadStatus)">
<el-button link type="primary" icon="FolderAdd" @click="handleUpload(scope.row)">文件上传 </el-button>
</el-badge>
</el-tooltip>
</el-space>
</template>
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
</el-card>
<!-- 添加或修改施工人员对话框 -->
<el-dialog draggable :title="dialog.title" v-model="dialog.visible" width="930px" append-to-body>
<el-form ref="constructionUserFormRef" :model="form" :rules="rules" label-width="130px" :inline="true">
<div class="block_box">
<div class="msg">用户信息</div>
<div class="el-row">
<div class="el-col el-col-24">
<el-form-item label="人脸照" prop="facePic">
<image-upload v-model="form.facePic" :limit="1" :is-show-tip="false" />
</el-form-item>
</div>
<div class="el-col el-col-12">
<el-form-item label="身份证正面图片" prop="sfzFrontPic">
<image-upload v-model="form.sfzFrontPic" :limit="1" :is-show-tip="false" />
</el-form-item>
</div>
<div class="el-col el-col-12">
<el-form-item label="身份证背面图片" prop="sfzBackPic">
<image-upload v-model="form.sfzBackPic" :limit="1" :is-show-tip="false" />
</el-form-item>
</div>
<div class="el-col el-col-12">
<el-form-item label="人员姓名" prop="userName">
<el-input v-model="form.userName" placeholder="请输入人员姓名" />
</el-form-item>
</div>
<div class="el-col el-col-12">
<el-form-item label="分包公司" prop="contractorId">
<el-select v-model="form.contractorId" clearable placeholder="请选择分包公司">
<el-option v-for="item in contractorOpt" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
</div>
<div class="el-col el-col-12">
<el-form-item label="联系电话" prop="phone">
<el-input v-model="form.phone" placeholder="请输入联系电话" />
</el-form-item>
</div>
<div class="el-col el-col-12">
<el-form-item label="民族" prop="nation">
<el-input v-model="form.nation" placeholder="请输入民族" />
</el-form-item>
</div>
<div class="el-col el-col-12">
<el-form-item label="身份证号码" prop="sfzNumber">
<el-input v-model="form.sfzNumber" placeholder="请输入身份证号码" />
</el-form-item>
</div>
<div class="el-col el-col-12">
<el-form-item label="身份证有效开始期" prop="sfzStart">
<el-date-picker clearable v-model="form.sfzStart" type="date" value-format="YYYY-MM-DD" placeholder="请输入身份证有效开始期" />
</el-form-item>
</div>
<div class="el-col el-col-12">
<el-form-item label="身份证有效结束期" prop="sfzEnd">
<el-date-picker clearable v-model="form.sfzEnd" type="date" value-format="YYYY-MM-DD" placeholder="请输入身份证有效结束期" />
</el-form-item>
</div>
<div class="el-col el-col-12">
<el-form-item label="身份证地址" prop="sfzSite">
<el-input v-model="form.sfzSite" placeholder="请输入身份证地址" />
</el-form-item>
</div>
<div class="el-col el-col-12">
<el-form-item label="身份证出生日期" prop="sfzBirth">
<el-date-picker clearable v-model="form.sfzBirth" type="date" value-format="YYYY-MM-DD" placeholder="请输入身份证出生日期" />
</el-form-item>
</div>
<div class="el-col el-col-12">
<el-form-item label="籍贯" prop="nativePlace">
<el-input v-model="form.nativePlace" placeholder="请输入籍贯" />
</el-form-item>
</div>
</div>
</div>
<div class="block_box">
<div class="msg">银行卡</div>
<div class="el-row">
<div class="el-col el-col-24">
<el-form-item label="银行图片" prop="yhkPic">
<image-upload v-model="form.yhkPic" :limit="1" :is-show-tip="false" />
</el-form-item>
</div>
<div class="el-col el-col-12">
<el-form-item label="银行卡号" prop="yhkNumber">
<el-input v-model="form.yhkNumber" placeholder="请输入银行卡号" />
</el-form-item>
</div>
<div class="el-col el-col-12">
<el-form-item label="开户行" prop="yhkOpeningBank">
<el-input v-model="form.yhkOpeningBank" placeholder="请输入开户行" />
</el-form-item>
</div>
<div class="el-col el-col-12">
<el-form-item label="持卡人" prop="yhkCardholder">
<el-input v-model="form.yhkCardholder" placeholder="请输入持卡人" />
</el-form-item>
</div>
</div>
</div>
<div class="block_box">
<div class="msg">单位信息</div>
<div class="el-row">
<div class="el-col el-col-24">
<el-form-item label="特种作业证图片" prop="specialWorkPic">
<image-upload v-model="form.specialWorkPic" :limit="1" :is-show-tip="false" />
</el-form-item>
</div>
<div class="el-col el-col-12">
<el-form-item label="工种" prop="typeOfWork">
<el-select v-model="form.typeOfWork" clearable placeholder="请选择工种">
<el-option v-for="item in type_of_work" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
</div>
<div class="el-col el-col-12">
<el-form-item label="打卡" prop="clock">
<el-select v-model="form.clock" clearable placeholder="请选择打卡状态">
<el-option v-for="item in user_clock_type" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
</div>
<div class="el-col el-col-12">
<el-form-item label="结算方式" prop="wageMeasureUnit">
<el-select v-model="form.wageMeasureUnit" clearable placeholder="请选择结算方式">
<el-option v-for="item in wage_measure_unit_type" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
</div>
<div class="el-col el-col-12">
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" style="width: 240px" />
</el-form-item>
</div>
</div>
</div>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</template>
</el-dialog>
<el-dialog draggable title="施工人员详情" v-model="showDetailDrawer" width="800px">
<construction-user-detail :user-id="currentUserId" />
</el-dialog>
<el-dialog draggable :title="skipName + '-人员迁移'" v-model="skip" width="500px">
<el-form-item label="所属项目" label-width="130px">
<el-select v-model="skipObject.projectId" @change="selectProject" placeholder="请选择所属项目" style="width: 240px">
<el-option v-for="item in skipOptions" :key="item.id" :label="item.projectName" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="分包单位" label-width="130px">
<el-select v-model="skipObject.contractorId" :disabled="!skipObject.projectId" placeholder="请选择分包单位" style="width: 240px">
<el-option v-for="item in contractorList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="setUnits">确认</el-button>
<el-button @click="skip = false"> 取消 </el-button>
</div>
</template>
</el-dialog>
<el-dialog draggable title="上传文件" v-model="fileStatus" width="770px">
<div class="image_upload" v-for="(item, index) in uploadPath" :key="item.value">
<div class="title">{{ item.label }}</div>
<div class="file_upload_all" v-if="item.value != 7">
<file-upload v-model="item.path" isConstruction :isShowTip="false" :limit="10" :file-type="['pdf']" :file-size="50" />
</div>
</div>
<template #footer>
<div class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="updateProjectFile">确认</el-button>
<el-button @click="fileStatus = false"> 取消 </el-button>
</div>
</template>
</el-dialog>
<el-dialog draggable :title="skipName + '-切换人脸'" v-model="showFaceDrawer" width="770px">
<div class="flex items-center justify-center">
<el-form :model="form" ref="constructionUserFormRef" :rules="rules">
<el-form-item>
<image-upload v-model="form.facePic" :limit="1" :is-show-tip="false" />
</el-form-item>
</el-form>
</div>
<template #footer>
<span
><el-button type="primary" @click="submitForm">保存</el-button>
<el-button @click="showFaceDrawer = false">取消</el-button>
</span>
</template>
</el-dialog>
<el-dialog draggable title="修改在职状态" v-model="statusDialog" width="30%">
<el-form-item label="在职状态">
<el-select v-model="vocationalStatus" placeholder="请选择状态">
<el-option v-for="item in user_status_type" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<template #footer>
<span
><el-button type="primary" @click="handleEdit">保存</el-button>
<el-button @click="statusDialog = false">取消</el-button>
</span>
</template>
</el-dialog>
<el-dialog draggable title="温馨提示" v-model="salaryStatus" width="30%">
<span>请输入薪资</span>
<el-input class="mt-xl" v-model="changeSalary" placeholder="" clearable @change=""></el-input>
<template #footer>
<span>
<el-button type="primary" @click="handleSalary">确认</el-button>
<el-button @click="salaryStatus = false">取消</el-button>
</span>
</template>
</el-dialog>
<el-dialog draggable title="入场退场记录" v-model="exitStatus" width="600px">
<div v-for="(item, index) in exitList">
<el-timeline>
<el-timeline-item color="#0bbd87" class="mb">
{{ '入场时间:' + item.entryDate }}
</el-timeline-item>
<el-timeline-item color="rgb(255, 73, 73)">
<div class="mb">{{ '退场时间:' + item.entryDate }}</div>
<div class="pl-xl">
<span class="text-coolgray font-bold">退场文件<image-preview v-for="itm in item.pathUrl" :src="itm" width="100px" class="mr" /></span
><br />
<p class="mt text-coolgray">
备注<span class="text-blue">{{ item.remark }}</span>
</p>
</div>
</el-timeline-item>
</el-timeline>
</div>
<template #footer>
<span>
<el-button @click="exitStatus = false">关闭</el-button>
</span>
</template>
</el-dialog>
<el-dialog draggable :title="`打卡记录`" v-model="playCardCalendar" width="770px" :close-on-click-modal="false">
<el-calendar ref="calendar" v-model="calendarDay">
<template #header="{ date }">
<span>{{ date }}</span>
<div class="status-detail flex items-center justify-between">
<div class="green">全天考勤正常</div>
<div class="orange">半勤</div>
<div class="red">缺卡</div>
<div class="gray">请假</div>
</div>
<el-date-picker v-model="monthValue" type="month" placeholder="请选择月份" @change="handleMonth" />
</template>
<template #date-cell="{ data }">
<div
class="w100% h100% position-relative m-0 monthDay"
:class="data.isSelected ? 'is-selected' : ''"
@click="handleViewPlayCard(playCardIdx(data), data)"
>
{{ data.day.split('-').slice(1).join('-') }}
<div :style="{ background: playCardColor(data) }" v-if="playCardIdx(data) != -1"></div>
</div>
</template>
</el-calendar>
</el-dialog>
</div>
</template>
<script setup name="ConstructionUser" lang="ts">
import {
addConstructionUser,
delConstructionUser,
getConstructionUser,
listConstructionUser,
updateConstructionUser,
getProjectContractorList,
transferConstructionUser,
updateConstructionUserStatus,
updateConstructionUserPlayCardStatus,
updateConstructionUserPlayCardOneStatus,
updateConstructionUserSalary,
getConstructionUserExit,
dowloadConstructionUserTemplate,
importConstructionUserInfo,
listConstructionMonth
} from '@/api/project/constructionUser';
import {
ConstructionUserForm,
ConstructionUserQuery,
ConstructionUserVO,
skipType,
skipOptionType,
skipTeamType
} from '@/api/project/constructionUser/types';
import { useUserStoreHook } from '@/store/modules/user';
import { listContractor } from '@/api/project/contractor';
import { listProjectTeam } from '@/api/project/projectTeam';
import { ContractorVO } from '@/api/project/contractor/types';
import { ProjectTeamVO } from '@/api/project/projectTeam/types';
import ConstructionUserDetail from '@/views/project/constructionUser/component/ConstructionUserDetail.vue';
import { addConstructionBlacklist } from '@/api/project/constructionBlacklist';
import { listConstructionUserFile, setConstructionUserFile } from '@/api/project/constructionUserFile';
import {
ConstructionUserFileVO,
ConstructionUserExitVO,
ConstructionUserFileForm,
ConstructionUserFileQuery
} from '@/api/project/constructionUserFile/types';
import { ElLoadingService } from 'element-plus';
import type { CalendarDateType, CalendarInstance } from 'element-plus';
import { AttendanceMonthVO } from '@/api/project/attendance/types';
import { parseTime } from '@/utils/ruoyi';
const calendar = ref<CalendarInstance>();
const { proxy } = getCurrentInstance() as any;
const { type_of_work, user_sex_type, user_clock_type, user_file_type, user_status_type, wage_measure_unit_type } = toRefs<any>(
proxy?.useDict('type_of_work', 'user_sex_type', 'user_clock_type', 'user_file_type', 'user_status_type', 'wage_measure_unit_type')
);
// 获取用户 store
const userStore = useUserStoreHook();
// 从 store 中获取项目列表和当前选中的项目
const currentProject = computed(() => userStore.selectedProject);
const ProjectTeam = computed(() => proxy?.$cache.local.getJSON('ProjectTeamList') || []);
const constructionUserList = ref<ConstructionUserVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const skip = ref(false);
const fileStatus = ref(false);
const showFaceDrawer = ref(false);
const statusDialog = ref(false);
const playCardStatus = ref(false);
const playCardLoding = ref(false);
const playCardCalendar = ref(false);
const salaryStatus = ref(false);
const exitStatus = ref(false);
const calendarDay = ref<Date | null>(null);
const monthValue = ref<Date | null>(null);
const informationStatus = ref(false);
const filePath = ref<string>('');
const exitList = ref<ConstructionUserExitVO[]>([]);
const changeSalary = ref<string>('');
const vocationalStatus = ref<number>(null);
const fileList = ref<ConstructionUserFileVO[]>([]);
const queryFormRef = ref<ElFormInstance>();
const constructionUserFormRef = ref<ElFormInstance>();
const skipName = ref('');
const calendarList = ref<Array<AttendanceMonthVO>>([]);
const dialog = reactive<DialogOption>({
visible: false,
title: '',
id: undefined
});
const baseUrl = import.meta.env.VITE_APP_BASE_API;
//人员迁移条件
const skipObject: skipType = reactive({
id: '',
projectId: '',
contractorId: ''
});
const contractorList = ref<Array<skipTeamType>>([]);
//项目列表
const skipOptions = ref<Array<skipOptionType>>([]);
const initFormData: ConstructionUserForm = {
id: undefined,
openid: undefined,
nickName: undefined,
facePic: undefined,
userName: undefined,
projectId: currentProject.value?.id,
contractorId: undefined,
teamId: undefined,
status: undefined,
isPinch: undefined,
phone: undefined,
sex: undefined,
nation: undefined,
sfzFrontPic: undefined,
sfzBackPic: undefined,
sfzNumber: undefined,
sfzStart: undefined,
sfzEnd: undefined,
wageMeasureUnit: undefined,
sfzSite: undefined,
sfzBirth: undefined,
nativePlace: undefined,
yhkPic: undefined,
yhkNumber: undefined,
yhkOpeningBank: undefined,
yhkCardholder: undefined,
typeOfWork: undefined,
specialWorkPic: undefined,
clock: undefined,
entryDate: undefined,
leaveDate: undefined,
salary: undefined,
remark: undefined
};
const data = reactive({
form: { ...initFormData },
queryParams: {
pageNum: 1,
pageSize: 10,
openid: undefined,
nickName: undefined,
userName: undefined,
projectId: currentProject.value?.id,
notUserRole: 1,
contractorId: undefined,
teamId: undefined,
status: undefined,
isPinch: undefined,
phone: undefined,
sex: undefined,
nation: undefined,
sfzNumber: undefined,
sfzStart: undefined,
sfzEnd: undefined,
sfzSite: undefined,
sfzBirth: undefined,
nativePlace: undefined,
yhkNumber: undefined,
yhkOpeningBank: undefined,
yhkCardholder: undefined,
typeOfWork: undefined,
clock: undefined,
entryDate: undefined,
leaveDate: undefined,
salary: undefined,
params: {}
},
rules: {
clock: [{ required: true, message: '打卡不能为空', trigger: 'blur' }],
facePic: [{ required: true, message: '人脸照不能为空', trigger: 'blur' }],
userName: [{ required: true, message: '人员姓名不能为空', trigger: 'blur' }],
projectId: [{ required: true, message: '项目id不能为空', trigger: 'blur' }],
contractorId: [{ required: true, message: '分包公司id不能为空', trigger: 'blur' }],
teamId: [{ required: true, message: '班组id不能为空', trigger: 'blur' }],
phone: [{ required: true, message: '联系电话不能为空', trigger: 'blur' }],
nation: [{ required: true, message: '民族不能为空', trigger: 'blur' }],
sfzFrontPic: [{ required: true, message: '身份证正面图片不能为空', trigger: 'blur' }],
sfzBackPic: [{ required: true, message: '身份证背面图片不能为空', trigger: 'blur' }],
sfzNumber: [{ required: true, message: '身份证号码不能为空', trigger: 'blur' }],
sfzStart: [{ required: true, message: '身份证有效开始期不能为空', trigger: 'blur' }],
sfzEnd: [{ required: true, message: '身份证有效结束期不能为空', trigger: 'blur' }],
sfzSite: [{ required: true, message: '身份证地址不能为空', trigger: 'blur' }],
sfzBirth: [{ required: true, message: '身份证出生日期不能为空', trigger: 'blur' }],
nativePlace: [{ required: true, message: '籍贯不能为空', trigger: 'blur' }],
yhkPic: [{ required: true, message: '银行卡图片不能为空', trigger: 'blur' }],
yhkNumber: [{ required: true, message: '银行卡号不能为空', trigger: 'blur' }],
yhkOpeningBank: [{ required: true, message: '开户行不能为空', trigger: 'blur' }],
typeOfWork: [{ required: true, message: '工种(字典type_of_work)不能为空', trigger: 'blur' }],
wageMeasureUnit: [{ required: true, message: '工资计量单位不能为空', trigger: 'blur' }],
userRole: [{ required: true, message: '用户角色(1=普通用户,2=管理员)不能为空', trigger: 'blur' }]
}
});
/** 返回遍历文件对象 */
const uploadPath = computed(() => {
const list = JSON.parse(JSON.stringify(user_file_type.value));
for (const item of fileList.value) {
const targetType = item.fileType;
for (let i = 0; i < list.length; i++) {
if (list[i].value == targetType) {
list[i] = { ...list[i], ...item }; // 合并对象
break;
}
}
}
for (let i = 0; i < list.length; i++) {
if (!list[i].hasOwnProperty('fileType')) {
list[i].fileType = list[i].value;
}
}
console.log(list);
return list;
});
/** 返回文件上传状态 */
const uploadStatusColor = computed(() => (str: string) => {
switch (str) {
case '3':
return 'success';
case '2':
return 'danger';
default:
return 'info';
}
});
const { queryParams, form, rules } = toRefs(data);
//打卡时间下标
const playCardIdx = computed(() => (date) => {
return calendarList.value.findIndex((item) => item.clockDate == date.day);
});
//打卡状态颜色
const playCardColor = computed(() => (date) => {
const idx = calendarList.value[playCardIdx.value(date)]?.status;
switch (idx) {
case '1':
return 'green';
case '2':
return 'orange';
case '3':
return 'red';
case '4':
return 'gray';
default:
return '';
}
});
/** 查询施工人员列表 */
const getList = async () => {
loading.value = true;
const res = await listConstructionUser(queryParams.value);
constructionUserList.value = res.rows;
total.value = res.total;
loading.value = false;
};
/** 查看打卡记录详情 */
const handleViewPlayCard = async (idx: number, data: any) => {
if (data.type == 'next-month' || data.type == 'prev-month') {
monthValue.value = data.date;
handleCalendarMonth(monthValue.value);
}
const statusColor = calendarList.value[idx]?.status;
if (idx == -1 || statusColor == '4' || statusColor == '3') {
return proxy?.$modal.msgWarning('暂无打卡记录数据');
}
const { downClockTime, downClockPic, upClockTime, upClockPic } = calendarList.value[idx]?.clockList;
ElNotification({
title: '温馨提示',
dangerouslyUseHTMLString: true,
message: `<div style="display: flex;flex-direction: row;align-items: center;margin-top: 15px;height:60px">
<span>头像:</span>
<div style="width: 50px;height: 50px;border-radius:15px;">
<img src="${upClockPic}" style="width: 100%;height: 100%;border-radius:15px;">
</div>
</div><span>上班打卡时间:${upClockTime ? upClockTime : ''}</span><div style="display: flex;flex-direction: row;align-items: center;margin-top: 15px;height:60px">
<span>头像:</span>
<div style="width: 50px;height: 50px;border-radius:15px;">
<img src="${downClockPic}" style="width: 100%;height: 100%;border-radius:15px;">
</div>
</div><span>下班打卡时间:${downClockTime ? downClockTime : ''}</span>`
});
};
const selectProject = (e: any) => {
//选中项目筛选出项目下的分包单位并清空分包单位value
contractorList.value = skipOptions.value.filter((item) => item.id == e)[0].contractorList;
skipObject.contractorId = '';
};
const setUnits = async () => {
//人员迁移
let res = await transferConstructionUser(skipObject);
if (res.code == 200) {
ElMessage.success(res.msg);
skip.value = false;
getList();
}
};
const contractorOpt = ref();
/** 查询当前项目下的分包公司列表 */
const getContractorList = async () => {
loading.value = true;
const res = await listContractor({
pageNum: 1,
pageSize: 20,
projectId: currentProject.value?.id
});
contractorOpt.value = res.rows.map((contractor: ContractorVO) => ({
value: contractor.id,
label: contractor.name
}));
loading.value = false;
handleQuery();
};
const handleMonth = async (e: any) => {
calendarDay.value = e;
handleCalendarMonth(e);
};
const handleCalendarMonth = async (e?) => {
let clockMonth;
if (e) {
clockMonth = parseTime(e, '{y}-{m}');
}
const res = await listConstructionMonth({ userId: dialog.id, clockMonth });
calendarList.value = res.data;
};
/** 上传安全协议书按钮操作 */
const updateProjectFile = async () => {
buttonLoading.value = true;
let fileList = uploadPath.value.map((item) => {
return {
fileId: item.path,
fileType: item.fileType
};
});
const data = {
userId: currentUserId.value,
fileList
};
console.log('🚀 ~ updateProjectFile ~ data:', data);
await setConstructionUserFile(data);
proxy?.$modal.msgSuccess('上传成功');
buttonLoading.value = false;
fileStatus.value = false;
await getList();
};
const getTeamName = computed(() => (teamId: string | number) => {
const team = Array.isArray(ProjectTeam.value) ? ProjectTeam.value.find((item: any) => item.value === teamId) : null;
return team ? team.label : teamId;
});
/** 取消按钮 */
const cancel = () => {
reset();
dialog.visible = false;
};
/** 表单重置 */
const reset = () => {
form.value = { ...initFormData };
constructionUserFormRef.value?.resetFields();
};
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.value.pageNum = 1;
if (contractorOpt.value.length == 1) queryParams.value.contractorId = contractorOpt.value[0].value;
getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value?.resetFields();
handleQuery();
};
/** 多选框选中数据 */
const handleSelectionChange = (selection: ConstructionUserVO[]) => {
ids.value = selection.map((item) => item.id);
single.value = selection.length != 1;
multiple.value = !selection.length;
};
/** 新增按钮操作 */
const handleAdd = () => {
reset();
dialog.visible = true;
dialog.title = '添加施工人员';
};
/** 修改按钮操作 */
const handleUpdate = async (row?: ConstructionUserVO) => {
reset();
const _id = row?.id || ids.value[0];
const res = await getConstructionUser(_id);
Object.assign(form.value, res.data);
dialog.visible = true;
dialog.title = '修改施工人员';
};
/** 展开用户详情抽屉操作 */
const currentUserId = ref<string | number>();
const showDetailDrawer = ref<boolean>(false);
const handleShowDrawer = (row?: ConstructionUserVO) => {
currentUserId.value = row.id;
showDetailDrawer.value = true;
};
//打卡按钮
const handlePlayCard = async (row: ConstructionUserVO) => {
const _id = row?.id || ids.value[0];
skipName.value = row?.userName;
dialog.id = _id;
await handleCalendarMonth();
playCardCalendar.value = true;
};
//下载模板
const downloadTemplate = async () => {
const loadingInstance = ElLoadingService({
lock: true,
text: 'Loading',
background: 'rgba(0, 0, 0, 0.7)'
});
const res = await dowloadConstructionUserTemplate({ projectId: currentProject.value?.id });
loadingInstance.close();
};
//导入资料
const importInformation = async () => {};
/** 人员迁移 */
const handleChange = async (row: ConstructionUserVO) => {
const _id = row?.id || ids.value[0];
skipName.value = row?.userName;
skipObject.id = _id;
const res = await getProjectContractorList();
skipOptions.value = res.data;
skip.value = true;
};
// //切换人脸
// const handleToggle = async (row: ConstructionUserVO) => {
// reset();
// skipName.value = row?.userName;
// const _id = row?.id || ids.value[0];
// const res = await getConstructionUser(_id);
// Object.assign(form.value, res.data);
// showFaceDrawer.value = true;
// };
const handleExit = async (row: ConstructionUserVO) => {
const _id = row?.id || ids.value[0];
currentUserId.value = _id;
const res = await getConstructionUserExit({ userId: _id });
exitList.value = res.rows;
exitStatus.value = true;
};
//上传按钮
const handleUpload = async (row: ConstructionUserVO) => {
const _id = row?.id || ids.value[0];
currentUserId.value = _id;
const res = await listConstructionUserFile({ userId: _id });
fileList.value = res.data;
fileStatus.value = true;
};
/** 提交按钮 */
const submitForm = () => {
constructionUserFormRef.value?.validate(async (valid: boolean) => {
console.log(valid);
if (valid) {
buttonLoading.value = true;
form.value.projectId = currentProject.value?.id;
if (form.value.id) {
await updateConstructionUser(form.value).finally(() => (buttonLoading.value = false));
} else {
await addConstructionUser(form.value).finally(() => (buttonLoading.value = false));
}
proxy?.$modal.msgSuccess('操作成功');
dialog.visible = false;
showFaceDrawer.value = false;
await getList();
} else {
console.log(12);
}
});
};
/** 加入黑名单按钮操作 */
const handleJoinBlacklist = async (row?: ConstructionUserVO) => {
await proxy?.$modal.confirm('确认要将该员工加入黑名单吗?').finally(() => (loading.value = false));
await addConstructionBlacklist({
userId: row.id,
projectId: currentProject.value?.id
});
proxy?.$modal.msgSuccess('加入成功');
await getList();
};
/** 删除按钮操作 */
const handleDelete = async (row?: ConstructionUserVO) => {
const _ids = row?.id || ids.value;
await proxy?.$modal.confirm('是否确认删除施工人员编号为"' + _ids + '"的数据项?').finally(() => (loading.value = false));
await delConstructionUser(_ids);
proxy?.$modal.msgSuccess('删除成功');
await getList();
};
/** 导出按钮操作 */
const handleExport = () => {
proxy?.download(
'project/constructionUser/export',
{
...queryParams.value
},
`constructionUser_${new Date().getTime()}.xlsx`
);
};
/** 用户状态编辑操作 */
const handleEdit = async () => {
if (!vocationalStatus.value) {
proxy?.$modal.msgError('请选择状态');
return;
}
const data = {
idList: ids.value,
status: vocationalStatus.value
};
await updateConstructionUserStatus(data);
proxy?.$modal.msgSuccess('修改成功');
getList();
ids.value = [];
statusDialog.value = false;
};
//打开修改日薪
const openSalaryDialog = (row: ConstructionUserVO) => {
const _id = row?.id || ids.value[0];
currentUserId.value = _id;
if (row.salary) {
setSalary();
return;
}
console.log(row);
salaryStatus.value = true;
};
//变更日薪
const handleSalary = async () => {
if (!changeSalary.value) {
proxy?.$modal.msgError('请输入薪资');
return;
}
setSalary();
};
const setSalary = async () => {
await updateConstructionUserSalary({ id: currentUserId.value, salary: changeSalary.value });
proxy?.$modal.msgSuccess('修改成功');
getList();
changeSalary.value = '';
salaryStatus.value = false;
};
// 批量切换在职状态
const handlePlayCardStatus = async (e) => {
playCardLoding.value = true;
const clock = e ? 1 : 0;
await updateConstructionUserPlayCardStatus({ projectId: currentProject.value?.id, clock });
proxy?.$modal.msgSuccess('修改成功');
getList();
playCardLoding.value = false;
};
// 切换在职状态
const handleClockStatus = async (row: ConstructionUserVO) => {
playCardLoding.value = true;
await updateConstructionUserPlayCardOneStatus({ id: row.id, clock: row.clock });
proxy?.$modal.msgSuccess('修改成功');
getList();
playCardLoding.value = false;
};
//监听项目id刷新数据
const listeningProject = watch(
() => currentProject.value?.id,
(nid, oid) => {
queryParams.value.projectId = nid;
form.value.projectId = nid;
getContractorList();
}
);
onUnmounted(() => {
listeningProject();
});
onMounted(() => {
getContractorList();
});
</script>
<style scoped lang="scss">
.status-detail {
margin: 0 15px;
position: relative;
font-size: 12px;
> div {
margin: 0 15px;
position: relative;
font-size: 12px;
&::before {
position: absolute;
content: '';
display: inline-block;
left: -15px;
top: 30%;
width: 8px;
height: 8px;
border-radius: 50%;
}
}
.red {
&::before {
background-color: red;
}
}
.gray {
&::before {
background-color: gray;
}
}
.orange {
&::before {
background-color: orange;
}
}
.green {
&::before {
background-color: green;
}
}
}
.monthDay {
padding: 8px;
> div {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
bottom: 8px;
left: 0;
right: 0;
margin: auto;
}
.type2 {
background: rgb(255, 0, 0);
}
.type3 {
background: rgb(0, 128, 0);
}
}
.block_box {
border: 1px solid #9eccfa;
border-radius: 6px;
padding: 10px 20px 20px 10px;
margin-bottom: 20px;
}
.msg {
color: #409eff;
font-weight: 700;
font-size: 14px;
margin-bottom: 10px;
}
.image_upload {
border-bottom: 1px solid #e3e3d7;
padding-bottom: 4px;
}
.title {
font-size: 18px;
font-weight: 700;
display: block;
margin: 10px 0;
width: 100%;
font-family: cursive;
}
.information {
display: none;
}
.informationStatus:hover .information {
display: block;
}
::v-deep(.el-calendar) {
.el-calendar-day {
padding: 0;
}
}
</style>