修改

src/views/cdt/models/menuInfo.vue

@@ -1,41 +1,43 @@
 <template>
-    <div>
-        <div class="info-title">套餐基本信息</div>
-        <el-descriptions :column="4">
-            <el-descriptions-item label="套餐名称:">{{ form?.name || '-' }}</el-descriptions-item>
-            <el-descriptions-item label="套餐类型:">{{ selectDictLabel(dm_package_type, form?.publicFlag) || '-' }}</el-descriptions-item>
-            <el-descriptions-item label="制定规则:">{{ selectDictLabel(dm_permit_type,form?.permitType ) }}</el-descriptions-item>
-            <el-descriptions-item v-if="form?.permitType === '1'" label="适用类型:">{{ selectDictLabels(vip_level, form?.permit, ',') || '-' }}</el-descriptions-item>
-            <el-descriptions-item v-if="form?.permitType === '2'" label="适用企业:">{{ form?.permitCpyNames.toString()|| '-' }}</el-descriptions-item>
-            <el-descriptions-item label="检测周期:">{{ form?.period || '-' }}天</el-descriptions-item>
-            <el-descriptions-item label="上架数量:">{{ form?.totalCount || '-' }}</el-descriptions-item>
-            <el-descriptions-item label="执行标准:">{{ form?.standard || '-' }}</el-descriptions-item>
-            <el-descriptions-item label="送样信息:" :span="2">{{ form?.description || '-' }}</el-descriptions-item>
-            <el-descriptions-item label="购买须知:" :span="2">{{ form?.purchaseNotes || '-' }}</el-descriptions-item>
-            <el-descriptions-item label="失效日期:">{{ form?.validUntil || '-' }}</el-descriptions-item>
-        </el-descriptions>
-        <el-divider />
-        <el-descriptions :column="4" direction="vertical">
-            <el-descriptions-item label="封面图:">
-                <el-image style="width: 100px; height: 100px" :src="form?.coverImg" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-src-list="[form?.coverImg]" fit="cover"></el-image>
-            </el-descriptions-item>
-            <el-descriptions-item v-if="form?.proImg" label="产品图:">
-                <template v-for="(item, index) in form?.proImg.split(',')" :key="index">
-                    <el-image style="width: 100px; height: 100px;margin-right: 12px;" :src="item" fit="cover" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :initial-index="index" :preview-src-list="[item]"></el-image>
-                </template>
-            </el-descriptions-item>
-        </el-descriptions>
-        <el-divider />
-        <div class="info-title mb-16 d-flex">
-            <span>检测项目明细</span>
-            <span class="f-s-14">（共{{itemsInfo?.length}}项, 合计{{ totalCountPrice }}元）</span>
+    <div class="flex1 over-auto">
+        <div class="pd-16">
+            <div class="info-title">套餐基本信息</div>
+            <el-descriptions :column="4">
+                <el-descriptions-item label="套餐名称:">{{ form?.name || '-' }}</el-descriptions-item>
+                <el-descriptions-item label="套餐类型:">{{ selectDictLabel(dm_package_type, form?.publicFlag) || '-' }}</el-descriptions-item>
+                <el-descriptions-item label="制定规则:">{{ selectDictLabel(dm_permit_type,form?.permitType ) }}</el-descriptions-item>
+                <el-descriptions-item v-if="form?.permitType === '1'" label="适用类型:">{{ selectDictLabels(vip_level, form?.permit, ',') || '-' }}</el-descriptions-item>
+                <el-descriptions-item v-if="form?.permitType === '2'" label="适用企业:">{{ form?.permitCpyNames.toString()|| '-' }}</el-descriptions-item>
+                <el-descriptions-item label="检测周期:">{{ form?.period || '-' }}天</el-descriptions-item>
+                <el-descriptions-item label="上架数量:">{{ form?.totalCount || '-' }}</el-descriptions-item>
+                <el-descriptions-item label="执行标准:">{{ form?.standard || '-' }}</el-descriptions-item>
+                <el-descriptions-item label="送样信息:" :span="2">{{ form?.description || '-' }}</el-descriptions-item>
+                <el-descriptions-item label="购买须知:" :span="2">{{ form?.purchaseNotes || '-' }}</el-descriptions-item>
+                <el-descriptions-item label="失效日期:">{{ form?.validUntil || '-' }}</el-descriptions-item>
+            </el-descriptions>
+            <el-divider />
+            <el-descriptions :column="4" direction="vertical">
+                <el-descriptions-item label="封面图:">
+                    <el-image style="width: 100px; height: 100px" :src="form?.coverImg" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-src-list="[form?.coverImg]" fit="cover"></el-image>
+                </el-descriptions-item>
+                <el-descriptions-item v-if="form?.proImg" label="产品图:">
+                    <template v-for="(item, index) in form?.proImg.split(',')" :key="index">
+                        <el-image style="width: 100px; height: 100px;margin-right: 12px;" :src="item" fit="cover" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :initial-index="index" :preview-src-list="[item]"></el-image>
+                    </template>
+                </el-descriptions-item>
+            </el-descriptions>
+            <el-divider />
+            <div class="info-title mb-16 d-flex">
+                <span>检测项目明细</span>
+                <span class="f-s-14">（共{{itemsInfo?.length}}项, 合计{{ totalCountPrice }}元）</span>
+            </div>
+            <vxe-table ref="tableRightRef" border :data="itemsInfo" :column-config="{ resizable: true }">
+                <vxe-column type="seq" width="60" title="序号" align="center" />
+                <vxe-column title="检测项目" align="center" field="name" min-width="100" :formatter="colNoData" />
+                <vxe-column title="单价（元、批次）" align="center" field="price" min-width="100" :formatter="colNoData" />
+                <vxe-column title="备注" align="center" field="description" min-width="100" :formatter="colNoData" />
+            </vxe-table>
         </div>
-        <vxe-table ref="tableRightRef" border :data="itemsInfo" :column-config="{ resizable: true }">
-            <vxe-column type="seq" width="60" title="序号" align="center" />
-            <vxe-column title="检测项目" align="center" field="name" min-width="100" :formatter="colNoData" />
-            <vxe-column title="单价（元、批次）" align="center" field="price" min-width="100" :formatter="colNoData" />
-            <vxe-column title="备注" align="center" field="description" min-width="100" :formatter="colNoData" />
-        </vxe-table>
     </div>
 </template>
 <script setup lang="ts">

src/views/cdt/models/orderInfo.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-if="info">
+    <div v-if="info" class="flex1 ov-hd d-flex flex-cln pd-16">
         <div class="info-title f-w-5 mb-15">订单信息</div>
         <vxe-table ref="vxeTableRef" border :data="info?.testOrderDetailList" :merge-cells="mergeCells">
             <vxe-column title="订单号" fixed="left" width="120">
@@ -45,105 +45,127 @@
                 </template>
             </vxe-column>
         </vxe-table>
-        <el-divider />
-        <template v-if="+info.status >= 6 && info?.status !== '90'">
-            <el-descriptions title="发票信息" :column="3">
-                <el-descriptions-item label="上传人：">{{ info?.invoiceLog?.operator }}</el-descriptions-item>
-                <el-descriptions-item label="上传时间：">{{ info?.invoiceLog?.operationTime }}</el-descriptions-item>
-                <el-descriptions-item v-if="info?.invoice" label="发票：">
-                    <FileLook v-model="info.invoice" isObject></FileLook>
-                </el-descriptions-item>
-            </el-descriptions>
-            <el-divider />
-        </template>
-        <template v-if="+info.status >= 5 && info?.status !== '90'">
-            <el-descriptions title="检测报告" :column="4">
-                <el-descriptions-item label="上传人：">{{ info?.reportLog?.operator}}</el-descriptions-item>
-                <el-descriptions-item label="上传时间：">{{ info?.reportLog?.operationTime }}</el-descriptions-item>
-                <el-descriptions-item label="检测单位：">{{ info?.testOrg }}</el-descriptions-item>
-                <el-descriptions-item v-if="info?.report" class-name="zy-desc" label="检测报告：">
-                    <FileLook v-model="info.report" isObject></FileLook>
-                </el-descriptions-item>
-            </el-descriptions>
-            <el-divider />
-        </template>
-        <template v-if="+info.status >= 2 && info?.status !== '90' && info?.postInfo?.length">
-            <div class="f-s-16 c-333 f-w-6 mb-16">物流信息</div>
-            <div class="d-flex a-c mb-10">
-                <img class="mr-10" style="width: 30px; height: 30px;" src="@/assets/images/sf_icon.png" />
-                <div>
-                    <span class="f-s-14 mr-16">顺丰快递</span>
-                    <span class="c-999 f-s-12">{{ info?.postInfo[0]?.mailno }}</span>
+        <div class="pd-8"></div>
+        <div class="d-flex flex1 ov-hd">
+            <div class="left-step-box" style="width: 230px">
+                <div class="steps-box">
+                    <template v-for="(item, index) in info?.logList" :key="index">
+                        <div class="steps-item d-flex">
+                            <div class="pr-16 steps-icon-box p-rtv">
+                                <div class="steps-line"></div>
+                                <el-icon class="steps-icon"><CircleCheckFilled /></el-icon>
+                            </div>
+                            <div class="steps-content d-flex flex-cln flex1 ov-hd">
+                                <view class="f-s-16 c-666 mb-5">{{ item.operationDescription }}</view>
+                                <view class="steps-desc">{{ item?.operationTime }}</view>
+                            </div>
+                        </div>
+                    </template>
                 </div>
             </div>
-            <el-steps direction="vertical" :active="1">
-                <template v-for="(item, index) in info?.postInfo" :key="index">
-                    <el-step>
-                        <template #icon>
-                            <el-button v-if="item.opCode === '80'" type="primary" circle size="small">收</el-button>
-                            <div class="dot" :class="{ ['active' + index]: true }"></div>
-                        </template>
-                        <template #title>
-                            <span>{{ selectDictLabel(sf_router_code, item?.opCode) }}</span>
-                            <span>{{ item?.acceptTime }}</span>
-                        </template>
-                        <template #description>
-                            <div class="pt-10 pb-10">
-                                <span class="f-s-14 c-666">[{{ item.acceptAddress }}]</span>
-                                <span class="f-s-14 c-666">{{ item?.remark }}</span>
+            <div class="flex1 over-auto">
+                <div class="pd-16 ov-hd" style="box-sizing: border-box;">
+                    <template v-if="+info.status >= 6 && info?.status !== '90'">
+                        <el-descriptions title="发票信息" :column="3">
+                            <el-descriptions-item label="上传人：">{{ info?.invoiceLog?.operator }}</el-descriptions-item>
+                            <el-descriptions-item label="上传时间：">{{ info?.invoiceLog?.operationTime }}</el-descriptions-item>
+                            <el-descriptions-item v-if="info?.invoice" label="发票：">
+                                <FileLook v-model="info.invoice" isObject></FileLook>
+                            </el-descriptions-item>
+                        </el-descriptions>
+                        <el-divider />
+                    </template>
+                    <template v-if="+info.status >= 5 && info?.status !== '90'">
+                        <el-descriptions title="检测报告" :column="4">
+                            <el-descriptions-item label="上传人：">{{ info?.reportLog?.operator}}</el-descriptions-item>
+                            <el-descriptions-item label="上传时间：">{{ info?.reportLog?.operationTime }}</el-descriptions-item>
+                            <el-descriptions-item label="检测单位：">{{ info?.testOrg }}</el-descriptions-item>
+                            <el-descriptions-item v-if="info?.report" class-name="zy-desc" label="检测报告：">
+                                <FileLook v-model="info.report" isObject></FileLook>
+                            </el-descriptions-item>
+                        </el-descriptions>
+                        <el-divider />
+                    </template>
+                    <template v-if="+info.status >= 2 && info?.status !== '90' && info?.postInfo?.length">
+                        <div class="f-s-16 c-333 f-w-6 mb-16">物流信息</div>
+                        <div class="d-flex a-c mb-10">
+                            <img class="mr-10" style="width: 30px; height: 30px;" src="@/assets/images/sf_icon.png" />
+                            <div>
+                                <span class="f-s-14 mr-16">顺丰快递</span>
+                                <span class="c-999 f-s-12">{{ info?.postInfo[0]?.mailno }}</span>
                             </div>
-                        </template>
-                    </el-step>
-                </template>
-            </el-steps>
-            <el-divider />
-        </template>
-        <template v-if="+info.status >= 2  && +info?.originStatus >= 2">
-            <div class="f-s-16 c-333 f-w-6 mb-16">寄样信息</div>
-            <div class="d-flex a-c">
-                <div class="card-blcok pd-16 d-flex flex1">
-                    <div class="mr-16">
-                        <el-button type="danger" circle>取</el-button>
-                    </div>
-                    <div class="flex1 ov-hd">
-                        <div class="f-s-14 c-333 f-w-5 mb-5">{{ info?.sendAddress?.province + info?.sendAddress?.city + info?.sendAddress?.district + info?.sendAddress?.address }}</div>
-                        <div class="f-s-14 c-999">
-                            <span class="mr-30">{{ info?.sendAddress?.contactName }}</span>
-                            <span>{{ info?.sendAddress?.contactPhone }}</span>
                         </div>
-                    </div>
-                </div>
-                <div class="c-primary f-w-6 pd-20" style="font-size: 30px;">
-                    <el-icon><Right /></el-icon>
-                </div>
-                <div class="card-blcok pd-16 d-flex flex1">
-                    <div class="mr-16">
-                        <el-button type="primary" circle>收</el-button>
-                    </div>
-                    <div class="flex1 ov-hd">
-                        <div class="f-s-14 c-333 f-w-5 mb-5">{{ info?.orgAddress?.province + info?.orgAddress?.city + info?.orgAddress?.district + info?.orgAddress?.address }}</div>
-                        <div class="f-s-14 c-999">
-                            <span class="mr-30">{{ info?.orgAddress?.contactName }}</span>
-                            <span>{{ info?.orgAddress?.contactPhone }}</span>
+                        <el-steps direction="vertical" :active="1">
+                            <template v-for="(item, index) in info?.postInfo" :key="index">
+                                <el-step>
+                                    <template #icon>
+                                        <el-button v-if="item.opCode === '80'" type="primary" circle size="small">收</el-button>
+                                        <div class="dot" :class="{ ['active' + index]: true }"></div>
+                                    </template>
+                                    <template #title>
+                                        <span>{{ selectDictLabel(sf_router_code, item?.opCode) }}</span>
+                                        <span>{{ item?.acceptTime }}</span>
+                                    </template>
+                                    <template #description>
+                                        <div class="pt-10 pb-10">
+                                            <span class="f-s-14 c-666">[{{ item.acceptAddress }}]</span>
+                                            <span class="f-s-14 c-666">{{ item?.remark }}</span>
+                                        </div>
+                                    </template>
+                                </el-step>
+                            </template>
+                        </el-steps>
+                        <el-divider />
+                    </template>
+                    <template v-if="+info.status >= 2  && +info?.originStatus >= 2">
+                        <div class="f-s-16 c-333 f-w-6 mb-16">寄样信息</div>
+                        <div class="d-flex a-c">
+                            <div class="card-blcok pd-16 d-flex flex1">
+                                <div class="mr-16">
+                                    <el-button type="danger" circle>取</el-button>
+                                </div>
+                                <div class="flex1 ov-hd">
+                                    <div class="f-s-14 c-333 f-w-5 mb-5">{{ info?.sendAddress?.province + info?.sendAddress?.city + info?.sendAddress?.district + info?.sendAddress?.address }}</div>
+                                    <div class="f-s-14 c-999">
+                                        <span class="mr-30">{{ info?.sendAddress?.contactName }}</span>
+                                        <span>{{ info?.sendAddress?.contactPhone }}</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="c-primary f-w-6 pd-20" style="font-size: 30px;">
+                                <el-icon><Right /></el-icon>
+                            </div>
+                            <div class="card-blcok pd-16 d-flex flex1">
+                                <div class="mr-16">
+                                    <el-button type="primary" circle>收</el-button>
+                                </div>
+                                <div class="flex1 ov-hd">
+                                    <div class="f-s-14 c-333 f-w-5 mb-5">{{ info?.orgAddress?.province + info?.orgAddress?.city + info?.orgAddress?.district + info?.orgAddress?.address }}</div>
+                                    <div class="f-s-14 c-999">
+                                        <span class="mr-30">{{ info?.orgAddress?.contactName }}</span>
+                                        <span>{{ info?.orgAddress?.contactPhone }}</span>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
-                    </div>
+                        <div class="pd-8"></div>
+                        <el-descriptions :column="4">
+                            <el-descriptions-item label="取件时间：">{{ info?.reservationTime}}</el-descriptions-item>
+                        </el-descriptions>
+                        <el-divider />
+                    </template>
+
+                    <el-descriptions title="订单信息" :column="4">
+                        <el-descriptions-item label="订单号：">{{ info?.orderNo }}</el-descriptions-item>
+                        <el-descriptions-item label="下单人：">{{ info?.createName }}</el-descriptions-item>
+                        <el-descriptions-item label="下单时间：">{{ info?.createTime }}</el-descriptions-item>
+                        <el-descriptions-item label="收货地址：">{{ info?.reciveAddress?.province + info?.reciveAddress?.city + info?.reciveAddress?.district + info?.reciveAddress?.address }}</el-descriptions-item>
+                        <el-descriptions-item label="收件人：">{{ info?.reciveAddress?.contactName  }}</el-descriptions-item>
+                        <el-descriptions-item label="联系电话：">{{ info?.reciveAddress?.contactPhone  }}</el-descriptions-item>
+                    </el-descriptions>
                 </div>
             </div>
-            <div class="pd-8"></div>
-            <el-descriptions :column="4">
-                <el-descriptions-item label="取件时间：">{{ info?.reservationTime}}</el-descriptions-item>
-            </el-descriptions>
-            <el-divider />
-        </template>
-
-        <el-descriptions title="订单信息" :column="4">
-            <el-descriptions-item label="订单号：">{{ info?.orderNo }}</el-descriptions-item>
-            <el-descriptions-item label="下单人：">{{ info?.createName }}</el-descriptions-item>
-            <el-descriptions-item label="下单时间：">{{ info?.createTime }}</el-descriptions-item>
-            <el-descriptions-item label="收货地址：">{{ info?.reciveAddress?.province + info?.reciveAddress?.city + info?.reciveAddress?.district + info?.reciveAddress?.address }}</el-descriptions-item>
-            <el-descriptions-item label="收件人：">{{ info?.reciveAddress?.contactName  }}</el-descriptions-item>
-            <el-descriptions-item label="联系电话：">{{ info?.reciveAddress?.contactPhone  }}</el-descriptions-item>
-        </el-descriptions>
+        </div>
     </div>
 </template>
 <script setup lang="ts">
@@ -167,6 +189,13 @@ const mergeCells = ref<VxeTablePropTypes.MergeCells>([
     { row: 0, col: 7, rowspan: 2, colspan: 0 },
     { row: 0, col: 8, rowspan: 2, colspan: 0 }
 ]);
+const steps = ref([
+    { label: '付款信息', name: '待寄样', value: '1' },
+    { label: '寄样信息', name: '待寄样', value: '2' },
+    { label: '物流信息', name: '已在途', value: '3' },
+    { label: '检测报告', name: '待开票', value: '4' },
+    { label: '发票信息', name: '已完成', value: '5' }
+]);
 </script>
 <style lang="scss" scoped>
 .card-blcok {
@@ -189,4 +218,39 @@ const mergeCells = ref<VxeTablePropTypes.MergeCells>([
 .zy-desc {
     display: inline-block;
 }
+.left-step-box {
+    box-sizing: border-box;
+    padding: 16px;
+    border-right: 1px solid #d7d7d7;
+}
+
+.steps-box {
+    .steps-item {
+        cursor: pointer;
+
+        &:last-child {
+            .steps-line {
+                border-color: transparent;
+            }
+        }
+    }
+    .steps-desc {
+        margin-bottom: 20px;
+        color: #bbb;
+        font-size: 14px;
+    }
+    .steps-icon {
+        font-size: 22px;
+        color: #2c9049;
+    }
+
+    .steps-line {
+        position: absolute;
+        top: 22px;
+        left: 10px;
+        bottom: 0;
+        width: 1px;
+        border: 1px dashed #f4f4f4;
+    }
+}
 </style>

src/views/cdt/orders/detail/index.vue

@@ -10,16 +10,21 @@
                     返回上一级
                 </el-button>
             </div>
-            <div v-if="orderItem" class="flex1 over-auto pl-16 pr-16 pb-16">
-                <el-tabs v-model="activeName" type="card" class="demo-tabs">
-                    <el-tab-pane label="订单信息" name="info">
-                        <orderInfo :info="orderItem"></orderInfo>
-                    </el-tab-pane>
-                    <el-tab-pane label="套餐信息" name="log">
-                        <menuInfo :info="orderItem?.testOrderDetailList[0]"></menuInfo>
-                    </el-tab-pane>
-                </el-tabs>
+            <div class="border-botttom pl-20">
+                <div class="d-flex">
+                    <template v-for="(item, index) in tabs" :key="index">
+                        <div class="tabs-item" @click="() => { activeName = item.value }" :class="{ checked: activeName === item.value }">{{ item.label }}</div>
+                    </template>
+                </div>
             </div>
+            <template v-if="orderItem">
+                <div v-show="activeName === '1'" class="flex1 ov-hd d-flex flex-cln">
+                    <orderInfo :info="orderItem"></orderInfo>
+                </div>
+                <div v-show="activeName === '2'" class="flex1 ov-hd">
+                    <menuInfo :info="orderItem?.testOrderDetailList[0]"></menuInfo>
+                </div>
+            </template>
         </div>
     </div>
 </template>
@@ -29,7 +34,7 @@ import { getTestOrderDetail } from '@/api/cdt/orders';
 import { orderInfo, menuInfo } from '../../models';
 const { query }:any = useRoute()
 const router = useRouter();
-const activeName = ref('info');
+const activeName = ref('1');
 // 获取详细信息
 const orderItem = ref<any>(null);
 const getDetail = async () => {
@@ -37,7 +42,34 @@ const getDetail = async () => {
     if (!res || res.code !== 200) return;
     orderItem.value = res.data;
 };
+const tabs = ref([
+    { label: '订单信息', value: '1' },
+    { label: '套餐信息', value: '2' },
+])
 onMounted(() => {
     getDetail()
 });
 </script>
+<style lang="scss" scoped>
+.tabs-item {
+    margin-right: 20px;
+   padding: 8px 20px;
+   font-size: 14px;
+   border-color:  #d7d7d7;
+   border-style: solid;
+   border-width: 1px 1px 0 1px;
+   cursor: pointer;
+   user-select: none;
+
+   &.checked {
+    color: #fff;
+    border-color: var(--el-color-primary);
+    background-color: var(--el-color-primary);
+   }
+}
+.border-botttom {
+    border-bottom: 1px solid #d7d7d7;
+}
+
+
+</style>