From 37669d067c43a3807df848f0caf67cbeab3e1b33 Mon Sep 17 00:00:00 2001
From: Vben <anncwb@126.com>
Date: 星期一, 01 三月 2021 00:56:25 +0800
Subject: [PATCH] wip: add account management page
---
src/router/routes/modules/demo/permission.ts | 2
mock/demo/table-demo.ts | 2
src/router/routes/modules/demo/level.ts | 2
src/router/routes/modules/demo/system.ts | 27 +++
src/router/routes/modules/dashboard.ts | 2
src/router/routes/modules/demo/iframe.ts | 2
src/locales/lang/en/routes/demo/system.ts | 5
src/views/demo/system/account/index.vue | 100 ++++++++++++++
src/router/routes/modules/demo/page.ts | 2
mock/demo/system.ts | 30 ++++
/dev/null | 0
src/router/menus/modules/demo/system.ts | 17 ++
src/router/routes/modules/demo/charts.ts | 2
src/router/routes/modules/demo/comp.ts | 2
src/router/routes/modules/demo/feat.ts | 2
src/api/demo/model/systemModel.ts | 21 +++
src/views/demo/system/account/account.data.ts | 88 ++++++++++++
src/api/demo/system.ts | 10 +
src/components/Table/src/style/index.less | 13 +
src/router/routes/modules/home.ts | 2
src/views/demo/system/account/AccountModal.vue | 52 +++++++
src/locales/lang/zh_CN/routes/demo/system.ts | 5
22 files changed, 372 insertions(+), 16 deletions(-)
diff --git a/mock/demo/system.ts b/mock/demo/system.ts
new file mode 100644
index 0000000..bc72d2b
--- /dev/null
+++ b/mock/demo/system.ts
@@ -0,0 +1,30 @@
+import { MockMethod } from 'vite-plugin-mock';
+import { resultPageSuccess } from '../_util';
+
+const list = (() => {
+ const result: any[] = [];
+ for (let index = 0; index < 20; index++) {
+ result.push({
+ id: `${index}`,
+ account: '@first',
+ email: '@email',
+ nickname: '@cname()',
+ role: '@first',
+ updateTime: '@datetime',
+ remark: '@cword(0,20)',
+ });
+ }
+ return result;
+})();
+
+export default [
+ {
+ url: '/api/system/getAccountList',
+ timeout: 100,
+ method: 'get',
+ response: ({ query }) => {
+ const { page = 1, pageSize = 20 } = query;
+ return resultPageSuccess(page, pageSize, list);
+ },
+ },
+] as MockMethod[];
diff --git a/mock/demo/table-demo.ts b/mock/demo/table-demo.ts
index 17e8022..fb04f29 100644
--- a/mock/demo/table-demo.ts
+++ b/mock/demo/table-demo.ts
@@ -28,7 +28,7 @@
export default [
{
url: '/api/table/getDemoList',
- timeout: 1000,
+ timeout: 100,
method: 'get',
response: ({ query }) => {
const { page = 1, pageSize = 20 } = query;
diff --git a/src/api/demo/model/systemModel.ts b/src/api/demo/model/systemModel.ts
new file mode 100644
index 0000000..eb0fc80
--- /dev/null
+++ b/src/api/demo/model/systemModel.ts
@@ -0,0 +1,21 @@
+import { BasicPageParams, BasicFetchResult } from '/@/api/model/baseModel';
+
+export type Params = BasicPageParams & {
+ account?: string;
+ nickname?: string;
+};
+
+export interface DemoListItem {
+ id: string;
+ account: string;
+ email: string;
+ nickname: string;
+ role: number;
+ updateTime: string;
+ remark: string;
+}
+
+/**
+ * @description: Request list return value
+ */
+export type DemoListGetResultModel = BasicFetchResult<DemoListItem>;
diff --git a/src/api/demo/system.ts b/src/api/demo/system.ts
new file mode 100644
index 0000000..3fe1ccf
--- /dev/null
+++ b/src/api/demo/system.ts
@@ -0,0 +1,10 @@
+import { Params, DemoListGetResultModel } from './model/systemModel';
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+ // The address does not exist
+ AccountList = '/system/getAccountList',
+}
+
+export const getAccountList = (params: Params) =>
+ defHttp.get<DemoListGetResultModel>({ url: Api.AccountList, params });
diff --git a/src/components/Table/src/style/index.less b/src/components/Table/src/style/index.less
index 55b93a2..0f348c9 100644
--- a/src/components/Table/src/style/index.less
+++ b/src/components/Table/src/style/index.less
@@ -4,6 +4,7 @@
.@{prefix-cls} {
&-form-container {
+ width: 100%;
padding: 16px;
.ant-form {
@@ -50,8 +51,8 @@
//
.ant-table {
- // width: 100%;
- // overflow-x: hidden;
+ width: 100%;
+ overflow-x: hidden;
// border: none;
&-title {
@@ -159,15 +160,15 @@
// overflow-y: hidden !important;
// }
- // .ant-table-fixed {
- // border-bottom: none;
- // }
+ // .ant-table-fixed {
+ // border-bottom: none;
+ // }
// }
// .ant-table-bordered .ant-table-thead > tr:not(:last-child) > th,
// .ant-table-tbody > tr > td {
// word-break: break-word;
- // border-color: @border-color !important;
+ // // border-color: @border-color !important;
// }
.ant-table-footer {
diff --git a/src/locales/lang/en/routes/demo/system.ts b/src/locales/lang/en/routes/demo/system.ts
new file mode 100644
index 0000000..e6a2426
--- /dev/null
+++ b/src/locales/lang/en/routes/demo/system.ts
@@ -0,0 +1,5 @@
+export default {
+ moduleName: 'System management',
+
+ account: 'Account management',
+};
diff --git a/src/locales/lang/zh_CN/routes/demo/system.ts b/src/locales/lang/zh_CN/routes/demo/system.ts
new file mode 100644
index 0000000..2f16ba4
--- /dev/null
+++ b/src/locales/lang/zh_CN/routes/demo/system.ts
@@ -0,0 +1,5 @@
+export default {
+ moduleName: '绯荤粺绠＄悊',
+
+ account: '璐﹀彿绠＄悊',
+};
diff --git a/src/router/menus/modules/demo/system.ts b/src/router/menus/modules/demo/system.ts
new file mode 100644
index 0000000..200d546
--- /dev/null
+++ b/src/router/menus/modules/demo/system.ts
@@ -0,0 +1,17 @@
+import type { MenuModule } from '/@/router/types';
+import { t } from '/@/hooks/web/useI18n';
+
+const menu: MenuModule = {
+ orderNo: 2000,
+ menu: {
+ name: t('routes.demo.system.moduleName'),
+ path: '/system',
+ children: [
+ {
+ path: 'account',
+ name: t('routes.demo.system.account'),
+ },
+ ],
+ },
+};
+export default menu;
diff --git a/src/router/routes/modules/dashboard.ts b/src/router/routes/modules/dashboard.ts
index 31b21f2..cd93d8b 100644
--- a/src/router/routes/modules/dashboard.ts
+++ b/src/router/routes/modules/dashboard.ts
@@ -9,7 +9,7 @@
component: LAYOUT,
redirect: '/dashboard/workbench',
meta: {
- icon: 'bx:bx-home',
+ icon: 'ion:grid-outline',
title: t('routes.dashboard.dashboard'),
},
children: [
diff --git a/src/router/routes/modules/demo/charts.ts b/src/router/routes/modules/demo/charts.ts
index 7be294d..5831ce9 100644
--- a/src/router/routes/modules/demo/charts.ts
+++ b/src/router/routes/modules/demo/charts.ts
@@ -9,7 +9,7 @@
component: LAYOUT,
redirect: '/charts/apexChart',
meta: {
- icon: 'vaadin:spline-area-chart',
+ icon: 'ion:bar-chart-outline',
title: t('routes.demo.charts.charts'),
},
children: [
diff --git a/src/router/routes/modules/demo/comp.ts b/src/router/routes/modules/demo/comp.ts
index 41b3f90..bbc2f57 100644
--- a/src/router/routes/modules/demo/comp.ts
+++ b/src/router/routes/modules/demo/comp.ts
@@ -9,7 +9,7 @@
component: LAYOUT,
redirect: '/comp/basic',
meta: {
- icon: 'ic:outline-settings-input-component',
+ icon: 'ion:layers-outline',
title: t('routes.demo.comp.comp'),
},
diff --git a/src/router/routes/modules/demo/feat.ts b/src/router/routes/modules/demo/feat.ts
index 757183c..901782f 100644
--- a/src/router/routes/modules/demo/feat.ts
+++ b/src/router/routes/modules/demo/feat.ts
@@ -9,7 +9,7 @@
component: LAYOUT,
redirect: '/feat/icon',
meta: {
- icon: 'ic:outline-featured-play-list',
+ icon: 'ion:git-compare-outline',
title: t('routes.demo.feat.feat'),
},
children: [
diff --git a/src/router/routes/modules/demo/iframe.ts b/src/router/routes/modules/demo/iframe.ts
index ad50d38..0e8c479 100644
--- a/src/router/routes/modules/demo/iframe.ts
+++ b/src/router/routes/modules/demo/iframe.ts
@@ -10,7 +10,7 @@
component: LAYOUT,
redirect: '/frame/doc',
meta: {
- icon: 'mdi:page-next-outline',
+ icon: 'ion:tv-outline',
title: t('routes.demo.iframe.frame'),
},
diff --git a/src/router/routes/modules/demo/level.ts b/src/router/routes/modules/demo/level.ts
index f019d79..f95e5c0 100644
--- a/src/router/routes/modules/demo/level.ts
+++ b/src/router/routes/modules/demo/level.ts
@@ -9,7 +9,7 @@
component: LAYOUT,
redirect: '/level/menu1/menu1-1/menu1-1-1',
meta: {
- icon: 'carbon:user-role',
+ icon: 'ion:menu-outline',
title: t('routes.demo.level.level'),
},
diff --git a/src/router/routes/modules/demo/page.ts b/src/router/routes/modules/demo/page.ts
index 66dc39d..bede4e4 100644
--- a/src/router/routes/modules/demo/page.ts
+++ b/src/router/routes/modules/demo/page.ts
@@ -12,7 +12,7 @@
component: LAYOUT,
redirect: '/page-demo/exception',
meta: {
- icon: 'mdi:page-next-outline',
+ icon: 'ion:aperture-outline',
title: t('routes.demo.page.page'),
},
children: [
diff --git a/src/router/routes/modules/demo/permission.ts b/src/router/routes/modules/demo/permission.ts
index b8793b1..d46f520 100644
--- a/src/router/routes/modules/demo/permission.ts
+++ b/src/router/routes/modules/demo/permission.ts
@@ -10,7 +10,7 @@
component: LAYOUT,
redirect: '/permission/front/page',
meta: {
- icon: 'carbon:user-role',
+ icon: 'ion:key-outline',
title: t('routes.demo.permission.permission'),
},
diff --git a/src/router/routes/modules/demo/system.ts b/src/router/routes/modules/demo/system.ts
new file mode 100644
index 0000000..b550779
--- /dev/null
+++ b/src/router/routes/modules/demo/system.ts
@@ -0,0 +1,27 @@
+import type { AppRouteModule } from '/@/router/types';
+
+import { LAYOUT } from '/@/router/constant';
+import { t } from '/@/hooks/web/useI18n';
+
+const system: AppRouteModule = {
+ path: '/system',
+ name: 'System',
+ component: LAYOUT,
+ redirect: '/system/account',
+ meta: {
+ icon: 'ion:settings-outline',
+ title: t('routes.demo.system.moduleName'),
+ },
+ children: [
+ {
+ path: 'account',
+ name: 'Account',
+ meta: {
+ title: t('routes.demo.system.account'),
+ },
+ component: () => import('/@/views/demo/system/account/index.vue'),
+ },
+ ],
+};
+
+export default system;
diff --git a/src/router/routes/modules/home.ts b/src/router/routes/modules/home.ts
index b8a85fe..0fa8614 100644
--- a/src/router/routes/modules/home.ts
+++ b/src/router/routes/modules/home.ts
@@ -9,7 +9,7 @@
component: LAYOUT,
redirect: '/home/welcome',
meta: {
- icon: 'bx:bx-home',
+ icon: 'ion:home-outline',
title: t('routes.dashboard.welcome'),
},
children: [
diff --git a/src/views/biz/.gitkeep b/src/views/biz/.gitkeep
deleted file mode 100644
index e69de29..0000000
--- a/src/views/biz/.gitkeep
+++ /dev/null
diff --git a/src/views/demo/.gitkeep b/src/views/demo/.gitkeep
deleted file mode 100644
index e69de29..0000000
--- a/src/views/demo/.gitkeep
+++ /dev/null
diff --git a/src/views/demo/system/account/AccountModal.vue b/src/views/demo/system/account/AccountModal.vue
new file mode 100644
index 0000000..a57e4d0
--- /dev/null
+++ b/src/views/demo/system/account/AccountModal.vue
@@ -0,0 +1,52 @@
+<template>
+ <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
+ <BasicForm @register="registerForm" />
+ </BasicModal>
+</template>
+<script lang="ts">
+ import { defineComponent, ref, computed, unref } from 'vue';
+ import { BasicModal, useModalInner } from '/@/components/Modal';
+ import { BasicForm, useForm } from '/@/components/Form/index';
+ import { accountFormSchema } from './account.data';
+ export default defineComponent({
+ name: 'AccountModal',
+ components: { BasicModal, BasicForm },
+ setup() {
+ const isUpdate = ref(true);
+
+ const [registerForm, { setFieldsValue, validate }] = useForm({
+ labelWidth: 100,
+ schemas: accountFormSchema,
+ showActionButtonGroup: false,
+ actionColOptions: {
+ span: 23,
+ },
+ });
+
+ const [registerModal, { setModalProps }] = useModalInner((data) => {
+ isUpdate.value = !!data?.isUpdate;
+
+ if (unref(isUpdate)) {
+ setFieldsValue({
+ ...data.record,
+ });
+ }
+ });
+
+ const getTitle = computed(() => (!unref(isUpdate) ? '鏂板璐﹀彿' : '缂栬緫璐﹀彿'));
+
+ async function handleSubmit() {
+ try {
+ const values = await validate();
+ setModalProps({ confirmLoading: true });
+ // TODO custom api
+ console.log(values);
+ } finally {
+ setModalProps({ confirmLoading: true });
+ }
+ }
+
+ return { registerModal, registerForm, getTitle, handleSubmit };
+ },
+ });
+</script>
diff --git a/src/views/demo/system/account/account.data.ts b/src/views/demo/system/account/account.data.ts
new file mode 100644
index 0000000..5632fd4
--- /dev/null
+++ b/src/views/demo/system/account/account.data.ts
@@ -0,0 +1,88 @@
+import { BasicColumn } from '/@/components/Table';
+import { FormSchema } from '/@/components/Table';
+
+export const columns: BasicColumn[] = [
+ {
+ title: 'ID',
+ dataIndex: 'id',
+ width: 80,
+ },
+ {
+ title: '鐢ㄦ埛鍚�',
+ dataIndex: 'account',
+ width: 120,
+ },
+ {
+ title: '鏄电О',
+ dataIndex: 'nickname',
+ width: 120,
+ },
+ {
+ title: '閭',
+ dataIndex: 'email',
+ width: 200,
+ },
+ {
+ title: '鏇存柊鏃堕棿',
+ dataIndex: 'updateTime',
+ width: 180,
+ },
+ {
+ title: '瑙掕壊',
+ dataIndex: 'role',
+ width: 200,
+ },
+ {
+ title: '澶囨敞',
+ dataIndex: 'remark',
+ width: 200,
+ },
+];
+
+export const searchFormSchema: FormSchema[] = [
+ {
+ field: 'account',
+ label: '鐢ㄦ埛鍚�',
+ component: 'Input',
+ colProps: { span: 8 },
+ },
+ {
+ field: 'nickname',
+ label: '鏄电О',
+ component: 'Input',
+ colProps: { span: 8 },
+ },
+];
+
+export const accountFormSchema: FormSchema[] = [
+ {
+ field: 'account',
+ label: '鐢ㄦ埛鍚�',
+ component: 'Input',
+ required: true,
+ },
+ {
+ field: 'nickname',
+ label: '鏄电О',
+ component: 'Input',
+ required: true,
+ },
+ {
+ label: '閭',
+ field: 'email',
+ component: 'Input',
+ required: true,
+ },
+ // TODO
+ {
+ label: '瑙掕壊',
+ field: 'role',
+ component: 'Input',
+ required: true,
+ },
+ {
+ label: '澶囨敞',
+ field: 'remark',
+ component: 'InputTextArea',
+ },
+];
diff --git a/src/views/demo/system/account/index.vue b/src/views/demo/system/account/index.vue
new file mode 100644
index 0000000..da6a0b6
--- /dev/null
+++ b/src/views/demo/system/account/index.vue
@@ -0,0 +1,100 @@
+<template>
+ <div :class="[prefixCls]">
+ <BasicTable @register="registerTable">
+ <template #toolbar>
+ <a-button type="primary" @click="handleCreateAccount"> 鏂板璐﹀彿 </a-button>
+ </template>
+ <template #action="{ record }">
+ <TableAction
+ :actions="[
+ {
+ label: '缂栬緫',
+ onClick: handleEdit.bind(null, record),
+ },
+ {
+ label: '鍒犻櫎',
+ color: 'error',
+ popConfirm: {
+ title: '鏄惁纭鍒犻櫎',
+ confirm: handleDelete.bind(null, record),
+ },
+ },
+ ]"
+ />
+ </template>
+ </BasicTable>
+ <AccountModal @register="registerModal" />
+ </div>
+</template>
+<script lang="ts">
+ import { defineComponent } from 'vue';
+
+ import { useDesign } from '/@/hooks/web/useDesign';
+ import { BasicTable, useTable, TableAction } from '/@/components/Table';
+ import { getAccountList } from '/@/api/demo/system';
+
+ import { useModal } from '/@/components/Modal';
+ import AccountModal from './AccountModal.vue';
+
+ import { columns, searchFormSchema } from './account.data';
+
+ export default defineComponent({
+ name: 'AccountManagement',
+ components: { BasicTable, AccountModal, TableAction },
+ setup() {
+ const { prefixCls } = useDesign('account-management');
+
+ const [registerModal, { openModal }] = useModal();
+ const [registerTable] = useTable({
+ title: '璐﹀彿鍒楄〃',
+ api: getAccountList,
+ columns,
+ formConfig: {
+ labelWidth: 120,
+ schemas: searchFormSchema,
+ },
+ useSearchForm: true,
+ showTableSetting: true,
+ actionColumn: {
+ width: 160,
+ title: '鎿嶄綔',
+ dataIndex: 'action',
+ slots: { customRender: 'action' },
+ },
+ });
+
+ function handleCreateAccount() {
+ openModal(true, {
+ isUpdate: false,
+ });
+ }
+
+ function handleEdit(record: Recordable) {
+ openModal(true, {
+ record,
+ isUpdate: true,
+ });
+ }
+
+ function handleDelete(record: Recordable) {
+ console.log(record);
+ }
+
+ return {
+ prefixCls,
+ registerTable,
+ registerModal,
+ handleCreateAccount,
+ handleEdit,
+ handleDelete,
+ };
+ },
+ });
+</script>
+<style lang="less" scoped>
+ @prefix-cls: ~'@{namespace}-account-management';
+
+ .@{prefix-cls} {
+ display: flex;
+ }
+</style>
--
Gitblit v1.8.0