Files
JY1.0/src/views/BasicData/PersonnelManagement/index.vue
caoxinyu 60511cf6c3 cxy
2018-12-05 10:41:30 +08:00

624 lines
24 KiB
Vue

<template>
<div class="app-container">
<el-row>
<el-col :span="6">
<el-card>
<el-button type="primary" icon="el-icon-circle-plus-outline" size="small" @click="handleAdd('department_Form')">新增</el-button>
<el-button type="warning" icon="el-icon-edit" size="small" @click="handleEdit()">编辑</el-button>
<el-button type="danger" icon="el-icon-delete" size="small" @click="deleteTable()">删除</el-button>
</el-card>
</el-col>
<el-col :span="18">
<el-card>
<span>人员名称:</span>
<el-input v-model="Name" placeholder="请输入人员名称" class="input-with-select" size="small" style="width: 200px; margin-right: 15px" clearable>
<el-button slot="append" icon="el-icon-search" @click="fetchPeopleForName"/>
</el-input>
<el-button type="primary" icon="el-icon-circle-plus-outline" size="small" @click="addPeople()">新增</el-button>
<!--<el-button v-popover:popover4 type="success" icon="el-icon-sort" size="small" @click="moveGroup">移动-->
<!--</el-button>-->
<!--<el-button size="small" @click="postMaintain()">岗位维护</el-button>-->
<!--<el-popover-->
<!--ref="popover4"-->
<!--width="178"-->
<!--placement="right"-->
<!--trigger="click"-->
<!--@hide="hide()">-->
<!--<el-dropdown size="small" placement="bottom-start" style="margin-right: 0">-->
<!--<el-input-->
<!--v-model="nodeName1"-->
<!--:disabled="true"-->
<!--size="small"-->
<!--placeholder="请选择部门"/>-->
<!--<el-button type="text" size="small" style="margin-left: 60px; margin-top: 15px" @click="moveGroupConfim">-->
<!--确认-->
<!--</el-button>-->
<!--<el-dropdown-menu slot="dropdown">-->
<!--<el-tree-->
<!--ref="treeForm"-->
<!--:data="departmentData"-->
<!--:props="defaultProps"-->
<!--style="width: 150px"-->
<!--node-key="id"-->
<!--accordion-->
<!--@node-click="NodeClick"/>-->
<!--</el-dropdown-menu>-->
<!--</el-dropdown>-->
<!--</el-popover>-->
</el-card>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-card class="box-card" style="min-height: 743px; max-height: 743px">
<div slot="header" class="clearfix">
<span>部门维护</span>
<el-button style="float: right; padding: 3px 0" type="text" @click="expandALL()">展开</el-button>
</div>
<div style="height: 650px">
<el-tree
ref="treeForm"
:data="departmentData"
:props="defaultProps"
show-checkbox
node-key="id"
check-strictly
default-expand-all
@check-change="handleClick"/>
</div>
</el-card>
</el-col>
<el-col :span="18">
<el-card>
<el-table
ref="multipleTable"
:data="List"
stripe
tooltip-effect="dark"
style="width: 100%"
height="679"
highlight-current-row
border
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55"/>
<el-table-column align="center" label="部门名称" width="100">
<template slot-scope="scope">
{{ scope.row.节点名称 }}
</template>
</el-table-column>
<el-table-column align="center" label="考勤编号" width="100">
<template slot-scope="scope">
{{ scope.row.考勤编号 }}
</template>
</el-table-column>
<el-table-column align="center" label="密码" width="100">
<template slot-scope="scope">
{{ scope.row.密码 }}
</template>
</el-table-column>
<el-table-column align="center" label="姓名" width="100">
<template slot-scope="scope">
{{ scope.row.姓名 }}
</template>
</el-table-column>
<el-table-column align="center" label="性别" width="100">
<template slot-scope="scope">
{{ scope.row.性别 }}
</template>
</el-table-column>
<el-table-column align="center" label="身份证号" width="165">
<template slot-scope="scope">
{{ scope.row.身份证号 }}
</template>
</el-table-column>
<el-table-column align="center" label="学历" width="100">
<template slot-scope="scope">
{{ scope.row.学历名称 }}
</template>
</el-table-column>
<el-table-column align="center" label="入职时间" width="100">
<template slot-scope="scope">
{{ scope.row.入公司时间 }}
</template>
</el-table-column>
<el-table-column align="center" label="出生日期" width="100">
<template slot-scope="scope">
{{ scope.row.出生日期 }}
</template>
</el-table-column>
<el-table-column align="center" label="联系方式" width="110">
<template slot-scope="scope">
{{ scope.row.联系电话 }}
</template>
</el-table-column>
<el-table-column align="center" label="岗位工种" width="100">
<template slot-scope="scope">
{{ scope.row.岗位名称 }}
</template>
</el-table-column>
<el-table-column align="center" label="民族" width="100">
<template slot-scope="scope">
{{ scope.row.民族 }}
</template>
</el-table-column>
<el-table-column align="center" label="家庭住址" width="200">
<template slot-scope="scope">
{{ scope.row.家庭住址 }}
</template>
</el-table-column>
<el-table-column label="操作" fixed="right" align="center" width="200">
<template slot-scope="scope">
<el-button
size="mini"
type="primary"
icon="el-icon-edit"
@click="handleEditPeople(scope.row)">编辑</el-button>
<el-button
size="mini"
type="danger"
icon="el-icon-delete"
@click="deletePeopleTable(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="block" style="margin-top: 10px;">
<el-pagination
:current-page="PageCurrent"
:page-sizes="[10, 20, 30, 40]"
:page-size="10"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"/>
</div>
</el-card>
</el-col>
</el-row>
<!--新增和编辑部门-->
<el-dialog :title="department_Title" :visible.sync="department_DFV" center style="min-height: 200px" width="400px">
<el-form ref="department_Form" :model="department_Form" :rules="rules" label-position="left" label-width="110px" class="demo-ruleForm">
<el-form-item label="部门名称" prop="DepartmentName">
<el-input v-model="department_Form.DepartmentName" size="small" style="width:200px"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel">取消</el-button>
<el-button v-if="department_Title==='新增部门'" type="primary" @click="submitAdd('department_Form')">确定</el-button>
<el-button v-else-if="department_Title==='编辑部门'" type="primary" @click="submitEdit('department_Form')">确定</el-button>
</div>
</el-dialog>
<el-dialog :title="people_title" :visible.sync="people_DFV" center style="min-height: 200px" width="800px">
<el-form ref="people_form" :rules="rules" :model="people_form" label-position="left" label-width="110px" class="demo-ruleForm">
<el-row>
<el-col :span="12">
<el-form-item label="考勤编号" prop="AccountNumber">
<el-input v-model="people_form.AccountNumber" size="small" style="width:200px"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="密码" prop="Password">
<el-input v-model="people_form.Password" size="small" style="width:200px"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="姓名" prop="Name">
<el-input v-model="people_form.Name" size="small" style="width:200px"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="性别" prop="Sex">
<el-select v-model="people_form.Sex" clearable placeholder="请选择性别" style="width: 200px" size="small">
<el-option
v-for="item in SexData"
:key="item.value"
:label="item.label"
:value="item.value"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="出生日期" prop="Birthday">
<el-date-picker
v-model="people_form.Birthday"
value-format="yyyy-MM-dd"
size="small"
type="date"
placeholder="请选择出生日期"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="身份证号" prop="IDcard">
<el-input v-model="people_form.IDcard" size="small" style="width:200px"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="入职时间" prop="TimeOfEntry">
<el-date-picker
v-model="people_form.TimeOfEntry"
value-format="yyyy-MM-dd"
size="small"
type="date"
placeholder="请选择入职时间"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系方式" prop="ContactInformation">
<el-input v-model="people_form.ContactInformation" size="small" style="width:200px"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="学历" prop="Education">
<el-select v-model="people_form.Education" clearable placeholder="请选择学历" style="width: 200px" size="small">
<el-option
v-for="item in EducationDate"
:key="item.value"
:label="item.label"
:value="item.value"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="家庭住址" prop="Address">
<el-input v-model="people_form.Address" size="small" style="width:200px"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="民族" prop="Nation">
<el-input v-model="people_form.Nation" size="small" style="width:200px"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="岗位" prop="Post">
<el-select v-model="people_form.Post" clearable placeholder="请选择岗位" style="width: 200px" size="small">
<el-option
v-for="item in PostData"
:key="item.value"
:label="item.label"
:value="item.value"/>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel">取消</el-button>
<el-button v-if="people_title === '新增人员'" type="primary" @click="submitAddPeople">确定</el-button>
<el-button v-else-if="people_title === '编辑人员'" type="primary" @click="submitEditPeople">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { getTree, tree, getTablePeople, getTablePeopleForName, addDepartmentName, delList, editList, delPeopleList, fetchEducationData, fetchPostData, addPeople, editPeople } from '@/api/BasicData/PersonnelManagement'
export default {
data() {
return {
departmentData: [],
expandAll: true,
i: 1,
id: '',
PageCurrent: 1,
PageSize: 10,
List: [],
total: null,
nodeName: '',
department_DFV: false,
department_Form: {
DepartmentName: ''
},
department_Title: '',
Name: '',
people_title: '',
people_DFV: false,
defaultProps: {
children: 'children',
label: 'label'
},
people_form: {
Name: '',
AccountNumber: '',
Password: '',
Sex: null,
Birthday: '',
IDcard: '',
TimeOfEntry: '',
ContactInformation: '',
Address: null,
Nation: '',
ForeignLanguageLevel: null,
Title: null,
PositionStatus: null,
Education: null,
Post: null,
PeopleID: null
},
rules: {
Name: [{ required: true, message: '请输入', trigger: 'blur' }],
AccountNumber: [{ required: true, message: '请输入', trigger: 'blur' }],
Password: [{ required: true, message: '请输入', trigger: 'blur' }],
Sex: [{ required: true, message: '请输入', trigger: 'change' }],
Birthday: [{ required: true, message: '请输入', trigger: 'change' }],
IDcard: [{ required: true, message: '请输入', trigger: 'blur' }],
TimeOfEntry: [{ required: true, message: '请输入', trigger: 'change' }],
ContactInformation: [{ required: true, message: '请输入', trigger: 'blur' }],
Address: [{ required: true, message: '请输入', trigger: 'change' }],
Nation: [{ required: true, message: '请输入', trigger: 'change' }],
ForeignLanguageLevel: [{ required: true, message: '请输入', trigger: 'change' }],
Title: [{ required: true, message: '请输入', trigger: 'change' }],
PositionStatus: [{ required: true, message: '请输入', trigger: 'change' }],
Education: [{ required: true, message: '请输入', trigger: 'change' }],
Post: [{ required: true, message: '请输入', trigger: 'change' }],
DepartmentName: [{ required: true, message: '请输入', trigger: 'blur' }]
},
SexData: [{
value: 1,
label: '男'
}, {
value: 2,
label: '女'
}],
EducationDate: [],
PostData: [],
multipleSelection: [],
nodeName1: [],
count1: 0,
count2: 0
}
},
created() {
this.getTreeData()
this.fetchEducationData()
this.fetchPostData()
},
methods: {
fetchEducationData() {
this.getSelect(fetchEducationData, ['学历名称', '学历编号'], 'EducationDate')
},
fetchPostData() {
this.people_form.Post = ''
this.PostData = []
this.getSelect(fetchPostData, ['岗位名称', '岗位编号'], 'PostData')
},
getTreeData() {
getTree().then(response => {
const data = response.data
this.departmentData = tree(data, 0)
})
},
expandALL() {
this.expandAll = !this.expandAll
for (let i = 0; i < this.$refs.treeForm.store._getAllNodes().length; i++) {
this.$refs.treeForm.store._getAllNodes()[i].expanded = this.expandAll
}
},
handleNodeClick() {
this.getTable(getTablePeople, [this.id, this.PageCurrent, this.PageSize], ['List', 'total'])
},
handleClick(data, checked) {
if (this.$refs.treeForm.getCheckedKeys().length !== 0 && this.$refs.treeForm.getCheckedNodes().length !== 0) {
const data = this.$refs.treeForm.getCheckedKeys()
if (data.length === 1) {
this.id = data[0]
this.handleNodeClick()
}
this.nodeName = this.$refs.treeForm.getCheckedNodes()[0].label
} else {
this.id = ''
this.handleNodeClick()
}
this.i++
if (this.i % 2 === 1) {
if (checked) {
this.$refs.treeForm.setCheckedNodes([data])
} else {
this.$refs.treeForm.setCheckedNodes([])
}
}
},
handleAdd(formName) {
this.department_Title = '新增部门'
this.department_DFV = true
this.department_Form.DepartmentName = ''
this.count1 = this.count1 + 1
if (this.count1 !== 1) {
this.$refs[formName].resetFields()
}
},
handleEdit() {
this.addForm('department_Form')
if (this.id) {
this.department_Title = '编辑部门'
this.department_DFV = true
this.department_Form.DepartmentName = this.nodeName
} else {
this.$message.warning(`请选择要修改的部门`)
}
},
submitAdd(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.department_DFV = false
if (this.id) {
addDepartmentName(this.id, this.department_Form.DepartmentName, 0).then(response => {
if (response.data[0].result === '1') {
this.getTreeData()
this.$message.success('添加成功')
} else {
this.$message.error('添加失败')
}
})
} else {
addDepartmentName(0, this.department_Form.DepartmentName, 0).then(response => {
if (response.data[0].result === '1') {
this.getTreeData()
this.$message.success('添加成功')
} else {
this.$message.error('添加失败')
}
})
}
} else {
return false
}
})
},
submitEdit(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.department_DFV = false
editList(this.id, this.department_Form.DepartmentName).then(response => {
if (response.data[0].result === '1') {
this.getTreeData()
this.$message.success('编辑成功')
} else {
this.$message.error('编辑失败')
}
})
} else {
return false
}
})
},
deleteTable() {
if (this.id) {
this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
delList(this.id).then(response => {
if (response.data[0].result === '1') {
this.getTreeData()
this.i = 1
this.id = ''
this.$message({
message: '已被成功删除',
type: 'success'
})
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
} else {
this.$message.warning(`请选择部门`)
}
},
cancel() {
this.department_DFV = false
this.people_DFV = false
},
fetchPeopleForName() {
if (this.Name) {
getTablePeopleForName(this.Name).then(response => {
for (let i = 0; i < response.data.length; i++) {
// let Data = response.data
if (response.data[i].入公司时间) {
response.data[i].入公司时间 = response.data[i].入公司时间.split(' ')[0]
}
if (response.data[i].出生日期) {
response.data[i].出生日期 = response.data[i].出生日期.split(' ')[0]
}
}
this.List = response.data
})
} else {
this.$message.warning(`请输入人员姓名`)
this.List = []
}
},
addPeople() {
this.people_title = '新增人员'
this.people_DFV = true
this.addForm('people_form')
},
submitAddPeople() {
this.people_DFV = false
if (this.id) {
addPeople(this.id, this.people_form.Sex, this.people_form.Education, this.people_form.Address, this.people_form.Nation, this.people_form.Post, this.people_form.AccountNumber, this.people_form.Password, this.people_form.Name, this.people_form.IDcard, this.people_form.TimeOfEntry, this.people_form.Birthday, this.people_form.ContactInformation).then(response => {
if (response.data[0].result === '1') {
this.i = 1
this.handleNodeClick()
this.$message.success('添加成功')
} else {
this.$message.error('添加失败')
}
})
} else {
this.$message.warning(`请选择部门名称`)
}
},
handleEditPeople(row) {
this.people_title = '编辑人员'
this.people_DFV = true
this.addForm('people_form')
this.people_form.PeopleID = row.人员编号
this.people_form.Sex = parseInt(row.性别编号)
this.people_form.Education = parseInt(row.学历编号)
this.people_form.Address = row.家庭住址
this.people_form.Nation = row.民族
this.people_form.Post = parseInt(row.岗位编号)
this.people_form.AccountNumber = row.考勤编号
this.people_form.Password = row.密码
this.people_form.Name = row.姓名
this.people_form.IDcard = row.身份证号
this.people_form.TimeOfEntry = row.入公司时间
this.people_form.Birthday = row.出生日期
this.people_form.ContactInformation = row.联系电话
},
submitEditPeople() {
this.people_DFV = false
editPeople(this.people_form.PeopleID, this.people_form.Sex, this.people_form.Education, this.people_form.Address, this.people_form.Nation, this.people_form.Post, this.people_form.AccountNumber, this.people_form.Password, this.people_form.Name, this.people_form.IDcard, this.people_form.TimeOfEntry, this.people_form.Birthday, this.people_form.ContactInformation).then(response => {
if (response.data[0].result === '1') {
if (this.id !== '' && this.Name === '') {
this.handleNodeClick()
} else {
this.feathPeopleForName()
}
this.$message.success('编辑成功')
} else {
this.$message.error('编辑失败')
}
})
},
deletePeopleTable(row) {
this.deleteRow(delPeopleList, row.人员编号, function() { this.id ? this.handleNodeClick() : this.feathPeopleForName() })
},
postMaintain() {
},
handleSizeChange(val) {
this.PageSize = val
this.PageCurrent = 1
getTablePeople(this.id, this.PageCurrent, this.PageSize).then(response => {
this.List = response.data.rows
this.total = response.data.total
})
},
handleCurrentChange(val) {
this.PageCurrent = val
getTablePeople(this.id, this.PageCurrent, this.PageSize).then(response => {
this.List = response.data.rows
this.total = response.data.total
})
},
handleSelectionChange(val) {
this.multipleSelection = val
}
}
}
</script>
<style scoped>
</style>