admin/prop-ai-hr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(aihr): close Figma UI regression gaps

Browse Source
This commit is contained in:
admin
2026-07-17 04:17:14 +08:00
parent a822b22116
commit e93421ca1e
35 changed files with 1452 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mobile-uni/src/pages/supervisor/assign/index.vue
+255 -9
View File
@@ -28,7 +28,28 @@
</view>
<template v-else>
<view class="panel assignment-form">
<view class="assign-tabs" role="tablist" aria-label="指派专项视图">
<button
class="assign-tab"
:class="{ active: assignView === 'create' }"
role="tab"
:aria-selected="assignView === 'create'"
@click="assignView = 'create'"
>
新建指派
</button>
<button
class="assign-tab"
:class="{ active: assignView === 'progress' }"
role="tab"
:aria-selected="assignView === 'progress'"
@click="assignView = 'progress'"
>
派发进度
</button>
</view>
<view v-if="assignView === 'create'" class="panel assignment-form">
<text class="field-label">训练对象</text>
<input
v-model="targetExtPartyId"
@@ -37,6 +58,17 @@
placeholder="输入手机号或外部ID"
@input="targetName = ''"
/>
<view v-if="memberSuggestions.length" class="target-suggestions">
<button
v-for="member in memberSuggestions"
:key="member.extPartyId"
class="target-suggestion"
@click="selectTarget(member)"
>
<text>{{ member.name || '未命名员工' }}</text>
<text>{{ maskPhone(member.extPartyId) }}</text>
</button>
</view>
<input
v-model="targetName"
class="input field-input"
@@ -45,9 +77,15 @@
/>
<text class="field-label section-label">训练场景</text>
<input
v-model="scenarioSearch"
class="input field-input"
maxlength="30"
placeholder="搜索训练场景"
/>
<view v-if="scenarioOptions.length" class="scenario-row">
<button
v-for="item in scenarioOptions"
v-for="item in filteredScenarioOptions"
:key="item.id"
class="chip scenario-chip"
:class="{ active: assignmentScenarioId === item.id }"
@@ -59,6 +97,29 @@
</view>
<text v-else class="muted block">暂无可派发的已启用场景</text>
<text class="field-label section-label">训练目标</text>
<input
v-model="assignmentGoal"
class="input field-input"
maxlength="200"
placeholder="例如：稳定完成投诉首轮承接与时限承诺"
/>
<text class="field-label section-label">任务要求</text>
<textarea
v-model="assignmentRequirements"
class="textarea requirements-input"
maxlength="500"
placeholder="填写练习次数、重点动作或合格标准"
/>
<text class="field-label section-label">截止时间</text>
<picker mode="date" :value="assignmentDueTime" @change="selectDueDate">
<view class="input due-date-field" :class="{ placeholder: !assignmentDueTime }">
{{ assignmentDueTime || '选择截止日期（可选）' }}
</view>
</picker>
<text class="field-label section-label">指派原因</text>
<textarea
v-model="assignmentReason"
@@ -66,12 +127,12 @@
maxlength="180"
placeholder="填写本次专项训练原因"
/>
<button class="primary-button submit-button" :disabled="assigning || historyLoading || !scenarioOptions.length" @click="assignPractice">
<button class="primary-button submit-button tabbar-safe-action" :disabled="assigning || historyLoading || !scenarioOptions.length" @click="assignPractice">
{{ assigning ? '指派中' : '确认指派' }}
</button>
</view>
<view class="panel history-panel">
<view v-if="assignView === 'progress'" class="panel history-panel">
<view class="section-head">
<text class="panel-title">最近专项</text>
<button
@@ -87,14 +148,23 @@
<view class="assignment-copy">
<text class="assignment-title">{{ item.traineeName }} · {{ item.scenarioName }}</text>
<text class="assignment-desc">{{ assignmentSummary(item) }}</text>
<text v-if="item.taskGoal" class="assignment-goal">目标：{{ item.taskGoal }}</text>
<view class="assignment-progress-track" aria-hidden="true">
<view class="assignment-progress-value" :style="{ width: `${assignmentProgress(item)}%` }" />
</view>
</view>
<view class="assignment-status-copy">
<text class="assignment-source">{{ assignmentSourceLabel(item.source) }}</text>
<text v-if="item.dueTime" class="assignment-due" :class="{ overdue: isAssignmentOverdue(item) }">
{{ isAssignmentOverdue(item) ? '已逾期' : `截止 ${item.dueTime.slice(0, 10)}` }}
</text>
</view>
<text class="assignment-source">{{ assignmentSourceLabel(item.source) }}</text>
</view>
</view>
<view v-else-if="!historyLoading" class="empty compact-empty">暂无专项指派记录</view>
</view>
<view class="panel progress-panel">
<view v-if="assignView === 'progress'" class="panel progress-panel">
<view class="section-head">
<text class="panel-title">派发进度与预警</text>
<text class="muted">{{ progressSummary }}</text>
@@ -120,8 +190,8 @@
<script setup lang="ts">
import { computed, onBeforeUnmount, ref } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import type { PracticeAlert, PracticeAssignment } from '@/types/api';
import { clearAuth, isLoggedIn, rememberLoginRedirect } from '@/services/auth';
import type { PracticeAlert, PracticeAssignment, PracticeTeamMember } from '@/types/api';
import { clearAuth, isLoggedIn, maskPhone, rememberLoginRedirect } from '@/services/auth';
import { resetPageScroll } from '@/services/navigation';
import { createPracticeAssignment, getPracticeAlerts, getPracticeScenarios, getPracticeTeamSnapshot } from '@/services/practice';
import SupervisorTabBar from '@/components/SupervisorTabBar.vue';
@@ -136,12 +206,18 @@ import {
} from '@/services/supervisor-view';
const basePath = '/pages/supervisor/assign/index';
const assignView = ref<'create' | 'progress'>('create');
const targetExtPartyId = ref('');
const targetName = ref('');
const assignmentScenarioId = ref<SupervisorScenarioId>('fee-parking');
const scenarioSearch = ref('');
const scenarioOptions = ref<SupervisorScenarioOption[]>([...supervisorScenarioOptions]);
const assignmentGoal = ref('');
const assignmentRequirements = ref('');
const assignmentDueTime = ref('');
const assignmentReason = ref('');
const assignments = ref<PracticeAssignment[]>([]);
const members = ref<PracticeTeamMember[]>([]);
const alerts = ref<PracticeAlert[]>([]);
const loggedIn = ref(false);
const accessDenied = ref(false);
@@ -157,6 +233,25 @@ const selectedTargetLabel = computed(() => {
return targetName.value.trim() ? `${targetName.value.trim()} · ${target}` : target;
});
const recentAssignments = computed(() => manualPracticeAssignments(assignments.value).slice(0, 10));
const memberSuggestions = computed(() => {
const keyword = targetExtPartyId.value.trim().toLowerCase();
if (!keyword) return [];
return members.value
.filter((member) => {
const name = member.name?.trim().toLowerCase() || '';
return member.extPartyId.toLowerCase().includes(keyword) || name.includes(keyword);
})
.slice(0, 6);
});
const filteredScenarioOptions = computed(() => {
const keyword = scenarioSearch.value.trim().toLowerCase();
const options = keyword
? scenarioOptions.value.filter((item) => item.name.toLowerCase().includes(keyword))
: scenarioOptions.value;
const selected = scenarioOptions.value.find((item) => item.id === assignmentScenarioId.value);
const visible = selected && !options.some((item) => item.id === selected.id) ? [selected, ...options] : options;
return visible.slice(0, 6);
});
const progressCounts = computed(() => {
const items = recentAssignments.value;
return {
@@ -187,12 +282,18 @@ const resetDraft = () => {
targetExtPartyId.value = '';
targetName.value = '';
assignmentScenarioId.value = 'fee-parking';
scenarioSearch.value = '';
assignmentGoal.value = '';
assignmentRequirements.value = '';
assignmentDueTime.value = '';
assignmentReason.value = '';
};
const clearPrivateState = () => {
resetDraft();
assignView.value = 'create';
assignments.value = [];
members.value = [];
alerts.value = [];
historyLoading.value = false;
historyRequests.invalidate();
@@ -230,6 +331,7 @@ const loadAssignments = async (force = false) => {
if (historyRequests.isCurrent(generation)) {
accessDenied.value = false;
assignments.value = snapshot.assignments;
members.value = snapshot.members;
alerts.value = nextAlerts;
}
} catch (error) {
@@ -243,6 +345,15 @@ const loadAssignments = async (force = false) => {
}
};
const selectTarget = (member: PracticeTeamMember) => {
targetExtPartyId.value = member.extPartyId;
targetName.value = member.name;
};
const selectDueDate = (event: { detail?: { value?: string } }) => {
assignmentDueTime.value = event.detail?.value || '';
};
const loadScenarioOptions = async () => {
try {
const rows = await getPracticeScenarios('生活顾问');
@@ -293,11 +404,16 @@ const assignPractice = async () => {
traineeName: targetName.value.trim() || `手机用户${extPartyId.slice(-4)}`,
scenarioId: assignmentScenarioId.value,
scenarioName: scenario?.name,
reason: assignmentReason.value.trim() || '主管派发专项训练'
reason: assignmentReason.value.trim() || '主管派发专项训练',
taskGoal: assignmentGoal.value.trim() || undefined,
taskRequirements: assignmentRequirements.value.trim() || undefined,
dueTime: assignmentDueTime.value || undefined
});
resetDraft();
uni.showToast({ title: '已指派', icon: 'none' });
await loadAssignments(true);
assignView.value = 'progress';
resetPageScroll();
} catch (error) {
handleRequestError(error, '指派失败');
} finally {
@@ -316,6 +432,14 @@ const assignmentSummary = (item: PracticeAssignment) => {
return `${item.createTime} · ${item.status} · ${reason}`;
};
const assignmentProgress = (item: PracticeAssignment) => item.status === '已完成' ? 100 : 0;
const isAssignmentOverdue = (item: PracticeAssignment) => {
if (!item.dueTime || item.status === '已完成') return false;
const deadline = Date.parse(item.dueTime.replace(' ', 'T'));
return Number.isFinite(deadline) && deadline < Date.now();
};
const goLogin = () => {
rememberLoginRedirect(basePath);
uni.redirectTo({ url: '/pages/auth/login/index' });
@@ -379,6 +503,38 @@ onBeforeUnmount(() => {
min-width: 104px;
}
.assign-tabs {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 4px;
margin-bottom: 14px;
padding: 4px;
border: 1px solid #dbe4ee;
border-radius: 14px;
background: #eef2f6;
}
.assign-tab {
min-height: 42px;
border: 0;
border-radius: 10px;
background: transparent;
color: #64748b;
font-size: 14px;
font-weight: 800;
line-height: 42px;
}
.assign-tab::after {
border: 0;
}
.assign-tab.active {
background: #fff;
color: var(--employee-primary);
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}
.refresh-button {
min-width: 82px;
padding: 0 10px;
@@ -405,6 +561,7 @@ onBeforeUnmount(() => {
.field-input,
.reason-input,
.requirements-input,
.scenario-row,
.submit-button {
margin-top: 9px;
@@ -414,12 +571,61 @@ onBeforeUnmount(() => {
margin-top: 10px;
}
.target-suggestions {
display: flex;
flex-direction: column;
gap: 1px;
overflow: hidden;
margin-top: 6px;
border: 1px solid #dbe4ee;
border-radius: 12px;
background: #fff;
}
.target-suggestion {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 44px;
padding: 0 12px;
border: 0;
border-radius: 0;
background: #fff;
color: #0f172a;
font-size: 13px;
line-height: 44px;
text-align: left;
}
.target-suggestion + .target-suggestion {
border-top: 1px solid #eef2f6;
}
.target-suggestion::after {
border: 0;
}
.target-suggestion text:last-child {
color: #64748b;
font-size: 12px;
}
.scenario-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.due-date-field {
display: flex;
align-items: center;
margin-top: 9px;
}
.due-date-field.placeholder {
color: #94a3b8;
}
.scenario-chip {
border-radius: 8px;
}
@@ -460,6 +666,36 @@ onBeforeUnmount(() => {
display: block;
}
.assignment-goal {
display: block;
margin-top: 5px;
color: #475569;
font-size: 12px;
line-height: 1.4;
}
.assignment-progress-track {
overflow: hidden;
height: 5px;
margin-top: 9px;
border-radius: 999px;
background: #e2e8f0;
}
.assignment-progress-value {
height: 100%;
border-radius: inherit;
background: var(--employee-primary);
}
.assignment-status-copy {
display: flex;
flex: 0 0 auto;
flex-direction: column;
align-items: flex-end;
gap: 7px;
}
.assignment-title {
color: #0f172a;
font-size: 14px;
@@ -483,6 +719,16 @@ onBeforeUnmount(() => {
font-weight: 800;
}
.assignment-due {
color: #64748b;
font-size: 11px;
font-weight: 700;
}
.assignment-due.overdue {
color: #b91c1c;
}
.compact-empty {
padding: 18px 8px 4px;
}