feat(repair): implement frontend API and Vue pages for repair management
This commit is contained in:
53
inventory-web/src/api/inbound/repair.ts
Normal file
53
inventory-web/src/api/inbound/repair.ts
Normal file
@ -0,0 +1,53 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 1. 获取维修单列表
|
||||
export function getRepairList(params: any) {
|
||||
return request({
|
||||
url: '/inbound/repair/list',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
// 2. 新增维修单
|
||||
export function createRepair(data: any) {
|
||||
return request({
|
||||
url: '/inbound/repair/submit',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 3. 更新维修单
|
||||
export function updateRepair(id: number, data: any) {
|
||||
return request({
|
||||
url: `/inbound/repair/${id}`,
|
||||
method: 'put',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 4. 更新维修状态
|
||||
export function updateRepairStatus(data: any) {
|
||||
return request({
|
||||
url: '/inbound/repair/update-status',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 5. 删除维修单
|
||||
export function deleteRepair(id: number) {
|
||||
return request({
|
||||
url: `/inbound/repair/${id}`,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 6. 获取维修单详情
|
||||
export function getRepairDetail(id: number) {
|
||||
return request({
|
||||
url: `/inbound/repair/${id}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
447
inventory-web/src/views/stock/inbound/repair.vue
Normal file
447
inventory-web/src/views/stock/inbound/repair.vue
Normal file
@ -0,0 +1,447 @@
|
||||
<template>
|
||||
<div class="repair-container">
|
||||
<!-- 顶部搜索区 -->
|
||||
<el-card class="search-card" shadow="never">
|
||||
<el-form :inline="true" :model="searchForm" class="search-form">
|
||||
<el-form-item label="维修单号">
|
||||
<el-input v-model="searchForm.repair_no" placeholder="请输入维修单号" clearable style="width: 180px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="SN序列号">
|
||||
<el-input v-model="searchForm.serial_number" placeholder="请输入序列号" clearable style="width: 180px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="物料名称">
|
||||
<el-input v-model="searchForm.material_name" placeholder="请输入物料名称" clearable style="width: 180px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="维修状态">
|
||||
<el-select v-model="searchForm.repair_status" placeholder="请选择状态" clearable style="width: 150px">
|
||||
<el-option label="待检测" value="待检测" />
|
||||
<el-option label="维修中" value="维修中" />
|
||||
<el-option label="等待配件" value="等待配件" />
|
||||
<el-option label="已修复" value="已修复" />
|
||||
<el-option label="报废转出" value="报废转出" />
|
||||
<el-option label="已出库" value="已出库" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
|
||||
<el-button :icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮区 -->
|
||||
<div class="action-bar">
|
||||
<el-button v-if="userStore.hasPermission('inbound_repair:add')" type="primary" :icon="Plus" @click="handleCreate">新增维修</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<el-table :data="tableData" v-loading="loading" border stripe style="width: 100%">
|
||||
<el-table-column prop="repair_no" label="维修单号" width="180" />
|
||||
<el-table-column prop="material_name" label="物料名称" width="150" />
|
||||
<el-table-column prop="sku" label="规格型号" width="120" />
|
||||
<el-table-column prop="serial_number" label="序列号(SN)" width="150" />
|
||||
<el-table-column label="状态" width="100" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="getStatusType(row.repair_status)">{{ row.repair_status || '待检测' }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="arrival_date" label="接收时间" width="120" />
|
||||
<el-table-column prop="fault_description" label="故障描述" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column label="操作" width="180" fixed="right" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-button v-if="userStore.hasPermission('inbound_repair:edit')" type="primary" link size="small" @click="handleUpdateStatus(row)">
|
||||
更新状态
|
||||
</el-button>
|
||||
<el-button v-if="userStore.hasPermission('inbound_repair:delete')" type="danger" link size="small" @click="handleDelete(row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 底部分页 -->
|
||||
<div class="pagination-container">
|
||||
<el-pagination
|
||||
v-model:current-page="pagination.page"
|
||||
v-model:page-size="pagination.pageSize"
|
||||
:page-sizes="[20, 50, 100, 200]"
|
||||
:total="pagination.total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="fetchData"
|
||||
@current-change="fetchData"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 新增维修单弹窗 -->
|
||||
<el-dialog v-model="dialogVisible" title="新增维修单" width="600px" destroy-on-close :close-on-click-modal="false">
|
||||
<el-form ref="formRef" :model="form" :rules="formRules" label-width="100px">
|
||||
<el-form-item label="物料选择" prop="base_id">
|
||||
<el-select
|
||||
v-model="form.base_id"
|
||||
filterable
|
||||
remote
|
||||
reserve-keyword
|
||||
placeholder="请输入关键词搜索物料"
|
||||
:remote-method="handleSearchMaterialDebounced"
|
||||
:loading="searchLoading"
|
||||
style="width: 100%"
|
||||
@change="onMaterialSelected"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in materialOptions"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
>
|
||||
<span style="float: left">{{ item.name }}</span>
|
||||
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.company_name }}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="物料名称" prop="material_name">
|
||||
<el-input v-model="form.material_name" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="序列号SN" prop="serial_number">
|
||||
<el-input v-model="form.serial_number" placeholder="请输入序列号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="来源类型" prop="source_table">
|
||||
<el-select v-model="form.source_table" placeholder="请选择来源类型" style="width: 100%">
|
||||
<el-option label="采购入库" value="stock_buy" />
|
||||
<el-option label="成品入库" value="stock_product" />
|
||||
<el-option label="半成品入库" value="stock_semi" />
|
||||
<el-option label="独立录入" value="independent" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="接收时间" prop="arrival_date">
|
||||
<el-date-picker
|
||||
v-model="form.arrival_date"
|
||||
type="date"
|
||||
placeholder="选择接收时间"
|
||||
value-format="YYYY-MM-DD"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="故障描述" prop="fault_description">
|
||||
<el-input v-model="form.fault_description" type="textarea" :rows="3" placeholder="请输入客户反馈的故障描述" />
|
||||
</el-form-item>
|
||||
<el-form-item label="维修人" prop="repair_manager">
|
||||
<el-input v-model="form.repair_manager" placeholder="请输入维修人" />
|
||||
</el-form-item>
|
||||
<el-form-item label="客户/来源" prop="related_contract_id">
|
||||
<el-input v-model="form.related_contract_id" placeholder="请输入客户名称或来源" />
|
||||
</el-form-item>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="成本价" prop="cost_price">
|
||||
<el-input-number v-model="form.cost_price" :precision="2" :min="0" :controls="false" style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="销售价" prop="sale_price">
|
||||
<el-input-number v-model="form.sale_price" :precision="2" :min="0" :controls="false" style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 更新维修状态弹窗 -->
|
||||
<el-dialog v-model="statusDialogVisible" title="更新维修状态" width="500px" destroy-on-close :close-on-click-modal="false">
|
||||
<el-form ref="statusFormRef" :model="statusForm" :rules="statusFormRules" label-width="100px">
|
||||
<el-form-item label="维修单号">
|
||||
<el-input :value="statusForm.repair_no" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="当前状态">
|
||||
<el-tag :type="getStatusType(statusForm.repair_status)">{{ statusForm.repair_status }}</el-tag>
|
||||
</el-form-item>
|
||||
<el-form-item label="新状态" prop="status">
|
||||
<el-select v-model="statusForm.status" placeholder="请选择新状态" style="width: 100%">
|
||||
<el-option label="待检测" value="待检测" />
|
||||
<el-option label="维修中" value="维修中" />
|
||||
<el-option label="等待配件" value="等待配件" />
|
||||
<el-option label="已修复" value="已修复" />
|
||||
<el-option label="报废转出" value="报废转出" />
|
||||
<el-option label="已出库" value="已出库" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="追加日志" prop="repair_log">
|
||||
<el-input v-model="statusForm.repair_log" type="textarea" :rows="4" placeholder="请输入维修日志或备注" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="statusDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="statusSubmitLoading" @click="handleStatusSubmit">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { Plus, Search, Refresh } from '@element-plus/icons-vue'
|
||||
import { ElMessage, ElMessageBox, ElFormRules } from 'element-plus'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { getRepairList, createRepair, updateRepairStatus, deleteRepair } from '@/api/inbound/repair'
|
||||
import { searchMaterialBase } from '@/api/inbound/buy'
|
||||
|
||||
const userStore = useUserStore()
|
||||
|
||||
// 搜索表单
|
||||
const searchForm = reactive({
|
||||
repair_no: '',
|
||||
serial_number: '',
|
||||
material_name: '',
|
||||
repair_status: ''
|
||||
})
|
||||
|
||||
// 表格数据
|
||||
const tableData = ref<any[]>([])
|
||||
const loading = ref(false)
|
||||
const pagination = reactive({
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
total: 0
|
||||
})
|
||||
|
||||
// 新增弹窗
|
||||
const dialogVisible = ref(false)
|
||||
const submitLoading = ref(false)
|
||||
const formRef = ref()
|
||||
const form = reactive({
|
||||
base_id: null as number | null,
|
||||
material_name: '',
|
||||
serial_number: '',
|
||||
source_table: 'independent',
|
||||
arrival_date: '',
|
||||
fault_description: '',
|
||||
repair_manager: '',
|
||||
related_contract_id: '',
|
||||
cost_price: undefined as number | undefined,
|
||||
sale_price: undefined as number | undefined
|
||||
})
|
||||
|
||||
// 物料搜索
|
||||
const materialOptions = ref<any[]>([])
|
||||
const searchLoading = ref(false)
|
||||
const searchKeyword = ref('')
|
||||
|
||||
// 表单校验
|
||||
const formRules: ElFormRules = [
|
||||
{ required: true, message: '请选择物料', trigger: 'change', field: 'base_id' },
|
||||
{ required: true, message: '请输入序列号', trigger: 'blur', field: 'serial_number' }
|
||||
]
|
||||
|
||||
// 状态更新弹窗
|
||||
const statusDialogVisible = ref(false)
|
||||
const statusSubmitLoading = ref(false)
|
||||
const statusFormRef = ref()
|
||||
const statusForm = reactive({
|
||||
id: 0,
|
||||
repair_no: '',
|
||||
repair_status: '',
|
||||
status: '',
|
||||
repair_log: ''
|
||||
})
|
||||
|
||||
const statusFormRules: ElFormRules = [
|
||||
{ required: true, message: '请选择新状态', trigger: 'change', field: 'status' }
|
||||
]
|
||||
|
||||
// 状态颜色映射
|
||||
const getStatusType = (status: string) => {
|
||||
const map: Record<string, string> = {
|
||||
'待检测': 'info',
|
||||
'维修中': 'warning',
|
||||
'等待配件': 'warning',
|
||||
'已修复': 'success',
|
||||
'报废转出': 'danger',
|
||||
'已出库': 'success'
|
||||
}
|
||||
return map[status] || 'info'
|
||||
}
|
||||
|
||||
// 获取数据
|
||||
const fetchData = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const params = {
|
||||
page: pagination.page,
|
||||
page_size: pagination.pageSize,
|
||||
...searchForm
|
||||
}
|
||||
const res = await getRepairList(params)
|
||||
if (res.code === 200) {
|
||||
tableData.value = res.data.list || []
|
||||
pagination.total = res.data.total || 0
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 搜索
|
||||
const handleSearch = () => {
|
||||
pagination.page = 1
|
||||
fetchData()
|
||||
}
|
||||
|
||||
// 重置
|
||||
const handleReset = () => {
|
||||
searchForm.repair_no = ''
|
||||
searchForm.serial_number = ''
|
||||
searchForm.material_name = ''
|
||||
searchForm.repair_status = ''
|
||||
handleSearch()
|
||||
}
|
||||
|
||||
// 物料搜索防抖
|
||||
let searchTimer: ReturnType<typeof setTimeout> | null = null
|
||||
const handleSearchMaterialDebounced = (query: string) => {
|
||||
if (searchTimer) clearTimeout(searchTimer)
|
||||
searchTimer = setTimeout(() => {
|
||||
handleSearchMaterial(query)
|
||||
}, 300)
|
||||
}
|
||||
|
||||
const handleSearchMaterial = async (query: string) => {
|
||||
if (!query) return
|
||||
searchLoading.value = true
|
||||
searchKeyword.value = query
|
||||
try {
|
||||
const res: any = await searchMaterialBase(query, 1)
|
||||
if (res.data) {
|
||||
materialOptions.value = res.data || []
|
||||
}
|
||||
} finally {
|
||||
searchLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 物料选中
|
||||
const onMaterialSelected = (val: number) => {
|
||||
const item = materialOptions.value.find(i => i.id === val)
|
||||
if (item) {
|
||||
form.material_name = item.name
|
||||
}
|
||||
}
|
||||
|
||||
// 新增
|
||||
const handleCreate = () => {
|
||||
// 重置表单
|
||||
form.base_id = null
|
||||
form.material_name = ''
|
||||
form.serial_number = ''
|
||||
form.source_table = 'independent'
|
||||
form.arrival_date = ''
|
||||
form.fault_description = ''
|
||||
form.repair_manager = ''
|
||||
form.related_contract_id = ''
|
||||
form.cost_price = undefined
|
||||
form.sale_price = undefined
|
||||
materialOptions.value = []
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
// 提交新增
|
||||
const handleSubmit = async () => {
|
||||
if (!formRef.value) return
|
||||
await formRef.value.validate()
|
||||
|
||||
submitLoading.value = true
|
||||
try {
|
||||
const res = await createRepair(form)
|
||||
if (res.code === 200) {
|
||||
ElMessage.success('新增成功')
|
||||
dialogVisible.value = false
|
||||
fetchData()
|
||||
} else {
|
||||
ElMessage.error(res.msg || '新增失败')
|
||||
}
|
||||
} finally {
|
||||
submitLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 更新状态
|
||||
const handleUpdateStatus = (row: any) => {
|
||||
statusForm.id = row.id
|
||||
statusForm.repair_no = row.repair_no
|
||||
statusForm.repair_status = row.repair_status || '待检测'
|
||||
statusForm.status = ''
|
||||
statusForm.repair_log = ''
|
||||
statusDialogVisible.value = true
|
||||
}
|
||||
|
||||
// 提交状态更新
|
||||
const handleStatusSubmit = async () => {
|
||||
if (!statusFormRef.value) return
|
||||
await statusFormRef.value.validate()
|
||||
|
||||
statusSubmitLoading.value = true
|
||||
try {
|
||||
const res = await updateRepairStatus({
|
||||
id: statusForm.id,
|
||||
status: statusForm.status,
|
||||
repair_log: statusForm.repair_log
|
||||
})
|
||||
if (res.code === 200) {
|
||||
ElMessage.success('状态更新成功')
|
||||
statusDialogVisible.value = false
|
||||
fetchData()
|
||||
} else {
|
||||
ElMessage.error(res.msg || '更新失败')
|
||||
}
|
||||
} finally {
|
||||
statusSubmitLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 删除
|
||||
const handleDelete = (row: any) => {
|
||||
ElMessageBox.confirm(`确定要删除维修单 ${row.repair_no} 吗？`, '警告', {
|
||||
type: 'warning',
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消'
|
||||
}).then(async () => {
|
||||
const res = await deleteRepair(row.id)
|
||||
if (res.code === 200) {
|
||||
ElMessage.success('删除成功')
|
||||
fetchData()
|
||||
} else {
|
||||
ElMessage.error(res.msg || '删除失败')
|
||||
}
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.repair-container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.search-card {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user