From 953df000d026a1405bbfc99184837a1354bb6f59 Mon Sep 17 00:00:00 2001
From: Lufaneng <Lufaneng@foxmail.com>
Date: Thu, 20 Nov 2025 15:56:09 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=86=E7=BB=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/index/index.vue | 214 +++++++++++++++++++++---------------------
 1 file changed, 107 insertions(+), 107 deletions(-)

diff --git a/pages/index/index.vue b/pages/index/index.vue
index cc6846c..f32df3d 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -75,115 +75,67 @@
         ]"
       ></uv-skeletons>
       <view class="form" v-else>
-        <uv-form
-          labelAlign="left"
-          labelWidth="auto"
-          labelPosition="left"
-          :model="formField"
-          :rules="rules"
-          ref="form"
+        <!-- 按分类展示参数 -->
+        <view
+          v-for="(params, category) in groupedParams"
+          :key="category"
+          class="param-category"
         >
-          <uv-form-item
-            :prop="item.name"
-            :label="item.name + '：'"
-            v-for="item in currentTemplate.params?.filter(
-              (item) => item.enabled
-            ) || []"
-            :key="item.name"
+          <view class="category-title">{{ category }}</view>
+          <uv-form
+            labelAlign="left"
+            labelWidth="auto"
+            labelPosition="left"
+            :model="formField"
+            :rules="rules"
+            ref="form"
           >
-            <div class="required" v-if="item.required" style="color: #f12323">
-              *
-            </div>
-            <uv-input
-              @click="openPicker(item)"
-              @input="handleInputChange(item)"
-              @blur="validateNumberRange(item)"
-              :readonly="item.type === 'select' || item.name === '土建图号'"
-              :type="item.type === 'number' ? 'digit' : 'text'"
-              v-model="item.value"
-              color="#000"
-              border="bottom"
-              :placeholderStyle="{ color: '#666778' }"
-              :placeholder="
-                item.name === '土建图号' ? '将根据土建图型号自动生成' : '请输入'
-              "
-            ></uv-input>
-            <!-- 数字范围提示 -->
-            <view
-              v-if="
-                item.type === 'number' &&
-                (item.min !== undefined || item.max !== undefined)
-              "
-              class="number-range-hint"
+            <uv-form-item
+              :prop="item.name"
+              :label="item.name + '：'"
+              v-for="item in params"
+              :key="item.name"
             >
-              <text v-if="item.min !== undefined && item.max !== undefined">
-                范围：{{ item.min }} - {{ item.max }}
-              </text>
-              <text v-else-if="item.min !== undefined">
-                最小值：{{ item.min }}
-              </text>
-              <text v-else-if="item.max !== undefined">
-                最大值：{{ item.max }}
-              </text>
-            </view>
-          </uv-form-item>
-          <!-- <uv-form-item prop="password" label="载重（kg）">
-            <uv-input
-              v-model="formField.password"
-              color="#000"
-              border="none"
-              :placeholderStyle="{ color: '#666778' }"
-              placeholder="请输入"
-            ></uv-input>
-          </uv-form-item>
-          <uv-form-item prop="password" label="井道宽度（mm）">
-            <uv-input
-              type="digit"
-              v-model="formField.password"
-              color="#000"
-              border="none"
-              :placeholderStyle="{ color: '#666778' }"
-              placeholder="请输入"
-            ></uv-input>
-          </uv-form-item>
-          <uv-form-item prop="password" label="井道深度（mm）">
-            <uv-input
-              type="digit"
-              v-model="formField.password"
-              color="#000"
-              border="none"
-              :placeholderStyle="{ color: '#666778' }"
-              placeholder="请输入"
-            ></uv-input>
-          </uv-form-item>
-          <uv-form-item prop="password" label="顶层高度（mm）">
-            <uv-input
-              type="digit"
-              v-model="formField.password"
-              color="#000"
-              border="none"
-              :placeholderStyle="{ color: '#666778' }"
-              placeholder="请输入"
-            ></uv-input>
-          </uv-form-item>
-          <uv-form-item prop="password" label="底坑深度（mm）">
-            <uv-input
-              type="digit"
-              v-model="formField.password"
-              color="#000"
-              border="none"
-              :placeholderStyle="{ color: '#666778' }"
-              placeholder="请输入"
-            ></uv-input>
-          </uv-form-item>
-          <uv-form-item prop="password">
-            <div style="margin-bottom: 4px">备注说明</div>
-            <uv-textarea
-              v-model="formField.password"
-              placeholder="请输入"
-            ></uv-textarea>
-          </uv-form-item> -->
-        </uv-form>
+              <div class="required" v-if="item.required" style="color: #f12323">
+                *
+              </div>
+              <uv-input
+                @click="openPicker(item)"
+                @input="handleInputChange(item)"
+                @blur="validateNumberRange(item)"
+                :readonly="item.type === 'select' || item.name === '土建图号'"
+                :type="item.type === 'number' ? 'digit' : 'text'"
+                v-model="item.value"
+                color="#000"
+                border="bottom"
+                :placeholderStyle="{ color: '#666778' }"
+                :placeholder="
+                  item.name === '土建图号'
+                    ? '将根据土建图型号自动生成'
+                    : '请输入'
+                "
+              ></uv-input>
+              <!-- 数字范围提示 -->
+              <view
+                v-if="
+                  item.type === 'number' &&
+                  (item.min !== undefined || item.max !== undefined)
+                "
+                class="number-range-hint"
+              >
+                <text v-if="item.min !== undefined && item.max !== undefined">
+                  范围：{{ item.min }} - {{ item.max }}
+                </text>
+                <text v-else-if="item.min !== undefined">
+                  最小值：{{ item.min }}
+                </text>
+                <text v-else-if="item.max !== undefined">
+                  最大值：{{ item.max }}
+                </text>
+              </view>
+            </uv-form-item>
+          </uv-form>
+        </view>
       </view>
     </view>
 
@@ -238,7 +190,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, nextTick } from "vue";
+import { ref, onMounted, nextTick, computed } from "vue";
 import {
   onShow,
   onLoad,
@@ -261,6 +213,26 @@ const applyModalRef = ref(null);
 const applyReason = ref("");
 const applyLoading = ref(false);
 
+// 根据category分组参数
+const groupedParams = computed(() => {
+  if (!currentTemplate.value.params) return {};
+
+  const enabledParams = currentTemplate.value.params.filter(
+    (item) => item.enabled
+  );
+  const grouped = {};
+
+  enabledParams.forEach((param) => {
+    const category = param.category || "默认";
+    if (!grouped[category]) {
+      grouped[category] = [];
+    }
+    grouped[category].push(param);
+  });
+
+  return grouped;
+});
+
 const get_access_status = (access_status) => {
   let str = "";
   if (access_status === "none") {
@@ -750,6 +722,34 @@ onPullDownRefresh(() => {
   margin-top: 4px;
   padding-left: 0;
 }
+
+.param-category {
+  margin-bottom: 24px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  .category-title {
+    font-size: 15px;
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 16px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #f0f0f0;
+    position: relative;
+
+    &::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      bottom: -1px;
+      width: 30px;
+      height: 2px;
+      background: #3f70ff;
+    }
+  }
+}
 </style>
 
 <style lang="scss">