<template>
|
<div class="report-production-modal">
|
<BaseModal v-model="modelData" :wider="true" @close="closeModal">
|
<template #title> 生产报工 </template>
|
<div class="report-content">
|
<div class="numbers">{{ inputNumber }}</div>
|
<div class="buttons">
|
<BigButton
|
v-for="item in btnList"
|
:key="item"
|
class="btn"
|
:bg-color="getBtnColor(item).bgColor"
|
:color="getBtnColor(item).color"
|
@click="clickBtn(item)"
|
>{{ item }}</BigButton
|
>
|
</div>
|
</div>
|
</BaseModal>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { useVModel } from '@vueuse/core'
|
import BigButton from './BigButton.vue'
|
import { ref, watch } from 'vue'
|
const props = withDefaults(defineProps<{ modelValue: boolean }>(), {
|
modelValue: false
|
})
|
const emit = defineEmits<{
|
'update:modelValue': [show: boolean]
|
submit: [inputNumber: number]
|
close: []
|
}>()
|
const modelData = useVModel(props, 'modelValue', emit)
|
function closeModal() {
|
emit('close')
|
}
|
|
const btnList = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '清除', '0', '确定']
|
function getBtnColor(item: string) {
|
if (item === '清除') {
|
return {
|
color: '#ffffff',
|
bgColor: '#f44336'
|
}
|
} else if (item === '确定') {
|
return {
|
color: '#ffffff',
|
bgColor: '#2196f3'
|
}
|
} else {
|
return {
|
color: '#1a73ff',
|
bgColor: '#f2f2f2'
|
}
|
}
|
}
|
const inputNumber = ref('')
|
function clickBtn(input: string) {
|
if (input === '清除') {
|
inputNumber.value = ''
|
} else if (input === '确定') {
|
emit('submit', +inputNumber.value)
|
} else if (inputNumber.value === '0' && input === '0') {
|
return
|
} else if (inputNumber.value === '0' && input !== '0') {
|
inputNumber.value = input
|
} else {
|
inputNumber.value += input
|
}
|
}
|
watch(modelData, () => {
|
if (modelData.value) {
|
inputNumber.value = ''
|
}
|
})
|
</script>
|
|
<style scoped lang="scss">
|
.report-content {
|
padding: 60px 0 0 230px;
|
height: 520px;
|
}
|
.numbers {
|
height: 80px;
|
border: 1px solid #fff;
|
padding: 0 6px;
|
width: 400px;
|
margin-bottom: 20px;
|
line-height: 80px;
|
text-align: right;
|
font-size: 40px;
|
color: #fff;
|
}
|
.buttons {
|
width: 420px;
|
}
|
.btn {
|
margin-right: 20px;
|
margin-bottom: 20px;
|
width: 120px;
|
height: 70px;
|
}
|
</style>
|
