LiLongLong
/
disinfector_vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix: form表单优化

master
guoapeng 2 weeks ago
parent
238f1fa12e
commit
48a90956e8
8 changed files with 293 additions and 289 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 121
      src/components/formula/FormulaConfig.vue
  2. 100
      src/components/formula/HomeFormulaConfig.vue
  3. 134
      src/components/formula/RunFormulaConfig.vue
  4. 107
      src/components/formula/SettingFormulaConfig.vue
  5. 39
      src/components/home/HomeSetting.vue
  6. 12
      src/components/home/config.vue
  7. 25
      src/views/home/chart.vue
  8. 44
      src/views/seal/index.vue

121
src/components/formula/FormulaConfig.vue
View File

@ -210,65 +210,74 @@ const validateName = (rule: any, value: any, callback: any) => {
label-position="right" label-position="right"
:size="size" :size="size"
inline inline
style="overflow: hidden"
> >
<el-form-item
label="配方名称"
style="width: 100%"
prop="name"
:rules="[
{
required: true,
validator: (rule, value, callback) => validateName(rule, value, callback),
trigger: 'blur',
},
]"
>
<ft-input v-model="formData.name" name="name" placeholder="配方名称" />
</el-form-item>
<el-form-item
v-for="item in formulaConfigList.filter(data => data.is_visible_in_formula_page)"
:key="item.setting_id"
:label="item.name_ch"
style="width: 50%"
:prop="item.setting_id"
:rules="[
{
required: true,
validator: (rule, value, callback) => validatePass(rule, value, callback, item),
trigger: 'blur',
},
]"
>
<template v-if="item.val_type === 'int'">
<ft-input v-model="formData[item.setting_id]" style="width: 100%" layout-name="number">
<template v-if="labelUnitMap[item.setting_id]" #append>
{{ labelUnitMap[item.setting_id] }}
<el-row :gutter="20">
<el-col :span="24">
<el-form-item
label="配方名称"
style="width: 100%"
prop="name"
:rules="[
{
required: true,
validator: (rule, value, callback) => validateName(rule, value, callback),
trigger: 'blur',
},
]"
>
<ft-input v-model="formData.name" name="name" placeholder="配方名称" />
</el-form-item>
</el-col>
<el-col
v-for="item in formulaConfigList.filter(data => data.is_visible_in_formula_page)"
:key="item.setting_id"
:span="12"
>
<el-form-item
:label="item.name_ch"
style="width: 100%"
:prop="item.setting_id"
:rules="[
{
required: true,
validator: (rule, value, callback) => validatePass(rule, value, callback, item),
trigger: 'blur',
},
]"
>
<template v-if="item.val_type === 'int'">
<ft-input v-model="formData[item.setting_id]" style="width: 100%" layout-name="number">
<template v-if="labelUnitMap[item.setting_id]" #append>
{{ labelUnitMap[item.setting_id] }}
</template>
</ft-input>
</template> </template>
</ft-input>
</template>
<template v-if="item.val_type === 'float'">
<ft-input v-model="formData[item.setting_id]" layout-name="number" style="width: 100%">
<template v-if="labelUnitMap[item.setting_id]" #append>
{{ labelUnitMap[item.setting_id] }}
<template v-if="item.val_type === 'float'">
<ft-input v-model="formData[item.setting_id]" layout-name="number" style="width: 100%">
<template v-if="labelUnitMap[item.setting_id]" #append>
{{ labelUnitMap[item.setting_id] }}
</template>
</ft-input>
</template> </template>
</ft-input>
</template>
<template v-else-if="item.val_type === 'enum'">
<el-select v-model="formData[item.setting_id]" style="width: 100%" placeholder="请选择" readonly>
<el-option v-for="log in item.enums" :key="log" :label="log" :value="log" />
</el-select>
</template>
<template v-else-if="item.val_type === 'boolean'">
<el-radio-group v-model="formData[item.setting_id]">
<el-radio :label="true">
是
</el-radio>
<el-radio :label="false">
否
</el-radio>
</el-radio-group>
</template>
</el-form-item>
<template v-else-if="item.val_type === 'enum'">
<el-select v-model="formData[item.setting_id]" style="width: 100%" placeholder="请选择" readonly>
<el-option v-for="log in item.enums" :key="log" :label="log" :value="log" />
</el-select>
</template>
<template v-else-if="item.val_type === 'boolean'">
<el-radio-group v-model="formData[item.setting_id]">
<el-radio :label="true">
是
</el-radio>
<el-radio :label="false">
否
</el-radio>
</el-radio-group>
</template>
</el-form-item>
</el-col>
</el-row>
</el-form> </el-form>
<div class="default-btn"> <div class="default-btn">
<el-button type="primary" class="config-btn" @click="handleSubmit"> <el-button type="primary" class="config-btn" @click="handleSubmit">

100
src/components/formula/HomeFormulaConfig.vue
View File

@ -45,56 +45,60 @@ const size = 'default'
<template> <template>
<div class="formula-form"> <div class="formula-form">
<el-form :model="formData" disabled label-width="auto" label-position="right" :size="size" inline> <el-form :model="formData" disabled label-width="auto" label-position="right" :size="size" inline>
<el-form-item label="配方名称" style="width: 93%">
<ft-input v-model="formData.name" name="name" placeholder="默认" />
</el-form-item>
<el-form-item
v-for="item in formulaConfigList.filter(data => data.is_visible_in_rt_page)"
:key="item.setting_id"
:label="item.name_ch"
style="width: 50%"
:prop="item.setting_id"
>
<template v-if="item.val_type === 'int'">
<ft-input
v-model.number="formData[item.setting_id]"
style="width: 100%"
:name="item.setting_id"
:controls="false"
>
<template v-if="labelUnitMap[item.setting_id]" #append>
{{ labelUnitMap[item.setting_id] }}
<el-row class="form-row" :gutter="20">
<el-col :span="24">
<el-form-item label="配方名称" style="width: 100%">
<ft-input v-model="formData.name" name="name" placeholder="默认" />
</el-form-item>
</el-col>
<el-col
v-for="item in formulaConfigList.filter(data => data.is_visible_in_rt_page)"
:key="item.setting_id"
:span="12"
>
<el-form-item :label="item.name_ch" :prop="item.setting_id">
<template v-if="item.val_type === 'int'">
<ft-input
v-model.number="formData[item.setting_id]"
style="width: 100%"
:name="item.setting_id"
:controls="false"
>
<template v-if="labelUnitMap[item.setting_id]" #append>
{{ labelUnitMap[item.setting_id] }}
</template>
</ft-input>
</template> </template>
</ft-input>
</template>
<template v-if="item.val_type === 'float'">
<ft-input
v-model.number="formData[item.setting_id]"
style="width: 100%"
:name="item.setting_id"
:controls="false"
>
<template v-if="labelUnitMap[item.setting_id]" #append>
{{ labelUnitMap[item.setting_id] }}
<template v-if="item.val_type === 'float'">
<ft-input
v-model.number="formData[item.setting_id]"
style="width: 100%"
:name="item.setting_id"
:controls="false"
>
<template v-if="labelUnitMap[item.setting_id]" #append>
{{ labelUnitMap[item.setting_id] }}
</template>
</ft-input>
</template> </template>
</ft-input>
</template>
<template v-else-if="item.val_type === 'enum'">
<el-select v-model="formData[item.setting_id]" style="width: 100%" placeholder="请选择" readonly>
<el-option v-for="log in item.enums" :key="log" :label="log" :value="log" />
</el-select>
</template>
<template v-else-if="item.val_type === 'boolean'">
<el-radio-group v-model="formData[item.setting_id]">
<el-radio :label="true">
是
</el-radio>
<el-radio :label="false">
否
</el-radio>
</el-radio-group>
</template>
</el-form-item>
<template v-else-if="item.val_type === 'enum'">
<el-select v-model="formData[item.setting_id]" style="width: 100%" placeholder="请选择" readonly>
<el-option v-for="log in item.enums" :key="log" :label="log" :value="log" />
</el-select>
</template>
<template v-else-if="item.val_type === 'boolean'">
<el-radio-group v-model="formData[item.setting_id]">
<el-radio :label="true">
是
</el-radio>
<el-radio :label="false">
否
</el-radio>
</el-radio-group>
</template>
</el-form-item>
</el-col>
</el-row>
</el-form> </el-form>
</div> </div>
</template> </template>

134
src/components/formula/RunFormulaConfig.vue
View File

@ -61,70 +61,84 @@ const validatePass = (rule: any, value: any, callback: any, config: Formula.Form
<template> <template>
<div class="formula-form"> <div class="formula-form">
<el-form ref="runtimeFormRef" :model="formData" label-width="auto" label-position="right" :size="size" inline>
<el-form-item
v-for="item in formulaConfigList.filter(data => data.is_visible_in_rt_page)"
:key="item.setting_id"
:label="item.name_ch"
style="width: 50%"
:prop="item.setting_id"
:rules="[
{
required: true,
validator: (rule, value, callback) => validatePass(rule, value, callback, item),
trigger: 'blur',
},
]"
>
<template v-if="item.val_type === 'int'">
<ft-input
v-model="formData[item.setting_id]"
<el-form
ref="runtimeFormRef"
:model="formData"
label-width="auto"
label-position="right"
:size="size"
inline
style="overflow: hidden"
>
<el-row :gutter="20">
<el-col
v-for="item in formulaConfigList.filter(data => data.is_visible_in_rt_page)"
:key="item.setting_id"
:span="12"
>
<el-form-item
:label="item.name_ch"
style="width: 100%" style="width: 100%"
:name="item.setting_id"
:controls="false"
:disabled="!item.is_editable"
:prop="item.setting_id"
:rules="[
{
required: true,
validator: (rule, value, callback) => validatePass(rule, value, callback, item),
trigger: 'blur',
},
]"
> >
<template v-if="labelUnitMap[item.setting_id]" #append>
{{ labelUnitMap[item.setting_id] }}
<template v-if="item.val_type === 'int'">
<ft-input
v-model="formData[item.setting_id]"
style="width: 100%"
:name="item.setting_id"
:controls="false"
:disabled="!item.is_editable"
>
<template v-if="labelUnitMap[item.setting_id]" #append>
{{ labelUnitMap[item.setting_id] }}
</template>
</ft-input>
</template> </template>
</ft-input>
</template>
<template v-if="item.val_type === 'float'">
<ft-input
v-model.number="formData[item.setting_id]"
style="width: 100%"
:name="item.setting_id"
:controls="false"
:disabled="!item.is_editable"
>
<template v-if="labelUnitMap[item.setting_id]" #append>
{{ labelUnitMap[item.setting_id] }}
<template v-if="item.val_type === 'float'">
<ft-input
v-model.number="formData[item.setting_id]"
style="width: 100%"
:name="item.setting_id"
:controls="false"
:disabled="!item.is_editable"
>
<template v-if="labelUnitMap[item.setting_id]" #append>
{{ labelUnitMap[item.setting_id] }}
</template>
</ft-input>
</template> </template>
</ft-input>
</template>
<template v-else-if="item.val_type === 'enum'">
<el-select
v-model="formData[item.setting_id]"
v-prevent-keyboard
style="width: 100%"
placeholder="请选择"
:disabled="!item.is_editable"
readonly
>
<el-option v-for="log in item.enums" :key="log" :label="log" :value="log" />
</el-select>
</template>
<template v-else-if="item.val_type === 'boolean'">
<el-radio-group v-model="formData[item.setting_id]" :disabled="!item.is_editable">
<el-radio :label="true">
是
</el-radio>
<el-radio :label="false">
否
</el-radio>
</el-radio-group>
</template>
</el-form-item>
<template v-else-if="item.val_type === 'enum'">
<el-select
v-model="formData[item.setting_id]"
v-prevent-keyboard
style="width: 100%"
placeholder="请选择"
:disabled="!item.is_editable"
readonly
>
<el-option v-for="log in item.enums" :key="log" :label="log" :value="log" />
</el-select>
</template>
<template v-else-if="item.val_type === 'boolean'">
<el-radio-group v-model="formData[item.setting_id]" :disabled="!item.is_editable">
<el-radio :label="true">
是
</el-radio>
<el-radio :label="false">
否
</el-radio>
</el-radio-group>
</template>
</el-form-item>
</el-col>
</el-row>
</el-form> </el-form>
</div> </div>
</template> </template>

107
src/components/formula/SettingFormulaConfig.vue
View File

@ -90,61 +90,68 @@ const validatePass = (rule: any, value: any, callback: any, config: Formula.Form
label-position="right" label-position="right"
:size="size" :size="size"
inline inline
style="overflow: hidden"
> >
<el-form-item
v-for="item in formulaConfigList.filter(data => data.is_visible_in_setting_page)"
:key="item.setting_id"
:label="item.name_ch"
style="width: 50%"
:prop="item.setting_id"
:rules="[
{
required: true,
validator: (rule, value, callback) => validatePass(rule, value, callback, item),
trigger: 'blur',
},
]"
>
<template v-if="item.val_type === 'int'">
<ft-input
v-model="formData[item.setting_id]"
layout-name="number"
<el-row :gutter="20">
<el-col
v-for="item in formulaConfigList.filter(data => data.is_visible_in_setting_page)"
:key="item.setting_id"
:span="12"
>
<el-form-item
:label="item.name_ch"
style="width: 100%" style="width: 100%"
:name="item.setting_id"
:controls="false"
:disabled="!props.editable"
:prop="item.setting_id"
:rules="[
{
required: true,
validator: (rule, value, callback) => validatePass(rule, value, callback, item),
trigger: 'blur',
},
]"
> >
<template v-if="labelUnitMap[item.setting_id]" #append>
{{ labelUnitMap[item.setting_id] }}
<template v-if="item.val_type === 'int'">
<ft-input
v-model="formData[item.setting_id]"
layout-name="number"
style="width: 100%"
:name="item.setting_id"
:controls="false"
:disabled="!props.editable"
>
<template v-if="labelUnitMap[item.setting_id]" #append>
{{ labelUnitMap[item.setting_id] }}
</template>
</ft-input>
</template> </template>
</ft-input>
</template>
<template v-if="item.val_type === 'float'">
<ft-input
v-model="formData[item.setting_id]"
layout-name="number"
style="width: 100%"
:name="item.setting_id"
:controls="false"
:disabled="!props.editable"
>
<template v-if="labelUnitMap[item.setting_id]" #append>
{{ labelUnitMap[item.setting_id] }}
<template v-if="item.val_type === 'float'">
<ft-input
v-model="formData[item.setting_id]"
layout-name="number"
style="width: 100%"
:name="item.setting_id"
:controls="false"
:disabled="!props.editable"
>
<template v-if="labelUnitMap[item.setting_id]" #append>
{{ labelUnitMap[item.setting_id] }}
</template>
</ft-input>
</template> </template>
</ft-input>
</template>
<template v-else-if="item.val_type === 'enum'">
<el-select
v-model="formData[item.setting_id]"
v-prevent-keyboard
style="width: 100%"
placeholder="请选择"
readonly
>
<el-option v-for="log in item.enums" :key="log" :label="log" :value="log" />
</el-select>
</template>
</el-form-item>
<template v-else-if="item.val_type === 'enum'">
<el-select
v-model="formData[item.setting_id]"
v-prevent-keyboard
style="width: 100%"
placeholder="请选择"
readonly
>
<el-option v-for="log in item.enums" :key="log" :label="log" :value="log" />
</el-select>
</template>
</el-form-item>
</el-col>
</el-row>
</el-form> </el-form>
<div class="default-btn"> <div class="default-btn">
<el-button v-if="editable" type="primary" @click="handleSubmit"> <el-button v-if="editable" type="primary" @click="handleSubmit">

39
src/components/home/HomeSetting.vue
View File

@ -1,6 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
import { syncSendCmd } from 'apis/system' import { syncSendCmd } from 'apis/system'
import BtButton from 'components/common/BTButton/index.vue'
import CascadingSelectModal from 'components/common/CascadingSelectModal/index.vue' import CascadingSelectModal from 'components/common/CascadingSelectModal/index.vue'
import RunFormulaConfig from 'components/formula/RunFormulaConfig.vue' import RunFormulaConfig from 'components/formula/RunFormulaConfig.vue'
import Config from 'components/home/config.vue' import Config from 'components/home/config.vue'
@ -191,15 +190,9 @@ const onCloseRuntime = () => {
</div> </div>
<template #footer> <template #footer>
<div class="config-btn"> <div class="config-btn">
<BtButton
button-text="关闭"
border-radius="5px"
width="7rem"
text-size="1.5rem"
text-color="#1989fa"
height="3rem"
@click="onCloseConfig"
/>
<el-button @click="onCloseConfig">
关闭
</el-button>
</div> </div>
</template> </template>
</ft-dialog> </ft-dialog>
@ -212,26 +205,12 @@ const onCloseRuntime = () => {
</div> </div>
<template #footer> <template #footer>
<div class="config-btn"> <div class="config-btn">
<BtButton
button-text="关闭"
border-radius="5px"
width="7rem"
text-size="1.5rem"
text-color="#1989fa"
height="3rem"
@click="onCloseRuntime"
/>
<BtButton
v-if="!deviceState"
bg-color="#1989fa"
button-text="确认"
border-radius="5px"
width="7rem"
text-size="1.5rem"
text-color="#ffffff"
height="3rem"
@click="onSave"
/>
<el-button @click="onCloseRuntime">
关闭
</el-button>
<el-button v-if="!deviceState" type="primary" @click="onSave">
确认
</el-button>
</div> </div>
</template> </template>
</ft-dialog> </ft-dialog>

12
src/components/home/config.vue
View File

@ -102,23 +102,25 @@ const onDefaultFormula = () => {
<template> <template>
<div class="main-content"> <div class="main-content">
<div> <div>
<bt-button type="primary" button-text="选择配方" width="12vw" height="5vh" @click="onChooseFormula">
<el-button type="primary" @click="onChooseFormula">
<template #icon> <template #icon>
<el-icon> <el-icon>
<Plus /> <Plus />
</el-icon> </el-icon>
</template> </template>
</bt-button>
<bt-button button-text="默认配置" height="5vh" width="12vw" @click="onDefaultFormula">
选择配方
</el-button>
<el-button @click="onDefaultFormula">
<template #icon> <template #icon>
<el-icon> <el-icon>
<Operation /> <Operation />
</el-icon> </el-icon>
</template> </template>
</bt-button>
默认配置
</el-button>
</div> </div>
<div class="formula-config"> <div class="formula-config">
<HomeFormulaConfig/>
<HomeFormulaConfig />
</div> </div>
<SelectModal <SelectModal
v-if="isModalOpen" v-if="isModalOpen"

25
src/views/home/chart.vue
View File

@ -222,25 +222,12 @@ const formatSeconds = (seconds: number) => {
</div> </div>
<template #footer> <template #footer>
<div class="config-btn"> <div class="config-btn">
<BtButton
button-text="关闭"
border-radius="5px"
width="7rem"
text-size="1.5rem"
text-color="#1989fa"
height="3rem"
@click="onClose"
/>
<BtButton
bg-color="#1989fa"
button-text="确认"
border-radius="5px"
width="7rem"
text-size="1.5rem"
text-color="#ffffff"
height="3rem"
@click="onSave"
/>
<el-button @click="onClose">
关闭
</el-button>
<el-button type="primary" @click="onSave">
确认
</el-button>
</div> </div>
</template> </template>
</ft-dialog> </ft-dialog>

44
src/views/seal/index.vue
View File

@ -165,6 +165,7 @@ function handleConfirm(value: string) {
</template> </template>
</bt-button> </bt-button>
<bt-button <bt-button
style="margin: 0"
:button-text="stopText" :button-text="stopText"
bg-color="#FF6767" bg-color="#FF6767"
text-color="#FFFFFF" text-color="#FFFFFF"
@ -262,28 +263,29 @@ function handleConfirm(value: string) {
.seal-right { .seal-right {
background: $gradient-color; background: $gradient-color;
display: grid;
grid-template-rows: repeat(3, 1fr);
gap: 20px;
.left-title {
//padding-top: 3.5vw;
padding-left: 2.5vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 30px;
.title-text-test {
display: flex; display: flex;
.title-text-test {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
.title-text {
font-size: 20px;
}
.title-text-kpa {
color: #409eff;
}
.title-kpa-pl {
padding-left: 5px;
font-weight: bold;
}
justify-content: center;
align-items: center;
gap: 5px;
height: 50px;
img {
height: 50%;
}
.title-text {
font-size: 20px;
}
.title-text-kpa {
color: #409eff;
}
.title-kpa-pl {
padding-left: 5px;
font-weight: bold;
} }
} }
.seal-right-btn { .seal-right-btn {

Write Preview
Loading…
Cancel
Save