109 lines
5.9 KiB
Vue
109 lines
5.9 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
import api from '@/api/index'
|
|
|
|
const router = useRouter()
|
|
const loading = ref(false)
|
|
const searchText = ref('')
|
|
const page = ref(1)
|
|
const pageSize = ref(25)
|
|
const total = ref(0)
|
|
const items = ref<any[]>([])
|
|
|
|
onMounted(loadItems)
|
|
|
|
async function loadItems() {
|
|
loading.value = true
|
|
try {
|
|
const params: any = { page: page.value, page_size: pageSize.value }
|
|
if (searchText.value) params.search = searchText.value
|
|
const res = await api.get('/work-plans/', { params })
|
|
const raw = Array.isArray(res.data) ? res.data : (res.data.items || [])
|
|
items.value = raw; total.value = res.data.total || raw.length
|
|
} catch (_) {}
|
|
finally { loading.value = false }
|
|
}
|
|
|
|
function onSearch() { page.value = 1; loadItems() }
|
|
|
|
async function handleDelete(id: string) {
|
|
try {
|
|
await ElMessageBox.confirm('确定删除？', '确认', { type: 'warning' })
|
|
await api.delete(`/work-plans/${id}`)
|
|
ElMessage.success('已删除')
|
|
await loadItems()
|
|
} catch (e: any) { if (e !== 'cancel') ElMessage.error('删除失败') }
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="list-page">
|
|
<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">WORK PLANS</span></div>
|
|
<div class="form-rule"></div>
|
|
</header>
|
|
|
|
<button class="new-btn" @click="router.push('/m/work-plan/new')">+ 新建计划</button>
|
|
|
|
<div style="margin-bottom:12px;display:flex;gap:8px">
|
|
<el-input v-model="searchText" placeholder="搜索..." clearable @keyup.enter="onSearch" @clear="onSearch" />
|
|
<el-button @click="onSearch">搜索</el-button>
|
|
</div>
|
|
|
|
<div 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" @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">
|
|
<span class="card-status" :style="{ color: item.status === '已完成' ? '#4A6741' : item.status === '已取消' ? '#B8472E' : '#C4934A' }">{{ item.status }}</span>
|
|
<span class="card-date">{{ item.plan_date }}</span>
|
|
</div>
|
|
<div class="card-content">{{ item.plan_content }}</div>
|
|
<div class="card-footer">
|
|
<span class="card-customer">{{ item.customer_name }}</span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<div v-if="total > pageSize" style="display:flex;justify-content:center;margin-top:14px">
|
|
<el-pagination v-model:current-page="page" :page-size="pageSize" :total="total" layout="prev, pager, next" small @current-change="loadItems" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.list-page { max-width: 100%; padding-bottom: 20px; }
|
|
.form-editorial-header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; 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); }
|
|
.new-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; background: var(--ink); color: #fff; border: none; font-family: var(--font-heading); font-size: 15px; letter-spacing: 0.06em; cursor: pointer; transition: all 0.25s; margin-bottom: 18px; }
|
|
.new-btn:hover { background: var(--ink-light); }
|
|
.new-btn:active { transform: scale(0.98); }
|
|
.cards { display: flex; flex-direction: column; gap: 10px; }
|
|
.card { background: var(--surface); border: 1px solid var(--warm-border); display: flex; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }
|
|
.card:active { transform: scale(0.99); }
|
|
.card:hover { box-shadow: 0 4px 12px rgba(28,55,56,0.06); }
|
|
.card-accent { width: 4px; flex-shrink: 0; }
|
|
.card-body { flex: 1; padding: 14px 16px; min-width: 0; }
|
|
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
|
|
.card-status { font-family: var(--font-heading); font-size: 13px; }
|
|
.card-date { font-family: var(--font-mono); font-size: 12px; color: var(--warm-gray); }
|
|
.card-content { font-family: var(--font-body); font-size: 14px; color: var(--ink); margin-bottom: 6px; line-height: 1.5; }
|
|
.card-footer { display: flex; align-items: center; justify-content: space-between; }
|
|
.card-customer { font-size: 12px; color: var(--warm-gray); }
|
|
.empty-state { text-align: center; padding: 48px 0; }
|
|
.empty-glyph { font-family: var(--font-heading); font-size: 40px; color: var(--gold); opacity: 0.4; margin-bottom: 8px; }
|
|
.empty-text { font-family: var(--font-body); font-size: 15px; color: var(--warm-gray); margin: 0; }
|
|
</style>
|