<template>
|
<div class="logLog_box">
|
<My-bread
|
:list="[
|
`${$t('userManage.userManage')}`,
|
`${$t('userManage.userInfoManage')}`,
|
]"
|
></My-bread>
|
<el-divider />
|
<div class="inquire">
|
<el-form ref="ruleForm" :model="form" :inline="true">
|
<el-form-item :label="$t('operatManage.ELM.username')" prop="username">
|
<el-input
|
v-model="form.username"
|
:placeholder="$t('operatManage.ELM.usernameInfo')"
|
/>
|
</el-form-item>
|
<el-form-item
|
:label="$t('userManage.userInfoObj.userStatus')"
|
prop="ownedSystem"
|
>
|
<el-select
|
v-model="form.ownedSystem"
|
:placeholder="$t('userManage.userInfoObj.userStatus')"
|
>
|
<el-option :label="$t('userManage.userInfoObj.all')" value="all" />
|
<el-option
|
:label="$t('userManage.userInfoObj.normal')"
|
value="normal"
|
/>
|
<el-option
|
:label="$t('userManage.userInfoObj.disable')"
|
value="disable"
|
/>
|
<el-option
|
:label="$t('userManage.userInfoObj.delete')"
|
value="delete"
|
/>
|
<el-option
|
:label="$t('userManage.userInfoObj.apply')"
|
value="apply"
|
/>
|
<el-option
|
:label="$t('userManage.userInfoObj.rejection')"
|
value="rejection"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item
|
:label="$t('userManage.userInfoObj.companyName')"
|
prop="requestIp"
|
>
|
<el-input
|
v-model="form.requestIp"
|
:placeholder="$t('common.pleaseInput')"
|
/>
|
</el-form-item>
|
<br />
|
<el-form-item>
|
<el-button type="success" size="small" @click="showAddDialog"
|
><i class="el-icon-plus"></i> {{
|
$t('common.append')
|
}}</el-button
|
>
|
<el-button type="primary" size="small">
|
{{ $t('userManage.userInfoObj.userinput') }}</el-button
|
>
|
<el-button type="primary" size="small">
|
{{ $t('userManage.userInfoObj.userexport') }}</el-button
|
>
|
</el-form-item>
|
<el-form-item style="margin-left: 60%">
|
<el-button @click="onSubmit"
|
><i class="el-icon-search"></i> {{
|
$t('operatManage.ELM.search')
|
}}</el-button
|
>
|
</el-form-item>
|
<el-form-item>
|
<el-button @click="resetForm('ruleForm')"
|
><i class="el-icon-delete"></i> {{
|
$t('operatManage.ELM.reset')
|
}}</el-button
|
>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="table_box">
|
<el-table :data="tableData" stripe style="width: 100%" height="99%">
|
<el-table-column
|
align="center"
|
type="index"
|
:label="$t('operatManage.ELM.index')"
|
width="70px"
|
/>
|
<el-table-column
|
align="center"
|
prop="username"
|
width="220px"
|
:label="$t('userManage.userInfoObj.chineseName')"
|
/>
|
<el-table-column
|
align="center"
|
prop="ip"
|
width="220px"
|
:label="$t('userManage.userInfoObj.affiliatedUnit')"
|
/>
|
<el-table-column
|
align="center"
|
prop="ownedSystem"
|
width="230px"
|
:label="$t('userManage.userInfoObj.mobileNumber')"
|
/>
|
<el-table-column
|
align="center"
|
prop="largeModuleName"
|
:label="$t('userManage.userInfoObj.state')"
|
>
|
<template slot-scope="scope">
|
<el-tag v-if="scope.row.largeModuleName == '正常'" type="success">{{
|
scope.row.largeModuleName
|
}}</el-tag>
|
<el-tag v-if="scope.row.largeModuleName == '异常'" type="danger">{{
|
scope.row.largeModuleName
|
}}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="smallModuleName"
|
:label="$t('userManage.userInfoObj.post')"
|
/>
|
<el-table-column
|
align="center"
|
prop="resourceName"
|
:label="$t('userManage.userInfoObj.addtime')"
|
/>
|
<el-table-column
|
fixed="right"
|
:label="$t('common.operate')"
|
width="200"
|
>
|
<template #default>
|
<!-- <el-button type="primary" size="small">修改</el-button> -->
|
|
<el-button type="warning" size="small">{{
|
$t('common.edit')
|
}}</el-button>
|
<el-button type="danger" size="small">{{
|
$t('common.delete')
|
}}</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div style="margin-top: 40px" class="pagination_box">
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="currentPage"
|
:page-sizes="[10, 20, 30, 40]"
|
:page-size="10"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="9"
|
>
|
</el-pagination>
|
</div>
|
</div>
|
<el-dialog :visible.sync="dialogTableVisible" width="57%" >
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
<el-tab-pane
|
:label="$t('userManage.userInfoObj.userAccount')"
|
name="first"
|
>
|
<el-form
|
:model="ruleForm"
|
:rules="rules"
|
ref="ruleForm"
|
label-width="100px"
|
class="demo-ruleForm"
|
>
|
<el-form-item
|
:label="$t('userManage.userInfoObj.username')"
|
prop="name"
|
>
|
<el-input v-model="ruleForm.name"></el-input>
|
</el-form-item>
|
<el-form-item
|
:label="$t('userManage.userInfoObj.userpssword')"
|
prop="password"
|
>
|
<el-input type="password" v-model="ruleForm.password"></el-input>
|
</el-form-item>
|
<el-form-item
|
:label="$t('userManage.userInfoObj.userstate')"
|
prop="password"
|
>
|
<label>{{ $t('userManage.userInfoObj.toapplied') }}</label>
|
</el-form-item>
|
</el-form>
|
</el-tab-pane>
|
<el-tab-pane
|
:label="$t('userManage.userInfoObj.userInformation')"
|
name="second"
|
>
|
<el-form
|
:model="ruleForm"
|
:rules="rules"
|
ref="ruleForm"
|
label-width="180px"
|
class="demo-ruleForm"
|
>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item
|
<el-form-item
|
:label="$t('userManage.userInfoObj.userchinesename')"
|
prop="name"
|
>
|
<el-input v-model="ruleForm.name"></el-input>
|
</el-form-item>
|
<el-form-item
|
<el-form-item
|
:label="$t('userManage.userInfoObj.username')"
|
prop="name"
|
>
|
<el-input v-model="ruleForm.name"></el-input>
|
</el-form-item>
|
<el-form-item
|
<el-form-item
|
:label="$t('userManage.userInfoObj.sex')"
|
>
|
<el-radio v-model="radio" label="1">{{$t('userManage.userInfoObj.userMan')}}</el-radio>
|
<el-radio v-model="radio" label="2">{{$t('userManage.userInfoObj.userWoMan')}}</el-radio>
|
</el-form-item>
|
<el-form-item
|
<el-form-item
|
:label="$t('userManage.userInfoObj.nativePlace')"
|
>
|
<el-input v-model="ruleForm.name"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<div style="margin-left: 35px">
|
<div
|
style="
|
width: 205px;
|
height: 185px;
|
border: 1px solid gray;
|
margin: 5px;
|
"
|
>
|
<img />
|
</div>
|
<el-upload
|
class="upload-demo"
|
action="https://jsonplaceholder.typicode.com/posts/"
|
list-type="picture"
|
>
|
<el-button size="small" type="primary">{{$t('common.clickupload')}}</el-button>
|
<span style="color: red"
|
> {{$t('userManage.userInfoObj.spantitle1')}}</span
|
>
|
</el-upload>
|
</div>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item
|
<el-form-item
|
:label="$t('userManage.userInfoObj.identityCard')"
|
>
|
<el-input v-model="ruleForm.name"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12"
|
><el-form-item
|
<el-form-item
|
:label="$t('userManage.userInfoObj.education')"
|
|
>
|
<el-select
|
v-model="form.region1"
|
class="select"
|
:placeholder="$t('userManage.userInfoObj.pleaseSelect')"
|
>
|
<el-option :label="$t('userManage.userInfoObj.doctor')" value="a1" />
|
<el-option :label="$t('userManage.userInfoObj.master')" value="a2" />
|
<el-option :label="$t('userManage.userInfoObj.undergraduate')" value="a3" />
|
<el-option :label="$t('userManage.userInfoObj.juniorCollege')" value="a4" />
|
<el-option :label="$t('userManage.userInfoObj.other')" value="a5" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item
|
<el-form-item
|
:label="$t('userManage.userInfoObj.occupation')"
|
>
|
<el-select
|
v-model="form.region2"
|
class="select"
|
:placeholder="$t('userManage.userInfoObj.pleaseSelect')"
|
>
|
<el-option :label="$t('userManage.userInfoObj.assistant')" value="b1" />
|
<el-option :label="$t('userManage.userInfoObj.intermediate')" value="b2" />
|
<el-option :label="$t('userManage.userInfoObj.senior')" value="b3" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12"
|
><el-form-item
|
<el-form-item
|
:label="$t('userManage.userInfoObj.post')"
|
|
>
|
<el-select
|
class="select"
|
v-model="form.region3"
|
:placeholder="$t('userManage.userInfoObj.pleaseSelect')"
|
>
|
<el-option :label="$t('userManage.userInfoObj.v1')" value="c1" />
|
<el-option :label="$t('userManage.userInfoObj.fv1')" value="c2" />
|
<el-option :label="$t('userManage.userInfoObj.v2')" value="c3" /> <el-option :label="$t('userManage.userInfoObj.fv2')" value="c4" />
|
<el-option :label="$t('userManage.userInfoObj.v3')" value="c5" />
|
<el-option :label="$t('userManage.userInfoObj.fv3')" value="c6" />
|
<el-option :label="$t('userManage.userInfoObj.v4')" value="c7" />
|
<el-option :label="$t('userManage.userInfoObj.fv4')" value="c8" />
|
<el-option :label="$t('userManage.userInfoObj.v5')" value="c9" />
|
<el-option :label="$t('userManage.userInfoObj.fv5')" value="c10" />
|
<el-option :label="$t('userManage.userInfoObj.v6')" value="c11" />
|
<el-option :label="$t('userManage.userInfoObj.v7')" value="c12" /> <el-option :label="$t('userManage.userInfoObj.fv7')" value="c13" />
|
<el-option :label="$t('userManage.userInfoObj.v8')" value="c14" />
|
<el-option :label="$t('userManage.userInfoObj.v9')" value="c15" />
|
<el-option :label="$t('userManage.userInfoObj.fv9')" value="c16" />
|
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item
|
<el-form-item
|
:label="$t('userManage.userInfoObj.email')"
|
|
>
|
<el-input v-model="ruleForm.name"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item
|
<el-form-item
|
:label="$t('userManage.userInfoObj.major')"
|
|
>
|
<el-input v-model="ruleForm.name"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item
|
:label="$t('userManage.userInfoObj.phoneNumber')"
|
|
>
|
<el-input
|
v-model="ruleForm.name"
|
style="width: 225px"
|
></el-input>
|
<el-checkbox style="margin-left: 10px" v-model="checked"
|
>{{$t('userManage.userInfoObj.receiveSMS')}}</el-checkbox
|
>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item
|
:label="$t('userManage.userInfoObj.officeTelephone')"
|
|
>
|
<el-input v-model="ruleForm.name"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row>
|
<el-col :span="24">
|
<el-form-item
|
:label="$t('userManage.userInfoObj.addressbook')"
|
|
>
|
<el-input style="width:755px" v-model="ruleForm.name"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-form-item>
|
</el-row>
|
<el-row>
|
<el-col :span="24">
|
<el-form-item
|
:label="$t('userManage.userInfoObj.remarks')"
|
>
|
<el-input type="textarea" style="width:755px" v-model="ruleForm.name"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-form-item>
|
</el-row>
|
<el-row>
|
<el-col :span="24">
|
<el-form-item
|
:label="$t('userManage.userInfoObj.scanningcopy')"
|
|
>
|
<el-upload
|
class="upload-demo"
|
action="https://jsonplaceholder.typicode.com/posts/"
|
list-type="picture"
|
>
|
<el-button size="small" type="primary">{{$t('common.upload')}}</el-button>
|
<span style="color: red"
|
> {{$t('userManage.userInfoObj.spantitle2')}}</span>
|
</el-upload>
|
</el-form-item>
|
</el-col>
|
</el-form-item>
|
</el-row>
|
</el-form>
|
</el-tab-pane>
|
</el-tabs>
|
<el-button type="primary" @click="onSubmit">{{$t('common.preservation')}}</el-button>
|
<el-button>{{$t('common.close')}}</el-button>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import MyBread from '../../components/MyBread.vue';
|
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
components: {
|
MyBread,
|
},
|
|
data() {
|
return {
|
currentPage: 1,
|
dialogTableVisible: false,
|
activeName: 'first',
|
ruleForm: { name: '', password: '' },
|
ruleForm1: {
|
name: '',
|
value: '',
|
},
|
rules: {
|
name: [
|
{ required: true, message: '请输入用户名', trigger: 'blur' },
|
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
|
],
|
password: [
|
{ required: true, message: '请输入密码', trigger: 'blur' },
|
{
|
trigger: 'blur',
|
validator: (rule, value, callback) => {
|
var passwordreg =
|
/(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,20}/;
|
if (!passwordreg.test(value)) {
|
callback(
|
new Error('密码必须由数字、字母、特殊字符组合,请输入8-20位')
|
);
|
} else {
|
callback();
|
}
|
},
|
},
|
],
|
},
|
form: {
|
username: '',
|
ownedSystem: 'all',
|
requestIp: '',
|
operationType: '',
|
date: '',
|
},
|
tableData: [
|
{
|
username: '管理员',
|
ip: '221.182.31.12',
|
date: '2022-08-05',
|
ownedSystem: '',
|
largeModuleName: '正常',
|
smallModuleName: '资源操作日志',
|
resourceName: '',
|
operationType: '查询',
|
},
|
{
|
date: '2022-08-05',
|
username: '管理员',
|
ownedSystem: '',
|
largeModuleName: '正常',
|
smallModuleName: '资源操作日志',
|
resourceName: '',
|
operationType: '查询',
|
ip: '221.182.31.12',
|
},
|
{
|
date: '2022-08-05',
|
username: '管理员',
|
ownedSystem: '',
|
largeModuleName: '异常',
|
smallModuleName: '资源操作日志',
|
resourceName: '',
|
operationType: '查询',
|
ip: '221.182.31.12',
|
},
|
{
|
date: '2022-08-05',
|
username: '管理员',
|
ownedSystem: '',
|
largeModuleName: '正常',
|
smallModuleName: '资源操作日志',
|
resourceName: '',
|
operationType: '查询',
|
ip: '221.182.31.12',
|
},
|
{
|
date: '2022-08-05',
|
username: '管理员',
|
ownedSystem: '',
|
largeModuleName: '异常',
|
smallModuleName: '资源操作日志',
|
resourceName: '',
|
operationType: '查询',
|
ip: '221.182.31.12',
|
},
|
{
|
date: '2022-08-05',
|
username: '管理员',
|
ownedSystem: '',
|
largeModuleName: '异常',
|
smallModuleName: '资源操作日志',
|
resourceName: '',
|
operationType: '查询',
|
ip: '221.182.31.12',
|
},
|
{
|
date: '2022-08-05',
|
username: '管理员',
|
ownedSystem: '',
|
largeModuleName: '正常',
|
smallModuleName: '资源操作日志',
|
resourceName: '',
|
operationType: '查询',
|
ip: '221.182.31.12',
|
},
|
{
|
date: '2022-08-05',
|
username: '管理员',
|
ownedSystem: '',
|
largeModuleName: '正常',
|
smallModuleName: '资源操作日志',
|
resourceName: '',
|
operationType: '查询',
|
ip: '221.182.31.12',
|
},
|
{
|
date: '2022-08-05',
|
username: '管理员',
|
ownedSystem: '',
|
largeModuleName: '正常',
|
smallModuleName: '资源操作日志',
|
resourceName: '',
|
operationType: '查询',
|
ip: '221.182.31.12',
|
},
|
],
|
};
|
},
|
methods: {
|
handleSizeChange(val) {
|
console.log(`每页 ${val} 条`);
|
},
|
handleCurrentChange(val) {
|
console.log(`当前页: ${val}`);
|
},
|
onSubmit() {
|
console.log('submit!');
|
},
|
resetForm(formName) {
|
this.$refs[formName].resetFields();
|
},
|
showAddDialog() {
|
this.dialogTableVisible = true;
|
},
|
},
|
created() { },
|
};
|
</script>
|
<style>
|
/deep/ .el-table__fixed-right {
|
height: 100% !important;
|
}
|
</style>
|
<style lang="less" scoped>
|
//@import url(); 引入公共css类
|
.logLog_box {
|
background: rgb(240, 242, 245);
|
border-radius: 10px;
|
height: 100%;
|
padding: 10px;
|
box-sizing: border-box;
|
.el-input {
|
width: 300px;
|
}
|
.inquire {
|
height: 110px;
|
overflow: auto;
|
padding: 8px;
|
margin-top: 20px;
|
background: #fff;
|
border-radius: 5px;
|
border: 1px solid rgb(202, 201, 204);
|
margin-bottom: 20px;
|
.el-form-item {
|
margin: 5px;
|
}
|
}
|
.table_box {
|
height: 65%;
|
padding: 10px;
|
background: #fff;
|
border-radius: 5px;
|
border: 1px solid rgb(202, 201, 204);
|
}
|
.text-center {
|
text-align: center;
|
}
|
.select {
|
width: 300px;
|
}
|
}
|
/deep/ .el-card__header {
|
padding: 10px 10px !important;
|
}
|
/deep/ .el-dialog {
|
margin-top: 2vh !important;
|
}
|
/deep/ .el-dialog__wrapper {
|
overflow: hidden !important;
|
}
|
</style>
|
