405 lines
7.6 KiB
Vue
405 lines
7.6 KiB
Vue
<template>
|
||
<view class="form-container">
|
||
<uni-forms label-position="top" :modelValue="formData" class="component-form">
|
||
<view class="fields-grid">
|
||
<!-- 常用组分选择框 -->
|
||
<uni-forms-item label="常用组分" class="form-item">
|
||
<uni-data-select v-model="selectedComponent" @change="handleComponentChange" placeholder="请选择常用组分"
|
||
:clear="true" :localdata="componentOptions" />
|
||
</uni-forms-item>
|
||
|
||
<!-- 合计输入框 -->
|
||
<uni-forms-item label="合计" class="form-item">
|
||
<uni-easyinput :value="totalPercentage" disabled class="total-input" />
|
||
</uni-forms-item>
|
||
</view>
|
||
</uni-forms>
|
||
|
||
<uni-forms :modelValue="formData" label-position="top" class="component-form" :label-width="160">
|
||
<view class="fields-grid">
|
||
<uni-forms-item v-for="field in componentFields" :key="field.prop" :label="field.label"
|
||
:name="field.prop" class="form-item">
|
||
<uni-easyinput v-model="formData[field.prop]" type="digit" @input="handleValueChange"
|
||
@focus="selectAllText" />
|
||
</uni-forms-item>
|
||
</view>
|
||
</uni-forms>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
ref,
|
||
watch,
|
||
onMounted,
|
||
computed,
|
||
nextTick
|
||
} from 'vue';
|
||
import {
|
||
onLoad
|
||
} from '@dcloudio/uni-app';
|
||
import {
|
||
useDict
|
||
} from '@/utils/dict'
|
||
|
||
// 使用字典Hook获取ngtools_cyzf字典数据
|
||
const {
|
||
ngtools_cyzf
|
||
} = useDict('ngtools_cyzf')
|
||
const dictLoading = ref(false)
|
||
|
||
// 计算属性：将字典数据转换为下拉框需要的格式
|
||
const componentOptions = computed(() => {
|
||
return (ngtools_cyzf.value || []).map(item => ({
|
||
value: item.value,
|
||
text: item.label
|
||
}))
|
||
})
|
||
|
||
|
||
// 字段配置元数据
|
||
const COMPONENT_FIELDS = [{
|
||
prop: 'ngC1',
|
||
label: '甲烷C1'
|
||
},
|
||
{
|
||
prop: 'ngN2',
|
||
label: '氮气N2'
|
||
},
|
||
{
|
||
prop: 'ngCo2',
|
||
label: '二氧化碳CO2'
|
||
},
|
||
{
|
||
prop: 'ngC2',
|
||
label: '乙烷C2'
|
||
},
|
||
{
|
||
prop: 'ngC3',
|
||
label: '丙烷C3'
|
||
},
|
||
{
|
||
prop: 'ngH2o',
|
||
label: '水H2O'
|
||
},
|
||
{
|
||
prop: 'ngH2s',
|
||
label: '硫化氢H2S'
|
||
},
|
||
{
|
||
prop: 'ngH2',
|
||
label: '氢气H2'
|
||
},
|
||
{
|
||
prop: 'ngCo',
|
||
label: '一氧化碳CO'
|
||
},
|
||
{
|
||
prop: 'ngO2',
|
||
label: '氧气O2'
|
||
},
|
||
{
|
||
prop: 'ngIc4',
|
||
label: '异丁烷iC4'
|
||
},
|
||
{
|
||
prop: 'ngNc4',
|
||
label: '正丁烷nC4'
|
||
},
|
||
{
|
||
prop: 'ngIc5',
|
||
label: '异戊烷iC5'
|
||
},
|
||
{
|
||
prop: 'ngNc5',
|
||
label: '正戊烷nC5'
|
||
},
|
||
{
|
||
prop: 'ngC6',
|
||
label: '己烷C6'
|
||
},
|
||
{
|
||
prop: 'ngC7',
|
||
label: '庚烷C7'
|
||
},
|
||
{
|
||
prop: 'ngC8',
|
||
label: '辛烷C8'
|
||
},
|
||
{
|
||
prop: 'ngC9',
|
||
label: '壬烷C9'
|
||
},
|
||
{
|
||
prop: 'ngC10',
|
||
label: '癸烷C10'
|
||
},
|
||
{
|
||
prop: 'ngHe',
|
||
label: '氦气He'
|
||
},
|
||
{
|
||
prop: 'ngAr',
|
||
label: '氩气Ar'
|
||
}
|
||
];
|
||
|
||
// 定义 props
|
||
const props = defineProps({
|
||
modelValue: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
elFormWidth: {
|
||
type: Number,
|
||
default: 180
|
||
}
|
||
});
|
||
|
||
// 定义 emits
|
||
const emits = defineEmits(['update:modelValue']);
|
||
|
||
// 定义响应式数据
|
||
const selectWidth = ref(0);
|
||
const selectedComponent = ref(null);
|
||
const formData = ref(initFormData());
|
||
const componentFields = ref(COMPONENT_FIELDS);
|
||
|
||
// 页面加载
|
||
onMounted(() => {
|
||
selectWidth.value = props.elFormWidth;
|
||
// 获取字典数据
|
||
|
||
});
|
||
|
||
// 计算属性
|
||
const totalPercentage = computed(() => {
|
||
return Object.values(formData.value)
|
||
.reduce((sum, val) => sum + (parseFloat(val) || 0), 0)
|
||
.toFixed(4);
|
||
});
|
||
|
||
// 初始化表单数据
|
||
function initFormData() {
|
||
return COMPONENT_FIELDS.reduce((acc, field) => {
|
||
acc[field.prop] = 0;
|
||
return acc;
|
||
}, {});
|
||
}
|
||
|
||
// 全选输入框文本
|
||
function selectAllText(event) {
|
||
// 在uniapp中，可以通过设置selection-range实现全选
|
||
const query = uni.createSelectorQuery().in(this);
|
||
query.select(`[data-field="${event.target.dataset.field}"]`).node((res) => {
|
||
const node = res.node;
|
||
if (node && node.setSelectionRange) {
|
||
node.setSelectionRange(0, node.value.length);
|
||
}
|
||
}).exec();
|
||
}
|
||
|
||
// 解析传入的字符串值
|
||
function parseValueString(valueStr) {
|
||
const values = (valueStr || '').split('_');
|
||
componentFields.value.forEach((field, index) => {
|
||
const value = parseFloat(values[index]) || 0;
|
||
formData.value[field.prop] = value;
|
||
});
|
||
}
|
||
|
||
// 生成要输出的字符串值
|
||
function generateValueString() {
|
||
return Object.values(formData.value)
|
||
.map((v) => v.toFixed(4))
|
||
.join('_');
|
||
}
|
||
|
||
// 处理组件选择变化
|
||
function handleComponentChange(value) {
|
||
if (!value) return;
|
||
try {
|
||
console.log(value)
|
||
const componentData = JSON.parse(value);
|
||
Object.keys(formData.value).forEach((key) => {
|
||
formData.value[key] = parseFloat(componentData[key]) || 0;
|
||
});
|
||
emitUpdate();
|
||
} catch (error) {
|
||
uni.showToast({
|
||
title: '获取标准组分失败',
|
||
icon: 'none'
|
||
});
|
||
console.error(error);
|
||
}
|
||
}
|
||
|
||
// 处理值变化
|
||
function handleValueChange() {
|
||
nextTick(() => {
|
||
emitUpdate();
|
||
});
|
||
}
|
||
|
||
// 触发更新事件
|
||
function emitUpdate() {
|
||
if (Math.abs(parseFloat(totalPercentage.value) - 100) > 0.0001) {
|
||
uni.showToast({
|
||
title: '组分合计不等于100%，请检查输入',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
emits('update:modelValue', generateValueString());
|
||
}
|
||
|
||
|
||
|
||
// 监听 elFormWidth 的变化
|
||
watch(
|
||
() => props.elFormWidth,
|
||
(newVal) => {
|
||
selectWidth.value = newVal;
|
||
}, {
|
||
deep: true
|
||
}
|
||
);
|
||
|
||
// 监听 value 的变化
|
||
watch(
|
||
() => props.modelValue,
|
||
(newVal) => {
|
||
parseValueString(newVal);
|
||
}, {
|
||
immediate: true
|
||
}
|
||
);
|
||
</script>
|
||
|
||
<style scoped>
|
||
.form-container {
|
||
padding: 10rpx;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
}
|
||
|
||
.component-form {
|
||
background-color: #ffffff;
|
||
border-radius: 12rpx;
|
||
padding: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||
}
|
||
|
||
/* 网格布局容器 */
|
||
.fields-grid {
|
||
display: grid;
|
||
gap: 24rpx;
|
||
/* 表单项之间的间距 */
|
||
width: 100%;
|
||
}
|
||
|
||
/* 表单项基础样式 */
|
||
.form-item {
|
||
width: 100%;
|
||
margin: 0;
|
||
}
|
||
|
||
/* 响应式布局 - 屏幕宽度小于768px时显示2列 */
|
||
@media screen and (max-width: 768px) {
|
||
.fields-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
}
|
||
|
||
/* 响应式布局 - 屏幕宽度大于等于768px时显示3列 */
|
||
@media screen and (min-width: 768px) {
|
||
.fields-grid {
|
||
grid-template-columns: repeat(3, 1fr);
|
||
}
|
||
}
|
||
|
||
/* 优化表单元素样式 */
|
||
:deep(.uni-forms-item) {
|
||
margin-bottom: 0 !important;
|
||
}
|
||
|
||
:deep(.uni-forms-item__label) {
|
||
font-size: 22rpx;
|
||
color: #868686;
|
||
margin-bottom: 5rpx;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
:deep(.uni-data-select__input),
|
||
:deep(.uni-easyinput__content) {
|
||
width: 100%;
|
||
min-height: 70rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
:deep(.uni-input-input),
|
||
:deep(.uni-easyinput__content input) {
|
||
font-size: 28rpx;
|
||
padding: 0 20rpx;
|
||
height: 70rpx;
|
||
line-height: 70rpx;
|
||
}
|
||
|
||
/* 禁用输入框的特殊样式 */
|
||
.total-input :deep(.uni-easyinput__content) {
|
||
background-color: #f5f7fa;
|
||
border-color: #e4e7ed;
|
||
}
|
||
|
||
.total-input :deep(.uni-input-input) {
|
||
background-color: #f5f7fa;
|
||
color: #606266;
|
||
-webkit-text-fill-color: #606266;
|
||
opacity: 1;
|
||
}
|
||
|
||
/* 确保小屏幕下表单不溢出 */
|
||
@media screen and (max-width: 480px) {
|
||
.form-container {
|
||
padding: 10rpx;
|
||
}
|
||
|
||
.component-form {
|
||
padding: 16rpx;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.fields-grid {
|
||
gap: 16rpx;
|
||
}
|
||
|
||
:deep(.uni-forms-item__label) {
|
||
font-size: 22rpx;
|
||
}
|
||
|
||
:deep(.uni-input-input) {
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
|
||
/* 针对选择器的特殊样式调整 */
|
||
:deep(.uni-data-select) {
|
||
width: 100%;
|
||
}
|
||
|
||
:deep(.uni-data-select__selector) {
|
||
min-height: 70rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
:deep(.uni-data-select__input-text) {
|
||
font-size: 28rpx;
|
||
line-height: 70rpx;
|
||
padding: 0 20rpx;
|
||
}
|
||
|
||
/* 数字输入框的特殊样式 */
|
||
:deep(input[type="digit"]) {
|
||
text-align: right;
|
||
}
|
||
</style> |