OnlineEducation-student-front/src/views/myResource/components/SensitiveList.vue

<template>
	<div>
		<a-button-group class="create-operate-group">
			<a-button size="small" type="primary" id="uploadFileId" class="btnsy" @click="add">新增</a-button>
		</a-button-group>

		<a-table :columns="columns" :data-source="tableData" :pagination="false" style="width: 100%">
			<template #bodyCell="{ column, record }">
				<template v-if="column.key === 'action'">
					<a-button type="link" size="small" @click="handleEdit(record)">编辑</a-button>
					<a-button type="link" size="small" @click="handleDelete(record)" style="color: #f56c6c">删除</a-button>
				</template>
			</template>
		</a-table>
	</div>
</template>

<script setup>
	import { ref, onMounted } from 'vue'
	import { Modal, message } from 'ant-design-vue'
	import { addSensitiveList, updateSensitiveList, delSensitiveList } from '@/api/myResource/file' // 假设路径为 '@/api/myResource/file'

	const props = defineProps({
		tableData: {
			required: true,
			type: Array
		}
	})

	const emit = defineEmits(['addSensitiveSuccess'])

	const columns = [
		{
			title: '敏感词',
			dataIndex: 'word',
			key: 'word'
		},
		{
			title: '操作',
			key: 'action',
			fixed: 'right',
			width: 150
		}
	]

	const add = () => {
		Modal.confirm({
			title: '请输入敏感词',
			content: '敏感词不能为空',
			maskClosable: true,
			onOk(inputValue) {
				if (!inputValue) {
					message.error('敏感词不能为空')
					return Promise.reject()
				}
				return addSensitiveList({
					word: inputValue
				})
					.then((res) => {
						if (res.code === 0) {
							message.success('新增敏感词成功')
							emit('addSensitiveSuccess')
						} else {
							message.error(res.message || '新增失败')
							return Promise.reject()
						}
					})
					.catch((err) => {
						message.error(JSON.stringify(err))
						return Promise.reject()
					})
			},
			onCancel() {
				// 用户取消操作
			}
		})
	}

	const handleEdit = (row) => {
		Modal.confirm({
			title: '请输入敏感词',
			content: '敏感词不能为空',
			maskClosable: true,
			defaultInputValue: row.word,
			onOk(inputValue) {
				if (!inputValue) {
					message.error('敏感词不能为空')
					return Promise.reject()
				}
				return updateSensitiveList({
					id: row.id,
					word: inputValue
				})
					.then((res) => {
						if (res.code === 0) {
							message.success('修改敏感词成功')
							emit('addSensitiveSuccess')
						} else {
							message.error(res.message || '修改失败')
							return Promise.reject()
						}
					})
					.catch((err) => {
						message.error(JSON.stringify(err))
						return Promise.reject()
					})
			},
			onCancel() {
				// 用户取消操作
			}
		})
	}

	const handleDelete = (row) => {
		Modal.confirm({
			title: '确定删除该敏感词吗？',
			onOk() {
				return delSensitiveList(row.id)
					.then((res) => {
						if (res.code === 0) {
							message.success('删除敏感词成功')
							emit('addSensitiveSuccess')
						} else {
							message.error(res.message || '删除失败')
							return Promise.reject()
						}
					})
					.catch((err) => {
						message.error(JSON.stringify(err))
						return Promise.reject()
					})
			},
			onCancel() {
				// 用户取消操作
			}
		})
	}

	onMounted(() => {
		// 初始化逻辑
	})
</script>

<style lang="less" scoped>
	.btnsy {
		background-color: #29175b;
		border-color: #29175b;
	}

	:deep(.ant-modal-content) {
		.sensitive-prompt-input {
			max-width: calc(100% + 0.1px);
		}
	}
</style>