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="showAddDialog" size="small">添加成员</el-button>
				<el-button type="warning" icon="el-icon-refresh" @click="loadMembers" 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="姓名" min-width="120">
					<template slot-scope="scope">
						<div class="user-name">
							<i class="el-icon-user"></i>
							<span>{{ scope.row.userName || '无' }}</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="userId" label="用户ID" min-width="150">
					<template slot-scope="scope">
						<span>{{ scope.row.userId || '无' }}</span>
					</template>
				</el-table-column>
				<el-table-column label="是否顾问" width="120" align="center">
					<template slot-scope="scope">
						<el-tag :type="scope.row.isLeader === 1 ? 'success' : 'info'" size="small" effect="dark">
							<i class="el-icon-star-on" v-if="scope.row.isLeader === 1"></i>
							<i class="el-icon-star-off" v-else></i>
							{{ scope.row.isLeader === 1 ? '是' : '否' }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="status" label="状态" width="100" align="center">
					<template slot-scope="scope">
						<el-tag :type="scope.row.status === 'ACTIVE' ? 'success' : 'info'" size="small" effect="dark">
							{{ scope.row.status === 'ACTIVE' ? '活跃' : '非活跃' }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="排序" width="100" align="center">
					<template slot-scope="scope">
						<span>{{ scope.row.sortOrder || 0 }}</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="100" align="center" fixed="right">
					<template slot-scope="scope">
						<el-button type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)" size="mini" plain>删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		
		<!-- 添加成员对话框 -->
		<el-dialog
			title="添加成员"
			:visible.sync="addDialogVisible"
			width="600px"
			append-to-body
			:close-on-click-modal="false">
			<el-form ref="addForm" :model="addForm" label-width="100px" label-position="right" :rules="addFormRules">
				<el-form-item label="用户" prop="userId">
					<el-select 
						v-model="addForm.userId" 
						placeholder="请选择用户" 
						filterable
						style="width: 100%;"
						@change="onUserSelectChange">
						<el-option
							v-for="user in availableUsers"
							:key="user.id"
							:label="user.name"
							:value="user.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="姓名" prop="userName">
					<el-input v-model="addForm.userName" placeholder="请输入姓名" />
				</el-form-item>
				<el-form-item label="是否顾问" prop="isLeader">
					<el-radio-group v-model="addForm.isLeader">
						<el-radio :label="1">是</el-radio>
						<el-radio :label="0">否</el-radio>
					</el-radio-group>
				</el-form-item>
				<!-- <el-form-item label="状态" prop="status">
					<el-select v-model="addForm.status" placeholder="请选择状态" style="width: 100%;">
						<el-option label="活跃" value="ACTIVE"></el-option>
						<el-option label="非活跃" value="INACTIVE"></el-option>
					</el-select>
				</el-form-item> -->
				<el-form-item label="排序" prop="sortOrder">
					<el-input-number 
						v-model="addForm.sortOrder" 
						:min="1" 
						:max="999" 
						style="width: 100%;" />
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleAddMember">确 定</el-button>
			</span>
		</el-dialog>
		
		<span slot="footer" class="dialog-footer">
			<el-button @click="handleClose">关 闭</el-button>
		</span>
	</el-dialog>
</template>

<script>
import request from '@/utils/request'

export default {
	name: 'MemberEditDialog',
	data() {
		return {
			visible: false,
			loading: false,
			jsjId: '',
			members: [],
			availableUsers: [],
			addDialogVisible: false,
			addForm: {
				userId: '',
				userName: '',
				isLeader: 0,
				status: 'ACTIVE',
				sortOrder: 1
			},
			addFormRules: {
				userId: [
					{ required: true, message: '请选择用户', trigger: 'change' }
				],
				userName: [
					{ required: true, message: '请输入姓名', trigger: 'blur' }
				],
				isLeader: [
					{ required: true, message: '请选择是否顾问', trigger: 'change' }
				],
				status: [
					{ required: true, message: '请选择状态', trigger: 'change' }
				],
				sortOrder: [
					{ required: true, message: '请输入排序', trigger: 'blur' }
				]
			}
		}
	},
	methods: {
		init(jsjId) {
			this.jsjId = jsjId
			this.visible = true
			this.loadMembers()
			this.loadAvailableUsers()
		},
		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
			})
		},
		loadAvailableUsers() {
			// 加载可用用户列表
			request({
				url: '/api/Extend/User/Selector',
				method: 'GET'
			}).then(res => {
				this.availableUsers = res.data.map(item => ({
					id: item.id,
					name: item.realName || item.account
				}))
			}).catch(() => {
				this.availableUsers = []
			})
		},
		showAddDialog() {
			this.addForm = {
				userId: '',
				userName: '',
				isLeader: 0,
				status: 'ACTIVE',
				sortOrder: this.members.length + 1
			}
			this.addDialogVisible = true
			this.$nextTick(() => {
				this.$refs.addForm && this.$refs.addForm.clearValidate()
			})
		},
		onUserSelectChange(userId) {
			// 用户选择变化时自动填充姓名
			const selectedUser = this.availableUsers.find(user => user.id === userId)
			if (selectedUser) {
				this.addForm.userName = selectedUser.name
			}
		},
		handleAddMember() {
			this.$refs.addForm.validate((valid) => {
				if (valid) {
					// 调用新增接口
					request({
						url: '/api/Extend/lqycsdjsj/Actions/AddUserToJsj',
						method: 'POST',
						data: {
							jsjId: this.jsjId,
							userId: this.addForm.userId,
							userName: this.addForm.userName,
							isLeader: this.addForm.isLeader,
							status: this.addForm.status,
							sortOrder: this.addForm.sortOrder
						}
					}).then(res => {
						this.$message({
							type: 'success',
							message: res.msg || '添加成功',
							duration: 1500,
							onClose: () => {
								this.addDialogVisible = false
								this.loadMembers()
							}
						})
					}).catch(err => {
						this.$message({
							type: 'error',
							message: err.msg || '添加失败',
							duration: 1500
						})
					})
				}
			})
		},
		handleDelete(row) {
			if (!row.id) {
				this.$message.error('该成员记录缺少ID，无法删除')
				return
			}
			
			this.$confirm('确定要删除这个成员吗？', '提示', {
				type: 'warning'
			}).then(() => {
				// 调用删除接口
				request({
					url: '/api/Extend/lqycsdjsj/Actions/DeleteJsjUserRelation',
					method: 'POST',
					data: {
						id: row.id
					}
				}).then(res => {
					this.$message({
						type: 'success',
						message: res.msg || '删除成功',
						duration: 1500,
						onClose: () => {
							this.loadMembers()
						}
					})
				}).catch(err => {
					this.$message({
						type: 'error',
						message: err.msg || '删除失败',
						duration: 1500
					})
				})
			}).catch(() => {})
		},
		handleClose() {
			this.visible = false
			this.members = []
			this.$emit('close')
		}
	}
}
</script>

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

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

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

.user-name {
	display: flex;
	align-items: center;
	gap: 8px;
}

.user-name i {
	color: #409EFF;
	font-size: 16px;
}

.el-table {
	margin-top: 10px;
}

.action-buttons {
	display: flex;
	gap: 8px;
}

.action-buttons .el-button {
	margin: 0;
}
</style>