26 changed files with 681 additions and 95 deletions
@ -1,14 +1,157 @@
@@ -1,14 +1,157 @@
|
||||
<template> |
||||
<SearchRow :title="t('role.title')" :del="false" :query="false" @query="query" @add="addRole"></SearchRow> |
||||
<ListTable @query="query" :props="props" :example="example" :data="result"> |
||||
<template #action="{ row }"> |
||||
<TableAction v-if="row.roleStatus == 'E'" @modify="modify(row)" @del="delate(row)"> |
||||
<el-tooltip effect="dark" :content="t('role.setPer.0')" placement="right"> |
||||
<el-button :size="state.size.size" type="success" @click="permission(row)" icon="Setting" circle /> |
||||
</el-tooltip> |
||||
</TableAction> |
||||
</template> |
||||
</ListTable> |
||||
|
||||
<el-dialog :title="t('base.add') + t('role.name')" v-model="flag.modify" :close-on-click-modal="false" top="15vh" |
||||
width="40%" @keydown.enter.native="confirm"> |
||||
<ModifyForm ref="form" :param="role" :rules="rules" :items="items" @confirm="confirm" :width="100" |
||||
@cancel="flag.modify = false"> |
||||
<template #roleCode> |
||||
<NoobInput v-model="role.roleCode" full :placeholder="t('rule.pleaseEnter') + t('role.prop.0')" |
||||
:disabled="!flag.add" /> |
||||
</template> |
||||
</ModifyForm> |
||||
</el-dialog> |
||||
|
||||
<el-dialog :title="t('role.setPer.0')" v-model="flag.per" :close-on-click-modal="false" top="15vh" width="40%" |
||||
@keydown.enter.native="setPermission"> |
||||
<el-tree :size="state.size.size" ref="permissionTree" check-strictly :data="permissions" show-checkbox node-key="id" |
||||
:default-checked-keys="role.permissions" :props="{ children: 'children', label: 'name' }" render-after-expand |
||||
@check-change="checkChange" class="permissionTree" /> |
||||
|
||||
<div slot="footer" class="dialog-footer"> |
||||
<NoobButton type="primary" @click="setPermission">{{ t('base.confirm') }}</NoobButton> |
||||
<NoobButton type="info" @click="flag.per = false">{{ t('base.cancel') }}</NoobButton> |
||||
</div> |
||||
</el-dialog> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { useStore } from "vuex"; |
||||
import { reactive, onMounted, ref } from "vue"; |
||||
import { Api, ListTable, SearchRow, NoobInput, TableAction, NoobTag, NoobButton, ModifyForm, Element } from "noob-mengyxu"; |
||||
import { useI18n } from "vue3-i18n"; |
||||
const { t } = useI18n(); |
||||
|
||||
const { state, commit, dispatch } = useStore(); |
||||
const { list, add, set, del } = Api.role; |
||||
const { tree } = Api.permission; |
||||
const { SimpleRequired, SimpleCharacter } = Element; |
||||
|
||||
const result = ref([]); |
||||
const example = reactive<any>({}); |
||||
const flag = reactive({ |
||||
modify: false, |
||||
add: false, |
||||
per: false |
||||
}) |
||||
const form = ref(); |
||||
const permissionTree = ref(); |
||||
const role = ref<any>({}); |
||||
const permissions = ref<any>([]); |
||||
|
||||
const props = [ |
||||
{ i18n: 'role.prop.0', code: 'roleCode', width: 120 }, |
||||
{ i18n: 'role.prop.1', code: 'roleName', width: 120 }, |
||||
{ i18n: 'role.prop.2', code: 'roleDesc', width: 180 }, |
||||
{ i18n: 'role.prop.3', code: 'roleStatus', dict: 'role_status', width: 180 }, |
||||
{ i18n: 'role.prop.4', code: 'action', slot: true, width: 180, fixed: 'right' } |
||||
] |
||||
|
||||
const rules = { |
||||
roleCode: [new SimpleRequired('role.prop.0'), new SimpleCharacter(32, 4)], |
||||
roleName: [new SimpleRequired('role.prop.1'), new SimpleCharacter(15, 2)], |
||||
roleDesc: [new SimpleRequired('role.prop.2'), new SimpleCharacter(100)], |
||||
} |
||||
|
||||
const items = [ |
||||
{ i18n: 'role.prop.0', code: 'roleCode', slot: true }, |
||||
{ i18n: 'role.prop.1', code: 'roleName' }, |
||||
{ i18n: 'role.prop.2', code: 'roleDesc' } |
||||
] |
||||
|
||||
const query = () => { |
||||
list(example).then((rsp: any) => result.value = rsp) |
||||
} |
||||
|
||||
const addRole = () => { |
||||
role.value = {}; |
||||
form.value?.clearValidate(); |
||||
flag.add = true; |
||||
flag.modify = true; |
||||
} |
||||
|
||||
const modify = row => { |
||||
role.value = JSON.parse(JSON.stringify(row)) |
||||
form.value?.clearValidate(); |
||||
flag.add = false; |
||||
flag.modify = true; |
||||
} |
||||
|
||||
const delate = row => { |
||||
Element.confirm(t('role.delete.0'), t('role.delete.1')).then(() => { |
||||
del(row).then(() => { |
||||
commit('updateState', ['roleRefresh', true]); |
||||
query(); |
||||
}); |
||||
}) |
||||
} |
||||
|
||||
const confirm = () => { |
||||
const api = flag.add ? add : set; |
||||
api(role.value).then(rsp => { |
||||
if (rsp) { |
||||
query(); |
||||
flag.modify = false; |
||||
commit('updateState', ['roleRefresh', true]); |
||||
} |
||||
}) |
||||
} |
||||
|
||||
const permission = (row) => { |
||||
role.value = JSON.parse(JSON.stringify(row)) |
||||
role.value.flag = true; |
||||
permissionTree.value?.setCheckedNodes(role.value.permissions) |
||||
flag.per = true; |
||||
} |
||||
|
||||
const setPermission = () => { |
||||
role.value.permissions = permissionTree.value?.getCheckedKeys(); |
||||
set(role.value).then(rsp => { |
||||
if (rsp) { |
||||
query(); |
||||
flag.per = false; |
||||
} |
||||
}) |
||||
} |
||||
|
||||
const checkChange = (data, checked) => { |
||||
const child = permissionTree.value?.getNode(data).childNodes |
||||
if (child != null && child.length > 0) { |
||||
for (let i = 0; i < child.length; i++) { |
||||
child[i].checked = checked |
||||
checkChange(data.children[i], checked) |
||||
} |
||||
} |
||||
} |
||||
|
||||
onMounted(() => {}); |
||||
onMounted(() => { |
||||
query(); |
||||
tree().then(rsp => permissions.value = rsp); |
||||
dispatch("getDictMap", ["role_status"]); |
||||
}); |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
//@import url(); 引入公共css类 |
||||
.permissionTree { |
||||
min-height: 500px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,134 @@
@@ -0,0 +1,134 @@
|
||||
<template> |
||||
<SearchRow :title="t('user.title')" :del="false" :query="false" @query="query" @add="addUser"></SearchRow> |
||||
|
||||
<ListTable @query="query" :props="props" :example="example" :page="true" :data="result"> |
||||
<template #action="{ row }"> |
||||
<TableAction v-if="row.status == 'E'" @modify="modify(row)" @del="delate(row)"> |
||||
<el-tooltip effect="dark" :content="t('user.reset.0')" placement="right"> |
||||
<el-button :size="state.size.size" type="success" @click="resetPass(row)" icon="RefreshLeft" circle /> |
||||
</el-tooltip> |
||||
</TableAction> |
||||
</template> |
||||
</ListTable> |
||||
|
||||
<el-dialog :title="t('base.add') + t('user.name')" v-model="flag.modify" :close-on-click-modal="false" top="15vh" |
||||
width="40%" @keydown.enter.native="confirm"> |
||||
<ModifyForm ref="form" :param="user" :rules="rules" :items="items" @confirm="confirm" :width="100" |
||||
@cancel="flag.modify = false" :modify="!flag.add"> |
||||
<template #userId> |
||||
<NoobInput v-model="user.userId" full :placeholder="t('rule.pleaseEnter') + t('user.prop.0')" |
||||
:disabled="!flag.add" /> |
||||
</template> |
||||
<template #password> |
||||
<NoobInput v-model="user.password" :placeholder="t('rule.pleaseEnter') + t('user.prop.1')" type="password" |
||||
full v-if="flag.add" /> |
||||
</template> |
||||
<template #roles> |
||||
<el-select :size="state.size.size" class="form-item full" v-model="user.roles" |
||||
:placeholder="t('rule.pleaseSelect') + t('user.prop.2')" clearable multiple> |
||||
<el-option v-for="item in state.roles" :key="item.key" :value="item.key" :label="item.value" /> |
||||
</el-select> |
||||
</template> |
||||
</ModifyForm> |
||||
</el-dialog> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { useStore } from "vuex"; |
||||
import { reactive, onMounted, ref } from "vue"; |
||||
import { Api, ListTable, SearchRow, NoobInput, TableAction, NoobSelect, NoobButton, ModifyForm, Element, PageResult, PageExample } from "noob-mengyxu"; |
||||
import md5 from "js-md5"; |
||||
import { useI18n } from "vue3-i18n"; |
||||
const { t } = useI18n(); |
||||
|
||||
const { state, commit, dispatch } = useStore(); |
||||
const { list, add, set, del, reset } = Api.user; |
||||
const { SimpleRequired, Password, Username, Name, IdCard, Phone, Email } = Element; |
||||
|
||||
const result = ref(new PageResult()); |
||||
const example = reactive<any>(new PageExample()); |
||||
const flag = reactive({ |
||||
modify: false, |
||||
add: false |
||||
}) |
||||
const form = ref(); |
||||
const user = ref<any>({}); |
||||
|
||||
const props = [ |
||||
{ i18n: 'user.prop.0', code: 'userId', width: 120 }, |
||||
{ i18n: 'user.prop.3', code: 'name', width: 120 }, |
||||
{ i18n: 'user.prop.4', code: 'phone', width: 180 }, |
||||
{ i18n: 'user.prop.5', code: 'idCard', width: 180 }, |
||||
{ i18n: 'user.prop.6', code: 'email', width: 180 }, |
||||
{ i18n: 'user.prop.7', code: 'action', slot: true, width: 180, fixed: 'right' } |
||||
] |
||||
|
||||
const rules = { |
||||
userId: [new Username()], |
||||
password: [new Password()], |
||||
roles: [new SimpleRequired('user.prop.2')], |
||||
name: [new SimpleRequired('user.prop.3'), new Name()], |
||||
idCard: [new IdCard()], |
||||
phone: [new Phone()], |
||||
email: [new Email()], |
||||
} |
||||
|
||||
const items = [ |
||||
{ i18n: 'user.prop.0', code: 'userId', slot: true }, |
||||
{ i18n: 'user.prop.1', code: 'password', type: 'password', noModify: true }, |
||||
{ i18n: 'user.prop.2', code: 'roles', slot: true }, |
||||
{ i18n: 'user.prop.3', code: 'name' }, |
||||
{ i18n: 'user.prop.4', code: 'phone' }, |
||||
{ i18n: 'user.prop.5', code: 'idCard' }, |
||||
{ i18n: 'user.prop.6', code: 'email' }, |
||||
] |
||||
|
||||
const query = () => { |
||||
list(example).then((rsp: any) => result.value = rsp) |
||||
} |
||||
|
||||
const addUser = () => { |
||||
user.value = {}; |
||||
form.value?.clearValidate(); |
||||
flag.add = true; |
||||
flag.modify = true; |
||||
} |
||||
|
||||
const modify = row => { |
||||
user.value = JSON.parse(JSON.stringify(row)) |
||||
form.value?.clearValidate(); |
||||
flag.add = false; |
||||
flag.modify = true; |
||||
} |
||||
|
||||
const delate = row => { |
||||
Element.confirm(t('user.delete.0'), t('user.delete.1')).then(() => { |
||||
del(row).then(query); |
||||
}) |
||||
} |
||||
|
||||
const resetPass = row => { |
||||
Element.confirm(t('user.reset.1'), t('user.reset.2')).then(() => { |
||||
reset(row); |
||||
}) |
||||
} |
||||
|
||||
const confirm = () => { |
||||
const api = flag.add ? add : set; |
||||
user.value.password && (user.value.password = md5(user.value.password)); |
||||
api(user.value).then(rsp => { |
||||
if (rsp) { |
||||
query(); |
||||
flag.modify = false; |
||||
} |
||||
}) |
||||
} |
||||
|
||||
onMounted(() => { |
||||
query(); |
||||
dispatch("getRoleMap"); |
||||
}); |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
//@import url(); 引入公共css类 |
||||
</style> |
||||
@ -1,5 +1,7 @@
@@ -1,5 +1,7 @@
|
||||
export * as dictionary from './dictionary'; |
||||
export * as log from './log'; |
||||
export * as permission from './permission'; |
||||
export * as role from './role'; |
||||
export * as user from './user'; |
||||
export * as buffer from './buffer'; |
||||
export * as pub from './public'; |
||||
|
||||
@ -0,0 +1,88 @@
@@ -0,0 +1,88 @@
|
||||
import { get, post, put, delate } from '../http/axios'; |
||||
const root = 'role'; |
||||
const publik = 'public/roles'; |
||||
|
||||
export const list = (example) => { |
||||
return new Promise((resolve, reject) => { |
||||
get(root, example).then( |
||||
(rsp: any) => { |
||||
if (rsp) { |
||||
resolve(rsp); |
||||
} else { |
||||
resolve([]); |
||||
} |
||||
}, |
||||
(err) => { |
||||
resolve([]); |
||||
} |
||||
); |
||||
}); |
||||
}; |
||||
|
||||
export const mapping = () => { |
||||
return new Promise((resolve, reject) => { |
||||
get(publik).then( |
||||
(rsp: any) => { |
||||
if (rsp) { |
||||
resolve(rsp); |
||||
} else { |
||||
resolve([]); |
||||
} |
||||
}, |
||||
(err) => { |
||||
resolve([]); |
||||
} |
||||
); |
||||
}); |
||||
}; |
||||
|
||||
export const add = (role) => { |
||||
return new Promise((resolve, reject) => { |
||||
post(root, role).then( |
||||
(rsp: any) => { |
||||
if (rsp) { |
||||
resolve(rsp); |
||||
} else { |
||||
resolve(false); |
||||
} |
||||
}, |
||||
(err) => { |
||||
resolve(false); |
||||
} |
||||
); |
||||
}); |
||||
}; |
||||
|
||||
export const set = (role) => { |
||||
return new Promise((resolve, reject) => { |
||||
put(root, role).then( |
||||
(rsp: any) => { |
||||
if (rsp) { |
||||
resolve(rsp); |
||||
} else { |
||||
resolve(false); |
||||
} |
||||
}, |
||||
(err) => { |
||||
resolve(false); |
||||
} |
||||
); |
||||
}); |
||||
}; |
||||
|
||||
export const del = (role) => { |
||||
return new Promise((resolve, reject) => { |
||||
delate(root + '/' + role.roleCode).then( |
||||
(rsp: any) => { |
||||
if (rsp) { |
||||
resolve(rsp); |
||||
} else { |
||||
resolve(false); |
||||
} |
||||
}, |
||||
(err) => { |
||||
resolve(false); |
||||
} |
||||
); |
||||
}); |
||||
}; |
||||
@ -0,0 +1,87 @@
@@ -0,0 +1,87 @@
|
||||
import { get, post, put, delate } from '../http/axios'; |
||||
const root = 'user'; |
||||
|
||||
export const list = (example) => { |
||||
return new Promise((resolve, reject) => { |
||||
get(root, example).then( |
||||
(rsp: any) => { |
||||
if (rsp) { |
||||
resolve(rsp); |
||||
} else { |
||||
resolve([]); |
||||
} |
||||
}, |
||||
(err) => { |
||||
resolve([]); |
||||
} |
||||
); |
||||
}); |
||||
}; |
||||
|
||||
export const add = (user) => { |
||||
return new Promise((resolve, reject) => { |
||||
post(root, user).then( |
||||
(rsp: any) => { |
||||
if (rsp) { |
||||
resolve(rsp); |
||||
} else { |
||||
resolve(false); |
||||
} |
||||
}, |
||||
(err) => { |
||||
resolve(false); |
||||
} |
||||
); |
||||
}); |
||||
}; |
||||
|
||||
export const set = (user) => { |
||||
return new Promise((resolve, reject) => { |
||||
put(root, user).then( |
||||
(rsp: any) => { |
||||
if (rsp) { |
||||
resolve(rsp); |
||||
} else { |
||||
resolve(false); |
||||
} |
||||
}, |
||||
(err) => { |
||||
resolve(false); |
||||
} |
||||
); |
||||
}); |
||||
}; |
||||
|
||||
export const del = (user) => { |
||||
return new Promise((resolve, reject) => { |
||||
delate(root + '/' + user.userId).then( |
||||
(rsp: any) => { |
||||
if (rsp) { |
||||
resolve(rsp); |
||||
} else { |
||||
resolve(false); |
||||
} |
||||
}, |
||||
(err) => { |
||||
resolve(false); |
||||
} |
||||
); |
||||
}); |
||||
}; |
||||
|
||||
export const reset = (user) => { |
||||
return new Promise((resolve, reject) => { |
||||
put(root + '/' + user.userId).then( |
||||
(rsp: any) => { |
||||
if (rsp) { |
||||
resolve(rsp); |
||||
} else { |
||||
resolve(false); |
||||
} |
||||
}, |
||||
(err) => { |
||||
resolve(false); |
||||
} |
||||
); |
||||
}); |
||||
}; |
||||
Loading…
Reference in new issue