@ -1,184 +1,203 @@
< template >
< div class = "min-h-screen bg-gray-50 flex flex-col" >
<!-- 主要内容区 -- >
< main class = "flex-1 p-6" >
<!-- 操作栏 -- >
< div class = "bg-white rounded-lg shadow-sm p-4 mb-6 transition-all duration-300 hover:shadow-md" >
< div class = "flex flex-wrap items-center justify-between gap-4" >
<!-- 操作按钮 -- >
< div class = "flex gap-2" >
< el-button type = "primary" icon = "Plus" @click ="handleAdd"
class = "transition-all duration-200 hover:shadow-md" >
新增
< / el-button >
< el-button icon = "Refresh" @click ="refreshData"
class = "transition-all duration-200 hover:shadow-md" >
刷新
< / el-button >
< / div >
< / div >
< / div >
< div class = "min-h-screen bg-gray-50 flex flex-col" >
<!-- 主要内容区 -- >
< main class = "flex-1 p-6" >
<!-- 操作栏 -- >
< div class = "bg-white rounded-lg shadow-sm p-4 mb-6 transition-all duration-300 hover:shadow-md" >
< div class = "flex flex-wrap items-center justify-between gap-4" >
<!-- 操作按钮 -- >
< div class = "flex gap-2" >
< el-button type = "primary" icon = "Plus" @click ="handleAdd" class = "transition-all duration-200 hover:shadow-md" > 新增 < / el-button >
< el-button icon = "Refresh" @click ="refreshData" class = "transition-all duration-200 hover:shadow-md" > 刷新 < / el-button >
< / div >
< / div >
< / div >
<!-- 数据表格 -- >
< div class = "bg-white rounded-lg shadow-sm overflow-hidden transition-all duration-300 hover:shadow-md" >
< el-table v-loading = "loading" :data="tableData" border stripe
: header -cell -style = " { ' background -color ' : ' # f5f7fa ' , ' font -weight ' : ' bold ' } "
:row-class-name = "tableRowClassName" >
< el-table-column prop = "id" label = "ID" width = "80" align = "center" > < / el-table-column >
< el-table-column prop = "name" label = "材料名称" min -width = " 150 " > < / el-table-column >
< el-table-column prop = "specification" label = "规格" min -width = " 120 " > < / el-table-column >
< el-table-column prop = "supplier" label = "供应商" min -width = " 150 " > < / el-table-column >
< el-table-column prop = "findType" label = "类型" width = "100" align = "center" >
< template # default = "scope" >
< el-tag : type = "scope.row.findType === '1' ? 'success' : 'info'" >
{ { scope . row . findType === '1' ? '采购' : '材料' } }
< / el-tag >
< / template >
< / el-table-column >
< el-table-column prop = "installationQuantity" label = "安装量" width = "100"
align = "center" > < / el-table-column >
< el-table-column prop = "contractSigning" label = "合同签订时间" width = "180" align = "center" >
< template # default = "scope" >
{ { formatDate ( scope . row . contractSigning ) } }
< / template >
< / el-table-column >
< el-table-column prop = "createTime" label = "创建时间" width = "180" align = "center" >
< template # default = "scope" >
{ { formatDate ( scope . row . createTime ) } }
< / template >
< / el-table-column >
< el-table-column label = "操作" width = "240" align = "center" fixed = "right" >
< template # default = "scope" >
< el-button size = "small" icon = "Plus" @click ="handleAddSon(scope.row)"
class = "text-blue-600 hover:text-blue-800 transition-colors" > < / el-button >
< el-button size = "small" icon = "Edit" @click ="handleEdit(scope.row)"
class = "text-blue-600 hover:text-blue-800 transition-colors" > < / el-button >
< el-button size = "small" icon = "View" @click ="jumpRouter(scope.row)"
class = "text-blue-600 hover:text-blue-800 transition-colors" > < / el-button >
< el-button size = "small" icon = "Delete" @click ="handleDelete(scope.row)"
class = "text-red-600 hover:text-red-800 transition-colors" > < / el-button >
< / template >
< / el-table-column >
< / el-table >
<!-- 分页 -- >
< div class = "flex items-center justify-between p-4 border-t" >
< div class = "text-gray-500 text-sm" >
共 { { total } } 条记录 ， 当前显示第 { { ( currentPage - 1 ) * pageSize + 1 } } 至 { { Math . min ( currentPage *
pageSize , total )
} } 条
< / div >
< el-pagination v -model :current-page = "currentPage" v -model :page-size = "pageSize"
: page -sizes = " [ 10 , 20 , 50 , 100 ] " :total = "total" layout = "prev, pager, next, jumper, sizes"
@ size -change = " handleSizeChange " @ current -change = " handleCurrentChange " > < / el-pagination >
< / div >
< / div >
< / main >
<!-- 新增 / 编辑对话框 -- >
< el-dialog v-model = "dialogVisible" :title="dialogType === 'add' ? '新增记录' : '编辑记录'" :width="dialogWidth"
:fullscreen = "isFullscreen" :before-close = "handleDialogClose" >
< el-form ref = "formRef" :model = "formData" :rules = "formRules" label -width = " 120px " class = "space-y-4" >
< el-row :gutter = "20" >
< el-col :span = "12" >
< el-form-item label = "材料名称" prop = "name" >
< el-input v-model = "formData.name" placeholder="请输入材料名称" > < / el -input >
< / el-form-item >
< / el-col >
< el-col :span = "12" >
< el-form-item label = "规格" prop = "specification" >
< el-input v-model = "formData.specification" placeholder="请输入规格" > < / el -input >
< / el-form-item >
< / el-col >
< / el-row >
< el-row :gutter = "20" >
< el-col :span = "12" >
< el-form-item label = "供应商" prop = "supplier" >
< el-input v-model = "formData.supplier" placeholder="请输入供应商" > < / el -input >
< / el-form-item >
< / el-col >
< el-col :span = "12" >
< el-form-item label = "运算周期(天)" prop = "executionCycle" >
< el-input v -model .number = " formData.executionCycle " placeholder = "请输入运算周期"
type = "number" > < / el-input >
< / el-form-item >
< / el-col >
< / el-row >
< el-row :gutter = "20" >
< el-col :span = "12" >
< el-form-item label = "安装量" prop = "installationQuantity" >
< el-input v-model = "formData.installationQuantity" placeholder="请输入安装量" > < / el -input >
< / el-form-item >
< / el-col >
< el-col :span = "12" >
< el-form-item label = "安装比例" prop = "installationRatio" >
< el-input v-model = "formData.installationRatio" placeholder="请输入安装比例" suffix="%" > < / el -input >
< / el-form-item >
< / el-col >
< / el-row >
< el-row :gutter = "20" >
< el-col :span = "12" >
< el-form-item label = "合同签订时间" prop = "contractSigning" >
< el-date-picker v-model = "formData.contractSigning" type="datetime" placeholder="选择合同签订时间"
value -format = " YYYY -MM -DD HH : mm : ss " > < / el-date-picker >
< / el-form-item >
< / el-col >
< el-col :span = "12" >
< el-form-item label = "生产周期(天)" prop = "productionPhase" >
< el-input v -model .number = " formData.productionPhase " placeholder = "请输入生产周期"
type = "number" > < / el-input >
< / el-form-item >
< / el-col >
< / el-row >
< el-row :gutter = "20" >
< el-col :span = "24" >
< el-form-item label = "供货要求" prop = "supplyRequirements" >
< el-input v-model = "formData.supplyRequirements" placeholder="请输入供货要求" type="textarea"
rows = "3" > < / el-input >
< / el-form-item >
< / el-col >
< / el-row >
< el-row :gutter = "20" >
< el-col :span = "24" >
< el-form-item label = "备注" prop = "remark" >
< el-input v-model = "formData.remark" placeholder="请输入备注信息" type="textarea"
rows = "3" > < / el-input >
< / el-form-item >
< / el-col >
< / el-row >
< / el-form >
< template # footer >
< div class = "flex justify-end gap-2" >
< el-button @click ="dialogVisible = false" > 取消 < / el -button >
< el-button type = "primary" @click ="handleSave" :loading = "saveLoading" >
保存
< / el-button >
< / div >
<!-- 数据表格 -- >
< div class = "bg-white rounded-lg shadow-sm overflow-hidden transition-all duration-300 hover:shadow-md" >
< el-table
v-loading = "loading"
:data = "tableData"
border
stripe
: header -cell -style = " { ' background -color ' : ' # f5f7fa ' , ' font -weight ' : ' bold ' } "
:row-class-name = "tableRowClassName"
>
< el-table-column prop = "id" label = "ID" width = "80" align = "center" > < / el-table-column >
< el-table-column prop = "name" label = "材料名称" min -width = " 150 " > < / el-table-column >
< el-table-column prop = "specification" label = "规格" min -width = " 120 " > < / el-table-column >
< el-table-column prop = "supplier" label = "供应商" min -width = " 150 " > < / el-table-column >
< el-table-column prop = "findType" label = "类型" width = "100" align = "center" >
< template # default = "scope" >
< el-tag : type = "scope.row.findType === '1' ? 'success' : 'info'" >
{ { scope . row . findType === '1' ? '采购' : '材料' } }
< / el-tag >
< / template >
< / el-dialog >
<!-- 删除确认对话框 --
< el-dialog v-model = "deleteDialogVisible" title="确认删除" width="300px" :show-close="false" >
< div class = "text-center py-4 ">
< el-icon class = "text-orange-500 text-4xl mb-3" >
< WarningFilled / >
< / el-icon >
< p > 确定要删除这条记录吗 ？ < / p >
< p class = "text-gray-500 text-sm mt-2" > 此操作不可撤销 ， 请谨慎操作 < / p >
< / div >
< template # footer >
< div class = "flex justify-center gap-2" >
< el-button @click ="deleteDialogVisible = false" > 取消 < / el -button >
< el-button type = "danger" @click ="confirmDelete" :loading = "deleteLoading" >
确认删除
< / el-button >
< / div >
< / el-table-column >
< el-table-column prop = "installationQuantity" label = "安装量" width = "100" align = "center" > < / el-table-column
< el-table-column prop = "contractSigning" label = "合同签订时间" width = "180" align = "center" >
< template # default = "scope ">
{ { formatDate ( scope . row . contractSigning ) } }
< / template >
< / el-dialog >
< / div >
< / el-table-column >
< el-table-column prop = "createTime" label = "创建时间" width = "180" align = "center" >
< template # default = "scope" >
{ { formatDate ( scope . row . createTime ) } }
< / template >
< / el-table-column >
< el-table-column label = "操作" width = "240" align = "center" fixed = "right" >
< template # default = "scope" >
< el-button
size = "small"
icon = "Plus"
@click ="handleAddSon(scope.row)"
class = "text-blue-600 hover:text-blue-800 transition-colors"
> < / el-button >
< el-button
size = "small"
icon = "Edit"
@click ="handleEdit(scope.row)"
class = "text-blue-600 hover:text-blue-800 transition-colors"
> < / el-button >
< el-button
size = "small"
icon = "View"
@click ="jumpRouter(scope.row)"
class = "text-blue-600 hover:text-blue-800 transition-colors"
> < / el-button >
< el-button
size = "small"
icon = "Delete"
@click ="handleDelete(scope.row)"
class = "text-red-600 hover:text-red-800 transition-colors"
> < / el-button >
< / template >
< / el-table-column >
< / el-table >
<!-- 分页 -- >
< div class = "flex items-center justify-between p-4 border-t" >
< div class = "text-gray-500 text-sm" >
共 { { total } } 条记录 ， 当前显示第 { { ( currentPage - 1 ) * pageSize + 1 } } 至 { { Math . min ( currentPage * pageSize , total ) } } 条
< / div >
< el-pagination
v -model :current-page = "currentPage"
v -model :page-size = "pageSize"
: page -sizes = " [ 10 , 20 , 50 , 100 ] "
:total = "total"
layout = "prev, pager, next, jumper, sizes"
@ size -change = " handleSizeChange "
@ current -change = " handleCurrentChange "
> < / el-pagination >
< / div >
< / div >
< / main >
<!-- 新增 / 编辑对话框 -- >
< el-dialog
v-model = "dialogVisible"
: title = "dialogType === 'add' ? '新增记录' : '编辑记录'"
:width = "dialogWidth"
:fullscreen = "isFullscreen"
:before-close = "handleDialogClose"
>
< el-form ref = "formRef" :model = "formData" :rules = "formRules" label -width = " 120px " class = "space-y-4" >
< el-row :gutter = "20" >
< el-col :span = "12" >
< el-form-item label = "材料名称" prop = "name" >
< el-input v-model = "formData.name" placeholder="请输入材料名称" > < / el -input >
< / el-form-item >
< / el-col >
< el-col :span = "12" >
< el-form-item label = "规格" prop = "specification" >
< el-input v-model = "formData.specification" placeholder="请输入规格" > < / el -input >
< / el-form-item >
< / el-col >
< / el-row >
< el-row :gutter = "20" >
< el-col :span = "12" >
< el-form-item label = "供应商" prop = "supplier" >
< el-input v-model = "formData.supplier" placeholder="请输入供应商" > < / el -input >
< / el-form-item >
< / el-col >
< el-col :span = "12" >
< el-form-item label = "运算周期(天)" prop = "executionCycle" >
< el-input v -model .number = " formData.executionCycle " placeholder = "请输入运算周期" type = "number" > < / el-input >
< / el-form-item >
< / el-col >
< / el-row >
< el-row :gutter = "20" >
< el-col :span = "12" >
< el-form-item label = "安装量" prop = "installationQuantity" >
< el-input v-model = "formData.installationQuantity" placeholder="请输入安装量" > < / el -input >
< / el-form-item >
< / el-col >
< el-col :span = "12" >
< el-form-item label = "安装比例" prop = "installationRatio" >
< el-input v-model = "formData.installationRatio" placeholder="请输入安装比例" suffix="%" > < / el -input >
< / el-form-item >
< / el-col >
< / el-row >
< el-row :gutter = "20" >
< el-col :span = "12" >
< el-form-item label = "合同签订时间" prop = "contractSigning" >
< el-date-picker
v-model = "formData.contractSigning"
type = "datetime"
placeholder = "选择合同签订时间"
value -format = " YYYY -MM -DD HH : mm : ss "
> < / el-date-picker >
< / el-form-item >
< / el-col >
< el-col :span = "12" >
< el-form-item label = "生产周期(天)" prop = "productionPhase" >
< el-input v -model .number = " formData.productionPhase " placeholder = "请输入生产周期" type = "number" > < / el-input >
< / el-form-item >
< / el-col >
< / el-row >
< el-row :gutter = "20" >
< el-col :span = "24" >
< el-form-item label = "供货要求" prop = "supplyRequirements" >
< el-input v-model = "formData.supplyRequirements" placeholder="请输入供货要求" type="textarea" rows="3" > < / el -input >
< / el-form-item >
< / el-col >
< / el-row >
< el-row :gutter = "20" >
< el-col :span = "24" >
< el-form-item label = "备注" prop = "remark" >
< el-input v-model = "formData.remark" placeholder="请输入备注信息" type="textarea" rows="3" > < / el -input >
< / el-form-item >
< / el-col >
< / el-row >
< / el-form >
< template # footer >
< div class = "flex justify-end gap-2" >
< el-button @click ="dialogVisible = false" > 取消 < / el -button >
< el-button type = "primary" @click ="handleSave" :loading = "saveLoading" > 保存 < / el-button >
< / div >
< / template >
< / el-dialog >
<!-- 删除确认对话框 -- >
< el-dialog v-model = "deleteDialogVisible" title="确认删除" width="300px" :show-close="false" >
< div class = "text-center py-4" >
< el-icon class = "text-orange-500 text-4xl mb-3" >
< WarningFilled / >
< / el-icon >
< p > 确定要删除这条记录吗 ？ < / p >
< p class = "text-gray-500 text-sm mt-2" > 此操作不可撤销 ， 请谨慎操作 < / p >
< / div >
< template # footer >
< div class = "flex justify-center gap-2" >
< el-button @click ="deleteDialogVisible = false" > 取消 < / el -button >
< el-button type = "danger" @click ="confirmDelete" :loading = "deleteLoading" > 确认删除 < / el-button >
< / div >
< / template >
< / el-dialog >
< / div >
< / template >
< script setup >
@ -191,7 +210,7 @@ const userStore = useUserStoreHook();
const router = useRouter ( ) ;
const currentProject = computed ( ( ) => userStore . selectedProject ) ;
const { proxy } = getCurrentInstance ( ) ;
import { useMaterialsQueryList , newMaterialsAdd , materialsEdit , materialsDel , queryMaterialsInfo } from " @/api/materials/usageMaterials/index" ;
import { useMaterialsQueryList , newMaterialsAdd , materialsEdit , materialsDel , queryMaterialsInfo } from ' @/api/materials/usageMaterials/index' ;
// 表格数据相关
const tableData = ref ( [ ] ) ;
const total = ref ( 0 ) ;
@ -201,8 +220,8 @@ const loading = ref(false);
// 搜索表单
const searchForm = reactive ( {
findType : '3' , // 默认查询所有
keyword : ''
findType : '3' , // 默认查询所有
keyword : ''
} ) ;
// 对话框相关
@ -221,278 +240,268 @@ const submitLoading = ref(false);
// 表单数据
const formData = reactive ( {
id : '' ,
name : '' ,
specification : '' ,
supplier : '' ,
findType : 2 , // 默认采购
installationQuantity : '' ,
installationRatio : '' ,
contractSigning : '' ,
productionPhase : null ,
executionCycle : null ,
projectId : currentProject . value ? . id ,
supplyRequirements : '' ,
// purchaseSubmission: '',
// submissionMaterials: '',
remark : '' ,
createTime : '' ,
createBy : null ,
updateTime : '' ,
updateBy : null
id : '' ,
name : '' ,
specification : '' ,
supplier : '' ,
findType : 2 , // 默认采购
installationQuantity : '' ,
installationRatio : '' ,
contractSigning : '' ,
productionPhase : null ,
executionCycle : null ,
projectId : currentProject . value ? . id ,
supplyRequirements : '' ,
// purchaseSubmission: '',
// submissionMaterials: '',
remark : '' ,
createTime : '' ,
createBy : null ,
updateTime : '' ,
updateBy : null
} ) ;
// 表单验证规则
const formRules = reactive ( {
name : [
{ required : true , message : '请输入材料名称' , trigger : 'blur' } ,
{ max : 50 , message : '材料名称不能超过50个字符' , trigger : 'blur' }
] ,
supplier : [
{ required : true , message : '请输入供应商' , trigger : 'blur' } ,
{ max : 100 , message : '供应商名称不能超过100个字符' , trigger : 'blur' }
] ,
findType : [
{ required : true , message : '请选择类型' , trigger : 'change' }
]
name : [
{ required : true , message : '请输入材料名称' , trigger : 'blur' } ,
{ max : 50 , message : '材料名称不能超过50个字符' , trigger : 'blur' }
] ,
supplier : [
{ required : true , message : '请输入供应商' , trigger : 'blur' } ,
{ max : 100 , message : '供应商名称不能超过100个字符' , trigger : 'blur' }
] ,
findType : [ { required : true , message : '请选择类型' , trigger : 'change' } ]
} ) ;
// 格式化日期
const formatDate = ( dateString ) => {
if ( ! dateString ) return '-' ;
const date = new Date ( dateString ) ;
return date . toLocaleString ( 'zh-CN' , {
year : 'numeric ' ,
month : '2-digit ' ,
day : '2-digit' ,
hour : '2-digit' ,
minute : '2-digit' ,
second : '2-digit'
} ) . replace ( ',' , ' ' ) ;
if ( ! dateString ) return '-' ;
const date = new Date ( dateString ) ;
return date
. toLocaleString ( 'zh-CN ', {
year : 'numeric ',
month : '2-digit' ,
day : '2-digit' ,
hour : '2-digit' ,
minute : '2-digit' ,
second : '2-digit'
} )
. replace ( ',' , ' ' ) ;
} ;
// 表格行样式
const tableRowClassName = ( { row , rowIndex } ) => {
return rowIndex % 2 === 0 ? 'bg-white' : 'bg-gray-50' ;
return rowIndex % 2 === 0 ? 'bg-white' : 'bg-gray-50' ;
} ;
// 获取数据
const fetchData = async ( ) => {
loading . value = true ;
try {
const res = await useMaterialsQueryList ( {
projectId : currentProject . value ? . id ,
findType : 1
} ) ;
loading . value = true ;
try {
const res = await useMaterialsQueryList ( {
projectId : currentProject . value ? . id ,
findType : 1
} ) ;
tableData . value = res . rows ;
total . value = res . total ;
loading . value = false ;
} catch ( error ) {
ElMessage . error ( '获取数据失败：' + error . message ) ;
console . error ( error ) ;
} finally {
loading . value = false ;
}
tableData . value = res . rows ;
total . value = res . total ;
loading . value = false ;
} catch ( error ) {
ElMessage . error ( '获取数据失败：' + error . message ) ;
console . error ( error ) ;
} finally {
loading . value = false ;
}
} ;
// 搜索
const handleSearch = ( ) => {
currentPage . value = 1 ; // 重置到第一页
fetchData ( ) ;
currentPage . value = 1 ; // 重置到第一页
fetchData ( ) ;
} ;
// 刷新数据
const refreshData = ( ) => {
fetchData ( ) ;
ElMessage . success ( '数据已刷新' ) ;
fetchData ( ) ;
ElMessage . success ( '数据已刷新' ) ;
} ;
// 分页大小改变
const handleSizeChange = ( val ) => {
pageSize . value = val ;
currentPage . value = 1 ;
fetchData ( ) ;
pageSize . value = val ;
currentPage . value = 1 ;
fetchData ( ) ;
} ;
// 当前页改变
const handleCurrentChange = ( val ) => {
currentPage . value = val ;
fetchData ( ) ;
currentPage . value = val ;
fetchData ( ) ;
} ;
// 新增
const handleAdd = ( ) => {
dialogType . value = 'add' ;
resetForm ( ) ;
dialogVisible . value = true ;
dialogType . value = 'add' ;
resetForm ( ) ;
dialogVisible . value = true ;
} ;
//
//
// 编辑
const handleEdit = ( row ) => {
dialogType . value = 'edit' ;
currentRow . value = row ;
resetForm ( ) ;
dialogType . value = 'edit' ;
currentRow . value = row ;
resetForm ( ) ;
// 填充表单数据
Object . keys ( formData ) . forEach ( key => {
if ( row . hasOwnProperty ( key ) ) {
formData [ key ] = row [ key ] ;
}
} ) ;
// 填充表单数据
Object . keys ( formData ) . forEach ( ( key ) => {
if ( row . hasOwnProperty ( key ) ) {
formData [ key ] = row [ key ] ;
}
} ) ;
dialogVisible . value = true ;
dialogVisible . value = true ;
} ;
const handleAddSon = ( row ) => {
ElMessageBox . confirm (
'确认提交 ' ,
'提示 ',
{
confirmButtonText : '确认' ,
cancelButtonText : '取消' ,
type : 'warning' ,
}
) . then ( ( ) => {
materialsEdit ( { id : row . id , purchaseSubmission : '1' } ) . then ( res => {
let { code } = res
if ( code === 200 ) {
ElMessage ( {
type : 'success' ,
message : '提交成功' ,
} )
}
} )
} ) . catch ( ( ) => {
ElMessage ( {
type : 'info' ,
message : '已取消提交' ,
} )
ElMessageBox . confirm ( '确认提交' , '提示' , {
confirmButtonText : '确认' ,
cancelButtonText : '取消 ',
type : 'warning'
} )
. then ( ( ) => {
materialsEdit ( { id : row . id , purchaseSubmission : '1' } ) . then ( ( res ) => {
let { code } = res ;
if ( code === 200 ) {
ElMessage ( {
type : 'success' ,
message : '提交成功'
} ) ;
}
} ) ;
} )
. catch ( ( ) => {
ElMessage ( {
type : 'info' ,
message : '已取消提交'
} ) ;
} ) ;
} ;
// 删除
const handleDelete = ( row ) => {
currentRow . value = row ;
deleteDialogVisible . value = true ;
currentRow . value = row ;
deleteDialogVisible . value = true ;
} ;
// 确认删除
const confirmDelete = async ( ) => {
if ( ! currentRow . value ) return ;
if ( ! currentRow . value ) return ;
deleteLoading . value = true ;
try {
// 模拟API请求
const res = await materialsDel ( currentRow . value . id )
const { code } = res ;
if ( code === 200 ) {
ElMessage . success ( '删除成功' ) ;
deleteDialogVisible . value = false ;
fetchData ( ) ;
} else {
ElMessage . error ( '删除失败' ) ;
}
} catch ( error ) {
ElMessage . error ( '删除失败：' + error . message ) ;
console . error ( error ) ;
} finally {
deleteLoading . value = false ;
deleteLoading . value = true ;
try {
// 模拟API请求
const res = await materialsDel ( currentRow . value . id ) ;
const { code } = res ;
if ( code === 200 ) {
ElMessage . success ( '删除成功' ) ;
deleteDialogVisible . value = false ;
fetchData ( ) ;
} else {
ElMessage . error ( '删除失败' ) ;
}
} catch ( error ) {
ElMessage . error ( '删除失败：' + error . message ) ;
console . error ( error ) ;
} finally {
deleteLoading . value = false ;
}
} ;
//
//
// 保存
const handleSave = async ( ) => {
// 表单验证
if ( ! formRef . value ) return ;
const valid = await formRef . value . validate ( ) ;
if ( ! valid ) return ;
// 表单验证
if ( ! formRef . value ) return ;
const valid = await formRef . value . validate ( ) ;
if ( ! valid ) return ;
saveLoading . value = true ;
try {
// 模拟API请求
const form = toRaw ( formData ) ;
saveLoading . value = true ;
try {
// 模拟API请求
const form = toRaw ( formData ) ;
if ( dialogType . value === 'add' ) {
// 新增
formData . projectId = currentProject . value ? . id ;
const res = await newMaterialsAdd ( formData )
let { code } = res
if ( code === 200 ) {
ElMessage . success ( '新增成功' ) ;
fetchData ( ) ;
}
} else {
// 编辑
const res = await materialsEdit ( formData )
let { code } = res
if ( code === 200 ) {
ElMessage . success ( '保存成功' ) ;
fetchData ( ) ;
}
}
dialogVisible . value = false ;
} catch ( error ) {
ElMessage . error ( '保存失败：' + error . message ) ;
console . error ( error ) ;
} finally {
saveLoading . value = false ;
if ( dialogType . value === 'add' ) {
// 新增
formData . projectId = currentProject . value ? . id ;
const res = await newMaterialsAdd ( formData ) ;
let { code } = res ;
if ( code === 200 ) {
ElMessage . success ( '新增成功' ) ;
fetchData ( ) ;
}
} else {
// 编辑
const res = await materialsEdit ( formData ) ;
let { code } = res ;
if ( code === 200 ) {
ElMessage . success ( '保存成功' ) ;
fetchData ( ) ;
}
}
dialogVisible . value = false ;
} catch ( error ) {
ElMessage . error ( '保存失败：' + error . message ) ;
console . error ( error ) ;
} finally {
saveLoading . value = false ;
}
} ;
// 重置表单
const resetForm = ( ) => {
if ( formRef . value ) {
formRef . value . resetFields ( ) ;
}
if ( formRef . value ) {
formRef . value . resetFields ( ) ;
}
// 重置表单数据
Object . keys ( formData ) . forEach ( key => {
formData [ key ] = '' ;
} ) ;
// 重置表单数据
Object . keys ( formData ) . forEach ( ( key ) => {
formData [ key ] = '' ;
} ) ;
// 设置默认值
formData . findType = 1 ;
formData . id = '' ;
// 设置默认值
formData . findType = 1 ;
formData . id = '' ;
} ;
// 重置表单
const resetForm2 = ( ) => {
if ( formRef . value ) {
formRef . value . resetFields ( ) ;
}
if ( formRef . value ) {
formRef . value . resetFields ( ) ;
}
// 重置表单数据
Object . keys ( form ) . forEach ( key => {
form [ key ] = '' ;
} ) ;
// 重置表单数据
Object . keys ( form ) . forEach ( ( key ) => {
form [ key ] = '' ;
} ) ;
// 设置默认值
form . findType = 1 ;
form . id = '' ;
// 设置默认值
form . findType = 1 ;
form . id = '' ;
} ;
// 提交表单
// 关闭对话框
const handleDialogClose = ( ) => {
resetForm ( ) ;
dialogVisible . value = false ;
resetForm ( ) ;
dialogVisible . value = false ;
} ;
// 跳转
const jumpRouter = ( row ) => {
router . push ( {
path : ` /materials/usageMaterials/ purchaseSon ` ,
path : ` /materials/purchaseSon ` ,
query : {
id : row . id ,
type : 'update'
@ -501,33 +510,32 @@ const jumpRouter = (row) => {
} ;
// 初始化页面
onMounted ( ( ) => {
fetchData ( ) ;
fetchData ( ) ;
} ) ;
< / script >
< style scoped >
/* 自定义表格行悬停样式 */
: : v - deep . el - table _ _row : hover > td {
background - color : # f0f7ff ! important ;
: : v - deep . el - table _ _row : hover > td {
background - color : # f0f7ff ! important ;
}
/* 表单间距优化 */
: : v - deep . el - form - item {
margin - bottom : 16 px ;
margin - bottom : 16 px ;
}
/* 对话框动画 */
: : v - deep . el - dialog _ _wrapper {
backdrop - filter : blur ( 2 px ) ;
backdrop - filter : blur ( 2 px ) ;
}
/* 按钮样式优化 */
: : v - deep . el - button -- primary {
transition : all 0.2 s ease ;
transition : all 0.2 s ease ;
}
: : v - deep . el - button -- primary : hover {
transform : translateY ( - 2 px ) ;
transform : translateY ( - 2 px ) ;
}
< / style >
< / style >
