116 lines
2.6 KiB
Vue
116 lines
2.6 KiB
Vue
|
<script setup>
|
||
|
|
import { ref } from 'vue'
|
||
|
|
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
|
||
|
|
import { Table, Modal } from 'ant-design-vue'
|
||
|
|
|
||
|
|
const dataSource = ref([
|
||
|
|
{
|
||
|
|
id: 1,
|
||
|
|
title: '电商平台',
|
||
|
|
category: 'Web应用',
|
||
|
|
tags: ['Vue3', 'Node.js'],
|
||
|
|
author: 'Admin',
|
||
|
|
createdAt: '2024-03-20'
|
||
|
|
}
|
||
|
|
])
|
||
|
|
|
||
|
|
const columns = [
|
||
|
|
{
|
||
|
|
title: '项目名称',
|
||
|
|
dataIndex: 'title',
|
||
|
|
key: 'title',
|
||
|
|
width: 200,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '分类',
|
||
|
|
dataIndex: 'category',
|
||
|
|
key: 'category',
|
||
|
|
width: 120,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '标签',
|
||
|
|
key: 'tags',
|
||
|
|
customRender: ({ text }) => text.join(', ')
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '操作',
|
||
|
|
key: 'action',
|
||
|
|
fixed: 'right',
|
||
|
|
width: 120,
|
||
|
|
slots: { customRender: 'action' }
|
||
|
|
}
|
||
|
|
]
|
||
|
|
|
||
|
|
const visible = ref(false)
|
||
|
|
const currentItem = ref(null)
|
||
|
|
|
||
|
|
const showModal = (item = null) => {
|
||
|
|
currentItem.value = item || { tags: [] }
|
||
|
|
visible.value = true
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleDelete = (id) => {
|
||
|
|
Modal.confirm({
|
||
|
|
title: '确认删除',
|
||
|
|
content: '确定要删除这个项目吗？',
|
||
|
|
onOk: () => {
|
||
|
|
dataSource.value = dataSource.value.filter(item => item.id !== id)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="bg-white p-6 rounded-lg">
|
||
|
|
<div class="mb-4 flex justify-between items-center">
|
||
|
|
<h2 class="text-xl font-semibold">项目管理</h2>
|
||
|
|
<a-button type="primary" @click="showModal">
|
||
|
|
<template #icon><PlusOutlined /></template>
|
||
|
|
新建项目
|
||
|
|
</a-button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<a-table
|
||
|
|
:columns="columns"
|
||
|
|
:data-source="dataSource"
|
||
|
|
:scroll="{ x: 800 }"
|
||
|
|
bordered
|
||
|
|
>
|
||
|
|
<template #action="{ record }">
|
||
|
|
<a-space>
|
||
|
|
<a-tooltip title="编辑">
|
||
|
|
<a-button type="link" @click="showModal(record)">
|
||
|
|
<EditOutlined />
|
||
|
|
</a-button>
|
||
|
|
</a-tooltip>
|
||
|
|
<a-tooltip title="删除">
|
||
|
|
<a-button type="link" danger @click="handleDelete(record.id)">
|
||
|
|
<DeleteOutlined />
|
||
|
|
</a-button>
|
||
|
|
</a-tooltip>
|
||
|
|
</a-space>
|
||
|
|
</template>
|
||
|
|
</a-table>
|
||
|
|
|
||
|
|
<a-modal
|
||
|
|
v-model:visible="visible"
|
||
|
|
:title="currentItem.id ? '编辑项目' : '新建项目'"
|
||
|
|
width="800px"
|
||
|
|
>
|
||
|
|
<!-- 项目表单内容 -->
|
||
|
|
<template #footer>
|
||
|
|
<a-button @click="visible = false">取消</a-button>
|
||
|
|
<a-button type="primary">确认</a-button>
|
||
|
|
</template>
|
||
|
|
</a-modal>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
:deep(.ant-table-thead > tr > th) {
|
||
|
|
@apply bg-gray-50;
|
||
|
|
}
|
||
|
|
:deep(.ant-table-tbody > tr:hover td) {
|
||
|
|
@apply bg-gray-100;
|
||
|
|
}
|
||
|
|
</style>
|