parent
29d34de052
commit
978570f1e0
13 changed files with 100 additions and 954 deletions
@ -1,49 +0,0 @@ |
|||||||
<template> |
|
||||||
<dialog-form |
|
||||||
:name="$t('menu.user.group')" |
|
||||||
:queryBean="queryGroup" |
|
||||||
:createBean="createGroup" |
|
||||||
:updateBean="updateGroup" |
|
||||||
:deleteBean="deleteGroup" |
|
||||||
:beanId="beanId" |
|
||||||
:beanIds="beanIds" |
|
||||||
:focus="focus" |
|
||||||
:initValues="() => ({ type: 2 })" |
|
||||||
:toValues="(bean) => ({ ...bean })" |
|
||||||
:disableDelete="(bean) => bean.id <= 10" |
|
||||||
perms="group" |
|
||||||
:model-value="modelValue" |
|
||||||
@update:model-value="$emit('update:modelValue', $event)" |
|
||||||
@finished="$emit('finished')" |
|
||||||
> |
|
||||||
<template #default="{ values }"> |
|
||||||
<el-form-item prop="name" :label="$t('group.name')" :rules="{ required: true, message: () => $t('v.required') }"> |
|
||||||
<el-input v-model="values.name" ref="focus" maxlength="50"></el-input> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item prop="description" :label="$t('group.description')"> |
|
||||||
<el-input v-model="values.description" maxlength="255"></el-input> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item prop="type" :label="$t('group.type')" :rules="{ required: true, message: () => $t('v.required') }"> |
|
||||||
<el-select v-model="values.type" :disabled="values.type === 1"> |
|
||||||
<el-option v-for="n in [1, 2]" :key="n" :disabled="n === 1" :label="$t(`group.type.${n}`)" :value="n"></el-option> |
|
||||||
</el-select> |
|
||||||
</el-form-item> |
|
||||||
</template> |
|
||||||
</dialog-form> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script lang="ts"> |
|
||||||
import { defineComponent, ref } from 'vue'; |
|
||||||
import { queryGroup, createGroup, updateGroup, deleteGroup } from '@/api/user'; |
|
||||||
import DialogForm from '@/components/DialogForm.vue'; |
|
||||||
|
|
||||||
export default defineComponent({ |
|
||||||
components: { DialogForm }, |
|
||||||
props: { modelValue: { type: Boolean, required: true }, beanId: { required: true }, beanIds: { type: Array, required: true } }, |
|
||||||
emits: { 'update:modelValue': null, finished: null }, |
|
||||||
setup() { |
|
||||||
const focus = ref<any>(); |
|
||||||
return { queryGroup, createGroup, updateGroup, deleteGroup, focus }; |
|
||||||
}, |
|
||||||
}); |
|
||||||
</script> |
|
||||||
@ -1,158 +0,0 @@ |
|||||||
<template> |
|
||||||
<div> |
|
||||||
<div class="mb-3"> |
|
||||||
<query-form :params="params" |
|
||||||
@search="handleSearch" |
|
||||||
@reset="handleReset"> |
|
||||||
<query-item :label="$t('group.name')" |
|
||||||
name="Q_Contains_name"></query-item> |
|
||||||
<query-item :label="$t('group.description')" |
|
||||||
name="Q_Contains_description"></query-item> |
|
||||||
</query-form> |
|
||||||
</div> |
|
||||||
<div> |
|
||||||
<el-button type="primary" |
|
||||||
:disabled="perm('group:create')" |
|
||||||
:icon="Plus" |
|
||||||
@click="handleAdd">{{ $t('add') }}</el-button> |
|
||||||
<el-popconfirm :title="$t('confirmDelete')" |
|
||||||
@confirm="handleDelete(selection.map((row) => row.id))"> |
|
||||||
<template #reference> |
|
||||||
<el-button :disabled="selection.filter((row) => deletable(row.id)).length <= 0 || perm('group:delete')" |
|
||||||
:icon="Delete">{{ $t('delete') }}</el-button> |
|
||||||
</template> |
|
||||||
</el-popconfirm> |
|
||||||
<list-move class="ml-2" |
|
||||||
:disabled="selection.length <= 0 || filtered || perm('org:update')" |
|
||||||
@move="(type) => move(selection, type)" /> |
|
||||||
<column-setting name="group" |
|
||||||
class="ml-2" /> |
|
||||||
</div> |
|
||||||
<div class="block mt-3"> |
|
||||||
<el-table ref="table" |
|
||||||
v-loading="loading" |
|
||||||
:data="data" |
|
||||||
@selection-change="(rows) => (selection = rows)" |
|
||||||
@row-dblclick="(row) => handleEdit(row.id)" |
|
||||||
@sort-change="handleSort"> |
|
||||||
<column-list name="group"> |
|
||||||
<el-table-column type="selection" |
|
||||||
width="50"></el-table-column> |
|
||||||
<el-table-column property="id" |
|
||||||
label="ID" |
|
||||||
width="64" |
|
||||||
sortable="custom"></el-table-column> |
|
||||||
<el-table-column property="name" |
|
||||||
:label="$t('group.name')" |
|
||||||
sortable="custom" |
|
||||||
show-overflow-tooltip></el-table-column> |
|
||||||
<el-table-column property="description" |
|
||||||
:label="$t('group.description')" |
|
||||||
min-width="150" |
|
||||||
sortable="custom" |
|
||||||
show-overflow-tooltip></el-table-column> |
|
||||||
<el-table-column property="type" |
|
||||||
:label="$t('group.type')" |
|
||||||
sortable="custom" |
|
||||||
show-overflow-tooltip |
|
||||||
:formatter="(row) => $t(`group.type.${row.type}`)" /> |
|
||||||
<el-table-column :label="$t('table.action')"> |
|
||||||
<template #default="{ row }"> |
|
||||||
<el-button type="text" |
|
||||||
:disabled="perm('group:update')" |
|
||||||
@click="handleEdit(row.id)" |
|
||||||
size="small">{{ $t('edit') }}</el-button> |
|
||||||
<el-popconfirm :title="$t('confirmDelete')" |
|
||||||
@confirm="handleDelete([row.id])"> |
|
||||||
<template #reference> |
|
||||||
<el-button type="text" |
|
||||||
:disabled="!deletable(row.id) || perm('group:delete')" |
|
||||||
size="small">{{ $t('delete') }}</el-button> |
|
||||||
</template> |
|
||||||
</el-popconfirm> |
|
||||||
</template> |
|
||||||
</el-table-column> |
|
||||||
</column-list> |
|
||||||
</el-table> |
|
||||||
</div> |
|
||||||
<group-form v-model="formVisible" |
|
||||||
:beanId="beanId" |
|
||||||
:beanIds="beanIds" |
|
||||||
@finished="fetchData" /> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script setup lang="ts"> |
|
||||||
import { computed, onMounted, ref } from 'vue'; |
|
||||||
import { ElMessage } from 'element-plus'; |
|
||||||
import { Plus, Delete } from '@element-plus/icons-vue'; |
|
||||||
import { useI18n } from 'vue-i18n'; |
|
||||||
import { perm } from '@/store/useCurrentUser'; |
|
||||||
import { moveList, toParams, resetParams } from '@/utils/common'; |
|
||||||
import { deleteGroup, queryGroupList, updateGroupOrder } from '@/api/user'; |
|
||||||
import { ColumnList, ColumnSetting } from '@/components/TableList'; |
|
||||||
import { QueryForm, QueryItem } from '@/components/QueryForm'; |
|
||||||
import ListMove from '@/components/ListMove.vue'; |
|
||||||
import GroupForm from './GroupForm.vue'; |
|
||||||
|
|
||||||
const { t } = useI18n(); |
|
||||||
const params = ref<any>({}); |
|
||||||
const sort = ref<any>(); |
|
||||||
const table = ref<any>(); |
|
||||||
const data = ref<any[]>([]); |
|
||||||
const selection = ref<any[]>([]); |
|
||||||
const loading = ref<boolean>(false); |
|
||||||
const formVisible = ref<boolean>(false); |
|
||||||
const beanId = ref<number>(); |
|
||||||
const beanIds = computed(() => data.value.map((row) => row.id)); |
|
||||||
const filtered = ref<boolean>(false); |
|
||||||
const fetchData = async () => { |
|
||||||
loading.value = true; |
|
||||||
try { |
|
||||||
data.value = await queryGroupList({ ...toParams(params.value), Q_OrderBy: sort.value }); |
|
||||||
filtered.value = Object.values(params.value).filter((v) => v !== undefined && v !== '').length > 0 || sort.value !== undefined; |
|
||||||
} finally { |
|
||||||
loading.value = false; |
|
||||||
} |
|
||||||
}; |
|
||||||
onMounted(fetchData); |
|
||||||
|
|
||||||
const handleSort = ({ column, prop, order }: { column: any; prop: string; order: string }) => { |
|
||||||
if (prop) { |
|
||||||
sort.value = (column.sortBy ?? prop) + (order === 'descending' ? '_desc' : ''); |
|
||||||
} else { |
|
||||||
sort.value = undefined; |
|
||||||
} |
|
||||||
fetchData(); |
|
||||||
}; |
|
||||||
const handleSearch = () => fetchData(); |
|
||||||
const handleReset = () => { |
|
||||||
table.value.clearSort(); |
|
||||||
resetParams(params.value); |
|
||||||
sort.value = undefined; |
|
||||||
fetchData(); |
|
||||||
}; |
|
||||||
|
|
||||||
const handleAdd = () => { |
|
||||||
beanId.value = undefined; |
|
||||||
formVisible.value = true; |
|
||||||
}; |
|
||||||
const handleEdit = (id: number) => { |
|
||||||
beanId.value = id; |
|
||||||
formVisible.value = true; |
|
||||||
}; |
|
||||||
const deletable = (id: number) => id > 10; |
|
||||||
const handleDelete = async (ids: number[]) => { |
|
||||||
const deletableIds = ids.filter((id) => deletable(id)); |
|
||||||
if (deletableIds.length > 0) { |
|
||||||
await deleteGroup(deletableIds); |
|
||||||
fetchData(); |
|
||||||
ElMessage.success(t('success')); |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
const move = async (selected: any[], type: 'top' | 'up' | 'down' | 'bottom') => { |
|
||||||
const list = moveList(selected, data.value, type); |
|
||||||
await updateGroupOrder(list.map((item: any) => item.id)); |
|
||||||
}; |
|
||||||
</script> |
|
||||||
@ -1,66 +0,0 @@ |
|||||||
<template> |
|
||||||
<dialog-form ref="form" |
|
||||||
:name="$t('menu.user.role')" |
|
||||||
:queryBean="queryRole" |
|
||||||
:createBean="createRole" |
|
||||||
:updateBean="updateRole" |
|
||||||
:deleteBean="deleteRole" |
|
||||||
:beanId="beanId" |
|
||||||
:beanIds="beanIds" |
|
||||||
:focus="focus" |
|
||||||
:initValues="() => ({})" |
|
||||||
:toValues="(bean) => ({ ...bean })" |
|
||||||
:disableDelete="(bean) => bean.id <= 1" |
|
||||||
perms="role" |
|
||||||
:model-value="modelValue" |
|
||||||
@update:model-value="$emit('update:modelValue', $event)" |
|
||||||
@finished="$emit('finished')" |
|
||||||
@beanChange="(bean) => tree?.setCheckedKeys(bean.permission?.split(',') ?? [])" |
|
||||||
@beforeSubmit=" |
|
||||||
(values) => |
|
||||||
(values.permission = [...tree.getHalfCheckedNodes(), ...tree.getCheckedNodes()] |
|
||||||
.filter((item) => item.perms) |
|
||||||
.map((item) => item.perms?.join(',')) |
|
||||||
.join(',')) |
|
||||||
"> |
|
||||||
<template #default="{ values }"> |
|
||||||
<el-form-item prop="name" |
|
||||||
:label="$t('role.name')" |
|
||||||
:rules="{ required: true, message: () => $t('v.required') }"> |
|
||||||
<el-input v-model="values.name" |
|
||||||
ref="focus" |
|
||||||
maxlength="50"></el-input> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item prop="description" |
|
||||||
:label="$t('role.description')"> |
|
||||||
<el-input v-model="values.description" |
|
||||||
maxlength="255"></el-input> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item prop="permission" |
|
||||||
:label="$t('role.permission')"> |
|
||||||
<el-tree ref="tree" |
|
||||||
:data="perms" |
|
||||||
node-key="key" |
|
||||||
@check="form.setUnsaved(true)" |
|
||||||
show-checkbox |
|
||||||
default-expand-all |
|
||||||
check-on-click-node /> |
|
||||||
</el-form-item> |
|
||||||
</template> |
|
||||||
</dialog-form> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script setup lang="ts"> |
|
||||||
import { ref } from 'vue'; |
|
||||||
import { queryRole, createRole, updateRole, deleteRole } from '@/api/user'; |
|
||||||
import { getPermsTreeData } from '@/data'; |
|
||||||
import DialogForm from '@/components/DialogForm.vue'; |
|
||||||
|
|
||||||
defineProps({ modelValue: { type: Boolean, required: true }, beanId: { required: true }, beanIds: { type: Array, required: true } }); |
|
||||||
defineEmits({ 'update:modelValue': null, finished: null }); |
|
||||||
|
|
||||||
const focus = ref<any>(); |
|
||||||
const tree = ref<any>(); |
|
||||||
const form = ref<any>(); |
|
||||||
const perms = getPermsTreeData(); |
|
||||||
</script> |
|
||||||
@ -1,117 +0,0 @@ |
|||||||
<template> |
|
||||||
<div> |
|
||||||
<div class="mb-3"> |
|
||||||
<query-form :params="params" @search="handleSearch" @reset="handleReset"> |
|
||||||
<query-item :label="$t('role.name')" name="Q_Contains_name"></query-item> |
|
||||||
<query-item :label="$t('role.description')" name="Q_Contains_description"></query-item> |
|
||||||
</query-form> |
|
||||||
</div> |
|
||||||
<div> |
|
||||||
<el-button type="primary" :icon="Plus" @click="handleAdd">{{ $t('add') }}</el-button> |
|
||||||
<el-popconfirm :title="$t('confirmDelete')" @confirm="handleDelete(selection.map((row) => row.id))"> |
|
||||||
<template #reference> |
|
||||||
<el-button :disabled="selection.length <= 0" :icon="Delete">{{ $t('delete') }}</el-button> |
|
||||||
</template> |
|
||||||
</el-popconfirm> |
|
||||||
<list-move class="ml-2" :disabled="selection.length <= 0 || filtered || perm('role:update')" @move="(type) => move(selection, type)" /> |
|
||||||
<column-setting name="role" class="ml-2" /> |
|
||||||
</div> |
|
||||||
<el-table |
|
||||||
ref="table" |
|
||||||
v-loading="loading" |
|
||||||
:data="data" |
|
||||||
@selection-change="(rows) => (selection = rows)" |
|
||||||
@row-dblclick="(row) => handleEdit(row.id)" |
|
||||||
@sort-change="handleSort" |
|
||||||
class="mt-3 shadow bg-white" |
|
||||||
> |
|
||||||
<column-list name="role"> |
|
||||||
<el-table-column type="selection" width="50"></el-table-column> |
|
||||||
<el-table-column property="id" label="ID" width="64" sortable="custom"></el-table-column> |
|
||||||
<el-table-column property="name" :label="$t('role.name')" sortable="custom" show-overflow-tooltip></el-table-column> |
|
||||||
<el-table-column property="description" :label="$t('role.description')" sortable="custom" show-overflow-tooltip></el-table-column> |
|
||||||
<el-table-column :label="$t('table.action')"> |
|
||||||
<template #default="{ row }"> |
|
||||||
<el-button type="text" @click="handleEdit(row.id)" size="small">{{ $t('edit') }}</el-button> |
|
||||||
<el-popconfirm :title="$t('confirmDelete')" @confirm="handleDelete([row.id])"> |
|
||||||
<template #reference> |
|
||||||
<el-button type="text" size="small">{{ $t('delete') }}</el-button> |
|
||||||
</template> |
|
||||||
</el-popconfirm> |
|
||||||
</template> |
|
||||||
</el-table-column> |
|
||||||
</column-list> |
|
||||||
</el-table> |
|
||||||
<role-form v-model="formVisible" :beanId="beanId" :beanIds="beanIds" @finished="fetchData" /> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script setup lang="ts"> |
|
||||||
import { computed, onMounted, ref } from 'vue'; |
|
||||||
import { ElMessage } from 'element-plus'; |
|
||||||
import { Plus, Delete } from '@element-plus/icons-vue'; |
|
||||||
import { useI18n } from 'vue-i18n'; |
|
||||||
import { perm } from '@/store/useCurrentUser'; |
|
||||||
import { deleteRole, queryRoleList, updateRoleOrder } from '@/api/user'; |
|
||||||
import { moveList, toParams, resetParams } from '@/utils/common'; |
|
||||||
import { ColumnList, ColumnSetting } from '@/components/TableList'; |
|
||||||
import { QueryForm, QueryItem } from '@/components/QueryForm'; |
|
||||||
import ListMove from '@/components/ListMove.vue'; |
|
||||||
import RoleForm from './RoleForm.vue'; |
|
||||||
|
|
||||||
const { t } = useI18n(); |
|
||||||
const params = ref<any>({}); |
|
||||||
const sort = ref<any>(); |
|
||||||
const table = ref<any>(); |
|
||||||
const data = ref<Array<any>>([]); |
|
||||||
const selection = ref<Array<any>>([]); |
|
||||||
const loading = ref<boolean>(false); |
|
||||||
const formVisible = ref<boolean>(false); |
|
||||||
const beanId = ref<number>(); |
|
||||||
const beanIds = computed(() => data.value.map((row) => row.id)); |
|
||||||
const filtered = ref<boolean>(false); |
|
||||||
const fetchData = async () => { |
|
||||||
loading.value = true; |
|
||||||
try { |
|
||||||
data.value = await queryRoleList({ ...toParams(params.value), Q_OrderBy: sort.value }); |
|
||||||
filtered.value = Object.values(params.value).filter((v) => v !== undefined && v !== '').length > 0 || sort.value !== undefined; |
|
||||||
} finally { |
|
||||||
loading.value = false; |
|
||||||
} |
|
||||||
}; |
|
||||||
onMounted(fetchData); |
|
||||||
|
|
||||||
const handleSort = ({ column, prop, order }: { column: any; prop: string; order: string }) => { |
|
||||||
if (prop) { |
|
||||||
sort.value = (column.sortBy ?? prop) + (order === 'descending' ? '_desc' : ''); |
|
||||||
} else { |
|
||||||
sort.value = undefined; |
|
||||||
} |
|
||||||
fetchData(); |
|
||||||
}; |
|
||||||
const handleSearch = () => fetchData(); |
|
||||||
const handleReset = () => { |
|
||||||
table.value.clearSort(); |
|
||||||
resetParams(params.value); |
|
||||||
sort.value = undefined; |
|
||||||
fetchData(); |
|
||||||
}; |
|
||||||
|
|
||||||
const handleAdd = () => { |
|
||||||
beanId.value = undefined; |
|
||||||
formVisible.value = true; |
|
||||||
}; |
|
||||||
const handleEdit = (id: number) => { |
|
||||||
beanId.value = id; |
|
||||||
formVisible.value = true; |
|
||||||
}; |
|
||||||
const handleDelete = async (ids: number[]) => { |
|
||||||
await deleteRole(ids); |
|
||||||
fetchData(); |
|
||||||
ElMessage.success(t('success')); |
|
||||||
}; |
|
||||||
const move = async (selected: any[], type: 'top' | 'up' | 'down' | 'bottom') => { |
|
||||||
const list = moveList(selected, data.value, type); |
|
||||||
await updateRoleOrder(list.map((item) => item.id)); |
|
||||||
}; |
|
||||||
</script> |
|
||||||
@ -1,248 +0,0 @@ |
|||||||
<template> |
|
||||||
<dialog-form :name="$t('menu.user.user')" |
|
||||||
:queryBean="queryUser" |
|
||||||
:createBean="createUser" |
|
||||||
:updateBean="updateUser" |
|
||||||
:deleteBean="deleteUser" |
|
||||||
:beanId="beanId" |
|
||||||
:beanIds="beanIds" |
|
||||||
:focus="focus" |
|
||||||
:initValues="() => ({ gender: 'm', roleIds: [] })" |
|
||||||
:toValues="(bean) => ({ ...bean, roleIds: bean.roleList.map((item:any) => item.id) })" |
|
||||||
:disableDelete="(bean) => bean.id <= 1" |
|
||||||
perms="user" |
|
||||||
:model-value="modelValue" |
|
||||||
@update:model-value="$emit('update:modelValue', $event)" |
|
||||||
@finished="$emit('finished')" |
|
||||||
large> |
|
||||||
<template #default="{ values, bean, isEdit }"> |
|
||||||
<el-row> |
|
||||||
<el-col :span="12"> |
|
||||||
<el-form-item prop="username" |
|
||||||
:label="$t('user.username')" |
|
||||||
:rules="[ |
|
||||||
{ required: true, message: () => $t('v.required') }, |
|
||||||
{ |
|
||||||
asyncValidator: async (rule, value, callback) => { |
|
||||||
if (value !== bean.username && !(await usernameValidation(value))) { |
|
||||||
callback($t('user.error.usernameExist')); |
|
||||||
} |
|
||||||
}, |
|
||||||
}, |
|
||||||
]"> |
|
||||||
<el-input v-model="values.username" |
|
||||||
ref="focus" |
|
||||||
maxlength="50"></el-input> |
|
||||||
</el-form-item> |
|
||||||
</el-col> |
|
||||||
<el-col :span="12"> |
|
||||||
<el-form-item prop="realName" |
|
||||||
:label="$t('user.realName')"> |
|
||||||
<el-input v-model="values.realName" |
|
||||||
maxlength="50"></el-input> |
|
||||||
</el-form-item> |
|
||||||
</el-col> |
|
||||||
<el-col :span="12"> |
|
||||||
<el-form-item prop="plainPassword" |
|
||||||
:label="$t('user.plainPassword')" |
|
||||||
:rules="[{ required: !isEdit, message: () => $t('v.required') }]"> |
|
||||||
<el-input v-model="values.plainPassword" |
|
||||||
maxlength="50" |
|
||||||
show-password></el-input> |
|
||||||
</el-form-item> |
|
||||||
</el-col> |
|
||||||
<el-col :span="12"> |
|
||||||
<el-form-item prop="passwordAgain" |
|
||||||
:label="$t('user.passwordAgain')" |
|
||||||
:rules="[ |
|
||||||
{ required: !isEdit, message: () => $t('v.required') }, |
|
||||||
{ |
|
||||||
validator: (rule, value, callback) => { |
|
||||||
if (value != values.plainPassword) { |
|
||||||
callback($t('user.error.passwordNotMatch')); |
|
||||||
} else { |
|
||||||
callback(); |
|
||||||
} |
|
||||||
}, |
|
||||||
trigger: 'blur', |
|
||||||
}, |
|
||||||
]"> |
|
||||||
<el-input v-model="values.passwordAgain" |
|
||||||
maxlength="50" |
|
||||||
show-password></el-input> |
|
||||||
</el-form-item> |
|
||||||
</el-col> |
|
||||||
<el-col :span="12"> |
|
||||||
<el-form-item prop="mobile" |
|
||||||
:label="$t('user.mobile')" |
|
||||||
:rules="[ |
|
||||||
{ |
|
||||||
asyncValidator: async (rule, value, callback) => { |
|
||||||
if (value !== bean.mobile && !(await mobileValidation(value))) { |
|
||||||
callback($t('user.error.mobileExist')); |
|
||||||
} |
|
||||||
}, |
|
||||||
}, |
|
||||||
]"> |
|
||||||
<el-input v-model="values.mobile" |
|
||||||
maxlength="50"></el-input> |
|
||||||
</el-form-item> |
|
||||||
</el-col> |
|
||||||
<el-col :span="12"> |
|
||||||
<el-form-item prop="email" |
|
||||||
:label="$t('user.email')" |
|
||||||
:rules="[ |
|
||||||
{ |
|
||||||
asyncValidator: async (rule, value, callback) => { |
|
||||||
if (value !== bean.email && !(await emailValidation(value))) { |
|
||||||
callback($t('user.error.emailExist')); |
|
||||||
} |
|
||||||
}, |
|
||||||
}, |
|
||||||
]"> |
|
||||||
<el-input v-model="values.email" |
|
||||||
maxlength="50"></el-input> |
|
||||||
</el-form-item> |
|
||||||
</el-col> |
|
||||||
<el-col :span="12"> |
|
||||||
<el-form-item prop="groupId" |
|
||||||
:label="$t('user.group')" |
|
||||||
:rules="{ required: true, message: () => $t('v.required') }"> |
|
||||||
<el-select v-model="values.groupId"> |
|
||||||
<el-option v-for="item in groupList" |
|
||||||
:key="item.id" |
|
||||||
:value="item.id" |
|
||||||
:label="item.name"></el-option> |
|
||||||
</el-select> |
|
||||||
</el-form-item> |
|
||||||
</el-col> |
|
||||||
<el-col :span="12"> |
|
||||||
<el-form-item prop="orgId" |
|
||||||
:label="$t('user.org')" |
|
||||||
:rules="{ required: true, message: () => $t('v.required') }"> |
|
||||||
<el-cascader v-model="values.orgId" |
|
||||||
:options="orgList" |
|
||||||
:props="{ value: 'id', label: 'name', checkStrictly: true }" |
|
||||||
@change="(value) => (values.orgId = value[value.length - 1])"></el-cascader> |
|
||||||
</el-form-item> |
|
||||||
</el-col> |
|
||||||
<el-col :span="24"> |
|
||||||
<el-form-item prop="roleIds" |
|
||||||
:label="$t('user.role')"> |
|
||||||
<el-checkbox-group v-model="values.roleIds"> |
|
||||||
<el-checkbox v-for="item in roleList" |
|
||||||
:key="item.id" |
|
||||||
:label="item.id">{{ item.name }}</el-checkbox> |
|
||||||
</el-checkbox-group> |
|
||||||
</el-form-item> |
|
||||||
</el-col> |
|
||||||
<el-col :span="12"> |
|
||||||
<el-form-item prop="rank" |
|
||||||
:rules="[ |
|
||||||
{ required: true, message: () => $t('v.required') }, |
|
||||||
{ type: 'integer', message: () => $t('v.integer') }, |
|
||||||
]"> |
|
||||||
<template #label><label-tip message="user.rank" /></template> |
|
||||||
<el-input v-model.number="values.rank" |
|
||||||
maxlength="4"></el-input> |
|
||||||
</el-form-item> |
|
||||||
</el-col> |
|
||||||
<el-col :span="12"> |
|
||||||
<el-form-item prop="gender" |
|
||||||
:label="$t('user.gender')" |
|
||||||
:rules="{ required: true, message: () => $t('v.required') }"> |
|
||||||
<el-radio-group v-model="values.gender"> |
|
||||||
<el-radio :label="'m'">{{ $t('gender.male') }}</el-radio> |
|
||||||
<el-radio :label="'f'">{{ $t('gender.female') }}</el-radio> |
|
||||||
<el-radio :label="'n'">{{ $t('gender.none') }}</el-radio> |
|
||||||
</el-radio-group> |
|
||||||
</el-form-item> |
|
||||||
</el-col> |
|
||||||
<el-col :span="12"> |
|
||||||
<el-form-item prop="location" |
|
||||||
:label="$t('user.location')"> |
|
||||||
<el-input v-model="values.location" |
|
||||||
maxlength="255"></el-input> |
|
||||||
</el-form-item> |
|
||||||
</el-col> |
|
||||||
<el-col :span="12"> |
|
||||||
<el-form-item prop="birthday" |
|
||||||
:label="$t('user.birthday')"> |
|
||||||
<el-date-picker v-model="values.birthday" |
|
||||||
type="date"></el-date-picker> |
|
||||||
</el-form-item> |
|
||||||
</el-col> |
|
||||||
<el-col :span="24"> |
|
||||||
<el-form-item prop="bio" |
|
||||||
:label="$t('user.bio')"> |
|
||||||
<el-input v-model="values.bio" |
|
||||||
type="textarea" |
|
||||||
:rows="3" |
|
||||||
maxlength="2000"></el-input> |
|
||||||
</el-form-item> |
|
||||||
</el-col> |
|
||||||
<el-col :span="12" |
|
||||||
v-if="isEdit"> |
|
||||||
<el-form-item prop="created" |
|
||||||
:label="$t('user.created')"> |
|
||||||
<el-date-picker v-model="values.created" |
|
||||||
type="datetime" |
|
||||||
disabled></el-date-picker> |
|
||||||
</el-form-item> |
|
||||||
</el-col> |
|
||||||
<el-col :span="12" |
|
||||||
v-if="isEdit"> |
|
||||||
<el-form-item prop="loginDate" |
|
||||||
:label="$t('user.loginDate')"> |
|
||||||
<el-date-picker v-model="values.loginDate" |
|
||||||
type="datetime" |
|
||||||
disabled></el-date-picker> |
|
||||||
</el-form-item> |
|
||||||
</el-col> |
|
||||||
<el-col :span="12" |
|
||||||
v-if="isEdit"> |
|
||||||
<el-form-item prop="loginIp" |
|
||||||
:label="$t('user.loginIp')"> |
|
||||||
<el-input v-model="values.loginIp" |
|
||||||
disabled></el-input> |
|
||||||
</el-form-item> |
|
||||||
</el-col> |
|
||||||
<el-col :span="12" |
|
||||||
v-if="isEdit"> |
|
||||||
<el-form-item prop="loginCount" |
|
||||||
:label="$t('user.loginCount')"> |
|
||||||
<el-input v-model="values.loginCount" |
|
||||||
disabled></el-input> |
|
||||||
</el-form-item> |
|
||||||
</el-col> |
|
||||||
</el-row> |
|
||||||
</template> |
|
||||||
</dialog-form> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script setup lang="ts"> |
|
||||||
import { onMounted, ref } from 'vue'; |
|
||||||
import { queryUser, createUser, updateUser, deleteUser, usernameValidation, emailValidation, mobileValidation, queryGroupList, queryOrgList, queryRoleList } from '@/api/user'; |
|
||||||
import { toTree } from '@/utils/tree'; |
|
||||||
import DialogForm from '@/components/DialogForm.vue'; |
|
||||||
import LabelTip from '@/components/LabelTip.vue'; |
|
||||||
|
|
||||||
defineProps({ modelValue: { type: Boolean, required: true }, beanId: { required: true }, beanIds: { type: Array, required: true } }); |
|
||||||
defineEmits({ 'update:modelValue': null, finished: null }); |
|
||||||
|
|
||||||
const focus = ref<any>(); |
|
||||||
const groupList = ref<any[]>([]); |
|
||||||
const orgList = ref<any[]>([]); |
|
||||||
const roleList = ref<any[]>([]); |
|
||||||
onMounted(() => { |
|
||||||
queryGroupList({ Q_EQ_type: 2 }).then((result) => { |
|
||||||
groupList.value = result; |
|
||||||
}); |
|
||||||
queryOrgList().then((result) => { |
|
||||||
orgList.value = toTree(result); |
|
||||||
}); |
|
||||||
queryRoleList().then((result) => { |
|
||||||
roleList.value = result; |
|
||||||
}); |
|
||||||
}); |
|
||||||
</script> |
|
||||||
@ -1,259 +0,0 @@ |
|||||||
<template> |
|
||||||
<div> |
|
||||||
<div class="mb-3"> |
|
||||||
<query-form :params="params" |
|
||||||
@search="handleSearch" |
|
||||||
@reset="handleReset"> |
|
||||||
<query-item :label="$t('user.username')" |
|
||||||
name="Q_Contains_username"></query-item> |
|
||||||
<query-item :label="$t('user.mobile')" |
|
||||||
name="Q_Contains_mobile"></query-item> |
|
||||||
<query-item :label="$t('user.email')" |
|
||||||
name="Q_Contains_email"></query-item> |
|
||||||
<query-item :label="$t('user.rank')" |
|
||||||
name="Q_GE_rank,Q_LE_rank" |
|
||||||
type="number"></query-item> |
|
||||||
<query-item :label="$t('user.created')" |
|
||||||
name="Q_GE_@userExt-created_DateTime,Q_LE_@userExt-created_DateTime" |
|
||||||
type="datetime"></query-item> |
|
||||||
<query-item :label="$t('user.status')" |
|
||||||
name="Q_In_status_Int" |
|
||||||
:options="[0, 1].map((item) => ({ label: $t(`user.status.${item}`), value: item }))"></query-item> |
|
||||||
</query-form> |
|
||||||
</div> |
|
||||||
<div> |
|
||||||
<el-button type="primary" |
|
||||||
:icon="Plus" |
|
||||||
@click="handleAdd">{{ $t('add') }}</el-button> |
|
||||||
<el-popconfirm :title="$t('confirmDelete')" |
|
||||||
@confirm="handleDelete(selection.map((row) => row.id))"> |
|
||||||
<template #reference> |
|
||||||
<el-button :disabled="selection.length <= 0 || perm('user:delete')" |
|
||||||
:icon="Delete">{{ $t('delete') }}</el-button> |
|
||||||
</template> |
|
||||||
</el-popconfirm> |
|
||||||
<column-setting name="user" |
|
||||||
class="ml-2" /> |
|
||||||
</div> |
|
||||||
<div class="block mt-3"> |
|
||||||
<el-table ref="table" |
|
||||||
v-loading="loading" |
|
||||||
:data="data" |
|
||||||
@selection-change="(rows) => (selection = rows)" |
|
||||||
@row-dblclick="(row) => handleEdit(row.id)" |
|
||||||
@sort-change="handleSort"> |
|
||||||
<column-list name="user"> |
|
||||||
<el-table-column type="selection" |
|
||||||
:selectable="deletable" |
|
||||||
width="50"></el-table-column> |
|
||||||
<el-table-column property="id" |
|
||||||
label="ID" |
|
||||||
width="64" |
|
||||||
sortable="custom"></el-table-column> |
|
||||||
<el-table-column property="username" |
|
||||||
:label="$t('user.username')" |
|
||||||
sortable="custom" |
|
||||||
min-width="100"></el-table-column> |
|
||||||
<el-table-column property="mobile" |
|
||||||
:label="$t('user.mobile')" |
|
||||||
sortable="custom" |
|
||||||
display="none" |
|
||||||
min-width="100" |
|
||||||
show-overflow-tooltip></el-table-column> |
|
||||||
<el-table-column property="email" |
|
||||||
:label="$t('user.email')" |
|
||||||
sortable="custom" |
|
||||||
display="none" |
|
||||||
min-width="100" |
|
||||||
show-overflow-tooltip></el-table-column> |
|
||||||
<el-table-column property="realName" |
|
||||||
:label="$t('user.realName')" |
|
||||||
sort-by="@userExt-realName" |
|
||||||
sortable="custom" |
|
||||||
min-width="100" |
|
||||||
show-overflow-tooltip /> |
|
||||||
<el-table-column property="gender" |
|
||||||
:label="$t('user.gender')" |
|
||||||
sort-by="@userExt-gender" |
|
||||||
sortable="custom" |
|
||||||
display="none"> |
|
||||||
<template #default="{ row }">{{ $t(`gender.${row.gender}`) }}</template> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column property="created" |
|
||||||
:label="$t('user.created')" |
|
||||||
sort-by="@userExt-created" |
|
||||||
sortable="custom" |
|
||||||
display="none" |
|
||||||
width="170"> |
|
||||||
<template #default="{ row }">{{ dayjs(row.created).format('YYYY-MM-DD HH:mm:ss') }}</template> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column property="birthday" |
|
||||||
:label="$t('user.birthday')" |
|
||||||
sort-by="@userExt-birthday" |
|
||||||
sortable="custom" |
|
||||||
display="none" |
|
||||||
width="110"> |
|
||||||
<template #default="{ row }">{{ dayjs(row.birthday).format('YYYY-MM-DD') }}</template> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column property="loginDate" |
|
||||||
:label="$t('user.loginDate')" |
|
||||||
sort-by="@userExt-loginDate" |
|
||||||
sortable="custom" |
|
||||||
display="none" |
|
||||||
width="170"> |
|
||||||
<template #default="{ row }">{{ dayjs(row.loginDate).format('YYYY-MM-DD HH:mm:ss') }}</template> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column property="loginIp" |
|
||||||
:label="$t('user.loginIp')" |
|
||||||
sort-by="@userExt-loginIp" |
|
||||||
sortable="custom" |
|
||||||
display="none" |
|
||||||
show-overflow-tooltip /> |
|
||||||
<el-table-column property="loginCount" |
|
||||||
:label="$t('user.loginCount')" |
|
||||||
sort-by="@userExt-loginCount" |
|
||||||
sortable="custom" |
|
||||||
display="none" |
|
||||||
show-overflow-tooltip /> |
|
||||||
<el-table-column property="org.name" |
|
||||||
:label="$t('user.org')" |
|
||||||
sort-by="org-name" |
|
||||||
sortable="custom" |
|
||||||
show-overflow-tooltip></el-table-column> |
|
||||||
<el-table-column property="roles" |
|
||||||
:label="$t('user.role')" |
|
||||||
show-overflow-tooltip> |
|
||||||
<template #default="{ row }"> |
|
||||||
<el-space> |
|
||||||
<span v-for="item in row.roleList" |
|
||||||
:key="item.id">{{ item.name }}</span> |
|
||||||
</el-space> |
|
||||||
</template> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column property="group.name" |
|
||||||
:label="$t('user.group')" |
|
||||||
sort-by="group-name" |
|
||||||
sortable="custom" |
|
||||||
show-overflow-tooltip></el-table-column> |
|
||||||
<el-table-column property="rank" |
|
||||||
:label="$t('user.rank')" |
|
||||||
sortable="custom" |
|
||||||
show-overflow-tooltip></el-table-column> |
|
||||||
<el-table-column property="status" |
|
||||||
:label="$t('user.status')" |
|
||||||
sortable="custom" |
|
||||||
show-overflow-tooltip> |
|
||||||
<template #default="{ row }"> |
|
||||||
<el-tag v-if="row.status === 0" |
|
||||||
type="success" |
|
||||||
size="small">{{ $t(`user.status.${row.status}`) }}</el-tag> |
|
||||||
<el-tag v-if="row.status === 1" |
|
||||||
type="danger" |
|
||||||
size="small">{{ $t(`user.status.${row.status}`) }}</el-tag> |
|
||||||
</template> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column :label="$t('table.action')"> |
|
||||||
<template #default="{ row }"> |
|
||||||
<el-button type="text" |
|
||||||
@click="handleEdit(row.id)" |
|
||||||
:disabled="perm('user:show')" |
|
||||||
size="small">{{ $t('edit') }}</el-button> |
|
||||||
<el-popconfirm :title="$t('confirmDelete')" |
|
||||||
@confirm="handleDelete([row.id])"> |
|
||||||
<template #reference> |
|
||||||
<el-button type="text" |
|
||||||
:disabled="!deletable(row) || perm('user:delete')" |
|
||||||
size="small">{{ $t('delete') }}</el-button> |
|
||||||
</template> |
|
||||||
</el-popconfirm> |
|
||||||
</template> |
|
||||||
</el-table-column> |
|
||||||
</column-list> |
|
||||||
</el-table> |
|
||||||
<el-pagination v-model:currentPage="currentPage" |
|
||||||
v-model:pageSize="pageSize" |
|
||||||
:total="total" |
|
||||||
:page-sizes="pageSizes" |
|
||||||
:layout="pageLayout" |
|
||||||
@size-change="fetchData()" |
|
||||||
@current-change="fetchData()" |
|
||||||
small |
|
||||||
background |
|
||||||
class="px-3 py-2 justify-end"></el-pagination> |
|
||||||
</div> |
|
||||||
<user-form v-model="formVisible" |
|
||||||
:beanId="beanId" |
|
||||||
:beanIds="beanIds" |
|
||||||
@finished="fetchData" /> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script setup lang="ts"> |
|
||||||
import { computed, onMounted, ref } from 'vue'; |
|
||||||
import { ElMessage } from 'element-plus'; |
|
||||||
import { Plus, Delete } from '@element-plus/icons-vue'; |
|
||||||
import { useI18n } from 'vue-i18n'; |
|
||||||
import dayjs from 'dayjs'; |
|
||||||
import { perm } from '@/store/useCurrentUser'; |
|
||||||
import { pageSizes, pageLayout, toParams, resetParams } from '@/utils/common'; |
|
||||||
import { deleteUser, queryUserPage } from '@/api/user'; |
|
||||||
import { ColumnList, ColumnSetting } from '@/components/TableList'; |
|
||||||
import { QueryForm, QueryItem } from '@/components/QueryForm'; |
|
||||||
import UserForm from './UserForm.vue'; |
|
||||||
|
|
||||||
const { t } = useI18n(); |
|
||||||
const params = ref<any>({}); |
|
||||||
const sort = ref<any>(); |
|
||||||
const currentPage = ref<number>(1); |
|
||||||
const pageSize = ref<number>(10); |
|
||||||
const total = ref<number>(0); |
|
||||||
const table = ref<any>(); |
|
||||||
const data = ref<Array<any>>([]); |
|
||||||
const selection = ref<Array<any>>([]); |
|
||||||
const loading = ref<boolean>(false); |
|
||||||
const formVisible = ref<boolean>(false); |
|
||||||
const beanId = ref<number>(); |
|
||||||
const beanIds = computed(() => data.value.map((row) => row.id)); |
|
||||||
const fetchData = async () => { |
|
||||||
loading.value = true; |
|
||||||
try { |
|
||||||
const { content, totalElements } = await queryUserPage({ ...toParams(params.value), Q_OrderBy: sort.value, page: currentPage.value, pageSize: pageSize.value }); |
|
||||||
data.value = content; |
|
||||||
total.value = totalElements; |
|
||||||
} finally { |
|
||||||
loading.value = false; |
|
||||||
} |
|
||||||
}; |
|
||||||
onMounted(fetchData); |
|
||||||
|
|
||||||
const handleSort = ({ column, prop, order }: { column: any; prop: string; order: string }) => { |
|
||||||
if (prop) { |
|
||||||
sort.value = (column.sortBy ?? prop) + (order === 'descending' ? '_desc' : ''); |
|
||||||
} else { |
|
||||||
sort.value = undefined; |
|
||||||
} |
|
||||||
fetchData(); |
|
||||||
}; |
|
||||||
const handleSearch = () => fetchData(); |
|
||||||
const handleReset = () => { |
|
||||||
table.value.clearSort(); |
|
||||||
resetParams(params.value); |
|
||||||
sort.value = undefined; |
|
||||||
fetchData(); |
|
||||||
}; |
|
||||||
|
|
||||||
const handleAdd = () => { |
|
||||||
beanId.value = undefined; |
|
||||||
formVisible.value = true; |
|
||||||
}; |
|
||||||
const handleEdit = (id: number) => { |
|
||||||
beanId.value = id; |
|
||||||
formVisible.value = true; |
|
||||||
}; |
|
||||||
const handleDelete = async (ids: number[]) => { |
|
||||||
await deleteUser(ids); |
|
||||||
fetchData(); |
|
||||||
ElMessage.success(t('success')); |
|
||||||
}; |
|
||||||
const deletable = (bean: any) => bean.id > 1; |
|
||||||
</script> |
|
||||||
Loading…
Reference in new issue