jfcloud-coldchain/snowy-admin-web/src/views/basicset/monitor/scrap.vue

<template>
	<div class="table_item">
		<s-table ref="tableRef" :columns="columns" :data="loadData" :row-key="(record) => record.code" bordered>
			<template #operator>
				<!-- 搜索区域 -->
				<div class="table-search">
					<div class="table-search-form">
						<a-row :gutter="10">
							<a-form
								ref="searchFormRef"
								name="advanced_search"
								layout="inline"
								:label-col="{ style: { width: '70px', justifyContent: 'end' } }"
								:model="searchFormState"
								class="ant-advanced-search-form"
							>
								<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8"
									><a-form-item label="对象编号" name="dxcode">
										<a-input v-model:value="searchFormState.dxcode" placeholder="请输入对象编号" /> </a-form-item
								></a-col>
								<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8"
									><a-form-item label="对象名称" name="name">
										<a-input v-model:value="searchFormState.name" placeholder="请输入对象名称" /> </a-form-item
								></a-col>
							</a-form>
						</a-row>
					</div>
					<div class="table-search-buttons">
						<a-button type="primary" @click="tableRef.refresh(true)">查询</a-button>
						<a-button class="xn-mg08" @click="reset">重置</a-button>
					</div>
				</div>

				<!-- 其他操作区域 -->
				<div class="table-head-btn">
					<div class="btn-left">
						<a-button type="primary">
							<template #icon><plus-outlined /></template>新增
						</a-button>
					</div>
					<div class="btn-right">
						<a-button>
							<template #icon><download-outlined /></template>导出
						</a-button>
					</div>
				</div>
			</template>
			<template #bodyCell="{ column, record, index }">
				<!-- 序号 -->
				<template v-if="column.dataIndex === 'index'">{{ index + 1 }} </template>
				<template v-if="column.dataIndex === 'sfxf'">
					<span>
						<a-tag :color="record.sfxf == '1' ? '#87d068' : '#cd201f'">
							{{ record.sfxf == '1' ? '是' : '否' }}
						</a-tag>
					</span>
				</template>
				<template v-if="column.dataIndex === 'action'">
					<a-button type="link" size="small">编辑</a-button>
					<a-popconfirm title="确定要删除吗？" @confirm="deleteData(record)">
						<a-button type="link" danger size="small">删除</a-button>
					</a-popconfirm>
					<a-button type="link" size="small">记录</a-button>
				</template>
			</template>
		</s-table>
	</div>
</template>

<script setup>
	import tool from '@/utils/tool'
	import jobApi from '@/api/dev/jobApi'
	const searchFormRef = ref()
	const searchFormState = ref({})
	const tableRef = ref()
	const columns = [
		{
			title: '序号',
			dataIndex: 'index',
			align: 'center',
			width: 50
		},
		{
			title: '对象编号',
			dataIndex: 'code',
			align: 'center',
			ellipsis: true
		},
		{
			title: '对象名称',
			dataIndex: 'name',
			align: 'center',
			ellipsis: true
		},
		{
			title: '品牌',
			dataIndex: 'pp',
			align: 'center',
			ellipsis: true
		},
		{
			title: '规则型号',
			dataIndex: 'gzxh',
			align: 'center',
			ellipsis: true
		},
		{
			title: '所处位置',
			dataIndex: 'scwz',
			align: 'center',
			ellipsis: true
		},
		{
			title: '设备折旧',
			dataIndex: 'sbzj',
			align: 'center',
			ellipsis: true
		},
		{
			title: '设备净值',
			dataIndex: 'wxrq',
			align: 'center',
			ellipsis: true
		},

		{
			title: '单位负责人确认时间',
			dataIndex: 'dwfzrqrsj',
			align: 'center',
			ellipsis: true
		},
		{
			title: '单位负责人',
			dataIndex: 'dwfzr',
			align: 'center',
			ellipsis: true
		},
		{
			title: '检验部门负责人确认时间',
			dataIndex: 'jybmfzrqrsj',
			align: 'center',
			ellipsis: true
		},
		{
			title: '检验部门负责人',
			dataIndex: 'jybmfzr',
			align: 'center',
			ellipsis: true
		},
		{
			title: '报废时间',
			dataIndex: 'bfsj',
			align: 'center',
			ellipsis: true
		},
		{
			title: '报废理由',
			dataIndex: 'bfly',
			align: 'center',
			ellipsis: true
		},
		{
			title: '操作',
			dataIndex: 'action',
			align: 'center',
			width: 150
		}
	]

	const loadData = (parameter) => {
		return jobApi.jobPage(Object.assign(parameter, searchFormState.value)).then((res) => {
			// return res
			const obj = {
				current: 1,
				pages: 1,
				records: [
					{
						code: 'Y6578945621',
						name: 'ABSL-1超低温冰箱',
						pp: '海尔1',
						dwfzrqrsj: 'HEGZXH-202411120920',
						scwz: '实验室一号楼301室',
						sbzj: '',
						wxrq: '',
						shrq: '2024-09-28 01:03:24',
						dwfzr: '欧阳天添',
						jybmfzrqrsj: '2024-09-30 11:51:02',
						jybmfzr: '欧阳天添',
						bfsj: '2024-09-30 11:51:02',
						bfly: '报废'
					},
					{
						code: 'Y6578945622',
						name: 'ABSL-2超低温冰箱',
						pp: '海尔',
						dwfzrqrsj: 'HEGZXH-202411120920',
						scwz: '实验室一号楼302室',
						sbzj: '',
						wxrq: '',
						shrq: '2024-09-28 02:03:24',
						dwfzr: '欧阳天添',
						jybmfzrqrsj: '2024-09-30 11:51:02',
						jybmfzr: '欧阳天添',
						bfsj: '2024-09-30 11:51:02',
						bfly: '报废'
					},
					{
						code: 'Y6578945623',
						name: 'ABSL-3超低温冰箱',
						pp: '海尔',
						dwfzrqrsj: 'HEGZXH-202411120920',
						scwz: '实验室一号楼303室',
						sbzj: '',
						wxrq: '',
						shrq: '2024-09-28 03:03:24',
						dwfzr: '欧阳天添',
						jybmfzrqrsj: '2024-09-30 11:51:02',
						jybmfzr: '欧阳天添',
						bfsj: '2024-09-30 11:51:02',
						bfly: '报废'
					},
					{
						code: 'Y6578945624',
						name: 'ABSL-4超低温冰箱',
						pp: '海尔',
						dwfzrqrsj: 'HEGZXH-202411120920',
						scwz: '实验室一号楼304室',
						sbzj: '',
						wxrq: '',
						shrq: '2024-09-28 04:03:24',
						dwfzr: '欧阳天添',
						jybmfzrqrsj: '2024-09-30 11:51:02',
						jybmfzr: '欧阳天添',
						bfsj: '2024-09-30 11:51:02',
						bfly: '报废'
					},
					{
						code: 'Y6578945625',
						name: 'ABSL-5超低温冰箱',
						pp: '海尔',
						dwfzrqrsj: 'HEGZXH-202411120920',
						scwz: '实验室一号楼305室',
						sbzj: '',
						wxrq: '',
						shrq: '2024-09-28 05:03:24',
						dwfzr: '欧阳天添',
						jybmfzrqrsj: '2024-09-30 11:51:02',
						jybmfzr: '欧阳天添',
						bfsj: '2024-09-30 11:51:02',
						bfly: '报废'
					},
					{
						code: 'Y6578945626',
						name: 'ABSL-6超低温冰箱',
						pp: '海尔',
						dwfzrqrsj: 'HEGZXH-202411120920',
						scwz: '实验室一号楼306室',
						sbzj: '',
						wxrq: '',
						shrq: '2024-09-28 06:03:24',
						dwfzr: '欧阳天添',
						jybmfzrqrsj: '2024-09-30 11:51:02',
						jybmfzr: '欧阳天添',
						bfsj: '2024-09-30 11:51:02',
						bfly: '报废'
					}
				],
				size: 10,
				total: 6
			}
			return obj
		})
	}
	// 重置
	const reset = () => {
		searchFormRef.value.resetFields()
		tableRef.value.refresh(true)
	}
	// 删除
	const deleteData = (record) => {
		console.log(record, '删除')
	}
</script>

<style lang="less" scoped>
	.table_item {
		padding: 15px 20px;
		:deep(.ant-table-pagination-right) {
			justify-content: center !important;
		}
	}
</style>