feat: 对账单、发货单开发

components.d.ts

@@ -45,9 +45,12 @@ declare module 'vue' {
     ImageView: typeof import('./src/components/ImageView.vue')['default']
     ImageView: typeof import('./src/components/ImageView.vue')['default']
     LogList: typeof import('./src/components/LogList.vue')['default']
     LogList: typeof import('./src/components/LogList.vue')['default']
     NavMenu: typeof import('./src/components/NavMenu.vue')['default']
     NavMenu: typeof import('./src/components/NavMenu.vue')['default']
+    RenderColumn: typeof import('./src/components/RenderColumn.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     RouterView: typeof import('vue-router')['RouterView']
+    ShipmentOrderDetail: typeof import('./src/components/ShipmentOrderDetail.vue')['default']
     SplitDiv: typeof import('./src/components/splitDiv/splitDiv.vue')['default']
     SplitDiv: typeof import('./src/components/splitDiv/splitDiv.vue')['default']
+    TableColumn: typeof import('./src/components/TableColumn.vue')['default']
     TableView: typeof import('./src/components/TableView.vue')['default']
     TableView: typeof import('./src/components/TableView.vue')['default']
     UploadImage: typeof import('./src/components/UploadImage.vue')['default']
     UploadImage: typeof import('./src/components/UploadImage.vue')['default']
     WangEditor: typeof import('./src/components/WangEditor.vue')['default']
     WangEditor: typeof import('./src/components/WangEditor.vue')['default']

package.json

@@ -29,6 +29,7 @@
     "@typescript-eslint/eslint-plugin": "^7.1.1",
     "@typescript-eslint/eslint-plugin": "^7.1.1",
     "@typescript-eslint/parser": "^7.1.1",
     "@typescript-eslint/parser": "^7.1.1",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vitejs/plugin-vue": "^5.0.4",
+    "@vitejs/plugin-vue-jsx": "^4.1.0",
     "@vue/eslint-config-typescript": "^12.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
     "eslint": "^8.57.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-prettier": "^9.1.0",

src/App.vue

@@ -28,4 +28,9 @@ div {
 li {
 li {
   list-style: none;
   list-style: none;
 }
 }
+ul,
+li {
+  margin: 0;
+  padding: 0;
+}
 </style>
 </style>

src/api/order.ts

-import { BasePaginationData, BaseRespData, StatisticsData } from '@/types/api'
+import { BasePaginationData, BaseRespData } from '@/types/api'
 import axios from './axios'
 import axios from './axios'
 import {
 import {
   LogListData,
   LogListData,
@@ -10,16 +10,19 @@ import {
   ShipmentOrderRes,
   ShipmentOrderRes,
   Tab,
   Tab,
   InspectionData,
   InspectionData,
-  CountStatus,
-  Confirm,
 } from '@/types/api/order'
 } from '@/types/api/order'
 import {
 import {
-  AccountStatementNote,
-  AccountStatementNoteSearchForm,
   DeliveryNoteData,
   DeliveryNoteData,
   DeliveryNoteSearchForm,
   DeliveryNoteSearchForm,
   ProductionOrder,
   ProductionOrder,
+  ShipmentOrderDetailData,
 } from '@/types/api/deliveryNote'
 } from '@/types/api/deliveryNote'
+import {
+  AccountStatementNote,
+  AccountStatementNoteSearchForm,
+  BillOrderDetailData,
+  CountStatus,
+} from '@/types/api/billOrder'
 
 
 export function getOrderList(
 export function getOrderList(
   data: SearchForm,
   data: SearchForm,
@@ -233,8 +236,8 @@ export function customJomallReconciliation(
   currentPage: number,
   currentPage: number,
   pageSize: number,
   pageSize: number,
 ) {
 ) {
-  return axios.post<never, StatisticsData<AccountStatementNote>>(
-    'factory/customJomallReconciliation/list_page',
+  return axios.post<never, BasePaginationData<AccountStatementNote>>(
+    'reconciliation/list',
     {
     {
       ...data,
       ...data,
       currentPage,
       currentPage,
@@ -285,7 +288,7 @@ export function getOrderByIdApi(id?: number) {
 
 
 export function getReconciliationAmount(id?: number) {
 export function getReconciliationAmount(id?: number) {
   return axios.get<never, BaseRespData<CountStatus[]>>(
   return axios.get<never, BaseRespData<CountStatus[]>>(
-    'factory/customJomallReconciliation/getReconciliationAmount',
+    'reconciliation/groupCount',
     {
     {
       params: {
       params: {
         id,
         id,
@@ -323,17 +326,30 @@ export function updateReconciliation(data: AccountStatementNote) {
   )
   )
 }
 }
 
 
-export function getShipmentDetailsById(shipmentId?: string) {
-  return axios.get<never, BaseRespData<AccountStatementNote[]>>(
-    'factory/customJomallReconciliation/getShipmentDetailsById',
+export function getShipmentDetailsById(shipmentId?: number) {
+  return axios.get<never, BaseRespData<BillOrderDetailData>>(
+    'reconciliation/getById',
     {
     {
       params: {
       params: {
-        shipmentId,
+        id: shipmentId,
       },
       },
     },
     },
   )
   )
 }
 }
-
-export function factoryConfirm(data: Confirm[]) {
-  return axios.post('factory/customJomallReconciliation/factoryConfirm', data)
+export function auditOrderApi(url: string, data: string) {
+  return axios.get(url, {
+    params: {
+      ids: data,
+    },
+  })
+}
+export function getShipmentOrderDetailById(id?: number | string) {
+  return axios.get<never, BaseRespData<ShipmentOrderDetailData>>(
+    'reconciliation/getShipmentByShipmentId',
+    {
+      params: {
+        id,
+      },
+    },
+  )
 }
 }

src/components/RenderColumn.vue

+<template>
+  <template v-if="col.subs?.length">
+    <ElTableColumn header-align="center" :label="col.label" :align="col.align" v-bind="col">
+      <RenderColumn v-for="item in col.children" :col="item" :key="item.prop">
+        <template
+          v-for="slot in Object.keys($slots)"
+          #[slot]="scope: Record<string, any>"
+        >
+          <slot :name="slot" v-bind="scope" />
+        </template>
+      </RenderColumn>
+      <template #header="{ column, $index }">
+        <component
+          :is="col.headerRender"
+          v-if="col.headerRender"
+          :column="column"
+          :index="$index"
+        />
+        <slot
+          v-else-if="col.headerSlot"
+          :name="col.headerSlot"
+          :column="column"
+          :index="$index"
+        ></slot>
+        <span v-else>{{ column.label }}</span>
+      </template>
+    </ElTableColumn>
+  </template>
+  <ElTableColumn v-else header-align="center" v-bind="col">
+    <template #header="{ column, $index }">
+      <component
+        :is="col.headerRender"
+        v-if="col.headerRender"
+        :column="column"
+        :index="$index"
+      />
+      <slot
+        v-else-if="col.headerSlot"
+        :name="col.headerSlot"
+        :column="column"
+        :index="$index"
+      ></slot>
+      <span v-else>{{ column.label }}</span>
+    </template>
+    <template #default="{ row, $index }">
+      <template v-if="col.formatDate">
+        <span>{{ col.formatDate(row) }}</span>
+      </template>
+      <!-- 如果传递按钮数组，就展示按钮组 END-->
+      <!-- render函数 (START) 使用内置的component组件可以支持h函数渲染和txs语法-->
+      <component
+        :is="col.render"
+        v-if="col.render"
+        :row="row"
+        :index="$index"
+      />
+      <slot
+        v-else-if="col.slot"
+        :name="col.slot"
+        :row="row"
+        :index="$index"
+      ></slot>
+      <span v-else>{{ row[col.prop!] }}</span>
+    </template>
+  </ElTableColumn>
+</template>
+<script lang="ts" setup>
+import type { Column } from 'element-plus'
+import type { PropType } from 'vue'
+
+defineProps({
+  col: {
+    type: Object as PropType<Column>,
+    required: true,
+  },
+})
+</script>

src/components/ShipmentOrderDetail.vue

+<template>
+  <div class="shipment-order-detail">
+    <div class="order-detail_order-info">
+      <div class="order-detail_order-info--title title">发货单详情</div>
+      <div class="order-detail_order-info--content">
+        <div class="order-detail_order-info--content-item flex">
+          <span class="order-detail_order-info__label label">收货人电话:</span>
+          <span class="order-detail_order-info__value value flex-1">{{
+            detail.lanshou_phone || '--'
+          }}</span>
+        </div>
+        <div class="order-detail_order-info--content-item flex">
+          <span class="order-detail_order-info__label label">收货人:</span>
+          <span class="order-detail_order-info__value value flex-1">{{
+            detail.lanshou_name || '--'
+          }}</span>
+        </div>
+
+        <div class="order-detail_order-info--content-item flex">
+          <span class="order-detail_order-info__label label">邮编:</span>
+          <span class="order-detail_order-info__value value flex-1">{{
+            detail.lanshou_post || '--'
+          }}</span>
+        </div>
+        <div class="order-detail_order-info--content-item flex overflow-hidden">
+          <span
+            style="white-space: nowrap"
+            class="order-detail_order-info__label label"
+            >收货地址:</span
+          >
+          <span
+            class="order-detail_order-info__value value flex-1 text-ellipsis"
+            style="white-space: nowrap"
+            :title="`${detail.lanshou_region}${detail.lanshou_address}`"
+            >{{ `${detail.lanshou_region}${detail.lanshou_address}` }}</span
+          >
+        </div>
+      </div>
+    </div>
+    <div class="product-detail mt-10">
+      <div class="product-detail-title">
+        <span>产品详情</span>
+      </div>
+      <div class="product-detail-content">
+        <div
+          v-for="item in detail.detailList"
+          :key="item.id"
+          class="order-list-expand_item"
+        >
+          <div class="order-list-expand_item_img">
+            <img :src="item.variant_image" style="width: 100%; height: 100%" />
+          </div>
+          <div class="order-list-expand_item_info">
+            <div
+              :title="item.sub_order_number || ''"
+              class="order-list-expand_item_info_title"
+            >
+              <span class="order-list-expand_item_label">生产单号:</span>
+              <span class="order-list-expand_item_value"
+                >{{ item.sub_order_number || '--'
+                }}<el-icon
+                  class="icon"
+                  @click="copy(item.sub_order_number || '')"
+                  ><DocumentCopy
+                /></el-icon>
+              </span>
+            </div>
+            <div class="order-list-expand_item_info_title">
+              <span class="order-list-expand_item_label">已发数:</span>
+              <span class="order-list-expand_item_value">{{
+                item.shipment_num || 0
+              }}</span>
+            </div>
+
+            <div class="order-list-expand_item_info_title">
+              <span class="order-list-expand_item_label">质检(通过):</span>
+              <span class="order-list-expand_item_value">{{
+                item.pass_num || 0
+              }}</span>
+            </div>
+            <div class="order-list-expand_item_info_title">
+              <span class="order-list-expand_item_label">质检(不通过):</span>
+              <span class="order-list-expand_item_value">{{
+                item.not_pass_num || 0
+              }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { DocumentCopy } from '@element-plus/icons-vue'
+
+defineProps({
+  detail: {
+    type: Object,
+    required: true,
+  },
+})
+const copy = (text: string) => {
+  navigator.clipboard.writeText(text)
+  ElMessage.success('复制成功')
+}
+</script>
+<style lang="scss" scoped>
+.order-detail_order-info--title.title {
+  font-size: 18px;
+}
+.order-detail_order-info--content {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+  margin-top: 10px;
+  font-size: 14px;
+}
+.product-detail-title {
+  font-size: 18px;
+}
+.product-detail-content {
+  margin-top: 10px;
+}
+.order-list-expand_item {
+  display: grid;
+  font-size: 14px;
+  gap: 10px;
+  grid-template-columns: repeat(2, 1fr);
+}
+.order-list-expand_item_img {
+  width: 100px;
+  height: 100px;
+}
+.order-list-expand_item_info_title {
+  height: 30px;
+  line-height: 30px;
+}
+</style>

src/components/TableView.vue

 <template>
 <template>
   <div class="table-view">
   <div class="table-view">
-    <div></div>
+    <ElTable
+      :data="paginatedData"
+      border
+      :stripe="stripe"
+      header-align="center"
+      height="100%"
+    >
+      <template v-for="column in columns" :key="column.key">
+        <ElTableColumn
+          v-if="
+            column.type === 'index' ||
+            column.type === 'selection' ||
+            column.type === 'expand'
+          "
+          v-bind="column"
+          header-align="center"
+        >
+          <!-- 当type等于expand时， 配置通过h函数渲染、txs语法或者插槽自定义内容 -->
+          <template #default="{ row, $index }">
+            <component
+              :is="column.render"
+              v-if="column.render"
+              :row="row"
+              :index="$index"
+            />
+            <slot
+              v-else-if="column.slot"
+              name="expand"
+              :row="row"
+              :index="$index"
+            ></slot>
+          </template>
+        </ElTableColumn>
+        <RenderColumn v-else :col="column">
+          <template
+            v-for="slot in Object.keys($slots)"
+            #[slot]="scope: Record<string, any>"
+          >
+            <slot :name="slot" v-bind="scope" />
+          </template>
+        </RenderColumn>
+      </template>
+    </ElTable>
   </div>
   </div>
 </template>
 </template>
-<script setup lang="ts">
+<script setup lang="tsx">
+import type { Column } from 'element-plus/lib/components/index.js'
+import type { PropType } from 'vue'
+import RenderColumn from './RenderColumn.vue'
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type DataItemType = Record<string, any>
+defineProps({
+  paginatedData: {
+    type: Array as PropType<DataItemType[]>,
+    required: true,
+  },
+  columns: {
+    type: Array as PropType<Column[]>,
+    required: true,
+  },
+  stripe: {
+    type: Boolean,
+    default: false,
+  },
+  defaultSortProp: {
+    type: String,
+    default: '',
+  },
+  defaultSortOrder: {
+    type: String,
+    default: '',
+  },
+})
 </script>
 </script>
-<style lang="scss" scoped></style>
+
\ No newline at end of file
+<style lang="scss" scoped>
+.table-view {
+  height: 100%;
+  overflow: hidden;
+}
+</style>

src/styles/common.scss

@@ -60,6 +60,12 @@ img {
 .margin-top-10 {
 .margin-top-10 {
   margin-top: 10px;
   margin-top: 10px;
 }
 }
+.mr-10 {
+  margin-right: 10px;
+}
+.mt-10 {
+  margin-top: 10px;
+}
 
 
 .margin-top-20 {
 .margin-top-20 {
   margin-top: 20px;
   margin-top: 20px;
@@ -95,3 +101,9 @@ img {
   font-size: 16px;
   font-size: 16px;
   cursor: pointer;
   cursor: pointer;
 }
 }
+
+.text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

src/types/api/billOrder.ts

+export interface CountStatus {
+  id?: number
+  code?: number
+  count?: number
+  remark?: string
+  children?: CountStatus[]
+}
+export interface AccountStatementNoteSearchForm {
+  user_mark?: string
+  status?: number | string | null
+  dateRange?: string[]
+  bill_number?: string
+  rec_number?: string
+  factory_status?: string
+  erp_status?: string
+  start_time?: string
+  end_time?: string
+}
+export interface AccountStatementNote {
+  create_time?: string
+  pass_num?: number
+  factory_code?: string
+  num?: number
+  end_time?: string
+  rec_number?: string
+  not_pass_num?: number
+  factory_id?: number
+  start_time?: string
+  carriage_total_amount?: number
+  factory_status?: number
+  factory_total_amount?: number
+  user_mark?: string
+  erp_status?: number
+  id?: number
+  erp_total_amount?: number
+  dataVersion: ''
+}
+export interface BillOrderDetailData {
+  create_time?: string
+  pass_num: number
+  factory_code?: string
+  num?: number
+  end_time?: string
+  rec_number?: string
+  not_pass_num?: number
+  factory_id?: number
+  start_time?: string
+  carriage_total_amount?: number
+  factory_status?: number
+  factory_total_amount: number
+  user_mark?: string
+  logList?: LogList[]
+  erp_status?: number
+  itemList?: ItemList[]
+  id: number
+  erp_total_amount?: number
+}
+
+export interface LogList {
+  create_time?: string
+  employee_id?: number
+  info_id?: number
+  description?: string
+  id: string
+  employee_account?: string
+}
+
+export interface ItemList {
+  carriage_amount?: number
+  pass_num?: number
+  num?: number
+  factory_price?: number
+  shipment_id?: string
+  not_pass_num?: number
+  erp_order_number?: string
+  shipment_time?: string
+  bill_number?: string
+  erp_price?: number
+  info_id?: number
+  id: number
+  factory_order_number?: string
+}

src/types/api/deliveryNote.ts

@@ -9,12 +9,7 @@ export interface DeliveryNoteSearchForm {
   orderNumber?: string
   orderNumber?: string
   namespace?: string
   namespace?: string
   shippingWay?: number
   shippingWay?: number
-}
-export interface AccountStatementNoteSearchForm {
-  status?: string | null | number
-  startTime?: string
-  endTime?: string
-
+  status?: number | null
 }
 }
 
 
 export interface DeliveryNoteData {
 export interface DeliveryNoteData {
@@ -101,23 +96,89 @@ export interface ProductionOrder {
   notPassNum?: number
   notPassNum?: number
   passNum?: number
   passNum?: number
 }
 }
-export interface AccountStatementNote{
-  billNumber?:string
-  shipmentId?:string
-  userMark?:string
-  shipmentNum?:string
-  dataVersion?:string
-  carriageName?:string
-  lanshouAddress?:string
-  totalPrice?:string
-  passNum?:string
-  lanshouPost?:string
-  notPassNum?:string
-  lanshouRegion?:string
-  orderNumber?:string
-  lanshouName?:string
-  lanshouPhone?:string
-  logisticsTracking?:string
-  totalAmount?:string
-  id?:number
-}
+export interface ShipmentOrderDetailData {
+  carriage_amount?: string | number
+  lanshou_post?: string
+  carriage_name?: string
+  create_time?: string
+  order_number?: string
+  lanshou_address?: string
+  logistics_tracking?: string
+  update_time?: string
+  bill_number?: string
+  lanshou_region?: string
+  user_mark?: string
+  detailList?: ShipmentDetailList[]
+  lanshou_phone?: string
+  id: string | number
+  shipping_way?: number
+  dbFactory?: DbFactory
+  lanshou_name?: string
+  inspection_status?: boolean
+  facotory_no?: number
\ No newline at end of file
+}
+
+export interface ShipmentDetailList {
+  product?: Product
+  create_time?: string
+  variant_image?: string
+  base_sku?: string
+  pass_num?: number
+  sub_order_number?: string
+  shipment_id?: string
+  custom_order_id?: string
+  custom_order_number?: string
+  not_pass_num?: number
+  update_time?: string
+  variant_sku?: string
+  id: number | string
+  shipment_num?: number
+  inspection_status?: boolean
+}
+
+export interface Product {
+  diy_id?: string
+  end_product_id?: string
+  base_sku?: string
+  num?: number
+  sub_order_number?: string
+  print_type?: number
+  custom_order_id?: string
+  erp_order_id?: string
+  erp_sub_order_number?: string
+  update_time?: string
+  erp_order_item_id?: string
+  price?: number
+  id: string
+  shipment_num?: number
+  cost_price?: string | number
+  erp_product_item_id?: number
+  erp_id?: string
+  create_time?: string
+  variant_image?: string
+  pass_num?: number
+  weight?: string | number
+  not_pass_num?: number
+  product_name?: string
+  version?: number
+  chima_id?: string
+  material?: string
+  variant_sku?: string
+  shop_number?: string
+  sales_price?: string | number
+}
+
+export interface DbFactory {
+  license?: string | number
+  goods_number?: number
+  type_id?: number
+  bianma?: string
+  name?: string
+  mobile?: string
+  ruzhu_date?: string
+  id: number
+  title?: string
+  create_date?: string
+  authorize_number?: number
+  status?: number
+}

src/types/api/order.ts

@@ -24,11 +24,6 @@ export interface Tab {
   quantity: number
   quantity: number
 }
 }
 
 
-export interface CountStatus {
-  count?: number
-  status?: number
-  totalSum?: number
-}
 
 
 export interface OrderData {
 export interface OrderData {
   id: number
   id: number
@@ -257,11 +252,6 @@ export interface Reconciliation {
   totalAmount?: string
   totalAmount?: string
   id?: number
   id?: number
 }
 }
-
-export interface Confirm {
-  id: number | undefined
-  dataVersion: string | undefined
-}
 export interface shopRemark {
 export interface shopRemark {
   resendNum?: number | undefined | null
   resendNum?: number | undefined | null
   remark?: string | undefined | null
   remark?: string | undefined | null

tsconfig.json

 {
 {
   "compilerOptions": {
   "compilerOptions": {
     "target": "ES2020",
     "target": "ES2020",
+    "jsxImportSource": "vue",
     "useDefineForClassFields": true,
     "useDefineForClassFields": true,
     "module": "ESNext",
     "module": "ESNext",
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "lib": ["ES2020", "DOM", "DOM.Iterable"],