新增编辑功能

whycwx

2020-09-17 0ab3462bda3c39b66ae5a4a306623f1386de93db

新增编辑功能

 src/pages/userMager/addEdit.vue

New file
@@ -0,0 +1,198 @@
<template>
<flex-layout>
    <div>
            <div class="staff">
                <p>员工基本信息</p>
                <div class="table-row">
                    <div class="table-cell text-right title_txt">维护区：</div>
                    <div class="table-cell">
                        <el-select v-model="UDepartment"  size="mini" placeholder="请选择操作人姓名" class="select_box">
                            <el-option
                            v-for="item in UDepartmentList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                        
                    </div>
                    <div class="table-cell text-right title_txt">姓名：</div>
                    <div class="table-cell">
                        <el-input v-model="UName" size="mini" placeholder="请输入姓名"></el-input>
                    </div>
                    <div class="table-cell text-right title_txt">密码：</div>
                    <div class="table-cell">
                        <el-input v-model="Upassword" type="password" size="mini" placeholder="请输入密码"></el-input>
                    </div><br/>
                    <div class="table-cell text-right title_txt">性别：</div>
                    <div class="table-cell">
                        <el-select v-model="USex"  size="mini" placeholder="请选择性别" class="select_box">
                            <el-option label="男" value="0"></el-option>
                            <el-option label="男" value="1"></el-option>
                        </el-select>
                    </div>
                    <div class="table-cell text-right title_txt">身份证号：</div>
                    <div class="table-cell">
                        <el-input v-model="UShenFenId" size="mini" placeholder="请输入身份证号"></el-input>
                    </div>
                    <div class="table-cell text-right title_txt">员工编号：</div>
                    <div class="table-cell">
                        <el-input v-model="UEmployeeId" size="mini" placeholder="请输入员工编号"></el-input>
                    </div><br/>
                    <div class="table-cell text-right title_txt">出生日期：</div>
                    <div class="table-cell">
                        <el-input v-model="UBirthDay" size="mini" placeholder="请输入出生日期"></el-input>
                    </div>
                </div>
                
            </div>
            <div class="staff">
                <p>员工联系方式</p>
                <div class="table-row">
                    <div class="table-cell text-right title_txt">电话：</div>
                    <div class="table-cell">
                        <el-input v-model="UTelephone" size="mini" placeholder="请输入电话"></el-input>
                    </div>
                    <div class="table-cell text-right title_txt">手机：</div>
                    <div class="table-cell">
                        <el-input v-model="UMobilephone" size="mini" placeholder="请输入手机"></el-input>
                    </div>
                    <div class="table-cell text-right title_txt">邮箱：</div>
                    <div class="table-cell">
                        <el-input v-model="UEmail" size="mini" placeholder="请输入邮箱"></el-input>
                    </div><br/>
                    <div class="table-cell text-right title_txt">地址：</div>
                    <div class="table-cell">
                        <el-input v-model="UAddr" size="mini" placeholder="请输入地址"></el-input>
                    </div>
                </div>
            </div>
            <div class="staff">
                <p>员工工作内容</p>
                <div class="table-row">
                    <div class="table-cell text-right title_txt">职称：</div>
                    <div class="table-cell">
                        <el-input v-model="UProTitle" size="mini" placeholder="请输入职称"></el-input>
                    </div>
                    <div class="table-cell text-right title_txt">入职日期：</div>
                    <div class="table-cell">
                        <el-input v-model="UAccessionDay"  size="mini" placeholder="请输入入职日期"></el-input>
                    </div>
                    <div class="table-cell text-right title_txt">备注：</div>
                    <div class="table-cell">
                        <el-input v-model="UNote" size="mini" placeholder="请输入备注"></el-input>
                    </div><br/>
                    <div class="table-cell text-right title_txt">工作内容：</div>
                    <div class="table-cell">
                        <el-input v-model="UTasks" size="mini" placeholder="请输入工作内容"></el-input>
                    </div>
                    <div class="table-cell text-right title_txt">工作职责：</div>
                    <div class="table-cell">
                        <el-input v-model="UDuties" size="mini" placeholder="请输入工作职责"></el-input>
                    </div>
                    <div class="table-cell text-right title_txt">工作班组：</div>
                    <div class="table-cell">
                        <el-input v-model="UJobGroup" size="mini" placeholder="请输入工作班组"></el-input>
                    </div><br/>
                    <div class="table-cell text-right title_txt">权限描述：</div>
                    <div class="table-cell">
                        <el-input v-model="UAuthority" size="mini" placeholder="请输入权限描述"></el-input>
                    </div>
                    <div class="table-cell text-right title_txt">是否包机人：</div>
                    <div class="table-cell">
                        <el-select v-model="UBaojiusr"  size="mini" placeholder="请选择是否包机人" class="select_box">
                            <el-option label="是" value="1"></el-option>
                            <el-option label="否" value="0"></el-option>
                        </el-select>
                    </div>
                </div>
            </div>
            <div class="btn_box">
                <el-button size="small" @click="cancelOpen">取 消</el-button>
                <el-button size="small" type="primary" @click="confirmOpen">确 定</el-button>
            </div>
            <!-- <span slot="footer" class="flex-page-footer">
                <el-button size="small" @click="cancelOpen">取 消</el-button>
                <el-button size="small" type="primary" @click="confirmOpen">确 定</el-button>
            </span>  -->
 
    </div>
</flex-layout>
</template>
<script>
export default {
    // name:'addEdit',
    props:['status','opt','index'],
    data() {
        return {
            UDepartmentList:[],
            // UId:this.opt.UId,
            Upassword:this.opt.Upassword || '',
            USnId:this.opt.USnId || '',
            UName:this.opt.UName || '',
            UShenFenId:this.opt.UShenFenId || '',
            UTelephone:this.opt.UTelephone || '',
            UEmail:this.opt.UEmail || '',
            UAddr:this.opt.UAddr || '',
            UBirthDay:this.opt.UBirthDay || '',
            UAccessionDay:this.opt.UAccessionDay || '',
            USex:this.opt.USex || '',
            UDepartment:this.opt.UDepartment || '',
            UProTitle:this.opt.UProTitle || '',
            UJobGroup:this.opt.UJobGroup || '',
            UDuties:this.opt.UDuties || '',
            UTasks:this.opt.UTasks || '',
            UBaojiusr:this.opt.UBaojiusr || '',
            UNote:this.opt.UNote || '',
            UAuthority:this.opt.UAuthority || '',
            UMobilephone:this.opt.UMobilephone || '',
            UEmployeeId:this.opt.UEmployeeId || ''
        }
    },
    mounted() {
        
    },
    methods: {
        // 取消隐藏弹框
        cancelOpen:function(){
            let vm = this;
                vm.$emit('onClose');
        },
        // 确定
        confirmOpen:function(){

            // console.log(this.status,this.opt,this.index)
            console.log(this)
        }
    },
    
}
</script>
<style >
.title_txt{
        width: 80px;
}
.btn_box{
    padding: 10px 0;
    text-align: center;
}
.staff{
    /* padding: 5px; */
    margin-bottom: 5px;
}
.table-row{
    padding: 10px;
}
.staff>p{
    padding: 10px 0;
    background: #C9DCFA;
    margin-bottom: 8px;
}
.el-science-blue .el-input__inner{
    background: #fff;
    color: #000;
}
.text-right{
    margin-left: 10px;
}
</style>

 src/pages/userMager/userInfo.vue

@@ -2,8 +2,7 @@
    <!-- 用户信息 -->
    <flex-layout>
        <div class="table-layout filter-box-table header-box" slot="header">
            <!-- <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 border size="mini" header-row-class-name="header-primary" :style="{width: w}" max-height="550px"  :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>
@@ -20,7 +19,11 @@
                    <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="UBaojiusr" width="90" align="center"  label="是否包机人">
                        <template slot-scope="scope">
                            <el-checkbox :checked="scope.row.UBaojiusr == 1" readonly="true"></el-checkbox>
                        </template>
                    </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="操作">
@@ -32,7 +35,6 @@

                    </el-table-column>
                </el-table>
            <!-- </el-scrollbar> -->
        </div>
        <!-- <div class="flex-page-content">
            <div class="table-row filter-box-table details-box">
@@ -65,44 +67,20 @@
        <Dialog
            :title="dialogTitle"
            :visible.sync="centerDialogVisible"
            top='1%'
            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>
            <!-- addEdit -->
            <add-edit v-if="reFresh" @onClose="onClose" :status="status" :index="thisIndex" :opt="opt"></add-edit>
        </Dialog>
    </flex-layout>
    
</template>

<script>
import { Form } from 'element-ui'
// import { Form } from 'element-ui'
import { Dialog } from 'element-ui'
import  addEdit  from './addEdit'
export default {
    data() {
        return {
@@ -114,14 +92,18 @@
            // 新增编辑弹窗
            centerDialogVisible:false,
            dialogTitle:'',
            status:'',
            thisIndex:'',
            opt:{},


            whqmList:[],
            whq:''
            reFresh:true
        }
    },
     watch:{
           
      },
    components:{
        Dialog
        Dialog,addEdit
    },
    created() {
        
@@ -130,21 +112,37 @@
        this.queryData();
    },
    methods: {
        // 初始化组件
        installComponents:function(){
            let vm = this;
                vm.reFresh= false
                vm.$nextTick(()=>{
                    vm.reFresh = true
                })
        },
        // 添加用户
        addUser:function(index,data){
            let vm = this;
                vm.installComponents();
                vm.dialogTitle = '添加新用户';
                vm.centerDialogVisible = true;
                vm.status = 'add';
                vm.thisIndex= index;
                vm.opt = {};
        },
        // 编辑
        editUser:function(index,data){
            let vm = this;
                vm.installComponents();
                vm.dialogTitle = '编辑用户信息';
                vm.centerDialogVisible = true;
                vm.status = 'edit';
                vm.thisIndex= index;
                vm.opt = data;
        },
        // 删除
        deleteUser:function(index,data){

            
        },
        // 显示条数改变时
        handleSizeChange(val) {
@@ -171,11 +169,18 @@
                    
                    let arr = JSON.parse(res.data.result).data;
                        vm.userList = arr;
                        console.log(arr)
                        vm.totalNum = arr.length;
                        // console.log(arr)
                }).catch(error=>{
                    console.log(1)
                    // console.log(1)
                });
        },
        // 弹窗取消
        onClose:function(){
            let vm = this;
                vm.centerDialogVisible = false;
        }
        
    },
}
</script>