feat: 完整功能迭代 — 移动端+PC端全面优化
新增: - 今日纪要 (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:
@@ -12,6 +12,12 @@ const submitLoading = ref(false)
|
||||
|
||||
const categories = ['行政事务', '合同整理', '发票处理', '内部会议', '培训学习', '其他']
|
||||
|
||||
const catColors: Record<string, string> = {
|
||||
'行政事务': '#1C3738', '合同整理': '#4A6741', '发票处理': '#C4934A',
|
||||
'内部会议': '#B8472E', '培训学习': '#5B7FA5', '其他': '#7B7568',
|
||||
}
|
||||
|
||||
const timeRangeValue = ref<any>(null)
|
||||
const form = ref({
|
||||
note_date: todayStr(),
|
||||
category: '其他',
|
||||
@@ -19,6 +25,15 @@ const form = ref({
|
||||
time_range: '',
|
||||
})
|
||||
|
||||
function onTimeRangeChange(val: [string, string] | null) {
|
||||
form.value.time_range = val ? val.join('-') : ''
|
||||
}
|
||||
function parseTimeRange(str: string): [string, string] | null {
|
||||
if (!str || !str.includes('-')) return null
|
||||
const parts = str.split('-')
|
||||
return parts.length >= 2 ? [parts[0], parts[1]] as [string, string] : null
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
if (isEdit.value) {
|
||||
try {
|
||||
@@ -30,6 +45,7 @@ onMounted(async () => {
|
||||
content: n.content || '',
|
||||
time_range: n.time_range || '',
|
||||
}
|
||||
timeRangeValue.value = parseTimeRange(n.time_range)
|
||||
} catch (_) {}
|
||||
}
|
||||
})
|
||||
@@ -65,42 +81,194 @@ async function handleDelete() {
|
||||
|
||||
<template>
|
||||
<div class="form-page">
|
||||
<div class="form-header">
|
||||
<el-button text @click="router.back()">← 返回</el-button>
|
||||
<h3>{{ isEdit ? '编辑纪要' : '今日纪要' }}</h3>
|
||||
<span style="width:60px"></span>
|
||||
</div>
|
||||
<el-form label-position="top">
|
||||
<el-form-item label="日期">
|
||||
<!-- ═══ 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">DAILY NOTE</span>
|
||||
</div>
|
||||
<div class="form-rule"></div>
|
||||
</header>
|
||||
|
||||
<el-form label-position="top" class="editorial-form">
|
||||
<el-form-item>
|
||||
<template #label>
|
||||
<span class="form-label">日期</span>
|
||||
</template>
|
||||
<el-date-picker v-model="form.note_date" type="date" style="width:100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类">
|
||||
|
||||
<el-form-item>
|
||||
<template #label>
|
||||
<span class="form-label">分类</span>
|
||||
</template>
|
||||
<div class="category-grid">
|
||||
<el-button
|
||||
v-for="c in categories" :key="c"
|
||||
:type="form.category === c ? 'primary' : ''"
|
||||
size="small"
|
||||
<button
|
||||
v-for="c in categories"
|
||||
:key="c"
|
||||
type="button"
|
||||
class="cat-chip"
|
||||
:class="{ 'cat-chip--active': form.category === c }"
|
||||
:style="form.category === c ? { background: catColors[c], borderColor: catColors[c], color: '#fff' } : {}"
|
||||
@click="form.category = c"
|
||||
>{{ c }}</el-button>
|
||||
>
|
||||
{{ c }}
|
||||
</button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间范围（可选）">
|
||||
<el-input v-model="form.time_range" placeholder="如 9:00-11:00" />
|
||||
|
||||
<el-form-item>
|
||||
<template #label>
|
||||
<span class="form-label">时间范围 <span class="form-label-hint">可选</span></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="工作内容" required>
|
||||
|
||||
<el-form-item>
|
||||
<template #label>
|
||||
<span class="form-label">工作内容 <span class="form-label-required">*</span></span>
|
||||
</template>
|
||||
<el-input v-model="form.content" type="textarea" :rows="5" placeholder="今天做了什么..." />
|
||||
</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" @click="handleDelete">删除</el-button>
|
||||
|
||||
<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" @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>
|
||||
删除
|
||||
</button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.form-page { 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; }
|
||||
/* ═══ 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-label-required { color: var(--vermilion); margin-left: 2px; }
|
||||
|
||||
.editorial-form .el-form-item { margin-bottom: 20px; }
|
||||
|
||||
/* ═══ Category Grid ═══ */
|
||||
.category-grid { display: flex; flex-wrap: wrap; gap: 8px; }
|
||||
|
||||
.cat-chip {
|
||||
padding: 10px 16px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--warm-border);
|
||||
color: var(--ink);
|
||||
font-family: 'Noto Serif SC', STSong, serif;
|
||||
font-size: 13px;
|
||||
letter-spacing: 0.03em;
|
||||
cursor: pointer;
|
||||
transition: all 0.25s;
|
||||
}
|
||||
|
||||
.cat-chip:hover { border-color: var(--gold); }
|
||||
.cat-chip--active { font-weight: 600; }
|
||||
|
||||
/* ═══ 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; }
|
||||
|
||||
.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); } }
|
||||
</style>
|
||||
|
||||
@@ -17,8 +17,13 @@ const loading = ref(false)
|
||||
const todayTotal = computed(() => todayVisitCount.value + todayNoteCount.value)
|
||||
|
||||
const categoryColors: Record<string, string> = {
|
||||
'行政事务': '#409EFF', '合同整理': '#67C23A', '发票处理': '#E6A23C',
|
||||
'内部会议': '#F56C6C', '培训学习': '#909399', '其他': '#B37FEB',
|
||||
'行政事务': '#1C3738', '合同整理': '#4A6741', '发票处理': '#C4934A',
|
||||
'内部会议': '#B8472E', '培训学习': '#5B7FA5', '其他': '#7B7568',
|
||||
}
|
||||
|
||||
const categoryGlyphs: Record<string, string> = {
|
||||
'行政事务': '政', '合同整理': '约', '发票处理': '票',
|
||||
'内部会议': '议', '培训学习': '学', '其他': '杂',
|
||||
}
|
||||
|
||||
async function loadToday() {
|
||||
@@ -52,85 +57,519 @@ onMounted(loadToday)
|
||||
|
||||
<template>
|
||||
<div class="mobile-home">
|
||||
<!-- Today Summary -->
|
||||
<div class="today-badge">
|
||||
<el-icon :size="48"><Notebook /></el-icon>
|
||||
<div class="badge-text">
|
||||
<div class="badge-count">{{ todayTotal }}</div>
|
||||
<div class="badge-label">今日已录入（拜访{{ todayVisitCount }} + 纪要{{ todayNoteCount }}）</div>
|
||||
<!-- ═══ Editorial Stat Banner ═══ -->
|
||||
<div class="stat-banner">
|
||||
<div class="stat-masthead">
|
||||
<span class="stat-label-sm">TODAY</span>
|
||||
<span class="stat-date">{{ new Date().toLocaleDateString('zh-CN', { month:'long', day:'numeric', weekday:'short' }) }}</span>
|
||||
</div>
|
||||
<div class="stat-main">
|
||||
<span class="stat-number">{{ todayTotal }}</span>
|
||||
<span class="stat-unit">条记录</span>
|
||||
<div class="stat-breakdown">
|
||||
<span class="stat-piece">拜访 <strong>{{ todayVisitCount }}</strong></span>
|
||||
<span class="stat-sep">·</span>
|
||||
<span class="stat-piece">纪要 <strong>{{ todayNoteCount }}</strong></span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Decorative ink-wash corner -->
|
||||
<div class="stat-ornament"></div>
|
||||
</div>
|
||||
|
||||
<!-- ═══ Primary Quick Actions ═══ -->
|
||||
<div class="quick-actions">
|
||||
<el-button type="primary" size="large" @click="router.push('/m/visit/new')" style="flex:1">+ 今日拜访</el-button>
|
||||
<el-button type="success" size="large" @click="router.push('/m/note/new')" style="flex:1">📝 今日纪要</el-button>
|
||||
<button class="action-btn action-btn--primary" @click="router.push('/m/visit/new')">
|
||||
<svg width="20" height="20" 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>
|
||||
<span class="action-btn__text">今日拜访</span>
|
||||
</button>
|
||||
<button class="action-btn action-btn--secondary" @click="router.push('/m/note/new')">
|
||||
<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="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
|
||||
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
|
||||
</svg>
|
||||
<span class="action-btn__text">今日纪要</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- ═══ Secondary Quick Links ═══ -->
|
||||
<div class="quick-links">
|
||||
<el-button @click="router.push('/m/work-plan/new')">📋 工作计划</el-button>
|
||||
<el-button @click="router.push('/m/mini-biz/new')">💼 商机跟单</el-button>
|
||||
<el-button @click="router.push('/m/key-visit/new')">⭐ 要客拜访</el-button>
|
||||
<button class="link-chip" @click="router.push('/m/work-plan/new')">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
|
||||
<line x1="16" y1="2" x2="16" y2="6"></line>
|
||||
<line x1="8" y1="2" x2="8" y2="6"></line>
|
||||
<line x1="3" y1="10" x2="21" y2="10"></line>
|
||||
</svg>
|
||||
工作计划
|
||||
</button>
|
||||
<button class="link-chip" @click="router.push('/m/mini-biz/new')">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="12" y1="1" x2="12" y2="23"></line>
|
||||
<path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
|
||||
</svg>
|
||||
商机跟单
|
||||
</button>
|
||||
<button class="link-chip" @click="router.push('/m/key-visit/new')">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
|
||||
</svg>
|
||||
要客拜访
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-loading="loading">
|
||||
<!-- Daily Notes -->
|
||||
<!-- ═══ Section Divider ═══ -->
|
||||
<div class="section-head" v-if="dailyNotes.length || visits.length">
|
||||
<span class="section-title">今日记录</span>
|
||||
<span class="section-line"></span>
|
||||
</div>
|
||||
|
||||
<div v-loading="loading" class="records-area">
|
||||
<!-- ═══ Daily Notes ═══ -->
|
||||
<template v-if="dailyNotes.length">
|
||||
<h4>📝 今日纪要</h4>
|
||||
<el-card v-for="n in dailyNotes" :key="n.id" class="note-card" shadow="hover">
|
||||
<div class="card-header">
|
||||
<el-tag :color="categoryColors[n.category]" effect="dark" size="small">{{ n.category }}</el-tag>
|
||||
<span v-if="n.time_range" class="time">{{ n.time_range }}</span>
|
||||
<article
|
||||
v-for="(n, i) in dailyNotes"
|
||||
:key="n.id"
|
||||
class="record-card record-card--note"
|
||||
:class="{ 'record-card--offset': i % 2 === 1 }"
|
||||
@click="router.push(`/m/note/${n.id}/edit`)"
|
||||
>
|
||||
<div class="record-accent" :style="{ background: categoryColors[n.category] || '#7B7568' }"></div>
|
||||
<div class="record-body">
|
||||
<div class="record-header">
|
||||
<span class="record-glyph" :style="{ background: categoryColors[n.category] || '#7B7568' }">
|
||||
{{ categoryGlyphs[n.category] || '记' }}
|
||||
</span>
|
||||
<span class="record-category">{{ n.category }}</span>
|
||||
<span v-if="n.time_range" class="record-time">{{ n.time_range }}</span>
|
||||
</div>
|
||||
<p class="record-content">{{ n.content }}</p>
|
||||
<div class="record-footer" v-if="n.time_range">
|
||||
<span class="record-time">{{ n.time_range }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">{{ n.content }}</div>
|
||||
<div class="card-footer">
|
||||
<el-button text size="small" @click="router.push(`/m/note/${n.id}/edit`)">编辑</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<!-- Visits -->
|
||||
<h4 v-if="visits.length">🏢 今日拜访记录</h4>
|
||||
<div v-if="visits.length === 0 && dailyNotes.length === 0" class="empty">今日暂无记录，点击上方按钮开始填报</div>
|
||||
<el-card v-for="v in visits" :key="v.id" class="visit-card" shadow="hover">
|
||||
<div class="card-header">
|
||||
<span class="customer-name">{{ v.customer_name || '-' }}</span>
|
||||
<el-tag size="small">{{ v.visit_method }}</el-tag>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div>{{ v.communication_content || '暂无沟通内容' }}</div>
|
||||
<div v-if="v.customer_demand" class="demand">📌 需求: {{ v.customer_demand }}</div>
|
||||
</div>
|
||||
<div class="card-photos" v-if="v.photos?.length">
|
||||
<img v-for="key in v.photos" :key="key" :src="photoUrls[key] || ''" class="photo-thumb" />
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<span class="time">{{ v.time_range }}</span>
|
||||
<el-button text size="small" @click="router.push(`/m/visit/${v.id}/edit`)">编辑</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
<!-- ═══ Visit Records ═══ -->
|
||||
<template v-if="visits.length">
|
||||
<article
|
||||
v-for="(v, i) in visits"
|
||||
:key="v.id"
|
||||
class="record-card record-card--visit"
|
||||
:class="{ 'record-card--offset': (dailyNotes.length + i) % 2 === 1 }"
|
||||
@click="router.push(`/m/visit/${v.id}/edit`)"
|
||||
>
|
||||
<div class="record-accent record-accent--gold"></div>
|
||||
<div class="record-body">
|
||||
<div class="record-header">
|
||||
<span class="record-glyph record-glyph--visit">访</span>
|
||||
<strong class="record-customer">{{ v.customer_name || '未知客户' }}</strong>
|
||||
<span class="record-badge" :class="'badge--' + v.visit_method">{{ v.visit_method }}</span>
|
||||
</div>
|
||||
<p class="record-content">{{ v.communication_content || '暂无沟通内容' }}</p>
|
||||
<p v-if="v.customer_demand" class="record-demand">
|
||||
<span class="demand-marker">◆</span> {{ v.customer_demand }}
|
||||
</p>
|
||||
<div v-if="v.photos?.length" class="record-photos">
|
||||
<img v-for="key in v.photos" :key="key" :src="photoUrls[key] || ''" class="record-photo" />
|
||||
</div>
|
||||
<div class="record-footer" v-if="v.time_range">
|
||||
<span class="record-time">{{ v.time_range }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div v-if="visits.length === 0 && dailyNotes.length === 0 && !loading" class="empty-state">
|
||||
<div class="empty-glyph">—</div>
|
||||
<p class="empty-text">今日暂无记录</p>
|
||||
<p class="empty-hint">点击上方按钮开始填报</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.mobile-home { padding-bottom: 20px; }
|
||||
.today-badge {
|
||||
display: flex; align-items: center; gap: 16px;
|
||||
background: linear-gradient(135deg, #e8f0fe, #f0f5ff); border-radius: 16px; padding: 20px; margin-bottom: 16px;
|
||||
/* ═══ Page ═══ */
|
||||
.mobile-home {
|
||||
padding-bottom: 24px;
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* ═══ Stat Banner — Editorial Masthead ═══ */
|
||||
.stat-banner {
|
||||
position: relative;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--warm-border);
|
||||
padding: 20px 22px;
|
||||
margin-bottom: 18px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stat-masthead {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.stat-label-sm {
|
||||
font-family: 'JetBrains Mono', 'SF Mono', monospace;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.2em;
|
||||
color: var(--warm-gray);
|
||||
}
|
||||
|
||||
.stat-date {
|
||||
font-family: 'Noto Serif SC', STSong, serif;
|
||||
font-size: 12px;
|
||||
color: var(--warm-gray);
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.stat-main {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-family: 'ZCOOL XiaoWei', STSong, serif;
|
||||
font-size: 56px;
|
||||
color: var(--ink);
|
||||
line-height: 1;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.stat-unit {
|
||||
font-family: 'Noto Serif SC', STSong, serif;
|
||||
font-size: 16px;
|
||||
color: var(--warm-gray);
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.stat-breakdown {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.stat-piece {
|
||||
font-family: 'Noto Serif SC', STSong, serif;
|
||||
font-size: 13px;
|
||||
color: var(--warm-gray);
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.stat-piece strong {
|
||||
font-family: 'JetBrains Mono', 'SF Mono', monospace;
|
||||
color: var(--ink);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.stat-sep {
|
||||
color: var(--gold);
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
/* Decorative gold slash */
|
||||
.stat-ornament {
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
right: -20px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: linear-gradient(135deg, transparent 50%, rgba(196,147,74,0.08) 50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* ═══ Quick Actions ═══ */
|
||||
.quick-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 16px 12px;
|
||||
border: 1px solid var(--warm-border);
|
||||
cursor: pointer;
|
||||
font-family: 'Noto Serif SC', STSong, serif;
|
||||
font-size: 15px;
|
||||
letter-spacing: 0.04em;
|
||||
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.action-btn:active {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
.action-btn--primary {
|
||||
background: var(--ink);
|
||||
color: #fff;
|
||||
border-color: var(--ink);
|
||||
}
|
||||
|
||||
.action-btn--primary:hover {
|
||||
background: var(--ink-light);
|
||||
}
|
||||
|
||||
.action-btn--secondary {
|
||||
background: var(--surface);
|
||||
color: var(--ink);
|
||||
border-color: var(--ink);
|
||||
}
|
||||
|
||||
.action-btn--secondary:hover {
|
||||
background: var(--c-primary-bg);
|
||||
}
|
||||
|
||||
.action-btn__text {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ═══ Quick Links (Chips) ═══ */
|
||||
.quick-links {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 22px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.link-chip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 9px 15px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--warm-border);
|
||||
color: var(--ink);
|
||||
font-family: 'Noto Serif SC', STSong, serif;
|
||||
font-size: 13px;
|
||||
letter-spacing: 0.03em;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.link-chip:hover {
|
||||
border-color: var(--gold);
|
||||
color: var(--vermilion);
|
||||
}
|
||||
|
||||
.link-chip:active {
|
||||
background: var(--paper-dark);
|
||||
}
|
||||
|
||||
/* ═══ Section Head ═══ */
|
||||
.section-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-family: 'ZCOOL XiaoWei', STSong, serif;
|
||||
font-size: 18px;
|
||||
color: var(--ink);
|
||||
letter-spacing: 0.06em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.section-line {
|
||||
flex: 1;
|
||||
height: 2px;
|
||||
background: var(--gold);
|
||||
}
|
||||
|
||||
/* ═══ Record Cards ═══ */
|
||||
.records-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.record-card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--warm-border);
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
.record-card:active { transform: scale(0.99); }
|
||||
|
||||
.record-card--offset {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.record-card:hover {
|
||||
box-shadow: 0 4px 12px rgba(28,55,56,0.06);
|
||||
}
|
||||
|
||||
/* Left accent stripe */
|
||||
.record-accent {
|
||||
width: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.record-accent--gold {
|
||||
background: var(--gold);
|
||||
}
|
||||
|
||||
.record-body {
|
||||
flex: 1;
|
||||
padding: 14px 16px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.record-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* Category glyph — single Chinese character badge */
|
||||
.record-glyph {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
color: #fff;
|
||||
font-family: 'ZCOOL XiaoWei', STSong, serif;
|
||||
font-size: 13px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.record-glyph--visit {
|
||||
background: var(--gold);
|
||||
}
|
||||
|
||||
.record-category {
|
||||
font-family: 'ZCOOL XiaoWei', STSong, serif;
|
||||
font-size: 13px;
|
||||
color: var(--ink);
|
||||
letter-spacing: 0.04em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.record-badge {
|
||||
font-family: 'Noto Serif SC', STSong, serif;
|
||||
font-size: 11px;
|
||||
padding: 1px 8px;
|
||||
letter-spacing: 0.04em;
|
||||
margin-left: auto;
|
||||
border: 1px solid;
|
||||
}
|
||||
.badge--上门 { color: #4A6741; border-color: #4A6741; }
|
||||
.badge--电话 { color: #5B7FA5; border-color: #5B7FA5; }
|
||||
.badge--微信 { color: #22c55e; border-color: #22c55e; }
|
||||
.badge--出差 { color: #C4934A; border-color: #C4934A; }
|
||||
|
||||
|
||||
.record-customer {
|
||||
font-family: 'ZCOOL XiaoWei', STSong, serif;
|
||||
font-size: 15px;
|
||||
color: var(--ink);
|
||||
letter-spacing: 0.03em;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.record-time {
|
||||
font-family: 'JetBrains Mono', 'SF Mono', monospace;
|
||||
font-size: 11px;
|
||||
color: var(--warm-gray);
|
||||
letter-spacing: 0.03em;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.record-content {
|
||||
font-family: 'Noto Serif SC', STSong, serif;
|
||||
font-size: 14px;
|
||||
color: var(--c-text);
|
||||
line-height: 1.7;
|
||||
margin: 0 0 8px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.record-demand {
|
||||
font-family: 'Noto Serif SC', STSong, serif;
|
||||
font-size: 13px;
|
||||
color: var(--vermilion);
|
||||
margin: 0 0 8px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.demand-marker {
|
||||
color: var(--gold);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.record-photos {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
margin: 8px 0;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.record-photo {
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
object-fit: cover;
|
||||
flex-shrink: 0;
|
||||
border: 2px solid var(--warm-border);
|
||||
}
|
||||
|
||||
.record-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* ═══ Empty State ═══ */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 48px 0;
|
||||
}
|
||||
|
||||
.empty-glyph {
|
||||
font-family: 'ZCOOL XiaoWei', STSong, serif;
|
||||
font-size: 40px;
|
||||
color: var(--gold);
|
||||
opacity: 0.4;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-family: 'Noto Serif SC', STSong, serif;
|
||||
font-size: 15px;
|
||||
color: var(--warm-gray);
|
||||
margin: 0 0 4px;
|
||||
}
|
||||
|
||||
.empty-hint {
|
||||
font-family: 'Noto Serif SC', STSong, serif;
|
||||
font-size: 12px;
|
||||
color: var(--c-text-muted);
|
||||
margin: 0;
|
||||
}
|
||||
.badge-count { font-size: 36px; font-weight: 700; color: #1a73e8; }
|
||||
.badge-label { font-size: 13px; color: #606266; }
|
||||
.quick-actions { display: flex; gap: 12px; margin-bottom: 12px; }
|
||||
.quick-links { display: flex; gap: 8px; margin-bottom: 20px; }
|
||||
h4 { margin: 16px 0 12px; color: #303133; }
|
||||
.empty { text-align: center; color: #c0c4cc; padding: 40px 0; }
|
||||
.visit-card, .note-card { margin-bottom: 12px; }
|
||||
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
|
||||
.customer-name { font-weight: 600; font-size: 15px; }
|
||||
.demand { color: #e6a23c; margin-top: 4px; font-size: 13px; }
|
||||
.card-photos { display: flex; gap: 6px; margin-top: 8px; overflow-x: auto; }
|
||||
.photo-thumb { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; }
|
||||
.card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 12px; color: #909399; }
|
||||
.card-body { font-size: 14px; color: #303133; }
|
||||
.time { font-size: 12px; color: #909399; }
|
||||
</style>
|
||||
|
||||
@@ -4,11 +4,19 @@ import { useRouter } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { keyVisitsApi } from '@/api/keyVisits'
|
||||
import { customersApi } from '@/api/customers'
|
||||
import api from '@/api/index'
|
||||
|
||||
const router = useRouter()
|
||||
const submitLoading = ref(false)
|
||||
const customers = ref<any[]>([])
|
||||
const allUsers = ref<any[]>([])
|
||||
|
||||
const urgencyLevels = ['一般', '重要', '紧急']
|
||||
const urgencyColors: Record<string, string> = {
|
||||
'一般': '#5B7FA5', '重要': '#C4934A', '紧急': '#B8472E',
|
||||
}
|
||||
|
||||
const plannedVisitors = ref<string[]>([])
|
||||
const form = ref({
|
||||
customer_id: '',
|
||||
urgency_level: '一般',
|
||||
@@ -19,7 +27,13 @@ const form = ref({
|
||||
visit_target: '',
|
||||
})
|
||||
|
||||
onMounted(() => { loadCustomers() })
|
||||
function onVisitorsChange(val: string[]) {
|
||||
form.value.planned_visitor = val.join('、')
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await Promise.all([loadCustomers(), loadUsers()])
|
||||
})
|
||||
|
||||
async function loadCustomers(q?: string) {
|
||||
try {
|
||||
@@ -30,6 +44,13 @@ async function loadCustomers(q?: string) {
|
||||
} catch (_) {}
|
||||
}
|
||||
|
||||
async function loadUsers() {
|
||||
try {
|
||||
const res = await api.get('/users/')
|
||||
allUsers.value = res.data || []
|
||||
} catch (_) {}
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!form.value.customer_id) { ElMessage.warning('请选择客户'); return }
|
||||
submitLoading.value = true
|
||||
@@ -45,50 +66,169 @@ async function handleSubmit() {
|
||||
|
||||
<template>
|
||||
<div class="form-page">
|
||||
<div class="form-header">
|
||||
<el-button text @click="router.back()">← 返回</el-button>
|
||||
<h3>添加要客拜访</h3>
|
||||
<span style="width:60px"></span>
|
||||
</div>
|
||||
<el-form label-position="top">
|
||||
<el-form-item label="客户单位">
|
||||
<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">添加要客拜访</h2>
|
||||
<span class="form-subtitle">KEY VISIT PLAN</span>
|
||||
</div>
|
||||
<div class="form-rule"></div>
|
||||
</header>
|
||||
|
||||
<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 remote :remote-method="loadCustomers" placeholder="搜索客户" style="width:100%">
|
||||
<el-option v-for="c in customers" :key="c.id" :label="c.name" :value="c.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="紧急重要度">
|
||||
<el-radio-group v-model="form.urgency_level">
|
||||
<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="urgency-grid">
|
||||
<button
|
||||
v-for="u in urgencyLevels" :key="u"
|
||||
type="button"
|
||||
class="urgency-chip"
|
||||
:class="{ 'urgency-chip--active': form.urgency_level === u }"
|
||||
:style="form.urgency_level === u ? { background: urgencyColors[u], borderColor: urgencyColors[u], color: '#fff' } : {}"
|
||||
@click="form.urgency_level = u"
|
||||
>{{ u }}</button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="内容描述">
|
||||
|
||||
<el-form-item>
|
||||
<template #label><span class="form-label">内容描述</span></template>
|
||||
<el-input v-model="form.description" type="textarea" :rows="4" placeholder="拜访目的和内容..." />
|
||||
</el-form-item>
|
||||
<el-form-item label="进展状态">
|
||||
|
||||
<el-form-item>
|
||||
<template #label><span class="form-label">进展状态</span></template>
|
||||
<el-select v-model="form.progress_status" style="width:100%">
|
||||
<el-option label="未开始" value="未开始" />
|
||||
<el-option label="进行中" value="进行中" />
|
||||
<el-option label="已完成" value="已完成" />
|
||||
</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.planned_date" placeholder="如: 2026-06-25" />
|
||||
</el-form-item>
|
||||
<el-form-item label="计划拜访人">
|
||||
<el-input v-model="form.planned_visitor" placeholder="负责拜访的人员" />
|
||||
|
||||
<el-form-item>
|
||||
<template #label><span class="form-label">计划拜访人 <span class="form-label-hint">可多选</span></span></template>
|
||||
<el-select
|
||||
v-model="plannedVisitors"
|
||||
multiple
|
||||
filterable
|
||||
allow-create
|
||||
default-first-option
|
||||
placeholder="选择或输入姓名（可多选）"
|
||||
style="width:100%"
|
||||
@change="onVisitorsChange"
|
||||
>
|
||||
<el-option v-for="u in allUsers" :key="u.id" :label="u.name + (u.role === 'director' ? ' (支局长)' : u.role === 'leader' ? ' (分管领导)' : '')" :value="u.name" />
|
||||
</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.visit_target" placeholder="如: 王局长、张处长" />
|
||||
</el-form-item>
|
||||
<el-button type="primary" size="large" :loading="submitLoading" @click="handleSubmit" style="width:100%">提交</el-button>
|
||||
|
||||
<button class="submit-btn" :disabled="submitLoading" @click="handleSubmit">
|
||||
<span v-if="submitLoading" class="btn-loading"></span>
|
||||
提交计划
|
||||
</button>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.form-page { 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; }
|
||||
.form-page { max-width: 100%; margin: 0 auto; padding-bottom: 20px; }
|
||||
|
||||
.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-label {
|
||||
font-family: 'ZCOOL XiaoWei', STSong, serif !important;
|
||||
font-size: 14px !important; color: var(--ink) !important;
|
||||
letter-spacing: 0.04em; font-weight: 500 !important;
|
||||
}
|
||||
|
||||
.editorial-form .el-form-item { margin-bottom: 20px; }
|
||||
|
||||
/* ═══ Urgency Chips ═══ */
|
||||
.urgency-grid { display: flex; gap: 8px; flex-wrap: wrap; }
|
||||
|
||||
.urgency-chip {
|
||||
flex: 1; min-width: 72px;
|
||||
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;
|
||||
}
|
||||
|
||||
.urgency-chip:hover { border-color: var(--ink); }
|
||||
.urgency-chip--active { font-weight: 600; }
|
||||
|
||||
.submit-btn {
|
||||
width: 100%; 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;
|
||||
margin-top: 24px;
|
||||
}
|
||||
.submit-btn:hover { background: var(--ink-light); }
|
||||
.submit-btn:active { transform: scale(0.98); }
|
||||
.submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
|
||||
|
||||
.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); } }
|
||||
</style>
|
||||
|
||||
@@ -44,43 +44,127 @@ async function handleSubmit() {
|
||||
|
||||
<template>
|
||||
<div class="form-page">
|
||||
<div class="form-header">
|
||||
<el-button text @click="router.back()">← 返回</el-button>
|
||||
<h3>添加商机跟单</h3>
|
||||
<span style="width:60px"></span>
|
||||
</div>
|
||||
<el-form label-position="top">
|
||||
<el-form-item label="客户单位">
|
||||
<header class="form-editorial-header">
|
||||
<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">添加商机跟单</h2>
|
||||
<span class="form-subtitle">BUSINESS OPPORTUNITY</span>
|
||||
</div>
|
||||
<div class="form-rule"></div>
|
||||
</header>
|
||||
|
||||
<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 remote :remote-method="loadCustomers" placeholder="搜索客户" style="width:100%">
|
||||
<el-option v-for="c in customers" :key="c.id" :label="c.name" :value="c.id" />
|
||||
</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.product_type" placeholder="例如: 云桌面、专线..." />
|
||||
</el-form-item>
|
||||
<el-form-item label="金额">
|
||||
|
||||
<el-form-item>
|
||||
<template #label><span class="form-label">金额</span></template>
|
||||
<el-input v-model="form.amount" placeholder="预估金额" />
|
||||
</el-form-item>
|
||||
<el-form-item label="跟进内容">
|
||||
|
||||
<el-form-item>
|
||||
<template #label><span class="form-label">跟进内容</span></template>
|
||||
<el-input v-model="form.follow_up_detail" type="textarea" :rows="4" placeholder="具体情况..." />
|
||||
</el-form-item>
|
||||
<el-form-item label="跟进状态">
|
||||
|
||||
<el-form-item>
|
||||
<template #label><span class="form-label">跟进状态</span></template>
|
||||
<el-select v-model="form.status" style="width:100%">
|
||||
<el-option label="跟进中" value="跟进中" />
|
||||
<el-option label="已签约" value="已签约" />
|
||||
<el-option label="已流失" value="已流失" />
|
||||
</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.expected_revenue_date" placeholder="如: 2026Q3" />
|
||||
</el-form-item>
|
||||
<el-button type="primary" size="large" :loading="submitLoading" @click="handleSubmit" style="width:100%">提交</el-button>
|
||||
|
||||
<button class="submit-btn" :disabled="submitLoading" @click="handleSubmit">
|
||||
<span v-if="submitLoading" class="btn-loading"></span>
|
||||
提交商机
|
||||
</button>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.form-page { 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; }
|
||||
.form-page { max-width: 100%; margin: 0 auto; padding-bottom: 20px; }
|
||||
|
||||
.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-label {
|
||||
font-family: 'ZCOOL XiaoWei', STSong, serif !important;
|
||||
font-size: 14px !important; color: var(--ink) !important;
|
||||
letter-spacing: 0.04em; font-weight: 500 !important;
|
||||
}
|
||||
|
||||
.editorial-form .el-form-item { margin-bottom: 20px; }
|
||||
|
||||
.submit-btn {
|
||||
width: 100%; 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;
|
||||
margin-top: 24px;
|
||||
}
|
||||
.submit-btn:hover { background: var(--ink-light); }
|
||||
.submit-btn:active { transform: scale(0.98); }
|
||||
.submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
|
||||
|
||||
.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); } }
|
||||
</style>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -43,30 +43,108 @@ async function handleSubmit() {
|
||||
|
||||
<template>
|
||||
<div class="form-page">
|
||||
<div class="form-header">
|
||||
<el-button text @click="router.back()">← 返回</el-button>
|
||||
<h3>添加工作计划</h3>
|
||||
<span style="width:60px"></span>
|
||||
</div>
|
||||
<el-form label-position="top">
|
||||
<el-form-item label="客户单位">
|
||||
<header class="form-editorial-header">
|
||||
<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">添加工作计划</h2>
|
||||
<span class="form-subtitle">WORK PLAN</span>
|
||||
</div>
|
||||
<div class="form-rule"></div>
|
||||
</header>
|
||||
|
||||
<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 remote :remote-method="loadCustomers" placeholder="搜索客户" style="width:100%">
|
||||
<el-option v-for="c in customers" :key="c.id" :label="c.name" :value="c.id" />
|
||||
</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.plan_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-date-picker v-model="form.plan_date" type="date" style="width:100%" />
|
||||
</el-form-item>
|
||||
<el-button type="primary" size="large" :loading="submitLoading" @click="handleSubmit" style="width:100%">提交</el-button>
|
||||
|
||||
<button class="submit-btn" :disabled="submitLoading" @click="handleSubmit">
|
||||
<span v-if="submitLoading" class="btn-loading"></span>
|
||||
提交计划
|
||||
</button>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.form-page { 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; }
|
||||
.form-page { max-width: 100%; margin: 0 auto; padding-bottom: 20px; }
|
||||
|
||||
.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-label {
|
||||
font-family: 'ZCOOL XiaoWei', STSong, serif !important;
|
||||
font-size: 14px !important; color: var(--ink) !important;
|
||||
letter-spacing: 0.04em; font-weight: 500 !important;
|
||||
}
|
||||
|
||||
.editorial-form .el-form-item { margin-bottom: 20px; }
|
||||
|
||||
.submit-btn {
|
||||
width: 100%; 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;
|
||||
margin-top: 24px;
|
||||
}
|
||||
.submit-btn:hover { background: var(--ink-light); }
|
||||
.submit-btn:active { transform: scale(0.98); }
|
||||
.submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
|
||||
|
||||
.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); } }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user