main
Lufaneng 9 months ago
parent 1ae5c6cbf9
commit 953df000d0

@ -75,115 +75,67 @@
]" ]"
></uv-skeletons> ></uv-skeletons>
<view class="form" v-else> <view class="form" v-else>
<uv-form <!-- 按分类展示参数 -->
labelAlign="left" <view
labelWidth="auto" v-for="(params, category) in groupedParams"
labelPosition="left" :key="category"
:model="formField" class="param-category"
:rules="rules"
ref="form"
> >
<uv-form-item <view class="category-title">{{ category }}</view>
:prop="item.name" <uv-form
:label="item.name + ''" labelAlign="left"
v-for="item in currentTemplate.params?.filter( labelWidth="auto"
(item) => item.enabled labelPosition="left"
) || []" :model="formField"
:key="item.name" :rules="rules"
ref="form"
> >
<div class="required" v-if="item.required" style="color: #f12323"> <uv-form-item
* :prop="item.name"
</div> :label="item.name + ''"
<uv-input v-for="item in params"
@click="openPicker(item)" :key="item.name"
@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"> <div class="required" v-if="item.required" style="color: #f12323">
范围{{ item.min }} - {{ item.max }} *
</text> </div>
<text v-else-if="item.min !== undefined"> <uv-input
最小值{{ item.min }} @click="openPicker(item)"
</text> @input="handleInputChange(item)"
<text v-else-if="item.max !== undefined"> @blur="validateNumberRange(item)"
最大值{{ item.max }} :readonly="item.type === 'select' || item.name === '土建图号'"
</text> :type="item.type === 'number' ? 'digit' : 'text'"
</view> v-model="item.value"
</uv-form-item> color="#000"
<!-- <uv-form-item prop="password" label="载重kg"> border="bottom"
<uv-input :placeholderStyle="{ color: '#666778' }"
v-model="formField.password" :placeholder="
color="#000" item.name === '土建图号'
border="none" ? '将根据土建图型号自动生成'
:placeholderStyle="{ color: '#666778' }" : '请输入'
placeholder="请输入" "
></uv-input> ></uv-input>
</uv-form-item> <!-- 数字范围提示 -->
<uv-form-item prop="password" label="井道宽度mm"> <view
<uv-input v-if="
type="digit" item.type === 'number' &&
v-model="formField.password" (item.min !== undefined || item.max !== undefined)
color="#000" "
border="none" class="number-range-hint"
:placeholderStyle="{ color: '#666778' }" >
placeholder="请输入" <text v-if="item.min !== undefined && item.max !== undefined">
></uv-input> 范围{{ item.min }} - {{ item.max }}
</uv-form-item> </text>
<uv-form-item prop="password" label="井道深度mm"> <text v-else-if="item.min !== undefined">
<uv-input 最小值{{ item.min }}
type="digit" </text>
v-model="formField.password" <text v-else-if="item.max !== undefined">
color="#000" 最大值{{ item.max }}
border="none" </text>
:placeholderStyle="{ color: '#666778' }" </view>
placeholder="请输入" </uv-form-item>
></uv-input> </uv-form>
</uv-form-item> </view>
<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>
@ -238,7 +190,7 @@
</template> </template>
<script setup> <script setup>
import { ref, onMounted, nextTick } from "vue"; import { ref, onMounted, nextTick, computed } from "vue";
import { import {
onShow, onShow,
onLoad, onLoad,
@ -261,6 +213,26 @@ const applyModalRef = ref(null);
const applyReason = ref(""); const applyReason = ref("");
const applyLoading = ref(false); 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) => { const get_access_status = (access_status) => {
let str = ""; let str = "";
if (access_status === "none") { if (access_status === "none") {
@ -750,6 +722,34 @@ onPullDownRefresh(() => {
margin-top: 4px; margin-top: 4px;
padding-left: 0; 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>
<style lang="scss"> <style lang="scss">

Loading…
Cancel
Save