feat: 备货订单开发

package-lock.json

@@ -12,6 +12,7 @@
         "@wangeditor/editor": "^5.1.23",
         "@wangeditor/editor-for-vue": "^5.1.12",
         "axios": "^1.6.7",
+        "bignumber": "^1.1.0",
         "bignumber.js": "^9.3.0",
         "dayjs": "^1.11.13",
         "echarts": "^6.0.0",
@@ -3171,6 +3172,14 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "license": "MIT"
     },
+    "node_modules/bignumber": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/bignumber/-/bignumber-1.1.0.tgz",
+      "integrity": "sha512-EGqHCKkEAwVwufcEOCYhZQqdVH+7cNCyPZ9yxisYvSjHFB+d9YcGMvorsFpeN5IJpC+lC6K+FHhu8+S4MgJazw==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/bignumber.js": {
       "version": "9.3.0",
       "resolved": "https://registry.npmmirror.com/bignumber.js/-/bignumber.js-9.3.0.tgz",

package.json

@@ -14,6 +14,7 @@
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.12",
     "axios": "^1.6.7",
+    "bignumber": "^1.1.0",
     "bignumber.js": "^9.3.0",
     "dayjs": "^1.11.13",
     "echarts": "^6.0.0",

src/api/common.ts

@@ -5,7 +5,7 @@ import { LogisticBill } from '@/types/api/podMakeOrder'
 
 import { userData } from '@/types/api/user'
 import { VersionImageList } from '@/types/api/typesetting'
-import { WarehouseListData } from '@/types'
+import { SupplierItem, WarehouseListData } from '@/types'
 
 // 获取物流公司
 export function getLogisticsCompanyList() {
@@ -61,3 +61,17 @@ export function loadWarehouseListApi() {
 export function getEmployeeListApi() {
   return axios.get<never, BaseRespData<userData[]>>(`/factory/factoryUser/list`)
 }
+
+// 获取供应商列表
+export function getSupplierListApi() {
+  return axios.get<never, BaseRespData<SupplierItem[]>>(
+    `/factory/supplier/list`,
+  )
+}
+
+// 获取币种接口
+export function getBaseCurrencyInfoApi() {
+  return axios.get<never, BaseRespData<never>>(
+    'factory/supplier/getBaseCurrencyInfo',
+  )
+}

src/api/stockingOrder.ts

 import axios from './axios'
 import { BasePaginationData, BaseRespData } from '@/types/api'
-import { SearchForm, TableData, TreeData } from '@/types/api/supply/stockingOrder'
+import {
+  SearchForm,
+  TableData,
+  TreeData,
+  AddStockingOrderForm,
+  StockingOrderProduct,
+  InternalMemoList,
+  RelatedDocumentList,
+  LogListData
+} from '@/types/api/supply/stockingOrder'
+
 export function getStockingOrderListApi(
   data: SearchForm,
   currentPage: number,
@@ -16,4 +26,49 @@ export function getStockingOrderStatusTreeApi() {
   return axios.get<never, BaseRespData<TreeData[]>>(
     'factory/supply/stockingUpManage/getStatusTree',
   )
+}
+
+// 新增备货单
+export function addStockingOrderApi(url: string, data: AddStockingOrderForm) {
+  return axios.post<never, BaseRespData<never>>(url, data)
+}
+
+// 根据父SKU查询商品信息
+export function getProductBySkuApi(spu: string, supplierId: number) {
+  return axios.get<never, BaseRespData<StockingOrderProduct[]>>(
+    'factory/supply/stockingUpManage/getCustomProductItem',
+    {
+      params: { productItemSku: spu, supplierId },
+    },
+  )
+}
+
+export function getStockingOrderDetailByIdApi(id: number) {
+  return axios.get<never, BaseRespData<AddStockingOrderForm>>(
+    `factory/supply/stockingUpManage/get?id=${id}`,
+  )
+}
+
+export function getStockingOrderDetailListByIdApi(id: number) {
+  return axios.get<never, BaseRespData<StockingOrderProduct[]>>(
+    `factory/supply/stockingUpManage/getManageDetailsList?id=${id}`,
+  )
+}
+
+export function getStockingOrderRelatedDocumentListByIdApi(id: number) {
+  return axios.get<never, BaseRespData<RelatedDocumentList[]>>(
+    `factory/supply/stockingUpManage/getWarehouseApplyList?id=${id}`,
+  )
+}
+
+export function getStockingOrderInternalMemoListByIdApi(id: number) {
+  return axios.get<never, BaseRespData<InternalMemoList[]>>(
+    `factory/supply/stockingUpManage/getInternalMemoList?id=${id}`,
+  )
+}
+
+export function getStockingOrderLogListByIdApi(id: number) {
+  return axios.get<never, BaseRespData<LogListData[]>>(
+    `factory/supply/stockingUpManageLog/getStockingUpManageLog?manageId=${id}`,
+  )
 }
\ No newline at end of file

src/api/supplier/supplierManagement.ts

@@ -45,12 +45,7 @@ export function getProductInfoBySpuApi(spu: string | number) {
     },
   )
 }
-// 获取币种接口
-export function getBaseCurrencyInfoApi() {
-  return axios.get<never, BaseRespData<never>>(
-    'factory/supplier/getBaseCurrencyInfo',
-  )
-}
+
 //新增
 export function addSupplierApi(params: IsupplierType) {
   return axios.post<never, BaseRespData<never>>('/factory/supplier/add', params)

src/styles/element.scss

@@ -34,7 +34,6 @@
 }
 .el-form-item {
   margin-right: 10px !important;
-  margin-bottom: 10px !important;
 }
 :root {
   --el-menu-icon-width: 0px;

src/types/api/supply/stockingOrder.ts

@@ -20,7 +20,37 @@ export interface SearchForm {
   warehouseSkuName?: string
   remark?: string
 }
-export interface TableData {}
+export interface TableData {
+  id: number
+  factoryId?: number
+  factoryCode?: string
+  stockingUpManageNo?: string
+  currencyCode?: string
+  skuTotal?: number
+  total?: number
+  totalPrice?: number
+  buyStored?: number
+  storedPrice?: number
+  buyUnstored?: number
+  unstoragePrice?: number
+  shipmentQuantity?: number
+  rejectsAmount?: number
+  shipmentFreight?: number
+  expectDeliveryTime?: string
+  status?: string
+  supplierId?: number
+  supplierName?: string
+  warehouseId?: number
+  warehouseName?: string
+  stockingUpUserId?: number
+  stockingUpUserName?: string
+  createUserId?: number
+  createUserName?: string
+  createTime?: string
+  updateTime?: string
+  remark?: string
+  dataVersion?: number
+}
 export interface StockProduct {
   skuImage?: string
   productName?: string
@@ -36,3 +66,48 @@ export interface StockProduct {
 }
 
 export interface supplierData {}
+
+// 新增备货单表单
+export interface AddStockingOrderForm {
+  id?: number | string
+  stockingUpManageNo?: string
+  supplierId?: number
+  supplierName?: string
+  stockingUpUserId?: number
+  stockingUpUserName?: string
+  warehouseId?: number
+  warehouseName?: string
+  expectDeliveryTime?: string
+  totalPrice?: string
+  currencyCode?: string
+  currencyName?: string
+  remark?: string
+  status?: number
+  detailsList?: StockingOrderProduct[]
+}
+
+// 备货单商品
+export interface StockingOrderProduct {
+  productNo?: string
+  warehouseSkuId?: number
+  warehouseSku?: string
+  warehouseSkuName?: string
+  warehouseSkuImage?: string
+  buyAmount?: number | string
+  price?: number | string
+  currencyCode?: string
+  currencyName?: string
+  totalPrice?: number | string
+  shipmentQuantity?: number | string
+}
+
+export interface RelatedDocumentList {}
+export interface InternalMemoList {}
+export interface LogListData {
+  id: number
+  manageId?: number
+  userId?: number
+  userName?: string
+  description?: string
+  updateTime?: string
+}

src/types/index.ts

@@ -8,4 +8,23 @@ export interface WarehouseListData {
   name?: string
   remarks?: string
   sort?: number
-}
\ No newline at end of file
+}
+
+export interface SupplierItem {
+  id: number
+  supplierName?: string
+  contacts?: string
+  contactsNumber?: string
+  address?: string
+  remark?: string
+  factoryId?: number
+  updateTime?: string
+  createTime?: string
+  supplierProductInfoList?: []
+}
+
+export interface CurrencyCodeData {
+  currencyName?: string
+  currencyCode?: string
+  id?: string
+}

src/views/supply/stockingOrder/StockingOrderDetailTabs.vue

 <template>
-  <ElTabs v-model="activeTab" class="detail-tabs">
+  <ElTabs
+    v-model="activeTab"
+    v-loading="loading"
+    class="detail-tabs"
+    @tab-click="handleTabClick"
+  >
     <ElTabPane name="stockProducts" label="备货商品">
       <div class="detail-table-content">
         <TableView
@@ -11,7 +16,11 @@
     </ElTabPane>
     <ElTabPane name="relatedDocuments" label="关联单据">
       <div class="detail-table-content">
-        <div class="empty-content">暂无数据</div>
+        <TableView
+          :serial-numberable="true"
+          :columns="relatedDocumentsColumns"
+          :paginated-data="relatedDocumentsData"
+        />
       </div>
     </ElTabPane>
     <ElTabPane name="internalMemo" label="内部便签">
@@ -21,16 +30,76 @@
     </ElTabPane>
     <ElTabPane name="operationLog" label="操作日志">
       <div class="detail-table-content">
+        <LogList :log-list="operationLogData" />
         <div class="empty-content">暂无数据</div>
       </div>
     </ElTabPane>
   </ElTabs>
 </template>
 
-<script setup lang="ts">
+<script setup lang="tsx">
 import { ref } from 'vue'
+import type { TabsPaneContext } from 'element-plus'
 import TableView from '@/components/TableView.vue'
-import { StockProduct } from '@/types/api/supply/stockingOrder'
+import {
+  LogListData,
+  StockingOrderProduct,
+  TableData,
+} from '@/types/api/supply/stockingOrder'
+import ImageView from '@/components/ImageView.vue'
+import { BigNumber } from 'bignumber.js'
+import {
+  getStockingOrderDetailListByIdApi,
+  getStockingOrderInternalMemoListByIdApi,
+  getStockingOrderLogListByIdApi,
+  getStockingOrderRelatedDocumentListByIdApi,
+} from '@/api/stockingOrder'
+import LogList from '@/components/LogList.vue'
+const relatedDocumentsColumns = computed(() => {
+  return [
+    {
+      label: '关联单据',
+      width: 120,
+      prop: 'documentNo',
+    },
+    {
+      label: '关联单号',
+    },
+    {
+      label: '制单人',
+      width: 120,
+    },
+    {
+      label: '制单时间',
+      width: 160,
+    },
+    {
+      label: 'SKU个数',
+      width: 120,
+      align: 'right',
+    },
+    {
+      label: '入库数量',
+      width: 120,
+      align: 'right',
+    },
+    {
+      label: '申请数量',
+      width: 120,
+      align: 'right',
+    },
+    {
+      label: '预计到货日期',
+      width: 160,
+      align: 'center',
+    },
+    {
+      label: '实际到货日期',
+      width: 160,
+      align: 'center',
+    },
+  ]
+})
 const stockProductsColumns = computed(() => {
   return [
     {
@@ -38,40 +107,43 @@ const stockProductsColumns = computed(() => {
       prop: 'skuImage',
       width: 100,
       align: 'center',
+      render: (item: StockingOrderProduct) => (
+        <ImageView src={item.warehouseSkuImage} width="50px" height="50px" />
+      ),
     },
     {
       label: '商品名称',
-      prop: 'productName',
+      prop: 'warehouseSkuName',
       minWidth: 200,
       align: 'left',
     },
     {
       label: '款号',
-      prop: 'styleNumber',
+      prop: 'productNo',
       width: 120,
       align: 'center',
     },
     {
       label: '库存SKU',
       prop: 'warehouseSku',
-      width: 150,
+      width: 180,
       align: 'center',
     },
     {
       label: '备货数量',
-      prop: 'stockQuantity',
+      prop: 'buyAmount',
       width: 100,
       align: 'right',
     },
     {
       label: '备货单价',
-      prop: 'stockUnitPrice',
+      prop: 'price',
       width: 100,
       align: 'right',
     },
     {
       label: '备货金额',
-      prop: 'stockAmount',
+      prop: 'totalPrice',
       width: 120,
       align: 'right',
     },
@@ -80,32 +152,125 @@ const stockProductsColumns = computed(() => {
       prop: 'unshippedQuantity',
       width: 120,
       align: 'right',
+      render: (item: StockingOrderProduct) => (
+        <span>
+          {new BigNumber(item.buyAmount ?? 0)
+            .minus(item.shipmentQuantity ?? 0)
+            .toString()}
+        </span>
+      ),
     },
     {
       label: '已发货数量',
-      prop: 'shippedQuantity',
+      prop: 'shipmentQuantity',
       width: 120,
       align: 'right',
     },
     {
       label: '已入库数量',
-      prop: 'inWarehouseQuantity',
+      prop: 'buyStored',
       width: 120,
       align: 'right',
     },
     {
       label: '不良品数量',
-      prop: 'defectiveQuantity',
+      prop: 'rejectsAmount',
       width: 120,
       align: 'right',
     },
   ]
 })
-defineProps<{
-  stockProductsData: StockProduct[]
+const props = defineProps<{
+  selectedRow: TableData | null
 }>()
 
+const stockProductsData = ref<StockingOrderProduct[]>([])
+const relatedDocumentsData = ref<StockingOrderProduct[]>([])
+const internalMemoData = ref<StockingOrderProduct[]>([])
+const operationLogData = ref<LogListData[]>([])
 const activeTab = ref('stockProducts')
+const loading = ref(false)
+watch(
+  () => props.selectedRow,
+  (newVal) => {
+    if (newVal) {
+      if (activeTab.value === 'stockProducts') {
+        loadStockProducts(newVal)
+      } else if (activeTab.value === 'relatedDocuments') {
+        loadRelatedDocuments(newVal)
+      } else if (activeTab.value === 'internalMemo') {
+        loadInternalMemo(newVal)
+      } else if (activeTab.value === 'operationLog') {
+        loadOperationLog(newVal)
+      }
+    } else {
+      stockProductsData.value = []
+      relatedDocumentsData.value = []
+      internalMemoData.value = []
+      operationLogData.value = []
+    }
+  },
+)
+const loadStockProducts = async (row: TableData) => {
+  loading.value = true
+  try {
+    const res = await getStockingOrderDetailListByIdApi(row.id)
+    if (res.code !== 200) return
+    stockProductsData.value = res.data || []
+  } catch (e) {
+    console.error(e)
+  } finally {
+    loading.value = false
+  }
+}
+const loadRelatedDocuments = async (row: TableData) => {
+  loading.value = true
+  try {
+    const res = await getStockingOrderRelatedDocumentListByIdApi(row.id)
+    if (res.code !== 200) return
+    relatedDocumentsData.value = res.data || []
+  } catch (e) {
+    console.error(e)
+  } finally {
+    loading.value = false
+  }
+}
+const loadInternalMemo = async (row: TableData) => {
+  loading.value = true
+  try {
+    const res = await getStockingOrderInternalMemoListByIdApi(row.id)
+    if (res.code !== 200) return
+    internalMemoData.value = res.data || []
+  } catch (e) {
+    console.error(e)
+  } finally {
+    loading.value = false
+  }
+}
+const loadOperationLog = async (row: TableData) => {
+  loading.value = true
+  try {
+    const res = await getStockingOrderLogListByIdApi(row.id)
+    if (res.code !== 200) return
+    operationLogData.value = res.data || []
+  } catch (e) {
+    console.error(e)
+  } finally {
+    loading.value = false
+  }
+}
+const handleTabClick = (tab: TabsPaneContext) => {
+  activeTab.value = tab.paneName as string
+  if (activeTab.value === 'stockProducts') {
+    loadStockProducts(props.selectedRow as TableData)
+  } else if (activeTab.value === 'relatedDocuments') {
+    loadRelatedDocuments(props.selectedRow as TableData)
+  } else if (activeTab.value === 'internalMemo') {
+    loadInternalMemo(props.selectedRow as TableData)
+  } else if (activeTab.value === 'operationLog') {
+    loadOperationLog(props.selectedRow as TableData)
+  }
+}
 </script>
 
 <style lang="scss" scoped>

src/views/supply/supplierManagement/index.vue

@@ -190,10 +190,10 @@ import {
   getSupplierDetailApi,
   getPropertyByCateIdApi,
   getProductInfoBySpuApi,
-  getBaseCurrencyInfoApi,
   addSupplierApi,
   updateSupplierApi,
 } from '@/api/supplier/supplierManagement.ts'
+import { getBaseCurrencyInfoApi } from '@/api/common'
 
 import Dialog from './components/dialog.tsx'
 import CustomizeForm from '@/components/CustomizeForm.tsx'