update

src/business/bonded/index.ts

@@ -1,7 +1,7 @@
-import { shallowRef, reactive, computed } from 'vue'
+import { shallowRef, ref, reactive, computed } from 'vue'
 import { v4 } from 'uuid'
 import { useDataTable } from '@/hooks/datatable'
-import { queryGzbscinOutOrder, queryBScinOutOrderDetail, queryGzbscusermonthpay, queryGzbscuserpowerfee, queryBscinoutorder, bscInAndOutWareHouseApply, bscUploadFile, bscConfirmPay } from '@/services/api/bonded'
+import { queryGzbscinOutOrder, queryBScinOutOrderDetail, queryBScOutOrderDetailatt, queryGzbscusermonthpay, queryGzbscuserpowerfee, queryBscinoutorder, bscInAndOutWareHouseApply, bscUploadFile, bscConfirmPay } from '@/services/api/bonded'
 import { loginStore } from '@/stores'
 import Long from 'long'
 
@@ -44,30 +44,41 @@ export function useGzbscinOutOrder() {
 }
 
 // 保税仓出库申请明细附表
-export function useBScinOutOrderDetail() {
-    const { dataList } = useDataTable<Ermcp.BScinOutOrderDetailRsp>()
-    const loading = shallowRef(false)
+export function useBScinOutOrderDetail(orderid: string) {
+    const orderDetailList = ref<Ermcp.BScinOutOrderDetailRsp[]>([]) // 明细列表
+    const orderDetailAttList = ref<Ermcp.BScOutOrderDetailattRsp[]>([]) // 附表列表
 
-    const getBScinOutOrderDetail = (params: RequiredType<Ermcp.BScinOutOrderDetailReq, 'orderid'>) => {
-        loading.value = true
+    const getBScinOutOrderDetail = (params: Partial<Ermcp.BScinOutOrderDetailReq> = {}) => {
         return queryBScinOutOrderDetail({
             data: {
                 userid: userId.value,
+                orderid,
                 ...params,
             },
             success: (res) => {
-                dataList.value = res.data
+                orderDetailList.value = res.data
+            },
+        })
+    }
+
+    const getBScOutOrderDetailatt = (params: Partial<Ermcp.BScOutOrderDetailattReq> = {}) => {
+        return queryBScOutOrderDetailatt({
+            data: {
+                userid: userId.value,
+                orderid,
+                ...params,
+            },
+            success: (res) => {
+                orderDetailAttList.value = res.data
             },
-            complete: () => {
-                loading.value = false
-            }
         })
     }
 
     return {
-        loading,
-        dataList,
+        orderDetailList,
+        orderDetailAttList,
         getBScinOutOrderDetail,
+        getBScOutOrderDetailatt,
     }
 }
 

src/business/table/columns.ts

@@ -385,13 +385,13 @@ export const pcTableColumnMap = new Map<TableColumnKey, Ermcp.TableColumn[]>([
     ]],
     ['bonded_expense', [
         { prop: 'trademonth', label: '月份' },
-        { prop: 'servicefee', label: '分拣室服务费' },
-        { prop: 'storagefee', label: '仓储费' },
-        { prop: 'premium', label: '保险费' },
-        { prop: 'powerfee', label: '分拣室电费' },
-        { prop: 'infee', label: '进仓报关费' },
-        { prop: 'outfee', label: '出仓报关费' },
-        { prop: 'totalfee', label: '合计费用' },
+        { prop: 'servicefee', label: '分拣室服务费', decimal: 2 },
+        { prop: 'storagefee', label: '仓储费', decimal: 2 },
+        { prop: 'premium', label: '保险费', decimal: 2 },
+        { prop: 'powerfee', label: '分拣室电费', decimal: 2 },
+        { prop: 'infee', label: '进仓报关费', decimal: 2 },
+        { prop: 'outfee', label: '出仓报关费', decimal: 2 },
+        { prop: 'totalfee', label: '合计费用', decimal: 2 },
         { prop: 'paystatus', label: '支付状态' },
         { prop: 'paymode', label: '支付方式' },
         { prop: 'paytime', label: '支付时间' },

src/packages/pc/assets/themes/global/global.less

@@ -0,0 +1,75 @@
+[class*='g-image'] {
+    position: relative;
+    object-fit: cover;
+    overflow: hidden;
+
+    &:before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        background: url("~@pc/assets/images/avatar.jpg") no-repeat center;
+        background-size: cover;
+    }
+}
+
+.g-details {
+    &__header {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        color: #303133;
+        font-size: 16px;
+        font-weight: bold;
+
+        &:not(:only-child) {
+            margin-bottom: 10px;
+        }
+    }
+}
+
+.el-form {
+    &-item:last-child {
+        margin-bottom: 0;
+    }
+}
+
+.el-popper {
+    &.is-light {
+        border: 0;
+    }
+
+    .el-menu {
+        border-radius: 4px;
+        box-shadow: 0 2px 30px 0 rgba(0, 0, 0, .15);
+
+        &--popup {
+            min-width: 160px;
+        }
+
+        &--vertical {
+            .el-menu {
+                &-item {
+                    height: 44px;
+                    line-height: 44px;
+                    color: #666;
+
+                    &.is-active {
+                        color: var(--sidebar-menu-item-active);
+                    }
+                }
+            }
+        }
+    }
+}
+
+.el-dropdown-menu {
+    padding: 10px 0;
+
+    &__item {
+        line-height: 36px;
+        padding: 0 20px;
+    }
+}

src/packages/pc/assets/themes/style.less

@@ -1,64 +1,4 @@
 @import './base/reset.less';
+@import './global/global.less';
 @import './default/default.less';
-@import './dark/dark.less';
-
-[class*='g-image'] {
-    position  : relative;
-    object-fit: cover;
-    overflow  : hidden;
-
-    &:before {
-        content        : '';
-        position       : absolute;
-        left           : 0;
-        top            : 0;
-        width          : 100%;
-        height         : 100%;
-        background     : url("~@pc/assets/images/avatar.jpg") no-repeat center;
-        background-size: cover;
-    }
-}
-
-.el-form {
-    &-item:last-child {
-        margin-bottom: 0;
-    }
-}
-
-.el-popper {
-    &.is-light {
-        border: 0;
-    }
-
-    .el-menu {
-        border-radius: 4px;
-        box-shadow   : 0 2px 30px 0 rgba(0, 0, 0, .15);
-
-        &--popup {
-            min-width: 160px;
-        }
-
-        &--vertical {
-            .el-menu {
-                &-item {
-                    height     : 44px;
-                    line-height: 44px;
-                    color      : #666;
-
-                    &.is-active {
-                        color: var(--sidebar-menu-item-active);
-                    }
-                }
-            }
-        }
-    }
-}
-
-.el-dropdown-menu {
-    padding: 10px 0;
-
-    &__item {
-        line-height: 36px;
-        padding    : 0 20px;
-    }
-}
+@import './dark/dark.less';

src/packages/pc/components/base/table-details/index.less

@@ -0,0 +1,16 @@
+.app-table-details {
+    &:not(:first-child) {
+        margin-top: 20px;
+    }
+
+    table {
+        width: 100%;
+        table-layout: fixed;
+
+        th {
+            color: #666;
+            font-weight: normal;
+            vertical-align: top;
+        }
+    }
+}

src/packages/pc/components/base/table-details/index.vue

@@ -0,0 +1,98 @@
+<template>
+    <div class="app-table-details">
+        <div class="app-table-details__header">
+            <slot name="header"></slot>
+        </div>
+        <table :cellspacing="cellSpacing" cellpadding="0">
+            <tbody>
+                <tr v-for="(items, i) in cellGroup" :key="i">
+                    <template v-for="(item, n) in items" :key="n">
+                        <th :style="cellStyle">
+                            <slot :name="item.prop + 'Label'">
+                                {{ item.label }}
+                            </slot>
+                        </th>
+                        <td>
+                            <slot :name="item.prop" :value="data[item.prop]">
+                                {{ handleValue(item) }}
+                            </slot>
+                        </td>
+                    </template>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { PropType, computed } from 'vue'
+import { handleNoneValue } from '@/filters'
+
+interface cellProp {
+    prop: string;
+    label: string;
+    decimal?: number; // 保留小数点位数
+}
+
+const props = defineProps({
+    data: {
+        type: Object,
+        required: true
+    },
+    cellProps: {
+        type: Array as PropType<cellProp[]>,
+        required: true
+    },
+    column: {
+        type: Number,
+        default: 1
+    },
+    // 单元格间距
+    cellSpacing: {
+        type: Number,
+        default: 10
+    },
+    // 标签宽度
+    labelWidth: {
+        type: Number,
+        default: 0
+    },
+    // 标签宽度
+    labelAlign: {
+        type: String as PropType<'left' | 'center' | 'right'>,
+        default: 'right'
+    },
+    border: {
+        type: Boolean,
+        default: false
+    }
+})
+
+const cellGroup = computed(() => {
+    const result = []
+    let index = 0
+    // 一维数组转换成二维数组
+    while (index < props.cellProps.length) {
+        const group = props.cellProps.slice(index, index += props.column)
+        result.push(group)
+    }
+    return result
+})
+
+const cellStyle = computed(() => ({
+    width: props.labelWidth ? props.labelWidth + 'px' : 'auto',
+    textAlign: props.labelAlign,
+}))
+
+const handleValue = (cell: cellProp) => {
+    const value = props.data[cell.prop]
+    if (Number.isFinite(value) && cell.decimal) {
+        return value.toFixed(cell.decimal)
+    }
+    return handleNoneValue(value)
+}
+</script>
+
+<style lang="less">
+@import './index.less';
+</style>

src/packages/pc/components/base/table/index.less

@@ -1,4 +1,8 @@
 .app-table {
+    &:not(:first-child) {
+        margin-top: 20px;
+    }
+
     &__header {
         display: flex;
         align-items: center;

src/packages/pc/components/base/table/index.vue

@@ -31,7 +31,7 @@
             :sortable="item.sortable" show-overflow-tooltip v-if="item.show ?? true">
             <template #default="{ row, $index }">
               <slot :name="item.prop" :row="row" :value="row[item.prop]" :index="$index">
-                {{ handleNoneValue(row[item.prop]) }}
+                {{ handleValue(row, item) }}
               </slot>
             </template>
           </el-table-column>
@@ -113,6 +113,14 @@ export default defineComponent({
       emit('rowClick', row)
     }
 
+    const handleValue = (row: { [key: string]: unknown }, column: Ermcp.TableColumn) => {
+      const value = row[column.prop]
+      if (Number.isFinite(value) && column.decimal) {
+        return Number(value).toFixed(column.decimal)
+      }
+      return handleNoneValue(value)
+    }
+
     // 暴露组件属性
     expose({
       elTable: tableRef
@@ -124,7 +132,7 @@ export default defineComponent({
       showTableSetting,
       onSelect,
       onRowClick,
-      handleNoneValue,
+      handleValue,
       refresh,
       updateColumn,
     }

src/packages/pc/views/bonded/components/upload/index.vue

@@ -1,6 +1,6 @@
 <!-- 保税仓业务-上传 -->
 <template>
-    <app-drawer title="上传发票/装箱单" v-model:show="show" :loading="loading" :refresh="refresh">
+    <app-drawer title="上传发票/装箱单" :width="480" v-model:show="show" :loading="loading" :refresh="refresh">
         <el-form ref="formRef" label-width="100px" :model="formData" :rules="formRules">
             <el-form-item label="单据编号">
                 {{ selectedRow.orderid }}
@@ -53,7 +53,7 @@ const formRules: FormRules = {
     invoiceFile: [{
         required: true,
         validator: (rule, value, callback) => {
-            if (invoiceFile.value) {
+            if (invoiceFile.value?.FilePath) {
                 callback()
             } else {
                 callback(new Error('请上传盖章发票'))
@@ -63,7 +63,7 @@ const formRules: FormRules = {
     orderFile: [{
         required: true,
         validator: (rule, value, callback) => {
-            if (orderFile.value) {
+            if (orderFile.value?.FilePath) {
                 callback()
             } else {
                 callback(new Error('请上传盖章装箱单'))
@@ -78,6 +78,7 @@ const onUploadInvoice = (file: { originalName: string, filePath: string }) => {
         FileName: file.originalName,
         FilePath: file.filePath,
     }
+    formRef.value?.validateField('invoiceFile')
 }
 
 // 上传盖章装箱单
@@ -86,6 +87,7 @@ const onUploadOrder = (file: { originalName: string, filePath: string }) => {
         FileName: file.originalName,
         FilePath: file.filePath,
     }
+    formRef.value?.validateField('orderFile')
 }
 
 const onCancel = (isRefresh = false) => {

src/packages/pc/views/bonded/expense/components/details/index.vue

@@ -1,48 +1,50 @@
 <!-- 保税仓业务-计费管理-详情 -->
 <template>
-    <app-drawer title="详情" :width="960" v-model:show="show">
-        <table cellspacing="10" cellpadding="0">
-            <tr>
-                <th>分拣室服务费：</th>
-                <td>{{ selectedRow.servicefee.toFixed(2) }}</td>
-                <th>分拣室电费：</th>
-                <td>{{ selectedRow.powerfee.toFixed(2) }}</td>
-            </tr>
-            <tr>
-                <th>仓储费：</th>
-                <td>{{ selectedRow.storagefee.toFixed(2) }}</td>
-                <th>保险费：</th>
-                <td>{{ selectedRow.premium.toFixed(2) }}</td>
-            </tr>
-            <tr>
-                <th>进仓报关费：</th>
-                <td>{{ selectedRow.infee.toFixed(2) }}</td>
-                <th>出仓报关费：</th>
-                <td>{{ selectedRow.outfee.toFixed(2) }}</td>
-            </tr>
-            <tr>
-                <th>合计费用：</th>
-                <td>{{ selectedRow.totalfee.toFixed(2) }}</td>
-                <th>支付状态：</th>
-                <td>{{ selectedRow.paystatus }}</td>
-            </tr>
-        </table>
+    <app-drawer class="g-details" title="详情" :width="960" v-model:show="show">
+        <app-table-details :label-width="100" :data="selectedRow" :cellProps="detailCells" :column="2">
+            <template #header>
+                <h3 class="g-details__header">款项明细【{{ selectedRow.trademonth }}】</h3>
+            </template>
+            <!-- 支付状态 -->
+            <template #paystatus="{ value }">
+                {{ getGZBSCPayStatusName(value) }}
+            </template>
+            <!-- 支付方式 -->
+            <template #paymode="{ value }">
+                {{ getGZBSCPayModeName(value) }}
+            </template>
+        </app-table-details>
         <app-table :data="powerfeeList" :columns="powerfeeColumns" :show-toolbar="false" border>
+            <template #header>
+                <h3 class="g-details__header">电费明细</h3>
+            </template>
         </app-table>
-        <app-table :data="importList" :columns="bondedColumns" :show-toolbar="false" border>
+        <app-table :data="importList" :columns="imporColumns" :show-toolbar="false" border>
+            <template #header>
+                <h3 class="g-details__header">进口明细</h3>
+            </template>
         </app-table>
-        <app-table :data="exportList" :columns="bondedColumns" :show-toolbar="false" border>
+        <app-table :data="exportList" :columns="exportColumns" :show-toolbar="false" border>
+            <template #header>
+                <h3 class="g-details__header">出境明细</h3>
+            </template>
         </app-table>
         <app-table :data="transferList" :columns="transferColumns" :show-toolbar="false" border>
+            <template #header>
+                <h3 class="g-details__header">转厂明细</h3>
+            </template>
         </app-table>
     </app-drawer>
 </template>
 
 <script lang="ts" setup>
 import { shallowRef, PropType } from 'vue'
+import { handleNoneValue } from '@/filters'
+import { getGZBSCPayStatusName, getGZBSCPayModeName } from '@/constants/bonded'
 import { useGzbscusermonthpayDetails } from '@/business/bonded'
 import AppDrawer from '@pc/components/base/drawer/index.vue'
 import AppTable from '@pc/components/base/table/index.vue'
+import AppTableDetails from '@pc/components/base/table-details/index.vue'
 
 const props = defineProps({
     selectedRow: {
@@ -54,6 +56,19 @@ const props = defineProps({
 const { powerfeeList, importList, exportList, transferList } = useGzbscusermonthpayDetails(props.selectedRow.trademonth)
 const show = shallowRef(true)
 
+const detailCells = [
+    { prop: 'servicefee', label: '分拣室服务费：', decimal: 2 },
+    { prop: 'powerfee', label: '分拣室电费：', decimal: 2 },
+    { prop: 'storagefee', label: '仓储费：', decimal: 2 },
+    { prop: 'premium', label: '保险费：', decimal: 2 },
+    { prop: 'infee', label: '进仓报关费：', decimal: 2 },
+    { prop: 'outfee', label: '出仓报关费：', decimal: 2 },
+    { prop: 'totalfee', label: '合计费用：', decimal: 2 },
+    { prop: 'paystatus', label: '支付状态：' },
+    { prop: 'paymode', label: '支付方式：' },
+    { prop: 'paytime', label: '支付时间：' },
+]
+
 const powerfeeColumns: Ermcp.TableColumn[] = [
     { prop: 'instrumentno', label: '仪表编号' },
     { prop: 'username', label: '使用单位' },
@@ -64,11 +79,16 @@ const powerfeeColumns: Ermcp.TableColumn[] = [
     { prop: 'powerfee', label: '电费(元)' },
 ]
 
-const bondedColumns: Ermcp.TableColumn[] = [
+const imporColumns: Ermcp.TableColumn[] = [
     { prop: 'jckdate', label: '进口日期' },
     { prop: 'customsno', label: '报关单号' },
 ]
 
+const exportColumns: Ermcp.TableColumn[] = [
+    { prop: 'jckdate', label: '出境日期' },
+    { prop: 'customsno', label: '报关单号' },
+]
+
 const transferColumns: Ermcp.TableColumn[] = [
     { prop: 'jckdate', label: '转厂日期' },
     { prop: 'checklistno', label: '核注清单号' },

src/packages/pc/views/bonded/expense/components/payment/index.vue

@@ -1,45 +1,16 @@
 <!-- 保税仓业务-计费管理-线上支付 -->
 <template>
-    <app-drawer class="bonded-expense-payment" :title="`款项明细【${selectedRow.trademonth}】`" v-model:show="show"
-        :loading="loading" :refresh="refresh">
-        <table class="bonded-expense-payment__table" cellspacing="10" cellpadding="0">
-            <tr>
-                <th>分拣室服务费：</th>
-                <td>{{ selectedRow.servicefee.toFixed(2) }}</td>
-            </tr>
-            <tr>
-                <th>分拣室电费：</th>
-                <td>{{ selectedRow.powerfee.toFixed(2) }}</td>
-            </tr>
-            <tr>
-                <th>仓储费：</th>
-                <td>{{ selectedRow.storagefee.toFixed(2) }}</td>
-            </tr>
-            <tr>
-                <th>保险费：</th>
-                <td>{{ selectedRow.premium.toFixed(2) }}</td>
-            </tr>
-            <tr>
-                <th>进仓报关费：</th>
-                <td>{{ selectedRow.infee.toFixed(2) }}</td>
-            </tr>
-            <tr>
-                <th>出仓报关费：</th>
-                <td>{{ selectedRow.outfee.toFixed(2) }}</td>
-            </tr>
-            <tr>
-                <th>合计费用：</th>
-                <td>{{ selectedRow.totalfee.toFixed(2) }}</td>
-            </tr>
-            <tr>
-                <th>账户可用余额：</th>
-                <td :style="{ color: balanceIsInsufficient ? 'red' : '#409340' }">{{ avaiableMoney.toFixed(2) }}</td>
-            </tr>
-            <tr v-if="balanceIsInsufficient">
-                <th></th>
-                <td style="color:red">*余额不足，请与平台联系。</td>
-            </tr>
-        </table>
+    <app-drawer :title="`款项明细【${selectedRow.trademonth}】`" :width="460" v-model:show="show" :loading="loading"
+        :refresh="refresh">
+        <app-table-details :label-width="100" :data="selectedRow" :cellProps="detailCells">
+            <!-- 账户可用余额 -->
+            <template #balance>
+                <span :style="{ color: balanceIsInsufficient ? 'red' : '#409340' }">
+                    {{ avaiableMoney.toFixed(2) }}
+                </span>
+                <span style="color:red;display:block;" v-if="balanceIsInsufficient">*余额不足，请与平台联系。</span>
+            </template>
+        </app-table-details>
         <template #footer>
             <el-button @click="onCancel(false)" plain>取消</el-button>
             <el-button type="primary" :disabled="balanceIsInsufficient" @click="onSubmit">确认</el-button>
@@ -53,6 +24,7 @@ import { ElMessage } from 'element-plus'
 import { accountStore } from '@/stores'
 import { useBscConfirmPay } from '@/business/bonded'
 import AppDrawer from '@pc/components/base/drawer/index.vue'
+import AppTableDetails from '@pc/components/base/table-details/index.vue'
 
 const props = defineProps({
     selectedRow: {
@@ -66,6 +38,17 @@ const { avaiableMoney } = accountStore.$mapGetters()
 const show = shallowRef(true)
 const refresh = shallowRef(false)
 
+const detailCells = [
+    { prop: 'servicefee', label: '分拣室服务费：', decimal: 2 },
+    { prop: 'powerfee', label: '分拣室电费：', decimal: 2 },
+    { prop: 'storagefee', label: '仓储费：', decimal: 2 },
+    { prop: 'premium', label: '保险费：', decimal: 2 },
+    { prop: 'infee', label: '进仓报关费：', decimal: 2 },
+    { prop: 'outfee', label: '出仓报关费：', decimal: 2 },
+    { prop: 'totalfee', label: '合计费用：', decimal: 2 },
+    { prop: 'balance', label: '账户可用余额：' },
+]
+
 // 是否余额不足
 const balanceIsInsufficient = computed(() => avaiableMoney.value < props.selectedRow.totalfee)
 

src/packages/pc/views/bonded/inbound/components/apply/index.less

@@ -1,13 +0,0 @@
-.bonded-inbound-apply {
-    &__title {
-        color: #666;
-    }
-
-    &__table+&__table {
-        margin-top: 20px;
-    }
-
-    .el-form {
-        margin-top: 10px;
-    }
-}

src/packages/pc/views/bonded/inbound/components/apply/index.vue

@@ -1,8 +1,7 @@
 <!-- 保税仓业务-进仓管理-提交申请 -->
 <template>
-    <app-drawer class="bonded-inbound-apply" title="提交申请" v-model:show="show" :width="960" :loading="loading"
-        :refresh="refresh">
-        <h3 class="bonded-inbound-apply__title">发货信息</h3>
+    <app-drawer class="g-details" title="提交申请" v-model:show="show" :width="960" :loading="loading" :refresh="refresh">
+        <h3 class="g-details__header">发货信息</h3>
         <el-form ref="formRef" class="el-form--horizontal" label-width="100px" :model="formData" :rules="formRules">
             <el-form-item label="发货方" prop="UserName">
                 <el-input placeholder="请输入" v-model="formData.UserName" />
@@ -23,26 +22,24 @@
                 <el-input placeholder="请输入" v-model="formData.LogisticsNo" />
             </el-form-item>
         </el-form>
-        <div class="bonded-inbound-apply__table">
-            <app-table :data="orderDetailList" :columns="columns" :max-height="400" border>
-                <template #header>
-                    <h3 class="bonded-inbound-apply__title">商品信息</h3>
-                </template>
-                <template #toolbar>
-                    <el-button-group>
-                        <el-button size="small" @click="openEdit()">新增</el-button>
-                        <el-button size="small" @click="orderDetailList = []">清空</el-button>
-                    </el-button-group>
-                </template>
-                <!-- 操作 -->
-                <template #operate="{ row, index }">
-                    <el-button-group size="small">
-                        <el-button @click="openEdit(row)">修改</el-button>
-                        <el-button @click="deleteRecord(index)">删除</el-button>
-                    </el-button-group>
-                </template>
-            </app-table>
-        </div>
+        <app-table :data="orderDetailList" :columns="columns" :max-height="400" border>
+            <template #header>
+                <h3 class="g-details__header">商品信息</h3>
+            </template>
+            <template #toolbar>
+                <el-button-group>
+                    <el-button size="small" @click="openEdit()">新增</el-button>
+                    <el-button size="small" @click="orderDetailList = []">清空</el-button>
+                </el-button-group>
+            </template>
+            <!-- 操作 -->
+            <template #operate="{ row, index }">
+                <el-button-group size="small">
+                    <el-button @click="openEdit(row)">修改</el-button>
+                    <el-button @click="deleteRecord(index)">删除</el-button>
+                </el-button-group>
+            </template>
+        </app-table>
         <template #footer>
             <el-button @click="onCancel(false)" plain>取消</el-button>
             <el-button type="primary" @click="onSubmit">提交</el-button>
@@ -176,8 +173,4 @@ const onSubmit = () => {
         }
     })
 }
-</script>
-
-<style lang="less">
-@import './index.less';
-</style>
+</script>

src/packages/pc/views/bonded/inbound/components/details/index.vue

@@ -1,28 +1,23 @@
 <!-- 保税仓业务-进仓管理-详情 -->
 <template>
-    <app-drawer title="提交申请" :width="960" v-model:show="show">
-        <el-descriptions title="发货信息" :column="2" border>
-            <el-descriptions-item label="单据编号">{{ selectedRow.ordernum }}</el-descriptions-item>
-            <el-descriptions-item label="申请日期">{{ selectedRow.applicanttime }}</el-descriptions-item>
-            <el-descriptions-item label="发货方">{{ selectedRow.username }}</el-descriptions-item>
-            <el-descriptions-item label="发货地址">{{ selectedRow.useraddress }}</el-descriptions-item>
-            <el-descriptions-item label="联系人">{{ selectedRow.contactname }}</el-descriptions-item>
-            <el-descriptions-item label="联系电话">{{ selectedRow.contactnum }}</el-descriptions-item>
-            <el-descriptions-item label="物流公司">{{ selectedRow.logisticscompany }}</el-descriptions-item>
-            <el-descriptions-item label="托运单号">{{ selectedRow.logisticsno }}</el-descriptions-item>
-        </el-descriptions>
-        <el-descriptions title="签收信息" :column="2" border>
-            <el-descriptions-item label="收货人">{{ selectedRow.signeename }}</el-descriptions-item>
-            <el-descriptions-item label="收货日期">{{ selectedRow.signeedate }}</el-descriptions-item>
-            <el-descriptions-item label="进仓确认人">{{ selectedRow.confirmername }}</el-descriptions-item>
-            <el-descriptions-item label="确认日期">{{ selectedRow.confirmdate }}</el-descriptions-item>
-            <el-descriptions-item label="进仓封条号">{{ selectedRow.sealno }}</el-descriptions-item>
-            <el-descriptions-item label="报关单号">{{ selectedRow.customsno }}</el-descriptions-item>
-            <el-descriptions-item label="进口日期">{{ selectedRow.jckdate }}</el-descriptions-item>
-            <el-descriptions-item label="核注清单号">{{ selectedRow.checklistno }}</el-descriptions-item>
-        </el-descriptions>
-        <h3>商品信息</h3><el-button @click="showDownload = true">文件下载</el-button>
-        <app-table :data="dataList" :columns="columns" :loading="loading" :show-toolbar="false" border>
+    <app-drawer class="g-details" title="详情" :width="960" v-model:show="show">
+        <app-table-details :label-width="100" :data="selectedRow" :cellProps="deliveryCells" :column="2">
+            <template #header>
+                <h3 class="g-details__header">发货信息</h3>
+            </template>
+        </app-table-details>
+        <app-table-details :label-width="100" :data="selectedRow" :cellProps="receiveCells" :column="2">
+            <template #header>
+                <h3 class="g-details__header">签收信息</h3>
+            </template>
+        </app-table-details>
+        <app-table :data="orderDetailList" :columns="columns" :show-toolbar="false" border>
+            <template #header>
+                <h3 class="g-details__header">
+                    商品信息
+                    <el-button size="small" @click="showDownload = true">文件下载</el-button>
+                </h3>
+            </template>
         </app-table>
         <component :is="Download" v-bind="{ selectedRow }" @closed="showDownload = false" v-if="showDownload" />
     </app-drawer>
@@ -33,6 +28,7 @@ import { shallowRef, PropType, defineAsyncComponent } from 'vue'
 import { useBScinOutOrderDetail } from '@/business/bonded'
 import AppDrawer from '@pc/components/base/drawer/index.vue'
 import AppTable from '@pc/components/base/table/index.vue'
+import AppTableDetails from '@pc/components/base/table-details/index.vue'
 
 const Download = defineAsyncComponent(() => import('@pc/components/modules/download/index.vue'))
 
@@ -43,10 +39,32 @@ const props = defineProps({
     },
 })
 
-const { loading, dataList, getBScinOutOrderDetail } = useBScinOutOrderDetail()
+const { orderDetailList, getBScinOutOrderDetail } = useBScinOutOrderDetail(props.selectedRow.orderid)
 const show = shallowRef(true)
 const showDownload = shallowRef(false)
 
+const deliveryCells = [
+    { prop: 'ordernum', label: '单据编号：' },
+    { prop: 'applicanttime', label: '申请日期：' },
+    { prop: 'username', label: '发货方：' },
+    { prop: 'useraddress', label: '发货地址：' },
+    { prop: 'contactname', label: '联系人：' },
+    { prop: 'contactnum', label: '联系电话：' },
+    { prop: 'logisticscompany', label: '物流公司：' },
+    { prop: 'logisticsno', label: '托运单号：' },
+]
+
+const receiveCells = [
+    { prop: 'signeename', label: '收货人：' },
+    { prop: 'signeedate', label: '收货日期：' },
+    { prop: 'confirmername', label: '进仓确认人：' },
+    { prop: 'confirmdate', label: '确认日期：' },
+    { prop: 'sealno', label: '进仓封条号：' },
+    { prop: 'customsno', label: '报关单号：' },
+    { prop: 'jckdate', label: '进口日期：' },
+    { prop: 'checklistno', label: '核注清单号：' },
+]
+
 const columns: Ermcp.TableColumn[] = [
     { prop: 'goodsname', label: '商品名称' },
     { prop: 'goodsspec', label: '规格' },
@@ -63,7 +81,5 @@ const columns: Ermcp.TableColumn[] = [
     { prop: 'remark', label: '备注' },
 ]
 
-getBScinOutOrderDetail({
-    orderid: props.selectedRow.orderid
-})
+getBScinOutOrderDetail()
 </script>

src/packages/pc/views/bonded/outbound/components/apply/index.less

@@ -1,13 +0,0 @@
-.bonded-outbound-apply {
-    &__title {
-        color: #666;
-    }
-
-    &__table+&__table {
-        margin-top: 20px;
-    }
-
-    .el-form {
-        margin-top: 10px;
-    }
-}

src/packages/pc/views/bonded/outbound/components/apply/index.vue

@@ -1,8 +1,7 @@
 <!-- 保税仓业务-出仓管理-提交申请 -->
 <template>
-    <app-drawer class="bonded-outbound-apply" title="提交申请" v-model:show="show" :width="960" :loading="loading"
-        :refresh="refresh">
-        <h3 class="bonded-outbound-apply__title">收货信息</h3>
+    <app-drawer class="g-details" title="提交申请" v-model:show="show" :width="960" :loading="loading" :refresh="refresh">
+        <h3 class="g-details__header">收货信息</h3>
         <el-form ref="formRef" class="el-form--horizontal" label-width="100px" :model="formData" :rules="formRules">
             <el-form-item label="收货方" prop="UserName">
                 <el-input placeholder="请输入" v-model="formData.UserName" />
@@ -29,46 +28,42 @@
                 </el-select>
             </el-form-item>
         </el-form>
-        <div class="bonded-outbound-apply__table">
-            <app-table :data="orderDetailList" :columns="columns1" :max-height="400" border>
-                <template #header>
-                    <h3 class="bonded-outbound-apply__title">商品信息</h3>
-                </template>
-                <template #toolbar>
-                    <el-button-group>
-                        <el-button size="small" @click="openEdit('detailEdit')">新增</el-button>
-                        <el-button size="small" @click="orderDetailList = []">清空</el-button>
-                    </el-button-group>
-                </template>
-                <!-- 操作 -->
-                <template #operate="{ row, index }">
-                    <el-button-group size="small">
-                        <el-button @click="openEdit('detailEdit', row)">修改</el-button>
-                        <el-button @click="deleteRecord(index)">删除</el-button>
-                    </el-button-group>
-                </template>
-            </app-table>
-        </div>
-        <div class="bonded-outbound-apply__table">
-            <app-table :data="orderDetailAttList" :columns="columns2" :max-height="400" border>
-                <template #header>
-                    <h3 class="bonded-outbound-apply__title">附表信息</h3>
-                </template>
-                <template #toolbar>
-                    <el-button-group>
-                        <el-button size="small" @click="openEdit('subDetailEdit')">新增</el-button>
-                        <el-button size="small" @click="orderDetailAttList = []">清空</el-button>
-                    </el-button-group>
-                </template>
-                <!-- 操作 -->
-                <template #operate="{ row, index }">
-                    <el-button-group size="small">
-                        <el-button @click="openEdit('subDetailEdit', row)">修改</el-button>
-                        <el-button @click="deleteSubRecord(index)">删除</el-button>
-                    </el-button-group>
-                </template>
-            </app-table>
-        </div>
+        <app-table :data="orderDetailList" :columns="columns1" :max-height="400" border>
+            <template #header>
+                <h3 class="g-details__header">商品信息</h3>
+            </template>
+            <template #toolbar>
+                <el-button-group>
+                    <el-button size="small" @click="openEdit('detailEdit')">新增</el-button>
+                    <el-button size="small" @click="orderDetailList = []">清空</el-button>
+                </el-button-group>
+            </template>
+            <!-- 操作 -->
+            <template #operate="{ row, index }">
+                <el-button-group size="small">
+                    <el-button @click="openEdit('detailEdit', row)">修改</el-button>
+                    <el-button @click="deleteRecord(index)">删除</el-button>
+                </el-button-group>
+            </template>
+        </app-table>
+        <app-table :data="orderDetailAttList" :columns="columns2" :max-height="400" border>
+            <template #header>
+                <h3 class="g-details__header">附表信息</h3>
+            </template>
+            <template #toolbar>
+                <el-button-group>
+                    <el-button size="small" @click="openEdit('subDetailEdit')">新增</el-button>
+                    <el-button size="small" @click="orderDetailAttList = []">清空</el-button>
+                </el-button-group>
+            </template>
+            <!-- 操作 -->
+            <template #operate="{ row, index }">
+                <el-button-group size="small">
+                    <el-button @click="openEdit('subDetailEdit', row)">修改</el-button>
+                    <el-button @click="deleteSubRecord(index)">删除</el-button>
+                </el-button-group>
+            </template>
+        </app-table>
         <template #footer>
             <el-button @click="onCancel(false)" plain>取消</el-button>
             <el-button type="primary" @click="onSubmit">提交</el-button>
@@ -251,8 +246,4 @@ const onSubmit = () => {
         }
     })
 }
-</script>
-
-<style lang="less">
-@import './index.less';
-</style>
+</script>

src/packages/pc/views/bonded/outbound/components/details/index.vue

@@ -1,27 +1,104 @@
 <!-- 保税仓业务-出仓管理-详情 -->
 <template>
-    <app-drawer title="提交申请" v-model:show="show" :refresh="refresh">
-        详情
-        <template #footer>
-            <el-button @click="onCancel(false)" plain>取消</el-button>
-            <el-button type="primary" @click="onSubmit">确认</el-button>
-        </template>
+    <app-drawer class="g-details" title="详情" :width="960" v-model:show="show">
+        <app-table-details :label-width="100" :data="selectedRow" :cellProps="receiveCells" :column="2">
+            <template #header>
+                <h3 class="g-details__header">收货信息-{{ getGZBSCOutTypeName(selectedRow.outtype) }}</h3>
+            </template>
+        </app-table-details>
+        <app-table-details :label-width="100" :data="selectedRow" :cellProps="deliveryCells" :column="2">
+            <template #header>
+                <h3 class="g-details__header">发货信息</h3>
+            </template>
+        </app-table-details>
+        <app-table :data="orderDetailList" :columns="columns1" :show-toolbar="false" border>
+            <template #header>
+                <h3 class="g-details__header">
+                    商品信息
+                    <el-button size="small" @click="showDownload = true">文件下载</el-button>
+                </h3>
+            </template>
+        </app-table>
+        <app-table :data="orderDetailAttList" :columns="columns2" :show-toolbar="false" border>
+            <template #header>
+                <h3 class="g-details__header">附表信息</h3>
+            </template>
+        </app-table>
+        <component :is="Download" v-bind="{ selectedRow }" @closed="showDownload = false" v-if="showDownload" />
     </app-drawer>
 </template>
 
 <script lang="ts" setup>
-import { shallowRef } from 'vue'
+import { shallowRef, PropType, defineAsyncComponent } from 'vue'
+import { getGZBSCOutTypeName } from '@/constants/bonded'
+import { useBScinOutOrderDetail } from '@/business/bonded'
 import AppDrawer from '@pc/components/base/drawer/index.vue'
+import AppTable from '@pc/components/base/table/index.vue'
+import AppTableDetails from '@pc/components/base/table-details/index.vue'
 
+const Download = defineAsyncComponent(() => import('@pc/components/modules/download/index.vue'))
+
+const props = defineProps({
+    selectedRow: {
+        type: Object as PropType<Ermcp.GzbscinOutOrderRsp>,
+        required: true
+    },
+})
+
+const { orderDetailList, orderDetailAttList, getBScinOutOrderDetail, getBScOutOrderDetailatt } = useBScinOutOrderDetail(props.selectedRow.orderid)
 const show = shallowRef(true)
-const refresh = shallowRef(false)
+const showDownload = shallowRef(false)
+
+const receiveCells = [
+    { prop: 'ordernum', label: '单据编号：' },
+    { prop: 'applicanttime', label: '申请日期：' },
+    { prop: 'username', label: '收货方：' },
+    { prop: 'useraddress', label: '收货地址：' },
+    { prop: 'contactname', label: '联系人：' },
+    { prop: 'contactnum', label: '联系电话：' },
+    { prop: 'logisticscompany', label: '物流公司：' },
+    { prop: 'logisticsno', label: '托运单号：' },
+]
+
+const deliveryCells = [
+    { prop: 'signeename', label: '发货人：' },
+    { prop: 'signeedate', label: '发货日期：' },
+    { prop: 'confirmername', label: '出仓确认人：' },
+    { prop: 'confirmdate', label: '确认日期：' },
+    { prop: 'sealno', label: '出仓封条号：' },
+    { prop: 'customsno', label: '报关单号：' },
+    { prop: 'jckdate', label: '出口日期：' },
+    { prop: 'checklistno', label: '核注清单号：' },
+]
+
+const columns1: Ermcp.TableColumn[] = [
+    { prop: 'goodsname', label: '商品名称' },
+    { prop: 'goodsspec', label: '规格' },
+    { prop: 'rawdetail', label: '成品对应原料明细', width: 160 },
+    { prop: 'backagenum', label: '件数' },
+    { prop: 'netweightct', label: '净重(克拉)' },
+    { prop: 'netweightgm', label: '净重(克)' },
+    { prop: 'bagweightgm', label: '连袋重(克)' },
+    { prop: 'prepricegm', label: '单价(克)' },
+    { prop: 'totalprice', label: '总价' },
+    { prop: 'currencydes', label: '币种' },
+    { prop: 'customsvalue', label: '报关总值' },
+    { prop: 'origincountry', label: '原产国' },
+    { prop: 'remark', label: '备注' },
+]
 
-const onCancel = (isRefresh = false) => {
-    show.value = false
-    refresh.value = isRefresh
-}
+const columns2: Ermcp.TableColumn[] = [
+    { prop: 'goodsname', label: '商品名称' },
+    { prop: 'customsno', label: '进口单号' },
+    { prop: 'jckdate', label: '进口日期' },
+    { prop: 'netweightct', label: '净重(克拉)' },
+    { prop: 'curnetweightct', label: '本次扣减量(克拉)', width: 160 },
+    { prop: 'remainnetweightct', label: '结余量(克拉)' },
+    { prop: 'customsvalue', label: '报关总值' },
+    { prop: 'curcustomsvalue', label: '本次扣减货值' },
+    { prop: 'remaincustomsvalue', label: '结余货值' },
+]
 
-const onSubmit = () => {
-    onCancel(true)
-}
+getBScinOutOrderDetail()
+getBScOutOrderDetailatt()
 </script>

src/packages/pc/views/mine/profile/components/sign/index.vue

@@ -88,9 +88,10 @@ const onSubmit = () => {
         if (valid) {
             formSubmit().then(() => {
                 ElMessage.success('您的申请已提交，请稍后查询结果！')
-                onCancel(true)
             }).catch((err) => {
                 ElMessage.warning(err)
+            }).finally(() => {
+                onCancel(true)
             })
         }
     })

src/packages/pc/views/warehousing/goods/components/edit/diamond.vue

@@ -135,8 +135,8 @@ const formRules: FormRules = {
     ZSCategory: [{ required: true, message: '请选择商品分类' }],
     GoodsNo: [{ required: true, message: '请输入商品编号', trigger: 'blur' }],
     ZSCurrencyType: [{ required: true, message: '请选择货币类型' }],
-    Price: [{ required: true, type: 'number', message: '请输入价格' }],
-    Weight: [{ required: true, type: 'number', message: '请输入克拉重量' }],
+    Price: [{ required: true, message: '请输入价格' }],
+    Weight: [{ required: true, message: '请输入克拉重量' }],
     ZSColorType1: [{ required: true, message: '请选择颜色' }],
     ZSClarityType1: [{ required: true, message: '请选择净度' }],
     WarehouseID: [{ required: true, message: '请选择仓库' }],

src/packages/pc/views/warehousing/goods/components/edit/diamonds.vue

@@ -107,9 +107,9 @@ const formRules: FormRules = {
     ZSCategory: [{ required: true, message: '请选择商品分类' }],
     GoodsNo: [{ required: true, message: '请输入商品编号', trigger: 'blur' }],
     ZSCurrencyType: [{ required: true, message: '请选择货币类型' }],
-    Price: [{ required: true, type: 'number', message: '请输入总价' }],
-    Weight: [{ required: true, type: 'number', message: '请输入总重量' }],
-    WeightAvg: [{ required: true, type: 'number', message: '请输入平均重量' }],
+    Price: [{ required: true, message: '请输入总价' }],
+    Weight: [{ required: true, message: '请输入总重量' }],
+    WeightAvg: [{ required: true, message: '请输入平均重量' }],
     ZSShapeType: [{ required: true, message: '请选择形状' }],
     WarehouseID: [{ required: true, message: '请选择仓库' }],
     PerformanceTemplateID: [{

src/packages/pc/views/warehousing/goods/components/edit/fancy.vue

@@ -145,8 +145,8 @@ const formRules: FormRules = {
     ZSCategory: [{ required: true, message: '请选择商品分类' }],
     GoodsNo: [{ required: true, message: '请输入商品编号', trigger: 'blur' }],
     ZSCurrencyType: [{ required: true, message: '请选择货币类型' }],
-    Price: [{ required: true, type: 'number', message: '请输入价格' }],
-    Weight: [{ required: true, type: 'number', message: '请输入克拉重量' }],
+    Price: [{ required: true, message: '请输入价格' }],
+    Weight: [{ required: true, message: '请输入克拉重量' }],
     ZSClarityType1: [{ required: true, message: '请选择净度' }],
     WarehouseID: [{ required: true, message: '请选择仓库' }],
     PerformanceTemplateID: [{

src/packages/pc/views/warehousing/goods/components/edit/jewelry.vue

@@ -146,8 +146,8 @@ const formRules: FormRules = {
     SettingMaterial: [{ required: true, message: '请输入镶嵌材料', trigger: 'blur' }],
     ZSCurrencyType: [{ required: true, message: '请选择货币类型' }],
     ZSStyleType: [{ required: true, message: '请选择款式' }],
-    Price: [{ required: true, type: 'number', message: '请输入价格' }],
-    Weight: [{ required: true, type: 'number', message: '请输入克拉重量' }],
+    Price: [{ required: true, message: '请输入价格' }],
+    Weight: [{ required: true, message: '请输入克拉重量' }],
     ZSColorType1: [{ required: true, message: '请选择颜色' }],
     ZSClarityType1: [{ required: true, message: '请选择净度' }],
     WarehouseID: [{ required: true, message: '请选择仓库' }],

src/packages/pc/views/warehousing/goods/components/edit/rough.vue

@@ -116,9 +116,9 @@ const formRules: FormRules = {
     CPCertNo: [{ required: true, message: '请输入金伯利证书编号', trigger: 'blur' }],
     KPWeight: [{ required: true, message: '请输入金伯利证书重量', trigger: 'blur' }],
     ZSCurrencyType: [{ required: true, message: '请选择货币类型' }],
-    Price: [{ required: true, type: 'number', message: '请输入总价' }],
-    Weight: [{ required: true, type: 'number', message: '请输入总重量' }],
-    WeightAvg: [{ required: true, type: 'number', message: '请输入平均重量' }],
+    Price: [{ required: true, message: '请输入总价' }],
+    Weight: [{ required: true, message: '请输入总重量' }],
+    WeightAvg: [{ required: true, message: '请输入平均重量' }],
     WarehouseID: [{ required: true, message: '请选择仓库' }],
     KPPath: [{ required: true, message: '请上传金伯利证书图片' }],
     PerformanceTemplateID: [{

src/types/ermcp/table.d.ts

@@ -8,6 +8,7 @@ declare namespace Ermcp {
         sortable?: boolean;
         show?: boolean;
         fixed?: string;
+        decimal?: number; // 保留小数点位数
     }
 
     /** 交易端列表头信息请求 */