light-databoard/src/views/AssetCategoryView.vue

<template>
  <div class="asset-category-page">
    <!-- 顶部筛选区 -->
    <el-card class="table-card">
      <el-form :inline="true" :model="filters" size="small" class="filter-form">
        <el-form-item label="关键词">
          <el-input v-model="filters.keyword" placeholder="请输入分类名称" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="fetchList">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="openAddDialog">新增分类</el-button>
        </el-form-item>
      </el-form>
  
      <el-table
        :data="tableData"
        border
        style="width: 100%;"
      >
        <el-table-column prop="markTypeId" label="分类ID" min-width="80" />
        <el-table-column prop="markTypeName" label="分类名称" min-width="160" />
        <el-table-column label="操作" min-width="180">
          <template #default="{ row }">
            <el-button size="small" type="warning" @click.stop="openEditDialog(row)">编辑</el-button>
            <el-button size="small" type="danger" @click.stop="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin: 16px 0 0; text-align: right"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :page-size="pageSize"
        :current-page="currentPage"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 50, 100]"
      />
    </el-card>

    <!-- 新增/编辑弹窗 -->
    <el-dialog v-model="showDialog" :title="dialogType==='add'?'新增分类':'编辑分类'" width="400px">
      <el-form :model="form" label-width="100px">
        <el-form-item label="分类名称" required>
          <el-input v-model="form.markTypeName" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showDialog=false">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import rpc from '../utils/rpc'

const tableData = ref<any[]>([])
const showDialog = ref(false)
const dialogType = ref<'add'|'edit'>('add')
const form = reactive<any>({})
const filters = reactive({ keyword: '' })
const total = ref(0)
const pageSize = ref(20)
const currentPage = ref(1)
const allData = ref<any[]>([])

const fetchList = async () => {
  const params: any = {
    page: currentPage.value,
    limit: pageSize.value,
    orderby: [{ mark_type_id: 'desc' }]
  }
  if (filters.keyword) {
    params.like = { mark_type_name: ['%' + filters.keyword + '%'] }
  }
  const res = await rpc.post('/markType/list', params)
  const rows = res?.rows || []
  total.value = res?.count || rows.length
  tableData.value = rows
}

const openAddDialog = () => {
  dialogType.value = 'add'
  showDialog.value = true
  Object.assign(form, { markTypeName: '' })
}

const openEditDialog = (row: any) => {
  dialogType.value = 'edit'
  showDialog.value = true
  Object.assign(form, { ...row })
}

const handleDelete = (row: any) => {
  ElMessageBox.confirm('确定删除该分类吗？', '提示', { type: 'warning' })
    .then(async () => {
      await rpc.post('/markType/delete', { markTypeId: row.markTypeId })
      ElMessage.success('删除成功')
      fetchList()
    })
    .catch(() => {})
}

const submitForm = async () => {
  if (!form.markTypeName) {
    ElMessage.error('请输入分类名称')
    return
  }
  if (dialogType.value === 'add') {
    await rpc.post('/markType/create', { markTypeName: form.markTypeName })
    ElMessage.success('新增成功')
  } else {
    await rpc.post('/markType/update', { markTypeId: form.markTypeId, markTypeName: form.markTypeName })
    ElMessage.success('编辑成功')
  }
  showDialog.value = false
  fetchList()
}

const handleSizeChange = (size: number) => {
  pageSize.value = size
  fetchList()
}
const handleCurrentChange = (page: number) => {
  currentPage.value = page
  fetchList()
}

onMounted(() => {
  fetchList()
})
</script>

<style scoped>
.asset-category-page {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #041236 0%, #02081A 100%);
  display: flex;
  flex-direction: column;
  padding: 20px;
  box-sizing: border-box;
}
.filter-card {
  background: transparent;
  border: none;
  box-shadow: none;
  margin-bottom: 16px;
  padding: 0;
}
.filter-form {
  padding: 0 0 8px 0;
}
.table-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: rgba(4, 26, 71, 0.7);
  border-radius: 8px;
  box-shadow: 0 0 20px #0003;
  padding: 0 0 16px 0;
}
.el-table {
  background: transparent;
  color: #e6f7ff;
}
.el-table th {
  background: #002140;
  color: #6eeaff;
  font-weight: bold;
  font-size: 15px;
}
.el-table .el-button {
  box-shadow: 0 0 8px #00c3ff88;
  border-radius: 4px;
}
.el-pagination {
  margin-top: 16px;
}
</style>