<template>
|
<div class="app-container">
|
<!-- 查询区域 -->
|
<div class="search-form">
|
<el-form :model="searchForm" inline size="small">
|
<el-form-item label="报告编号">
|
<el-input v-model="searchForm.reportNo" placeholder="请输入报告编号" clearable></el-input>
|
</el-form-item>
|
<el-form-item label="产品名称">
|
<el-input v-model="searchForm.productName" placeholder="请输入产品名称" clearable></el-input>
|
</el-form-item>
|
<el-form-item label="登记时间">
|
<el-date-picker v-model="searchForm.registerDate" type="date" placeholder="选择日期" clearable></el-date-picker>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="searchList">查询</el-button>
|
<el-button @click="resetSearch">重置</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
|
<!-- 操作按钮 -->
|
<div class="btn-container">
|
<el-button type="primary" icon="el-icon-plus" @click="openAddDia">新增登记</el-button>
|
<el-button type="danger" icon="el-icon-delete" @click="handleDelete" :disabled="selectedIds.length === 0">批量删除</el-button>
|
</div>
|
|
<!-- 数据表格 -->
|
<el-table v-loading="tableLoading" :data="tableData" @selection-change="handleSelectionChange" border>
|
<el-table-column type="selection" width="55"></el-table-column>
|
<el-table-column label="报告编号" prop="reportNo" show-overflow-tooltip></el-table-column>
|
<el-table-column label="产品名称" prop="productName" show-overflow-tooltip></el-table-column>
|
<el-table-column label="规格型号" prop="specModel" show-overflow-tooltip></el-table-column>
|
<el-table-column label="不合格描述" prop="unqualifiedDesc" show-overflow-tooltip></el-table-column>
|
<el-table-column label="检验人员" prop="inspector" show-overflow-tooltip></el-table-column>
|
<el-table-column label="登记时间" prop="registerDate" show-overflow-tooltip></el-table-column>
|
<el-table-column label="状态" prop="status">
|
<template slot-scope="scope">
|
<el-tag :type="scope.row.status === '0' ? 'warning' : 'success'">
|
{{ scope.row.status === '0' ? '待审核' : '已审核' }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="180">
|
<template slot-scope="scope">
|
<el-button type="text" @click="viewDetail(scope.row)">查看</el-button>
|
<el-button type="text" @click="openEditDia(scope.row)">编辑</el-button>
|
<el-button type="text" @click="handleSingleDelete(scope.row)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<!-- 分页 -->
|
<el-pagination
|
:current-page="page.current"
|
:page-size="page.size"
|
:total="page.total"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
layout="total, sizes, prev, pager, next, jumper">
|
</el-pagination>
|
|
<!-- 新增/编辑弹窗 -->
|
<el-dialog :title="isEdit ? '编辑不良品登记' : '新增不良品登记'" :visible.sync="formVisible" width="500px">
|
<el-form :model="formData" label-width="100px" size="small">
|
<el-form-item label="报告编号" prop="reportNo">
|
<el-input v-model="formData.reportNo" placeholder="请输入报告编号"></el-input>
|
</el-form-item>
|
<el-form-item label="产品名称" prop="productName">
|
<el-input v-model="formData.productName" placeholder="请输入产品名称"></el-input>
|
</el-form-item>
|
<el-form-item label="规格型号" prop="specModel">
|
<el-input v-model="formData.specModel" placeholder="请输入规格型号"></el-input>
|
</el-form-item>
|
<el-form-item label="生产厂家" prop="manufacturer">
|
<el-input v-model="formData.manufacturer" placeholder="请输入生产厂家"></el-input>
|
</el-form-item>
|
<el-form-item label="原材料信息" prop="materialInfo">
|
<el-input v-model="formData.materialInfo" placeholder="请输入原材料信息"></el-input>
|
</el-form-item>
|
<el-form-item label="不合格描述" prop="unqualifiedDesc">
|
<el-textarea v-model="formData.unqualifiedDesc" :rows="3" placeholder="请输入不合格描述"></el-textarea>
|
</el-form-item>
|
<el-form-item label="检验人员" prop="inspector">
|
<el-input v-model="formData.inspector" placeholder="请输入检验人员"></el-input>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="formVisible = false">取消</el-button>
|
<el-button type="primary" @click="submitForm" :loading="submitLoading">确定</el-button>
|
</div>
|
</el-dialog>
|
|
<!-- 详情弹窗 -->
|
<el-dialog title="不良品登记详情" :visible.sync="detailVisible" width="600px">
|
<el-form :model="detailData" label-width="120px" size="small" disabled>
|
<el-form-item label="报告编号">
|
<span>{{ detailData.reportNo }}</span>
|
</el-form-item>
|
<el-form-item label="产品名称">
|
<span>{{ detailData.productName }}</span>
|
</el-form-item>
|
<el-form-item label="规格型号">
|
<span>{{ detailData.specModel }}</span>
|
</el-form-item>
|
<el-form-item label="生产厂家">
|
<span>{{ detailData.manufacturer }}</span>
|
</el-form-item>
|
<el-form-item label="原材料信息">
|
<span>{{ detailData.materialInfo }}</span>
|
</el-form-item>
|
<el-form-item label="不合格描述">
|
<span>{{ detailData.unqualifiedDesc }}</span>
|
</el-form-item>
|
<el-form-item label="检验人员">
|
<span>{{ detailData.inspector }}</span>
|
</el-form-item>
|
<el-form-item label="登记时间">
|
<span>{{ detailData.registerDate }}</span>
|
</el-form-item>
|
<el-form-item label="审核状态">
|
<el-tag :type="detailData.status === '0' ? 'warning' : 'success'">
|
{{ detailData.status === '0' ? '待审核' : '已审核' }}
|
</el-tag>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="detailVisible = false">关闭</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import {
|
pageDefectiveProduct,
|
addDefectiveProduct,
|
updateDefectiveProduct,
|
deleteDefectiveProduct,
|
getDefectiveProduct,
|
} from "@/api/quality/defectiveProduct";
|
|
export default {
|
name: "DefectiveProduct",
|
data() {
|
return {
|
searchForm: {
|
reportNo: "",
|
productName: "",
|
registerDate: "",
|
},
|
tableData: [],
|
tableLoading: false,
|
page: {
|
current: 1,
|
size: 20,
|
total: 0,
|
},
|
selectedIds: [],
|
formVisible: false,
|
isEdit: false,
|
formData: {
|
id: null,
|
reportNo: "",
|
productName: "",
|
specModel: "",
|
manufacturer: "",
|
materialInfo: "",
|
unqualifiedDesc: "",
|
inspector: "",
|
},
|
submitLoading: false,
|
detailVisible: false,
|
detailData: {},
|
};
|
},
|
mounted() {
|
this.searchList();
|
},
|
methods: {
|
searchList() {
|
this.tableLoading = true;
|
pageDefectiveProduct({
|
...this.searchForm,
|
page: this.page.current,
|
size: this.page.size,
|
}).then((res) => {
|
this.tableData = res.data.records;
|
this.page.total = res.data.total;
|
this.tableLoading = false;
|
}).catch((err) => {
|
this.tableLoading = false;
|
console.error(err);
|
});
|
},
|
resetSearch() {
|
this.searchForm = {
|
reportNo: "",
|
productName: "",
|
registerDate: "",
|
};
|
this.searchList();
|
},
|
handleSizeChange(val) {
|
this.page.size = val;
|
this.searchList();
|
},
|
handleCurrentChange(val) {
|
this.page.current = val;
|
this.searchList();
|
},
|
handleSelectionChange(val) {
|
this.selectedIds = val.map((item) => item.id);
|
},
|
openAddDia() {
|
this.isEdit = false;
|
this.formData = {
|
id: null,
|
reportNo: "",
|
productName: "",
|
specModel: "",
|
manufacturer: "",
|
materialInfo: "",
|
unqualifiedDesc: "",
|
inspector: "",
|
};
|
this.formVisible = true;
|
},
|
openEditDia(row) {
|
this.isEdit = true;
|
this.formData = { ...row };
|
this.formVisible = true;
|
},
|
submitForm() {
|
if (!this.formData.reportNo) {
|
this.$message.error("请输入报告编号");
|
return;
|
}
|
if (!this.formData.productName) {
|
this.$message.error("请输入产品名称");
|
return;
|
}
|
this.submitLoading = true;
|
const api = this.isEdit ? updateDefectiveProduct : addDefectiveProduct;
|
api(this.formData).then((res) => {
|
if (res.code === 200) {
|
this.$message.success(this.isEdit ? "修改成功" : "新增成功");
|
this.formVisible = false;
|
this.searchList();
|
} else {
|
this.$message.error(res.msg || "操作失败");
|
}
|
this.submitLoading = false;
|
}).catch((err) => {
|
this.submitLoading = false;
|
console.error(err);
|
});
|
},
|
viewDetail(row) {
|
getDefectiveProduct({ id: row.id }).then((res) => {
|
this.detailData = res.data;
|
this.detailVisible = true;
|
}).catch((err) => {
|
console.error(err);
|
});
|
},
|
handleDelete() {
|
this.$confirm("确定删除选中的记录吗？", "提示", {
|
type: "warning",
|
}).then(() => {
|
deleteDefectiveProduct({ ids: this.selectedIds.join(",") }).then((res) => {
|
if (res.code === 200) {
|
this.$message.success("删除成功");
|
this.searchList();
|
} else {
|
this.$message.error(res.msg || "删除失败");
|
}
|
}).catch((err) => {
|
console.error(err);
|
});
|
}).catch(() => {});
|
},
|
handleSingleDelete(row) {
|
this.$confirm("确定删除该记录吗？", "提示", {
|
type: "warning",
|
}).then(() => {
|
deleteDefectiveProduct({ ids: row.id }).then((res) => {
|
if (res.code === 200) {
|
this.$message.success("删除成功");
|
this.searchList();
|
} else {
|
this.$message.error(res.msg || "删除失败");
|
}
|
}).catch((err) => {
|
console.error(err);
|
});
|
}).catch(() => {});
|
},
|
},
|
};
|
</script>
|
|
<style scoped>
|
.search-form {
|
margin-bottom: 15px;
|
}
|
|
.btn-container {
|
margin-bottom: 15px;
|
}
|
|
.dialog-footer {
|
text-align: right;
|
}
|
</style>
|
