feat:user
This commit is contained in:
parent
30fcf9133f
commit
f10f91eaab
540
sub-government-affairs-service/src/views/system/user/index.vue
Normal file
540
sub-government-affairs-service/src/views/system/user/index.vue
Normal file
@ -0,0 +1,540 @@
|
|||||||
|
<template>
|
||||||
|
<div class="custom-page">
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<splitpanes class="default-theme">
|
||||||
|
<pane size="16">
|
||||||
|
<el-col>
|
||||||
|
<custom-table-tree title="部门组织信息" :data="treeData" :option="treeOption" filter @node-click="handleNodeClick">
|
||||||
|
<template #default="{ data }">
|
||||||
|
<div :class="{ 'text-primary': data.deptId == treeSelected.deptId }">
|
||||||
|
{{ data.deptName }}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</custom-table-tree>
|
||||||
|
</el-col>
|
||||||
|
</pane>
|
||||||
|
<pane size="84">
|
||||||
|
<el-col>
|
||||||
|
<avue-crud
|
||||||
|
ref="crudRef"
|
||||||
|
v-model:search="state.query"
|
||||||
|
v-model:page="state.pageData"
|
||||||
|
:table-loading="state.loading"
|
||||||
|
:data="state.data"
|
||||||
|
:option="state.options"
|
||||||
|
@refresh-change="refreshChange"
|
||||||
|
@search-reset="searchChange"
|
||||||
|
@search-change="searchChange"
|
||||||
|
@selection-change="selectionChange"
|
||||||
|
@current-change="currentChange"
|
||||||
|
@size-change="sizeChange"
|
||||||
|
@row-save="rowSave"
|
||||||
|
@row-update="rowUpdate"
|
||||||
|
@row-del="rowDel"
|
||||||
|
>
|
||||||
|
<template #status="{ row }">
|
||||||
|
<el-tag v-if="row.status == 0" type="success">启用</el-tag>
|
||||||
|
<el-tag v-if="row.status == 1" type="danger">禁用</el-tag>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #menu="scope">
|
||||||
|
<custom-table-operate :show="!scope.row.admin" :actions="state.options.actions" :data="scope" />
|
||||||
|
</template>
|
||||||
|
</avue-crud>
|
||||||
|
</el-col>
|
||||||
|
</pane>
|
||||||
|
</splitpanes>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<custom-import-excel
|
||||||
|
ref="importExcelRef"
|
||||||
|
title="用户导入"
|
||||||
|
:template-url="getAssetsFile('template/用户-导入模板.xlsx')"
|
||||||
|
@on-download="onDownloadExcel"
|
||||||
|
@on-confirm="onUploadExcel"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { reactive, ref, computed } from 'vue';
|
||||||
|
import { useRouter } from 'vue-router';
|
||||||
|
import { useApp } from '@/hooks';
|
||||||
|
import { CRUD_OPTIONS } from '@/config';
|
||||||
|
import { useUserStore } from '@/store/modules/user';
|
||||||
|
import { isEmpty, getAssetsFile, downloadFile, getTree, getParentIds } from '@/utils';
|
||||||
|
import {
|
||||||
|
GetEntityList,
|
||||||
|
AddEntity,
|
||||||
|
UpdateEntity,
|
||||||
|
DeleteEntity,
|
||||||
|
ImportEntity,
|
||||||
|
ExportEntity,
|
||||||
|
GetUser,
|
||||||
|
UpdateStatus,
|
||||||
|
GetDeptList,
|
||||||
|
} from '@/apis/system/user';
|
||||||
|
|
||||||
|
const { VITE_APP_BASE_API } = import.meta.env;
|
||||||
|
const app = useApp();
|
||||||
|
const UserStore = useUserStore();
|
||||||
|
const router = useRouter();
|
||||||
|
const crudRef = ref(null);
|
||||||
|
const importExcelRef = ref(null);
|
||||||
|
const treeData = ref([]);
|
||||||
|
const treeOption = ref({
|
||||||
|
nodeKey: 'id',
|
||||||
|
props: { children: 'children', label: 'deptName', id: 'deptId' },
|
||||||
|
});
|
||||||
|
const treeSelected = ref({});
|
||||||
|
const userId = computed(() => '');
|
||||||
|
const state = reactive({
|
||||||
|
loading: false,
|
||||||
|
query: {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
},
|
||||||
|
form: {},
|
||||||
|
selection: [],
|
||||||
|
options: {
|
||||||
|
...CRUD_OPTIONS,
|
||||||
|
selection: false,
|
||||||
|
rowKey: 'userId',
|
||||||
|
column: [
|
||||||
|
{
|
||||||
|
label: '登录名',
|
||||||
|
prop: 'userName',
|
||||||
|
search: true,
|
||||||
|
rules: {
|
||||||
|
required: true,
|
||||||
|
message: '请输入',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '用户名称',
|
||||||
|
prop: 'nickName',
|
||||||
|
rules: {
|
||||||
|
required: true,
|
||||||
|
message: '请输入',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '用户密码',
|
||||||
|
prop: 'password',
|
||||||
|
hide: true,
|
||||||
|
addDisplay: true,
|
||||||
|
editDisplay: false,
|
||||||
|
viewDisplay: false,
|
||||||
|
showPassword: true,
|
||||||
|
maxlength: 20,
|
||||||
|
rules: {
|
||||||
|
required: true,
|
||||||
|
message: '请输入',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '用户性别',
|
||||||
|
prop: 'sex',
|
||||||
|
type: 'select',
|
||||||
|
hide: true,
|
||||||
|
props: {
|
||||||
|
label: 'dictLabel',
|
||||||
|
value: 'dictValue',
|
||||||
|
},
|
||||||
|
dicUrl: `${VITE_APP_BASE_API}/system/dict/data/type/sys_user_sex`,
|
||||||
|
dicHeaders: {
|
||||||
|
authorization: UserStore.token,
|
||||||
|
},
|
||||||
|
dicFormatter: (res) => {
|
||||||
|
return res.data;
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
required: true,
|
||||||
|
message: '请选择',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '手机号',
|
||||||
|
prop: 'phonenumber',
|
||||||
|
search: true,
|
||||||
|
rules: {
|
||||||
|
required: true,
|
||||||
|
message: '请输入',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '状态',
|
||||||
|
prop: 'status',
|
||||||
|
type: 'select',
|
||||||
|
search: true,
|
||||||
|
dicData: [
|
||||||
|
{
|
||||||
|
label: '启用',
|
||||||
|
value: '0',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '禁用',
|
||||||
|
value: '1',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
value: '0',
|
||||||
|
rules: {
|
||||||
|
required: true,
|
||||||
|
message: '请选择',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '邮箱',
|
||||||
|
prop: 'email',
|
||||||
|
hide: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '归属部门',
|
||||||
|
prop: 'deptIds',
|
||||||
|
type: 'cascader',
|
||||||
|
checkStrictly: true,
|
||||||
|
props: {
|
||||||
|
label: 'label',
|
||||||
|
value: 'id',
|
||||||
|
},
|
||||||
|
dicUrl: `${VITE_APP_BASE_API}/system/user/deptTree`,
|
||||||
|
dicHeaders: {
|
||||||
|
authorization: UserStore.token,
|
||||||
|
},
|
||||||
|
dicFormatter: (res) => {
|
||||||
|
return res.data;
|
||||||
|
},
|
||||||
|
render: ({ row }) => {
|
||||||
|
return row?.dept?.deptName ?? '';
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// label: '岗位',
|
||||||
|
// prop: 'postIds',
|
||||||
|
// type: 'select',
|
||||||
|
// hide: true,
|
||||||
|
// props: {
|
||||||
|
// label: 'postName',
|
||||||
|
// value: 'postId',
|
||||||
|
// },
|
||||||
|
// dicUrl: `${VITE_APP_BASE_API}/system/user/${userId.value}`,
|
||||||
|
// // dicFlag: true,
|
||||||
|
// dicHeaders: {
|
||||||
|
// authorization: UserStore.token,
|
||||||
|
// },
|
||||||
|
// dicFormatter: (res) => {
|
||||||
|
// return res.posts;
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
label: '角色',
|
||||||
|
prop: 'roleIds',
|
||||||
|
type: 'select',
|
||||||
|
multiple: true,
|
||||||
|
hide: true,
|
||||||
|
props: {
|
||||||
|
label: 'roleName',
|
||||||
|
value: 'roleId',
|
||||||
|
},
|
||||||
|
dicUrl: `${VITE_APP_BASE_API}/system/user/${userId.value}`,
|
||||||
|
// dicFlag: true,
|
||||||
|
dicHeaders: {
|
||||||
|
authorization: UserStore.token,
|
||||||
|
},
|
||||||
|
dicFormatter: (res) => {
|
||||||
|
return res.roles;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '备注',
|
||||||
|
prop: 'remark',
|
||||||
|
type: 'textarea',
|
||||||
|
span: 24,
|
||||||
|
rows: 4,
|
||||||
|
overHidden: true,
|
||||||
|
width: 200,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
actions: [
|
||||||
|
{
|
||||||
|
name: '查看',
|
||||||
|
icon: 'view',
|
||||||
|
event: ({ row }) => rowView(row),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '编辑',
|
||||||
|
icon: 'edit',
|
||||||
|
event: ({ row }) => rowEdit(row),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'primary',
|
||||||
|
name: ({ row }) => {
|
||||||
|
return row.status == 0 ? '禁用' : '启用';
|
||||||
|
},
|
||||||
|
icon: ({ row }) => {
|
||||||
|
return row.status == 0 ? 'turnOff' : 'open';
|
||||||
|
},
|
||||||
|
event: ({ row }) => rowStatus(row),
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// name: '分配角色',
|
||||||
|
// icon: 'userFilled',
|
||||||
|
// event: ({ row }) => rowRole(row),
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
type: 'danger',
|
||||||
|
name: '删除',
|
||||||
|
icon: 'delete',
|
||||||
|
event: ({ row }) => rowDel(row),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
pageData: {
|
||||||
|
total: 0,
|
||||||
|
currentPage: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
},
|
||||||
|
data: [],
|
||||||
|
postOptions: [],
|
||||||
|
roleOptions: [],
|
||||||
|
});
|
||||||
|
|
||||||
|
// tree
|
||||||
|
const getDeptTree = async () => {
|
||||||
|
try {
|
||||||
|
const res = await GetDeptList();
|
||||||
|
if (res.code == 200) {
|
||||||
|
treeData.value = getTree(res.data, 'deptId');
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
app.$message.error(err.msg);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleNodeClick = (data) => {
|
||||||
|
treeSelected.value = data;
|
||||||
|
state.query.deptId = data.deptId;
|
||||||
|
loadData();
|
||||||
|
};
|
||||||
|
|
||||||
|
getDeptTree();
|
||||||
|
|
||||||
|
// 加载
|
||||||
|
const loadData = () => {
|
||||||
|
state.loading = true;
|
||||||
|
GetEntityList(state.query)
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code === 200) {
|
||||||
|
const { current, size, total, records } = res.data;
|
||||||
|
state.data = records;
|
||||||
|
state.pageData = {
|
||||||
|
currentPage: current || 1,
|
||||||
|
pageSize: size || 10,
|
||||||
|
total: total,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
app.$message.error(err.msg);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
state.loading = false;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
loadData();
|
||||||
|
|
||||||
|
// 页数
|
||||||
|
const currentChange = (current) => {
|
||||||
|
state.query.current = current;
|
||||||
|
loadData();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 条数
|
||||||
|
const sizeChange = (size) => {
|
||||||
|
state.query.size = size;
|
||||||
|
loadData();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 搜索
|
||||||
|
const searchChange = (params, done) => {
|
||||||
|
if (done) done();
|
||||||
|
state.query = params;
|
||||||
|
state.query.current = 1;
|
||||||
|
loadData();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 刷新
|
||||||
|
const refreshChange = () => {
|
||||||
|
loadData();
|
||||||
|
app.$message.success('刷新成功');
|
||||||
|
};
|
||||||
|
|
||||||
|
// 选择
|
||||||
|
const selectionChange = (rows) => {
|
||||||
|
state.selection = rows;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 查看
|
||||||
|
const rowView = async (row) => {
|
||||||
|
const { roleIds, postIds } = await GetUser(row.userId);
|
||||||
|
row.roleIds = roleIds;
|
||||||
|
row.postIds = postIds;
|
||||||
|
row.deptIds = [...getParentIds(treeData.value, row.deptId, 'deptId'), row.deptId];
|
||||||
|
crudRef.value.rowView(row);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 启用、禁用
|
||||||
|
const rowStatus = (row) => {
|
||||||
|
let status = row.status == 1 ? 0 : 1;
|
||||||
|
UpdateStatus({ userId: row.userId, status })
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code === 200) {
|
||||||
|
app.$message.success('状态更改成功！');
|
||||||
|
loadData();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
app.$message.error(err.msg);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 新增
|
||||||
|
const setDeptIds = (row) => {
|
||||||
|
if (!isEmpty(row.deptIds)) {
|
||||||
|
const len = row.deptIds.length;
|
||||||
|
row.deptId = row?.deptIds[len - 1] ?? '';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const rowSave = (row, done, loading) => {
|
||||||
|
setDeptIds(row);
|
||||||
|
AddEntity(row)
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code === 200) {
|
||||||
|
app.$message.success('添加成功！');
|
||||||
|
done();
|
||||||
|
loadData();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
app.$message.error(err.msg);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
loading();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 编辑
|
||||||
|
const rowEdit = async (row) => {
|
||||||
|
const { roleIds, postIds } = await GetUser(row.userId);
|
||||||
|
row.roleIds = roleIds;
|
||||||
|
row.postIds = postIds;
|
||||||
|
row.deptIds = [...getParentIds(treeData.value, row.deptId, 'deptId'), row.deptId];
|
||||||
|
crudRef.value.rowEdit(row);
|
||||||
|
};
|
||||||
|
|
||||||
|
const rowUpdate = (row, index, done, loading) => {
|
||||||
|
setDeptIds(row);
|
||||||
|
UpdateEntity(row)
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code === 200) {
|
||||||
|
app.$message.success('更新成功！');
|
||||||
|
done();
|
||||||
|
loadData();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
app.$message.error(err.msg);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
loading();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 分配角色
|
||||||
|
const rowRole = (row) => {
|
||||||
|
router.push({
|
||||||
|
path: '/sub-government-affairs-service/system-auth-role',
|
||||||
|
query: { id: row.userId },
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 删除
|
||||||
|
const rowDel = (row, index, done) => {
|
||||||
|
if (isEmpty(row)) return;
|
||||||
|
app
|
||||||
|
.$confirm(`删除后信息将不可查看，确认要删除吗？`, '确定删除', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning',
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
DeleteEntity({ id: row.userId })
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code === 200) {
|
||||||
|
app.$message.success('删除成功！');
|
||||||
|
loadData();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
app.$message.error(err.msg);
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 导入
|
||||||
|
const rowImport = () => {
|
||||||
|
importExcelRef?.value && importExcelRef.value.show();
|
||||||
|
};
|
||||||
|
|
||||||
|
const onDownloadExcel = (url) => {
|
||||||
|
downloadFile(url, `用户-导入模板.xlsx.xlsx`);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onUploadExcel = (formData) => {
|
||||||
|
ImportEntity(formData)
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code === 200) {
|
||||||
|
app.$message.success('导入成功！');
|
||||||
|
loadData();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
app.$message.error('导入失败！');
|
||||||
|
importExcelRef.value.clear();
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
importExcelRef.value.hide();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 导出
|
||||||
|
const rowExport = () => {
|
||||||
|
if (isEmpty(state.data)) {
|
||||||
|
app.$message.error('当前暂时没有可供导出的数据！');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
state.loading = true;
|
||||||
|
const fileName = '用户';
|
||||||
|
ExportEntity(state.query)
|
||||||
|
.then((res) => {
|
||||||
|
if (res.status === 200) {
|
||||||
|
downloadFile(res.data, `${fileName}.xlsx`, 'blob');
|
||||||
|
app.$message.success('导出成功！');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
app.$message.error('导出失败！');
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
state.loading = false;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
</script>
|
||||||
Loading…
x
Reference in New Issue
Block a user