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

fix: 审计页面;配方页面; 设置页面ui优化; 按钮统一

master
guoapeng 2 weeks ago
parent
3859e2e70a
commit
4bca79cd5b
7 changed files with 153 additions and 189 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      src/components/audit/History.vue
  2. 9
      src/components/audit/OperationRecord.vue
  3. 76
      src/components/formula/FormulaConfig.vue
  4. 30
      src/components/formula/SettingFormulaConfig.vue
  5. 211
      src/layouts/default.vue
  6. 1
      src/views/formula/index.vue
  7. 7
      src/views/setting/index.vue

8
src/components/audit/History.vue
View File

@ -133,10 +133,10 @@ const deleteBtnVisible = computed(() => {
<el-table-column prop="detail" label="操作" width="200">
<template #default="scoped">
<div class="user-opera">
<el-button class="view-button" @click.stop="showDetail(scoped.row)">
<el-button type="primary" @click.stop="showDetail(scoped.row)">
查看
</el-button>
<el-button class="print-button" title="打印" @click.stop="printDetail(scoped.row)">
<el-button type="primary" @click.stop="printDetail(scoped.row)">
打印
</el-button>
</div>
@ -162,7 +162,9 @@ const deleteBtnVisible = computed(() => {
padding: 10px;
background: $gradient-color;
.history-export {
margin: 10px;
height: 50px;
display: flex;
align-items: center;
}
.history-table {
height: 73vh;

9
src/components/audit/OperationRecord.vue
View File

@ -83,12 +83,7 @@ const handleCurrentChange = (page: number) => {
getAuditList()
}
const formatIndex = (
_row: unknown,
_column: TableColumnCtx<unknown>,
_cellValue: unknown,
index: number,
): number => {
const formatIndex = (_row: unknown, _column: TableColumnCtx<unknown>, _cellValue: unknown, index: number): number => {
return (pageNum.value - 1) * pageSize.value + index + 1
}
</script>
@ -121,7 +116,7 @@ const formatIndex = (
background: $gradient-color;
.audit-export {
height: 50px;
padding: 0 10px;
//padding: 0 10px;
display: flex;
align-items: center;
}

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

@ -1,5 +1,4 @@
<script lang="ts" setup>
import SoftKeyboard from 'components/common/SoftKeyboard/index.vue'
import { ElMessage } from 'element-plus'
import { formulaNameMap } from 'libs/constant'
import { cloneDeep } from 'lodash'
@ -14,8 +13,6 @@ const homeStore = useHomeStore()
const formulaStore = useFormulaStore()
const targetInputRef = ref<HTMLInputElement | null>(null)
const isFlip = ref(true)
/**
* 当前表单数据
@ -28,21 +25,6 @@ const formData = ref<Record<string, any>>({})
const inputValue = ref<string>('')
/**
* 软键盘是否可见
*/
const keyboardVisible = ref(false)
/**
* 软键盘类型：'text' 或 'number'
*/
const keyboardType = ref<'text' | 'number'>('number')
/**
* 软键盘组件引用
*/
const softKeyboardRef = ref()
/**
* 当前聚焦的输入字段名称
*/
const focusedInput = ref<string | null>(null)
@ -178,14 +160,6 @@ const deviceState = computed(() => {
return disinfectionState.value.state === 'idle' || disinfectionState.value.state === 'finished'
})
/**
* 确认输入值
* @param {string} value - 输入值
*/
const handleConfirm = (value: string) => {
console.log('确认输入:', value)
}
const size = 'default'
// 新增配方方法
const addFormula = async () => {
@ -229,7 +203,15 @@ const validateName = (rule: any, value: any, callback: any) => {
<template>
<transition name="slide-right">
<div v-if="isFlip" class="formula-form">
<el-form ref="formRef" :model="formData" label-width="auto" label-position="right" :size="size" inline>
<el-form
ref="formRef"
:model="formData"
class="form-box"
label-width="auto"
label-position="right"
:size="size"
inline
>
<el-form-item
label="配方名称"
style="width: 93%"
@ -289,27 +271,11 @@ const validateName = (rule: any, value: any, callback: any) => {
</template>
</el-form-item>
</el-form>
<div>
<slot name="formulaBtn">
<div class="default-btn">
<el-button type="primary" class="config-btn" @click="handleSubmit">
确定
</el-button>
</div>
</slot>
<div class="default-btn">
<el-button type="primary" class="config-btn" @click="handleSubmit">
确定
</el-button>
</div>
<Teleport to="body">
<SoftKeyboard
ref="softKeyboardRef"
v-model="inputValue"
:is-visible="keyboardVisible"
:keyboard-type="keyboardType"
:target-input="targetInputRef"
@confirm="handleConfirm"
@update-keyboard-visible="visible => (keyboardVisible = visible)"
@close="keyboardVisible = false"
/>
</Teleport>
</div>
</transition>
</template>
@ -317,16 +283,20 @@ const validateName = (rule: any, value: any, callback: any) => {
<style lang="scss" scoped>
.formula-form {
font-size: 20px !important;
padding: 5px 5px 5px 15px;
align-items: center;
height: 100%;
.form-box {
height: calc(100% - 50px);
overflow: auto;
}
.default-btn {
margin-top: 1rem;
height: 50px;
display: flex;
justify-content: center;
}
.config-btn {
//height: 3rem;
//width: 8rem;
align-items: center;
.el-button {
width: 100px;
}
}
}

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

@ -84,6 +84,7 @@ const validatePass = (rule: any, value: any, callback: any, config: Formula.Form
<div class="formula-form">
<el-form
ref="settingFormRef"
class="form-box"
:disabled="!props.editable"
:model="formData"
label-width="auto"
@ -146,14 +147,10 @@ const validatePass = (rule: any, value: any, callback: any, config: Formula.Form
</template>
</el-form-item>
</el-form>
<div>
<slot name="formulaBtn">
<div class="default-btn">
<el-button v-if="editable" type="primary" @click="handleSubmit">
确定
</el-button>
</div>
</slot>
<div class="default-btn">
<el-button v-if="editable" type="primary" @click="handleSubmit">
确定
</el-button>
</div>
</div>
</template>
@ -161,17 +158,20 @@ const validatePass = (rule: any, value: any, callback: any, config: Formula.Form
<style lang="scss" scoped>
.formula-form {
font-size: 20px !important;
padding: 5px;
padding-left: 15px;
height: 100%;
align-items: center;
.form-box {
height: calc(100% - 50px);
overflow: auto;
}
.default-btn {
width: 100%;
height: 50px;
display: flex;
justify-content: center;
}
.config-btn {
height: 3rem;
width: 8rem;
align-items: center;
.el-button {
width: 100px;
}
}
}

211
src/layouts/default.vue
View File

@ -227,53 +227,49 @@ const handleCloseAll = async () => {
<div class="logo">
<img src="../assets/images/logo.svg" alt="">
</div>
<div class="header-right">
<div class="header-menu">
<div class="aside">
<el-tag
v-for="item in menuList.filter(item => item.meta!.isDefault)"
:key="item.path"
class="menu-tag"
:class="{ 'aside-item-active': router.currentRoute.value.path.includes(item.path) }"
@click="router.push(item.path)"
>
<template #default>
<div class="menu-tags">
<img
class="swing-icon"
:src="
(router.currentRoute.value.path.includes(item.path)
? item.meta!.activeIcon
: item.meta!.icon) as string
"
alt=""
>
<span class="text" :class="{ 'active-text': router.currentRoute.value.path.includes(item.path) }">{{
item.meta!.title
}}</span>
</div>
</template>
</el-tag>
</div>
</div>
<div class="user">
<span v-if="deviceType === deviceStore.deviceTypeMap.LargeSpaceDM_B">
<img v-if="websocketConnected" width="20" :src="WifiConnSvg" alt="">
<img v-else :src="WifiUnconnSvg" width="20" alt="">
</span>
<el-select v-model="languageType" class="select-language" :disabled="false" @change="toggleLanguage">
<el-option
v-for="language in languages"
:key="language.value"
style="height: 2rem; font-size: 1rem"
:value="language.value"
:label="language.name"
>
{{ language.name }}
</el-option>
</el-select>
<bt-button type="primary" button-text="注销" @click="onLogout" />
</div>
<div class="header-menu">
<el-tag
v-for="item in menuList.filter(item => item.meta!.isDefault)"
:key="item.path"
class="menu-tag"
:class="{ 'aside-item-active': router.currentRoute.value.path.includes(item.path) }"
@click="router.push(item.path)"
>
<template #default>
<div class="menu-tags">
<img
class="swing-icon"
:src="
(router.currentRoute.value.path.includes(item.path)
? item.meta!.activeIcon
: item.meta!.icon) as string
"
alt=""
>
<span class="text" :class="{ 'active-text': router.currentRoute.value.path.includes(item.path) }">{{
item.meta!.title
}}</span>
</div>
</template>
</el-tag>
</div>
<div class="user">
<span v-if="deviceType === deviceStore.deviceTypeMap.LargeSpaceDM_B">
<img v-if="websocketConnected" width="20" :src="WifiConnSvg" alt="">
<img v-else :src="WifiUnconnSvg" width="20" alt="">
</span>
<el-select v-model="languageType" class="select-language" :disabled="false" @change="toggleLanguage">
<el-option
v-for="language in languages"
:key="language.value"
style="height: 2rem; font-size: 1rem"
:value="language.value"
:label="language.name"
>
{{ language.name }}
</el-option>
</el-select>
<bt-button style="margin-left: auto" type="primary" button-text="注销" @click="onLogout" />
</div>
</el-header>
<el-container class="container">
@ -374,6 +370,9 @@ const handleCloseAll = async () => {
.header {
color: #393f46;
box-shadow: 0px 1px 5px 0px rgba(9, 39, 62, 0.15);
display: flex;
padding: 0 10px;
justify-content: center;
.logo {
height: 22px;
@ -398,38 +397,38 @@ const handleCloseAll = async () => {
transition: all 0.3s;
}
}
.header-right {
.header-menu {
flex: 1;
width: 50%;
height: 100%;
display: flex;
padding: 0 10px;
align-items: center;
justify-content: center;
}
.wifi-icon {
width: 40px;
height: 100%;
.header-menu {
width: 68vw;
}
.wifi-icon {
width: 40px;
height: 100%;
background: #fff;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
img {
height: 50%;
}
background: #fff;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
img {
height: 50%;
}
}
.user {
width: 20vw;
//width: 20vw;
text-align: right;
right: 5px;
margin-left: auto;
display: flex;
align-items: center;
gap: 25px;
padding-left: 10px;
.select-language {
width: 100px;
width: 80px;
border-radius: 5px;
margin-right: 5px;
margin: 0 10px;
}
.user-logout {
margin-left: auto;
@ -466,52 +465,48 @@ const handleCloseAll = async () => {
:deep(.el-popover) {
padding: 10px !important;
}
.aside {
overflow: hidden;
padding-left: 10px;
.menu-tag {
height: 36px;
border: 0;
width: 10rem;
display: flex;
border-radius: 3px;
gap: 5px;
font-size: 1.6vw;
background: rgba(0, 0, 0, 0);
transition: all 0.5s;
}
.menu-tags {
display: flex;
align-items: center;
.menu-tag {
height: 36px;
border: 0;
width: 10rem;
display: flex;
gap: 5px;
font-size: 1.6vw;
background: rgba(0, 0, 0, 0);
transition: background-color 0.5s;
}
.menu-tags {
display: flex;
align-items: center;
.text {
padding-left: 10px;
color: #191919;
}
.active-text {
color: #ffffff;
}
.text {
padding-left: 10px;
color: #191919;
}
.aside-item {
height: 50px;
border-radius: 10px;
margin: 10px 0;
padding: 0 10px;
display: flex;
align-items: center;
overflow: hidden;
justify-content: center;
min-width: 6rem;
img {
margin-right: 10px;
}
.active-text {
color: #ffffff;
}
.aside-item-active {
background: #1989fa;
display: flex;
justify-content: center;
}
.aside-item {
height: 50px;
border-radius: 10px;
margin: 10px 0;
padding: 0 10px;
display: flex;
align-items: center;
overflow: hidden;
justify-content: center;
min-width: 6rem;
img {
margin-right: 10px;
}
}
.aside-item-active {
background: #1989fa;
display: flex;
justify-content: center;
border-radius: 10px;
}
.aside-off {
width: 70px;
@ -544,7 +539,7 @@ const handleCloseAll = async () => {
}
.content {
width: 100%;
height: $main-container-height;
height: 100%;
padding: 10px;
}
.footer-expand {

1
src/views/formula/index.vue
View File

@ -82,6 +82,7 @@ const selectedIndexRest = () => {
border-radius: 10px;
overflow: hidden;
position: relative;
padding: 10px;
}
}
</style>

7
src/views/setting/index.vue
View File

@ -38,9 +38,10 @@ const selectItem = (menuCode: string) => {
</div>
</div>
<div class="setting-right">
<div v-if="selectedMenuCode === 'defaultFormula'">
<SettingFormulaConfig :editable="systemStore.systemUser?.roleType === 'admin'" />
</div>
<SettingFormulaConfig
v-if="selectedMenuCode === 'defaultFormula'"
:editable="systemStore.systemUser?.roleType === 'admin'"
/>
<template v-if="selectedMenuCode === 'user'">
<User />
</template>

Write Preview
Loading…
Cancel
Save