zky-admin/src/views/system/Account.vue

<style lang="scss">
    .account_active{
        color:green;
    }
    .account_nactive{
        color:red;
    }
    .preview{
        .el-form-item{
            margin-bottom:15px;
        }
        label,p{
            line-height: 25px !important;
        }
    }
</style>
<template>
    <section>
        <p><span>系统管理></span>账号管理</p>
        <div class="content">
            <div class="filter">
                <el-form size="small" label-width="70px" :inline="true"  label-position="left">
                    <el-form-item label="">
                        <el-input clearable placeholder="请输入信息标题" v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-select v-model="form.journal_id" placeholder="请选择期刊" clearable>
                            <el-option
                            v-for="item in journalsList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button  type="primary" @click="search">搜索</el-button>
                    </el-form-item>
                    <el-form-item style="float:right" >
                        <el-button @click="addPerson" type="primary">新增管理员</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-table
                    class="table"
                    :data="list" height='50vh'
                    border  v-loading="loading"
                    default-expand-all row-key="id"
                    style="width: 100%">
                    <el-table-column
                    prop="name"
                    label="账号">
                    </el-table-column>
                    <el-table-column
                    prop="realname"  
                    label="姓名">
                    </el-table-column>
                    <el-table-column
                    prop="phone" 
                    label="手机号">
                    </el-table-column>
                    <el-table-column
                    prop="journal_name" 
                    label="所属期刊">
                    </el-table-column>
                    <el-table-column
                    prop="role_name" 
                    label="创建角色">
                    </el-table-column>
                    <el-table-column
                    prop="" 
                    label="状态">
                        <template slot-scope="scope">
                            <span class="account_active" v-if="scope.row.is_active">激活</span>
                            <span class="account_nactive" v-else>禁用</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                    prop="cname" 
                    label="创建人">
                    </el-table-column>
                    <el-table-column
                    prop="ctime" 
                    label="创建时间">
                    </el-table-column>
                    <el-table-column
                    prop="last_login_time" 
                    label="最后一次登录">
                    </el-table-column>
                    <el-table-column  
                    prop="zip"
                    label="操作">
                    <template slot-scope="scope">
                        <!-- <el-button type="text" @click="dialogVisible=true,edit=1">查看</el-button> -->
                        <el-button class="edit" type="text" @click="editPerson(scope.row)">编辑</el-button>
                        <el-button class="del" @click="del(scope.row.id)" type="text">删除</el-button>
                    </template>
                    </el-table-column>
            </el-table>
            <Page  ref="pageButton" :current='form.page' :page_size='form.page_size' :total='total' @pageChange='gopage'/>
        </div>

        <el-dialog
        :title="dialogTitle" :close-on-click-modal='false'
        :visible.sync="dialogVisible">
        <el-form size="small" class="preview" :inline='false' label-width="80px" :model="form1" ref="form1" :rules="rules">
                <el-form-item label="所属期刊" prop='journal_id'>
                    <el-select v-model="form1.journal_id" placeholder="请选择期刊" filterable>
                        <el-option
                        v-for="item in journalsList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="角色" prop='role_id'>
                    <el-select v-model="form1.role_id" placeholder="请选择角色">
                        <el-option
                        v-for="item in rolesList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="账号" prop='name'>
                    <el-input placeholder="请输入账号" v-model='form1.name'></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop='realname'>
                    <el-input placeholder="请输入账号" v-model='form1.realname'></el-input>
                </el-form-item>
                <el-form-item label="密码" prop='password'>
                    <el-input placeholder="请输入密码" type="password" v-model="form1.password" class="input-with-select"></el-input>
                </el-form-item>
                 <el-form-item label="确认密码" prop='rePassword'>
                    <el-input placeholder="请再次输入密码" type="password" v-model="form1.rePassword" class="input-with-select"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop='phone'>
                    <el-input placeholder="请输入手机号" v-model="form1.phone" class="input-with-select"></el-input>
                </el-form-item>
                <el-form-item label="账户状态" prop='is_active'>
                    <el-radio-group v-model="form1.is_active">
                        <el-radio label="1">启用</el-radio>
                        <el-radio label="0">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button size="medium" type="primary" @click="save">确 定</el-button>
        </span>
        </el-dialog>
    </section>
</template>
<script>
import Page from '../../components/Page';
export default {
  components:{
        Page
  },
  data(){
    return{
      edit:0,
      form:{name:'',page:1,page_size:20},
      journalsList:[],
      rolesList:[],
      total:100,
      list:[],
      dialogTitle:'',
      form1:{is_active:1},
      loading:false,
      input:'',
      dialogVisible:false,
      defaultProps:{},
      rules: {
          journal_id: [
            { required: true, message: '请选择期刊', trigger: 'change' }
          ],
          role_id: [
            { required: true, message: '请选择角色', trigger: 'change' }
          ],
          name: [
            { required: true, message: '请输入账号', trigger: 'blur' }
          ],
          realname: [
            { required: true, message: '请输入姓名', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ],
          rePassword: [
            { required: true, message: '请再次输入密码', trigger: 'blur' }
          ],
          phone: [
            { required: true, message: '请输入手机号', trigger: 'blur' }
          ]
        }
    }
  },
    methods:{
        addPerson(){
            this.dialogTitle = "新增管理员";
            this.dialogVisible = true;
            this.form1 = {is_active:1};
        },
        editPerson(row){
            this.dialogTitle = "编辑管理员";
            this.dialogVisible = true;
            this.form1 = row ;
            this.form1.rePassword = this.form1.password
        },
        gopage(size){
            if(size){
                this.form.page_size=size
            }
            this.form.page=this.$refs.pageButton.page
            this.getData()
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        gopage1(size){
            if(size){
                this.form1.page_size=size
            }
            this.form1.page=this.$refs.pageButton1.page
            this.getJl()
        },
        open(data) {
            this.dialogFormVisible=true;
            this.message={...data}
        },
        download(){
            let array=this.multipleSelection,ids=[];
            for(let i=0;i<array.length;i++){
                ids.push(array[i].id)
            }
            ids=ids.join(',')
            this.$api.downloadMon({ids:ids}).then(res=>{
                        var elink = document.createElement('a');
                        let blob=new Blob([res.data], {type: 'application/vnd.ms-excel'});
                        let objUrl=URL.createObjectURL(blob);
                        console.log(res.headers['content-disposition'])
                        let file_name=res.headers['content-disposition'].split('=')[1];
                        elink.download = file_name;
                        elink.style.display = 'none';                
                        elink.href = objUrl;
                        document.body.appendChild(elink);
                        elink.click();
                        document.body.removeChild(elink);     
            })
        },
        detail(id){
            this.$router.push({ path: '/company/detail', query: {  id: id,page:this.form.page,page_size:this.form.page_size  } });
        },
        getData(){
            var parm=this.form;        
            this.loading=true
            this.$api.getUserList(parm).then(res=>{
                this.list=res.data.data.list;
                this.total=res.data.data.total
                this.loading=false
            })
        },
        getJournals(){
            this.$api.getUserJournals().then(res=>{
                this.journalsList = res.data.data
            })
        },
        getRoles(){
            this.$api.getUserRoles().then(res=>{
                this.rolesList = res.data.data
            })
        },
        search(){
            this.form.page = 1
            this.getData()
        },
        save(){
            this.$refs["form1"].validate((valid)=>{
                console.log(valid)
                if(valid){
                    if(this.form1.rePassword != this.form1.password){
                        this.$message.error('两次密码不一致');
                        return
                    }
                    if(this.form1.id){
                        this.$api.editUser(this.form1).then(res=>{
                            if(res.data.code==0){
                                this.$message({
                                    message:"成功",
                                    type:"success"
                                })
                            }else{
                                this.$message.error(res.data.message);
                            }
                            this.getData()
                            this.dialogVisible = false
                        })
                    }else{
                        this.$api.addUser(this.form1).then(res=>{
                            if(res.data.code==0){
                                this.$message({
                                    message:"成功!",
                                    type:"success"
                                })
                            }else{
                                this.$message.error(res.data.message);
                            }
                            this.getData()
                            this.dialogVisible = false
                        })
                    }
                }
            })
        },
        del(id){
                this.$confirm('确定删除吗', '提示', {
                        type: 'warning'
                    }).then(() => {
                    this.$api.delUser({id:id}).then((res)=>{
                        if(res.data.code==0){
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                            this.getData()
                        }else{
                            this.$message.error(res.data.message);
                        }
                    })
                })
        },
        permission(name){
			let permissions=this.info.permissions||[];
			let list=[];
			for(let i=0;i<permissions.length;i++){
				list.push(permissions[i].name)
			}
			if(list.indexOf(name)<0){
				return false;
			}else{
				return true;
			}	
		},
  },
  created(){
      this.getJournals()
      this.getRoles()
      this.getData()
  }
}
</script>