92 lines
2.5 KiB
Vue
92 lines
2.5 KiB
Vue
<script lang="ts" setup>
|
||
let props = defineProps<{
|
||
container?: HTMLElement;
|
||
}>()
|
||
const show = ref(false)
|
||
const ins = ref<HTMLElement | null>(null)
|
||
const data = reactive<DisposeRecodeTypes.DisposeRecodeData>({
|
||
id: '',
|
||
origin: '',
|
||
clearingCompany: '',
|
||
licensePlate: '',
|
||
contact: '',
|
||
contactPhone: '',
|
||
inWeight: '',
|
||
outWeight: '',
|
||
suttleWeight: '',
|
||
inTime: '',
|
||
outTime: '',
|
||
disposalSite: '',
|
||
})
|
||
|
||
onMounted(() => {
|
||
let container = props.container
|
||
if (container) {
|
||
container.style.position = 'relative'
|
||
}
|
||
})
|
||
|
||
defineExpose({
|
||
open(detail: DisposeRecodeTypes.DisposeRecodeData) {
|
||
Object.assign(data, detail)
|
||
show.value = true
|
||
}
|
||
})
|
||
|
||
</script>
|
||
|
||
<template>
|
||
<IxModal ref="ins" v-model:visible="show" :container="container" :mask="false" cancel-text="关闭" class="dispose-recode-detail" draggable header="详情" maskClosable type="default" width="40rem">
|
||
<p class="detail-item"><span>来源地：</span><span>{{ data.origin }}</span></p>
|
||
<p class="detail-item"><span>清运公司：</span><span>{{ data.clearingCompany }}</span></p>
|
||
<p class="detail-item"><span>车牌号：</span><span>{{ data.licensePlate }}</span></p>
|
||
<p class="detail-item"><span>联系人：</span><span>{{ data.contact }}</span></p>
|
||
<p class="detail-item"><span>联系电话：</span><span>{{ data.contactPhone }}</span></p>
|
||
<p class="detail-item"><span>进场磅重（吨）：</span><span>{{ data.inWeight }}</span></p>
|
||
<p class="detail-item"><span>出场磅重（吨）：</span><span>{{ data.outWeight }}</span></p>
|
||
<p class="detail-item"><span>净重（吨）：</span><span>{{ data.suttleWeight }}</span></p>
|
||
<p class="detail-item"><span>进场时间：</span><span>{{ data.inTime }}</span></p>
|
||
<p class="detail-item"><span>出场时间：</span><span>{{ data.outTime }}</span></p>
|
||
<p class="detail-item"><span>消纳场名称：</span><span>{{ data.disposalSite }}</span></p>
|
||
<template #footer="{ cancel:_, ok }">
|
||
<IxButton mode="primary" @click="ok">确定</IxButton>
|
||
</template>
|
||
</IxModal>
|
||
</template>
|
||
|
||
<style lang="stylus" scoped>
|
||
.dispose-recode-detail .detail-item:not(:last-child) {
|
||
border-bottom: 1px #E5E7EB dashed;
|
||
padding-bottom: 0.5rem;
|
||
}
|
||
|
||
:deep(.ix-modal-wrapper),
|
||
:deep(.ix-mask) {
|
||
position absolute
|
||
}
|
||
|
||
.detail-item {
|
||
display flex
|
||
justify-content start
|
||
align-items center
|
||
|
||
span:nth-child(1) {
|
||
flex 10
|
||
font-weight bold
|
||
}
|
||
|
||
span:nth-child(2) {
|
||
flex 14
|
||
text-align end
|
||
padding-right 10%
|
||
}
|
||
|
||
|
||
span {
|
||
display inline-block
|
||
color #1D2129
|
||
font-size 1.25rem
|
||
}
|
||
}
|
||
</style>
|