Skip to content

J
JINRUN-PERPOSITION
Commit 167850c7 authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

add：查看

parent d169d264
Show whitespace changes
Inline Side-by-side
Showing with 316 additions and 173 deletions
src/views/person/yuangong.vue
View file @ 167850c7
......@@ -111,7 +111,17 @@
<el-table-column label="工号" align="center" prop="jobNumber" />
<el-table-column label="联系方式" align="center" prop="phone" />
<el-table-column label="员工类别" align="center" prop="staffTypeName" />
<el-table-column label="员工状态" align="center" prop="jobStatus" />
<el-table-column label="员工状态" align="center">
<template slot-scope="scope">
<span v-if="scope.row.jobStatus === 'Y'" class="status-active"
>在职</span
>
<span v-else-if="scope.row.jobStatus === 'N'" class="status-inactive"
>离职</span
>
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column label="定位卡号" align="center" prop="cardId" />
<el-table-column
label="操作"
......@@ -121,6 +131,13 @@
width="180"
>
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-view"
@click="handleView(scope.row)"
>查看</el-button
>
<el-button
size="mini"
type="text"
......@@ -135,13 +152,13 @@
@click="handleDelete(scope.row)"
>删除</el-button
>
<el-button
<!-- <el-button
size="mini"
type="text"
icon="el-icon-unlock"
@click="handleUnbindCard(scope.row)"
>解绑卡</el-button
>
> -->
</template>
</el-table-column>
</el-table>
......@@ -155,63 +172,97 @@
/>
<!-- 添加或修改人员信息对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<!-- 添加或修改人员信息对话框 -->
<el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
<el-form
ref="form"
:model="form"
:rules="rules"
label-width="80px"
:disabled="dialogType === 'view'"
>
<!-- 使用el-row和el-col实现一行两列布局 -->
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="姓名" prop="realName">
<el-input v-model="form.realName" placeholder="请输入真实姓名" />
</el-form-item>
<el-form-item label="联系方式" prop="phone">
<el-input v-model="form.phone" placeholder="请输入手机号" />
<el-input v-model="form.realName" placeholder="请输入姓名" />
</el-form-item>
</el-col>
<el-form-item label="人员类型名称" prop="personType">
<el-col :span="12">
<el-form-item label="定位卡号" prop="cardId">
<el-select
v-model="form.personType"
placeholder="请选择人员类型"
v-model="form.cardId"
placeholder="请选择定位卡号"
clearable
>
<el-option
v-for="item in personTypeOptions"
:key="item.dictValue"
:label="item.dictLabel"
:value="item.dictValue"
v-for="item in cardIdOptions"
:key="item.cardId"
:label="item.cardId"
:value="item.cardId"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input
v-model="form.remark"
type="textarea"
placeholder="请输入内容"
/>
</el-col>
<el-col :span="12">
<el-form-item label="工号" prop="jobNumber">
<el-input v-model="form.jobNumber" placeholder="" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="性别" prop="sex">
<el-radio-group v-model="form.sex">
<el-radio label="男">男</el-radio>
<el-radio label="女">女</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="籍贯" prop="nativePlace">
<el-input v-model="form.nativePlace" placeholder="" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="健康状态" prop="healthStatus">
<el-input v-model="form.healthStatus" placeholder="" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="出生日期" prop="birth">
<el-date-picker
clearable
v-model="form.birth"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择出生日期"
placeholder=""
>
</el-date-picker>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" placeholder="请输入邮箱" />
</el-form-item>
<el-form-item label="籍贯" prop="nativePlace">
<el-input v-model="form.nativePlace" placeholder="请输入籍贯" />
</el-col>
<el-col :span="12">
<el-form-item label="移动电话" prop="phone">
<el-input v-model="form.phone" placeholder="" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="身份证号" prop="idNumber">
<el-input v-model="form.idNumber" placeholder="请输入身份证号" />
</el-form-item>
<el-form-item label="人员来源" prop="personSource">
<el-input v-model="form.personSource" placeholder="请输入人员来源" />
<el-input v-model="form.idNumber" placeholder="" />
</el-form-item>
<el-form-item label="工号" prop="jobNumber">
<el-input v-model="form.jobNumber" placeholder="请输入工号" />
</el-col>
<el-col :span="12">
<el-form-item label="员工类别" prop="personType">
<el-select v-model="form.personType" placeholder="" clearable>
<el-option
v-for="item in personTypeOptions"
:key="item.dictValue"
:label="item.dictLabel"
:value="item.dictValue"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="入职日期" prop="hireDate">
<el-date-picker
clearable
......@@ -222,30 +273,113 @@
>
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="工龄" prop="seniority">
<el-input v-model="form.seniority" placeholder="" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="职称" prop="professionalTitle">
<el-input v-model="form.professionalTitle" placeholder="请输入职称" />
<el-input v-model="form.professionalTitle" placeholder="" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="职称证书编号" prop="professionalTitleNumber">
<el-input
v-model="form.professionalTitleNumber"
placeholder="请输入职称证书编号"
/>
<el-input v-model="form.professionalTitleNumber" placeholder="" />
</el-form-item>
<el-form-item label="工龄" prop="seniority">
<el-input v-model="form.seniority" placeholder="请输入工龄" />
</el-col>
<!-- 离职日期 - 仅在离职操作时显示 -->
<el-col v-if="dialogType === 'dimission'" :span="12">
<el-form-item label="离职日期" prop="dimissionDate" required>
<el-date-picker
clearable
v-model="form.dimissionDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择离职日期"
>
</el-date-picker>
</el-form-item>
</el-col>
<!-- 返岗日期 - 仅在返岗操作时显示 -->
<el-col v-if="dialogType === 'return'" :span="12">
<el-form-item label="返岗日期" prop="returnDate" required>
<el-date-picker
clearable
v-model="form.returnDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择返岗日期"
>
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
<!-- 仅在返岗操作时显示工号和定位卡号 -->
<el-row v-if="dialogType === 'return'">
<el-col :span="12">
<el-form-item label="工号" prop="jobNumber" required>
<el-input v-model="form.jobNumber" placeholder="请输入工号" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="定位卡号" prop="cardId" required>
<el-select
v-model="form.cardId"
placeholder="请选择定位卡号"
clearable
>
<el-option
v-for="item in cardIdOptions"
:key="item.cardId"
:label="item.cardId"
:value="item.cardId"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row v-if="dialogType !== 'dimission' && dialogType !== 'return'">
<el-col :span="24">
<el-form-item label="人员照片" prop="personPhoto">
<el-input
v-model="form.personPhoto"
type="textarea"
placeholder="请输入内容"
<el-upload
class="avatar-uploader"
action=""
:auto-upload="false"
:on-change="handlePhotoUpload"
:show-file-list="false"
accept="image/*"
>
<img
v-if="form.personPhoto"
:src="form.personPhoto"
class="avatar"
/>
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<div class="upload-tip">点击上传照片</div>
</el-form-item>
</el-col>
</el-row>
<el-row v-if="dialogType !== 'dimission' && dialogType !== 'return'">
<el-col :span="24">
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
<el-button
v-if="dialogType !== 'view'"
type="primary"
@click="submitForm"
>确 定</el-button
>
<el-button @click="cancel">关 闭</el-button>
</div>
</el-dialog>
</div>
......@@ -258,13 +392,15 @@ import {
addInfo,
updateInfo,
unbindCard,
getCardList, // 引入获取定位卡号列表的接口
} from "@/api/jinrun/yuangong";
// import { getDict } from "@/api/jinrun/common";
import { getDict } from "@/api/jinrun/common";
export default {
name: "Info",
data() {
return {
dialogType: "",
// 人员类型下拉列表数据
personTypeOptions: [],
// 遮罩层
......@@ -290,108 +426,81 @@ export default {
pageNum: 1,
pageSize: 10,
personType: "staff",
personTypeName: null,
staffType: null,
staffTypeName: null,
positionIconType: null,
positionIconTypeName: null,
realName: null,
phone: null,
sex: null,
birth: null,
email: null,
nativePlace: null,
nation: null,
maritalStatus: null,
politicsStatus: null,
healthStatus: null,
idType: null,
idNumber: null,
personIc: null,
personCode: null,
personSource: null,
company: null,
companyName: null,
administratorName: null,
administratorPhone: null,
jobNumber: null,
jobStatus: null,
hireDate: null,
hireDateAlias: null,
dimissionDate: null,
officePhone: null,
duty: null,
professionalTitle: null,
professionalTitleNumber: null,
seniority: null,
experience: null,
yearPlusExperience: null,
highestEducation: null,
highestDegree: null,
profession: null,
school: null,
diplomaNumber: null,
cengNumber: null,
accessory: null,
accessoryList: null,
contractorId: null,
contractorName: null,
receiveLeader: null,
receivePhone: null,
gateThrough: null,
leaveTime: null,
visitorStatus: null,
visitTime: null,
process: null,
lastUpdateDate: null,
lastCreateDate: null,
updateFail: null,
onlineStatus: null,
inOutStatus: null,
cardType: null,
cardTypeName: null,
cardId: null,
icCardId: null,
cardPower: null,
personPhoto: null,
photoSign: null,
deptName: null,
reservationEntryStartTime: null,
reservationEntryEndTime: null,
reservationVisitingTime: null,
curUserName: null,
visitorId: null,
jobNumber: null,
},
// 表单参数
form: {
personType: "staff",
sex: "男", // 默认选择男
},
// 表单校验
rules: {
personType: [
{ required: true, message: "人员类型不能为空", trigger: "change" },
],
realName: [
{ required: true, message: "姓名不能为空", trigger: "blur" },
],
},
};
},
created() {
this.getList();
// this.getPersonTypeOptions();
this.getPersonTypeOptions();
// 获取定位卡号列表
this.getCardIdList();
},
methods: {
// /** 获取人员类型下拉列表数据 */
// getPersonTypeOptions() {
// // 调用数据字典接口
// getDict({ dictType: "person_type" })
// .then((response) => {
// this.personTypeOptions = response.data;
// })
// .catch((error) => {
// this.$modal.msgError("获取人员类型数据失败");
// console.error("获取人员类型数据失败:", error);
// });
// },
/** 查看按钮操作 */
handleView(row) {
this.reset();
listInfo({
pageNum: 1,
pageSize: 1,
personId: row.personId,
}).then((response) => {
this.form = response.data[0];
this.open = true;
this.title = "查看人员信息";
this.dialogType = "view";
});
},
/** 获取人员类型下拉列表数据 */
getPersonTypeOptions() {
// 调用数据字典接口
getDict({ dictType: "staff_type" })
.then((response) => {
this.personTypeOptions = response.data;
})
.catch((error) => {
this.$modal.msgError("获取人员类型数据失败");
console.error("获取人员类型数据失败:", error);
});
},
/** 获取定位卡号列表数据 */
getCardIdList() {
getCardList()
.then((response) => {
this.cardIdOptions = response.data || [];
})
.catch((error) => {
this.$modal.msgError("获取定位卡号列表失败");
console.error("获取定位卡号列表失败:", error);
});
},
/** 处理照片上传 */
handlePhotoUpload(file) {
// 创建FileReader来读取图片内容
const reader = new FileReader();
reader.onload = (e) => {
// 将图片内容转为DataURL存储到form中
this.form.personPhoto = e.target.result;
};
reader.readAsDataURL(file.raw);
},
/** 查询人员信息列表 */
getList() {
this.loading = true;
......@@ -422,7 +531,7 @@ export default {
positionIconTypeName: null,
realName: null,
phone: null,
sex: null,
sex: "男",
birth: null,
email: null,
nativePlace: null,
......@@ -510,6 +619,7 @@ export default {
this.reset();
this.open = true;
this.title = "添加人员信息";
this.dialogType = "add";
},
/** 修改按钮操作 */
handleUpdate(row) {
......@@ -522,6 +632,8 @@ export default {
this.form = response.data[0];
this.open = true;
this.title = "修改人员信息";
this.dialogType = "update";
});
},
/** 提交按钮 */
......@@ -590,3 +702,34 @@ export default {
},
};
</script>
<style scoped>
/* 照片上传样式 */
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 150px;
height: 150px;
line-height: 150px;
text-align: center;
}
.avatar {
width: 150px;
height: 150px;
display: block;
}
.upload-tip {
margin-top: 10px;
color: #909399;
font-size: 12px;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment