1 Star 1 Fork 0

程兆鹏/员工管理系统

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
vuetian.html 10.02 KB
一键复制 编辑 原始数据 按行查看 历史
程兆鹏 提交于 6年前 . 项目仓库初始化
<!DOCTYPE html>
<html>
<head>
<title>注册</title>
<script type="text/javascript" src="vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<link rel="stylesheet" type="text/css" href="elementui.min.css">
<script type="text/javascript" src="elementui.min.js"></script>
<style type="text/css">
.bjw{
width: 200px;
}
</style>
</head>
<body>
<div id="root">
<el-button type="success" icon="el-icon-plus" @click="tianjia=true">添加员工</el-button>
<el-dialog title="添加员工" :visible.sync="tianjia" width="600px">
<el-form label-width="90px">
<el-form-item label="姓名">
<el-input v-model="tj.name"></el-input>
</el-form-item>
<el-form-item label="性别">
<template>
<el-radio v-model="tj.sex" label="1"></el-radio>
<el-radio v-model="tj.sex" label="0"></el-radio>
</template>
</el-form-item>
<el-form-item label="出生日期">
<el-date-picker v-model="tj.birthday" type="date" placeholder="选择日期"></el-date-picker>
</el-form-item>
<el-form-item label="部门">
<el-input v-model="tj.department"></el-input>
</el-form-item>
<el-form-item label="在职状态">
<el-switch v-model="status" active-text="在职" inactive-text="离职"></el-switch>
</el-form-item>
<el-form-item label="入职时间">
<el-date-picker v-model="tj.joinDate" type="date" placeholder="选择日期"></el-date-picker>
</el-form-item>
<el-form-item label="工资">
<el-input v-model="tj.salary"></el-input>
</el-form-item>
<el-form-item label="身份证号码">
<el-input v-model="tj.IDCard"></el-input>
</el-form-item>
<el-form-item label="手机号码">
<el-input v-model="tj.number"></el-input>
</el-form-item>
</el-form>
<div slot="footer">
<el-button @click="tianjia = false">取 消</el-button>
<el-button type="primary" @click="zc">确 定</el-button>
</div>
</el-dialog>
<el-dialog title="编辑员工" :visible.sync="bianji" width="600px">
<el-form label-width="90px">
<el-form-item label="员工编号">
<el-input v-model="bj.ID" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="姓名">
<el-input v-model="bj.name"></el-input>
</el-form-item>
<el-form-item label="性别">
<template>
<el-radio v-model="bj.sex" label="1"></el-radio>
<el-radio v-model="bj.sex" label="0"></el-radio>
</template>
</el-form-item>
<el-form-item label="出生日期">
<el-date-picker v-model="bj.birthday" type="date" placeholder="选择日期"></el-date-picker>
</el-form-item>
<el-form-item label="部门">
<el-input v-model="bj.department"></el-input>
</el-form-item>
<el-form-item label="在职状态">
<el-switch v-model="bj.status" active-text="在职" inactive-text="离职"></el-switch>
</el-form-item>
<el-form-item label="入职时间">
<el-date-picker v-model="bj.joinDate" type="date" placeholder="选择日期"></el-date-picker>
</el-form-item>
<el-form-item label="离职时间" v-if="!bj.status">
<el-date-picker v-model="bj.leaveDate" type="date" placeholder="选择日期"></el-date-picker>
</el-form-item>
<el-form-item label="工资">
<el-input v-model="bj.salary"></el-input>
</el-form-item>
<el-form-item label="身份证号码">
<el-input v-model="bj.IDCard"></el-input>
</el-form-item>
<el-form-item label="手机号码">
<el-input v-model="bj.number"></el-input>
</el-form-item>
</el-form>
<div slot="footer">
<el-button @click="bianji = false">取 消</el-button>
<el-button type="primary" @click="xgqd">确 定</el-button>
</div>
</el-dialog>
<el-table :data="tableData2">
<el-table-column prop="ID" label="员工编号"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="sex" label="性别"></el-table-column>
<el-table-column prop="birthday" label="出生日期"></el-table-column>
<el-table-column prop="department" label="部门"></el-table-column>
<el-table-column prop="status" label="在职状态">
<template slot-scope="data">
<el-tooltip effect="dark" :content="data.row.joinDate" placement="top">
<el-tag v-if="data.row.status">在职</el-tag>
</el-tooltip>
<el-tooltip effect="dark" :content="data.row.leaveDate" placement="top">
<el-tag type="success" v-if="!data.row.status">离职</el-tag>
</el-tooltip>
</template>
</el-table-column>
<el-table-column prop="joinDate" label="入职日期"></el-table-column>
<el-table-column prop="leaveDate" label="离职日期"></el-table-column>
<el-table-column prop="salary" label="工资"></el-table-column>
<el-table-column prop="IDCard" label="身份证号码" width="200px"></el-table-column>
<el-table-column prop="number" label="手机号码"></el-table-column>
<el-table-column prop="bianj" label="编辑" width="260px">
<template slot-scope="data">
<el-row>
<el-button type="warning" plain icon="el-icon-edit" @click="xg(data.row)">修改</el-button>
<el-button type="danger" plain icon="el-icon-delete" @click="del(data.row.ID)">删除</el-button>
</el-row>
</template>
</el-table-column>
</el-table>
</div>
<script type="text/javascript">
var vue =new Vue({
el:"#root",
data:{
tableData2:[],
tianjia:false,
bianji:false,
status:false,
tj:{
name:"",
sex:"1",
birthday:"",
department:"",
status:this.status,
joinDate:"",
salary:"",
IDCard:"",
number:""
},
bj:{
ID:"",
name:"",
sex:"1",
birthday:"",
department:"",
status:"",
joinDate:"",
salary:"",
IDCard:"",
number:"",
leaveDate:""
}
},
methods:{
// 删除
del(id){
this.$confirm('您确定要删除此条数据?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
axios.get("http://127.0.0.1:8080/del?ID="+id).then(function(pons){
if(pons.data == "yes"){
vue.$notify({
type: 'success',
message: '删除成功!'
})
axios.get("http://127.0.0.1:8080/cx").then(function(pon){
for(let i=0;i<pon.data.length;i++){
if(pon.data[i].sex == 0){
pon.data[i].sex = ""
}else{
pon.data[i].sex = ""
}
}
vue.tableData2 = pon.data
})
}else{
vue.$message({
type: 'info',
message: '删除失败!'
});
}
})
})
},
// 注册
zc(){
this.tianjia = false;
axios.get("http://127.0.0.1:8080/zc",{
params:{
name:this.tj.name,
sex:this.tj.sex,
birthday:this.tj.birthday,
department:this.tj.department,
status:this.tj.status,
joinDate:this.tj.joinDate,
salary:this.tj.salary,
IDCard:this.tj.IDCard,
number:this.tj.number
}
}).then(function(pons){
if(pons.data == "yes"){
vue.$notify({
type: 'success',
message: '注册成功!'
})
axios.get("http://127.0.0.1:8080/cx").then(function(pon){
for(let i=0;i<pon.data.length;i++){
if(pon.data[i].sex == 0){
pon.data[i].sex = ""
}else{
pon.data[i].sex = ""
}
}
vue.tableData2 = pon.data;
})
}else{
vue.$message({
type: 'info',
message: '注册失败!'
})
}
})
},
xg(index){
for(i in index){
this.bj[i] = index[i]
}
if(this.bj.sex == ""){
this.bj.sex = "1"
}else{
this.bj.sex = "0"
}
if(this.bj.status == "0"){
this.bj.status = false;
}else{
this.bj.status = true;
}
this.bianji = true;
// console.log(this.bj.status)
},
xgqd(){
this.bianji = false;
axios.get("http://127.0.0.1:8080/xg",{
params:{
ID:this.bj.ID,
name:this.bj.name,
sex:this.bj.sex,
birthday:this.bj.birthday,
department:this.bj.department,
status:this.bj.status,
joinDate:this.bj.joinDate,
salary:this.bj.salary,
IDCard:this.bj.IDCard,
number:this.bj.number,
leaveDate:this.bj.leaveDate
}
}).then(function(pons){
if(pons.data == "yes"){
vue.$notify({
type: 'success',
message: '编辑成功!'
})
axios.get("http://127.0.0.1:8080/cx").then(function(pon){
for(let i=0;i<pon.data.length;i++){
if(pon.data[i].sex == 0){
pon.data[i].sex = ""
}else{
pon.data[i].sex = ""
}
}
vue.tableData2 = pon.data;
})
}else{
vue.$message({
type: 'info',
message: '编辑失败!'
})
}
}).catch(() => {
this.$message({
type: 'info',
message: '已取消注册'
});
});
}
},
mounted(){
// 查询
axios.get("http://127.0.0.1:8080/cx").then(function(pon){
for(let i=0;i<pon.data.length;i++){
if(pon.data[i].sex == 0){
pon.data[i].sex = ""
}else{
pon.data[i].sex = ""
}
}
vue.tableData2 = pon.data;
})
}
})
</script>
</body>
</html>
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
JavaScript
1
https://gitee.com/chengzhaopeng/employee_management_xit.git
git@gitee.com:chengzhaopeng/employee_management_xit.git
chengzhaopeng
employee_management_xit
员工管理系统
master

搜索帮助