qiji/frontend/src/views/mobile/WorkPlanForm.vue

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { todayStr } from '@/utils'
import { workPlansApi } from '@/api/workPlans'
import { customersApi } from '@/api/customers'

const router = useRouter()
const submitLoading = ref(false)
const customers = ref<any[]>([])

const form = ref({
  customer_id: '',
  plan_content: '',
  plan_date: todayStr(),
  status: '计划中',
})

onMounted(() => { loadCustomers() })

async function loadCustomers(q?: string) {
  try {
    const params: any = { page_size: 100 }
    if (q) params.search = q
    const res = await customersApi.list(params)
    customers.value = res.data.items || []
  } catch (_) {}
}

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')
  } catch (e: any) {
    ElMessage.error('提交失败')
  } finally { submitLoading.value = false }
}
</script>

<template>
  <div class="form-page">
    <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>
        <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>
        <template #label><span class="form-label">计划拜访时间</span></template>
        <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>
    </el-form>
  </div>
</template>

<style scoped>
.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: var(--font-heading);
  font-size: 24px; font-weight: 400; color: var(--ink);
  letter-spacing: 0.06em; line-height: 1.3;
}

.form-subtitle {
  font-family: var(--font-mono);
  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: var(--font-heading) !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: var(--font-heading);
  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>