update

src/business/table/columns.ts

@@ -218,7 +218,7 @@ export const pcTableColumnMap = new Map<TableColumnKey, Ermcp.TableColumn[]>([
         { prop: 'weight', label: '重量' },
         { prop: 'amount', label: '履约金额' },
         { prop: 'accountname', label: '对手方' },
-        { prop: 'paidamount', label: '已付/已付金额' },
+        { prop: 'paidamount', label: '已付/已收金额' },
         { prop: 'freezeamountremain', label: '履约剩余冻结' },
         { prop: 'performancestatus', label: '履约状态' },
         { prop: 'steptypeid', label: '当前步骤' },

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

@@ -4,7 +4,6 @@
     }
 
     >table {
-        width: 100%;
         table-layout: fixed;
         border-collapse: collapse;
 

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

@@ -5,7 +5,7 @@
                 {{ title }}
             </slot>
         </div>
-        <table cellspacing="0" cellpadding="0">
+        <table cellspacing="0" cellpadding="0" :style="tableStyle">
             <tbody>
                 <tr v-for="(items, i) in cellGroup" :key="i">
                     <template v-for="(item, n) in items" :key="n">
@@ -52,6 +52,10 @@ const props = defineProps({
         type: Number,
         default: 1
     },
+    width: {
+        type: [String, Number],
+        default: '100%'
+    },
     // 标签宽度
     labelWidth: {
         type: Number,
@@ -92,6 +96,10 @@ const cellGroup = computed(() => {
     }, [] as cellProp[][])
 })
 
+const tableStyle = computed(() => ({
+    width: typeof props.width === 'number' ? props.width + 'px' : props.width
+}))
+
 const valueStyle = computed(() => ({
     borderWidth: props.borderWidth + 'px',
 }))

src/packages/pc/views/order/main/components/details/index.vue

@@ -1,98 +1,79 @@
 <!-- 订单管理-详情 -->
 <template>
     <teleport :to="teleportTo">
-        <el-container class="trade-details">
-            <el-aside>
-                <el-card shadow="never">
-                    <template #header>
-                        <div class="card-header" @click="$emit('closed')">
-                            <app-icon icon="ArrowLeftBold" />
-                            <h4>基本信息</h4>
-                        </div>
-                    </template>
-                    <ul>
-                        <li>
-                            <span>关联单号</span>
-                            <span>{{ selectedRow.relatedorderid }}</span>
-                        </li>
-                        <li>
-                            <span>履约商品</span>
-                            <span>{{ selectedRow.goodsno }}</span>
-                        </li>
-                        <li>
-                            <span>履约金额</span>
-                            <span>{{ selectedRow.amount }}</span>
-                        </li>
-                        <li>
-                            <span>付款方式</span>
-                            <span>{{ selectedRow.paymenttype === 1 ? '冻结' : '扣款' }}</span>
-                        </li>
-                        <li>
-                            <span>对手方</span>
-                            <span>{{ selectedRow.accountname }}</span>
-                        </li>
-                        <li>
-                            <span>买方冻结</span>
-                            <span>{{ handleNumberValue(selectedRow.buyerfreezeamount) }}</span>
-                        </li>
-                        <li>
-                            <span>卖方冻结</span>
-                            <span>{{ handleNumberValue(selectedRow.sellerfreezeamount) }}</span>
-                        </li>
-                        <li>
-                            <span>买方冻结剩余</span>
-                            <span>{{ handleNumberValue(selectedRow.buyerfreezeamountremain) }}</span>
-                        </li>
-                        <li>
-                            <span>卖方冻结剩余</span>
-                            <span>{{ handleNumberValue(selectedRow.sellerfreezeamountremain) }}</span>
-                        </li>
-                        <li>
-                            <span>买方今日付款</span>
-                            <span>{{ handleNumberValue(selectedRow.buytodayamount) }}</span>
-                        </li>
-                        <li>
-                            <span>卖方今日收款</span>
-                            <span>{{ handleNumberValue(selectedRow.selltodayamount) }}</span>
-                        </li>
-                        <li v-if="selectedRow.buyerinfo">
-                            <span>买方联络信息</span>
-                            <span>{{ buyerInfo }}</span>
-                        </li>
-                        <li v-if="selectedRow.sellerinfo">
-                            <span>卖方联络信息</span>
-                            <span>{{ sellerInfo }}</span>
-                        </li>
-                    </ul>
-                </el-card>
-            </el-aside>
-            <el-main>
-                <el-card shadow="never">
-                    <template #header>
-                        <div class="card-header">
-                            <span>步骤列表</span>
-                        </div>
-                    </template>
-                    <app-table :data="dataList" :columns="columns" :show-toolbar="false" :row-style="rowStyle" border>
-                        <!-- 步骤值 -->
-                        <template #stepvalue="{ value }">
-                            {{ (value * 100).toFixed(1) }}
-                        </template>
-                        <template #isauto="{ value }">
-                            {{ value ? '是' : '否' }}
-                        </template>
-                        <!-- 启动类型 -->
-                        <template #steplanchtype="{ value }">
-                            {{ value === 1 ? '系统自动' : '手动' }}
-                        </template>
-                        <!-- 步骤状态 -->
-                        <template #stepstatus="{ value }">
-                            {{ getStepStatusName(value) }}
-                        </template>
-                    </app-table>
-                </el-card>
-            </el-main>
-        </el-container>
+        <app-view class="g-details">
+            <div style="text-align: right;">
+                <el-icon size="28px" color="#999" @click="$emit('closed')" style="cursor: pointer;">
+                    <CircleClose />
+                </el-icon>
+            </div>
+            <app-table-details title="基本信息" :label-width="180" :data="selectedRow" :cell-props="detailProps" :column="2">
+                <!-- 付款方式 -->
+                <template #paymenttype="{ value }">
+                    {{ value === 1 ? '冻结' : '扣款' }}
+                </template>
+                <!-- 买方冻结 -->
+                <template #buyerfreezeamount="{ value }">
+                    {{ handleNumberValue(value) }}
+                </template>
+                <!-- 卖方冻结 -->
+                <template #sellerfreezeamount="{ value }">
+                    {{ handleNumberValue(value) }}
+                </template>
+                <!-- 买方冻结剩余 -->
+                <template #buyerfreezeamountremain="{ value }">
+                    {{ handleNumberValue(value) }}
+                </template>
+                <!-- 卖方冻结剩余 -->
+                <template #sellerfreezeamountremain="{ value }">
+                    {{ handleNumberValue(value) }}
+                </template>
+                <!-- 买方今日付款 -->
+                <template #buytodayamount="{ value }">
+                    {{ handleNumberValue(value) }}
+                </template>
+                <!-- 卖方今日收款 -->
+                <template #selltodayamount="{ value }">
+                    {{ handleNumberValue(value) }}
+                </template>
+                <!-- 已付金额 -->
+                <template #buypaidamount="{ value }">
+                    {{ handleNumberValue(value) }}
+                </template>
+                <!-- 已收金额 -->
+                <template #sellreceivedamount="{ value }">
+                    {{ handleNumberValue(value) }}
+                </template>
+                <!-- 买方联络信息 -->
+                <template #buyerInfo>
+                    {{ buyerInfo }}
+                </template>
+                <!-- 卖方联络信息 -->
+                <template #sellerInfo>
+                    {{ sellerInfo }}
+                </template>
+            </app-table-details>
+            <app-table :data="dataList" :columns="columns" :show-toolbar="false" :row-style="rowStyle" border>
+                <template #header>
+                    <h3 class="g-details__title">步骤列表</h3>
+                </template>
+                <!-- 步骤值 -->
+                <template #stepvalue="{ value }">
+                    {{ (value * 100).toFixed(1) }}
+                </template>
+                <template #isauto="{ value }">
+                    {{ value ? '是' : '否' }}
+                </template>
+                <!-- 启动类型 -->
+                <template #steplanchtype="{ value }">
+                    {{ value === 1 ? '系统自动' : '手动' }}
+                </template>
+                <!-- 步骤状态 -->
+                <template #stepstatus="{ value }">
+                    {{ getStepStatusName(value) }}
+                </template>
+            </app-table>
+        </app-view>
     </teleport>
 </template>
 
@@ -105,11 +86,11 @@ export default defineComponent({
 
 <script lang="ts" setup>
 import { PropType, computed } from 'vue'
-import { handleNumberValue } from '@/filters'
+import { handleNumberValue, handleNoneValue } from '@/filters'
 import { getStepStatusName } from '@/constants/order'
 import { usePerformancePlanStep } from '@/business/order'
 import AppTable from '@pc/components/base/table/index.vue'
-import AppIcon from '@pc/components/base/icon/index.vue'
+import AppTableDetails from '@pc/components/base/table-details/index.vue'
 
 const props = defineProps({
     code: String,
@@ -124,9 +105,64 @@ const props = defineProps({
 })
 
 const { dataList, columns, getPlanStepList } = usePerformancePlanStep(props.selectedRow.performanceplanid)
-const currentStepIndex = computed(() => dataList.value.findIndex((e) => e.performancestepid === props.selectedRow.curstepid)) // 当前步骤索引位置
-const buyerInfo = JSON.parse(props.selectedRow.buyerinfo || '{}')
-const sellerInfo = JSON.parse(props.selectedRow.sellerinfo || '{}')
+
+const detailProps = [
+    { prop: 'relatedorderid', label: '关联单号：' },
+    { prop: 'goodsno', label: '履约商品：' },
+    { prop: 'amount', label: '履约金额：' },
+    { prop: 'paymenttype', label: '付款方式：' },
+    { prop: 'accountname', label: '对手方：' },
+    { prop: 'buyerfreezeamount', label: '买方冻结：' },
+    { prop: 'buytodayamount', label: '买方今日付款：' },
+    { prop: 'sellerfreezeamount', label: '卖方冻结：' },
+    { prop: 'selltodayamount', label: '卖方今日收款：' },
+    { prop: 'buyerfreezeamountremain', label: '买方冻结剩余：' },
+    { prop: 'buypaidamount', label: '已付金额：' },
+    { prop: 'sellerfreezeamountremain', label: '卖方冻结剩余：' },
+    { prop: 'sellreceivedamount', label: '已收金额：' },
+    { prop: 'sellerInfo', label: '卖方联络信息：' },
+    { prop: 'buyerInfo', label: '买方联络信息：' },
+]
+
+// 当前步骤索引位置
+const currentStepIndex = computed(() => dataList.value.findIndex((e) => e.performancestepid === props.selectedRow.curstepid))
+
+// 买方联络信息
+const buyerInfo = computed(() => {
+    if (props.selectedRow.buyerinfo) {
+        const obj = JSON.parse(props.selectedRow.buyerinfo)
+        const content: string[] = []
+        Object.entries(obj).forEach(([key, value]) => {
+            if (value) {
+                switch (key) {
+                    case 'ContactInfo': {
+                        content.push('联络信息：' + value)
+                        break
+                    }
+                    case 'ReceiveInfo': {
+                        content.push('收货地址：' + value)
+                        break
+                    }
+                    case 'ReceiptInfo': {
+                        content.push('发票信息：' + value)
+                        break
+                    }
+                }
+            }
+        })
+        return content.join('\n')
+    }
+    return handleNoneValue()
+})
+
+// 卖方联络信息
+const sellerInfo = computed(() => {
+    const obj = JSON.parse(props.selectedRow.sellerinfo || '{}')
+    if (Reflect.has(obj, 'ContactInfo')) {
+        return '联络信息：' + obj.ContactInfo
+    }
+    return handleNoneValue()
+})
 
 const rowStyle = ({ rowIndex }: { rowIndex: number }) => {
     if (currentStepIndex.value > rowIndex) {

src/packages/pc/views/order/main/index.vue

@@ -18,11 +18,11 @@
             </template>
             <!-- 已付金额 -->
             <template #paidamount="{ row }">
-                {{ row.buyorsell === BuyOrSell.Buy ? row.buypaidamount : row.sellreceivedamount }}
+                {{ buyorsell === BuyOrSell.Buy ? row.buypaidamount : row.sellreceivedamount }}
             </template>
             <!-- 履约剩余冻结 -->
             <template #freezeamountremain="{ row }">
-                {{ row.buyorsell === BuyOrSell.Buy ? row.buyerfreezeamountremain : row.sellerfreezeamountremain }}
+                {{ buyorsell === BuyOrSell.Buy ? row.buyerfreezeamountremain : row.sellerfreezeamountremain }}
             </template>
             <!-- 履约状态 -->
             <template #performancestatus="{ value }">