Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
c751fd9a6e | ||
|
|
68882f94cf |
@@ -9,8 +9,7 @@ VITE_APP_BASE_API=/dev-api
|
||||
VITE_APP_ENV = 'development'
|
||||
|
||||
# 接口地址
|
||||
# VITE_APP_API_URL=http://192.168.0.61:8007 # 本地
|
||||
VITE_APP_API_URL=http://26.151.107.60:8007 # 本地
|
||||
VITE_APP_API_URL=http://8.137.99.82:9000
|
||||
|
||||
# WebSocket 端点（不配置则关闭），线上 ws://api.youlai.tech/ws ，本地 ws://localhost:8989/ws
|
||||
VITE_APP_WS_ENDPOINT=
|
||||
|
||||
@@ -85,3 +85,12 @@ export const ApiRecruitFilterOptions = (accountId: string) => {
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 触发筛选条件同步（派发任务给 Worker 抓取）
|
||||
export const ApiRecruitFilterSync = (accountId: string) => {
|
||||
return request({
|
||||
url: `/api/filters/sync`,
|
||||
method: 'post',
|
||||
data: { account_id: accountId }
|
||||
})
|
||||
}
|
||||
|
||||
@@ -1,71 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
/*
|
||||
* 筛选管理
|
||||
* */
|
||||
|
||||
// 获取筛选配置列表
|
||||
export const ApiFilters = () => {
|
||||
return request({
|
||||
url: `/api/filters`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 获取单个复聊配置
|
||||
export const ApiFiltersId = (id: string) => {
|
||||
return request({
|
||||
url: `/api/filters/${id}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 创建筛选配置
|
||||
export const ApiFiltersAdd = (data: any) => {
|
||||
const formData = new FormData()
|
||||
formData.append('name', data.name)
|
||||
formData.append('position_keywords', data.position_keywords)
|
||||
formData.append('city', data.city)
|
||||
formData.append('salary_min', data.salary_min)
|
||||
formData.append('salary_max', data.salary_max)
|
||||
formData.append('experience', data.experience)
|
||||
formData.append('education', data.education)
|
||||
formData.append('is_active', data.is_active)
|
||||
return request({
|
||||
url: `/api/filters`,
|
||||
method: 'post',
|
||||
data: formData,
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 更新筛选配置
|
||||
export const ApiFiltersEditor = (data: any) => {
|
||||
const formData = new FormData()
|
||||
if (data.name) formData.append('name', data.name)
|
||||
if (data.position_keywords) formData.append('position_keywords', data.position_keywords)
|
||||
if (data.city) formData.append('city', data.city)
|
||||
if (data.salary_min) formData.append('salary_min', data.salary_min)
|
||||
if (data.salary_max) formData.append('salary_max', data.salary_max)
|
||||
if (data.experience) formData.append('experience', data.experience)
|
||||
if (data.education) formData.append('education', data.education)
|
||||
formData.append('is_active', data.is_active)
|
||||
return request({
|
||||
url: `/api/filters/${data.id}`,
|
||||
method: 'put',
|
||||
data: formData,
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 删除筛选配置
|
||||
export const ApiFiltersDelete = (id: string) => {
|
||||
return request({
|
||||
url: `/api/filters/${id}`,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
@@ -4,7 +4,7 @@ import request from '@/utils/request'
|
||||
* 任务管理
|
||||
* */
|
||||
|
||||
// 查询任务列表
|
||||
// 查询指定账号的任务列表
|
||||
export const ApiTasks = (boss_id: string, page: number, page_size: number) => {
|
||||
return request({
|
||||
url: `/api/tasks/${boss_id}?page=${page}&page_size=${page_size}`,
|
||||
@@ -15,7 +15,7 @@ export const ApiTasks = (boss_id: string, page: number, page_size: number) => {
|
||||
// 查询指定任务的状态和结果
|
||||
export const ApiTasksTaskId = (task_id: string) => {
|
||||
return request({
|
||||
url: `/api/tasks/${task_id}`,
|
||||
url: `/api/tasks/detail/${task_id}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
@@ -24,8 +24,6 @@ export const ApiTasksTaskId = (task_id: string) => {
|
||||
export const ApiTasksAdd = (data: any) => {
|
||||
const formData = new FormData()
|
||||
formData.append('task_type', data.task_type)
|
||||
// formData.append('worker_id', data.worker_id)
|
||||
// formData.append('account_name', data.account_name)
|
||||
formData.append('id', data.boss_id)
|
||||
const rawParams = data?.params
|
||||
if (typeof rawParams === 'string') {
|
||||
@@ -43,31 +41,10 @@ export const ApiTasksAdd = (data: any) => {
|
||||
})
|
||||
}
|
||||
|
||||
// // 编辑申请用印
|
||||
// export const BusinessEditApplication = (data: any) => {
|
||||
// const formData = new FormData()
|
||||
// formData.append('id', data.id)
|
||||
// formData.append('Printingpurpose', data.Printingpurpose)
|
||||
// formData.append('case_id', data.case_id)
|
||||
// formData.append('Reason', data.Reason)
|
||||
// formData.append('seal_number', data.seal_number)
|
||||
// formData.append('seal_type', data.seal_type)
|
||||
// if (isFile(data.file)) formData.append('file', data.file)
|
||||
// formData.append('approvers', data.approvers)
|
||||
// return request({
|
||||
// url: `/business/editApplication`,
|
||||
// method: 'post',
|
||||
// data: formData,
|
||||
// headers: {
|
||||
// 'Content-Type': 'multipart/form-data'
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
//
|
||||
// // 删除指定账号
|
||||
// export const ApiAccountsDelete = (id: string) => {
|
||||
// return request({
|
||||
// url: `/api/accounts/${id}`,
|
||||
// method: 'delete'
|
||||
// })
|
||||
// }
|
||||
// 取消指定任务
|
||||
export const ApiTasksCancel = (task_id: string) => {
|
||||
return request({
|
||||
url: `/api/tasks/${task_id}/cancel`,
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
|
||||
@@ -1,191 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
/**
|
||||
* AI 命令请求参数
|
||||
*/
|
||||
export interface AiCommandRequest {
|
||||
/** 用户输入的自然语言命令 */
|
||||
command: string
|
||||
/** 当前页面路由（用于上下文） */
|
||||
currentRoute?: string
|
||||
/** 当前激活的组件名称 */
|
||||
currentComponent?: string
|
||||
/** 额外上下文信息 */
|
||||
context?: Record<string, any>
|
||||
}
|
||||
|
||||
/**
|
||||
* 函数调用参数
|
||||
*/
|
||||
export interface FunctionCall {
|
||||
/** 函数名称 */
|
||||
name: string
|
||||
/** 函数描述 */
|
||||
description?: string
|
||||
/** 参数对象 */
|
||||
arguments: Record<string, any>
|
||||
}
|
||||
|
||||
/**
|
||||
* AI 命令解析响应
|
||||
*/
|
||||
export interface AiCommandResponse {
|
||||
/** 解析日志ID（用于关联执行记录） */
|
||||
parseLogId?: string
|
||||
/** 是否成功解析 */
|
||||
success: boolean
|
||||
/** 解析后的函数调用列表 */
|
||||
functionCalls: FunctionCall[]
|
||||
/** AI 的理解和说明 */
|
||||
explanation?: string
|
||||
/** 置信度 (0-1) */
|
||||
confidence?: number
|
||||
/** 错误信息 */
|
||||
error?: string
|
||||
/** 原始 LLM 响应（用于调试） */
|
||||
rawResponse?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* AI 命令执行请求
|
||||
*/
|
||||
export interface AiExecuteRequest {
|
||||
/** 关联的解析日志ID */
|
||||
parseLogId?: string
|
||||
/** 原始命令（用于审计） */
|
||||
originalCommand?: string
|
||||
/** 要执行的函数调用 */
|
||||
functionCall: FunctionCall
|
||||
/** 确认模式：auto=自动执行, manual=需要用户确认 */
|
||||
confirmMode?: 'auto' | 'manual'
|
||||
/** 用户确认标志 */
|
||||
userConfirmed?: boolean
|
||||
/** 幂等性令牌（防止重复执行） */
|
||||
idempotencyKey?: string
|
||||
/** 当前页面路由 */
|
||||
currentRoute?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* AI 命令执行响应
|
||||
*/
|
||||
export interface AiExecuteResponse {
|
||||
/** 是否执行成功 */
|
||||
success: boolean
|
||||
/** 执行结果数据 */
|
||||
data?: any
|
||||
/** 执行结果说明 */
|
||||
message?: string
|
||||
/** 影响的记录数 */
|
||||
affectedRows?: number
|
||||
/** 错误信息 */
|
||||
error?: string
|
||||
/** 记录ID（用于追踪） */
|
||||
recordId?: string
|
||||
/** 需要用户确认 */
|
||||
requiresConfirmation?: boolean
|
||||
/** 确认提示信息 */
|
||||
confirmationPrompt?: string
|
||||
}
|
||||
|
||||
export interface AiCommandRecordPageQuery extends PageQuery {
|
||||
keywords?: string
|
||||
executeStatus?: string
|
||||
parseSuccess?: boolean
|
||||
userId?: number
|
||||
isDangerous?: boolean
|
||||
provider?: string
|
||||
model?: string
|
||||
functionName?: string
|
||||
createTime?: [string, string]
|
||||
}
|
||||
|
||||
export interface AiCommandRecordVO {
|
||||
id: string
|
||||
userId: number
|
||||
username: string
|
||||
originalCommand: string
|
||||
provider?: string
|
||||
model?: string
|
||||
parseSuccess?: boolean
|
||||
functionCalls?: string
|
||||
explanation?: string
|
||||
confidence?: number
|
||||
parseErrorMessage?: string
|
||||
inputTokens?: number
|
||||
outputTokens?: number
|
||||
totalTokens?: number
|
||||
parseTime?: number
|
||||
functionName?: string
|
||||
functionArguments?: string
|
||||
executeStatus?: string
|
||||
executeResult?: string
|
||||
executeErrorMessage?: string
|
||||
affectedRows?: number
|
||||
isDangerous?: boolean
|
||||
requiresConfirmation?: boolean
|
||||
userConfirmed?: boolean
|
||||
executionTime?: number
|
||||
ipAddress?: string
|
||||
userAgent?: string
|
||||
currentRoute?: string
|
||||
createTime?: string
|
||||
updateTime?: string
|
||||
remark?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* AI 命令 API
|
||||
*/
|
||||
class AiCommandApi {
|
||||
/**
|
||||
* 解析自然语言命令
|
||||
*
|
||||
* @param data 命令请求参数
|
||||
* @returns 解析结果
|
||||
*/
|
||||
static parseCommand(data: AiCommandRequest): Promise<AiCommandResponse> {
|
||||
return request<any, AiCommandResponse>({
|
||||
url: '/api/v1/ai/command/parse',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 执行已解析的命令
|
||||
*
|
||||
* @param data 执行请求参数
|
||||
* @returns 执行结果数据（成功时返回，失败时抛出异常）
|
||||
*/
|
||||
static executeCommand(data: AiExecuteRequest): Promise<any> {
|
||||
return request<any, any>({
|
||||
url: '/api/v1/ai/command/execute',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取命令记录分页列表
|
||||
*/
|
||||
static getCommandRecordPage(queryParams: AiCommandRecordPageQuery) {
|
||||
return request<any, PageResult<AiCommandRecordVO[]>>({
|
||||
url: '/api/v1/ai/command/records',
|
||||
method: 'get',
|
||||
params: queryParams
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 撤销命令执行（如果支持）
|
||||
*/
|
||||
static rollbackCommand(recordId: string) {
|
||||
return request({
|
||||
url: `/api/v1/ai/command/rollback/${recordId}`,
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export default AiCommandApi
|
||||
@@ -1,86 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
const AUTH_BASE_URL = '/api/v1/auth'
|
||||
|
||||
const AuthAPI = {
|
||||
/** 登录接口*/
|
||||
login(data: LoginFormData) {
|
||||
const formData = new FormData()
|
||||
formData.append('username', 'admin')
|
||||
formData.append('password', data.password)
|
||||
formData.append('captchaKey', data.captchaKey)
|
||||
formData.append('captchaCode', data.captchaCode)
|
||||
return request<any, LoginResult>({
|
||||
url: `${AUTH_BASE_URL}/login`,
|
||||
method: 'post',
|
||||
data: formData,
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/** 刷新 token 接口*/
|
||||
refreshToken(refreshToken: string) {
|
||||
return request<any, LoginResult>({
|
||||
url: `${AUTH_BASE_URL}/refresh-token`,
|
||||
method: 'post',
|
||||
params: { refreshToken },
|
||||
headers: {
|
||||
Authorization: 'no-auth'
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/** 退出登录接口 */
|
||||
logout() {
|
||||
return request({
|
||||
url: `${AUTH_BASE_URL}/logout`,
|
||||
method: 'delete'
|
||||
})
|
||||
},
|
||||
|
||||
/** 获取验证码接口*/
|
||||
getCaptcha() {
|
||||
return request<any, CaptchaInfo>({
|
||||
url: `${AUTH_BASE_URL}/captcha`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export default AuthAPI
|
||||
|
||||
/** 登录表单数据 */
|
||||
export interface LoginFormData {
|
||||
/** 用户名 */
|
||||
username: string
|
||||
/** 密码 */
|
||||
password: string
|
||||
/** 验证码缓存key */
|
||||
captchaKey: string
|
||||
/** 验证码 */
|
||||
captchaCode: string
|
||||
/** 记住我 */
|
||||
rememberMe: boolean
|
||||
}
|
||||
|
||||
/** 登录响应 */
|
||||
export interface LoginResult {
|
||||
/** 访问令牌 */
|
||||
accessToken: string
|
||||
/** 刷新令牌 */
|
||||
refreshToken: string
|
||||
/** 令牌类型 */
|
||||
tokenType: string
|
||||
/** 过期时间(秒) */
|
||||
expiresIn: number
|
||||
}
|
||||
|
||||
/** 验证码信息 */
|
||||
export interface CaptchaInfo {
|
||||
/** 验证码缓存key */
|
||||
captchaKey: string
|
||||
/** 验证码图片Base64字符串 */
|
||||
captchaBase64: string
|
||||
}
|
||||
@@ -1,91 +0,0 @@
|
||||
import type { InternalAxiosRequestConfig } from 'axios'
|
||||
import { useUserStoreHook } from '@/store/modules/user-store'
|
||||
import { AuthStorage, redirectToLogin } from '@/utils/auth'
|
||||
|
||||
/**
|
||||
* 重试请求的回调函数类型
|
||||
*/
|
||||
type RetryCallback = () => void
|
||||
|
||||
/**
|
||||
* Token刷新组合式函数
|
||||
*/
|
||||
export function useTokenRefresh() {
|
||||
// Token 刷新相关状态
|
||||
let isRefreshingToken = false
|
||||
const pendingRequests: RetryCallback[] = []
|
||||
|
||||
/**
|
||||
* 刷新 Token 并重试请求
|
||||
*/
|
||||
async function refreshTokenAndRetry(
|
||||
config: InternalAxiosRequestConfig,
|
||||
httpRequest: any
|
||||
): Promise<any> {
|
||||
return new Promise((resolve, reject) => {
|
||||
// 封装需要重试的请求
|
||||
const retryRequest = () => {
|
||||
const newToken = AuthStorage.getAccessToken()
|
||||
if (newToken && config.headers) {
|
||||
config.headers.Authorization = `Bearer ${newToken}`
|
||||
}
|
||||
httpRequest(config).then(resolve).catch(reject)
|
||||
}
|
||||
|
||||
// 将请求加入等待队列
|
||||
pendingRequests.push(retryRequest)
|
||||
|
||||
// 如果没有正在刷新，则开始刷新流程
|
||||
if (!isRefreshingToken) {
|
||||
isRefreshingToken = true
|
||||
|
||||
useUserStoreHook()
|
||||
.refreshToken()
|
||||
.then(() => {
|
||||
// 刷新成功，重试所有等待的请求
|
||||
pendingRequests.forEach((callback) => {
|
||||
try {
|
||||
callback()
|
||||
} catch (error) {
|
||||
console.error('Retry request error:', error)
|
||||
}
|
||||
})
|
||||
// 清空队列
|
||||
pendingRequests.length = 0
|
||||
})
|
||||
.catch(async (error) => {
|
||||
console.error('Token refresh failed:', error)
|
||||
// 刷新失败，先 reject 所有等待的请求，再清空队列
|
||||
const failedRequests = [...pendingRequests]
|
||||
pendingRequests.length = 0
|
||||
|
||||
// 拒绝所有等待的请求
|
||||
failedRequests.forEach(() => {
|
||||
reject(new Error('Token refresh failed'))
|
||||
})
|
||||
|
||||
// 跳转登录页
|
||||
await redirectToLogin('登录状态已失效，请重新登录')
|
||||
})
|
||||
.finally(() => {
|
||||
isRefreshingToken = false
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取刷新状态（用于外部判断）
|
||||
*/
|
||||
function getRefreshStatus() {
|
||||
return {
|
||||
isRefreshing: isRefreshingToken,
|
||||
pendingCount: pendingRequests.length
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
refreshTokenAndRetry,
|
||||
getRefreshStatus
|
||||
}
|
||||
}
|
||||
@@ -2,7 +2,7 @@ export { useStomp } from './websocket/useStomp'
|
||||
export { useDictSync } from './websocket/useDictSync'
|
||||
export type { DictMessage } from './websocket/useDictSync'
|
||||
export { useOnlineCount } from './websocket/useOnlineCount'
|
||||
export { useTokenRefresh } from './auth/useTokenRefresh'
|
||||
|
||||
|
||||
export { useLayout } from './layout/useLayout'
|
||||
export { useLayoutMenu } from './layout/useLayoutMenu'
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { useRoute } from 'vue-router'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { onMounted, onBeforeUnmount, nextTick } from 'vue'
|
||||
import AiCommandApi from '@/api/ai'
|
||||
|
||||
/**
|
||||
* AI 操作处理器（简化版）
|
||||
@@ -11,17 +10,17 @@ import AiCommandApi from '@/api/ai'
|
||||
export type AiActionHandler<T = any> =
|
||||
| ((args: T) => Promise<void> | void)
|
||||
| {
|
||||
/** 执行函数 */
|
||||
execute: (args: T) => Promise<void> | void
|
||||
/** 是否需要确认（默认 true） */
|
||||
needConfirm?: boolean
|
||||
/** 确认消息（支持函数或字符串） */
|
||||
confirmMessage?: string | ((args: T) => string)
|
||||
/** 成功消息（支持函数或字符串） */
|
||||
successMessage?: string | ((args: T) => string)
|
||||
/** 是否调用后端 API（默认 false，如果为 true 则自动调用 executeCommand） */
|
||||
callBackendApi?: boolean
|
||||
}
|
||||
/** 执行函数 */
|
||||
execute: (args: T) => Promise<void> | void
|
||||
/** 是否需要确认（默认 true） */
|
||||
needConfirm?: boolean
|
||||
/** 确认消息（支持函数或字符串） */
|
||||
confirmMessage?: string | ((args: T) => string)
|
||||
/** 成功消息（支持函数或字符串） */
|
||||
successMessage?: string | ((args: T) => string)
|
||||
/** 是否调用后端 API（默认 false，如果为 true 则自动调用 executeCommand） */
|
||||
callBackendApi?: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* AI 操作配置
|
||||
@@ -104,17 +103,8 @@ export function useAiAction(options: UseAiActionOptions = {}) {
|
||||
|
||||
// 2. 执行阶段
|
||||
if (config.callBackendApi) {
|
||||
// 自动调用后端 API
|
||||
await AiCommandApi.executeCommand({
|
||||
originalCommand: action.originalCommand || '',
|
||||
confirmMode: 'manual',
|
||||
userConfirmed: true,
|
||||
currentRoute,
|
||||
functionCall: {
|
||||
name: fnCall.name,
|
||||
arguments: fnCall.arguments
|
||||
}
|
||||
})
|
||||
// AI 后端 API 暂未实现
|
||||
ElMessage.warning('AI 后端接口暂未实现')
|
||||
} else {
|
||||
// 执行自定义函数
|
||||
await config.execute(fnCall.arguments)
|
||||
@@ -179,24 +169,8 @@ export function useAiAction(options: UseAiActionOptions = {}) {
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
await AiCommandApi.executeCommand({
|
||||
originalCommand,
|
||||
confirmMode,
|
||||
userConfirmed: true,
|
||||
currentRoute,
|
||||
functionCall: {
|
||||
name: functionName,
|
||||
arguments: args
|
||||
}
|
||||
})
|
||||
|
||||
ElMessage.success('操作执行成功')
|
||||
} catch (error: any) {
|
||||
if (error !== 'cancel') {
|
||||
throw error
|
||||
}
|
||||
}
|
||||
// AI 后端 API 暂未实现
|
||||
ElMessage.warning('AI 后端接口暂未实现')
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -3,21 +3,11 @@
|
||||
*/
|
||||
export const enum ApiCodeEnum {
|
||||
/**
|
||||
* 成功
|
||||
* 成功（后端 api_success 返回 code=0）
|
||||
*/
|
||||
SUCCESS = '00000',
|
||||
SUCCESS = 0,
|
||||
/**
|
||||
* 错误
|
||||
* 未认证 / Token 无效（后端返回 HTTP 401）
|
||||
*/
|
||||
ERROR = 'B0001',
|
||||
|
||||
/**
|
||||
* 访问令牌无效或过期
|
||||
*/
|
||||
ACCESS_TOKEN_INVALID = 'A0230',
|
||||
|
||||
/**
|
||||
* 刷新令牌无效或过期
|
||||
*/
|
||||
REFRESH_TOKEN_INVALID = 'A0231'
|
||||
UNAUTHORIZED = 401,
|
||||
}
|
||||
|
||||
@@ -362,25 +362,6 @@ export const constantRoutes: RouteRecordRaw[] = [
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/screening',
|
||||
name: 'Screening',
|
||||
component: Layout,
|
||||
meta: {
|
||||
title: '筛选管理',
|
||||
icon: 'setting'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'screeningManagement',
|
||||
name: 'ScreeningManagement',
|
||||
component: () => import('@/views/ScreeningManagement/index.vue'),
|
||||
meta: {
|
||||
title: '筛选管理'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
// 注册平台登记
|
||||
// {
|
||||
|
||||
@@ -48,7 +48,7 @@ export const authConfig = {
|
||||
*
|
||||
* 适用场景：后端没有刷新接口或不需要自动刷新的项目可设为false
|
||||
*/
|
||||
enableTokenRefresh: true
|
||||
enableTokenRefresh: false
|
||||
} as const
|
||||
|
||||
// 主题色预设 - 现代配色方案（基于示例模板风格）
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { store } from '@/store'
|
||||
|
||||
import AuthAPI from '@/api/auth-api'
|
||||
import type { UserInfo } from '@/api/system/user-api'
|
||||
|
||||
import { AuthStorage } from '@/utils/auth'
|
||||
@@ -107,31 +106,6 @@ export const useUserStore = defineStore('user', () => {
|
||||
setPermissionCharactersArr([])
|
||||
}
|
||||
|
||||
/**
|
||||
* 刷新 token
|
||||
*/
|
||||
function refreshToken() {
|
||||
const refreshToken = AuthStorage.getRefreshToken()
|
||||
|
||||
if (!refreshToken) {
|
||||
return Promise.reject(new Error('没有有效的刷新令牌'))
|
||||
}
|
||||
|
||||
return new Promise<void>((resolve, reject) => {
|
||||
AuthAPI.refreshToken(refreshToken)
|
||||
.then((data) => {
|
||||
const { accessToken, refreshToken: newRefreshToken } = data
|
||||
// 更新令牌，保持当前记住我状态
|
||||
AuthStorage.setTokens(accessToken, newRefreshToken, AuthStorage.getRememberMe())
|
||||
resolve()
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(' refreshToken 刷新失败', error)
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const checkPermission = (permission: string): boolean => {
|
||||
if (userInfo.value?.permission_data.includes('*:*:*')) {
|
||||
return true
|
||||
@@ -149,7 +123,6 @@ export const useUserStore = defineStore('user', () => {
|
||||
logout,
|
||||
resetAllState,
|
||||
resetUserState,
|
||||
refreshToken,
|
||||
permissionCharactersArr,
|
||||
setPermissionCharactersArr,
|
||||
checkPermission
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
@use "./reset";
|
||||
@use "./element-plus";
|
||||
@use "./template-style"; // 示例模板风格
|
||||
@use "./ops-ui";
|
||||
// Vxe Table
|
||||
@use "./vxe-table";
|
||||
@import url("./vxe-table.css");
|
||||
@@ -190,4 +191,4 @@ html.sidebar-color-blue {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
79
src/styles/ops-ui.scss
Normal file
79
src/styles/ops-ui.scss
Normal file
@@ -0,0 +1,79 @@
|
||||
:root {
|
||||
--ops-radius-lg: 14px;
|
||||
--ops-radius-md: 10px;
|
||||
--ops-border-color: #e8edf5;
|
||||
--ops-soft-bg: #f7f9fc;
|
||||
--ops-hover-bg: #f5f9ff;
|
||||
--ops-title-color: #1f2d3d;
|
||||
--ops-text-regular: #303133;
|
||||
--ops-text-secondary: #909399;
|
||||
}
|
||||
|
||||
.ops-page {
|
||||
.ops-card {
|
||||
border: 1px solid var(--ops-border-color);
|
||||
border-radius: var(--ops-radius-lg);
|
||||
}
|
||||
|
||||
.ops-section-title {
|
||||
color: var(--ops-title-color);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.25px;
|
||||
}
|
||||
|
||||
.ops-table {
|
||||
.el-table__header th {
|
||||
background: var(--ops-soft-bg);
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.el-table__row:hover > td {
|
||||
background: var(--ops-hover-bg) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ops-status-tag {
|
||||
min-width: 64px;
|
||||
justify-content: center;
|
||||
border-radius: 999px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.ops-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.ops-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.ops-btn {
|
||||
--el-button-border-radius: 10px;
|
||||
min-height: 32px;
|
||||
padding: 0 14px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.ops-btn.el-button--small {
|
||||
min-height: 28px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.ops-page {
|
||||
.ops-btn {
|
||||
min-height: 30px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
6
src/types/global.d.ts
vendored
6
src/types/global.d.ts
vendored
@@ -3,7 +3,7 @@ declare global {
|
||||
* 响应数据
|
||||
*/
|
||||
interface ApiResponse<T = any> {
|
||||
code: string
|
||||
code: number
|
||||
data: T
|
||||
msg: string
|
||||
}
|
||||
@@ -99,7 +99,7 @@ declare global {
|
||||
*/
|
||||
interface ExcelResult {
|
||||
/** 状态码 */
|
||||
code: string
|
||||
code: number
|
||||
/** 无效数据条数 */
|
||||
invalidCount: number
|
||||
/** 有效数据条数 */
|
||||
@@ -108,4 +108,4 @@ declare global {
|
||||
messageList: Array<string>
|
||||
}
|
||||
}
|
||||
export {}
|
||||
export { }
|
||||
|
||||
@@ -2,11 +2,6 @@ import axios, { type InternalAxiosRequestConfig, type AxiosResponse } from 'axio
|
||||
import qs from 'qs'
|
||||
import { ApiCodeEnum } from '@/enums/api/code-enum'
|
||||
import { AuthStorage, redirectToLogin } from '@/utils/auth'
|
||||
import { useTokenRefresh } from '@/composables/auth/useTokenRefresh'
|
||||
import { authConfig } from '@/settings'
|
||||
|
||||
// 初始化token刷新组合式函数
|
||||
const { refreshTokenAndRetry } = useTokenRefresh()
|
||||
|
||||
/**
|
||||
* 创建 HTTP 请求实例
|
||||
@@ -50,8 +45,8 @@ httpRequest.interceptors.response.use(
|
||||
}
|
||||
|
||||
const { code, msg } = response.data
|
||||
// 请求成功
|
||||
if (code === ApiCodeEnum.SUCCESS || code == '0' || code == '200') {
|
||||
// 请求成功：后端成功响应 code === 0
|
||||
if (code === ApiCodeEnum.SUCCESS) {
|
||||
return response.data as any
|
||||
}
|
||||
|
||||
@@ -62,7 +57,7 @@ httpRequest.interceptors.response.use(
|
||||
async (error) => {
|
||||
console.error('Response interceptor error:', error)
|
||||
|
||||
const { config, response } = error
|
||||
const { response } = error
|
||||
|
||||
// 网络错误或服务器无响应
|
||||
if (!response) {
|
||||
@@ -70,29 +65,16 @@ httpRequest.interceptors.response.use(
|
||||
return Promise.reject(error)
|
||||
}
|
||||
|
||||
const { code, message } = response.data as any
|
||||
|
||||
switch (code) {
|
||||
case ApiCodeEnum.ACCESS_TOKEN_INVALID:
|
||||
// Access Token 过期
|
||||
if (authConfig.enableTokenRefresh) {
|
||||
// 启用了token刷新，尝试刷新
|
||||
return refreshTokenAndRetry(config, httpRequest)
|
||||
} else {
|
||||
// 未启用token刷新，直接跳转登录页
|
||||
await redirectToLogin('登录已过期，请重新登录')
|
||||
return Promise.reject(new Error(message || 'Access Token Invalid'))
|
||||
}
|
||||
|
||||
case ApiCodeEnum.REFRESH_TOKEN_INVALID:
|
||||
// Refresh Token 过期，跳转登录页
|
||||
await redirectToLogin('登录已过期，请重新登录')
|
||||
return Promise.reject(new Error(message || 'Refresh Token Invalid'))
|
||||
|
||||
default:
|
||||
ElMessage.error(message || '请求失败')
|
||||
return Promise.reject(new Error(message || 'Request Error'))
|
||||
// HTTP 401：Token 无效或过期，直接跳转登录页
|
||||
if (response.status === 401) {
|
||||
await redirectToLogin('登录已过期，请重新登录')
|
||||
return Promise.reject(new Error('Token Invalid'))
|
||||
}
|
||||
|
||||
// 其他错误
|
||||
const msg = response.data?.msg || response.data?.message || '请求失败'
|
||||
ElMessage.error(msg)
|
||||
return Promise.reject(new Error(msg))
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
@@ -1,7 +1,15 @@
|
||||
<template>
|
||||
<div class="recruit-task-form">
|
||||
<el-alert
|
||||
v-if="syncedAt"
|
||||
v-if="syncing"
|
||||
type="info"
|
||||
:closable="false"
|
||||
show-icon
|
||||
style="margin-bottom: 12px"
|
||||
title="正在从网页同步筛选条件，请稍候..."
|
||||
/>
|
||||
<el-alert
|
||||
v-else-if="syncedAt"
|
||||
type="info"
|
||||
:closable="false"
|
||||
show-icon
|
||||
@@ -17,26 +25,59 @@
|
||||
title="当前账号暂无筛选项，请先启动客户端同步筛选项"
|
||||
/>
|
||||
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="auto" label-position="top">
|
||||
<!-- 分组筛选条件（排除"年龄"分组） -->
|
||||
<el-form-item label="筛选条件（可多选）" prop="selected_filters">
|
||||
<el-select
|
||||
v-model="formData.selected_filters"
|
||||
multiple
|
||||
filterable
|
||||
clearable
|
||||
collapse-tags
|
||||
collapse-tags-tooltip
|
||||
:loading="optionsLoading"
|
||||
placeholder="请选择筛选条件"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in filterOptions"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
<div v-if="optionsLoading" class="filter-loading">
|
||||
<el-icon class="is-loading"><Loading /></el-icon>
|
||||
<span>加载中...</span>
|
||||
</div>
|
||||
<div v-else-if="displayGroups.length === 0" class="filter-empty">
|
||||
暂无可选筛选项
|
||||
</div>
|
||||
<div v-else class="filter-groups">
|
||||
<div v-for="group in displayGroups" :key="group.name" class="filter-group">
|
||||
<div class="filter-group__title">{{ group.name }}</div>
|
||||
<el-checkbox-group v-model="formData.selected_filters" class="filter-group__options">
|
||||
<el-checkbox
|
||||
v-for="opt in group.options"
|
||||
:key="group.name + ':' + opt"
|
||||
:label="opt"
|
||||
:value="group.name + ':' + opt"
|
||||
border
|
||||
size="small"
|
||||
/>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 年龄区间（独立控制，不走浏览器筛选） -->
|
||||
<el-form-item label="年龄范围（从候选人信息过滤，不在网页点击筛选）">
|
||||
<div class="age-range">
|
||||
<el-input-number
|
||||
v-model="formData.age_min"
|
||||
:min="16"
|
||||
:max="65"
|
||||
:step="1"
|
||||
controls-position="right"
|
||||
placeholder="最小"
|
||||
style="width: 140px"
|
||||
/>
|
||||
<span class="age-range__sep">至</span>
|
||||
<el-input-number
|
||||
v-model="formData.age_max"
|
||||
:min="16"
|
||||
:max="65"
|
||||
:step="1"
|
||||
controls-position="right"
|
||||
placeholder="最大"
|
||||
style="width: 140px"
|
||||
/>
|
||||
<span class="age-range__unit">岁</span>
|
||||
<el-button link type="primary" @click="clearAgeRange" style="margin-left: 8px">清除</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="招聘人数" prop="greet_target">
|
||||
<el-input-number
|
||||
v-model="formData.greet_target"
|
||||
@@ -46,13 +87,48 @@
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="启用问候语数量" prop="greeting_count">
|
||||
<el-input-number
|
||||
v-model="formData.greeting_count"
|
||||
:min="1"
|
||||
:max="10"
|
||||
controls-position="right"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="问候语内容（多条时随机发送）" prop="greeting_messages">
|
||||
<div class="greeting-list">
|
||||
<div v-for="(_, index) in formData.greeting_messages" :key="`greeting-${index}`" class="greeting-item">
|
||||
<div class="greeting-item__label">问候语 {{ index + 1 }}</div>
|
||||
<el-input
|
||||
v-model="formData.greeting_messages[index]"
|
||||
type="textarea"
|
||||
:rows="2"
|
||||
placeholder="请输入问候语"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="greeting-tip">
|
||||
系统内置问候语：{{ DEFAULT_GREETING_MESSAGE }}
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { ApiRecruitFilterOptions } from '@/api/BoosAccountManagement'
|
||||
import { Loading } from '@element-plus/icons-vue'
|
||||
import { ApiRecruitFilterOptions, ApiRecruitFilterSync } from '@/api/BoosAccountManagement'
|
||||
|
||||
interface FilterGroup {
|
||||
name: string
|
||||
order: number
|
||||
options: string[]
|
||||
}
|
||||
const DEFAULT_GREETING_MESSAGE = '当前岗位还在招，加个微信了解一下吗？'
|
||||
|
||||
const props = defineProps({
|
||||
accountId: {
|
||||
@@ -63,52 +139,154 @@ const props = defineProps({
|
||||
|
||||
const formRef = ref()
|
||||
const optionsLoading = ref(false)
|
||||
const filterOptions = ref<string[]>([])
|
||||
const filterGroups = ref<FilterGroup[]>([])
|
||||
const syncedAt = ref('')
|
||||
const syncing = ref(false)
|
||||
|
||||
// 排除"年龄"相关的分组，展示给用户的分组
|
||||
const displayGroups = computed(() => {
|
||||
return filterGroups.value.filter(
|
||||
(g) => !g.name.includes('年龄')
|
||||
)
|
||||
})
|
||||
|
||||
const formData = reactive({
|
||||
selected_filters: [] as string[],
|
||||
greet_target: 20
|
||||
greet_target: 20,
|
||||
age_min: null as number | null,
|
||||
age_max: null as number | null,
|
||||
greeting_count: 1,
|
||||
greeting_messages: [DEFAULT_GREETING_MESSAGE] as string[]
|
||||
})
|
||||
|
||||
const formRules = reactive<any>({
|
||||
selected_filters: [{ required: true, message: '请至少选择一个筛选条件', trigger: 'change' }],
|
||||
greet_target: [{ required: true, message: '请输入招聘人数', trigger: 'blur' }]
|
||||
greet_target: [{ required: true, message: '请输入招聘人数', trigger: 'blur' }],
|
||||
greeting_count: [{ required: true, message: '请输入问候语数量', trigger: 'blur' }]
|
||||
})
|
||||
|
||||
const clearAgeRange = () => {
|
||||
formData.age_min = null
|
||||
formData.age_max = null
|
||||
}
|
||||
|
||||
let pollTimer: ReturnType<typeof setInterval> | null = null
|
||||
|
||||
const fetchOptions = () => {
|
||||
if (!props.accountId) return
|
||||
optionsLoading.value = true
|
||||
ApiRecruitFilterOptions(props.accountId)
|
||||
.then((res: any) => {
|
||||
filterOptions.value = (res.data?.flat_options || []) as string[]
|
||||
filterGroups.value = (res.data?.groups || []) as FilterGroup[]
|
||||
syncedAt.value = res.data?.synced_at || ''
|
||||
// 没有筛选数据时自动触发同步
|
||||
if (filterGroups.value.length === 0 && !syncing.value) {
|
||||
triggerSync()
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
optionsLoading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
const triggerSync = () => {
|
||||
if (!props.accountId || syncing.value) return
|
||||
syncing.value = true
|
||||
ApiRecruitFilterSync(props.accountId)
|
||||
.then(() => {
|
||||
ElMessage.info('正在同步筛选条件，请稍候...')
|
||||
startPolling()
|
||||
})
|
||||
.catch((err: any) => {
|
||||
syncing.value = false
|
||||
const msg = err?.response?.data?.msg || err?.msg || '同步请求失败'
|
||||
ElMessage.warning(msg)
|
||||
})
|
||||
}
|
||||
|
||||
const startPolling = () => {
|
||||
stopPolling()
|
||||
let attempts = 0
|
||||
const maxAttempts = 20
|
||||
pollTimer = setInterval(() => {
|
||||
attempts++
|
||||
if (attempts > maxAttempts) {
|
||||
stopPolling()
|
||||
syncing.value = false
|
||||
ElMessage.warning('同步超时，请稍后重试')
|
||||
return
|
||||
}
|
||||
ApiRecruitFilterOptions(props.accountId)
|
||||
.then((res: any) => {
|
||||
const groups = (res.data?.groups || []) as FilterGroup[]
|
||||
if (groups.length > 0) {
|
||||
filterGroups.value = groups
|
||||
syncedAt.value = res.data?.synced_at || ''
|
||||
stopPolling()
|
||||
syncing.value = false
|
||||
ElMessage.success('筛选条件同步完成')
|
||||
}
|
||||
})
|
||||
}, 3000)
|
||||
}
|
||||
|
||||
const stopPolling = () => {
|
||||
if (pollTimer) {
|
||||
clearInterval(pollTimer)
|
||||
pollTimer = null
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
normalizeGreetingSlots()
|
||||
fetchOptions()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
stopPolling()
|
||||
})
|
||||
|
||||
const getForm = () => {
|
||||
// 内部 value 格式为 "groupName:optName"，返回给后端时只取选项名部分
|
||||
// 并过滤掉"不限"，勾选不限等于不加筛选条件，无需传给后端
|
||||
const filters = formData.selected_filters
|
||||
.map((v) => {
|
||||
const idx = v.indexOf(':')
|
||||
return idx !== -1 ? v.slice(idx + 1) : v
|
||||
})
|
||||
.filter((opt) => opt !== '不限')
|
||||
const greetings = formData.greeting_messages
|
||||
.slice(0, Number(formData.greeting_count) || 1)
|
||||
.map((text) => String(text || '').trim())
|
||||
.filter((text) => !!text)
|
||||
const greetingMessages = Array.from(new Set(greetings.length ? greetings : [DEFAULT_GREETING_MESSAGE]))
|
||||
return {
|
||||
selected_filters: [...formData.selected_filters],
|
||||
greet_target: Number(formData.greet_target) || 20
|
||||
selected_filters: filters,
|
||||
greet_target: Number(formData.greet_target) || 20,
|
||||
age_min: formData.age_min ?? undefined,
|
||||
age_max: formData.age_max ?? undefined,
|
||||
greeting_count: Number(formData.greeting_count) || 1,
|
||||
greeting_messages: greetingMessages
|
||||
}
|
||||
}
|
||||
|
||||
const submit = (): Promise<boolean> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (filterOptions.value.length === 0) {
|
||||
ElMessage.error('暂无可选筛选项，请先启动客户端同步筛选项')
|
||||
reject(false)
|
||||
return
|
||||
}
|
||||
formRef.value?.validate((valid: boolean) => {
|
||||
if (valid) {
|
||||
// 年龄范围校验
|
||||
if (formData.age_min != null && formData.age_max != null && formData.age_min > formData.age_max) {
|
||||
ElMessage.error('最小年龄不能大于最大年龄')
|
||||
reject(false)
|
||||
return
|
||||
}
|
||||
const hasGreeting = formData.greeting_messages
|
||||
.slice(0, Number(formData.greeting_count) || 1)
|
||||
.some((item) => String(item || '').trim().length > 0)
|
||||
if (!hasGreeting) {
|
||||
ElMessage.error('请至少填写 1 条问候语')
|
||||
reject(false)
|
||||
return
|
||||
}
|
||||
resolve(true)
|
||||
} else {
|
||||
ElMessage.error('请完善招聘参数')
|
||||
@@ -118,6 +296,23 @@ const submit = (): Promise<boolean> => {
|
||||
})
|
||||
}
|
||||
|
||||
const normalizeGreetingSlots = () => {
|
||||
const normalizedCount = Math.max(1, Math.min(10, Number(formData.greeting_count) || 1))
|
||||
formData.greeting_count = normalizedCount
|
||||
if (formData.greeting_messages.length > normalizedCount) {
|
||||
formData.greeting_messages = formData.greeting_messages.slice(0, normalizedCount)
|
||||
return
|
||||
}
|
||||
while (formData.greeting_messages.length < normalizedCount) {
|
||||
formData.greeting_messages.push(DEFAULT_GREETING_MESSAGE)
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => formData.greeting_count,
|
||||
() => normalizeGreetingSlots()
|
||||
)
|
||||
|
||||
defineExpose({
|
||||
submit,
|
||||
getForm
|
||||
@@ -129,5 +324,90 @@ defineExpose({
|
||||
width: 100%;
|
||||
padding-right: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
.filter-loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #909399;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.filter-empty {
|
||||
color: #c0c4cc;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.filter-groups {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
max-height: 320px;
|
||||
overflow-y: auto;
|
||||
padding-right: 4px;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
&__title {
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
color: #303133;
|
||||
margin-bottom: 8px;
|
||||
padding-left: 2px;
|
||||
border-left: 3px solid #409eff;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
&__options {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.age-range {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
&__sep {
|
||||
color: #909399;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
&__unit {
|
||||
color: #606266;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.greeting-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.greeting-item {
|
||||
&__label {
|
||||
font-size: 12px;
|
||||
color: #606266;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.greeting-tip {
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -104,4 +104,3 @@ onUnmounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
|
||||
|
||||
@@ -1,56 +1,54 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 搜索区域 -->
|
||||
<!-- <div class="search-container">-->
|
||||
<!-- <el-form ref="queryFormRef" :model="queryParams" :inline="true">-->
|
||||
<!-- <el-form-item prop="seal_type" label="用印用途">-->
|
||||
<!-- <el-input-->
|
||||
<!-- v-model="queryParams.seal_type"-->
|
||||
<!-- placeholder="请输入"-->
|
||||
<!-- clearable-->
|
||||
<!-- @keyup.enter="handleQuery"-->
|
||||
<!-- />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item prop="CaseNumber" label="合同编号">-->
|
||||
<!-- <el-input-->
|
||||
<!-- v-model="queryParams.CaseNumber"-->
|
||||
<!-- placeholder="请输入"-->
|
||||
<!-- clearable-->
|
||||
<!-- @keyup.enter="handleQuery"-->
|
||||
<!-- />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="创建时间" prop="times">-->
|
||||
<!-- <el-date-picker-->
|
||||
<!-- v-model="queryParams.times"-->
|
||||
<!-- type="daterange"-->
|
||||
<!-- value-format="YYYY-MM-DD"-->
|
||||
<!-- placeholder="请选择创建时间"-->
|
||||
<!-- range-separator="至"-->
|
||||
<!-- start-placeholder="开始时间"-->
|
||||
<!-- end-placeholder="结束时间"-->
|
||||
<!-- />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item class="search-buttons">-->
|
||||
<!-- <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>-->
|
||||
<!-- <el-button icon="refresh" @click="handleResetQuery">重置</el-button>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-form>-->
|
||||
<!-- </div>-->
|
||||
<el-card shadow="hover" class="data-table">
|
||||
<div class="data-table__toolbar">
|
||||
<div class="data-table__toolbar--actions">
|
||||
<el-button type="success" icon="plus" @click="handleOpenDialog()">新增</el-button>
|
||||
</div>
|
||||
<div class="app-container account-page ops-page">
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<div class="page-header__title">BOSS 账号管理</div>
|
||||
<div class="page-header__desc">统一管理账号登录状态、Worker 在线状态和任务执行进度</div>
|
||||
</div>
|
||||
<div class="page-header__actions ops-actions">
|
||||
<el-button type="primary" icon="plus" class="ops-btn" @click="handleOpenDialog()">
|
||||
新增账号环境
|
||||
</el-button>
|
||||
<el-button icon="refresh" class="ops-btn" @click="fetchData()">刷新数据</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overview-grid">
|
||||
<el-card
|
||||
v-for="card in overviewCards"
|
||||
:key="card.label"
|
||||
shadow="hover"
|
||||
class="overview-card ops-card"
|
||||
:class="card.tone"
|
||||
>
|
||||
<div class="overview-card__icon">
|
||||
<el-icon><component :is="card.icon" /></el-icon>
|
||||
</div>
|
||||
<div class="overview-card__content">
|
||||
<p>{{ card.label }}</p>
|
||||
<h3>{{ card.value }}</h3>
|
||||
<span>{{ card.sub }}</span>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<el-card shadow="hover" class="table-panel ops-card">
|
||||
<div class="table-panel__toolbar ops-toolbar">
|
||||
<div class="table-tip">系统每 15 秒自动刷新账号与 Worker 状态</div>
|
||||
<el-tag type="info" effect="light">已展开任务：{{ expandedRowKeys.length }}</el-tag>
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
ref="dataTableRef"
|
||||
v-loading="loading"
|
||||
:data="roleList"
|
||||
stripe
|
||||
highlight-current-row
|
||||
row-key="id"
|
||||
border
|
||||
empty-text="暂无账号数据"
|
||||
:expanded-row-keys="expandedRowKeys"
|
||||
class="data-table__content"
|
||||
class="account-table ops-table"
|
||||
@expand-change="handleExpandChange"
|
||||
>
|
||||
<el-table-column type="expand">
|
||||
@@ -59,163 +57,107 @@
|
||||
v-if="expandedRowKeys.includes(scope.row.id)"
|
||||
ref="taskListRef"
|
||||
:boss-id="scope.row.id"
|
||||
></ViewTheTaskListDetails>
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="环境名称" prop="browser_name" />
|
||||
<el-table-column label="电脑标识" prop="worker_id" />
|
||||
<el-table-column label="浏览器环境名称" prop="browser_name" />
|
||||
<el-table-column label="登录昵称" prop="boss_username" />
|
||||
<el-table-column label="电脑名称" prop="worker_name">
|
||||
<el-table-column label="环境名称" prop="browser_name" min-width="150" />
|
||||
<el-table-column label="账号ID" prop="id" width="110" />
|
||||
<el-table-column label="电脑标识" prop="worker_id" min-width="150" />
|
||||
<el-table-column label="登录昵称" prop="boss_username" min-width="120" />
|
||||
<el-table-column label="电脑名称" prop="worker_name" min-width="120">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.worker_name">
|
||||
{{ scope.row.worker_name }}
|
||||
</span>
|
||||
<span v-else>--</span>
|
||||
<span>{{ scope.row.worker_name || '--' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="否已登录 BOSS"
|
||||
prop="is_logged_in"
|
||||
width="140"
|
||||
align="center"
|
||||
header-align="center"
|
||||
>
|
||||
<el-table-column label="是否登录 BOSS" prop="is_logged_in" width="130" align="center">
|
||||
<template #default="scope">
|
||||
<el-tag v-if="scope.row.is_logged_in" type="success">
|
||||
{{ '在线' }}
|
||||
</el-tag>
|
||||
<el-tag v-else type="danger">
|
||||
{{ '离线' }}
|
||||
<el-tag
|
||||
:type="scope.row.is_logged_in ? 'success' : 'danger'"
|
||||
effect="light"
|
||||
class="status-tag ops-status-tag"
|
||||
>
|
||||
{{ scope.row.is_logged_in ? '在线' : '离线' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="Worker 是否在线"
|
||||
prop="worker_online"
|
||||
width="140"
|
||||
align="center"
|
||||
header-align="center"
|
||||
>
|
||||
<el-table-column label="Worker 状态" prop="worker_online" width="120" align="center">
|
||||
<template #default="scope">
|
||||
<el-tag v-if="scope.row.worker_online" type="success">
|
||||
{{ '在线' }}
|
||||
</el-tag>
|
||||
<el-tag v-else type="danger">
|
||||
{{ '离线' }}
|
||||
<el-tag
|
||||
:type="scope.row.worker_online ? 'success' : 'danger'"
|
||||
effect="light"
|
||||
class="status-tag ops-status-tag"
|
||||
>
|
||||
{{ scope.row.worker_online ? '在线' : '离线' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="任务状态"
|
||||
prop="current_task_status"
|
||||
width="100"
|
||||
align="center"
|
||||
header-align="center"
|
||||
>
|
||||
<el-table-column label="任务状态" prop="current_task_status" width="110" align="center">
|
||||
<template #default="scope">
|
||||
<el-tag v-if="scope.row.current_task_status === 'pending'" type="primary">
|
||||
{{ '待派发' }}
|
||||
</el-tag>
|
||||
<el-tag v-else-if="scope.row.current_task_status === 'dispatched'" type="warning">
|
||||
{{ '已派发' }}
|
||||
</el-tag>
|
||||
<el-tag v-else-if="scope.row.current_task_status === 'running'" type="warning">
|
||||
{{ '执行中' }}
|
||||
</el-tag>
|
||||
<el-tag v-else-if="scope.row.current_task_status === 'success'" type="success">
|
||||
{{ '成功' }}
|
||||
</el-tag>
|
||||
<el-tag v-else-if="scope.row.current_task_status === 'failed'" type="danger">
|
||||
{{ '失败' }}
|
||||
<el-tag
|
||||
v-if="scope.row.current_task_status"
|
||||
:type="getTaskStatusMeta(scope.row.current_task_status).type"
|
||||
effect="light"
|
||||
class="status-tag ops-status-tag"
|
||||
>
|
||||
{{ getTaskStatusMeta(scope.row.current_task_status).label }}
|
||||
</el-tag>
|
||||
<span v-else>--</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="更新时间" prop="updated_at">
|
||||
<el-table-column label="更新时间" prop="updated_at" min-width="170">
|
||||
<template #default="scope">
|
||||
{{ formatISOToDateTime(scope.row?.updated_at || '') }}
|
||||
{{ scope.row?.updated_at ? formatISOToDateTime(scope.row.updated_at) : '--' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column fixed="right" label="操作" width="300">
|
||||
<el-table-column fixed="right" label="操作" width="360">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
type="warning"
|
||||
size="small"
|
||||
@click="onApiTasksAdd(scope.row.id, 'boss_reply', {})"
|
||||
>
|
||||
回复
|
||||
</el-button>
|
||||
<!-- <el-button-->
|
||||
<!-- type="primary"-->
|
||||
<!-- size="small"-->
|
||||
<!-- link-->
|
||||
<!-- icon="edit"-->
|
||||
<!-- @click="onDetails(scope.row.id)"-->
|
||||
<!-- >-->
|
||||
<!-- 详情-->
|
||||
<!-- </el-button>-->
|
||||
<!-- <el-button-->
|
||||
<!-- type="primary"-->
|
||||
<!-- size="small"-->
|
||||
<!-- link-->
|
||||
<!-- icon="edit"-->
|
||||
<!-- @click="onApiTasksAdd(scope.row.id)"-->
|
||||
<!-- >-->
|
||||
<!-- 发布任务-->
|
||||
<!-- </el-button>-->
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="onApiTasksAdd(scope.row.id, 'check_login', {})"
|
||||
>
|
||||
检查登录
|
||||
</el-button>
|
||||
<el-button
|
||||
type="success"
|
||||
size="small"
|
||||
@click="openRecruitDialog(scope.row.id)"
|
||||
>
|
||||
招聘
|
||||
</el-button>
|
||||
<!-- <el-button-->
|
||||
<!-- type="primary"-->
|
||||
<!-- size="small"-->
|
||||
<!-- link-->
|
||||
<!-- icon="edit"-->
|
||||
<!-- @click="onDetails(scope.row.id)"-->
|
||||
<!-- >-->
|
||||
<!-- 查看任务-->
|
||||
<!-- </el-button>-->
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
link
|
||||
icon="edit"
|
||||
@click="handleExpandTask(scope.row.id)"
|
||||
>
|
||||
展开任务
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="small"
|
||||
link
|
||||
icon="delete"
|
||||
@click="onUserDeleteDepartment(scope.row.id)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
<div class="action-group ops-actions">
|
||||
<el-button
|
||||
type="warning"
|
||||
size="small"
|
||||
class="ops-btn"
|
||||
@click="onApiTasksAdd(scope.row.id, 'boss_reply', {})"
|
||||
>
|
||||
回复
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
class="ops-btn"
|
||||
@click="onApiTasksAdd(scope.row.id, 'check_login', {})"
|
||||
>
|
||||
检查登录
|
||||
</el-button>
|
||||
<el-button
|
||||
type="success"
|
||||
size="small"
|
||||
class="ops-btn"
|
||||
@click="openRecruitDialog(scope.row.id)"
|
||||
>
|
||||
招聘
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
link
|
||||
icon="edit"
|
||||
@click="handleExpandTask(scope.row.id)"
|
||||
>
|
||||
{{ expandedRowKeys.includes(scope.row.id) ? '收起任务' : '展开任务' }}
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="small"
|
||||
link
|
||||
icon="delete"
|
||||
@click="onUserDeleteDepartment(scope.row.id)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-if="total > 0"
|
||||
v-model:total="total"
|
||||
v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="fetchData"
|
||||
/>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
@@ -229,9 +171,9 @@ import { BusinessEditApplication } from '@/api/calibration/applicationForSealApp
|
||||
import { ApiAccounts, ApiAccountsAdd, ApiAccountsDelete } from '@/api/BoosAccountManagement'
|
||||
import ViewTheTaskListDetails from './components/ViewTheTaskListDetails.vue'
|
||||
import { ApiTasksAdd } from '@/api/TaskManagement'
|
||||
// import TaskForm from '@/views/TaskManagement/components/TaskForm.vue'
|
||||
import { formatISOToDateTime } from '@/utils/auxiliaryFunction'
|
||||
import { createTimer } from '@/utils/TimerManager'
|
||||
import { User, Monitor, ChatDotRound, Message } from '@element-plus/icons-vue'
|
||||
|
||||
defineOptions({
|
||||
name: 'Role',
|
||||
@@ -239,60 +181,89 @@ defineOptions({
|
||||
})
|
||||
|
||||
const { startTimer, stopTimer } = createTimer()
|
||||
|
||||
const queryFormRef = ref()
|
||||
const dataTableRef = ref()
|
||||
const taskListRef = ref()
|
||||
|
||||
const loading = ref(false)
|
||||
const total = ref(0)
|
||||
const roleList = ref<RolePageVO[]>([])
|
||||
const expandedRowKeys = ref<Array<string | number>>([])
|
||||
|
||||
const queryParams = reactive<any>({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
times: [],
|
||||
seal_type: '',
|
||||
CaseNumber: ''
|
||||
const TASK_STATUS_MAP: Record<
|
||||
string,
|
||||
{
|
||||
label: string
|
||||
type: 'primary' | 'success' | 'warning' | 'info' | 'danger'
|
||||
}
|
||||
> = {
|
||||
pending: { label: '待派发', type: 'info' },
|
||||
dispatched: { label: '已派发', type: 'warning' },
|
||||
running: { label: '执行中', type: 'primary' },
|
||||
success: { label: '成功', type: 'success' },
|
||||
failed: { label: '失败', type: 'danger' }
|
||||
}
|
||||
|
||||
const getTaskStatusMeta = (status: string) =>
|
||||
TASK_STATUS_MAP[status] || {
|
||||
label: '--',
|
||||
type: 'info'
|
||||
}
|
||||
|
||||
const accountStats = computed(() => {
|
||||
const list = roleList.value || []
|
||||
return {
|
||||
total: list.length,
|
||||
loggedIn: list.filter((item: any) => Boolean(item.is_logged_in)).length,
|
||||
workerOnline: list.filter((item: any) => Boolean(item.worker_online)).length,
|
||||
runningTasks: list.filter((item: any) => item.current_task_status === 'running').length
|
||||
}
|
||||
})
|
||||
|
||||
// 表格数据
|
||||
const roleList = ref<RolePageVO[]>()
|
||||
const expandedRowKeys = ref<string[]>([])
|
||||
// 弹窗
|
||||
const dialog = reactive({
|
||||
title: '',
|
||||
visible: false
|
||||
})
|
||||
const overviewCards = computed(() => [
|
||||
{
|
||||
label: '账号总数',
|
||||
value: accountStats.value.total,
|
||||
sub: `已登录：${accountStats.value.loggedIn}`,
|
||||
icon: User,
|
||||
tone: 'tone-1'
|
||||
},
|
||||
{
|
||||
label: '在线 Worker',
|
||||
value: accountStats.value.workerOnline,
|
||||
sub: `总 Worker：${accountStats.value.total}`,
|
||||
icon: Monitor,
|
||||
tone: 'tone-2'
|
||||
},
|
||||
{
|
||||
label: '运行中任务',
|
||||
value: accountStats.value.runningTasks,
|
||||
sub: '任务状态实时同步',
|
||||
icon: ChatDotRound,
|
||||
tone: 'tone-3'
|
||||
},
|
||||
{
|
||||
label: '待处理账号',
|
||||
value: Math.max(accountStats.value.total - accountStats.value.loggedIn, 0),
|
||||
sub: '建议优先检查登录',
|
||||
icon: Message,
|
||||
tone: 'tone-4'
|
||||
}
|
||||
])
|
||||
|
||||
// 获取数据
|
||||
function fetchData() {
|
||||
loading.value = true
|
||||
function fetchData(silent = false) {
|
||||
if (!silent) {
|
||||
loading.value = true
|
||||
}
|
||||
ApiAccounts()
|
||||
.then((res: any) => {
|
||||
roleList.value = res.data
|
||||
// total.value = res.total
|
||||
roleList.value = res.data || []
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false
|
||||
if (!silent) {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 查询（重置页码后获取数据）
|
||||
function handleQuery() {
|
||||
queryParams.pageNum = 1
|
||||
fetchData()
|
||||
}
|
||||
|
||||
// 重置查询
|
||||
function handleResetQuery() {
|
||||
if (queryFormRef.value) queryFormRef.value.resetFields()
|
||||
queryParams.pageNum = 1
|
||||
fetchData()
|
||||
}
|
||||
|
||||
// 打开角色弹窗
|
||||
function handleOpenDialog(data: any = null) {
|
||||
dialog.visible = true
|
||||
if (data) {
|
||||
functionDialogBox(
|
||||
BoosAccountForm,
|
||||
@@ -322,7 +293,6 @@ function handleOpenDialog(data: any = null) {
|
||||
}
|
||||
}
|
||||
|
||||
// 提交角色表单
|
||||
function handleSubmit(data: any) {
|
||||
loading.value = true
|
||||
const roleId = data.id
|
||||
@@ -330,14 +300,14 @@ function handleSubmit(data: any) {
|
||||
BusinessEditApplication(data)
|
||||
.then(() => {
|
||||
ElMessage.success('修改成功')
|
||||
handleResetQuery()
|
||||
fetchData()
|
||||
})
|
||||
.finally(() => (loading.value = false))
|
||||
} else {
|
||||
ApiAccountsAdd(data)
|
||||
.then(() => {
|
||||
ElMessage.success('操作成功')
|
||||
handleResetQuery()
|
||||
fetchData()
|
||||
})
|
||||
.finally(() => (loading.value = false))
|
||||
}
|
||||
@@ -354,7 +324,7 @@ const onUserDeleteDepartment = (id: string) => {
|
||||
ApiAccountsDelete(id)
|
||||
.then(() => {
|
||||
ElMessage.success('删除成功')
|
||||
handleResetQuery()
|
||||
fetchData()
|
||||
})
|
||||
.finally(() => (loading.value = false))
|
||||
},
|
||||
@@ -364,20 +334,6 @@ const onUserDeleteDepartment = (id: string) => {
|
||||
)
|
||||
}
|
||||
|
||||
// const onDetails = (id: string) => {
|
||||
// functionDialogBox(
|
||||
// ViewTheTaskListDetails,
|
||||
// {
|
||||
// bossId: id
|
||||
// },
|
||||
// {
|
||||
// title: '任务列表',
|
||||
// width: '1200',
|
||||
// footerVisible: false
|
||||
// }
|
||||
// )
|
||||
// }
|
||||
|
||||
const openRecruitDialog = (id: string) => {
|
||||
functionDialogBox(
|
||||
RecruitTaskForm,
|
||||
@@ -395,55 +351,204 @@ const openRecruitDialog = (id: string) => {
|
||||
}
|
||||
|
||||
const onApiTasksAdd = (id: string, task_type: string, params: any = {}) => {
|
||||
// functionDialogBox(
|
||||
// TaskForm,
|
||||
// {},
|
||||
// {
|
||||
// title: '提交新任务',
|
||||
// width: '900',
|
||||
// ok(value: any) {
|
||||
// ApiTasksAdd({ ...value, boss_id: id })
|
||||
// .then(() => {
|
||||
// ElMessage.success('提交成功')
|
||||
// handleResetQuery()
|
||||
// })
|
||||
// .finally(() => (loading.value = false))
|
||||
// }
|
||||
// }
|
||||
// )
|
||||
loading.value = true
|
||||
ApiTasksAdd({ params, task_type, boss_id: id })
|
||||
.then((res: any) => {
|
||||
ElMessage.success(res.msg)
|
||||
handleResetQuery()
|
||||
fetchData()
|
||||
refreshTaskList()
|
||||
})
|
||||
.finally(() => (loading.value = false))
|
||||
}
|
||||
function handleExpandChange(row: any, expandedRows: any[]) {
|
||||
|
||||
function handleExpandChange(_row: any, expandedRows: any[]) {
|
||||
expandedRowKeys.value = expandedRows.map((item) => item.id)
|
||||
}
|
||||
|
||||
const handleExpandTask = (rowId: string) => {
|
||||
// 找到对应的行数据
|
||||
const targetRow = roleList.value?.find((item) => item.id === rowId)
|
||||
const handleExpandTask = (rowId: string | number) => {
|
||||
const targetRow = roleList.value?.find((item: any) => item.id === rowId)
|
||||
if (targetRow && dataTableRef.value) {
|
||||
dataTableRef.value.toggleRowExpansion(targetRow)
|
||||
}
|
||||
}
|
||||
|
||||
const refreshTaskList = () => {
|
||||
// 调用子组件的 fetchData 方法
|
||||
taskListRef.value?.fetchData()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// handleQuery()
|
||||
// fetchData()
|
||||
startTimer(() => {
|
||||
handleQuery()
|
||||
})
|
||||
fetchData(true)
|
||||
}, 15000)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
stopTimer()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.account-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
gap: 14px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&__title {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: #1f2d3d;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
&__desc {
|
||||
margin-top: 4px;
|
||||
font-size: 13px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.overview-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.overview-card {
|
||||
border: 1px solid #ebeef5;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
|
||||
:deep(.el-card__body) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
&__content {
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 6px 0 4px;
|
||||
font-size: 28px;
|
||||
color: #111827;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tone-1 .overview-card__icon {
|
||||
background: linear-gradient(135deg, #7f7fd5 0%, #9156e8 100%);
|
||||
}
|
||||
|
||||
.tone-2 .overview-card__icon {
|
||||
background: linear-gradient(135deg, #56bafd 0%, #16e9fd 100%);
|
||||
}
|
||||
|
||||
.tone-3 .overview-card__icon {
|
||||
background: linear-gradient(135deg, #f199ee 0%, #ef6b8b 100%);
|
||||
}
|
||||
|
||||
.tone-4 .overview-card__icon {
|
||||
background: linear-gradient(135deg, #36d1dc 0%, #5b86e5 100%);
|
||||
}
|
||||
|
||||
.table-panel {
|
||||
border: 1px solid #ebeef5;
|
||||
|
||||
:deep(.el-card__body) {
|
||||
padding: 14px 16px 16px;
|
||||
}
|
||||
|
||||
&__toolbar {
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.table-tip {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.account-table {
|
||||
:deep(.el-table__header th) {
|
||||
background: #f6f8fc;
|
||||
}
|
||||
|
||||
:deep(.el-table__row:hover > td) {
|
||||
background: #f5f9ff !important;
|
||||
}
|
||||
}
|
||||
|
||||
.action-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
min-width: 62px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.page-header {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.page-header__title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.page-header__actions,
|
||||
.table-panel__toolbar {
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,12 +1,16 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 搜索区域 -->
|
||||
<div class="search-container">
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
||||
<div class="app-container contacts-page ops-page">
|
||||
<div class="page-header">
|
||||
<div class="page-header__title">联系人信息</div>
|
||||
<div class="page-header__desc">统一查看候选人联系状态、回复进度和微信交换情况</div>
|
||||
</div>
|
||||
|
||||
<el-card shadow="hover" class="search-panel ops-card">
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true" class="search-form">
|
||||
<el-form-item prop="search" label="姓名">
|
||||
<el-input
|
||||
v-model="queryParams.search"
|
||||
placeholder="请输入"
|
||||
placeholder="请输入候选人姓名"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
@@ -16,92 +20,78 @@
|
||||
v-model="queryParams.times"
|
||||
type="daterange"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="请选择创建时间"
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item class="search-buttons">
|
||||
<el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="refresh" @click="handleResetQuery">重置</el-button>
|
||||
<el-form-item class="search-actions ops-actions">
|
||||
<el-button type="primary" :icon="Search" class="ops-btn" @click="handleQuery">
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button :icon="Refresh" class="ops-btn" @click="handleResetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<el-card shadow="hover" class="data-table">
|
||||
<div class="data-table__toolbar">
|
||||
<div class="data-table__toolbar--actions">
|
||||
<!-- <el-button type="success" icon="plus" @click="handleOpenDialog()">新增</el-button>-->
|
||||
</div>
|
||||
<div class="data-table__toolbar--actions">
|
||||
<el-button type="success" icon="Download" @click="onApiContactsExport()">导出</el-button>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="hover" class="table-panel ops-card">
|
||||
<div class="table-panel__toolbar ops-toolbar">
|
||||
<div class="toolbar-summary">
|
||||
<span class="summary-item">当前页 {{ pageCount }} 人</span>
|
||||
<span class="summary-item summary-item--success">已回复 {{ repliedCount }} 人</span>
|
||||
<span class="summary-item summary-item--wechat">已交换微信 {{ wechatCount }} 人</span>
|
||||
</div>
|
||||
<el-button type="success" :icon="Download" class="ops-btn" @click="onApiContactsExport">
|
||||
导出联系人
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
ref="dataTableRef"
|
||||
v-loading="loading"
|
||||
:data="roleList"
|
||||
stripe
|
||||
highlight-current-row
|
||||
border
|
||||
class="data-table__content"
|
||||
@selection-change="handleSelectionChange"
|
||||
empty-text="暂无联系人数据"
|
||||
class="contacts-table ops-table"
|
||||
>
|
||||
<el-table-column label="候选人姓名" prop="name" />
|
||||
<el-table-column label="应聘岗位" prop="position" />
|
||||
<el-table-column label="联系方式（电话号或微信号）" prop="contact" />
|
||||
<el-table-column label="回复状态" prop="reply_status">
|
||||
<el-table-column label="候选人姓名" prop="name" min-width="120" />
|
||||
<el-table-column label="应聘岗位" prop="position" min-width="130" />
|
||||
<el-table-column label="联系方式（电话号或微信号）" prop="contact" min-width="180" />
|
||||
<el-table-column label="回复状态" prop="reply_status" width="110" align="center">
|
||||
<template #default="scope">
|
||||
<el-tag v-if="scope.row.reply_status === '已回复'" type="success">
|
||||
{{ scope.row.reply_status }}
|
||||
</el-tag>
|
||||
<el-tag v-else type="danger">
|
||||
{{ scope.row.reply_status }}
|
||||
<el-tag
|
||||
:type="scope.row.reply_status === '已回复' ? 'success' : 'danger'"
|
||||
effect="light"
|
||||
class="status-tag ops-status-tag"
|
||||
>
|
||||
{{ scope.row.reply_status || '未回复' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="微信交换" prop="wechat_exchanged">
|
||||
<el-table-column label="微信交换" prop="wechat_exchanged" width="110" align="center">
|
||||
<template #default="scope">
|
||||
<el-tag v-if="scope.row.wechat_exchanged" type="success">
|
||||
{{ '已交换' }}
|
||||
</el-tag>
|
||||
<el-tag v-else type="danger">
|
||||
{{ '未交换' }}
|
||||
<el-tag
|
||||
:type="scope.row.wechat_exchanged ? 'success' : 'info'"
|
||||
effect="light"
|
||||
class="status-tag ops-status-tag"
|
||||
>
|
||||
{{ scope.row.wechat_exchanged ? '已交换' : '未交换' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="备注信息" prop="notes" />
|
||||
<el-table-column label="联系时间" prop="contacted_at">
|
||||
<el-table-column label="备注信息" prop="notes" min-width="160" show-overflow-tooltip />
|
||||
<el-table-column label="联系时间" prop="contacted_at" min-width="170">
|
||||
<template #default="scope">
|
||||
{{ formatISOToDateTime(scope.row?.contacted_at || '') }}
|
||||
{{ scope.row?.contacted_at ? formatISOToDateTime(scope.row.contacted_at) : '--' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" prop="created_at">
|
||||
<el-table-column label="创建时间" prop="created_at" min-width="170">
|
||||
<template #default="scope">
|
||||
{{ formatISOToDateTime(scope.row?.created_at || '') }}
|
||||
{{ scope.row?.created_at ? formatISOToDateTime(scope.row.created_at) : '--' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column fixed="right" label="操作" width="140">-->
|
||||
<!-- <template #default="scope">-->
|
||||
<!-- <el-button-->
|
||||
<!-- type="primary"-->
|
||||
<!-- size="small"-->
|
||||
<!-- link-->
|
||||
<!-- icon="edit"-->
|
||||
<!-- @click="onDetails(scope.row.task_id)"-->
|
||||
<!-- >-->
|
||||
<!-- 详情-->
|
||||
<!-- </el-button>-->
|
||||
<!-- <!– <el-button–>-->
|
||||
<!-- <!– type="danger"–>-->
|
||||
<!-- <!– size="small"–>-->
|
||||
<!-- <!– link–>-->
|
||||
<!-- <!– icon="delete"–>-->
|
||||
<!-- <!– @click="onUserDeleteDepartment(scope.row.id)"–>-->
|
||||
<!-- <!– >–>-->
|
||||
<!-- <!– 删除–>-->
|
||||
<!-- <!– </el-button>–>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
@@ -118,6 +108,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ApiContacts, ApiContactsExport } from '@/api/ContactInformation'
|
||||
import { formatISOToDateTime } from '@/utils/auxiliaryFunction'
|
||||
import { Download, Refresh, Search } from '@element-plus/icons-vue'
|
||||
|
||||
defineOptions({
|
||||
name: 'Role',
|
||||
@@ -125,9 +116,7 @@ defineOptions({
|
||||
})
|
||||
|
||||
const queryFormRef = ref()
|
||||
|
||||
const loading = ref(false)
|
||||
const ids = ref<number[]>([])
|
||||
const total = ref(0)
|
||||
|
||||
const queryParams = reactive<any>({
|
||||
@@ -137,46 +126,40 @@ const queryParams = reactive<any>({
|
||||
search: ''
|
||||
})
|
||||
|
||||
// 表格数据
|
||||
const roleList = ref<any[]>()
|
||||
const roleList = ref<any[]>([])
|
||||
const pageCount = computed(() => roleList.value.length)
|
||||
const repliedCount = computed(
|
||||
() => roleList.value.filter((item: any) => item.reply_status === '已回复').length
|
||||
)
|
||||
const wechatCount = computed(
|
||||
() => roleList.value.filter((item: any) => Boolean(item.wechat_exchanged)).length
|
||||
)
|
||||
|
||||
// // 弹窗
|
||||
// const dialog = reactive({
|
||||
// title: '',
|
||||
// visible: false
|
||||
// })
|
||||
|
||||
// 获取数据
|
||||
function fetchData() {
|
||||
loading.value = true
|
||||
ApiContacts(queryParams)
|
||||
.then((res: any) => {
|
||||
roleList.value = res.data.results
|
||||
total.value = res.data.total
|
||||
roleList.value = res.data.results || []
|
||||
total.value = res.data.total || 0
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
// 查询（重置页码后获取数据）
|
||||
function handleQuery() {
|
||||
queryParams.pageNum = 1
|
||||
fetchData()
|
||||
}
|
||||
|
||||
// // 重置查询
|
||||
function handleResetQuery() {
|
||||
if (queryFormRef.value) queryFormRef.value?.resetFields()
|
||||
if (queryFormRef.value) {
|
||||
queryFormRef.value.resetFields()
|
||||
}
|
||||
queryParams.pageNum = 1
|
||||
fetchData()
|
||||
}
|
||||
|
||||
// 行复选框选中
|
||||
function handleSelectionChange(selection: any) {
|
||||
ids.value = selection.map((item: any) => item.id)
|
||||
}
|
||||
|
||||
const onApiContactsExport = () => {
|
||||
ApiContactsExport(queryParams).then((res: any) => {
|
||||
if (res.data.download_url) {
|
||||
@@ -191,96 +174,125 @@ const onApiContactsExport = () => {
|
||||
})
|
||||
}
|
||||
|
||||
// // 打开角色弹窗
|
||||
// function handleOpenDialog(data: any = null) {
|
||||
// dialog.visible = true
|
||||
// if (data) {
|
||||
// functionDialogBox(
|
||||
// TaskForm,
|
||||
// {
|
||||
// newData: data
|
||||
// },
|
||||
// {
|
||||
// title: '编辑申请用印',
|
||||
// width: '900',
|
||||
// ok(value: any) {
|
||||
// handleSubmit({ id: data.id, ...value })
|
||||
// }
|
||||
// }
|
||||
// )
|
||||
// } else {
|
||||
// functionDialogBox(
|
||||
// TaskForm,
|
||||
// {},
|
||||
// {
|
||||
// title: '提交新任务',
|
||||
// width: '900',
|
||||
// ok(value: any) {
|
||||
// handleSubmit(value)
|
||||
// }
|
||||
// }
|
||||
// )
|
||||
// }
|
||||
// }
|
||||
|
||||
// // 提交角色表单
|
||||
// function handleSubmit(data: any) {
|
||||
// loading.value = true
|
||||
// const roleId = data.id
|
||||
// if (roleId) {
|
||||
// BusinessEditApplication(data)
|
||||
// .then(() => {
|
||||
// ElMessage.success('修改成功')
|
||||
// handleResetQuery()
|
||||
// })
|
||||
// .finally(() => (loading.value = false))
|
||||
// } else {
|
||||
// ApiTasksAdd(data)
|
||||
// .then(() => {
|
||||
// ElMessage.success('新增成功')
|
||||
// handleResetQuery()
|
||||
// })
|
||||
// .finally(() => (loading.value = false))
|
||||
// }
|
||||
// }
|
||||
|
||||
// const onUserDeleteDepartment = (id: string) => {
|
||||
// ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
|
||||
// confirmButtonText: '确定',
|
||||
// cancelButtonText: '取消',
|
||||
// type: 'warning'
|
||||
// }).then(
|
||||
// () => {
|
||||
// loading.value = true
|
||||
// BusinessDeleteApplication(id)
|
||||
// .then(() => {
|
||||
// ElMessage.success('删除成功')
|
||||
// handleResetQuery()
|
||||
// })
|
||||
// .finally(() => (loading.value = false))
|
||||
// },
|
||||
// () => {
|
||||
// ElMessage.info('已取消删除')
|
||||
// }
|
||||
// )
|
||||
// }
|
||||
|
||||
// const onDetails = (task_id: string) => {
|
||||
// ApiTasksTaskId(task_id).then((res: any) => {
|
||||
// functionDialogBox(
|
||||
// TaskDetails,
|
||||
// {
|
||||
// newData: res.data
|
||||
// },
|
||||
// {
|
||||
// title: '详情',
|
||||
// width: '900'
|
||||
// }
|
||||
// )
|
||||
// })
|
||||
// }
|
||||
|
||||
onMounted(() => {
|
||||
handleQuery()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.contacts-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
|
||||
&__title {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: #1f2d3d;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
&__desc {
|
||||
font-size: 13px;
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
|
||||
.search-panel,
|
||||
.table-panel {
|
||||
border: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
.search-panel {
|
||||
:deep(.el-card__body) {
|
||||
padding: 16px 18px 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-form {
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-actions {
|
||||
:deep(.el-form-item__content) {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.table-panel {
|
||||
:deep(.el-card__body) {
|
||||
padding: 14px 16px 16px;
|
||||
}
|
||||
|
||||
&__toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.summary-item {
|
||||
font-size: 12px;
|
||||
color: #5b6472;
|
||||
background: #f4f7fb;
|
||||
border: 1px solid #e8eef7;
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.summary-item--success {
|
||||
background: rgba(103, 194, 58, 0.1);
|
||||
color: #67c23a;
|
||||
border-color: rgba(103, 194, 58, 0.28);
|
||||
}
|
||||
|
||||
.summary-item--wechat {
|
||||
background: rgba(64, 158, 255, 0.1);
|
||||
color: #409eff;
|
||||
border-color: rgba(64, 158, 255, 0.28);
|
||||
}
|
||||
|
||||
.contacts-table {
|
||||
:deep(.el-table__header th) {
|
||||
background: #f6f8fc;
|
||||
}
|
||||
|
||||
:deep(.el-table__row:hover > td) {
|
||||
background: #f5f9ff !important;
|
||||
}
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
min-width: 62px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.page-header__title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.table-panel__toolbar {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="app-container ops-page">
|
||||
<div class="chart-header">
|
||||
<div class="chart-title">每日数据明细</div>
|
||||
<el-radio-group v-model="queryParams.days" size="small" @change="handleTimeChange">
|
||||
@@ -8,21 +8,19 @@
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<el-card shadow="hover" class="data-table">
|
||||
<div class="data-table__toolbar">
|
||||
<div class="data-table__toolbar--actions">
|
||||
<!-- <el-button type="success" icon="plus" @click="handleOpenDialog()">新增</el-button>-->
|
||||
</div>
|
||||
</div>
|
||||
<el-card shadow="hover" class="daily-table-card ops-card">
|
||||
<el-table
|
||||
ref="dataTableRef"
|
||||
v-loading="loading"
|
||||
:data="roleList"
|
||||
highlight-current-row
|
||||
stripe
|
||||
border
|
||||
class="data-table__content"
|
||||
class="daily-table ops-table"
|
||||
empty-text="暂无统计数据"
|
||||
>
|
||||
<el-table-column label="联系人数" prop="contacts" />
|
||||
<el-table-column label="打招呼人数" prop="greeted" />
|
||||
<el-table-column label="回复人数" prop="replied" />
|
||||
<el-table-column label="微信相关数量" prop="wechat"></el-table-column>
|
||||
<el-table-column label="回复率" prop="reply_rate" />
|
||||
@@ -115,85 +113,34 @@ onMounted(() => {
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.headline-statistics {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-bottom: 16px;
|
||||
height: 140px;
|
||||
}
|
||||
::v-deep(.statistics-box) {
|
||||
display: flex;
|
||||
//justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-size: 30px;
|
||||
gap: 20px;
|
||||
.statistics-box-img {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 15px;
|
||||
}
|
||||
.img-bg1 {
|
||||
background: linear-gradient(135deg, #7f7fd5 0%, #9156e8 100%);
|
||||
}
|
||||
.img-bg2 {
|
||||
background: linear-gradient(135deg, #f199ee 0%, #ef6b8b 100%);
|
||||
}
|
||||
.img-bg3 {
|
||||
background: linear-gradient(135deg, #56bafd 0%, #16e9fd 100%);
|
||||
}
|
||||
.img-bg4 {
|
||||
background: linear-gradient(135deg, #51eb90 0%, #49f7d2 100%);
|
||||
}
|
||||
.statistics-box-text {
|
||||
//flex: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
color: #adb0b3;
|
||||
& > span:nth-child(1) {
|
||||
font-size: 14px;
|
||||
}
|
||||
& > span:nth-child(2) {
|
||||
font-size: 26px;
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
}
|
||||
& > span:nth-child(3) {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.chart-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
font-size: 20px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.time-filter {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
.daily-table-card {
|
||||
border: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
:deep(.el-button) {
|
||||
padding: 5px 12px;
|
||||
font-size: 13px;
|
||||
:deep(.daily-table .el-table__header th) {
|
||||
background: #f8faff;
|
||||
color: #303133;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&.el-button--primary {
|
||||
background-color: #409eff;
|
||||
border-color: #409eff;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
:deep(.daily-table .el-table__row td) {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
:deep(.daily-table .el-table__row:hover > td) {
|
||||
background-color: #f5f9ff !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -26,6 +26,10 @@ const data = ref<any>({
|
||||
name: '联系人数',
|
||||
data: []
|
||||
},
|
||||
{
|
||||
name: '打招呼',
|
||||
data: []
|
||||
},
|
||||
{
|
||||
name: '已回复',
|
||||
data: []
|
||||
@@ -54,6 +58,12 @@ const initChart = () => {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.96)',
|
||||
borderColor: '#ebeef5',
|
||||
borderWidth: 1,
|
||||
textStyle: {
|
||||
color: '#303133'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
@@ -86,8 +96,6 @@ const initChart = () => {
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 1,
|
||||
interval: 0.2,
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
@@ -109,6 +117,7 @@ const initChart = () => {
|
||||
series: data.value.series.map((item: any, index: number) => ({
|
||||
name: item.name,
|
||||
type: 'bar',
|
||||
barMaxWidth: 26,
|
||||
barGap: '10%',
|
||||
data: item.data,
|
||||
itemStyle: {
|
||||
@@ -119,7 +128,8 @@ const initChart = () => {
|
||||
itemStyle: {
|
||||
opacity: 0.8
|
||||
}
|
||||
}
|
||||
},
|
||||
animationDuration: 500
|
||||
})),
|
||||
legend: {
|
||||
data: data.value.series.map((item: any) => item.name),
|
||||
@@ -147,6 +157,10 @@ const onApiStatsDaily = (days: string) => {
|
||||
name: '联系人数',
|
||||
data: res.data?.map((item) => item.contacts)
|
||||
},
|
||||
{
|
||||
name: '打招呼',
|
||||
data: res.data?.map((item) => item.greeted)
|
||||
},
|
||||
{
|
||||
name: '已回复',
|
||||
data: res.data?.map((item) => item.replied)
|
||||
@@ -212,13 +226,15 @@ defineExpose({
|
||||
<style scoped lang="scss">
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 12px 16px 8px;
|
||||
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
|
||||
border-radius: 10px;
|
||||
border: 1px solid #eef2f7;
|
||||
}
|
||||
|
||||
.trend-chart {
|
||||
width: 100%;
|
||||
height: v-bind(height);
|
||||
min-height: 320px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,50 +1,32 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="headline-statistics">
|
||||
<el-card shadow="hover" body-class="statistics-box" style="flex: 1">
|
||||
<div class="statistics-box-img img-bg1">
|
||||
<el-icon><User /></el-icon>
|
||||
<div class="app-container stats-page ops-page">
|
||||
<div class="stats-top">
|
||||
<div class="stats-top__title">招聘数据概览</div>
|
||||
<div class="stats-top__desc">实时追踪打招呼、回复、微信交换、Worker 与账号状态</div>
|
||||
</div>
|
||||
|
||||
<div v-loading="statsLoading" class="stats-grid">
|
||||
<el-card
|
||||
v-for="card in statCards"
|
||||
:key="card.key || card.label"
|
||||
shadow="hover"
|
||||
class="stats-card ops-card"
|
||||
:class="[card.tone, { 'stats-card--active': card.key && activeMetric === card.key }]"
|
||||
>
|
||||
<div class="stats-card__icon">
|
||||
<el-icon><component :is="card.icon" /></el-icon>
|
||||
</div>
|
||||
<div class="statistics-box-text">
|
||||
<span>总联系人数</span>
|
||||
<span>{{ apiStatsData.contacts?.total || 0 }}</span>
|
||||
<span>今日：{{ apiStatsData.contacts?.today || 0 }}</span>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card shadow="hover" body-class="statistics-box" style="flex: 1">
|
||||
<div class="statistics-box-img img-bg2">
|
||||
<el-icon><ChatDotRound /></el-icon>
|
||||
</div>
|
||||
<div class="statistics-box-text">
|
||||
<span>已回复人数</span>
|
||||
<span>{{ apiStatsData.contacts?.replied || 0 }}</span>
|
||||
<span>回复率：{{ apiStatsData.contacts?.reply_rate || 0 }}%</span>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card shadow="hover" body-class="statistics-box" style="flex: 1">
|
||||
<div class="statistics-box-img img-bg3">
|
||||
<el-icon><ChatLineRound /></el-icon>
|
||||
</div>
|
||||
<div class="statistics-box-text">
|
||||
<span>微信交换数</span>
|
||||
<span>{{ apiStatsData.wechat?.total || 0 }}</span>
|
||||
<span>成功率：{{ apiStatsData.wechat?.success_rate || 0 }}%</span>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card shadow="hover" body-class="statistics-box" style="flex: 1">
|
||||
<div class="statistics-box-img img-bg4">
|
||||
<el-icon><Monitor /></el-icon>
|
||||
</div>
|
||||
<div class="statistics-box-text">
|
||||
<span>在线Worker</span>
|
||||
<span>{{ apiStatsData?.accounts?.logged_in || 0 }}</span>
|
||||
<span>总数：{{ apiStatsData?.accounts?.total || 0 }}</span>
|
||||
<div class="stats-card__content">
|
||||
<p>{{ card.label }}</p>
|
||||
<h3>{{ card.value }}</h3>
|
||||
<span>{{ card.sub }}</span>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
<el-card shadow="hover">
|
||||
<div class="chart-header">
|
||||
<div class="chart-title">数据趋势</div>
|
||||
|
||||
<el-card shadow="hover" class="section-card ops-card">
|
||||
<div class="section-card__header">
|
||||
<div class="section-card__title">数据趋势</div>
|
||||
<el-radio-group v-model="currentTime" size="small" @change="handleTimeChange">
|
||||
<el-radio-button v-for="item in timeOptions" :key="item.value" :value="item.value">
|
||||
{{ item.label }}
|
||||
@@ -53,7 +35,8 @@
|
||||
</div>
|
||||
<DataTrendChart ref="dataTrendChartRef" />
|
||||
</el-card>
|
||||
<el-card shadow="hover">
|
||||
|
||||
<el-card shadow="hover" class="section-card ops-card">
|
||||
<DailyDataBreakdown></DailyDataBreakdown>
|
||||
</el-card>
|
||||
</div>
|
||||
@@ -63,7 +46,8 @@
|
||||
import { ApiStats } from '@/api/ContactInformation'
|
||||
import { Monitor, User, ChatDotRound, ChatLineRound } from '@element-plus/icons-vue'
|
||||
import DataTrendChart from './components/DataTrendChart.vue'
|
||||
import { ref } from 'vue'
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import DailyDataBreakdown from '@/views/DataStatistics/components/DailyDataBreakdown.vue'
|
||||
|
||||
defineOptions({
|
||||
@@ -71,10 +55,10 @@ defineOptions({
|
||||
inheritAttrs: false
|
||||
})
|
||||
|
||||
// const queryFormRef = ref()
|
||||
const dataTrendChartRef = ref()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
// 数据
|
||||
const currentTime = ref('today')
|
||||
const timeOptions = [
|
||||
{ label: '今日', value: 'today' },
|
||||
@@ -83,115 +67,262 @@ const timeOptions = [
|
||||
{ label: '全部', value: 'all' }
|
||||
]
|
||||
const apiStatsData = ref<any>({})
|
||||
// // 弹窗
|
||||
// const dialog = reactive({
|
||||
// title: '',
|
||||
// visible: false
|
||||
// })
|
||||
const statsLoading = ref(false)
|
||||
const activeMetric = ref('')
|
||||
|
||||
const METRIC_WHITELIST = ['contacts', 'greetings', 'replied', 'wechat', 'workers', 'accounts']
|
||||
const PERIOD_WHITELIST = ['today', 'week', 'month', 'all']
|
||||
|
||||
const normalizePeriod = (value: unknown) => {
|
||||
const text = String(value || '').trim()
|
||||
return PERIOD_WHITELIST.includes(text) ? text : 'today'
|
||||
}
|
||||
|
||||
const resolveMetric = (value: unknown) => {
|
||||
const text = String(value || '').trim()
|
||||
return METRIC_WHITELIST.includes(text) ? text : ''
|
||||
}
|
||||
|
||||
const periodToChartDays = (period: string) => {
|
||||
if (period === 'today') return '1'
|
||||
if (period === 'week') return '7'
|
||||
if (period === 'month') return '30'
|
||||
return '30'
|
||||
}
|
||||
|
||||
// 获取数据
|
||||
const onApiStats = () => {
|
||||
ApiStats({ period: currentTime.value }).then((res: any) => {
|
||||
apiStatsData.value = res.data
|
||||
statsLoading.value = true
|
||||
ApiStats({ period: currentTime.value })
|
||||
.then((res: any) => {
|
||||
apiStatsData.value = res.data || {}
|
||||
})
|
||||
.finally(() => {
|
||||
statsLoading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
const statCards = computed(() => [
|
||||
{
|
||||
key: 'contacts',
|
||||
label: '总联系人数',
|
||||
value: apiStatsData.value?.contacts?.total || 0,
|
||||
sub: `今日：${apiStatsData.value?.contacts?.today || 0}`,
|
||||
icon: User,
|
||||
tone: 'tone-1'
|
||||
},
|
||||
{
|
||||
key: 'greetings',
|
||||
label: '打招呼人数',
|
||||
value: apiStatsData.value?.greetings?.total || apiStatsData.value?.contacts?.greeted || 0,
|
||||
sub: `今日：${apiStatsData.value?.greetings?.today || apiStatsData.value?.contacts?.today_greeted || 0}`,
|
||||
icon: ChatDotRound,
|
||||
tone: 'tone-2'
|
||||
},
|
||||
{
|
||||
key: 'replied',
|
||||
label: '已回复人数',
|
||||
value: apiStatsData.value?.contacts?.replied || 0,
|
||||
sub: `回复率：${apiStatsData.value?.contacts?.reply_rate || 0}%`,
|
||||
icon: ChatDotRound,
|
||||
tone: 'tone-5'
|
||||
},
|
||||
{
|
||||
key: 'wechat',
|
||||
label: '微信交换数',
|
||||
value: apiStatsData.value?.wechat?.total || 0,
|
||||
sub: `成功率：${apiStatsData.value?.wechat?.success_rate || 0}%`,
|
||||
icon: ChatLineRound,
|
||||
tone: 'tone-3'
|
||||
},
|
||||
{
|
||||
key: 'workers',
|
||||
label: '在线Worker',
|
||||
value: apiStatsData.value?.workers?.online || 0,
|
||||
sub: `总数：${apiStatsData.value?.workers?.total || 0}`,
|
||||
icon: Monitor,
|
||||
tone: 'tone-4'
|
||||
},
|
||||
{
|
||||
key: 'accounts',
|
||||
label: '已登录账号数',
|
||||
value: apiStatsData.value?.accounts?.logged_in || 0,
|
||||
sub: `总数：${apiStatsData.value?.accounts?.total || 0}`,
|
||||
icon: User,
|
||||
tone: 'tone-6'
|
||||
}
|
||||
])
|
||||
|
||||
const syncFromRoute = () => {
|
||||
currentTime.value = normalizePeriod(route.query.period)
|
||||
activeMetric.value = resolveMetric(route.query.metric)
|
||||
onApiStats()
|
||||
dataTrendChartRef.value?.onApiStatsDaily(periodToChartDays(currentTime.value))
|
||||
}
|
||||
|
||||
const handleTimeChange = () => {
|
||||
router.replace({
|
||||
query: {
|
||||
...route.query,
|
||||
period: currentTime.value
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// // 重置查询
|
||||
// function handleResetQuery() {
|
||||
// if (queryFormRef.value) queryFormRef.value?.resetFields()
|
||||
// queryParams.pageNum = 1
|
||||
// fetchData()
|
||||
// }
|
||||
|
||||
const handleTimeChange = () => {
|
||||
onApiStats()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
onApiStats()
|
||||
dataTrendChartRef.value?.onApiStatsDaily('7')
|
||||
syncFromRoute()
|
||||
})
|
||||
|
||||
watch(
|
||||
() => [route.query.period, route.query.metric],
|
||||
() => syncFromRoute()
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.headline-statistics {
|
||||
.stats-page {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-bottom: 16px;
|
||||
height: 140px;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
::v-deep(.statistics-box) {
|
||||
|
||||
.stats-top {
|
||||
display: flex;
|
||||
//justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-size: 30px;
|
||||
gap: 20px;
|
||||
.statistics-box-img {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
|
||||
&__title {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: #1f2d3d;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
&__desc {
|
||||
font-size: 13px;
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.stats-card {
|
||||
border: 1px solid #ebeef5;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
|
||||
:deep(.el-card__body) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 15px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
}
|
||||
.img-bg1 {
|
||||
background: linear-gradient(135deg, #7f7fd5 0%, #9156e8 100%);
|
||||
}
|
||||
.img-bg2 {
|
||||
background: linear-gradient(135deg, #f199ee 0%, #ef6b8b 100%);
|
||||
}
|
||||
.img-bg3 {
|
||||
background: linear-gradient(135deg, #56bafd 0%, #16e9fd 100%);
|
||||
}
|
||||
.img-bg4 {
|
||||
background: linear-gradient(135deg, #51eb90 0%, #49f7d2 100%);
|
||||
}
|
||||
.statistics-box-text {
|
||||
//flex: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
color: #adb0b3;
|
||||
& > span:nth-child(1) {
|
||||
font-size: 14px;
|
||||
|
||||
&__content {
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: #909399;
|
||||
}
|
||||
& > span:nth-child(2) {
|
||||
font-size: 26px;
|
||||
color: #000;
|
||||
|
||||
h3 {
|
||||
margin: 6px 0 4px;
|
||||
font-size: 28px;
|
||||
color: #111827;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
& > span:nth-child(3) {
|
||||
|
||||
span {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
}
|
||||
.chart-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.stats-card--active {
|
||||
border-color: #409eff;
|
||||
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.12);
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
.tone-1 .stats-card__icon {
|
||||
background: linear-gradient(135deg, #7f7fd5 0%, #9156e8 100%);
|
||||
}
|
||||
|
||||
.time-filter {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
.tone-2 .stats-card__icon {
|
||||
background: linear-gradient(135deg, #f199ee 0%, #ef6b8b 100%);
|
||||
}
|
||||
|
||||
:deep(.el-button) {
|
||||
padding: 5px 12px;
|
||||
font-size: 13px;
|
||||
.tone-3 .stats-card__icon {
|
||||
background: linear-gradient(135deg, #56bafd 0%, #16e9fd 100%);
|
||||
}
|
||||
|
||||
&.el-button--primary {
|
||||
background-color: #409eff;
|
||||
border-color: #409eff;
|
||||
color: #fff;
|
||||
.tone-4 .stats-card__icon {
|
||||
background: linear-gradient(135deg, #51eb90 0%, #49f7d2 100%);
|
||||
}
|
||||
|
||||
.tone-5 .stats-card__icon {
|
||||
background: linear-gradient(135deg, #a18cf5 0%, #7d7df5 100%);
|
||||
}
|
||||
|
||||
.tone-6 .stats-card__icon {
|
||||
background: linear-gradient(135deg, #36d1dc 0%, #5b86e5 100%);
|
||||
}
|
||||
|
||||
.section-card {
|
||||
border: 1px solid #ebeef5;
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.stats-top__title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.stats-card {
|
||||
:deep(.el-card__body) {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
&__content h3 {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.section-card__header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,137 +0,0 @@
|
||||
<template>
|
||||
<div class="pre-registration-form">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="auto"
|
||||
label-position="top"
|
||||
>
|
||||
<el-form-item label="配置名称" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入" />
|
||||
<!-- <el-select v-model="formData.task_type" placeholder="请选择">-->
|
||||
<!-- <el-option label="检查登录" value="check_login" />-->
|
||||
<!-- <el-option label="招聘" value="boss_recruit" />-->
|
||||
<!-- </el-select>-->
|
||||
</el-form-item>
|
||||
<el-form-item label="岗位关键词" prop="position_keywords">
|
||||
<el-input v-model="formData.position_keywords" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
<el-form-item label="城市" prop="city">
|
||||
<el-input v-model="formData.city" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
<el-form-item label="最低薪资（k）" prop="salary_min">
|
||||
<el-input v-model="formData.salary_min" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
<el-form-item label="最高薪资（k）" prop="salary_max">
|
||||
<el-input v-model="formData.salary_max" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
<el-form-item label="工作经验" prop="experience">
|
||||
<el-input v-model="formData.experience" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
<el-form-item label="学历要求" prop="education">
|
||||
<el-input v-model="formData.education" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
<el-form-item label="是否启用" prop="is_active">
|
||||
<el-switch v-model="formData.is_active" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { deepCloneByJSON } from '@/utils/auxiliaryFunction'
|
||||
|
||||
const props = defineProps({
|
||||
newData: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
})
|
||||
|
||||
const formRef = ref()
|
||||
// 表单数据
|
||||
const formData = reactive<any>({
|
||||
name: '',
|
||||
position_keywords: '',
|
||||
city: '',
|
||||
salary_min: '',
|
||||
salary_max: '',
|
||||
experience: '',
|
||||
education: '',
|
||||
is_active: false
|
||||
})
|
||||
const formRules = reactive<any>({
|
||||
name: [{ required: true, message: '请输入', trigger: 'blur' }]
|
||||
// position_keywords: [{ required: true, message: '请输入', trigger: 'blur' }],
|
||||
// city: [{ required: true, message: '请输入', trigger: 'blur' }],
|
||||
// salary_min: [{ required: true, message: '请输入', trigger: 'blur' }],
|
||||
// experience: [{ required: true, message: '请输入', trigger: 'blur' }],
|
||||
// education: [{ required: true, message: '请输入', trigger: 'blur' }],
|
||||
// is_active: [{ required: true, message: '请输入', trigger: 'blur' }]
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
setFormData(props.newData)
|
||||
})
|
||||
|
||||
const getForm = () => {
|
||||
return formData
|
||||
}
|
||||
|
||||
const setFormData = (data: any) => {
|
||||
if (data && Object.keys(data).length > 0) {
|
||||
const data1 = deepCloneByJSON(data)
|
||||
|
||||
Object.assign(formData, data1)
|
||||
}
|
||||
}
|
||||
|
||||
const submit = (): Promise<boolean> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
formRef.value?.validate((valid: boolean) => {
|
||||
if (valid) {
|
||||
resolve(true)
|
||||
} else {
|
||||
ElMessage.error('请完善必填信息')
|
||||
reject(false)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
defineExpose({
|
||||
submit,
|
||||
getForm
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.pre-registration-form {
|
||||
width: 100%;
|
||||
padding-right: 20px;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
.section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,240 +0,0 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-card shadow="hover" class="data-table">
|
||||
<div class="data-table__toolbar">
|
||||
<div class="data-table__toolbar--actions">
|
||||
<el-button type="success" icon="plus" @click="handleOpenDialog()">新增</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-table
|
||||
ref="dataTableRef"
|
||||
v-loading="loading"
|
||||
:data="roleList"
|
||||
highlight-current-row
|
||||
row-key="id"
|
||||
border
|
||||
class="data-table__content"
|
||||
>
|
||||
<el-table-column label="配置名称" prop="name" />
|
||||
<el-table-column label="岗位关键词" prop="position_keywords" />
|
||||
<el-table-column label="城市" prop="city" />
|
||||
<el-table-column label="薪资范围（单位：k）" prop="salary_min">
|
||||
<template #default="scope">
|
||||
{{ scope.row.salary_min || 0 }} - {{ scope.row.salary_max || 0 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column label="复聊间隔" prop="salary_max" />-->
|
||||
<el-table-column label="工作经验" prop="experience" />
|
||||
<el-table-column label="学历要求" prop="education" />
|
||||
<el-table-column label="启用状态" prop="is_active">
|
||||
<template #default="scope">
|
||||
<el-switch v-model="scope.row.is_active" @change="onStatusModification(scope.row)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" prop="created_at">
|
||||
<template #default="scope">
|
||||
{{ formatISOToDateTime(scope.row?.created_at || '') }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column fixed="right" label="操作" width="220">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
link
|
||||
icon="edit"
|
||||
@click="handleOpenDialog(scope.row)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="small"
|
||||
link
|
||||
icon="delete"
|
||||
@click="onUserDeleteDepartment(scope.row.id)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-if="total > 0"
|
||||
v-model:total="total"
|
||||
v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="fetchData"
|
||||
/>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { RolePageVO } from '@/api/system/role-api'
|
||||
import { functionDialogBox } from '@/utils/functionDialogBox'
|
||||
import FilterSettingsForm from './components/FilterSettingsForm.vue'
|
||||
import { formatISOToDateTime } from '@/utils/auxiliaryFunction'
|
||||
import {
|
||||
ApiFilters,
|
||||
ApiFiltersAdd,
|
||||
ApiFiltersDelete,
|
||||
ApiFiltersEditor
|
||||
} from '@/api/ScreeningManagement'
|
||||
|
||||
defineOptions({
|
||||
name: 'Role',
|
||||
inheritAttrs: false
|
||||
})
|
||||
|
||||
const queryFormRef = ref()
|
||||
const dataTableRef = ref()
|
||||
const loading = ref(false)
|
||||
const total = ref(0)
|
||||
|
||||
const queryParams = reactive<any>({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
times: [],
|
||||
seal_type: '',
|
||||
CaseNumber: ''
|
||||
})
|
||||
|
||||
// 表格数据
|
||||
const roleList = ref<RolePageVO[]>()
|
||||
|
||||
// 弹窗
|
||||
const dialog = reactive({
|
||||
title: '',
|
||||
visible: false
|
||||
})
|
||||
|
||||
// 获取数据
|
||||
function fetchData() {
|
||||
loading.value = true
|
||||
ApiFilters()
|
||||
.then((res: any) => {
|
||||
roleList.value = res.data
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
// 查询（重置页码后获取数据）
|
||||
function handleQuery() {
|
||||
queryParams.pageNum = 1
|
||||
fetchData()
|
||||
}
|
||||
|
||||
// 重置查询
|
||||
function handleResetQuery() {
|
||||
if (queryFormRef.value) queryFormRef.value.resetFields()
|
||||
queryParams.pageNum = 1
|
||||
fetchData()
|
||||
}
|
||||
|
||||
// 打开角色弹窗
|
||||
function handleOpenDialog(data: any = null) {
|
||||
dialog.visible = true
|
||||
if (data) {
|
||||
functionDialogBox(
|
||||
FilterSettingsForm,
|
||||
{
|
||||
newData: data
|
||||
},
|
||||
{
|
||||
title: '编辑筛选配置',
|
||||
width: '900',
|
||||
ok(value: any) {
|
||||
handleSubmit({ id: data.id, ...value })
|
||||
}
|
||||
}
|
||||
)
|
||||
} else {
|
||||
functionDialogBox(
|
||||
FilterSettingsForm,
|
||||
{},
|
||||
{
|
||||
title: '创建筛选配置',
|
||||
width: '900',
|
||||
ok(value: any) {
|
||||
handleSubmit(value)
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
// 提交角色表单
|
||||
function handleSubmit(data: any) {
|
||||
loading.value = true
|
||||
const roleId = data.id
|
||||
if (roleId) {
|
||||
ApiFiltersEditor(data)
|
||||
.then(() => {
|
||||
ElMessage.success('修改成功')
|
||||
handleResetQuery()
|
||||
})
|
||||
.finally(() => (loading.value = false))
|
||||
} else {
|
||||
ApiFiltersAdd(data)
|
||||
.then(() => {
|
||||
ElMessage.success('新增成功')
|
||||
handleResetQuery()
|
||||
})
|
||||
.finally(() => (loading.value = false))
|
||||
}
|
||||
}
|
||||
|
||||
const onUserDeleteDepartment = (id: string) => {
|
||||
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(
|
||||
() => {
|
||||
loading.value = true
|
||||
ApiFiltersDelete(id)
|
||||
.then(() => {
|
||||
ElMessage.success('删除成功')
|
||||
handleResetQuery()
|
||||
})
|
||||
.finally(() => (loading.value = false))
|
||||
},
|
||||
() => {
|
||||
ElMessage.info('已取消删除')
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
const onStatusModification = (data: any) => {
|
||||
ElMessageBox.confirm(
|
||||
data.is_active ? '确认启用已选中的数据项?' : '确认禁用已选中的数据项?',
|
||||
'警告',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
loading.value = true
|
||||
ApiFiltersEditor({ is_active: data.is_active, id: data.id })
|
||||
.then(() => {
|
||||
ElMessage.success('修改成功')
|
||||
handleResetQuery()
|
||||
})
|
||||
.finally(() => (loading.value = false))
|
||||
})
|
||||
.catch(() => {
|
||||
console.log('取消修改')
|
||||
handleResetQuery()
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
handleQuery()
|
||||
})
|
||||
</script>
|
||||
@@ -1,93 +1,154 @@
|
||||
<template>
|
||||
<div class="dashboard-container">
|
||||
<el-card shadow="never" class="mt-2">
|
||||
<div class="flex flex-wrap">
|
||||
<!-- 左侧问候语区域 -->
|
||||
<div class="flex-1 flex items-start">
|
||||
<!-- <img class="w80px h80px rounded-full" src="../../assets/user.png" />-->
|
||||
<div class="ml-5">
|
||||
<p>{{ greetings }}</p>
|
||||
<div style="width: 100%">
|
||||
<div
|
||||
v-if="publicityMaterials"
|
||||
style="height: 20px; margin: 0 0 14px 0"
|
||||
@click="
|
||||
userStore.checkPermission('HomePage:propagandaEit:editor') && onPropagandaEit()
|
||||
"
|
||||
>
|
||||
<p class="text-sm text-gray">
|
||||
{{ userStore.userInfo?.content }}
|
||||
</p>
|
||||
</div>
|
||||
<el-input
|
||||
v-else
|
||||
v-model="propagandaEitValue"
|
||||
placeholder="请输入"
|
||||
style="width: 240px; height: 20px; margin: 0 0 14px 0"
|
||||
class="mt-2"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
@blur="handleQuery"
|
||||
></el-input>
|
||||
<div class="dashboard-container ops-page">
|
||||
<el-card shadow="hover" class="mt-2 hero-card ops-card">
|
||||
<div class="hero-panel">
|
||||
<div class="hero-left">
|
||||
<p class="hero-greeting">{{ greetings }}</p>
|
||||
<div class="hero-propaganda">
|
||||
<div
|
||||
v-if="publicityMaterials"
|
||||
class="hero-propaganda__text"
|
||||
@click="userStore.checkPermission('HomePage:propagandaEit:editor') && onPropagandaEit()"
|
||||
>
|
||||
<p>{{ userStore.userInfo?.content || '点击设置展示文案' }}</p>
|
||||
</div>
|
||||
<el-input
|
||||
v-else
|
||||
v-model="propagandaEitValue"
|
||||
placeholder="请输入首页展示文案"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
@blur="handleQuery"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右侧图标区域 - PC端 -->
|
||||
<div class="hidden sm:block" style="display: flex; gap: 20px">
|
||||
<!-- 快捷入口 -->
|
||||
<div
|
||||
ref="quickScrollRef"
|
||||
class="flex w-700px gap-2 overflow-hidden quick"
|
||||
@wheel="handleWheel"
|
||||
>
|
||||
|
||||
<div class="hero-right">
|
||||
<div class="quick-header">
|
||||
<div class="quick-header__title">快捷入口</div>
|
||||
<div class="quick-header__meta ops-actions">
|
||||
<el-tag type="info" effect="light">已启用 {{ quickData.length }} 项</el-tag>
|
||||
<el-popover placement="left-start" width="300">
|
||||
<template #reference>
|
||||
<el-button circle class="quick-config-btn ops-btn" title="快捷键配置">
|
||||
<el-icon><Operation /></el-icon>
|
||||
</el-button>
|
||||
</template>
|
||||
<el-tree
|
||||
ref="treeRef"
|
||||
:props="{
|
||||
label: 'title'
|
||||
}"
|
||||
node-key="name"
|
||||
:default-checked-keys="defaultCheckedKeys"
|
||||
:data="quickConfigurationList"
|
||||
show-checkbox
|
||||
@check-change="handleCheckChange"
|
||||
/>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
<div ref="quickScrollRef" class="quick-list quick" @wheel="handleWheel">
|
||||
<div
|
||||
v-for="(item, index) in quickData"
|
||||
:key="index"
|
||||
class="flex-1 flex items-center justify-center flex-col cursor-pointer"
|
||||
class="quick-item"
|
||||
@click="navigateTo(item.name)"
|
||||
>
|
||||
<el-icon class="w-12 h-12 text-primary"><Plus /></el-icon>
|
||||
<el-text type="primary" size="small" style="white-space: nowrap">
|
||||
<el-icon class="quick-item__icon"><Plus /></el-icon>
|
||||
<el-text type="primary" size="small" class="quick-item__text">
|
||||
{{ item.title }}
|
||||
</el-text>
|
||||
</div>
|
||||
<div v-if="!quickData.length" class="quick-empty">请先在右上角配置快捷入口</div>
|
||||
</div>
|
||||
<el-popover placement="right-start" width="300">
|
||||
<template #reference>
|
||||
<el-icon title="快捷键配置"><Operation /></el-icon>
|
||||
</template>
|
||||
<el-tree
|
||||
ref="treeRef"
|
||||
style="max-width: 600px"
|
||||
:props="{
|
||||
label: 'title'
|
||||
}"
|
||||
node-key="name"
|
||||
:default-checked-keys="defaultCheckedKeys"
|
||||
:data="quickConfigurationList"
|
||||
show-checkbox
|
||||
@check-change="handleCheckChange"
|
||||
/>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 数据统计 -->
|
||||
<el-row :gutter="10" class="mt-5">
|
||||
<!-- 在线用户数量 -->
|
||||
<div class="section-title ops-section-title mt-5">招聘运营概览</div>
|
||||
<el-row :gutter="10" class="mt-3">
|
||||
<el-col :span="6" :xs="12" class="mb-xs-3">
|
||||
<el-card
|
||||
shadow="never"
|
||||
class="stat-card stat-card--clickable ops-card"
|
||||
@click="goToDataStatistics('contacts')"
|
||||
>
|
||||
<div class="stat-card__icon stat-card__icon--1">
|
||||
<el-icon><User /></el-icon>
|
||||
</div>
|
||||
<div class="stat-card__content">
|
||||
<p>联系人数</p>
|
||||
<h3>{{ recruitStats.contacts?.total || 0 }}</h3>
|
||||
<span>今日：{{ recruitStats.contacts?.today || 0 }}</span>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6" :xs="12" class="mb-xs-3">
|
||||
<el-card
|
||||
shadow="never"
|
||||
class="stat-card stat-card--clickable ops-card"
|
||||
@click="goToDataStatistics('greetings')"
|
||||
>
|
||||
<div class="stat-card__icon stat-card__icon--2">
|
||||
<el-icon><Message /></el-icon>
|
||||
</div>
|
||||
<div class="stat-card__content">
|
||||
<p>打招呼人数</p>
|
||||
<h3>{{ recruitStats.greetings?.total || recruitStats.contacts?.greeted || 0 }}</h3>
|
||||
<span>今日：{{ recruitStats.greetings?.today || recruitStats.contacts?.today_greeted || 0 }}</span>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6" :xs="12" class="mb-xs-3">
|
||||
<el-card
|
||||
shadow="never"
|
||||
class="stat-card stat-card--clickable ops-card"
|
||||
@click="goToDataStatistics('replied')"
|
||||
>
|
||||
<div class="stat-card__icon stat-card__icon--3">
|
||||
<el-icon><ChatDotRound /></el-icon>
|
||||
</div>
|
||||
<div class="stat-card__content">
|
||||
<p>已回复人数</p>
|
||||
<h3>{{ recruitStats.contacts?.replied || 0 }}</h3>
|
||||
<span>回复率：{{ recruitStats.contacts?.reply_rate || 0 }}%</span>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6" :xs="12" class="mb-xs-3">
|
||||
<el-card
|
||||
shadow="never"
|
||||
class="stat-card stat-card--clickable ops-card"
|
||||
@click="goToDataStatistics('wechat')"
|
||||
>
|
||||
<div class="stat-card__icon stat-card__icon--4">
|
||||
<el-icon><ChatLineRound /></el-icon>
|
||||
</div>
|
||||
<div class="stat-card__content">
|
||||
<p>微信交换数</p>
|
||||
<h3>{{ recruitStats.wechat?.total || 0 }}</h3>
|
||||
<span>成功率：{{ recruitStats.wechat?.success_rate || 0 }}%</span>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div class="section-title ops-section-title mt-5">消息与日程</div>
|
||||
<el-row :gutter="12" class="mt-3">
|
||||
<el-col :span="12" :xs="24" class="mb-xs-3">
|
||||
<el-card shadow="never" class="h-full flex flex-col">
|
||||
<el-card shadow="hover" class="panel-card ops-card h-full">
|
||||
<template #header>
|
||||
<div class="flex-x-between">
|
||||
<div class="panel-card__header">
|
||||
<el-badge
|
||||
v-if="userRoxyexhibitionList?.length > 0"
|
||||
:value="userRoxyexhibitionTotal"
|
||||
:max="99"
|
||||
>
|
||||
<span>代办事项</span>
|
||||
<span class="panel-card__title">待办事项</span>
|
||||
</el-badge>
|
||||
<span v-else>代办事项</span>
|
||||
<span v-else class="panel-card__title">待办事项</span>
|
||||
<el-link type="primary" underline="never" @click="handleViewMoreNotice">
|
||||
<span class="text-xs">查看更多</span>
|
||||
<el-icon class="text-xs">
|
||||
@@ -96,21 +157,15 @@
|
||||
</el-link>
|
||||
</div>
|
||||
</template>
|
||||
<div style="height: 150px; overflow: hidden; overflow-y: auto">
|
||||
<div class="panel-list panel-list--short">
|
||||
<div
|
||||
v-for="(item, index) in userRoxyexhibitionList"
|
||||
:key="index"
|
||||
style="
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 5px;
|
||||
|
||||
gap: 10px;
|
||||
"
|
||||
class="panel-item panel-item--clickable"
|
||||
@click="handleReadNotice(item)"
|
||||
>
|
||||
<el-tag>{{ item.type }}</el-tag>
|
||||
<el-text>{{ item.title }}</el-text>
|
||||
<el-tag effect="light" class="ops-status-tag">{{ item.type }}</el-tag>
|
||||
<el-text class="panel-item__title">{{ item.title }}</el-text>
|
||||
<el-tooltip
|
||||
class="box-item"
|
||||
effect="light"
|
||||
@@ -118,53 +173,40 @@
|
||||
:content="item.content"
|
||||
placement="top"
|
||||
>
|
||||
<el-text
|
||||
type="info"
|
||||
style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis"
|
||||
>
|
||||
{{ item.content }}
|
||||
</el-text>
|
||||
<el-text type="info" class="panel-item__content">{{ item.content }}</el-text>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div v-if="!userRoxyexhibitionList?.length" class="list-empty">暂无待办事项</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<!-- 浏览量(PV) -->
|
||||
<el-col :span="12" :xs="24">
|
||||
<el-card>
|
||||
|
||||
<el-col :span="12" :xs="24" class="mb-xs-3">
|
||||
<el-card shadow="hover" class="panel-card ops-card h-full">
|
||||
<template #header>
|
||||
<div>重要日程提示</div>
|
||||
<div class="panel-card__header">
|
||||
<span class="panel-card__title">重要日程提示</span>
|
||||
<el-tag effect="light" type="info">共 {{ businessScheduleDetailList?.length || 0 }} 条</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
<div
|
||||
style="
|
||||
height: 150px;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
gap: 5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
"
|
||||
>
|
||||
<div class="panel-list panel-list--short panel-list--column">
|
||||
<div
|
||||
v-for="(item, index) in businessScheduleDetailList"
|
||||
:key="index"
|
||||
style="
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 10px;
|
||||
gap: 10px;
|
||||
border-radius: 8px;
|
||||
"
|
||||
:class="{
|
||||
'blink-animation': !(
|
||||
item.state === '已完成' || isCurrentTimeLessThan(item.end_time)
|
||||
)
|
||||
}"
|
||||
:class="[
|
||||
'panel-item',
|
||||
'schedule-item',
|
||||
{
|
||||
'schedule-item--danger': !(item.state === '已完成' || isCurrentTimeLessThan(item.end_time)),
|
||||
'blink-animation': !(item.state === '已完成' || isCurrentTimeLessThan(item.end_time))
|
||||
}
|
||||
]"
|
||||
>
|
||||
<el-text
|
||||
:type="
|
||||
item.state === '已完成' || isCurrentTimeLessThan(item.end_time) ? '' : 'danger'
|
||||
"
|
||||
class="panel-item__title"
|
||||
>
|
||||
{{ item.title }}
|
||||
</el-text>
|
||||
@@ -175,38 +217,33 @@
|
||||
:content="item.remark"
|
||||
placement="top"
|
||||
>
|
||||
<el-text
|
||||
type="info"
|
||||
style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis"
|
||||
>
|
||||
{{ item.remark }}
|
||||
</el-text>
|
||||
<el-text type="info" class="panel-item__content">{{ item.remark }}</el-text>
|
||||
</el-tooltip>
|
||||
<span>
|
||||
<el-tag type="info">{{ item.tiems }}</el-tag>
|
||||
</span>
|
||||
<el-tag type="info" effect="light" size="small" class="ops-status-tag">{{ item.tiems }}</el-tag>
|
||||
</div>
|
||||
<div v-if="!businessScheduleDetailList?.length" class="list-empty">暂无日程数据</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="10" class="mt-5">
|
||||
<el-col :xs="24" :span="12">
|
||||
<el-card>
|
||||
<el-row :gutter="12" class="mt-5">
|
||||
<el-col :xs="24" :span="12" class="mb-xs-3">
|
||||
<el-card shadow="hover" class="panel-card ops-card">
|
||||
<template #header>
|
||||
<div class="flex-x-between">
|
||||
<span>通知/公示</span>
|
||||
<div class="panel-card__header">
|
||||
<span class="panel-card__title">通知 / 公示</span>
|
||||
<el-tag effect="light" type="info">共 {{ businessBulletindetailList?.length || 0 }} 条</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
<div style="height: 490px; overflow: hidden; overflow-y: auto">
|
||||
<div class="panel-list panel-list--tall">
|
||||
<div
|
||||
v-for="(item, index) in businessBulletindetailList"
|
||||
:key="index"
|
||||
style="display: flex; align-items: center; padding: 10px 5px; gap: 10px"
|
||||
class="panel-item panel-item--clickable"
|
||||
@click="businessBulletindetailClick(item)"
|
||||
>
|
||||
<el-text>{{ item.title }}</el-text>
|
||||
<el-text class="panel-item__title">{{ item.title }}</el-text>
|
||||
<el-tooltip
|
||||
class="box-item"
|
||||
effect="light"
|
||||
@@ -214,35 +251,30 @@
|
||||
:content="item.content"
|
||||
placement="top"
|
||||
>
|
||||
<el-text
|
||||
type="info"
|
||||
style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis"
|
||||
>
|
||||
{{ item.content }}
|
||||
</el-text>
|
||||
<el-text type="info" class="panel-item__content">{{ item.content }}</el-text>
|
||||
</el-tooltip>
|
||||
<span>
|
||||
<el-tag type="info">{{ item.times }}</el-tag>
|
||||
</span>
|
||||
<el-tag type="info" effect="light" size="small" class="ops-status-tag">{{ item.times }}</el-tag>
|
||||
</div>
|
||||
<div v-if="!businessBulletindetailList?.length" class="list-empty">暂无通知数据</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :span="12">
|
||||
<el-card>
|
||||
<el-card shadow="hover" class="panel-card ops-card">
|
||||
<template #header>
|
||||
<div class="flex-x-between">
|
||||
<span>制度公示</span>
|
||||
<div class="panel-card__header">
|
||||
<span class="panel-card__title">制度公示</span>
|
||||
<el-tag effect="light" type="info">共 {{ regulationDisclosureList?.length || 0 }} 条</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
<div style="height: 490px; overflow: hidden; overflow-y: auto">
|
||||
<div class="panel-list panel-list--tall">
|
||||
<div
|
||||
v-for="(item, index) in regulationDisclosureList"
|
||||
:key="index"
|
||||
style="display: flex; align-items: center; padding: 10px 5px; gap: 10px"
|
||||
class="panel-item panel-item--clickable"
|
||||
@click="businessBulletindetailClick(item)"
|
||||
>
|
||||
<el-text>{{ item.title }}</el-text>
|
||||
<el-text class="panel-item__title">{{ item.title }}</el-text>
|
||||
<el-tooltip
|
||||
class="box-item"
|
||||
effect="light"
|
||||
@@ -250,17 +282,11 @@
|
||||
:content="item.content"
|
||||
placement="top"
|
||||
>
|
||||
<el-text
|
||||
type="info"
|
||||
style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis"
|
||||
>
|
||||
{{ item.content }}
|
||||
</el-text>
|
||||
<el-text type="info" class="panel-item__content">{{ item.content }}</el-text>
|
||||
</el-tooltip>
|
||||
<span>
|
||||
<el-tag type="info">{{ item.times }}</el-tag>
|
||||
</span>
|
||||
<el-tag type="info" effect="light" size="small" class="ops-status-tag">{{ item.times }}</el-tag>
|
||||
</div>
|
||||
<div v-if="!regulationDisclosureList?.length" class="list-empty">暂无制度公示</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
@@ -274,6 +300,7 @@ import {
|
||||
UserApprovalStatusCheck,
|
||||
UserRoxyexhibition
|
||||
} from '@/api/calibration/approval'
|
||||
import { ApiStats } from '@/api/ContactInformation'
|
||||
// import ImageIconComponent from '@/components/ImageIconComponent/index.vue'
|
||||
|
||||
defineOptions({
|
||||
@@ -282,7 +309,7 @@ defineOptions({
|
||||
})
|
||||
|
||||
import { useUserStore } from '@/store/modules/user-store'
|
||||
import { Plus, Operation, ArrowRight } from '@element-plus/icons-vue'
|
||||
import { Plus, Operation, ArrowRight, User, ChatDotRound, ChatLineRound, Message } from '@element-plus/icons-vue'
|
||||
import { BusinessScheduleDetail } from '@/api/calibration/lmportantScheduleManagement'
|
||||
import { BusinessBulletindetail } from '@/api/calibration/announcementManagement'
|
||||
import { BusinessLawdisplay } from '@/api/calibration/lawFirmStandardDocuments'
|
||||
@@ -314,6 +341,7 @@ const businessScheduleDetailList = ref<any[]>([])
|
||||
const businessBulletindetailList = ref<any[]>([])
|
||||
const regulationDisclosureList = ref<any[]>([])
|
||||
const businessLawdisplayList = ref<any[]>([])
|
||||
const recruitStats = ref<any>({})
|
||||
// 当前时间（用于计算问候语）
|
||||
const currentDate = new Date()
|
||||
|
||||
@@ -340,6 +368,16 @@ const navigateTo = (name: string) => {
|
||||
})
|
||||
}
|
||||
|
||||
const goToDataStatistics = (metric: 'contacts' | 'greetings' | 'replied' | 'wechat') => {
|
||||
router.push({
|
||||
name: 'DataStatistics',
|
||||
query: {
|
||||
period: 'all',
|
||||
metric
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const onUserRoxyexhibition = () => {
|
||||
UserRoxyexhibition({
|
||||
pageNum: 1,
|
||||
@@ -384,6 +422,12 @@ const onBusinessLawdisplay = () => {
|
||||
})
|
||||
}
|
||||
|
||||
const onRecruitStats = () => {
|
||||
ApiStats({ period: 'all' }).then((res: any) => {
|
||||
recruitStats.value = res.data || {}
|
||||
})
|
||||
}
|
||||
|
||||
const handleCheckChange = () => {
|
||||
treeRef.value?.getCheckedNodes()
|
||||
quickData.value = treeRef.value?.getCheckedNodes()
|
||||
@@ -511,6 +555,7 @@ const businessBulletindetailClick = (data: any) => {
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
onRecruitStats()
|
||||
onUserRoxyexhibition()
|
||||
onBusinessScheduleDetail()
|
||||
onBusinessBulletindetail()
|
||||
@@ -554,6 +599,329 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
transition: all 0.2s;
|
||||
border: 1px solid #ebeef5;
|
||||
|
||||
:deep(.el-card__body) {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
&--clickable {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 18px rgba(64, 158, 255, 0.12);
|
||||
border-color: #d9ecff;
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
|
||||
}
|
||||
|
||||
&__icon--1 {
|
||||
background: linear-gradient(135deg, #7f7fd5 0%, #9156e8 100%);
|
||||
}
|
||||
|
||||
&__icon--2 {
|
||||
background: linear-gradient(135deg, #f199ee 0%, #ef6b8b 100%);
|
||||
}
|
||||
|
||||
&__icon--3 {
|
||||
background: linear-gradient(135deg, #56bafd 0%, #16e9fd 100%);
|
||||
}
|
||||
|
||||
&__icon--4 {
|
||||
background: linear-gradient(135deg, #51eb90 0%, #49f7d2 100%);
|
||||
}
|
||||
|
||||
&__content {
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 4px 0;
|
||||
font-size: 24px;
|
||||
color: #303133;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #1f2d3d;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.hero-card {
|
||||
border: 1px solid #ebeef5;
|
||||
|
||||
:deep(.el-card__body) {
|
||||
padding: 16px 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-panel {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.hero-left {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.hero-greeting {
|
||||
margin: 0;
|
||||
color: #1f2d3d;
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.hero-propaganda {
|
||||
max-width: 440px;
|
||||
|
||||
&__text {
|
||||
min-height: 34px;
|
||||
padding: 8px 10px;
|
||||
border-radius: 8px;
|
||||
border: 1px dashed #d8dee8;
|
||||
background: #f7f9fc;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: #616f85;
|
||||
line-height: 1.2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: #b8d6ff;
|
||||
background: #eef5ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hero-right {
|
||||
width: 54%;
|
||||
min-width: 320px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.quick-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
|
||||
&__title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
&__meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.quick-config-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
min-height: 28px;
|
||||
padding: 0;
|
||||
color: #409eff;
|
||||
border: 1px solid #d9ecff;
|
||||
background: #ecf5ff;
|
||||
}
|
||||
|
||||
.quick-list {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 10px;
|
||||
min-height: 98px;
|
||||
}
|
||||
|
||||
.quick-item {
|
||||
min-width: 96px;
|
||||
flex: 1;
|
||||
border: 1px solid #e8edf5;
|
||||
border-radius: 10px;
|
||||
background: #f9fbfe;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: #b8d6ff;
|
||||
background: #eef5ff;
|
||||
box-shadow: 0 8px 16px rgba(64, 158, 255, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
.quick-item__icon {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 9px;
|
||||
color: #409eff;
|
||||
background: rgba(64, 158, 255, 0.12);
|
||||
}
|
||||
|
||||
.quick-item__text {
|
||||
margin-top: 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.quick-empty {
|
||||
width: 100%;
|
||||
min-height: 90px;
|
||||
border: 1px dashed #d8dee8;
|
||||
border-radius: 10px;
|
||||
color: #909399;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.panel-card {
|
||||
border: 1px solid #ebeef5;
|
||||
|
||||
:deep(.el-card__header) {
|
||||
padding: 14px 16px;
|
||||
border-bottom: 1px solid #f0f2f5;
|
||||
}
|
||||
|
||||
:deep(.el-card__body) {
|
||||
padding: 12px 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-card__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.panel-card__title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.panel-list {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.panel-list--short {
|
||||
height: 176px;
|
||||
}
|
||||
|
||||
.panel-list--tall {
|
||||
height: 490px;
|
||||
}
|
||||
|
||||
.panel-list--column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.panel-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 9px 8px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.panel-item--clickable {
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: #f5f9ff;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-item__title {
|
||||
max-width: 170px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.panel-item__content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.schedule-item {
|
||||
border: 1px solid #f2f3f5;
|
||||
background: #fafbfd;
|
||||
}
|
||||
|
||||
.schedule-item--danger {
|
||||
border-color: rgba(245, 108, 108, 0.24);
|
||||
}
|
||||
|
||||
.list-empty {
|
||||
height: 100%;
|
||||
min-height: 88px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #c0c4cc;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.quick {
|
||||
overflow-x: auto;
|
||||
scroll-behavior: smooth;
|
||||
@@ -585,4 +953,31 @@ onMounted(() => {
|
||||
.blink-animation {
|
||||
animation: blinkBackground 1s infinite;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero-panel {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.hero-right {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.hero-greeting {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.quick-item {
|
||||
min-width: 88px;
|
||||
}
|
||||
|
||||
.panel-list--tall {
|
||||
height: 360px;
|
||||
}
|
||||
|
||||
.panel-item__title {
|
||||
max-width: 120px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user