6 changed files with 347 additions and 36 deletions
@ -0,0 +1,197 @@
@@ -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