559 lines
18 KiB
Vue
559 lines
18 KiB
Vue
<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="sku" label="全局SKU(系统条码)" width="140" />
|
|
<el-table-column prop="material_name" label="物料名称" width="150" />
|
|
<el-table-column prop="serial_number" label="序列号(SN)" width="150" />
|
|
<el-table-column prop="customer_name" label="客户名称" width="120" />
|
|
<el-table-column prop="customer_location" label="所在地" width="150" show-overflow-tooltip />
|
|
<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="150" show-overflow-tooltip />
|
|
<el-table-column label="操作" width="280" fixed="right" align="center">
|
|
<template #default="{ row }">
|
|
<el-button v-if="userStore.hasPermission('inbound_repair:edit')" type="warning" link size="small" @click="handlePrint(row)">
|
|
<el-icon><Printer /></el-icon> 打印
|
|
</el-button>
|
|
<el-button v-if="userStore.hasPermission('inbound_repair:edit')" type="primary" link size="small" @click="handleEdit(row)">
|
|
编辑
|
|
</el-button>
|
|
<el-button v-if="userStore.hasPermission('inbound_repair:edit')" type="success" 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="dialogTitle" width="650px" destroy-on-close :close-on-click-modal="false">
|
|
<el-form ref="formRef" :model="form" :rules="formRules" label-width="100px">
|
|
<el-row :gutter="20">
|
|
<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-col :span="12">
|
|
<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-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<el-form-item label="序列号SN" prop="serial_number">
|
|
<el-input v-model="form.serial_number" placeholder="请输入或扫描序列号">
|
|
<template #append>
|
|
<el-button :icon="Camera" @click="openScanner" title="智能扫码" />
|
|
</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<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-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<el-form-item label="客户名称" prop="customer_name">
|
|
<el-input v-model="form.customer_name" placeholder="请输入客户名称" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="所在地" prop="customer_location">
|
|
<el-input v-model="form.customer_location" placeholder="请输入客户所在地" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-form-item label="故障描述" prop="fault_description">
|
|
<el-input v-model="form.fault_description" type="textarea" :rows="3" placeholder="请输入客户反馈的故障描述" />
|
|
</el-form-item>
|
|
<el-row :gutter="20">
|
|
<el-col :span="8">
|
|
<el-form-item label="维修人" prop="repair_manager">
|
|
<el-input v-model="form.repair_manager" placeholder="请输入维修人" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<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="8">
|
|
<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>
|
|
|
|
<!-- 智能扫码弹窗 -->
|
|
<SmartScannerDialog v-model="scannerDialogVisible" @confirm="handleScannerConfirm" />
|
|
|
|
<!-- 打印预览弹窗 -->
|
|
<el-dialog v-model="printVisible" title="标签打印预览" width="400px" destroy-on-close append-to-body>
|
|
<div v-loading="printLoading" class="preview-box">
|
|
<img v-if="previewUrl" :src="previewUrl" alt="打印预览" style="width: 100%" />
|
|
</div>
|
|
<p>打印机 IP: 192.168.9.205</p>
|
|
<div style="margin: 15px 0;">
|
|
<span style="font-weight: bold; color: #303133;">打印份数:</span>
|
|
<el-input-number v-model="printCopies" :min="1" :max="100" size="default" style="width: 120px; margin-left: 10px;" />
|
|
</div>
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<el-button @click="printVisible = false">取消</el-button>
|
|
<el-button type="primary" :loading="printing" @click="confirmPrint">
|
|
<el-icon><Printer /></el-icon>确认打印
|
|
</el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, reactive, onMounted, computed } from 'vue'
|
|
import dayjs from 'dayjs'
|
|
import { Plus, Search, Refresh, Printer, Camera, Edit } from '@element-plus/icons-vue'
|
|
import { ElMessage, ElMessageBox, ElFormRules } from 'element-plus'
|
|
import { useUserStore } from '@/stores/user'
|
|
import { getRepairList, createRepair, updateRepair, updateRepairStatus, deleteRepair } from '@/api/inbound/repair'
|
|
import { getLabelPreview, executePrint } from '@/api/common/print'
|
|
import SmartScannerDialog from '@/components/SmartScannerDialog.vue'
|
|
|
|
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 dialogTitle = computed(() => form.id ? '编辑维修单' : '新增维修单')
|
|
|
|
// 新增/编辑弹窗
|
|
const dialogVisible = ref(false)
|
|
const submitLoading = ref(false)
|
|
const formRef = ref()
|
|
const form = reactive({
|
|
id: undefined as number | undefined,
|
|
material_name: '',
|
|
serial_number: '',
|
|
source_table: 'independent',
|
|
arrival_date: '',
|
|
fault_description: '',
|
|
customer_name: '',
|
|
customer_location: '',
|
|
repair_manager: '',
|
|
cost_price: undefined as number | undefined,
|
|
sale_price: undefined as number | undefined
|
|
})
|
|
|
|
// 表单校验规则
|
|
const formRules: ElFormRules = [
|
|
{ required: true, message: '请输入物料名称', trigger: 'blur', field: 'material_name' },
|
|
{ required: true, message: '请输入序列号', trigger: 'blur', field: 'serial_number' },
|
|
{ required: true, message: '请输入客户名称', trigger: 'blur', field: 'customer_name' }
|
|
]
|
|
|
|
// 状态更新弹窗
|
|
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 scannerDialogVisible = ref(false)
|
|
|
|
const openScanner = () => {
|
|
scannerDialogVisible.value = true
|
|
}
|
|
|
|
const handleScannerConfirm = (result: string) => {
|
|
form.serial_number = result
|
|
scannerDialogVisible.value = false
|
|
}
|
|
|
|
// 打印相关
|
|
const printVisible = ref(false)
|
|
const printLoading = ref(false)
|
|
const printing = ref(false)
|
|
const previewUrl = ref('')
|
|
const printCopies = ref(1)
|
|
const currentPrintData = ref<any>({})
|
|
|
|
// 状态颜色映射
|
|
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()
|
|
}
|
|
|
|
// 获取默认时间
|
|
const getDefaultDate = () => {
|
|
return dayjs().format('YYYY-MM-DD')
|
|
}
|
|
|
|
// 新增 - 打开弹窗
|
|
const handleCreate = () => {
|
|
// 重置表单
|
|
form.id = undefined
|
|
form.material_name = ''
|
|
form.serial_number = ''
|
|
form.source_table = 'independent'
|
|
form.arrival_date = getDefaultDate()
|
|
form.fault_description = ''
|
|
form.customer_name = ''
|
|
form.customer_location = ''
|
|
form.repair_manager = ''
|
|
form.cost_price = undefined
|
|
form.sale_price = undefined
|
|
dialogVisible.value = true
|
|
}
|
|
|
|
// 编辑 - 打开弹窗
|
|
const handleEdit = (row: any) => {
|
|
form.id = row.id
|
|
form.material_name = row.material_name || ''
|
|
form.serial_number = row.serial_number || ''
|
|
form.source_table = row.source_table || 'independent'
|
|
form.arrival_date = row.arrival_date || getDefaultDate()
|
|
form.fault_description = row.fault_description || ''
|
|
form.customer_name = row.customer_name || ''
|
|
form.customer_location = row.customer_location || ''
|
|
form.repair_manager = row.repair_manager || ''
|
|
form.cost_price = row.cost_price ?? undefined
|
|
form.sale_price = row.sale_price ?? undefined
|
|
dialogVisible.value = true
|
|
}
|
|
|
|
// 提交新增/编辑
|
|
const handleSubmit = async () => {
|
|
if (!formRef.value) return
|
|
await formRef.value.validate()
|
|
|
|
submitLoading.value = true
|
|
try {
|
|
if (form.id) {
|
|
// 编辑
|
|
const res = await updateRepair(form.id, form)
|
|
if (res.code === 200) {
|
|
ElMessage.success('编辑成功')
|
|
dialogVisible.value = false
|
|
fetchData()
|
|
} else {
|
|
ElMessage.error(res.msg || '编辑失败')
|
|
}
|
|
} else {
|
|
// 新增
|
|
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(() => {})
|
|
}
|
|
|
|
// 打印标签
|
|
const handlePrint = async (row: any) => {
|
|
printVisible.value = true
|
|
printLoading.value = true
|
|
printCopies.value = 1
|
|
|
|
currentPrintData.value = {
|
|
sku: row.sku,
|
|
material_name: row.material_name,
|
|
serial_number: row.serial_number,
|
|
repair_no: row.repair_no
|
|
}
|
|
|
|
try {
|
|
const res: any = await getLabelPreview(currentPrintData.value)
|
|
previewUrl.value = res.data
|
|
} catch (e) {
|
|
ElMessage.error('预览失败')
|
|
} finally {
|
|
printLoading.value = false
|
|
}
|
|
}
|
|
|
|
// 确认打印
|
|
const confirmPrint = async () => {
|
|
printing.value = true
|
|
try {
|
|
await executePrint({ ...currentPrintData.value, copies: printCopies.value })
|
|
ElMessage.success(`打印指令已发送 (x${printCopies.value})`)
|
|
printVisible.value = false
|
|
} catch (e: any) {
|
|
ElMessage.error(e.msg || '打印失败')
|
|
} finally {
|
|
printing.value = false
|
|
}
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
.preview-box {
|
|
min-height: 200px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #f5f7fa;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.dialog-footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 10px;
|
|
}
|
|
</style> |