|
@@ -9,21 +9,27 @@ import {
|
|
Storehouse_Stock_Detail_Excel
|
|
Storehouse_Stock_Detail_Excel
|
|
} from '@/api/storehouse/index'
|
|
} from '@/api/storehouse/index'
|
|
import { ref, reactive, onMounted } from 'vue'
|
|
import { ref, reactive, onMounted } from 'vue'
|
|
-import { List, Picture, ArrowUpBold, ArrowDownBold } from '@element-plus/icons-vue'
|
|
|
|
|
|
+import { List } from '@element-plus/icons-vue'
|
|
import Drawer from '@/components/Drawer/index.vue'
|
|
import Drawer from '@/components/Drawer/index.vue'
|
|
import { GlobalStore } from '@/stores/index'
|
|
import { GlobalStore } from '@/stores/index'
|
|
import TableBase from '@/components/TableBase/index.vue'
|
|
import TableBase from '@/components/TableBase/index.vue'
|
|
import type { ColumnProps } from '@/components/TableBase/interface/index'
|
|
import type { ColumnProps } from '@/components/TableBase/interface/index'
|
|
import { dayJs } from '@/utils/common'
|
|
import { dayJs } from '@/utils/common'
|
|
import ImageCom from '@/components/Image/index.vue'
|
|
import ImageCom from '@/components/Image/index.vue'
|
|
|
|
+import { useTablePublic } from '@/hooks/useTablePublic'
|
|
|
|
|
|
|
|
+const userInfo = ref({
|
|
|
|
+ Id: '',
|
|
|
|
+ T_name: ''
|
|
|
|
+})
|
|
const globalStore = GlobalStore()
|
|
const globalStore = GlobalStore()
|
|
const DrawerRef = ref<InstanceType<typeof Drawer> | null>(null)
|
|
const DrawerRef = ref<InstanceType<typeof Drawer> | null>(null)
|
|
const TableRef = ref<InstanceType<typeof TableBase> | null>(null)
|
|
const TableRef = ref<InstanceType<typeof TableBase> | null>(null)
|
|
const TableDetailRef = ref<InstanceType<typeof TableBase> | null>(null)
|
|
const TableDetailRef = ref<InstanceType<typeof TableBase> | null>(null)
|
|
|
|
+const { tableRowClassName } = useTablePublic()
|
|
|
|
+const tableRowClassNameHandle = (data: any): any => tableRowClassName(data.row.Id, userInfo.value.Id)
|
|
|
|
|
|
let timeout: NodeJS.Timeout
|
|
let timeout: NodeJS.Timeout
|
|
-const searchShow = ref(false)
|
|
|
|
const initParam = reactive({
|
|
const initParam = reactive({
|
|
User_tokey: globalStore.GET_User_tokey,
|
|
User_tokey: globalStore.GET_User_tokey,
|
|
T_depot_id: '',
|
|
T_depot_id: '',
|
|
@@ -61,17 +67,14 @@ const detailColumns: ColumnProps[] = [
|
|
{ prop: 'T_ending', label: '期末库存' }
|
|
{ prop: 'T_ending', label: '期末库存' }
|
|
]
|
|
]
|
|
|
|
|
|
-const searchShowHandle = () => (searchShow.value = !searchShow.value)
|
|
|
|
const searchHandle = () => {
|
|
const searchHandle = () => {
|
|
TableRef.value?.searchTable()
|
|
TableRef.value?.searchTable()
|
|
}
|
|
}
|
|
const dataCallback = (res: any) => {
|
|
const dataCallback = (res: any) => {
|
|
return res.Data.Data.map((item: any) => {
|
|
return res.Data.Data.map((item: any) => {
|
|
- depotOptions.value.forEach((depot: any) => {
|
|
|
|
- if (item.T_depot_id === depot.Id) {
|
|
|
|
- item.T_depot_name = depot.T_name
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
|
|
+ if (item.T_depot_id === userInfo.value.Id) {
|
|
|
|
+ item.T_depot_name = userInfo.value.T_name
|
|
|
|
+ }
|
|
return item
|
|
return item
|
|
})
|
|
})
|
|
}
|
|
}
|
|
@@ -85,17 +88,15 @@ const T_date_export = ref<string[]>([])
|
|
const visible = ref(false)
|
|
const visible = ref(false)
|
|
const exportExcel = () => (visible.value = true)
|
|
const exportExcel = () => (visible.value = true)
|
|
const confirmExpor = async (project_id?: string) => {
|
|
const confirmExpor = async (project_id?: string) => {
|
|
- console.log(project_id)
|
|
|
|
-
|
|
|
|
const params = {
|
|
const params = {
|
|
User_tokey: globalStore.GET_User_tokey,
|
|
User_tokey: globalStore.GET_User_tokey,
|
|
T_depot_id: initParam.T_depot_id,
|
|
T_depot_id: initParam.T_depot_id,
|
|
T_start_date: T_date.value[0],
|
|
T_start_date: T_date.value[0],
|
|
T_end_date: T_date.value[1],
|
|
T_end_date: T_date.value[1],
|
|
- T_project_id: ''
|
|
|
|
|
|
+ T_product_id: ''
|
|
}
|
|
}
|
|
if (typeof project_id === 'number') {
|
|
if (typeof project_id === 'number') {
|
|
- params['T_project_id'] = project_id
|
|
|
|
|
|
+ params['T_product_id'] = project_id
|
|
}
|
|
}
|
|
const res: any = await Storehouse_Stock_Detail_Excel(params)
|
|
const res: any = await Storehouse_Stock_Detail_Excel(params)
|
|
if (res.Code === 200) {
|
|
if (res.Code === 200) {
|
|
@@ -103,12 +104,6 @@ const confirmExpor = async (project_id?: string) => {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
-// 拿到仓库列表
|
|
|
|
-interface ItemType {
|
|
|
|
- T_name: string
|
|
|
|
- Id: number
|
|
|
|
-}
|
|
|
|
-const depotOptions = ref<ItemType[]>([])
|
|
|
|
const classOptions = ref<any[]>([])
|
|
const classOptions = ref<any[]>([])
|
|
const modelOptions = ref<any[]>([])
|
|
const modelOptions = ref<any[]>([])
|
|
// 获取产品分类
|
|
// 获取产品分类
|
|
@@ -117,18 +112,6 @@ const getProductClassList = async () => {
|
|
classOptions.value = res.Data.Data
|
|
classOptions.value = res.Data.Data
|
|
}
|
|
}
|
|
/**
|
|
/**
|
|
- * 获取仓库列表
|
|
|
|
- */
|
|
|
|
-const getDepotList = async () => {
|
|
|
|
- if (globalStore.GET_depotList.length) {
|
|
|
|
- depotOptions.value = globalStore.GET_depotList
|
|
|
|
- return
|
|
|
|
- }
|
|
|
|
- const res: any = await Storehouse_Depot_List({ User_tokey: globalStore.GET_User_tokey, page: 1, page_z: 999 })
|
|
|
|
- depotOptions.value = res.Data.Data
|
|
|
|
- globalStore.SET_depotList(depotOptions.value)
|
|
|
|
-}
|
|
|
|
-/**
|
|
|
|
* 模糊搜索名称
|
|
* 模糊搜索名称
|
|
* @param str 名称字符串
|
|
* @param str 名称字符串
|
|
*/
|
|
*/
|
|
@@ -194,94 +177,124 @@ const dateDetailChange = (str: string[]) => {
|
|
TableDetailRef.value?.searchTable()
|
|
TableDetailRef.value?.searchTable()
|
|
}
|
|
}
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
- getDepotList()
|
|
|
|
getProductClassList()
|
|
getProductClassList()
|
|
|
|
|
|
T_date.value = [dayJs().startOf('year').format('YYYY-MM-DD'), dayJs().format('YYYY-MM-DD')]
|
|
T_date.value = [dayJs().startOf('year').format('YYYY-MM-DD'), dayJs().format('YYYY-MM-DD')]
|
|
T_date_export.value = [...T_date.value]
|
|
T_date_export.value = [...T_date.value]
|
|
})
|
|
})
|
|
|
|
+
|
|
|
|
+const getSalaryParams = (row: any) => {
|
|
|
|
+ userInfo.value.Id = ''
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ userInfo.value = { ...row }
|
|
|
|
+ initParam.T_depot_id = userInfo.value.Id
|
|
|
|
+ }, 100)
|
|
|
|
+}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<template>
|
|
<template>
|
|
<div class="inventory-statistics">
|
|
<div class="inventory-statistics">
|
|
- <TableBase
|
|
|
|
- ref="TableRef"
|
|
|
|
- :columns="columns"
|
|
|
|
- :requestApi="Storehouse_Stock_List"
|
|
|
|
- :initParam="initParam"
|
|
|
|
- :dataCallback="dataCallback"
|
|
|
|
|
|
+ <div style="width: 290px" class="inventory-table">
|
|
|
|
+ <TableBase
|
|
|
|
+ ref="TableRef"
|
|
|
|
+ :columns="[{ prop: 'T_name', label: '仓库名称' }]"
|
|
|
|
+ :requestApi="Storehouse_Depot_List"
|
|
|
|
+ :initParam="{ User_tokey: globalStore.GET_User_tokey }"
|
|
|
|
+ layout="prev, pager, next"
|
|
|
|
+ :rowClick="getSalaryParams"
|
|
|
|
+ :tableRowClassName="tableRowClassNameHandle"
|
|
|
|
+ >
|
|
|
|
+ <template #table-header>
|
|
|
|
+ <h3 class="title">仓库列表</h3>
|
|
|
|
+ </template>
|
|
|
|
+ </TableBase>
|
|
|
|
+ </div>
|
|
|
|
+ <transition
|
|
|
|
+ leave-active-class="animate__animated animate__fadeOutRight"
|
|
|
|
+ enter-active-class="animate__animated animate__fadeInLeft"
|
|
>
|
|
>
|
|
- <template #table-header>
|
|
|
|
- <div class="head-search" :class="searchShow ? 'active' : ''">
|
|
|
|
- <el-form :model="initParam" class="result-form" label-width="100px">
|
|
|
|
- <el-row>
|
|
|
|
- <el-col :span="6"
|
|
|
|
- ><el-form-item label="产品分类" :inline-message="true">
|
|
|
|
- <el-select v-model="initParam.T_product_class" class="w-50 m-2" clearable placeholder="请选择分类~">
|
|
|
|
- <el-option v-for="item in classOptions" :key="item.Id" :label="item.T_name" :value="item.Id" />
|
|
|
|
- </el-select> </el-form-item
|
|
|
|
- ></el-col>
|
|
|
|
- <el-col :span="6"
|
|
|
|
- ><el-form-item label="产品名称">
|
|
|
|
- <el-autocomplete
|
|
|
|
- v-model="initParam.T_product_name"
|
|
|
|
- clearable
|
|
|
|
- :fetch-suggestions="querySearchAsync"
|
|
|
|
- placeholder="按产品名称搜索"
|
|
|
|
- :debounce="2000"
|
|
|
|
- :trigger-on-focus="false"
|
|
|
|
- @select="handleSelect"
|
|
|
|
- /> </el-form-item
|
|
|
|
- ></el-col>
|
|
|
|
- <el-col :span="6"
|
|
|
|
- ><el-form-item label="产品型号">
|
|
|
|
- <el-select v-model="initParam.T_product_model" clearable placeholder="请选择型号~">
|
|
|
|
- <el-option v-for="item in modelOptions" :key="item.index" :label="item.value" :value="item.value" />
|
|
|
|
- </el-select> </el-form-item
|
|
|
|
- ></el-col>
|
|
|
|
- <el-col :span="6">
|
|
|
|
- <el-button :icon="searchShow ? ArrowUpBold : ArrowDownBold" @click="searchShowHandle" />
|
|
|
|
- <el-button type="primary" @click="searchHandle">搜索</el-button>
|
|
|
|
- <el-popover :visible="visible" placement="bottom" :width="400" trigger="click">
|
|
|
|
- <template #reference>
|
|
|
|
- <el-button type="success" @click="exportExcel">导出</el-button>
|
|
|
|
- </template>
|
|
|
|
- <el-date-picker
|
|
|
|
- v-model="T_date_export"
|
|
|
|
- type="daterange"
|
|
|
|
- range-separator="~"
|
|
|
|
- start-placeholder="开始时间"
|
|
|
|
- end-placeholder="结束时间"
|
|
|
|
- format="YYYY-MM-DD"
|
|
|
|
- value-format="YYYY-MM-DD"
|
|
|
|
- />
|
|
|
|
- <div class="export-popover">
|
|
|
|
- <el-button size="small" @click="visible = false">取消</el-button>
|
|
|
|
- <el-button size="small" type="primary" @click="confirmExpor">确认</el-button>
|
|
|
|
- </div>
|
|
|
|
- </el-popover>
|
|
|
|
- </el-col>
|
|
|
|
- </el-row>
|
|
|
|
- <el-row class="search-bottom">
|
|
|
|
- <el-col :span="6"
|
|
|
|
- ><el-form-item label="仓库列表" :inline-message="true">
|
|
|
|
- <el-select v-model="initParam.T_depot_id" class="w-50 m-2" clearable placeholder="请选择分类~">
|
|
|
|
- <el-option v-for="item in depotOptions" :key="item.Id" :label="item.T_name" :value="item.Id" />
|
|
|
|
- </el-select> </el-form-item
|
|
|
|
- ></el-col>
|
|
|
|
- </el-row>
|
|
|
|
- </el-form>
|
|
|
|
- </div>
|
|
|
|
- </template>
|
|
|
|
- <template #T_product_img="{ row }">
|
|
|
|
- <ImageCom :src="row.T_product_img" />
|
|
|
|
- </template>
|
|
|
|
- <template #right="{ row }">
|
|
|
|
- <el-button link type="primary" size="small" :icon="List" @click="previewDetail(row.T_product_id)"
|
|
|
|
- >明细</el-button
|
|
|
|
|
|
+ <div class="project-container" v-if="userInfo.Id">
|
|
|
|
+ <TableBase
|
|
|
|
+ ref="TableRef"
|
|
|
|
+ :columns="columns"
|
|
|
|
+ :requestApi="Storehouse_Stock_List"
|
|
|
|
+ :initParam="initParam"
|
|
|
|
+ :dataCallback="dataCallback"
|
|
>
|
|
>
|
|
- </template>
|
|
|
|
- </TableBase>
|
|
|
|
|
|
+ <template #table-header>
|
|
|
|
+ <div class="head-search active">
|
|
|
|
+ <el-form :model="initParam" class="result-form" label-width="100px">
|
|
|
|
+ <el-row>
|
|
|
|
+ <el-col :span="12"
|
|
|
|
+ ><el-form-item label="产品分类" :inline-message="true">
|
|
|
|
+ <el-select v-model="initParam.T_product_class" clearable placeholder="请选择分类~" class="w-50">
|
|
|
|
+ <el-option v-for="item in classOptions" :key="item.Id" :label="item.T_name" :value="item.Id" />
|
|
|
|
+ </el-select> </el-form-item
|
|
|
|
+ ></el-col>
|
|
|
|
+ <el-col :span="12"
|
|
|
|
+ ><el-form-item label="产品名称">
|
|
|
|
+ <el-autocomplete
|
|
|
|
+ class="w-50"
|
|
|
|
+ v-model="initParam.T_product_name"
|
|
|
|
+ clearable
|
|
|
|
+ :fetch-suggestions="querySearchAsync"
|
|
|
|
+ placeholder="按产品名称搜索"
|
|
|
|
+ :debounce="2000"
|
|
|
|
+ :trigger-on-focus="false"
|
|
|
|
+ @select="handleSelect"
|
|
|
|
+ /> </el-form-item
|
|
|
|
+ ></el-col>
|
|
|
|
+ </el-row>
|
|
|
|
+ <el-row class="search-bottom">
|
|
|
|
+ <el-col :span="12">
|
|
|
|
+ <el-form-item label="产品型号">
|
|
|
|
+ <el-select v-model="initParam.T_product_model" clearable placeholder="请选择型号~" class="w-50">
|
|
|
|
+ <el-option
|
|
|
|
+ v-for="item in modelOptions"
|
|
|
|
+ :key="item.index"
|
|
|
|
+ :label="item.value"
|
|
|
|
+ :value="item.value"
|
|
|
|
+ />
|
|
|
|
+ </el-select>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :span="6" :offset="6">
|
|
|
|
+ <el-button type="primary" @click="searchHandle">搜索</el-button>
|
|
|
|
+ <el-popover :visible="visible" placement="bottom" :width="400" trigger="click">
|
|
|
|
+ <template #reference>
|
|
|
|
+ <el-button type="success" @click="exportExcel">导出</el-button>
|
|
|
|
+ </template>
|
|
|
|
+ <el-date-picker
|
|
|
|
+ v-model="T_date_export"
|
|
|
|
+ type="daterange"
|
|
|
|
+ range-separator="~"
|
|
|
|
+ start-placeholder="开始时间"
|
|
|
|
+ end-placeholder="结束时间"
|
|
|
|
+ format="YYYY-MM-DD"
|
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
|
+ />
|
|
|
|
+ <div class="export-popover">
|
|
|
|
+ <el-button size="small" @click="visible = false">取消</el-button>
|
|
|
|
+ <el-button size="small" type="primary" @click="confirmExpor">确认</el-button>
|
|
|
|
+ </div>
|
|
|
|
+ </el-popover>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-row>
|
|
|
|
+ </el-form>
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ <template #T_product_img="{ row }">
|
|
|
|
+ <ImageCom :src="row.T_product_img" />
|
|
|
|
+ </template>
|
|
|
|
+ <template #right="{ row }">
|
|
|
|
+ <el-button link type="primary" size="small" :icon="List" @click="previewDetail(row.T_product_id)"
|
|
|
|
+ >明细</el-button
|
|
|
|
+ >
|
|
|
|
+ </template>
|
|
|
|
+ </TableBase>
|
|
|
|
+ </div>
|
|
|
|
+ </transition>
|
|
|
|
+
|
|
<Drawer ref="DrawerRef" :handleClose="callbackDrawer" size="80%">
|
|
<Drawer ref="DrawerRef" :handleClose="callbackDrawer" size="80%">
|
|
<template #header="{ params }">
|
|
<template #header="{ params }">
|
|
<h4 :id="params.titleId" :class="params.titleClass">库存明细</h4>
|
|
<h4 :id="params.titleId" :class="params.titleClass">库存明细</h4>
|
|
@@ -333,14 +346,32 @@ onMounted(() => {
|
|
:deep(.el-drawer__header) {
|
|
:deep(.el-drawer__header) {
|
|
margin-bottom: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
-:deep(.table-header) {
|
|
|
|
- border: none;
|
|
|
|
-}
|
|
|
|
-:deep(.card) {
|
|
|
|
- border: none;
|
|
|
|
-}
|
|
|
|
.inventory-statistics {
|
|
.inventory-statistics {
|
|
- @include f-direction;
|
|
|
|
|
|
+ height: 100%;
|
|
|
|
+ display: flex;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ .title {
|
|
|
|
+ width: 100%;
|
|
|
|
+ text-align: center;
|
|
|
|
+ line-height: 1.7em;
|
|
|
|
+ font-size: 20px;
|
|
|
|
+ color: #707b84;
|
|
|
|
+ }
|
|
|
|
+ :deep(.table-header),
|
|
|
|
+ :deep(.card) {
|
|
|
|
+ margin: 0;
|
|
|
|
+ border-radius: 8px;
|
|
|
|
+ }
|
|
|
|
+ .inventory-table {
|
|
|
|
+ @include f-direction;
|
|
|
|
+ z-index: 1;
|
|
|
|
+ }
|
|
|
|
+ .project-container {
|
|
|
|
+ @include f-direction;
|
|
|
|
+ z-index: 0;
|
|
|
|
+ margin-left: 12px;
|
|
|
|
+ width: calc(100% - 290px);
|
|
|
|
+ }
|
|
.head-search {
|
|
.head-search {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 33px;
|
|
height: 33px;
|
|
@@ -356,5 +387,8 @@ onMounted(() => {
|
|
.head-search.active {
|
|
.head-search.active {
|
|
height: 85px;
|
|
height: 85px;
|
|
}
|
|
}
|
|
|
|
+ .w-50 {
|
|
|
|
+ flex: 0 0 50%;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|