Skip to content

F
factory_front
Commit c91ce523 by qinjianhui
Options

Merge branch 'dev' into 'master' 

Dev

See merge request !109
parents 22a62d97 ddf3222a
Showing with 669 additions and 104 deletions
components.d.ts
......@@ -34,7 +34,6 @@ declare module 'vue' {
ElImage: typeof import('element-plus/es')['ElImage']
ElInput: typeof import('element-plus/es')['ElInput']
ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
ElLink: typeof import('element-plus/es')['ElLink']
ElMenu: typeof import('element-plus/es')['ElMenu']
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
ElOption: typeof import('element-plus/es')['ElOption']
......
package.json
......@@ -4,7 +4,7 @@
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"dev": "vite --host",
"build": "npm run lint && vue-tsc && vite build",
"preview": "vite preview",
"lint": "vue-tsc --noEmit && eslint"
......
src/api/externalAuth.ts
......@@ -48,3 +48,14 @@ export function addExternalAuthorisationApi(
) {
return axios.post<never, BaseRespData<never>>(url, data)
}
export function saveInventoryLowerLimitApi(inventoryLowerLimit: number) {
return axios.get<never, BaseRespData<never>>(
'factory/baseExternalAccount/setInventoryWarningFloor',
{ params: { inventoryWarningFloor: inventoryLowerLimit } },
)
}
export function getInventoryLowerLimitApi() {
return axios.get<never, BaseRespData<number>>(
'factory/baseExternalAccount/getInventoryWarningFloor',
)
}
src/api/outOfStockStis.ts 0 → 100644
import axios from './axios'
import { BasePaginationData, BaseRespData } from '@/types/api'
import { SearchForm, OutOfStockItem } from '@/types/api/outOfStockStatistics'
export function getOutOfStockStatisticsListApi(
data: SearchForm,
currentPage: number,
pageSize: number,
) {
return axios.post<never, BasePaginationData<OutOfStockItem>>(
'stockOutStatistics/getStockOutStatistics',
{ ...data, currentPage, pageSize },
)
}
export function exportOutOfStockStatisticsListApi(data: {
exportAll: boolean
indexes?: number[]
}) {
return axios.post<never, BaseRespData<never>>(
'stockOutStatistics/exportStockOutStatistics',
data,
)
}
src/router/index.ts
......@@ -163,6 +163,13 @@ const router = createRouter({
component: CustomersPage,
},
{
path: '/supply/out-of-stock-statistics',
meta: {
title: '缺货统计',
},
component: () => import('@/views/supply/OutOfStockStatistics.vue')
},
{
path: '/system/delivery-note',
meta: {
title: '定制发货单',
......
src/router/menu.ts
......@@ -148,7 +148,18 @@ const menu: MenuItem[] = [
},
],
},
{
index: '14',
id: 14,
label: '供应',
children: [
{
label:'缺货统计',
index:'/supply/out-of-stock-statistics',
id:1,
},
],
},
{
index: '12',
id: 4,
......
src/types/api/outOfStockStatistics.ts 0 → 100644
export interface OutOfStockItem {
id?: number
variantImage?: string
warehouseName?: string
locationCode?: string
warehouseSku?: string
productNo?: string
skuName?: string
currency?: string
costPrice?: number
stockOutNum?: number
salesNum?: number
warehouseSpu?: string
inventory?: number
occupyInventory?: number
freezeInventory?: number
purchaseNotInQuantity?: number
longestDelayDays?: number
sort?: number
}
export interface SearchForm {
warehouseId?: string | number
warehouseSku?: string
productNo?: string
skuName?: string
}
\ No newline at end of file
src/views/setting/settingIndex.vue
......@@ -7,107 +7,136 @@
<span>系统配置</span>
</div>
<div class="cardBox">
<div v-for="(item, index) in formList" style="width: 600px" :key="index">
<el-form
v-if="item.type === 'RIIN'"
class="form"
ref="formRef"
label-width="120"
:model="item"
<div class="card-box-item-container">
<div
v-for="(item, index) in formList"
:key="index"
class="card-box-item"
>
<div class="formBox">
<el-form-item label="转至RIIN生产">
<el-switch
v-model="item.enable"
class="ml-2"
style="--el-switch-on-color: #42b983"
/>
</el-form-item>
<div class="formContent" v-if="item.enable">
<el-form-item
label="账号"
prop="appKey"
:rules="[{ required: true, message: '请输入RIIN账号' }]"
>
<ElInput
ref="productionOrderRef"
v-model="item.appKey"
placeholder="请输入RIIN账号"
clearable
style="width: 100%"
/></el-form-item>
<el-form-item
label="App Secret"
prop="appSecret"
:rules="[{ required: true, message: '请输入App Secret' }]"
>
<ElInput
ref="productionOrderRef"
v-model="item.appSecret"
placeholder="请输入App Secret"
clearable
style="width: 100%"
/></el-form-item>
<template v-if="item.type === 'RIIN'">
<div class="formBox">
<div class="form-item">
<span>转至RIIN生产</span>
<el-switch
v-model="item.enable"
class="ml-2"
style="--el-switch-on-color: #42b983"
/>
</div>
<div v-if="item.enable" class="formContent">
<el-form
v-if="item.type === 'RIIN'"
ref="formRef"
class="form"
label-width="120"
:model="item"
>
<el-form-item
label="账号"
prop="appKey"
:rules="[{ required: true, message: '请输入RIIN账号' }]"
>
<ElInput
ref="productionOrderRef"
v-model="item.appKey"
placeholder="请输入RIIN账号"
clearable
style="width: 100%"
/></el-form-item>
<el-form-item
label="App Secret"
prop="appSecret"
:rules="[{ required: true, message: '请输入App Secret' }]"
>
<ElInput
ref="productionOrderRef"
v-model="item.appSecret"
placeholder="请输入App Secret"
clearable
style="width: 100%"
/></el-form-item>
</el-form>
</div>
</div>
</div>
<ElButton
class="btn"
color="#42b983"
@click="saveConfiguration(item, index)"
>保存配置</ElButton
>
</el-form>
<el-form
v-if="item.type === 'TRACK'"
class="form"
ref="formRef"
label-width="120"
:model="item"
>
<ElButton
class="btn"
color="#42b983"
@click="saveConfiguration(item, index)"
>保存配置</ElButton
>
</template>
<template v-if="item.type === 'TRACK'">
<div class="formBox">
<div class="form-item">
<span>物流轨迹跟踪</span>
<el-switch
v-model="item.enable"
class="ml-2"
style="--el-switch-on-color: #42b983"
/>
</div>
<div v-if="item.enable" class="formContent">
<el-form
v-if="item.type === 'TRACK'"
class="form"
ref="formRef"
label-width="120"
:model="item"
>
<el-form-item
label="17Track账号"
prop="appKey"
:rules="[{ required: true, message: '请输入17Track账号' }]"
>
<ElInput
ref="productionOrderRef"
v-model="item.appKey"
placeholder="请输入17Track账号"
clearable
style="width: 100%"
/></el-form-item>
<el-form-item
label="账号Token"
prop="token"
:rules="[{ required: true, message: '请输入账号Token' }]"
>
<ElInput
ref="productionOrderRef"
v-model="item.token"
placeholder="请输入账号Token"
clearable
style="width: 100%"
/></el-form-item>
</el-form>
</div>
</div>
<ElButton
class="btn"
color="#42b983"
@click="saveConfiguration(item, index)"
>保存配置</ElButton
>
</template>
</div>
<div class="card-box-item">
<div class="formBox">
<el-form-item label="物流轨迹跟踪">
<el-switch
v-model="item.enable"
class="ml-2"
style="--el-switch-on-color: #42b983"
<div class="form-item">
<span>库存预警下限:</span>
</div>
<div class="formContent">
<ElInput
v-model="inventoryLowerLimit"
clearable
placeholder="请输入库存预警下限"
/>
</el-form-item>
<div class="formContent" v-if="item.enable">
<el-form-item
label="17Track账号"
prop="appKey"
:rules="[{ required: true, message: '请输入17Track账号' }]"
>
<ElInput
ref="productionOrderRef"
v-model="item.appKey"
placeholder="请输入17Track账号"
clearable
style="width: 100%"
/></el-form-item>
<el-form-item
label="账号Token"
prop="token"
:rules="[{ required: true, message: '请输入账号Token' }]"
>
<ElInput
ref="productionOrderRef"
v-model="item.token"
placeholder="请输入账号Token"
clearable
style="width: 100%"
/></el-form-item>
</div>
</div>
<ElButton
class="btn"
color="#42b983"
@click="saveConfiguration(item, index)"
<ElButton class="btn" color="#42b983" @click="saveInventoryLowerLimit"
>保存配置</ElButton
>
</el-form>
</div>
</div>
</div>
<div class="logBox">
......@@ -122,6 +151,8 @@ import {
addExternalAuthorisationApi,
getExternalAuthorisationListApi,
baseExternalAccountLogsApi,
saveInventoryLowerLimitApi,
getInventoryLowerLimitApi,
} from '@/api/externalAuth'
import { ExternalAuthListData } from '@/types/api/externalAuth'
......@@ -134,7 +165,7 @@ interface formType {
}
const formRef = ref()
const inventoryLowerLimit = ref<number | null>(100)
const logList = ref([])
async function saveConfiguration(item: formType, index: number) {
let loading
......@@ -222,16 +253,49 @@ async function handleClick() {
console.log(error)
}
}
const saveInventoryLowerLimit = async () => {
if (!inventoryLowerLimit.value) {
ElMessage.error('请输入库存预警下限')
return
}
try {
const res = await saveInventoryLowerLimitApi(inventoryLowerLimit.value)
if (res.code !== 200) {
return
}
await ElMessageBox.confirm('保存配置成功！！需重新登录才能生效', '提示', {
confirmButtonText: '确定',
showCancelButton: false,
type: 'success',
})
getInventoryLowerLimit()
handleClick()
} catch (error) {
console.log(error)
}
}
const getInventoryLowerLimit = async () => {
try {
const res = await getInventoryLowerLimitApi()
if (res.code !== 200) {
return
}
inventoryLowerLimit.value = res.data
} catch (error) {
console.log(error)
}
}
onMounted(async () => {
await getDetail()
getInventoryLowerLimit()
handleClick()
})
</script>
<style lang="scss" scoped>
.card-header {
margin-left: 200px;
text-align: center;
font-size: 30px;
margin-bottom: 20px;
}
......@@ -240,9 +304,8 @@ onMounted(async () => {
height: calc(100% - 60px);
}
.cardBox {
flex: 3;
flex: 1;
overflow-y: scroll;
height: 100%;
.el-card__footer {
border: none !important;
}
......@@ -253,6 +316,9 @@ onMounted(async () => {
padding: 20px;
border: 1px solid #ebebeb;
border-radius: 8px;
height: 220px;
display: flex;
flex-direction: column;
&:last-child {
margin-bottom: 0;
}
......@@ -260,6 +326,8 @@ onMounted(async () => {
padding: 20px;
background-color: #f9f9f9;
border-radius: 5px;
overflow: auto;
flex: 1;
.el-form-item:last-child {
margin-bottom: 0 !important;
}
......@@ -274,8 +342,20 @@ onMounted(async () => {
padding-top: 10px;
height: 200px;
}
.form {
margin-bottom: 15px;
}
.form-item {
display: flex;
align-items: center;
margin-bottom: 10px;
gap: 10px;
span {
color: #606266;
font-size: 14px;
}
}
.card-box-item-container {
display: grid;
grid-template-columns: repeat(3, minmax(100px, 1fr));
gap: 10px;
}
</style>
src/views/supply/OutOfStockStatistics.vue 0 → 100644
<template>
<div
class="out-of-stock-statistics-page flex-column card h-100 overflow-hidden"
>
<div class="header-filter-form">
<ElForm v-enter-submit="search" :inline="true">
<ElFormItem label="缺货仓库">
<ElSelect
v-model="searchForm.warehouseId"
style="width: 180px"
placeholder="请选择仓库"
>
<ElOption
v-for="item in warehouseList"
:key="item.id"
:label="item.name"
:value="item.id"
></ElOption>
</ElSelect>
</ElFormItem>
<ElFormItem label="库存SKU">
<ElInput
v-model="searchForm.warehouseSku"
clearable
style="width: 180px"
placeholder="请输入库存SKU"
></ElInput>
</ElFormItem>
<ElFormItem label="款号">
<ElInput
v-model="searchForm.productNo"
clearable
style="width: 180px"
placeholder="请输入款号"
></ElInput>
</ElFormItem>
<ElFormItem label="商品名称">
<ElInput
v-model="searchForm.skuName"
clearable
style="width: 180px"
placeholder="请输入商品名称"
></ElInput>
</ElFormItem>
<ElFormItem>
<ElButton type="primary" @click="search"> 查询 </ElButton>
</ElFormItem>
<ElFormItem>
<ElButton type="success" @click="exportData"> 导出 </ElButton>
</ElFormItem>
</ElForm>
</div>
<div class="table-content flex-1 flex-column overflow-hidden">
<div v-loading="loading" class="table-list flex-1 overflow-hidden">
<TableView
:selectionable="true"
:serial-numberable="true"
:paginated-data="tableData"
:columns="tableColumns"
@selection-change="handleSelectionChange"
>
</TableView>
</div>
<ElPagination
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:page-sizes="[50, 100, 200, 300, 500]"
background
layout="total, sizes, prev, pager, next, jumper"
:total="total"
style="margin: 10px auto 0; text-align: right"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
></ElPagination>
</div>
</div>
<ElDialog
v-model="exportVisible"
title="导出选项"
width="500px"
:close-on-click-modal="false"
>
<el-form :model="exportForm" label-width="80px">
<el-form-item label="" prop="resource">
<el-radio-group v-model="exportForm.resource">
<el-radio label="currentPage">导出本页</el-radio>
<el-radio label="selectedRows">导出选中</el-radio>
<el-radio label="all">全部</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="exportVisible = false">取消</el-button>
<el-button
:loading="exportLoading"
type="primary"
@click="submitExportForm"
>确认</el-button
>
</span>
</template>
</ElDialog>
</template>
<script setup lang="tsx">
import { computed, ref, onMounted } from 'vue'
import TableView from '@/components/TableView.vue'
import usePageList from '@/utils/hooks/usePageList'
import { loadWarehouseListApi } from '@/api/podCnOrder'
import type { WarehouseListData } from '@/types/api/podCnOrder'
import { SearchForm, OutOfStockItem } from '@/types/api/outOfStockStatistics'
import {
getOutOfStockStatisticsListApi,
exportOutOfStockStatisticsListApi,
} from '@/api/outOfStockStis'
import ImageView from '@/components/ImageView.vue'
import { filePath } from '@/api/axios'
const searchForm = ref<SearchForm>({
warehouseId: '',
warehouseSku: '',
productNo: '',
skuName: '',
})
const warehouseList = ref<WarehouseListData[]>([])
const exportVisible = ref(false)
const exportForm = ref({
resource: null,
})
const exportLoading = ref(false)
// 表格列配置
const tableColumns = computed(() => {
return [
{
label: '图片',
prop: 'variantImage',
width: 100,
align: 'center',
slot: 'image',
render: (item: OutOfStockItem) => (
<ImageView src={item.variantImage} width="40px" height="40px" />
),
},
{
label: '缺货仓库',
prop: 'warehouseName',
width: 120,
align: 'center',
},
{
label: '库位',
prop: 'locationCode',
width: 120,
align: 'center',
},
{
label: '库存SKU',
prop: 'warehouseSku',
width: 150,
align: 'center',
},
{
label: '款号',
prop: 'productNo',
width: 120,
align: 'center',
},
{
label: '商品名称',
prop: 'skuName',
minWidth: 200,
align: 'left',
},
{
label: '币种',
prop: 'currency',
width: 80,
align: 'center',
},
{
label: '商品成本价',
prop: 'costPrice',
width: 120,
align: 'right',
render: (item: OutOfStockItem) => (
<span>{item.costPrice ? item.costPrice.toFixed(2) : ''}</span>
),
},
{
label: '缺货数量',
prop: 'stockOutNum',
width: 100,
align: 'right',
},
{
label: '销售数量',
prop: 'salesNum',
width: 100,
align: 'right',
},
{
label: '库存SPU',
prop: 'warehouseSpu',
width: 150,
align: 'center',
},
{
label: '最长缺货天数',
prop: 'longestDelayDays',
width: 120,
align: 'right',
},
{
label: '库存数量',
prop: 'inventory',
width: 100,
align: 'right',
},
{
label: '占用数量',
prop: 'occupyInventory',
width: 100,
align: 'right',
},
{
label: '冻结数量',
prop: 'freezeInventory',
width: 100,
align: 'right',
},
{
label: '采购未入数量',
prop: 'purchaseNotInQuantity',
width: 120,
align: 'right',
},
]
})
const {
loading,
currentPage,
pageSize,
total,
data: tableData,
refresh: search,
onCurrentPageChange: handleCurrentChange,
onPageSizeChange: handleSizeChange,
} = usePageList<OutOfStockItem>({
query: (page, pageSize) =>
getOutOfStockStatisticsListApi(
{
...searchForm.value,
},
page,
pageSize,
).then((res) => res.data) as never,
initLoad: false,
})
// 加载仓库列表
const loadWarehouseList = async () => {
try {
const res = await loadWarehouseListApi()
if (res.code !== 200) return
warehouseList.value = res.data || []
searchForm.value.warehouseId = warehouseList.value[0].id
} catch (e) {
console.error(e)
}
}
// 导出数据
const exportData = async () => {
exportForm.value.resource = null
exportVisible.value = true
}
const submitExportForm = async () => {
if (!exportForm.value.resource) {
return ElMessage.error('请选择导出类型')
}
const params: { exportAll: boolean; indexes?: number[] } = {
exportAll: false,
indexes: [],
}
if (exportForm.value.resource === 'currentPage') {
params.exportAll = false
params.indexes = undefined
} else if (exportForm.value.resource === 'selectedRows') {
if (!selectedRows.value.length) {
return ElMessage.error('请选择要导出的数据')
}
params.exportAll = false
params.indexes = selectedRows.value.map((el: OutOfStockItem) =>
Number(el.sort),
)
} else if (exportForm.value.resource === 'all') {
params.exportAll = true
params.indexes = undefined
}
try {
const res = await exportOutOfStockStatisticsListApi({
...searchForm.value,
...params,
})
window.open(filePath + res.message, '_blank')
exportVisible.value = false
} catch (e) {
console.error(e)
}
}
// 处理表格选择变化
const selectedRows = ref<OutOfStockItem[]>([])
const handleSelectionChange = (val: OutOfStockItem[]) => {
selectedRows.value = val
}
onMounted(async () => {
await loadWarehouseList()
search()
})
</script>
<style lang="scss" scoped>
.out-of-stock-statistics-page {
.header-filter-form {
:deep(.el-form-item) {
margin-right: 14px;
margin-bottom: 10px;
}
}
.table-content {
.table-list {
border: 1px solid #ebeef5;
border-radius: 4px;
}
}
}
</style>
src/views/warehouse/warning.vue
......@@ -20,6 +20,7 @@ import { ref, computed } from 'vue'
import SplitDiv from '@/components/splitDiv/splitDiv.vue'
import { filePath } from '@/api/axios.ts'
import { useEnterKeyTrigger } from '@/utils/hooks/useEnterKeyTrigger.ts'
import { getInventoryLowerLimitApi } from '@/api/externalAuth'
const searchForm = ref({
warehouseId: '',
......@@ -172,7 +173,24 @@ async function getData() {
...pagination.value,
...searchForm.value,
})
leftData.value = res.data.records
const sortedRecords = res.data.records.sort((a, b) => {
const aUsable =
Number(
(a as WarehouseWarning & { usableInventory?: number | string })
.usableInventory,
) || 0
const bUsable =
Number(
(b as WarehouseWarning & { usableInventory?: number | string })
.usableInventory,
) || 0
const aIsLow = aUsable < 100
const bIsLow = bUsable < 100
if (aIsLow && !bIsLow) return -1
if (!aIsLow && bIsLow) return 1
return 0
})
leftData.value = sortedRecords
pagination.value.total = res.data.total
if (leftData.value.length) {
getDetail(leftData.value[0].id)
......@@ -292,8 +310,17 @@ const getWarehouse = async () => {
const { data } = await warehouseInfoGetAll()
warehouseList.value = data
}
getData()
getWarehouse()
const getRowClassName = (row: { row: WarehouseWarning }) => {
const rowData = row.row as WarehouseWarning & {
usableInventory?: number | string
}
const usableInventory = Number(rowData.usableInventory) || 0
if (usableInventory < inventoryLowerLimit.value) {
return 'low-inventory-row'
}
return ''
}
/**
* @description: 页面添加回车监听
......@@ -310,6 +337,23 @@ useEnterKeyTrigger({
getData()
},
})
const inventoryLowerLimit = ref<number>(100)
const getInventoryLowerLimit = async () => {
try {
const res = await getInventoryLowerLimitApi()
if (res.code !== 200) {
return
}
inventoryLowerLimit.value = res.data
} catch (error) {
console.log(error)
}
}
onMounted(async () => {
getData()
getWarehouse()
getInventoryLowerLimit()
})
</script>
<template>
......@@ -509,6 +553,7 @@ useEnterKeyTrigger({
height="100%"
:data="leftData"
border
:row-class-name="getRowClassName"
@current-change="clickItem"
@selection-change="handleSelectionChange"
>
......@@ -831,6 +876,25 @@ useEnterKeyTrigger({
}
}
::v-deep(.el-table) {
.low-inventory-row {
&:hover {
background-color: #f56c6c !important;
color: #fff !important;
}
td {
background-color: #f56c6c !important;
color: #fff !important;
}
&:hover td {
background-color: #f56c6c !important;
color: #fff !important;
}
}
}
.bottom-table {
height: 100%;
background: white;
......
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