|
|
@@ -0,0 +1,548 @@
|
|
|
+<template>
|
|
|
+ <CusDialog
|
|
|
+ :show="show"
|
|
|
+ :title="titleCpt"
|
|
|
+ @onClose="$emit('update:show', false)"
|
|
|
+ width="1300px"
|
|
|
+ height="auto"
|
|
|
+ :loading="state.loading"
|
|
|
+ :closeConfirm="noViewCpt"
|
|
|
+ :show-submit="noViewCpt"
|
|
|
+ >
|
|
|
+ <div class="__normal-form">
|
|
|
+ <CusTab
|
|
|
+ :tabs="[
|
|
|
+ { name: '物品申报', value: 1 },
|
|
|
+ { name: '购票信息', value: 2 },
|
|
|
+ { name: '采集信息', value: 3 },
|
|
|
+ { name: '海关放行指令', value: 4 },
|
|
|
+ { name: '离岛信息', value: 5 },
|
|
|
+ ]"
|
|
|
+ type="type3"
|
|
|
+ v-model:param="state.tab"
|
|
|
+ />
|
|
|
+ <CusForm ref="ref_form" label-width="120px" :form-view="!noViewCpt">
|
|
|
+ <template v-if="state.tab == 1">
|
|
|
+ <div class="block block-1">
|
|
|
+ <div class="form">
|
|
|
+ <div class="left">
|
|
|
+ <div class="block-title">
|
|
|
+ <div>王三石</div>
|
|
|
+ <div>120120120120120120</div>
|
|
|
+ </div>
|
|
|
+ <CusFormColumn
|
|
|
+ :span="24"
|
|
|
+ label="航次(班)"
|
|
|
+ v-model:param="state.form.p1"
|
|
|
+ />
|
|
|
+ <CusFormColumn
|
|
|
+ :span="24"
|
|
|
+ label="出岛口岸"
|
|
|
+ v-model:param="state.form.p1"
|
|
|
+ />
|
|
|
+ <CusFormColumn
|
|
|
+ :span="24"
|
|
|
+ label="航次(班)日期"
|
|
|
+ v-model:param="state.form.p1"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <img src="./img/shui.png"/>
|
|
|
+ <div class="infos">
|
|
|
+ <div>需补税费:</div>
|
|
|
+ <div>
|
|
|
+ <SvgIcon name="money" color="#ffffff"/>
|
|
|
+ <div class="money">5498.32</div>
|
|
|
+ <div>元</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div>申报时间：</div>2024-12-12 11:12:23
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div>海关回执时间：</div>2024-12-12 11:12:23
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="len">有价物品：{{state.query.result.data.length}}件</div>
|
|
|
+ <CusTable
|
|
|
+ class="auto-table"
|
|
|
+ :table-data="state.query.result.data"
|
|
|
+ :table-head="state.query.tableHead"
|
|
|
+ :no-foot="true"
|
|
|
+ :max-height="400"
|
|
|
+ >
|
|
|
+ </CusTable>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="state.tab == 2">
|
|
|
+ <div class="block block-2">
|
|
|
+ <div class="block-title">
|
|
|
+ <div>王三石</div>
|
|
|
+ <div>120120120120120120</div>
|
|
|
+ </div>
|
|
|
+ <el-row>
|
|
|
+ <CusFormColumn
|
|
|
+ :span="8"
|
|
|
+ label="车牌号"
|
|
|
+ v-model:param="state.form.p1"
|
|
|
+ />
|
|
|
+ <CusFormColumn
|
|
|
+ :span="8"
|
|
|
+ label="购票时间"
|
|
|
+ v-model:param="state.form.p1"
|
|
|
+ />
|
|
|
+ <CusFormColumn
|
|
|
+ :span="8"
|
|
|
+ label="船次信息"
|
|
|
+ v-model:param="state.form.p1"
|
|
|
+ />
|
|
|
+ <CusFormColumn
|
|
|
+ :span="8"
|
|
|
+ label="开航时间"
|
|
|
+ v-model:param="state.form.p1"
|
|
|
+ />
|
|
|
+ <CusFormColumn
|
|
|
+ :span="8"
|
|
|
+ label="抵航时间"
|
|
|
+ v-model:param="state.form.p1"
|
|
|
+ />
|
|
|
+ <CusFormColumn
|
|
|
+ :span="8"
|
|
|
+ label="开航港口"
|
|
|
+ v-model:param="state.form.p1"
|
|
|
+ />
|
|
|
+ <CusFormColumn
|
|
|
+ :span="8"
|
|
|
+ label="抵达港口"
|
|
|
+ v-model:param="state.form.p1"
|
|
|
+ />
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="state.tab == 3">
|
|
|
+ <div class="block block-3">
|
|
|
+ <div class="left">
|
|
|
+ <div class="block-title">
|
|
|
+ <div>王三石</div>
|
|
|
+ <div>120120120120120120</div>
|
|
|
+ </div>
|
|
|
+ <el-row>
|
|
|
+ <CusFormColumn
|
|
|
+ :span="24"
|
|
|
+ label="航次(班)"
|
|
|
+ v-model:param="state.form.p1"
|
|
|
+ />
|
|
|
+ <CusFormColumn
|
|
|
+ :span="24"
|
|
|
+ label="采集时间"
|
|
|
+ v-model:param="state.form.p1"
|
|
|
+ />
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="img"></div>
|
|
|
+ <div class="img"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="state.tab == 4">
|
|
|
+ <div class="block block-4">
|
|
|
+ <div class="block-title">
|
|
|
+ <div>琼A12345</div>
|
|
|
+ </div>
|
|
|
+ <el-row>
|
|
|
+ <CusFormColumn
|
|
|
+ :span="8"
|
|
|
+ label="时间"
|
|
|
+ v-model:param="state.form.p1"
|
|
|
+ />
|
|
|
+ <CusFormColumn
|
|
|
+ :span="8"
|
|
|
+ label="场站编号"
|
|
|
+ v-model:param="state.form.p1"
|
|
|
+ />
|
|
|
+ <CusFormColumn
|
|
|
+ :span="8"
|
|
|
+ label="通道编号"
|
|
|
+ v-model:param="state.form.p1"
|
|
|
+ />
|
|
|
+ <CusFormColumn
|
|
|
+ :span="8"
|
|
|
+ label="运输批次"
|
|
|
+ v-model:param="state.form.p1"
|
|
|
+ />
|
|
|
+ <CusFormColumn
|
|
|
+ :span="8"
|
|
|
+ label="处理结果"
|
|
|
+ v-model:param="state.form.p1"
|
|
|
+ />
|
|
|
+ </el-row>
|
|
|
+ <div class="status-foot">
|
|
|
+ <SvgIcon name="tips" size="24" color="rgba(255, 0, 46, 1)"/>
|
|
|
+ LED显示：需查验！
|
|
|
+ </div>
|
|
|
+ <div class="status-img">
|
|
|
+ <img src="./img/flag.png">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="state.tab == 5">
|
|
|
+ <div class="block block-5">
|
|
|
+ <div class="left">
|
|
|
+ <div class="block-title">
|
|
|
+ <div>琼A12345</div>
|
|
|
+ </div>
|
|
|
+ <el-row>
|
|
|
+ <CusFormColumn
|
|
|
+ :span="12"
|
|
|
+ label="进港时间"
|
|
|
+ v-model:param="state.form.p1"
|
|
|
+ />
|
|
|
+ <CusFormColumn
|
|
|
+ :span="12"
|
|
|
+ label="离岛时间"
|
|
|
+ v-model:param="state.form.p1"
|
|
|
+ />
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="port">
|
|
|
+ <div>清澜港</div>
|
|
|
+ <img src="./img/bottom.png"/>
|
|
|
+ </div>
|
|
|
+ <div class="link">
|
|
|
+ <div>HN204</div>
|
|
|
+ </div>
|
|
|
+ <div class="port">
|
|
|
+ <div>清澜港</div>
|
|
|
+ <img src="./img/bottom.png"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="block block-5">
|
|
|
+ <div class="left">
|
|
|
+ <div class="block-title">
|
|
|
+ <div>王三石</div>
|
|
|
+ <div>120120120120120</div>
|
|
|
+ </div>
|
|
|
+ <el-row>
|
|
|
+ <CusFormColumn
|
|
|
+ :span="12"
|
|
|
+ label="承运车车牌号"
|
|
|
+ v-model:param="state.form.p1"
|
|
|
+ />
|
|
|
+ <CusFormColumn
|
|
|
+ :span="12"
|
|
|
+ label="关联单证"
|
|
|
+ v-model:param="state.form.p1"
|
|
|
+ />
|
|
|
+ <CusFormColumn
|
|
|
+ :span="12"
|
|
|
+ label="承运船舶名称"
|
|
|
+ v-model:param="state.form.p1"
|
|
|
+ />
|
|
|
+ <CusFormColumn
|
|
|
+ :span="12"
|
|
|
+ label="场所代码"
|
|
|
+ v-model:param="state.form.p1"
|
|
|
+ />
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="port">
|
|
|
+ <div>清澜港</div>
|
|
|
+ <img src="./img/bottom.png"/>
|
|
|
+ <div>2024-08-28 12:00:34</div>
|
|
|
+ </div>
|
|
|
+ <div class="link">
|
|
|
+ <div>HN204</div>
|
|
|
+ </div>
|
|
|
+ <div class="port">
|
|
|
+ <div>清澜港</div>
|
|
|
+ <img src="./img/bottom.png"/>
|
|
|
+ <div>2024-08-28 12:00:34</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </CusForm>
|
|
|
+ </div>
|
|
|
+ </CusDialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import {computed, getCurrentInstance, nextTick, reactive, ref, watch} from "vue";
|
|
|
+import {ElMessage, ElMessageBox} from "element-plus";
|
|
|
+
|
|
|
+const emit = defineEmits(['update:show', 'refresh'])
|
|
|
+const {proxy} = getCurrentInstance()
|
|
|
+const props = defineProps({
|
|
|
+ show: {default: false},
|
|
|
+ transfer: {}
|
|
|
+})
|
|
|
+const state: any = reactive({
|
|
|
+ tab: 1,
|
|
|
+ loading: false,
|
|
|
+ form: {},
|
|
|
+ query: {
|
|
|
+ loading: false,
|
|
|
+ tableHead: [
|
|
|
+ {value: "p1", label: "物品名称", show: true},
|
|
|
+ {value: "p1", label: "数量", show: true},
|
|
|
+ {value: "p1", label: "需补缴税费(元)", show: true},
|
|
|
+ ],
|
|
|
+ result: {
|
|
|
+ data: [{p1: '单肩包单肩包'},{p1: '单肩包单肩包单肩包单肩包单肩包单肩包单肩包单肩包单肩包单肩包单肩包单肩包'},{},{}]
|
|
|
+ }
|
|
|
+ },
|
|
|
+})
|
|
|
+const ref_form = ref()
|
|
|
+const titleCpt = computed(() => {
|
|
|
+ let t = '详情'
|
|
|
+ switch (props.transfer.mode) {
|
|
|
+ case 'view': t = '查看' + t
|
|
|
+ break
|
|
|
+ }
|
|
|
+ return t
|
|
|
+})
|
|
|
+const noViewCpt = computed(() => props.transfer?.mode !== 'view')
|
|
|
+watch(() => props.show, (n) => {
|
|
|
+ if (n) {
|
|
|
+ state.tab = 1
|
|
|
+ initDictionary()
|
|
|
+ state.form = {}
|
|
|
+ if (props.transfer.mode !== 'add') {
|
|
|
+ initData()
|
|
|
+ }
|
|
|
+ nextTick(() => {
|
|
|
+ ref_form.value.reset()
|
|
|
+ })
|
|
|
+ }
|
|
|
+})
|
|
|
+const initData = () => {
|
|
|
+ state.form = {
|
|
|
+ p1: '海口16号',
|
|
|
+ }
|
|
|
+}
|
|
|
+const initDictionary = () => {
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.__normal-form {
|
|
|
+ padding: 16px 24px 0 24px;
|
|
|
+ .block {
|
|
|
+ width: 100%;
|
|
|
+ background: rgba(0,0,0,0.2);
|
|
|
+ border-radius: 8px 8px 8px 8px;
|
|
|
+ margin-top: 16px;
|
|
|
+ padding: 24px;
|
|
|
+ overflow: hidden;
|
|
|
+ .block-title {
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ background: rgba(38,110,255,0.1);
|
|
|
+ border-radius: 4px 4px 4px 4px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding-left: 16px;
|
|
|
+ gap: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ margin-bottom: 24px;
|
|
|
+ >:nth-child(1) {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ &:before {
|
|
|
+ content: '';
|
|
|
+ background-image: url("./img/title-icon.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width: 29px;
|
|
|
+ height: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .block-1 {
|
|
|
+ .form {
|
|
|
+ display: flex;
|
|
|
+ gap: 24px;
|
|
|
+ .left {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ width: 479px;
|
|
|
+ height: 204px;
|
|
|
+ background: linear-gradient( 180deg, rgba(0, 163, 255, 0.5) 0%, rgba(0, 71, 255, 0.5) 100%), radial-gradient( 10% 46% at 78% 86%, rgba(101, 152, 255, 0.1) 0%, rgba(12, 98, 216, 0.1) 24%, rgba(0,71,255,0) 100%), rgba(0,0,0,0.9);
|
|
|
+ box-shadow: inset 0px 0px 10px 0px #0085FF;
|
|
|
+ border-radius: 0px 0px 0px 0px;
|
|
|
+ border: 1px solid;
|
|
|
+ border-image: linear-gradient(180deg, rgba(0, 163, 255, 0), rgba(0, 102, 255, 0.3), rgba(0, 102, 255, 1)) 1 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ >img {
|
|
|
+ margin-left: 32px;
|
|
|
+ margin-right: 32px;
|
|
|
+ width: 99px;
|
|
|
+ height: 99px;
|
|
|
+ }
|
|
|
+ .infos {
|
|
|
+ >:nth-child(1) {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 24px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 28px;
|
|
|
+ }
|
|
|
+ >:nth-child(2) {
|
|
|
+ display: flex;
|
|
|
+ gap: 4px;
|
|
|
+ margin-left: 20px;
|
|
|
+ .money {
|
|
|
+ font-family: DIN, DIN;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 42px;
|
|
|
+ color: rgba(255, 165, 61, 1);
|
|
|
+ padding-top: 10px;
|
|
|
+ }
|
|
|
+ >:nth-child(3) {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ >:nth-child(1), >:nth-child(3) {
|
|
|
+ margin-top: 34px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ >:nth-child(3), >:nth-child(4) {
|
|
|
+ margin-top: 6px;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ >:nth-child(1) {
|
|
|
+ width: 120px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .len {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #00C27C;
|
|
|
+ line-height: 19px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .block-3 {
|
|
|
+ display: flex;
|
|
|
+ gap: 24px;
|
|
|
+ .left {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ display: flex;
|
|
|
+ gap: 24px;
|
|
|
+ .img {
|
|
|
+ width: 270px;
|
|
|
+ height: 152px;
|
|
|
+ border-radius: 2px 2px 2px 2px;
|
|
|
+ border: 1px solid #6EAEFF;
|
|
|
+ >img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .block-4 {
|
|
|
+ position: relative;
|
|
|
+ .status-foot {
|
|
|
+ position: absolute;
|
|
|
+ width: calc(100% - 24px * 2);
|
|
|
+ height: 46px;
|
|
|
+ background: linear-gradient( 90deg, rgba(255,0,46,0) 0%, rgba(255, 0, 46, 0.44) 51%, rgba(255,0,46,0) 100%), rgba(255,0,46,0.1);
|
|
|
+ border: 1px solid #992C5B;
|
|
|
+ border-left: none;
|
|
|
+ border-right: none;
|
|
|
+ bottom: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 22px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ .svg-icon {
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .status-img {
|
|
|
+ position: absolute;
|
|
|
+ top: 40px;
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .block-5 {
|
|
|
+ display: flex;
|
|
|
+ gap: 24px;
|
|
|
+ .left {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ width: 590px;
|
|
|
+ height: 152px;
|
|
|
+ background: linear-gradient( 180deg, rgba(0, 163, 255, 0.5) 0%, rgba(0, 71, 255, 0.5) 100%), radial-gradient( 10% 46% at 78% 86%, rgba(101, 152, 255, 0.1) 0%, rgba(12, 98, 216, 0.1) 24%, rgba(0,71,255,0) 100%), rgba(0,0,0,0.9);
|
|
|
+ box-shadow: inset 0px 0px 10px 0px #0085FF;
|
|
|
+ border-radius: 0px 0px 0px 0px;
|
|
|
+ border: 1px solid;
|
|
|
+ border-image: linear-gradient(180deg, rgba(0, 163, 255, 0), rgba(0, 102, 255, 0.3), rgba(0, 102, 255, 1)) 1 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 30px;
|
|
|
+ .port {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ text-align: center;
|
|
|
+ gap: 5px;
|
|
|
+ >img {
|
|
|
+ width: 160px;
|
|
|
+ }
|
|
|
+ >:nth-child(1) {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 24px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 28px;
|
|
|
+ }
|
|
|
+ >:nth-child(3) {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 19px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .link {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 19px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ text-align: center;
|
|
|
+ &:after {
|
|
|
+ content: '';
|
|
|
+ background-image: url("./img/link.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width: 104px;
|
|
|
+ height: 9px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
CzRger
