gebadi
/
aizhunongDom


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编辑地块 - 地块管理</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3114978_qe0b39no76.css">
    <link rel="stylesheet" href="../assets/css/global.css">
    <style>
        :root {
            --primary: #4CAF50;
            --primary-dark: #388E3C;
            --primary-light: #A5D6A7;
            --primary-bg: #F1F8E9;
            --success: #4CAF50;
            --warning: #FFC107;
            --danger: #F44336;
            --info: #2196F3;
            --disabled: #9E9E9E;
            --border: #E0E0E0;
            --text-primary: #212121;
            --text-secondary: #757575;
            --radius: 8px;
        }

        body {
            background-color: #f5f7f9;
            color: var(--text-primary);
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        }

        .page-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 24px;
        }

        .page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
        }

        .page-title {
            font-size: 20px;
            font-weight: 600;
            color: var(--text-primary);
        }

        .btn-back {
            display: inline-flex;
            align-items: center;
            padding: 8px 16px;
            color: #666;
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .btn-back:hover {
            color: var(--primary);
            border-color: var(--primary);
        }

        .btn-back i {
            margin-right: 4px;
        }

        .content-card {
            background: #fff;
            border-radius: var(--radius);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            padding: 24px;
        }

        .form-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }

        .form-group {
            margin-bottom: 0;
        }

        .form-label {
            display: block;
            margin-bottom: 8px;
            font-size: 14px;
            color: #333;
        }

        .form-input {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            transition: all 0.3s;
            height: 36px;
        }

        .form-input:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
            outline: none;
        }

        .required {
            color: #f44336;
            margin-left: 4px;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 8px 16px;
            font-size: 14px;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s;
            height: 36px;
        }

        .btn-primary {
            background-color: var(--primary);
            color: white;
            border: none;
        }

        .btn-primary:hover {
            background-color: var(--primary-dark);
        }

        .btn-outline {
            background-color: white;
            color: #666;
            border: 1px solid #ddd;
        }

        .btn-outline:hover {
            border-color: var(--primary);
            color: var(--primary);
        }

        .footer-actions {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            margin-top: 24px;
            padding-top: 24px;
            border-top: 1px solid #f0f0f0;
        }

        @media (max-width: 768px) {
            .form-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="page-container">
        <div class="page-header">
            <h1 class="page-title">编辑地块</h1>
            <button class="btn-back" onclick="history.back()">
                <i class="iconfont icon-left"></i>返回
            </button>
        </div>

        <div class="content-card">
            <form id="fieldForm">
                <div class="form-grid">
                    <div class="form-group">
                        <label class="form-label">地块名称<span class="required">*</span></label>
                        <input type="text" name="fieldName" class="form-input" required>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">地块编号</label>
                        <input type="text" name="fieldCode" class="form-input" disabled>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">所属农场<span class="required">*</span></label>
                        <select name="farmId" class="form-input" required>
                            <option value="">请选择农场</option>
                            <option value="1">智慧农场一号</option>
                            <option value="2">智慧农场二号</option>
                            <option value="3">智慧农场三号</option>
                            <option value="4">有机蔬菜基地</option>
                            <option value="5">生态果园基地</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">所属区域<span class="required">*</span></label>
                        <select name="fieldArea" class="form-input" required>
                            <option value="">请选择区域</option>
                            <option value="1">东区</option>
                            <option value="2">西区</option>
                            <option value="3">南区</option>
                            <option value="4">北区</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">地块类型<span class="required">*</span></label>
                        <select name="fieldType" class="form-input" required>
                            <option value="">请选择类型</option>
                            <option value="1">水田</option>
                            <option value="2">旱地</option>
                            <option value="3">果园</option>
                            <option value="4">菜地</option>
                            <option value="5">其他</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">面积(亩)<span class="required">*</span></label>
                        <input type="number" name="fieldSize" class="form-input" required>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">负责人</label>
                        <select name="manager" class="form-input">
                            <option value="">请选择负责人</option>
                            <option value="1">张三</option>
                            <option value="2">李四</option>
                            <option value="3">王五</option>
                            <option value="4">赵六</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">种植作物</label>
                        <select name="crops" class="form-input">
                            <option value="">请选择作物</option>
                            <optgroup label="粮食作物">
                                <option value="101">水稻</option>
                                <option value="102">小麦</option>
                                <option value="103">玉米</option>
                                <option value="104">大豆</option>
                                <option value="105">高粱</option>
                                <option value="106">谷子</option>
                            </optgroup>
                            <optgroup label="经济作物">
                                <option value="201">棉花</option>
                                <option value="202">油菜</option>
                                <option value="203">花生</option>
                                <option value="204">芝麻</option>
                                <option value="205">甘蔗</option>
                                <option value="206">烟草</option>
                                <option value="207">茶叶</option>
                                <option value="208">药材</option>
                            </optgroup>
                            <optgroup label="果树作物">
                                <option value="301">葡萄</option>
                                <option value="302">苹果</option>
                                <option value="303">梨</option>
                                <option value="304">桃</option>
                                <option value="305">柑橘</option>
                                <option value="306">枣</option>
                                <option value="307">猕猴桃</option>
                                <option value="308">石榴</option>
                                <option value="309">杏</option>
                            </optgroup>
                            <optgroup label="蔬菜作物">
                                <option value="401">叶菜类</option>
                                <option value="402">根茎类</option>
                                <option value="403">瓜果类</option>
                                <option value="404">豆类</option>
                                <option value="405">茄果类</option>
                                <option value="406">葱蒜类</option>
                            </optgroup>
                            <optgroup label="其他作物">
                                <option value="901">饲料作物</option>
                                <option value="902">观赏作物</option>
                                <option value="903">食用菌</option>
                                <option value="999">其他</option>
                            </optgroup>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">土壤类型</label>
                        <select name="soilType" class="form-input">
                            <option value="">请选择</option>
                            <option value="1">黏土</option>
                            <option value="2">沙质土</option>
                            <option value="3">壤土</option>
                            <option value="4">沙壤土</option>
                            <option value="5">其他</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">灌溉方式</label>
                        <select name="irrigationType" class="form-input">
                            <option value="">请选择</option>
                            <option value="1">喷灌</option>
                            <option value="2">滴灌</option>
                            <option value="3">微喷灌</option>
                            <option value="4">漫灌</option>
                            <option value="5">其他</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">使用状态</label>
                        <select name="status" class="form-input">
                            <option value="1">使用中</option>
                            <option value="2">维护中</option>
                            <option value="0">未使用</option>
                            <option value="3">闲置中</option>
                            <option value="4">待开发</option>
                        </select>
                    </div>
                </div>
                
                <div class="form-group mt-4">
                    <label class="form-label">地块描述</label>
                    <textarea name="description" class="form-input" rows="4"></textarea>
                </div>

                <div class="footer-actions">
                    <button type="button" class="btn btn-outline" onclick="history.back()">取消</button>
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取URL参数
            const urlParams = new URLSearchParams(window.location.search);
            const fieldId = urlParams.get('id');

            // 获取表单元素
            const form = document.getElementById('fieldForm');

            // 模拟获取地块数据
            const mockFieldData = {
                fieldName: '西区蔬菜园B',
                fieldCode: 'FK20230002',
                farmId: '4', // 有机蔬菜基地
                fieldArea: '2', // 西区
                fieldType: '4', // 菜地
                fieldSize: '85',
                manager: '2', // 李四
                crops: '401', // 叶菜类
                soilType: '2', // 沙质土
                irrigationType: '2', // 滴灌
                status: '1', // 使用中
                description: '这是一个示例地块描述。'
            };

            // 填充表单数据
            if (form) {
                Object.keys(mockFieldData).forEach(key => {
                    const input = form.elements[key];
                    if (input) {
                        input.value = mockFieldData[key];
                    }
                });
            }

            // 表单提交处理
            form.onsubmit = function(e) {
                e.preventDefault();
                
                // 表单验证
                const requiredFields = form.querySelectorAll('[required]');
                let isValid = true;
                
                requiredFields.forEach(field => {
                    if (!field.value.trim()) {
                        field.style.borderColor = '#f44336';
                        isValid = false;
                    } else {
                        field.style.borderColor = '#ddd';
                    }
                });
                
                if (!isValid) {
                    alert('请填写必填项');
                    return;
                }
                
                // 模拟保存成功
                alert('地块信息保存成功');
                history.back();
            };
        });
    </script>
</body>
</html>