@ -7,23 +7,22 @@
< 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 >
< 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
< el-table
v-loading = "loading"
:data = "tableData"
border
stripe
: header -cell -style = " { ' background -color ' : ' # f5f7fa ' , ' font -weight ' : ' bold ' } "
:row-class-name = "tableRowClassName" >
: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 >
@ -35,8 +34,7 @@
< / el-tag >
< / template >
< / el-table-column >
< el-table-column prop = "installationQuantity" label = "安装量" width = "100"
align = "center" > < / 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 ) } }
@ -49,14 +47,30 @@
< / 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 >
< 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 >
@ -64,19 +78,28 @@
<!-- 分页 -- >
< 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 )
} } 条
共 { { 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 >
< 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-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" >
@ -99,8 +122,7 @@
< / 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-input v -model .number = " formData.executionCycle " placeholder = "请输入运算周期" type = "number" > < / el-input >
< / el-form-item >
< / el-col >
< / el-row >
@ -121,14 +143,17 @@
< 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-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-input v -model .number = " formData.productionPhase " placeholder = "请输入生产周期" type = "number" > < / el-input >
< / el-form-item >
< / el-col >
< / el-row >
@ -136,16 +161,14 @@
< 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-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-input v-model = "formData.remark" placeholder="请输入备注信息" type="textarea" rows="3" > < / el -input >
< / el-form-item >
< / el-col >
< / el-row >
@ -154,9 +177,7 @@
< 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 >
< el-button type = "primary" @click ="handleSave" :loading = "saveLoading" > 保存 < / el-button >
< / div >
< / template >
< / el-dialog >
@ -172,9 +193,7 @@
< 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 >
< el-button type = "danger" @click ="confirmDelete" :loading = "deleteLoading" > 确认删除 < / el-button >
< / div >
< / template >
< / el-dialog >
@ -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 ) ;
@ -252,25 +271,23 @@ const formRules = reactive({
{ required : true , message : '请输入供应商' , trigger : 'blur' } ,
{ max : 100 , message : '供应商名称不能超过100个字符' , trigger : 'blur' }
] ,
findType : [
{ required : true , message : '请选择类型' , trigger : 'change' }
]
findType : [ { required : true , message : '请选择类型' , trigger : 'change' } ]
} ) ;
// 格式化日期
const formatDate = ( dateString ) => {
if ( ! dateString ) return '-' ;
const date = new Date ( dateString ) ;
return date . toLocaleString ( 'zh-CN' , {
return date
. toLocaleString ( 'zh-CN' , {
year : 'numeric' ,
month : '2-digit' ,
day : '2-digit' ,
hour : '2-digit' ,
minute : '2-digit' ,
second : '2-digit'
} ) . replace ( ',' , ' ' ) ;
} )
. replace ( ',' , ' ' ) ;
} ;
// 表格行样式
@ -332,8 +349,6 @@ const handleAdd = () => {
//
// 编辑
const handleEdit = ( row ) => {
dialogType . value = 'edit' ;
@ -341,7 +356,7 @@ const handleEdit = (row) => {
resetForm ( ) ;
// 填充表单数据
Object . keys ( formData ) . forEach ( key => {
Object . keys ( formData ) . forEach ( ( key ) => {
if ( row . hasOwnProperty ( key ) ) {
formData [ key ] = row [ key ] ;
}
@ -350,30 +365,28 @@ const handleEdit = (row) => {
dialogVisible . value = true ;
} ;
const handleAddSon = ( row ) => {
ElMessageBox . confirm (
'确认提交' ,
'提示' ,
{
ElMessageBox . confirm ( '确认提交' , '提示' , {
confirmButtonText : '确认' ,
cancelButtonText : '取消' ,
type : 'warning' ,
}
) . then ( ( ) => {
materialsEdit ( { id : row . id , purchaseSubmission : '1' } ) . then ( res => {
let { code } = res
type : 'warning'
} )
. then ( ( ) => {
materialsEdit ( { id : row . id , purchaseSubmission : '1' } ) . then ( ( res ) {
let { code } = res ;
if ( code === 200 ) {
ElMessage ( {
type : 'success' ,
message : '提交成功' ,
} )
message : '提交成功'
} ) ;
}
} ) ;
} )
} ) . catch ( ( ) => {
. catch ( ( ) => {
ElMessage ( {
type : 'info' ,
message : '已取消提交' ,
} )
} )
message : '已取消提交'
} ) ;
} ) ;
} ;
// 删除
@ -382,7 +395,6 @@ const handleDelete = (row) => {
deleteDialogVisible . value = true ;
} ;
// 确认删除
const confirmDelete = async ( ) => {
if ( ! currentRow . value ) return ;
@ -390,7 +402,7 @@ const confirmDelete = async () => {
deleteLoading . value = true ;
try {
// 模拟API请求
const res = await materialsDel ( currentRow . value . id )
const res = await materialsDel ( currentRow . value . id ) ;
const { code } = res ;
if ( code === 200 ) {
ElMessage . success ( '删除成功' ) ;
@ -408,8 +420,6 @@ const confirmDelete = async () => {
} ;
//
// 保存
const handleSave = async ( ) => {
// 表单验证
@ -425,16 +435,16 @@ const handleSave = async () => {
if ( dialogType . value === 'add' ) {
// 新增
formData . projectId = currentProject . value ? . id ;
const res = await newMaterialsAdd ( formData )
let { code } = res
const res = await newMaterialsAdd ( formData ) ;
let { code } = res ;
if ( code === 200 ) {
ElMessage . success ( '新增成功' ) ;
fetchData ( ) ;
}
} else {
// 编辑
const res = await materialsEdit ( formData )
let { code } = res
const res = await materialsEdit ( formData ) ;
let { code } = res ;
if ( code === 200 ) {
ElMessage . success ( '保存成功' ) ;
fetchData ( ) ;
@ -457,7 +467,7 @@ const resetForm = () => {
}
// 重置表单数据
Object . keys ( formData ) . forEach ( key => {
Object . keys ( formData ) . forEach ( ( key ) => {
formData [ key ] = '' ;
} ) ;
@ -472,7 +482,7 @@ const resetForm2 = () => {
}
// 重置表单数据
Object . keys ( form ) . forEach ( key => {
Object . keys ( form ) . forEach ( ( key ) => {
form [ key ] = '' ;
} ) ;
@ -482,7 +492,6 @@ const resetForm2 = () => {
} ;
// 提交表单
// 关闭对话框
const handleDialogClose = ( ) => {
resetForm ( ) ;
@ -492,7 +501,7 @@ const handleDialogClose = () => {
// 跳转
const jumpRouter = ( row ) => {
router . push ( {
path : ` /materials/usageMaterials/ purchaseSon ` ,
path : ` /materials/purchaseSon ` ,
query : {
id : row . id ,
type : 'update'
@ -503,7 +512,6 @@ const jumpRouter = (row) => {
onMounted ( ( ) => {
fetchData ( ) ;
} ) ;
< / script >
< style scoped >
