You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
271 lines
9.2 KiB
271 lines
9.2 KiB
<template> |
|
<div class="admin"> |
|
<el-card class="!border-none" shadow="never"> |
|
<el-form class="mb-[-16px]" :model="formData" inline> |
|
<el-form-item label="警号"> |
|
<el-input |
|
v-model="formData.empNo" |
|
class="w-[280px]" |
|
clearable |
|
@keyup.enter="resetPage" |
|
/> |
|
</el-form-item> |
|
<el-form-item label="姓名"> |
|
<el-input |
|
v-model="formData.name" |
|
class="w-[280px]" |
|
clearable |
|
@keyup.enter="resetPage" |
|
/> |
|
</el-form-item> |
|
<el-form-item label="身份证"> |
|
<el-input |
|
v-model="formData.idCode" |
|
class="w-[280px]" |
|
clearable |
|
@keyup.enter="resetPage" |
|
/> |
|
</el-form-item> |
|
|
|
<el-form-item label="角色"> |
|
<el-select v-model="formData.role" clearable style="width: 180px"> |
|
<el-option label="全部" value="" /> |
|
<el-option |
|
v-for="(item, index) in optionsData.role" |
|
:key="index" |
|
:label="item.name" |
|
:value="item.id" |
|
/> |
|
</el-select> |
|
</el-form-item> |
|
|
|
<el-form-item label="职位"> |
|
<el-select v-model="formData.post" clearable style="width: 180px"> |
|
<el-option label="全部" value="" /> |
|
<el-option |
|
v-for="(item, index) in optionsData.post" |
|
:key="index" |
|
:label="item.name" |
|
:value="item.id" |
|
/> |
|
</el-select> |
|
</el-form-item> |
|
|
|
<el-form-item label="部门"> |
|
<el-tree-select |
|
class="flex-1" |
|
v-model="formData.deptId" |
|
:data="optionsData.dept" |
|
clearable |
|
node-key="id" |
|
filterable |
|
check-strictly |
|
:props="{ |
|
value: 'id', |
|
label: 'name' |
|
}" |
|
placeholder="请选择部门" |
|
style="width: 200px" |
|
:default-expanded-keys="getExpandedKeys()" |
|
/> |
|
</el-form-item> |
|
<div> |
|
<el-button type="primary" @click="resetPage" |
|
>查询</el-button |
|
> |
|
<el-button @click="resetParams">重置</el-button> |
|
</div> |
|
</el-form> |
|
</el-card> |
|
<el-card |
|
v-loading="pager.loading" |
|
class="mt-4 !border-none" |
|
shadow="never" |
|
> |
|
<el-button |
|
v-perms="['system:admin:add']" |
|
type="primary" |
|
@click="handleAdd" |
|
> |
|
<template #icon> |
|
<icon name="el-icon-Plus" /> |
|
</template> |
|
新增 |
|
</el-button> |
|
<div class="mt-8 table-container"> |
|
<el-table :data="pager.lists"> |
|
<el-table-column label="警号" prop="empNo" min-width="60" /> |
|
<el-table-column label="姓名" prop="name" min-width="100" /> |
|
<el-table-column |
|
label="身份证" |
|
prop="idCode" |
|
min-width="100" |
|
/> |
|
<el-table-column |
|
label="手机号" |
|
prop="mobile" |
|
min-width="100" |
|
/> |
|
<el-table-column |
|
label="角色" |
|
prop="role" |
|
show-tooltip-when-overflow |
|
min-width="100" |
|
/> |
|
<el-table-column |
|
label="部门" |
|
prop="dept" |
|
show-tooltip-when-overflow |
|
min-width="100" |
|
width="160" |
|
/> |
|
<el-table-column |
|
label="职位" |
|
prop="post" |
|
show-tooltip-when-overflow |
|
min-width="100" |
|
/> |
|
<el-table-column |
|
label="最近登录时间" |
|
prop="lastLoginTime" |
|
min-width="180" |
|
> |
|
<template #default="{ row }"> |
|
{{ timeFormat(row.lastLoginTime, 'yyyy-mm-dd hh:MM') }} |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="状态" min-width="100"> |
|
<template #default="{ row }"> |
|
<el-switch |
|
v-perms="['system:admin:disable']" |
|
v-if="row.id != 1" |
|
:model-value="row.isDisable" |
|
:active-value="0" |
|
:inactive-value="1" |
|
@change="changeStatus($event, row.id)" |
|
size="small" |
|
/> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="操作" width="120" fixed="right"> |
|
<template #default="{ row }"> |
|
<el-button |
|
v-perms="['system:admin:edit']" |
|
type="primary" |
|
link |
|
@click="handleEdit(row)" |
|
> |
|
编辑 |
|
</el-button> |
|
<el-button |
|
v-if="row.id != 1" |
|
v-perms="['system:admin:del']" |
|
type="danger" |
|
link |
|
@click="handleDelete(row.id)" |
|
> |
|
删除 |
|
</el-button> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
</div> |
|
<div class="flex mt-4 justify-end"> |
|
<pagination v-model="pager" @change="getLists" /> |
|
</div> |
|
</el-card> |
|
<edit-popup |
|
v-if="showEdit" |
|
ref="editRef" |
|
@success="getLists" |
|
@close="showEdit = false" |
|
/> |
|
</div> |
|
</template> |
|
|
|
<script lang="ts" setup name="admin"> |
|
import { adminLists, adminDelete, adminStatus } from "@/api/perms/admin"; |
|
import { roleAll } from "@/api/perms/role"; |
|
import { useDictOptions } from "@/hooks/useDictOptions"; |
|
import { usePaging } from "@/hooks/usePaging"; |
|
import feedback from "@/utils/feedback"; |
|
import EditPopup from "./edit.vue"; |
|
import { postAll } from "@/api/org/post"; |
|
import { deptLists } from "@/api/org/department"; |
|
import { timeFormat } from "@/utils/util"; |
|
|
|
const editRef = shallowRef<InstanceType<typeof EditPopup>>(); |
|
// 表单数据 |
|
const formData = reactive({ |
|
name: "", |
|
empNo: "", |
|
mobile: "", |
|
idCode: "", |
|
role: "", |
|
deptId: "", |
|
post:"", |
|
}); |
|
const showEdit = ref(false); |
|
const { pager, getLists, resetParams, resetPage } = usePaging({ |
|
fetchFun: adminLists, |
|
params: formData, |
|
}); |
|
|
|
const changeStatus = async (active: any, id: number) => { |
|
try { |
|
await feedback.confirm(`确定${active ? "停用" : "开启"}当前管理员？`); |
|
await adminStatus({ id }); |
|
feedback.msgSuccess("修改成功"); |
|
getLists(); |
|
} catch (error) { |
|
getLists(); |
|
} |
|
}; |
|
|
|
const handleAdd = async () => { |
|
showEdit.value = true; |
|
await nextTick(); |
|
editRef.value?.open("add"); |
|
}; |
|
|
|
const handleEdit = async (data: any) => { |
|
showEdit.value = true; |
|
await nextTick(); |
|
editRef.value?.open("edit"); |
|
editRef.value?.setFormData(data); |
|
}; |
|
|
|
const handleDelete = async (id: number) => { |
|
await feedback.confirm("确定要删除？"); |
|
await adminDelete({ id }); |
|
feedback.msgSuccess("删除成功"); |
|
getLists(); |
|
}; |
|
|
|
const { optionsData } = useDictOptions<{ |
|
role: any[]; |
|
post: any[]; |
|
dept: any[]; |
|
}>({ |
|
role: { |
|
api: roleAll, |
|
}, |
|
post: { |
|
api: postAll, |
|
}, |
|
dept: { |
|
api: deptLists, |
|
}, |
|
}) |
|
|
|
const getExpandedKeys = () => { |
|
if (optionsData.dept.length && optionsData.dept[0].children && optionsData.dept[0].children.length > 0) { |
|
return [optionsData.dept[0].id] |
|
} |
|
return []; |
|
} |
|
|
|
onMounted(() => { |
|
getLists(); |
|
}); |
|
</script>
|
|
|