Skip to content

F
factory_front
Commit dbcacf03 by qinjianhui
Options

feat: 备货订单左侧状态树和查询条件开发

parent 9f5792ba
Showing with 266 additions and 20 deletions
src/api/outOfStockStis.ts
import axios from './axios' import axios from './axios'
import { BasePaginationData, BaseRespData } from '@/types/api' import { BasePaginationData, BaseRespData } from '@/types/api'
import { SearchForm, OutOfStockItem } from '@/types/api/outOfStockStatistics' import { SearchForm, OutOfStockItem } from '@/types/api/supply/outOfStockStatistics'
export function getOutOfStockStatisticsListApi( export function getOutOfStockStatisticsListApi(
data: SearchForm, data: SearchForm,
currentPage: number, currentPage: number,
......
src/router/index.ts
...@@ -170,6 +170,13 @@ const router = createRouter({ ...@@ -170,6 +170,13 @@ const router = createRouter({
component: () => import('@/views/supply/OutOfStockStatistics.vue') component: () => import('@/views/supply/OutOfStockStatistics.vue')
}, },
{ {
path: '/supply/stocking-order',
meta: {
title: '备货订单',
},
component: () => import('@/views/supply/stockingOrder/index.vue'),
},
{
path: '/system/delivery-note', path: '/system/delivery-note',
meta: { meta: {
title: '定制发货单', title: '定制发货单',
......
src/router/menu.ts
...@@ -11,11 +11,6 @@ const menu: MenuItem[] = [ ...@@ -11,11 +11,6 @@ const menu: MenuItem[] = [
id: 1, id: 1,
label: '概览', label: '概览',
}, },
// {
// index: '/product',
// id: 11,
// label: '商品',
// },
{ {
index: '4', index: '4',
id: 7, id: 7,
...@@ -159,8 +154,13 @@ const menu: MenuItem[] = [ ...@@ -159,8 +154,13 @@ const menu: MenuItem[] = [
id: 1, id: 1,
}, },
{ {
index: '/supply/supplierManagement', label: '备货订单',
index:'/supply/stocking-order',
id: 2, id: 2,
},
{
index: '/supply/supplierManagement',
id: 3,
label: '供应商管理', label: '供应商管理',
}, },
], ],
...@@ -238,17 +238,5 @@ const menu: MenuItem[] = [ ...@@ -238,17 +238,5 @@ const menu: MenuItem[] = [
}, },
], ],
}, },
// {
// index: '',
// id: 3,
// label: '生产管理',
// children: [
// {
// index: '/production/complete',
// id: 4,
// label: '生产完成',
// }
// ]
// },
] ]
export default menu export default menu
src/styles/common.scss
...@@ -116,4 +116,4 @@ img { ...@@ -116,4 +116,4 @@ img {
} }
.mb-10 { .mb-10 {
margin-bottom: 10px; margin-bottom: 10px;
} }
\ No newline at end of file
src/styles/element.scss
...@@ -32,6 +32,10 @@ ...@@ -32,6 +32,10 @@
color: #409eff !important; color: #409eff !important;
} }
} }
.el-form-item {
margin-right: 10px !important;
margin-bottom: 10px !important;
}
:root { :root {
--el-menu-icon-width: 0px; --el-menu-icon-width: 0px;
} }
src/types/api/supply/stockingOrder.ts 0 → 100644
export interface TreeData {
statusName: string
statusCode: string
children?: TreeData[]
quantity?: number
}
export interface SearchForm {
pageSize: number
currentPage: number
sku: string
}
\ No newline at end of file
src/views/supply/stockingOrder/index.vue 0 → 100644
<template>
<div class="stocking-order-page card h-100 flex overflow-hidden">
<div class="order-status">
<ElTree
ref="treeRef"
default-expand-all
:expand-on-click-node="false"
:default-expanded-keys="[]"
:highlight-current="true"
node-key="statusCode"
:data="treeData"
:props="{ children: 'children', label: 'statusName' }"
@node-click="nodeClick"
>
<template #default="{ data }">
<div class="tree-node">
<div class="tree-node-label">{{ data.statusName }}</div>
<div
v-if="data.quantity || data.quantity === 0"
class="tree-node-count"
>
{{ `(${data.quantity})` }}
</div>
</div>
</template>
</ElTree>
</div>
<div class="order-content flex-1 flex-column overflow-hidden">
<div class="header">
<div class="header-search-form">
<ElForm
ref="searchFormRef"
:model="searchForm"
inline
label-width="70px"
class="search-form"
>
<ElFormItem label="备货仓库" prop="orderNumber">
<ElInput
v-model="searchForm.orderNumber"
placeholder="订单号"
class="form-input"
/>
</ElFormItem>
<ElFormItem label="制单时间" prop="orderCreateTime">
<ElDatePicker
v-model="searchForm.orderCreateTime"
type="datetimerange"
clearable
start-placeholder="开始时间"
end-placeholder="结束时间"
class="form-input"
/>
</ElFormItem>
<ElFormItem label="备货单号" prop="inNo">
<ElInput
v-model="searchForm.inNo"
clearable
placeholder="备货单号"
class="form-input"
/>
</ElFormItem>
<ElFormItem label="供应商" prop="sku">
<ElInput class="form-input"></ElInput>
</ElFormItem>
<ElFormItem label="发货状态" prop="sku">
<ElInput class="form-input"></ElInput>
</ElFormItem>
<ElFormItem label="备货员" prop="sku">
<ElInput class="form-input"></ElInput>
</ElFormItem>
<ElFormItem label="库存SKU" prop="sku">
<ElInput class="form-input"></ElInput>
</ElFormItem>
<ElFormItem label="商品名称" prop="sku">
<ElInput
v-model="searchForm.skuName"
clearable
placeholder="请输入商品名称"
class="form-input"
></ElInput>
</ElFormItem>
<ElFormItem label="备注" prop="sku">
<ElInput class="form-input"></ElInput>
</ElFormItem>
<ElFormItem class="form-item-buttons">
<ElButton type="primary">查询</ElButton>
<ElButton>重置</ElButton>
</ElFormItem>
</ElForm>
</div>
<div class="header-operation"></div>
</div>
<div class="table-content">
<SplitDiv size="50">
<template #top></template>
<template #bottom></template>
</SplitDiv>
</div>
</div>
</div>
</template>
<script setup lang="tsx">
import { TreeData, SearchForm } from '@/types/api/supply/stockingOrder'
import { useValue } from '@/utils/hooks/useValue'
import { ref } from 'vue'
const treeData = ref<TreeData[]>([
{
children: [
{
statusCode: '0',
statusName: '待提交',
quantity: 0,
},
{
statusCode: '1',
statusName: '待审核',
quantity: 0,
},
{
statusCode: '2',
statusName: '备货中',
quantity: 0,
},
{
statusCode: '3',
statusName: '备货完成',
quantity: 0,
},
{
statusCode: '4',
statusName: '已取消',
quantity: 0,
},
],
statusCode: '-1',
statusName: '全部',
},
])
const treeRef = ref()
const statusCode = ref<string>('-1')
const [searchForm] = useValue<SearchForm>({
pageSize: 20,
currentPage: 1,
sku: '',
})
const nodeClick = (data: TreeData) => {
statusCode.value = data.statusCode
}
</script>
<style lang="scss" scoped>
.order-status {
width: 160px;
:deep(.el-tree-node__content) {
height: 30px;
line-height: 30px;
}
:deep(.el-tree-node__label) {
font-size: 13px;
cursor: pointer;
display: inline-block;
width: 100%;
color: black !important;
padding: 3px 7px;
}
:deep(.el-tree-node__expand-icon) {
display: none;
}
:deep(.is-current) {
.tree-node-label,
.tree-node-count {
background-color: #ecf5ff;
color: #409eff !important;
}
.el-tree-node__children {
.tree-node-label,
.tree-node-count {
background-color: transparent !important;
color: black !important;
}
}
}
:deep(.el-tree-node__label) {
font-size: 13px;
color: rgb(96, 98, 102);
cursor: pointer;
}
:deep(.el-tree-node__expand-icon) {
display: none;
}
:deep(.el-tree-node__label) {
display: inline-block;
width: 100%;
color: black !important;
padding: 3px 7px;
}
:deep(.is-current) {
.el-tree-node__label {
background-color: #ecf5ff;
color: #409eff !important;
}
.el-tree-node__children {
.el-tree-node__label {
background-color: transparent !important;
color: black !important;
}
}
}
}
.tree-node {
display: flex;
color: #333;
font-weight: 500;
}
.table-content {
flex: 1;
}
.search-form {
display: grid;
grid-template-columns: repeat(6, 1fr);
align-items: flex-start;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment