antissoft / lvqianmeiye_ERP

<template>
	<el-dialog 
		title="成员管理" 
		:visible.sync="visible" 
		width="900px" 
		:close-on-click-modal="false"
		@close="handleClose">
		
		<div class="member-dialog">
			<!-- 操作栏 -->
			<div class="member-toolbar">
				<el-button type="primary" icon="el-icon-plus" @click="addMember" size="small">添加成员</el-button>
				<el-button type="warning" icon="el-icon-refresh" @click="refreshMembers" size="small">刷新</el-button>
				<el-button type="success" icon="el-icon-check" @click="saveAll" size="small">保存全部</el-button>
				<span class="member-count">共 {{ members.length }} 人</span>
			</div>
			
			<!-- 成员列表 -->
			<el-table :data="members" border style="width: 100%; margin-top: 10px;" v-loading="loading">
				<el-table-column type="index" label="序号" width="60" align="center" />
				<el-table-column prop="userName" label="姓名" width="120">
					<template slot-scope="scope">
						<el-input v-model="scope.row.userName" size="mini" />
					</template>
				</el-table-column>
				<el-table-column prop="userId" label="用户ID" width="150">
					<template slot-scope="scope">
						<el-input v-model="scope.row.userId" size="mini" />
					</template>
				</el-table-column>
				<el-table-column label="是否顾问" width="120" align="center">
					<template slot-scope="scope">
						<el-radio-group v-model="scope.row.isLeader" size="mini">
							<el-radio :label="1">是</el-radio>
							<el-radio :label="0">否</el-radio>
						</el-radio-group>
					</template>
				</el-table-column>
				<el-table-column label="排序" width="100" align="center">
					<template slot-scope="scope">
						<el-input-number 
							v-model="scope.row.sortOrder" 
							:min="1" 
							:max="999" 
							size="mini"
							style="width: 80px;" />
					</template>
				</el-table-column>
				<el-table-column label="操作" width="100" align="center">
					<template slot-scope="scope">
						<el-button type="text" @click="removeMember(scope.$index)" class="NCC-table-delBtn" size="mini">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			
			<!-- 批量操作 -->
			<div class="batch-operations" v-if="members.length > 0">
				<el-button type="info" @click="sortMembers" size="small">重新排序</el-button>
				<el-button type="warning" @click="clearAll" size="small">清空全部</el-button>
			</div>
		</div>
		
		<span slot="footer" class="dialog-footer">
			<el-button @click="handleClose">取 消</el-button>
			<el-button type="primary" @click="saveAll">确 定</el-button>
		</span>
	</el-dialog>
</template>

<script>
	import request from '@/utils/request'
	
	export default {
		name: 'MemberDialog',
		props: {
			jsjId: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				visible: false,
				loading: false,
				members: []
			}
		},
		methods: {
			init(jsjId) {
				this.jsjId = jsjId
				this.visible = true
				this.loadMembers()
			},
			loadMembers() {
				if (!this.jsjId) return
				
				this.loading = true
				request({
					url: `/api/Extend/LqYcsdJsj/${this.jsjId}/detail`,
					method: 'GET'
				}).then(res => {
					this.members = res.data.members || []
					this.loading = false
				}).catch(() => {
					this.members = []
					this.loading = false
				})
			},
			addMember() {
				this.members.push({
					userId: '',
					userName: '',
					isLeader: 0,
					sortOrder: this.members.length + 1
				})
			},
			removeMember(index) {
				this.$confirm('确定要删除这个成员吗？', '提示', {
					type: 'warning'
				}).then(() => {
					this.members.splice(index, 1)
					this.sortMembers()
				})
			},
			sortMembers() {
				this.members.forEach((member, index) => {
					member.sortOrder = index + 1
				})
			},
			clearAll() {
				this.$confirm('确定要清空所有成员吗？', '提示', {
					type: 'warning'
				}).then(() => {
					this.members = []
				})
			},
			refreshMembers() {
				this.loadMembers()
			},
			saveAll() {
				// 验证数据
				for (let i = 0; i < this.members.length; i++) {
					const member = this.members[i]
					if (!member.userId || !member.userName) {
						this.$message.error(`第${i + 1}行成员信息不完整`)
						return
					}
				}
				
				// 验证多人战队必须有顾问
				if (this.members.length >= 2) {
					const hasLeader = this.members.some(m => m.isLeader === 1)
					if (!hasLeader) {
						this.$message.error('两人或两人以上的战队必须有一个顾问')
						return
					}
				}
				
				// 发送保存请求
				this.$emit('save', this.members)
				this.handleClose()
			},
			handleClose() {
				this.visible = false
				this.$emit('close')
			}
		}
	}
</script>

<style scoped>
.member-dialog {
	padding: 10px 0;
}

.member-toolbar {
	display: flex;
	align-items: center;
	gap: 10px;
}

.member-count {
	color: #606266;
	font-size: 14px;
	margin-left: auto;
}

.batch-operations {
	margin-top: 15px;
	padding-top: 15px;
	border-top: 1px solid #ebeef5;
}

.el-table {
	margin-top: 10px;
}
</style>