<td>

■ 定义

标签用于定义表格中的单元格

td代表单词table data cell,意为表格中的一个单元格

■ 使用说明

必须嵌套在<tr>标签中

可以做合并单元格操作,包括跨行合并和跨列合并

■ 示例

<table>
    <tr>
        <th>...</th>  
    </tr>
    <tr>
        <td>...</td>  
    </tr>
    ...
</table>

■ 属性

□ rowspan属性

定义:用于跨行合并

值:列数,正整数

<td rowspan="合并单元格的个数">...</td>

□ colspan属性

定义:用于跨列合并

值:列数,正整数

<td colspan="合并单元格的个数">...</td>

■ 合并单元格

□ 跨行合并

rowspan="合并单元格的个数"

□ 跨列合并

colspan="合并单元格的个数"

□ 目标单元格

跨行合并:最上侧单元格为目标单元格,写合并代码

跨列合并:最左侧单元格为目标单元格,写合并代码

□ 合并单元格三部曲

  1) 先确定是跨行还是跨列合并

  2) 找到目标单元格,写上合并方式=合并的单元格数量

  3) 删除多余的单元格

□ 示例

<table border="1" align="center" cellpadding="0" cellspacing="0" width="1000" height="500">
    <tr>
        <td></td>
        <td colspan="2"></td>
    </tr>
    <tr>
        <td rowspan="2"></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

 效果:

<template> <div class="app-container"> <!-- 搜索表单 --> <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="90px"> <el-form-item label="客户名称" prop="customerName"> <input type="text" v-model="queryParams.customerName" placeholder="请输入客户名称" clearable size="small" @keyup.enter.native="handleQuery"/> </el-form-item> <el-form-item label="项目名称" prop="projectName"> <input type="text" v-model="queryParams.projectName" placeholder="请输入项目名称" clearable size="small" @keyup.enter.native="handleQuery"/> </el-form-item> <el-form-item label="成品料号" prop="batteryFinishedPartNumber"> <input type="text" v-model="queryParams.batteryFinishedPartNumber" placeholder="请输入成品料号" clearable size="small" @keyup.enter.native="handleQuery"/> </el-form-item> <el-form-item label="半成品料号" prop="pcbSemiFinishedPartNumber"> <input type="text" v-model="queryParams.pcbSemiFinishedPartNumber" placeholder="请输入半成品料号" clearable size="small" @keyup.enter.native="handleQuery"/> </el-form-item> <el-form-item label="丝印" prop="mainBoardSilkScreen"> <input type="text" v-model="queryParams.mainBoardSilkScreen" placeholder="请输入丝印" clearable size="small" @keyup.enter.native="handleQuery"/> </el-form-item> <el-form-item label="文档版次" prop="materialColor"> <input type="text" v-model="queryParams.materialColor" placeholder="请输入文档版次" clearable size="small" @keyup.enter.native="handleQuery"/> </el-form-item> <el-form-item> <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> </el-form-item> </el-form> <!-- 操作按钮 --> <el-row :gutter="10" class="mb8"> <el-col :span="1.5"> <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['cms:specificationdata:add']">新增</el-button> </el-col> <el-col :span="1.5"> <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['cms:specificationdata:edit']">修改</el-button> </el-col> <el-col :span="1.5"> <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['cms:specificationdata:remove']">删除</el-button> </el-col> <el-col :span="1.5"> <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['cms:specificationdata:export']">导出列表</el-button> </el-col> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"/> </el-row> <!-- 表 --> <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="30" align="center"/> <el-table-column label="ID" fixed="left" width="50" prop="id" align="center"/> <el-table-column label="项目名称" fixed="left" prop="projectName" align="center" sortable width="130"/> <el-table-column label="电芯品牌" prop="cellBrand" align="center" width="130"/> <el-table-column label="电芯型号" prop="cellModel" align="center"/> <el-table-column label="丝印" prop="mainBoardSilkScreen" align="center" width="130"/> <el-table-column label="料号" prop="mainBoardPartNumber" align="center" width="100"/> <el-table-column label="客户名称" prop="customerName" align="center"/> <el-table-column label="文档版次" prop="revision" align="center"/> <el-table-column label="更新人" prop="updateBy" align="center" width="100" sortable/> <el-table-column label="更新时间" prop="updateTime" align="center" width="100" sortable> <template slot-scope="scope"> <span>{{ parseTime(scope.row.updateTime || scope.row.createTime) }}</span> </template> </el-table-column> <el-table-column label="PCB顶图" align="center" width="150"> <template slot-scope="scope"> <el-button v-if="scope.row.pcbPlacementDiagramTopImg" type="text" icon="el-icon-document" @click="previewFile(scope.row.pcbPlacementDiagramTopImg)">查看顶图</el-button> <span v-else>—</span> </template> </el-table-column> <el-table-column label="PCB底图" align="center" width="150"> <template slot-scope="scope"> <el-button v-if="scope.row.pcbPlacementDiagramBottomImg" type="text" icon="el-icon-document" @click="previewFile(scope.row.pcbPlacementDiagramBottomImg)">查看底图</el-button> <span v-else>—</span> </template> </el-table-column> <el-table-column label="操作" align="center" fixed="right" width="160"> <template slot-scope="scope"> <el-button size="mini" type="text" icon="el-icon-download" @click="handleExportWord(scope.row)" v-hasPermi="['cms:specificationdata:export']">导出</el-button> <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['cms:specificationdata:edit']">修改</el-button> <el-button size="mini" type="text" icon="el-icon-document-copy" @click="handleCopy(scope.row)" v-hasPermi="['cms:specificationdata:add']">复制</el-button> <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['cms:specificationdata:remove']">删除</el-button> <el-button size="mini" type="text" icon="el-icon-download" v-show="scope.row.dwgLocalPath" @click="handleDownload(scope.row)" v-hasPermi="['cms:specificationdata:export']">下载附件</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" :before-close="cancel" :close-on-click-modal="false" width="95%" top="5vh" append-to-body > <el-tabs type="border-card"> <h1 style="text-align: center; margin-bottom: 100px;">生产规书</h1> <!-- 基本信息 --> <el-row :gutter="20"> <el-col :span="6"> <div class="grid-content"> <label class="label-cell">客户名称:</label> <input type="text" v-model="specForm.customerName" /> </div> </el-col> <el-col :span="6"> <div class="grid-content"> <label class="label-cell">项目名称:</label> <input type="text" v-model="specForm.projectName" /> </div> </el-col> <el-col :span="6"> <div class="grid-content"> <label class="label-cell">成品料号:</label> <input type="text" v-model="specForm.batteryFinishedPartNumber" /> </div> </el-col> <el-col :span="6"> <div class="grid-content"> <label class="label-cell">半成品料号:</label> <input type="text" v-model="specForm.pcbSemiFinishedPartNumber" /> </div> </el-col> </el-row> <!-- 保密等级 --> <h4>保密等级:</h4> <div style="text-align: center; margin: 20px;"> <label> <input type="radio" disabled> 绝密 </label>    <label> <input type="radio" disabled> 机密 </label>    <label> <input type="radio" checked disabled> 内部公开 </label>    <label> <input type="radio" disabled> 外部公开 </label> </div> <!-- 审批信息 --> <h4>审批信息</h4> <table class="spec-table"> <tr> <th>拟制/日期<br>电子工程师</th> <th>审核/日期<br>直接上级</th> <th>审核/日期<br>DQE</th> <th>审核/日期<br>NPI</th> <th>批准/日期<br>经理</th> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> <!-- 文件修正记录 --> <h4>文件修正记录</h4> <div id="app"> <table class="spec-table"> <thead> <tr> <th>序号</th> <th>版次</th> <th>变更日期</th> <th>变更内容</th> <th>拟制</th> <th>审核</th> <th>批准</th> </tr> </thead> <tbody> <tr v-for="(item, index) in versionRecordList" :key="item.id"> <td>{{ index + 1 }}</td> <td><input type="text" v-model="item.revision" /></td> <td><input type="text" v-model="item.updateTime" /></td> <td><input type="text" v-model="item.changeDescription" /></td> <td><input type="text" v-model="item.updateBy" /></td> <td><input type="text" v-model="item.reviewedBy" /></td> <td><input type="text" v-model="item.approvedBy" /></td> </tr> </tbody> </table> <div style="text-align: center"> <button @click="addRow">+</button> </div> </div> <hr class="divider"> <!-- 目录 --> <div class="directory-container"> <h2>目录</h2> <ul class="spec-directory"> <li>1 引言</li> <li>1.1 编写目的</li> <li>1.2 适用范围</li> <li>2 版本说明</li> <li>2.1 硬件版本</li> <li>2.2 软件版本</li> <li>2.3 上位机软件版本</li> <li>3 PCB贴片图</li> <li>4 PCM测试及检验规范</li> <li>4.1 PCM端口示意图</li> <li>4.2 烧录</li> <li>4.3 PCM测试</li> <li>4.4 PCBA半成品工艺要求</li> <li>5 半成品测试及检验规范</li> <li>5.1 电芯配组要求</li> <li>5.2 PCM组装上电顺序</li> <li>5.3 输出端口定义</li> <li>5.4 功能测试及检验标准</li> <li>6 成品测试及检验规范</li> <li>6.1 成品检测项目及标准</li> <li>6.2 成品结构尺寸</li> <li>6.3 成品打码规则</li> <li>6.4 追溯要求</li> <li>附录一</li> <li>附录二</li> </ul> </div> <hr class="divider"> <!-- 引言 --> <h3>1 引言</h3> <p>本文主要描述该项目产品的生产性能要求说明,明确整个产品在PCM、半成品、成品的性能测试标准及要求。</p> <h4>1.1 编写目的</h4> <p>本文档描述了本产品的生产过程性能测试要求及标准、工艺要求等。方便生产相关人员对本产品的制造和检验。</p> <h4>1.2 适用范围</h4> <p>本规书适用于欣动能源科技有限公司设计的产品生产技术规范,适用于与之相关的生产和检验。</p> <hr class="divider"> <!-- 版本说明 --> <h4>2 版本说明</h4> <h5>2.1 硬件版本</h5> <table class="spec-table"> <thead> <tr> <th>序号</th> <th>PCB</th> <th>丝印</th> <th>料号</th> <th>备注</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>主板</td> <td><input type="text" v-model="specForm.mainBoardSilkScreen" /></td> <td><input type="text" v-model="specForm.mainBoardPartNumber" /></td> <td></td> </tr> <tr> <td>2</td> <td>采集板</td> <td>/</td> <td>/</td> <td></td> </tr> <tr> <td>3</td> <td>灯板</td> <td>/</td> <td>/</td> <td></td> </tr> </tbody> </table> <h5>2.2 软件版本</h5> <table class="spec-table"> <thead> <tr> <th>序号</th> <th>PCM</th> <th>软件</th> <th>版本信息</th> <th>备注</th> </tr> </thead> <tbody> <tr><td>1</td><td rowspan="10">主板</td><td>Bootloader</td><td>/</td><td></td></tr> <tr><td>2</td><td>应用程序</td><td>/</td><td></td></tr> <tr><td>3</td><td>一体程序</td><td>/</td><td></td></tr> <tr><td rowspan="3">4</td><td rowspan="3">固件信息</td> <td>/</td><td rowspan="3"></td> </tr> <tr><td>/</td></tr> <tr><td>/</td></tr> <tr><td>5</td><td>烧录芯片选型</td><td>/</td><td></td></tr> <tr><td>6</td><td>固件烧录软件</td><td>/</td><td></td></tr> <tr><td>7</td><td>通讯设备</td><td>/</td><td></td></tr> </tbody> </table> <h5>2.3 上位机软件版本</h5> <h5 style="text-align: center;">生产上位机</h5> <table class="spec-table"> <thead> <tr> <th>序号</th> <th>上位机</th> <th>版本</th> <th>备注</th> </tr> </thead> <tbody> <tr><td>1</td><td>Bin对比上位机</td><td>/</td><td></td></tr> <tr><td>2</td><td>通讯/升级上位机</td><td>/</td><td></td></tr> <tr><td>3</td><td>自动对比上位机</td><td>/</td><td></td></tr> <tr><td>4</td><td>通信设备</td><td>/</td><td></td></tr> </tbody> </table> <h5 style="text-align: center;">生产文件</h5> <table class="spec-table"> <thead> <tr> <th>序号</th> <th>上位机</th> <th>版本</th> <th>备注</th> </tr> </thead> <tbody> <tr><td>1</td><td>Bin对比上位机</td><td>/</td><td></td></tr> <tr><td>2</td><td>通讯/升级上位机模板</td><td>/</td><td></td></tr> <tr><td>3</td><td>PCM自动对比模板</td><td>/</td><td></td></tr> <tr><td>4</td><td>半成品自动对比模板</td><td>/</td><td></td></tr> <tr><td>4</td><td>成品自动对比模板</td><td>/</td><td></td></tr> </tbody> </table> <!-- PCB贴片图 --> <hr class="divider"> <h4>3 PCB贴片图</h4> <div> <label>顶面</label> <input type="file" @change="uploadPcbTopImage" /> <label>底面</label> <input type="file" @change="uploadPcbBottomImage" /> </div> <!-- PCM测试及检验规范 --> <hr class="divider"> <h4>4 PCM测试及检验规范</h4> <h5>4.1 PCM端口示意图</h5> <input type="file" @change="uploadPcmPortImage" /> <hr class="divider"> <h5>4.2 烧录</h5> <p>不涉及</p> <hr class="divider"> <h5>4.3 PCM测试</h5> <table class="spec-table"> <thead> <tr> <th colspan="2">检验项目</th> <th>性能要求</th> <th>必检项</th> <th>抽检项</th> <th>备注</th> </tr> </thead> <tbody> <tr> <td rowspan="16">充电保护</td> <td>过充电保护电压</td> <td>4.175±0.025V</td> <td><input type="checkbox" checked disabled /></td> <td><input type="checkbox" disabled/></td> <td>每节电芯</td> </tr> <tr> <td>过充电保护延时</td> <td>1.0±0.5S</td> <td><input type="checkbox" checked disabled /></td> <td><input type="checkbox" disabled/></td> <td></td> </tr> <tr> <td>过充电保护释放电压</td> <td>4.075±0.025V</td> <td><input type="checkbox" checked disabled /></td> <td><input type="checkbox" disabled/></td> <td>每节电芯</td> </tr> <tr> <td>过充电保护电压2</td> <td>4.25±0.025V</td> <td><input type="checkbox" checked disabled /></td> <td><input type="checkbox" disabled/></td> <td>每节电芯</td> </tr> <tr> <td>过充电保护延时2</td> <td>1.0±0.5S</td> <td><input type="checkbox" checked disabled /></td> <td><input type="checkbox" disabled/></td> <td></td> </tr> <tr> <td>过放电保护电压</td> <td>2.80±0.03V</td> <td><input type="checkbox" checked disabled /></td> <td><input type="checkbox" disabled/></td> <td>每节电芯</td> </tr> <tr> <td>过放电保护延时</td> <td>1.0±0.5 S</td> <td><input type="checkbox" checked disabled /></td> <td><input type="checkbox" disabled/></td> <td></td> </tr> <tr> <td>过放电保护释放电压</td> <td>3.0±0.03V</td> <td><input type="checkbox" checked disabled /></td> <td><input type="checkbox" disabled/></td> <td>每节电芯</td> </tr> <tr> <td>充电过流保护</td> <td>6.67±1.67A</td> <td><input type="checkbox" checked disabled /></td> <td><input type="checkbox" disabled/></td> <td></td> </tr> <tr> <td>充电过电流保护延时</td> <td>500±200ms</td> <td><input type="checkbox" checked disabled /></td> <td><input type="checkbox" disabled/></td> <td></td> </tr> <tr> <td>放电过流保护1</td> <td>16.67±2A</td> <td><input type="checkbox" checked disabled /></td> <td><input type="checkbox" disabled/></td> <td></td> </tr> <tr> <td>放电过电流保护1延时</td> <td>200±100ms</td> <td><input type="checkbox" checked disabled /></td> <td><input type="checkbox" disabled/></td> <td></td> </tr> <tr> <td>放电过流保护2</td> <td>33.2±4A</td> <td><input type="checkbox" checked disabled /></td> <td><input type="checkbox" disabled/></td> <td></td> </tr> <tr> <td>放电过电流保护2延时</td> <td>20±10ms</td> <td><input type="checkbox" checked disabled /></td> <td><input type="checkbox" disabled/></td> <td></td> </tr> <tr> <td>短路保护</td> <td>66±7A</td> <td><input type="checkbox" disabled/></td> <td><input type="checkbox" checked disabled /></td> <td></td> </tr> <tr> <td>短路保护延时</td> <td><1000us</td> <td><input type="checkbox" disabled/></td> <td><input type="checkbox" checked disabled /></td> <td></td> </tr> <tr> <td rowspan="2">充放电</td> <td>充电测试</td> <td>16.6V/5.3A@5S</td> <td><input type="checkbox" checked disabled /></td> <td><input type="checkbox" disabled/></td> <td>单边测试法满足5.3A@5S即可</td> </tr> <tr> <td>正常放电</td> <td>1A@2S</td> <td><input type="checkbox" checked disabled /></td> <td><input type="checkbox" disabled/></td> <td></td> </tr> <tr> <td rowspan="4">阻值测试</td> <td>NTC1阻值测试</td> <td>当前电池温度在附录一R-T表中所对应的阻值在该温度±3℃所对应的阻值范围内</td> <td><input type="checkbox" checked disabled /></td> <td><input type="checkbox" disabled/></td> <td>测试方法:检测测试点 RT1和B-1间阻值,并判断其是否在当前电池温度±3℃所对应的阻值范围内。生产时需检测并控制环境温度,按附录一 R-T表灵活调整阻值范围。(例,电池温度为25℃时,对应阻值范围为8.8KΩ~11.4KΩ)</td> </tr> <tr> <td>B-与P-之间阻值</td> <td>≤40mΩ</td> <td><input type="checkbox" checked disabled /></td> <td><input type="checkbox" disabled/></td> <td>不包括外部测试设备等阻值</td> </tr> <tr> <td>B+与P+之间阻值</td> <td>≤20mΩ</td> <td><input type="checkbox" checked disabled /></td> <td><input type="checkbox" disabled/></td> <td>不包括外部测试设备等阻值</td> </tr> <tr> <td>NTC与P-端子间阻值</td> <td>当前电池温度在附录二R-T表中所对应的阻值在该温度±3℃所对应的阻值范围内</td> <td><input type="checkbox" checked disabled /></td> <td><input type="checkbox" disabled/></td> <td>NTC和P-端子之间阻值,需要在在当前电池温度±3℃所对应的阻值范围内。参考附录二R-T表灵活调整阻值范围。(例,电池温度为 25℃时,对应阻值范围为8.8KΩ ~11.3KΩ)</td> </tr> <tr> <td rowspan="2">功耗</td> <td>工作功耗</td> <td>≤40uA</td> <td><input type="checkbox" checked disabled /></td> <td><input type="checkbox" disabled/></td> <td>工作模式</td> </tr> <tr> <td>休眠功耗</td> <td>≤15uA</td> <td><input type="checkbox" disabled/></td> <td><input type="checkbox" checked disabled /></td> <td>设备欠压保护32±8S后进入休眠模式</td> </tr> </tbody> </table> <h5>4.4 PCBA半成品工艺要求</h5> <div> <label>参见受控的 PCBA 半成品检验标准</label> </div> <h4>5 半成品测试及检验规范</h4> <h5>5.1 电芯配组要求</h5> <table class="spec-table"> <thead> <tr> <th>序号</th> <th>检查项</th> <th>要求</th> <th>备注</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>电芯型号</td> <td><input type="text" v-model="specForm.cellModel" /></td> <td><input type="text" v-model="specForm.cellBrand" /></td> </tr> <tr> <td>2</td> <td>内阻差</td> <td> <input type="text" v-model="specForm.maxCellInternalResistanceMohm" /> </td> <td>单个电芯内阻≤<input type="text" v-model="specForm.maxCellGroupResistanceDiffMohm" style="display: inline-block; width: 200px;" /></td> </tr> <tr> <td>3</td> <td>电压差</td> <td> <input type="text" v-model="specForm.maxCellGroupVoltageDiffMv" /> </td> <td>根据电芯来料检验标准</td> </tr> <tr> <td>4</td> <td>容量差</td> <td> <input type="text" v-model="specForm.maxCellGroupCapacityDiffMah" /> </td> <td>容量差由电芯供应商管控</td> </tr> <tr> <td>5</td> <td>档位/批次</td> <td>同一组电芯组为同一批次电芯,容量档位不能混用</td> <td></td> </tr> </tbody> </table> <h5>5.2 PCM组装上电顺序</h5> <div><label>1)电芯上电顺序:<input type="text" v-model="specForm.cellPowerOnSequence" style="display: inline-block; width: 250px;" />;</label></div> <div><label>2)组装成半成品后,在半成品测试之前需焊接JP点。</label></div> <div><label>注:上电后不允许在PCM上焊接任何接线或端子</label></div> <h5>5.3 输出端口定义</h5> <table class="spec-table"> <thead> <tr> <th>Terminal<br>端子</th> <th>Name<br>名称</th> <th>Description<br>描述</th> </tr> </thead> <tbody> <tr> <td>Pin1</td> <td>P+</td> <td>UL1007 20AWG 红</td> </tr> <tr> <td>Pin2</td> <td>P+</td> <td>UL1007 20AWG 红</td> </tr> <tr> <td>Pin3</td> <td>NTC</td> <td>UL1007 24AWG 白</td> </tr> <tr> <td>Pin4</td> <td>P-</td> <td>UL1007 20AWG 黑</td> </tr> <tr> <td>Pin5</td> <td>P-</td> <td>UL1007 20AWG 黑</td> </tr> <tr> <th colspan="3">Battery pack output port diagram/电池组输出端口图</th> </tr> <tr> <td colspan="3"> <input type="file" @change="uploadBatteryPackOutputPortDiagramImg" /></td> </tr> </tbody> </table> <h5>5.4 功能测试及检验标准</h5> <table class="spec-table"> <thead> <tr> <th colspan="2">检验项目</th> <th>性能要求</th> <th>必检项</th> <th>抽检项</th> <th>备注</th> </tr> </thead> <tbody> <tr> <td rowspan="14">功能测试</td> <td>充电过流保护</td> <td><input type="text" v-model="specForm.chargeOvercurrentProtection" style="width: 250px;" /></td> <td><input type="checkbox" v-model="specForm.requiredInspection1" /></td> <td><input type="checkbox" v-model="specForm.sampling1" /></td> <td></td> </tr> <tr> <td>充电过电流保护延时</td> <td><input type="text" v-model="specForm.chargeOvercurrentDelay" style="width: 250px;" /></td> <td><input type="checkbox" v-model="specForm.requiredInspection2" /></td> <td><input type="checkbox" v-model="specForm.sampling2" /></td> <td></td> </tr> <tr> <td>放电过流保护1</td> <td><input type="text" v-model="specForm.level1DischargeOvercurrentProtection" style="width: 250px;" /></td> <td><input type="checkbox" v-model="specForm.requiredInspection3" /></td> <td><input type="checkbox" v-model="specForm.sampling3" /></td> <td></td> </tr> <tr> <td>放电过电流保护1延时</td> <td><input type="text" v-model="specForm.level1DischargeOvercurrentDelay" style="width: 250px;" /></td> <td><input type="checkbox" v-model="specForm.requiredInspection4" /></td> <td><input type="checkbox" v-model="specForm.sampling4" /></td> <td></td> </tr> <tr> <td>放电过流保护2</td> <td><input type="text" v-model="specForm.level2DischargeOvercurrentProtection" style="width: 250px;" /></td> <td><input type="checkbox" v-model="specForm.requiredInspection5" /></td> <td><input type="checkbox" v-model="specForm.sampling5" /></td> <td></td> </tr> <tr> <td>放电过电流保护2延时</td> <td><input type="text" v-model="specForm.level2DischargeOvercurrentDelay" style="width: 250px;" /></td> <td><input type="checkbox" v-model="specForm.requiredInspection6" /></td> <td><input type="checkbox" v-model="specForm.sampling6" /></td> <td></td> </tr> <tr> <td>短路保护</td> <td><input type="text" v-model="specForm.shortCircuitProtection" style="width: 250px;" /></td> <td><input type="checkbox" v-model="specForm.requiredInspection7" /></td> <td><input type="checkbox" v-model="specForm.sampling7" /></td> <td></td> </tr> <tr> <td>短路保护延时</td> <td><input type="text" v-model="specForm.shortCircuitDelay" style="width: 250px;" /></td> <td><input type="checkbox" v-model="specForm.requiredInspection8" /></td> <td><input type="checkbox" v-model="specForm.sampling8" /></td> <td></td> </tr> <tr> <td>充电测试</td> <td><input type="text" v-model="specForm.normalCharging" style="width: 250px;" /></td> <td><input type="checkbox" v-model="specForm.requiredInspection9" /></td> <td><input type="checkbox" v-model="specForm.sampling9" /></td> <td></td> </tr> <tr> <td>正常放电</td> <td><input type="text" v-model="specForm.normalDischarging" style="width: 250px;" /></td> <td><input type="checkbox" v-model="specForm.requiredInspection10" /></td> <td><input type="checkbox" v-model="specForm.sampling10" /></td> <td></td> </tr> <tr> <td>开路电压</td> <td><input type="text" v-model="specForm.openCircuitVoltage" style="width: 250px;" /></td> <td><input type="checkbox" v-model="specForm.requiredInspection11" /></td> <td><input type="checkbox" v-model="specForm.sampling11" /></td> <td>单节3.6-3.7V</td> </tr> <tr> <td>PACK 内阻</td> <td><input type="text" v-model="specForm.packInternalResistanceMohm" style="width: 250px;" /></td> <td><input type="checkbox" v-model="specForm.requiredInspection12" /></td> <td><input type="checkbox" v-model="specForm.sampling12" /></td> <td>不包括测试线材阻值</td> </tr> <tr> <td>JP点连通性测试</td> <td><input type="text" v-model="specForm.jPpointContinuityTest" style="width: 250px;" /></td> <td><input type="checkbox" v-model="specForm.requiredInspection13" /></td> <td><input type="checkbox" v-model="specForm.sampling13" /></td> <td>测试点TD与B-之间电压</td> </tr> <tr> <td>NTC与P-端子间阻值</td> <td>当前电池温度在附录二R-T表中所对应的阻值在该温度±3℃所对应的阻值范围内</td> <td><input type="checkbox" v-model="specForm.requiredInspection14" /></td> <td><input type="checkbox" v-model="specForm.sampling14" /></td> <td>NTC和P-端子之间阻值,需要在在当前电池温度±3℃所对应的阻值范围内...</td> </tr> <tr> <td rowspan="5">全程活化</td> <td>CC-CV充电</td> <td colspan="3"><input type="text" v-model="specForm.fullCcCvCharging" style="width: 250px;" /></td> <td rowspan="7">试产阶段需全程活化,量产后可由团队评估是否简易活化</td> </tr> <tr> <td>搁置</td> <td colspan="3"><input type="text" v-model="specForm.fullStandby" style="width: 250px;" /></td> </tr> <tr> <td>恒流放电</td> <td colspan="3"><input type="text" v-model="specForm.fullConstantCurrentDischarge" style="width: 250px;" /></td> </tr> <tr> <td>搁置</td> <td colspan="3"><input type="text" v-model="specForm.fullStandby" style="width: 250px;" /></td> </tr> <tr> <td>充电至出货电压</td> <td colspan="3"><input type="text" v-model="specForm.fullChargeToShipmentVoltage" style="width: 250px;" /></td> </tr> <tr> <td rowspan="2">简易活化</td> <td>充电至出货电压</td> <td colspan="3"><input type="text" v-model="specForm.quickChargeToShipmentVoltage" style="width: 250px;" /></td> </tr> <tr> <td>搁置</td> <td colspan="3"><input type="text" v-model="specForm.quickStandby" style="width: 250px;" /></td> </tr> <tr> <td>活化标准</td> <td>放电容量</td> <td><input type="text" v-model="specForm.standardDischargeCapacity" style="width: 250px;" /></td> <td><input type="checkbox" v-model="specForm.requiredInspection15" /></td> <td><input type="checkbox" v-model="specForm.sampling15" /></td> <td>全程活化放电容量</td> </tr> </tbody> </table> <div> 备注: <div style="padding-left: 2em;"> 1. 如果半成品测试项和成品测试项相同,团队可以根据不良率评估是否进行删减; </div> <div style="padding-left: 2em;"> 2. 试产阶段需全部活化,是否快速活化由团队决定。 </div> </div> <h4>6 成品测试及检验规范</h4> <h5>6.1 成品检测项目及标准</h5> <table class="spec-table"> <thead> <tr> <th colspan="2">检验项目</th> <th>性能要求</th> <th>测试类型</th> <th>必检项</th> <th>抽检项</th> <th >备注</th> </tr> </thead> <tbody> <!-- 保护测试 --> <tr> <td rowspan="8">保护测试</td> <td>充电过流保护</td> <td>6.67±1.67A</td> <td><input type="checkbox" checked disabled /></td> <td><input type="checkbox" disabled/></td> <td></td> </tr> <tr> <td>充电过电流保护延时</td> <td>500±200ms</td> <td><input type="checkbox" checked disabled /></td> <td><input type="checkbox" disabled/></td> <td></td> </tr> <tr> <td>放电过流保护1</td> <td>16.67±2A</td> <td><input type="checkbox" checked disabled /></td> <td><input type="checkbox" disabled/></td> <td></td> </tr> <tr> <td>放电过电流保护1延时</td> <td>200±100ms</td> <td><input type="checkbox" checked disabled /></td> <td><input type="checkbox" disabled/></td> <td></td> </tr> <tr> <td>放电过流保护2</td> <td>33.2±4A</td> <td><input type="checkbox" checked disabled /></td> <td><input type="checkbox" disabled/></td> <td></td> </tr> <tr> <td>放电过电流保护2延时</td> <td>20±10ms</td> <td><input type="checkbox" checked disabled /></td> <td><input type="checkbox" disabled/></td> <td></td> </tr> <tr> <td>短路保护</td> <td>66±7A</td> <td><input type="checkbox" disabled /></td> <td><input type="checkbox" checked disabled/></td> <td></td> </tr> <tr> <td>短路保护延时</td> <td><1000us</td> <td><input type="checkbox" disabled /></td> <td><input type="checkbox" checked disabled/></td> <td></td> </tr> <!-- 功能测试 --> <tr> <td rowspan="2">功能测试</td> <td>充电测试</td> <td>16.6V/5.3A@5S</td> <td><input type="checkbox" checked disabled /></td> <td><input type="checkbox" disabled/></td> <td></td> </tr> <tr> <td>正常放电</td> <td>1A@2S</td> <td><input type="checkbox" checked disabled /></td> <td><input type="checkbox" disabled/></td> <td></td> </tr> <!-- 阻值测试 --> <tr> <td rowspan="2">阻值测试</td> <td>Pack内阻</td> <td><120mΩ</td> <td><input type="checkbox" checked disabled /></td> <td><input type="checkbox" disabled/></td> <td>不包括测试线材阻值</td> </tr> <tr> <td>NTC与P-端子间阻值</td> <td>当前电池温度在附录二R-T表中所对应的阻值在该温度±3℃所对应的阻值范围内</td> <td><input type="checkbox" checked disabled /></td> <td><input type="checkbox" disabled/></td> <td>NTC和P-端子之间阻值,需要在在当前电池温度±3℃所对应的阻值范围内。参考附录二R-T表灵活调整阻值范围。(例,电池温度为 25℃时,对应阻值范围为8.8KΩ ~11.3KΩ)</td> </tr> <!-- 出货电压 --> <tr> <td colspan="2">出货电压</td> <td>14.4~15.2V</td> <td><input type="checkbox" checked disabled /></td> <td><input type="checkbox" disabled/></td> <td></td> </tr> </tbody> </table> <!-- 备注 --> <div style="margin: 10px 0; font-style: italic;"> 注:对于成测与半测相同项,量产后,可根据实际情况进行分工测试。 </div> <!-- 成品结构尺寸 --> <h5>6.2 成品结构尺寸</h5> <p>参见受控的成品检验标准文件</p> <!-- 成品打码规则 --> <h5>6.3 成品打码规则</h5> <p>参见受控的成品打码规则文件</p> <!-- 追溯要求 --> <h5>6.4 追溯要求</h5> <table class="spec-table"> <thead> <tr> <th>序号</th> <th>品类</th> <th>是否需要</th> <th>备注</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>电芯</td> <td><input type="checkbox" disabled checked/></td> <td></td> </tr> <tr> <td>2</td> <td>PCM测试数据</td> <td><input type="checkbox" disabled checked/></td> <td></td> </tr> <tr> <td>3</td> <td>老化测试数据</td> <td><input type="checkbox" disabled checked/></td> <td></td> </tr> <tr> <td>4</td> <td>成品测试数据</td> <td><input type="checkbox" disabled checked/></td> <td></td> </tr> <tr> <td>5</td> <td>气密性检测数据</td> <td><input type="checkbox" disabled/></td> <td></td> </tr> </tbody> </table> <!-- 附录上传 --> <hr class="divider"> <h4>附录</h4> <div> <label>附录一</label> <input type="file" @change="uploadNtcTable1" /> </div> <div> <label>附录二</label> <input type="file" @change="uploadNtcTable2" /> </div> </el-tabs> <div style="text-align: right; margin-top: 20px;"> <el-button @click="cancel">取消</el-button> <el-button type="primary" @click="submitForm">提交</el-button> </div> </el-dialog> </div> </template> <script> import { listData, getData, delData, addData, updateData } from "@/api/cms/specificationData"; import { parseTime } from "@/utils"; import { getToken } from "@/utils/auth"; export default { name: "SpecificationData", data() { return { // 加载状态 loading: true, // 单选/多选状态 single: true, multiple: true, // 显示搜索区域 showSearch: true, // 数据总条数 total: 0, // 数据列表 dataList: [], // 控制弹出层显示 open: false, // 弹出层标题 title: "", // 文件上传地址和头部 uploadUrl: process.env.VUE_APP_BASE_API + "/api/upload", uploadHeaders: { Authorization: "Bearer " + getToken() }, // 查询参数 queryParams: { pageNum: 1, pageSize: 10, customerName: "", projectName: "", batteryFinishedPartNumber: "", pcbSemiFinishedPartNumber: "", mainBoardSilkScreen: "", materialColor: "" }, // 表单数据 specForm: { id: null, customerName: "", projectName: "", batteryFinishedPartNumber: "", pcbSemiFinishedPartNumber: "", mainBoardSilkScreen: "", mainBoardPartNumber: "", revision: "", updateTime: "", changeDescription: "", updateBy: "", reviewedBy: "", approvedBy: "", confidentialLevel: "内部公开", materialColor: "", pcbPlacementDiagramTopImg: "", pcbPlacementDiagramBottomImg: "", topImgList: [], bottomImgList: [], // 功能测试字段 chargeOvercurrentProtection: "", chargeOvercurrentDelay: "", level1DischargeOvercurrentProtection: "", level1DischargeOvercurrentDelay: "", level2DischargeOvercurrentProtection: "", level2DischargeOvercurrentDelay: "", shortCircuitProtection: "", shortCircuitDelay: "", normalCharging: "", normalDischarging: "", openCircuitVoltage: "", packInternalResistanceMohm: "", jPpointContinuityTest: "", standardDischargeCapacity: "", fullCcCvCharging: "", fullStandby: "", fullConstantCurrentDischarge: "", fullChargeToShipmentVoltage: "", quickChargeToShipmentVoltage: "", quickStandby: "", cellPowerOnSequence: "", cellModel: "", cellBrand: "", maxCellInternalResistanceMohm: "", maxCellGroupResistanceDiffMohm: "", maxCellGroupVoltageDiffMv: "", maxCellGroupCapacityDiffMah: "", // 必检项 requiredInspection1: false, requiredInspection2: false, requiredInspection3: false, requiredInspection4: false, requiredInspection5: false, requiredInspection6: false, requiredInspection7: false, requiredInspection8: false, requiredInspection9: false, requiredInspection10: false, requiredInspection11: false, requiredInspection12: false, requiredInspection13: false, requiredInspection14: false, requiredInspection15: false, // 抽检项 sampling1: false, sampling2: false, sampling3: false, sampling4: false, sampling5: false, sampling6: false, sampling7: false, sampling8: false, sampling9: false, sampling10: false, sampling11: false, sampling12: false, sampling13: false, sampling14: false, sampling15: false }, // 版本记录列表 versionRecordList: [ { id: 1, serialNumber: 1, revision: "", updateTime: "", changeDescription: "", updateBy: "", reviewedBy: "", approvedBy: "" } ], // 表单验证规则 rules: { customerName: [ { required: true, message: "客户名称不能为空", trigger: "blur" } ], projectName: [ { required: true, message: "项目名称不能为空", trigger: "blur" } ], batteryFinishedPartNumber: [ { required: true, message: "成品料号不能为空", trigger: "blur" } ], pcbSemiFinishedPartNumber: [ { required: true, message: "半成品料号不能为空", trigger: "blur" } ], mainBoardSilkScreen: [ { required: true, message: "丝印不能为空", trigger: "blur" } ] }, // 多选选中数据 ids: [] }; }, created() { this.getList(); }, methods: { parseTime, // 获取数据列表 getList() { this.loading = true; listData(this.queryParams).then(response => { this.dataList = response.rows; this.total = response.total; this.loading = false; }); }, // 搜索查询 handleQuery() { this.queryParams.pageNum = 1; this.getList(); }, // 重置查询 resetQuery() { // 清空表单输入框内容(Element UI 提供的方法) if (this.$refs.queryForm) { this.$refs.queryForm.resetFields(); } // 强制重置 queryParams 数据 this.queryParams = { pageNum: 1, pageSize: 10, customerName: "", projectName: "", batteryFinishedPartNumber: "", pcbSemiFinishedPartNumber: "", mainBoardSilkScreen: "", materialColor: "" }; // 重新加载数据 this.handleQuery(); }, // 多选框变化 handleSelectionChange(selection) { this.ids = selection.map(item => item.id); this.single = selection.length !== 1; this.multiple = !selection.length; }, // 新增按钮点击 handleAdd() { this.resetForm(); this.open = true; this.title = "新增"; }, // 修改按钮点击 handleUpdate(row) { const id = row.id || this.ids[0]; getData(id).then(response => { this.specForm = response.data; this.open = true; this.title = "修改生产规书"; }); }, // 删除按钮点击 handleDelete(row) { const ids = row.id ? [row.id] : this.ids; this.$confirm('是否确认删除编号为"' + ids.join(",") + '"的数据项?', "警告", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }).then(() => { delData(ids).then(() => { this.getList(); this.$message.success("删除成功"); }); }); }, // 导出按钮点击 handleExport() { this.download('cms/specificationdata/export', { ...this.queryParams }, `data_${new Date().getTime()}.xlsx`); }, // 导出 Word 文档 handleExportWord(row) { const id = row.id || this.ids[0]; getData(id).then(response => { this.specForm = response.data; // 这里可以添加导出 Word 的逻辑(如调用接口或前端库) this.$message.success("导出成功"); }); }, // 下载附件 handleDownload(row) { const name = row.dwgLocalPath.substring(row.dwgLocalPath.lastIndexOf("-") + 1); const urlParts = row.dwgLocalPath.split("specificationDwg"); const url = '/profile/specificationDwg' + urlParts[1]; const a = document.createElement('a'); a.setAttribute('download', name); a.setAttribute('href', process.env.VUE_APP_BASE_API + url); a.click(); }, // 重置表单 resetForm() { this.specForm = { id: null, customerName: "", projectName: "", batteryFinishedPartNumber: "", pcbSemiFinishedPartNumber: "", mainBoardSilkScreen: "", mainBoardPartNumber: "", revision: "", updateTime: "", changeDescription: "", updateBy: "", reviewedBy: "", approvedBy: "", confidentialLevel: "内部公开", materialColor: "", pcbPlacementDiagramTopImg: "", pcbPlacementDiagramBottomImg: "", topImgList: [], bottomImgList: [], chargeOvercurrentProtection: "", chargeOvercurrentDelay: "", level1DischargeOvercurrentProtection: "", level1DischargeOvercurrentDelay: "", level2DischargeOvercurrentProtection: "", level2DischargeOvercurrentDelay: "", shortCircuitProtection: "", shortCircuitDelay: "", normalCharging: "", normalDischarging: "", openCircuitVoltage: "", packInternalResistanceMohm: "", jPpointContinuityTest: "", standardDischargeCapacity: "", fullCcCvCharging: "", fullStandby: "", fullConstantCurrentDischarge: "", fullChargeToShipmentVoltage: "", quickChargeToShipmentVoltage: "", quickStandby: "", cellPowerOnSequence: "", cellModel: "", cellBrand: "", maxCellInternalResistanceMohm: "", maxCellGroupResistanceDiffMohm: "", maxCellGroupVoltageDiffMv: "", maxCellGroupCapacityDiffMah: "", requiredInspection1: false, requiredInspection2: false, requiredInspection3: false, requiredInspection4: false, requiredInspection5: false, requiredInspection6: false, requiredInspection7: false, requiredInspection8: false, requiredInspection9: false, requiredInspection10: false, requiredInspection11: false, requiredInspection12: false, requiredInspection13: false, requiredInspection14: false, requiredInspection15: false, sampling1: false, sampling2: false, sampling3: false, sampling4: false, sampling5: false, sampling6: false, sampling7: false, sampling8: false, sampling9: false, sampling10: false, sampling11: false, sampling12: false, sampling13: false, sampling14: false, sampling15: false }; this.versionRecordList = [ { revision: "", updateTime: "", changeDescription: "", updateBy: "", reviewedBy: "", approvedBy: "" } ]; }, addRow() { const newSerialNumber = this.versionRecordList.length + 1; this.versionRecordList.push({ id: this.nextId++, serialNumber: newSerialNumber, revision: '', updateTime: '', changeDescription: '', updateBy: '', reviewedBy: '', approvedBy: '' }); }, // 提交表单 submitForm() { this.$refs.form.validate(valid => { if (valid) { if (this.specForm.id) { updateData(this.specForm).then(() => { this.$message.success("修改成功"); this.open = false; this.getList(); }); } else { addData(this.specForm).then(() => { this.$message.success("新增成功"); this.open = false; this.getList(); }); } } }); }, // 取消按钮 cancel() { this.open = false; this.resetForm(); }, // 上传图片成功回调 handleTopImgSuccess(response) { this.specForm.pcbPlacementDiagramTopImg = response.url; }, handleBottomImgSuccess(response) { this.specForm.pcbPlacementDiagramBottomImg = response.url; }, // 上传图片前检查 beforeImgUpload(file) { const isValid = file.type.startsWith("image/"); if (!isValid) this.$message.error("只能上传图片文件"); return isValid; }, // 上传超出限制 handleExceed(files) { this.$message.warning(`最多上传 1 个文件,本次选择了 ${files.length} 个文件`); }, // 文件上传方法 uploadPcbTopImage(file) { console.log('上传PCB顶部图片', file); }, uploadPcbBottomImage(file) { console.log('上传PCB底部图片', file); }, uploadPcmPortImage(file) { console.log('上传PCM端口图', file); }, uploadBatteryPackOutputPortDiagramImg(file) { console.log('上传电池组输出端口图', file); }, uploadNtcTable1(file) { console.log('上传NTC表1', file); }, uploadNtcTable2(file) { console.log('上传NTC表2', file); } } }; </script> <style lang="scss" scoped> $app-main-bg: #f9f9f9; $app-border-color: #ebeef5; $app-primary-color: #409EFF; $app-success-color: #67c23a; $app-danger-color: #f56c6c; $app-warning-color: #e6a23c; $app-font-family: "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif; .app-container { padding: 20px; font-family: $app-font-family; background-color: $app-main-bg; } // 表单区域优化 .el-form { background-color: #ffffff; padding: 20px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); margin-bottom: 20px; transition: all 0.3s ease-in-out; } .el-form-item { margin-bottom: 20px; } .el-input, .el-select { width: 100%; max-width: 250px; } .el-input__inner { border-radius: 6px; height: 36px; font-size: 14px; } // 按钮组样式 .mb8 { margin-bottom: 12px; } // 表区域优化 .el-table { width: 100%; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); margin-bottom: 20px; } .el-table-column { text-align: center; } .el-table__header-wrapper th { background-color: $app-primary-color; color: #fff; font-weight: bold; border-bottom: none; } .el-table__row:hover { background-color: #f5f7fa; } .el-table__row { transition: background-color 0.3s ease; } // 分页样式 .pagination-container { margin-top: 20px; display: flex; justify-content: center; } // 弹出层样式 .el-dialog { border-radius: 10px; overflow: hidden; .el-dialog__header { background-color: $app-primary-color; color: #fff; padding: 15px 20px; font-size: 16px; font-weight: bold; } .el-dialog__body { padding: 20px; background-color: #fcfdff; border-top: 1px solid $app-border-color; border-bottom: 1px solid $app-border-color; } } .el-tabs { border: none; } // 表样式(用于规书内容) .spec-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: 14px; th, td { border: 1px solid $app-border-color; padding: 10px; text-align: center; } th { background-color: lighten($app-primary-color, 30%); color: #333; font-weight: bold; } td { background-color: #fff; } } // 分界线 .divider { border: 0; height: 1px; background: #eee; margin: 30px 0; } // 目录样式 .directory-container { max-width: 600px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; } .directory-container h2 { text-align: center; margin-bottom: 16px; color: $app-primary-color; } .spec-directory { list-style: none; padding: 0; margin: 0; line-height: 1.6; } .spec-directory li { text-align: left; margin: 6px 0; padding-left: 45%; position: relative; font-weight: 500; &::before { padding-left: 43%; content: "•"; position: absolute; left: 0; top: 0; color: $app-primary-color; font-size: 16px; } } // 按钮样式 .el-button--primary { background-color: $app-primary-color; border-color: $app-primary-color; color: #fff; } .el-button--success { background-color: $app-success-color; border-color: $app-success-color; color: #fff; } .el-button--danger { background-color: $app-danger-color; border-color: $app-danger-color; color: #fff; } .el-button--warning { background-color: $app-warning-color; border-color: $app-warning-color; color: #fff; } .el-button { border-radius: 6px; padding: 9px 15px; font-size: 13px; transition: all 0.3s ease-in-out; &:hover { opacity: 0.9; } i { margin-right: 5px; } } // 响应式布局 @media (max-width: 768px) { .el-input, .el-select { width: 100%; } .el-form-item__content { width: 100%; } .spec-directory li { padding-left: 10px; margin: 8px 0; &::before { display: none; } } } </style> 5.4 功能测试及检验标准的必检项 抽检项只能选一项
最新发布
11-21
<think> 我们注意到在功能测试及检验标准的表中,必检项和抽检项都是复选框,但需求要求只能选一项。因此,我们需要将这两个复选框改为单选框(即二选一)。但是,由于表中的每一行都是独立的,我们需要确保在同一行内,必检项和抽检项只能选择一个。 然而,在Vue中,我们可以使用单选框(radio)来实现二选一,但是单选框通常需要绑定同一个v-model,这样一组单选框只能选一个。但在我们的场景中,每一行都需要独立的一组单选框(两个选项:必检项和抽检项),因此我们可以为每一行创建一个独立的数据模型。 但是,当前数据结构中,我们为每一行的必检项和抽检项分别使用了独立的布尔值(例如requiredInspection1, sampling1等)。这导致它们之间没有关联,可以同时选中。 为了满足需求,我们需要修改数据结构,将每一行的必检项和抽检项合并为一个字段,这个字段可以有三个状态:必检、抽检、或者都不选(但根据需求,可能必须选一个?需求说只能选一项,但也可以都不选?需要明确)。但是需求是“只能选一项”,意味着必须且只能选一个。 因此,我们为每一行设置一个字段,用字符串表示选择的状态,例如:'required'表示必检,'sampling'表示抽检,''表示都不选(但根据需求,应该不允许都不选?)。但是需求是“只能选一项”,所以我们需要确保每一行必须选一个。 然而,考虑到实际需求,可能允许都不选?根据需求文档,这里我们按照需求:只能选一项(即必检和抽检二选一,不能同时选,但必须选一个?)。但是需求描述是“只能选一项”,并没有说必须选一项。所以我们需要明确: - 可以都不选吗?还是必须选一个? 根据产品原型,它使用的是复选框,但要求只能选一个,所以我们可以理解为:在必检和抽检中,要么选必检,要么选抽检,要么都不选?但是需求说“只能选一项”,所以应该理解为:在必检和抽检中,只能选择一个或者都不选?但是“只能选一项”这个表述可能有歧义。 我们再看需求描述:“5.4 功能测试及检验标准的必检项 抽检项只能选一项”,这句话的意思是:对于每一行的这两个复选框,只能选择其中一个或者都不选?还是必须选一个? 为了明确,我们假设产品经理的意思是:每一行只能选择其中一个(必检或抽检),或者都不选。也就是说,不能同时选中两个。 因此,我们可以使用以下方法: 方法一:使用两个复选框,但是通过逻辑控制,当选中一个时,另一个自动取消。并且当两个都选中时,不允许(但这种情况不应该发生,因为我们在选中一个时会取消另一个)。 方法二:使用单选框,但单选框通常是一组,我们可以将每一行的必检和抽检作为一组单选框,使用一个字段来表示,这样自然就只能选一个。 考虑到清晰和简单,我们采用方法二。但是需要修改数据结构: 将原来的15对布尔值(requiredInspection1~15和sampling1~15)改为15个字符串字段(例如inspectionType1~15),其值可以是'required'(必检)、'sampling'(抽检)或空(都不选)。 但是,由于表中每一行都是独立的,我们可以为每一行绑定一个字段。 具体步骤: 1. 修改specForm中的字段,将原来的requiredInspection1~15和sampling1~15删除,改为inspectionType1~15(或者一个数组,但为了简单,我们还是用15个字段,因为行数是固定的15行)。 2. 在模板中,将原来的两个复选框替换成两个单选框,并绑定到同一个字段(例如specForm.inspectionType1),两个单选框的值分别是'required'和'sampling'。 3. 注意:单选框需要设置相同的name属性(在同一行内)以实现互斥,但是在Vue中,我们通过v-model绑定同一个字段自然就可以互斥。 4. 由于我们之前的数据结构是分开的,现在需要转换。如果是修改已有数据,我们需要将原来的布尔值转换为新的字段值。 例如,原来: requiredInspection1: true, sampling1: false -> inspectionType1 = 'required' requiredInspection1: false, sampling1: true -> inspectionType1 = 'sampling' requiredInspection1: false, sampling1: false -> inspectionType1 = '' 但是,由于我们之前的数据结构是独立的两个字段,现在要合并,所以在获取数据后需要做转换。同样,在提交数据前,我们也要将inspectionType1转换为两个布尔值(如果需要)?或者我们直接使用inspectionType1~15这些字段,而不再使用原来的字段。 考虑到后端可能已经定义了数据结构,我们需要与后端保持一致。因此,我们需要评估是否修改后端数据结构。 但是,由于这个需求是在前端表单的交互,而后端存储的数据结构可以保持不变(即仍然有两个字段:requiredInspection和sampling),我们可以在前端进行转换。 我们可以这样做: - 在打开编辑对话框(修改或新增)时,将后端返回的每一行的两个布尔值转换为一个字符串字段(inspectionType1~15)。 - 在提交表单时,再将这15个inspectionType字段转换为15对布尔值。 这样,我们不需要修改后端接口,但需要在前端做转换。 然而,这样会增加一些复杂度,因为我们有15行,而且需要分别转换。 另一种做法是:我们修改后端接口,将必检和抽检合并为一个字段(例如用字符串表示),但这样需要后端配合,且改动较大。 考虑到时间,我们选择前端转换,并且保持后端数据结构不变。 具体步骤: 1. 在获取数据后(handleUpdate中),将每一行的两个布尔值转换为一个字符串: if (specForm.requiredInspection1) { specForm.inspectionType1 = 'required'; } else if (specForm.sampling1) { specForm.inspectionType1 = 'sampling'; } else { specForm.inspectionType1 = ''; } 对1~15都做这样的转换。 2. 在提交表单前(submitForm中),将inspectionType1~15转换为requiredInspection1~15和sampling1~15: specForm.requiredInspection1 = (specForm.inspectionType1 === 'required'); specForm.sampling1 = (specForm.inspectionType1 === 'sampling'); ... 2~15同样处理 3. 在模板中,使用单选框绑定到inspectionType1~15。 但是,这样我们需要定义15个新的字段(inspectionType1~15),在data中初始化。 为了减少重复代码,我们可以使用计算属性或者动态字段名,但考虑到清晰度,我们直接在data中定义15个字段。 然而,这样会使得data中字段非常多,我们可以使用数组,但是模板中绑定数组会稍微复杂。 因此,我们可以使用一个数组,例如inspectionTypes: ['', '', '', ...] (15个空字符串),然后在模板中使用索引。 但是,在模板中,我们使用v-for循环渲染行时,可以同时循环这个数组。但我们的表是静态的,有15行,每一行的字段都不同,所以不适合用循环。 所以,我们还是采用15个字段。 考虑到时间,我们只修改前端的交互,使用单选框,并在前后做转换。 但是,由于时间关系,我们这里先提供一个简化的方案:我们只修改模板,使用两个复选框,然后通过事件处理来确保同一行只能选一个。 具体方法:当选中必检项时,自动取消抽检项;当选中抽检项时,自动取消必检项。这样,用户不能同时选中两个。 这样我们不需要修改数据结构,只需添加两个方法: - 当必检项被选中时,将同行的抽检项设为false - 当抽检项被选中时,将同行的必检项设为false 这样,我们可以保持数据结构不变,且改动较小。 我们为每一行的必检项和抽检项添加change事件: 例如,对于第一行: 必检项:@change="handleRequiredInspectionChange(1, $event)" 抽检项:@change="handleSamplingChange(1, $event)" 在方法中: handleRequiredInspectionChange(index, event) { if (event) { // 如果必检项被选中 this.specForm[`sampling${index}`] = false; } } handleSamplingChange(index, event) { if (event) { // 如果抽检项被选中 this.specForm[`requiredInspection${index}`] = false; } } 但是,注意:我们使用v-model绑定的是布尔值,所以事件可以直接用@change,事件处理数中,我们根据当前选中的复选框来设置另一个为false。 但是,这样有一个问题:如果用户先选中必检,然后取消必检,那么抽检也不会自动选中,所以没问题。但是当用户取消选中的时候,我们不需要操作另一个。 因此,我们只需要在选中一个的时候,将另一个设为false即可。 修改模板,为每个复选框添加change事件: 例如第一行: 必检项: <input type="checkbox" v-model="specForm.requiredInspection1" @change="handleRequiredInspectionChange(1)"/> 抽检项: <input type="checkbox" v-model="specForm.sampling1" @change="handleSamplingChange(1)"/> 在方法中: handleRequiredInspectionChange(index) { if (this.specForm[`requiredInspection${index}`]) { this.specForm[`sampling${index}`] = false; } }, handleSamplingChange(index) { if (this.specForm[`sampling${index}`]) { this.specForm[`requiredInspection${index}`] = false; } } 这样,当用户选中必检时,如果必检变为true,则把抽检设为false;同样,当用户选中抽检时,如果抽检变为true,则把必检设为false。 注意:由于我们使用v-model,所以复选框的值会先变化,然后在change事件中我们修改另一个。 这个方案比较简单,且不需要修改数据结构,但需要为每一行的两个复选框都绑定事件(共30个事件绑定),不过我们可以用动态方法名。 但是,我们也可以写一个统一的方法: handleInspectionChange(type, index) { if (type === 'required') { if (this.specForm[`requiredInspection${index}`]) { this.specForm[`sampling${index}`] = false; } } else if (type === 'sampling') { if (this.specForm[`sampling${index}`]) { this.specForm[`requiredInspection${index}`] = false; } } } 在模板中: 必检项:@change="handleInspectionChange('required', 1)" 抽检项:@change="handleInspectionChange('sampling', 1)" 这样,我们只需要一个方法,然后传入类型和索引。 接下来,我们修改模板,为15行都添加上事件。 由于行数较多,我们需要修改15行,但这是可行的。 我们以第一行为例,修改后的代码如下: <tr> <td rowspan="14">功能测试</td> <td>充电过流保护</td> <td><input type="text" v-model="specForm.chargeOvercurrentProtection" style="width: 250px;" /></td> <td> <input type="checkbox" v-model="specForm.requiredInspection1" @change="handleInspectionChange('required', 1)"/> </td> <td> <input type="checkbox" v-model="specForm.sampling1" @change="handleInspectionChange('sampling', 1)"/> </td> <td></td> </tr> 其他行类似,只需要改变索引即可(2~15)。 注意:第15行在另一个tbody中,但同样处理。 另外,我们需要在data中初始化这些字段,之前已经有了。 最后,在methods中添加handleInspectionChange方法。 这个方法会确保当选中一个时,另一个取消选中。 但是,这种方法不能阻止用户通过代码同时设置两个为true(比如初始化时),但我们在初始化时应该保证不同时为true。所以我们还需要在初始化时检查,但一般不会同时为true。 因此,我们采用这个方案。 修改代码: 1. 在模板中,为15行的必检项和抽检项的复选框添加@change事件,并传入类型和索引(1~15)。 2. 在methods中添加handleInspectionChange方法。 由于行数较多,我们只展示修改后的部分行,其他行类似。 注意:第1行到第15行,索引从1到15。 我们修改模板中5.4功能测试及检验标准表中的15行。 但是,由于代码很长,我们只修改第一行和最后一行作为示例,其他行请按照相同方式修改。 修改后的部分代码: 第一行(索引1): <tr> <td rowspan="14">功能测试</td> <td>充电过流保护</td> <td><input type="text" v-model="specForm.chargeOvercurrentProtection" style="width: 250px;" /></td> <td> <input type="checkbox" v-model="specForm.requiredInspection1" @change="handleInspectionChange('required', 1)"/> </td> <td> <input type="checkbox" v-model="specForm.sampling1" @change="handleInspectionChange('sampling', 1)"/> </td> <td></td> </tr> 第二行(索引2): <tr> <td>充电过电流保护延时</td> <td><input type="text" v-model="specForm.chargeOvercurrentDelay" style="width: 250px;" /></td> <td> <input type="checkbox" v-model="specForm.requiredInspection2" @change="handleInspectionChange('required', 2)"/> </td> <td> <input type="checkbox" v-model="specForm.sampling2" @change="handleInspectionChange('sampling', 2)"/> </td> <td></td> </tr> 以此类推,直到第15行(索引15): <tr> <td>活化标准</td> <td>放电容量</td> <td><input type="text" v-model="specForm.standardDischargeCapacity" style="width: 250px;" /></td> <td> <input type="checkbox" v-model="specForm.requiredInspection15" @change="handleInspectionChange('required', 15)"/> </td> <td> <input type="checkbox" v-model="specForm.sampling15" @change="handleInspectionChange('sampling', 15)"/> </td> <td>全程活化放电容量</td> </tr> 然后,在methods中添加: handleInspectionChange(type, index) { if (type === 'required') { if (this.specForm[`requiredInspection${index}`]) { // 如果必检项被选中,则抽检项取消 this.specForm[`sampling${index}`] = false; } } else if (type === 'sampling') { if (this.specForm[`sampling${index}`]) { // 如果抽检项被选中,则必检项取消 this.specForm[`requiredInspection${index}`] = false; } } } 这样,当用户选中一个的时候,另一个就会自动取消。但是,如果用户先选中必检,然后再点必检取消,那么抽检不会改变(符合预期,因为取消必检时,不需要改变抽检)。 但是,这样用户还是可以同时不选(即两个都不选),这符合需求(只能选一项,也可以都不选)。 因此,我们按照这种方式修改。 最后,我们还需要注意:在初始化数据时,有可能出现两个都为true的情况(虽然不太可能),但为了避免,我们可以在初始化时检查每一行,如果两个都为true,则我们根据某个规则(比如优先必检)来设置,或者报错。但一般不会出现,所以我们暂时不考虑。 现在,我们修改代码。 由于代码量较大,我们只修改了部分行,请确保15行都修改。 另外,由于我们使用了动态属性名,注意使用模板字符串和方括号语法。 我们修改后的代码: 注意:在模板中,我们为每一行的两个复选框都添加了@change事件,并传入类型和索引。 在methods中,我们添加了handleInspectionChange方法。 这样,就满足了需求:在每一行中,必检项和抽检项只能选一项(可以都不选,但不能同时选)。 我们提交这个修改。 注意:由于代码太长,这里只展示修改的部分,完整代码请参考修改后的文件。 下面是修改后的部分代码示例(包括第一行和handleInspectionChange方法): </think> 根据需求,我们需要修改功能测试及检验标准表中的必检项和抽检项,确保用户只能选择其中一项(即二选一)。我将使用单选框(radio)替换复选框(checkbox),并调整相关逻辑。以下是具体解决方案: ### 修改方案: 1. 将原来的两个复选框替换为一组单选框(`radio-group` + `radio`) 2. 使用`el-radio-group`和`el-radio`组件确保只能选择一个 3. 修改数据结构,将原来的布尔值字段合并为字符串字段 4. 添加转换逻辑兼容旧数据 ### 代码实现: ```html <template> <!-- 功能测试表部分 --> <table class="spec-table"> <!-- ... 其他行保持不变 ... --> <tr> <td rowspan="14">功能测试</td> <td>充电过流保护</td> <td><input type="text" v-model="specForm.chargeOvercurrentProtection" style="width: 250px;" /></td> <!-- 修改为单选框组 --> <td colspan="2"> <el-radio-group v-model="specForm.inspectionType1"> <el-radio :label="'required'">必检</el-radio> <el-radio :label="'sampling'">抽检</el-radio> </el-radio-group> </td> <td></td> </tr> <!-- 其他行按相同方式修改... --> </table> </template> <script> export default { data() { return { specForm: { // 将原来的15对布尔值替换为15个字符串字段 inspectionType1: '', // 'required'或'sampling' inspectionType2: '', // ... 其他13个字段 } }; }, methods: { // 数据转换方法(用于兼容旧数据) convertLegacyData() { // 将旧的布尔值转换为新的字符串值 if (this.specForm.requiredInspection1) { this.specForm.inspectionType1 = 'required'; } else if (this.specForm.sampling1) { this.specForm.inspectionType1 = 'sampling'; } // 对其他14个字段进行同样转换... // 转换后可以删除旧字段 } } }; </script> ``` ### 代码说明: 1. **单选框组替代复选框**: - 使用`el-radio-group`包裹两个`el-radio`实现二选一 - `v-model`绑定到新的字符串字段(如`inspectionType1`) 2. **数据结构变更**: - 删除了原来的15对布尔值字段(`requiredInspection1-15`和`sampling1-15`) - 新增15个字符串字段(`inspectionType1-15`),值可以是: - `'required'`(必检) - `'sampling'`(抽检) - `''`(未选择) 3. **数据兼容处理**: - 添加`convertLegacyData()`方法将旧数据转换为新式 - 在获取数据后调用此方法(如在`handleUpdate`中) 4. **UI优化**: - 将两列合并为一列(colspan="2") - 使用Element UI的Radio组件确保更好的用户体验 ### 完整修改示例(第一行): ```html <tr> <td rowspan="14">功能测试</td> <td>充电过流保护</td> <td><input type="text" v-model="specForm.chargeOvercurrentProtection" style="width: 250px;" /></td> <td colspan="2"> <el-radio-group v-model="specForm.inspectionType1" size="mini"> <el-radio :label="'required'" border>必检</el-radio> <el-radio :label="'sampling'" border>抽检</el-radio> </el-radio-group> </td> <td></td> </tr> ``` ### 注意事项: 1. 需要对表中的15行都进行相同修改 2. 提交数据时需要处理新旧字段的转换 3. 在获取数据时调用转换方法确保兼容旧数据 ### 相关优化建议: 1. 添加"未选择"选项(如果需要) 2. 使用更紧凑的布局(如`size="mini"`) 3. 添加边框样式提高可读性(`border`属性)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值