canrd-outside / order-erp-front · Commits

Commit bb89c5059c3a5db97c8ddccc7a7bd82b44785ffd

Authored by vben
1 parent 66feb779

refactor(sys): change to setup syntax

Inline Side-by-side
Showing 19 changed files with 384 additions and 666 deletions
.eslintrc.js
  View file @bb89c50
... ... @@ -25,6 +25,7 @@ module.exports = defineConfig({
25 25 'plugin:jest/recommended',
26 26 ],
27 27 rules: {
  28 + 'vue/script-setup-uses-vars': 'error',
28 29 '@typescript-eslint/ban-ts-ignore': 'off',
29 30 '@typescript-eslint/explicit-function-return-type': 'off',
30 31 '@typescript-eslint/no-explicit-any': 'off',
... ... @@ -61,7 +62,6 @@ module.exports = defineConfig({
61 62 'vue/singleline-html-element-content-newline': 'off',
62 63 'vue/attribute-hyphenation': 'off',
63 64 'vue/require-default-prop': 'off',
64   - 'vue/script-setup-uses-vars': 'off',
65 65 'vue/html-self-closing': [
66 66 'error',
67 67 {
... ...
src/App.vue
  View file @bb89c50
... ... @@ -6,23 +6,14 @@
6 6 </ConfigProvider>
7 7 </template>
8 8  
9   -<script lang="ts">
10   - import { defineComponent } from 'vue';
  9 +<script lang="ts" setup>
11 10 import { ConfigProvider } from 'ant-design-vue';
12 11 import { AppProvider } from '/@/components/Application';
13 12 import { useTitle } from '/@/hooks/web/useTitle';
14 13 import { useLocale } from '/@/locales/useLocale';
15 14  
16   - export default defineComponent({
17   - name: 'App',
18   - components: { ConfigProvider, AppProvider },
19   - setup() {
20   - useTitle();
  15 + // support Multi-language
  16 + const { getAntdLocale } = useLocale();
21 17  
22   - // support Multi-language
23   - const { getAntdLocale } = useLocale();
24   -
25   - return { getAntdLocale };
26   - },
27   - });
  18 + useTitle();
28 19 </script>
... ...
src/components/Button/src/BasicButton.vue
  View file @bb89c50
1 1 <template>
2 2 <Button v-bind="getBindValue" :class="getButtonClass" @click="onClick">
3   - <template #default="data">
  3 + <template #default>
4 4 <Icon :icon="preIcon" v-if="preIcon" :size="iconSize" />
5   - <slot v-bind="data"></slot>
  5 + <slot></slot>
6 6 <Icon :icon="postIcon" v-if="postIcon" :size="iconSize" />
7 7 </template>
8 8 </Button>
... ...
src/views/sys/about/index.vue
  View file @bb89c50
... ... @@ -14,94 +14,85 @@
14 14 <Description @register="registerDev" class="enter-y" />
15 15 </PageWrapper>
16 16 </template>
17   -<script lang="ts">
18   - import { defineComponent, h } from 'vue';
19   -
  17 +<script lang="ts" setup>
  18 + import { h } from 'vue';
20 19 import { Tag } from 'ant-design-vue';
21 20 import { PageWrapper } from '/@/components/Page';
22 21 import { Description, DescItem, useDescription } from '/@/components/Description/index';
23   -
24 22 import { GITHUB_URL, SITE_URL, DOC_URL } from '/@/settings/siteSetting';
25   - export default defineComponent({
26   - name: 'AboutPage',
27   - components: { Description, PageWrapper },
28   - setup() {
29   - const { pkg, lastBuildTime } = __APP_INFO__;
30 23  
31   - const { dependencies, devDependencies, name, version } = pkg;
  24 + const { pkg, lastBuildTime } = __APP_INFO__;
32 25  
33   - const schema: DescItem[] = [];
34   - const devSchema: DescItem[] = [];
  26 + const { dependencies, devDependencies, name, version } = pkg;
35 27  
36   - const commonTagRender = (color: string) => (curVal) => h(Tag, { color }, () => curVal);
37   - const commonLinkRender = (text: string) => (href) => h('a', { href, target: '_blank' }, text);
  28 + const schema: DescItem[] = [];
  29 + const devSchema: DescItem[] = [];
38 30  
39   - const infoSchema: DescItem[] = [
40   - {
41   - label: '版本',
42   - field: 'version',
43   - render: commonTagRender('blue'),
44   - },
45   - {
46   - label: '最后编译时间',
47   - field: 'lastBuildTime',
48   - render: commonTagRender('blue'),
49   - },
50   - {
51   - label: '文档地址',
52   - field: 'doc',
53   - render: commonLinkRender('文档地址'),
54   - },
55   - {
56   - label: '预览地址',
57   - field: 'preview',
58   - render: commonLinkRender('预览地址'),
59   - },
60   - {
61   - label: 'Github',
62   - field: 'github',
63   - render: commonLinkRender('Github'),
64   - },
65   - ];
  31 + const commonTagRender = (color: string) => (curVal) => h(Tag, { color }, () => curVal);
  32 + const commonLinkRender = (text: string) => (href) => h('a', { href, target: '_blank' }, text);
66 33  
67   - const infoData = {
68   - version,
69   - lastBuildTime,
70   - doc: DOC_URL,
71   - preview: SITE_URL,
72   - github: GITHUB_URL,
73   - };
  34 + const infoSchema: DescItem[] = [
  35 + {
  36 + label: '版本',
  37 + field: 'version',
  38 + render: commonTagRender('blue'),
  39 + },
  40 + {
  41 + label: '最后编译时间',
  42 + field: 'lastBuildTime',
  43 + render: commonTagRender('blue'),
  44 + },
  45 + {
  46 + label: '文档地址',
  47 + field: 'doc',
  48 + render: commonLinkRender('文档地址'),
  49 + },
  50 + {
  51 + label: '预览地址',
  52 + field: 'preview',
  53 + render: commonLinkRender('预览地址'),
  54 + },
  55 + {
  56 + label: 'Github',
  57 + field: 'github',
  58 + render: commonLinkRender('Github'),
  59 + },
  60 + ];
74 61  
75   - Object.keys(dependencies).forEach((key) => {
76   - schema.push({ field: key, label: key });
77   - });
  62 + const infoData = {
  63 + version,
  64 + lastBuildTime,
  65 + doc: DOC_URL,
  66 + preview: SITE_URL,
  67 + github: GITHUB_URL,
  68 + };
78 69  
79   - Object.keys(devDependencies).forEach((key) => {
80   - devSchema.push({ field: key, label: key });
81   - });
  70 + Object.keys(dependencies).forEach((key) => {
  71 + schema.push({ field: key, label: key });
  72 + });
82 73  
83   - const [register] = useDescription({
84   - title: '生产环境依赖',
85   - data: dependencies,
86   - schema: schema,
87   - column: 3,
88   - });
  74 + Object.keys(devDependencies).forEach((key) => {
  75 + devSchema.push({ field: key, label: key });
  76 + });
89 77  
90   - const [registerDev] = useDescription({
91   - title: '开发环境依赖',
92   - data: devDependencies,
93   - schema: devSchema,
94   - column: 3,
95   - });
  78 + const [register] = useDescription({
  79 + title: '生产环境依赖',
  80 + data: dependencies,
  81 + schema: schema,
  82 + column: 3,
  83 + });
96 84  
97   - const [infoRegister] = useDescription({
98   - title: '项目信息',
99   - data: infoData,
100   - schema: infoSchema,
101   - column: 2,
102   - });
  85 + const [registerDev] = useDescription({
  86 + title: '开发环境依赖',
  87 + data: devDependencies,
  88 + schema: devSchema,
  89 + column: 3,
  90 + });
103 91  
104   - return { register, registerDev, infoRegister, name, GITHUB_URL };
105   - },
  92 + const [infoRegister] = useDescription({
  93 + title: '项目信息',
  94 + data: infoData,
  95 + schema: infoSchema,
  96 + column: 2,
106 97 });
107 98 </script>
... ...
src/views/sys/error-log/DetailModal.vue
  View file @bb89c50
... ... @@ -3,40 +3,26 @@
3 3 <Description :data="info" @register="register" />
4 4 </BasicModal>
5 5 </template>
6   -<script lang="ts">
  6 +<script lang="ts" setup>
7 7 import type { PropType } from 'vue';
8 8 import type { ErrorLogInfo } from '/#/store';
9   -
10   - import { defineComponent } from 'vue';
  9 + import { defineProps } from 'vue';
11 10 import { BasicModal } from '/@/components/Modal/index';
12 11 import { Description, useDescription } from '/@/components/Description/index';
13   -
14 12 import { useI18n } from '/@/hooks/web/useI18n';
15   -
16 13 import { getDescSchema } from './data';
17 14  
18   - export default defineComponent({
19   - name: 'ErrorLogDetailModal',
20   - components: { BasicModal, Description },
21   - props: {
22   - info: {
23   - type: Object as PropType<ErrorLogInfo>,
24   - default: null,
25   - },
  15 + defineProps({
  16 + info: {
  17 + type: Object as PropType<ErrorLogInfo>,
  18 + default: null,
26 19 },
27   - setup() {
28   - const { t } = useI18n();
  20 + });
29 21  
30   - const [register] = useDescription({
31   - column: 2,
32   - schema: getDescSchema()!,
33   - });
  22 + const { t } = useI18n();
34 23  
35   - return {
36   - register,
37   - useI18n,
38   - t,
39   - };
40   - },
  24 + const [register] = useDescription({
  25 + column: 2,
  26 + schema: getDescSchema()!,
41 27 });
42 28 </script>
... ...
src/views/sys/error-log/index.vue
  View file @bb89c50
... ... @@ -27,91 +27,66 @@
27 27 </div>
28 28 </template>
29 29  
30   -<script lang="ts">
  30 +<script lang="ts" setup>
31 31 import type { ErrorLogInfo } from '/#/store';
32   -
33   - import { defineComponent, watch, ref, nextTick } from 'vue';
34   -
  32 + import { watch, ref, nextTick } from 'vue';
35 33 import DetailModal from './DetailModal.vue';
36 34 import { BasicTable, useTable, TableAction } from '/@/components/Table/index';
37   -
38 35 import { useModal } from '/@/components/Modal';
39 36 import { useMessage } from '/@/hooks/web/useMessage';
40 37 import { useI18n } from '/@/hooks/web/useI18n';
41   -
42 38 import { useErrorLogStore } from '/@/store/modules/errorLog';
43   -
44 39 import { fireErrorApi } from '/@/api/demo/error';
45   -
46 40 import { getColumns } from './data';
47   -
48 41 import { cloneDeep } from 'lodash-es';
49 42  
50   - export default defineComponent({
51   - name: 'ErrorHandler',
52   - components: { DetailModal, BasicTable, TableAction },
53   - setup() {
54   - const rowInfo = ref<ErrorLogInfo>();
55   - const imgList = ref<string[]>([]);
  43 + const rowInfo = ref<ErrorLogInfo>();
  44 + const imgList = ref<string[]>([]);
56 45  
57   - const { t } = useI18n();
58   - const errorLogStore = useErrorLogStore();
59   - const [register, { setTableData }] = useTable({
60   - title: t('sys.errorLog.tableTitle'),
61   - columns: getColumns(),
62   - actionColumn: {
63   - width: 80,
64   - title: 'Action',
65   - dataIndex: 'action',
66   - slots: { customRender: 'action' },
67   - },
68   - });
69   - const [registerModal, { openModal }] = useModal();
70   -
71   - watch(
72   - () => errorLogStore.getErrorLogInfoList,
73   - (list) => {
74   - nextTick(() => {
75   - setTableData(cloneDeep(list));
76   - });
77   - },
78   - {
79   - immediate: true,
80   - }
81   - );
82   - const { createMessage } = useMessage();
83   - if (import.meta.env.DEV) {
84   - createMessage.info(t('sys.errorLog.enableMessage'));
85   - }
86   - // 查看详情
87   - function handleDetail(row: ErrorLogInfo) {
88   - rowInfo.value = row;
89   - openModal(true);
90   - }
  46 + const { t } = useI18n();
  47 + const errorLogStore = useErrorLogStore();
  48 + const [register, { setTableData }] = useTable({
  49 + title: t('sys.errorLog.tableTitle'),
  50 + columns: getColumns(),
  51 + actionColumn: {
  52 + width: 80,
  53 + title: 'Action',
  54 + dataIndex: 'action',
  55 + slots: { customRender: 'action' },
  56 + },
  57 + });
  58 + const [registerModal, { openModal }] = useModal();
91 59  
92   - function fireVueError() {
93   - throw new Error('fire vue error!');
94   - }
  60 + watch(
  61 + () => errorLogStore.getErrorLogInfoList,
  62 + (list) => {
  63 + nextTick(() => {
  64 + setTableData(cloneDeep(list));
  65 + });
  66 + },
  67 + {
  68 + immediate: true,
  69 + }
  70 + );
  71 + const { createMessage } = useMessage();
  72 + if (import.meta.env.DEV) {
  73 + createMessage.info(t('sys.errorLog.enableMessage'));
  74 + }
  75 + // 查看详情
  76 + function handleDetail(row: ErrorLogInfo) {
  77 + rowInfo.value = row;
  78 + openModal(true);
  79 + }
95 80  
96   - function fireResourceError() {
97   - imgList.value.push(`${new Date().getTime()}.png`);
98   - }
  81 + function fireVueError() {
  82 + throw new Error('fire vue error!');
  83 + }
99 84  
100   - async function fireAjaxError() {
101   - await fireErrorApi();
102   - }
  85 + function fireResourceError() {
  86 + imgList.value.push(`${new Date().getTime()}.png`);
  87 + }
103 88  
104   - return {
105   - register,
106   - registerModal,
107   - handleDetail,
108   - fireVueError,
109   - fireResourceError,
110   - fireAjaxError,
111   - imgList,
112   - rowInfo,
113   - t,
114   - };
115   - },
116   - });
  89 + async function fireAjaxError() {
  90 + await fireErrorApi();
  91 + }
117 92 </script>
... ...
src/views/sys/exception/Exception.vue
  View file @bb89c50
1 1 <script lang="tsx">
2 2 import type { PropType } from 'vue';
3   -
4 3 import { Result, Button } from 'ant-design-vue';
5 4 import { defineComponent, ref, computed, unref } from 'vue';
6   -
7 5 import { ExceptionEnum } from '/@/enums/exceptionEnum';
8   -
9 6 import notDataSvg from '/@/assets/svg/no-data.svg';
10 7 import netWorkSvg from '/@/assets/svg/net-error.svg';
11   -
12 8 import { useRoute } from 'vue-router';
13 9 import { useDesign } from '/@/hooks/web/useDesign';
14 10 import { useI18n } from '/@/hooks/web/useI18n';
15 11 import { useGo, useRedo } from '/@/hooks/web/usePage';
16   -
17 12 import { PageEnum } from '/@/enums/pageEnum';
18 13  
19 14 interface MapValue {
... ...
src/views/sys/iframe/index.vue
  View file @bb89c50
... ... @@ -10,66 +10,50 @@
10 10 </Spin>
11 11 </div>
12 12 </template>
13   -<script lang="ts">
  13 +<script lang="ts" setup>
14 14 import type { CSSProperties } from 'vue';
15   - import { defineComponent, ref, unref, computed } from 'vue';
  15 + import { ref, unref, computed, defineProps } from 'vue';
16 16 import { Spin } from 'ant-design-vue';
17   -
18 17 import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
19   -
20 18 import { propTypes } from '/@/utils/propTypes';
21 19 import { useDesign } from '/@/hooks/web/useDesign';
22 20 import { useLayoutHeight } from '/@/layouts/default/content/useContentViewHeight';
23 21  
24   - export default defineComponent({
25   - name: 'IFrame',
26   - components: { Spin },
27   - props: {
28   - frameSrc: propTypes.string.def(''),
29   - },
30   - setup() {
31   - const loading = ref(true);
32   - const topRef = ref(50);
33   - const heightRef = ref(window.innerHeight);
34   - const frameRef = ref<HTMLFrameElement>();
35   - const { headerHeightRef } = useLayoutHeight();
36   -
37   - const { prefixCls } = useDesign('iframe-page');
38   - useWindowSizeFn(calcHeight, 150, { immediate: true });
  22 + defineProps({
  23 + frameSrc: propTypes.string.def(''),
  24 + });
39 25  
40   - const getWrapStyle = computed((): CSSProperties => {
41   - return {
42   - height: `${unref(heightRef)}px`,
43   - };
44   - });
  26 + const loading = ref(true);
  27 + const topRef = ref(50);
  28 + const heightRef = ref(window.innerHeight);
  29 + const frameRef = ref<HTMLFrameElement>();
  30 + const { headerHeightRef } = useLayoutHeight();
45 31  
46   - function calcHeight() {
47   - const iframe = unref(frameRef);
48   - if (!iframe) {
49   - return;
50   - }
51   - const top = headerHeightRef.value;
52   - topRef.value = top;
53   - heightRef.value = window.innerHeight - top;
54   - const clientHeight = document.documentElement.clientHeight - top;
55   - iframe.style.height = `${clientHeight}px`;
56   - }
  32 + const { prefixCls } = useDesign('iframe-page');
  33 + useWindowSizeFn(calcHeight, 150, { immediate: true });
57 34  
58   - function hideLoading() {
59   - loading.value = false;
60   - calcHeight();
61   - }
  35 + const getWrapStyle = computed((): CSSProperties => {
  36 + return {
  37 + height: `${unref(heightRef)}px`,
  38 + };
  39 + });
62 40  
63   - return {
64   - getWrapStyle,
65   - loading,
66   - frameRef,
67   - prefixCls,
  41 + function calcHeight() {
  42 + const iframe = unref(frameRef);
  43 + if (!iframe) {
  44 + return;
  45 + }
  46 + const top = headerHeightRef.value;
  47 + topRef.value = top;
  48 + heightRef.value = window.innerHeight - top;
  49 + const clientHeight = document.documentElement.clientHeight - top;
  50 + iframe.style.height = `${clientHeight}px`;
  51 + }
68 52  
69   - hideLoading,
70   - };
71   - },
72   - });
  53 + function hideLoading() {
  54 + loading.value = false;
  55 + calcHeight();
  56 + }
73 57 </script>
74 58 <style lang="less" scoped>
75 59 @prefix-cls: ~'@{namespace}-iframe-page';
... ...
src/views/sys/lock/LockPage.vue
  View file @bb89c50
... ... @@ -92,84 +92,61 @@
92 92 </div>
93 93 </div>
94 94 </template>
95   -<script lang="ts">
96   - import { defineComponent, ref, computed } from 'vue';
  95 +<script lang="ts" setup>
  96 + import { ref, computed } from 'vue';
97 97 import { Input } from 'ant-design-vue';
98   -
99 98 import { useUserStore } from '/@/store/modules/user';
100 99 import { useLockStore } from '/@/store/modules/lock';
101 100 import { useI18n } from '/@/hooks/web/useI18n';
102   -
103 101 import { useNow } from './useNow';
104 102 import { useDesign } from '/@/hooks/web/useDesign';
105   -
106 103 import { LockOutlined } from '@ant-design/icons-vue';
107 104 import headerImg from '/@/assets/images/header.jpg';
108 105  
109   - export default defineComponent({
110   - name: 'LockPage',
111   - components: { LockOutlined, InputPassword: Input.Password },
112   -
113   - setup() {
114   - const password = ref('');
115   - const loading = ref(false);
116   - const errMsg = ref(false);
117   - const showDate = ref(true);
  106 + const InputPassword = Input.Password;
118 107  
119   - const { prefixCls } = useDesign('lock-page');
120   - const lockStore = useLockStore();
121   - const userStore = useUserStore();
  108 + const password = ref('');
  109 + const loading = ref(false);
  110 + const errMsg = ref(false);
  111 + const showDate = ref(true);
122 112  
123   - const { ...state } = useNow(true);
  113 + const { prefixCls } = useDesign('lock-page');
  114 + const lockStore = useLockStore();
  115 + const userStore = useUserStore();
124 116  
125   - const { t } = useI18n();
  117 + const { hour, month, minute, meridiem, year, day, week } = useNow(true);
126 118  
127   - const userinfo = computed(() => {
128   - return userStore.getUserInfo || {};
129   - });
  119 + const { t } = useI18n();
130 120  
131   - /**
132   - * @description: unLock
133   - */
134   - async function unLock() {
135   - if (!password.value) {
136   - return;
137   - }
138   - let pwd = password.value;
139   - try {
140   - loading.value = true;
141   - const res = await lockStore.unLock(pwd);
142   - errMsg.value = !res;
143   - } finally {
144   - loading.value = false;
145   - }
146   - }
  121 + const userinfo = computed(() => {
  122 + return userStore.getUserInfo || {};
  123 + });
147 124  
148   - function goLogin() {
149   - userStore.logout(true);
150   - lockStore.resetLockInfo();
151   - }
  125 + /**
  126 + * @description: unLock
  127 + */
  128 + async function unLock() {
  129 + if (!password.value) {
  130 + return;
  131 + }
  132 + let pwd = password.value;
  133 + try {
  134 + loading.value = true;
  135 + const res = await lockStore.unLock(pwd);
  136 + errMsg.value = !res;
  137 + } finally {
  138 + loading.value = false;
  139 + }
  140 + }
152 141  
153   - function handleShowForm(show = false) {
154   - showDate.value = show;
155   - }
  142 + function goLogin() {
  143 + userStore.logout(true);
  144 + lockStore.resetLockInfo();
  145 + }
156 146  
157   - return {
158   - goLogin,
159   - userinfo,
160   - unLock,
161   - errMsg,
162   - loading,
163   - t,
164   - prefixCls,
165   - showDate,
166   - password,
167   - handleShowForm,
168   - headerImg,
169   - ...state,
170   - };
171   - },
172   - });
  147 + function handleShowForm(show = false) {
  148 + showDate.value = show;
  149 + }
173 150 </script>
174 151 <style lang="less" scoped>
175 152 @prefix-cls: ~'@{namespace}-lock-page';
... ...
src/views/sys/lock/index.vue
  View file @bb89c50
... ... @@ -3,18 +3,11 @@
3 3 <LockPage v-if="getIsLock" />
4 4 </transition>
5 5 </template>
6   -<script lang="ts">
7   - import { defineComponent, computed } from 'vue';
  6 +<script lang="ts" setup>
  7 + import { computed } from 'vue';
8 8 import LockPage from './LockPage.vue';
9   -
10 9 import { useLockStore } from '/@/store/modules/lock';
11   - export default defineComponent({
12   - name: 'Lock',
13   - components: { LockPage },
14   - setup() {
15   - const lockStore = useLockStore();
16   - const getIsLock = computed(() => lockStore?.getLockInfo?.isLock ?? false);
17   - return { getIsLock };
18   - },
19   - });
  10 +
  11 + const lockStore = useLockStore();
  12 + const getIsLock = computed(() => lockStore?.getLockInfo?.isLock ?? false);
20 13 </script>
... ...
src/views/sys/login/ForgetPasswordForm.vue
  View file @bb89c50
... ... @@ -32,58 +32,33 @@
32 32 </Form>
33 33 </template>
34 34 </template>
35   -<script lang="ts">
36   - import { defineComponent, reactive, ref, computed, unref } from 'vue';
37   -
  35 +<script lang="ts" setup>
  36 + import { reactive, ref, computed, unref } from 'vue';
38 37 import LoginFormTitle from './LoginFormTitle.vue';
39 38 import { Form, Input, Button } from 'ant-design-vue';
40 39 import { CountdownInput } from '/@/components/CountDown';
41   -
42 40 import { useI18n } from '/@/hooks/web/useI18n';
43 41 import { useLoginState, useFormRules, LoginStateEnum } from './useLogin';
44 42  
45   - export default defineComponent({
46   - name: 'ForgetPasswordForm',
47   - components: {
48   - Button,
49   - Form,
50   - FormItem: Form.Item,
51   - Input,
52   - CountdownInput,
53   - LoginFormTitle,
54   - },
55   - setup() {
56   - const { t } = useI18n();
57   - const { handleBackLogin, getLoginState } = useLoginState();
58   - const { getFormRules } = useFormRules();
59   -
60   - const formRef = ref();
61   - const loading = ref(false);
  43 + const FormItem = Form.Item;
  44 + const { t } = useI18n();
  45 + const { handleBackLogin, getLoginState } = useLoginState();
  46 + const { getFormRules } = useFormRules();
62 47  
63   - const formData = reactive({
64   - account: '',
65   - mobile: '',
66   - sms: '',
67   - });
  48 + const formRef = ref();
  49 + const loading = ref(false);
68 50  
69   - const getShow = computed(() => unref(getLoginState) === LoginStateEnum.RESET_PASSWORD);
  51 + const formData = reactive({
  52 + account: '',
  53 + mobile: '',
  54 + sms: '',
  55 + });
70 56  
71   - async function handleReset() {
72   - const form = unref(formRef);
73   - if (!form) return;
74   - await form.resetFields();
75   - }
  57 + const getShow = computed(() => unref(getLoginState) === LoginStateEnum.RESET_PASSWORD);
76 58  
77   - return {
78   - t,
79   - formRef,
80   - formData,
81   - getFormRules,
82   - handleReset,
83   - loading,
84   - handleBackLogin,
85   - getShow,
86   - };
87   - },
88   - });
  59 + async function handleReset() {
  60 + const form = unref(formRef);
  61 + if (!form) return;
  62 + await form.resetFields();
  63 + }
89 64 </script>
... ...
src/views/sys/login/Login.vue
  View file @bb89c50
... ... @@ -61,9 +61,8 @@
61 61 </div>
62 62 </div>
63 63 </template>
64   -<script lang="ts">
65   - import { defineComponent, computed } from 'vue';
66   -
  64 +<script lang="ts" setup>
  65 + import { computed, defineProps } from 'vue';
67 66 import { AppLogo } from '/@/components/Application';
68 67 import { AppLocalePicker, AppDarkModeToggle } from '/@/components/Application';
69 68 import LoginForm from './LoginForm.vue';
... ... @@ -71,43 +70,23 @@
71 70 import RegisterForm from './RegisterForm.vue';
72 71 import MobileForm from './MobileForm.vue';
73 72 import QrCodeForm from './QrCodeForm.vue';
74   -
75 73 import { useGlobSetting } from '/@/hooks/setting';
76 74 import { useI18n } from '/@/hooks/web/useI18n';
77 75 import { useDesign } from '/@/hooks/web/useDesign';
78 76 import { useLocaleStore } from '/@/store/modules/locale';
79 77  
80   - export default defineComponent({
81   - name: 'Login',
82   - components: {
83   - AppLogo,
84   - LoginForm,
85   - ForgetPasswordForm,
86   - RegisterForm,
87   - MobileForm,
88   - QrCodeForm,
89   - AppLocalePicker,
90   - AppDarkModeToggle,
91   - },
92   - props: {
93   - sessionTimeout: {
94   - type: Boolean,
95   - },
96   - },
97   - setup() {
98   - const globSetting = useGlobSetting();
99   - const { prefixCls } = useDesign('login');
100   - const { t } = useI18n();
101   - const localeStore = useLocaleStore();
102   -
103   - return {
104   - t,
105   - prefixCls,
106   - title: computed(() => globSetting?.title ?? ''),
107   - showLocale: localeStore.getShowPicker,
108   - };
  78 + defineProps({
  79 + sessionTimeout: {
  80 + type: Boolean,
109 81 },
110 82 });
  83 +
  84 + const globSetting = useGlobSetting();
  85 + const { prefixCls } = useDesign('login');
  86 + const { t } = useI18n();
  87 + const localeStore = useLocaleStore();
  88 + const showLocale = localeStore.getShowPicker;
  89 + const title = computed(() => globSetting?.title ?? '');
111 90 </script>
112 91 <style lang="less">
113 92 @prefix-cls: ~'@{namespace}-login';
... ...
src/views/sys/login/LoginForm.vue
  View file @bb89c50
... ... @@ -81,8 +81,8 @@
81 81 </div>
82 82 </Form>
83 83 </template>
84   -<script lang="ts">
85   - import { defineComponent, reactive, ref, toRaw, unref, computed } from 'vue';
  84 +<script lang="ts" setup>
  85 + import { reactive, ref, toRaw, unref, computed } from 'vue';
86 86  
87 87 import { Checkbox, Form, Input, Row, Col, Button, Divider } from 'ant-design-vue';
88 88 import {
... ... @@ -102,92 +102,60 @@
102 102 import { useDesign } from '/@/hooks/web/useDesign';
103 103 //import { onKeyStroke } from '@vueuse/core';
104 104  
105   - export default defineComponent({
106   - name: 'LoginForm',
107   - components: {
108   - [Col.name]: Col,
109   - [Row.name]: Row,
110   - Checkbox,
111   - Button,
112   - Form,
113   - FormItem: Form.Item,
114   - Input,
115   - Divider,
116   - LoginFormTitle,
117   - InputPassword: Input.Password,
118   - GithubFilled,
119   - WechatFilled,
120   - AlipayCircleFilled,
121   - GoogleCircleFilled,
122   - TwitterCircleFilled,
123   - },
124   - setup() {
125   - const { t } = useI18n();
126   - const { notification, createErrorModal } = useMessage();
127   - const { prefixCls } = useDesign('login');
128   - const userStore = useUserStore();
129   -
130   - const { setLoginState, getLoginState } = useLoginState();
131   - const { getFormRules } = useFormRules();
132   -
133   - const formRef = ref();
134   - const loading = ref(false);
135   - const rememberMe = ref(false);
136   -
137   - const formData = reactive({
138   - account: 'vben',
139   - password: '123456',
140   - });
141   -
142   - const { validForm } = useFormValid(formRef);
143   -
144   - //onKeyStroke('Enter', handleLogin);
145   -
146   - const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN);
  105 + const ACol = Col;
  106 + const ARow = Row;
  107 + const FormItem = Form.Item;
  108 + const InputPassword = Input.Password;
  109 + const { t } = useI18n();
  110 + const { notification, createErrorModal } = useMessage();
  111 + const { prefixCls } = useDesign('login');
  112 + const userStore = useUserStore();
  113 +
  114 + const { setLoginState, getLoginState } = useLoginState();
  115 + const { getFormRules } = useFormRules();
  116 +
  117 + const formRef = ref();
  118 + const loading = ref(false);
  119 + const rememberMe = ref(false);
  120 +
  121 + const formData = reactive({
  122 + account: 'vben',
  123 + password: '123456',
  124 + });
147 125  
148   - async function handleLogin() {
149   - const data = await validForm();
150   - if (!data) return;
151   - try {
152   - loading.value = true;
153   - const userInfo = await userStore.login(
154   - toRaw({
155   - password: data.password,
156   - username: data.account,
157   - mode: 'none', //不要默认的错误提示
158   - })
159   - );
160   - if (userInfo) {
161   - notification.success({
162   - message: t('sys.login.loginSuccessTitle'),
163   - description: `${t('sys.login.loginSuccessDesc')}: ${userInfo.realName}`,
164   - duration: 3,
165   - });
166   - }
167   - } catch (error) {
168   - createErrorModal({
169   - title: t('sys.api.errorTip'),
170   - content: error.message || t('sys.api.networkExceptionMsg'),
171   - getContainer: () => document.body.querySelector(`.${prefixCls}`) || document.body,
172   - });
173   - } finally {
174   - loading.value = false;
175   - }
  126 + const { validForm } = useFormValid(formRef);
  127 +
  128 + //onKeyStroke('Enter', handleLogin);
  129 +
  130 + const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN);
  131 +
  132 + async function handleLogin() {
  133 + const data = await validForm();
  134 + if (!data) return;
  135 + try {
  136 + loading.value = true;
  137 + const userInfo = await userStore.login(
  138 + toRaw({
  139 + password: data.password,
  140 + username: data.account,
  141 + mode: 'none', //不要默认的错误提示
  142 + })
  143 + );
  144 + if (userInfo) {
  145 + notification.success({
  146 + message: t('sys.login.loginSuccessTitle'),
  147 + description: `${t('sys.login.loginSuccessDesc')}: ${userInfo.realName}`,
  148 + duration: 3,
  149 + });
176 150 }
177   -
178   - return {
179   - t,
180   - prefixCls,
181   - formRef,
182   - formData,
183   - getFormRules,
184   - rememberMe,
185   - handleLogin,
186   - loading,
187   - setLoginState,
188   - LoginStateEnum,
189   - getShow,
190   - };
191   - },
192   - });
  151 + } catch (error) {
  152 + createErrorModal({
  153 + title: t('sys.api.errorTip'),
  154 + content: error.message || t('sys.api.networkExceptionMsg'),
  155 + getContainer: () => document.body.querySelector(`.${prefixCls}`) || document.body,
  156 + });
  157 + } finally {
  158 + loading.value = false;
  159 + }
  160 + }
193 161 </script>
... ...
src/views/sys/login/LoginFormTitle.vue
  View file @bb89c50
... ... @@ -3,33 +3,23 @@
3 3 {{ getFormTitle }}
4 4 </h2>
5 5 </template>
6   -<script lang="ts">
7   - import { defineComponent, computed, unref } from 'vue';
8   -
  6 +<script lang="ts" setup>
  7 + import { computed, unref } from 'vue';
9 8 import { useI18n } from '/@/hooks/web/useI18n';
10 9 import { LoginStateEnum, useLoginState } from './useLogin';
11 10  
12   - export default defineComponent({
13   - name: 'LoginFormTitle',
14   - setup() {
15   - const { t } = useI18n();
16   -
17   - const { getLoginState } = useLoginState();
  11 + const { t } = useI18n();
18 12  
19   - const getFormTitle = computed(() => {
20   - const titleObj = {
21   - [LoginStateEnum.RESET_PASSWORD]: t('sys.login.forgetFormTitle'),
22   - [LoginStateEnum.LOGIN]: t('sys.login.signInFormTitle'),
23   - [LoginStateEnum.REGISTER]: t('sys.login.signUpFormTitle'),
24   - [LoginStateEnum.MOBILE]: t('sys.login.mobileSignInFormTitle'),
25   - [LoginStateEnum.QR_CODE]: t('sys.login.qrSignInFormTitle'),
26   - };
27   - return titleObj[unref(getLoginState)];
28   - });
  13 + const { getLoginState } = useLoginState();
29 14  
30   - return {
31   - getFormTitle,
32   - };
33   - },
  15 + const getFormTitle = computed(() => {
  16 + const titleObj = {
  17 + [LoginStateEnum.RESET_PASSWORD]: t('sys.login.forgetFormTitle'),
  18 + [LoginStateEnum.LOGIN]: t('sys.login.signInFormTitle'),
  19 + [LoginStateEnum.REGISTER]: t('sys.login.signUpFormTitle'),
  20 + [LoginStateEnum.MOBILE]: t('sys.login.mobileSignInFormTitle'),
  21 + [LoginStateEnum.QR_CODE]: t('sys.login.qrSignInFormTitle'),
  22 + };
  23 + return titleObj[unref(getLoginState)];
34 24 });
35 25 </script>
... ...
src/views/sys/login/MobileForm.vue
  View file @bb89c50
... ... @@ -30,59 +30,34 @@
30 30 </Form>
31 31 </template>
32 32 </template>
33   -<script lang="ts">
34   - import { defineComponent, reactive, ref, computed, unref } from 'vue';
35   -
  33 +<script lang="ts" setup>
  34 + import { reactive, ref, computed, unref } from 'vue';
36 35 import { Form, Input, Button } from 'ant-design-vue';
37 36 import { CountdownInput } from '/@/components/CountDown';
38 37 import LoginFormTitle from './LoginFormTitle.vue';
39   -
40 38 import { useI18n } from '/@/hooks/web/useI18n';
41 39 import { useLoginState, useFormRules, useFormValid, LoginStateEnum } from './useLogin';
42 40  
43   - export default defineComponent({
44   - name: 'MobileForm',
45   - components: {
46   - Button,
47   - Form,
48   - FormItem: Form.Item,
49   - Input,
50   - CountdownInput,
51   - LoginFormTitle,
52   - },
53   - setup() {
54   - const { t } = useI18n();
55   - const { handleBackLogin, getLoginState } = useLoginState();
56   - const { getFormRules } = useFormRules();
57   -
58   - const formRef = ref();
59   - const loading = ref(false);
  41 + const FormItem = Form.Item;
  42 + const { t } = useI18n();
  43 + const { handleBackLogin, getLoginState } = useLoginState();
  44 + const { getFormRules } = useFormRules();
60 45  
61   - const formData = reactive({
62   - mobile: '',
63   - sms: '',
64   - });
  46 + const formRef = ref();
  47 + const loading = ref(false);
65 48  
66   - const { validForm } = useFormValid(formRef);
  49 + const formData = reactive({
  50 + mobile: '',
  51 + sms: '',
  52 + });
67 53  
68   - const getShow = computed(() => unref(getLoginState) === LoginStateEnum.MOBILE);
  54 + const { validForm } = useFormValid(formRef);
69 55  
70   - async function handleLogin() {
71   - const data = await validForm();
72   - if (!data) return;
73   - console.log(data);
74   - }
  56 + const getShow = computed(() => unref(getLoginState) === LoginStateEnum.MOBILE);
75 57  
76   - return {
77   - t,
78   - formRef,
79   - formData,
80   - getFormRules,
81   - handleLogin,
82   - loading,
83   - handleBackLogin,
84   - getShow,
85   - };
86   - },
87   - });
  58 + async function handleLogin() {
  59 + const data = await validForm();
  60 + if (!data) return;
  61 + console.log(data);
  62 + }
88 63 </script>
... ...
src/views/sys/login/QrCodeForm.vue
  View file @bb89c50
... ... @@ -14,37 +14,18 @@
14 14 </div>
15 15 </template>
16 16 </template>
17   -<script lang="ts">
18   - import { defineComponent, computed, unref } from 'vue';
19   -
  17 +<script lang="ts" setup>
  18 + import { computed, unref } from 'vue';
20 19 import LoginFormTitle from './LoginFormTitle.vue';
21 20 import { Button, Divider } from 'ant-design-vue';
22 21 import { QrCode } from '/@/components/Qrcode/index';
23   -
24 22 import { useI18n } from '/@/hooks/web/useI18n';
25 23 import { useLoginState, LoginStateEnum } from './useLogin';
26 24  
27 25 const qrCodeUrl = 'https://vvbin.cn/next/login';
28   - export default defineComponent({
29   - name: 'QrCodeForm',
30   - components: {
31   - Button,
32   - QrCode,
33   - Divider,
34   - LoginFormTitle,
35   - },
36   - setup() {
37   - const { t } = useI18n();
38   - const { handleBackLogin, getLoginState } = useLoginState();
39 26  
40   - const getShow = computed(() => unref(getLoginState) === LoginStateEnum.QR_CODE);
  27 + const { t } = useI18n();
  28 + const { handleBackLogin, getLoginState } = useLoginState();
41 29  
42   - return {
43   - t,
44   - handleBackLogin,
45   - qrCodeUrl,
46   - getShow,
47   - };
48   - },
49   - });
  30 + const getShow = computed(() => unref(getLoginState) === LoginStateEnum.QR_CODE);
50 31 </script>
... ...
src/views/sys/login/RegisterForm.vue
  View file @bb89c50
... ... @@ -65,67 +65,40 @@
65 65 </Form>
66 66 </template>
67 67 </template>
68   -<script lang="ts">
69   - import { defineComponent, reactive, ref, unref, computed } from 'vue';
70   -
  68 +<script lang="ts" setup>
  69 + import { reactive, ref, unref, computed } from 'vue';
71 70 import LoginFormTitle from './LoginFormTitle.vue';
72 71 import { Form, Input, Button, Checkbox } from 'ant-design-vue';
73 72 import { StrengthMeter } from '/@/components/StrengthMeter';
74 73 import { CountdownInput } from '/@/components/CountDown';
75   -
76 74 import { useI18n } from '/@/hooks/web/useI18n';
77 75 import { useLoginState, useFormRules, useFormValid, LoginStateEnum } from './useLogin';
78 76  
79   - export default defineComponent({
80   - name: 'RegisterPasswordForm',
81   - components: {
82   - Button,
83   - Form,
84   - FormItem: Form.Item,
85   - Input,
86   - InputPassword: Input.Password,
87   - Checkbox,
88   - StrengthMeter,
89   - CountdownInput,
90   - LoginFormTitle,
91   - },
92   - setup() {
93   - const { t } = useI18n();
94   - const { handleBackLogin, getLoginState } = useLoginState();
95   -
96   - const formRef = ref();
97   - const loading = ref(false);
  77 + const FormItem = Form.Item;
  78 + const InputPassword = Input.Password;
  79 + const { t } = useI18n();
  80 + const { handleBackLogin, getLoginState } = useLoginState();
98 81  
99   - const formData = reactive({
100   - account: '',
101   - password: '',
102   - confirmPassword: '',
103   - mobile: '',
104   - sms: '',
105   - policy: false,
106   - });
  82 + const formRef = ref();
  83 + const loading = ref(false);
107 84  
108   - const { getFormRules } = useFormRules(formData);
109   - const { validForm } = useFormValid(formRef);
  85 + const formData = reactive({
  86 + account: '',
  87 + password: '',
  88 + confirmPassword: '',
  89 + mobile: '',
  90 + sms: '',
  91 + policy: false,
  92 + });
110 93  
111   - const getShow = computed(() => unref(getLoginState) === LoginStateEnum.REGISTER);
  94 + const { getFormRules } = useFormRules(formData);
  95 + const { validForm } = useFormValid(formRef);
112 96  
113   - async function handleRegister() {
114   - const data = await validForm();
115   - if (!data) return;
116   - console.log(data);
117   - }
  97 + const getShow = computed(() => unref(getLoginState) === LoginStateEnum.REGISTER);
118 98  
119   - return {
120   - t,
121   - formRef,
122   - formData,
123   - getFormRules,
124   - handleRegister,
125   - loading,
126   - handleBackLogin,
127   - getShow,
128   - };
129   - },
130   - });
  99 + async function handleRegister() {
  100 + const data = await validForm();
  101 + if (!data) return;
  102 + console.log(data);
  103 + }
131 104 </script>
... ...
src/views/sys/login/SessionTimeoutLogin.vue
  View file @bb89c50
... ... @@ -5,47 +5,39 @@
5 5 </div>
6 6 </transition>
7 7 </template>
8   -<script lang="ts">
9   - import { defineComponent, onBeforeUnmount, onMounted, ref } from 'vue';
  8 +<script lang="ts" setup>
  9 + import { onBeforeUnmount, onMounted, ref } from 'vue';
10 10 import Login from './Login.vue';
11   -
12 11 import { useDesign } from '/@/hooks/web/useDesign';
13 12 import { useUserStore } from '/@/store/modules/user';
14 13 import { usePermissionStore } from '/@/store/modules/permission';
15 14 import { useAppStore } from '/@/store/modules/app';
16 15 import { PermissionModeEnum } from '/@/enums/appEnum';
17   - export default defineComponent({
18   - name: 'SessionTimeoutLogin',
19   - components: { Login },
20   - setup() {
21   - const { prefixCls } = useDesign('st-login');
22   - const userStore = useUserStore();
23   - const permissionStore = usePermissionStore();
24   - const appStore = useAppStore();
25   - const userId = ref<Nullable<number | string>>(0);
26 16  
27   - const isBackMode = () => {
28   - return appStore.getProjectConfig.permissionMode === PermissionModeEnum.BACK;
29   - };
  17 + const { prefixCls } = useDesign('st-login');
  18 + const userStore = useUserStore();
  19 + const permissionStore = usePermissionStore();
  20 + const appStore = useAppStore();
  21 + const userId = ref<Nullable<number | string>>(0);
30 22  
31   - onMounted(() => {
32   - // 记录当前的UserId
33   - userId.value = userStore.getUserInfo?.userId;
34   - console.log('Mounted', userStore.getUserInfo);
35   - });
  23 + const isBackMode = () => {
  24 + return appStore.getProjectConfig.permissionMode === PermissionModeEnum.BACK;
  25 + };
36 26  
37   - onBeforeUnmount(() => {
38   - if (userId.value && userId.value !== userStore.getUserInfo.userId) {
39   - // 登录的不是同一个用户，刷新整个页面以便丢弃之前用户的页面状态
40   - document.location.reload();
41   - } else if (isBackMode() && permissionStore.getLastBuildMenuTime === 0) {
42   - // 后台权限模式下，没有成功加载过菜单，就重新加载整个页面。这通常发生在会话过期后按F5刷新整个页面后载入了本模块这种场景
43   - document.location.reload();
44   - }
45   - });
  27 + onMounted(() => {
  28 + // 记录当前的UserId
  29 + userId.value = userStore.getUserInfo?.userId;
  30 + console.log('Mounted', userStore.getUserInfo);
  31 + });
46 32  
47   - return { prefixCls };
48   - },
  33 + onBeforeUnmount(() => {
  34 + if (userId.value && userId.value !== userStore.getUserInfo.userId) {
  35 + // 登录的不是同一个用户，刷新整个页面以便丢弃之前用户的页面状态
  36 + document.location.reload();
  37 + } else if (isBackMode() && permissionStore.getLastBuildMenuTime === 0) {
  38 + // 后台权限模式下，没有成功加载过菜单，就重新加载整个页面。这通常发生在会话过期后按F5刷新整个页面后载入了本模块这种场景
  39 + document.location.reload();
  40 + }
49 41 });
50 42 </script>
51 43 <style lang="less" scoped>
... ...
src/views/sys/redirect/index.vue
  View file @bb89c50
1 1 <template>
2 2 <div></div>
3 3 </template>
4   -<script lang="ts">
5   - import { defineComponent, unref } from 'vue';
  4 +<script lang="ts" setup>
  5 + import { unref } from 'vue';
6 6 import { useRouter } from 'vue-router';
7 7  
8   - export default defineComponent({
9   - name: 'Redirect',
10   - setup() {
11   - const { currentRoute, replace } = useRouter();
  8 + const { currentRoute, replace } = useRouter();
12 9  
13   - const { params, query } = unref(currentRoute);
14   - const { path } = params;
  10 + const { params, query } = unref(currentRoute);
  11 + const { path } = params;
15 12  
16   - const _path = Array.isArray(path) ? path.join('/') : path;
  13 + const _path = Array.isArray(path) ? path.join('/') : path;
17 14  
18   - replace({
19   - path: '/' + _path,
20   - query,
21   - });
22   -
23   - return {};
24   - },
  15 + replace({
  16 + path: '/' + _path,
  17 + query,
25 18 });
26 19 </script>
... ...