20 changed files with 1269 additions and 552 deletions
@ -0,0 +1,359 @@ |
|||
<template> |
|||
<div class="common-layout"> |
|||
<el-container> |
|||
<!-- 顶部菜单 --> |
|||
<el-header class="bg-black flex items-center justify-between" height="50px"> |
|||
<el-space class="flex items-center"> |
|||
<el-avatar src="https://oss.wsdns.cn/20240331/7f7f7f57e12c45338beb7bfc7ecccfe9.png" class="cursor-pointer" shape="square" :size="32" @click="navigateTo('/manage', { replace: false })" /> |
|||
<div class="expand flex items-center justify-center block hover:bg-gray-700 h-[32px] w-[32px] cursor-pointer" @click="visible = !visible"><el-icon color="white" class="block" size="20"><Grid /></el-icon></div> |
|||
</el-space> |
|||
<template v-if="token"> |
|||
<el-dropdown @command="handleCommand"> |
|||
<el-avatar class="cursor-pointer" :src="userInfo?.avatar" :size="30" /> |
|||
<el-button circle :icon="ElIconUserFilled" color="#155FAA"></el-button> |
|||
<template #dropdown> |
|||
<el-dropdown-menu> |
|||
<el-dropdown-item command="user">个人中心</el-dropdown-item> |
|||
<el-dropdown-item divided command="logOut" @click="navigateTo('/user/logout')">退出</el-dropdown-item> |
|||
</el-dropdown-menu> |
|||
</template> |
|||
</el-dropdown> |
|||
</template> |
|||
</el-header> |
|||
<!-- 主体 --> |
|||
<el-container> |
|||
<!-- 左侧菜单区域 --> |
|||
<el-aside width="200px" class="bg-white" :style="{ minHeight: 'calc(100vh - 50px)' }"> |
|||
<div class="flex items-center justify-between py-4 px-5 text-lg font-bold text-center bg-white border-b-1 border-b-gray-100 border-b-solid"> |
|||
企业官网 WDS |
|||
<el-icon><Memo /></el-icon> |
|||
</div> |
|||
<el-menu |
|||
default-active="2" |
|||
class="el-menu-vertical-demo" |
|||
style="border: none" |
|||
@open="handleOpen" |
|||
@close="handleClose" |
|||
> |
|||
<el-menu-item index="1"> |
|||
<span>概况</span> |
|||
</el-menu-item> |
|||
<el-menu-item index="2"> |
|||
<span>栏目管理</span> |
|||
</el-menu-item> |
|||
<el-menu-item index="3"> |
|||
<span>文章列表</span> |
|||
</el-menu-item> |
|||
<el-menu-item index="4"> |
|||
<span>素材管理</span> |
|||
</el-menu-item> |
|||
<el-menu-item index="5"> |
|||
<span>广告管理</span> |
|||
</el-menu-item> |
|||
<el-menu-item index="6"> |
|||
<span>订单管理</span> |
|||
</el-menu-item> |
|||
<el-menu-item index="7"> |
|||
<span>用户管理</span> |
|||
</el-menu-item> |
|||
<el-menu-item index="8"> |
|||
<span>系统设置</span> |
|||
</el-menu-item> |
|||
</el-menu> |
|||
</el-aside> |
|||
<!-- 左侧内容区域 --> |
|||
<el-container> |
|||
<el-main class="overflow-y-hidden relative"> |
|||
<div class="absolute inset-0 bg-black opacity-10 z-1" v-if="visible" @click="visible = false"></div> |
|||
<div v-if="visible" class="drawer w-screen-lg h-full bg-white left-0 top-[50px] fixed z-2 shadow-lg"> |
|||
<div class="flex items-center justify-between p-3 border-b border-b-solid border-b-gray-200"> |
|||
<div class="text-lg font-bold">产品与服务</div> |
|||
<el-space class="flex items-center"> |
|||
<el-input |
|||
class="w-20" |
|||
placeholder="站内搜索" |
|||
:suffix-icon="ElIconSearch" |
|||
v-model="form.comments" |
|||
@keyup.enter.native="handleSearch" |
|||
/> |
|||
<!-- <el-input v-model="search" placeholder="搜索应用" class="w-[200px]" />--> |
|||
<div class="cursor-pointer mt-1 ml-5" @click="visible = false"><el-icon size="24" color="gray"><Close /></el-icon></div> |
|||
</el-space> |
|||
</div> |
|||
<div class="menu-content flex"> |
|||
<div class="w-[200px] bg-gray-50"> |
|||
<el-menu |
|||
default-active="2" |
|||
class="el-menu-vertical-demo" |
|||
style="border-right: 1px solid #f9fafb" |
|||
@open="handleOpen" |
|||
@close="handleClose" |
|||
> |
|||
<el-menu-item index="2"> |
|||
<span>精选</span> |
|||
</el-menu-item> |
|||
<el-menu-item index="3"> |
|||
<span>网页</span> |
|||
</el-menu-item> |
|||
<el-menu-item index="4"> |
|||
<span>移动</span> |
|||
</el-menu-item> |
|||
<el-menu-item index="5"> |
|||
<span>办公</span> |
|||
</el-menu-item> |
|||
<el-menu-item index="6"> |
|||
<span>其他</span> |
|||
</el-menu-item> |
|||
</el-menu> |
|||
</div> |
|||
<div class="w-full p-3"> |
|||
<el-scrollbar class="w-full" height="calc(100vh - 108px)"> |
|||
<el-row :gutter="16"> |
|||
<template v-for="item in 20" :key="item"> |
|||
<el-col :span="8"> |
|||
<div class="px-3 py-1 mb-2 text-sm text-gray-700 font-bold flex justify-between items-center">API 与工具</div> |
|||
<p class="scrollbar-demo-item hover:bg-gray-100 px-3 py-1 mb-2 cursor-pointer text-sm text-gray-500 flex justify-between items-center"> |
|||
<span class="product-name">{{ item }} 云服务器 ECS</span> |
|||
<span class="icon flex items-center hover:flex"> |
|||
<el-icon color="gray"><Star /></el-icon> |
|||
</span> |
|||
</p> |
|||
</el-col> |
|||
</template> |
|||
</el-row> |
|||
</el-scrollbar> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="my-3"> |
|||
<el-alert type="warning"> |
|||
<template #title> |
|||
<text type="text" class="cursor-pointer">关于《小程序技术平台服务协议》更新公告</text> |
|||
</template> |
|||
</el-alert> |
|||
</div> |
|||
<el-card shadow="hover" class="flash mt-4 bg-white hover:shadow rounded-lg"> |
|||
<template #header>我的应用</template> |
|||
<el-row :gutter="16"> |
|||
<template v-for="(item,index) in list" :key="index"> |
|||
<el-col :span="6" @click="openSpmUrl(`https://${item.tenantId}.websoft.top/token-login`,item,item.tenantId)"> |
|||
<div class="app-item block border-solid rounded-lg border-gray-300 border-1 bg-white mb-4 p-3 flex flex-row items-center hover:border-blue-4 hover:border-1.5 cursor-pointer"> |
|||
<el-avatar :src="item?.logo" shape="square" /> |
|||
<div class="info ml-2"> |
|||
<div class="app-item-title font-bold flex items-center">{{ item.tenantName }}<el-tag type="warning" class="ml-2" size="small">网页</el-tag></div> |
|||
<div class="app-item-desc text-gray-400">{{ item.comments }}</div> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
</template> |
|||
</el-row> |
|||
</el-card> |
|||
<!-- <el-card shadow="hover" class="mt-4">--> |
|||
<!-- <el-tabs v-model="activeIndex" type="">--> |
|||
<!-- <el-tab-pane label="微信小程序" name="mp-weixin">--> |
|||
<!-- <el-table :data="tableData" stripe style="width: 100%">--> |
|||
<!-- <el-table-column prop="date" label="Date" width="180" />--> |
|||
<!-- <el-table-column prop="name" label="Name" width="180" />--> |
|||
<!-- <el-table-column prop="address" label="Address" />--> |
|||
<!-- </el-table>--> |
|||
<!-- </el-tab-pane>--> |
|||
<!-- <el-tab-pane label="网页/移动应用" name="web">--> |
|||
<!-- </el-tab-pane>--> |
|||
<!-- </el-tabs>--> |
|||
<!-- </el-card>--> |
|||
<el-card shadow="hover" class="flash mt-4 bg-white hover:shadow "> |
|||
<template #header>开发工具推荐</template> |
|||
<el-row :gutter="16"> |
|||
<template v-for="(item,index) in list" :key="index"> |
|||
<el-col :span="6" @click="openSpmUrl(`https://${item.tenantId}.websoft.top/token-login`,item,item.tenantId)"> |
|||
<div class="app-item block border-solid rounded-lg border-gray-300 border-1 mb-4 p-3 flex flex-row items-center hover:border-blue-4 hover:border-1.5 cursor-pointer"> |
|||
<div class="info ml-2"> |
|||
<div class="app-item-title">{{ item.tenantName }}</div> |
|||
<div class="app-item-desc text-gray-400">{{ item.comments }}</div> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
</template> |
|||
</el-row> |
|||
</el-card> |
|||
</el-main> |
|||
<el-footer class="fixed bottom-0 items-center flex justify-center text-gray-400" :style="{ width: 'calc(100vw - 200px)' }"> |
|||
<span>Copyright © {{ new Date().getFullYear() }} {{ config?.copyright }}</span> |
|||
</el-footer> |
|||
</el-container> |
|||
</el-container> |
|||
</el-container> |
|||
</div> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
import {useConfigInfo, useToken, useWebsite} from "~/composables/configState"; |
|||
import useFormData from '@/utils/use-form-data'; |
|||
import type { User } from '@/api/system/user/model'; |
|||
import { ref } from 'vue' |
|||
import {useServerRequest} from "~/composables/useServerRequest"; |
|||
import type {ApiResult, PageResult} from "~/api"; |
|||
import type {Company} from "~/api/system/company/model"; |
|||
import type {Tenant} from "~/api/system/tenant/model"; |
|||
|
|||
// 配置信息 |
|||
const runtimeConfig = useRuntimeConfig(); |
|||
const route = useRoute(); |
|||
const website = useWebsite() |
|||
const config = useConfigInfo(); |
|||
const token = useToken(); |
|||
const userInfo = ref<User>(); |
|||
const visible = ref(false); |
|||
const showIcon = ref(false); |
|||
const activeIndex = ref('mp-weixin'); |
|||
const list = ref<Tenant[]>(); |
|||
const avatar = ref(localStorage.getItem('avatar')) |
|||
|
|||
|
|||
import { |
|||
Document, |
|||
Menu as IconMenu, |
|||
Location, |
|||
Expand, |
|||
MoreFilled, |
|||
Grid, |
|||
Memo, |
|||
Close, |
|||
Star, |
|||
Setting, |
|||
} from '@element-plus/icons-vue' |
|||
import {navigateTo} from "#imports"; |
|||
const handleOpen = (key: string, keyPath: string[]) => { |
|||
console.log(key, keyPath) |
|||
} |
|||
const handleClose = (key: string, keyPath: string[]) => { |
|||
console.log(key, keyPath) |
|||
} |
|||
|
|||
const tableData = [ |
|||
{ |
|||
date: '2016-05-03', |
|||
name: 'Tom', |
|||
address: 'No. 189, Grove St, Los Angeles', |
|||
}, |
|||
{ |
|||
date: '2016-05-02', |
|||
name: 'Tom', |
|||
address: 'No. 189, Grove St, Los Angeles', |
|||
}, |
|||
{ |
|||
date: '2016-05-04', |
|||
name: 'Tom', |
|||
address: 'No. 189, Grove St, Los Angeles', |
|||
}, |
|||
{ |
|||
date: '2016-05-01', |
|||
name: 'Tom', |
|||
address: 'No. 189, Grove St, Los Angeles', |
|||
}, |
|||
] |
|||
|
|||
// 配置信息 |
|||
const { form, assignFields } = useFormData<User>({ |
|||
userId: undefined, |
|||
nickname: '', |
|||
username: '', |
|||
phone: '', |
|||
mobile: '', |
|||
sex: '', |
|||
sexName: '', |
|||
email: '', |
|||
password: '', |
|||
code: '', |
|||
smsCode: '', |
|||
comments: '', |
|||
remember: true, |
|||
isAdmin: true |
|||
}); |
|||
|
|||
useHead({ |
|||
title: `用户中心 - ${config.value?.siteName}`, |
|||
meta: [{ name: website.value.keywords, content: website.value.comments }] |
|||
}); |
|||
|
|||
|
|||
function handleCommand(command: string) { |
|||
switch (command) { |
|||
case 'logOut': |
|||
logOut(); |
|||
break; |
|||
default: |
|||
navigateTo('/user'); |
|||
break; |
|||
} |
|||
} |
|||
|
|||
function logOut() { |
|||
token.value = '' |
|||
navigateTo('/passport/login') |
|||
} |
|||
|
|||
const onDone = (index: string) => { |
|||
activeIndex.value = index; |
|||
} |
|||
|
|||
const onSubmit = async () => { |
|||
const {data: modify } = await useServerRequest<ApiResult<User>>('/auth/user',{ |
|||
baseURL: runtimeConfig.public.apiServer, |
|||
method: 'put', |
|||
body: form |
|||
}) |
|||
if(modify.value?.code == 0){ |
|||
ElMessage.success('修改成功') |
|||
} |
|||
} |
|||
|
|||
const handleSearch = () => { |
|||
console.log('搜索') |
|||
} |
|||
|
|||
|
|||
const getUserInfo = async () => { |
|||
const {data: response} = await useServerRequest<ApiResult<User>>('/auth/user',{baseURL: runtimeConfig.public.apiServer}) |
|||
if(response.value?.data){ |
|||
userInfo.value = response.value?.data; |
|||
} |
|||
} |
|||
|
|||
|
|||
const reload = async () => { |
|||
const {data: response} = await useServerRequest<ApiResult<PageResult<Tenant>>>('/system/tenant/page',{baseURL: runtimeConfig.public.apiServer, params: { |
|||
userId: localStorage.getItem('UserId') |
|||
}}) |
|||
if(response.value?.data){ |
|||
console.log(response.value,'tenantList') |
|||
if (response.value?.data.list) { |
|||
list.value = response.value?.data.list; |
|||
} |
|||
} |
|||
} |
|||
|
|||
watch( |
|||
() => route.path, |
|||
() => { |
|||
reload(); |
|||
getUserInfo(); |
|||
}, |
|||
{ immediate: true } |
|||
); |
|||
</script> |
|||
<style lang="less"> |
|||
.el-row { |
|||
margin-bottom: 20px; |
|||
} |
|||
.el-row:last-child { |
|||
margin-bottom: 0; |
|||
} |
|||
.el-col { |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
.grid-content { |
|||
border-radius: 4px; |
|||
min-height: 36px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,359 @@ |
|||
<template> |
|||
<div class="common-layout"> |
|||
<el-container> |
|||
<!-- 顶部菜单 --> |
|||
<el-header class="bg-black flex items-center justify-between" height="50px"> |
|||
<el-space class="flex items-center"> |
|||
<el-avatar src="https://oss.wsdns.cn/20240331/7f7f7f57e12c45338beb7bfc7ecccfe9.png" class="cursor-pointer" shape="square" :size="32" @click="navigateTo('/manage', { replace: false })" /> |
|||
<div class="expand flex items-center justify-center block hover:bg-gray-700 h-[32px] w-[32px] cursor-pointer" @click="visible = !visible"><el-icon color="white" class="block" size="20"><Grid /></el-icon></div> |
|||
</el-space> |
|||
<template v-if="token"> |
|||
<el-dropdown @command="handleCommand"> |
|||
<el-avatar class="cursor-pointer" :src="userInfo?.avatar" :size="30" /> |
|||
<el-button circle :icon="ElIconUserFilled" color="#155FAA"></el-button> |
|||
<template #dropdown> |
|||
<el-dropdown-menu> |
|||
<el-dropdown-item command="user">个人中心</el-dropdown-item> |
|||
<el-dropdown-item divided command="logOut" @click="navigateTo('/user/logout')">退出</el-dropdown-item> |
|||
</el-dropdown-menu> |
|||
</template> |
|||
</el-dropdown> |
|||
</template> |
|||
</el-header> |
|||
<!-- 主体 --> |
|||
<el-container> |
|||
<!-- 左侧菜单区域 --> |
|||
<el-aside width="200px" class="bg-white" :style="{ minHeight: 'calc(100vh - 50px)' }"> |
|||
<div class="flex items-center justify-between py-4 px-5 text-lg font-bold text-center bg-white border-b-1 border-b-gray-100 border-b-solid"> |
|||
企业商城 EMall |
|||
<el-icon><Memo /></el-icon> |
|||
</div> |
|||
<el-menu |
|||
default-active="2" |
|||
class="el-menu-vertical-demo" |
|||
style="border: none" |
|||
@open="handleOpen" |
|||
@close="handleClose" |
|||
> |
|||
<el-menu-item index="1"> |
|||
<span>概况</span> |
|||
</el-menu-item> |
|||
<el-menu-item index="2"> |
|||
<span>栏目管理</span> |
|||
</el-menu-item> |
|||
<el-menu-item index="3"> |
|||
<span>文章列表</span> |
|||
</el-menu-item> |
|||
<el-menu-item index="4"> |
|||
<span>素材管理</span> |
|||
</el-menu-item> |
|||
<el-menu-item index="5"> |
|||
<span>广告管理</span> |
|||
</el-menu-item> |
|||
<el-menu-item index="6"> |
|||
<span>订单管理</span> |
|||
</el-menu-item> |
|||
<el-menu-item index="7"> |
|||
<span>用户管理</span> |
|||
</el-menu-item> |
|||
<el-menu-item index="8"> |
|||
<span>系统设置</span> |
|||
</el-menu-item> |
|||
</el-menu> |
|||
</el-aside> |
|||
<!-- 左侧内容区域 --> |
|||
<el-container> |
|||
<el-main class="overflow-y-hidden relative"> |
|||
<div class="absolute inset-0 bg-black opacity-10 z-1" v-if="visible" @click="visible = false"></div> |
|||
<div v-if="visible" class="drawer w-screen-lg h-full bg-white left-0 top-[50px] fixed z-2 shadow-lg"> |
|||
<div class="flex items-center justify-between p-3 border-b border-b-solid border-b-gray-200"> |
|||
<div class="text-lg font-bold">产品与服务</div> |
|||
<el-space class="flex items-center"> |
|||
<el-input |
|||
class="w-20" |
|||
placeholder="站内搜索" |
|||
:suffix-icon="ElIconSearch" |
|||
v-model="form.comments" |
|||
@keyup.enter.native="handleSearch" |
|||
/> |
|||
<!-- <el-input v-model="search" placeholder="搜索应用" class="w-[200px]" />--> |
|||
<div class="cursor-pointer mt-1 ml-5" @click="visible = false"><el-icon size="24" color="gray"><Close /></el-icon></div> |
|||
</el-space> |
|||
</div> |
|||
<div class="menu-content flex"> |
|||
<div class="w-[200px] bg-gray-50"> |
|||
<el-menu |
|||
default-active="2" |
|||
class="el-menu-vertical-demo" |
|||
style="border-right: 1px solid #f9fafb" |
|||
@open="handleOpen" |
|||
@close="handleClose" |
|||
> |
|||
<el-menu-item index="2"> |
|||
<span>精选</span> |
|||
</el-menu-item> |
|||
<el-menu-item index="3"> |
|||
<span>网页</span> |
|||
</el-menu-item> |
|||
<el-menu-item index="4"> |
|||
<span>移动</span> |
|||
</el-menu-item> |
|||
<el-menu-item index="5"> |
|||
<span>办公</span> |
|||
</el-menu-item> |
|||
<el-menu-item index="6"> |
|||
<span>其他</span> |
|||
</el-menu-item> |
|||
</el-menu> |
|||
</div> |
|||
<div class="w-full p-3"> |
|||
<el-scrollbar class="w-full" height="calc(100vh - 108px)"> |
|||
<el-row :gutter="16"> |
|||
<template v-for="item in 20" :key="item"> |
|||
<el-col :span="8"> |
|||
<div class="px-3 py-1 mb-2 text-sm text-gray-700 font-bold flex justify-between items-center">API 与工具</div> |
|||
<p class="scrollbar-demo-item hover:bg-gray-100 px-3 py-1 mb-2 cursor-pointer text-sm text-gray-500 flex justify-between items-center"> |
|||
<span class="product-name">{{ item }} 云服务器 ECS</span> |
|||
<span class="icon flex items-center hover:flex"> |
|||
<el-icon color="gray"><Star /></el-icon> |
|||
</span> |
|||
</p> |
|||
</el-col> |
|||
</template> |
|||
</el-row> |
|||
</el-scrollbar> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="my-3"> |
|||
<el-alert type="warning"> |
|||
<template #title> |
|||
<text type="text" class="cursor-pointer">关于《小程序技术平台服务协议》更新公告</text> |
|||
</template> |
|||
</el-alert> |
|||
</div> |
|||
<el-card shadow="hover" class="flash mt-4 bg-white hover:shadow rounded-lg"> |
|||
<template #header>我的应用</template> |
|||
<el-row :gutter="16"> |
|||
<template v-for="(item,index) in list" :key="index"> |
|||
<el-col :span="6" @click="openSpmUrl(`https://${item.tenantId}.websoft.top/token-login`,item,item.tenantId)"> |
|||
<div class="app-item block border-solid rounded-lg border-gray-300 border-1 bg-white mb-4 p-3 flex flex-row items-center hover:border-blue-4 hover:border-1.5 cursor-pointer"> |
|||
<el-avatar :src="item?.logo" shape="square" /> |
|||
<div class="info ml-2"> |
|||
<div class="app-item-title font-bold flex items-center">{{ item.tenantName }}<el-tag type="warning" class="ml-2" size="small">网页</el-tag></div> |
|||
<div class="app-item-desc text-gray-400">{{ item.comments }}</div> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
</template> |
|||
</el-row> |
|||
</el-card> |
|||
<!-- <el-card shadow="hover" class="mt-4">--> |
|||
<!-- <el-tabs v-model="activeIndex" type="">--> |
|||
<!-- <el-tab-pane label="微信小程序" name="mp-weixin">--> |
|||
<!-- <el-table :data="tableData" stripe style="width: 100%">--> |
|||
<!-- <el-table-column prop="date" label="Date" width="180" />--> |
|||
<!-- <el-table-column prop="name" label="Name" width="180" />--> |
|||
<!-- <el-table-column prop="address" label="Address" />--> |
|||
<!-- </el-table>--> |
|||
<!-- </el-tab-pane>--> |
|||
<!-- <el-tab-pane label="网页/移动应用" name="web">--> |
|||
<!-- </el-tab-pane>--> |
|||
<!-- </el-tabs>--> |
|||
<!-- </el-card>--> |
|||
<el-card shadow="hover" class="flash mt-4 bg-white hover:shadow "> |
|||
<template #header>开发工具推荐</template> |
|||
<el-row :gutter="16"> |
|||
<template v-for="(item,index) in list" :key="index"> |
|||
<el-col :span="6" @click="openSpmUrl(`https://${item.tenantId}.websoft.top/token-login`,item,item.tenantId)"> |
|||
<div class="app-item block border-solid rounded-lg border-gray-300 border-1 mb-4 p-3 flex flex-row items-center hover:border-blue-4 hover:border-1.5 cursor-pointer"> |
|||
<div class="info ml-2"> |
|||
<div class="app-item-title">{{ item.tenantName }}</div> |
|||
<div class="app-item-desc text-gray-400">{{ item.comments }}</div> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
</template> |
|||
</el-row> |
|||
</el-card> |
|||
</el-main> |
|||
<el-footer class="fixed bottom-0 items-center flex justify-center text-gray-400" :style="{ width: 'calc(100vw - 200px)' }"> |
|||
<span>Copyright © {{ new Date().getFullYear() }} {{ config?.copyright }}</span> |
|||
</el-footer> |
|||
</el-container> |
|||
</el-container> |
|||
</el-container> |
|||
</div> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
import {useConfigInfo, useToken, useWebsite} from "~/composables/configState"; |
|||
import useFormData from '@/utils/use-form-data'; |
|||
import type { User } from '@/api/system/user/model'; |
|||
import { ref } from 'vue' |
|||
import {useServerRequest} from "~/composables/useServerRequest"; |
|||
import type {ApiResult, PageResult} from "~/api"; |
|||
import type {Company} from "~/api/system/company/model"; |
|||
import type {Tenant} from "~/api/system/tenant/model"; |
|||
|
|||
// 配置信息 |
|||
const runtimeConfig = useRuntimeConfig(); |
|||
const route = useRoute(); |
|||
const website = useWebsite() |
|||
const config = useConfigInfo(); |
|||
const token = useToken(); |
|||
const userInfo = ref<User>(); |
|||
const visible = ref(false); |
|||
const showIcon = ref(false); |
|||
const activeIndex = ref('mp-weixin'); |
|||
const list = ref<Tenant[]>(); |
|||
const avatar = ref(localStorage.getItem('avatar')) |
|||
|
|||
|
|||
import { |
|||
Document, |
|||
Menu as IconMenu, |
|||
Location, |
|||
Expand, |
|||
MoreFilled, |
|||
Grid, |
|||
Memo, |
|||
Close, |
|||
Star, |
|||
Setting, |
|||
} from '@element-plus/icons-vue' |
|||
import {navigateTo} from "#imports"; |
|||
const handleOpen = (key: string, keyPath: string[]) => { |
|||
console.log(key, keyPath) |
|||
} |
|||
const handleClose = (key: string, keyPath: string[]) => { |
|||
console.log(key, keyPath) |
|||
} |
|||
|
|||
const tableData = [ |
|||
{ |
|||
date: '2016-05-03', |
|||
name: 'Tom', |
|||
address: 'No. 189, Grove St, Los Angeles', |
|||
}, |
|||
{ |
|||
date: '2016-05-02', |
|||
name: 'Tom', |
|||
address: 'No. 189, Grove St, Los Angeles', |
|||
}, |
|||
{ |
|||
date: '2016-05-04', |
|||
name: 'Tom', |
|||
address: 'No. 189, Grove St, Los Angeles', |
|||
}, |
|||
{ |
|||
date: '2016-05-01', |
|||
name: 'Tom', |
|||
address: 'No. 189, Grove St, Los Angeles', |
|||
}, |
|||
] |
|||
|
|||
// 配置信息 |
|||
const { form, assignFields } = useFormData<User>({ |
|||
userId: undefined, |
|||
nickname: '', |
|||
username: '', |
|||
phone: '', |
|||
mobile: '', |
|||
sex: '', |
|||
sexName: '', |
|||
email: '', |
|||
password: '', |
|||
code: '', |
|||
smsCode: '', |
|||
comments: '', |
|||
remember: true, |
|||
isAdmin: true |
|||
}); |
|||
|
|||
useHead({ |
|||
title: `用户中心 - ${config.value?.siteName}`, |
|||
meta: [{ name: website.value.keywords, content: website.value.comments }] |
|||
}); |
|||
|
|||
|
|||
function handleCommand(command: string) { |
|||
switch (command) { |
|||
case 'logOut': |
|||
logOut(); |
|||
break; |
|||
default: |
|||
navigateTo('/user'); |
|||
break; |
|||
} |
|||
} |
|||
|
|||
function logOut() { |
|||
token.value = '' |
|||
navigateTo('/passport/login') |
|||
} |
|||
|
|||
const onDone = (index: string) => { |
|||
activeIndex.value = index; |
|||
} |
|||
|
|||
const onSubmit = async () => { |
|||
const {data: modify } = await useServerRequest<ApiResult<User>>('/auth/user',{ |
|||
baseURL: runtimeConfig.public.apiServer, |
|||
method: 'put', |
|||
body: form |
|||
}) |
|||
if(modify.value?.code == 0){ |
|||
ElMessage.success('修改成功') |
|||
} |
|||
} |
|||
|
|||
const handleSearch = () => { |
|||
console.log('搜索') |
|||
} |
|||
|
|||
|
|||
const getUserInfo = async () => { |
|||
const {data: response} = await useServerRequest<ApiResult<User>>('/auth/user',{baseURL: runtimeConfig.public.apiServer}) |
|||
if(response.value?.data){ |
|||
userInfo.value = response.value?.data; |
|||
} |
|||
} |
|||
|
|||
|
|||
const reload = async () => { |
|||
const {data: response} = await useServerRequest<ApiResult<PageResult<Tenant>>>('/system/tenant/page',{baseURL: runtimeConfig.public.apiServer, params: { |
|||
userId: localStorage.getItem('UserId') |
|||
}}) |
|||
if(response.value?.data){ |
|||
console.log(response.value,'tenantList') |
|||
if (response.value?.data.list) { |
|||
list.value = response.value?.data.list; |
|||
} |
|||
} |
|||
} |
|||
|
|||
watch( |
|||
() => route.path, |
|||
() => { |
|||
reload(); |
|||
getUserInfo(); |
|||
}, |
|||
{ immediate: true } |
|||
); |
|||
</script> |
|||
<style lang="less"> |
|||
.el-row { |
|||
margin-bottom: 20px; |
|||
} |
|||
.el-row:last-child { |
|||
margin-bottom: 0; |
|||
} |
|||
.el-col { |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
.grid-content { |
|||
border-radius: 4px; |
|||
min-height: 36px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,76 @@ |
|||
<template> |
|||
<!-- Banner --> |
|||
<Banner :layout="layout" /> |
|||
|
|||
<!-- 简单模式(常规单页面) --> |
|||
<PageContainer :form="form" :layout="layout" /> |
|||
|
|||
<!-- 高级模式(自定义组件) --> |
|||
<div class="flex flex-col" v-if="layout?.showLayout"> |
|||
{{ layout }} |
|||
</div> |
|||
|
|||
</template> |
|||
<script setup lang="ts"> |
|||
import type {ApiResult} from "~/api"; |
|||
import {useServerRequest} from "~/composables/useServerRequest"; |
|||
import {useConfigInfo, useForm, useToken, useWebsite} from "~/composables/configState"; |
|||
import type {BreadcrumbItem} from "~/types/global"; |
|||
import type {Navigation} from "~/api/cms/navigation/model"; |
|||
import {getIdBySpm} from "~/utils/common"; |
|||
import PageContainer from "~/components/PageContainer.vue"; |
|||
|
|||
// 引入状态管理 |
|||
const route = useRoute(); |
|||
const website = useWebsite(); |
|||
const layout = ref<any>(); |
|||
const config = useConfigInfo(); |
|||
const token = useToken(); |
|||
const form = useForm(); |
|||
const breadcrumb = ref<BreadcrumbItem>(); |
|||
|
|||
// 请求数据 |
|||
const reload = async () => { |
|||
|
|||
// 存在spm(优先级高) |
|||
const { data: nav } = await useServerRequest<ApiResult<Navigation>>('/cms/navigation/' + getIdBySpm(5)) |
|||
if (nav.value?.data) { |
|||
form.value = nav.value.data |
|||
}else{ |
|||
const { data: nav } = await useServerRequest<ApiResult<Navigation>>('/cms/navigation/getNavigationByPath',{query: {path: route.path}}) |
|||
if(nav.value?.data){ |
|||
form.value = nav.value?.data; |
|||
} |
|||
} |
|||
// 页面布局 |
|||
if(form.value?.layout){ |
|||
layout.value = JSON.parse(form.value?.layout) |
|||
} |
|||
|
|||
// seo |
|||
useHead({ |
|||
title: `${form.value.title} - ${website.value.websiteName}`, |
|||
meta: [{ name: form.value.design?.keywords, content: form.value.design?.description }], |
|||
bodyAttrs: { |
|||
class: "page-container", |
|||
}, |
|||
script: [ |
|||
{ |
|||
children: `console.log(${JSON.stringify(form.value)})`, |
|||
}, |
|||
], |
|||
}); |
|||
// 面包屑 |
|||
breadcrumb.value = form.value |
|||
} |
|||
|
|||
watch( |
|||
() => route.path, |
|||
(path) => { |
|||
console.log(path,'=>Path') |
|||
|
|||
reload(); |
|||
}, |
|||
{ immediate: true } |
|||
); |
|||
</script> |
|||
Binary file not shown.
Loading…
Reference in new issue