280 lines
10 KiB
Vue
280 lines
10 KiB
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-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="单据编号" />
|
||
|
|
<el-table-column prop="equipmentType" label="设备类型" />
|
||
|
|
<el-table-column prop="handler" label="经手人" />
|
||
|
|
<el-table-column prop="operationTime" label="操作时间" />
|
||
|
|
<el-table-column prop="totalQuantity" label="总数量" />
|
||
|
|
<el-table-column label="状态">
|
||
|
|
<template #default="scope">
|
||
|
|
<el-tag :type="getStatusTagType(scope.row.status)">
|
||
|
|
{{ scope.row.status }}
|
||
|
|
</el-tag>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="操作">
|
||
|
|
<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>
|
||
|
|
</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;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
::v-deep(.el-card__body) {
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script setup>
|
||
|
|
import SystemInfo from './components/SystemInfo.vue';
|
||
|
|
import DataAnalysis from './components/DataAnalysis.vue';
|
||
|
|
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 getStatusTagType = (status) => {
|
||
|
|
if (status === '已完成') {
|
||
|
|
return 'success'
|
||
|
|
} else if (status === '待审核') {
|
||
|
|
return 'warning'
|
||
|
|
} else if (status === '已取消') {
|
||
|
|
return 'danger'
|
||
|
|
}
|
||
|
|
return ''
|
||
|
|
}
|
||
|
|
</script>
|