python-flask和Vue两种模式初模板
This commit is contained in:
61
inventory-web/src/views/dashboard/index.vue
Normal file
61
inventory-web/src/views/dashboard/index.vue
Normal file
@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<div class="dashboard-container">
|
||||
<el-card class="welcome-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>👋 欢迎回来</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="card-body">
|
||||
<h2>欢迎使用 IRIS 库存管理系统</h2>
|
||||
<p>请点击下方按钮进入具体业务模块:</p>
|
||||
|
||||
<div class="action-buttons">
|
||||
<el-button type="primary" size="large" @click="$router.push('/stock/inbound')">
|
||||
<el-icon style="margin-right: 5px"><Box /></el-icon>
|
||||
进入采购入库
|
||||
</el-button>
|
||||
|
||||
<el-button size="large" disabled>
|
||||
<el-icon style="margin-right: 5px"><TrendCharts /></el-icon>
|
||||
库存报表 (开发中)
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Box, TrendCharts } from '@element-plus/icons-vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dashboard-container {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.welcome-card {
|
||||
width: 600px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card-body h2 {
|
||||
color: #303133;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.card-body p {
|
||||
color: #606266;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
}
|
||||
</style>
|
||||
11
inventory-web/src/views/login/index.vue
Normal file
11
inventory-web/src/views/login/index.vue
Normal file
@ -0,0 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
11
inventory-web/src/views/material/list.vue
Normal file
11
inventory-web/src/views/material/list.vue
Normal file
@ -0,0 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
237
inventory-web/src/views/stock/inbound.vue
Normal file
237
inventory-web/src/views/stock/inbound.vue
Normal file
@ -0,0 +1,237 @@
|
||||
<template>
|
||||
<div class="app-container" style="padding: 20px;">
|
||||
<div style="margin-bottom: 20px; display: flex; justify-content: space-between;">
|
||||
<el-button type="primary" :icon="Plus" @click="handleCreate">新增入库</el-button>
|
||||
<el-button :icon="Refresh" @click="fetchData">刷新</el-button>
|
||||
</div>
|
||||
|
||||
<el-table v-loading="loading" :data="tableData" border stripe style="width: 100%">
|
||||
<el-table-column prop="inbound_date" label="入库时间" width="160" />
|
||||
<el-table-column prop="sku_code" label="SKU" width="120" fixed="left" />
|
||||
<el-table-column prop="material_name" label="物料名称" min-width="150" />
|
||||
<el-table-column prop="spec_model" label="规格" width="120" />
|
||||
<el-table-column prop="category" label="分类" width="100" />
|
||||
<el-table-column prop="unit" label="单位" width="60" />
|
||||
|
||||
<el-table-column prop="qty_inbound" label="入库量" width="100">
|
||||
<template #default="{ row }">
|
||||
<span style="font-weight: bold; color: #409EFF">{{ row.qty_inbound }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="price_unit" label="单价" width="100" />
|
||||
<el-table-column prop="price_total" label="总价" width="100" />
|
||||
<el-table-column prop="warehouse_loc" label="库位" width="100" />
|
||||
<el-table-column prop="supplier_name" label="供应商" width="120" />
|
||||
|
||||
<el-table-column label="操作" width="150" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button link type="primary" @click="handleUpdate(row)">编辑</el-button>
|
||||
<el-button link type="danger" @click="handleDelete(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div style="margin-top: 20px; text-align: right;">
|
||||
<el-pagination
|
||||
v-model:current-page="queryParams.page"
|
||||
v-model:page-size="queryParams.pageSize"
|
||||
:total="total"
|
||||
layout="total, prev, pager, next"
|
||||
@current-change="fetchData"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<el-dialog
|
||||
:title="dialogType === 'create' ? '入库录入 (支持自动建档)' : '编辑入库单'"
|
||||
v-model="dialogVisible"
|
||||
width="650px"
|
||||
>
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
|
||||
|
||||
<div v-if="dialogType === 'create'">
|
||||
<el-divider content-position="left">物料基础信息</el-divider>
|
||||
<el-alert title="输入SKU后,如是新物料,请补全名称和规格;如是旧物料,系统会自动关联。" type="info" :closable="false" style="margin-bottom:15px;" />
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="SKU编码" prop="sku_code">
|
||||
<el-input v-model="form.sku_code" placeholder="唯一识别码" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="物料名称" prop="material_name">
|
||||
<el-input v-model="form.material_name" placeholder="新物料必填" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="规格型号" prop="spec_model">
|
||||
<el-input v-model="form.spec_model" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="分类" prop="category">
|
||||
<el-input v-model="form.category" placeholder="如: 电子料" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="单位" prop="unit">
|
||||
<el-input v-model="form.unit" placeholder="个/包" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<el-divider content-position="left">入库业务信息</el-divider>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="入库数量" prop="qty_inbound">
|
||||
<el-input-number v-model="form.qty_inbound" :min="0" style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="单价" prop="price_unit">
|
||||
<el-input-number v-model="form.price_unit" :min="0" :precision="2" style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="库位" prop="warehouse_loc">
|
||||
<el-input v-model="form.warehouse_loc" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="批次号" prop="batch_no">
|
||||
<el-input v-model="form.batch_no" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-form-item label="供应商" prop="supplier_name">
|
||||
<el-input v-model="form.supplier_name" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="submitting" @click="submitForm">确认提交</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { Plus, Refresh } from '@element-plus/icons-vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getInboundList, createInbound, updateInbound, deleteInbound } from '@/api/stock'
|
||||
|
||||
const loading = ref(false)
|
||||
const submitting = ref(false)
|
||||
const tableData = ref([])
|
||||
const total = ref(0)
|
||||
const dialogVisible = ref(false)
|
||||
const dialogType = ref<'create' | 'update'>('create')
|
||||
const formRef = ref()
|
||||
|
||||
const queryParams = reactive({ page: 1, pageSize: 10 })
|
||||
|
||||
// 表单对象
|
||||
const form = reactive({
|
||||
id: undefined,
|
||||
sku_code: '',
|
||||
material_name: '',
|
||||
spec_model: '',
|
||||
category: '',
|
||||
unit: '',
|
||||
qty_inbound: 0,
|
||||
price_unit: 0,
|
||||
warehouse_loc: '',
|
||||
batch_no: '',
|
||||
supplier_name: ''
|
||||
})
|
||||
|
||||
const rules = {
|
||||
sku_code: [{ required: true, message: 'SKU不能为空', trigger: 'blur' }],
|
||||
qty_inbound: [{ required: true, message: '数量必须大于0', trigger: 'blur' }]
|
||||
}
|
||||
|
||||
const fetchData = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getInboundList(queryParams)
|
||||
tableData.value = res.data.items
|
||||
total.value = res.data.total
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleCreate = () => {
|
||||
dialogType.value = 'create'
|
||||
// 重置表单
|
||||
Object.assign(form, {
|
||||
id: undefined, sku_code: '', material_name: '', spec_model: '', category: '', unit: '',
|
||||
qty_inbound: 1, price_unit: 0, warehouse_loc: '', batch_no: '', supplier_name: ''
|
||||
})
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const handleUpdate = (row: any) => {
|
||||
dialogType.value = 'update'
|
||||
// 仅允许修改入库相关信息
|
||||
Object.assign(form, row)
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const submitForm = async () => {
|
||||
if (!formRef.value) return
|
||||
await formRef.value.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
submitting.value = true
|
||||
try {
|
||||
if (dialogType.value === 'create') {
|
||||
await createInbound(form)
|
||||
ElMessage.success('入库成功')
|
||||
} else {
|
||||
// 编辑时只提交入库单ID和可修改字段
|
||||
await updateInbound(form.id!, {
|
||||
qty_inbound: form.qty_inbound,
|
||||
price_unit: form.price_unit,
|
||||
warehouse_loc: form.warehouse_loc,
|
||||
batch_no: form.batch_no,
|
||||
supplier_name: form.supplier_name
|
||||
})
|
||||
ElMessage.success('更新成功')
|
||||
}
|
||||
dialogVisible.value = false
|
||||
fetchData()
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e.response?.data?.msg || '操作失败')
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleDelete = (row: any) => {
|
||||
ElMessageBox.confirm('确认删除该记录?', '警告', { type: 'warning' })
|
||||
.then(async () => {
|
||||
await deleteInbound(row.id)
|
||||
ElMessage.success('已删除')
|
||||
fetchData()
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => fetchData())
|
||||
</script>
|
||||
11
inventory-web/src/views/stock/query.vue
Normal file
11
inventory-web/src/views/stock/query.vue
Normal file
@ -0,0 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
11
inventory-web/src/views/stock/semi.vue
Normal file
11
inventory-web/src/views/stock/semi.vue
Normal file
@ -0,0 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
11
inventory-web/src/views/transaction/borrow.vue
Normal file
11
inventory-web/src/views/transaction/borrow.vue
Normal file
@ -0,0 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
11
inventory-web/src/views/transaction/return.vue
Normal file
11
inventory-web/src/views/transaction/return.vue
Normal file
@ -0,0 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
11
inventory-web/src/views/transaction/scrap.vue
Normal file
11
inventory-web/src/views/transaction/scrap.vue
Normal file
@ -0,0 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user