antissoft / HongHua-JJ

<template>
	<div class="related-list-container">
		<div class="NCC-common-head">
			<div>
				<el-button type="primary" icon="el-icon-plus" @click="addOrUpdateHandle()">新增</el-button>
			</div>
			<div class="NCC-common-head-right">
				<el-tooltip effect="dark" content="刷新" placement="top">
					<el-link icon="icon-ym icon-ym-Refresh NCC-common-head-icon" :underline="false" @click="initData()" />
				</el-tooltip>
			</div>
		</div>
		<NCC-table v-loading="listLoading" :data="list">
			<el-table-column type="index" label="序号" width="55" align="center" :index="indexMethod" />
			<el-table-column prop="sssb" label="关联产品" align="left">
				<template slot-scope="scope">
					{{ getProductName(scope.row.sssb) }}
				</template>
			</el-table-column>
			<el-table-column prop="xwgy" label="新闻概要" align="left" min-width="160" show-overflow-tooltip>
				<template slot-scope="scope">
					{{ scope.row.xwgy || '--' }}
				</template>
			</el-table-column>
			<el-table-column prop="fbsj" label="发布时间" align="left" width="120">
				<template slot-scope="scope">
					{{ scope.row.fbsj | dateFormat('YYYY-MM-DD') }}
				</template>
			</el-table-column>
			<el-table-column prop="creatorUser" label="创建用户" align="left" width="100" />
			<el-table-column prop="xwfl" label="新闻分类" align="left" width="110">
				<template slot-scope="scope">
					{{ getXwflName(scope.row.xwfl) }}
				</template>
			</el-table-column>
			<el-table-column label="操作" fixed="right" width="100">
				<template slot-scope="scope">
					<el-button type="text" @click="addOrUpdateHandle(scope.row.id)">编辑</el-button>
					<el-button type="text" @click="handleDel(scope.row.id)" class="NCC-table-delBtn">删除</el-button>
				</template>
			</el-table-column>
		</NCC-table>
		<pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="initData" />
		<NCC-Form v-if="formVisible" ref="NCCForm" @refresh="refresh" />
	</div>
</template>

<script>
import request from '@/utils/request'
import NCCForm from '@/views/xccpgl/Form'

export default {
	name: 'XccpglList',
	components: { NCCForm },
	props: {
		productId: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			list: [],
			listLoading: false,
			total: 0,
			listQuery: {
				currentPage: 1,
				pageSize: 20,
				sort: "desc",
				sidx: "",
			},
			formVisible: false,
			cpglOptions: []
		}
	},
	watch: {
		productId: {
			immediate: true,
			handler() {
				if (this.productId) {
					this.initData()
				}
			}
		}
	},
	created() {
		this.getCpglOptions()
	},
	methods: {
		getCpglOptions() {
			request({
				url: '/api/Extend/Cpgl',
				method: 'GET',
				data: { currentPage: 1, pageSize: 1000 }
			}).then(res => {
				this.cpglOptions = res.data.list || []
			}).catch(() => {
				this.cpglOptions = []
			})
		},
		getProductName(productId) {
			if (!productId) return '--';
			const product = this.cpglOptions.find(item => item.id === productId);
			return product ? (product.cpmc || '--') : '--';
		},
		getXwflName(code) {
			const map = { 'xcp': '新产品', 'cpsj': '产品升级', 'xtsj': '系统升级', 'zlgx': '资料更新', 'scdt': '市场动态' };
			return code ? (map[code] || code) : '--';
		},
		indexMethod(index) {
			return (this.listQuery.currentPage - 1) * this.listQuery.pageSize + index + 1;
		},
		stripHtml(html) {
			if (!html) return ''
			const tmp = document.createElement('DIV')
			tmp.innerHTML = html
			return tmp.textContent || tmp.innerText || ''
		},
		initData() {
			if (!this.productId) return
			this.listLoading = true
			let query = {
				...this.listQuery,
				sssb: this.productId // 自动筛选当前产品
			}
			request({
				url: `/api/Extend/Xccpgl`,
				method: 'GET',
				data: query
			}).then(res => {
				this.list = res.data.list || []
				this.total = res.data.pagination ? res.data.pagination.total : 0
				this.listLoading = false
			}).catch(() => {
				this.list = []
				this.total = 0
				this.listLoading = false
			})
		},
		handleDel(id) {
			this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
				type: 'warning'
			}).then(() => {
				request({
					url: `/api/Extend/Xccpgl/${id}`,
					method: 'DELETE'
				}).then(res => {
					this.$message({
						type: 'success',
						message: res.msg,
						onClose: () => {
							this.initData()
						}
					})
				})
			}).catch(() => {})
		},
		addOrUpdateHandle(id) {
			console.log('XccpglList addOrUpdateHandle called with id:', id);
			// 先关闭表单（如果已打开），确保组件重新创建
			this.formVisible = false;
			this.$nextTick(() => {
				this.formVisible = true;
				this.$nextTick(() => {
					if (this.$refs.NCCForm) {
						this.$refs.NCCForm.init(id, false);
					}
				});
			});
		},
		refresh(isrRefresh) {
			this.formVisible = false
			if (isrRefresh) {
				this.initData()
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.related-list-container {
	height: 100%;
	display: flex;
	flex-direction: column;
	
	.NCC-common-head {
		margin-bottom: 10px;
	}
}
</style>