<template>
|
<div class="report-production-modal">
|
<BaseModal v-model="modelData" :wider="true" @close="closeModal">
|
<template #title> {{ modelTitle }} </template>
|
<div class="report-content">
|
<div class="r-c-top">
|
<div class="t-common">
|
合格：<span style="color: #00ff00">{{ passAmount }}</span>
|
</div>
|
<div class="t-common">
|
返工：<span style="color: #ff9900">{{ reworkAmount }}</span>
|
</div>
|
<div class="t-common">
|
报废：<span style="color: #ff0000">{{ scrappedAmount }}</span>
|
</div>
|
</div>
|
<div class="r-c-middle">
|
<div>当前可报工数量</div>
|
<div>{{ passAmount }}</div>
|
</div>
|
<div class="r-c-bottom">
|
<BigButton class="btn" :bg-color="'#f44336'" :color="'#ffffff'" @click="closeModal">{{ '取消' }}</BigButton>
|
<BigButton class="btn" :bg-color="'#2196F3'" :color="'#ffffff'" @click="clickBtn">{{ '报工' }}</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
|
modelTitle: string
|
amount?: number
|
passAmount: number
|
reworkAmount: number
|
scrappedAmount: number
|
}>(),
|
{
|
modelValue: false,
|
modelTitle: '',
|
amount: 0,
|
passAmount: 0, // 合格
|
reworkAmount: 0, // 返工
|
scrappedAmount: 0 // 报废
|
}
|
)
|
const emit = defineEmits<{
|
'update:modelValue': [show: boolean]
|
submit: [inputNumber: number]
|
close: []
|
}>()
|
const modelData = useVModel(props, 'modelValue', emit)
|
function closeModal() {
|
emit('close')
|
}
|
|
const inputNumber = ref('')
|
function clickBtn() {
|
emit('submit', +inputNumber.value)
|
}
|
watch(modelData, () => {
|
if (modelData.value) {
|
inputNumber.value = (props.amount ?? '').toString()
|
}
|
})
|
</script>
|
|
<style scoped lang="scss">
|
.report-content {
|
padding: 60px 80px 0;
|
height: 520px;
|
position: relative;
|
.r-c-top {
|
display: flex;
|
font-size: 24px;
|
.t-common {
|
width: 33%;
|
color: #fff;
|
margin-left: 30px;
|
}
|
}
|
.r-c-middle {
|
font-size: 30px;
|
font-weight: 700;
|
color: #fff;
|
text-align: center;
|
margin-top: 120px;
|
}
|
.r-c-bottom {
|
position: absolute;
|
bottom: -20px;
|
right: 60px;
|
.btn {
|
margin-right: 20px;
|
// margin-bottom: 20px;
|
width: 120px;
|
height: 60px;
|
}
|
}
|
}
|
.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>
|
