parent
376f17fe29
commit
ccbd7f96a0
@ -0,0 +1,40 @@
|
||||
const mock = (data) =>
|
||||
new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve(data);
|
||||
}, Math.random() * 1500 + 500);
|
||||
});
|
||||
export const findUserList = (data) => {
|
||||
return mock({
|
||||
content: [
|
||||
{
|
||||
id: 1,
|
||||
username: 'user001',
|
||||
nickname: '张三',
|
||||
sex: 1,
|
||||
avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2Ffd%2Ff1%2Fda%2Ffdf1dacb8ff0b8f13ed29bcbee42f328.jpeg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650201540&t=ba213738d8f11e79302fab71602856f2',
|
||||
loginTime: Date.now(),
|
||||
enabled: true,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
username: 'user003',
|
||||
nickname: '李四',
|
||||
sex: 0,
|
||||
avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2Ffd%2Ff1%2Fda%2Ffdf1dacb8ff0b8f13ed29bcbee42f328.jpeg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650201540&t=ba213738d8f11e79302fab71602856f2',
|
||||
loginTime: Date.now(),
|
||||
enabled: true,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
username: 'user003',
|
||||
nickname: '王五',
|
||||
sex: 1,
|
||||
avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2Ffd%2Ff1%2Fda%2Ffdf1dacb8ff0b8f13ed29bcbee42f328.jpeg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650201540&t=ba213738d8f11e79302fab71602856f2',
|
||||
loginTime: Date.now(),
|
||||
enabled: false,
|
||||
},
|
||||
],
|
||||
totalElements: 3,
|
||||
});
|
||||
};
|
@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<component :is="render" />
|
||||
</template>
|
||||
<script setup lang="jsx">
|
||||
import { ElButton } from 'element-plus/es/components/button/index';
|
||||
import 'element-plus/es/components/button/style/css';
|
||||
const props = defineProps({});
|
||||
const attrs = useAttrs();
|
||||
const slots = useSlots();
|
||||
const render = () => <ElButton {...props} {...attrs} v-slots={slots} />;
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.el-button {
|
||||
:deep(.el-icon) {
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
}
|
||||
</style>
|
@ -0,0 +1,39 @@
|
||||
import * as api from '@/api/system/user.js';
|
||||
import { ElMessage } from '@/plugins/element-plus';
|
||||
const state = () => ({
|
||||
loading: false,
|
||||
list: [],
|
||||
total: 0,
|
||||
opts: {
|
||||
sex: [
|
||||
{ label: '男', value: 1 },
|
||||
{ label: '女', value: 0 },
|
||||
],
|
||||
},
|
||||
});
|
||||
const getters = {};
|
||||
const mutations = {
|
||||
setLoading: (state, data) => (state.loading = data),
|
||||
setList: (state, data) => (state.list = data),
|
||||
setTotal: (state, data) => (state.total = data),
|
||||
};
|
||||
const actions = {
|
||||
search: async ({ commit }, data) => {
|
||||
commit('setLoading', true);
|
||||
let res = await api.findUserList(data);
|
||||
if (res) {
|
||||
commit('setList', res.content);
|
||||
commit('setTotal', res.totalElements);
|
||||
} else {
|
||||
ElMessage.error('查询用户失败');
|
||||
commit('setList', []);
|
||||
}
|
||||
commit('setLoading', false);
|
||||
},
|
||||
};
|
||||
export default {
|
||||
state,
|
||||
getters,
|
||||
mutations,
|
||||
actions,
|
||||
};
|
@ -1,7 +1,136 @@
|
||||
<template>
|
||||
<div>用户列表</div>
|
||||
<TableList
|
||||
v-loading="loading"
|
||||
code="DemoList"
|
||||
title="用户"
|
||||
:data="list"
|
||||
:total="total"
|
||||
:config="config"
|
||||
@search="handleSearch"
|
||||
@create="handleCreate"
|
||||
@remove="handleRemove"
|
||||
>
|
||||
<template #search>
|
||||
<el-form inline>
|
||||
<el-form-item prop="username" label="用户名">
|
||||
<el-input v-model="state.condition.username" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
</TableList>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
<script setup lang="jsx">
|
||||
const store = useStore();
|
||||
const loading = computed(() => store.state.user.loading);
|
||||
const list = computed(() => store.state.user.list);
|
||||
const total = computed(() => store.state.user.total);
|
||||
const opts = computed(() => store.state.user.opts);
|
||||
const state = reactive({
|
||||
condition: {
|
||||
username: null,
|
||||
},
|
||||
});
|
||||
const handleSearch = (page) => {
|
||||
store.dispatch('user/search', { ...page, ...state.condition });
|
||||
};
|
||||
const handleCreate = (row) => {
|
||||
alert('create ' + row.id);
|
||||
};
|
||||
const handleUpdate = (row) => {
|
||||
alert('update ' + row.id);
|
||||
};
|
||||
const handleRemove = (rows) => {
|
||||
alert('delete ' + rows.map((item) => item.id).join(','));
|
||||
};
|
||||
const handleDetail = (row) => {
|
||||
alert('detail ' + row.id);
|
||||
};
|
||||
const handleEnabled = (row, enabled) => {
|
||||
alert((enabled ? 'enabled ' : 'disabled ') + row.id);
|
||||
};
|
||||
const config = reactive({
|
||||
columns: [
|
||||
{
|
||||
type: 'selection',
|
||||
fixed: 'left',
|
||||
width: 60,
|
||||
},
|
||||
{
|
||||
label: '用户名',
|
||||
prop: 'username',
|
||||
minWidth: 160,
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
label: '昵称',
|
||||
prop: 'nickname',
|
||||
minWidth: 160,
|
||||
},
|
||||
{
|
||||
label: '性别',
|
||||
slots: {
|
||||
default: ({ row }) => unref(opts).sex.find((item) => item.value === row.sex)?.label,
|
||||
},
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
label: '头像',
|
||||
slots: {
|
||||
default: ({ row }) => <ElImage src={row.avatar} alt="用户头像" />,
|
||||
},
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
label: '登录时间',
|
||||
slots: {
|
||||
default: ({ row }) => dayjs(row.loginTime).format('YYYY-MM-DD HH:mm:ss'),
|
||||
},
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
label: '状态',
|
||||
slots: {
|
||||
default: ({ row }) => (
|
||||
<ElSwitch
|
||||
modelValue={row.enabled}
|
||||
active-text="启用"
|
||||
inactive-text="禁用"
|
||||
active-value={true}
|
||||
inactive-value={false}
|
||||
onInput={(e) => handleEnabled(row, e)}
|
||||
/>
|
||||
),
|
||||
},
|
||||
width: 160,
|
||||
},
|
||||
{
|
||||
label: '操作',
|
||||
fixed: 'right',
|
||||
slots: {
|
||||
default: ({ row }) => (
|
||||
<div>
|
||||
<ElButton type="text" onClick={() => handleUpdate(row)}>
|
||||
编辑
|
||||
</ElButton>
|
||||
<ElButton type="text" onClick={() => handleRemove([row])}>
|
||||
删除
|
||||
</ElButton>
|
||||
<ElDropdown
|
||||
opts={[
|
||||
{
|
||||
label: '详情',
|
||||
onClick: () => handleDetail(row),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
width: 200,
|
||||
},
|
||||
],
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
|
Loading…
Reference in new issue