rag-local/ui-src/src/views/CaseList.vue

<template>
  <div class="case-page">
    <!-- 操作栏 -->
    <div class="section-head">
      <el-button type="primary" @click="openDialog()">新增案件</el-button>
    </div>

    <!-- 案件列表 -->
    <el-card class="list-card" shadow="never">
      <el-table :data="cases" v-loading="loading" size="default">
        <el-table-column prop="case_number" label="案号" width="160" show-overflow-tooltip />
        <el-table-column prop="title" label="案件名称" min-width="200" show-overflow-tooltip>
          <template #default="{ row }">
            <el-link type="primary" @click="goDetail(row)">{{ row.title }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="case_type" label="类型" width="100" />
        <el-table-column prop="court" label="受理法院" min-width="140" show-overflow-tooltip />
        <el-table-column label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="statusType(row.status)">{{ statusText(row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="创建时间" width="160" />
        <el-table-column label="操作" width="140">
          <template #default="{ row }">
            <el-button link type="primary" @click="goDetail(row)">详情</el-button>
            <el-button link type="danger" @click="removeCase(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination class="page-bar" small layout="prev, pager, next" :total="total"
                     :page-size="pageSize" v-model:current-page="page" @current-change="loadList" />
    </el-card>

    <!-- 新增弹窗 -->
    <el-dialog v-model="dialogVisible" title="新增案件" width="560px">
      <el-form :model="form" label-width="90px">
        <el-form-item label="案件名称" required>
          <el-input v-model="form.title" placeholder="如：张三诉李四合同纠纷案" />
        </el-form-item>
        <el-form-item label="案号">
          <el-input v-model="form.case_number" placeholder="如：（2024）京01民初123号" />
        </el-form-item>
        <el-form-item label="案件类型">
          <el-select v-model="form.case_type" placeholder="选择类型" style="width: 100%">
            <el-option label="民事" value="民事" />
            <el-option label="刑事" value="刑事" />
            <el-option label="行政" value="行政" />
            <el-option label="知识产权" value="知识产权" />
            <el-option label="其他" value="其他" />
          </el-select>
        </el-form-item>
        <el-form-item label="受理法院">
          <el-input v-model="form.court" placeholder="如：北京市第一中级人民法院" />
        </el-form-item>
        <el-form-item label="当事人">
          <el-input v-model="form.parties" type="textarea" :rows="2" placeholder="原告：张三，被告：李四" />
        </el-form-item>
        <el-form-item label="案件描述">
          <el-input v-model="form.description" type="textarea" :rows="3" placeholder="案件基本情况描述" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="saving" @click="save">创建</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { listCases, saveCase, deleteCase } from '../api/case.js'

const router = useRouter()
const cases = ref([])
const loading = ref(false)
const total = ref(0)
const page = ref(1)
const pageSize = 20

const dialogVisible = ref(false)
const saving = ref(false)
const form = ref({ title: '', case_number: '', case_type: '', court: '', parties: '', description: '', dataset_ids: '', status: 0 })

onMounted(() => loadList())

function statusText(s) { return ['待处理', '进行中', '已结案', '已归档'][s] || '-' }
function statusType(s) { return ['info', 'warning', 'success', 'info'][s] || 'info' }

async function loadList() {
  loading.value = true
  try {
    const r = await listCases({ page: page.value, page_size: pageSize })
    if (r && r.list) {
      cases.value = r.list
      total.value = r.total
    }
  } finally {
    loading.value = false
  }
}

function openDialog() {
  form.value = { title: '', case_number: '', case_type: '', court: '', parties: '', description: '', dataset_ids: '', status: 0 }
  dialogVisible.value = true
}

async function save() {
  if (!form.value.title.trim()) {
    ElMessage.warning('请填写案件名称')
    return
  }
  saving.value = true
  try {
    await saveCase(form.value)
    ElMessage.success('创建成功')
    dialogVisible.value = false
    await loadList()
  } finally {
    saving.value = false
  }
}

async function removeCase(row) {
  try {
    await ElMessageBox.confirm(`删除案例「${row.title}」？`, '删除确认', { type: 'warning' })
  } catch { return }
  await deleteCase(row.id)
  ElMessage.success('已删除')
  await loadList()
}

function goDetail(row) {
  router.push(`/cases/${row.id}`)
}
</script>

<style scoped>
.case-page {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  overflow: hidden;
}
.section-head {
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}
.list-card {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
:deep(.el-card__body) {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
:deep(.el-table) {
  flex: 1;
  overflow: hidden;
}
:deep(.el-table__body-wrapper) {
  overflow-y: auto;
}
.page-bar {
  margin-top: 10px;
  justify-content: flex-end;
  flex-shrink: 0;
}
</style>