455 lines
12 KiB
Vue
455 lines
12 KiB
Vue
<template>
|
|
<div class="content-height system-user">
|
|
<div class="title">
|
|
<span>字典管理</span>
|
|
</div>
|
|
<div class="search">
|
|
<el-row>
|
|
<el-col :span="20">
|
|
<div class="search-box-left">
|
|
<label>数据字典编码:</label>
|
|
<el-input v-model="q.dicCode" placeholder="请输入数据字典编码"></el-input>
|
|
<label>数据字典名称:</label>
|
|
<el-input v-model="q.dicName" placeholder="请输入数据字典名称"></el-input>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="4" align="right">
|
|
<div class="search-box-right">
|
|
<el-button type="primary" @click="search">查询</el-button>
|
|
<el-button @click="reset">重置</el-button>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="24">
|
|
<div class="operate-box">
|
|
<el-button @click="add">新增</el-button>
|
|
<el-button @click="getSelectUser">批量删除</el-button>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<div class="table">
|
|
<vxe-table ref="userTable" :data="tableData" :empty-render="{name: 'NotData'}" align="center" border stripe
|
|
v-table-min-height="'calc(100vh - 320px)'">
|
|
<vxe-column show-overflow type="checkbox" width="77"></vxe-column>
|
|
<vxe-column show-overflow show-header-overflow type="seq" title="序号" width="77">
|
|
<template #default="{ row, rowIndex }">
|
|
{{ rowIndex + (q.pageNo - 1) * q.pageSize + 1 }}
|
|
</template>
|
|
</vxe-column>
|
|
<vxe-column show-overflow show-header-overflow field="dicCode" title="数据字典编码"></vxe-column>
|
|
<vxe-column show-overflow show-header-overflow field="dicName" title="数据字典名称"></vxe-column>
|
|
<vxe-column show-overflow show-header-overflow field="description" title="描述"></vxe-column>
|
|
<vxe-column show-overflow show-header-overflow title="操作" width="200" fixed="right">
|
|
<template #default="{ row }">
|
|
<el-button type="text" @click="openRowData('view', row)">查看</el-button>
|
|
<el-button type="text" @click="openRowData('modify', row)">编辑</el-button>
|
|
<el-button type="text" class="del-btn" @click="deleteRow(row)">删除</el-button>
|
|
</template>
|
|
</vxe-column>
|
|
</vxe-table>
|
|
<el-pagination
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
:current-page="q.pageNo"
|
|
:page-sizes="[5, 10, 20]"
|
|
:page-size="q.pageSize"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="total"/>
|
|
</div>
|
|
<!-- 新增/编辑/查看 用户 -->
|
|
<el-dialog :title="dialogTitle" :visible.sync="dialogUser" width="750px" :close-on-click-modal="false"
|
|
:close-on-press-escape="false" modal-append-to-body append-to-body>
|
|
<div class="user-form">
|
|
<el-form ref="dicRef" :rules="formRule" :model="form" label-width="186px" :disabled="mode === 'view'">
|
|
<el-form-item label="数据字典编码:" prop="dicCode">
|
|
<el-input v-model="form.dicCode" :disabled="mode === 'view' || mode === 'modify' " maxlength="20" show-word-limit placeholder="请输入数据字典编码"></el-input>
|
|
</el-form-item>
|
|
<!--<el-form-item label="密码:" :required="mode === 'add'" v-if="mode !== 'view'">-->
|
|
<!--<el-input v-model="form.password" maxlength="20" type="password" placeholder="请输入密码"></el-input>-->
|
|
<!--</el-form-item>-->
|
|
<!--<el-form-item label="确认密码:" :required="mode === 'add'" v-if="mode !== 'view'">-->
|
|
<!--<el-input v-model="repassword" maxlength="20" type="password" placeholder="请确认密码"></el-input>-->
|
|
<!--</el-form-item>-->
|
|
<el-form-item label="数据字典名称:" prop="dicName">
|
|
<el-input v-model="form.dicName" placeholder="请输入数据字典名称" maxlength="20" show-word-limit></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="描述:" >
|
|
<el-input type="textarea" v-model="form.description" maxlength="500" show-word-limit placeholder="请输入描述"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div class="done">
|
|
<el-button v-if="mode !== 'view'" type="primary" @click="sysUserAddUser">确定</el-button>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { Base64 } from 'js-base64'
|
|
export default {
|
|
name: 'User',
|
|
data () {
|
|
return {
|
|
q: {
|
|
dicCode: '', // 用户名
|
|
dicName: '', // 角色名称
|
|
pageNo: 1,
|
|
pageSize: 10
|
|
},
|
|
total: 0,
|
|
tableData: [],
|
|
mode: '',
|
|
dialogUser: false,
|
|
form: {
|
|
dicCode:'',
|
|
dicName:'',
|
|
description:''
|
|
},
|
|
formRule:{
|
|
dicCode:[
|
|
{
|
|
required:true,
|
|
message:'数据字典编码不能为空',
|
|
trigger:'change'
|
|
}
|
|
],
|
|
dicName:[
|
|
{
|
|
required:true,
|
|
message:'数据字典名称不能为空',
|
|
trigger:'change'
|
|
}
|
|
],
|
|
|
|
},
|
|
repassword: '',
|
|
roleList: []
|
|
}
|
|
},
|
|
methods: {
|
|
search () {
|
|
this.q.pageNo = 1
|
|
this.sysUserList()
|
|
},
|
|
// 获取所有字典
|
|
sysUserList () {
|
|
this.$api.dictionary.getDic(this.q).then((res)=>{
|
|
this.tableData = res.data.records
|
|
this.total=res.data.total
|
|
})
|
|
},
|
|
// 重置
|
|
reset () {
|
|
this.q = {
|
|
account: '', // 用户名
|
|
roleName: '', // 角色名称
|
|
pageNo: 1,
|
|
pageSize: 10
|
|
}
|
|
this.total = 0
|
|
this.tableData = []
|
|
this.sysUserList()
|
|
},
|
|
// 单页数据量
|
|
handleSizeChange (val) {
|
|
this.q.pageSize = val
|
|
this.q.pageNo = 1
|
|
this.sysUserList()
|
|
},
|
|
// 第几页
|
|
handleCurrentChange (val) {
|
|
this.q.pageNo = val
|
|
this.sysUserList()
|
|
},
|
|
// 新增
|
|
add () {
|
|
|
|
this.mode = 'add'
|
|
this.form = {
|
|
dicCode:'',
|
|
dicName:'',
|
|
description:''
|
|
}
|
|
this.repassword = ''
|
|
this.dialogUser = true
|
|
this.$nextTick(()=>{
|
|
this.$refs.dicRef.clearValidate()
|
|
|
|
})
|
|
},
|
|
// // 启用/禁用
|
|
// sysUserIsUse (val, row) {
|
|
// this.$confirm(val === '0' ? '此操作将禁用所选用户, 是否继续?' : '此操作将启用所选用户, 是否继续?', '提示', {
|
|
// confirmButtonText: '确定',
|
|
// cancelButtonText: '取消',
|
|
// type: 'warning'
|
|
// }).then(() => {
|
|
// this.$api.user.sysUserIsUse({ USID: row.USID, type: val }).then(_ => {
|
|
// this.$message.success('操作成功')
|
|
// this.sysUserList()
|
|
// })
|
|
// }).catch(() => {
|
|
// row.ISUSE = val === '1' ? '0' : '1'
|
|
// })
|
|
// },
|
|
// 删除
|
|
deleteRow (row) {
|
|
this.deleteUser(row.id)
|
|
},
|
|
// 新增用户
|
|
sysUserAddUser () {
|
|
this.$refs.dicRef.validate(v=>{
|
|
if(v){
|
|
if(this.mode=='add'){
|
|
this.$api.dictionary.addDic(this.form).then((res)=>{
|
|
this.$message.success("新增成功")
|
|
this.sysUserList()
|
|
})
|
|
}else{
|
|
this.$api.dictionary.editDic(this.form).then((res)=>{
|
|
this.$message.success("编辑成功")
|
|
this.sysUserList()
|
|
})
|
|
}
|
|
|
|
this.dialogUser = false
|
|
}else{
|
|
this.$message.warning("请检查表单")
|
|
}
|
|
})
|
|
|
|
},
|
|
// 编辑查看用户
|
|
openRowData (mode, row) {
|
|
this.mode = mode
|
|
if(mode=='view'){
|
|
this.$router.push({
|
|
path:'/system/dicdeatil',
|
|
query:{
|
|
id:this.$route.query.id,
|
|
pId:row.id,
|
|
pName: row.dicName
|
|
}
|
|
})
|
|
}else if(mode=='add'){
|
|
|
|
this.form = {
|
|
description:'',
|
|
dicName:'',
|
|
dicCode:''
|
|
}
|
|
this.dialogUser = true
|
|
}else{
|
|
this.form = JSON.parse(JSON.stringify(row))
|
|
this.dialogUser = true
|
|
}
|
|
|
|
},
|
|
|
|
// 多选用户
|
|
getSelectUser () {
|
|
const users = this.$refs.userTable.getCheckboxRecords()
|
|
if (!users.length) {
|
|
return this.$message.warning('请选择数据后在进行操作')
|
|
}
|
|
const ids = users.map(item => item.id).join(',')
|
|
this.deleteUser(ids)
|
|
},
|
|
// 删除用户
|
|
deleteUser (ids) {
|
|
this.$confirm('此操作将删除所选, 是否继续?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
this.$api.dictionary.delDic({ids:ids} ).then(_ => {
|
|
this.$message.success('操作成功')
|
|
this.sysUserList()
|
|
})
|
|
})
|
|
},
|
|
|
|
},
|
|
computed: {
|
|
dialogTitle () {
|
|
switch (this.mode) {
|
|
case 'add':
|
|
return '新增'
|
|
case 'modify':
|
|
return '编辑'
|
|
case 'view':
|
|
return '查看'
|
|
}
|
|
}
|
|
},
|
|
created () {
|
|
this.sysUserList()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.system-user {
|
|
.title {
|
|
border-bottom: 1px solid #EBEEF5;
|
|
height: 42px;
|
|
line-height: 42px;
|
|
margin: 0 18px 0 22px;
|
|
|
|
span {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #262626;
|
|
}
|
|
}
|
|
|
|
.search {
|
|
.search-box-left {
|
|
padding-top: 20px;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
|
|
label {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #595959;
|
|
margin-right: 5px;
|
|
padding-left: 22px;
|
|
}
|
|
|
|
.year {
|
|
::v-deep .el-input__inner {
|
|
padding: 0 15px !important;
|
|
}
|
|
}
|
|
|
|
::v-deep .el-input {
|
|
width: 167px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
@media screen and (max-width: 1366px) {
|
|
::v-deep .el-input {
|
|
width: 135px;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
|
|
::v-deep .el-button {
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
.search-box-right {
|
|
padding-top: 20px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
padding-right: 14px;
|
|
}
|
|
|
|
.operate-box {
|
|
padding-left: 13px;
|
|
padding-bottom: 11px;
|
|
padding-top: 18px;
|
|
}
|
|
}
|
|
|
|
.table {
|
|
margin: 0 14px 0 13px;
|
|
|
|
::v-deep .el-pagination {
|
|
margin-top: 13px;
|
|
padding-left: 20px;
|
|
padding-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.user-form {
|
|
padding-top: 26px;
|
|
|
|
::v-deep .el-form {
|
|
padding-right: 79px;
|
|
|
|
.el-form-item {
|
|
//margin-bottom: 10px;
|
|
|
|
.el-form-item__label {
|
|
height: 36px;
|
|
line-height: 36px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #262626;
|
|
}
|
|
|
|
.el-input__inner {
|
|
min-height: 36px;
|
|
}
|
|
|
|
.el-input__inner,
|
|
.el-textarea__inner {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #434343;
|
|
}
|
|
|
|
.el-select {
|
|
width: 100%;
|
|
}
|
|
|
|
.el-date-editor {
|
|
width: 100%;
|
|
|
|
.el-input__inner {
|
|
padding-left: 15px;
|
|
}
|
|
|
|
.el-input__suffix {
|
|
font-size: 16px;
|
|
margin-top: 2px;
|
|
}
|
|
}
|
|
|
|
.icon-auth {
|
|
.el-icon-arrow-up {
|
|
margin-top: 2px;
|
|
transform: rotateZ(0) !important;
|
|
}
|
|
|
|
.el-icon-arrow-up:before {
|
|
content: '';
|
|
background: url("../../assets/imgs/icon-user.png") no-repeat center center;
|
|
display: inline-block;
|
|
width: 12px;
|
|
height: 14px;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
.el-button {
|
|
width: 80px;
|
|
height: 36px;
|
|
padding: 0;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.done {
|
|
text-align: center;
|
|
padding: 40px 0;
|
|
|
|
::v-deep .el-button {
|
|
width: 80px;
|
|
height: 36px;
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
</style>
|