员工信息管理系统 - 查询、添加、修改、删除员工信息

<div id="app">
    <!--搜索-->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
            <el-input v-model="formInline.staffname" placeholder="请输入员工姓名"></el-input>
            <el-input v-model="formInline.branchname" placeholder="请输入店铺名称"></el-input>
            <el-select v-model="formInline.deptname" clearable placeholder="请输入部门名称">
                <el-option label="" :value="deptname.deptname" v-for="deptname in deptname">{{deptname.deptname}}</el-option>
            </el-select>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button type="primary" @click="add()">添加</el-button>
            <!--添加表单-->
            <el-dialog :title="title" :visible.sync="dialogFormVisible1">
                <el-form :model="form">
                    <el-form-item label="员工工号" :label-width="formLabelWidth">
                        <el-input v-model="form.staffid" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="员工姓名" :label-width="formLabelWidth">
                        <el-input v-model="form.staffname" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="员工密码" :label-width="formLabelWidth">
                        <el-input type="password" v-model="form.password" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="身份证号" :label-width="formLabelWidth">
                        <el-input v-model="form.idcard" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="员工住址" :label-width="formLabelWidth">
                        <el-input v-model="form.address" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="联系方式" :label-width="formLabelWidth">
                        <el-input v-model="form.phone" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="是否在职" :label-width="formLabelWidth">
                        <el-select v-model="form.state" placeholder="请选择职位状态">
                            <el-option label="在职" :value="var1"></el-option>
                            <el-option label="离职" :value="var2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="所在店名" :label-width="formLabelWidth">
                        <el-select v-model="form.branchid" clearable placeholder="请输入店铺名称">
                            <el-option :label="branchname.branchname" :value="branchname.branchid" v-for="branchname in branchname">{{branchname.branchname}}</el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="部门名称" :label-width="formLabelWidth">
                        <el-select v-model="form.deptid" clearable placeholder="请输入部门名称">
                            <el-option :label="deptname.deptname" :value="deptname.deptid" v-for="deptname in deptname">{{deptname.deptname}}</el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="员工职位" :label-width="formLabelWidth">
                        <el-select v-model="form.roleid" clearable placeholder="请输入员工职位">
                            <el-option :label="rolename.rolename" :value="rolename.roleid" v-for="rolename in rolename">{{rolename.rolename}}</el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                    <el-button type="primary" @click="edit">确 定</el-button>
                </div>
            </el-dialog>
            <!--修改-->
            <el-dialog :title="title" :visible.sync="dialogFormVisible2">
                <el-form :model="form">
                    <el-form-item label="员工工号" :label-width="formLabelWidth">
                        <el-input v-model="form.staffid" readonly autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="员工姓名" :label-width="formLabelWidth">
                        <el-input v-model="form.staffname" readonly autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="员工密码" :label-width="formLabelWidth">
                        <el-input type="password" v-model="form.password" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="身份证号" :label-width="formLabelWidth">
                        <el-input v-model="form.idcard" readonly autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="员工住址" :label-width="formLabelWidth">
                        <el-input v-model="form.address" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="联系方式" :label-width="formLabelWidth">
                        <el-input v-model="form.phone" readonly autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="是否在职" :label-width="formLabelWidth">
                        <el-select v-model="form.state" placeholder="请选择职位状态">
                            <el-option label="在职" :value="var1"></el-option>
                            <el-option label="离职" :value="var2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="所在店名" :label-width="formLabelWidth">
                        <el-select v-model="form.branchname"  disabled  placeholder="请输入店铺名称">
                            <el-option :label="branchname.branchname" :value="branchname.branchid" v-for="branchname in branchname">{{branchname.branchname}}</el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="部门名称" :label-width="formLabelWidth">
                        <el-select v-model="form.deptname" disabled  placeholder="请输入部门名称">
                            <el-option :label="deptname.deptname" :value="deptname.deptid" v-for="deptname in deptname">{{deptname.deptname}}</el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="员工职位" :label-width="formLabelWidth">
                        <el-select v-model="form.rolename" disabled  placeholder="请输入员工职位">
                            <el-option :label="rolename.rolename" :value="rolename.roleid" v-for="rolename in rolename">{{rolename.rolename}}</el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                    <el-button type="primary" @click="edit">确 定</el-button>
                </div>
            </el-dialog>
        </el-form-item>
    </el-form>
    <!--表格-->
    <template>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="staffid"
                    label="员工工号"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="staffname"
                    label="员工姓名"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="idcard"
                    label="身份证号"
                    width="170">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="电话"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="entrytime"
                    label="入职日期"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="branchname"
                    label="店名"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="rolename"
                    label="职位名称"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="remark"
                    label="职位描述"
                    width="140">
            </el-table-column>
            <el-table-column
                    prop="deptname"
                    label="部门名称"
                    width="110">
            </el-table-column>
            <el-table-column
                    prop="state"
                    label="是否在职"
                    width="80"
                    :formatter="state">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">调动</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <!--分页-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="t">
    </el-pagination>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            /*遍历模糊查询下拉框*/
            deptname:[],
            /*搜索栏*/
            formInline: {
                staffname: '',
                branchname: '',
            },
            title: '添加员工',
            show: false,
            /*添加&修改弹出框*/
            dialogFormVisible1: false,
            form: {
                staffid:'',
                staffname: '',
                password:'',
                idcard:'',
                address:'',
                phone:'',
                entrytime:'',
            },
            /*所在店名遍历*/
            branchname2:'',
            /*部门名称遍历*/
            deptname2:'',
            /*员工职位遍历*/
            rolename:'',
            dialogFormVisible2: false,
            form: {
                staffid:'',
                staffname: '',
                password:'',
                idcard:'',
                address:'',
                phone:'',
                entrytime:'',
            },
            /*所在店名遍历*/
            branchname2:'',
            /*部门名称遍历*/
            deptname2:'',
            /*员工职位遍历*/
            rolename:'',
            formLabelWidth: '120px',
            /*表格*/
            tableData: [],
            /*分页*/
            currentPage1: 5,
            currentPage2: 5,
            currentPage3: 5,
            currentPage4: 1,
            /*是否在职*/
            var1: 1,
            var2: 0,
        },
        methods:{
            state(row,col){
                return row.state==0?'离职':'在职';
            },
            /*查询*/
            onSubmit() {
                this.handleCurrentChange(1)
            },
            /*分页*/
            handleCurrentChange(val) {
                instance.get(`/staffs?index=${val}`, {params: this.formInline}).then(res => {
                    this.tableData = res.data.data.list;
                    this.t = res.data.data.total
                });
            },
            handleSizeChange(val) {
                instance.get(`/staffs?size=${val}`, {params: this.formInline}).then(res => {
                    this.tableData = res.data.data.list;
                    this.t = res.data.data.total
                });
            },
            /*添加&修改弹出框*/
            add() {
                this.dialogFormVisible1 = true;
                this.title = '添加员工'
                this.show = false;
                this.form = {}
                this.form.staffid = undefined // 在添加时将 staffid 置为 undefined
            },
            handleEdit(index, row) {
                this.dialogFormVisible2 = true
                this.title = '修改员工';
                this.show = true;
                this.form = row;
            },
            /*添加*/
            edit() {
                if (this.form.staffid == undefined) {
                    instance.post('/staffs', this.form).then(res => {
                        if (res.date.code == 0) {
                            instance.get('/branchs').then(res => {
                                this.tableData = res.data.data;
                            })
                            this.form = {}
                        }
                    })
                } else {
                    instance.put('/staffs', this.form).then(res => {
                        if (res.date.code == 0) {
                            instance.get('/staffs').then(res => {
                                this.tableData = res.data.data;
                            })
                            this.form = {}
                        }
                    })
                }
                this.dialogFormVisible1 = false
                this.dialogFormVisible2 = false
                this.form = {}
            },
            /*删除*/
            handleDelete(index, row) {
                console.log(row)
                this.$confirm('此操作将永久删除该部门, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    instance.delete(`/staffs/${row.staffid}`).then(res => {
                        if (res.data.code == 0) {
                            this.tableData.splice(index, 1);
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
        },
        created(){
            /*整表后端数据接收*/
            instance.get('/staffs').then(res => {
                /*拿数据*/
                this.tableData = res.data.data.list;
                /*分页*/
                this.t = res.data.data.total
            });
            /*部门遍历*/
            instance.get('/staffs/getbranchname').then(res => {
                this.deptname=res.data.data;
                // console.log(res)
            });
            /*店名遍历*/
            instance.get('/staffs/getdeptname').then(res => {
                this.branchname=res.data.data;
                // console.log(res)
            });
            /*职位遍历*/
            instance.get('/staffs/getrolename').then(res => {
                // console.log(res)
                this.rolename=res.data.data;
            });
        }
    })
</script>
</html>