Commit 4e98dabf authored by 王晓旭's avatar 王晓旭

员工管理,点击部门新增时带过去

parent ce4dd66b
<template>
<div>
<!-- 弹出框表单 -->
<el-drawer
:title="title"
:visible.sync="open"
:direction="direction"
size="50%">
<div class="tips">此功能为快速添加员工入口,如需为员工办理完整的入职手续,请使用[员工关系-入职管理]功能</div>
<div>
<!-- 弹出框表单 -->
<el-drawer :title="title" :visible.sync="open" :direction="direction" size="50%">
<div class="tips">此功能为快速添加员工入口,如需为员工办理完整的入职手续,请使用[员工关系-入职管理]功能</div>
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-row>
<!-- <Field label="性别" prop="gender" v-model="form.gender" type="select" :enumData="dict.gender" placeholder="请选择性别"/> -->
<!-- <Field label="出生日期" prop="birthday" v-model="form.birthday" type="date" /> -->
<!-- <Field label="照片" prop="photoPath" v-model="form.photoPath" type="textarea" placeholder="请输入照片"/> -->
<!-- <Field label="身份证号码" prop="idCard" v-model="form.idCard" placeholder="请输入身份证号码"/> -->
<!-- <Field label="工号" prop="workNum" v-model="form.workNum" placeholder="请输入工号"/> -->
<!-- <Field label="政治面貌 " prop="politicalstatus" v-model="form.politicalstatus" type="select" :enumData="dict.politicalstatus" placeholder="请选择政治面貌 "/> -->
<!-- <Field label="所属部门名称" prop="deptName" v-model="form.deptName" placeholder="请输入所属部门名称"/> -->
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-row>
<!-- <Field label="性别" prop="gender" v-model="form.gender" type="select" :enumData="dict.gender" placeholder="请选择性别"/> -->
<!-- <Field label="出生日期" prop="birthday" v-model="form.birthday" type="date" /> -->
<!-- <Field label="照片" prop="photoPath" v-model="form.photoPath" type="textarea" placeholder="请输入照片"/> -->
<!-- <Field label="身份证号码" prop="idCard" v-model="form.idCard" placeholder="请输入身份证号码"/> -->
<!-- <Field label="工号" prop="workNum" v-model="form.workNum" placeholder="请输入工号"/> -->
<!-- <Field label="政治面貌 " prop="politicalstatus" v-model="form.politicalstatus" type="select" :enumData="dict.politicalstatus" placeholder="请选择政治面貌 "/> -->
<!-- <Field label="所属部门名称" prop="deptName" v-model="form.deptName" placeholder="请输入所属部门名称"/> -->
<Field label="员工姓名" :maxLength="10" prop="name" v-model="form.name" placeholder="请输入员工姓名"/>
<Field
label="员工姓名"
:maxLength="10"
prop="name"
v-model="form.name"
placeholder="请输入员工姓名"
/>
<Field label="手机号码" :maxLength="11" prop="phoneNumber" v-model="form.phoneNumber" placeholder="请输入联系电话"/>
<Field
label="手机号码"
:maxLength="11"
prop="phoneNumber"
v-model="form.phoneNumber"
placeholder="请输入联系电话"
/>
<!-- <Field label="所属部门" :maxLength="10" prop="deptName" v-model="form.deptName" placeholder="请选择所属部门" @focus="ishowBumen = true"/>
-->
<!-- <Field label="所属部门" :maxLength="10" prop="deptName" v-model="form.deptName" placeholder="请选择所属部门" @focus="ishowBumen = true"/>
-->
<Field label="所属部门" prop="deptId" v-model="form.deptId" :enumData="dict.deptId" type="select" placeholder="请选择所属部门" />
<Field
label="所属部门"
prop="deptId"
v-model="form.deptId"
:enumData="dict.deptId"
type="select"
placeholder="请选择所属部门"
/>
<Field
label="职位"
prop="positionId"
v-model="form.positionId"
:enumData="dict.positionId"
type="select"
placeholder="请选择职位"
/>
<Field label="职位" prop="positionId" v-model="form.positionId" :enumData="dict.positionId" type="select" placeholder="请选择职位" />
<Field
label="工号"
:maxLength="15"
prop="workNum"
v-model="form.workNum"
placeholder="请输入工号"
/>
<Field label="工号" :maxLength="15" prop="workNum" v-model="form.workNum" placeholder="请输入工号"/>
<!-- <Field label="是否在政务大厅" prop="positionId" v-model="form.positionId" placeholder="请选择" type="select"/> -->
<!-- <Field label="职位名称" prop="positionName" v-model="form.positionName" placeholder="请输入职位名称"/> -->
<!-- <Field label="员工类型" prop="staffType" v-model="form.staffType" type="select" :enumData="dict.staffType" placeholder="请选择员工类型"/> -->
<!-- <Field label="员工状态" prop="status" v-model="form.status" type="select" :enumData="dict.status" placeholder="请选择员工状态"/> -->
<!-- <Field label="入职登记表" prop="registerPath" v-model="form.registerPath" type="textarea" placeholder="请输入入职登记表"/> -->
<!-- <Field label="入职时间" prop="entryDate" v-model="form.entryDate" type="date" /> -->
<!-- <Field label="转正时间" prop="regularDate" v-model="form.regularDate" type="date" /> -->
<!-- <Field label="离职时间" prop="leaveDate" v-model="form.leaveDate" type="date" /> -->
<!-- <Field label="备注" prop="remark" v-model="form.remark" type="textarea" placeholder="请输入备注"/> -->
</el-row>
<!-- <Field label="是否在政务大厅" prop="positionId" v-model="form.positionId" placeholder="请选择" type="select"/> -->
<!-- <Field label="职位名称" prop="positionName" v-model="form.positionName" placeholder="请输入职位名称"/> -->
<!-- <Field label="员工类型" prop="staffType" v-model="form.staffType" type="select" :enumData="dict.staffType" placeholder="请选择员工类型"/> -->
<!-- <Field label="员工状态" prop="status" v-model="form.status" type="select" :enumData="dict.status" placeholder="请选择员工状态"/> -->
<!-- <Field label="入职登记表" prop="registerPath" v-model="form.registerPath" type="textarea" placeholder="请输入入职登记表"/> -->
<!-- <Field label="入职时间" prop="entryDate" v-model="form.entryDate" type="date" /> -->
<!-- <Field label="转正时间" prop="regularDate" v-model="form.regularDate" type="date" /> -->
<!-- <Field label="离职时间" prop="leaveDate" v-model="form.leaveDate" type="date" /> -->
<!-- <Field label="备注" prop="remark" v-model="form.remark" type="textarea" placeholder="请输入备注"/> -->
</el-row>
<form-buttons @submit='submitForm' noCancelBtn />
</el-form>
</el-drawer>
<!-- 部门选择 -->
<el-dialog :visible.sync="ishowBumen" width="70%">
<el-row type="flex" :gutter="20" style="height:40vh">
<el-col :span="12">
<el-scrollbar style="height: 100%">
<el-tree
size="mini"
ref="siteTree"
:data="bumentree"
id="el-tree"
node-key="id"
indent="4"
:props="treeProps"
:load="loadNode"
highlight-current
default-expand-all
:expand-on-click-node="false"
:render-content="renderContent"
@node-click="handleNodeClick"
>
</el-tree>
</el-scrollbar>
</el-col>
<el-col :span="12">
<div class="titles">已选部门</div>
<div class="el-tag flex flex-pack-justify mt10" v-if="deptnode.label" style="max-width:80%">
<div>{{deptnode.label}}</div>
<div @click="cancledept()">
<i class="el-icon-close"></i>
</div>
</div>
</el-col>
</el-row>
<div class="mt20">
<el-button type="primary" size="mini" @click="comfirmbument">确定</el-button>
<el-button size="mini" @click="ishowBumen = false">取消</el-button>
<form-buttons @submit="submitForm" noCancelBtn />
</el-form>
</el-drawer>
<!-- 部门选择 -->
<el-dialog :visible.sync="ishowBumen" width="70%">
<el-row type="flex" :gutter="20" style="height:40vh">
<el-col :span="12">
<el-scrollbar style="height: 100%">
<el-tree
size="mini"
ref="siteTree"
:data="bumentree"
id="el-tree"
node-key="id"
indent="4"
:props="treeProps"
:load="loadNode"
highlight-current
default-expand-all
:expand-on-click-node="false"
:render-content="renderContent"
@node-click="handleNodeClick"
></el-tree>
</el-scrollbar>
</el-col>
<el-col :span="12">
<div class="titles">已选部门</div>
<div
class="el-tag flex flex-pack-justify mt10"
v-if="deptnode.label"
style="max-width:80%"
>
<div>{{deptnode.label}}</div>
<div @click="cancledept()">
<i class="el-icon-close"></i>
</div>
</el-dialog>
</div>
</div>
</el-col>
</el-row>
<div class="mt20">
<el-button type="primary" size="mini" @click="comfirmbument">确定</el-button>
<el-button size="mini" @click="ishowBumen = false">取消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import form from "@/assets/mixins/formdialog";
export default {
name: "StaffDetail",
mixins: [form],
props:{
bumentree:{
type:Array,
default:[]
}
},
components: {
import form from "@/assets/mixins/formdialog";
export default {
name: "StaffDetail",
mixins: [form],
props: {
bumentree: {
type: Array,
default: []
},
currentNode:{
type:Object,
default:{}
}
},
components: {},
watch: {
open(newval) {
if (newval) {
console.log(newval, this.currentNode, this.form.deptId,this.dict.deptId);
if(this.currentNode && this.currentNode.id){
this.form.deptId = JSON.stringify(this.currentNode.id)
this.form.deptName = this.currentNode.label
}
console.log(newval, this.currentNode, this.form.deptId);
},
created() {
this.changePath("staff")
},
data() {
return {
// 遮罩层
loading: true,
// 弹出层标题
title: "个人主页",
// 是否显示弹出层
open: false,
direction:"rtl",
toString:[
"gender",
"politicalstatus",
"staffType",
"status",
],
toDate:[
"birthday",
"entryDate",
"regularDate",
"leaveDate",
],
// 表单校验
rules: {
name: [
{required: true,message: "请输入员工姓名", trigger: "blur" },
{max: 64,message: "最多只能录入64个字符",trigger: "blur",},
],
phoneNumber: [
{required: true,message: "请输入员工手机号码", trigger: "blur" },
{max: 11,message: "最多只能录入11个字符",trigger: "blur",},
],
deptName: [
{required: true,message: "请选择所属部门", trigger: "change" },
],
positionId: [
{required: true,message: "请选择职位", trigger: "blur" }
],
workNum: [
{required: true,message: "请输入工号" },
],
},
treeProps: {
id: "id",
label: "label",
areaCode:"areaCode",
type: "type",
isLeaf: "isLeaf",
children: "children",
icon: "icon",
},
ishowBumen:false,
deptnode:{}
}
},
}
}
},
created() {
this.changePath("staff");
},
data() {
return {
// 遮罩层
loading: true,
// 弹出层标题
title: "个人主页",
// 是否显示弹出层
open: false,
direction: "rtl",
toString: ["gender", "politicalstatus", "staffType", "status"],
toDate: ["birthday", "entryDate", "regularDate", "leaveDate"],
// 表单校验
rules: {
name: [
{ required: true, message: "请输入员工姓名", trigger: "blur" },
{ max: 64, message: "最多只能录入64个字符", trigger: "blur" }
],
phoneNumber: [
{ required: true, message: "请输入员工手机号码", trigger: "blur" },
{ max: 11, message: "最多只能录入11个字符", trigger: "blur" }
],
deptName: [
{ required: true, message: "请选择所属部门", trigger: "change" }
],
positionId: [
{ required: true, message: "请选择职位", trigger: "blur" }
],
workNum: [{ required: true, message: "请输入工号" }]
},
treeProps: {
id: "id",
label: "label",
areaCode: "areaCode",
type: "type",
isLeaf: "isLeaf",
children: "children",
icon: "icon"
},
ishowBumen: false,
deptnode: {}
};
},
methods: {
renderContent: function (h, { node, data, store }) {
return (
<span>
<i style="font-size:16px;color:#409EFF" class={data.icon}></i>
<span style="padding-left: 2px;font-size:14px">{node.label}</span>
</span>
)
},
async loadNode(node, resolve) {
if (node.level === 0) {
return;
}
resolve(data.result);
},
// 点击
handleNodeClick(node) {
this.deptnode = node
},
comfirmbument(){
this.form.deptId = this.deptnode.id
this.form.deptName = this.deptnode.label
this.ishowBumen = false
},
/** 编辑 */
edit(row) {
this.reset()
this.query = { id: row.id };
this.urls.currUrl ="staff/edit";
this.getData();
this.pageInfo.type="edit"
this.title = "修改员工基本信息";
},
/** 新增 */
add(row) {
this.reset()
this.urls.currUrl = "staff/add";
this.getData();
this.pageInfo.type="add"
this.title = "新增员工基本信息";
},
/** 查看*/
view(row) {
this.reset()
this.query = { id: row.id };
this.urls.currUrl ="staff/view";
this.getData();
this.pageInfo.type="view"
this.title = "员工基本信息详细";
},
/**取消按钮 */
cancel() {
this.open = false;
},
/**获取数据后弹框 */
afterRender(data) {
this.open = true;
},
methods: {
renderContent: function(h, { node, data, store }) {
return (
<span>
<i style="font-size:16px;color:#409EFF" class={data.icon}></i>
<span style="padding-left: 2px;font-size:14px">{node.label}</span>
</span>
);
},
async loadNode(node, resolve) {
if (node.level === 0) {
return;
}
resolve(data.result);
},
// 点击
handleNodeClick(node) {
this.deptnode = node;
},
comfirmbument() {
this.form.deptId = this.deptnode.id;
this.form.deptName = this.deptnode.label;
this.ishowBumen = false;
},
/** 编辑 */
edit(row) {
this.reset();
this.query = { id: row.id };
this.urls.currUrl = "staff/edit";
this.getData();
this.pageInfo.type = "edit";
this.title = "修改员工基本信息";
},
/** 新增 */
add(row) {
this.reset();
this.urls.currUrl = "staff/add";
this.getData();
this.pageInfo.type = "add";
this.title = "新增员工基本信息";
},
/** 查看*/
view(row) {
this.reset();
this.query = { id: row.id };
this.urls.currUrl = "staff/view";
this.getData();
this.pageInfo.type = "view";
this.title = "员工基本信息详细";
},
/**取消按钮 */
cancel() {
this.open = false;
},
/**获取数据后弹框 */
afterRender(data) {
this.open = true;
},
afterSubmit(data) {
this.open = false;
this.$emit("ok");
},
afterSubmit(data) {
this.open = false;
this.$emit("ok");
},
// 表单重置
reset() {
this.form = {
name : "",
gender : 1,
birthday : null,
photoPath : "",
phoneNumber : "",
idCard : "",
workNum : "",
politicalstatus : 1,
deptId : null,
deptName : "",
positionId : null,
positionName : "",
staffType : 1,
status : 1,
registerPath : "",
entryDate : null,
regularDate : null,
leaveDate : null,
remark : "",
};
this.resetForm("form");
},
resetForm(refName) {
if (this.$refs[refName]) {
this.$refs[refName].resetFields();
}
},
cancledept(){
this.deptnode = {}
}
}
// 表单重置
reset() {
this.form = {
name: "",
gender: 1,
birthday: null,
photoPath: "",
phoneNumber: "",
idCard: "",
workNum: "",
politicalstatus: 1,
deptId: null,
deptName: "",
positionId: null,
positionName: "",
staffType: 1,
status: 1,
registerPath: "",
entryDate: null,
regularDate: null,
leaveDate: null,
remark: ""
};
this.resetForm("form");
},
resetForm(refName) {
if (this.$refs[refName]) {
this.$refs[refName].resetFields();
}
},
cancledept() {
this.deptnode = {};
}
}
};
</script>
<style scoped>
.tips{
margin-left: 120px;
margin-bottom: 20px;
color: #999;
font-size: 15px;
.tips {
margin-left: 120px;
margin-bottom: 20px;
color: #999;
font-size: 15px;
}
.titles{
color: #409EFF;
.titles {
color: #409eff;
font-size: 16px;
display: flex;
align-items: center;
}
.titles::before{
content: '';
width:6px;
.titles::before {
content: "";
width: 6px;
height: 16px;
background-color: #409EFF;
background-color: #409eff;
display: inline-block;
margin-right: 10px;
}
......
......@@ -182,7 +182,7 @@
</div>
</el-dialog>
<drawer-show ref="drawerform" @ok="getData" :bumentree="areaData" />
<drawer-show ref="drawerform" @ok="getData" :bumentree="areaData" :currentNode="currentNode"/>
</div>
</template>
......@@ -248,6 +248,7 @@ export default {
},
handleNodeClick(node) {
console.log(node,123123);
this.currentNode = node;
this.query = { deptId: node.id };
this.getData();
......
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