6 changed files with 347 additions and 36 deletions
@ -0,0 +1,197 @@ |
|||||||
|
<template> |
||||||
|
<EdfsDialog |
||||||
|
class="plf-strategy-dlg" |
||||||
|
:title="title" |
||||||
|
:isShow="visibility" |
||||||
|
width="20%" |
||||||
|
@on-close="onClone" |
||||||
|
@on-save="onSave" |
||||||
|
> |
||||||
|
<div class="dlg-body"> |
||||||
|
<el-row> |
||||||
|
<div class="label">设置系数：</div> |
||||||
|
<div class="box"> |
||||||
|
<div |
||||||
|
class="operator-btn" |
||||||
|
:class="{ active: formData.operator === '/' }" |
||||||
|
@click="formData.operator = '/'" |
||||||
|
> |
||||||
|
除 |
||||||
|
</div> |
||||||
|
<div class="custom-stepper"> |
||||||
|
<div class="stepper-btn minus" @click="decrease">-</div> |
||||||
|
<div class="stepper-input">{{ formData.coefficient }}</div> |
||||||
|
<div class="stepper-btn plus" @click="increase">+</div> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
class="operator-btn" |
||||||
|
:class="{ active: formData.operator === '*' }" |
||||||
|
@click="formData.operator = '*'" |
||||||
|
> |
||||||
|
乘 |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-row> |
||||||
|
</div> |
||||||
|
</EdfsDialog> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script setup lang="ts"> |
||||||
|
import { cloneDeep } from 'lodash' |
||||||
|
import EdfsDialog from '@/components/Edfs-dialog.vue' |
||||||
|
|
||||||
|
const emits = defineEmits(['on-save', 'on-close']) |
||||||
|
const title = ref() |
||||||
|
|
||||||
|
const createObj = { |
||||||
|
id: '', |
||||||
|
coefficient: 1, |
||||||
|
operator: '*', |
||||||
|
} |
||||||
|
|
||||||
|
const formData = ref(cloneDeep(createObj)) as any |
||||||
|
|
||||||
|
function onClone() { |
||||||
|
formData.value = cloneDeep(createObj) |
||||||
|
visibility.value = false |
||||||
|
emits('on-close') |
||||||
|
} |
||||||
|
|
||||||
|
async function onSave() { |
||||||
|
emits('on-save', cloneDeep(formData.value)) |
||||||
|
onClone() |
||||||
|
} |
||||||
|
|
||||||
|
const visibility = ref(false) |
||||||
|
function open(titleStr: string, id: string, coefficient: string, operator: string) { |
||||||
|
title.value = titleStr |
||||||
|
formData.value.id = id |
||||||
|
if (coefficient) { |
||||||
|
formData.value.coefficient = Number(coefficient) |
||||||
|
} |
||||||
|
if (operator) { |
||||||
|
formData.value.operator = operator |
||||||
|
} |
||||||
|
visibility.value = true |
||||||
|
} |
||||||
|
|
||||||
|
const ALLOWED_VALUES = [1, 10, 100, 1000] |
||||||
|
|
||||||
|
function decrease() { |
||||||
|
const currentIndex = ALLOWED_VALUES.indexOf(formData.value.coefficient) |
||||||
|
if (currentIndex > 0) { |
||||||
|
formData.value.coefficient = ALLOWED_VALUES[currentIndex - 1] |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function increase() { |
||||||
|
const currentIndex = ALLOWED_VALUES.indexOf(formData.value.coefficient) |
||||||
|
if (currentIndex < ALLOWED_VALUES.length - 1) { |
||||||
|
formData.value.coefficient = ALLOWED_VALUES[currentIndex + 1] |
||||||
|
} else if (currentIndex === -1) { |
||||||
|
formData.value.coefficient = 1 |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
defineExpose({ |
||||||
|
open, |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="scss"> |
||||||
|
.plf-strategy-dlg { |
||||||
|
.dlg-body { |
||||||
|
} |
||||||
|
.el-row { |
||||||
|
height: 32px; |
||||||
|
margin-bottom: 20px; |
||||||
|
:deep(.label) { |
||||||
|
margin-right: 10px; |
||||||
|
line-height: 32px; |
||||||
|
width: 100px; |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
span { |
||||||
|
margin-right: 10px; |
||||||
|
width: 110px; |
||||||
|
height: 32px; |
||||||
|
line-height: 32px; |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
:deep(.el-radio-group) { |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
:deep(.el-radio) { |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
.box { |
||||||
|
display: flex; |
||||||
|
gap: 10px; |
||||||
|
} |
||||||
|
.operator-btn { |
||||||
|
width: 40px; |
||||||
|
height: 32px; |
||||||
|
line-height: 32px; |
||||||
|
text-align: center; |
||||||
|
border: 1px solid var(--el-border-color); |
||||||
|
cursor: pointer; |
||||||
|
border-radius: var(--el-border-radius-base); |
||||||
|
color: var(--el-text-color-regular); |
||||||
|
background-color: var(--el-bg-color); |
||||||
|
&.active { |
||||||
|
background-color: var(--el-color-primary); |
||||||
|
color: var(--el-color-white); |
||||||
|
border-color: var(--el-color-primary); |
||||||
|
} |
||||||
|
&:hover:not(.active) { |
||||||
|
color: var(--el-color-primary); |
||||||
|
border-color: var(--el-color-primary-light-7); |
||||||
|
background-color: var(--el-color-primary-light-9); |
||||||
|
} |
||||||
|
} |
||||||
|
.mx-2 { |
||||||
|
margin: 0 10px; |
||||||
|
} |
||||||
|
.custom-stepper { |
||||||
|
display: flex; |
||||||
|
border: 1px solid var(--el-border-color); |
||||||
|
border-radius: var(--el-border-radius-base); |
||||||
|
height: 32px; |
||||||
|
overflow: hidden; |
||||||
|
background-color: var(--el-bg-color); |
||||||
|
|
||||||
|
.stepper-btn { |
||||||
|
width: 32px; |
||||||
|
height: 100%; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
background-color: var(--el-fill-color-light); |
||||||
|
cursor: pointer; |
||||||
|
user-select: none; |
||||||
|
color: var(--el-text-color-regular); |
||||||
|
transition: all 0.3s; |
||||||
|
&:hover { |
||||||
|
color: var(--el-color-primary); |
||||||
|
background-color: var(--el-color-primary-light-9); |
||||||
|
} |
||||||
|
&.minus { |
||||||
|
border-right: 1px solid var(--el-border-color); |
||||||
|
} |
||||||
|
&.plus { |
||||||
|
border-left: 1px solid var(--el-border-color); |
||||||
|
} |
||||||
|
} |
||||||
|
.stepper-input { |
||||||
|
flex: 1; |
||||||
|
min-width: 50px; |
||||||
|
text-align: center; |
||||||
|
line-height: 30px; |
||||||
|
font-size: 14px; |
||||||
|
color: var(--el-text-color-regular); |
||||||
|
background-color: var(--el-bg-color); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue