v6ole/qiji
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 完整功能迭代 — 移动端+PC端全面优化

Browse Source 
新增:
- 今日纪要 (6分类+彩色标签+时间选择器)
- 客户经理PC端工作台 (我的数据,5模块CRUD)
- 用户管理页 (支局长修改角色)
- 客户备注/收支费用(金额+单位)/联系人管理
- 拜访人姓名+电话字段
- 客户导入导出/旧周报导入模板下载
- 序号列+分页(25/50/100)

修复/优化:
- Hash路由→HTML5 History, Casdoor回调正常
- 时区统一为Asia/Shanghai (today_cst)
- 数据库懒加载→selectinload预加载
- 日期解析兼容ISO datetime字符串
- 文件上传定位修复 (position:relative)
- 表单button type='button'防止误提交
- 分管领导权限(只读客户档案,不可编辑)
- 侧边栏折叠+SVG图标
- 拜访方式/紧急度统一chip风格
- 时间范围统一为el-time-picker(is-range)
- 全局CSS设计变量+box-sizing修复滚动条

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
v6ole
2026-06-23 11:40:03 +08:00
parent a1886074dd
commit e7af0e15ab
37 changed files with 4561 additions and 643 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/mobile/VisitForm.vue
+402 -54
View File
@@ -21,16 +21,19 @@ const form = ref({
visit_date: todayStr(),
visit_method: '上门',
time_range: '',
visitor_name: '',
visitor_phone: '',
communication_content: '',
customer_demand: '',
companions: [] as string[],
photos: [] as string[],
})
const timeRangeValue = ref<any>(null)
const customers = ref<any[]>([])
const managers = ref<any[]>([])
const uploadedPhotos = ref<string[]>([])
const photoPreviews = ref<string[]>([]) // blob URLs for local preview
const photoPreviews = ref<string[]>([])
const uploading = ref(false)
const customerSearch = ref('')
@@ -49,13 +52,19 @@ onMounted(async () => {
visit_date: v.visit_date,
visit_method: v.visit_method,
time_range: v.time_range,
visitor_name: v.visitor_name || '',
visitor_phone: v.visitor_phone || '',
communication_content: v.communication_content || '',
customer_demand: v.customer_demand || '',
companions: (v.companions || []).map(String),
photos: v.photos || [],
}
uploadedPhotos.value = v.photos || []
// Load photo previews for existing photos
// Parse time range back into picker
if (v.time_range && v.time_range.includes('-')) {
const parts = v.time_range.split('-')
timeRangeValue.value = [parts[0], parts[1]]
}
for (const key of (v.photos || [])) {
try {
const urlRes = await uploadApi.getDownloadUrl(key)
@@ -77,11 +86,8 @@ async function loadCustomers(q?: string) {
async function handleCustomerSearch(query: string) {
customerSearch.value = query
if (query) {
await loadCustomers(query)
} else {
await loadCustomers()
}
if (query) { await loadCustomers(query) }
else { await loadCustomers() }
}
async function handleQuickCreate() {
@@ -108,7 +114,6 @@ async function handlePhotoUpload(event: Event) {
uploading.value = true
for (const file of Array.from(target.files)) {
if (uploadedPhotos.value.length >= 9) break
// Show local preview immediately
const previewUrl = URL.createObjectURL(file)
photoPreviews.value.push(previewUrl)
try {
@@ -117,7 +122,6 @@ async function handlePhotoUpload(event: Event) {
uploadedPhotos.value.push(res.data.object_key)
form.value.photos = [...uploadedPhotos.value]
} catch (e: any) {
// Remove preview on failure
const idx = photoPreviews.value.indexOf(previewUrl)
if (idx >= 0) photoPreviews.value.splice(idx, 1)
URL.revokeObjectURL(previewUrl)
@@ -128,8 +132,11 @@ async function handlePhotoUpload(event: Event) {
target.value = ''
}
function onTimeRangeChange(val: [string, string] | null) {
form.value.time_range = val ? val.join('-') : ''
}
function removePhoto(index: number) {
// Clean up preview URL
if (index < photoPreviews.value.length) {
URL.revokeObjectURL(photoPreviews.value[index])
photoPreviews.value.splice(index, 1)
@@ -169,15 +176,27 @@ async function handleDelete() {
</script>
<template>
<div class="visit-form">
<div class="form-header">
<el-button text @click="router.back()">← 返回</el-button>
<h3>{{ isEdit ? '编辑拜访记录' : '今日拜访' }}</h3>
<span style="width:60px"></span>
</div>
<div class="form-page">
<!-- ═══ Editorial Header ═══ -->
<header class="form-editorial-header">
<button type="button" class="form-back-btn" @click="router.back()">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="19" y1="12" x2="5" y2="12"></line>
<polyline points="12 19 5 12 12 5"></polyline>
</svg>
</button>
<div class="form-title-group">
<h2 class="form-title">{{ isEdit ? '编辑拜访记录' : '今日拜访' }}</h2>
<span class="form-subtitle">VISIT RECORD</span>
</div>
<div class="form-rule"></div>
</header>
<el-form label-position="top">
<el-form-item label="客户单位">
<el-form label-position="top" class="editorial-form">
<el-form-item>
<template #label>
<span class="form-label">客户单位</span>
</template>
<el-select
v-model="form.customer_id"
filterable
@@ -185,85 +204,414 @@ async function handleDelete() {
:remote-method="handleCustomerSearch"
placeholder="搜索/选择客户"
style="width:100%"
popper-class="customer-select-popper"
>
<el-option v-for="c in customers" :key="c.id" :label="c.name" :value="c.id" />
</el-select>
<div v-if="customerSearch && !customers.some(c => c.name === customerSearch)" style="margin-top:6px">
<el-button size="small" type="success" @click="handleQuickCreate">
+ 新建客户「{{ customerSearch }}」
</el-button>
<div v-if="customerSearch && !customers.some(c => c.name === customerSearch)" style="margin-top:8px">
<button type="button" class="quick-create-btn" @click="handleQuickCreate">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
新建客户「{{ customerSearch }}」
</button>
</div>
</el-form-item>
<el-form-item label="拜访日期">
<el-form-item>
<template #label>
<span class="form-label">拜访日期</span>
</template>
<el-date-picker v-model="form.visit_date" type="date" style="width:100%" />
</el-form-item>
<el-form-item label="拜访方式">
<el-radio-group v-model="form.visit_method">
<el-radio-button value="上门">上门</el-radio-button>
<el-radio-button value="电话">电话</el-radio-button>
<el-radio-button value="微信">微信</el-radio-button>
<el-radio-button value="出差">出差</el-radio-button>
</el-radio-group>
<el-form-item>
<template #label>
<span class="form-label">拜访方式</span>
</template>
<div class="method-grid">
<button
v-for="m in ['上门','电话','微信','出差']"
:key="m"
type="button"
class="method-chip"
:class="{ 'method-chip--active': form.visit_method === m, ['method--' + m]: true }"
@click="form.visit_method = m"
>{{ m }}</button>
</div>
</el-form-item>
<el-form-item label="时间范围">
<el-input v-model="form.time_range" placeholder="如 9:00-10:00" />
<el-form-item>
<template #label>
<span class="form-label">时间范围</span>
</template>
<el-time-picker
v-model="timeRangeValue"
is-range
format="HH:mm"
value-format="HH:mm"
range-separator="至"
start-placeholder="开始"
end-placeholder="结束"
style="width:100%"
@change="onTimeRangeChange"
/>
</el-form-item>
<el-form-item label="同访人员">
<el-form-item>
<template #label>
<span class="form-label">同访人员</span>
</template>
<el-select v-model="form.companions" multiple filterable placeholder="选择同访人员" style="width:100%">
<el-option v-for="m in managers" :key="m.id" :label="m.name" :value="m.id" :disabled="m.id === auth.userId" />
</el-select>
</el-form-item>
<el-form-item label="沟通内容">
<el-form-item>
<template #label>
<span class="form-label">拜访人姓名</span>
</template>
<el-input v-model="form.visitor_name" placeholder="实际拜访人姓名" />
</el-form-item>
<el-form-item>
<template #label>
<span class="form-label">拜访人电话 <span class="form-label-hint">可选</span></span>
</template>
<el-input v-model="form.visitor_phone" placeholder="联系电话（可选）" />
</el-form-item>
<el-form-item>
<template #label>
<span class="form-label">沟通内容</span>
</template>
<el-input v-model="form.communication_content" type="textarea" :rows="4" placeholder="本次拜访沟通内容..." />
</el-form-item>
<el-form-item label="客户需求">
<el-form-item>
<template #label>
<span class="form-label">客户需求</span>
</template>
<el-input v-model="form.customer_demand" type="textarea" :rows="2" placeholder="客户提出的需求..." />
</el-form-item>
<el-form-item label="拜访照片 (最多9张)">
<el-form-item>
<template #label>
<span class="form-label">拜访照片 <span class="form-label-hint">最多9张</span></span>
</template>
<div class="photo-area">
<div v-for="(key, idx) in uploadedPhotos" :key="key" class="photo-item">
<img :src="photoPreviews[idx]" class="photo-thumb" v-if="photoPreviews[idx]" />
<span class="photo-label">照片{{ idx + 1 }}</span>
<el-button text size="small" type="danger" @click="removePhoto(idx)">移除</el-button>
<button type="button" class="photo-remove-btn" @click="removePhoto(idx)">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
</div>
<label v-if="uploadedPhotos.length < 9" class="upload-btn">
<el-button :loading="uploading" type="primary" plain>+ 拍照/选图</el-button>
<span class="upload-btn__inner">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<polyline points="17 8 12 3 7 8"></polyline>
<line x1="12" y1="3" x2="12" y2="15"></line>
</svg>
{{ uploading ? '上传中...' : '拍照/选图' }}
</span>
<input type="file" accept="image/*" multiple @change="handlePhotoUpload" class="file-input-hidden" />
</label>
</div>
</el-form-item>
<div style="margin-top:24px; display:flex; gap:12px">
<el-button type="primary" size="large" :loading="submitLoading" @click="handleSubmit" style="flex:1">
提交
</el-button>
<el-button v-if="isEdit" type="danger" size="large" :loading="deleting" @click="handleDelete">
<div class="form-actions">
<button class="submit-btn" :disabled="submitLoading" @click="handleSubmit">
<span v-if="submitLoading" class="btn-loading"></span>
{{ isEdit ? '保存修改' : '提交记录' }}
</button>
<button v-if="isEdit" type="button" class="delete-btn" :disabled="deleting" @click="handleDelete">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="3 6 5 6 21 6"></polyline>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
</svg>
删除
</el-button>
</button>
</div>
</el-form>
</div>
</template>
<style scoped>
.visit-form { max-width: 500px; margin: 0 auto; }
.form-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.form-header h3 { margin: 0; }
.photo-area { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.photo-item { display: flex; align-items: center; gap: 6px; background: #f5f7fa; padding: 4px 10px; border-radius: 8px; }
.photo-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.photo-label { font-size: 12px; }
/* ═══ Page ═══ */
.form-page {
max-width: 100%;
margin: 0 auto;
padding-bottom: 20px;
}
/* ═══ Editorial Header ═══ */
.form-editorial-header {
display: flex;
align-items: flex-start;
gap: 14px;
margin-bottom: 26px;
flex-wrap: wrap;
}
.form-back-btn {
background: var(--surface);
border: 1px solid var(--warm-border);
padding: 8px 10px;
cursor: pointer;
color: var(--warm-gray);
display: flex;
align-items: center;
transition: all var(--transition);
flex-shrink: 0;
margin-top: 2px;
}
.form-back-btn:hover {
color: var(--ink);
border-color: var(--ink);
}
.form-title-group {
display: flex;
flex-direction: column;
gap: 0;
flex: 1;
}
.form-title {
margin: 0;
font-family: 'ZCOOL XiaoWei', STSong, serif;
font-size: 24px;
font-weight: 400;
color: var(--ink);
letter-spacing: 0.06em;
line-height: 1.3;
}
.form-subtitle {
font-family: 'JetBrains Mono', 'SF Mono', monospace;
font-size: 9px;
color: var(--gold);
letter-spacing: 0.2em;
}
.form-rule {
width: 100%;
height: 2px;
background: var(--warm-border);
margin-top: 6px;
position: relative;
}
.form-rule::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 32px;
height: 2px;
background: var(--gold);
}
/* ═══ Form Labels ═══ */
.form-label {
font-family: 'ZCOOL XiaoWei', STSong, serif !important;
font-size: 14px !important;
color: var(--ink) !important;
letter-spacing: 0.04em;
font-weight: 500 !important;
}
.form-label-hint {
font-family: 'Noto Serif SC', STSong, serif;
font-size: 11px;
color: var(--warm-gray);
letter-spacing: 0.03em;
font-weight: 400;
margin-left: 6px;
}
/* ═══ Form Spacing ═══ */
.editorial-form .el-form-item {
margin-bottom: 20px;
}
/* ═══ Quick Create Button ═══ */
.quick-create-btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: none;
border: 1px dashed var(--gold);
padding: 8px 14px;
color: var(--gold-dark);
font-family: 'Noto Serif SC', STSong, serif;
font-size: 13px;
cursor: pointer;
transition: all 0.2s;
letter-spacing: 0.03em;
}
.quick-create-btn:hover {
border-color: var(--vermilion);
color: var(--vermilion);
background: rgba(184,71,46,0.03);
}
/* ═══ Photo Area ═══ */
.photo-area {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}
.photo-item {
display: flex;
align-items: center;
gap: 8px;
background: var(--paper);
border: 1px solid var(--warm-border);
padding: 6px 10px;
}
.photo-thumb {
width: 48px;
height: 48px;
object-fit: cover;
flex-shrink: 0;
border: 2px solid var(--warm-border);
}
.photo-label {
font-family: 'JetBrains Mono', 'SF Mono', monospace;
font-size: 11px;
color: var(--warm-gray);
letter-spacing: 0.03em;
}
.photo-remove-btn {
background: none;
border: none;
color: var(--vermilion);
cursor: pointer;
padding: 2px;
display: flex;
opacity: 0.6;
transition: opacity 0.2s;
}
.photo-remove-btn:hover { opacity: 1; }
.upload-btn { cursor: pointer; position: relative; display: inline-block; }
.upload-btn .file-input-hidden {
position: absolute; left: 0; top: 0; width: 100%; height: 100%;
.upload-btn__inner {
display: flex;
align-items: center;
gap: 6px;
padding: 12px 18px;
border: 1px dashed var(--warm-border);
color: var(--warm-gray);
font-family: 'Noto Serif SC', STSong, serif;
font-size: 13px;
transition: all 0.2s;
letter-spacing: 0.03em;
}
.upload-btn__inner:hover {
border-color: var(--gold);
color: var(--gold-dark);
}
.file-input-hidden {
position: absolute; left: 0; top: 0;
width: 100%; height: 100%;
opacity: 0; cursor: pointer;
}
/* ═══ Actions ═══ */
.form-actions {
display: flex;
gap: 10px;
margin-top: 28px;
}
.submit-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 16px;
background: var(--ink);
color: #fff;
border: none;
font-family: 'ZCOOL XiaoWei', STSong, serif;
font-size: 16px;
letter-spacing: 0.08em;
cursor: pointer;
transition: all 0.25s;
}
.submit-btn:hover { background: var(--ink-light); }
.submit-btn:active { transform: scale(0.98); }
.submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.delete-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 16px 20px;
background: var(--surface);
color: var(--vermilion);
border: 1px solid var(--vermilion);
font-family: 'Noto Serif SC', STSong, serif;
font-size: 14px;
letter-spacing: 0.04em;
cursor: pointer;
transition: all 0.25s;
}
.delete-btn:hover {
background: var(--vermilion);
color: #fff;
}
/* ═══ Loading Animation ═══ */
.btn-loading {
width: 16px; height: 16px;
border: 2px solid rgba(255,255,255,0.3);
border-top-color: #fff;
border-radius: 50%;
animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ═══ Method Chips ═══ */
.method-grid { display: flex; gap: 8px; flex-wrap: wrap; }
.method-chip {
flex: 1; min-width: 64px;
padding: 10px 8px;
background: var(--surface);
border: 1px solid var(--warm-border);
font-family: 'Noto Serif SC', STSong, serif;
font-size: 13px; letter-spacing: 0.04em;
cursor: pointer; transition: all 0.25s;
text-align: center;
}
.method-chip:hover { border-color: var(--ink); }
.method-chip--active { font-weight: 600; }
.method--上门.method-chip--active { background: #4A6741; border-color: #4A6741; color: #fff; }
.method--电话.method-chip--active { background: #5B7FA5; border-color: #5B7FA5; color: #fff; }
.method--微信.method-chip--active { background: #22c55e; border-color: #22c55e; color: #fff; }
.method--出差.method-chip--active { background: #C4934A; border-color: #C4934A; color: #fff; }
</style>