feat(mes/qc): 增加物理性质和化学成分同时导入
新增了通用的综合导入组件，支持同时导入化学成分和物理性能数据，并在理化证书页面添加了对应的综合导入按钮和逻辑，实现一站式批量导入两种类型的质检数据。
This commit is contained in:
563
klp-ui/src/components/CombinedImport/index.vue
Normal file
563
klp-ui/src/components/CombinedImport/index.vue
Normal file
@@ -0,0 +1,563 @@
|
||||
<template>
|
||||
<el-dialog title="综合导入" :visible.sync="dialogVisible" width="1200px" top="3vh" append-to-body @close="handleClose">
|
||||
<div class="import-container">
|
||||
<div class="import-steps">
|
||||
<div class="step" :class="{ active: true, done: importStatus !== 'idle' && importStatus !== 'validated' }">
|
||||
<div class="step-badge">1</div>
|
||||
<div class="step-label">下载模板</div>
|
||||
</div>
|
||||
<div class="step-connector" :class="{ done: importStatus !== 'idle' }" />
|
||||
<div class="step" :class="{ active: importStatus === 'validated' || importStatus === 'processing' || importStatus === 'finished', done: importStatus !== 'idle' && importStatus !== 'validated' }">
|
||||
<div class="step-badge">2</div>
|
||||
<div class="step-label">上传文件</div>
|
||||
</div>
|
||||
<div class="step-connector" :class="{ done: importStatus === 'processing' || importStatus === 'finished' }" />
|
||||
<div class="step" :class="{ active: importStatus === 'validated' || importStatus === 'processing' || importStatus === 'finished', done: importStatus === 'processing' || importStatus === 'finished' }">
|
||||
<div class="step-badge">3</div>
|
||||
<div class="step-label">校验数据</div>
|
||||
</div>
|
||||
<div class="step-connector" :class="{ done: importStatus === 'processing' || importStatus === 'finished' }" />
|
||||
<div class="step" :class="{ active: importStatus === 'processing' || importStatus === 'finished', done: importStatus === 'finished' }">
|
||||
<div class="step-badge step-badge-success">4</div>
|
||||
<div class="step-label">批量导入</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="import-toolbar">
|
||||
<div class="toolbar-left">
|
||||
<el-upload ref="importUpload" action="" :auto-upload="false" :show-file-list="false"
|
||||
:on-change="handleFileChange" accept=".xlsx,.xls"
|
||||
:disabled="importStatus !== 'idle' && importStatus !== 'validated'">
|
||||
<el-button :type="importFile ? 'default' : 'primary'" :icon="importFile ? 'el-icon-document' : 'el-icon-upload2'">
|
||||
{{ importFile ? importFile.name : '选择Excel文件' }}
|
||||
</el-button>
|
||||
</el-upload>
|
||||
<el-button type="success" plain icon="el-icon-check" @click="handleValidate"
|
||||
:disabled="!importFile || validateLoading || importStatus !== 'idle'" :loading="validateLoading">校验数据</el-button>
|
||||
</div>
|
||||
<div class="toolbar-right">
|
||||
<el-button v-if="importStatus === 'validated'" type="primary" icon="el-icon-upload-success" @click="startImport" :loading="importLoading">开始导入</el-button>
|
||||
<el-button plain icon="el-icon-download" @click="downloadTemplate">下载模板</el-button>
|
||||
<el-button plain icon="el-icon-refresh" @click="resetImport">重置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="importTableData.length > 0" class="data-preview">
|
||||
<el-tabs v-model="activeTab" type="card">
|
||||
<el-tab-pane label="化学成分" name="chem">
|
||||
<el-table ref="chemTable" :data="chemPreviewData" border size="small" max-height="300" stripe>
|
||||
<el-table-column label="#" width="48" type="index" align="center" />
|
||||
<el-table-column prop="coilNo" label="入场钢卷号" width="140" />
|
||||
<el-table-column prop="supplierCoilNo" label="厂家卷号" width="120" />
|
||||
<el-table-column prop="c" label="C(%)" width="70" align="center" />
|
||||
<el-table-column prop="si" label="Si(%)" width="70" align="center" />
|
||||
<el-table-column prop="mn" label="Mn(%)" width="70" align="center" />
|
||||
<el-table-column prop="p" label="P(%)" width="70" align="center" />
|
||||
<el-table-column prop="s" label="S(%)" width="70" align="center" />
|
||||
<el-table-column prop="als" label="Als(%)" width="70" align="center" />
|
||||
<el-table-column prop="al" label="Al(%)" width="70" align="center" />
|
||||
<el-table-column prop="ti" label="Ti(%)" width="70" align="center" />
|
||||
<el-table-column prop="cr" label="Cr(%)" width="70" align="center" />
|
||||
<el-table-column prop="ni" label="Ni(%)" width="70" align="center" />
|
||||
<el-table-column prop="cu" label="Cu(%)" width="70" align="center" />
|
||||
<el-table-column prop="n" label="N(%)" width="70" align="center" />
|
||||
<el-table-column prop="fe" label="Fe(%)" width="70" align="center" />
|
||||
<el-table-column prop="b" label="B(%)" width="70" align="center" />
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="物理性能" name="phys">
|
||||
<el-table ref="physTable" :data="physPreviewData" border size="small" max-height="300" stripe>
|
||||
<el-table-column label="#" width="48" type="index" align="center" />
|
||||
<el-table-column prop="coilNo" label="入场钢卷号" width="140" />
|
||||
<el-table-column prop="supplierCoilNo" label="厂家卷号" width="120" />
|
||||
<el-table-column prop="yieldStrength" label="屈服强度(MPa)" width="110" align="center" />
|
||||
<el-table-column prop="tensileStrength" label="抗拉强度(MPa)" width="110" align="center" />
|
||||
<el-table-column prop="elongation" label="伸长率(%)" width="80" align="center" />
|
||||
<el-table-column prop="plasticExtensionStrength" label="规定塑性延伸强度(MPa)" width="120" align="center" />
|
||||
<el-table-column prop="hardness" label="硬度(HRB)" width="80" align="center" />
|
||||
<el-table-column prop="coatingMass" label="镀层重量(g/m²)" width="100" align="center" />
|
||||
<el-table-column prop="bendingTest" label="弯曲试验" width="80" align="center" />
|
||||
<el-table-column prop="surfaceQuality" label="表面质量" width="80" align="center" />
|
||||
<el-table-column prop="surfaceStructure" label="表面结构" width="80" align="center" />
|
||||
<el-table-column prop="coatingSurfaceStructure" label="镀层表面结构" width="90" align="center" />
|
||||
<el-table-column prop="edgeStatus" label="边缘状态" width="80" align="center" />
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
||||
<div v-if="importStatus === 'processing'" class="import-progress">
|
||||
<div class="progress-header">
|
||||
<i class="el-icon-loading" />
|
||||
<span>正在批量导入数据，请稍候...</span>
|
||||
</div>
|
||||
<el-progress :percentage="importProgress" :stroke-width="8" />
|
||||
<div style="margin-top: 8px; font-size: 12px; color: #606266;">
|
||||
化学成分: {{ chemImportedCount }} / {{ chemTotalCount }} 物理性能: {{ physImportedCount }} / {{ physTotalCount }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="importStatus === 'finished'" class="result-panel result-success">
|
||||
<div class="result-icon"><i class="el-icon-circle-check" /></div>
|
||||
<div class="result-body">
|
||||
<div class="result-title">导入完成</div>
|
||||
<div class="result-desc">
|
||||
共成功导入 <b>{{ chemImportedCount }}</b> 条化学成分数据，<b>{{ physImportedCount }}</b> 条物理性能数据
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="importStatus === 'error'" class="result-panel result-error">
|
||||
<div class="result-icon"><i class="el-icon-circle-close" /></div>
|
||||
<div class="result-body">
|
||||
<div class="result-title">导入失败</div>
|
||||
<div class="result-desc">{{ importErrorMsg }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-dialog title="选择对应入场卷号" :visible.sync="ambiguousVisible" width="600px" append-to-body :close-on-click-modal="false">
|
||||
<div style="font-size: 12px; color: #909399; margin-bottom: 12px;">
|
||||
厂家卷号匹配到多条入场卷号，请为每行选择对应记录
|
||||
</div>
|
||||
<el-table :data="ambiguousRows" border size="small" max-height="350">
|
||||
<el-table-column label="厂家卷号" prop="supplierCoilNo" width="140" />
|
||||
<el-table-column label="选择入场卷号" min-width="280">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.selected" placeholder="请选择入场卷号" size="small" style="width: 100%;">
|
||||
<el-option
|
||||
v-for="opt in scope.row.options"
|
||||
:key="opt"
|
||||
:label="opt"
|
||||
:value="opt"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="confirmAmbiguous">确 定</el-button>
|
||||
<el-button @click="ambiguousVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as XLSX from 'xlsx';
|
||||
import { batchAddChemicalItem } from "@/api/mes/qc/chemicalItem";
|
||||
import { batchAddPhysicalItem } from "@/api/mes/qc/physicalItem";
|
||||
import { listMaterialCoil } from "@/api/wms/coil";
|
||||
|
||||
const TEMPLATE_HEADERS = [
|
||||
'入场钢卷号', '厂家卷号',
|
||||
'C(%)', 'Si(%)', 'Mn(%)', 'P(%)', 'S(%)', 'Als(%)', 'Al(%)', 'Ti(%)', 'Cr(%)', 'Ni(%)', 'Cu(%)', 'N(%)', 'Fe(%)', 'B(%)',
|
||||
'屈服强度(MPa)', '抗拉强度(MPa)', '伸长率(%)', '规定塑性延伸强度(MPa)', '硬度(HRB)', '镀层重量(g/m²)',
|
||||
'弯曲试验', '表面质量', '表面结构', '镀层表面结构', '边缘状态'
|
||||
];
|
||||
|
||||
const HEADER_MAP = {
|
||||
'入场钢卷号': 'coilNo',
|
||||
'厂家卷号': 'supplierCoilNo',
|
||||
'C(%)': 'c', 'Si(%)': 'si', 'Mn(%)': 'mn', 'P(%)': 'p', 'S(%)': 's',
|
||||
'Als(%)': 'als', 'Al(%)': 'al', 'Ti(%)': 'ti', 'Cr(%)': 'cr', 'Ni(%)': 'ni',
|
||||
'Cu(%)': 'cu', 'N(%)': 'n', 'Fe(%)': 'fe', 'B(%)': 'b',
|
||||
'屈服强度(MPa)': 'yieldStrength', '抗拉强度(MPa)': 'tensileStrength', '伸长率(%)': 'elongation',
|
||||
'规定塑性延伸强度(MPa)': 'plasticExtensionStrength', '硬度(HRB)': 'hardness',
|
||||
'镀层重量(g/m²)': 'coatingMass', '弯曲试验': 'bendingTest', '表面质量': 'surfaceQuality',
|
||||
'表面结构': 'surfaceStructure', '镀层表面结构': 'coatingSurfaceStructure', '边缘状态': 'edgeStatus'
|
||||
};
|
||||
|
||||
const CHEM_FIELDS = ['c', 'si', 'mn', 'p', 's', 'als', 'al', 'ti', 'cr', 'ni', 'cu', 'n', 'fe', 'b'];
|
||||
const PHYS_FIELDS = ['yieldStrength', 'tensileStrength', 'elongation', 'plasticExtensionStrength', 'hardness', 'coatingMass', 'bendingTest', 'surfaceQuality', 'surfaceStructure', 'coatingSurfaceStructure', 'edgeStatus'];
|
||||
|
||||
export default {
|
||||
name: "CombinedImport",
|
||||
props: {
|
||||
visible: { type: Boolean, default: false }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
importFile: null,
|
||||
importRawData: [],
|
||||
importTableData: [],
|
||||
importErrorList: [],
|
||||
importProgress: 0,
|
||||
importStatus: 'idle',
|
||||
importErrorMsg: '',
|
||||
validateLoading: false,
|
||||
importLoading: false,
|
||||
ambiguousVisible: false,
|
||||
ambiguousRows: [],
|
||||
activeTab: 'chem',
|
||||
chemImportedCount: 0,
|
||||
physImportedCount: 0,
|
||||
chemTotalCount: 0,
|
||||
physTotalCount: 0
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
dialogVisible: {
|
||||
get() { return this.visible; },
|
||||
set(val) { this.$emit('update:visible', val); }
|
||||
},
|
||||
chemPreviewData() {
|
||||
return this.importTableData.map(row => {
|
||||
const item = { coilNo: row.coilNo, supplierCoilNo: row.supplierCoilNo };
|
||||
CHEM_FIELDS.forEach(f => { item[f] = row[f] || ''; });
|
||||
return item;
|
||||
});
|
||||
},
|
||||
physPreviewData() {
|
||||
return this.importTableData.map(row => {
|
||||
const item = { coilNo: row.coilNo, supplierCoilNo: row.supplierCoilNo };
|
||||
PHYS_FIELDS.forEach(f => { item[f] = row[f] || ''; });
|
||||
return item;
|
||||
});
|
||||
},
|
||||
hasChemData() {
|
||||
return this.importTableData.some(row => CHEM_FIELDS.some(f => row[f]));
|
||||
},
|
||||
hasPhysData() {
|
||||
return this.importTableData.some(row => PHYS_FIELDS.some(f => row[f]));
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClose() {
|
||||
this.resetImport();
|
||||
this.$emit('close');
|
||||
},
|
||||
handleFileChange(file) {
|
||||
if (this.validateLoading || this.importLoading) return;
|
||||
this.importFile = file.raw;
|
||||
this.importErrorList = [];
|
||||
this.importStatus = 'idle';
|
||||
this.readExcel();
|
||||
},
|
||||
async readExcel() {
|
||||
if (!this.importFile) return;
|
||||
try {
|
||||
const reader = new FileReader();
|
||||
reader.readAsArrayBuffer(this.importFile);
|
||||
reader.onload = async (e) => {
|
||||
try {
|
||||
const data = new Uint8Array(e.target.result);
|
||||
const wb = XLSX.read(data, { type: 'array' });
|
||||
const ws = wb.Sheets[wb.SheetNames[0]];
|
||||
const json = XLSX.utils.sheet_to_json(ws, { header: 1 });
|
||||
this.validateHeaders(json[0]);
|
||||
this.importRawData = json.slice(1).filter(r => r.some(c => c != null && c !== ''));
|
||||
this.formatExcel();
|
||||
this.$message.success(`成功解析Excel，共读取到 ${this.importRawData.length} 条数据`);
|
||||
} catch (err) { this.handleError('解析Excel失败：' + err.message); }
|
||||
};
|
||||
} catch (err) { this.handleError('读取文件失败：' + err.message); }
|
||||
},
|
||||
validateHeaders(headers) {
|
||||
this.importErrorList = [];
|
||||
if (!headers || headers.length < TEMPLATE_HEADERS.length) {
|
||||
this.importErrorList.push({ rowNum: 1, errorMsg: `表头数量不匹配，要求至少${TEMPLATE_HEADERS.length}列` });
|
||||
return;
|
||||
}
|
||||
TEMPLATE_HEADERS.forEach((h, i) => {
|
||||
if (headers[i] !== h) this.importErrorList.push({ rowNum: 1, errorMsg: `第${i + 1}列表头错误，要求："${h}"，实际："${headers[i] || ''}"` });
|
||||
});
|
||||
if (this.importErrorList.length > 0) this.$message.error('Excel表头格式不符合要求，请检查！');
|
||||
},
|
||||
formatExcel() {
|
||||
this.importTableData = [];
|
||||
if (!this.importRawData.length) return;
|
||||
this.importRawData.forEach((row, i) => {
|
||||
const obj = {};
|
||||
TEMPLATE_HEADERS.forEach((h, j) => { obj[HEADER_MAP[h]] = row[j] != null ? String(row[j]).trim() : ''; });
|
||||
obj.rowNum = i + 2;
|
||||
obj._status = 'pending';
|
||||
this.importTableData.push(obj);
|
||||
});
|
||||
},
|
||||
async handleValidate() {
|
||||
if (!this.importFile || !this.importRawData.length) { this.$message.warning('暂无数据可校验'); return; }
|
||||
this.validateLoading = true;
|
||||
this.importErrorList = [];
|
||||
this.ambiguousRows = [];
|
||||
const dataRows = this.importRawData;
|
||||
for (let i = 0; i < dataRows.length; i++) {
|
||||
const rowNum = i + 2;
|
||||
let coilNo = '', supplierCoilNo = '';
|
||||
TEMPLATE_HEADERS.forEach((h, j) => {
|
||||
if (HEADER_MAP[h] === 'coilNo') coilNo = dataRows[i][j];
|
||||
if (HEADER_MAP[h] === 'supplierCoilNo') supplierCoilNo = dataRows[i][j];
|
||||
});
|
||||
coilNo = String(coilNo || '').trim();
|
||||
supplierCoilNo = String(supplierCoilNo || '').trim();
|
||||
if (!coilNo && !supplierCoilNo) {
|
||||
this.importErrorList.push({ rowNum, errorMsg: '入场钢卷号和厂家卷号不能同时为空' });
|
||||
}
|
||||
}
|
||||
if (this.importErrorList.length === 0) {
|
||||
this.importTableData.forEach((row, idx) => {
|
||||
const cn = (row.coilNo || '').trim();
|
||||
const sn = (row.supplierCoilNo || '').trim();
|
||||
row._sno = sn;
|
||||
row._idx = idx;
|
||||
row._fillCoilNo = cn;
|
||||
if (sn && !cn) row._needMatch = true;
|
||||
});
|
||||
const needMatchRows = this.importTableData.filter(r => r._needMatch);
|
||||
if (needMatchRows.length > 0) {
|
||||
const uniqueSnos = [...new Set(needMatchRows.map(r => r._sno))];
|
||||
const multiMap = {};
|
||||
try {
|
||||
const results = await Promise.all(
|
||||
uniqueSnos.map(sno => listMaterialCoil({ supplierCoilNo: sno, pageNum: 1, pageSize: 50 }))
|
||||
);
|
||||
uniqueSnos.forEach((sno, idx) => {
|
||||
const rows = (results[idx] && results[idx].rows) || [];
|
||||
const enterNos = [...new Set(rows.map(r => r.enterCoilNo).filter(Boolean))];
|
||||
multiMap[sno] = enterNos;
|
||||
});
|
||||
} catch (err) {
|
||||
this.validateLoading = false;
|
||||
this.handleError('厂家卷号匹配失败：' + err.message);
|
||||
return;
|
||||
}
|
||||
const ambiguousList = [];
|
||||
needMatchRows.forEach(row => {
|
||||
const candidates = multiMap[row._sno] || [];
|
||||
if (candidates.length === 0) {
|
||||
this.importErrorList.push({ rowNum: (row.rowNum || (row._idx + 2)), errorMsg: `厂家卷号"${row._sno}"未匹配到入场卷号` });
|
||||
} else if (candidates.length === 1) {
|
||||
row.coilNo = candidates[0];
|
||||
} else {
|
||||
ambiguousList.push({
|
||||
_idx: row._idx,
|
||||
supplierCoilNo: row._sno,
|
||||
options: candidates,
|
||||
selected: null
|
||||
});
|
||||
}
|
||||
});
|
||||
if (ambiguousList.length > 0) {
|
||||
this.ambiguousRows = ambiguousList;
|
||||
this.validateLoading = false;
|
||||
this.ambiguousVisible = true;
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
this.finishValidation();
|
||||
},
|
||||
confirmAmbiguous() {
|
||||
const unselected = this.ambiguousRows.filter(r => !r.selected);
|
||||
if (unselected.length > 0) {
|
||||
this.$message.warning('请为所有行选择入场卷号');
|
||||
return;
|
||||
}
|
||||
this.ambiguousRows.forEach(item => {
|
||||
this.importTableData[item._idx].coilNo = item.selected;
|
||||
});
|
||||
this.ambiguousVisible = false;
|
||||
this.validateLoading = true;
|
||||
this.finishValidation();
|
||||
},
|
||||
finishValidation() {
|
||||
if (this.importErrorList.length > 0) {
|
||||
this.$message.error(`数据校验失败，共发现${this.importErrorList.length}条错误`);
|
||||
} else {
|
||||
this.importTableData.forEach(row => { row._status = 'valid'; });
|
||||
const hasChem = this.importTableData.some(r => CHEM_FIELDS.some(f => r[f]));
|
||||
const hasPhys = this.importTableData.some(r => PHYS_FIELDS.some(f => r[f]));
|
||||
if (!hasChem && !hasPhys) {
|
||||
this.$message.warning('Excel中没有填写任何化学成分或物理性能数据');
|
||||
} else {
|
||||
this.$message.success('数据校验通过');
|
||||
this.importStatus = 'validated';
|
||||
}
|
||||
}
|
||||
this.validateLoading = false;
|
||||
},
|
||||
async startImport() {
|
||||
const rows = this.importTableData.filter(r => r._status === 'valid');
|
||||
if (!rows.length) { this.$message.warning('没有可导入的数据'); return; }
|
||||
|
||||
const chemRows = rows.filter(r => CHEM_FIELDS.some(f => r[f]));
|
||||
const physRows = rows.filter(r => PHYS_FIELDS.some(f => r[f]));
|
||||
|
||||
if (!chemRows.length && !physRows.length) {
|
||||
this.$message.warning('没有可导入的数据');
|
||||
return;
|
||||
}
|
||||
|
||||
let confirmMsg = '确认导入以下数据？';
|
||||
if (chemRows.length) confirmMsg += ` 化学成分${chemRows.length}条`;
|
||||
if (physRows.length) confirmMsg += ` 物理性能${physRows.length}条`;
|
||||
const ok = await this.$confirm(confirmMsg, '导入确认', { confirmButtonText: '确认导入', cancelButtonText: '取消', type: 'warning' }).catch(() => false);
|
||||
if (!ok) return;
|
||||
|
||||
this.importLoading = true;
|
||||
this.importStatus = 'processing';
|
||||
this.importProgress = 0;
|
||||
this.chemTotalCount = chemRows.length;
|
||||
this.physTotalCount = physRows.length;
|
||||
this.chemImportedCount = 0;
|
||||
this.physImportedCount = 0;
|
||||
this.importErrorMsg = '';
|
||||
|
||||
try {
|
||||
const promises = [];
|
||||
if (chemRows.length) {
|
||||
const chemPayload = chemRows.map(row => {
|
||||
const item = { coilId: null, coilNo: row.coilNo };
|
||||
CHEM_FIELDS.forEach(f => { if (row[f]) item[f] = row[f]; });
|
||||
return item;
|
||||
});
|
||||
promises.push(
|
||||
batchAddChemicalItem(chemPayload).then(res => {
|
||||
if (res.code !== 200) throw new Error(res.msg || '化学成分批量导入失败');
|
||||
this.chemImportedCount = chemPayload.length;
|
||||
this.importProgress = 50;
|
||||
})
|
||||
);
|
||||
}
|
||||
if (physRows.length) {
|
||||
const physPayload = physRows.map(row => {
|
||||
const item = { coilId: null, coilNo: row.coilNo };
|
||||
PHYS_FIELDS.forEach(f => { if (row[f]) item[f] = row[f]; });
|
||||
return item;
|
||||
});
|
||||
promises.push(
|
||||
batchAddPhysicalItem(physPayload).then(res => {
|
||||
if (res.code !== 200) throw new Error(res.msg || '物理性能批量导入失败');
|
||||
this.physImportedCount = physPayload.length;
|
||||
this.importProgress = 100;
|
||||
})
|
||||
);
|
||||
}
|
||||
await Promise.all(promises);
|
||||
this.importStatus = 'finished';
|
||||
this.importProgress = 100;
|
||||
this.$message.success(`导入完成！化学成分${this.chemImportedCount}条，物理性能${this.physImportedCount}条`);
|
||||
this.$emit('success');
|
||||
} catch (err) {
|
||||
this.handleError(err.message);
|
||||
} finally {
|
||||
this.importLoading = false;
|
||||
}
|
||||
},
|
||||
resetImport() {
|
||||
if (this.validateLoading || this.importLoading || this.importStatus === 'processing') { this.$message.warning('当前有操作正在进行中'); return; }
|
||||
this.importFile = null;
|
||||
this.importRawData = [];
|
||||
this.importTableData = [];
|
||||
this.importErrorList = [];
|
||||
this.importProgress = 0;
|
||||
this.importStatus = 'idle';
|
||||
this.importErrorMsg = '';
|
||||
this.chemImportedCount = 0;
|
||||
this.physImportedCount = 0;
|
||||
this.chemTotalCount = 0;
|
||||
this.physTotalCount = 0;
|
||||
this.activeTab = 'chem';
|
||||
this.$refs.importUpload?.clearFiles();
|
||||
},
|
||||
downloadTemplate() {
|
||||
const sampleRow = [
|
||||
'示例卷号', '示例厂家卷号',
|
||||
'0.05', '0.02', '0.30', '0.015', '0.008', '0.040', '0.04', '0.05', '0.03', '0.02', '0.03', '0.005', '98', '0.001',
|
||||
'300', '420', '35', '260', '85', '275', '合格', '良好', '光面', '无锌花', '良好'
|
||||
];
|
||||
const wb = XLSX.utils.book_new();
|
||||
const ws = XLSX.utils.aoa_to_sheet([TEMPLATE_HEADERS, sampleRow]);
|
||||
ws['!cols'] = [
|
||||
{ wch: 16 }, { wch: 16 },
|
||||
{ wch: 8 }, { wch: 8 }, { wch: 8 }, { wch: 8 }, { wch: 8 }, { wch: 8 }, { wch: 8 }, { wch: 8 }, { wch: 8 }, { wch: 8 }, { wch: 8 }, { wch: 8 }, { wch: 8 }, { wch: 8 },
|
||||
{ wch: 16 }, { wch: 16 }, { wch: 10 }, { wch: 20 }, { wch: 10 }, { wch: 16 },
|
||||
{ wch: 10 }, { wch: 10 }, { wch: 10 }, { wch: 12 }, { wch: 10 }
|
||||
];
|
||||
XLSX.utils.book_append_sheet(wb, ws, '综合导入模板');
|
||||
XLSX.writeFile(wb, '综合导入模板.xlsx');
|
||||
},
|
||||
handleError(msg) {
|
||||
this.$message.error(msg);
|
||||
this.importStatus = 'error';
|
||||
this.importErrorMsg = msg;
|
||||
this.validateLoading = false;
|
||||
this.importLoading = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.import-container { padding: 0 4px; }
|
||||
|
||||
.import-steps {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
margin-bottom: 24px; padding: 20px 0 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.step {
|
||||
display: flex; flex-direction: column; align-items: center; gap: 6px;
|
||||
opacity: 0.45; transition: all 0.3s;
|
||||
}
|
||||
.step.active { opacity: 1; }
|
||||
.step.done { opacity: 0.65; }
|
||||
|
||||
.step-badge {
|
||||
width: 32px; height: 32px; border-radius: 50%;
|
||||
background: #dcdfe6; color: #fff;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 14px; font-weight: 600; transition: all 0.3s;
|
||||
}
|
||||
.step.active .step-badge { background: #409eff; box-shadow: 0 2px 8px rgba(64,158,255,0.35); }
|
||||
.step.done .step-badge { background: #67c23a; }
|
||||
.step-badge-success { background: #67c23a !important; }
|
||||
.step.active .step-badge-success { background: #67c23a !important; box-shadow: 0 2px 8px rgba(103,194,58,0.35) !important; }
|
||||
|
||||
.step-label { font-size: 12px; color: #606266; white-space: nowrap; }
|
||||
.step.active .step-label { color: #303133; font-weight: 600; }
|
||||
|
||||
.step-connector {
|
||||
width: 48px; height: 2px; background: #dcdfe6;
|
||||
margin: 0 4px; margin-bottom: 24px; transition: all 0.3s;
|
||||
}
|
||||
.step-connector.done { background: #67c23a; }
|
||||
|
||||
.import-toolbar {
|
||||
display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
|
||||
gap: 8px; margin-bottom: 16px; padding: 12px 16px;
|
||||
background: #fafafa; border-radius: 8px; border: 1px solid #eee;
|
||||
}
|
||||
|
||||
.toolbar-left, .toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
||||
|
||||
.data-preview { margin-bottom: 12px; }
|
||||
|
||||
.import-progress {
|
||||
padding: 24px; background: #f6ffed; border-radius: 8px;
|
||||
border: 1px solid #b7eb8f; margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.progress-header {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
margin-bottom: 12px; font-size: 14px; color: #52c41a; font-weight: 500;
|
||||
}
|
||||
|
||||
.result-panel {
|
||||
display: flex; align-items: center; gap: 16px;
|
||||
padding: 20px 24px; border-radius: 8px; margin-bottom: 12px;
|
||||
}
|
||||
.result-success { background: #f6ffed; border: 1px solid #b7eb8f; }
|
||||
.result-error { background: #fff2f0; border: 1px solid #ffa39e; }
|
||||
|
||||
.result-icon { font-size: 36px; line-height: 1; }
|
||||
.result-success .result-icon { color: #52c41a; }
|
||||
.result-error .result-icon { color: #ff4d4f; }
|
||||
|
||||
.result-title { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
|
||||
.result-success .result-title { color: #389e0d; }
|
||||
.result-error .result-title { color: #cf1322; }
|
||||
|
||||
.result-desc { font-size: 13px; color: #606266; }
|
||||
</style>
|
||||
@@ -48,6 +48,15 @@
|
||||
@click="openImportDialog"
|
||||
>导入</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-upload"
|
||||
size="mini"
|
||||
@click="openCombinedImport"
|
||||
>综合导入</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
@@ -307,6 +316,8 @@
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<combined-import :visible.sync="combinedImportVisible" @success="getList" />
|
||||
|
||||
<el-dialog title="选择对应入场卷号" :visible.sync="ambiguousVisible" width="600px" append-to-body :close-on-click-modal="false">
|
||||
<div style="font-size: 12px; color: #909399; margin-bottom: 12px;">
|
||||
厂家卷号匹配到多条入场卷号，请为每行选择对应记录
|
||||
@@ -339,6 +350,7 @@
|
||||
import * as XLSX from 'xlsx';
|
||||
import { listChemicalItem, getChemicalItem, delChemicalItem, addChemicalItem, updateChemicalItem, batchAddChemicalItem } from "@/api/mes/qc/chemicalItem";
|
||||
import CoilSelector from "@/components/CoilSelector";
|
||||
import CombinedImport from "@/components/CombinedImport";
|
||||
import { listMaterialCoil } from "@/api/wms/coil";
|
||||
|
||||
const CHEMI_TEMPLATE_HEADERS = ['入场钢卷号', '厂家卷号', 'C(%)', 'Si(%)', 'Mn(%)', 'P(%)', 'S(%)', 'Als(%)', 'Al(%)', 'Ti(%)', 'Cr(%)', 'Ni(%)', 'Cu(%)', 'N(%)', 'Fe(%)', 'B(%)'];
|
||||
@@ -365,7 +377,8 @@ const CHEMI_HEADER_MAP = {
|
||||
export default {
|
||||
name: "ChemicalItem",
|
||||
components: {
|
||||
CoilSelector
|
||||
CoilSelector,
|
||||
CombinedImport
|
||||
},
|
||||
computed: {},
|
||||
data() {
|
||||
@@ -437,6 +450,7 @@ export default {
|
||||
supplierCoilNoLoading: false,
|
||||
ambiguousVisible: false,
|
||||
ambiguousRows: [],
|
||||
combinedImportVisible: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
@@ -577,6 +591,9 @@ export default {
|
||||
openImportDialog() {
|
||||
this.importDialogVisible = true;
|
||||
},
|
||||
openCombinedImport() {
|
||||
this.combinedImportVisible = true;
|
||||
},
|
||||
importHandleFileChange(file) {
|
||||
if (this.importValidateLoading || this.importLoading) return;
|
||||
this.importFile = file.raw;
|
||||
|
||||
@@ -104,6 +104,15 @@
|
||||
@click="openImportDialog"
|
||||
>导入</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-upload"
|
||||
size="mini"
|
||||
@click="openCombinedImport"
|
||||
>综合导入</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
@@ -339,6 +348,8 @@
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<combined-import :visible.sync="combinedImportVisible" @success="getList" />
|
||||
|
||||
<el-dialog title="选择对应入场卷号" :visible.sync="ambiguousVisible" width="600px" append-to-body :close-on-click-modal="false">
|
||||
<div style="font-size: 12px; color: #909399; margin-bottom: 12px;">
|
||||
厂家卷号匹配到多条入场卷号，请为每行选择对应记录
|
||||
@@ -371,6 +382,7 @@
|
||||
import * as XLSX from 'xlsx';
|
||||
import { listPhysicalItem, getPhysicalItem, delPhysicalItem, addPhysicalItem, updatePhysicalItem, batchAddPhysicalItem } from "@/api/mes/qc/physicalItem";
|
||||
import CoilSelector from "@/components/CoilSelector";
|
||||
import CombinedImport from "@/components/CombinedImport";
|
||||
import { listMaterialCoil } from "@/api/wms/coil";
|
||||
|
||||
const PHYS_TEMPLATE_HEADERS = [
|
||||
@@ -397,7 +409,8 @@ const PHYS_HEADER_MAP = {
|
||||
export default {
|
||||
name: "PhysicalItem",
|
||||
components: {
|
||||
CoilSelector
|
||||
CoilSelector,
|
||||
CombinedImport
|
||||
},
|
||||
computed: {},
|
||||
data() {
|
||||
@@ -465,6 +478,7 @@ export default {
|
||||
supplierCoilNoLoading: false,
|
||||
ambiguousVisible: false,
|
||||
ambiguousRows: [],
|
||||
combinedImportVisible: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
@@ -601,6 +615,9 @@ export default {
|
||||
openImportDialog() {
|
||||
this.importDialogVisible = true;
|
||||
},
|
||||
openCombinedImport() {
|
||||
this.combinedImportVisible = true;
|
||||
},
|
||||
importHandleFileChange(file) {
|
||||
if (this.importValidateLoading || this.importLoading) return;
|
||||
this.importFile = file.raw;
|
||||
|
||||
Reference in New Issue
Block a user