订单管理

index.html

@@ -30,7 +30,6 @@
       margin: 0;
       padding: 0;
       border: 0;
-      user-select: none;
     }
   </style>
   <title></title>

plugin/iconfont-process.ts

@@ -24,6 +24,7 @@ function createTs(text: string) {
   const tsContent = `export const icons = ${text.trim()} as const
 
 export type IconName = (typeof icons.glyphs)[number]['font_class']
+export const iconNames = icons.glyphs.map(it => it.font_class)
 
 export interface IconGlyphs {
   icon_id: string

src/assets/stylus/index.styl

@@ -47,7 +47,7 @@
   text-align-last: justify;
   display: inline-block !important;
   position: relative;
-  padding 0 12px !important;
+  padding 0 12px 0 0 !important;
 }
 
 .el-form-item.is-error {

src/assets/stylus/menu.styl

@@ -24,6 +24,15 @@
   }
 }
 
+
+.el-menu--collapse .el-sub-menu.is-active .el-sub-menu__title {
+  color #5D87FF !important;
+}
+
+.el-sub-menu.is-active .el-sub-menu__title {
+  border-bottom-color: #5D87FF !important;
+}
+
 .el-sub-menu__title,
 .el-menu-item {
   height: 42px !important;

src/assets/stylus/root.styl

@@ -20,6 +20,18 @@ body {
   .region .el-radio-button__original-radio:checked + .el-radio-button__inner {
     color: var(--theme-color) !important;
   }
+  letter-spacing: 1px;
+  user-select: none;
+}
+
+.el-message-box {
+  --el-messagebox-width 300px !important
+  max-width unset !important
+  width unset !important;
+}
+
+.el-message-box__container {
+  justify-content center
 }
 
 :focus-visible {

src/components/a-icon/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* 项目名称 再昇云 */
-  src: url('@/components/a-icon/iconfont.woff2?t=1769142012944') format('woff2'),
+  src: url('@/components/a-icon/iconfont.woff2?t=1769666423879') format('woff2'),
-  url('@/components/a-icon/iconfont.woff?t=1769142012944') format('woff'),
+  url('@/components/a-icon/iconfont.woff?t=1769666423879') format('woff'),
-  url('@/components/a-icon/iconfont.ttf?t=1769142012944') format('truetype');
+  url('@/components/a-icon/iconfont.ttf?t=1769666423879') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,30 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-liandan:before {
+  content: "\e65e";
+}
+
+.icon-chakanliaodan:before {
+  content: "\e6fc";
+}
+
+.icon-approach:before {
+  content: "\e69d";
+}
+
+.icon-carexit:before {
+  content: "\e69f";
+}
+
+.icon-fapiaotaitou:before {
+  content: "\e85d";
+}
+
+.icon-qiehuanyonghu:before {
+  content: "\e893";
+}
+
 .icon-dianhua-1:before {
   content: "\e65d";
 }

src/components/a-icon/iconfont.json

@@ -5,6 +5,48 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "15056965",
+      "name": "联单",
+      "font_class": "liandan",
+      "unicode": "e65e",
+      "unicode_decimal": 58974
+    },
+    {
+      "icon_id": "32234102",
+      "name": "查看料单",
+      "font_class": "chakanliaodan",
+      "unicode": "e6fc",
+      "unicode_decimal": 59132
+    },
+    {
+      "icon_id": "17660527",
+      "name": "车辆进场",
+      "font_class": "approach",
+      "unicode": "e69d",
+      "unicode_decimal": 59037
+    },
+    {
+      "icon_id": "17660543",
+      "name": "车辆出场",
+      "font_class": "carexit",
+      "unicode": "e69f",
+      "unicode_decimal": 59039
+    },
+    {
+      "icon_id": "23736496",
+      "name": "发票抬头",
+      "font_class": "fapiaotaitou",
+      "unicode": "e85d",
+      "unicode_decimal": 59485
+    },
+    {
+      "icon_id": "17789296",
+      "name": "切换用户",
+      "font_class": "qiehuanyonghu",
+      "unicode": "e893",
+      "unicode_decimal": 59539
+    },
     {
       "icon_id": "1272171",
       "name": "电话",

src/components/a-icon/iconfont.ts

@@ -5,6 +5,48 @@ export const icons = {
   'css_prefix_text': 'icon-',
   'description': '',
   'glyphs': [
+    {
+      'icon_id': '15056965',
+      'name': '联单',
+      'font_class': 'liandan',
+      'unicode': 'e65e',
+      'unicode_decimal': 58974,
+    },
+    {
+      'icon_id': '32234102',
+      'name': '查看料单',
+      'font_class': 'chakanliaodan',
+      'unicode': 'e6fc',
+      'unicode_decimal': 59132,
+    },
+    {
+      'icon_id': '17660527',
+      'name': '车辆进场',
+      'font_class': 'approach',
+      'unicode': 'e69d',
+      'unicode_decimal': 59037,
+    },
+    {
+      'icon_id': '17660543',
+      'name': '车辆出场',
+      'font_class': 'carexit',
+      'unicode': 'e69f',
+      'unicode_decimal': 59039,
+    },
+    {
+      'icon_id': '23736496',
+      'name': '发票抬头',
+      'font_class': 'fapiaotaitou',
+      'unicode': 'e85d',
+      'unicode_decimal': 59485,
+    },
+    {
+      'icon_id': '17789296',
+      'name': '切换用户',
+      'font_class': 'qiehuanyonghu',
+      'unicode': 'e893',
+      'unicode_decimal': 59539,
+    },
     {
       'icon_id': '1272171',
       'name': '电话',
@@ -761,7 +803,7 @@ export const icons = {
       'unicode': 'e639',
       'unicode_decimal': 58937,
     },
-  ],
+  ]
 } as const
 
 export type IconName = (typeof icons.glyphs)[number]['font_class']

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

@@ -69,6 +69,7 @@ interface ActionColumnType<T> {
    * 列宽，默认：80px
    */
   width: number
+  foldLimit: number
   /**
    * 按钮列表
    */
@@ -197,6 +198,7 @@ function buildTable<P extends object, T extends object>(table: DeepPartial<Table
   if (table.actionColumn == null) {
     table.actionColumn = {
       width: 80,
+      foldLimit: 3,
       tableActions: [],
     }
   }
@@ -210,9 +212,14 @@ function buildTable<P extends object, T extends object>(table: DeepPartial<Table
       if (tableAction.confirm.width == null) tableAction.confirm.width = '180'
     }
   }
-  if (table.actionColumn.width == null) {
+  if (table.actionColumn.foldLimit == null) {
-    table.actionColumn.width = Math.min(table.actionColumn.tableActions.length, 3) * 50
+    table.actionColumn.foldLimit = 3
   }
+
+  if (table.actionColumn.width == null) {
+    table.actionColumn.width = Math.min(table.actionColumn.tableActions.length, table.actionColumn.foldLimit) * 50
+  }
+
   if (table.emptyText == null) {
     table.emptyText = '暂无数据'
   }
@@ -357,13 +364,13 @@ const component = defineComponent(
     }
     const actionColumnRender = () => {
       const actionColumn = props.table.actionColumn
-      const len = actionColumn.tableActions.length
       if (Colls.isEmpty(actionColumn.tableActions)) return (<></>)
       return (<ElTableColumn width={actionColumn.width + 'px'} fixed="right" label="操作" prop="tableAction">
         {{
           default: (scope: ColumnScopeType<T>) => {
+            const len = actionColumn.tableActions.filter(it => it.show == null || it.show(scope)).length
             let btns: any[]
-            if (len <= 3) {
+            if (len <= actionColumn.foldLimit) {
               btns = (actionColumn.tableActions
                   .filter(it => (it.show == null ? true : it.show(scope)))
                   .map((tableAction, i) => (tableAction.confirm != null ?
@@ -386,7 +393,7 @@ const component = defineComponent(
             } else {
               btns = (actionColumn.tableActions
                   .filter(it => (it.show == null ? true : it.show(scope)))
-                  .filter((_, i) => i < 2)
+                  .filter((_, i) => i < actionColumn.foldLimit - 1)
                   .map((tableAction, i) => (tableAction.confirm != null ?
                     (<ElPopconfirm
                       key={'action-btn-' + i}
@@ -433,7 +440,7 @@ const component = defineComponent(
                     {
                       actionColumn.tableActions
                         .filter(it => (it.show == null ? true : it.show(scope)))
-                        .filter((_, i) => i >= 2)
+                        .filter((_, i) => i >= actionColumn.foldLimit - 1)
                         .map((it, i) => {
                           let elIcon: any | undefined = undefined
                           if (iconNames.includes(it.icon as IconName)) {

src/dts/components.d.ts

@@ -49,12 +49,12 @@ declare module 'vue' {
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
+    ElTag: typeof import('element-plus/es')['ElTag']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElUpload: typeof import('element-plus/es')['ElUpload']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }
-
   export interface GlobalDirectives {
     vLoading: typeof import('element-plus/es')['ElLoadingDirective']
   }
@@ -100,6 +100,7 @@ declare global {
   const ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
   const ElTabPane: typeof import('element-plus/es')['ElTabPane']
   const ElTabs: typeof import('element-plus/es')['ElTabs']
+  const ElTag: typeof import('element-plus/es')['ElTag']
   const ElTooltip: typeof import('element-plus/es')['ElTooltip']
   const ElUpload: typeof import('element-plus/es')['ElUpload']
   const RouterLink: typeof import('vue-router')['RouterLink']

src/pages/order/history/History.vue

@@ -119,7 +119,7 @@ const tablePageProps = buildTablePageProps<OrderTypes.SearchOrderParam, OrderTyp
         {
           tooltip: '三联单',
           type: 'info',
-          icon: 'Position',
+          icon: 'liandan',
           action({row}) {
             bookDetailIns.value?.open(row)
           },

src/pages/order/realtime/InOutPanel.vue

@@ -0,0 +1,122 @@
+<script lang="ts" setup>
+import Uploader from '@/components/uploader/Uploader.vue'
+import Utils from '@/common/utils'
+import ADialog from '@/components/a-dialog/ADialog.vue'
+import FormUtil from '@/common/utils/formUtil.ts'
+import {
+  ElMessage,
+  type FormInstance,
+} from 'element-plus'
+
+const orderData = Utils.resetAble(reactive<{
+  id: string
+  licensePlate: string,
+  state: '进场' | '出场',
+}>({
+  id: '',
+  licensePlate: '',
+  state: '进场',
+}))
+const title = computed(() => {
+  return `${orderData.licensePlate} ${orderData.state}`
+})
+
+const formIns = useTemplateRef<FormInstance>('formRef')
+
+const inOutData = Utils.resetAble(reactive({
+  weight: undefined,
+  headerPhoto: undefined,
+  bodyPhoto: undefined,
+}))
+const showDialog = ref(false)
+const submiting = ref(false)
+
+function dialogCloseHandler() {
+  inOutData.$reset()
+}
+
+function submitHandler() {
+  submiting.value = true
+  FormUtil.submit(formIns, () => Promise.resolve())
+    .then(res => {
+      ElMessage.success(`${title.value}成功`)
+      if ((res ?? true)) {
+        showDialog.value = false
+      }
+    })
+    .finally(() => {
+      submiting.value = false
+    })
+}
+
+defineExpose({
+  open(id: string, licensePlate: string, state: '进场' | '出场') {
+    orderData.$reset({
+      id,
+      licensePlate,
+      state,
+    })
+    showDialog.value = true
+  },
+})
+
+</script>
+
+<template>
+  <ADialog
+    v-model:show="showDialog"
+    :closed="dialogCloseHandler"
+    :submit-handler="submitHandler"
+    :title="title"
+  >
+    <ElForm ref="formRef"
+      class="in-out-panel-form"
+      @submit.prevent>
+      <ElFormItem label="磅重" prop="weight">
+        <ElInputNumber v-model="inOutData.weight" :max="200" :min="1" controls-position="right">
+          <template #suffix>吨</template>
+        </ElInputNumber>
+      </ElFormItem>
+      <ElFormItem label="车头照" prop="headerPhoto">
+        <Uploader v-model:file="inOutData.headerPhoto"/>
+      </ElFormItem>
+      <ElFormItem label="车斗照" prop="bodyPhoto">
+        <Uploader v-model:file="inOutData.bodyPhoto"/>
+      </ElFormItem>
+    </ElForm>
+    <template #footer>
+      <ElButton @click="showDialog = false">关闭</ElButton>
+      <ElButton :loading="submiting" type="primary" @click="submitHandler">确认{{ orderData.state }}</ElButton>
+    </template>
+  </ADialog>
+</template>
+
+<style lang="stylus" scoped>
+.in-out-panel-form {
+  display grid
+  grid-template-areas "weight weight" \
+  "headerPhoto bodyPhoto"
+  gap: 0 20px;
+  padding: 10px;
+
+  :deep(.el-input-number) {
+    .el-input__suffix-inner {
+      padding-left 10px
+    }
+  }
+
+  :deep(.el-form-item) {
+    &:nth-child(1) {
+      grid-area weight
+    }
+
+    &:nth-child(2) {
+      grid-area headerPhoto
+    }
+
+    &:nth-child(3) {
+      grid-area bodyPhoto
+    }
+  }
+}
+</style>

src/pages/order/realtime/Realtime.vue

@@ -81,6 +81,7 @@
     </template>
     <OrderForm ref="orderForm" :research="research"/>
     <BookDetail ref="bookDetail"/>
+    <InOutPanel ref="inOutPanel"/>
   </ATablePage>
 </template>
 
@@ -92,10 +93,17 @@ import ATablePage, {
   buildTablePageProps,
 } from '@/components/a-page/a-table-page/ATablePage.tsx'
 import BookDetail from '@/pages/order/book/BookDetail.vue'
+import {
+  checkStatus,
+  transStatus,
+} from '@/pages/order/constants.ts'
+import InOutPanel from '@/pages/order/realtime/InOutPanel.vue'
+import { ElMessage } from 'element-plus'
+import { useTemplateRef } from 'vue'
 
 const tablePageIns = useTemplateRef<ATablePageInstance>('tablePage')
 const bookDetailIns = useTemplateRef<InstanceType<typeof BookDetail>>('bookDetail')
-
+const inOutPanelIns = useTemplateRef<InstanceType<typeof InOutPanel>>('inOutPanel')
 
 function research() {
   tablePageIns.value?.doSearch()
@@ -107,6 +115,7 @@ const tablePageProps = buildTablePageProps<OrderTypes.SearchOrderParam, OrderTyp
   },
   table: {
     actionColumn: {
+      width: 100,
       tableActions: [
         {
           tooltip: '详情',
@@ -119,25 +128,37 @@ const tablePageProps = buildTablePageProps<OrderTypes.SearchOrderParam, OrderTyp
         {
           tooltip: '进场',
           type: 'info',
-          icon: 'Position',
+          icon: 'approach',
+          show({row}) {
+            return row.transStatus === transStatus.YunShuZhong
+          },
           action({row}) {
-            bookDetailIns.value?.open(row)
+            inOutPanelIns.value?.open(row.id!, row.truckLicensePlate!, '进场')
           },
         },
         {
           tooltip: '出场',
           type: 'info',
-          icon: 'Position',
+          icon: 'carexit',
+          show({row}) {
+            return row.transStatus === transStatus.YiJinChang && (row.checkStatus === checkStatus.Wu || row.checkStatus === checkStatus.YiKanLiao)
+          },
           action({row}) {
-            bookDetailIns.value?.open(row)
+            inOutPanelIns.value?.open(row.id!, row.truckLicensePlate!, '出场')
           },
         },
         {
           tooltip: '勘料',
           type: 'info',
-          icon: 'Position',
+          icon: 'chakanliaodan',
+          confirm: {
+            title: '是否确认勘料',
+          },
+          show({row}) {
+            return row.transStatus === transStatus.YiJinChang && row.checkStatus === checkStatus.WeiKanLiao
+          },
           action({row}) {
-            bookDetailIns.value?.open(row)
+            ElMessage.success(`${row.truckLicensePlate!}勘料成功`)
           },
         },
       ],
@@ -192,10 +213,58 @@ const tablePageProps = buildTablePageProps<OrderTypes.SearchOrderParam, OrderTyp
               estimatedTrainNum: 2,
               transDistance: 500,
               orderCategoryTxt: '订单类型A',
-              transStatusTxt: '运输中',
+              transStatusTxt: '已进场',
-              transStatus: 'DaiPaiDan',
+              transStatus: 'YiJinChang',
+              checkStatus: 'YiKanLiao',
               checkStatusTxt: '未勘料',
               paymentStatusTxt: '未支付',
+              truckLicensePlate: '苏A9B905',
+            },
+            {
+              rowCount: 1,
+              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: 'YunShuZhong',
+              checkStatus: 'WeiKanLiao',
+              checkStatusTxt: '未勘料',
+              paymentStatusTxt: '未支付',
+              truckLicensePlate: '苏A9B905',
+            },
+            {
+              rowCount: 1,
+              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',
             },
           ],
         },