Skip to content

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

add：查看

parent d169d264
Hide 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 @@ ...@@ -111,7 +111,17 @@
<el-table-column label="工号" align="center" prop="jobNumber" /> <el-table-column label="工号" align="center" prop="jobNumber" />
<el-table-column label="联系方式" align="center" prop="phone" /> <el-table-column label="联系方式" align="center" prop="phone" />
<el-table-column label="员工类别" align="center" prop="staffTypeName" /> <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="定位卡号" align="center" prop="cardId" />
<el-table-column <el-table-column
label="操作" label="操作"
...@@ -121,6 +131,13 @@ ...@@ -121,6 +131,13 @@
width="180" width="180"
> >
<template slot-scope="scope"> <template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-view"
@click="handleView(scope.row)"
>查看</el-button
>
<el-button <el-button
size="mini" size="mini"
type="text" type="text"
...@@ -135,13 +152,13 @@ ...@@ -135,13 +152,13 @@
@click="handleDelete(scope.row)" @click="handleDelete(scope.row)"
>删除</el-button >删除</el-button
> >
<el-button <!-- <el-button
size="mini" size="mini"
type="text" type="text"
icon="el-icon-unlock" icon="el-icon-unlock"
@click="handleUnbindCard(scope.row)" @click="handleUnbindCard(scope.row)"
>解绑卡</el-button >解绑卡</el-button
> > -->
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
...@@ -155,97 +172,214 @@ ...@@ -155,97 +172,214 @@
/> />
<!-- 添加或修改人员信息对话框 --> <!-- 添加或修改人员信息对话框 -->
<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-item label="姓名" prop="realName"> <el-form
<el-input v-model="form.realName" placeholder="请输入真实姓名" /> ref="form"
</el-form-item> :model="form"
<el-form-item label="联系方式" prop="phone"> :rules="rules"
<el-input v-model="form.phone" placeholder="请输入手机号" /> label-width="80px"
</el-form-item> :disabled="dialogType === 'view'"
>
<el-form-item label="人员类型名称" prop="personType"> <!-- 使用el-row和el-col实现一行两列布局 -->
<el-select <el-row :gutter="20">
v-model="form.personType" <el-col :span="12">
placeholder="请选择人员类型" <el-form-item label="姓名" prop="realName">
clearable <el-input v-model="form.realName" placeholder="请输入姓名" />
> </el-form-item>
<el-option </el-col>
v-for="item in personTypeOptions"
:key="item.dictValue"
:label="item.dictLabel"
:value="item.dictValue"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="备注" prop="remark"> <el-col :span="12">
<el-input <el-form-item label="定位卡号" prop="cardId">
v-model="form.remark" <el-select
type="textarea" v-model="form.cardId"
placeholder="请输入内容" placeholder="请选择定位卡号"
/> clearable
</el-form-item> >
<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-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=""
>
</el-date-picker>
</el-form-item>
</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-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
v-model="form.hireDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择入职日期"
>
</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-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="职称证书编号" prop="professionalTitleNumber">
<el-input v-model="form.professionalTitleNumber" placeholder="" />
</el-form-item>
</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-form-item label="出生日期" prop="birth"> <!-- 仅在返岗操作时显示工号和定位卡号 -->
<el-date-picker <el-row v-if="dialogType === 'return'">
clearable <el-col :span="12">
v-model="form.birth" <el-form-item label="工号" prop="jobNumber" required>
type="date" <el-input v-model="form.jobNumber" placeholder="请输入工号" />
value-format="yyyy-MM-dd" </el-form-item>
placeholder="请选择出生日期" </el-col>
> <el-col :span="12">
</el-date-picker> <el-form-item label="定位卡号" prop="cardId" required>
</el-form-item> <el-select
<el-form-item label="邮箱" prop="email"> v-model="form.cardId"
<el-input v-model="form.email" placeholder="请输入邮箱" /> placeholder="请选择定位卡号"
</el-form-item> clearable
<el-form-item label="籍贯" prop="nativePlace"> >
<el-input v-model="form.nativePlace" placeholder="请输入籍贯" /> <el-option
</el-form-item> v-for="item in cardIdOptions"
<el-form-item label="身份证号" prop="idNumber"> :key="item.cardId"
<el-input v-model="form.idNumber" placeholder="请输入身份证号" /> :label="item.cardId"
</el-form-item> :value="item.cardId"
<el-form-item label="人员来源" prop="personSource"> ></el-option>
<el-input v-model="form.personSource" placeholder="请输入人员来源" /> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="工号" prop="jobNumber"> </el-col>
<el-input v-model="form.jobNumber" placeholder="请输入工号" /> </el-row>
</el-form-item>
<el-form-item label="入职日期" prop="hireDate">
<el-date-picker
clearable
v-model="form.hireDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择入职日期"
>
</el-date-picker>
</el-form-item>
<el-form-item label="职称" prop="professionalTitle"> <el-row v-if="dialogType !== 'dimission' && dialogType !== 'return'">
<el-input v-model="form.professionalTitle" placeholder="请输入职称" /> <el-col :span="24">
</el-form-item> <el-form-item label="人员照片" prop="personPhoto">
<el-form-item label="职称证书编号" prop="professionalTitleNumber"> <el-upload
<el-input class="avatar-uploader"
v-model="form.professionalTitleNumber" action=""
placeholder="请输入职称证书编号" :auto-upload="false"
/> :on-change="handlePhotoUpload"
</el-form-item> :show-file-list="false"
<el-form-item label="工龄" prop="seniority"> accept="image/*"
<el-input v-model="form.seniority" placeholder="请输入工龄" /> >
</el-form-item> <img
<el-form-item label="人员照片" prop="personPhoto"> v-if="form.personPhoto"
<el-input :src="form.personPhoto"
v-model="form.personPhoto" class="avatar"
type="textarea" />
placeholder="请输入内容" <i v-else class="el-icon-plus avatar-uploader-icon"></i>
/> </el-upload>
</el-form-item> <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> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button> <el-button
<el-button @click="cancel">取 消</el-button> v-if="dialogType !== 'view'"
type="primary"
@click="submitForm"
>确 定</el-button
>
<el-button @click="cancel">关 闭</el-button>
</div> </div>
</el-dialog> </el-dialog>
</div> </div>
...@@ -258,13 +392,15 @@ import { ...@@ -258,13 +392,15 @@ import {
addInfo, addInfo,
updateInfo, updateInfo,
unbindCard, unbindCard,
getCardList, // 引入获取定位卡号列表的接口
} from "@/api/jinrun/yuangong"; } from "@/api/jinrun/yuangong";
// import { getDict } from "@/api/jinrun/common"; import { getDict } from "@/api/jinrun/common";
export default { export default {
name: "Info", name: "Info",
data() { data() {
return { return {
dialogType: "",
// 人员类型下拉列表数据 // 人员类型下拉列表数据
personTypeOptions: [], personTypeOptions: [],
// 遮罩层 // 遮罩层
...@@ -290,108 +426,81 @@ export default { ...@@ -290,108 +426,81 @@ export default {
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
personType: "staff", personType: "staff",
personTypeName: null,
staffType: null,
staffTypeName: null,
positionIconType: null,
positionIconTypeName: null,
realName: 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, cardId: null,
icCardId: null, jobNumber: null,
cardPower: null,
personPhoto: null,
photoSign: null,
deptName: null,
reservationEntryStartTime: null,
reservationEntryEndTime: null,
reservationVisitingTime: null,
curUserName: null,
visitorId: null,
}, },
// 表单参数 // 表单参数
form: { form: {
personType: "staff", personType: "staff",
sex: "男", // 默认选择男
}, },
// 表单校验 // 表单校验
rules: { rules: {
personType: [ personType: [
{ required: true, message: "人员类型不能为空", trigger: "change" }, { required: true, message: "人员类型不能为空", trigger: "change" },
], ],
realName: [
{ required: true, message: "姓名不能为空", trigger: "blur" },
],
}, },
}; };
}, },
created() { created() {
this.getList(); this.getList();
// this.getPersonTypeOptions(); this.getPersonTypeOptions();
// 获取定位卡号列表
this.getCardIdList();
}, },
methods: { methods: {
// /** 获取人员类型下拉列表数据 */ /** 查看按钮操作 */
// getPersonTypeOptions() { handleView(row) {
// // 调用数据字典接口 this.reset();
// getDict({ dictType: "person_type" }) listInfo({
// .then((response) => { pageNum: 1,
// this.personTypeOptions = response.data; pageSize: 1,
// }) personId: row.personId,
// .catch((error) => { }).then((response) => {
// this.$modal.msgError("获取人员类型数据失败"); this.form = response.data[0];
// console.error("获取人员类型数据失败:", error); 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() { getList() {
this.loading = true; this.loading = true;
...@@ -422,7 +531,7 @@ export default { ...@@ -422,7 +531,7 @@ export default {
positionIconTypeName: null, positionIconTypeName: null,
realName: null, realName: null,
phone: null, phone: null,
sex: null, sex: "男",
birth: null, birth: null,
email: null, email: null,
nativePlace: null, nativePlace: null,
...@@ -510,6 +619,7 @@ export default { ...@@ -510,6 +619,7 @@ export default {
this.reset(); this.reset();
this.open = true; this.open = true;
this.title = "添加人员信息"; this.title = "添加人员信息";
this.dialogType = "add";
}, },
/** 修改按钮操作 */ /** 修改按钮操作 */
handleUpdate(row) { handleUpdate(row) {
...@@ -522,6 +632,8 @@ export default { ...@@ -522,6 +632,8 @@ export default {
this.form = response.data[0]; this.form = response.data[0];
this.open = true; this.open = true;
this.title = "修改人员信息"; this.title = "修改人员信息";
this.dialogType = "update";
}); });
}, },
/** 提交按钮 */ /** 提交按钮 */
...@@ -590,3 +702,34 @@ export default { ...@@ -590,3 +702,34 @@ export default {
}, },
}; };
</script> </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