139 lines
3.5 KiB
Vue
139 lines
3.5 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
|
|
import { confirm, Page, useVbenModal } from '@vben/common-ui';
|
|
|
|
import {
|
|
Button as TButton,
|
|
Link as TLink,
|
|
Space as TSpace,
|
|
Switch as TSwitch,
|
|
Tag as TTag
|
|
} from 'tdesign-vue-next';
|
|
|
|
import { message } from '#/adapter/tdesign';
|
|
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
|
import { changeAdminStatus, getAdminListByPage } from '#/api';
|
|
import { toObject } from '#/enum';
|
|
import { CommonStatusEnum } from '#/enum/CommonStatus';
|
|
|
|
import { useGridSchema, useSearchFormSchema } from './data';
|
|
import Form from './form.vue';
|
|
|
|
const [FormModel, formModelApi] = useVbenModal({
|
|
connectedComponent: Form,
|
|
destroyOnClose: true,
|
|
});
|
|
|
|
function onStatusChange(value: any, row: any) {
|
|
confirm(`确认${value === 1 ? '启用' : '禁用'}用户`, `切换状态`)
|
|
.then(async () => {
|
|
await changeAdminStatus({ id: row.id, status: value });
|
|
row.status = value;
|
|
message.success(`${value === 1 ? '启用' : '禁用'}成功`);
|
|
})
|
|
.catch(() => {
|
|
message.warning('取消操作');
|
|
});
|
|
}
|
|
|
|
const [Grid, GridApi] = useVbenVxeGrid({
|
|
formOptions: {
|
|
schema: useSearchFormSchema(),
|
|
showCollapseButton: false,
|
|
submitButtonOptions: {
|
|
content: '查询',
|
|
},
|
|
submitOnChange: true,
|
|
submitOnEnter: true,
|
|
},
|
|
gridOptions: {
|
|
minHeight: 600,
|
|
columns: useGridSchema(),
|
|
proxyConfig: {
|
|
ajax: {
|
|
query: async ({ page }, formValues) => {
|
|
return await getAdminListByPage({
|
|
current: page.currentPage,
|
|
pageSize: page.pageSize,
|
|
...formValues,
|
|
});
|
|
},
|
|
},
|
|
},
|
|
},
|
|
// 完全移除分隔条
|
|
separator: false,
|
|
// 你也可以使用下面的代码来移除分隔条
|
|
// separator: { show: false },
|
|
// 或者使用下面的代码来改变分隔条的颜色
|
|
// separator: { backgroundColor: 'rgba(100,100,0,0.5)' },
|
|
});
|
|
|
|
const addEvent = () => {
|
|
formModelApi.setData({}).open();
|
|
};
|
|
const editEvent = (row) => {
|
|
formModelApi.setData(row).open();
|
|
};
|
|
const onRefresh = () => {
|
|
GridApi.reload();
|
|
};
|
|
|
|
const roleOptionsMap = computed(() => {
|
|
return toObject(
|
|
GridApi.formApi.getFieldComponentRef('roleIds')?.getOptions() ?? [],
|
|
'value',
|
|
'label',
|
|
);
|
|
});
|
|
const deptOptionsMap = computed(() => {
|
|
return toObject(
|
|
GridApi.formApi.getFieldComponentRef('deptId')?.getOptions() ?? [],
|
|
'value',
|
|
'label',
|
|
);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Page auto-content-height>
|
|
<Grid table-title="用户列表">
|
|
<template #toolbar-tools>
|
|
<TButton class="mr-2" type="primary" @click="addEvent">
|
|
新增用户
|
|
</TButton>
|
|
</template>
|
|
|
|
<template #status="{ row }">
|
|
<TSwitch
|
|
:value="row.status"
|
|
:checked-value="true"
|
|
:unchecked-value="false"
|
|
:on-update:value="(value) => onStatusChange(value, row)"
|
|
>
|
|
{{ toObject(CommonStatusEnum, 'value', 'label')[row.status] }}
|
|
</TSwitch>
|
|
</template>
|
|
|
|
<template #roleIds="{ row }">
|
|
<TSpace>
|
|
<TTag theme="primary" v-for="id in row.roleIds" :key="id">
|
|
{{ roleOptionsMap[id] }}
|
|
</TTag>
|
|
</TSpace>
|
|
</template>
|
|
|
|
<template #deptId="{ row }"> {{ deptOptionsMap[row.deptId] }} </template>
|
|
|
|
<template #actions="{ row }">
|
|
<TSpace>
|
|
<TLink theme="primary" @click="editEvent(row)">编辑</TLink>
|
|
</TSpace>
|
|
</template>
|
|
</Grid>
|
|
|
|
<FormModel @success="onRefresh" />
|
|
</Page>
|
|
</template>
|