init
This commit is contained in:
183
src/pages/modules/systemmanage/developer.vue
Normal file
183
src/pages/modules/systemmanage/developer.vue
Normal file
@@ -0,0 +1,183 @@
|
||||
<template>
|
||||
<div class="main-container">
|
||||
<div class="right_side">
|
||||
<div class="tabs_container">
|
||||
<div class="tabs_header">
|
||||
<div class="tabs_wrap">
|
||||
<div class="tabs_scroll">
|
||||
<div class="tabs_nav">
|
||||
<div class="tabs_item" v-for="e in tabs" :key="e.id" :class="{'is_active': tab === e.id}" @click="changeTab(e.id)">{{ e.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabs_content">
|
||||
<div v-show="tab === '1'" class="tab_pane">{{ result1 }}</div>
|
||||
<div v-show="tab === '2'" class="tab_pane">{{ result2 }}</div>
|
||||
<div v-show="tab === '3'" class="tab_pane">{{ result3 }}</div>
|
||||
<div v-show="tab === '4'" class="tab_pane">{{ result4 }}</div>
|
||||
<div v-show="tab === '5'" class="tab_pane">{{ result5 }}</div>
|
||||
<div v-show="tab === '6'" class="tab_pane">{{ result6 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getIP, getLogList, getROSNodeList, temperature, debugInfo, softwareVersion } from '@/config/getData2.js'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
tabs: [{id: '1', label: 'ifconfig'}, {id: '2', label: '日志列表'}, {id: '3', label: 'ROS运行列表'}, {id: '4', label: '芯片温度/主频'}, {id: '5', label: '调试信息'}, {id: '6', label: '软/硬件版本'}],
|
||||
tab: '1',
|
||||
interTime: this.$store.getters.setTime,
|
||||
timer: null,
|
||||
result1: '',
|
||||
result2: '',
|
||||
result3: '',
|
||||
result4: '',
|
||||
result5: '',
|
||||
result6: ''
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this._getIP()
|
||||
},
|
||||
methods: {
|
||||
refresh () {
|
||||
this.timer = setInterval(() => {
|
||||
this._getIP()
|
||||
}, this.interTime)
|
||||
},
|
||||
async _getIP () {
|
||||
let res = await getIP()
|
||||
if (res.code === '1') {
|
||||
this.result1 = res.result.result_info
|
||||
} else {
|
||||
this.toast(res.desc)
|
||||
}
|
||||
},
|
||||
async _getLogList () {
|
||||
let res = await getLogList()
|
||||
if (res.code === '1') {
|
||||
this.result2 = res.result.result_info
|
||||
} else {
|
||||
this.toast(res.desc)
|
||||
}
|
||||
},
|
||||
async _getROSNodeList () {
|
||||
let res = await getROSNodeList()
|
||||
if (res.code === '1') {
|
||||
this.result3 = res.result.result_info
|
||||
} else {
|
||||
this.toast(res.desc)
|
||||
}
|
||||
},
|
||||
async _temperature () {
|
||||
let res = await temperature()
|
||||
if (res.code === '1') {
|
||||
this.result4 = res.result.result_info
|
||||
} else {
|
||||
this.toast(res.desc)
|
||||
}
|
||||
},
|
||||
async _debugInfo () {
|
||||
let res = await debugInfo()
|
||||
if (res.code === '1') {
|
||||
this.result5 = res.result.result_info
|
||||
} else {
|
||||
this.toast(res.desc)
|
||||
}
|
||||
},
|
||||
async _softwareVersion () {
|
||||
let res = await softwareVersion()
|
||||
if (res.code === '1') {
|
||||
this.result6 = res.result.result_info
|
||||
} else {
|
||||
this.toast(res.desc)
|
||||
}
|
||||
},
|
||||
changeTab (id) {
|
||||
this.tab = id
|
||||
switch (id) {
|
||||
case '1':
|
||||
this._getIP()
|
||||
break
|
||||
case '2':
|
||||
this._getLogList()
|
||||
break
|
||||
case '3':
|
||||
this._getROSNodeList()
|
||||
break
|
||||
case '4':
|
||||
this._temperature()
|
||||
break
|
||||
case '5':
|
||||
this._debugInfo()
|
||||
break
|
||||
case '6':
|
||||
this._softwareVersion()
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@style/mixin'
|
||||
.tabs_container
|
||||
_wh(100%,100%)
|
||||
background #fff
|
||||
border 1px solid #dcdfe6
|
||||
box-shadow 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04)
|
||||
.tabs_header
|
||||
position relative
|
||||
background-color #f5f7fa
|
||||
border-bottom 1px solid #e4e7ed
|
||||
.tabs_wrap
|
||||
overflow hidden
|
||||
margin-bottom -1px
|
||||
position relative
|
||||
.tabs_scroll
|
||||
overflow hidden
|
||||
.tabs_nav
|
||||
white-space nowrap
|
||||
position relative
|
||||
transition transform .3s
|
||||
float left
|
||||
z-index 2
|
||||
.tabs_item
|
||||
padding 0 40px
|
||||
height 40px
|
||||
box-sizing border-box
|
||||
line-height 40px
|
||||
display inline-block
|
||||
list-style none
|
||||
font-size 14px
|
||||
font-weight 500
|
||||
position relative
|
||||
transition all .3s cubic-bezier(.645,.045,.355,1)
|
||||
border 1px solid transparent
|
||||
margin-top -1px
|
||||
color #909399
|
||||
&:first-child
|
||||
margin-left -1px
|
||||
.is_active
|
||||
color: #409eff;
|
||||
background-color: #fff;
|
||||
border-right-color: #dcdfe6;
|
||||
border-left-color: #dcdfe6;
|
||||
.tabs_content
|
||||
_wh(100%, calc(100% - 39px))
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding: 15px;
|
||||
.tab_pane
|
||||
_wh(100%,100%)
|
||||
_font(14px, 21px, #323232,,)
|
||||
white-space pre-line
|
||||
word-break break-all
|
||||
overflow-y auto
|
||||
</style>
|
||||
384
src/pages/modules/systemmanage/role.vue
Normal file
384
src/pages/modules/systemmanage/role.vue
Normal file
@@ -0,0 +1,384 @@
|
||||
<template>
|
||||
<div class="main-container">
|
||||
<div class="right_side">
|
||||
<div class="buttons_wrapper">
|
||||
<div class="row">
|
||||
<button class="button button--primary" @click="showDialog('1')">新增角色</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row_2">
|
||||
<div class="grid_wrapper">
|
||||
<table>
|
||||
<tr>
|
||||
<!-- <th>选中</th> -->
|
||||
<th width="20%">角色名称</th>
|
||||
<th width="20%">描述</th>
|
||||
<th width="30%">创建日期</th>
|
||||
<th width="30%">操作</th>
|
||||
</tr>
|
||||
<tr v-for="(e, i) in datalist" :key="i" :class="{'tr_selected': pkId === e.roleId}" @click="toCheck(e)">
|
||||
<!-- <td>
|
||||
<div class="radio__input icon_radio_checked"><i class="icon_radio"></i></div>
|
||||
</td> -->
|
||||
<td>{{ e.name }}</td>
|
||||
<td>{{ e.remark }}</td>
|
||||
<td>{{ e.createTime }}</td>
|
||||
<td>
|
||||
<div class="row">
|
||||
<button class="button button--primary grid_button" @click="showDialog('2', e)">修改</button>
|
||||
<button class="button button--primary grid_button" @click="showDialog('3', e)">删除</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="tree_wrapper">
|
||||
<div class="tree_header">
|
||||
<span>角色名称</span>
|
||||
<button class="button button--primary grid_button button1" :class="{'button--info': pkId === '' || $refs.tree.getCheckedKeys().length === 0}" :disabled="disabled" @click="toSave">保存</button>
|
||||
</div>
|
||||
<div class="tree_body_container">
|
||||
<el-tree
|
||||
:data="tree"
|
||||
show-checkbox
|
||||
default-expand-all
|
||||
node-key="menuId"
|
||||
:default-checked-keys=checkedKeys
|
||||
ref="tree"
|
||||
highlight-current
|
||||
:props="defaultProps">
|
||||
</el-tree>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="row_2">
|
||||
<div v-for="e in tree" :key="e.menuId">
|
||||
<div>{{e.title+e.menuId}}</div>
|
||||
<div v-for="el in e.children" :key="el.menuId">
|
||||
<div>{{el.title+el.menuId}}</div>
|
||||
<div v-for="ell in el.children" :key="ell.menuId">
|
||||
<div>{{ell.title+ell.menuId}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<jxDialog
|
||||
ref="child"
|
||||
:title="title"
|
||||
:type="type"
|
||||
:unclick="unclick"
|
||||
@toSure="toSureDialog"
|
||||
@toCancle="toCancle"
|
||||
>
|
||||
<div v-if="type === '1' || type === '2'" class="form_wraper">
|
||||
<div class="form">
|
||||
<div class="form_item">
|
||||
<div class="form_item__label"><i>*</i>角色名称</div>
|
||||
<div class="form_item__content">
|
||||
<input type="text" class="form_item__input" v-model="rolename" @focus="show" data-layout="normal">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form">
|
||||
<div class="form_item allwidth">
|
||||
<div class="form_item__label">备注</div>
|
||||
<div class="form_item__content">
|
||||
<textarea v-model="remark" style="resize:none;" class="form_item__input form_item__textarea" @focus="show" data-layout="normal"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="type === '3'" class="form_wraper">确定删除该用户吗？</div>
|
||||
</jxDialog>
|
||||
</div>
|
||||
<vue-touch-keyboard id="keyboard" :options="keyoptions" v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" :next="next" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import jxDialog from '@components/dialog.vue'
|
||||
import { sysRoleQuery, sysRoleAdd, sysRoleEdit, sysRoleDelete, menuQuery, sysRoleMenu } from '@config/getData2.js'
|
||||
export default {
|
||||
components: {
|
||||
jxDialog
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
datalist: [],
|
||||
active: false,
|
||||
type: '',
|
||||
title: '',
|
||||
rolename: '',
|
||||
remark: '',
|
||||
tree: [],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'title'
|
||||
},
|
||||
checkedKeys: [],
|
||||
pkObj: {},
|
||||
pkId: '',
|
||||
unclick: false,
|
||||
disabled: false,
|
||||
visible: false,
|
||||
layout: 'normal',
|
||||
input: null,
|
||||
keyoptions: {
|
||||
useKbEvents: false,
|
||||
preventClickEvent: false
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
type (val) {
|
||||
switch (val) {
|
||||
case '1':
|
||||
this.title = '添加角色'
|
||||
break
|
||||
case '2':
|
||||
this.title = '修改角色'
|
||||
break
|
||||
case '3':
|
||||
this.title = ''
|
||||
break
|
||||
default:
|
||||
this.title = ''
|
||||
}
|
||||
},
|
||||
rolename (val) {
|
||||
if ((this.type === '1' || this.type === '2') && val === '') {
|
||||
this.unclick = true
|
||||
} else {
|
||||
this.unclick = false
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this._sysRoleQuery()
|
||||
this._menuQuery()
|
||||
},
|
||||
methods: {
|
||||
async _sysRoleQuery () {
|
||||
let res = await sysRoleQuery('0', '100')
|
||||
this.pkId = ''
|
||||
this.pkObj = {}
|
||||
this.datalist = [...res]
|
||||
},
|
||||
async _menuQuery () {
|
||||
let res = await menuQuery()
|
||||
this.tree = [...res]
|
||||
},
|
||||
showDialog (type, e) {
|
||||
this.type = type
|
||||
this.$refs.child.active = true
|
||||
switch (type) {
|
||||
case '1':
|
||||
this.rolename = ''
|
||||
this.remark = ''
|
||||
this.unclick = true
|
||||
break
|
||||
case '2':
|
||||
this.pkObj = e
|
||||
this.rolename = e.name
|
||||
this.remark = e.remark
|
||||
if (this.rolename === '') {
|
||||
this.unclick = true
|
||||
} else {
|
||||
this.unclick = false
|
||||
}
|
||||
break
|
||||
case '3':
|
||||
this.pkObj = e
|
||||
this.unclick = false
|
||||
break
|
||||
}
|
||||
},
|
||||
toSureDialog (type) {
|
||||
switch (type) {
|
||||
case '1':
|
||||
this._sysRoleAdd()
|
||||
break
|
||||
case '2':
|
||||
this._sysRoleEdit()
|
||||
break
|
||||
case '3':
|
||||
this._sysRoleDelete()
|
||||
break
|
||||
}
|
||||
this.hide()
|
||||
},
|
||||
toCancle () {
|
||||
this.hide()
|
||||
},
|
||||
async _sysRoleAdd () {
|
||||
this.$refs.child.disabled = true
|
||||
if (!this.rolename) {
|
||||
this.toast('角色名称不能为空')
|
||||
this.$refs.child.disabled = false
|
||||
return
|
||||
}
|
||||
try {
|
||||
let res = await sysRoleAdd(this.rolename, this.remark)
|
||||
if (res.code === '1') {
|
||||
this._sysRoleQuery()
|
||||
}
|
||||
this.toast(res.desc)
|
||||
this.$refs.child.active = false
|
||||
this.$refs.child.disabled = false
|
||||
} catch (e) {
|
||||
this.$refs.child.active = false
|
||||
this.$refs.child.disabled = false
|
||||
}
|
||||
},
|
||||
async _sysRoleEdit () {
|
||||
this.$refs.child.disabled = true
|
||||
if (!this.rolename) {
|
||||
this.toast('角色名称不能为空')
|
||||
this.$refs.child.disabled = false
|
||||
return
|
||||
}
|
||||
try {
|
||||
let res = await sysRoleEdit(this.pkObj.roleId, this.rolename, this.remark)
|
||||
if (res.code === '1') {
|
||||
this._sysRoleQuery()
|
||||
}
|
||||
this.toast(res.desc)
|
||||
this.$refs.child.active = false
|
||||
this.$refs.child.disabled = false
|
||||
} catch (e) {
|
||||
this.$refs.child.active = false
|
||||
this.$refs.child.disabled = false
|
||||
}
|
||||
},
|
||||
async _sysRoleDelete () {
|
||||
this.$refs.child.disabled = true
|
||||
try {
|
||||
let res = await sysRoleDelete([this.pkObj.roleId])
|
||||
if (res.code === '1') {
|
||||
this._sysRoleQuery()
|
||||
}
|
||||
this.toast(res.desc)
|
||||
this.$refs.child.active = false
|
||||
this.$refs.child.disabled = false
|
||||
} catch (e) {
|
||||
this.$refs.child.active = false
|
||||
this.$refs.child.disabled = false
|
||||
}
|
||||
},
|
||||
async _sysRoleMenu (arr, arr1) {
|
||||
this.disabled = true
|
||||
try {
|
||||
let res = await sysRoleMenu(this.pkId, arr, arr1)
|
||||
if (res.code === '1') {
|
||||
this.toast(res.desc)
|
||||
this.pkId = ''
|
||||
this.checkedKeys = []
|
||||
this.tree.map(e => {
|
||||
this.$refs.tree.setChecked(e, false, true)
|
||||
})
|
||||
this._sysRoleQuery()
|
||||
} else {
|
||||
this.toast(res.desc)
|
||||
}
|
||||
this.disabled = false
|
||||
} catch (e) {
|
||||
this.disabled = false
|
||||
}
|
||||
},
|
||||
toSave () {
|
||||
if (!this.pkId) {
|
||||
return
|
||||
}
|
||||
let arr1 = this.$refs.tree.getCheckedKeys()
|
||||
let arr2 = this.$refs.tree.getHalfCheckedKeys()
|
||||
arr2.map((e, i) => {
|
||||
if (e === this.tree[0].menuId) {
|
||||
arr2.splice(i, 1)
|
||||
}
|
||||
})
|
||||
if (arr1.length === 0) {
|
||||
return
|
||||
}
|
||||
let arr3 = arr2.concat(arr1)
|
||||
let arr4 = []
|
||||
arr3.map(el => {
|
||||
arr4.push({menuId: el})
|
||||
})
|
||||
this._sysRoleMenu(arr4, arr1)
|
||||
},
|
||||
toCheck (e) {
|
||||
this.pkId = this.pkId === e.roleId ? '' : e.roleId
|
||||
this.checkedKeys = this.pkId === e.roleId ? e.menus1 : []
|
||||
this.tree.map(e => {
|
||||
this.$refs.tree.setChecked(e, false, true)
|
||||
})
|
||||
if (this.pkId === e.roleId) {
|
||||
this.checkedKeys = e.menus1
|
||||
} else {
|
||||
this.checkedKeys = []
|
||||
}
|
||||
},
|
||||
show (e) {
|
||||
this.input = e.target
|
||||
this.layout = e.target.dataset.layout
|
||||
if (!this.visible) {
|
||||
this.visible = true
|
||||
}
|
||||
},
|
||||
hide () {
|
||||
this.visible = false
|
||||
},
|
||||
accept () {
|
||||
this.hide()
|
||||
},
|
||||
next () {
|
||||
let inputs = document.querySelectorAll('input')
|
||||
let found = false;
|
||||
[].forEach.call(inputs, (item, i) => {
|
||||
if (!found && item === this.input && i < inputs.length - 1) {
|
||||
found = true
|
||||
this.$nextTick(() => {
|
||||
inputs[i + 1].focus()
|
||||
})
|
||||
}
|
||||
})
|
||||
if (!found) {
|
||||
this.input.blur()
|
||||
this.hide()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@style/mixin'
|
||||
.row_2
|
||||
_fj()
|
||||
_wh(100%, calc(100% - 50px))
|
||||
.grid_wrapper
|
||||
_wh(calc(50% - 10px), 100%)
|
||||
overflow-y auto
|
||||
.grid_wrapper table td
|
||||
white-space normal
|
||||
.tree_wrapper
|
||||
_wh(calc(50% - 10px), 100%)
|
||||
overflow-y auto
|
||||
.tree_header
|
||||
position sticky
|
||||
top -1px
|
||||
z-index 99
|
||||
background #d7d7d7
|
||||
_font(14px, 23px, #323232, bold, center)
|
||||
padding 12px 10px
|
||||
.button1
|
||||
position absolute
|
||||
right 10px
|
||||
top 50%
|
||||
transform translateY(-50%)
|
||||
.tree_body_container
|
||||
height calc(100% - 47px)
|
||||
padding 12px 10px
|
||||
.grid_wrapper table .row .button
|
||||
margin 5px
|
||||
</style>
|
||||
313
src/pages/modules/systemmanage/system.vue
Normal file
313
src/pages/modules/systemmanage/system.vue
Normal file
@@ -0,0 +1,313 @@
|
||||
<template>
|
||||
<div class="main-container">
|
||||
<div class="right_side">
|
||||
<div class="buttons_wrapper">
|
||||
<div class="row">
|
||||
<button class="button button--primary" @click="showDialog('1')">添加参数</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_wrapper">
|
||||
<table>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>编码</th>
|
||||
<th>名称</th>
|
||||
<th>值</th>
|
||||
<th>备注</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
<tr v-for="(e, i) in datalist" :key="i">
|
||||
<td>{{i+1}}</td>
|
||||
<td>{{ e.code }}</td>
|
||||
<td>{{ e.name }}</td>
|
||||
<td>{{ e.value }}</td>
|
||||
<td>{{ e.remark }}</td>
|
||||
<td>
|
||||
<div class="row">
|
||||
<button class="button button--primary grid_button" @click="showDialog('2', e)">修改</button>
|
||||
<button class="button button--primary grid_button" @click="showDialog('3', e)">删除</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<jxDialog
|
||||
ref="child"
|
||||
:title="title"
|
||||
:type="type"
|
||||
:unclick="unclick"
|
||||
@toSure="toSureDialog"
|
||||
@toCancle="toCancle"
|
||||
>
|
||||
<div v-if="type === '1' || type === '2'" class="form_wraper">
|
||||
<div class="form">
|
||||
<div class="form_item">
|
||||
<div class="form_item__label"><i>*</i>编码</div>
|
||||
<div class="form_item__content">
|
||||
<input type="text" class="form_item__input" v-model="code" @focus="show" data-layout="normal">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form_item">
|
||||
<div class="form_item__label"><i>*</i>名字</div>
|
||||
<div class="form_item__content">
|
||||
<input type="text" class="form_item__input" v-model="name" @focus="show" data-layout="normal">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form">
|
||||
<div class="form_item">
|
||||
<div class="form_item__label"><i>*</i>数值</div>
|
||||
<div class="form_item__content">
|
||||
<input type="text" class="form_item__input" v-model="value" @focus="show" data-layout="numeric">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form">
|
||||
<div class="form_item allwidth">
|
||||
<div class="form_item__label">备注</div>
|
||||
<div class="form_item__content">
|
||||
<textarea v-model="remark" style="resize:none;" class="form_item__input form_item__textarea" @focus="show" data-layout="normal"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="type === '3'" class="form_wraper">确定删除吗？</div>
|
||||
</jxDialog>
|
||||
</div>
|
||||
<vue-touch-keyboard id="keyboard" :options="options" v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" :next="next" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import jxDialog from '@components/dialog.vue'
|
||||
import { paramQuery, paramAdd, paramEdit, paramDelete } from '@config/getData2.js'
|
||||
export default {
|
||||
components: {
|
||||
jxDialog
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
datalist: [],
|
||||
active: false,
|
||||
type: '',
|
||||
title: '',
|
||||
code: '',
|
||||
name: '',
|
||||
value: '',
|
||||
remark: '',
|
||||
unclick: false,
|
||||
visible: false,
|
||||
layout: 'normal',
|
||||
input: null,
|
||||
options: {
|
||||
useKbEvents: false,
|
||||
preventClickEvent: false
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
type (val) {
|
||||
switch (val) {
|
||||
case '1':
|
||||
this.title = '添加参数'
|
||||
break
|
||||
case '2':
|
||||
this.title = '修改参数'
|
||||
break
|
||||
case '3':
|
||||
this.title = ''
|
||||
break
|
||||
default:
|
||||
this.title = ''
|
||||
}
|
||||
},
|
||||
code (val) {
|
||||
if ((this.type === '1' || this.type === '2') && (val === '' || this.name === '' || this.value === '')) {
|
||||
this.unclick = true
|
||||
} else {
|
||||
this.unclick = false
|
||||
}
|
||||
},
|
||||
name (val) {
|
||||
if ((this.type === '1' || this.type === '2') && (val === '' || this.code === '' || this.value === '')) {
|
||||
this.unclick = true
|
||||
} else {
|
||||
this.unclick = false
|
||||
}
|
||||
},
|
||||
value (val) {
|
||||
if ((this.type === '1' || this.type === '2') && (val === '' || this.code === '' || this.name === '')) {
|
||||
this.unclick = true
|
||||
} else {
|
||||
this.unclick = false
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this._paramQuery()
|
||||
},
|
||||
methods: {
|
||||
async _paramQuery () {
|
||||
let res = await paramQuery('0', '100')
|
||||
this.datalist = [...res]
|
||||
},
|
||||
showDialog (type, e) {
|
||||
this.type = type
|
||||
this.$refs.child.active = true
|
||||
switch (type) {
|
||||
case '1':
|
||||
this.code = ''
|
||||
this.name = ''
|
||||
this.value = ''
|
||||
this.remark = ''
|
||||
this.unclick = true
|
||||
break
|
||||
case '2':
|
||||
this.code = e.code
|
||||
this.name = e.name
|
||||
this.value = e.value
|
||||
this.remark = e.remark
|
||||
if (!this.code || !this.name || !this.value) {
|
||||
this.unclick = true
|
||||
} else {
|
||||
this.unclick = false
|
||||
}
|
||||
this.pkObj = e
|
||||
break
|
||||
case '3':
|
||||
this.unclick = false
|
||||
this.pkObj = e
|
||||
break
|
||||
}
|
||||
this.hide()
|
||||
},
|
||||
toCancle () {
|
||||
this.hide()
|
||||
},
|
||||
toSureDialog (type) {
|
||||
switch (type) {
|
||||
case '1':
|
||||
this._paramAdd()
|
||||
break
|
||||
case '2':
|
||||
this._paramEdit()
|
||||
break
|
||||
case '3':
|
||||
this._paramDelete()
|
||||
break
|
||||
}
|
||||
},
|
||||
async _paramAdd () {
|
||||
this.$refs.child.disabled = true
|
||||
if (!this.code) {
|
||||
this.toast('编码不能为空')
|
||||
this.$refs.child.disabled = false
|
||||
return
|
||||
}
|
||||
if (!this.name) {
|
||||
this.toast('名字不能为空')
|
||||
this.$refs.child.disabled = false
|
||||
return
|
||||
}
|
||||
if (!this.value) {
|
||||
this.toast('数值不能为空')
|
||||
this.$refs.child.disabled = false
|
||||
return
|
||||
}
|
||||
try {
|
||||
let res = await paramAdd(this.code, this.name, this.value, this.remark)
|
||||
if (res.code === '1') {
|
||||
this._paramQuery()
|
||||
}
|
||||
this.toast(res.desc)
|
||||
this.$refs.child.active = false
|
||||
this.$refs.child.disabled = false
|
||||
} catch (e) {
|
||||
this.$refs.child.active = false
|
||||
this.$refs.child.disabled = false
|
||||
}
|
||||
},
|
||||
async _paramEdit () {
|
||||
this.$refs.child.disabled = true
|
||||
if (!this.code) {
|
||||
this.toast('编码不能为空')
|
||||
this.$refs.child.disabled = false
|
||||
return
|
||||
}
|
||||
if (!this.name) {
|
||||
this.toast('名字不能为空')
|
||||
this.$refs.child.disabled = false
|
||||
return
|
||||
}
|
||||
if (!this.value) {
|
||||
this.toast('数值不能为空')
|
||||
this.$refs.child.disabled = false
|
||||
return
|
||||
}
|
||||
try {
|
||||
let res = await paramEdit(this.pkObj.id, this.code, this.name, this.value, this.remark)
|
||||
if (res.code === '1') {
|
||||
this._paramQuery()
|
||||
}
|
||||
this.toast(res.desc)
|
||||
this.$refs.child.active = false
|
||||
this.$refs.child.disabled = false
|
||||
} catch (e) {
|
||||
this.$refs.child.active = false
|
||||
this.$refs.child.disabled = false
|
||||
}
|
||||
},
|
||||
async _paramDelete () {
|
||||
this.$refs.child.disabled = true
|
||||
try {
|
||||
let res = await paramDelete([this.pkObj.id])
|
||||
if (res.code === '1') {
|
||||
this._paramQuery()
|
||||
}
|
||||
this.toast(res.desc)
|
||||
this.$refs.child.active = false
|
||||
this.$refs.child.disabled = false
|
||||
} catch (e) {
|
||||
this.$refs.child.active = false
|
||||
this.$refs.child.disabled = false
|
||||
}
|
||||
},
|
||||
show (e) {
|
||||
this.input = e.target
|
||||
this.layout = e.target.dataset.layout
|
||||
if (!this.visible) {
|
||||
this.visible = true
|
||||
}
|
||||
},
|
||||
hide () {
|
||||
this.visible = false
|
||||
},
|
||||
accept () {
|
||||
this.hide()
|
||||
},
|
||||
next () {
|
||||
let inputs = document.querySelectorAll('input')
|
||||
let found = false;
|
||||
[].forEach.call(inputs, (item, i) => {
|
||||
if (!found && item === this.input && i < inputs.length - 1) {
|
||||
found = true
|
||||
this.$nextTick(() => {
|
||||
inputs[i + 1].focus()
|
||||
})
|
||||
}
|
||||
})
|
||||
if (!found) {
|
||||
this.input.blur()
|
||||
this.hide()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@style/mixin'
|
||||
.grid_wrapper
|
||||
height calc(100% - 50px)
|
||||
overflow-y auto
|
||||
</style>
|
||||
393
src/pages/modules/systemmanage/user.vue
Normal file
393
src/pages/modules/systemmanage/user.vue
Normal file
@@ -0,0 +1,393 @@
|
||||
<template>
|
||||
<div class="main-container">
|
||||
<div class="right_side">
|
||||
<div class="buttons_wrapper">
|
||||
<div class="row">
|
||||
<button class="button button--primary" @click="showDialog('1')">添加用户</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_wrapper">
|
||||
<table>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>用户名</th>
|
||||
<th>姓名</th>
|
||||
<th>电话</th>
|
||||
<th>性别</th>
|
||||
<th>创建日期</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
<tr v-for="(e, i) in datalist" :key="i">
|
||||
<td>{{i+1}}</td>
|
||||
<td>{{ e.username }}</td>
|
||||
<td>{{ e.personName }}</td>
|
||||
<td>{{ e.phone }}</td>
|
||||
<td>{{ e.gender }}</td>
|
||||
<td>{{ e.createTime }}</td>
|
||||
<td>
|
||||
<div class="row">
|
||||
<button class="button button--primary grid_button" @click="showDialog('2', e)">修改</button>
|
||||
<button class="button button--primary grid_button" @click="showDialog('3', e)">重置密码</button>
|
||||
<button class="button button--primary grid_button" @click="showDialog('4', e)">删除</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<jxDialog
|
||||
ref="child"
|
||||
:title="title"
|
||||
:type="type"
|
||||
:unclick="unclick"
|
||||
@toSure="toSureDialog"
|
||||
@toCancle="toCancle"
|
||||
>
|
||||
<div v-if="type === '1' || type === '2'" class="form_wraper">
|
||||
<div class="form">
|
||||
<div class="form_item">
|
||||
<div class="form_item__label"><i>*</i>用户名</div>
|
||||
<div class="form_item__content">
|
||||
<input type="text" class="form_item__input" v-model="username" @focus="show" data-layout="normal">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form_item">
|
||||
<div class="form_item__label">电话</div>
|
||||
<div class="form_item__content">
|
||||
<input type="text" class="form_item__input" v-model="phone" @focus="show" data-layout="numeric">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form">
|
||||
<div class="form_item">
|
||||
<div class="form_item__label">姓名</div>
|
||||
<div class="form_item__content">
|
||||
<input type="text" class="form_item__input" v-model="name" @focus="show" data-layout="normal">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form_item">
|
||||
<div class="form_item__label">性别</div>
|
||||
<div class="form_item__content">
|
||||
<div class="form_item__radio" v-for="(e, i) in sexArr" :key="i">
|
||||
<div class="radio__input" :class="{'icon_radio_checked': e.value === sex}" @click="toRadio(e)">
|
||||
<i class="icon_radio"></i>
|
||||
<input type="radio" class="radio__original" v-model="e.value">
|
||||
</div>
|
||||
<div class="radio__label">{{ e.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form">
|
||||
<div v-if="type === '1'" class="form_item">
|
||||
<div class="form_item__label"><i>*</i>密码</div>
|
||||
<div class="form_item__content">
|
||||
<input type="password" class="form_item__input" v-model="password" @focus="show" data-layout="normal">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form_item">
|
||||
<div class="form_item__label">角色</div>
|
||||
<div class="form_item__content">
|
||||
<el-select v-model="value" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.roleId"
|
||||
:label="item.name"
|
||||
:value="item.roleId">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="type === '3'" class="form_wraper">确定重置密码吗？</div>
|
||||
<div v-if="type === '4'" class="form_wraper">确定删除该用户吗？</div>
|
||||
</jxDialog>
|
||||
</div>
|
||||
<vue-touch-keyboard id="keyboard" :options="keyoptions" v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" :next="next" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import jxDialog from '@components/dialog.vue'
|
||||
import {usersQuery, sysRoleQuery, usersAdd, usersEdit, usersDelete} from '@config/getData2.js'
|
||||
import {encrypt} from '../../../main.js'
|
||||
export default {
|
||||
components: {
|
||||
jxDialog
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
datalist: [],
|
||||
active: false,
|
||||
type: '',
|
||||
title: '',
|
||||
username: '',
|
||||
phone: '',
|
||||
name: '',
|
||||
sexArr: [{label: '男', value: '男'}, {label: '女', value: '女'}],
|
||||
sex: '',
|
||||
password: '',
|
||||
options: [],
|
||||
value: '',
|
||||
disabled1: false,
|
||||
pkObj: {},
|
||||
unclick: false,
|
||||
visible: false,
|
||||
layout: 'normal',
|
||||
input: null,
|
||||
keyoptions: {
|
||||
useKbEvents: false,
|
||||
preventClickEvent: false
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
type (val) {
|
||||
switch (val) {
|
||||
case '1':
|
||||
this.title = '添加用户'
|
||||
break
|
||||
case '2':
|
||||
this.title = '修改用户'
|
||||
break
|
||||
case '3':
|
||||
this.title = ''
|
||||
break
|
||||
case '4':
|
||||
this.title = ''
|
||||
break
|
||||
default:
|
||||
this.title = ''
|
||||
}
|
||||
},
|
||||
username (val) {
|
||||
if (this.type === '1' && (this.password === '' || val === '')) {
|
||||
this.unclick = true
|
||||
} else if (this.type === '2' && val === '') {
|
||||
this.unclick = true
|
||||
} else {
|
||||
this.unclick = false
|
||||
}
|
||||
},
|
||||
password (val) {
|
||||
if (this.type === '1' && (this.password === '' || val === '')) {
|
||||
this.unclick = true
|
||||
} else {
|
||||
this.unclick = false
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this._usersQuery()
|
||||
this._sysRoleQuery()
|
||||
},
|
||||
methods: {
|
||||
async _usersQuery () {
|
||||
let res = await usersQuery('0', '100')
|
||||
this.datalist = [...res]
|
||||
},
|
||||
async _sysRoleQuery () {
|
||||
let res = await sysRoleQuery('0', '100')
|
||||
this.options = [...res]
|
||||
},
|
||||
showDialog (type, e) {
|
||||
this.type = type
|
||||
this.$refs.child.active = true
|
||||
switch (type) {
|
||||
case '1':
|
||||
this.username = ''
|
||||
this.phone = ''
|
||||
this.name = ''
|
||||
this.sex = ''
|
||||
this.password = ''
|
||||
this.value = ''
|
||||
this.unclick = true
|
||||
break
|
||||
case '2':
|
||||
this.pkObj = e
|
||||
this.username = e.username
|
||||
this.phone = e.phone
|
||||
this.name = e.personName
|
||||
this.sex = e.gender
|
||||
this.options.map(el => {
|
||||
if (el.roleId === e.roles[0].roleId) {
|
||||
this.value = el.roleId
|
||||
}
|
||||
})
|
||||
if (this.username === '') {
|
||||
this.unclick = true
|
||||
} else {
|
||||
this.unclick = false
|
||||
}
|
||||
break
|
||||
case '3':
|
||||
this.pkObj = e
|
||||
this.unclick = false
|
||||
break
|
||||
case '4':
|
||||
this.pkObj = e
|
||||
this.unclick = false
|
||||
break
|
||||
}
|
||||
},
|
||||
toSureDialog (type) {
|
||||
switch (type) {
|
||||
case '1':
|
||||
this._usersAdd()
|
||||
break
|
||||
case '2':
|
||||
this._usersEdit()
|
||||
break
|
||||
case '3':
|
||||
this.resetPassword()
|
||||
break
|
||||
case '4':
|
||||
this._usersDelete()
|
||||
break
|
||||
}
|
||||
this.hide()
|
||||
},
|
||||
toCancle () {
|
||||
this.hide()
|
||||
},
|
||||
toRadio (e) {
|
||||
this.sex = e.value
|
||||
},
|
||||
async _usersAdd () {
|
||||
this.$refs.child.disabled = true
|
||||
if (!this.username) {
|
||||
this.toast('用户名不能为空')
|
||||
this.$refs.child.disabled = false
|
||||
return
|
||||
}
|
||||
if (!this.password) {
|
||||
this.toast('密码不能为空')
|
||||
this.$refs.child.disabled = false
|
||||
return
|
||||
}
|
||||
try {
|
||||
let rolesIds = []
|
||||
this.options.map(el => {
|
||||
if (el.roleId === this.value) {
|
||||
rolesIds.push(el)
|
||||
}
|
||||
})
|
||||
let res = await usersAdd(this.username, this.name, this.sex, this.phone, rolesIds, encrypt(this.password))
|
||||
if (res.code === '1') {
|
||||
this._usersQuery()
|
||||
}
|
||||
this.toast(res.desc)
|
||||
this.$refs.child.active = false
|
||||
this.$refs.child.disabled = false
|
||||
} catch (e) {
|
||||
this.$refs.child.active = false
|
||||
this.$refs.child.disabled = false
|
||||
}
|
||||
},
|
||||
async _usersEdit () {
|
||||
this.$refs.child.disabled = true
|
||||
if (!this.username) {
|
||||
this.toast('用户名不能为空')
|
||||
this.$refs.child.disabled = false
|
||||
return
|
||||
}
|
||||
try {
|
||||
let rolesIds = []
|
||||
this.options.map(el => {
|
||||
if (el.roleId === this.value) {
|
||||
rolesIds.push(el)
|
||||
}
|
||||
})
|
||||
let obj = {
|
||||
userId: this.pkObj.userId,
|
||||
username: this.username,
|
||||
personName: this.name,
|
||||
gender: this.sex,
|
||||
phone: this.phone,
|
||||
rolesIds: rolesIds
|
||||
}
|
||||
let res = await usersEdit(obj)
|
||||
if (res.code === '1') {
|
||||
this._usersQuery()
|
||||
}
|
||||
this.toast(res.desc)
|
||||
this.$refs.child.active = false
|
||||
this.$refs.child.disabled = false
|
||||
} catch (e) {
|
||||
this.$refs.child.active = false
|
||||
this.$refs.child.disabled = false
|
||||
}
|
||||
},
|
||||
async resetPassword () {
|
||||
this.$refs.child.disabled = true
|
||||
try {
|
||||
let obj = {
|
||||
userId: this.pkObj.userId,
|
||||
password: '123456'
|
||||
}
|
||||
let res = await usersEdit(obj)
|
||||
if (res.code === '1') {
|
||||
this._usersQuery()
|
||||
}
|
||||
this.toast(res.desc)
|
||||
this.$refs.child.active = false
|
||||
this.$refs.child.disabled = false
|
||||
} catch (e) {
|
||||
this.$refs.child.active = false
|
||||
this.$refs.child.disabled = false
|
||||
}
|
||||
},
|
||||
async _usersDelete () {
|
||||
this.$refs.child.disabled = true
|
||||
try {
|
||||
let res = await usersDelete([this.pkObj.userId])
|
||||
if (res.code === '1') {
|
||||
this._usersQuery()
|
||||
}
|
||||
this.toast(res.desc)
|
||||
this.$refs.child.active = false
|
||||
this.$refs.child.disabled = false
|
||||
} catch (e) {
|
||||
this.$refs.child.active = false
|
||||
this.$refs.child.disabled = false
|
||||
}
|
||||
},
|
||||
show (e) {
|
||||
this.input = e.target
|
||||
this.layout = e.target.dataset.layout
|
||||
if (!this.visible) {
|
||||
this.visible = true
|
||||
}
|
||||
},
|
||||
hide () {
|
||||
this.visible = false
|
||||
},
|
||||
accept () {
|
||||
this.hide()
|
||||
},
|
||||
next () {
|
||||
let inputs = document.querySelectorAll('input')
|
||||
let found = false;
|
||||
[].forEach.call(inputs, (item, i) => {
|
||||
if (!found && item === this.input && i < inputs.length - 1) {
|
||||
found = true
|
||||
this.$nextTick(() => {
|
||||
inputs[i + 1].focus()
|
||||
})
|
||||
}
|
||||
})
|
||||
if (!found) {
|
||||
this.input.blur()
|
||||
this.hide()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@style/mixin'
|
||||
.grid_wrapper
|
||||
height calc(100% - 70px)
|
||||
overflow-y auto
|
||||
</style>
|
||||
Reference in New Issue
Block a user