From 24fb5f8f71c9bcf4b025eb798c9b2aaf69bad4aa Mon Sep 17 00:00:00 2001
From: v6ole <voole@vip.qq.com>
Date: Sun, 12 Jul 2026 20:06:47 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=A7=BB=E5=8A=A8=E7=AB=AF=E5=B7=A5?=
 =?UTF-8?q?=E4=BD=9C=E8=AE=A1=E5=88=92/=E5=95=86=E6=9C=BA=E8=B7=9F?=
 =?UTF-8?q?=E5=8D=95/=E8=A6=81=E5=AE=A2=E6=8B=9C=E8=AE=BF=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E7=BC=96=E8=BE=91=E5=92=8C=E5=88=A0=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 三个表单均支持 create+edit 双模式（通过 route.params.id 判断）
- 编辑模式: 加载已有数据 → 修改 → PUT 更新
- 编辑模式增加删除按钮
- 列表页卡片点击跳转编辑页
- 新增 6 条编辑路由

Co-Authored-By: Claude <noreply@anthropic.com>
---
 frontend/src/router/index.ts                  |  3 +
 frontend/src/views/mobile/KeyVisitForm.vue    | 54 ++++++++++++----
 frontend/src/views/mobile/KeyVisitsList.vue   |  2 +-
 frontend/src/views/mobile/MiniBizList.vue     |  2 +-
 .../src/views/mobile/MiniBusinessForm.vue     | 62 +++++++++++++++----
 frontend/src/views/mobile/PlansList.vue       |  2 +-
 frontend/src/views/mobile/WorkPlanForm.vue    | 61 ++++++++++++++----
 7 files changed, 145 insertions(+), 41 deletions(-)

diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index f3893cc..e8f2bf6 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -39,8 +39,11 @@ const router = createRouter({
         { path: 'visit/new', name: 'VisitForm', component: () => import('@/views/mobile/VisitForm.vue') },
         { path: 'visit/:id/edit', name: 'VisitEdit', component: () => import('@/views/mobile/VisitForm.vue') },
         { path: 'work-plan/new', name: 'WorkPlanForm', component: () => import('@/views/mobile/WorkPlanForm.vue') },
+        { path: 'work-plan/:id/edit', name: 'WorkPlanEdit', component: () => import('@/views/mobile/WorkPlanForm.vue') },
         { path: 'mini-biz/new', name: 'MiniBusinessForm', component: () => import('@/views/mobile/MiniBusinessForm.vue') },
+        { path: 'mini-biz/:id/edit', name: 'MiniBusinessEdit', component: () => import('@/views/mobile/MiniBusinessForm.vue') },
         { path: 'key-visit/new', name: 'KeyVisitForm', component: () => import('@/views/mobile/KeyVisitForm.vue') },
+        { path: 'key-visit/:id/edit', name: 'KeyVisitEdit', component: () => import('@/views/mobile/KeyVisitForm.vue') },
         { path: 'note/new', name: 'DailyNoteForm', component: () => import('@/views/mobile/DailyNoteForm.vue') },
         { path: 'note/:id/edit', name: 'DailyNoteEdit', component: () => import('@/views/mobile/DailyNoteForm.vue') },
         { path: 'plans', name: 'PlansList', component: () => import('@/views/mobile/PlansList.vue') },
diff --git a/frontend/src/views/mobile/KeyVisitForm.vue b/frontend/src/views/mobile/KeyVisitForm.vue
index 2aff126..16a8659 100644
--- a/frontend/src/views/mobile/KeyVisitForm.vue
+++ b/frontend/src/views/mobile/KeyVisitForm.vue
@@ -1,14 +1,16 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
-import { ElMessage } from 'element-plus'
+import { ref, onMounted, computed } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { keyVisitsApi } from '@/api/keyVisits'
 import { customersApi } from '@/api/customers'
 import { useAuthStore } from '@/stores/auth'
 import api from '@/api/index'
 
 const router = useRouter()
+const route = useRoute()
 const auth = useAuthStore()
+const isEdit = computed(() => !!route.params.id)
 const submitLoading = ref(false)
 const customers = ref<any[]>([])
 const allUsers = ref<any[]>([])
@@ -40,6 +42,14 @@ onMounted(async () => {
   if (auth.isDirector || auth.isLeader) {
     api.get('/users/', { params: { role: 'manager' } }).then(r => { allManagers.value = r.data }).catch(() => {})
   }
+  if (isEdit.value) {
+    try {
+      const res = await keyVisitsApi.list()
+      const items = Array.isArray(res.data) ? res.data : (res.data.items || [])
+      const d = items.find((x: any) => x.id === route.params.id)
+      if (d) form.value = { customer_id: d.customer_id, urgency_level: d.urgency_level, description: d.description || '', progress_status: d.progress_status, planned_date: d.planned_date, planned_visitor: d.planned_visitor, visit_target: d.visit_target, manager_id: d.manager_id || auth.userId || '' }
+    } catch (_) {}
+  }
 })
 
 const customerSearch = ref('')
@@ -86,13 +96,27 @@ async function handleSubmit() {
   if (!form.value.customer_id) { ElMessage.warning('请选择客户'); return }
   submitLoading.value = true
   try {
-    await keyVisitsApi.create(form.value)
-    ElMessage.success('要客拜访计划已提交')
-    router.push('/m')
+    if (isEdit.value) {
+      await keyVisitsApi.update(route.params.id as string, form.value)
+      ElMessage.success('已更新')
+    } else {
+      await keyVisitsApi.create(form.value)
+      ElMessage.success('要客拜访计划已提交')
+    }
+    router.push('/m/key-visits')
   } catch (e: any) {
-    ElMessage.error('提交失败')
+    ElMessage.error((isEdit.value ? '更新' : '提交') + '失败')
   } finally { submitLoading.value = false }
 }
+
+async function handleDelete() {
+  try {
+    await ElMessageBox.confirm('确定删除？', '确认', { type: 'warning' })
+    await keyVisitsApi.delete(route.params.id as string)
+    ElMessage.success('已删除')
+    router.push('/m/key-visits')
+  } catch (e: any) { if (e !== 'cancel') ElMessage.error('删除失败') }
+}
 </script>
 
 <template>
@@ -105,7 +129,7 @@ async function handleSubmit() {
         </svg>
       </button>
       <div class="form-title-group">
-        <h2 class="form-title">添加要客拜访</h2>
+        <h2 class="form-title">{{ isEdit ? '编辑要客拜访' : '添加要客拜访' }}</h2>
         <span class="form-subtitle">KEY VISIT PLAN</span>
       </div>
       <div class="form-rule"></div>
@@ -186,10 +210,13 @@ async function handleSubmit() {
         <el-input v-model="form.visit_target" placeholder="如: 王局长、张处长" />
       </el-form-item>
 
-      <button class="submit-btn" :disabled="submitLoading" @click="handleSubmit">
-        <span v-if="submitLoading" class="btn-loading"></span>
-        提交计划
-      </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" class="delete-btn" @click="handleDelete">删除</button>
+      </div>
     </el-form>
   </div>
 </template>
@@ -278,4 +305,7 @@ async function handleSubmit() {
 .quick-create-btn { display: inline-flex; align-items: center; gap: 4px; background: none; border: 1px dashed var(--gold); padding: 8px 14px; color: var(--gold-dark); font-family: var(--font-body); 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); }
 .select-empty-create { padding: 8px 12px; text-align: center; }
+.form-actions { display: flex; gap: 10px; margin-top: 24px; }
+.delete-btn { padding: 16px 24px; background: var(--surface); color: var(--vermilion); border: 1px solid var(--vermilion); font-family: var(--font-heading); font-size: 16px; letter-spacing: 0.08em; cursor: pointer; transition: all 0.25s; }
+.delete-btn:hover { background: var(--vermilion); color: #fff; }
 </style>
diff --git a/frontend/src/views/mobile/KeyVisitsList.vue b/frontend/src/views/mobile/KeyVisitsList.vue
index b026e7e..53063d6 100644
--- a/frontend/src/views/mobile/KeyVisitsList.vue
+++ b/frontend/src/views/mobile/KeyVisitsList.vue
@@ -43,7 +43,7 @@ async function handleDelete(id: string) {
 
     <div v-loading="loading" class="cards">
       <div v-if="items.length === 0 && !loading" class="empty-state"><div class="empty-glyph">—</div><p class="empty-text">暂不要客记录</p></div>
-      <article v-for="item in items" :key="item.id" class="card">
+      <article v-for="item in items" :key="item.id" class="card" @click="router.push(`/m/key-visit/${item.id}/edit`)">
         <div class="card-accent" :style="{ background: urgencyColors[item.urgency_level] || '#5B7FA5' }"></div>
         <div class="card-body">
           <div class="card-header">
diff --git a/frontend/src/views/mobile/MiniBizList.vue b/frontend/src/views/mobile/MiniBizList.vue
index ca87c9a..25c57aa 100644
--- a/frontend/src/views/mobile/MiniBizList.vue
+++ b/frontend/src/views/mobile/MiniBizList.vue
@@ -43,7 +43,7 @@ async function handleDelete(id: string) {
 
     <div v-loading="loading" class="cards">
       <div v-if="items.length === 0 && !loading" class="empty-state"><div class="empty-glyph">—</div><p class="empty-text">暂无商机记录</p></div>
-      <article v-for="item in items" :key="item.id" class="card">
+      <article v-for="item in items" :key="item.id" class="card" @click="router.push(`/m/mini-biz/${item.id}/edit`)">
         <div class="card-accent" :style="{ background: statusColors[item.status] || '#C4934A' }"></div>
         <div class="card-body">
           <div class="card-header">
diff --git a/frontend/src/views/mobile/MiniBusinessForm.vue b/frontend/src/views/mobile/MiniBusinessForm.vue
index db62702..e6eee4e 100644
--- a/frontend/src/views/mobile/MiniBusinessForm.vue
+++ b/frontend/src/views/mobile/MiniBusinessForm.vue
@@ -1,14 +1,16 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
-import { ElMessage } from 'element-plus'
+import { ref, onMounted, computed } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { miniBusinessApi } from '@/api/miniBusiness'
 import { customersApi } from '@/api/customers'
 import { useAuthStore } from '@/stores/auth'
 import api from '@/api/index'
 
 const router = useRouter()
+const route = useRoute()
 const auth = useAuthStore()
+const isEdit = computed(() => !!route.params.id)
 const submitLoading = ref(false)
 const customers = ref<any[]>([])
 const allManagers = ref<any[]>([])
@@ -23,11 +25,19 @@ const form = ref({
   manager_id: auth.userId || '',
 })
 
-onMounted(() => {
+onMounted(async () => {
   loadCustomers()
   if (auth.isDirector || auth.isLeader) {
     api.get('/users/', { params: { role: 'manager' } }).then(r => { allManagers.value = r.data }).catch(() => {})
   }
+  if (isEdit.value) {
+    try {
+      const res = await miniBusinessApi.list()
+      const items = Array.isArray(res.data) ? res.data : (res.data.items || [])
+      const d = items.find((x: any) => x.id === route.params.id)
+      if (d) form.value = { customer_id: d.customer_id, product_type: d.product_type, amount: d.amount, follow_up_detail: d.follow_up_detail || '', status: d.status, expected_revenue_date: d.expected_revenue_date, manager_id: d.manager_id || auth.userId || '' }
+    } catch (_) {}
+  }
 })
 
 const customerSearch = ref('')
@@ -67,13 +77,27 @@ async function handleSubmit() {
   if (!form.value.customer_id) { ElMessage.warning('请选择客户'); return }
   submitLoading.value = true
   try {
-    await miniBusinessApi.create(form.value)
-    ElMessage.success('商机已提交')
-    router.push('/m')
+    if (isEdit.value) {
+      await miniBusinessApi.update(route.params.id as string, form.value)
+      ElMessage.success('已更新')
+    } else {
+      await miniBusinessApi.create(form.value)
+      ElMessage.success('商机已提交')
+    }
+    router.push('/m/mini-biz')
   } catch (e: any) {
-    ElMessage.error('提交失败')
+    ElMessage.error((isEdit.value ? '更新' : '提交') + '失败')
   } finally { submitLoading.value = false }
 }
+
+async function handleDelete() {
+  try {
+    await ElMessageBox.confirm('确定删除？', '确认', { type: 'warning' })
+    await miniBusinessApi.delete(route.params.id as string)
+    ElMessage.success('已删除')
+    router.push('/m/mini-biz')
+  } catch (e: any) { if (e !== 'cancel') ElMessage.error('删除失败') }
+}
 </script>
 
 <template>
@@ -86,7 +110,7 @@ async function handleSubmit() {
         </svg>
       </button>
       <div class="form-title-group">
-        <h2 class="form-title">添加商机跟单</h2>
+        <h2 class="form-title">{{ isEdit ? '编辑商机跟单' : '添加商机跟单' }}</h2>
         <span class="form-subtitle">BUSINESS OPPORTUNITY</span>
       </div>
       <div class="form-rule"></div>
@@ -142,10 +166,13 @@ async function handleSubmit() {
         <el-input v-model="form.expected_revenue_date" placeholder="如: 2026Q3" />
       </el-form-item>
 
-      <button class="submit-btn" :disabled="submitLoading" @click="handleSubmit">
-        <span v-if="submitLoading" class="btn-loading"></span>
-        提交商机
-      </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" class="delete-btn" @click="handleDelete">删除</button>
+      </div>
     </el-form>
   </div>
 </template>
@@ -217,4 +244,13 @@ async function handleSubmit() {
 .quick-create-btn { display: inline-flex; align-items: center; gap: 4px; background: none; border: 1px dashed var(--gold); padding: 8px 14px; color: var(--gold-dark); font-family: var(--font-body); 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); }
 .select-empty-create { padding: 8px 12px; text-align: center; }
+.form-actions { display: flex; gap: 10px; margin-top: 24px; }
+.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: var(--font-heading); 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 { padding: 16px 24px; background: var(--surface); color: var(--vermilion); border: 1px solid var(--vermilion); font-family: var(--font-heading); font-size: 16px; letter-spacing: 0.08em; 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>
diff --git a/frontend/src/views/mobile/PlansList.vue b/frontend/src/views/mobile/PlansList.vue
index 477efcd..ccf03a2 100644
--- a/frontend/src/views/mobile/PlansList.vue
+++ b/frontend/src/views/mobile/PlansList.vue
@@ -41,7 +41,7 @@ async function handleDelete(id: string) {
 
     <div v-loading="loading" class="cards">
       <div v-if="items.length === 0 && !loading" class="empty-state"><div class="empty-glyph">—</div><p class="empty-text">暂无工作计划</p></div>
-      <article v-for="item in items" :key="item.id" class="card">
+      <article v-for="item in items" :key="item.id" class="card" @click="router.push(`/m/work-plan/${item.id}/edit`)">
         <div class="card-accent" style="background:#4A6741"></div>
         <div class="card-body">
           <div class="card-header">
diff --git a/frontend/src/views/mobile/WorkPlanForm.vue b/frontend/src/views/mobile/WorkPlanForm.vue
index 6c2581f..42dea6f 100644
--- a/frontend/src/views/mobile/WorkPlanForm.vue
+++ b/frontend/src/views/mobile/WorkPlanForm.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
-import { ElMessage } from 'element-plus'
+import { ref, onMounted, computed } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { todayStr } from '@/utils'
 import { workPlansApi } from '@/api/workPlans'
 import { customersApi } from '@/api/customers'
@@ -9,7 +9,9 @@ import { useAuthStore } from '@/stores/auth'
 import api from '@/api/index'
 
 const router = useRouter()
+const route = useRoute()
 const auth = useAuthStore()
+const isEdit = computed(() => !!route.params.id)
 const submitLoading = ref(false)
 const customers = ref<any[]>([])
 const allManagers = ref<any[]>([])
@@ -22,11 +24,18 @@ const form = ref({
   manager_id: auth.userId || '',
 })
 
-onMounted(() => {
+onMounted(async () => {
   loadCustomers()
   if (auth.isDirector || auth.isLeader) {
     api.get('/users/', { params: { role: 'manager' } }).then(r => { allManagers.value = r.data }).catch(() => {})
   }
+  if (isEdit.value) {
+    try {
+      const res = await api.get(`/work-plans/${route.params.id}`)
+      const d = res.data
+      form.value = { customer_id: d.customer_id, plan_content: d.plan_content || '', plan_date: d.plan_date, status: d.status, manager_id: d.manager_id || auth.userId || '' }
+    } catch (_) {}
+  }
 })
 
 const customerSearch = ref('')
@@ -66,13 +75,27 @@ async function handleSubmit() {
   if (!form.value.customer_id) { ElMessage.warning('请选择客户'); return }
   submitLoading.value = true
   try {
-    await workPlansApi.create(form.value)
-    ElMessage.success('计划已提交')
-    router.push('/m')
+    if (isEdit.value) {
+      await api.put(`/work-plans/${route.params.id}`, form.value)
+      ElMessage.success('已更新')
+    } else {
+      await workPlansApi.create(form.value)
+      ElMessage.success('计划已提交')
+    }
+    router.push('/m/plans')
   } catch (e: any) {
-    ElMessage.error('提交失败')
+    ElMessage.error((isEdit.value ? '更新' : '提交') + '失败')
   } finally { submitLoading.value = false }
 }
+
+async function handleDelete() {
+  try {
+    await ElMessageBox.confirm('确定删除？', '确认', { type: 'warning' })
+    await api.delete(`/work-plans/${route.params.id}`)
+    ElMessage.success('已删除')
+    router.push('/m/plans')
+  } catch (e: any) { if (e !== 'cancel') ElMessage.error('删除失败') }
+}
 </script>
 
 <template>
@@ -85,7 +108,7 @@ async function handleSubmit() {
         </svg>
       </button>
       <div class="form-title-group">
-        <h2 class="form-title">添加工作计划</h2>
+        <h2 class="form-title">{{ isEdit ? '编辑工作计划' : '添加工作计划' }}</h2>
         <span class="form-subtitle">WORK PLAN</span>
       </div>
       <div class="form-rule"></div>
@@ -122,10 +145,13 @@ async function handleSubmit() {
         <el-date-picker v-model="form.plan_date" type="date" style="width:100%" />
       </el-form-item>
 
-      <button class="submit-btn" :disabled="submitLoading" @click="handleSubmit">
-        <span v-if="submitLoading" class="btn-loading"></span>
-        提交计划
-      </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" class="delete-btn" @click="handleDelete">删除</button>
+      </div>
     </el-form>
   </div>
 </template>
@@ -197,4 +223,13 @@ async function handleSubmit() {
 .quick-create-btn { display: inline-flex; align-items: center; gap: 4px; background: none; border: 1px dashed var(--gold); padding: 8px 14px; color: var(--gold-dark); font-family: var(--font-body); 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); }
 .select-empty-create { padding: 8px 12px; text-align: center; }
+.form-actions { display: flex; gap: 10px; margin-top: 24px; }
+.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: var(--font-heading); 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 { padding: 16px 24px; background: var(--surface); color: var(--vermilion); border: 1px solid var(--vermilion); font-family: var(--font-heading); font-size: 16px; letter-spacing: 0.08em; 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>