lijingjia
/
ds-wms-client-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

框架重构

Browse Source
frame
lijingjia 2 days ago
parent 658979f6ab
commit 203075c55b
11 changed files with 316 additions and 286 deletions
Show Stats Download Patch File Download Diff File

2
index.html
Unescape Escape View File

@ -10,7 +10,7 @@
/> />
<title><%= title %></title> <title><%= title %></title>
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_3756681_boclsb2vb14.css" /> <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3756681_wqiwqo0ahpj.css" />
</head> </head>
<body> <body>
<script> <script>

21
src/components/Basic/src/BasicArrow.vue
Unescape Escape View File

@ -1,15 +1,15 @@
<!-- <!--
* @Author: Vben * @Desc:
* @Description: Arrow component with animation * @Author: lijj
* @Date: 2024-07-17 08:39:50
--> -->
<template> <template>
<span :class="getClass"> <span :class="getClass">
<Icon icon="ion:chevron-forward" style="font-size: 12px;" /> <span class="iconfont icon-zhankaishouqi-xiao-danse"></span>
</span> </span>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed } from 'vue' import { computed } from 'vue'
import { Icon } from '/@/components/Icon'
import { useDesign } from '/@/hooks/web/useDesign' import { useDesign } from '/@/hooks/web/useDesign'
const props = defineProps({ const props = defineProps({
@ -49,16 +49,17 @@
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@prefix-cls: ~'@{namespace}-basic-arrow'; @prefix-cls: ~'@{namespace}-basic-arrow';
.@{prefix-cls} { .@{prefix-cls} {
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
transform: rotate(0deg); transform: rotate(0deg);
transition: all 0.3s ease 0.1s; transition: all 0.3s ease 0.1s;
transform-origin: center center; transform-origin: center center;
.icon-zhankaishouqi-xiao-danse {
margin: 0;
}
&--active { &--active {
transform: rotate(90deg); transform: rotate(180deg);
} }
&.inset { &.inset {
@ -66,15 +67,15 @@
} }
&.up { &.up {
transform: rotate(-90deg); transform: rotate(-0deg);
} }
&.down { &.down {
transform: rotate(90deg); transform: rotate(180deg);
} }
&.up.@{prefix-cls}--active { &.up.@{prefix-cls}--active {
transform: rotate(90deg); transform: rotate(180deg);
} }
&.down.@{prefix-cls}--active { &.down.@{prefix-cls}--active {

27
src/components/Form/src/components/FormAction.vue
Unescape Escape View File

@ -26,23 +26,24 @@
<slot name="advanceBefore"></slot> <slot name="advanceBefore"></slot>
<a-button <a-button
v-if="showAdvancedButton && !hideAdvanceBtn" v-if="showAdvancedButton && !hideAdvanceBtn"
type="link" :class="{'ds-tb-form-tg-h': getDarkMode == 'black', 'ds-tb-form-tg-l': getDarkMode == 'blue', 'ds-tb-form-tg-b': getDarkMode == 'white'}"
size="small" size="small"
@click="toggleAdvanced" @click="toggleAdvanced"
> >
<BasicArrow :style="{color: '#257AFA'}" :expand="!isAdvanced" up /> <BasicArrow :expand="!isAdvanced" up />
<span id="formFold" style="margin-left: 3px;">{{ isAdvanced ? t('component.form.putAway') : t('component.form.unfold') }}</span> <!-- <span id="formFold" style="margin-left: 3px;">{{ isAdvanced ? t('component.form.putAway') : t('component.form.unfold') }}</span> -->
</a-button> </a-button>
<slot name="advanceAfter"></slot> <slot name="advanceAfter"></slot>
<slot name="resetBefore"></slot> <slot name="resetBefore"></slot>
<Button <Button
:class="{'ds-tb-form-tg-h': getDarkMode == 'black', 'ds-tb-form-tg-l': getDarkMode == 'blue', 'ds-tb-form-tg-b': getDarkMode == 'white'}"
v-if="showResetButton" v-if="showResetButton"
type="default" size="small"
class="mr-2"
v-bind="getResetBtnOptions" v-bind="getResetBtnOptions"
@click="resetAction" @click="resetAction"
> >
{{ getResetBtnOptions.text }} <span class="iconfont icon-zhongzhi-xiao-danse"></span>
<!-- {{ getResetBtnOptions.text }} -->
</Button> </Button>
<!-- <slot name="submitBefore"></slot> --> <!-- <slot name="submitBefore"></slot> -->
@ -75,7 +76,7 @@
import { useI18n } from '/@/hooks/web/useI18n' import { useI18n } from '/@/hooks/web/useI18n'
import { propTypes } from '/@/utils/propTypes' import { propTypes } from '/@/utils/propTypes'
import AdvancedSearch from './AdvancedSearch.vue' import AdvancedSearch from './AdvancedSearch.vue'
import { useRootSetting } from '/@/hooks/setting/useRootSetting'
type ButtonOptions = Partial<ButtonProps> & { text: string } type ButtonOptions = Partial<ButtonProps> & { text: string }
export default defineComponent({ export default defineComponent({
@ -180,10 +181,11 @@
} }
emit('toggle-advanced') emit('toggle-advanced')
} }
const { getDarkMode } = useRootSetting()
return { return {
t, t,
actionColOpt, actionColOpt,
getDarkMode,
getResetBtnOptions, getResetBtnOptions,
getSubmitBtnOptions, getSubmitBtnOptions,
toggleAdvanced, toggleAdvanced,
@ -197,7 +199,10 @@
</script> </script>
<style scoped> <style scoped>
#formFold { .icon-zhongzhi-xiao-danse {
color: #257afa!important; margin: 0;
} }
.ds-tb-form-tg-h {
}
</style> </style>

3
src/components/SimpleMenu/src/components/menu.less
Unescape Escape View File

@ -183,9 +183,10 @@
padding-left: 0px!important; padding-left: 0px!important;
} }
&-vertical &-item-active &-submenu-title { &-vertical &-item-active &-submenu-title {
.light-border();
font-weight: 700; font-weight: 700;
color: @primary-color; color: @primary-color;
border-radius: 4px;
background: rgba(255, 255, 255, 0.15)!important;
// background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(217, 232, 255, 1) 100%); // background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(217, 232, 255, 1) 100%);
} }
&-vertical .@{menu-prefix-cls} { &-vertical .@{menu-prefix-cls} {

3
src/components/SimpleMenu/src/index.less
Unescape Escape View File

@ -6,6 +6,8 @@
background-color: @sider-dark-bg-color; background-color: @sider-dark-bg-color;
> .@{prefix-cls}-submenu-title { > .@{prefix-cls}-submenu-title {
background-color: @sider-dark-bg-color; background-color: @sider-dark-bg-color;
font-size: 14px;
color: #ffffff;
} }
} }
.ant-col { .ant-col {
@ -14,6 +16,7 @@
&-dark&-vertical .@{simple-prefix-cls}__children, &-dark&-vertical .@{simple-prefix-cls}__children,
&-dark&-popup .@{simple-prefix-cls}__children { &-dark&-popup .@{simple-prefix-cls}__children {
height: 30px; height: 30px;
color: rgba(255, 255, 255, 0.5);
// background-color: @sider-dark-lighten-bg-color; // background-color: @sider-dark-lighten-bg-color;
> .@{prefix-cls}-submenu-title { > .@{prefix-cls}-submenu-title {
// background-color: @sider-dark-lighten-bg-color; // background-color: @sider-dark-lighten-bg-color;

16
src/components/Table/src/BasicTable.vue
Unescape Escape View File

@ -34,7 +34,7 @@
show-overflow show-overflow
show-header-overflow show-header-overflow
show-footer-overflow show-footer-overflow
:min-height="tableHeightRef + 35" :min-height="tableHeightRef + 36"
:height="tableHeightRef + 35" :height="tableHeightRef + 35"
:row-config="{ isCurrent: true, isHover: true }" :row-config="{ isCurrent: true, isHover: true }"
:column-config="{ resizable: true }" :column-config="{ resizable: true }"
@ -104,7 +104,12 @@
</Table> </Table>
<slot name="right" class="right" ></slot> <slot name="right" class="right" ></slot>
</div> </div>
<Pagination v-if="getBindValues.tableComponent === 'vxe'" v-bind="getBindValues.pagination" @change="pageChange" @showSizeChange="onShowSizeChange" /> <Pagination
v-if="getBindValues.tableComponent === 'vxe'"
v-bind="getBindValues.pagination"
@change="pageChange"
@showSizeChange="onShowSizeChange"
/>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -581,7 +586,7 @@ export default defineComponent({
.ant-form { .ant-form {
width: 100%; width: 100%;
padding: 10px 8px 10px; padding: 10px 8px 10px;
background-color: #F5F9FC; background-color: #F0F2F5;
} }
} }
@ -672,8 +677,9 @@ export default defineComponent({
color: #257afa!important; color: #257afa!important;
} }
.vxe-cell--sort { .vxe-cell--sort {
font-size: 0.8em!important; font-size: 0.7em!important;
height: 1.5em!important; height: 1.3em!important;
margin-left: 3px;
} }
.vxe-header--row { .vxe-header--row {
background: #f0f4fa!important; background: #f0f4fa!important;

25
src/design/ant/pagination.less
Unescape Escape View File

@ -5,19 +5,17 @@ html[data-theme='dark'] {
.ant-pagination-next, .ant-pagination-next,
.ant-pagination-item { .ant-pagination-item {
background-color: rgb(255 255 255 / 4%) !important; background-color: rgb(255 255 255 / 4%) !important;
a { a {
color: #8b949e !important; color: #8b949e !important;
} }
} }
.ant-select-arrow { .ant-select-arrow {
color: @text-color-secondary !important; color: @text-color-secondary !important;
} }
.ant-pagination-item-active { .ant-pagination-item-active {
background-color: @primary-color !important; background-color: @primary-color !important;
border: none; border: 1px solid @primary-color;
border-radius: none !important; border-radius: none !important;
a { a {
@ -65,20 +63,20 @@ html[data-theme='dark'] {
} }
.ant-pagination-item-active { .ant-pagination-item-active {
// background-color: @primary-color !important; border: 1px solid @primary-color;
border: none; color: @primary-color;
border-radius: none !important;
a { a {
color: rgba(70, 145, 255, 1) !important; color: @primary-color!important;
} }
} }
.ant-pagination-options { .ant-pagination-options {
padding-right: 20px; padding-right: 20px;
position: relative;
top: -2.5px;
.ant-select-selector, .ant-input-number-input-wrap { .ant-select-selector, .ant-input-number-input-wrap {
height: 20px!important; height: 26px!important;
min-height: 20px!important; min-height: 26px!important;
} }
margin-left: 12px; margin-left: 12px;
.ant-select-selector { .ant-select-selector {
@ -93,7 +91,7 @@ html[data-theme='dark'] {
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
letter-spacing: 1px; letter-spacing: 1px;
line-height: 20px !important; line-height: 26px !important;
color: rgba(122, 135, 152, 1); color: rgba(122, 135, 152, 1);
} }
} }
@ -103,17 +101,16 @@ html[data-theme='dark'] {
} }
.ant-pagination-options-quick-jumper input { .ant-pagination-options-quick-jumper input {
height: 20px!important; height: 26px!important;
margin: 3px 6px; margin: 3px 6px;
border: none !important; border: none !important;
text-align: center; text-align: center;
border-radius: 4px; border-radius: 4px;
background: rgba(240, 244, 250, 1); background: rgba(240, 244, 250, 1);
line-height: 22px;
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
letter-spacing: 1px; letter-spacing: 1px;
line-height: 20px !important; line-height: 26px !important;
color: rgba(122, 135, 152, 1); color: rgba(122, 135, 152, 1);
} }

26
src/design/ant/table.less
Unescape Escape View File

@ -1,12 +1,28 @@
// 列表页面表单和表格的整体样式管理 // 列表页面表单和表格的整体样式管理
.ds-table, .ds-mini-table { .ds-table, .ds-mini-table {
.table-wrapper { border: 1px solid #CCD6DF;
padding-left: 20px; border-radius: 6px;
} padding: 20px 20px 0!important;
height: auto!important;
} }
.ds-table, .ds-table-detail, .ds-mini-table, .ds-mini-table-detail { .ds-table, .ds-table-detail, .ds-mini-table, .ds-mini-table-detail {
.vxe-header--column {
font-weight: 400;
color: #121826;
background-color: #F0F2F5;
.vxe-cell--sort {
line-height: 1.2em;
.sort--active {
color: @primary-color;
}
i {
font-size: 0.8em;
}
}
}
.ant-form { .ant-form {
padding: 10px 19px 1px!important; padding: 10px 20px 11px!important;
border-radius: 6px;
.ant-btn { .ant-btn {
height: 26px; height: 26px;
margin: 0 0 0px 10px; margin: 0 0 0px 10px;
@ -58,7 +74,7 @@
} }
} }
.ant-pagination { .ant-pagination {
margin: 2px 0 3px!important; margin: 10px 0 11px!important;
font-size: 12px; font-size: 12px;
} }
.ant-pagination-total-text { .ant-pagination-total-text {

3
src/design/public.less
Unescape Escape View File

@ -193,6 +193,9 @@ h5 {
.pl0 { .pl0 {
padding-left: 0 !important; padding-left: 0 !important;
} }
.p20 {
padding: 20px;
}
// 表格状态使用 // 表格状态使用
.ds-green-tag, .ds-green-tag,
.ds-blue-tag, .ds-blue-tag,

8
src/views/operation/seaexport/changeConfig/index.vue
Unescape Escape View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div class="p20">
<BasicTable class="ds-table" @register="registerTable"> <BasicTable class="ds-table" @register="registerTable">
<template #tableTitle> <template #tableTitle>
</template> </template>
@ -120,7 +120,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted } from 'vue' import { onMounted } from 'vue'
import { BasicTable, useTable, TableAction } from '/@/components/Table' import { BasicTable, useTable } from '/@/components/Table'
import { GetSeaExportRefundList } from './api' import { GetSeaExportRefundList } from './api'
import { formatParams } from '/@/hooks/web/common' import { formatParams } from '/@/hooks/web/common'
import { columns, searchFormSchema } from '../columns' import { columns, searchFormSchema } from '../columns'
@ -151,7 +151,9 @@
bordered: true, bordered: true,
showIndexColumn: true, showIndexColumn: true,
canResize: true, canResize: true,
resizeHeightOffset: 15, resizeHeightOffset: 45,
tableComponent: 'vxe',
autoHeight: window.innerHeight - 330.5
// actionColumn: { // actionColumn: {
// width: 80, // width: 80,
// title: '操作', // title: '操作',

468
src/views/operation/seaexport/index.vue
Unescape Escape View File

@ -1,244 +1,243 @@
<template> <template>
<div class="ds-sea-export-table"> <div class="ds-sea-export-table">
<BasicTable class="ds-table" @register="registerTable" @rowDbClick="handledbclick"> <div class="ds-table">
<template #tableTitle> <BasicTable @register="registerTable" @rowDbClick="handledbclick">
<div> <template #tableTitle>
<TableActionBar :selectRow="getVxeSelectRows" :reload="reload">
<tableActionBarRight :selectRow="getVxeSelectRows" :reload="reload"></tableActionBarRight>
<Divider type="vertical" style="margin-top: 11px; background-color: #CED5D9;" />
</TableActionBar>
</div>
</template>
<template v-slot:bodyCell="{ column, record }">
<!-- 订单状态 -->
<template v-if="column.dataIndex == 'businessStatusName'">
<span v-if="record.businessStatusName == '已提交'" class="TIJIAO">{{ record.businessStatusName }}</span>
<span v-else-if="record.businessStatusName == '已审单'" class="YSDAN">{{ record.businessStatusName }}</span>
<span v-else-if="record.businessStatusName == '已放单'" class="YFD">{{ record.businessStatusName }}</span>
<span v-else-if="record.businessStatusName == '已放舱'" class="YFC">{{ record.businessStatusName }}</span>
<span v-else-if="record.businessStatusName == '已收到BC'" class="YSDBC">{{ record.businessStatusName }}</span>
<span v-else-if="record.businessStatusName == '已订舱'" class="YDC">{{ record.businessStatusName }}</span>
<span v-else class="WTJ">{{ record.businessStatusName || '未提交' }}</span>
</template>
<!-- 委托编号 -->
<template v-if="column.dataIndex == 'customerNo'">
<div class="customerNo">
<span v-if="record.customerNo" @click="FnCopy(record.customerNo)" class="iconfont icon-fuzhi3"></span>
<span>{{ record.customerNo }}</span>
</div>
</template>
<!-- 应收费用 -->
<template v-if="column.dataIndex == 'arFeeStatus'">
<span v-if="record.arFeeStatus == 0" class="ds-green-tag">
{{ record.arFeeStatusName }}</span>
<span v-else-if="record.arFeeStatus == 1" class="ds-blue-tag">{{
record.arFeeStatusName
}}</span>
<span v-else-if="/^2|3|4|5|6$/.test(record.arFeeStatus)" class="ds-orange-tag">{{
record.arFeeStatusName
}}</span>
<span v-else-if="/^7|8$/.test(record.arFeeStatus)" class="ds-red-tag">{{
record.arFeeStatusName
}}</span>
<span v-else class="ds-purple-tag">{{ record.arFeeStatusName }}</span>
</template>
<!-- 应付费用 -->
<template v-if="column.dataIndex == 'apFeeStatus'">
<span v-if="record.apFeeStatus == 0" class="ds-green-tag">{{
record.apFeeStatusName
}}</span>
<span v-else-if="record.apFeeStatus == 1" class="ds-blue-tag">{{
record.apFeeStatusName
}}</span>
<span v-else-if="/^2|3|4|5|6$/.test(record.apFeeStatus)" class="ds-orange-tag">{{
record.apFeeStatusName
}}</span>
<span v-else-if="/^7|8$/.test(record.apFeeStatus)" class="ds-red-tag">{{
record.apFeeStatusName
}}</span>
<span v-else class="ds-purple-tag">{{ record.apFeeStatusName }}</span>
</template>
<!-- 主题单号 -->
<template v-if="column.dataIndex == 'mblno'">
<div class="mblno">
<span v-if="record.mblno" @click="FnCopy(record.mblno)" class="iconfont icon-fuzhi3"></span>
<!-- <span @click="editColumns(record.mblno)">{{ record.mblno }}</span> -->
<span>{{ record.mblno }}</span>
</div>
</template>
<!-- 应收开票 -->
<template v-if="column.dataIndex == 'arInvoiceStatus'">
<a-tooltip>
<template #title>{{ record.arInvoiceStatusName }}</template>
<i v-if="record.arInvoiceStatus == 2" class="iconfont icon-bingtu3"></i>
<i v-else-if="record.arInvoiceStatus == 1" class="iconfont icon-duihao1"></i>
<i v-else class="iconfont icon-chahao"></i>
</a-tooltip>
</template>
<!-- 应付开票 -->
<template v-if="column.dataIndex == 'apInvoiceStatus'">
<a-tooltip>
<template #title>{{ record.apInvoiceStatusName }}</template>
<i v-if="record.apInvoiceStatus == 2" class="iconfont icon-bingtu3"></i>
<i v-else-if="record.apInvoiceStatus == 1" class="iconfont icon-duihao1"></i>
<i v-else class="iconfont icon-chahao"></i>
</a-tooltip>
</template>
<!-- 应收对账 -->
<template v-if="column.dataIndex == 'arCheckStatus'">
<a-tooltip>
<template #title>{{ record.arCheckStatusName }}</template>
<i v-if="record.arCheckStatus == 2" class="iconfont icon-bingtu3"></i>
<i v-else-if="record.arCheckStatus == 1" class="iconfont icon-duihao1"></i>
<i v-else class="iconfont icon-chahao"></i>
</a-tooltip>
</template>
<!-- 业务锁定 -->
<template v-if="column.dataIndex == 'isBusinessLocking'">
<span v-if="record.isBusinessLocking">
<i class="iconfont icon-locksuo"></i>
</span>
<span v-else> <i class="iconfont icon-a-jiesuo1_jiesuo"></i> </span>
</template>
<!-- 费用锁定 -->
<template v-if="column.dataIndex == 'isFeeLocking'">
<span v-if="record.isFeeLocking">
<i class="iconfont icon-locksuo"></i>
</span>
<span v-else> <i class="iconfont icon-a-jiesuo1_jiesuo"></i> </span>
</template>
<!-- 运踪 -->
<template v-if="column.dataIndex == 'bookStatus'">
<div> <div>
<span v-if="record.isBookingYZ !== '0'" @click="checkBookStatus(record.id)" style="cursor: pointer; color: rgb(7, 231, 56);" <TableActionBar :selectRow="getVxeSelectRows" :reload="reload">
class="iconfont icon-refresh-1-copy"></span> <tableActionBarRight :selectRow="getVxeSelectRows" :reload="reload"></tableActionBarRight>
<span v-for="(item, index) in record.bookingStatus" :key="item.id"> <Divider type="vertical" style="margin-top: 11px; background-color: #CED5D9;" />
<a-tooltip placement="top" v-if="item.statusTime"> </TableActionBar>
<template #title>{{ item.statusTime }}</template>
<span @click="handleGetWebDataYZ(record, item.statusCode)" :class="{ yzActive: item.isChecked }">
{{ item.statusName }}
</span>
</a-tooltip>
<span style="cursor: pointer" @click="handleGetWebDataYZ(record, record.statusCode)"
:class="{ active: item.isChecked }" v-else>{{ item.statusName }}</span>
<span v-if="index != record.bookingStatus?.length - 1">-</span>
</span>
</div> </div>
</template> </template>
<!-- 提箱返场 --> <template v-slot:bodyCell="{ column, record }">
<template v-if="column.dataIndex == 'statusLog'"> <!-- 订单状态 -->
<div v-if="record.statusLog" class="txfc"> <template v-if="column.dataIndex == 'businessStatusName'">
<div > <span v-if="record.businessStatusName == '已提交'" class="TIJIAO">{{ record.businessStatusName }}</span>
<div class="billtrace-btn1 txfc" style="display: flex; align-items: center"> <span v-else-if="record.businessStatusName == '已审单'" class="YSDAN">{{ record.businessStatusName }}</span>
<i style="cursor: pointer; color: rgb(7, 231, 56); margin-right: 5px" <span v-else-if="record.businessStatusName == '已放单'" class="YFD">{{ record.businessStatusName }}</span>
@click="handleRefshYard(record.id)" class="iconfont icon-refresh-1-copy"></i> <span v-else-if="record.businessStatusName == '已放舱'" class="YFC">{{ record.businessStatusName }}</span>
<a-popover v-if="record.statusLog.length > 0"> <span v-else-if="record.businessStatusName == '已收到BC'" class="YSDBC">{{ record.businessStatusName }}</span>
<template #content> <span v-else-if="record.businessStatusName == '已订舱'" class="YDC">{{ record.businessStatusName }}</span>
<div> <span v-else class="WTJ">{{ record.businessStatusName || '未提交' }}</span>
<span class="txfcSpan" style="width: 120px">箱号</span> </template>
<span @click="handleGetWebData(record, 'YARD')" class="txfcSpan">提箱</span> <!-- 委托编号 -->
<span @click="handleGetWebData(record, 'YARD')" class="txfcSpan">返场</span> <template v-if="column.dataIndex == 'customerNo'">
</div> <div class="customerNo">
<div v-for="(item, index) in record.statusLog" :key="index"> <span v-if="record.customerNo" @click="FnCopy(record.customerNo)" class="iconfont icon-fuzhi3"></span>
<span class="txfcSpan" style="width: 120px">{{ item.cntrno }}</span> <span>{{ record.customerNo }}</span>
<span class="txfcSpan">{{ item.txOpTime }}</span> </div>
<span class="txfcSpan">{{ item.fcOpTime }}</span> </template>
</div> <!-- 应收费用 -->
</template> <template v-if="column.dataIndex == 'arFeeStatus'">
<span @click="handleGetWebData(record, 'YARD')" :class="{ active: record.statusLog[0].txOpTime }"> <span v-if="record.arFeeStatus == 0" class="ds-green-tag">
提箱 {{ record.arFeeStatusName }}</span>
</span> <span v-else-if="record.arFeeStatus == 1" class="ds-blue-tag">{{
<span @click="handleGetWebData(record, 'YARD')" :class="{ active: record.statusLog[0].fcOpTime }"> record.arFeeStatusName
返场 }}</span>
<span v-else-if="/^2|3|4|5|6$/.test(record.arFeeStatus)" class="ds-orange-tag">{{
record.arFeeStatusName
}}</span>
<span v-else-if="/^7|8$/.test(record.arFeeStatus)" class="ds-red-tag">{{
record.arFeeStatusName
}}</span>
<span v-else class="ds-purple-tag">{{ record.arFeeStatusName }}</span>
</template>
<!-- 应付费用 -->
<template v-if="column.dataIndex == 'apFeeStatus'">
<span v-if="record.apFeeStatus == 0" class="ds-green-tag">{{
record.apFeeStatusName
}}</span>
<span v-else-if="record.apFeeStatus == 1" class="ds-blue-tag">{{
record.apFeeStatusName
}}</span>
<span v-else-if="/^2|3|4|5|6$/.test(record.apFeeStatus)" class="ds-orange-tag">{{
record.apFeeStatusName
}}</span>
<span v-else-if="/^7|8$/.test(record.apFeeStatus)" class="ds-red-tag">{{
record.apFeeStatusName
}}</span>
<span v-else class="ds-purple-tag">{{ record.apFeeStatusName }}</span>
</template>
<!-- 主题单号 -->
<template v-if="column.dataIndex == 'mblno'">
<div class="mblno">
<span v-if="record.mblno" @click="FnCopy(record.mblno)" class="iconfont icon-fuzhi3"></span>
<!-- <span @click="editColumns(record.mblno)">{{ record.mblno }}</span> -->
<span>{{ record.mblno }}</span>
</div>
</template>
<!-- 应收开票 -->
<template v-if="column.dataIndex == 'arInvoiceStatus'">
<a-tooltip>
<template #title>{{ record.arInvoiceStatusName }}</template>
<i v-if="record.arInvoiceStatus == 2" class="iconfont icon-bingtu3"></i>
<i v-else-if="record.arInvoiceStatus == 1" class="iconfont icon-duihao1"></i>
<i v-else class="iconfont icon-chahao"></i>
</a-tooltip>
</template>
<!-- 应付开票 -->
<template v-if="column.dataIndex == 'apInvoiceStatus'">
<a-tooltip>
<template #title>{{ record.apInvoiceStatusName }}</template>
<i v-if="record.apInvoiceStatus == 2" class="iconfont icon-bingtu3"></i>
<i v-else-if="record.apInvoiceStatus == 1" class="iconfont icon-duihao1"></i>
<i v-else class="iconfont icon-chahao"></i>
</a-tooltip>
</template>
<!-- 应收对账 -->
<template v-if="column.dataIndex == 'arCheckStatus'">
<a-tooltip>
<template #title>{{ record.arCheckStatusName }}</template>
<i v-if="record.arCheckStatus == 2" class="iconfont icon-bingtu3"></i>
<i v-else-if="record.arCheckStatus == 1" class="iconfont icon-duihao1"></i>
<i v-else class="iconfont icon-chahao"></i>
</a-tooltip>
</template>
<!-- 业务锁定 -->
<template v-if="column.dataIndex == 'isBusinessLocking'">
<span v-if="record.isBusinessLocking">
<i class="iconfont icon-locksuo"></i>
</span>
<span v-else> <i class="iconfont icon-a-jiesuo1_jiesuo"></i> </span>
</template>
<!-- 费用锁定 -->
<template v-if="column.dataIndex == 'isFeeLocking'">
<span v-if="record.isFeeLocking">
<i class="iconfont icon-locksuo"></i>
</span>
<span v-else> <i class="iconfont icon-a-jiesuo1_jiesuo"></i> </span>
</template>
<!-- 运踪 -->
<template v-if="column.dataIndex == 'bookStatus'">
<div>
<span v-if="record.isBookingYZ !== '0'" @click="checkBookStatus(record.id)" style="cursor: pointer; color: rgb(7, 231, 56);"
class="iconfont icon-refresh-1-copy"></span>
<span v-for="(item, index) in record.bookingStatus" :key="item.id">
<a-tooltip placement="top" v-if="item.statusTime">
<template #title>{{ item.statusTime }}</template>
<span @click="handleGetWebDataYZ(record, item.statusCode)" :class="{ yzActive: item.isChecked }">
{{ item.statusName }}
</span> </span>
</a-popover> </a-tooltip>
<span v-if="record.statusLog.length > 0" style="margin-left: 5px">未提：{{ record.txopNumber }}/{{ record.statusLog.length }}</span> <span style="cursor: pointer" @click="handleGetWebDataYZ(record, record.statusCode)"
</div> :class="{ active: item.isChecked }" v-else>{{ item.statusName }}</span>
<span v-if="index != record.bookingStatus?.length - 1">-</span>
</span>
</div> </div>
</div> </template>
</template> <!-- 提箱返场 -->
<!-- 格式单比对 --> <template v-if="column.dataIndex == 'statusLog'">
<template v-if="column.dataIndex == 'lstDraftCompareRlt'"> <div v-if="record.statusLog" class="txfc">
<div class="goods-status"> <div >
<a-popover> <div class="billtrace-btn1 txfc" style="display: flex; align-items: center">
<template #content> <i style="cursor: pointer; color: rgb(7, 231, 56); margin-right: 5px"
<p> @click="handleRefshYard(record.id)" class="iconfont icon-refresh-1-copy"></i>
比对时间: <span>{{ record.lstDraftCompareDate }}</span> <a-popover v-if="record.statusLog.length > 0">
</p> <template #content>
</template> <div>
<div> <span class="txfcSpan" style="width: 120px">箱号</span>
<div v-if="record.lstDraftCompareRlt == 'DIFF'"> <span @click="handleGetWebData(record, 'YARD')" class="txfcSpan">提箱</span>
<i class="icon-shibai iconfont compareIcon" style="color: red;"></i> <span @click="handleGetWebData(record, 'YARD')" class="txfcSpan">返场</span>
</div> </div>
<div v-else-if="record.lstDraftCompareRlt == 'NO DIFF'"> <div v-for="(item, index) in record.statusLog" :key="index">
<i class="icon-chenggong iconfont compareIcon" style="color: green;"></i> <span class="txfcSpan" style="width: 120px">{{ item.cntrno }}</span>
<span class="txfcSpan">{{ item.txOpTime }}</span>
<span class="txfcSpan">{{ item.fcOpTime }}</span>
</div>
</template>
<span @click="handleGetWebData(record, 'YARD')" :class="{ active: record.statusLog[0].txOpTime }">
提箱
</span>
<span @click="handleGetWebData(record, 'YARD')" :class="{ active: record.statusLog[0].fcOpTime }">
返场
</span>
</a-popover>
<span v-if="record.statusLog.length > 0" style="margin-left: 5px">未提：{{ record.txopNumber }}/{{ record.statusLog.length }}</span>
</div> </div>
</div> </div>
</a-popover> </div>
<i v-if="record.lstDraftCompareRlt" title="查看比对结果" style="margin-left: 10px" </template>
@click="handleFormatContrast(record)" class="icon-shiyongwendang iconfont compareIcon"></i> <!-- 格式单比对 -->
</div> <template v-if="column.dataIndex == 'lstDraftCompareRlt'">
</template> <div class="goods-status">
<!-- 下货纸比对 --> <a-popover>
<template v-if="column.dataIndex == 'lstShipOrderCompareRlt'"> <template #content>
<div class="goods-status"> <p>
<RedoOutlined style="margin-left: 10px" @click="excuteShippingOrderCompareBatch(record)" /> 比对时间: <span>{{ record.lstDraftCompareDate }}</span>
<a-popover> </p>
<template #content> </template>
<p> <div>
比对方式: <div v-if="record.lstDraftCompareRlt == 'DIFF'">
<span>{{ <i class="icon-shibai iconfont compareIcon" style="color: red;"></i>
record.lstShipOrderCompareMode </div>
? record.lstShipOrderCompareMode == 'MANUAL' <div v-else-if="record.lstDraftCompareRlt == 'NO DIFF'">
? '手动' <i class="icon-chenggong iconfont compareIcon" style="color: green;"></i>
: '自动' </div>
: ''
}}</span>
<span>-{{ record.lstShipOrderCompareRltName }}</span>
</p>
<p>
比对时间: <span>{{ record.lstShipOrderCompareDate }}</span>
</p>
</template>
<div style="cursor: pointer" @click="handleOpenResult(record)">
<div v-if="record.lstShipOrderCompareRlt == 'DIFF'">
<CloseCircleFilled :style="{ color: 'red' }" />
</div>
<div v-if="record.lstShipOrderCompareRlt == 'NO_DIFF'">
<CheckCircleFilled :style="{ color: '#54bc25' }" />
</div>
<div v-if="record.lstShipOrderCompareRlt == 'BEFORE_EQUAL'">
<CheckCircleFilled :style="{ color: 'rgb(187,37,155)' }" />
</div>
<div v-if="record.lstShipOrderCompareRlt == 'BEFORE_DIFF'">
<CloseCircleFilled :style="{ color: 'red' }" />
</div>
<div v-if="record.lstShipOrderCompareRlt == 'NO_DIFF_U'">
<CheckCircleFilled :style="{ color: '#54bc25' }" />
</div> </div>
<div v-if="record.lstShipOrderCompareRlt == 'DIFF_U'"> </a-popover>
<CloseCircleFilled :style="{ color: 'red' }" /> <i v-if="record.lstDraftCompareRlt" title="查看比对结果" style="margin-left: 10px"
@click="handleFormatContrast(record)" class="icon-shiyongwendang iconfont compareIcon"></i>
</div>
</template>
<!-- 下货纸比对 -->
<template v-if="column.dataIndex == 'lstShipOrderCompareRlt'">
<div class="goods-status">
<RedoOutlined style="margin-left: 10px" @click="excuteShippingOrderCompareBatch(record)" />
<a-popover>
<template #content>
<p>
比对方式:
<span>{{
record.lstShipOrderCompareMode
? record.lstShipOrderCompareMode == 'MANUAL'
? '手动'
: '自动'
: ''
}}</span>
<span>-{{ record.lstShipOrderCompareRltName }}</span>
</p>
<p>
比对时间: <span>{{ record.lstShipOrderCompareDate }}</span>
</p>
</template>
<div style="cursor: pointer" @click="handleOpenResult(record)">
<div v-if="record.lstShipOrderCompareRlt == 'DIFF'">
<CloseCircleFilled :style="{ color: 'red' }" />
</div>
<div v-if="record.lstShipOrderCompareRlt == 'NO_DIFF'">
<CheckCircleFilled :style="{ color: '#54bc25' }" />
</div>
<div v-if="record.lstShipOrderCompareRlt == 'BEFORE_EQUAL'">
<CheckCircleFilled :style="{ color: 'rgb(187,37,155)' }" />
</div>
<div v-if="record.lstShipOrderCompareRlt == 'BEFORE_DIFF'">
<CloseCircleFilled :style="{ color: 'red' }" />
</div>
<div v-if="record.lstShipOrderCompareRlt == 'NO_DIFF_U'">
<CheckCircleFilled :style="{ color: '#54bc25' }" />
</div>
<div v-if="record.lstShipOrderCompareRlt == 'DIFF_U'">
<CloseCircleFilled :style="{ color: 'red' }" />
</div>
</div> </div>
</div> </a-popover>
</a-popover> </div>
</div>
</template>
</template>
<template v-slot:tableAction="{ record }">
<a-tooltip placement="top" :mouseEnterDelay="0.5">
<template #title>
<span>编辑</span>
</template> </template>
<a-button type="link" @click="handledbclick(record)"> </template>
<span class="iconfont icon-icon_519"></span> <template v-slot:tableAction="{ record }">
</a-button> <a-tooltip placement="top" :mouseEnterDelay="0.5">
</a-tooltip> <template #title>
</template> <span>编辑</span>
</BasicTable> </template>
<!-- 合计 --> <a-button type="link" @click="handledbclick(record)">
<div class="static-box"> <span class="iconfont icon-icon_519"></span>
<h5 v-if="calcData.length" style="position: absolute; bottom: 68px; left: 22px">合计</h5> </a-button>
<a-table class="ds-table" :columns="calcColumns" :data-source="calcData" :pagination="false"></a-table> </a-tooltip>
</template>
</BasicTable>
<!-- 合计 -->
<a-table class="static-box" :columns="calcColumns" :data-source="calcData" :pagination="false"></a-table>
</div> </div>
<!-- 多提单号查询 --> <!-- 多提单号查询 -->
<a-modal class="ds-modal-small" title="多提单号查询" :maskClosable="false" :width="400" :visible="moreNumVisible" <a-modal class="ds-modal-small" title="多提单号查询" :maskClosable="false" :width="400" :visible="moreNumVisible"
@ -335,8 +334,6 @@ import { formatParams } from '/@/hooks/web/common'
const appStore = useAppStore() const appStore = useAppStore()
const { createMessage } = useMessage() const { createMessage } = useMessage()
const go = useGo() const go = useGo()
// 空数据表格高度
const tbHeight = window.innerHeight - 310
// 合计列 // 合计列
const calcColumns = [ const calcColumns = [
{ {
@ -508,10 +505,10 @@ const [registerTable, { reload, getVxeSelectRows, setLoading }] = useTable({
width: 60, width: 60,
}, },
canResize: true, canResize: true,
resizeHeightOffset: 75, resizeHeightOffset: 131,
immediate: false, immediate: false,
tableComponent: 'vxe', tableComponent: 'vxe',
autoHeight: tbHeight, autoHeight: window.innerHeight - 416.5,
id: '0', id: '0',
actionColumn: { actionColumn: {
width: 60, width: 60,
@ -657,6 +654,7 @@ onActivated(() => {
<style lang="less"> <style lang="less">
.ds-sea-export-table { .ds-sea-export-table {
padding: 20px;
height: 100%; height: 100%;
.TIJIAO { .TIJIAO {
@ -699,9 +697,7 @@ onActivated(() => {
} }
.static-box { .static-box {
position: fixed; margin-bottom: 20px;
bottom: 0;
padding-left: 20px;
} }
.icon-fuzhi3 { .icon-fuzhi3 {

Write Preview
Loading…
Cancel
Save