Commit c19bab59b318e98bc372a9e6771d44660cf4922e
Merge branch 'ft-dev' into 'main'
fix:修复账号管理中的用户详情,点击跳转404问题 See merge request huang/yun-teng-iot-front!71
Showing
2 changed files
with
61 additions
and
30 deletions
| 1 | <template> | 1 | <template> |
| 2 | <div> | 2 | <div> |
| 3 | - <PageWrapper :title="`用户资料`" contentBackground @back="goBack"> | ||
| 4 | - <Description size="middle" @register="register" /> | ||
| 5 | - </PageWrapper> | 3 | + <BasicModal |
| 4 | + width="650px" | ||
| 5 | + v-bind="$attrs" | ||
| 6 | + @register="registerModal" | ||
| 7 | + :title="getTitle" | ||
| 8 | + @ok="handleSubmit" | ||
| 9 | + > | ||
| 10 | + <PageWrapper :title="`用户资料`" contentBackground @back="goBack"> | ||
| 11 | + <Description size="middle" @register="register" /> | ||
| 12 | + </PageWrapper> | ||
| 13 | + </BasicModal> | ||
| 6 | </div> | 14 | </div> |
| 7 | </template> | 15 | </template> |
| 8 | 16 | ||
| 9 | <script> | 17 | <script> |
| 10 | - import { defineComponent } from 'vue'; | ||
| 11 | - import { useRoute } from 'vue-router'; | 18 | + import { defineComponent, ref } from 'vue'; |
| 19 | + // import { useRoute } from 'vue-router'; | ||
| 12 | import { PageWrapper } from '/@/components/Page'; | 20 | import { PageWrapper } from '/@/components/Page'; |
| 13 | import { useGo } from '/@/hooks/web/usePage'; | 21 | import { useGo } from '/@/hooks/web/usePage'; |
| 14 | import { Description } from '../../../components/Description'; | 22 | import { Description } from '../../../components/Description'; |
| @@ -16,14 +24,18 @@ | @@ -16,14 +24,18 @@ | ||
| 16 | import { getAccountInfo } from '../../../api/system/system'; | 24 | import { getAccountInfo } from '../../../api/system/system'; |
| 17 | import { accountSchema } from './account.detail.data'; | 25 | import { accountSchema } from './account.detail.data'; |
| 18 | import { useDescription } from '../../../components/Description'; | 26 | import { useDescription } from '../../../components/Description'; |
| 27 | + import { BasicModal, useModalInner } from '/@/components/Modal'; | ||
| 28 | + | ||
| 19 | const accountData = {}; | 29 | const accountData = {}; |
| 20 | export default defineComponent({ | 30 | export default defineComponent({ |
| 21 | name: 'AccountDetail', | 31 | name: 'AccountDetail', |
| 22 | - components: { PageWrapper, Description }, | 32 | + components: { PageWrapper, Description, BasicModal }, |
| 23 | setup() { | 33 | setup() { |
| 24 | - const route = useRoute(); | 34 | + // const route = useRoute(); |
| 25 | const go = useGo(); | 35 | const go = useGo(); |
| 26 | const { setTitle } = useTabs(); | 36 | const { setTitle } = useTabs(); |
| 37 | + const getId = ref(''); | ||
| 38 | + const getTitle = ref(''); | ||
| 27 | const [register, methods] = useDescription({ | 39 | const [register, methods] = useDescription({ |
| 28 | title: '账号基础信息', | 40 | title: '账号基础信息', |
| 29 | data: accountData, | 41 | data: accountData, |
| @@ -31,30 +43,35 @@ | @@ -31,30 +43,35 @@ | ||
| 31 | schema: accountSchema, | 43 | schema: accountSchema, |
| 32 | column: 3, | 44 | column: 3, |
| 33 | }); | 45 | }); |
| 34 | - getAccountInfo(route.params?.id).then((result) => { | ||
| 35 | - Reflect.set(accountData, 'realName', result.realName); | ||
| 36 | - Reflect.set(accountData, 'phoneNumber', result.phoneNumber); | ||
| 37 | - Reflect.set(accountData, 'email', result.email); | ||
| 38 | - Reflect.set(accountData, 'username', result.username); | ||
| 39 | - Reflect.set( | ||
| 40 | - accountData, | ||
| 41 | - 'enabled', | ||
| 42 | - result.enabled ? '正常' : !result.enabled ? '禁用' : '已过期' | ||
| 43 | - ); | ||
| 44 | - Reflect.set(accountData, 'accountExpireTime', result.accountExpireTime); | ||
| 45 | - Reflect.set(accountData, 'createTime', result.createTime); | ||
| 46 | - Reflect.set(accountData, 'updateTime', result.updateTime); | ||
| 47 | - Reflect.set(accountData, 'deptId', result.deptId); | ||
| 48 | - // 设置Tab的标题(不会影响页面标题) | ||
| 49 | - setTitle('详情:用户' + result.realName); | ||
| 50 | - methods.setDescProps(accountData); | 46 | + |
| 47 | + const [registerModal] = useModalInner(async (data) => { | ||
| 48 | + getId.value = await data.record.id; | ||
| 49 | + getAccountInfo(getId.value).then((result) => { | ||
| 50 | + Reflect.set(accountData, 'realName', result.realName); | ||
| 51 | + Reflect.set(accountData, 'phoneNumber', result.phoneNumber); | ||
| 52 | + Reflect.set(accountData, 'email', result.email); | ||
| 53 | + Reflect.set(accountData, 'username', result.username); | ||
| 54 | + Reflect.set( | ||
| 55 | + accountData, | ||
| 56 | + 'enabled', | ||
| 57 | + result.enabled ? '正常' : !result.enabled ? '禁用' : '已过期' | ||
| 58 | + ); | ||
| 59 | + Reflect.set(accountData, 'accountExpireTime', result.accountExpireTime); | ||
| 60 | + Reflect.set(accountData, 'createTime', result.createTime); | ||
| 61 | + Reflect.set(accountData, 'updateTime', result.updateTime); | ||
| 62 | + Reflect.set(accountData, 'deptId', result.deptId); | ||
| 63 | + // 设置Tab的标题(不会影响页面标题) | ||
| 64 | + setTitle('详情:用户' + result.realName); | ||
| 65 | + getTitle.value = '详情:用户' + result.realName; | ||
| 66 | + methods.setDescProps(accountData); | ||
| 67 | + }); | ||
| 51 | }); | 68 | }); |
| 52 | // 页面左侧点击返回链接时的操作 | 69 | // 页面左侧点击返回链接时的操作 |
| 53 | function goBack() { | 70 | function goBack() { |
| 54 | // 本例的效果时点击返回始终跳转到账号列表页,实际应用时可返回上一页 | 71 | // 本例的效果时点击返回始终跳转到账号列表页,实际应用时可返回上一页 |
| 55 | go('/system/account'); | 72 | go('/system/account'); |
| 56 | } | 73 | } |
| 57 | - return { goBack, accountSchema, accountData, register }; | 74 | + return { goBack, accountSchema, accountData, register, registerModal, getTitle }; |
| 58 | }, | 75 | }, |
| 59 | }); | 76 | }); |
| 60 | </script> | 77 | </script> |
| @@ -62,6 +62,7 @@ | @@ -62,6 +62,7 @@ | ||
| 62 | </template> | 62 | </template> |
| 63 | </BasicTable> | 63 | </BasicTable> |
| 64 | <AccountModal @register="registerModal" @success="handleSuccess" /> | 64 | <AccountModal @register="registerModal" @success="handleSuccess" /> |
| 65 | + <AccountDetail @register="registerDetailModal" @success="handleSuccess" /> | ||
| 65 | </PageWrapper> | 66 | </PageWrapper> |
| 66 | </div> | 67 | </div> |
| 67 | </template> | 68 | </template> |
| @@ -74,17 +75,26 @@ | @@ -74,17 +75,26 @@ | ||
| 74 | import { Tag } from 'ant-design-vue'; | 75 | import { Tag } from 'ant-design-vue'; |
| 75 | import { useModal } from '/@/components/Modal'; | 76 | import { useModal } from '/@/components/Modal'; |
| 76 | import AccountModal from './AccountModal.vue'; | 77 | import AccountModal from './AccountModal.vue'; |
| 77 | - | 78 | + import AccountDetail from './AccountDetail.vue'; |
| 78 | import { columns, searchFormSchema } from './account.data'; | 79 | import { columns, searchFormSchema } from './account.data'; |
| 79 | - import { useGo } from '/@/hooks/web/usePage'; | 80 | + // import { useGo } from '/@/hooks/web/usePage'; |
| 80 | import { useMessage } from '/@/hooks/web/useMessage'; | 81 | import { useMessage } from '/@/hooks/web/useMessage'; |
| 81 | 82 | ||
| 82 | export default defineComponent({ | 83 | export default defineComponent({ |
| 83 | name: 'AccountManagement', | 84 | name: 'AccountManagement', |
| 84 | - components: { BasicTable, PageWrapper, OrganizationIdTree, AccountModal, TableAction, Tag }, | 85 | + components: { |
| 86 | + BasicTable, | ||
| 87 | + PageWrapper, | ||
| 88 | + OrganizationIdTree, | ||
| 89 | + AccountModal, | ||
| 90 | + TableAction, | ||
| 91 | + Tag, | ||
| 92 | + AccountDetail, | ||
| 93 | + }, | ||
| 85 | setup() { | 94 | setup() { |
| 86 | - const go = useGo(); | 95 | + // const go = useGo(); |
| 87 | const [registerModal, { openModal }] = useModal(); | 96 | const [registerModal, { openModal }] = useModal(); |
| 97 | + const [registerDetailModal, { openModal: openDetailModal }] = useModal(); | ||
| 88 | const { createMessage } = useMessage(); | 98 | const { createMessage } = useMessage(); |
| 89 | let searchInfo = reactive<Recordable>({}); | 99 | let searchInfo = reactive<Recordable>({}); |
| 90 | const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo); | 100 | const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo); |
| @@ -147,10 +157,14 @@ | @@ -147,10 +157,14 @@ | ||
| 147 | } | 157 | } |
| 148 | 158 | ||
| 149 | function handleView(record: Recordable) { | 159 | function handleView(record: Recordable) { |
| 150 | - go('/system/account_detail/' + record.id); | 160 | + openDetailModal(true, { |
| 161 | + record, | ||
| 162 | + }); | ||
| 163 | + // go('/system/account_detail/' + record.id); | ||
| 151 | } | 164 | } |
| 152 | 165 | ||
| 153 | return { | 166 | return { |
| 167 | + registerDetailModal, | ||
| 154 | registerTable, | 168 | registerTable, |
| 155 | registerModal, | 169 | registerModal, |
| 156 | handleCreate, | 170 | handleCreate, |