maintenance_system/src/views/materialManagement/inventoryManagement.vue

<template>
    <div class="inventoryManagement">
        <!-- <TitleComponent title="出入库单管理" subtitle="管理光伏和风电设备备品备件的出入库记录" /> -->
        <el-row gutter="20">
            <el-col :span="16" class="list" style="flex-grow: 1;display: flex;">
                <el-card style="border-radius: 10px;height: 100%;display: flex;flex-direction: column;flex: 1;">
                    <div style="height: 100%;flex: 1;">
                        <div class="top">
                            <div class="title">单据列表</div>
                            <div class="button-actions">
                                <button :class="{ active: type === 'chuku' }" @click="changeType('chuku')">出库单</button>
                                <button :class="{ active: type === 'ruku' }" @click="changeType('ruku')">入库单</button>
                            </div>
                        </div>
                        <div class="content" style="height: 100%;flex: 1;">
                            <div class="menu">
                                <el-input placeholder="请输入单据编号"></el-input>
                                <el-select placeholder="请选择设备类型"></el-select>
                                <el-select placeholder="请选择状态"></el-select>
                                <el-select placeholder="请选择日期范围"></el-select>
                                <el-button icon="search" type="primary">搜索</el-button>
                                <el-button icon="refresh">重置</el-button>
                            </div>
                            <div style="margin-top: 10px;">
                                <el-button type="primary" @click="dialogVisible = true;">+{{ type === 'chuku' ? '添加出库单'
                                    : '添加入库单' }}</el-button>
                            </div>
                            <el-table :data="tableData" border style="width: 100%;margin-top: 15px;height: 1000px;">
                                <el-table-column prop="formNumber" label="单据编号" align="center" />
                                <el-table-column prop="equipmentType" label="设备类型" align="center" />
                                <el-table-column prop="handler" label="经手人" align="center" />
                                <el-table-column prop="operationTime" label="操作时间" align="center" />
                                <el-table-column prop="totalQuantity" label="总数量" align="center" />
                                <el-table-column label="状态" align="center">
                                    <template #default="scope">
                                        <el-tag :type="getStatusTagType(scope.row.status)">
                                            {{ scope.row.status }}
                                        </el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" align="center">
                                    <template #default="scope">
                                        <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
                                        <el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
                                        <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div class="tool">
                                <div class="pagination-section">
                                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                        :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
                                        layout="total, sizes, prev, pager, next, jumper" :total="total" background>
                                    </el-pagination>
                                </div>
                            </div>
                        </div>
                    </div>

                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card style="border-radius: 10px;">
                    <div class="item-box">
                        <div class="title">系统信息</div>
                        <div class="content">
                            <SystemInfo />
                        </div>
                    </div>
                    <div class="item-box">
                        <div class="title">数据分析</div>
                        <div class="content">
                            <DataAnalysis />
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-dialog v-model="dialogVisible" :title="type === 'chuku' ? '添加出库单' : '添加入库单'" width="500">
            <el-form :rules="rules" ref="formRef" label-width="100">
                <el-form-item label="单据编号" prop="formNumber">
                    <el-input v-model="form.formNumber" placeholder="请输入单据编号" />
                </el-form-item>
                <el-form-item label="设备类型" prop="equipmentType">
                    <el-select v-model="form.equipmentType" placeholder="请选择设备类型">
                        <el-option label="设备类型1" value="1" />
                        <el-option label="设备类型2" value="2" />
                    </el-select>
                </el-form-item>
                <el-form-item label="入库数量" prop="totalQuantity">
                    <el-input v-model="form.totalQuantity" placeholder="请输入总数量" />
                </el-form-item>
                <el-form-item label="经手人" prop="handler">
                    <el-input v-model="form.handler" placeholder="请输入经手人" />
                </el-form-item>
                <!-- 联系电话 -->
                <el-form-item label="联系电话" prop="contactPhone">
                    <el-input v-model="form.contactPhone" placeholder="请输入联系电话" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">
                        保存
                    </el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 编辑弹窗 -->
        <el-dialog v-model="editDialogVisible" title="编辑出入库单" width="500" @close="handleEditClose">
            <el-form :rules="rules" ref="editFormRef" :model="editForm" label-width="100">
                <el-form-item label="单据编号" prop="formNumber">
                    <el-input v-model="editForm.formNumber" placeholder="请输入单据编号" />
                </el-form-item>
                <el-form-item label="设备类型" prop="equipmentType">
                    <el-select v-model="editForm.equipmentType" placeholder="请选择设备类型">
                        <el-option label="设备类型1" value="1" />
                        <el-option label="设备类型2" value="2" />
                    </el-select>
                </el-form-item>
                <el-form-item label="总数量" prop="totalQuantity">
                    <el-input-number v-model="editForm.totalQuantity" placeholder="请输入总数量" :min="0" :step="1" />
                </el-form-item>
                <el-form-item label="经手人" prop="handler">
                    <el-input v-model="editForm.handler" placeholder="请输入经手人" />
                </el-form-item>
                <el-form-item label="联系电话" prop="contactPhone">
                    <el-input v-model="editForm.contactPhone" placeholder="请输入联系电话" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="editDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="saveEdit">保存</el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 详情弹窗 -->
        <el-dialog v-model="detailDialogVisible" title="出入库单详情" width="600" @close="handleDetailClose">
            <div class="detail-container">
                <div class="detail-item">
                    <span class="detail-label">单据编号：</span>
                    <span class="detail-value">{{ currentRow.formNumber }}</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">设备类型：</span>
                    <span class="detail-value">{{ currentRow.equipmentType }}</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">操作时间：</span>
                    <span class="detail-value">{{ currentRow.operationTime }}</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">总数量：</span>
                    <span class="detail-value">{{ currentRow.totalQuantity }}</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">经手人：</span>
                    <span class="detail-value">{{ currentRow.handler }}</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">状态：</span>
                    <el-tag :type="getStatusTagType(currentRow.status)">{{ currentRow.status }}</el-tag>
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="detailDialogVisible = false">关闭</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<style scoped>
.inventoryManagement {
    background-color: #F2F8FC;
    padding: 20px;
}

.button-actions button {
    background: none;
    border: 1px solid #e0e0e0;
    padding: 5px 12px;
    border-radius: 4px;
    margin-left: 8px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
}

.button-actions button.active {
    background-color: #186DF5;
    color: white;
    border-color: #186DF5;
}

.top {
    display: flex;
    justify-content: space-between;

    .title {
        font-family: "Alibaba-PuHuiTi-Bold";
        color: rgba(0, 30, 59, 1);
        font-weight: bold;
    }
}

.list .content {
    margin-top: 20px;
}

.menu {
    display: flex;
    gap: 20px;
    background-color: #F2F2F2;
    padding: 20px;
}

/* 分页区域样式 */
.pagination-section {
    background-color: #fff;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pagination-info {
    font-size: 14px;
    color: #606266;
}

.pagination-controls .el-pagination {
    margin: 0;
}


.pagination-controls .el-pagination button {
    min-width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 4px;
}

.pagination-controls .el-pagination .el-pager li {
    min-width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 4px;
}

.pagination-controls .el-pagination .el-pager li.active {
    background-color: #409eff;
    color: #fff;
}

.tool {

    margin-top: 10px;
    display: flex;
    justify-content: space-between;
}

.item-box {
    .title {
        font-family: "Alibaba-PuHuiTi-Bold";
        font-size: 18px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 24px;
        color: rgba(0, 30, 59, 1);
        margin-top: 10px;
    }
}

/* 详情弹窗样式 */
.detail-container {
    padding: 10px 0;
}

.detail-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

.detail-label {
    font-weight: 500;
    color: #606266;
    width: 120px;
}

.detail-value {
    color: #303133;
    flex: 1;
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    padding: 12px 0;
}

::v-deep(.el-card__body) {
    height: 100%;
}
</style>
<script setup>
import SystemInfo from './components/SystemInfo.vue';
import DataAnalysis from './components/DataAnalysis.vue';
import { ref, computed } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
const type = ref('chuku');
const form = ref({
    formNumber: '',
    equipmentType: '',
    handler: '',
    totalQuantity: ''
});

const changeType = (newType) => {
    type.value = newType;
};
const dialogVisible = ref(false);
const tableData = computed(() => {
    return Array.from({ length: 50 }, (_, index) => ({
        formNumber: 'IN-2023-0615-001',
        equipmentType: '光伏设备',
        handler: '李仓库',
        operationTime: '2023-06-15 09:23',
        totalQuantity: 120,
        // 待审核，已完成，已取消 随机生成
        status: Math.random() > 0.5 ? '待审核' : Math.random() > 0.5 ? '已完成' : '已取消'
    }))
})
// 当前页码
const currentPage = ref(1);
// 每页条数 - 与分页控件默认值保持一致
const pageSize = ref(10);
// 总条数 - 从原始数据计算得出
const total = ref(tableData.value.length);
const pagedTableData = computed(() => {
    const startIndex = (currentPage.value - 1) * pageSize.value;
    const endIndex = startIndex + pageSize.value;
    return tableData.value.slice(startIndex, endIndex);
});
// 表单校验规则
const rules = ref({
    formNumber: [{ required: true, message: '请输入表单编号', trigger: 'blur' }],
    equipmentType: [{ required: true, message: '请选择设备类型', trigger: 'change' }],
    handler: [{ required: true, message: '请输入经手人', trigger: 'blur' }],
    totalQuantity: [{ required: true, message: '请输入入库数量', trigger: 'blur' }],
    contactPhone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
});
// 表单引用
const formRef = ref(null);
// 当前页码改变
const handleCurrentChange = (val) => {
    currentPage.value = val;
};

// 每页条数改变
const handleSizeChange = (val) => {
    pageSize.value = val;
    currentPage.value = 1;
};

// 模拟API调用函数
const mockApiCall = (success = true) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (success) {
                resolve({ success: true });
            } else {
                reject({ success: false, message: '操作失败，请稍后重试' });
            }
        }, 500);
    });
}

// 编辑弹窗相关状态
const editDialogVisible = ref(false);
const editForm = ref({});
const editFormRef = ref(null);

// 详情弹窗相关状态
const detailDialogVisible = ref(false);
const currentRow = ref({});
const getStatusTagType = (status) => {
    if (status === '已完成') {
        return 'success'
    } else if (status === '待审核') {
        return 'warning'
    } else if (status === '已取消') {
        return 'danger'
    }
    return ''
}

// 处理编辑
const handleEdit = (row) => {
    // 深拷贝当前行数据到编辑表单
    editForm.value = JSON.parse(JSON.stringify(row));
    editDialogVisible.value = true;
};

// 保存编辑
const saveEdit = async () => {
    try {
        // 模拟API调用
        await mockApiCall();
        editDialogVisible.value = false;
        ElMessage.success('编辑成功');
        // 这里应该刷新数据，但由于是模拟数据，暂时不处理
    } catch (error) {
        ElMessage.error(error.message || '编辑失败');
    }
};

// 关闭编辑弹窗
const handleEditClose = () => {
    // 重置表单
    editForm.value = {};
    if (editFormRef.value) {
        editFormRef.value.resetFields();
    }
};

// 处理详情
const handleDetail = (row) => {
    currentRow.value = row;
    detailDialogVisible.value = true;
};

// 关闭详情弹窗
const handleDetailClose = () => {
    currentRow.value = {};
};

// 处理删除
const handleDelete = async (row) => {
    try {
        await ElMessageBox.confirm(
            `确定要删除单据 ${row.formNumber} 吗？`,
            '确认删除',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        );
        // 模拟API调用
        await mockApiCall();
        ElMessage.success('删除成功');
        // 这里应该刷新数据，但由于是模拟数据，暂时不处理
    } catch (error) {
        if (error !== 'cancel') {
            ElMessage.error(error.message || '删除失败');
        }
    }
};
</script>