ims-front/src/views/admin/team/team-page.vue

<template>
	<page-container>
		<template #ops>
			<a-row>
				<a-col :span="18">
					<a-input-search
						v-model:value="searchKey"
						:placeholder="`请输入班组名称`"
						allow-clear
						enter-button
						@search="loadData()"
					></a-input-search>
				</a-col>
				<a-col :span="6">
					<a-button type="primary" style="margin-left: 10px" @click="addOrEdit()">
						<template #icon>
							<icon-font type="icon-plus" />
						</template>
						添加
					</a-button>
				</a-col>
			</a-row>
		</template>
		<div style="min-height: calc(100vh - 305px)">
			<a-table
				:columns="columns"
				:data-source="teamPage?.records"
				bordered
				:pagination="pagination"
				:loading="loading"
				row-key="id"
			>
				<template #bodyCell="{ column, record }">
					<template v-if="column.dataIndex === 'operation'">
						<a-button type="link" :style="{ color: token.colorPrimary }" @click="addOrEdit(record)">
							<template #icon>
								<icon-font type="icon-edit" />
							</template>
							编辑
						</a-button>
						<a-popconfirm :title="`确定需要删除设备 ${record.name} 吗？`" @confirm="remove(record.id)">
							<a-button type="link" danger style="margin-left: 10px">
								<template #icon>
									<icon-font type="icon-delete" />
								</template>
								删除
							</a-button>
						</a-popconfirm>
					</template>
				</template>
			</a-table>
		</div>
	</page-container>
	<form-drawer
		ref="formDrawer"
		v-model="team"
		:form-items="items"
		:config="formConfig"
		:title="modalTitle"
		@ok="doSave"
	/>
</template>

<script setup lang="ts">
	import FormDrawer from '@/components/form-render/form-drawer.vue'

	import api from '@/api'
	import { IPage } from '@/api/api'
	import { config, formItems } from './form'
	import { FormDataType } from '@/components/form-render/form-render-types'
	import { notification, theme } from 'ant-design-vue/es'
	const { useToken } = theme
	const { token } = useToken()
	const searchKey = ref('')

	const teamPage = ref<IPage<station.Team>>()
	const loading = ref(false)
	const loadData = async (page = 1, size = 10) => {
		loading.value = true
		api.stationApi.team.teams(
			{ page: page || teamPage.value?.current, size: size || teamPage.value?.size, key: searchKey.value },
			(data) => {
				loading.value = false
				teamPage.value = data
			},
		)
	}

	loadData()

	//表格列
	const columns = [
		{
			title: '班组名称',
			dataIndex: 'name',
		},
		{
			title: '开始时间',
			dataIndex: 'start',
		},
		{
			title: '结束时间',
			dataIndex: 'end',
		},

		{
			title: '操作',
			dataIndex: 'operation',
			width: 400,
		},
	]

	//分页信息
	const pagination = computed(() => {
		return {
			current: teamPage.value?.current,
			pageSize: teamPage.value?.size,
			total: teamPage.value?.total,
			onChange: (page: number, pageSize: number) => {
				loadData(page, pageSize)
			},
		}
	})

	const team = ref<Partial<station.Team>>({})
	//表单
	const formDrawer = ref<typeof FormDrawer>()

	const formConfig = computed(() => {
		return config
	})
	//表单配置
	const items = computed(() => {
		return formItems
	})

	//弹窗标题
	const modalTitle = computed(() => {
		return team.value.id ? '编辑班组' : '添加班组'
	})

	const addOrEdit = (u?: Record<string, unknown>) => {
		team.value = { ...u }
		formDrawer.value?.show()
	}

	const doSave = (_data: FormDataType) => {
		const f = team.value.id ? api.stationApi.team.update : api.stationApi.team.add
		f(_data as unknown as station.Team, () => {
			formDrawer.value?.close()
			notification.success({
				message: '操作成功',
				description: '班组信息保存成功,页面将自动刷新!',
				onClose: () => {
					loadData(1)
				},
			})
		})
	}

	const remove = (id: number) => {
		api.stationApi.team.deleteTeam(id, () => {
			notification.success({
				message: '操作成功',
				description: '班组信息删除成功,页面将自动刷新!',
				onClose: () => {
					loadData(1)
				},
			})
		})
	}
</script>