You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
373 lines
12 KiB
373 lines
12 KiB
<template>
|
|
<div class="app-container">
|
|
fff
|
|
<!--工具栏-->
|
|
<div class="head-container">
|
|
<el-row type="flex">
|
|
<el-col :span="20" class="col_flex">
|
|
<!-- 搜索 -->
|
|
<div class="form_item">
|
|
<span>角色名称：</span>
|
|
<el-input
|
|
v-model="blurry"
|
|
clearable
|
|
size="small"
|
|
placeholder="角色名称"
|
|
style="width: 200px;"
|
|
class="filter-item"
|
|
@keyup.enter.native="crud.toQuery"
|
|
/>
|
|
</div>
|
|
<div class="form_item">
|
|
<span>管理员名称：</span>
|
|
<el-input
|
|
v-model="blurry"
|
|
clearable
|
|
size="small"
|
|
placeholder="管理员名称"
|
|
style="width: 200px;"
|
|
class="filter-item"
|
|
@keyup.enter.native="crud.toQuery"
|
|
/>
|
|
</div>
|
|
<rrOperation />
|
|
</el-col>
|
|
<el-col class="page_add" :span="4">
|
|
<el-button class="table_add" type="primary" round @click="addDialogVisible = true">新增</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<!--新增用户-->
|
|
<el-dialog
|
|
append-to-body
|
|
:close-on-click-modal="false"
|
|
:show-close="false"
|
|
:visible.sync="addDialogVisible"
|
|
title="新增"
|
|
width="576px"
|
|
>
|
|
<el-form ref="form" :inline="true" :model="form" size="small" label-width="100px">
|
|
<el-form-item
|
|
label="手机号"
|
|
prop="account"
|
|
:rules="[
|
|
{ required: true, message: '请输入手机号', trigger: 'blur' }
|
|
]"
|
|
>
|
|
<el-input v-model="form.account" style="width: 336px" />
|
|
</el-form-item>
|
|
<el-form-item
|
|
label="管理员名称"
|
|
prop="nickName"
|
|
:rules="[
|
|
{ required: true, message: '请输入管理员名称', trigger: 'blur' },
|
|
{ min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
|
|
]"
|
|
>
|
|
<el-input v-model="form.nickName" style="width: 336px" />
|
|
</el-form-item>
|
|
<el-form-item
|
|
label="管理员角色"
|
|
prop="roles"
|
|
:rules="[
|
|
{ required: true, message: '请选择管理员角色', trigger: 'change' }
|
|
]"
|
|
>
|
|
<el-select v-model="form.roles" placeholder="请选择管理员角色" style="width: 336px">
|
|
<el-option label="机构超级管理员" value="1" />
|
|
<el-option label="普通用户" value="2" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item
|
|
label="管理员状态"
|
|
prop="enabled"
|
|
:rules="[
|
|
{ required: true, trigger: 'change', message: '请选择管理员状态' }
|
|
]"
|
|
>
|
|
<el-select v-model="form.enabled" placeholder="请选择管理员状态" style="width: 336px">
|
|
<el-option label="启用" value="1" />
|
|
<el-option label="关闭" value="0" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button :loading="crud.status.cu === 2" type="primary" round @click="crud.submitCU">保存</el-button>
|
|
<el-button round @click="addDialogVisible=false">关闭</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
<!-- 编辑用户 -->
|
|
<el-dialog
|
|
append-to-body
|
|
:close-on-click-modal="false"
|
|
:show-close="false"
|
|
:visible.sync="editDialogVisible"
|
|
title="编辑"
|
|
width="576px"
|
|
>
|
|
<el-form
|
|
ref="form"
|
|
:inline="true"
|
|
:model="editForm"
|
|
:rules="rules"
|
|
size="small"
|
|
label-width="100px"
|
|
>
|
|
<el-form-item label="管理员名称" prop="nickName">
|
|
<el-input v-model="editForm.nickName" style="width: 336px" />
|
|
</el-form-item>
|
|
<el-form-item label="管理员角色" prop="roles">
|
|
<el-input v-model="editForm.roles" disabled style="width: 336px" />
|
|
</el-form-item>
|
|
<el-form-item label="机构名称" prop="orgName">
|
|
<el-input v-model="editForm.orgName" disabled style="width: 336px" />
|
|
</el-form-item>
|
|
<el-form-item label="更改手机号" prop="phone">
|
|
<el-input v-model.number="editForm.phone" style="width: 336px" />
|
|
</el-form-item>
|
|
<el-form-item label="验证码" prop="code" class="auth_code">
|
|
<el-input v-model.number="editForm.code" style="width: 336px" />
|
|
<div class="login-code">
|
|
<span @click="countdown()">{{ verification }}</span>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item label="登录密码" prop="password">
|
|
<el-input v-model="editForm.password" style="width: 336px" />
|
|
</el-form-item>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button :loading="crud.status.cu === 2" type="primary" round @click="crud.submitCU">保存</el-button>
|
|
<el-button round @click="editDialogVisible=false">关闭</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
<!--表格渲染-->
|
|
<el-row :gutter="15">
|
|
<el-col>
|
|
<!-- :data="crud.data" -->
|
|
<el-table
|
|
ref="table"
|
|
v-loading="crud.loading"
|
|
:data="tableData"
|
|
:header-cell-style="{ background: '#3a8aeb', color: '#fff' }"
|
|
style="width: 100%;"
|
|
@selection-change="crud.selectionChangeHandler"
|
|
>
|
|
<el-table-column :selectable="checkboxT" type="selection" width="55" />
|
|
<el-table-column prop="account" width="135" align="center" label="登录账号" />
|
|
<el-table-column prop="nickName" align="center" label="管理员名称" />
|
|
<el-table-column prop="roles" align="center" label="管理角色" />
|
|
<el-table-column prop="orgName" align="center" label="机构名称" />
|
|
<el-table-column prop="phone" align="center" label="手机号码" />
|
|
<el-table-column label="状态" align="center" prop="enabled">
|
|
<template slot-scope="scope">
|
|
<div>{{ scope.row.enabled == 0 ? '启用' : '关闭' }}</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="createTime" width="135" label="创建日期" />
|
|
<!-- v-if="checkPer(['admin','user:edit','user:del'])" -->
|
|
<el-table-column label="操作" width="120" align="center" fixed="right">
|
|
<template slot-scope="scope">
|
|
<!-- <udOperation
|
|
:data="scope.row"
|
|
:permission="permission"
|
|
:disabled-dle="scope.row.id === user.id"
|
|
/>-->
|
|
<el-button
|
|
type="primary"
|
|
class="edit_btn"
|
|
@click="editFormData(scope.$index, scope.row)"
|
|
>编辑</el-button>
|
|
<el-button type="danger" class="delt_btn">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<!--分页组件-->
|
|
<pagination />
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// import crudUser from '@/api/system/user'
|
|
import { isvalidPhone } from '@/utils/validate'
|
|
// import CRUD, { presenter, header, form, crud } from '@crud/crud'
|
|
import rrOperation from '@crud/RR.operation'
|
|
// import crudOperation from '@crud/CRUD.operation'
|
|
// import udOperation from '@crud/UD.operation'
|
|
import pagination from '@crud/Pagination'
|
|
import { mapGetters } from 'vuex'
|
|
// const defaultForm = {
|
|
// id: null,
|
|
// account: null,
|
|
// nickName: '',
|
|
// roles: null,
|
|
// enabled: ''
|
|
// }
|
|
export default {
|
|
name: 'User',
|
|
components: { rrOperation, pagination },
|
|
// cruds() {
|
|
// return CRUD({ title: '用户', url: 'api/users', crudMethod: { ...crudUser }})
|
|
// },
|
|
// mixins: [presenter(), header(), form(defaultForm), crud()],
|
|
// 数据字典
|
|
data() {
|
|
// 自定义验证
|
|
const validPhone = (rule, value, callback) => {
|
|
if (!value) {
|
|
callback(new Error('请输入电话号码'))
|
|
} else if (!isvalidPhone(value)) {
|
|
callback(new Error('请输入正确的11位手机号码'))
|
|
} else {
|
|
callback()
|
|
}
|
|
}
|
|
return {
|
|
addDialogVisible: false,
|
|
editDialogVisible: false,
|
|
editForm: {
|
|
nickName: '',
|
|
roles: '',
|
|
orgName: '',
|
|
phone: '',
|
|
code: '',
|
|
password: ''
|
|
},
|
|
disabledSendCode: false,
|
|
verification: '获取验证码',
|
|
countNum: 60,
|
|
height: document.documentElement.clientHeight - 180 + 'px;',
|
|
permission: {
|
|
add: ['admin', 'user:add'],
|
|
edit: ['admin', 'user:edit'],
|
|
del: ['admin', 'user:del']
|
|
},
|
|
tableData: [
|
|
{
|
|
id: 1,
|
|
account: '15100701025',
|
|
nickName: '王XX',
|
|
roles: '机构超级管理员',
|
|
orgName: 'XX机构',
|
|
phone: '15100701025',
|
|
enabled: '0',
|
|
createTime: '2021-11-10'
|
|
}
|
|
],
|
|
rules: {
|
|
nickName: [
|
|
{ required: true, message: '请输入管理员名称', trigger: 'blur' },
|
|
{ min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
|
|
],
|
|
phone: [
|
|
{ required: true, trigger: 'blur', validator: validPhone }
|
|
],
|
|
code: [
|
|
{ required: true, trigger: 'blur', message: '请输入验证码' }
|
|
],
|
|
password: [
|
|
{ required: true, trigger: 'blur', message: '请输入密码' }
|
|
]
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters([
|
|
'user'
|
|
])
|
|
},
|
|
created() {
|
|
// this.crud.msg.add = '新增成功，默认密码：123456'
|
|
},
|
|
mounted: function() {
|
|
const that = this
|
|
window.onresize = function temp() {
|
|
that.height = document.documentElement.clientHeight - 180 + 'px;'
|
|
}
|
|
},
|
|
methods: {
|
|
// 编辑
|
|
editFormData(index, row) {
|
|
this.editDialogVisible = true
|
|
this.editForm.nickName = row.nickName
|
|
this.editForm.roles = row.roles
|
|
this.editForm.orgName = row.orgName
|
|
this.editForm.phone = row.phone
|
|
this.editForm.enabled = row.enabled
|
|
},
|
|
// 获取验证码
|
|
getAuthCode() {
|
|
// const param = {
|
|
// phone: this.editForm.phone
|
|
// }
|
|
// proxy.$http
|
|
// .post(proxy.$API.SENDMSGCODE,
|
|
// param
|
|
// )
|
|
// .then(res => {
|
|
// if (res.type == 200) {
|
|
// this.countdown()
|
|
// } else {
|
|
// console.log(res.content)
|
|
// }
|
|
// })
|
|
// .catch(res => {
|
|
// console.log(res)
|
|
// })
|
|
},
|
|
countdown() {
|
|
if (this.disabledSendCode) {
|
|
return
|
|
}
|
|
if (!/^1\d{10}$/.test(this.editForm.phone)) {
|
|
this.$message.error('手机号错误，请重新输入')
|
|
return
|
|
}
|
|
this.getAuthCode()
|
|
this.disabledSendCode = true
|
|
// this.isSendAuth = true
|
|
this.countNum = 60
|
|
const timer = setInterval(() => {
|
|
this.verification = this.countNum + '重新获取'
|
|
this.countNum -= 1
|
|
if (this.countNum < 1) {
|
|
clearInterval(timer)
|
|
this.verification = '重新获取'
|
|
this.disabledSendCode = false
|
|
// this.isSendAuth = false
|
|
console.log('倒计时结束')
|
|
}
|
|
}, 1000)
|
|
},
|
|
// 改变状态
|
|
// changeEnabled(data, val) {
|
|
// this.$confirm('此操作将 "' + this.dict.label.user_status[val] + '" ' + data.username + ', 是否继续？', '提示', {
|
|
// confirmButtonText: '确定',
|
|
// cancelButtonText: '取消',
|
|
// type: 'warning'
|
|
// }).then(() => {
|
|
// crudUser.edit(data).then(res => {
|
|
// this.crud.notify(this.dict.label.user_status[val] + '成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
|
|
// }).catch(() => {
|
|
// data.enabled = !data.enabled
|
|
// })
|
|
// }).catch(() => {
|
|
// data.enabled = !data.enabled
|
|
// })
|
|
// },
|
|
checkboxT(row, rowIndex) {
|
|
return row.id !== this.user.id
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
.el-dialog__header {
|
|
background-color: #f1f1f1;
|
|
}
|
|
.edit_code {
|
|
margin-left: 20px;
|
|
}
|
|
</style>
|