antissoft / wurenji

<template>
	<el-dialog :title="!dataForm.id ? '新建格位' :  isDetail ? '格位详情':'调整格位状态'" :close-on-click-modal="false" :visible.sync="visible" class="NCC-dialog NCC-dialog_center" lock-scroll width="600px">
		<el-row :gutter="15" class="edit-form-container">
			<!-- 只读信息展示区域 -->
			<div class="readonly-info-section">
				<div class="section-title">
					<i class="el-icon-info"></i>
					<span>格位信息</span>
				</div>
				<div class="info-grid">
					<div class="info-item">
						<span class="info-label">设备名称：</span>
						<span class="info-value">{{ getDeviceName(dataForm.deviceId) }}</span>
					</div>
					<div class="info-item">
						<span class="info-label">格位编号：</span>
						<span class="info-value">{{ dataForm.cellCode }}</span>
					</div>
					<div class="info-item">
						<span class="info-label">当前状态：</span>
						<el-tag :type="getStatusColor(dataForm.status)" class="status-tag">
							{{ getStatusName(dataForm.status) }}
						</el-tag>
					</div>
				</div>
			</div>

			<!-- 状态修改区域 -->
			<div class="edit-section">
				<div class="section-title">
					<i class="el-icon-edit"></i>
					<span>状态调整</span>
				</div>
				<el-form ref="elForm" :model="dataForm" size="small" label-width="100px" label-position="right" :rules="rules" class="status-form">
					<el-col :span="24">
						<el-form-item label="新状态" prop="status" class="status-form-item">
							<el-radio-group v-model="dataForm.status" class="status-radio-group">
								<el-radio v-for="(item, index) in statusOptions" :key="index" :label="item.id" class="status-radio">
									<span class="radio-text">{{ item.fullName }}</span>
								</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-form>
			</div>
		</el-row>
		<span slot="footer" class="dialog-footer">
			<el-button @click="visible = false" size="medium" class="cancel-btn">取 消</el-button>
			<el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail" size="medium" class="confirm-btn">确 定</el-button>
		</span>
	</el-dialog>
</template>
<script>
	import request from '@/utils/request'
	import { getDictionaryDataSelector } from '@/api/systemData/dictionary'
	import { previewDataInterface } from '@/api/systemData/dataInterface'
	export default {
		components: {},
		props: [],
		data() {
			return {
				loading: false,
				visible: false,
				isDetail: false,
				dataForm: {
					id:'',
					deviceId:undefined,
					cellCode:undefined,
					status:undefined,
				},
				rules: {
				},
				deviceIdOptions : [],
				statusOptions:[
					{"fullName":"空闲","id":1},
					{"fullName":"停用","id":2},
					{"fullName":"充电","id":3},
					{"fullName":"损坏","id":4},
					{"fullName":"已租接","id":5}
				],
			}
		},
		computed: {},
        watch: {},
        created() {
			this.getdeviceIdOptions();
		},
		mounted() {
        },
		methods: {
			getdeviceIdOptions(){
				previewDataInterface('702759008724845829').then(res => {
					this.deviceIdOptions = res.data
				});
			},
			
			// 获取设备名称
			getDeviceName(deviceId) {
				if (!deviceId || !this.deviceIdOptions.length) return '--';
				const device = this.deviceIdOptions.find(item => item.F_Id === deviceId);
				return device ? device.F_DeviceName : '--';
			},
			
			// 获取状态名称
			getStatusName(status) {
				const statusItem = this.statusOptions.find(item => item.id === status);
				return statusItem ? statusItem.fullName : '未知';
			},
			
			// 获取状态颜色
			getStatusColor(status) {
				const colorMap = {
					1: 'success', // 空闲 - 绿色
					2: 'info',    // 停用 - 灰色  
					3: 'warning', // 充电 - 橙色
					4: 'danger',  // 损坏 - 红色
					5: 'primary'  // 已租接 - 蓝色
				}
				return colorMap[status] || 'success'
			},
			goBack() {
                this.$emit('refresh')
            },
			init(id, isDetail) {
				this.dataForm.id = id || 0;
                this.visible = true;
                this.isDetail = isDetail || false;
				this.$nextTick(() => {
					this.$refs['elForm'].resetFields();
					if (this.dataForm.id) {
						request({
							url: '/api/Extend/UavDeviceCell/' + this.dataForm.id,
							method: 'get'
						}).then(res =>{
							this.dataForm = res.data;
						})
					}
				})
			},
			dataFormSubmit() {
				this.$refs['elForm'].validate((valid) => {
                    if (valid) {
                        if (!this.dataForm.id) {
                            request({
                                url: `/api/Extend/UavDeviceCell`,
                                method: 'post',
                                data: this.dataForm,
                            }).then((res) => {
                                this.$message({
                                    message: res.msg,
                                    type: 'success',
                                    duration: 1000,
                                    onClose: () => {
                                        this.visible = false,
                                            this.$emit('refresh', true)
                                    }
                                })
                            })
                        } else {
                            request({
                                url: '/api/Extend/UavDeviceCell/' + this.dataForm.id,
                                method: 'PUT',
                                data: this.dataForm
                            }).then((res) => {
                                this.$message({
                                    message: res.msg,
                                    type: 'success',
                                    duration: 1000,
                                    onClose: () => {
                                        this.visible = false
                                        this.$emit('refresh', true)
                                    }
                                })
                            })
                        }
                    }
                })
			},
		}
	}
</script>

<style lang="scss" scoped>
/* 编辑表单容器 */
.edit-form-container {
	padding: 0;
}

/* 只读信息展示区域 */
.readonly-info-section {
	background: #f8f9fa;
	border: 1px solid #e9ecef;
	border-radius: 8px;
	margin-bottom: 20px;
	overflow: hidden;
}

.section-title {
	background: #409EFF;
	color: white;
	padding: 12px 16px;
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	font-size: 14px;
}

.section-title i {
	font-size: 16px;
}

.info-grid {
	padding: 20px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.info-item {
	display: flex;
	align-items: center;
	gap: 8px;
}

.info-label {
	color: #666;
	font-weight: 500;
	min-width: 80px;
}

.info-value {
	color: #333;
	font-weight: 600;
}

.status-tag {
	font-weight: 600;
}

/* 状态修改区域 */
.edit-section {
	background: #fff;
	border: 1px solid #e9ecef;
	border-radius: 8px;
	overflow: hidden;
}

.edit-section .section-title {
	background: #67C23A;
}

/* 状态表单样式 */
.status-form {
	padding: 20px 20px 24px 20px;
}

.status-form-item {
	margin-bottom: 0 !important;
}

.status-form-item .el-form-item__label {
	padding-bottom: 12px;
	font-weight: 600;
	color: #333;
}

/* 状态单选按钮组 */
.status-radio-group {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	width: 100%;
	margin-bottom: 8px;
}

.status-radio {
	margin: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px 8px;
	border: 2px solid #e4e7ed;
	border-radius: 8px;
	transition: all 0.3s ease;
	cursor: pointer;
	background: #fff;
}

.status-radio:hover {
	border-color: #409EFF;
	background: rgba(64, 158, 255, 0.05);
}

.status-radio.is-checked {
	border-color: #409EFF;
	background: rgba(64, 158, 255, 0.1);
	color: #409EFF;
}

.radio-text {
	font-weight: 500;
	font-size: 14px;
}

/* 对话框底部 */
.dialog-footer {
	text-align: right;
	padding: 20px 0 0 0;
	border-top: 1px solid #e4e7ed;
	margin-top: 20px;
}

.dialog-footer .el-button {
	padding: 12px 24px;
	font-size: 14px;
	font-weight: 500;
	border-radius: 6px;
	min-width: 80px;
}

.cancel-btn {
	background: #f5f5f5;
	border-color: #d9d9d9;
	color: #666;
}

.cancel-btn:hover {
	background: #e6f7ff;
	border-color: #409EFF;
	color: #409EFF;
}

.confirm-btn {
	background: #409EFF;
	border-color: #409EFF;
}

.confirm-btn:hover {
	background: #66b1ff;
	border-color: #66b1ff;
}

/* 响应式设计 */
@media (max-width: 768px) {
	.info-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	
	.status-radio-group {
		grid-template-columns: 1fr;
		gap: 8px;
	}
}
</style>