1

src/assets/stylus/root.styl

@@ -19,7 +19,7 @@ body {
 
   --el-font-weight-primary: 400 !important;
   letter-spacing: .5px;
-  //user-select: none;
+  user-select: none;
 }
 
 

src/assets/stylus/table.styl

@@ -28,4 +28,20 @@
       }
     }
   }
+
+  .action-btn {
+    width 100% !important
+    display grid !important
+    grid-template-columns repeat(auto-fit, 32px)  !important
+    grid-auto-rows: 32px !important
+    gap: 10px !important
+
+    .icon-btn {
+      margin 0 !important
+      padding: 8px !important
+      justify-content center !important
+      align-items center !important
+      //border-color var(--el-button-bg-color) !important
+    }
+  }
 }

src/common/app/app-page-store.ts

@@ -56,24 +56,24 @@ export const useAppPageStore = defineStore('AppPage', () => {
     return open(page)
   }
 
-  function closeCurrent() {
-    return closePage(currentPage.insId)
+  function closeCurrent(id?: string) {
+    return closePage(id ?? currentPage.insId)
   }
 
-  function closeLeft() {
-    const index = pages.findIndex(it => it.insId === currentPage.insId)
+  function closeLeft(id?: string) {
+    const index = pages.findIndex(it => it.insId === (id ?? currentPage.insId))
     if (index < 2) return
     pages.splice(1, index - 1)
   }
 
-  function closeRight() {
-    const index = pages.findIndex(it => it.insId === currentPage.insId)
+  function closeRight(id?: string) {
+    const index = pages.findIndex(it => it.insId === (id ?? currentPage.insId))
     if (index < 0) return
     pages.splice(index + 1, pages.length - index - 1)
   }
 
-  function closeOther() {
-    const pageList = pages.filter(it => it.routeName === SpecialPage.Home || it.insId === currentPage.insId)
+  function closeOther(id?: string) {
+    const pageList = pages.filter(it => it.routeName === SpecialPage.Home || it.insId === (id ?? currentPage.insId))
     pages.$reset(pageList)
   }
 

src/common/router/nav.ts

@@ -87,24 +87,24 @@ function close(id: string) {
     })
 }
 
-function closeCurrent() {
-  return useAppPageStore().closeCurrent()
+function closeCurrent(id?: string) {
+  return useAppPageStore().closeCurrent(id)
     .then(ctx => {
       if (ctx == null) return Promise.resolve(null)
       return jump(ctx)
     })
 }
 
-function closeLeft() {
-  useAppPageStore().closeLeft()
+function closeLeft(id?: string) {
+  useAppPageStore().closeLeft(id)
 }
 
-function closeRight() {
-  useAppPageStore().closeRight()
+function closeRight(id?: string) {
+  useAppPageStore().closeRight(id)
 }
 
-function closeOther() {
-  useAppPageStore().closeOther()
+function closeOther(id?: string) {
+  useAppPageStore().closeOther(id)
 }
 
 function closeAll() {

src/components/a-drop-table/ADropTable.vue

@@ -107,7 +107,7 @@ const selectHeader_indeterminate = computed(() => {
 })
 const selectHeader_checked = computed({
   get() {
-    return selectRows.length === tableDataList.value.length
+    return selectRows.length > 0 && tableDataList.value.length > 0 && selectRows.length === tableDataList.value.length
   },
   set(val) {
     if (props.multiple) {
@@ -172,7 +172,7 @@ const displayData = computed(() => {
           ref="tableRef"
           :data="tableDataList"
           cell-class-name="table-cell"
-          class="table-list"
+          class="table-list selectable"
           empty-text="暂无数据"
           header-row-class-name="table-header"
           row-key="id"
@@ -225,6 +225,7 @@ const displayData = computed(() => {
   padding: 18px;
   display: flex;
   flex-direction: column;
+  height 400px
 }
 
 .drop-table-content-divider {
@@ -233,8 +234,15 @@ const displayData = computed(() => {
 
 .table-list {
   flex 1;
-  margin 0 0 20px 0
+  margin 0
   width 100%
+  height 200px
+
+  &.selectable {
+    :deep(.el-table__row) {
+      cursor pointer;
+    }
+  }
 
   :deep(.table-header) {
     color #454C59

src/components/a-icon/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* 项目名称 再昇云 */
-  src: url('@/components/a-icon/iconfont.woff2?t=1769832742609') format('woff2'),
-  url('@/components/a-icon/iconfont.woff?t=1769832742609') format('woff'),
-  url('@/components/a-icon/iconfont.ttf?t=1769832742609') format('truetype');
+  src: url('@/components/a-icon/iconfont.woff2?t=1770194183018') format('woff2'),
+  url('@/components/a-icon/iconfont.woff?t=1770194183018') format('woff'),
+  url('@/components/a-icon/iconfont.ttf?t=1770194183018') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-yundanguiji:before {
+  content: "\e680";
+}
+
 .icon-tiaozhang:before {
   content: "\e6d6";
 }

src/components/a-icon/iconfont.json

@@ -5,6 +5,13 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "8242394",
+      "name": "运单轨迹",
+      "font_class": "yundanguiji",
+      "unicode": "e680",
+      "unicode_decimal": 59008
+    },
     {
       "icon_id": "10107476",
       "name": "调账",

src/components/a-icon/iconfont.ts

@@ -5,6 +5,13 @@ export const icons = {
   'css_prefix_text': 'icon-',
   'description': '',
   'glyphs': [
+    {
+      'icon_id': '8242394',
+      'name': '运单轨迹',
+      'font_class': 'yundanguiji',
+      'unicode': 'e680',
+      'unicode_decimal': 59008,
+    },
     {
       'icon_id': '10107476',
       'name': '调账',

src/components/a-page/a-table-page/ATablePage.tsx

@@ -416,7 +416,7 @@ const component = defineComponent(
             icon={elIcon}
             loading={tableAction.loading}
             type={tableAction.type}
-            class={styles.iconBtn}
+            class={'icon-btn'}
             onClick={tableAction.confirm == null ? () => rowAction(scope, tableAction) : undefined}
             plain/>
         </ElTooltip>)
@@ -425,7 +425,7 @@ const component = defineComponent(
         icon={elIcon}
         loading={tableAction.loading}
         type={tableAction.type}
-        class={styles.iconBtn}
+        class={'icon-btn'}
         onClick={tableAction.confirm == null ? () => rowAction(scope, tableAction) : undefined}
         text/>)
     }
@@ -502,7 +502,7 @@ const component = defineComponent(
                 rowAction(scope, tableAction)
               }}>
                 {{
-                  default: () => (<ElButton icon={elIcons.More} class={[ styles.iconBtn, styles.moreIcon ]} text/>),
+                  default: () => (<ElButton icon={elIcons.More} class={[ 'icon-btn', styles.moreIcon ]} text/>),
                   dropdown: () => (<ElDropdownMenu>
                     {
                       actionColumn.tableActions
@@ -526,7 +526,7 @@ const component = defineComponent(
                 }}
               </ElDropdown>)
             }
-            return (<div class={styles.actionBtn}>
+            return (<div class={'action-btn'}>
               {btns}
             </div>)
           },

src/components/a-page/a-table-page/a-table-page.module.styl

@@ -135,22 +135,6 @@
       }
     }
 
-    .action-btn {
-      width 100% !important
-      display grid !important
-      grid-template-columns repeat(auto-fit, 32px)  !important
-      grid-auto-rows: 32px !important
-      gap: 10px !important
-
-      .icon-btn {
-        margin 0 !important
-        padding: 8px !important
-        justify-content center !important
-        align-items center !important
-        //border-color var(--el-button-bg-color) !important
-      }
-    }
-
     :global(.el-pagination) {
       justify-content center
 

src/pages/a-frame/ATabbar.vue

@@ -4,10 +4,15 @@
       ref="tabsScrollbar"
       class="a-tabs-scrollbar"
     >
-      <div class="a-tabs-wrapper">
-        <div v-for="(item,i) in appPageStore.pages"
-          :id="item.insId"
+      <div id="a-tabs-wrapper" class="a-tabs-wrapper">
+        <ElDropdown
+          v-for="(item,i) in appPageStore.pages"
           :key="'a-frame-header-tab'+i"
+          :persistent="false"
+          :show-arrow="false"
+          placement="bottom" trigger="contextmenu" @command="handleCommand($event, item.insId)">
+          <div
+            :id="item.insId"
             :class="{'a-tab-item-active': item.insId === appPageStore.currentPage.insId}"
             class="a-tab-item"
             @click="Nav.open(item.routeName)">
@@ -18,9 +23,18 @@
             <div v-if="item.routeName === SpecialPage.Home"></div>
             <ElButton v-else :icon="elIcons.Close" text @click.stop="Nav.close(item.insId)"/>
           </div>
+          <template #dropdown>
+            <ElDropdownMenu>
+              <ElDropdownItem v-if="item.routeName !=='home'" :icon="elIcons.ArrowLeft" command="closeLeft">关闭左侧</ElDropdownItem>
+              <ElDropdownItem :icon="elIcons.ArrowRight" command="closeRight">关闭右侧</ElDropdownItem>
+              <ElDropdownItem :icon="elIcons.Close" command="closeOther">关闭其他</ElDropdownItem>
+              <ElDropdownItem v-if="item.routeName !=='home'" :icon="elIcons.CircleClose" command="closeAll">关闭所有</ElDropdownItem>
+            </ElDropdownMenu>
+          </template>
+        </ElDropdown>
       </div>
     </ElScrollbar>
-    <ElDropdown placement="bottom-end" @command="handleCommand">
+    <ElDropdown placement="bottom-end" @command="handleCommand($event,undefined)">
       <ElButton :icon="elIcons.More" text/>
       <template #dropdown>
         <ElDropdownMenu>
@@ -54,8 +68,8 @@ watch(
     })
   })
 
-function handleCommand(command: 'closeCurrent' | 'closeOther' | 'closeAll') {
-  Nav[command]()
+function handleCommand(command: 'closeCurrent' | 'closeOther' | 'closeAll', insId?: string) {
+  Nav[command](insId)
 }
 </script>
 <style lang="stylus" scoped>
@@ -99,6 +113,10 @@ function handleCommand(command: 'closeCurrent' | 'closeOther' | 'closeAll') {
     padding 5px 5px 0 0
     gap 12px
 
+    & > :deep(.el-dropdown) {
+      height 100%
+    }
+
     .a-tab-item {
       height 100%
       padding 5px 10px
@@ -168,7 +186,7 @@ function handleCommand(command: 'closeCurrent' | 'closeOther' | 'closeAll') {
     }
   }
 
-  :deep(.el-dropdown) {
+  & > :deep(.el-dropdown) {
     width: 32px;
     padding: 0;
     background-color white

src/pages/cst/customer/CustomerDropTable.vue

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import ADropTable from '@/components/a-drop-table/ADropTable.vue'
+import CustomerApi from '@/pages/cst/customer/customer-api.ts'
+
+const model = defineModel<string | undefined | null>()
+const dropTableColumns = [
+  {
+    label: '账号',
+    prop: 'username',
+  },
+  {
+    label: '客户名称',
+    prop: 'nickname',
+  },
+  {
+    label: '客户电话',
+    prop: 'phone',
+  },
+  {
+    label: '企业名称',
+    prop: 'orgName',
+  },
+]
+const dropTableLoader = (param: CustomerTypes.SearchCustomerParam) => {
+  return CustomerApi.paging(param).then(res => res.data)
+}
+
+</script>
+
+<template>
+  <ADropTable v-model="model"
+    :columns="dropTableColumns"
+    :loader="dropTableLoader"
+    display-field="nickname"/>
+</template>

src/pages/cst/driver/Driver.vue

@@ -42,25 +42,23 @@
       </ElTableColumn>
       <ElTableColumn label="状态" prop="busy" width="100">
         <template #default="{ row }">
-          <ElTag :type="row.busy ? 'warning' : 'success'">{{ row.busy ? '运输中' : '空闲' }}</ElTag>
+          <ElTag :type="row.busy ? 'danger' : 'success'">{{ row.busy ? '运输中' : '空闲中' }}</ElTag>
         </template>
       </ElTableColumn>
     </template>
     <DriverForm ref="driverForm" :research="research"/>
-    <DriverDetail ref="driverDetail" @edit-succ="research"/>
   </ATablePage>
 </template>
 
 <script lang="ts" setup>
 import DriverApi from '@/pages/cst/driver/driver-api.ts'
 import DriverForm from '@/pages/cst/driver/DriverForm.vue'
-import DriverDetail from '@/pages/cst/driver/DriverDetail.vue'
 import ATablePage, {
   type ATablePageInstance,
   buildTablePageProps,
 } from '@/components/a-page/a-table-page/ATablePage.tsx'
 
-const driverDetailIns = useTemplateRef<InstanceType<typeof DriverDetail>>('driverDetail')
+const driverFormIns = useTemplateRef<InstanceType<typeof DriverForm>>('driverForm')
 
 const tablePageIns = useTemplateRef<ATablePageInstance>('tablePage')
 
@@ -77,11 +75,11 @@ const tablePageProps = buildTablePageProps<CustomerTypes.SearchCustomerParam, Cu
     actionColumn: {
       tableActions: [
         {
-          tooltip: '详情',
-          icon: 'Postcard',
+          tooltip: '编辑',
+          icon: 'Edit',
           type: 'primary',
           action({row}) {
-            driverDetailIns.value?.open(row)
+            driverFormIns.value?.open(row)
           },
         },
       ],

src/pages/cst/driver/DriverForm.vue

@@ -1,32 +1,28 @@
 <template>
   <AFormPanel
     ref="formPanel"
-    :details-loader="detailsLoader"
-    :do-submit="doSubmit"
-    :rules="rules"
-    :title="status === 'add' ? '新建司机信息' : '修改司机信息'"
-  >
-    <template #default="{formData}">
+    v-bind="formPanelProps">
+    <template #default="formData">
       <div class="form-items">
         <ElFormItem label="Id" prop="id">
           <ElInput
             v-model="formData.id"
             placeholder="Id"/>
         </ElFormItem>
-        <ElFormItem label="归属用户 Id；sys_user.id" prop="userId">
+        <ElFormItem label="归属用户" prop="userId">
           <ElInput
             v-model="formData.userId"
-            placeholder="归属用户 Id；sys_user.id"/>
+            placeholder="归属用户"/>
         </ElFormItem>
-        <ElFormItem label="归属客户 Id；cst_customer.id" prop="customerId">
+        <ElFormItem label="归属客户" prop="customerId">
           <ElInput
             v-model="formData.customerId"
-            placeholder="归属客户 Id；cst_customer.id"/>
+            placeholder="归属客户"/>
         </ElFormItem>
-        <ElFormItem label="归属公司 Id；cst_org.id" prop="orgId">
+        <ElFormItem label="归属公司" prop="orgId">
           <ElInput
             v-model="formData.orgId"
-            placeholder="归属公司 Id；cst_org.id"/>
+            placeholder="归属公司"/>
         </ElFormItem>
         <ElFormItem label="驾驶证编号" prop="drivingLicenceNo">
           <ElInput
@@ -44,9 +40,7 @@
             placeholder="手机号"/>
         </ElFormItem>
         <ElFormItem label="驾驶证图片" prop="drivingLicence">
-          <ElInput
-            v-model="formData.drivingLicence"
-            placeholder="驾驶证图片"/>
+          <Uploader ref="drivingLicence" v-model:file="formData.drivingLicence"/>
         </ElFormItem>
         <ElFormItem label="驾驶证有效期" prop="licenceStartTime">
           <ElInput
@@ -66,9 +60,11 @@
 <script lang="ts" setup>
 import DriverApi from '@/pages/cst/driver/driver-api.ts'
 import Strings from '@/common/utils/strings.ts'
-import { type FormRules } from 'element-plus'
-import AFormPanel from '@/components/a-form-panel/AFormPanel.tsx'
-import type { ComponentExposed } from 'vue-component-type-helpers'
+import AFormPanel, {
+  type AFormPanelInstance,
+  buildFormPanelProps,
+} from '@/components/a-form-panel/AFormPanel.tsx'
+import Uploader from '@/components/uploader/Uploader.vue'
 
 const props = withDefaults(defineProps<{
   research?: () => void
@@ -76,7 +72,33 @@ const props = withDefaults(defineProps<{
   research: () => {
   },
 })
-const rules = reactive<FormRules<DriverTypes.SearchDriverResult>>({
+const formPanelIns = useTemplateRef<AFormPanelInstance>('formPanel')
+const status = ref<'add' | 'modify'>('add')
+// const uploaderIns = useTemplateRef<InstanceType<typeof Uploader>>('uploader')
+const formPanelProps = buildFormPanelProps<DriverTypes.SearchDriverResult>({
+  title: status.value === 'add' ? '新建产品分类' : '修改产品分类',
+  detailsLoader(id?: string) {
+    if (Strings.isBlank(id)) {
+      status.value = 'add'
+      return Promise.resolve()
+    } else {
+      status.value = 'modify'
+      return DriverApi
+        .detail(id!)
+        .then(res => res.data)
+    }
+  },
+  doSubmit(data) {
+    if (status.value === 'add') {
+      return DriverApi.add(data)
+        .then(props.research)
+    } else {
+      return DriverApi.modify(data)
+        .then(props.research)
+    }
+  },
+  rules: () => {
+    return {
       id: [ {required: true, message: '请填写Id', trigger: 'blur'} ],
       userId: [ {required: true, message: '请填写归属用户 Id；sys_user.id', trigger: 'blur'} ],
       customerId: [ {required: true, message: '请填写归属客户 Id；cst_customer.id', trigger: 'blur'} ],
@@ -93,31 +115,9 @@ const rules = reactive<FormRules<DriverTypes.SearchDriverResult>>({
       createTime: [ {required: true, message: '请填写创建时间', trigger: 'blur'} ],
       modifyTime: [ {required: true, message: '请填写修改时间', trigger: 'blur'} ],
       deleted: [ {required: true, message: '请填写是否删除', trigger: 'blur'} ],
+    }
+  },
 })
-const formPanelIns = useTemplateRef<ComponentExposed<typeof AFormPanel>>('formPanel')
-const status = ref<'add' | 'modify'>('add')
-
-function detailsLoader(id?: string) {
-  if (Strings.isBlank(id)) {
-    status.value = 'add'
-    return Promise.resolve()
-  } else {
-    status.value = 'modify'
-    return DriverApi
-      .detail(id!)
-      .then(res => res.data)
-  }
-}
-
-function doSubmit(data: DriverTypes.SearchDriverResult) {
-  if (status.value === 'add') {
-    return DriverApi.add(data)
-      .then(props.research)
-  } else {
-    return DriverApi.modify(data)
-      .then(props.research)
-  }
-}
 
 defineExpose({
   open(data?: DriverTypes.SearchDriverResult) {

src/pages/cst/org/OrgDropTable.vue

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import ADropTable from '@/components/a-drop-table/ADropTable.vue'
+import OrgApi from '@/pages/cst/org/org-api.ts'
+
+const model = defineModel<string | undefined | null>()
+const dropTableColumns = [
+  {
+    label: '企业名称',
+    prop: 'orgName',
+  },
+  {
+    label: '负责人',
+    prop: 'customerName',
+  },
+  {
+    label: '负责人电话',
+    prop: 'customerPhone',
+  },
+]
+const dropTableLoader = (param: OrgTypes.SearchOrgParam) => {
+  return OrgApi.paging(param).then(res => res.data)
+
+}
+
+</script>
+
+<template>
+  <ADropTable v-model="model"
+    :columns="dropTableColumns"
+    :loader="dropTableLoader"
+    display-field="orgName"/>
+</template>

src/pages/cst/project/Project.vue

@@ -75,7 +75,7 @@ import ATablePage, {
 
 const tablePageIns = useTemplateRef<ATablePageInstance>('tablePage')
 const projectDetailIns = useTemplateRef<InstanceType<typeof ProjectDetail>>('projectDetail')
-const projectFormIns = useTemplateRef<InstanceType<typeof ProjectDetail>>('projectForm')
+const projectFormIns = useTemplateRef<InstanceType<typeof ProjectForm>>('projectForm')
 
 function research() {
   tablePageIns.value?.doSearch()
@@ -106,6 +106,14 @@ const tablePageProps = buildTablePageProps<ProjectTypes.SearchProjectParam, Proj
             projectDetailIns.value?.open(row)
           },
         },
+        {
+          tooltip: '修改',
+          icon: 'Edit',
+          type: 'success',
+          action({row}) {
+            projectFormIns.value?.open(row)
+          },
+        },
       ],
     },
   },

src/pages/cst/project/ProjectDetail.vue

@@ -1,116 +1,75 @@
 <template>
-  <ElDialog v-model="showDialog" :close-on-click-modal="false" destroy-on-close width="fit-content" @close="dialogCloseHandler">
-    <el-descriptions class="margin-top" title="项目详情" :column="3" border>
-      <el-descriptions-item label="项目名称">
-        {{ formData.projectName }}
-      </el-descriptions-item>
-      <el-descriptions-item label="运输方企业">
-        {{ formData?.transOrgInfo?.orgName }}
-      </el-descriptions-item>
-      <el-descriptions-item label="产废方/购买方企业">
-        {{ formData.fringeOrgInfo?.orgName }}
-      </el-descriptions-item>
-      <el-descriptions-item label="区县">
-        {{ formData.areaName }}
-      </el-descriptions-item>
-      <el-descriptions-item label="乡镇街道">
-        {{ formData.townName }}
-      </el-descriptions-item>
-      <el-descriptions-item label="详细地址">
-        {{ formData.address }}
-      </el-descriptions-item>
-      <el-descriptions-item label="合同有效期">
-        {{ formData.contractStartDate }}
-      </el-descriptions-item>
-      <el-descriptions-item label="合同有效期">
-        {{ formData.contractEndDate }}
-      </el-descriptions-item>
-      <el-descriptions-item label="创建时间">
-        {{ formData.createTime }}
-      </el-descriptions-item>
-      <el-descriptions-item label="修改时间">
-        {{ formData.modifyTime }}
-      </el-descriptions-item>
-      <!-- <el-descriptions-item label="合同">
-        <img :src="AppApi.fileUrl(formData.contractPicture)" alt="合同" style="width: 4rem; height: 4rem; object-fit: cover; border-radius: 4px" />
-      </el-descriptions-item> -->
+  <ADetailPanel
+    ref="detailPanel"
+    class="book-detail-panel"
+    v-bind="detailPanelProps">
+    <template #default="detailData">
+      <ElDescriptions :column="3" border title="项目详情">
+        <ElDescriptionsItem label="项目名称">
+          {{ detailData.projectName }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="运输方企业">
+          {{ detailData?.transOrgInfo?.orgName }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="产废方/购买方企业">
+          {{ detailData.fringeOrgInfo?.orgName }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="区县">
+          {{ detailData.areaName }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="乡镇街道">
+          {{ detailData.townName }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="详细地址">
+          {{ detailData.address }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="合同有效期">
+          {{ detailData.contractStartDate }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="合同有效期">
+          {{ detailData.contractEndDate }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="创建时间">
+          {{ detailData.createTime }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="修改时间">
+          {{ detailData.modifyTime }}
+        </ElDescriptionsItem>
+        <!-- <ElDescriptionsItem label="合同">
+          <img :src="AppApi.fileUrl(detailData.contractPicture)" alt="合同" style="width: 4rem; height: 4rem; object-fit: cover; border-radius: 4px" />
+        </ElDescriptionsItem> -->
 
-            <el-descriptions-item label="合同">
-        <el-image style="width: 100px;height: 100px;" :src="AppApi.fileUrl(formData.contractPicture)" :preview-src-list="[AppApi.fileUrl(formData.contractPicture)]" show-progress></el-image>
-      </el-descriptions-item>
-      <!-- <el-descriptions-item>
+        <ElDescriptionsItem label="合同">
+          <ElImage :preview-src-list="[AppApi.fileUrl(detailData.contractPicture)]" :src="AppApi.fileUrl(detailData.contractPicture)" show-progress style="width: 100px;height: 100px;"></ElImage>
+        </ElDescriptionsItem>
+        <!-- <ElDescriptionsItem>
           <el-tag size="small">School</el-tag>
-      </el-descriptions-item> -->
-    </el-descriptions>
-    <template #footer>
-      <ElButton @click="showDialog = false">关闭</ElButton>
+        </ElDescriptionsItem> -->
+      </ElDescriptions>
     </template>
-  </ElDialog>
+  </ADetailPanel>
 </template>
 
 <script lang="ts" setup>
 import ProjectApi from '@/pages/cst/project/project-api.ts'
-import Strings from '@/common/utils/strings.ts'
-// import FormUtil from '@/common/utils/formUtil.ts'
 import AppApi from '@/common/app/app-api.ts'
-// import {
-//   ElMessage,
-//   type FormInstance,
-// } from 'element-plus'
+import ADetailPanel, {
+  type ADetailPanelInstance,
+  buildDetailPanelProps,
+} from '@/components/a-detail-panel/ADetailPanel.tsx'
 
-const emits = defineEmits(["editSucc"]);
-const showDialog = ref(false);
-// const submiting = ref(false);
-const status = ref<"add" | "view" | "modify">("add");
-
-// const projectDetailIns = useTemplateRef<FormInstance>("projectDetail");
-
-const formData = ref<any>({});
-
-function dialogCloseHandler() {
-  formData.value = {};
-}
-
-// function submitHandler() {
-//   if (status.value === "view") return;
-//   submiting.value = true;
-//   if (formData.value.id != null) {
-//     FormUtil.submit(projectDetailIns, () => ProjectApi.modify(formData.value))
-//       .then(() => {
-//         ElMessage.success("修改成功");
-//         emits("editSucc");
-//         showDialog.value = false;
-//       })
-//       .finally(() => {
-//         submiting.value = false;
-//       });
-//   } else {
-//     FormUtil.submit(projectDetailIns, () => ProjectApi.add(formData.value))
-//       .then(() => {
-//         ElMessage.success("添加成功");
-//         emits("editSucc");
-//         showDialog.value = false;
-//       })
-//       .finally(() => {
-//         submiting.value = false;
-//       });
-//   }
-// }
+const detailPanelIns = useTemplateRef<ADetailPanelInstance<ProjectTypes.SearchProjectResult>>('detailPanel')
+const detailPanelProps = buildDetailPanelProps<ProjectTypes.SearchProjectResult>({
+  title: '项目详情',
+  width: '80vw',
+  detailsLoader: ProjectApi.detail,
+})
 
 defineExpose({
-  open(data: ProjectTypes.SearchProjectResult = {}) {
-    showDialog.value = true;
-    if (!Strings.isBlank(data.id)) {
-      status.value = "modify";
-      ProjectApi.detail(data.id!).then((res) => {
-        formData.value = res.data;
-      });
-    } else {
-      status.value = "add";
-      formData.value = data;
-    }
+  open(data: ProjectTypes.SearchProjectResult) {
+    detailPanelIns.value?.open(data)
   },
-});
+})
 </script>
 
 <style lang="stylus" scoped>

src/pages/cst/project/ProjectDropTable.vue

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import ADropTable from '@/components/a-drop-table/ADropTable.vue'
+import ProjectApi from '@/pages/cst/project/project-api.ts'
+
+const model = defineModel<string | undefined | null>()
+const dropTableColumns = [
+  {
+    label: '项目名称',
+    prop: 'projectName',
+  },
+  {
+    label: '客户名称',
+    prop: 'fringeName',
+  },
+  {
+    label: '运输方名称',
+    prop: 'transName',
+  },
+  /* {
+   label: '合同有效期',
+   prop: 'contractStartDate',
+   }, */
+]
+const dropTableLoader = (param: ProjectTypes.SearchProjectParam) => {
+  return ProjectApi.paging(param).then(res => res.data)
+}
+
+</script>
+
+<template>
+  <ADropTable v-model="model"
+    :columns="dropTableColumns"
+    :loader="dropTableLoader"
+    display-field="projectName"/>
+</template>

src/pages/cst/project/ProjectForm.vue

@@ -14,66 +14,23 @@
             v-model="formData.contractPicture"
             placeholder="合同图片"/>
         </ElFormItem>
-        <ElFormItem label="运输方客户 Id" prop="transCustomerId">
+        <ElFormItem label="运输方" prop="transCustomerId">
           <ElInput
             v-model="formData.transCustomerId"
-            placeholder="运输方客户 Id"/>
+            placeholder="运输方"/>
         </ElFormItem>
-        <ElFormItem label="运输方企业 Id" prop="transOrgId">
-          <ElInput
-            v-model="formData.transOrgId"
-            placeholder="运输方企业 Id"/>
-        </ElFormItem>
-        <ElFormItem label="产废方/购买方客户 Id" prop="fringeCustomerId">
+
+        <ElFormItem label="产废方/购买方" prop="fringeCustomerId">
           <ElInput
             v-model="formData.fringeCustomerId"
-            placeholder="产废方/购买方客户 Id"/>
+            placeholder="产废方/购买方"/>
         </ElFormItem>
-        <ElFormItem label="产废方/购买方企业 Id" prop="fringeOrgId">
-          <ElInput
-            v-model="formData.fringeOrgId"
-            placeholder="产废方/购买方企业 Id"/>
-        </ElFormItem>
-        <ElFormItem label="省；代码" prop="province">
-          <ElInput
-            v-model="formData.province"
-            placeholder="省；代码"/>
-        </ElFormItem>
-        <ElFormItem label="市；代码" prop="city">
-          <ElInput
-            v-model="formData.city"
-            placeholder="市；代码"/>
-        </ElFormItem>
-        <ElFormItem label="区县；代码" prop="area">
-          <ElInput
-            v-model="formData.area"
-            placeholder="区县；代码"/>
-        </ElFormItem>
-        <ElFormItem label="乡镇街道；代码" prop="town">
-          <ElInput
-            v-model="formData.town"
-            placeholder="乡镇街道；代码"/>
-        </ElFormItem>
-        <ElFormItem label="省；名称" prop="provinceName">
-          <ElInput
-            v-model="formData.provinceName"
-            placeholder="省；名称"/>
-        </ElFormItem>
-        <ElFormItem label="市；名称" prop="cityName">
-          <ElInput
-            v-model="formData.cityName"
-            placeholder="市；名称"/>
-        </ElFormItem>
-        <ElFormItem label="区县；名称" prop="areaName">
+
+        <ElFormItem label="区/县；名称" prop="areaName">
           <ElInput
             v-model="formData.areaName"
             placeholder="区县；名称"/>
         </ElFormItem>
-        <ElFormItem label="乡镇街道；名称" prop="townName">
-          <ElInput
-            v-model="formData.townName"
-            placeholder="乡镇街道；名称"/>
-        </ElFormItem>
         <ElFormItem label="详细地址" prop="address">
           <ElInput
             v-model="formData.address"
@@ -144,17 +101,12 @@ const formPanelProps = buildFormPanelProps<ProjectTypes.SearchProjectResult>({
     }
   },
   rules: {
-    id: [ {required: true, message: '请填写Id', trigger: 'blur'} ],
     projectName: [ {required: true, message: '请填写项目名称', trigger: 'blur'} ],
     contractPicture: [ {required: true, message: '请填写合同图片', trigger: 'blur'} ],
-    transCustomerId: [ {required: true, message: '请填写运输方客户 Id', trigger: 'blur'} ],
-    transOrgId: [ {required: true, message: '请填写运输方企业 Id', trigger: 'blur'} ],
-    fringeCustomerId: [ {required: true, message: '请填写产废方/购买方客户 Id', trigger: 'blur'} ],
-    fringeOrgId: [ {required: true, message: '请填写产废方/购买方企业 Id', trigger: 'blur'} ],
-    province: [ {required: true, message: '请填写省；代码', trigger: 'blur'} ],
-    city: [ {required: true, message: '请填写市；代码', trigger: 'blur'} ],
-    area: [ {required: true, message: '请填写区县；代码', trigger: 'blur'} ],
-    town: [ {required: true, message: '请填写乡镇街道；代码', trigger: 'blur'} ],
+    transCustomerId: [ {required: true, message: '请填写运输方客户', trigger: 'blur'} ],
+    transOrgId: [ {required: true, message: '请填写运输方企业', trigger: 'blur'} ],
+    fringeCustomerId: [ {required: true, message: '请填写产废方/购买方', trigger: 'blur'} ],
+    fringeOrgId: [ {required: true, message: '请填写产废方/购买方企业', trigger: 'blur'} ],
     provinceName: [ {required: true, message: '请填写省；名称', trigger: 'blur'} ],
     cityName: [ {required: true, message: '请填写市；名称', trigger: 'blur'} ],
     areaName: [ {required: true, message: '请填写区县；名称', trigger: 'blur'} ],
@@ -164,11 +116,6 @@ const formPanelProps = buildFormPanelProps<ProjectTypes.SearchProjectResult>({
     lat: [ {required: true, message: '请填写纬度', trigger: 'blur'} ],
     contractStartDate: [ {required: true, message: '请填写合同有效期', trigger: 'blur'} ],
     contractEndDate: [ {required: true, message: '请填写合同有效期', trigger: 'blur'} ],
-    creatorId: [ {required: true, message: '请填写创建人 Id； sys_user.id', trigger: 'blur'} ],
-    modifierId: [ {required: true, message: '请填写修改人 Id； sys_user.id', trigger: 'blur'} ],
-    createTime: [ {required: true, message: '请填写创建时间', trigger: 'blur'} ],
-    modifyTime: [ {required: true, message: '请填写修改时间', trigger: 'blur'} ],
-    deleted: [ {required: true, message: '请填写是否删除； 0-->未删除、1-->已删除', trigger: 'blur'} ],
   },
 })
 

src/pages/cst/station/StationDropTable.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import ADropTable from '@/components/a-drop-table/ADropTable.vue'
+import StationApi from '@/pages/cst/station/station-api.ts'
+
+const model = defineModel<string | undefined | null>()
+const dropTableColumns = [
+  {
+    label: '站点名称',
+    prop: 'stationName',
+  },
+  {
+    label: '企业名称',
+    prop: 'orgName',
+  },
+]
+const dropTableLoader = (param: StationTypes.SearchStationParam) => {
+  return StationApi.paging(param).then(res => res.data)
+
+}
+
+</script>
+
+<template>
+  <ADropTable v-model="model"
+    :columns="dropTableColumns"
+    :loader="dropTableLoader"
+    display-field="stationName"/>
+</template>

src/pages/cst/truck/Truck.vue

@@ -37,26 +37,24 @@
       </ElTableColumn>
       <ElTableColumn label="状态" prop="busy" width="100">
         <template #default="{ row }">
-          <ElTag :type="row.busy ? 'warning' : 'success'">{{ row.busy ? '运输中' : '空闲' }}</ElTag>
+          <ElTag :type="row.busy ? 'danger' : 'success'">{{ row.busy ? '运输中' : '空闲中' }}</ElTag>
         </template>
       </ElTableColumn>
     </template>
     <TruckForm ref="truckForm" :research="research"/>
-    <TruckDetail ref="truckDetail"/>
   </ATablePage>
 </template>
 
 <script lang="ts" setup>
 import TruckApi from '@/pages/cst/truck/truck-api.ts'
 import TruckForm from '@/pages/cst/truck/TruckForm.vue'
-import TruckDetail from '@/pages/cst/truck/TruckDetail.vue'
 import AppApi from '@/common/app/app-api.ts'
 import ATablePage, {
   type ATablePageInstance,
   buildTablePageProps,
 } from '@/components/a-page/a-table-page/ATablePage.tsx'
 
-const truckDetailIns = useTemplateRef<InstanceType<typeof TruckDetail>>('truckDetail')
+const truckFormIns = useTemplateRef<InstanceType<typeof TruckForm>>('truckForm')
 const tablePageIns = useTemplateRef<ATablePageInstance>('tablePage')
 
 function research() {
@@ -68,26 +66,26 @@ const tablePageProps = buildTablePageProps<CustomerTypes.SearchCustomerParam, Cu
     searchFormHeight: '125px',
     dataListHeight: 1,
   },
-  table: {
-    actionColumn: {
-      tableActions: [
-        {
-          tooltip: '详情',
-          icon: 'Postcard',
-          type: 'primary',
-          action({row}) {
-            truckDetailIns.value?.open(row)
-          },
-        },
-      ],
-    },
-  },
   searchForm: {
     highForm: {
       contentWidth: 342,
     },
     paging: TruckApi.paging,
   },
+  table: {
+    actionColumn: {
+      tableActions: [
+        {
+          tooltip: '编辑',
+          icon: 'Edit',
+          type: 'primary',
+          action({row}) {
+            truckFormIns.value?.open(row)
+          },
+        },
+      ],
+    },
+  },
 })
 
 </script>

src/pages/cst/truck/TruckForm.vue

@@ -1,12 +1,8 @@
 <template>
   <AFormPanel
     ref="formPanel"
-    :details-loader="detailsLoader"
-    :do-submit="doSubmit"
-    :rules="rules"
-    :title="status === 'add' ? '新建车辆信息' : '修改车辆信息'"
-  >
-    <template #default="{formData}">
+    v-bind="formPanelProps">
+    <template #default="formData">
       <div class="form-items">
         <ElFormItem label="归属客户" prop="customerId">
           <ElInput
@@ -24,9 +20,7 @@
             placeholder="车牌"/>
         </ElFormItem>
         <ElFormItem label="行驶证图片" prop="truckLicense">
-          <ElInput
-            v-model="formData.truckLicense"
-            placeholder="行驶证图片"/>
+          <Uploader ref="truckLicenseUploader" v-model:file="formData.truckLicense"/>
         </ElFormItem>
         <ElFormItem label="车架号" prop="vnCode">
           <ElInput
@@ -34,19 +28,17 @@
             placeholder="车架号"/>
         </ElFormItem>
         <ElFormItem label="合格证图片" prop="qualification">
-          <ElInput
-            v-model="formData.qualification"
-            placeholder="合格证图片"/>
+          <Uploader ref="qualificationUploader" v-model:file="formData.qualification"/>
         </ElFormItem>
-        <ElFormItem label="最大载重；单位：千克" prop="carryingCapacity">
+        <ElFormItem label="最大载重" prop="carryingCapacity">
           <ElInput
             v-model="formData.carryingCapacity"
-            placeholder="最大载重；单位：千克"/>
+            placeholder="最大载重"/>
         </ElFormItem>
-        <ElFormItem label="皮重；单位：千克" prop="tareWeight">
+        <ElFormItem label="皮重" prop="tareWeight">
           <ElInput
             v-model="formData.tareWeight"
-            placeholder="皮重；单位：千克"/>
+            placeholder="皮重"/>
         </ElFormItem>
         <ElFormItem label="行驶证有效期" prop="licenseStartDate">
           <ElInput
@@ -74,9 +66,7 @@
             placeholder="车辆类型"/>
         </ElFormItem>
         <ElFormItem label="车辆图片" prop="picture">
-          <ElInput
-            v-model="formData.picture"
-            placeholder="车辆图片"/>
+          <Uploader ref="pictureUploader" v-model:file="formData.picture"/>
         </ElFormItem>
       </div>
     </template>
@@ -86,9 +76,11 @@
 <script lang="ts" setup>
 import TruckApi from '@/pages/cst/truck/truck-api.ts'
 import Strings from '@/common/utils/strings.ts'
-import { type FormRules } from 'element-plus'
-import type { ComponentExposed } from 'vue-component-type-helpers'
-import AFormPanel from '@/components/a-form-panel/AFormPanel.tsx'
+import AFormPanel, {
+  type AFormPanelInstance,
+  buildFormPanelProps,
+} from '@/components/a-form-panel/AFormPanel.tsx'
+import Uploader from '@/components/uploader/Uploader.vue'
 
 const props = withDefaults(defineProps<{
   research?: () => void
@@ -96,8 +88,34 @@ const props = withDefaults(defineProps<{
   research: () => {
   },
 })
-const rules = reactive<FormRules<TruckTypes.SearchTruckResult>>({
-  id: [ {required: true, message: '请填写Id', trigger: 'blur'} ],
+
+const formPanelIns = useTemplateRef<AFormPanelInstance>('formPanel')
+// const uploaderIns = useTemplateRef<InstanceType<typeof Uploader>>('uploader')
+const status = ref<'add' | 'modify'>('add')
+const formPanelProps = buildFormPanelProps<TruckTypes.SearchTruckResult>({
+  title: status.value === 'add' ? '新建产品分类' : '修改产品分类',
+  detailsLoader(id?: string) {
+    if (Strings.isBlank(id)) {
+      status.value = 'add'
+      return Promise.resolve({})
+    } else {
+      status.value = 'modify'
+      return TruckApi
+        .detail(id!)
+        .then(res => res.data)
+    }
+  },
+  doSubmit(data) {
+    if (status.value === 'add') {
+      return TruckApi.add(data)
+        .then(props.research)
+    } else {
+      return TruckApi.modify(data)
+        .then(props.research)
+    }
+  },
+  rules: () => {
+    return {
       customerId: [ {required: true, message: '请填写归属客户 Id；cst_customer.id', trigger: 'blur'} ],
       orgId: [ {required: true, message: '请填写归属企业', trigger: 'blur'} ],
       licensePlate: [ {required: true, message: '请填写车牌', trigger: 'blur'} ],
@@ -113,39 +131,10 @@ const rules = reactive<FormRules<TruckTypes.SearchTruckResult>>({
       truckCategory: [ {required: true, message: '请填写车辆类型', trigger: 'blur'} ],
       picture: [ {required: true, message: '请填写车辆图片', trigger: 'blur'} ],
       busy: [ {required: true, message: '请填写忙碌中', trigger: 'blur'} ],
-  creatorId: [ {required: true, message: '请填写创建人 Id； sys_user.id', trigger: 'blur'} ],
-  modifierId: [ {required: true, message: '请填写修改人 Id； sys_user.id', trigger: 'blur'} ],
-  createTime: [ {required: true, message: '请填写创建时间', trigger: 'blur'} ],
-  modifyTime: [ {required: true, message: '请填写修改时间', trigger: 'blur'} ],
-  deleted: [ {required: true, message: '请填写是否删除', trigger: 'blur'} ],
+    }
+  },
 })
 
-
-const formPanelIns = useTemplateRef<ComponentExposed<typeof AFormPanel>>('formPanel')
-const status = ref<'add' | 'modify'>('add')
-
-function detailsLoader(id?: string) {
-  if (Strings.isBlank(id)) {
-    status.value = 'add'
-    return Promise.resolve()
-  } else {
-    status.value = 'modify'
-    return TruckApi
-      .detail(id!)
-      .then(res => res.data)
-  }
-}
-
-function doSubmit(data: TruckTypes.SearchTruckResult) {
-  if (status.value === 'add') {
-    return TruckApi.add(data)
-      .then(props.research)
-  } else {
-    return TruckApi.modify(data)
-      .then(props.research)
-  }
-}
-
 defineExpose({
   open(data?: TruckTypes.SearchTruckResult) {
     formPanelIns.value?.open(data?.id)

src/pages/gds/goods-category/GoodsCategory.vue

@@ -53,9 +53,6 @@ const tablePageProps = buildTablePageProps<GoodsCategoryTypes.SearchGoodsCategor
     highForm: {
       contentWidth: 320,
     },
-    simpleForm: {
-      colCount: 2,
-    },
     paging(param) {
       return GoodsCategoryApi.paging({
         bizType: param.bizType,

src/pages/gds/goods/GoodsDropTable.vue

@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import ADropTable from '@/components/a-drop-table/ADropTable.vue'
+import GoodsApi from '@/pages/gds/goods/goods-api.ts'
+import { bizType } from '@/pages/gds/goods-category/constants.ts'
+
+const props = defineProps<{
+  defaultBizType: typeof bizType[number]['val']
+}>()
+
+const model = defineModel<string | undefined | null>()
+const dropTableColumns = [
+  {
+    label: '产品类型',
+    prop: 'goodsCategoryName',
+  },
+  {
+    label: '产品名称',
+    prop: 'goodsName',
+  },
+]
+const dropTableLoader = (param: GoodsTypes.SearchGoodsParam) => {
+  param.bizType = props.defaultBizType
+  return GoodsApi.paging(param).then(res => res.data)
+}
+
+</script>
+
+<template>
+  <ADropTable v-model="model"
+    :columns="dropTableColumns"
+    :loader="dropTableLoader"
+    display-field="goodsName"/>
+</template>

src/pages/order/TransRecode.vue

@@ -2,11 +2,14 @@
 import { transStatusColor } from '@/pages/order/constants.ts'
 import Utils from '@/common/utils'
 import AIcon from '@/components/a-icon/AIcon.vue'
+import type { TableColumnCtx } from 'element-plus'
+import { elIcons } from '@/common/element/element.ts'
 
 const props = withDefaults(
   defineProps<{
     transRecodes?: OrderTypes.TransRecode[]
     selectable?: boolean
+    summaries: string[]
   }>(),
   {
     selectable: false,
@@ -49,6 +52,16 @@ function rowClick(val: Record<string, any> & { id: string }) {
   model.value = selectRows.$clone()
 }
 
+interface SummaryMethodProps {
+  columns: TableColumnCtx<OrderTypes.TransRecode>[]
+  data: OrderTypes.TransRecode[]
+}
+
+const getSummaries = ({columns, data}: SummaryMethodProps) => {
+  const sums: (string | VNode)[] = []
+  console.log(columns, data)
+  return sums
+}
 </script>
 
 <template>
@@ -56,9 +69,12 @@ function rowClick(val: Record<string, any> & { id: string }) {
     :data="transRecodes"
     cell-class-name="table-cell"
     class="data-table"
+    :class="{selectable}"
     empty-text="暂无数据"
     header-row-class-name="table-header"
     row-key="id"
+    :summary-method="getSummaries"
+    show-summary
     @row-click="rowClick">
     <ElTableColumn v-if="selectable" width="50">
       <template #default="{row}">
@@ -80,10 +96,12 @@ function rowClick(val: Record<string, any> & { id: string }) {
     <ElTableColumn label="毛重" prop="truckLicensePlate"/>
     <ElTableColumn label="皮重" prop="truckLicensePlate"/>
     <ElTableColumn label="净重" prop="truckLicensePlate"/>
+    <ElTableColumn label="勘料员" prop="truckLicensePlate"/>
+    <ElTableColumn label="总金额" prop="truckLicensePlate"/>
     <ElTableColumn label="支付状态" prop="truckLicensePlate"/>
     <ElTableColumn label="运输状态" prop="truckLicensePlate"/>
     <ElTableColumn label="勘料状态" prop="truckLicensePlate"/>
-    <ElTableColumn label="操作" prop="action" width="150">
+    <ElTableColumn label="操作" prop="action" width="200">
       <div class="action-btn">
         <ElButton plain type="success">
           <AIcon name="approach"/>
@@ -94,6 +112,7 @@ function rowClick(val: Record<string, any> & { id: string }) {
         <ElButton plain type="warning">
           <AIcon name="chakanliaodan"/>
         </ElButton>
+        <ElButton :icon="elIcons.Position" plain type="primary"/>
       </div>
     </ElTableColumn>
   </ElTable>
@@ -102,6 +121,12 @@ function rowClick(val: Record<string, any> & { id: string }) {
 <style lang="stylus" scoped>
 .data-table {
   width 100%
+
+  &.selectable {
+    :deep(.el-table__row) {
+      cursor pointer;
+    }
+  }
 }
 
 .action-btn {

src/pages/order/book/Book.vue

@@ -6,19 +6,19 @@
       <ElFormItem label="订单编号">
         <ElInput v-model="formData.sn" placeholder="订单编号"/>
       </ElFormItem>
-      <ElFormItem label="订单状态">
+      <!-- <ElFormItem label="订单状态">
         <ElSelect v-model="formData.orderStatus" placeholder="订单状态">
           <ElOption v-for="item in orderStatus" :key="item.val" :label="item.txt" :value="item.val"/>
         </ElSelect>
-      </ElFormItem>
+      </ElFormItem> -->
       <ElFormItem label="收纳站点">
-        <ElInput v-model="formData.stationId" placeholder="站点"/>
+        <ElInput v-model="formData.stationId" placeholder="收纳站点"/>
       </ElFormItem>
       <ElFormItem label="客户姓名">
         <ElInput v-model="formData.contacts" placeholder="客户姓名"/>
       </ElFormItem>
-      <ElFormItem label="联系方式">
-        <ElInput v-model="formData.phone" placeholder="联系方式"/>
+      <ElFormItem label="客户电话">
+        <ElInput v-model="formData.phone" placeholder="客户电话"/>
       </ElFormItem>
       <ElFormItem label="运输企业">
         <ElInput v-model="formData.transOrgName" placeholder="运输企业"/>
@@ -29,55 +29,58 @@
       <ElFormItem label="下单时间">
         <ADtPicker v-model="formData.orderTimes" :change-handler="research"/>
       </ElFormItem>
-      <ElFormItem label="完结时间">
+      <!-- <ElFormItem label="完结时间">
         <ADtPicker v-model="formData.finishTimes" :change-handler="research"/>
-      </ElFormItem>
+      </ElFormItem> -->
     </template>
     <template #simpleFormItem="formData">
-      <ElFormItem>
+      <!-- <ElFormItem>
         <ElSelect v-model="formData.orderStatus" placeholder="订单状态">
           <ElOption v-for="item in orderStatus" :key="item.val" :label="item.txt" :value="item.val"/>
         </ElSelect>
-      </ElFormItem>
+      </ElFormItem> -->
       <ElFormItem>
         <ElInput v-model="formData.sn" placeholder="订单编号"/>
       </ElFormItem>
     </template>
     <template #columns>
       <ElTableColumn fixed="left" label="订单编号" prop="sn" width="140"/>
-      <!-- <ElTableColumn label="下单时间" prop="orderTime"/> -->
       <ElTableColumn label="客户姓名" prop="contacts" width="100"/>
-      <!-- <ElTableColumn label="联系方式" prop="phone"/> -->
+      <ElTableColumn label="客户电话" prop="phone" width="120"/>
       <ElTableColumn label="货品名称" prop="goodsName" width="120"/>
-
-      <ElTableColumn label="项目名称" prop="projectName" show-overflow-tooltip width="100">
+      <!-- <ElTableColumn label="项目名称" prop="projectName" show-overflow-tooltip width="100">
         <template #default="{row}">
           {{ row.projectName ?? '-' }}
         </template>
-      </ElTableColumn>
+      </ElTableColumn> -->
       <ElTableColumn label="站点名称" prop="stationName" width="120"/>
-      <ElTableColumn label="运输单位" prop="transOrgName" show-overflow-tooltip width="120"/>
-      <!-- <ElTableColumn label="运距（米）" prop="transDistance"/> -->
+      <ElTableColumn label="运输单位" prop="transOrgName" show-overflow-tooltip width="100"/>
+      <ElTableColumn label="运距" prop="transDistance" width="100">
+        <template #default="{row}">
+          {{ `${row.transDistance == null ? '' : row.transDistance + ' 公里'}` }}
+        </template>
+      </ElTableColumn>
 
       <ElTableColumn label="车次" prop="trainNum" width="70"/>
       <ElTableColumn label="车牌号" prop="truckLicensePlate" width="120"/>
-      <!-- <ElTableColumn label="司机姓名" prop="driverName"/> -->
-      <!-- <ElTableColumn label="司机电话" prop="driverPhone"/> -->
-
-      <ElTableColumn label="净重（吨）" prop="settleWeight" width="100"/>
-      <!-- <ElTableColumn label="毛重（吨）" prop="roughWeight"/> -->
-      <!-- <ElTableColumn label="皮重（吨）" prop="tareWeight"/> -->
-      <ElTableColumn label="进场时间" prop="inTime" width="130"/>
-      <!-- <ElTableColumn label="开始运输时间" prop="transTime"/> -->
-      <ElTableColumn label="出场时间" prop="outTime" width="130"/>
-      <!-- <ElTableColumn label="完结时间" prop="finishTime"/> -->
-      <ElTableColumn fixed="right" label="支付状态" prop="paymentStatusTxt" width="90"/>
-
-      <ElTableColumn fixed="right" label="订单状态" prop="transStatusTxt" width="90"/>
-      <ElTableColumn fixed="right" label="勘料状态" prop="checkStatusTxt" width="90"/>
-
-
-      <!-- <ElTableColumn label="客户备注" prop="customerMemo"/> -->
+      <ElTableColumn label="司机姓名" prop="driverName" width="100"/>
+      <ElTableColumn label="司机电话" prop="driverPhone" width="120"/>
+      <ElTableColumn label="下单时间" prop="orderTime" width="175"/>
+      <ElTableColumn fixed="right" label="支付状态" prop="paymentStatusTxt" width="90">
+        <template #default="{row}">
+          <ElTag :data-cs="paymentStatusColor.cs(row.paymentStatus)"> {{ row.paymentStatusTxt }}</ElTag>
+        </template>
+      </ElTableColumn>
+      <ElTableColumn fixed="right" label="订单状态" prop="transStatus" width="90">
+        <template #default="{row}">
+          <ElTag :data-cs="transStatusColor.cs(row.transStatus)"> {{ row.transStatusTxt }}</ElTag>
+        </template>
+      </ElTableColumn>
+      <ElTableColumn fixed="right" label="勘料状态" prop="checkStatusTxt" width="90">
+        <template #default="{row}">
+          <ElTag :data-cs="checkStatusColor.cs(row.checkStatus)"> {{ row.checkStatusTxt }}</ElTag>
+        </template>
+      </ElTableColumn>
     </template>
     <BookForm ref="bookForm" :research="research"/>
     <BookDetail ref="bookDetail"/>
@@ -93,13 +96,16 @@ import ATablePage, {
   buildTablePageProps,
 } from '@/components/a-page/a-table-page/ATablePage.tsx'
 import {
+  checkStatusColor,
   orderCategory,
-  orderStatus,
+  paymentStatusColor,
   transStatus,
+  transStatusColor,
 } from '@/pages/order/constants.ts'
 import BookDetail from '@/pages/order/book/BookDetail.vue'
 import type { R } from '@/common/utils/http-util.ts'
 import DispatchForm from '@/pages/order/book/DispatchForm.vue'
+import OrderApi from '@/pages/order/order-api.ts'
 
 const props = defineProps<{
   defaultOrderCategory: typeof orderCategory[number]['val']
@@ -114,7 +120,7 @@ function research() {
   tablePageIns.value?.doSearch()
 }
 
-const spanColumn = [ 'sn', 'contacts', 'goodsName', 'projectName', 'stationName', 'transOrgName', 'tableAction' ]
+const spanColumn = [ 'sn', 'orderTime', 'contacts', 'phone', 'goodsName', 'projectName', 'stationName', 'transOrgName', 'transDistance', 'tableAction' ]
 const tablePageProps = buildTablePageProps<OrderTypes.SearchOrderParam, OrderTypes.TableData>({
   pageLayout: {
     searchFormHeight: '180px',
@@ -130,9 +136,9 @@ const tablePageProps = buildTablePageProps<OrderTypes.SearchOrderParam, OrderTyp
       rgap: 20,
     },
     simpleForm: {
-      colCount: 2,
+      colCount: 1,
     },
-    /* paging(param: OrderTypes.SearchOrderParam) {
+    paging(param: OrderTypes.SearchOrderParam) {
       return OrderApi.paging(param)
         .then(res => {
           const records = res.data.records
@@ -152,61 +158,6 @@ const tablePageProps = buildTablePageProps<OrderTypes.SearchOrderParam, OrderTyp
           }
           return res as R<G.PageResult<OrderTypes.TableData>>
         })
-     }, */
-    paging(param: OrderTypes.SearchOrderParam) {
-      return Promise.resolve({
-        code: 200,
-        data: {
-          current: param.current,
-          size: param.size,
-          total: 100,
-          records: [
-            {
-              rowCount: 2,
-              id: '123',
-              sn: '202308240001',
-              orderTime: '2023-08-24 10:00:00',
-              contacts: '张三',
-              phone: '13800000000',
-              projectName: '项目A',
-              stationName: '站点B',
-              goodsName: '商品X',
-              unit: '吨',
-              customerMemo: '客户备注',
-              estimatedQuantity: 100,
-              estimatedTrainNum: 2,
-              transDistance: 500,
-              orderCategoryTxt: '订单类型A',
-              transOrgName: '运输公司',
-              transStatusTxt: '运输中',
-              transStatus: 'DaiPaiDan',
-              checkStatusTxt: '未勘料',
-              paymentStatusTxt: '未支付',
-            } as OrderTypes.TableData,
-            {
-              rowCount: 0,
-              id: '123',
-              sn: '202308240001',
-              orderTime: '2023-08-24 10:00:00',
-              contacts: '张三',
-              phone: '13800000000',
-              projectName: '项目A',
-              stationName: '站点B',
-              goodsName: '商品X',
-              unit: '吨',
-              customerMemo: '客户备注',
-              estimatedQuantity: 100,
-              estimatedTrainNum: 2,
-              transDistance: 500,
-              orderCategoryTxt: '订单类型A',
-              transStatusTxt: '运输中',
-              transStatus: 'DaiPaiDan',
-              checkStatusTxt: '未勘料',
-              paymentStatusTxt: '未支付',
-            } as OrderTypes.TableData,
-          ],
-        },
-      } as R<G.PageResult<OrderTypes.TableData>>)
     },
   },
   toolBar: {
@@ -215,7 +166,7 @@ const tablePageProps = buildTablePageProps<OrderTypes.SearchOrderParam, OrderTyp
         icon: 'Plus',
         label: '新建',
         action() {
-          bookFormIns.value?.open()
+          bookFormIns.value?.open(orderCategory.HuiShouYuYue)
         },
       },
     ],

src/pages/order/book/BookDetail.vue

@@ -4,7 +4,7 @@
     class="book-detail-panel"
     v-bind="detailPanelProps">
     <template #default="detailData">
-      <ElDescriptions :column="4" :title="'订单信息（' + detailData.orderCategoryTxt+'）'" border class="description">
+      <ElDescriptions :column="4" :title="Strings.isBlank(detailData.orderCategoryTxt)?'订单信息':'订单信息（' + detailData.orderCategoryTxt+'）'" border class="description">
         <ElDescriptionsItem label="订单编号">
           {{ detailData.sn }}
         </ElDescriptionsItem>
@@ -17,18 +17,17 @@
         <ElDescriptionsItem label="项目名称">
           {{ detailData.projectInfo?.projectName || '-' }}
         </ElDescriptionsItem>
-
         <ElDescriptionsItem label="站点名称">
           {{ detailData.stationName }}
         </ElDescriptionsItem>
         <ElDescriptionsItem label="预估量">
-          {{ detailData.estimatedQuantity + ' ' + (detailData.unitTxt ?? '') }}
+          {{ detailData.estimatedQuantity == null ? '' : detailData.estimatedQuantity + ' ' + (detailData.unitTxt ?? '') }}
         </ElDescriptionsItem>
         <ElDescriptionsItem label="预估车数">
           {{ detailData.estimatedTrainNum }}
         </ElDescriptionsItem>
         <ElDescriptionsItem label="运距">
-          {{ detailData.transDistance }} 公里
+          {{ `${detailData.transDistance == null ? '' : detailData.transDistance + ' 公里'}` }}
         </ElDescriptionsItem>
 
         <ElDescriptionsItem label="客户姓名">
@@ -43,12 +42,31 @@
       </ElDescriptions>
       <ElDescriptions :column="1" class="description" direction="vertical" title="运输信息">
         <ElDescriptionsItem :span="1">
-          <TransRecode v-model="transIds" :selectable="true" :trans-recodes="detailData.transRecodes"/>
+          <TransRecode :trans-recodes="detailData.transRecodes" v-bind="transRecodeProps">
+            <ElTableColumn label="车次" prop="trainNum"/>
+            <ElTableColumn label="司机姓名" prop="driverName"/>
+            <ElTableColumn label="司机电话" prop="driverPhone"/>
+            <ElTableColumn label="车牌号" prop="truckLicensePlate"/>
+            <ElTableColumn fixed="right" label="运输状态" prop="transStatusTxt" width="100">
+              <template #default="{row}">
+                <ElTag :data-cs="transStatusColor.cs(row.transStatus)"> {{ row.transStatusTxt }}</ElTag>
+              </template>
+            </ElTableColumn>
+            <ElTableColumn fixed="right" label="操作" prop="tableAction" width="60">
+              <template #default="{row}">
+                <div class="action-btn">
+                  <ElTooltip content="派单" placement="top">
+                    <ElButton :disabled="!Strings.isBlank(row.driverName)" :icon="elIcons.Position" class="icon-btn" plain type="primary" @click="dispatch(detailData, row.id, row.trainNum)"/>
+                  </ElTooltip>
+                </div>
+              </template>
+            </ElTableColumn>
+          </TransRecode>
         </ElDescriptionsItem>
       </ElDescriptions>
     </template>
     <template #footer="detailData">
-      <ElButton :disabled="transIds.length<1" type="primary" @click="dispatch(detailData)">派单</ElButton>
+      <ElButton :disabled="transRecodeProps.moduleValue.length<1" type="primary" @click="dispatch(detailData)">派单</ElButton>
       <DispatchForm ref="dispatchForm"/>
     </template>
   </ADetailPanel>
@@ -59,118 +77,38 @@ import ADetailPanel, {
   type ADetailPanelInstance,
   buildDetailPanelProps,
 } from '@/components/a-detail-panel/ADetailPanel.tsx'
-import TransRecode from '@/pages/order/TransRecode.vue'
+import TransRecode, { buildTransRecodeProps } from '@/pages/order/trans-recode/TransRecode.tsx'
 import DispatchForm from '@/pages/order/book/DispatchForm.vue'
+import { transStatusColor } from '@/pages/order/constants.ts'
+import { elIcons } from '@/common/element/element.ts'
+import Strings from '@/common/utils/strings.ts'
+import OrderApi from '@/pages/order/order-api.ts'
 
 const detailPanelIns = useTemplateRef<ADetailPanelInstance<OrderTypes.TableData>>('detailPanel')
 const dispatchFormIns = useTemplateRef<InstanceType<typeof DispatchForm>>('dispatchForm')
 
-const transIds = ref([] as string[])
+const transRecodeProps = buildTransRecodeProps({
+  moduleValue: [],
+  selectable: true,
+  disabledRowsMethod(rows) {
+    return rows?.filter(it => !Strings.isBlank(it.driverName)).map(it => it.id!)
+  },
+})
 
-function dispatch(data: OrderTypes.SearchOrderResult) {
+function dispatch(data: OrderTypes.SearchOrderResult, transId?: string, trainNum?: number) {
   dispatchFormIns.value?.open({
     orderId: data.id,
     sn: data.sn,
-    transIds: transIds.value,
+    transIds: transId == null ? transRecodeProps.moduleValue : [ transId ],
     transOrgId: data.transOrgId,
+    trainNum,
   })
 }
 
 const detailPanelProps = buildDetailPanelProps<OrderTypes.SearchOrderResult>({
   title: '订单详情',
   width: '80vw',
-  detailsLoader: () => {
-    return Promise.resolve({
-      code: 200,
-      data: {
-        id: '123',
-        sn: '202308240001',
-        orderTime: '2023-08-24 10:00:00',
-        contacts: '张三',
-        phone: '13800000000',
-        projectInfo: {
-          projectName: '项目A',
-        },
-        stationName: '站点B',
-        goodsName: '商品X',
-        unit: '吨',
-        transOrgId: '1',
-        customerMemo: '客户备注',
-        estimatedQuantity: 100,
-        estimatedTrainNum: 2,
-        transDistance: 500,
-        orderCategoryTxt: '订单类型A',
-        transRecodes: [
-          {
-            id: '1',
-            transStatus: 'DaiPaiDan',
-            trainNum: '车次1',
-            transStatusTxt: '运输中',
-            driverName: '司机A',
-            driverPhone: '13900000000',
-            truckLicensePlate: '粤B12345',
-          }, {
-            id: '2',
-            transStatus: 'DaiJieDan',
-            trainNum: '车次1',
-            transStatusTxt: '运输中',
-            driverName: '司机A',
-            driverPhone: '13900000000',
-            truckLicensePlate: '粤B12345',
-          }, {
-            id: '3',
-            transStatus: 'YiJieDan',
-            trainNum: '车次1',
-            transStatusTxt: '运输中',
-            driverName: '司机A',
-            driverPhone: '13900000000',
-            truckLicensePlate: '粤B12345',
-          }, {
-            id: '4',
-            transStatus: 'YunShuZhong',
-            trainNum: '车次1',
-            transStatusTxt: '运输中',
-            driverName: '司机A',
-            driverPhone: '13900000000',
-            truckLicensePlate: '粤B12345',
-          }, {
-            id: '5',
-            transStatus: 'YiJinChang',
-            trainNum: '车次1',
-            transStatusTxt: '运输中',
-            driverName: '司机A',
-            driverPhone: '13900000000',
-            truckLicensePlate: '粤B12345',
-          }, {
-            id: '6',
-            transStatus: 'YiChuChang',
-            trainNum: '车次1',
-            transStatusTxt: '运输中',
-            driverName: '司机A',
-            driverPhone: '13900000000',
-            truckLicensePlate: '粤B12345',
-          }, {
-            id: '7',
-            transStatus: 'YiWanCheng',
-            trainNum: '车次1',
-            transStatusTxt: '运输中',
-            driverName: '司机A',
-            driverPhone: '13900000000',
-            truckLicensePlate: '粤B12345',
-          }, {
-            id: '8',
-            transStatus: 'YiQuXiao',
-            trainNum: '车次1',
-            transStatusTxt: '运输中',
-            driverName: '司机A',
-            driverPhone: '13900000000',
-            truckLicensePlate: '粤B12345',
-          },
-        ],
-      },
-    })
-  },
-  // detailsLoader: OrderApi.detail,
+  detailsLoader: OrderApi.detail,
 })
 defineExpose({
   open(data: OrderTypes.TableData) {

src/pages/order/book/BookForm.vue

@@ -1,98 +1,39 @@
 <template>
-  <ElDialog v-model="showDialog"
-    :close-on-click-modal="false"
-    destroy-on-close
-    width="fit-content"
-    @close="dialogCloseHandler">
-    <ElForm :model="formData"
-      :rules="rules"
-      ref="orderForm"
-      class="form-panel"
-    >
-      <ElFormItem label="Id" prop="id">
-        <ElInput
-          v-model="formData.id"
-          placeholder="Id"/>
+  <AFormPanel
+    ref="formPanel"
+    v-bind="formPanelProps">
+    <template #default="formData">
+      <div class="form-items">
+        <ElFormItem label="产品" prop="goodsId">
+          <GoodsDropTable
+            v-model="formData.goodsId"
+            :default-biz-type="category===orderCategory.XiaoShouYuYue?bizType.ZaiShengPin:bizType.HuiShouPin"/>
         </ElFormItem>
-      <ElFormItem label="订单编号" prop="sn">
-        <ElInput
-          v-model="formData.sn"
-          placeholder="订单编号"/>
+        <ElFormItem label="项目" prop="projectId">
+          <ProjectDropTable
+            v-model="formData.projectId"/>
         </ElFormItem>
-      <ElFormItem label="项目 Id" prop="projectId">
-        <ElInput
-          v-model="formData.projectId"
-          placeholder="项目 Id"/>
+        <ElFormItem label="产废方" prop="contacts">
+          <CustomerDropTable
+            v-model="formData.customerId"/>
         </ElFormItem>
-      <ElFormItem label="下单人 Id；sys_user.id" prop="userId">
-        <ElInput
-          v-model="formData.userId"
-          placeholder="下单人 Id；sys_user.id"/>
-      </ElFormItem>
-      <ElFormItem label="下单人客户 Id；cst_customer.id" prop="customerId">
-        <ElInput
-          v-model="formData.customerId"
-          placeholder="下单人客户 Id；cst_customer.id"/>
-      </ElFormItem>
-      <ElFormItem label="下单人姓名" prop="contacts">
+        <ElFormItem label="客户姓名" prop="contacts">
           <ElInput
             v-model="formData.contacts"
-          placeholder="下单人姓名"/>
+            placeholder="客户姓名"/>
         </ElFormItem>
-      <ElFormItem label="下单人联系方式" prop="phone">
+        <ElFormItem label="客户电话" prop="phone">
           <ElInput
             v-model="formData.phone"
-          placeholder="下单人联系方式"/>
+            placeholder="客户电话"/>
         </ElFormItem>
-      <ElFormItem label="下单时间" prop="orderTime">
-        <ElInput
-          v-model="formData.orderTime"
-          placeholder="下单时间"/>
+        <ElFormItem label="运输企业" prop="transOrgId">
+          <OrgDropTable
+            v-model="formData.transOrgId"/>
         </ElFormItem>
-      <ElFormItem label="订单类型；字典代码：order_category，HuiShouYuYue-->回收预约单、XiaoShouYuYue-->销售预约单、DuanBoRu-->短驳入、DuanBoChu-->短驳出" prop="orderCategory">
-        <ElInput
-          v-model="formData.orderCategory"
-          placeholder="订单类型；字典代码：order_category，HuiShouYuYue-->回收预约单、XiaoShouYuYue-->销售预约单、DuanBoRu-->短驳入、DuanBoChu-->短驳出"/>
-      </ElFormItem>
-      <ElFormItem label="订单状态；字典代码：order_status，YiYuYue-->已预约、JinXingZhong-->进行中、YiWanCheng-->已完成、YiQuXiao-->已取消" prop="orderStatus">
-        <ElInput
-          v-model="formData.orderStatus"
-          placeholder="订单状态；字典代码：order_status，YiYuYue-->已预约、JinXingZhong-->进行中、YiWanCheng-->已完成、YiQuXiao-->已取消"/>
-      </ElFormItem>
-      <ElFormItem label="完结时间" prop="finishTime">
-        <ElInput
-          v-model="formData.finishTime"
-          placeholder="完结时间"/>
-      </ElFormItem>
-      <ElFormItem label="运输企业 Id；cst_org.id" prop="transOrgId">
-        <ElInput
-          v-model="formData.transOrgId"
-          placeholder="运输企业 Id；cst_org.id"/>
-      </ElFormItem>
-      <ElFormItem label="运输方客户 Id" prop="transCustomerId">
-        <ElInput
-          v-model="formData.transCustomerId"
-          placeholder="运输方客户 Id"/>
-      </ElFormItem>
-      <ElFormItem label="指派清运公司时间" prop="assignmentTransTime">
-        <ElInput
-          v-model="formData.assignmentTransTime"
-          placeholder="指派清运公司时间"/>
-      </ElFormItem>
-      <ElFormItem label="站点 Id；cst_station.id" prop="stationId">
-        <ElInput
-          v-model="formData.stationId"
-          placeholder="站点 Id；cst_station.id"/>
-      </ElFormItem>
-      <ElFormItem label="站点名称；cst_station.station.name" prop="stationName">
-        <ElInput
-          v-model="formData.stationName"
-          placeholder="站点名称；cst_station.station.name"/>
-      </ElFormItem>
-      <ElFormItem label="运距；单位：米" prop="transDistance">
-        <ElInput
-          v-model="formData.transDistance"
-          placeholder="运距；单位：米"/>
+        <ElFormItem label="收纳站点" prop="stationId">
+          <StationDropTable
+            v-model="formData.stationId"/>
         </ElFormItem>
         <ElFormItem label="预估量" prop="estimatedQuantity">
           <ElInput
@@ -104,153 +45,78 @@
             v-model="formData.estimatedTrainNum"
             placeholder="预估车数"/>
         </ElFormItem>
-      <ElFormItem label="产品 Id" prop="goodsId">
-        <ElInput
-          v-model="formData.goodsId"
-          placeholder="产品 Id"/>
-      </ElFormItem>
-      <ElFormItem label="产品名称" prop="goodsName">
-        <ElInput
-          v-model="formData.goodsName"
-          placeholder="产品名称"/>
-      </ElFormItem>
-      <ElFormItem label="计量单位；字典代码：unit" prop="unit">
-        <ElInput
-          v-model="formData.unit"
-          placeholder="计量单位；字典代码：unit"/>
-      </ElFormItem>
         <ElFormItem label="客户备注" prop="customerMemo">
           <ElInput
             v-model="formData.customerMemo"
             placeholder="客户备注"/>
         </ElFormItem>
-      <ElFormItem label="创建人 Id； sys_user.id" prop="creatorId">
-        <ElInput
-          v-model="formData.creatorId"
-          placeholder="创建人 Id； sys_user.id"/>
-      </ElFormItem>
-      <ElFormItem label="修改人 Id； sys_user.id" prop="modifierId">
-        <ElInput
-          v-model="formData.modifierId"
-          placeholder="修改人 Id； sys_user.id"/>
-      </ElFormItem>
-      <ElFormItem label="创建时间" prop="createTime">
-        <ElInput
-          v-model="formData.createTime"
-          placeholder="创建时间"/>
-      </ElFormItem>
-      <ElFormItem label="修改时间" prop="modifyTime">
-        <ElInput
-          v-model="formData.modifyTime"
-          placeholder="修改时间"/>
-      </ElFormItem>
-    </ElForm>
-    <template #footer>
-      <ElButton @click="showDialog = false">{{ status === 'view' ? '关闭' : '取消' }}</ElButton>
-      <ElButton v-if="status !== 'view'" :loading="submiting" type="primary" @click="submitHandler">提交</ElButton>
+      </div>
     </template>
-  </ElDialog>
+  </AFormPanel>
 </template>
 
 <script lang="ts" setup>
 import OrderApi from '@/pages/order/order-api.ts'
-import Strings from '@/common/utils/strings.ts'
-import FormUtil from '@/common/utils/formUtil.ts'
-import Utils from '@/common/utils'
+import AFormPanel, {
+  type AFormPanelInstance,
+  buildFormPanelProps,
+} from '@/components/a-form-panel/AFormPanel.tsx'
+import { bizType } from '@/pages/gds/goods-category/constants.ts'
 import {
-  ElMessage,
-  type FormInstance,
-  type FormRules,
-} from 'element-plus'
+  orderCategory,
+  type OrderCategoryType,
+} from '@/pages/order/constants.ts'
+import ProjectDropTable from '@/pages/cst/project/ProjectDropTable.vue'
+import CustomerDropTable from '@/pages/cst/customer/CustomerDropTable.vue'
+import GoodsDropTable from '@/pages/gds/goods/GoodsDropTable.vue'
+import OrgDropTable from '@/pages/cst/org/OrgDropTable.vue'
+import StationDropTable from '@/pages/cst/station/StationDropTable.vue'
 
-const emits = defineEmits([ 'editSucc' ])
-const showDialog = ref(false)
-const submiting = ref(false)
-const status = ref<'add' | 'view' | 'modify'>('add')
 
-const orderFormIns = useTemplateRef<FormInstance>('orderForm')
-
-const formData = Utils.resetAble(reactive<OrderTypes.SearchOrderResult>({}))
-const rules = reactive<FormRules<OrderTypes.SearchOrderResult>>({
-  id: [ {required: true, message: '请填写Id', trigger: 'blur'} ],
-  sn: [ {required: true, message: '请填写订单编号', trigger: 'blur'} ],
-  projectId: [ {required: true, message: '请填写项目 Id', trigger: 'blur'} ],
-  userId: [ {required: true, message: '请填写下单人 Id；sys_user.id', trigger: 'blur'} ],
-  customerId: [ {required: true, message: '请填写下单人客户 Id；cst_customer.id', trigger: 'blur'} ],
+const props = withDefaults(defineProps<{
+  research?: () => void
+}>(), {
+  research: () => {
+  },
+})
+const formPanelIns = useTemplateRef<AFormPanelInstance>('formPanel')
+const category = ref<OrderCategoryType>('HuiShouYuYue')
+const formPanelProps = buildFormPanelProps<OrderTypes.SearchOrderResult>({
+  title: `新建${orderCategory.txt(category.value)}`,
+  detailsLoader() {
+    return Promise.resolve({} as OrderTypes.SearchOrderResult)
+  },
+  doSubmit(data) {
+    return OrderApi.add(data)
+      .then(props.research)
+  },
+  rules: () => {
+    return {
       contacts: [ {required: true, message: '请填写下单人姓名', trigger: 'blur'} ],
       phone: [ {required: true, message: '请填写下单人联系方式', trigger: 'blur'} ],
-  orderTime: [ {required: true, message: '请填写下单时间', trigger: 'blur'} ],
-  orderCategory: [ {required: true, message: '请填写订单类型；字典代码：order_category，HuiShouYuYue-->回收预约单、XiaoShouYuYue-->销售预约单、DuanBoRu-->短驳入、DuanBoChu-->短驳出', trigger: 'blur'} ],
-  orderStatus: [ {required: true, message: '请填写订单状态；字典代码：order_status，YiYuYue-->已预约、JinXingZhong-->进行中、YiWanCheng-->已完成、YiQuXiao-->已取消', trigger: 'blur'} ],
-  finishTime: [ {required: true, message: '请填写完结时间', trigger: 'blur'} ],
-  transOrgId: [ {required: true, message: '请填写运输企业 Id；cst_org.id', trigger: 'blur'} ],
-  transCustomerId: [ {required: true, message: '请填写运输方客户 Id', trigger: 'blur'} ],
-  assignmentTransTime: [ {required: true, message: '请填写指派清运公司时间', trigger: 'blur'} ],
-  stationId: [ {required: true, message: '请填写站点 Id；cst_station.id', trigger: 'blur'} ],
-  stationName: [ {required: true, message: '请填写站点名称；cst_station.station.name', trigger: 'blur'} ],
-  transDistance: [ {required: true, message: '请填写运距；单位：米', trigger: 'blur'} ],
+      orderCategory: [ {required: true, message: '请填写订单类型', trigger: 'blur'} ],
+      transOrgId: [ {required: true, message: '请填写运输企业', trigger: 'blur'} ],
+      stationId: [ {required: true, message: '请填写站点', trigger: 'blur'} ],
+      transDistance: [ {required: true, message: '请填写运距', trigger: 'blur'} ],
       estimatedQuantity: [ {required: true, message: '请填写预估量', trigger: 'blur'} ],
       estimatedTrainNum: [ {required: true, message: '请填写预估车数', trigger: 'blur'} ],
-  goodsId: [ {required: true, message: '请填写产品 Id', trigger: 'blur'} ],
-  goodsName: [ {required: true, message: '请填写产品名称', trigger: 'blur'} ],
-  unit: [ {required: true, message: '请填写计量单位；字典代码：unit', trigger: 'blur'} ],
-  customerMemo: [ {required: true, message: '请填写客户备注', trigger: 'blur'} ],
-  creatorId: [ {required: true, message: '请填写创建人 Id； sys_user.id', trigger: 'blur'} ],
-  modifierId: [ {required: true, message: '请填写修改人 Id； sys_user.id', trigger: 'blur'} ],
-  createTime: [ {required: true, message: '请填写创建时间', trigger: 'blur'} ],
-  modifyTime: [ {required: true, message: '请填写修改时间', trigger: 'blur'} ],
-  deleted: [ {required: true, message: '请填写是否删除； 0-->未删除、1-->已删除', trigger: 'blur'} ],
+      goodsId: [ {required: true, message: '请选择产品', trigger: 'blur'} ],
+    }
+  },
 })
-
-function dialogCloseHandler() {
-  formData.$reset()
-}
-
-function submitHandler() {
-  if (status.value === 'view') return
-  submiting.value = true
-  if (formData.id != null) {
-    FormUtil.submit(orderFormIns, () => OrderApi.modify(formData))
-      .then(() => {
-        ElMessage.success('修改成功')
-        emits('editSucc')
-        showDialog.value = false
-      })
-      .finally(() => {
-        submiting.value = false
-      })
-  } else {
-    FormUtil.submit(orderFormIns, () => OrderApi.add(formData))
-      .then(() => {
-        ElMessage.success('添加成功')
-        emits('editSucc')
-        showDialog.value = false
-      })
-      .finally(() => {
-        submiting.value = false
-      })
-  }
-}
-
 defineExpose({
-  open(data: OrderTypes.SearchOrderResult = {}) {
-    showDialog.value = true
-    if (!Strings.isBlank(data.id)) {
-      status.value = 'modify'
-      OrderApi.detail(data.id!)
-        .then(res => {
-          formData.$reset(res.data)
-        })
-    } else {
-      status.value = 'add'
-      formData.$reset(data)
-    }
+  open(type: OrderCategoryType) {
+    category.value = type
+    formPanelIns.value?.open()
   },
 })
 </script>
 
 <style lang="stylus" scoped>
-.form-panel {
-  padding 20px
+.form-items {
+  grid-template-columns: 1fr 1fr;
+
+  :deep(.el-form-item) {
+  }
 }
 </style>

src/pages/order/book/DispatchForm.vue

@@ -12,6 +12,7 @@ let orderId: string | undefined = undefined
 let transIds: string[] | undefined = undefined
 let transOrgId = ref<string | undefined>(undefined)
 let sn = ref<string | undefined>(undefined)
+let trainNum = ref<number | undefined>(undefined)
 
 const formPanelProps = buildFormPanelProps<OrderTypes.DispatchParam>({
   title: '派单',
@@ -40,6 +41,7 @@ defineExpose({
     transIds = data.transIds
     transOrgId.value = data.transOrgId
     sn.value = data.sn
+    trainNum.value = data.trainNum
     formPanelIns.value?.open()
   },
 })
@@ -52,7 +54,13 @@ defineExpose({
     v-bind="formPanelProps">
     <template #default="formData">
       <div class="form-items">
-        <div class="form-items-sn">单号：{{ sn }}</div>
+        <div v-if="trainNum != null" class="form-item">
+          <span>单号：{{ sn }}</span>
+          <span>车次：{{ trainNum }}</span>
+        </div>
+        <div v-else class="form-item">
+          单号：{{ sn }}
+        </div>
         <ElFormItem label=" " prop="driverId">
           <DriverDropTable v-model="formData.driverId" :org-id="transOrgId"/>
         </ElFormItem>
@@ -70,11 +78,22 @@ defineExpose({
     margin unset !important
   }
 
-  .form-items-sn {
+
+  .form-item {
     margin: 0 0 16px 0;
     text-align: center;
     font-size: 16px;
     font-weight: 600;
+    width 300px
+
+    &:has(> span) {
+      display flex
+      justify-content space-between
+    }
+
+    & > span {
+      display inline-block
+    }
   }
 }
 </style>

src/pages/order/book/book.d.ts

@@ -10,6 +10,7 @@ declare global {
       driverId?: string
       transOrgId?: string
       sn?: string
+      trainNum?: number
     }
 
     interface SearchOrderParam extends G.PageParam {

src/pages/order/cancel/Cancel.vue

@@ -3,112 +3,133 @@
     ref="tablePage"
     v-bind="tablePageProps">
     <template #highFormItem="formData">
-      <ElFormItem label="站点">
-        <ElInput v-model="formData.stationId" placeholder="站点"/>
-      </ElFormItem>
       <ElFormItem label="订单编号">
         <ElInput v-model="formData.sn" placeholder="订单编号"/>
       </ElFormItem>
-      <ElFormItem label="项目名称">
-        <ElInput v-model="formData.projectName" placeholder="项目名称"/>
+      <!-- <ElFormItem label="订单状态">
+        <ElSelect v-model="formData.orderStatus" placeholder="订单状态">
+          <ElOption v-for="item in orderStatus" :key="item.val" :label="item.txt" :value="item.val"/>
+        </ElSelect>
+      </ElFormItem> -->
+      <ElFormItem label="收纳站点">
+        <ElInput v-model="formData.stationId" placeholder="收纳站点"/>
       </ElFormItem>
       <ElFormItem label="客户姓名">
         <ElInput v-model="formData.contacts" placeholder="客户姓名"/>
       </ElFormItem>
-      <ElFormItem label="联系方式">
-        <ElInput v-model="formData.phone" placeholder="联系方式"/>
+      <ElFormItem label="客户电话">
+        <ElInput v-model="formData.phone" placeholder="客户电话"/>
       </ElFormItem>
-
-      <ElFormItem label="订单类型">
-        <ElInput v-model="formData.orderCategory" placeholder="订单类型"/>
-      </ElFormItem>
-      <!--    <ElFormItem label="订单状态">
-           <ElInput v-model="formData.orderStatus" placeholder="订单状态"/>
-         </ElFormItem> -->
       <ElFormItem label="运输企业">
         <ElInput v-model="formData.transOrgName" placeholder="运输企业"/>
       </ElFormItem>
+      <ElFormItem label="项目名称">
+        <ElInput v-model="formData.projectName" placeholder="项目名称"/>
+      </ElFormItem>
       <ElFormItem label="下单时间">
         <ADtPicker v-model="formData.orderTimes" :change-handler="research"/>
       </ElFormItem>
-      <ElFormItem label="完结时间">
-        <ADtPicker v-model="formData.finishTimes" :change-handler="research"/>
-      </ElFormItem>
     </template>
     <template #simpleFormItem="formData">
       <ElFormItem>
-        <ElInput v-model="formData.sn" placeholder="订单编号"/>
-      </ElFormItem>
-      <ElFormItem>
-        <ElInput v-model="formData.orderCategory" placeholder="订单类型"/>
+        <ElInput v-model="formData.keywords" placeholder="单号/车牌号"/>
       </ElFormItem>
     </template>
     <template #columns>
       <ElTableColumn fixed="left" label="订单编号" prop="sn" width="140"/>
       <!-- <ElTableColumn label="下单时间" prop="orderTime"/> -->
-      <ElTableColumn label="客户姓名" prop="contacts" width="100"/>
+      <!-- <ElTableColumn label="客户姓名" prop="contacts"/> -->
       <!-- <ElTableColumn label="联系方式" prop="phone"/> -->
-      <ElTableColumn label="货品名称" prop="goodsName" width="120"/>
+      <ElTableColumn label="货品名称" prop="goodsName"/>
 
-      <ElTableColumn label="项目名称" show-overflow-tooltip width="100">
+      <!-- <ElTableColumn label="项目名称" show-overflow-tooltip width="100">
         <template #default="{row}">
           {{ row.projectName ?? '-' }}
         </template>
-      </ElTableColumn>
-      <ElTableColumn label="站点名称" prop="stationName" width="120"/>
-      <ElTableColumn label="运输单位" prop="transOrgName" show-overflow-tooltip width="120"/>
+      </ElTableColumn> -->
+      <!-- <ElTableColumn label="站点名称" prop="stationName" width="120"/> -->
+      <!-- <ElTableColumn label="运输单位" prop="transOrgName" show-overflow-tooltip width="140"/> -->
       <!-- <ElTableColumn label="运距（米）" prop="transDistance"/> -->
 
       <ElTableColumn label="车次" prop="trainNum" width="70"/>
-      <ElTableColumn label="车牌号" prop="truckLicensePlate" width="120"/>
+      <ElTableColumn label="车牌号" prop="licensePlate" width="120"/>
       <!-- <ElTableColumn label="司机姓名" prop="driverName"/> -->
       <!-- <ElTableColumn label="司机电话" prop="driverPhone"/> -->
 
-      <ElTableColumn label="净重（吨）" prop="settleWeight" width="100"/>
-      <!-- <ElTableColumn label="毛重（吨）" prop="roughWeight"/> -->
-      <!-- <ElTableColumn label="皮重（吨）" prop="tareWeight"/> -->
-      <ElTableColumn label="进场时间" prop="inTime" width="130"/>
+      <ElTableColumn label="毛重" prop="roughWeight">
+        <template #default="{row}">
+          {{ `${row.roughWeight == null ? '' : row.roughWeight + ' 吨'}` }}
+        </template>
+      </ElTableColumn>
+      <ElTableColumn label="皮重" prop="tareWeight">
+        <template #default="{row}">
+          {{ `${row.tareWeight == null ? '' : row.tareWeight + ' 吨'}` }}
+        </template>
+      </ElTableColumn>
+      <ElTableColumn label="净重" prop="settleWeight">
+        <template #default="{row}">
+          {{ `${row.settleWeight == null ? '' : row.settleWeight + ' 吨'}` }}
+        </template>
+      </ElTableColumn>
+      <ElTableColumn label="进场时间" prop="inTime" width="175"/>
       <!-- <ElTableColumn label="开始运输时间" prop="transTime"/> -->
-      <ElTableColumn label="出场时间" prop="outTime" width="130"/>
+      <ElTableColumn label="出场时间" prop="outTime" width="175"/>
       <!-- <ElTableColumn label="完结时间" prop="finishTime"/> -->
-      <ElTableColumn fixed="right" label="支付状态" prop="paymentStatusTxt" width="90"/>
-
-      <ElTableColumn fixed="right" label="订单状态" prop="transStatusTxt" width="90"/>
-      <ElTableColumn fixed="right" label="勘料状态" prop="checkStatusTxt" width="90"/>
-
+      <ElTableColumn fixed="right" label="支付状态" prop="paymentStatusTxt" width="90">
+        <template #default="{row}">
+          <ElTag :data-cs="paymentStatusColor.cs(row.paymentStatus)"> {{ row.paymentStatusTxt }}</ElTag>
+        </template>
+      </ElTableColumn>
+      <ElTableColumn fixed="right" label="勘料状态" prop="checkStatusTxt" width="90">
+        <template #default="{row}">
+          <ElTag :data-cs="checkStatusColor.cs(row.checkStatus)"> {{ row.checkStatusTxt }}</ElTag>
+        </template>
+      </ElTableColumn>
+      <ElTableColumn fixed="right" label="运输状态" prop="transStatusTxt" width="100">
+        <template #default="{row}">
+          <ElTag :data-cs="transStatusColor.cs(row.transStatus)"> {{ row.transStatusTxt }}</ElTag>
+        </template>
+      </ElTableColumn>
 
       <!-- <ElTableColumn label="客户备注" prop="customerMemo"/> -->
     </template>
-    <OrderForm ref="orderForm" :research="research"/>
-    <BookDetail ref="bookDetail"/>
+    <CancelDetail ref="cancelDetail"/>
   </ATablePage>
 </template>
 
 <script lang="ts" setup>
-import OrderForm from '@/pages/order/book/BookForm.vue'
 import ADtPicker from '@/components/a-dt-picker/ADtPicker.vue'
 import ATablePage, {
   type ATablePageInstance,
   buildTablePageProps,
 } from '@/components/a-page/a-table-page/ATablePage.tsx'
-import BookDetail from '@/pages/order/book/BookDetail.vue'
-import { orderCategory } from '@/pages/order/constants.ts'
+import {
+  checkStatusColor,
+  orderCategory,
+  paymentStatusColor,
+  transStatusColor,
+} from '@/pages/order/constants.ts'
+import { useTemplateRef } from 'vue'
 import type { R } from '@/common/utils/http-util.ts'
+import HistoryDetail from '@/pages/order/history/HistoryDetail.vue'
+import CancelDetail from '@/pages/order/cancel/CancelDetail.vue'
 
 const props = defineProps<{
   defaultOrderCategory: typeof orderCategory[number]['val']
 }>()
-
 const tablePageIns = useTemplateRef<ATablePageInstance>('tablePage')
-const bookDetailIns = useTemplateRef<InstanceType<typeof BookDetail>>('bookDetail')
+const cancelDetailIns = useTemplateRef<InstanceType<typeof HistoryDetail>>('cancelDetail')
 
 function research() {
   tablePageIns.value?.doSearch()
 }
 
+const spanColumn = [ 'sn', 'orderTime', 'contacts', 'phone', 'goodsName', 'projectName', 'stationName', 'transOrgName', 'transDistance', 'tableAction' ]
+
 const tablePageProps = buildTablePageProps<OrderTypes.SearchOrderParam, OrderTypes.TableData>({
   pageLayout: {
-    dataListHeight: 3,
+    searchFormHeight: '180px',
+    dataListHeight: 1,
   },
   searchForm: {
     defaultData: {
@@ -147,7 +168,30 @@ const tablePageProps = buildTablePageProps<OrderTypes.SearchOrderParam, OrderTyp
           total: 100,
           records: [
             {
-              rowCount: 1,
+              rowCount: 3,
+              id: '123',
+              sn: '202308240001',
+              orderTime: '2023-08-24 10:00:00',
+              contacts: '张三',
+              phone: '13800000000',
+              projectName: '项目A',
+              stationName: '站点B',
+              goodsName: '商品X',
+              unit: '吨',
+              customerMemo: '客户备注',
+              estimatedQuantity: 100,
+              estimatedTrainNum: 2,
+              transDistance: 500,
+              orderCategoryTxt: '订单类型A',
+              transStatusTxt: '已进场',
+              transStatus: 'YiJinChang',
+              checkStatus: 'YiKanLiao',
+              checkStatusTxt: '未勘料',
+              paymentStatusTxt: '未支付',
+              truckLicensePlate: '苏A9B905',
+            },
+            {
+              rowCount: 0,
               id: '123',
               sn: '202308240001',
               orderTime: '2023-08-24 10:00:00',
@@ -163,25 +207,62 @@ const tablePageProps = buildTablePageProps<OrderTypes.SearchOrderParam, OrderTyp
               transDistance: 500,
               orderCategoryTxt: '订单类型A',
               transStatusTxt: '运输中',
-              transStatus: 'DaiPaiDan',
+              transStatus: 'YunShuZhong',
+              checkStatus: 'WeiKanLiao',
               checkStatusTxt: '未勘料',
               paymentStatusTxt: '未支付',
-            } as OrderTypes.TableData,
-          ],
+              truckLicensePlate: '苏A9B905',
+            },
+            {
+              rowCount: 0,
+              id: '123',
+              sn: '202308240001',
+              orderTime: '2023-08-24 10:00:00',
+              contacts: '张三',
+              phone: '13800000000',
+              projectName: '项目A',
+              stationName: '站点B',
+              goodsName: '商品X',
+              unit: '吨',
+              customerMemo: '客户备注',
+              estimatedQuantity: 100,
+              estimatedTrainNum: 2,
+              transDistance: 500,
+              orderCategoryTxt: '订单类型A',
+              transStatusTxt: '已进场',
+              transStatus: 'YiJinChang',
+              checkStatus: 'WeiKanLiao',
+              checkStatusTxt: '未勘料',
+              paymentStatusTxt: '未支付',
+              truckLicensePlate: '苏A9B905',
+            },
+          ] as OrderTypes.TableData[],
         },
       } as R<G.PageResult<OrderTypes.TableData>>)
     },
   },
-
   table: {
+    spanMethod({row, column}) {
+      if (!spanColumn.includes(column.property)) {
+        return {
+          rowspan: 1,
+          colspan: 1,
+        }
+      }
+      return {
+        rowspan: row.rowCount,
+        colspan: 1,
+      }
+    },
     actionColumn: {
+      width: 100,
       tableActions: [
         {
           tooltip: '详情',
           icon: 'Postcard',
           type: 'primary',
           action({row}) {
-            bookDetailIns.value?.open(row)
+            cancelDetailIns.value?.open(row)
           },
         },
         {

src/pages/order/cancel/CancelDetail.vue

@@ -0,0 +1,172 @@
+<template>
+  <ADetailPanel
+    ref="detailPanel"
+    class="book-detail-panel"
+    v-bind="detailPanelProps">
+    <template #default="detailData">
+      <ElDescriptions :column="4" :title="Strings.isBlank(detailData.orderCategoryTxt)?'订单信息':'订单信息（' + detailData.orderCategoryTxt+'）'" border class="description">
+        <ElDescriptionsItem label="订单编号">
+          {{ detailData.sn }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="产品名称">
+          {{ detailData.goodsName }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="下单时间">
+          {{ detailData.orderTime }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="项目名称">
+          {{ detailData.projectInfo?.projectName || '-' }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="站点名称">
+          {{ detailData.stationName }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="预估量">
+          {{ detailData.estimatedQuantity == null ? '' : detailData.estimatedQuantity + ' ' + (detailData.unitTxt ?? '') }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="预估车数">
+          {{ detailData.estimatedTrainNum }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="运距">
+          {{ `${detailData.transDistance == null ? '' : detailData.transDistance + ' 公里'}` }}
+        </ElDescriptionsItem>
+
+        <ElDescriptionsItem label="客户姓名">
+          {{ detailData.contacts }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="客户电话">
+          {{ detailData.phone }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem :span="2" label="客户备注">
+          {{ detailData.customerMemo }}
+        </ElDescriptionsItem>
+      </ElDescriptions>
+      <ElDescriptions :column="1" class="description" direction="vertical" title="运输信息">
+        <ElDescriptionsItem :span="1">
+          <TransRecode :trans-recodes="detailData.transRecodes" v-bind="transRecodeProps">
+            <ElTableColumn label="车次" prop="trainNum" width="60"/>
+            <ElTableColumn label="司机姓名" prop="driverName" width="100"/>
+            <ElTableColumn label="司机电话" prop="driverPhone" width="120"/>
+            <ElTableColumn label="车牌号" prop="truckLicensePlate" width="120"/>
+            <ElTableColumn label="毛重" prop="roughWeight">
+              <template #default="{row}">
+                {{ `${row.roughWeight == null ? '' : row.roughWeight + ' 吨'}` }}
+              </template>
+            </ElTableColumn>
+            <ElTableColumn label="皮重" prop="tareWeight">
+              <template #default="{row}">
+                {{ `${row.tareWeight == null ? '' : row.tareWeight + ' 吨'}` }}
+              </template>
+            </ElTableColumn>
+            <ElTableColumn label="净重" prop="settleWeight">
+              <template #default="{row}">
+                {{ `${row.settleWeight == null ? '' : row.settleWeight + ' 吨'}` }}
+              </template>
+            </ElTableColumn>
+            <ElTableColumn label="勘料员" prop="checkerName">
+              <template #default="{row}">
+                {{ `${row.checkerName == null ? '-' : row.checkerName}` }}
+              </template>
+            </ElTableColumn>
+            <ElTableColumn label="总金额" prop="settleMoney">
+              <template #default="{row}">
+                {{ `${row.settleMoney == null ? '' : '￥：' + row.settleMoney + '元'}` }}
+              </template>
+            </ElTableColumn>
+            <ElTableColumn fixed="right" label="支付状态" prop="paymentStatusTxt" width="90">
+              <template #default="{row}">
+                <ElTag :data-cs="paymentStatusColor.cs(row.paymentStatus)"> {{ row.paymentStatusTxt }}</ElTag>
+              </template>
+            </ElTableColumn>
+            <ElTableColumn fixed="right" label="勘料状态" prop="checkStatusTxt" width="90">
+              <template #default="{row}">
+                <ElTag :data-cs="checkStatusColor.cs(row.checkStatus)"> {{ row.checkStatusTxt }}</ElTag>
+              </template>
+            </ElTableColumn>
+            <ElTableColumn fixed="right" label="运输状态" prop="transStatusTxt" width="100">
+              <template #default="{row}">
+                <ElTag :data-cs="transStatusColor.cs(row.transStatus)"> {{ row.transStatusTxt }}</ElTag>
+              </template>
+            </ElTableColumn>
+            <ElTableColumn fixed="right" label="操作" prop="tableAction" width="60">
+              <template #default="{row}">
+                <div class="action-btn">
+                  <ElTooltip v-if="row.transStatus === transStatus.YunShuZhong" content="进场" placement="top">
+                    <ElButton class="icon-btn" plain type="success" @click="jinchang(row)">
+                      <AIcon name="approach"/>
+                    </ElButton>
+                  </ElTooltip>
+                  <ElTooltip v-if="row.transStatus === transStatus.YiJinChang && (row.checkStatus === checkStatus.Wu || row.checkStatus === checkStatus.YiKanLiao)" content="出场" placement="top">
+                    <ElButton class="icon-btn" plain type="danger" @click="chuchang(row)">
+                      <AIcon name="carexit"/>
+                    </ElButton>
+                  </ElTooltip>
+                  <ElTooltip v-if="row.transStatus === transStatus.YiJinChang && row.checkStatus === checkStatus.WeiKanLiao" content="勘料" placement="top">
+                    <ElButton plain type="warning" @click="kanliao(row)">
+                      <AIcon name="chakanliaodan"/>
+                    </ElButton>
+                  </ElTooltip>
+                </div>
+              </template>
+            </ElTableColumn>
+          </TransRecode>
+        </ElDescriptionsItem>
+      </ElDescriptions>
+    </template>
+  </ADetailPanel>
+</template>
+
+<script lang="ts" setup>
+import ADetailPanel, {
+  type ADetailPanelInstance,
+  buildDetailPanelProps,
+} from '@/components/a-detail-panel/ADetailPanel.tsx'
+import TransRecode, { buildTransRecodeProps } from '@/pages/order/trans-recode/TransRecode.tsx'
+import {
+  checkStatus,
+  checkStatusColor,
+  paymentStatusColor,
+  transStatus,
+  transStatusColor,
+} from '@/pages/order/constants.ts'
+import Strings from '@/common/utils/strings.ts'
+import AIcon from '@/components/a-icon/AIcon.vue'
+import OrderApi from '@/pages/order/order-api.ts'
+
+const detailPanelIns = useTemplateRef<ADetailPanelInstance<OrderTypes.TableData>>('detailPanel')
+
+const transRecodeProps = buildTransRecodeProps({})
+
+const detailPanelProps = buildDetailPanelProps<OrderTypes.SearchOrderResult>({
+  title: '订单详情',
+  width: '80vw',
+  detailsLoader: OrderApi.detail,
+})
+
+
+function jinchang(data: OrderTypes.TransRecode) {
+  console.log(data)
+}
+
+function chuchang(data: OrderTypes.TransRecode) {
+  console.log(data)
+}
+
+function kanliao(data: OrderTypes.TransRecode) {
+  console.log(data)
+}
+
+
+defineExpose({
+  open(data: OrderTypes.TableData) {
+    detailPanelIns.value?.open(data)
+  },
+})
+</script>
+
+<style lang="stylus" scoped>
+.description {
+  .data-table {
+    height 250px !important
+  }
+}
+</style>

src/pages/order/constants.ts

@@ -19,6 +19,8 @@ const orderCategoryList = [
     txt: '短驳出',
   },
 ] as const
+export type OrderCategoryType = typeof orderCategory[number]['val']
+
 export const orderCategory = createEnum(orderCategoryList)
 
 const orderStatusList = [
@@ -112,6 +114,21 @@ const checkStatusList = [
   },
 ] as const
 export const checkStatus = createEnum(checkStatusList)
+export const checkStatusColor: {
+  cs: (data?: any, defaultColorScheme?: ColorSchemeType | '') => ColorSchemeType | ''
+} & {
+  [key in typeof checkStatusList[number]['val']]: ColorSchemeType
+} = {
+  Wu: 'info',
+  YiKanLiao: 'success',
+  WeiKanLiao: 'warning',
+  cs(data?: any, defaultColorScheme: ColorSchemeType | '' = '') {
+    if (data) {
+      return this[data as typeof checkStatusList[number]['val']]
+    }
+    return defaultColorScheme
+  },
+}
 
 const paymentStatusList = [
   {
@@ -132,3 +149,19 @@ const paymentStatusList = [
   },
 ] as const
 export const paymentStatus = createEnum(paymentStatusList)
+export const paymentStatusColor: {
+  cs: (data?: any, defaultColorScheme?: ColorSchemeType | '') => ColorSchemeType | ''
+} & {
+  [key in typeof paymentStatusList[number]['val']]: ColorSchemeType
+} = {
+  MianFei: 'primary',
+  WeiZhiFu: 'warning',
+  YiZhiFu: 'success',
+  YiTuiKuan: 'dth',
+  cs(data?: any, defaultColorScheme: ColorSchemeType | '' = '') {
+    if (data) {
+      return this[data as typeof paymentStatusList[number]['val']]
+    }
+    return defaultColorScheme
+  },
+}

src/pages/order/history/History.vue

@@ -3,112 +3,132 @@
     ref="tablePage"
     v-bind="tablePageProps">
     <template #highFormItem="formData">
-      <ElFormItem label="站点">
-        <ElInput v-model="formData.stationId" placeholder="站点"/>
-      </ElFormItem>
       <ElFormItem label="订单编号">
         <ElInput v-model="formData.sn" placeholder="订单编号"/>
       </ElFormItem>
-      <ElFormItem label="项目名称">
-        <ElInput v-model="formData.projectName" placeholder="项目名称"/>
+      <!-- <ElFormItem label="订单状态">
+        <ElSelect v-model="formData.orderStatus" placeholder="订单状态">
+          <ElOption v-for="item in orderStatus" :key="item.val" :label="item.txt" :value="item.val"/>
+        </ElSelect>
+      </ElFormItem> -->
+      <ElFormItem label="收纳站点">
+        <ElInput v-model="formData.stationId" placeholder="收纳站点"/>
       </ElFormItem>
       <ElFormItem label="客户姓名">
         <ElInput v-model="formData.contacts" placeholder="客户姓名"/>
       </ElFormItem>
-      <ElFormItem label="联系方式">
-        <ElInput v-model="formData.phone" placeholder="联系方式"/>
+      <ElFormItem label="客户电话">
+        <ElInput v-model="formData.phone" placeholder="客户电话"/>
       </ElFormItem>
-
-      <ElFormItem label="订单类型">
-        <ElInput v-model="formData.orderCategory" placeholder="订单类型"/>
-      </ElFormItem>
-      <!--    <ElFormItem label="订单状态">
-           <ElInput v-model="formData.orderStatus" placeholder="订单状态"/>
-         </ElFormItem> -->
       <ElFormItem label="运输企业">
         <ElInput v-model="formData.transOrgName" placeholder="运输企业"/>
       </ElFormItem>
+      <ElFormItem label="项目名称">
+        <ElInput v-model="formData.projectName" placeholder="项目名称"/>
+      </ElFormItem>
       <ElFormItem label="下单时间">
         <ADtPicker v-model="formData.orderTimes" :change-handler="research"/>
       </ElFormItem>
-      <ElFormItem label="完结时间">
-        <ADtPicker v-model="formData.finishTimes" :change-handler="research"/>
-      </ElFormItem>
     </template>
     <template #simpleFormItem="formData">
       <ElFormItem>
-        <ElInput v-model="formData.sn" placeholder="订单编号"/>
-      </ElFormItem>
-      <ElFormItem>
-        <ElInput v-model="formData.orderCategory" placeholder="订单类型"/>
+        <ElInput v-model="formData.keywords" placeholder="单号/车牌号"/>
       </ElFormItem>
     </template>
     <template #columns>
       <ElTableColumn fixed="left" label="订单编号" prop="sn" width="140"/>
       <!-- <ElTableColumn label="下单时间" prop="orderTime"/> -->
-      <ElTableColumn label="客户姓名" prop="contacts" width="100"/>
+      <!-- <ElTableColumn label="客户姓名" prop="contacts"/> -->
       <!-- <ElTableColumn label="联系方式" prop="phone"/> -->
-      <ElTableColumn label="货品名称" prop="goodsName" width="120"/>
+      <ElTableColumn label="货品名称" prop="goodsName"/>
 
-      <ElTableColumn label="项目名称" show-overflow-tooltip width="100">
+      <!-- <ElTableColumn label="项目名称" show-overflow-tooltip width="100">
         <template #default="{row}">
           {{ row.projectName ?? '-' }}
         </template>
-      </ElTableColumn>
-      <ElTableColumn label="站点名称" prop="stationName" width="120"/>
-      <ElTableColumn label="运输单位" prop="transOrgName" show-overflow-tooltip width="120"/>
+      </ElTableColumn> -->
+      <!-- <ElTableColumn label="站点名称" prop="stationName" width="120"/> -->
+      <!-- <ElTableColumn label="运输单位" prop="transOrgName" show-overflow-tooltip width="140"/> -->
       <!-- <ElTableColumn label="运距（米）" prop="transDistance"/> -->
 
       <ElTableColumn label="车次" prop="trainNum" width="70"/>
-      <ElTableColumn label="车牌号" prop="truckLicensePlate" width="120"/>
+      <ElTableColumn label="车牌号" prop="licensePlate" width="120"/>
       <!-- <ElTableColumn label="司机姓名" prop="driverName"/> -->
       <!-- <ElTableColumn label="司机电话" prop="driverPhone"/> -->
 
-      <ElTableColumn label="净重（吨）" prop="settleWeight" width="100"/>
-      <!-- <ElTableColumn label="毛重（吨）" prop="roughWeight"/> -->
-      <!-- <ElTableColumn label="皮重（吨）" prop="tareWeight"/> -->
-      <ElTableColumn label="进场时间" prop="inTime" width="130"/>
+      <ElTableColumn label="毛重" prop="roughWeight">
+        <template #default="{row}">
+          {{ `${row.roughWeight == null ? '' : row.roughWeight + ' 吨'}` }}
+        </template>
+      </ElTableColumn>
+      <ElTableColumn label="皮重" prop="tareWeight">
+        <template #default="{row}">
+          {{ `${row.tareWeight == null ? '' : row.tareWeight + ' 吨'}` }}
+        </template>
+      </ElTableColumn>
+      <ElTableColumn label="净重" prop="settleWeight">
+        <template #default="{row}">
+          {{ `${row.settleWeight == null ? '' : row.settleWeight + ' 吨'}` }}
+        </template>
+      </ElTableColumn>
+      <ElTableColumn label="进场时间" prop="inTime" width="175"/>
       <!-- <ElTableColumn label="开始运输时间" prop="transTime"/> -->
-      <ElTableColumn label="出场时间" prop="outTime" width="130"/>
+      <ElTableColumn label="出场时间" prop="outTime" width="175"/>
       <!-- <ElTableColumn label="完结时间" prop="finishTime"/> -->
-      <ElTableColumn fixed="right" label="支付状态" prop="paymentStatusTxt" width="90"/>
-
-      <ElTableColumn fixed="right" label="订单状态" prop="transStatusTxt" width="90"/>
-      <ElTableColumn fixed="right" label="勘料状态" prop="checkStatusTxt" width="90"/>
-
+      <ElTableColumn fixed="right" label="支付状态" prop="paymentStatusTxt" width="90">
+        <template #default="{row}">
+          <ElTag :data-cs="paymentStatusColor.cs(row.paymentStatus)"> {{ row.paymentStatusTxt }}</ElTag>
+        </template>
+      </ElTableColumn>
+      <ElTableColumn fixed="right" label="勘料状态" prop="checkStatusTxt" width="90">
+        <template #default="{row}">
+          <ElTag :data-cs="checkStatusColor.cs(row.checkStatus)"> {{ row.checkStatusTxt }}</ElTag>
+        </template>
+      </ElTableColumn>
+      <ElTableColumn fixed="right" label="运输状态" prop="transStatusTxt" width="100">
+        <template #default="{row}">
+          <ElTag :data-cs="transStatusColor.cs(row.transStatus)"> {{ row.transStatusTxt }}</ElTag>
+        </template>
+      </ElTableColumn>
 
       <!-- <ElTableColumn label="客户备注" prop="customerMemo"/> -->
     </template>
-    <OrderForm ref="orderForm" :research="research"/>
-    <BookDetail ref="bookDetail"/>
+    <HistoryDetail ref="historyDetail"/>
   </ATablePage>
 </template>
 
 <script lang="ts" setup>
-import OrderForm from '@/pages/order/book/BookForm.vue'
 import ADtPicker from '@/components/a-dt-picker/ADtPicker.vue'
 import ATablePage, {
   type ATablePageInstance,
   buildTablePageProps,
 } from '@/components/a-page/a-table-page/ATablePage.tsx'
-import BookDetail from '@/pages/order/book/BookDetail.vue'
-import { orderCategory } from '@/pages/order/constants.ts'
+import {
+  checkStatusColor,
+  orderCategory,
+  paymentStatusColor,
+  transStatusColor,
+} from '@/pages/order/constants.ts'
+import { useTemplateRef } from 'vue'
 import type { R } from '@/common/utils/http-util.ts'
+import HistoryDetail from '@/pages/order/history/HistoryDetail.vue'
 
 const props = defineProps<{
   defaultOrderCategory: typeof orderCategory[number]['val']
 }>()
 const tablePageIns = useTemplateRef<ATablePageInstance>('tablePage')
-const bookDetailIns = useTemplateRef<InstanceType<typeof BookDetail>>('bookDetail')
-
+const historyDetailIns = useTemplateRef<InstanceType<typeof HistoryDetail>>('historyDetail')
 
 function research() {
   tablePageIns.value?.doSearch()
 }
 
+const spanColumn = [ 'sn', 'orderTime', 'contacts', 'phone', 'goodsName', 'projectName', 'stationName', 'transOrgName', 'transDistance', 'tableAction' ]
+
 const tablePageProps = buildTablePageProps<OrderTypes.SearchOrderParam, OrderTypes.TableData>({
   pageLayout: {
-    dataListHeight: 3,
+    searchFormHeight: '180px',
+    dataListHeight: 1,
   },
   searchForm: {
     defaultData: {
@@ -147,7 +167,30 @@ const tablePageProps = buildTablePageProps<OrderTypes.SearchOrderParam, OrderTyp
           total: 100,
           records: [
             {
-              rowCount: 1,
+              rowCount: 3,
+              id: '123',
+              sn: '202308240001',
+              orderTime: '2023-08-24 10:00:00',
+              contacts: '张三',
+              phone: '13800000000',
+              projectName: '项目A',
+              stationName: '站点B',
+              goodsName: '商品X',
+              unit: '吨',
+              customerMemo: '客户备注',
+              estimatedQuantity: 100,
+              estimatedTrainNum: 2,
+              transDistance: 500,
+              orderCategoryTxt: '订单类型A',
+              transStatusTxt: '已进场',
+              transStatus: 'YiJinChang',
+              checkStatus: 'YiKanLiao',
+              checkStatusTxt: '未勘料',
+              paymentStatusTxt: '未支付',
+              truckLicensePlate: '苏A9B905',
+            },
+            {
+              rowCount: 0,
               id: '123',
               sn: '202308240001',
               orderTime: '2023-08-24 10:00:00',
@@ -163,9 +206,34 @@ const tablePageProps = buildTablePageProps<OrderTypes.SearchOrderParam, OrderTyp
               transDistance: 500,
               orderCategoryTxt: '订单类型A',
               transStatusTxt: '运输中',
-              transStatus: 'DaiPaiDan',
+              transStatus: 'YunShuZhong',
+              checkStatus: 'WeiKanLiao',
               checkStatusTxt: '未勘料',
               paymentStatusTxt: '未支付',
+              truckLicensePlate: '苏A9B905',
+            },
+            {
+              rowCount: 0,
+              id: '123',
+              sn: '202308240001',
+              orderTime: '2023-08-24 10:00:00',
+              contacts: '张三',
+              phone: '13800000000',
+              projectName: '项目A',
+              stationName: '站点B',
+              goodsName: '商品X',
+              unit: '吨',
+              customerMemo: '客户备注',
+              estimatedQuantity: 100,
+              estimatedTrainNum: 2,
+              transDistance: 500,
+              orderCategoryTxt: '订单类型A',
+              transStatusTxt: '已进场',
+              transStatus: 'YiJinChang',
+              checkStatus: 'WeiKanLiao',
+              checkStatusTxt: '未勘料',
+              paymentStatusTxt: '未支付',
+              truckLicensePlate: '苏A9B905',
             },
           ] as OrderTypes.TableData[],
         },
@@ -173,14 +241,27 @@ const tablePageProps = buildTablePageProps<OrderTypes.SearchOrderParam, OrderTyp
     },
   },
   table: {
+    spanMethod({row, column}) {
+      if (!spanColumn.includes(column.property)) {
+        return {
+          rowspan: 1,
+          colspan: 1,
+        }
+      }
+      return {
+        rowspan: row.rowCount,
+        colspan: 1,
+      }
+    },
     actionColumn: {
+      width: 150,
       tableActions: [
         {
           tooltip: '详情',
           icon: 'Postcard',
           type: 'primary',
           action({row}) {
-            bookDetailIns.value?.open(row)
+            historyDetailIns.value?.open(row)
           },
         },
         {
@@ -188,17 +269,17 @@ const tablePageProps = buildTablePageProps<OrderTypes.SearchOrderParam, OrderTyp
           type: 'info',
           icon: 'liandan',
           action({row}) {
-            bookDetailIns.value?.open(row)
+            historyDetailIns.value?.open(row)
           },
         },
-        /* {
+        {
           tooltip: '历史轨迹',
-         type: 'info',
-         icon: 'liandan',
+          type: 'success',
+          icon: 'yundanguiji',
           action({row}) {
-         bookDetailIns.value?.open(row)
+            historyDetailIns.value?.open(row)
+          },
         },
-         }, */
       ],
     },
   },

src/pages/order/history/HistoryDetail.vue

@@ -0,0 +1,172 @@
+<template>
+  <ADetailPanel
+    ref="detailPanel"
+    class="book-detail-panel"
+    v-bind="detailPanelProps">
+    <template #default="detailData">
+      <ElDescriptions :column="4" :title="Strings.isBlank(detailData.orderCategoryTxt)?'订单信息':'订单信息（' + detailData.orderCategoryTxt+'）'" border class="description">
+        <ElDescriptionsItem label="订单编号">
+          {{ detailData.sn }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="产品名称">
+          {{ detailData.goodsName }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="下单时间">
+          {{ detailData.orderTime }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="项目名称">
+          {{ detailData.projectInfo?.projectName || '-' }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="站点名称">
+          {{ detailData.stationName }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="预估量">
+          {{ detailData.estimatedQuantity == null ? '' : detailData.estimatedQuantity + ' ' + (detailData.unitTxt ?? '') }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="预估车数">
+          {{ detailData.estimatedTrainNum }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="运距">
+          {{ `${detailData.transDistance == null ? '' : detailData.transDistance + ' 公里'}` }}
+        </ElDescriptionsItem>
+
+        <ElDescriptionsItem label="客户姓名">
+          {{ detailData.contacts }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="客户电话">
+          {{ detailData.phone }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem :span="2" label="客户备注">
+          {{ detailData.customerMemo }}
+        </ElDescriptionsItem>
+      </ElDescriptions>
+      <ElDescriptions :column="1" class="description" direction="vertical" title="运输信息">
+        <ElDescriptionsItem :span="1">
+          <TransRecode :trans-recodes="detailData.transRecodes" v-bind="transRecodeProps">
+            <ElTableColumn label="车次" prop="trainNum" width="60"/>
+            <ElTableColumn label="司机姓名" prop="driverName" width="100"/>
+            <ElTableColumn label="司机电话" prop="driverPhone" width="120"/>
+            <ElTableColumn label="车牌号" prop="truckLicensePlate" width="120"/>
+            <ElTableColumn label="毛重" prop="roughWeight">
+              <template #default="{row}">
+                {{ `${row.roughWeight == null ? '' : row.roughWeight + ' 吨'}` }}
+              </template>
+            </ElTableColumn>
+            <ElTableColumn label="皮重" prop="tareWeight">
+              <template #default="{row}">
+                {{ `${row.tareWeight == null ? '' : row.tareWeight + ' 吨'}` }}
+              </template>
+            </ElTableColumn>
+            <ElTableColumn label="净重" prop="settleWeight">
+              <template #default="{row}">
+                {{ `${row.settleWeight == null ? '' : row.settleWeight + ' 吨'}` }}
+              </template>
+            </ElTableColumn>
+            <ElTableColumn label="勘料员" prop="checkerName">
+              <template #default="{row}">
+                {{ `${row.checkerName == null ? '-' : row.checkerName}` }}
+              </template>
+            </ElTableColumn>
+            <ElTableColumn label="总金额" prop="settleMoney">
+              <template #default="{row}">
+                {{ `${row.settleMoney == null ? '' : '￥：' + row.settleMoney + '元'}` }}
+              </template>
+            </ElTableColumn>
+            <ElTableColumn fixed="right" label="支付状态" prop="paymentStatusTxt" width="90">
+              <template #default="{row}">
+                <ElTag :data-cs="paymentStatusColor.cs(row.paymentStatus)"> {{ row.paymentStatusTxt }}</ElTag>
+              </template>
+            </ElTableColumn>
+            <ElTableColumn fixed="right" label="勘料状态" prop="checkStatusTxt" width="90">
+              <template #default="{row}">
+                <ElTag :data-cs="checkStatusColor.cs(row.checkStatus)"> {{ row.checkStatusTxt }}</ElTag>
+              </template>
+            </ElTableColumn>
+            <ElTableColumn fixed="right" label="运输状态" prop="transStatusTxt" width="100">
+              <template #default="{row}">
+                <ElTag :data-cs="transStatusColor.cs(row.transStatus)"> {{ row.transStatusTxt }}</ElTag>
+              </template>
+            </ElTableColumn>
+            <ElTableColumn fixed="right" label="操作" prop="tableAction" width="60">
+              <template #default="{row}">
+                <div class="action-btn">
+                  <ElTooltip v-if="row.transStatus === transStatus.YunShuZhong" content="进场" placement="top">
+                    <ElButton class="icon-btn" plain type="success" @click="jinchang(row)">
+                      <AIcon name="approach"/>
+                    </ElButton>
+                  </ElTooltip>
+                  <ElTooltip v-if="row.transStatus === transStatus.YiJinChang && (row.checkStatus === checkStatus.Wu || row.checkStatus === checkStatus.YiKanLiao)" content="出场" placement="top">
+                    <ElButton class="icon-btn" plain type="danger" @click="chuchang(row)">
+                      <AIcon name="carexit"/>
+                    </ElButton>
+                  </ElTooltip>
+                  <ElTooltip v-if="row.transStatus === transStatus.YiJinChang && row.checkStatus === checkStatus.WeiKanLiao" content="勘料" placement="top">
+                    <ElButton plain type="warning" @click="kanliao(row)">
+                      <AIcon name="chakanliaodan"/>
+                    </ElButton>
+                  </ElTooltip>
+                </div>
+              </template>
+            </ElTableColumn>
+          </TransRecode>
+        </ElDescriptionsItem>
+      </ElDescriptions>
+    </template>
+  </ADetailPanel>
+</template>
+
+<script lang="ts" setup>
+import ADetailPanel, {
+  type ADetailPanelInstance,
+  buildDetailPanelProps,
+} from '@/components/a-detail-panel/ADetailPanel.tsx'
+import TransRecode, { buildTransRecodeProps } from '@/pages/order/trans-recode/TransRecode.tsx'
+import {
+  checkStatus,
+  checkStatusColor,
+  paymentStatusColor,
+  transStatus,
+  transStatusColor,
+} from '@/pages/order/constants.ts'
+import Strings from '@/common/utils/strings.ts'
+import AIcon from '@/components/a-icon/AIcon.vue'
+import OrderApi from '@/pages/order/order-api.ts'
+
+const detailPanelIns = useTemplateRef<ADetailPanelInstance<OrderTypes.TableData>>('detailPanel')
+
+const transRecodeProps = buildTransRecodeProps({})
+
+const detailPanelProps = buildDetailPanelProps<OrderTypes.SearchOrderResult>({
+  title: '订单详情',
+  width: '80vw',
+  detailsLoader: OrderApi.detail,
+})
+
+
+function jinchang(data: OrderTypes.TransRecode) {
+  console.log(data)
+}
+
+function chuchang(data: OrderTypes.TransRecode) {
+  console.log(data)
+}
+
+function kanliao(data: OrderTypes.TransRecode) {
+  console.log(data)
+}
+
+
+defineExpose({
+  open(data: OrderTypes.TableData) {
+    detailPanelIns.value?.open(data)
+  },
+})
+</script>
+
+<style lang="stylus" scoped>
+.description {
+  .data-table {
+    height 250px !important
+  }
+}
+</style>

src/pages/order/realtime/Realtime.vue

@@ -3,90 +3,102 @@
     ref="tablePage"
     v-bind="tablePageProps">
     <template #highFormItem="formData">
-      <ElFormItem label="站点">
-        <ElInput v-model="formData.stationId" placeholder="站点"/>
-      </ElFormItem>
       <ElFormItem label="订单编号">
         <ElInput v-model="formData.sn" placeholder="订单编号"/>
       </ElFormItem>
-      <ElFormItem label="项目名称">
-        <ElInput v-model="formData.projectName" placeholder="项目名称"/>
+      <!-- <ElFormItem label="订单状态">
+        <ElSelect v-model="formData.orderStatus" placeholder="订单状态">
+          <ElOption v-for="item in orderStatus" :key="item.val" :label="item.txt" :value="item.val"/>
+        </ElSelect>
+      </ElFormItem> -->
+      <ElFormItem label="收纳站点">
+        <ElInput v-model="formData.stationId" placeholder="收纳站点"/>
       </ElFormItem>
       <ElFormItem label="客户姓名">
         <ElInput v-model="formData.contacts" placeholder="客户姓名"/>
       </ElFormItem>
-      <ElFormItem label="联系方式">
-        <ElInput v-model="formData.phone" placeholder="联系方式"/>
+      <ElFormItem label="客户电话">
+        <ElInput v-model="formData.phone" placeholder="客户电话"/>
       </ElFormItem>
-
-      <ElFormItem label="订单类型">
-        <ElInput v-model="formData.orderCategory" placeholder="订单类型"/>
-      </ElFormItem>
-      <!--    <ElFormItem label="订单状态">
-           <ElInput v-model="formData.orderStatus" placeholder="订单状态"/>
-         </ElFormItem> -->
       <ElFormItem label="运输企业">
         <ElInput v-model="formData.transOrgName" placeholder="运输企业"/>
       </ElFormItem>
+      <ElFormItem label="项目名称">
+        <ElInput v-model="formData.projectName" placeholder="项目名称"/>
+      </ElFormItem>
       <ElFormItem label="下单时间">
         <ADtPicker v-model="formData.orderTimes" :change-handler="research"/>
       </ElFormItem>
-      <ElFormItem label="完结时间">
-        <ADtPicker v-model="formData.finishTimes" :change-handler="research"/>
-      </ElFormItem>
     </template>
     <template #simpleFormItem="formData">
       <ElFormItem>
-        <ElInput v-model="formData.sn" placeholder="订单编号"/>
-      </ElFormItem>
-      <ElFormItem>
-        <ElInput v-model="formData.orderCategory" placeholder="订单类型"/>
+        <ElInput v-model="formData.keywords" placeholder="单号/车牌号"/>
       </ElFormItem>
     </template>
     <template #columns>
       <ElTableColumn fixed="left" label="订单编号" prop="sn" width="140"/>
       <!-- <ElTableColumn label="下单时间" prop="orderTime"/> -->
-      <ElTableColumn label="客户姓名" prop="contacts" width="100"/>
+      <!-- <ElTableColumn label="客户姓名" prop="contacts"/> -->
       <!-- <ElTableColumn label="联系方式" prop="phone"/> -->
-      <ElTableColumn label="货品名称" prop="goodsName" width="120"/>
+      <ElTableColumn label="货品名称" prop="goodsName"/>
 
-      <ElTableColumn label="项目名称" show-overflow-tooltip width="100">
+      <!-- <ElTableColumn label="项目名称" show-overflow-tooltip width="100">
         <template #default="{row}">
           {{ row.projectName ?? '-' }}
         </template>
-      </ElTableColumn>
-      <ElTableColumn label="站点名称" prop="stationName" width="120"/>
-      <ElTableColumn label="运输单位" prop="transOrgName" show-overflow-tooltip width="120"/>
+      </ElTableColumn> -->
+      <!-- <ElTableColumn label="站点名称" prop="stationName" width="120"/> -->
+      <!-- <ElTableColumn label="运输单位" prop="transOrgName" show-overflow-tooltip width="140"/> -->
       <!-- <ElTableColumn label="运距（米）" prop="transDistance"/> -->
 
       <ElTableColumn label="车次" prop="trainNum" width="70"/>
-      <ElTableColumn label="车牌号" prop="truckLicensePlate" width="120"/>
+      <ElTableColumn label="车牌号" prop="licensePlate" width="120"/>
       <!-- <ElTableColumn label="司机姓名" prop="driverName"/> -->
       <!-- <ElTableColumn label="司机电话" prop="driverPhone"/> -->
 
-      <ElTableColumn label="净重（吨）" prop="settleWeight" width="100"/>
-      <!-- <ElTableColumn label="毛重（吨）" prop="roughWeight"/> -->
-      <!-- <ElTableColumn label="皮重（吨）" prop="tareWeight"/> -->
-      <ElTableColumn label="进场时间" prop="inTime" width="130"/>
+      <ElTableColumn label="毛重" prop="roughWeight">
+        <template #default="{row}">
+          {{ `${row.roughWeight == null ? '' : row.roughWeight + ' 吨'}` }}
+        </template>
+      </ElTableColumn>
+      <ElTableColumn label="皮重" prop="tareWeight">
+        <template #default="{row}">
+          {{ `${row.tareWeight == null ? '' : row.tareWeight + ' 吨'}` }}
+        </template>
+      </ElTableColumn>
+      <ElTableColumn label="净重" prop="settleWeight">
+        <template #default="{row}">
+          {{ `${row.settleWeight == null ? '' : row.settleWeight + ' 吨'}` }}
+        </template>
+      </ElTableColumn>
+      <ElTableColumn label="进场时间" prop="inTime" width="175"/>
       <!-- <ElTableColumn label="开始运输时间" prop="transTime"/> -->
-      <ElTableColumn label="出场时间" prop="outTime" width="130"/>
+      <ElTableColumn label="出场时间" prop="outTime" width="175"/>
       <!-- <ElTableColumn label="完结时间" prop="finishTime"/> -->
-      <ElTableColumn fixed="right" label="支付状态" prop="paymentStatusTxt" width="90"/>
-
-      <ElTableColumn fixed="right" label="订单状态" prop="transStatusTxt" width="90"/>
-      <ElTableColumn fixed="right" label="勘料状态" prop="checkStatusTxt" width="90"/>
-
+      <ElTableColumn fixed="right" label="支付状态" prop="paymentStatusTxt" width="90">
+        <template #default="{row}">
+          <ElTag :data-cs="paymentStatusColor.cs(row.paymentStatus)"> {{ row.paymentStatusTxt }}</ElTag>
+        </template>
+      </ElTableColumn>
+      <ElTableColumn fixed="right" label="勘料状态" prop="checkStatusTxt" width="90">
+        <template #default="{row}">
+          <ElTag :data-cs="checkStatusColor.cs(row.checkStatus)"> {{ row.checkStatusTxt }}</ElTag>
+        </template>
+      </ElTableColumn>
+      <ElTableColumn fixed="right" label="运输状态" prop="transStatusTxt" width="100">
+        <template #default="{row}">
+          <ElTag :data-cs="transStatusColor.cs(row.transStatus)"> {{ row.transStatusTxt }}</ElTag>
+        </template>
+      </ElTableColumn>
 
       <!-- <ElTableColumn label="客户备注" prop="customerMemo"/> -->
     </template>
-    <OrderForm ref="orderForm" :research="research"/>
     <RealtimeDetail ref="realtimeDetail"/>
     <InOutPanel ref="inOutPanel"/>
   </ATablePage>
 </template>
 
 <script lang="ts" setup>
-import OrderForm from '@/pages/order/book/BookForm.vue'
 import ADtPicker from '@/components/a-dt-picker/ADtPicker.vue'
 import ATablePage, {
   type ATablePageInstance,
@@ -94,8 +106,11 @@ import ATablePage, {
 } from '@/components/a-page/a-table-page/ATablePage.tsx'
 import {
   checkStatus,
+  checkStatusColor,
   orderCategory,
+  paymentStatusColor,
   transStatus,
+  transStatusColor,
 } from '@/pages/order/constants.ts'
 import InOutPanel from '@/pages/order/realtime/InOutPanel.vue'
 import { ElMessage } from 'element-plus'
@@ -114,9 +129,12 @@ function research() {
   tablePageIns.value?.doSearch()
 }
 
+const spanColumn = [ 'sn', 'orderTime', 'contacts', 'phone', 'goodsName', 'projectName', 'stationName', 'transOrgName', 'transDistance' ]
+
 const tablePageProps = buildTablePageProps<OrderTypes.SearchOrderParam, OrderTypes.TableData>({
   pageLayout: {
-    dataListHeight: 3,
+    searchFormHeight: '180px',
+    dataListHeight: 1,
   },
   searchForm: {
     defaultData: {
@@ -155,7 +173,7 @@ const tablePageProps = buildTablePageProps<OrderTypes.SearchOrderParam, OrderTyp
           total: 100,
           records: [
             {
-              rowCount: 1,
+              rowCount: 3,
               id: '123',
               sn: '202308240001',
               orderTime: '2023-08-24 10:00:00',
@@ -178,7 +196,7 @@ const tablePageProps = buildTablePageProps<OrderTypes.SearchOrderParam, OrderTyp
               truckLicensePlate: '苏A9B905',
             },
             {
-              rowCount: 1,
+              rowCount: 0,
               id: '123',
               sn: '202308240001',
               orderTime: '2023-08-24 10:00:00',
@@ -201,7 +219,7 @@ const tablePageProps = buildTablePageProps<OrderTypes.SearchOrderParam, OrderTyp
               truckLicensePlate: '苏A9B905',
             },
             {
-              rowCount: 1,
+              rowCount: 0,
               id: '123',
               sn: '202308240001',
               orderTime: '2023-08-24 10:00:00',
@@ -229,8 +247,20 @@ const tablePageProps = buildTablePageProps<OrderTypes.SearchOrderParam, OrderTyp
     },
   },
   table: {
+    spanMethod({row, column}) {
+      if (!spanColumn.includes(column.property)) {
+        return {
+          rowspan: 1,
+          colspan: 1,
+        }
+      }
+      return {
+        rowspan: row.rowCount,
+        colspan: 1,
+      }
+    },
     actionColumn: {
-      width: 150,
+      width: 100,
       foldLimit: 5,
       tableActions: [
         {
@@ -241,22 +271,6 @@ const tablePageProps = buildTablePageProps<OrderTypes.SearchOrderParam, OrderTyp
             realtimeDetailIns.value?.open(row)
           },
         },
-        {
-          tooltip: '三联单',
-          type: 'info',
-          icon: 'liandan',
-          action({row}) {
-            realtimeDetailIns.value?.open(row)
-          },
-        },
-        /* {
-         tooltip: '实时轨迹',
-         type: 'info',
-         icon: 'liandan',
-         action({row}) {
-         bookDetailIns.value?.open(row)
-         },
-         }, */
         {
           tooltip: '进场',
           type: 'success',
@@ -293,6 +307,22 @@ const tablePageProps = buildTablePageProps<OrderTypes.SearchOrderParam, OrderTyp
             ElMessage.success(`${row.truckLicensePlate!}勘料成功`)
           },
         },
+        {
+          tooltip: '三联单',
+          type: 'info',
+          icon: 'liandan',
+          action({row}) {
+            realtimeDetailIns.value?.open(row)
+          },
+        },
+        {
+          tooltip: '实时轨迹',
+          type: 'success',
+          icon: 'yundanguiji',
+          action({row}) {
+            realtimeDetailIns.value?.open(row)
+          },
+        },
       ],
     },
   },

src/pages/order/realtime/RealtimeDetail.vue

@@ -4,7 +4,7 @@
     class="book-detail-panel"
     v-bind="detailPanelProps">
     <template #default="detailData">
-      <ElDescriptions :column="4" :title="'订单信息（' + detailData.orderCategoryTxt+'）'" border class="description">
+      <ElDescriptions :column="4" :title="Strings.isBlank(detailData.orderCategoryTxt)?'订单信息':'订单信息（' + detailData.orderCategoryTxt+'）'" border class="description">
         <ElDescriptionsItem label="订单编号">
           {{ detailData.sn }}
         </ElDescriptionsItem>
@@ -17,18 +17,17 @@
         <ElDescriptionsItem label="项目名称">
           {{ detailData.projectInfo?.projectName || '-' }}
         </ElDescriptionsItem>
-
         <ElDescriptionsItem label="站点名称">
           {{ detailData.stationName }}
         </ElDescriptionsItem>
         <ElDescriptionsItem label="预估量">
-          {{ detailData.estimatedQuantity + ' ' + (detailData.unitTxt ?? '') }}
+          {{ detailData.estimatedQuantity == null ? '' : detailData.estimatedQuantity + ' ' + (detailData.unitTxt ?? '') }}
         </ElDescriptionsItem>
         <ElDescriptionsItem label="预估车数">
           {{ detailData.estimatedTrainNum }}
         </ElDescriptionsItem>
         <ElDescriptionsItem label="运距">
-          {{ detailData.transDistance }} 公里
+          {{ `${detailData.transDistance == null ? '' : detailData.transDistance + ' 公里'}` }}
         </ElDescriptionsItem>
 
         <ElDescriptionsItem label="客户姓名">
@@ -43,7 +42,73 @@
       </ElDescriptions>
       <ElDescriptions :column="1" class="description" direction="vertical" title="运输信息">
         <ElDescriptionsItem :span="1">
-          <TransRecode :trans-recodes="detailData.transRecodes"/>
+          <TransRecode :trans-recodes="detailData.transRecodes" v-bind="transRecodeProps">
+            <ElTableColumn label="车次" prop="trainNum" width="60"/>
+            <ElTableColumn label="司机姓名" prop="driverName" width="100"/>
+            <ElTableColumn label="司机电话" prop="driverPhone" width="120"/>
+            <ElTableColumn label="车牌号" prop="truckLicensePlate" width="120"/>
+            <ElTableColumn label="毛重" prop="roughWeight">
+              <template #default="{row}">
+                {{ `${row.roughWeight == null ? '' : row.roughWeight + ' 吨'}` }}
+              </template>
+            </ElTableColumn>
+            <ElTableColumn label="皮重" prop="tareWeight">
+              <template #default="{row}">
+                {{ `${row.tareWeight == null ? '' : row.tareWeight + ' 吨'}` }}
+              </template>
+            </ElTableColumn>
+            <ElTableColumn label="净重" prop="settleWeight">
+              <template #default="{row}">
+                {{ `${row.settleWeight == null ? '' : row.settleWeight + ' 吨'}` }}
+              </template>
+            </ElTableColumn>
+            <ElTableColumn label="勘料员" prop="checkerName">
+              <template #default="{row}">
+                {{ `${row.checkerName == null ? '-' : row.checkerName}` }}
+              </template>
+            </ElTableColumn>
+            <ElTableColumn label="总金额" prop="settleMoney">
+              <template #default="{row}">
+                {{ `${row.settleMoney == null ? '' : '￥：' + row.settleMoney + '元'}` }}
+              </template>
+            </ElTableColumn>
+            <ElTableColumn fixed="right" label="支付状态" prop="paymentStatusTxt" width="90">
+              <template #default="{row}">
+                <ElTag :data-cs="paymentStatusColor.cs(row.paymentStatus)"> {{ row.paymentStatusTxt }}</ElTag>
+              </template>
+            </ElTableColumn>
+            <ElTableColumn fixed="right" label="勘料状态" prop="checkStatusTxt" width="90">
+              <template #default="{row}">
+                <ElTag :data-cs="checkStatusColor.cs(row.checkStatus)"> {{ row.checkStatusTxt }}</ElTag>
+              </template>
+            </ElTableColumn>
+            <ElTableColumn fixed="right" label="运输状态" prop="transStatusTxt" width="100">
+              <template #default="{row}">
+                <ElTag :data-cs="transStatusColor.cs(row.transStatus)"> {{ row.transStatusTxt }}</ElTag>
+              </template>
+            </ElTableColumn>
+            <ElTableColumn fixed="right" label="操作" prop="tableAction" width="60">
+              <template #default="{row}">
+                <div class="action-btn">
+                  <ElTooltip v-if="row.transStatus === transStatus.YunShuZhong" content="进场" placement="top">
+                    <ElButton class="icon-btn" plain type="success" @click="jinchang(row)">
+                      <AIcon name="approach"/>
+                    </ElButton>
+                  </ElTooltip>
+                  <ElTooltip v-if="row.transStatus === transStatus.YiJinChang && (row.checkStatus === checkStatus.Wu || row.checkStatus === checkStatus.YiKanLiao)" content="出场" placement="top">
+                    <ElButton class="icon-btn" plain type="danger" @click="chuchang(row)">
+                      <AIcon name="carexit"/>
+                    </ElButton>
+                  </ElTooltip>
+                  <ElTooltip v-if="row.transStatus === transStatus.YiJinChang && row.checkStatus === checkStatus.WeiKanLiao" content="勘料" placement="top">
+                    <ElButton plain type="warning" @click="kanliao(row)">
+                      <AIcon name="chakanliaodan"/>
+                    </ElButton>
+                  </ElTooltip>
+                </div>
+              </template>
+            </ElTableColumn>
+          </TransRecode>
         </ElDescriptionsItem>
       </ElDescriptions>
     </template>
@@ -55,110 +120,42 @@ import ADetailPanel, {
   type ADetailPanelInstance,
   buildDetailPanelProps,
 } from '@/components/a-detail-panel/ADetailPanel.tsx'
-import TransRecode from '@/pages/order/TransRecode.vue'
-import DispatchForm from '@/pages/order/book/DispatchForm.vue'
+import TransRecode, { buildTransRecodeProps } from '@/pages/order/trans-recode/TransRecode.tsx'
+import {
+  checkStatus,
+  checkStatusColor,
+  paymentStatusColor,
+  transStatus,
+  transStatusColor,
+} from '@/pages/order/constants.ts'
+import Strings from '@/common/utils/strings.ts'
+import AIcon from '@/components/a-icon/AIcon.vue'
+import OrderApi from '@/pages/order/order-api.ts'
 
 const detailPanelIns = useTemplateRef<ADetailPanelInstance<OrderTypes.TableData>>('detailPanel')
-const dispatchFormIns = useTemplateRef<InstanceType<typeof DispatchForm>>('dispatchForm')
 
-const transIds = ref([] as string[])
+const transRecodeProps = buildTransRecodeProps({})
 
 const detailPanelProps = buildDetailPanelProps<OrderTypes.SearchOrderResult>({
   title: '订单详情',
   width: '80vw',
-  detailsLoader: () => {
-    return Promise.resolve({
-      code: 200,
-      data: {
-        id: '123',
-        sn: '202308240001',
-        orderTime: '2023-08-24 10:00:00',
-        contacts: '张三',
-        phone: '13800000000',
-        projectInfo: {
-          projectName: '项目A',
-        },
-        stationName: '站点B',
-        goodsName: '商品X',
-        unit: '吨',
-        transOrgId: '1',
-        customerMemo: '客户备注',
-        estimatedQuantity: 100,
-        estimatedTrainNum: 2,
-        transDistance: 500,
-        orderCategoryTxt: '订单类型A',
-        transRecodes: [
-          {
-            id: '1',
-            transStatus: 'DaiPaiDan',
-            trainNum: '车次1',
-            transStatusTxt: '运输中',
-            driverName: '司机A',
-            driverPhone: '13900000000',
-            truckLicensePlate: '粤B12345',
-          }, {
-            id: '2',
-            transStatus: 'DaiJieDan',
-            trainNum: '车次1',
-            transStatusTxt: '运输中',
-            driverName: '司机A',
-            driverPhone: '13900000000',
-            truckLicensePlate: '粤B12345',
-          }, {
-            id: '3',
-            transStatus: 'YiJieDan',
-            trainNum: '车次1',
-            transStatusTxt: '运输中',
-            driverName: '司机A',
-            driverPhone: '13900000000',
-            truckLicensePlate: '粤B12345',
-          }, {
-            id: '4',
-            transStatus: 'YunShuZhong',
-            trainNum: '车次1',
-            transStatusTxt: '运输中',
-            driverName: '司机A',
-            driverPhone: '13900000000',
-            truckLicensePlate: '粤B12345',
-          }, {
-            id: '5',
-            transStatus: 'YiJinChang',
-            trainNum: '车次1',
-            transStatusTxt: '运输中',
-            driverName: '司机A',
-            driverPhone: '13900000000',
-            truckLicensePlate: '粤B12345',
-          }, {
-            id: '6',
-            transStatus: 'YiChuChang',
-            trainNum: '车次1',
-            transStatusTxt: '运输中',
-            driverName: '司机A',
-            driverPhone: '13900000000',
-            truckLicensePlate: '粤B12345',
-          }, {
-            id: '7',
-            transStatus: 'YiWanCheng',
-            trainNum: '车次1',
-            transStatusTxt: '运输中',
-            driverName: '司机A',
-            driverPhone: '13900000000',
-            truckLicensePlate: '粤B12345',
-          }, {
-            id: '8',
-            transStatus: 'YiQuXiao',
-            trainNum: '车次1',
-            transStatusTxt: '运输中',
-            driverName: '司机A',
-            driverPhone: '13900000000',
-            truckLicensePlate: '粤B12345',
-          },
-        ],
-      },
-    })
-  },
-  // detailsLoader: OrderApi.detail,
+  detailsLoader: OrderApi.detail,
 })
+
+
+function jinchang(data: OrderTypes.TransRecode) {
+  console.log(data)
+}
+
+function chuchang(data: OrderTypes.TransRecode) {
+  console.log(data)
+}
+
+function kanliao(data: OrderTypes.TransRecode) {
+  console.log(data)
+}
+
+
 defineExpose({
   open(data: OrderTypes.TableData) {
     detailPanelIns.value?.open(data)

src/pages/order/trans-recode/TransRecode.tsx

@@ -0,0 +1,135 @@
+import styles from '@/pages/order/trans-recode/trans-recode.module.styl'
+import { defineComponent } from 'vue'
+import Utils from '@/common/utils'
+import type { TableColumnCtx } from 'element-plus'
+import {
+  ElCheckbox,
+  ElTable,
+  ElTableColumn,
+} from 'element-plus'
+
+
+interface SummaryMethodProps {
+  columns: TableColumnCtx<OrderTypes.TransRecode>[]
+  data: OrderTypes.TransRecode[]
+}
+
+interface TransRecode {
+  transRecodes: OrderTypes.TransRecode[]
+  selectable: boolean
+  disabledRowsMethod: (rows?: OrderTypes.TransRecode[]) => string[] | undefined
+  summaries: string[]
+  moduleValue: string[]
+  'onUpdate:moduleValue': (value: string[]) => void
+  summaryMethod: (data: SummaryMethodProps) => (string | VNode)[]
+}
+
+
+const component = defineComponent(
+  (props: TransRecode, ctx) => {
+    const transRecodes = computed(() => {
+      return props.transRecodes ?? []
+    })
+    const selectRows = Utils.resetAble(reactive<string[]>([]))
+    const disabledRows = computed(() => {
+      const transRecodes_ = transRecodes.value
+      return props.disabledRowsMethod(transRecodes_) ?? []
+    })
+    const selectHeader_indeterminate = computed(() => {
+      return selectRows.length > 0 && selectRows.length < transRecodes.value.length
+    })
+    const selectHeader_checked = computed({
+      get() {
+        return selectRows.length > 0 && transRecodes.value.length > 0 && selectRows.length === transRecodes.value.length
+      },
+      set(val) {
+        if (val) {
+          const newData = transRecodes.value.map(it => it.id)
+          selectRows.$reset([ ...new Set([ ...selectRows, ...newData ]) ] as string[])
+        } else {
+          const newData = transRecodes.value.map(it => it.id)
+          selectRows.$reset(selectRows.filter(it => !newData.includes(it)))
+        }
+        ctx.emit('update:moduleValue', selectRows.$clone())
+      },
+    })
+
+    const rowClick = (row: Record<string, any> & { id: string }, column: TableColumnCtx) => {
+      if (!props.selectable || column.property === 'tableAction' || disabledRows.value.includes(row.id)) {
+        return
+      }
+      const indexOf = selectRows.indexOf(row.id)
+      if (indexOf === -1) {
+        selectRows.push(row.id)
+      } else {
+        selectRows.splice(indexOf, 1)
+      }
+      ctx.emit('update:moduleValue', selectRows.$clone())
+    }
+
+
+    return () => (<ElTable
+      cell-class-name="table-cell"
+      empty-text="暂无数据"
+      header-row-class-name="table-header"
+      row-key="id"
+      data={transRecodes.value}
+      class={[ 'data-table', props.selectable ? styles.selectable : '' ]}
+      summary-method={props.summaryMethod}
+      show-summary={props.summaries.length > 0}
+      onRow-click={rowClick}>
+      {{
+        default: () => {
+          const columns = ctx.slots.default?.() ?? []
+          if (props.selectable) {
+            columns.unshift(<ElTableColumn width="50">
+              {{
+                default: ({row}: { row: OrderTypes.TransRecode }) => {
+                  return (<ElCheckbox model-value={selectRows.includes(row.id ?? '')} disabled={disabledRows.value.includes(row.id ?? '')}/>)
+                },
+                header: () => {
+                  return (<ElCheckbox
+                    disabled={disabledRows.value.length === transRecodes.value.length}
+                    modelValue={selectHeader_checked.value}
+                    onUpdate:modelValue={(val) => {
+                      selectHeader_checked.value = val as boolean
+                    }}
+                    indeterminate={selectHeader_indeterminate.value}/>)
+                },
+              }}
+            </ElTableColumn>)
+          }
+          return columns
+        },
+      }}
+    </ElTable>)
+  },
+  {
+    name: 'TransRecode',
+    props: [ 'transRecodes', 'selectable', 'summaries', 'disabledRowsMethod', 'summaryMethod', 'moduleValue' ],
+    emits: [ 'update:moduleValue' ],
+  },
+)
+
+export function buildTransRecodeProps({
+                                        selectable,
+                                        summaries,
+                                        moduleValue,
+                                        summaryMethod,
+                                        disabledRowsMethod,
+                                        ['onUpdate:moduleValue']: onUpdateModuleValue,
+                                      }: DeepPartial<Exclude<TransRecode, 'transRecodes'>>) {
+  const props = reactive({
+    selectable: selectable ?? false,
+    summaries: summaries ?? [],
+    moduleValue: moduleValue ?? [],
+    'onUpdate:moduleValue': onUpdateModuleValue ?? (value => {
+      props.moduleValue = value
+    }),
+    disabledRowsMethod: disabledRowsMethod ?? (() => []),
+    summaryMethod: summaryMethod ?? (() => []),
+  } as Exclude<TransRecode, 'transRecodes'>)
+  return props
+}
+
+export default component

src/pages/order/trans-recode/trans-recode.module.styl

@@ -0,0 +1,26 @@
+:global(.data-table) {
+  width 100%
+
+  &.selectable {
+    :global(.el-table__row) {
+      cursor pointer;
+
+      &:has(:global(.el-checkbox):global(.is-disabled)) {
+        cursor not-allowed;
+      }
+    }
+  }
+}
+
+.action-btn {
+  width 100%;
+  display flex;
+  justify-content space-between;
+  align-items center;
+
+  :global(.el-button) {
+    width 32px;
+    height 32px;
+    padding 0;
+  }
+}