139 lines
3.2 KiB
Vue
139 lines
3.2 KiB
Vue
<script lang="ts" setup>
|
|
import Uploader from '@/components/uploader/Uploader.vue'
|
|
import Utils from '@/common/utils'
|
|
import ADialog from '@/components/a-dialog/ADialog.vue'
|
|
import FormUtil from '@/common/utils/formUtil.ts'
|
|
import {
|
|
ElMessage,
|
|
type FormInstance,
|
|
} from 'element-plus'
|
|
import OrderApi from '@/pages/order/order-api.ts'
|
|
|
|
const orderData = Utils.resetAble(reactive<{
|
|
id: string
|
|
licensePlate: string,
|
|
state: '进场' | '出场',
|
|
}>({
|
|
id: '',
|
|
licensePlate: '',
|
|
state: '进场',
|
|
}))
|
|
const title = computed(() => {
|
|
return `${orderData.licensePlate} ${orderData.state}`
|
|
})
|
|
|
|
const emits = defineEmits([ 'succ' ])
|
|
|
|
const formIns = useTemplateRef<FormInstance>('formRef')
|
|
|
|
const inOutData = Utils.resetAble(reactive({
|
|
weight: undefined,
|
|
headerPhoto: undefined,
|
|
bodyPhoto: undefined,
|
|
}))
|
|
const showDialog = ref(false)
|
|
const submiting = ref(false)
|
|
|
|
function dialogCloseHandler() {
|
|
inOutData.$reset()
|
|
}
|
|
|
|
function submitHandler() {
|
|
submiting.value = true
|
|
const data = {
|
|
orderTransId: orderData.id,
|
|
weight: (inOutData.weight ?? 0) * 1000,
|
|
frontPhoto: inOutData.headerPhoto,
|
|
bodyPhoto: inOutData.bodyPhoto,
|
|
}
|
|
FormUtil.submit(formIns, () => {
|
|
if (orderData.state === '进场') {
|
|
return OrderApi.truckComing(data).then(() => true)
|
|
} else {
|
|
return OrderApi.truckLeaving(data).then(() => true)
|
|
}
|
|
})
|
|
.then(res => {
|
|
ElMessage.success(`${title.value}成功`)
|
|
if ((res ?? true)) {
|
|
showDialog.value = false
|
|
}
|
|
emits('succ')
|
|
})
|
|
.finally(() => {
|
|
submiting.value = false
|
|
})
|
|
}
|
|
|
|
defineExpose({
|
|
open(id: string, licensePlate: string, state: '进场' | '出场') {
|
|
orderData.$reset({
|
|
id,
|
|
licensePlate,
|
|
state,
|
|
})
|
|
showDialog.value = true
|
|
},
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<ADialog
|
|
v-model:show="showDialog"
|
|
:closed="dialogCloseHandler"
|
|
:submit-handler="submitHandler"
|
|
:title="title"
|
|
>
|
|
<ElForm ref="formRef"
|
|
class="in-out-panel-form"
|
|
@submit.prevent>
|
|
<ElFormItem label="磅重" prop="weight">
|
|
<ElInputNumber v-model="inOutData.weight" :max="200" :min="1" controls-position="right">
|
|
<template #suffix>吨</template>
|
|
</ElInputNumber>
|
|
</ElFormItem>
|
|
<ElFormItem label="车头照" prop="headerPhoto">
|
|
<Uploader v-model:file="inOutData.headerPhoto"/>
|
|
</ElFormItem>
|
|
<ElFormItem label="车斗照" prop="bodyPhoto">
|
|
<Uploader v-model:file="inOutData.bodyPhoto"/>
|
|
</ElFormItem>
|
|
</ElForm>
|
|
<template #footer>
|
|
<ElButton @click="showDialog = false">关闭</ElButton>
|
|
<ElButton :loading="submiting" type="primary" @click="submitHandler">确认{{ orderData.state }}</ElButton>
|
|
</template>
|
|
</ADialog>
|
|
</template>
|
|
|
|
<style lang="stylus" scoped>
|
|
.in-out-panel-form {
|
|
display grid
|
|
grid-template-areas "weight weight" \
|
|
"headerPhoto bodyPhoto"
|
|
gap: 0 20px;
|
|
padding: 10px;
|
|
|
|
:deep(.el-input-number) {
|
|
.el-input__suffix-inner {
|
|
padding-left 10px
|
|
}
|
|
}
|
|
|
|
:deep(.el-form-item) {
|
|
&:nth-child(1) {
|
|
grid-area weight
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
grid-area headerPhoto
|
|
}
|
|
|
|
&:nth-child(3) {
|
|
grid-area bodyPhoto
|
|
}
|
|
}
|
|
}
|
|
</style>
|