@ -1,22 +1,20 @@
< template >
< template >
< div class = "p-2" >
< div class = "p-2" >
< transition :enter-active-class = "proxy?.animate.searchAnimate.enter" :leave-active-class = "proxy?.animate.searchAnimate.leave" >
< transition :enter-active-class = "proxy?.animate.searchAnimate.enter" :leave-active-class = "proxy?.animate.searchAnimate.leave" >
< div v-show = "showSearch" class= "mb-[10px]">
< div class = "mb-[10px]" >
< el-card shadow = "hover" >
< el-card shadow = "hover" >
< el-form ref = "queryFormRef" :model = "queryParams" :inline = "true" >
< el-form ref = "queryFormRef" :model = "queryParams" :inline = "true" >
< el-form-item label = "材料名称" prop = "materialsName" >
< el-form-item label = "材料名称" prop = "materialsName" >
< el-input v-model = "queryParams.materialsName" placeholder="请输入材料名称" clearable @keyup.enter="handleQuery" / >
< el-input v-model = "queryParams.materialsName" placeholder="请输入材料名称" clearable @keyup.enter="handleQuery" / >
< / el-form-item >
< / el-form-item >
< el-form-item >
< el-form-item >
< el-button type = "primary" v-hasPermi = "['materials:materialsInventory:list']" icon= "Search" @click="handleQuery"> 搜索 < / el -button >
< el-button type = "primary" icon = "Search" @click ="handleQuery"> 搜索 < / el -button >
< el-button icon = "Refresh" @click ="resetQuery" > 重置 < / el -button >
< el-button icon = "Refresh" v-hasPermi = "['materials:materialsInventory:list']" @click="resetQuery" > 重置 < / el -button >
< / el-form-item >
< / el-form-item >
< / el-form >
< / el-form >
< / el-card >
< / el-card >
< / div >
< / div >
< / transition >
< / transition >
< el-card shadow = "never" >
< el-card shadow = "never" >
< template # header >
< template # header >
< el-row :gutter = "10" class = "mb8" >
< el-row :gutter = "10" class = "mb8" >
@ -25,275 +23,179 @@
导出
导出
< / el -button >
< / el -button >
< / el-col >
< / el-col >
< right-toolbar v -model :showSearch = "showSearch" @queryTable ="getList" > < / right -toolbar >
< right-toolbar v -model :showSearch = "showSearch" @queryTable ="getTable List" > < / right -toolbar >
< / el-row >
< / el-row >
< / template >
< / template >
< el-table :data = "tableData" row -key = " id " border default -expand -all class = "custom-table" >
< el-table v-loading = "loading" :data="materialsInventoryList" @expand-change="handleExpandChange" >
< el-table-column prop = "materialsName" label = "物资名称" align = "left" class -name = " inventory -register " / >
< el -table -column type = "expand" >
< el-table-column prop = "quantityCount" label = "计划数量" align = "center" class -name = " inventory -register " / >
< template # default = "props ">
< el-table-column label = "入库登记" align = "center" class -name = " inventory -register ">
< div style = "margin-left: 60px" >
< el-table-column prop = "supplier" label = "供货单位" align = "center" class -name = " inventory -register " / >
< el-table :data = "materialsUseRecordList" border v-loading = "loadingChild" >
< el-table-column prop = "number" label = "数量" align = "center" class -name = " inventory -register " / >
< el -table -column label = "序号 " align = "center" typ e ="index" width = "60 " / >
< el-table-column prop = "operator" label= "签收人 " align = "center" class -nam e =" inventory -register " / >
< el-table-column label = "使用数量 " align = "center" prop = "useNumber " / >
< el-table-column prop = "enterTime" label= "日期 " align = "center" class -name = " inventory -register " / >
< el-table-column label = "剩余量" align = "center" prop = "residueNumber" / >
< el-table-column label = "使用部位" align = "center" prop = "usePart" / >
< el-table-column label = "备注" align = "center" prop = "remark" / >
< / el-table >
< pagination
v-show = "totalChild > 0"
:total = "totalChild"
v -model :page = "queryParamsChild.pageNum"
v -model :limit = "queryParamsChild.pageSize"
@pagination ="getListChild"
/ >
< / div >
< / template >
< / el-table-column >
< / el-table-column >
<!-- < el-table-column type = "selection" width = "55" align = "center" / > -- >
< el-table-column label = "出库登记" align = "center" class -name = " out -register " >
< el-table-column label = "序号" type = "index" width = "60" align = "cen ter" / >
< el-table-column prop = "recipient" label = "接受单位" align = "center" class -name = " out -regis ter " / >
< el-table-column label = "物资名称 " align = "center" prop = "materialsName " / >
< el-table-column prop = "outNumber" label= "数量 " align = "center" class -name = " out -register " / >
< el-table-column label = "计划数量 " align = "center" prop = "quantityCount " / >
< el-table-column prop = "outOperator" label= "出库人 " align = "center" class -name = " out -register " / >
< el-table-column label = "入库登记 " align = "center" >
< el-table-column prop = "shipper" label= "领用人 " align = "center" class -name = " out -register " / >
< el-table-column label = "数量 " align = "center" prop = "number" >
< el-table-column prop = "createTime" label= "领用日期 " align = "center" class -name = " out -register " / >
< template # default = "scope" >
< span v-if = "scope.row.outPut === '0'" > {{ scope.row.number }} < / span >
< span v-else > < / span >
< / template >
< / el -table -column >
< el-table-column label = "签收人" align = "center" prop = "operator" >
< template # default = "scope" >
< span v-if = "scope.row.outPut === '0'" > {{ scope.row.operator }} < / span >
< span v-else > < / span >
< / template >
< / el -table -column >
< el-table-column label = "日期" align = "center" prop = "outPutTime" width = "160" >
< template # default = "scope" >
< span v-if = "scope.row.outPut === '0'" > {{ parseTime ( scope.row.outPutTime , ' { y } 年 { m } 月 { d } 日 ' ) }} < / span >
< span v-else > < / span >
< / template >
< / el -table -column >
< / el-table-column >
< / el-table-column >
< el-table-column label = "出库 登记" align = "center" >
< el-table-column label = "到货剩余 登记" align = "center" class -name = " out -register " >
< el-table-column label = "交接单位 " align = "center" prop = "recipient " / >
< el-table-column prop = "residue" label= "剩余量 " align = "center" class -name = " out -register " / >
< el-table-column label = "使用部位 " align = "center" prop = "usePart " / >
< el-table-column prop = "disposition" label= "处理方式 " align = "center" class -name = " out -register " / >
< el-table-column label = "数量" align = "center" prop = "number" >
< template # default = "scope" >
< span v-if = "scope.row.outPut === '1'" > {{ scope.row.number }} < / span >
< span v-else > < / span >
< / template >
< / el -table -column >
< el-table-column label = "出库人" align = "center" prop = "operator" >
< template # default = "scope" >
< span v-if = "scope.row.outPut === '1'" > {{ scope.row.operator }} < / span >
< span v-else > < / span >
< / template >
< / el -table -column >
< el-table-column label = "领用人" align = "center" prop = "shipper" / >
< el-table-column label = "日期" align = "center" prop = "outPutTime" width = "160" >
< template # default = "scope" >
< span v-if = "scope.row.outPut === '1'" > {{ parseTime ( scope.row.outPutTime , ' { y } 年 { m } 月 { d } 日 ' ) }} < / span >
< span v-else > < / span >
< / template >
< / el -table -column >
< / el-table-column >
< / el-table-column >
< el-table-column label = "剩余处理 " align = "center" >
< el-table-column label = "使用登记 " align = "center" class -name = " use -register " >
< el-table-column label = "剩余量 " align = "center" prop = "residue " / >
< el-table-column prop = "usePart" label= "使用部位 " align = "center" class -name = " use -register " / >
< el-table-column label = "处理方式 " align = "center" prop = "disposition " / >
< el-table-column prop = "useNumber" label= "使用数量 " align = "center" class -name = " use -register " / >
< el-table-column prop = "useTime" label = "使用日期" align = "center" class -name = " use -register " / >
< el-table-column prop = "residueNumber" label = "剩余量" align = "center" class -name = " use -register " / >
< / el-table-column >
< / el-table-column >
< el-table-column label = "备注" align = "center" prop = "remark" / >
< el-table-column label = "备注" align = "center" prop = "remark" class -name = " use -register " / >
<!-- < el-table-column label = "操作" align = "center" class -name = " small -padding fixed -width " >
< template # default = "scope" >
< el-space wrap >
< el-button link type = "success" icon = "Edit" @click ="handleUpdate(scope.row)" v-hasPermi = "['materials:materialsInventory:edit']" >
修改
< / el -button >
< el-button link type = "danger" icon = "Delete" @click ="handleDelete(scope.row)" v-hasPermi = "['materials:materialsInventory:remove']" >
删除
< / el -button >
< / el-space >
< / template >
< / el-table-column > -- >
< / el-table >
< / el-table >
< pagination v-show = "total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" / >
< pagination
v-show = "total > 0"
:total = "total"
v -model :page = "queryParams.pageNum"
v -model :limit = "queryParams.pageSize"
@pagination ="getTableList"
/ >
< / el-card >
< / el-card >
<!-- 添加或修改材料出 / 入库对话框 -- >
< el-dialog :title = "dialog.title" v-model = "dialog.visible" width="500px" append -to -body >
< el-form ref = "materialsInventoryFormRef" :model = "form" :rules = "rules" label -width = " 120px " >
< el-form-item label = "出入库状态" prop = "outPut" >
< el-select v-model = "form.outPut" clearable placeholder="请输入出入库状态" >
< el -option v-for = "item in out_put_type" :key="item.value" :label="item.label" :value="item.value" / >
< / el-select >
< / el-form-item >
< el-form-item label = "出/入库的数量" prop = "number" >
< el-input v-model = "form.number" placeholder="请输入出/入库的数量" / >
< / el-form-item >
< el-form-item label = "出/入库操作时间" prop = "outPutTime" >
< el-date-picker clearable v-model = "form.outPutTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择出/入库操作时间" >
< / el -date -picker >
< / el-form-item >
< el-form-item label = "剩余库存数量" prop = "residue" >
< el-input v-model = "form.residue" placeholder="请输入剩余库存数量" / >
< / el-form-item >
< el-form-item label = "操作人" prop = "operator" >
< el-input v-model = "form.operator" placeholder="请输入操作人" / >
< / el-form-item >
< el-form-item label = "材料出入证明" prop = "path" >
< el-input v-model = "form.path" type="textarea" placeholder="请输入内容" / >
< / el-form-item >
< el-form-item label = "处理方式" prop = "disposition" >
< el-input v-model = "form.disposition" placeholder="请输入处理方式" / >
< / el-form-item >
< el-form-item label = "交接单位" prop = "recipient" >
< el-input v-model = "form.recipient" placeholder="请输入交接单位" / >
< / el-form-item >
< el-form-item label = "领用人" prop = "shipper" >
< el-input v-model = "form.shipper" placeholder="请输入领用人" / >
< / el-form-item >
< el-form-item label = "备注" prop = "remark" >
< el-input v-model = "form.remark" placeholder="请输入备注" / >
< / el-form-item >
< / el-form >
< template # footer >
< div class = "dialog-footer" >
< el-button :loading = "buttonLoading" type = "primary" @click ="submitForm" > 确 定 < / el -button >
< el-button @click ="cancel" > 取 消 < / el -button >
< / div >
< / template >
< / el-dialog >
< / div >
< / div >
< / template >
< / template >
< script setup name = "MaterialsInventory" lang= "ts" >
< script setup lang = "ts" >
import {
import useUserStore from '@/store/modules/user' ;
addM aterialsInventory ,
import { getLedgerList } from '@/api/materials/m aterialsInventory' ;
delMaterialsInventory ,
getMaterialsInventory ,
listMaterialsInventory ,
updateMaterialsInventory
} from '@/api/materials/materialsInventory' ;
import { MaterialsInventoryForm , MaterialsInventoryQuery , MaterialsInventoryVO } from '@/api/materials/materialsInventory/types' ;
import { useUserStoreHook } from '@/store/modules/user' ;
import { listMaterialsUseRecord } from '@/api/materials/materialsUseRecord' ;
const { proxy } = getCurrentInstance ( ) as ComponentInternalInstance ;
const { out _put _type } = toRefs < any > ( proxy ? . useDict ( 'out_put_type' ) ) ;
// 获取用户 store
const { proxy } = getCurrentInstance ( ) as any ;
const userStore = useUserStoreHook ( ) ;
const userStore = useUserStore ( ) ;
// 从 store 中获取项目列表和当前选中的项目
const currentProject = computed ( ( ) => userStore . selectedProject ) ;
const currentProject = computed ( ( ) => userStore . selectedProject ) ;
const materialsInventoryList = ref < MaterialsInventoryVO [ ] > ( [ ] ) ;
const queryFormRef = ref ( ) ;
const buttonLoading = ref ( false ) ;
const queryParams = ref ( {
const loading = ref ( true ) ;
materialsName : '' ,
const showSearch = ref ( true ) ;
pageNum : 1 ,
const ids = ref < Array < string | number > > ( [ ] ) ;
pageSize : 10
const single = ref ( true ) ;
} ) ;
const multiple = ref ( true ) ;
const total = ref ( 0 ) ;
const total = ref ( 0 ) ;
const loadingChild = ref ( true ) ;
const tableRef = ref ( ) ;
const totalChild = ref ( 0 ) ;
const showSearch = ref ( true ) ;
const materialsUseRecordList = ref < any [ ] > ( [ ] ) ;
const loading = ref ( false ) ;
const queryFormRef = ref < ElFormInstance > ( ) ;
const tableData = ref ( [ ] ) ;
const materialsInventoryFormRef = ref < ElFormInstance > ( ) ;
//获取列表
const getTableList = async ( ) => {
const dialog = reactive < DialogOption > ( {
const parmas = {
visible : f als e,
... queryParams . v alu e ,
title : ''
projectId : currentProject . value . id
}) ;
} ;
const res = await getLedgerList ( parmas ) ;
const initFormData : MaterialsInventoryForm = {
if ( res . code === 200 ) {
id : undefined ,
const data = restructureData ( res . rows ) ;
materialsId : undefined ,
tableData . value = data ;
projectId : currentProject . value ? . id ,
total . value = res . total ;
outPut : undefined ,
number : undefined ,
outPutTime : undefined ,
residue : undefined ,
operator : undefined ,
path : undefined ,
disposition : undefined ,
recipient : undefined ,
shipper : undefined ,
remark : undefined
} ;
const data = reactive ( {
form : { ... initFormData } ,
queryParams : {
pageNum : 1 ,
pageSize : 10 ,
materialsId : undefined ,
projectId : currentProject . value ? . id ,
outPut : undefined ,
number : undefined ,
outPutTime : undefined ,
residue : undefined ,
operator : undefined ,
path : undefined ,
disposition : undefined ,
recipient : undefined ,
shipper : undefined ,
params : { }
} ,
queryParamsChild : {
pageNum : 1 ,
pageSize : 10 ,
inventoryId : undefined ,
usePart : undefined ,
useNumber : undefined ,
residueNumber : undefined
} ,
rules : {
id : [ { required : true , message : '主键id不能为空' , trigger : 'blur' } ] ,
materialsId : [ { required : true , message : '材料id不能为空' , trigger : 'blur' } ]
}
} ) ;
const { queryParams , form , rules , queryParamsChild } = toRefs ( data ) ;
const materialsOptions = ref ( [ ] ) ;
/** 处理外层表格展开/折叠: 记录当前展开行的inventoryId */
const handleExpandChange = ( row : any ) => {
queryParamsChild . value . inventoryId = row . id ;
getListChild ( ) ;
} ;
/** 查询材料子级登记列表(内层列表) */
const getListChild = async ( ) => {
loadingChild . value = true ;
try {
const res = await listMaterialsUseRecord ( queryParamsChild . value ) ;
materialsUseRecordList . value = res . rows ;
totalChild . value = res . total ;
} finally {
loadingChild . value = false ;
}
}
} ;
} ;
/** 查询材料出/入库列表 */
// 重组数据结构的函数
const getList = async ( ) => {
const restructureData = ( data ) => {
loading . value = true ;
return data . map ( ( item ) => {
const res = await listMaterialsInventory ( queryParams . value ) ;
const newItem : any = {
materialsInventoryList . value = res . rows ;
id : item . id ,
total . value = res . total ;
materialsName : item . materialsName ,
const materialsMap = new Map ( ) ;
quantityCount : item . quantityCount ,
materialsOptions . value = Array . from ( materialsMap . values ( ) ) ;
supplier : item . supplier ,
loading . value = false ;
number : item . number ,
} ;
operator : item . operator ,
enterTime : item . enterTime ,
children : [ ]
} ;
/** 取消按钮 */
if ( item . outList && item . outList . length > 0 ) {
const cancel = ( ) => {
// 处理第一个outList项目
reset ( ) ;
const firstOut = item . outList [ 0 ] ;
dialog . visible = false ;
newItem . recipient = firstOut . recipient ;
} ;
newItem . outNumber = firstOut . number ;
newItem . outOperator = firstOut . operator ;
newItem . shipper = firstOut . shipper ;
newItem . createTime = firstOut . createTime ;
newItem . residue = firstOut . residue ;
newItem . disposition = firstOut . disposition ;
/** 表单重置 */
// 处理第一个outList中的useList
const reset = ( ) => {
if ( firstOut . useList && firstOut . useList . length > 0 ) {
form . value = { ... initFormData } ;
const firstUse = firstOut . useList [ 0 ] ;
materialsInventoryFormRef . value ? . resetFields ( ) ;
newItem . usePart = firstUse . usePart ;
} ;
newItem . useNumber = firstUse . useNumber ;
newItem . useTime = firstUse . createTime ;
newItem . residueNumber = firstUse . residueNumber ;
newItem . remark = firstUse . remark ;
// 将剩余的useList项目添加到children
for ( let i = 1 ; i < firstOut . useList . length ; i ++ ) {
const useItem = firstOut . useList [ i ] ;
newItem . children . push ( {
id : useItem . id ,
usePart : useItem . usePart ,
useNumber : useItem . useNumber ,
useTime : useItem . createTime ,
residueNumber : useItem . residueNumber ,
remark : useItem . remark ,
type : 'use'
} ) ;
}
}
// 处理剩余的outList项目
for ( let i = 1 ; i < item . outList . length ; i ++ ) {
const outItem = item . outList [ i ] ;
const outNode : any = {
id : outItem . id ,
recipient : outItem . recipient ,
outNumber : outItem . number ,
outOperator : outItem . operator ,
shipper : outItem . shipper ,
createTime : outItem . createTime ,
residue : outItem . residue ,
disposition : outItem . disposition ,
type : 'out' ,
children : [ ]
} ;
// 处理当前outList项目中的useList
if ( outItem . useList && outItem . useList . length > 0 ) {
const firstUse = outItem . useList [ 0 ] ;
outNode . usePart = firstUse . usePart ;
outNode . useNumber = firstUse . useNumber ;
outNode . useTime = firstUse . createTime ;
outNode . residueNumber = firstUse . residueNumber ;
outNode . remark = firstUse . remark ;
// 将剩余的useList项目添加到children
for ( let j = 1 ; j < outItem . useList . length ; j ++ ) {
const useItem = outItem . useList [ j ] ;
outNode . children . push ( {
id : useItem . id ,
usePart : useItem . usePart ,
useNumber : useItem . useNumber ,
useTime : useItem . createTime ,
residueNumber : useItem . residueNumber ,
remark : useItem . remark ,
type : 'use'
} ) ;
}
}
newItem . children . push ( outNode ) ;
}
}
return newItem ;
} ) ;
} ;
/** 搜索按钮操作 */
/** 搜索按钮操作 */
const handleQuery = ( ) => {
const handleQuery = ( ) => {
queryParams . value . pageNum = 1 ;
queryParams . value . pageNum = 1 ;
getList ( ) ;
getTable List ( ) ;
} ;
} ;
/** 重置按钮操作 */
/** 重置按钮操作 */
@ -302,75 +204,46 @@ const resetQuery = () => {
handleQuery ( ) ;
handleQuery ( ) ;
} ;
} ;
/** 多选框选中数据 */
//导出
const handleSelectionChange = ( selection : MaterialsInventoryVO [ ] ) => {
ids . value = selection . map ( ( item ) => item . id ) ;
single . value = selection . length != 1 ;
multiple . value = ! selection . length ;
} ;
/** 修改按钮操作 */
const handleUpdate = async ( row ? : MaterialsInventoryVO ) => {
reset ( ) ;
const _id = row ? . id || ids . value [ 0 ] ;
const res = await getMaterialsInventory ( _id ) ;
Object . assign ( form . value , res . data ) ;
dialog . visible = true ;
dialog . title = '修改材料出/入库' ;
} ;
/** 提交按钮 */
const submitForm = ( ) => {
materialsInventoryFormRef . value ? . validate ( async ( valid : boolean ) => {
if ( valid ) {
buttonLoading . value = true ;
form . value . projectId = currentProject . value ? . id ;
if ( form . value . id ) {
await updateMaterialsInventory ( form . value ) . finally ( ( ) => ( buttonLoading . value = false ) ) ;
} else {
await addMaterialsInventory ( form . value ) . finally ( ( ) => ( buttonLoading . value = false ) ) ;
}
proxy ? . $modal . msgSuccess ( '操作成功' ) ;
dialog . visible = false ;
await getList ( ) ;
}
} ) ;
} ;
/** 删除按钮操作 */
const handleDelete = async ( row ? : MaterialsInventoryVO ) => {
const _ids = row ? . id || ids . value ;
await proxy ? . $modal . confirm ( '是否确认删除材料出/入库编号为"' + _ids + '"的数据项?' ) . finally ( ( ) => ( loading . value = false ) ) ;
await delMaterialsInventory ( _ids ) ;
proxy ? . $modal . msgSuccess ( '删除成功' ) ;
await getList ( ) ;
} ;
/** 导出按钮操作 */
const handleExport = ( ) => {
const handleExport = ( ) => {
proxy ? . download (
proxy ? . download (
'materials/materialsInventory /export' ,
'/ materials/materials/export' ,
{
{
... queryParams . value
projectId : currentProject . value ? . id
} ,
} ,
` materialsInventory_ ${ new Date ( ) . getTime ( ) } .xlsx`
` 物资跟踪管理台账 .xlsx`
) ;
) ;
} ;
} ;
//监听项目id刷新数据
const listeningProject = watch (
( ) => currentProject . value ? . id ,
( nid , oid ) => {
queryParams . value . projectId = nid ;
form . value . projectId = nid ;
getList ( ) ;
}
) ;
onUnmounted ( ( ) => {
listeningProject ( ) ;
} ) ;
onMounted ( ( ) => {
onMounted ( ( ) => {
getList ( ) ;
getTable List ( ) ;
} ) ;
} ) ;
< / script >
< / script >
< style lang = "scss" >
/* 关键样式 - 确保选择器有足够优先级 */
. custom - table . el - table _ _body . inventory - register ,
. custom - table . el - table _ _header . inventory - register {
background - color : # f0f9ff ! important ;
}
. custom - table . el - table _ _body . out - register ,
. custom - table . el - table _ _header . out - register {
background - color : # f0fff3 ! important ;
}
. custom - table . el - table _ _body . use - register ,
. custom - table . el - table _ _header . use - register {
background - color : # fffaf0 ! important ;
}
/* 表头样式增强 */
. el - table _ _header th {
background - color : # eef1f6 ;
font - weight : bold ;
}
/* 操作按钮样式 */
. operation - buttons {
margin - bottom : 15 px ;
}
< / style >