分组

pages/index/index.vue

@@ -75,6 +75,13 @@
         ]"
       ></uv-skeletons>
       <view class="form" v-else>
+        <!-- 按分类展示参数 -->
+        <view
+          v-for="(params, category) in groupedParams"
+          :key="category"
+          class="param-category"
+        >
+          <view class="category-title">{{ category }}</view>
           <uv-form
             labelAlign="left"
             labelWidth="auto"
@@ -86,9 +93,7 @@
             <uv-form-item
               :prop="item.name"
               :label="item.name + '：'"
-            v-for="item in currentTemplate.params?.filter(
+              v-for="item in params"
-              (item) => item.enabled
-            ) || []"
               :key="item.name"
             >
               <div class="required" v-if="item.required" style="color: #f12323">
@@ -105,7 +110,9 @@
                 border="bottom"
                 :placeholderStyle="{ color: '#666778' }"
                 :placeholder="
-                item.name === '土建图号' ? '将根据土建图型号自动生成' : '请输入'
+                  item.name === '土建图号'
+                    ? '将根据土建图型号自动生成'
+                    : '请输入'
                 "
               ></uv-input>
               <!-- 数字范围提示 -->
@@ -127,65 +134,10 @@
                 </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>
         </view>
       </view>
+    </view>
 
     <view class="section" v-else>
       <div class="status">
@@ -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">