feat: 移动端工作计划/商机跟单/要客拜访支持编辑和删除
- 三个表单均支持 create+edit 双模式(通过 route.params.id 判断) - 编辑模式: 加载已有数据 → 修改 → PUT 更新 - 编辑模式增加删除按钮 - 列表页卡片点击跳转编辑页 - 新增 6 条编辑路由 Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user