添加用户信息功能

whycwx

2020-09-17 595556a80e9ea0e87f5b809c5efdde43a67e1329

添加用户信息功能

 src/pages/userMager/userInfo.vue

@@ -2,43 +2,57 @@
    <!-- 用户信息 -->
    <flex-layout>
        <div class="table-layout filter-box-table header-box" slot="header">
            <el-table border size="mini" header-row-class-name="header-primary" style="width: 100%" max-height='350px' :data="userList">
                <el-table-column prop="yhid" align="center" width="200px" label="用户ID"></el-table-column>
                <el-table-column prop="czrxm" align="center" width="200px"  label="操作人姓名"></el-table-column>
                <el-table-column prop="czlx" align="center" width="200px"  label="操作类型"></el-table-column>
                <el-table-column prop="czsj" align="center" width="200px"  label="操作时间"></el-table-column>
                <el-table-column prop="zdip" align="center" width="200px"  label="终端IP"></el-table-column>
                <el-table-column prop="cztime" align="center" width="200px"  label="操作事件"></el-table-column>
                <el-table-column prop="cztime" align="center" width="200px"  label="操作事件"></el-table-column>
                <el-table-column prop="cztime" align="center" width="200px"  label="操作事件"></el-table-column>
                <el-table-column prop="cztime" align="center" width="200px"  label="操作事件"></el-table-column>
                <el-table-column prop="cztime" align="center" width="200px"  label="操作事件"></el-table-column>
                <el-table-column prop="cztime" align="center" width="200px"  label="操作事件"></el-table-column>
                <el-table-column prop="cztime" align="center" width="200px"  label="操作事件"></el-table-column>
                <el-table-column prop="cztime" align="center" width="200px"  label="操作事件"></el-table-column>
                <el-table-column prop="cztime" align="center" width="200px"  label="固定列"></el-table-column>
            <!-- <el-scrollbar style="height:100%"> -->
                <el-table border size="mini" header-row-class-name="header-primary" :style="{width: w}" max-height="600px"  :data="userList">
                    <el-table-column prop="UDepartment" width="60"  align="center"  label="维护区"></el-table-column>
                    <el-table-column prop="UName" width="90" align="center"  label="姓名"></el-table-column>
                    <el-table-column prop="UShenFenId"  width="90" align="center"  label="身份证号"></el-table-column>
                    <el-table-column prop="UEmployeeId" width="90"  align="center"  label="员工编号"></el-table-column>
                    <el-table-column prop="UTelephone" width="90"  align="center"  label="电话"></el-table-column>
                    <el-table-column prop="UMobilephone" width="100" align="center"  label="手机"></el-table-column>
                    <el-table-column prop="UEmail" width="140" align="center"  label="邮箱"></el-table-column>
                    <el-table-column prop="UAddr" width="100" align="center"  label="地址"></el-table-column>
                    <el-table-column prop="UBirthDay" width="140" align="center"  label="出生日期"></el-table-column>
                    <el-table-column prop="UAccessionDay" width="140" align="center"  label="入职日期"></el-table-column>
                    <el-table-column prop="USex" width="50" align="center"  label="性别"></el-table-column>
                    <el-table-column prop="UProTitle" width="90" align="center"  label="职称"></el-table-column>
                    <el-table-column prop="UAuthority" width="100" align="center"  label="权限描述"></el-table-column>
                    <el-table-column prop="UJobGroup" width="90" align="center"  label="工作班组"></el-table-column>
                    <el-table-column prop="UDuties" width="90" align="center"  label="工作职责"></el-table-column>
                    <el-table-column prop="UTasks" width="90" align="center"  label="工作内容"></el-table-column>
                    <el-table-column prop="UBaojiusr" width="90" align="center"  label="是否包机人"></el-table-column>
                    <el-table-column prop="UNote" width="90" align="center"  label="备注"></el-table-column>
                    <el-table-column prop="UId" width="90" align="center"  label="权限组"></el-table-column>
                    <el-table-column prop="cztime" fixed="right" width="180" align="center"  label="操作">
                        <template slot-scope="scope">
                            <el-button type="success" plain size="mini" @click="addUser(scope.$index, scope.row)">添加用户</el-button>
                            <el-button type="primary" plain size="mini" @click="editUser(scope.$index, scope.row)">编辑</el-button>
                            <el-button type="danger" plain size="mini" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
                        </template>

                    </el-table-column>
            </el-table>
            <!-- </el-scrollbar> -->
        </div>
        <div class="flex-page-content">
        <!-- <div class="flex-page-content">
            <div class="table-row filter-box-table details-box">
                <div class="det-box1">
                     <el-table border size="mini" header-row-class-name="header-primary" max-height="200px" :data="userList">
                        <el-table-column prop="yhid" align="center" label="用户ID"></el-table-column>
                        <el-table-column prop="yhid" align="center" label="包机机房(或包机机房设备)(71)"></el-table-column>
                    </el-table>
                </div>
                <div class="det-box2">
                    <el-table border size="mini" header-row-class-name="header-primary" max-height="200px" :data="userList">
                        <el-table-column prop="yhid" align="center" label="用户ID"></el-table-column>
                        <el-table-column prop="czrxm" align="center" label="操作人姓名"></el-table-column>
                        <!-- <el-table-column prop="czlx" align="center" label="操作类型"></el-table-column> -->
                        <el-table-column prop="yhid" align="center" label="包机机房(或包机机房设备)"></el-table-column>
                        <el-table-column prop="czrxm" align="center" label="包机电池组(92)"></el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
        </div> -->
        
        <div class="flex-page-footer" slot="footer">
            <div class="el-pagination-btns">
                <el-button type="primary" round size="mini" icon="el-icon-search">查询</el-button>
                <el-button type="primary" @click="queryData" round size="mini" icon="el-icon-search">查询</el-button>
                <el-button type="primary" round size="mini" icon="el-icon-wallet">导出</el-button>
            </div>
            <el-pagination size="mini" @size-change="handleSizeChange" @current-change="handleCurrentChange" 
@@ -48,46 +62,128 @@
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalNum"></el-pagination>
        </div>
        <Dialog
            :title="dialogTitle"
            :visible.sync="centerDialogVisible"
            width="60%"
            center>
            <div class="staff">
                <p>员工基本信息</p>
                <div class="table-row">
                    <div class="table-cell text-right">维护区：</div>
                    <div class="table-cell">
                        <el-select v-model="whq"  size="small" placeholder="请选择操作人姓名" class="select_box">
                            <el-option
                            v-for="item in whqmList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                        
                    </div>
                </div>
                
            </div>
            <div>
                <p>员工联系方式</p>
            </div>
            <div>
                <p>员工工作内容</p>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="centerDialogVisible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="centerDialogVisible = false">确 定</el-button>
            </span>
        </Dialog>
    </flex-layout>
    
</template>

<script>
import { Form } from 'element-ui'
import { Dialog } from 'element-ui'
export default {
    data() {
        return {
            currentPage:1,
            pagesize:10,
            totalNum:10,
            userList:[
                {yhid:"1001",czrxm:"admin",czlx:"系统登陆",czsj:"2020-09-15 14:00:21",zdip:"127.0.0.1",cztime:"登录PC系统"},
                {yhid:"1001",czrxm:"admin",czlx:"系统登陆",czsj:"2020-09-15 14:00:21",zdip:"127.0.0.1",cztime:"登录PC系统"},
                {yhid:"1001",czrxm:"admin",czlx:"系统登陆",czsj:"2020-09-15 14:00:21",zdip:"127.0.0.1",cztime:"登录PC系统"},
                {yhid:"1001",czrxm:"admin",czlx:"系统登陆",czsj:"2020-09-15 14:00:21",zdip:"127.0.0.1",cztime:"登录PC系统"},
                {yhid:"1001",czrxm:"admin",czlx:"系统登陆",czsj:"2020-09-15 14:00:21",zdip:"127.0.0.1",cztime:"登录PC系统"},
                {yhid:"1001",czrxm:"admin",czlx:"系统登陆",czsj:"2020-09-15 14:00:21",zdip:"127.0.0.1",cztime:"登录PC系统"},
                {yhid:"1001",czrxm:"admin",czlx:"系统登陆",czsj:"2020-09-15 14:00:21",zdip:"127.0.0.1",cztime:"登录PC系统"},
                {yhid:"1001",czrxm:"admin",czlx:"系统登陆",czsj:"2020-09-15 14:00:21",zdip:"127.0.0.1",cztime:"登录PC系统"},
                {yhid:"1001",czrxm:"admin",czlx:"系统登陆",czsj:"2020-09-15 14:00:21",zdip:"127.0.0.1",cztime:"登录PC系统"},
                {yhid:"1001",czrxm:"admin",czlx:"系统登陆",czsj:"2020-09-15 14:00:21",zdip:"127.0.0.1",cztime:"登录PC系统"},
                // {yhid:"1001",czrxm:"admin",czlx:"系统登陆",czsj:"2020-09-15 14:00:21",zdip:"127.0.0.1",cztime:"登录PC系统"},
                // {yhid:"1001",czrxm:"admin",czlx:"系统登陆",czsj:"2020-09-15 14:00:21",zdip:"127.0.0.1",cztime:"登录PC系统"},
            ]
            totalNum:0,
            userList:[],
            w:document.documentElement.offsetWidth + 'px',
            // 新增编辑弹窗
            centerDialogVisible:false,
            dialogTitle:'',


            whqmList:[],
            whq:''
        }
    },
    components:{},
    components:{
        Dialog
    },
    created() {
        
    },
    mounted() {
        
        this.queryData();
    },
    methods: {
        // 添加用户
        addUser:function(index,data){
            let vm = this;
                vm.dialogTitle = '添加新用户';
                vm.centerDialogVisible = true;
        },
        // 编辑
        editUser:function(index,data){
            let vm = this;
                vm.dialogTitle = '编辑用户信息';
                vm.centerDialogVisible = true;
        },
        // 删除
        deleteUser:function(index,data){
        
        },
        // 显示条数改变时
        handleSizeChange(val) {
            this.pagesize = val;
            this.queryData();
        },
        // 翻页
        handleCurrentChange(val) {
            this.currentPage = val;
            this.queryData();
        },
        // 查询列表数据
        queryData:function(){
            let vm = this;
            let data={
                    bup:{
                        page:{
                            pageCurr:vm.currentPage,
                            pageSize:vm.pageSize
                        }
                    }
                }
                vm.$apis.userMager.searchAll(data).then(res=>{
                    
                    let arr = JSON.parse(res.data.result).data;
                        vm.userList = arr;
                        console.log(arr)
                }).catch(error=>{
                    console.log(1)
                });
        }
    },
}
</script>

<style scoped>
    .el-button--mini{
        padding: 2px 5px;
    }
    .header-box{
        width: 100%;
    }
@@ -99,5 +195,8 @@
        float: right;
        width: 68%;
    }
    .el-scrollbar__wrap {
        overflow-x: hidden;
    }
</style>