添加登录

This commit is contained in:
浅念
2025-07-11 18:37:16 +08:00
parent 719911918f
commit 713d43f7b4
34 changed files with 1281 additions and 180 deletions
+2 -2
View File
@@ -6,10 +6,10 @@ VITE_VERSION = 2.4.2.4
VITE_PORT = 3006
# 网站地址前缀
VITE_BASE_URL = /art-design-pro/
VITE_BASE_URL = /
# API 地址前缀
VITE_API_URL = https://m1.apifoxmock.com/m1/6400575-6097373-default
VITE_API_URL = https://mzl.dev.hnxinyouhe.com
# 权限模式( frontend | backend )
VITE_ACCESS_MODE = frontend
+4 -1
View File
@@ -5,7 +5,10 @@ VITE_BASE_URL = /
# API 地址前缀
# VITE_API_URL = https://m1.apifoxmock.com/m1/6400575-6097373-default
VITE_API_URL = http://219.157.255.213:25702
# VITE_API_URL = http://219.157.255.213:25702
VITE_API_URL = https://mzl.dev.hnxinyouhe.com
# VITE_API_URL = https://fdesk.hnxinyouhe.com
# Delete console
VITE_DROP_CONSOLE = false
+2 -2
View File
@@ -1,10 +1,10 @@
# 【生产】环境变量
# 网站地址前缀
VITE_BASE_URL = /art-design-pro/
VITE_BASE_URL = /
# API 地址前缀
VITE_API_URL = https://m1.apifoxmock.com/m1/6400575-6097373-default
VITE_API_URL = https://mzl.dev.hnxinyouhe.com
# Delete console
VITE_DROP_CONSOLE = true
+1
View File
@@ -10,5 +10,6 @@
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
<script src="https://lf-package-cn.feishucdn.com/obj/feishu-static/lark/passport/qrcode/LarkSSOSDKWebQRCode-1.0.3.js"></script>
</body>
</html>
+1
View File
@@ -23,6 +23,7 @@
onBeforeMount(() => {
setThemeTransitionClass(true)
useUserStore().restoreTokenTimer()
})
onMounted(() => {
+8 -3
View File
@@ -1,7 +1,7 @@
import { asyncRoutes } from '@/router/routes/asyncRoutes'
import { menuDataToRouter } from '@/router/utils/menuToRouter'
import { AppRouteRecord } from '@/types/router'
import { useUserStore } from '@/store/modules/user'
interface MenuResponse {
menuList: AppRouteRecord[]
}
@@ -10,10 +10,15 @@ interface MenuResponse {
export const menuService = {
async getMenuList(delay = 300): Promise<MenuResponse> {
try {
const userStore = useUserStore()
// 模拟接口返回的菜单数据
const menuData = asyncRoutes
const menuData = userStore.info.menu
const menuData1 = asyncRoutes
// 处理菜单数据
const menuList = menuData.map((route) => menuDataToRouter(route))
// const menuList1 = menuData1.map((route) => menuDataToRouter(route))
const menuList = menuData.map((route: any) => menuDataToRouter(route))
// console.log(menuList1)
// console.log(menuList)
// 模拟接口延迟
await new Promise((resolve) => setTimeout(resolve, delay))
+44 -2
View File
@@ -1,19 +1,53 @@
import request from '@/utils/http'
export class UserService {
//获取公司
static getCompanyList() {
return request.get<Api.Brand.BrandInfo>({
url: '/common/preset/corps'
})
}
//注册
static register(params: any) {
return request.post<Api.Auth.registerResponse>({
url: '/common/auth/register',
params
// showErrorMessage: false // 不显示错误消息
})
}
//获取 飞书信息
static getfeishuAppList(params: { corp_id: string }) {
return request.get<Api.Brand.BrandInfo>({
url: '/common/preset/feishu/app',
params
})
}
// 登录
static login(params: Api.Auth.LoginParams) {
return request.post<Api.Auth.LoginResponse>({
url: '/api/auth/login',
url: '/common/auth/login',
params
// showErrorMessage: false // 不显示错误消息
})
}
// 刷新token
static refreshToken(params: { refresh_token: string }) {
return request.post<any>({
url: '/common/auth/refresh/token',
params
})
}
//飞书凭证
static getfeishuscope() {
return request.get<Api.Auth.Authfeishuscope>({
url: '/common/auth/feishu/scope'
})
}
// 获取用户信息
static getUserInfo() {
return request.get<Api.User.UserInfo>({
url: '/api/user/info'
url: '/common/user/info'
})
}
@@ -24,4 +58,12 @@ export class UserService {
params
})
}
//角色 列表
static getRoleList(params: Api.Common.PaginatingParams) {
return request.get<Api.Role.RoleListData>({
url: '/admin/role/list',
params
})
}
}
+7
View File
@@ -8,6 +8,13 @@ export class WorkService {
params
})
}
// 获取我的工单列表
static getWorkselfList(params: Api.Common.PaginatingParams) {
return request.get<Api.Work.WorkListData>({
url: '/ticket/ticket/self',
params
})
}
//添加工单
static WorkAdd(params: Api.Work.AddParams) {
return request.post<Api.Work.AddResponse>({
Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 174 KiB

@@ -24,7 +24,7 @@
</div>
<!-- 快速入口 -->
<ArtFastEnter v-if="width >= 1200" />
<!-- <ArtFastEnter v-if="width >= 1200" /> -->
<!-- 面包屑 -->
<ArtBreadcrumb
@@ -41,7 +41,7 @@
<div class="right">
<!-- 搜索 -->
<div class="search-wrap">
<!-- <div class="search-wrap">
<div class="search-input" @click="openSearchDialog">
<div class="left">
<i class="iconfont-sys">&#xe710;</i>
@@ -53,7 +53,7 @@
<span>k</span>
</div>
</div>
</div>
</div> -->
<!-- 全屏按钮 -->
<div class="btn-box screen-box" @click="toggleFullScreen">
@@ -65,19 +65,19 @@
</div>
</div>
<!-- 通知 -->
<div class="btn-box notice-btn" @click="visibleNotice">
<!-- <div class="btn-box notice-btn" @click="visibleNotice">
<div class="btn notice-button">
<i class="iconfont-sys notice-btn">&#xe6c2;</i>
<span class="count notice-btn"></span>
</div>
</div>
</div> -->
<!-- 聊天 -->
<div class="btn-box chat-btn" @click="openChat">
<!-- <div class="btn-box chat-btn" @click="openChat">
<div class="btn chat-button">
<i class="iconfont-sys">&#xe89a;</i>
<span class="dot"></span>
</div>
</div>
</div> -->
<!-- 语言 -->
<div class="btn-box" v-if="showLanguage">
<el-dropdown @command="changeLanguage" popper-class="langDropDownStyle">
@@ -150,7 +150,7 @@
</div>
</div>
<ul class="user-menu">
<li @click="goPage('/system/user-center')">
<!-- <li @click="goPage('/system/user-center')">
<i class="menu-icon iconfont-sys">&#xe734;</i>
<span class="menu-txt">{{ $t('topBar.user.userCenter') }}</span>
</li>
@@ -161,7 +161,7 @@
<li @click="toGithub()">
<i class="menu-icon iconfont-sys">&#xe8d6;</i>
<span class="menu-txt">{{ $t('topBar.user.github') }}</span>
</li>
</li> -->
<li @click="lockScreen()">
<i class="menu-icon iconfont-sys">&#xe817;</i>
<span class="menu-txt">{{ $t('topBar.user.lockScreen') }}</span>
@@ -2,14 +2,15 @@
<div class="login-left-view">
<div class="logo">
<ArtLogo class="icon" />
<h1 class="title">{{ AppConfig.systemInfo.name }}</h1>
<!-- <h1 class="title">{{ AppConfig.systemInfo.name }}</h1> -->
<h1 class="title">新友合系统管理平台</h1>
</div>
<img class="left-bg" src="@imgs/login/lf_bg.webp" />
<img class="left-bg" src="@imgs/login/lf_bg.png" />
<img class="left-img" src="@imgs/login/lf_icon2.webp" />
<div class="text-wrap">
<h1> {{ $t('login.leftView.title') }} </h1>
<p> {{ $t('login.leftView.subTitle') }} </p>
<!-- <h1> {{ $t('login.leftView.title') }} </h1> -->
<!-- <p> {{ $t('login.leftView.subTitle') }} </p> -->
</div>
</div>
</template>
+2 -1
View File
@@ -8,7 +8,8 @@ export function useCommon() {
// 是否是前端控制模式
const isFrontendMode = computed(() => {
return import.meta.env.VITE_ACCESS_MODE === 'frontend'
// /(frontend | backend)frontend:前端控制模式 backend:后端控制模式
return import.meta.env.VITE_ACCESS_MODE === 'backend'
})
// 刷新页面
+1 -1
View File
@@ -9,7 +9,7 @@ import { configImages } from './assets/images'
const appConfig: SystemConfig = {
// 系统信息
systemInfo: {
name: 'Art Design Pro' // 系统名称
name: 'XYH系统管理' // 系统名称
},
// Element Plus 主题
elementPlusTheme: {
+2 -1
View File
@@ -145,7 +145,8 @@
"success": {
"title": "Login successful",
"message": "Welcome back"
}
},
"otherLogin": "Other login methods"
},
"forgetPassword": {
"title": "Forgot password?",
+2 -1
View File
@@ -141,7 +141,8 @@
"success": {
"title": "登录成功",
"message": "欢迎回来"
}
},
"otherLogin": "其他登录方式"
},
"forgetPassword": {
"title": "忘记密码?",
+21
View File
@@ -0,0 +1,21 @@
import type { App } from 'vue'
import { createRouter, createWebHashHistory } from 'vue-router'
import { staticRoutes } from './routes/staticRoutes'
import { configureNProgress } from './utils/utils'
import { setupBeforeEachGuard } from './guards/beforeEach'
import { setupAfterEachGuard } from './guards/afterEach'
// 创建路由实例
export const router = createRouter({
history: createWebHashHistory(),
routes: staticRoutes, // 静态路由
scrollBehavior: () => ({ left: 0, top: 0 }) // 滚动行为
})
// 初始化路由
export function initRouter(app: App<Element>): void {
configureNProgress() // 顶部进度条
setupBeforeEachGuard(router) // 路由前置守卫
setupAfterEachGuard(router) // 路由后置守卫
app.use(router)
}
+2 -2
View File
@@ -1,5 +1,5 @@
import type { App } from 'vue'
import { createRouter, createWebHashHistory } from 'vue-router'
import { createRouter, createWebHistory } from 'vue-router'
import { staticRoutes } from './routes/staticRoutes'
import { configureNProgress } from './utils/utils'
import { setupBeforeEachGuard } from './guards/beforeEach'
@@ -7,7 +7,7 @@ import { setupAfterEachGuard } from './guards/afterEach'
// 创建路由实例
export const router = createRouter({
history: createWebHashHistory(),
history: createWebHistory(),
routes: staticRoutes, // 静态路由
scrollBehavior: () => ({ left: 0, top: 0 }) // 滚动行为
})
+2 -1
View File
@@ -56,6 +56,7 @@ export const asyncRoutes: AppRouteRecord[] = [
path: '/work',
name: 'Work',
component: RoutesAlias.Home,
// component:'/work',
meta: {
title: 'menus.work.title',
icon: '&#xe88b;',
@@ -64,7 +65,7 @@ export const asyncRoutes: AppRouteRecord[] = [
children: [
{
path: 'order',
name: 'Order',
name: '工单列表',
component: RoutesAlias.Order,
meta: {
title: 'menus.work.order',
+6
View File
@@ -29,6 +29,12 @@ export const staticRoutes: AppRouteRecordRaw[] = [
component: () => import('@views/auth/forget-password/index.vue'),
meta: { title: 'menus.forgetPassword.title', isHideTab: true, noLogin: true, setTheme: true }
},
{
path: '/auth/feishu-callback',
name: 'FeishuCallback',
component: () => import('@/views/auth/feishu-callback.vue'),
meta: { title: '飞书回调', noLogin: true, isHideTab: true }
},
{
path: '/exception',
component: Home,
+2 -1
View File
@@ -55,4 +55,5 @@ export enum RoutesAlias {
}
// 主页路由
export const HOME_PAGE = RoutesAlias.Dashboard
// export const HOME_PAGE = RoutesAlias.Dashboard
export const HOME_PAGE = '/work/order'
+55 -3
View File
@@ -8,6 +8,8 @@ import { AppRouteRecord } from '@/types/router'
import { setPageTitle } from '@/router/utils/utils'
import { resetRouterState } from '@/router/guards/beforeEach'
import { RoutesAlias } from '@/router/routesAlias'
import { UserService } from '@/api/usersApi' // 新增导入
let refreshTimeout: ReturnType<typeof setTimeout> | null = null // 定时器变量
// 用户
export const useUserStore = defineStore(
@@ -21,6 +23,10 @@ export const useUserStore = defineStore(
const searchHistory = ref<AppRouteRecord[]>([])
const accessToken = ref('')
const refreshToken = ref('')
const companyid = ref('')
const companyabbr = ref('')
const loginType = ref<'feishu' | 'upwd'>('upwd')
const tokenExpireAt = ref<number>(0)
const getUserInfo = computed(() => info.value)
const getSettingState = computed(() => useSettingStore().$state)
@@ -38,7 +44,9 @@ export const useUserStore = defineStore(
setPageTitle(router.currentRoute.value)
language.value = lang
}
const setLoginType = (type: 'feishu' | 'upwd') => {
loginType.value = type
}
const setSearchHistory = (list: AppRouteRecord[]) => {
searchHistory.value = list
}
@@ -51,11 +59,47 @@ export const useUserStore = defineStore(
lockPassword.value = password
}
const setToken = (newAccessToken: string, newRefreshToken?: string) => {
const setToken = (newAccessToken: string, newRefreshToken?: string, expiresIn?: number) => {
accessToken.value = newAccessToken
if (newRefreshToken) {
refreshToken.value = newRefreshToken
}
if (expiresIn) {
// 记录绝对过期时间
const expireAt = Date.now() + expiresIn * 1000
tokenExpireAt.value = expireAt
localStorage.setItem('token_expire_at', String(expireAt))
scheduleTokenRefresh(expiresIn)
}
}
const setCompany= (id: string, abbr: string) => {
companyid.value = id
companyabbr.value = abbr
}
function restoreTokenTimer() {
const expireAt = Number(localStorage.getItem('token_expire_at') || '0')
if (accessToken.value && expireAt > Date.now()) {
const leftSeconds = Math.floor((expireAt - Date.now()) / 1000)
scheduleTokenRefresh(leftSeconds)
}
}
function scheduleTokenRefresh(expiresIn: number) {
if (refreshTimeout) clearTimeout(refreshTimeout)
// 提前1分钟刷新
const refreshTime = (expiresIn - 60) * 1000
if (refreshTime > 0) {
refreshTimeout = setTimeout(refreshTokenAction, refreshTime)
}
}
async function refreshTokenAction() {
try {
const { data } = await UserService.refreshToken({ refresh_token: refreshToken.value })
setToken(data.access_token, data.refresh_token, data.expires_in)
} catch (e) {
logOut()
}
}
const logOut = () => {
@@ -65,6 +109,7 @@ export const useUserStore = defineStore(
lockPassword.value = ''
accessToken.value = ''
refreshToken.value = ''
if (refreshTimeout) clearTimeout(refreshTimeout) // 清理定时器
useWorktabStore().opened = []
sessionStorage.removeItem('iframeRoutes')
resetRouterState(router)
@@ -77,9 +122,13 @@ export const useUserStore = defineStore(
isLock,
lockPassword,
info,
companyid,
companyabbr,
searchHistory,
loginType,
accessToken,
refreshToken,
tokenExpireAt,
getUserInfo,
getSettingState,
getWorktabState,
@@ -90,7 +139,10 @@ export const useUserStore = defineStore(
setLockStatus,
setLockPassword,
setToken,
logOut
setCompany,
setLoginType,
logOut,
restoreTokenTimer
}
},
{
+30 -4
View File
@@ -35,14 +35,22 @@ declare namespace Api {
namespace Auth {
/** 登录参数 */
interface LoginParams {
userName: string
password: string
account?: string
password?: string
feishu_code?: string
}
/** 登录响应 */
interface LoginResponse {
token: string
refreshToken: string
data: any
}
/** 登录响应 */
interface registerResponse {
code: any
}
/** 授权响应 */
interface Authfeishuscope {
auth_url: any
}
}
@@ -57,6 +65,7 @@ declare namespace Api {
avatar?: string
email?: string
phone?: string
menu?: any
}
/** 用户列表数据 */
@@ -130,4 +139,21 @@ declare namespace Api {
total: number
}
}
/** 角色 */
namespace Role {
/** 品牌信息 */
interface RoleInfo {
data: never[]
id: number
name: string
}
/** 品牌列表数据 */
interface RoleListData {
records: RoleInfo[]
current: number
size: number
total: number
}
}
}
+7 -6
View File
@@ -6,7 +6,7 @@ import { $t } from '@/locales'
// 错误响应接口
export interface ErrorResponse {
code: number
msg: string
message: string
data?: unknown
}
@@ -94,7 +94,7 @@ export function handleError(error: AxiosError<ErrorResponse>): never {
}
const statusCode = error.response?.status
const errorMessage = error.response?.data?.msg || error.message
const errorMessage = error.response?.data?.message || error.message
const requestConfig = error.config
// 处理网络错误
@@ -106,9 +106,10 @@ export function handleError(error: AxiosError<ErrorResponse>): never {
}
// 处理 HTTP 状态码错误
const message = statusCode
? getErrorMessage(statusCode)
: errorMessage || $t('httpMsg.requestFailed')
// const message = statusCode
// ? getErrorMessage(statusCode)
// : errorMessage || $t('httpMsg.requestFailed')
const message = errorMessage
throw new HttpError(message, statusCode || ApiStatus.error, {
data: error.response.data,
url: requestConfig?.url,
@@ -126,7 +127,7 @@ export function showError(error: HttpError, showMessage: boolean = true): void {
ElMessage.error(error.message)
}
// 记录错误日志
console.error('[HTTP Error]', error.toLogData())
// console.error('[HTTP Error]', error.toLogData())
}
/**
+8 -2
View File
@@ -45,10 +45,15 @@ axiosInstance.interceptors.request.use(
(request: InternalAxiosRequestConfig) => {
const { accessToken } = useUserStore()
const { language } = useUserStore()
request.headers.set('lang', language)
const { loginType } = useUserStore()
const { companyabbr } = useUserStore()
request.headers.set('Fdesk-Language', language)
request.headers.set('Fdesk-Corp-Abbr', companyabbr)
request.headers.set('Fdesk-System-Code', 'fdesk')
request.headers.set('Fdesk-Login-Type', loginType)
// 设置 token 和 请求头
if (accessToken) {
request.headers.set('Authorization', accessToken)
request.headers.set('Fdesk-Auth-Token','Bearer '+accessToken)
request.headers.set('Content-Type', 'application/json')
}
@@ -76,6 +81,7 @@ axiosInstance.interceptors.response.use(
}
},
(error) => {
return Promise.reject(handleError(error))
}
)
+2 -2
View File
@@ -2,8 +2,8 @@
* 接口状态码
*/
export enum ApiStatus {
// success = 200, // 成功
success = 0, // 成功
success = 200, // 成功
// success = 0, // 成功
error = 400, // 错误
unauthorized = 401, // 未授权
forbidden = 403, // 禁止访问
+57
View File
@@ -0,0 +1,57 @@
<template>
<div class="feishu-callback">
<div v-if="loading">正在登录,请稍候...</div>
<div v-else-if="error">{{ error }}</div>
<div v-else>登录成功,正在跳转...</div>
</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/modules/user'
import { UserService } from '@/api/usersApi'
const loading = ref(true)
const error = ref('')
const userStore = useUserStore()
const router = useRouter()
onMounted(async () => {
const urlParams = new URLSearchParams(window.location.search)
const code = urlParams.get('code')
const state = urlParams.get('state')
if (!code) {
error.value = '未获取到飞书授权 code'
loading.value = false
return
}
try {
// 调用后端接口换 token,接口路径请根据实际情况调整
const { data } = await UserService.login({
feishu_code: code
})
// 存储token和用户信息
userStore.setToken(data.access_token, data.refresh_token, data.expires_in)
const userInfo = await UserService.getUserInfo()
userStore.setUserInfo(userInfo)
userStore.setLoginStatus(true)
router.replace('/')
} catch (e: any) {
error.value = e?.response?.data?.message || '登录失败,请重试'
router.replace('/')
} finally {
loading.value = false
}
})
</script>
<style scoped>
.feishu-callback {
min-height: 200px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: #333;
}
</style>
+183 -21
View File
@@ -27,6 +27,24 @@
</ElDropdownMenu>
</template>
</ElDropdown>
<ElDropdown @command="changeCompany" popper-class="langDropDownStyle">
<div class="btn language-btn">
<i class="iconfont-sys icon-language">&#xe8af;</i>公司
</div>
<template #dropdown>
<ElDropdownMenu>
<div v-for="cany in companyList" :key="cany.id" class="lang-btn-item">
<ElDropdownItem
:command="cany.id"
:class="{ 'is-selected': companyid === cany.value }"
>
<span class="menu-txt">{{ cany.name }}</span>
<i v-if="companyid === cany.id" class="iconfont-sys icon-check">&#xe621;</i>
</ElDropdownItem>
</div>
</ElDropdownMenu>
</template>
</ElDropdown>
</div>
<div class="header">
<ArtLogo class="icon" />
@@ -34,8 +52,15 @@
</div>
<div class="login-wrap">
<div class="form">
<h3 class="title">{{ $t('login.title') }}</h3>
<p class="sub-title">{{ $t('login.subTitle') }}</p>
<!-- 登录方式切换 tab -->
<div class="login-type-tabs">
<span :class="{active: activeLoginType === 'password'}" @click="activeLoginType = 'password'">账号密码登录</span>
<span :class="{active: activeLoginType === 'qrcode'}" @click="activeLoginType = 'qrcode'">飞书登录</span>
</div>
<div v-if="activeLoginType === 'password'">
<!-- 原有账号密码登录表单内容 -->
<!-- <h3 class="title">{{ $t('login.title') }}</h3> -->
<!-- <p class="sub-title">{{ $t('login.subTitle') }}</p> -->
<ElForm
ref="formRef"
:model="formData"
@@ -43,7 +68,7 @@
@keyup.enter="handleSubmit"
style="margin-top: 25px"
>
<ElFormItem prop="account">
<!-- <ElFormItem prop="account">
<ElSelect v-model="formData.account" @change="setupAccount" class="account-select">
<ElOption
v-for="account in accounts"
@@ -54,7 +79,7 @@
<span>{{ account.label }}</span>
</ElOption>
</ElSelect>
</ElFormItem>
</ElFormItem> -->
<ElFormItem prop="username">
<ElInput :placeholder="$t('login.placeholder[0]')" v-model.trim="formData.username" />
</ElFormItem>
@@ -91,7 +116,7 @@
<ElCheckbox v-model="formData.rememberPassword">{{
$t('login.rememberPwd')
}}</ElCheckbox>
<RouterLink :to="RoutesAlias.ForgetPassword">{{ $t('login.forgetPwd') }}</RouterLink>
<!-- <RouterLink :to="RoutesAlias.ForgetPassword">{{ $t('login.forgetPwd') }}</RouterLink> -->
</div>
<div style="margin-top: 30px">
@@ -114,6 +139,28 @@
</div>
</ElForm>
</div>
<div v-else>
<div class="qrcode-login" v-if="!iscompany">请先选择公司</div>
<div v-else>
<div class="qrcode-login" v-if="isInFeishu" >
<img class="left-bg" src="@imgs/login/feishu.png" />
<ElButton
class="login-btn"
type="primary"
@click="feishuSubmit"
v-ripple
>
{{ $t('login.btnText') }}
</ElButton>
</div>
<div class="qrcode-login" v-else>
<div id="login_container"></div>
<p class="qrcode-tip">请使用飞书App扫码登录</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@@ -130,6 +177,7 @@
import { LanguageEnum, SystemThemeEnum } from '@/enums/appEnum'
import { useI18n } from 'vue-i18n'
import { HttpError } from '@/utils/http/error'
import { onMounted, ref, watch, nextTick } from 'vue'
defineOptions({ name: 'Login' })
@@ -180,10 +228,14 @@
const router = useRouter()
const isPassing = ref(false)
const isClickPass = ref(false)
const activeLoginType = ref<'password' | 'qrcode'>('qrcode')
const isInFeishu = /Lark|Feishu/i.test(navigator.userAgent);
// const isInFeishu = true;
const systemName = AppConfig.systemInfo.name
const formRef = ref<FormInstance>()
const companyid = ref('')
const iscompany = ref(false)
const feishuresponse=ref()
const formData = reactive({
account: '',
username: '',
@@ -198,17 +250,75 @@
const loading = ref(false)
const { width } = useWindowSize()
const feishulogin = async () => {
userStore.setLoginType('feishu')
if (isInFeishu) {
onMounted(() => {
setupAccount('super')
// 飞书特定的逻辑
} else {
// 普通浏览器的逻辑
await nextTick()
// 等待 SDK 加载
const waitForQRLogin = () =>
new Promise<void>((resolve) => {
const check = () => {
// @ts-ignore
if (window.QRLogin) resolve()
else setTimeout(check, 100)
}
check()
})
// 设置账号
const setupAccount = (key: AccountKey) => {
const selectedAccount = accounts.value.find((account: Account) => account.key === key)
formData.account = key
formData.username = selectedAccount?.userName ?? ''
formData.password = selectedAccount?.password ?? ''
await waitForQRLogin()
// @ts-ignore
const container = document.getElementById('login_container')
if (container) container.innerHTML = ''
// @ts-ignore
// 飞书二维码登录参数(请替换为你的实际参数)
const fclient_id = feishuresponse.value?.app_id
const redirect_uri = feishuresponse.value?.r_url
const state = feishuresponse.value?.state
const feishuGotoUrl = 'https://passport.feishu.cn/suite/passport/oauth/authorize?client_id='+fclient_id+'&redirect_uri='+redirect_uri+'&response_type=code&state='+state;
// @ts-ignore
const QRLoginObj = window.QRLogin({
id: 'login_container',
goto: feishuGotoUrl,
width: '250',
height: '250',
style: 'width:350px;height:350px;border:none'
})
const handleMessage = function (event: MessageEvent) {
if (QRLoginObj.matchOrigin(event.origin) && QRLoginObj.matchData(event.data)) {
const loginTmpCode = event.data.tmp_code
window.location.href = `${feishuGotoUrl}&tmp_code=${loginTmpCode}`
}
}
window.addEventListener('message', handleMessage, false)
}
}
watch(
(activeLoginType as import('vue').Ref<string>),
async (val) => {
if (val === 'qrcode') {
userStore.setLoginType('feishu')
if(companyid.value!=''){
feishulogin()
}
}else{
userStore.setLoginType('upwd')
}
},
{ immediate: true }
)
//飞书登录
const feishuSubmit = async () => {
try {
const { auth_url } = await UserService.getfeishuscope()
window.location.href = auth_url
} catch (error) {
ElMessage.error('登录失败,请稍后重试')
} finally {
resetDragVerify()
}
}
// 登录
@@ -231,18 +341,18 @@
// 登录请求
const { username, password } = formData
const { token, refreshToken } = await UserService.login({
userName: username,
const { data } = await UserService.login({
account: username,
password
})
// 验证token
if (!token) {
if (!data.access_token) {
throw new Error('Login failed - no token received')
}
// 存储token和用户信息
userStore.setToken(token, refreshToken)
userStore.setToken(data.access_token, data.refresh_token, data.expires_in)
const userInfo = await UserService.getUserInfo()
userStore.setUserInfo(userInfo)
userStore.setLoginStatus(true)
@@ -282,7 +392,9 @@
})
}, 150)
}
onMounted(() => {
getcompanyList()
})
// 切换语言
const { locale } = useI18n()
@@ -291,6 +403,33 @@
locale.value = lang
userStore.setLanguage(lang)
}
//获取公司 getCompanyList
const companyList = ref<any>()
const getcompanyList = async () => {
try {
// 这里调用获取品牌列表的接口
const response = await UserService.getCompanyList()
companyList.value = response || []
} catch (error) { }
}
//切换公司
const changeCompany = (company: any) => {
if (companyid.value === company) return
const companyt = companyList.value.find((c: any) => c.id === company)
companyid.value = company
iscompany.value = company
userStore.setCompany(company,companyt?.abbr)
getfeishuAppList()
}
const getfeishuAppList = async () => {
try {
// 这里调用获取品牌列表的接口
feishuresponse.value = await UserService.getfeishuAppList({ corp_id: companyid.value })
feishulogin()
console.log(feishuresponse)
} catch (error) { }
}
// 切换主题
import { useTheme } from '@/composables/useTheme'
@@ -304,4 +443,27 @@
<style lang="scss" scoped>
@use './index';
.login-type-tabs {
display: flex;
justify-content: center;
margin-bottom: 20px;
span {
padding: 8px 24px;
cursor: pointer;
border-bottom: 2px solid transparent;
&.active {
color: #409eff;
border-bottom: 2px solid #409eff;
}
}
}
.qrcode-login {
display: flex;
flex-direction: column;
align-items: center;
.qrcode-tip {
margin-top: 16px;
color: #888;
}
}
</style>
+20 -5
View File
@@ -39,7 +39,7 @@
/>
</ElFormItem>
<ElFormItem prop="agreement">
<!-- <ElFormItem prop="agreement">
<ElCheckbox v-model="formData.agreement">
{{ $t('register.agreeText') }}
<router-link
@@ -48,7 +48,7 @@
>{{ $t('register.privacyPolicy') }}</router-link
>
</ElCheckbox>
</ElFormItem>
</ElFormItem> -->
<div style="margin-top: 15px">
<ElButton
@@ -81,6 +81,7 @@
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { useI18n } from 'vue-i18n'
import { UserService } from '@/api/usersApi'
defineOptions({ name: 'Register' })
@@ -150,13 +151,27 @@
try {
await formRef.value.validate()
loading.value = true
// 注册请求
const { username, password,confirmPassword } = formData
// 模拟注册请求
setTimeout(() => {
const { code } = await UserService.register({
account: username,
password,
confirm_password:confirmPassword
})
// 验证token
loading.value = false
if (code!= 200) {
throw new Error('Login failed - no token received')
}else{
ElMessage.success('注册成功')
toLogin()
}, 1000)
}
// 模拟注册请求
// setTimeout(() => {
// }, 1000)
} catch (error) {
console.log('验证失败', error)
}
+47 -24
View File
@@ -11,22 +11,21 @@
</ElCol>
</ElRow>
<ArtTable :data="roleList" index>
<ArtTable ref="tableRef" row-key="id" :loading="loading" :data="roleList" :currentPage="pagination.currentPage"
:pageSize="pagination.pageSize" :total="pagination.total" @size-change="handleSizeChange"
@current-change="handleCurrentChange">
<template #default>
<ElTableColumn label="角色名称" prop="roleName" />
<ElTableColumn label="角色编码" prop="roleCode" />
<ElTableColumn label="描述" prop="des" />
<ElTableColumn label="角色名称" prop="name" />
<ElTableColumn label="角色编码" prop="id" />
<ElTableColumn label="描述" prop="desc" />
<ElTableColumn label="启用" prop="enable">
<template #default="scope">
<ElTag :type="scope.row.enable ? 'primary' : 'info'">
{{ scope.row.enable ? '启用' : '禁用' }}
<ElTag :type="scope.row.status ? 'primary' : 'info'">
{{ scope.row.status ? '启用' : '禁用' }}
</ElTag>
</template>
</ElTableColumn>
<ElTableColumn label="创建时间" prop="date">
<template #default="scope">
{{ formatDate(scope.row.date) }}
</template>
<ElTableColumn label="创建时间" prop="created_at">
</ElTableColumn>
<ElTableColumn fixed="right" label="操作" width="200px">
<template #default="scope">
@@ -122,9 +121,10 @@
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { formatMenuTitle } from '@/router/utils/utils'
import { UserService } from '@/api/usersApi'
// import { ButtonMoreItem } from '@/components/core/forms/ArtButtonMore.vue'
import { Role, ROLE_LIST_DATA } from '@/mock/temp/formData'
const loading = ref(false)
defineOptions({ name: 'Role' })
const dialogVisible = ref(false)
@@ -133,7 +133,11 @@
const treeRef = ref()
const isExpandAll = ref(true)
const isSelectAll = ref(false)
const pagination = reactive({
currentPage: 1,
pageSize: 10,
total: 0
})
// 处理菜单数据,将 authList 转换为子节点
const processedMenuList = computed(() => {
const processNode = (node: any) => {
@@ -188,10 +192,39 @@
getTableData()
})
const getTableData = () => {
roleList.value = ROLE_LIST_DATA
// const getTableData = () => {
// roleList.value = ROLE_LIST_DATA
// }
// 获取列表数据
const getTableData = async () => {
loading.value = true
try {
const { currentPage, pageSize } = pagination
const { records, current, size, total } = await UserService.getRoleList({
current: currentPage,
size: pageSize
})
roleList.value = records.map((item: any, index: number) => ({
...item
}))
Object.assign(pagination, { currentPage: current, pageSize: size, total })
} catch (error) {
console.error('获取用户列表失败:', error)
} finally {
loading.value = false
}
}
// 处理表格分页变化
const handleSizeChange = (newPageSize: number) => {
pagination.pageSize = newPageSize
getTableData()
}
const handleCurrentChange = (newCurrentPage: number) => {
pagination.currentPage = newCurrentPage
getTableData()
}
const dialogType = ref('add')
const showDialog = (type: string, row?: any) => {
@@ -213,16 +246,6 @@
}
}
// const buttonMoreClick = (item: ButtonMoreItem, row: any) => {
// if (item.key === 'permission') {
// showPermissionDialog()
// } else if (item.key === 'edit') {
// showDialog('edit', row)
// } else if (item.key === 'delete') {
// deleteRole()
// }
// }
const showPermissionDialog = () => {
permissionDialog.value = true
}
+662
View File
@@ -0,0 +1,662 @@
<template>
<div class="page-content">
<ElRow>
<!-- <ElCol :xs="24" :sm="12" :lg="6">
<ElInput placeholder="工单编号"></ElInput>
</ElCol> -->
<div style="width: 12px"></div>
<ElCol :xs="24" :sm="12" :lg="6" class="el-col2">
<!-- <ElButton v-ripple>搜索</ElButton> -->
<ElButton v-if="hasAuth('work_order_self@add')" @click="showDialog('add')" v-ripple>新增</ElButton>
</ElCol>
</ElRow>
<ArtTable ref="tableRef" row-key="id" :loading="loading" :data="tableData" :currentPage="pagination.currentPage"
:pageSize="pagination.pageSize" :total="pagination.total" @size-change="handleSizeChange"
@current-change="handleCurrentChange">
<template #default>
<ElTableColumn label="工单编号" prop="code" />
<ElTableColumn label="问题分类" prop="categorie_id">
<template #default="scope">
<div v-html="scope.row.categorie?scope.row.categorie.name:''"></div>
</template>
</ElTableColumn>
<ElTableColumn label="问题描述" prop="content">
<template #default="scope">
<div v-html="scope.row.content"></div>
</template>
</ElTableColumn>
<ElTableColumn label="状态" prop="status">
<template #default="scope">
<ElTag :type="scope.row.status == 1 ? 'info' : scope.row.status == 2 ?'primary' :scope.row.status == 4 ?'success' : 'danger'">
{{ scope.row.status == 1 ? '待受理' : scope.row.status == 2 ? '处理中' :
scope.row.status == 4 ? "已完成":'关闭' }}
</ElTag>
</template>
</ElTableColumn>
<ElTableColumn label="创建时间" prop="created_at" />
<ElTableColumn fixed="right" label="操作" width="240px">
<template #default="scope">
<ElRow>
<el-button v-if="scope.row.status == 1&&hasAuth('work_order_self@edit')" link @click="showDialog('edit', scope.row)"> 编辑 </el-button>
<el-button v-if="hasAuth('work_order_self@status')" link @click="statusEdit(scope.row)"> 状态编辑 </el-button>
<el-button v-if="hasAuth('work_order_self@conversation_list')" link @click="openChat(scope.row)"> 查看/回复 </el-button>
<!-- <el-button link @click="deleteRole()"> 删除 </el-button> -->
</ElRow>
</template>
</ElTableColumn>
</template>
</ArtTable>
<ElDialog v-model="dialogVisible" :title="dialogType === 'add' ? '新增' : '编辑'" width="60%" align-center>
<ElForm ref="formRef" :model="form" label-width="160px">
<ElFormItem label="问题分类" prop="categorie_id">
<ElSelect v-model="form.categorie_id">
<ElOption v-for="type in categorieSelectList" :key="type.id" :value="type.id" :label="type.name" />
</ElSelect>
</ElFormItem>
<ElFormItem label="问题描述" prop="content">
<!-- <ElInput v-model="form.des" type="textarea" :rows="3" /> -->
<!-- 富文本编辑器 -->
<ArtWangEditor class="el-top" v-model="editorHtml" />
</ElFormItem>
<ElFormItem label="上传附件" prop="attachment">
<ElUpload
v-model:file-list="fileList"
class="upload-demo"
:action="actionImageUplode"
:on-success="handleUploadSuccess"
multiple
:limit="3">
<el-button type="primary">Click to upload</el-button>
</ElUpload>
<!-- 附件预览区 -->
<div class="attachment-preview" v-if="fileList.length">
<div class="attachment-list">
<div v-for="(file, idx) in fileList" :key="file.name" class="attachment-item">
<template v-if="/\.(jpg|jpeg|png|gif|webp|bmp)$/i.test(file.name)">
<img :src="file.file_url?file.file_url:file.response.data.file_url" :alt="file.name" class="attachment-thumb" @click="handleImageClick(imageList.findIndex(url => url === file.file_url?file.file_url:file.response.data.file_url))" />
</template>
<template v-else-if="/\.(mp4|webm|ogg)$/i.test(file.name)">
<video :src="file.file_url?file.file_url:file.response.data.file_url" controls class="attachment-thumb" @click.prevent="handleVideoClick(file.file_url?file.file_url:file.response.data.file_url)"></video>
</template>
<template v-else>
<a :href="file.file_url?file.file_url:file.response.data.file_url" target="_blank">{{ file.name }}</a>
</template>
<div class="attachment-filename">{{ file.name }}</div>
</div>
</div>
</div>
</ElFormItem>
</ElForm>
<template #footer>
<div class="dialog-footer">
<ElButton @click="dialogVisible = false">取消</ElButton>
<ElButton type="primary" @click="handleSubmit(formRef)">提交</ElButton>
</div>
</template>
</ElDialog>
<el-drawer v-model="isDrawerVisible" :size="isMobile ? '100%' : '480px'" :with-header="false">
<div class="chat-container">
<div class="header">
<div class="header-left">
<span class="name">工单记录</span>
</div>
<div class="header-right">
<el-icon class="icon-close" :size="20" @click="closeChat">
<Close />
</el-icon>
</div>
</div>
<!-- 聊天消息区域 -->
<div class="chat-messages" ref="messageContainer">
<template v-for="(message, index) in messages" :key="index">
<div :class="['message-item', message.isMe ? 'message-right' : 'message-left']">
<el-avatar :size="32" :src="message.isMe ? meAvatar : aiAvatar" class="message-avatar" />
<div class="message-content">
<div class="message-info">
<span class="sender-name">{{ message.user_id }}</span>
<span class="message-time">{{ message.updated_at }}</span>
</div>
<div class="message-text">{{ message.content }}</div>
</div>
</div>
</template>
</div>
<div class="chat-input" v-if="hasAuth('work_order_self@conversation_add')">
<el-input v-model="messageText" type="textarea" :rows="3" placeholder="输入消息" resize="none"
@keyup.enter.prevent="sendMessage" />
<ElInput v-model="ticket_id" type="hidden" />
<div class="chat-input-actions">
<el-button type="primary" @click="sendMessage" v-ripple>发送</el-button>
</div>
</div>
</div>
</el-drawer>
<ElDialog v-model="dialogVisiblestatus" title="工单状态" width="40%" align-center>
<ElForm ref="formRef" :model="statusform" label-width="120px">
<ElFormItem label="状态" prop="status">
<ElSelect v-model="statusform.status">
<ElOption v-for="type in statusList" :key="type.value" :value="type.value" :label="type.text" />
</ElSelect>
</ElFormItem>
<ElFormItem label="描述" prop="msg">
<ElInput v-model="statusform.msg" type="textarea" :rows="3" />
</ElFormItem>
</ElForm>
<template #footer>
<div class="dialog-footer">
<ElButton @click="dialogVisiblestatus = false">取消</ElButton>
<ElButton type="primary" @click="statusSubmit()">提交</ElButton>
</div>
</template>
</ElDialog>
<!-- 图片预览弹窗 -->
<ElImageViewer v-if="imageViewerVisible" :url-list="imageList" :initial-index="imageViewerIndex" @close="imageViewerVisible = false" />
<!-- 视频预览弹窗 -->
<ElDialog v-model="videoDialogVisible" width="60%" top="10vh" :show-close="true" append-to-body>
<video v-if="currentVideoUrl" :src="currentVideoUrl" controls autoplay style="width:100%;max-height:70vh;display:block;"></video>
</ElDialog>
</div>
</template>
<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance } from 'element-plus'
import { Order } from '@/mock/temp/formData'
import { WorkService } from '@/api/workApi'
import { ElImageViewer } from 'element-plus'
import { useAuth } from "@/composables/useAuth";
const { hasAuth } = useAuth();
defineOptions({ name: 'Order' })
let actionImageUplode = `${import.meta.env.VITE_API_URL}/ticket/upload`
const loading = ref(false)
const editorHtml = ref('') // 编辑器内容
const dialogVisible = ref(false)
const dialogVisiblestatus = ref(false)
const typeList = ref<any[]>([])
const formRef = ref<FormInstance>()
const { width } = useWindowSize()
const isMobile = computed(() => width.value < 500)
// 抽屉显示状态
const isDrawerVisible = ref(false)
import meAvatar from '@/assets/img/avatar/avatar5.webp'
import aiAvatar from '@/assets/img/avatar/avatar10.webp'
// 消息相关数据
const messages = ref<any[]>([])
const messageText = ref('')
// 滚动到底部
const messageContainer = ref<HTMLElement | null>(null)
const scrollToBottom = () => {
setTimeout(() => {
if (messageContainer.value) {
messageContainer.value.scrollTop = messageContainer.value.scrollHeight
}
}, 100)
}
const openChat = (row: any) => {
isDrawerVisible.value = true
getConversationList(row.id)
}
const closeChat = () => {
isDrawerVisible.value = false
}
//获取状态 下拉框 getStatus
const statusList = ref<any>()
const getstatusList = async () => {
try {
// 这里调用获取品牌列表的接口
const response = await WorkService.getStatus()
statusList.value = response || []
} catch (error) { }
}
//获取工单分类
const categorieSelectList = ref<any>()
const getcategorieSelectList = async () => {
try {
// 这里调用获取品牌列表的接口
const response = await WorkService.getcategorieselect()
categorieSelectList.value = response || []
} catch (error) { }
}
const fileList = ref<any[]>([])
const form = reactive<Order>({
id: '',
categorie_id: '',
content: '',
attachment: []
})
const pagination = reactive({
currentPage: 1,
pageSize: 10,
total: 0
})
const paginationmsg = reactive({
currentPage: 1,
pageSize: 10,
total: 0
})
// 表格数据
const tableData = ref<any[]>([])
// 表格实例引用
const tableRef = ref()
onMounted(() => {
getWorkList()
})
// 获取列表数据
const getWorkList = async () => {
loading.value = true
try {
const { currentPage, pageSize } = pagination
const { data, current, size, total } = await WorkService.getWorkselfList({
current: currentPage,
size: pageSize
})
tableData.value = data.map((item: any, index: number) => ({
...item
}))
Object.assign(pagination, { currentPage: current, pageSize: size, total })
} catch (error) {
console.error('获取用户列表失败:', error)
} finally {
loading.value = false
}
}
//获取工单记录 getconversationList
const ticket_id =ref()
const getConversationList = async (id:any) => {
loading.value = true
try {
const { currentPage, pageSize } = paginationmsg
ticket_id.value = id
const { data, current, size, total } = await WorkService.getconversationList({
current: currentPage,
size: pageSize,
ticket_id: id
})
messages.value = data.map((item: any, index: number) => ({
...item
}))
Object.assign(paginationmsg, { currentPage: current, pageSize: size, total })
} catch (error) {
console.error('获取用户列表失败:', error)
} finally {
loading.value = false
}
}
// 发送工单记录消息
const sendMessage = async () => {
const text = messageText.value.trim()
const ids = ticket_id.value
if (!text) return
const { message } = await WorkService.conversationAdd({
content: text,
ticket_id: ids,
})
ElMessage.success(message)
messageText.value = ''
getConversationList(ids)
scrollToBottom()
}
const dialogType = ref('add')
const showDialog = (type: string, row?: any) => {
dialogVisible.value = true
dialogType.value = type
getcategorieSelectList()
if (type === 'edit' && row) {
form.id = row.id
form.categorie_id = row.categorie_id
form.content = row.content
editorHtml.value = row.content
// 回显附件
fileList.value = (row.attachments || []).map((item: { original_name: any; storage_path_full: any }) => ({
name: item.original_name,
file_url: item.storage_path_full,
status: 'success',
response: { data: item }
}))
// 如果你有 uploadedFiles 也要同步
uploadedFiles.value = row.attachments || []
} else {
// 新增时清空表单和上传文件
form.categorie_id = ''
form.content = ''
editorHtml.value = ''
fileList.value = []
uploadedFiles.value = []
}
}
const statusform = reactive({
id: '',
status: '',
msg: ''
})
const statusEdit = (row: any) => {
getstatusList()
dialogVisiblestatus.value = true
statusform.id = row.id
}
const deleteRole = () => {
ElMessageBox.confirm('确定删除该角色吗?', '删除确认', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'error'
}).then(() => {
ElMessage.success('删除成功')
})
}
const delCodeTrim = (content: string): string => {
return content.replace(/(\s*)<\/code>/g, '</code>')
}
//添加工单
const uploadedFiles = ref<any[]>([])
const handleUploadSuccess = (response: any, uploadFile: any, uploadFiles: any[]) => {
// 只处理上传成功的文件
uploadedFiles.value = uploadFiles.filter(item => item.status === 'success').map(item => {
const data = item.response?.data
if (data) {
return {
id: data.id?data.id:'',
original_name: data.original_name,
storage_path: data.storage_path?data.storage_path:data.file_name
}
}
return null
})
.filter(Boolean)
}
const handleSubmit = async (formEl: FormInstance | undefined) => {
const { categorie_id} = form
editorHtml.value = delCodeTrim(editorHtml.value)
if(dialogType.value === 'add'){
const { message } = await WorkService.WorkAdd({
content: editorHtml.value,
categorie_id: categorie_id,
attachment:uploadedFiles.value
})
ElMessage.success(message)
dialogVisible.value = false
getWorkList()
}else{
const { message } = await WorkService.Workedit({
id:form.id,
content: editorHtml.value,
categorie_id: categorie_id,
attachment:uploadedFiles.value
})
ElMessage.success(message)
dialogVisible.value = false
getWorkList()
}
}
// 处理表格分页变化
const handleSizeChange = (newPageSize: number) => {
pagination.pageSize = newPageSize
getWorkList()
}
const handleCurrentChange = (newCurrentPage: number) => {
pagination.currentPage = newCurrentPage
getWorkList()
}
//修改状态
const statusSubmit = async () => {
// loading.value = true
const { msg, status, id } = statusform
const { message } = await WorkService.Workstatus({
id,
msg,
status
})
ElMessage.success(message)
dialogVisiblestatus.value = false
getWorkList()
}
// 图片预览相关
const imageViewerVisible = ref(false)
const imageViewerIndex = ref(0)
const imageList = computed(() => fileList.value.filter(file => /\.(jpg|jpeg|png|gif|webp|bmp)$/i.test(file.name)).map(file => file.file_url?file.file_url:file.response.data.file_url))
function handleImageClick(idx: number) {
imageViewerIndex.value = idx
imageViewerVisible.value = true
}
// 视频预览相关
const videoDialogVisible = ref(false)
const currentVideoUrl = ref('')
function handleVideoClick(url: string) {
currentVideoUrl.value = url
videoDialogVisible.value = true
}
</script>
<style lang="scss" scoped>
.page-content {
.svg-icon {
width: 1.8em;
height: 1.8em;
overflow: hidden;
vertical-align: -8px;
fill: currentcolor;
}
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
.header-left {
.name {
font-size: 16px;
font-weight: 500;
}
}
.header-right {
.icon-close {
cursor: pointer;
}
}
}
.chat-container {
display: flex;
flex-direction: column;
height: calc(100% - 70px);
.chat-messages {
flex: 1;
padding: 30px 16px;
overflow-y: auto;
border-top: 1px solid var(--el-border-color-lighter);
&::-webkit-scrollbar {
width: 5px !important;
}
.message-item {
display: flex;
flex-direction: row;
gap: 8px;
align-items: flex-start;
width: 100%;
margin-bottom: 30px;
.message-text {
font-size: 14px;
color: var(--art-gray-900);
border-radius: 6px;
}
&.message-left {
justify-content: flex-start;
.message-content {
align-items: flex-start;
.message-info {
flex-direction: row;
}
.message-text {
background-color: #f8f5ff;
}
}
}
&.message-right {
flex-direction: row-reverse;
.message-content {
align-items: flex-end;
.message-info {
flex-direction: row-reverse;
}
.message-text {
background-color: #e9f3ff;
}
}
}
.message-avatar {
flex-shrink: 0;
}
.message-content {
display: flex;
flex-direction: column;
max-width: 70%;
.message-info {
display: flex;
gap: 8px;
margin-bottom: 4px;
font-size: 12px;
.message-time {
color: var(--el-text-color-secondary);
}
.sender-name {
font-weight: 500;
}
}
.message-text {
padding: 10px 14px;
line-height: 1.4;
}
}
}
}
.chat-input {
padding: 16px 16px 0;
.input-actions {
display: flex;
gap: 8px;
padding: 8px 0;
}
.chat-input-actions {
display: flex;
align-items: center; // 修正为单数
justify-content: right;
margin-top: 12px;
// 确保发送按钮与输入框对齐
el-button {
min-width: 80px;
}
}
}
}
.dark {
.chat-container {
.chat-messages {
.message-item {
&.message-left {
.message-text {
background-color: #232323 !important;
}
}
&.message-right {
.message-text {
background-color: #182331 !important;
}
}
}
}
}
}
.attachment-preview {
margin-top: 12px;
.attachment-list {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.attachment-item {
width: 130px;
display: flex;
flex-direction: column;
align-items: center;
background: #fafbfc;
border-radius: 8px;
box-shadow: 0 1px 4px rgba(0,0,0,0.04);
padding: 10px 8px 6px 8px;
transition: box-shadow 0.2s, transform 0.2s;
cursor: pointer;
&:hover {
box-shadow: 0 4px 16px rgba(0,0,0,0.10);
transform: translateY(-2px) scale(1.03);
}
}
.attachment-thumb {
max-width: 110px;
max-height: 90px;
border-radius: 4px;
border: 1px solid #eee;
margin-bottom: 6px;
object-fit: cover;
background: #fff;
}
.attachment-filename {
font-size: 12px;
color: #666;
text-align: center;
word-break: break-all;
margin-top: 2px;
}
}
</style>
+14 -12
View File
@@ -1,13 +1,13 @@
<template>
<div class="page-content">
<ElRow>
<ElCol :xs="24" :sm="12" :lg="6">
<!-- <ElCol :xs="24" :sm="12" :lg="6">
<ElInput placeholder="工单编号"></ElInput>
</ElCol>
</ElCol> -->
<div style="width: 12px"></div>
<ElCol :xs="24" :sm="12" :lg="6" class="el-col2">
<ElButton v-ripple>搜索</ElButton>
<ElButton @click="showDialog('add')" v-ripple>新增</ElButton>
<!-- <ElButton v-ripple>搜索</ElButton> -->
<ElButton v-if="hasAuth('work_order@add')" @click="showDialog('add')" v-ripple>新增</ElButton>
</ElCol>
</ElRow>
@@ -35,12 +35,12 @@
</template>
</ElTableColumn>
<ElTableColumn label="创建时间" prop="created_at" />
<ElTableColumn fixed="right" label="操作" width="260px">
<ElTableColumn fixed="right" label="操作" width="240px">
<template #default="scope">
<ElRow>
<el-button v-if="scope.row.status == 1" link @click="showDialog('edit', scope.row)"> 编辑 </el-button>
<el-button link @click="statusEdit(scope.row)"> 状态编辑 </el-button>
<el-button link @click="openChat(scope.row)"> 查看/回复 </el-button>
<el-button v-if="scope.row.status == 1&&hasAuth('work_order@edit')" link @click="showDialog('edit', scope.row)"> 编辑 </el-button>
<el-button v-if="hasAuth('work_order@status')" link @click="statusEdit(scope.row)"> 状态编辑 </el-button>
<el-button v-if="hasAuth('work_order@conversation_list')" link @click="openChat(scope.row)"> 查看/回复 </el-button>
<!-- <el-button link @click="deleteRole()"> 删除 </el-button> -->
</ElRow>
</template>
@@ -123,7 +123,7 @@
</div>
</template>
</div>
<div class="chat-input">
<div class="chat-input" v-if="hasAuth('work_order@conversation_add')">
<el-input v-model="messageText" type="textarea" :rows="3" placeholder="输入消息" resize="none"
@keyup.enter.prevent="sendMessage" />
<ElInput v-model="ticket_id" type="hidden" />
@@ -170,6 +170,8 @@ import type { FormInstance } from 'element-plus'
import { Order } from '@/mock/temp/formData'
import { WorkService } from '@/api/workApi'
import { ElImageViewer } from 'element-plus'
import { useAuth } from "@/composables/useAuth";
const { hasAuth } = useAuth();
defineOptions({ name: 'Order' })
let actionImageUplode = `${import.meta.env.VITE_API_URL}/ticket/upload`
const loading = ref(false)
@@ -367,10 +369,10 @@ const delCodeTrim = (content: string): string => {
}
//添加工单
const uploadedFiles = ref([])
const handleUploadSuccess = (response: any, file: any, fileList: { filter: (arg0: (item: any) => boolean) => { (): any; new(): any; map: { (arg0: (item: any) => { original_name: any; storage_path: any } | null): { (): any; new(): any; filter: { (arg0: BooleanConstructor): never[]; new(): any } }; new(): any } } }) => {
const uploadedFiles = ref<any[]>([])
const handleUploadSuccess = (response: any, uploadFile: any, uploadFiles: any[]) => {
// 只处理上传成功的文件
uploadedFiles.value = fileList.filter(item => item.status === 'success').map(item => {
uploadedFiles.value = uploadFiles.filter(item => item.status === 'success').map(item => {
const data = item.response?.data
if (data) {
return {
+3 -3
View File
@@ -1,12 +1,12 @@
<template>
<div class="page-content">
<ElRow>
<ElCol :xs="24" :sm="12" :lg="6">
<!-- <ElCol :xs="24" :sm="12" :lg="6">
<ElInput placeholder="名称"></ElInput>
</ElCol>
</ElCol> -->
<div style="width: 12px"></div>
<ElCol :xs="24" :sm="12" :lg="6" class="el-col2">
<ElButton v-ripple>搜索</ElButton>
<!-- <ElButton v-ripple>搜索</ElButton> -->
<ElButton @click="showDialog('add')" v-ripple>新增</ElButton>
</ElCol>
</ElRow>
+4 -1
View File
@@ -34,7 +34,10 @@ export default ({ mode }) => {
rewrite: (path) => path.replace(/^\/api/, '')
}
},
host: true
host: true,
allowedHosts: [
'web.dp.muzili.top'
]
},
// 路径别名
resolve: {