添加员工查询页面、新增修改删除功能

src/components/system/User.vue

@@ -0,0 +1,444 @@
+<template>
+    <div>
+
+        <div class="communal-list">
+            <div class="communal-title">
+                <div>员工列表</div>
+                <div class="communal-box">
+                    <el-input @input="Inquireclick()" placeholder="公司/部门/岗位/姓名" v-model="input" clearable>
+                    </el-input>
+                    <el-button @click="Inquireclick()" type="primary"><i class="icon-sousuo"></i></el-button>
+                </div>
+            </div>
+            <template>
+                <el-table :data="tableDatas.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border
+                    style="width: 100%">
+                    <el-table-column prop="num" label="序 号" width="55">
+                        <template slot-scope="scope">
+                            {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="number" label="工号" width="80">
+                    </el-table-column>
+                    <el-table-column prop="cnName" label="姓名" width="200">
+                    </el-table-column>
+                    <el-table-column prop="companyName" label="公司名称" width="220">
+                    </el-table-column>
+                    <el-table-column prop="depName" label="部门名称" width="100">
+                    </el-table-column>
+                    <el-table-column prop="jobName" label="职位" width="140">
+                    </el-table-column>
+                    <el-table-column prop="ext" label="分机号" width="60">
+                    </el-table-column>
+                    <el-table-column prop="phone" label="手机号" width="180">
+                    </el-table-column>
+                    <el-table-column label="认识审核" prop="hrAudit" width="200">
+                        <template slot-scope="hrAudit">
+                            <span>{{ hrAudit.row.hrAudit == 1 ? "审核通过（正常使用）" : "未通过/未审核（不可用）" }}</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="操作" width="200">
+                        <template slot-scope="scope">
+                            <el-button size="mini" @click="upDate(scope.$index, scope.row)">编辑</el-button>
+                            <el-button size="mini" type="danger" @click="del(scope.$index, scope.row)">删除</el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </template>
+            <div class="block">
+                <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                    :current-page="currentPage" :page-sizes="[10, 15, 20]" :page-size="pageSize"
+                    layout="total, sizes, prev, pager, next" :total="tableDatas.length">
+                </el-pagination>
+            </div>
+        </div>
+        <el-dialog title="修改员工" :visible.sync="upUserVisible" width="30%" :before-close="handleClose">
+            <div>
+                <el-form :model="upData" :rules="rules" ref="upData" label-width="100px" class="demo-ruleForm">
+                    <el-form-item label="姓名" prop="cnName">
+                        <el-input placeholder="" v-model="upData.cnName" :disabled="true">
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item label="工号" prop="Number">
+                        <el-input placeholder="请输入内容" v-model="upData.Number">
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item label="分机号" prop="Ext">
+                        <el-input placeholder="请输入内容" v-model="upData.Ext">
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item label="公司" prop="CompanyId">
+                        <el-select v-model="upData.CompanyId" filterable placeholder="请选择公司" @change="companyChange">
+                            <el-option v-for="item in companyData" :key="item.id" :label="item.companyName"
+                                :value="item.id">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="部门" prop="DepId">
+                        <el-select v-model="upData.DepId" filterable placeholder="请选择部门" @change="depChange">
+                            <el-option v-for="item in depData" :key="item.id" :label="item.depName" :value="item.id">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="职位" prop="JobPostId">
+                        <el-select v-model="upData.JobPostId" filterable placeholder="请选择职位">
+                            <el-option v-for="item in JobData" :key="item.id" :label="item.jobName" :value="item.id">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="试用期" prop="UsePeriod">
+                        <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="upData.UsePeriod"></el-input>
+                    </el-form-item>
+                    <el-form-item label="人事审核" prop="HrAudit">
+                        <el-select v-model="upData.HrAudit" filterable placeholder="请选择状态">
+                            <el-option v-for="item in HrAuditSelect" :key="item.value" :label="item.label"
+                                :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-form>
+            </div>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="upUserVisible = false">取 消</el-button>
+                <el-button type="primary" @click="upBtn">确 定</el-button>
+            </span>
+        </el-dialog>
+    </div>
+</template>
+<script>
+import { co, el } from '@fullcalendar/core/internal-common';
+import { del } from 'vue';
+export default {
+    data() {
+        return {
+            rules: {
+                DepCode: [
+                    { required: true, message: '请输入部门Code', trigger: 'blur' },
+                ],
+                DepName: [
+                    { required: true, message: '请输入部门名称', trigger: 'blur' },
+                ],
+                CompanyValue: [
+                    { required: true, message: '请选择所属公司', trigger: 'change' }
+                ],
+            },
+            tableDatas: [],
+            tableData: [],
+            companyData: [],
+            depData: [],
+            JobData: [],
+            currentPage: 1, // 当前页码
+            pageSize: 15,// 每页的数据条数
+            input: '',
+            token: '',
+            userId: 0,
+            upUserVisible: false,
+            upData: {
+                Id: 0,
+                Number: '',
+                CompanyId: 0,
+                DepId: 0,
+                JobPostId: 0,
+                Ext: '',
+                UsePeriod: '',
+                HrAudit: 0
+            },
+            HrAuditSelect: [{
+                value: 0,
+                label: '未审核'
+            },
+            {
+                value: 1,
+                label: '已通过'
+            },
+            {
+                value: 2,
+                label: '已拒绝'
+            },]
+        }
+    },
+    methods: {
+        //每页条数改变时触发 选择一页显示多少行
+        handleSizeChange(val) {
+            this.currentPage = 1;
+            this.pageSize = val;
+        },
+        //当前页改变时触发 跳转其他页
+        handleCurrentChange(val) {
+            this.currentPage = val;
+
+        },
+        //部门数据查询
+        Department(companyId) {
+            var url = "http://localhost:5256/api/System/QueryDepartmentList"
+            var that = this
+            that.depData = [];
+            that.$axios({
+                method: 'post',
+                url: url,
+                headers: {
+                    Authorization: 'Bearer ' + this.token
+                },
+                data: {
+                    portType: 1,
+                    CompanyId: companyId
+                }
+            }).then(function (res) {
+                debugger
+                console.log(res)
+
+                if (res.data.code == 200) {
+                    that.depData = res.data.data;
+                }
+            })
+        },
+        //公司数据查询
+        company() {
+            var url = "http://localhost:5256/api/System/getCompanyList"
+            var that = this
+            that.$axios({
+                method: 'post',
+                url: url,
+                headers: {
+                    Authorization: 'Bearer ' + this.token
+                },
+                data: {
+                    portType: 1,
+                }
+            }).then(function (res) {
+                console.log(res)
+                debugger
+                if (res.data.code == 200) {
+                    that.companyData = res.data.data;
+                }
+            })
+        },
+        companyChange(event) {
+            this.upData.DepId = null;
+            this.upData.JobPostId = null;
+            this.Department(event)
+            this.Job(event, 0)
+        },
+        depChange(event) {
+            this.upData.JobPostId = null;
+            this.Job(this.upData.CompanyId, event)
+
+        },
+        //职位数据查询
+        Job(companyId, depId) {
+            var url = "http://localhost:5256/api/System/QueryJobPost"
+            var that = this
+            that.JobData = [];
+            that.$axios({
+                method: 'post',
+                url: url,
+                headers: {
+                    Authorization: 'Bearer ' + this.token
+                },
+                data: {
+                    portType: 1,
+                    CompanyId: companyId,
+                    DepId: depId
+                }
+            }).then(function (res) {
+                console.log(res)
+                debugger
+                if (res.data.code == 200) {
+                    that.JobData = res.data.data;
+                }
+            })
+        },
+        user() {
+            var url = "http://localhost:5256/api/System/QueryUserList"
+            var that = this
+            this.$axios({
+                method: 'post',
+                url: url,
+                headers: {
+                    Authorization: 'Bearer ' + this.token
+                },
+                data: {
+                    portType: 1,
+                }
+            }).then(function (res) {
+                console.log(res)
+                debugger
+                if (res.data.code == 200) {
+                    that.tableDatas = res.data.data;
+                    that.tableData = that.tableDatas
+                }
+            })
+        },
+        Inquireclick() {
+            var newarr = [];
+            if (this.input == "") {
+                newarr = this.tableData;
+            } else {
+                for (var i = 0; i < this.tableData.length; i++) {
+                    if (this.tableData[i].cnName.indexOf(this.input) != -1) {
+                        newarr.push(this.tableData[i]);
+                    }
+                    if (this.tableData[i].companyName.indexOf(this.input) != -1) {
+                        newarr.push(this.tableData[i]);
+                    }
+                    if (this.tableData[i].depName.indexOf(this.input) != -1) {
+                        newarr.push(this.tableData[i]);
+                    }
+                    if (this.tableData[i].jobName.indexOf(this.input) != -1) {
+                        newarr.push(this.tableData[i]);
+                    }
+                }
+            }
+            this.tableDatas = newarr;
+        },
+        //#region  修改操作
+        upDate(index, row) {
+
+            this.upUserVisible = true;
+            this.upData.cnName = row.cnName;
+            this.upData.Id = row.id;
+            this.upData.Number = row.number;
+            this.upData.CompanyId = row.companyId;
+            this.upData.DepId = row.depId;
+            this.upData.JobPostId = row.jobPostId;
+            this.upData.Ext = row.ext;
+            this.upData.UsePeriod = row.usePeriod;
+            this.upData.HrAudit = row.hrAudit;
+            this.Job(row.companyId, row.depId)
+        },
+        upBtn() {
+            debugger
+            var that = this
+            if (that.upData.DepId == "" || that.upData.DepId == undefined) {
+                that.$message.error("部门不能为空");
+                return
+            }
+            if (that.upData.CompanyId == "") {
+                that.$message.error("公司不能为空");
+                return
+            }
+            if (that.upData.JobPostId == "") {
+                that.$message.error("岗位不能为空");
+                return
+            }
+            if (that.upData.Number == "") {
+                that.$message.error("工号不能为空");
+                return
+            }
+            console.log(that.upData.Ext)
+            if (that.upData.Ext == null || that.upData.Ext == undefined) that.upData.Ext = ""
+            if (that.upData.UsePeriod == null || that.upData.UsePeriod == undefined) that.upData.UsePeriod = ""
+            var url = "http://localhost:5256/api/System/EditUser"
+
+            that.$axios({
+                method: 'post',
+                url: url,
+                headers: {
+                    Authorization: 'Bearer ' + that.token
+                },
+                data: that.upData
+            }).then(function (res) {
+                console.log(res)
+                debugger
+                if (res.data.code == 200) {
+                    that.$message({
+                        message: '修改成功',
+                        type: 'success'
+                    });
+                    that.upUserVisible = false;
+                    that.user();
+                } else {
+                    that.$message.error('修改失败！');
+                }
+            })
+        },
+        //关闭修改框
+        handleClose(done) {
+            done();
+        },
+        //#endregion
+        del(index, row) {
+            debugger
+            this.$confirm('此操作将取消订单, 是否继续?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                var url = "http://localhost:5256/api/System/DelDepartment"
+                var that = this
+                this.$axios({
+                    method: 'post',
+                    url: url,
+                    headers: {
+                        Authorization: 'Bearer ' + this.token
+                    },
+                    data: {
+                        Id: row.id,
+                    }
+                }).then(function (res) {
+                    console.log(res)
+                    debugger
+                    if (res.data.code == 200) {
+                        that.$message({
+                            type: 'success',
+                            message: '删除成功!'
+                        });
+                        that.Department();
+                    } else {
+                        that.$message.error("删除失败，请稍后重试");
+                    }
+                })
+
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '操作已取消！'
+                });
+            });
+
+        },
+        //#region 添加
+
+        //#endregion
+
+    },
+    mounted() {
+        debugger
+        this.token = JSON.parse(localStorage.getItem('userinif')).token;
+        this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId
+        console.log(this.token)
+        this.Department(0);
+        this.company();
+        //this.Job();
+        this.user();
+    }
+}
+</script>
+<style>
+.communal-list {
+    background-color: #fff;
+    padding: 10px;
+    box-shadow: 0 0 5px #0005;
+    border-radius: 10px;
+}
+
+.communal-title {
+    display: flex;
+    font-size: 17px;
+    font-weight: 600;
+    color: #555;
+    margin-top: 8px;
+    margin-bottom: 2px;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.communal-box {
+    display: flex;
+}
+
+.communal-box>button {
+    margin-left: 10px;
+    padding: 8px 20px;
+}
+</style>

src/router/index.js

@@ -20,7 +20,7 @@ import Groupedit from '@/components/OP/Groupedit'
 import OPgroup from '@/components/OP/OPgroup'
 import Tourguide from '@/components/OP/Tourguide'
 import Department from '@/components/system/Department'
-
+import User from '@/components/system/User'
 Vue.use(Router)
 
 export default new Router({
@@ -111,7 +111,12 @@ export default new Router({
           path: '/home/Tourguide',
           name: 'Tourguide',
           component: Tourguide
-        }
+        }, {
+          path: '/home/User',
+          name: 'User',
+          component: User
+        },
+
       ]
     },
     {