<template>
<div class="app-container">
<h2 style="text-align: center;">生产规格书</h2>
<!-- 表单编辑 -->
<el-form label-width="180px" :model="form" label-position="left">
<!-- 客户信息 -->
<el-form-item label="客户名称">
<el-input v-model="form.customer_name" />
</el-form-item>
<el-form-item label="项目名称">
<el-input v-model="form.project_name" />
</el-form-item>
<el-form-item label="成品料号">
<el-input v-model="form.battery_finished_part_number" />
</el-form-item>
<el-form-item label="半成品料号">
<el-input v-model="form.pcb_semi_finished_part_number" />
</el-form-item>
<el-form-item label="保密等级">
<el-radio-group v-model="form.confidential_level">
<el-radio label="绝密">绝密</el-radio>
<el-radio label="机密">机密</el-radio>
<el-radio label="内部公开">内部公开</el-radio>
<el-radio label="外部公开">外部公开</el-radio>
</el-radio-group>
</el-form-item>
<!-- 文件修正记录 -->
<el-form-item label="文件修正记录">
<el-table :data="form.revision_records" border>
<el-table-column prop="version" label="版次">
<template slot-scope="{ row }">
<el-input v-model="row.version" />
</template>
</el-table-column>
<el-table-column prop="change_date" label="变更日期">
<template slot-scope="{ row }">
<el-date-picker v-model="row.change_date" type="date" />
</template>
</el-table-column>
<el-table-column prop="change_description" label="变更内容">
<template slot-scope="{ row }">
<el-input v-model="row.change_description" />
</template>
</el-table-column>
<el-table-column prop="prepared_by" label="拟制">
<template slot-scope="{ row }">
<el-input v-model="row.prepared_by" />
</template>
</el-table-column>
<el-table-column prop="reviewed_by" label="审核">
<template slot-scope="{ row }">
<el-input v-model="row.reviewed_by" />
</template>
</el-table-column>
<el-table-column prop="approved_by" label="批准">
<template slot-scope="{ row }">
<el-input v-model="row.approved_by" />
</template>
</el-table-column>
</el-table>
</el-form-item>
<!-- 硬件版本 -->
<el-form-item label="2.1 硬件版本">
<el-table :data="form.hardware_versions" border>
<el-table-column prop="pcb" label="PCB">
<template slot-scope="{ row }">
<el-input v-model="row.pcb" />
</template>
</el-table-column>
<el-table-column prop="silk_screen" label="丝印">
<template slot-scope="{ row }">
<el-input v-model="row.silk_screen" />
</template>
</el-table-column>
<el-table-column prop="part_number" label="料号">
<template slot-scope="{ row }">
<el-input v-model="row.part_number" />
</template>
</el-table-column>
<el-table-column label="备注">
<template slot-scope="{ row }">
<el-input v-model="row.remark" />
</template>
</el-table-column>
</el-table>
</el-form-item>
<!-- 电芯配组要求 -->
<el-form-item label="5.1 电芯配组要求">
<el-table :data="form.cell_group_requirements" border>
<el-table-column prop="check_item" label="检查项">
<template slot-scope="{ row }">
<el-input v-model="row.check_item" />
</template>
</el-table-column>
<el-table-column prop="requirement" label="要求">
<template slot-scope="{ row }">
<el-input v-model="row.requirement" />
</template>
</el-table-column>
<el-table-column label="备注">
<template slot-scope="{ row }">
<el-input v-model="row.remark" />
</template>
</el-table-column>
</el-table>
</el-form-item>
<!-- PCM组装上电顺序 -->
<el-form-item label="5.2 PCM组装上电顺序">
<el-input v-model="form.cell_power_on_sequence" type="textarea" :rows="3" />
</el-form-item>
<!-- 功能测试及检验标准 -->
<el-form-item label="5.4 功能测试及检验标准">
<el-table :data="form.function_test_specs" border>
<el-table-column prop="test_item" label="测试项目">
<template slot-scope="{ row }">
<el-input v-model="row.test_item" />
</template>
</el-table-column>
<el-table-column prop="requirement" label="性能要求">
<template slot-scope="{ row }">
<el-input v-model="row.requirement" />
</template>
</el-table-column>
<el-table-column prop="mandatory" label="必检项">
<template slot-scope="{ row }">
<el-select v-model="row.mandatory" placeholder="请选择">
<el-option label="是" value="是" />
<el-option label="否" value="否" />
</el-select>
</template>
</el-table-column>
<el-table-column prop="sampling" label="抽检项">
<template slot-scope="{ row }">
<el-select v-model="row.sampling" placeholder="请选择">
<el-option label="是" value="是" />
<el-option label="否" value="否" />
</el-select>
</template>
</el-table-column>
</el-table>
</el-form-item>
<!-- 图片上传 -->
<el-form-item label="3 PCB贴片图 - 顶面">
<el-upload
action="#"
list-type="picture-card"
:auto-upload="false"
:limit="1"
:on-preview="handlePreview"
>
<i class="el-icon-plus"></i>
</el-upload>
</el-form-item>
<el-form-item label="3 PCB贴片图 - 底面">
<el-upload
action="#"
list-type="picture-card"
:auto-upload="false"
:limit="1"
:on-preview="handlePreview"
>
<i class="el-icon-plus"></i>
</el-upload>
</el-form-item>
<!-- 附录图片 -->
<el-form-item label="附录一 NTC阻值表">
<el-upload
action="#"
list-type="picture-card"
:auto-upload="false"
:limit="1"
:on-preview="handlePreview"
>
<i class="el-icon-plus"></i>
</el-upload>
</el-form-item>
<el-form-item label="附录二 NTC阻值表">
<el-upload
action="#"
list-type="picture-card"
:auto-upload="false"
:limit="1"
:on-preview="handlePreview"
>
<i class="el-icon-plus"></i>
</el-upload>
</el-form-item>
<!-- 预览按钮 -->
<el-button type="primary" @click="previewDocument">预览文档</el-button>
</el-form>
<!-- 预览区域 -->
<div v-if="showPreview" class="document-preview">
<h3>文档预览</h3>
<pre>
客户名称:{{ form.customer_name }}
项目名称:{{ form.project_name }}
成品料号:{{ form.battery_finished_part_number }}
半成品料号:{{ form.pcb_semi_finished_part_number }}
保密等级:{{ form.confidential_level }}
文件修正记录:
{{ form.revision_records.map(r => `版次: ${r.version}, 变更日期: ${r.change_date}, 内容: ${r.change_description}, 拟制: ${r.prepared_by}, 审核: ${r.reviewed_by}, 批准: ${r.approved_by}`).join('\n') }}
2.1 硬件版本:
{{ form.hardware_versions.map(h => `PCB: ${h.pcb}, 丝印: ${h.silk_screen}, 料号: ${h.part_number}, 备注: ${h.remark}`).join('\n') }}
5.1 电芯配组要求:
{{ form.cell_group_requirements.map(c => `检查项: ${c.check_item}, 要求: ${c.requirement}, 备注: ${c.remark}`).join('\n') }}
5.2 PCM组装上电顺序:
{{ form.cell_power_on_sequence }}
5.4 功能测试及检验标准:
{{ form.function_test_specs.map(f => `测试项: ${f.test_item}, 要求: ${f.requirement}, 必检: ${f.mandatory}, 抽检: ${f.sampling}`).join('\n') }}
</pre>
</div>
<!-- 搜索与操作按钮 -->
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="物料编号">
<el-input v-model="queryParams.materialCode" placeholder="请输入物料编号" />
</el-form-item>
<el-form-item label="项目名称">
<el-input v-model="queryParams.projectName" placeholder="请输入项目名称" />
</el-form-item>
<el-form-item label="文档版本">
<el-input v-model="queryParams.dataVersion" placeholder="请输入文档版本号" />
</el-form-item>
<el-button @click="handleQuery">搜索</el-button>
<el-button @click="resetQuery">重置</el-button>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button @click="handleAdd">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button @click="handleUpdate">修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button @click="handleDelete">删除</el-button>
</el-col>
</el-row>
<!-- 数据表格 -->
<el-table :data="dataList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="30" align="center" />
<el-table-column label="ID" prop="id" width="50" />
<el-table-column label="物料编号" prop="materialCode" />
<el-table-column label="项目名称" prop="projectName" />
<el-table-column label="文档版本" prop="dataVersion" />
<el-table-column label="更新时间" prop="updateTime" />
<el-table-column label="操作" width="160">
<template slot-scope="scope">
<el-button @click="handleUpdate(scope.row)">修改</el-button>
<el-button @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 弹窗表单 -->
<el-dialog :title="title" :visible.sync="open" width="500px">
<el-form ref="form" :model="form" label-width="80px">
<!-- 表单字段 -->
</el-form>
<div slot="footer">
<el-button @click="open = false">取消</el-button>
<el-button type="primary" @click="submitForm">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: "ProductionSpecification",
data() {
return {
showPreview: false,
showSearch: true,
open: false,
title: "",
dataList: [],
total: 0,
queryParams: {
pageNum: 1,
pageSize: 10,
materialCode: null,
projectName: null,
dataVersion: null
},
form: {
customer_name: "",
project_name: "",
battery_finished_part_number: "",
pcb_semi_finished_part_number: "",
confidential_level: "内部公开",
revision_records: [
{ version: "", change_date: "", change_description: "", prepared_by: "", reviewed_by: "", approved_by: "" }
],
hardware_versions: [
{ pcb: "主板", silk_screen: "", part_number: "", remark: "" },
{ pcb: "采集板", silk_screen: "/", part_number: "/", remark: "" },
{ pcb: "灯板", silk_screen: "/", part_number: "/", remark: "" }
],
cell_group_requirements: [
{ check_item: "电芯型号", requirement: "", remark: "" },
{ check_item: "内阻差", requirement: "", remark: "" },
{ check_item: "电压差", requirement: "", remark: "" },
{ check_item: "容量差", requirement: "", remark: "" },
{ check_item: "档位/批次", requirement: "", remark: "" }
],
function_test_specs: [
{ test_item: "充电过流保护", requirement: "", mandatory: "否", sampling: "是" },
{ test_item: "放电过流保护1", requirement: "", mandatory: "否", sampling: "是" },
{ test_item: "短路保护", requirement: "", mandatory: "是", sampling: "否" }
],
cell_power_on_sequence: ""
}
};
},
methods: {
previewDocument() {
this.showPreview = true;
},
handlePreview(file) {
console.log("预览图片", file);
},
handleQuery() {
this.getList();
},
resetQuery() {
this.queryParams = {
pageNum: 1,
pageSize: 10,
materialCode: null,
projectName: null,
dataVersion: null
};
this.getList();
},
getList() {
// 模拟数据
this.dataList = [
{
id: 1,
materialCode: "MAT001",
projectName: "项目A",
dataVersion: "V1.0",
updateTime: "2024-01-01"
}
];
this.total = this.dataList.length;
},
handleSelectionChange(selection) {
// 多选数据
},
handleAdd() {
this.title = "新增生产规格书";
this.open = true;
},
handleUpdate(row) {
this.title = "修改生产规格书";
this.form = { ...row };
this.open = true;
},
handleDelete(row) {
this.$confirm("是否确认删除?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
// 删除逻辑
this.getList();
});
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]));
},
submitForm() {
this.open = false;
this.getList();
}
}
};
</script>
<style scoped>
.app-container {
max-width: 1200px;
margin: auto;
padding: 20px;
background-color: #f9f9f9;
}
.document-preview {
margin-top: 20px;
padding: 15px;
background-color: #fff;
border: 1px solid #ddd;
white-space: pre-wrap;
font-family: monospace;
}
</style>
编辑区应该是弹窗的形式,要完善搜索栏,表格,分页按钮,操作列