portal-site-manage/src/views/home/tabloid/index.vue

<!-- 数据量 -->
<template>
	<div class="pricemoitorrecord">
		<a-card :bordered="false">
			<a-space class="search">
				<div class="silt-title">
					<span style="width: 70px; margin-right: 8px; text-align: right; display: block; line-height: 30px">{{
						'标题'
					}}</span>
					<a-input style="width: 220px" v-model:value="SearchFormDel.newsTitle" placeholder="请输入" />
				</div>
				<div class="silt-title">
					<span style="width: 70px; margin-right: 8px; text-align: right; display: block; line-height: 30px">{{
						'状态'
					}}</span>

					<a-select style="width: 220px" v-model:value="SearchFormDel.status">
						<a-select-option :value="3">禁用</a-select-option>
						<a-select-option :value="2">启用</a-select-option>
						<a-select-option :value="1">保存</a-select-option>
					</a-select>
				</div>
				<div class="btnBox">
					<a-button type="primary" class="primarySele" @click="Search"> 查询 </a-button>
					<a-button class="primarySele snowy-buttom-left" @click="onReset"> 重置 </a-button>
					<a-button type="primary" class="primarySele" @click="onView('add', {})"> 新增 </a-button>
					<a-button
						class="btnl colro primarySele"
						type="primary"
						:disabled="!hasSelected"
						:loading="state.loading"
						@click="start"
					>
						批量操作(启用/禁用)
					</a-button>
				</div>
			</a-space>
		</a-card>

		<div class="list" style="margin-top: 10px">
			<a-table
				:data-source="tableData"
				:pagination="pagination"
				:columns="tableColumns"
				:row-key="(record) => record"
				:row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
			>
				<template #bodyCell="{ column, record }">
					<template v-if="column.dataIndex === 'status'">
						<div class="switch_del">
							<a-switch
								v-if="record.status !== 1"
								:checked="record.status == 2 ? true : false"
								:checked-children="'启用'"
								:un-checked-children="'禁用'"
								@change="handleSwitchChange(record)"
								size="default"
							/>
							<a-switch
								v-if="record.status == 1"
								:checked="record.status == 1 ? false : true"
								:checked-children="'启用'"
								:un-checked-children="'保存'"
								@change="handleSwitchChange(record)"
								size="default"
							/>
						</div>
					</template>
					<template v-if="column.dataIndex === 'createUser'">
						{{ cocDLMXS(record.createUser) }}
					</template>
					<template v-if="column.key === '操作'">
						<a-button type="link" @click="onView('view', record)">查看</a-button>
						<a-button type="link" @click="onView('edit', record)">编辑</a-button>
						<a-popconfirm title="确定要删除吗？" @confirm="onView('del', record)">
							<a-button type="link">删除</a-button>
						</a-popconfirm>
					</template>
				</template>
			</a-table>
		</div>
	</div>
	<Form ref="formRef" @successful="tableRef.refresh()" @change="change" />
</template>
<script setup name="sharing">
	import business from '@/api/home/home.js'
	import { listPagination } from '@/hook/listlistPagination.js'
	import { reactive, ref } from 'vue'
	import { useRouter } from 'vue-router'
	import { defineComponent } from 'vue'
	import { message } from 'ant-design-vue'
	import Form from './form.vue'
	import { enumMap } from '@/hook/enumMap.js'
	const { cocDLMXS } = enumMap()
	const formRef = ref(null)
	const router = useRouter()

	const tableColumns = [
		{
			title: '序号',
			dataIndex: 'INDEX',
			align: 'center',
			customRender: ({ text, record, index }) => {
				return `${index + 1}`
			}
		},
		{ title: '标题', align: 'center', dataIndex: 'newsTitle' },
		{ title: '来源', align: 'center', dataIndex: 'newsSource' },
		{ title: '状态', align: 'center', dataIndex: 'status' },
		{ title: '发布人', align: 'center', dataIndex: 'createUser' },
		{ title: '发布时间', align: 'center', dataIndex: 'publishTime' },
		{ title: '操作', align: 'center', key: '操作' }
	]

	//共享
	const handleSwitchChange = async (v) => {
		if (v.status == 1) {
			const res = await business.IMGXWbatchUpdateStatus([{ id: v.id, status: 2 }])
		} else if (v.status == 2) {
			const res = await business.IMGXWbatchUpdateStatus([{ id: v.id, status: 3 }])
		} else if (v.status == 3) {
			const res = await business.IMGXWbatchUpdateStatus([{ id: v.id, status: 2 }])
		}
		message.success('操作成功')
		await onSearch()
	}

	const state = reactive({
		selectedRowKeys: [],
		loading: false
	})
	const hasSelected = computed(() => state.selectedRowKeys.length > 0)
	const start = async () => {
		state.loading = true
		state.selectedRowKeys = []
		const res = await business.IMGXWbatchUpdateStatus(del.value)
		setTimeout(() => {
			state.loading = false
			message.success('操作成功')
			onSearch()
		}, 300)
	}
	const del = ref([])
	const onSelectChange = (selectedRowKeys) => {
		state.selectedRowKeys = []
		del.value = []
		state.selectedRowKeys = selectedRowKeys
		del.value = state.selectedRowKeys.map((item) => {
			return {
				id: item.id,
				status: item.status === 1 ? 2 : item.status === 2 ? 3 : 2
			}
		})
		console.log(del.value)
	}

	const { DEl, change, tableData, onSearch, handlePageChange, pagination, Search, onReset, SearchFormDel } =
		listPagination({ newsTitle: '', status: '' }, business.IMGXWlist, business.IMGXWdelete, {
			sortOrder: 'ASCEND'
		})

	const onView = (record, row) => {
		switch (record) {
			case 'add':
				formRef.value.onOpen(record, true, false)
				break
			case 'del':
				DEl(row)
				break
			case 'view':
				formRef.value.onOpen(record, true, true, row)
				break
			case 'edit':
				formRef.value.onOpen(record, true, false, row)
				break
			default:
				break
		}
	}
</script>
<style lang="less" scoped>
	.search {
		padding-top: 20px;
		// padding-left: 50px;
		margin-bottom: 32px;
		.btnBox {
			width: 100%;
			display: inline-block;
			display: flex;
			justify-content: space-around;
			align-items: center;
			.primarySele {
				margin-left: 20px;
				margin-right: 20px;
			}
		}
	}
	.silt-title {
		display: flex;
	}
	.switch_del {
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>