757 lines
23 KiB
Vue
757 lines
23 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<!-- 搜索部分 -->
|
||
<el-form :model="searchForm" inline size="mini" label-width="80px">
|
||
<el-form-item label="开始日期">
|
||
<el-date-picker
|
||
:style="{ width: inputWidth }"
|
||
v-model="searchForm.startDate"
|
||
type="datetime"
|
||
placeholder="选择日期时间"
|
||
align="right"
|
||
:picker-options="datePickerOptions"
|
||
>
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item label="结束日期">
|
||
<el-date-picker
|
||
:style="{ width: inputWidth }"
|
||
v-model="searchForm.endDate"
|
||
type="datetime"
|
||
placeholder="选择日期时间"
|
||
align="right"
|
||
:picker-options="datePickerOptions"
|
||
>
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item label="批次号">
|
||
<el-input
|
||
v-model.trim="searchForm.batchNumber"
|
||
placeholder="输入批次号"
|
||
:style="{ width: inputWidth }"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="颜色代号">
|
||
<el-input
|
||
v-model.trim="searchForm.colorCode"
|
||
placeholder="颜色代号"
|
||
:style="{ width: inputWidth }"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="产品描述">
|
||
<el-input
|
||
v-model.trim="searchForm.productDescription"
|
||
placeholder="输入产品描述"
|
||
:style="{ width: inputWidth }"
|
||
></el-input>
|
||
</el-form-item>
|
||
<br />
|
||
<el-form-item label=" ">
|
||
<el-button
|
||
size="mini"
|
||
type="primary"
|
||
icon="el-icon-search"
|
||
@click="fetchData"
|
||
>搜索</el-button
|
||
>
|
||
<el-button
|
||
size="mini"
|
||
type="primary"
|
||
icon="el-icon-plus"
|
||
@click="showAddDialog = true"
|
||
>增加记录</el-button
|
||
>
|
||
<el-button
|
||
size="mini"
|
||
type="success"
|
||
icon="el-icon-download"
|
||
@click="exportData"
|
||
>导出当前搜索数据</el-button
|
||
>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div style="width: 100%; display: flex; justify-content: flex-end">
|
||
<pagination
|
||
:pageSizes="[30, 60, 120, 240]"
|
||
:total="pagination.total"
|
||
:page.sync="pagination.currentPage"
|
||
:limit.sync="pagination.pageSize"
|
||
@pagination="fetchData"
|
||
/>
|
||
</div>
|
||
<div style="width: 100%">
|
||
<div style="font-size: 20px; text-align: center">
|
||
原材料数据记录 共 {{ realTotal }} 条
|
||
</div>
|
||
</div>
|
||
<el-button
|
||
size="mini"
|
||
type="primary"
|
||
icon="el-icon-check"
|
||
@click="saveAllChanges"
|
||
:disabled="Object.keys(modifiedRows).length === 0"
|
||
>
|
||
保存所有修改（已修改 {{ Object.keys(modifiedRows).length }} 处）
|
||
</el-button>
|
||
<!-- 表格部分 -->
|
||
<vxe-table
|
||
@menu-click="handleContextMenuClick"
|
||
:menu-config="tableMenuConfig"
|
||
border
|
||
:header-cell-style="getHeaderCellStyle"
|
||
ref="dataTable"
|
||
:column-config="{ resizable: true }"
|
||
:row-config="{ isHover: false, isCurrent: false, height: 30 }"
|
||
:loading="isLoading"
|
||
:data="qualityStatistics"
|
||
:merge-cells="mergedCells"
|
||
:cell-style="getCellStyle"
|
||
size="mini"
|
||
align="center"
|
||
height="800px"
|
||
:export-config="{}"
|
||
:edit-config="{ trigger: 'click', mode: 'cell' }"
|
||
@edit-actived="handleEditActived"
|
||
@edit-closed="handleEditClosed"
|
||
>
|
||
<vxe-column
|
||
field="code"
|
||
title="颜色/代号"
|
||
width="140px"
|
||
:edit-render="{ autofocus: '.vxe-input--inner' }"
|
||
>
|
||
<template #edit="{ row }">
|
||
<vxe-textarea
|
||
:autosize="{ minRows: 4 }"
|
||
v-model="row.code"
|
||
type="text"
|
||
></vxe-textarea>
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column
|
||
field="description"
|
||
title="产品描述"
|
||
width="140px"
|
||
:edit-render="{ autofocus: '.vxe-input--inner' }"
|
||
>
|
||
<template #edit="{ row }">
|
||
<vxe-textarea
|
||
:autosize="{ minRows: 4 }"
|
||
v-model="row.description"
|
||
@input="handleSearchMaterial(row)"
|
||
type="text"
|
||
></vxe-textarea>
|
||
|
||
<!-- 物料清单下拉建议功能 -->
|
||
<div class="material-suggestions" v-if="materialList.length">
|
||
<div
|
||
v-for="material in materialList"
|
||
:key="material.key"
|
||
@click="handleSelectMaterial(row, material)"
|
||
>
|
||
{{ material.label }}
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column
|
||
field="pci"
|
||
title="批次号"
|
||
width="140px"
|
||
:edit-render="{ autofocus: '.vxe-input--inner' }"
|
||
>
|
||
<template #edit="{ row }">
|
||
<vxe-textarea
|
||
:autosize="{ minRows: 4 }"
|
||
v-model="row.pci"
|
||
type="text"
|
||
></vxe-textarea>
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column field="value01" title="角度" width="140px"></vxe-column>
|
||
<vxe-column
|
||
field="value02"
|
||
title="△L"
|
||
min-width="80px"
|
||
:edit-render="{ autofocus: '.vxe-input--inner' }"
|
||
>
|
||
<template #edit="{ row }">
|
||
<vxe-input
|
||
v-model="row.value02"
|
||
type="text"
|
||
@blur.native.capture="updateUser(row.value02)"
|
||
></vxe-input>
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column
|
||
field="value03"
|
||
title="△A"
|
||
min-width="80px"
|
||
:edit-render="{ autofocus: '.vxe-input--inner' }"
|
||
>
|
||
<template #edit="{ row }">
|
||
<vxe-input v-model="row.value03" type="text"></vxe-input>
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column
|
||
field="value04"
|
||
title="△B"
|
||
min-width="80px"
|
||
:edit-render="{ autofocus: '.vxe-input--inner' }"
|
||
>
|
||
<template #edit="{ row }">
|
||
<vxe-input v-model="row.value04" type="text"></vxe-input>
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column
|
||
field="value05"
|
||
title="△E"
|
||
min-width="80px"
|
||
:edit-render="{ autofocus: '.vxe-input--inner' }"
|
||
>
|
||
<template #edit="{ row }">
|
||
<vxe-input v-model="row.value05" type="text"></vxe-input>
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column
|
||
field="value06"
|
||
title="mDE"
|
||
min-width="100px"
|
||
:edit-render="{ autofocus: '.vxe-input--inner' }"
|
||
>
|
||
<template #edit="{ row }">
|
||
<vxe-input v-model="row.value06" type="text"></vxe-input>
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-colgroup title="膜厚" align="center">
|
||
<vxe-column field="value07" title="名称" min-width="80px"></vxe-column>
|
||
<vxe-column
|
||
field="value08"
|
||
title="数值"
|
||
min-width="80px"
|
||
:edit-render="{ autofocus: '.vxe-input--inner' }"
|
||
>
|
||
<template #edit="{ row }">
|
||
<vxe-input v-model="row.value08" type="text"></vxe-input>
|
||
</template>
|
||
</vxe-column>
|
||
</vxe-colgroup>
|
||
<vxe-colgroup title="来料检" align="center">
|
||
<vxe-column
|
||
field="value09"
|
||
title="粘度"
|
||
min-width="60px"
|
||
:edit-render="{ autofocus: '.vxe-input--inner' }"
|
||
>
|
||
<template #edit="{ row }">
|
||
<vxe-input v-model="row.value09" type="text"></vxe-input>
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column
|
||
field="value10"
|
||
title="固含量"
|
||
min-width="100px"
|
||
:edit-render="{ autofocus: '.vxe-input--inner' }"
|
||
>
|
||
<template #edit="{ row }">
|
||
<vxe-input v-model="row.value10" type="text"></vxe-input>
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column
|
||
field="value11"
|
||
title="电阻值"
|
||
min-width="80px"
|
||
:edit-render="{ autofocus: '.vxe-input--inner' }"
|
||
>
|
||
<template #edit="{ row }">
|
||
<vxe-input v-model="row.value11" type="text"></vxe-input>
|
||
</template>
|
||
</vxe-column>
|
||
</vxe-colgroup>
|
||
</vxe-table>
|
||
|
||
<el-dialog title="提示" :visible.sync="showAddDialog" width="30%">
|
||
<span>确定增加一组数据</span>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="showAddDialog = false">取 消</el-button>
|
||
<el-button type="primary" @click="addRecord">确 定</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { downloadStatisticsTableExcel } from "@/api/qualityManagement/qualityStatistics_V2";
|
||
import {
|
||
GetRawMateriallist,
|
||
AddRawMateriallist,
|
||
UpdateRawMateriallist,
|
||
DelRawMateriallist,
|
||
QueryMaterialOptions,
|
||
} from "@/api/paintLabManagement/dataRawMaterial";
|
||
import { debounce } from "lodash";
|
||
export default {
|
||
name: "DataRawMaterial",
|
||
data() {
|
||
return {
|
||
modifiedRows: {}, // 改为响应式对象
|
||
inputWidth: "180px",
|
||
datePickerOptions: {
|
||
shortcuts: [
|
||
{
|
||
text: "今天",
|
||
onClick(picker) {
|
||
picker.$emit("pick", new Date());
|
||
},
|
||
},
|
||
{
|
||
text: "昨天",
|
||
onClick(picker) {
|
||
const date = new Date();
|
||
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
||
picker.$emit("pick", date);
|
||
},
|
||
},
|
||
{
|
||
text: "一周前",
|
||
onClick(picker) {
|
||
const date = new Date();
|
||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
||
picker.$emit("pick", date);
|
||
},
|
||
},
|
||
],
|
||
},
|
||
searchForm: {
|
||
startDate: new Date(
|
||
new Date(new Date().toLocaleDateString()).getTime()
|
||
),
|
||
endDate: new Date(
|
||
new Date(new Date().toLocaleDateString()).getTime() +
|
||
24 * 60 * 60 * 1000 -
|
||
1
|
||
),
|
||
batchNumber: null,
|
||
colorCode: null,
|
||
reportType: 0,
|
||
productDescription: "",
|
||
},
|
||
reportTypes: [{ label: "原材料记录", value: 0 }],
|
||
pagination: { total: 0, currentPage: 1, pageSize: 30 },
|
||
realTotal: 0,
|
||
isLoading: false,
|
||
qualityStatistics: [],
|
||
mergedCells: [],
|
||
hiddenColumns: [],
|
||
tableMenuConfig: {
|
||
header: {
|
||
options: [
|
||
[
|
||
{ code: "hideColumn", name: "隐藏列" },
|
||
{ code: "showAllColumns", name: "取消所有隐藏列" },
|
||
],
|
||
],
|
||
},
|
||
body: {
|
||
options: [
|
||
[
|
||
{ code: "removeRow", name: "删除" },
|
||
{ code: "updateRow", name: "修改" },
|
||
],
|
||
],
|
||
},
|
||
visibleMethod: this.isMenuItemVisible,
|
||
},
|
||
showAddDialog: false,
|
||
materialList: [], // 存储搜索结果
|
||
searchDebounce: null, // 防抖实例
|
||
};
|
||
},
|
||
mounted() {
|
||
this.fetchData();
|
||
},
|
||
methods: {
|
||
handleEditActived({ row }) {
|
||
if (!this.modifiedRows[row.id]) {
|
||
// 深拷贝原始数据
|
||
this.$set(this.modifiedRows, row.id, JSON.parse(JSON.stringify(row)));
|
||
}
|
||
},
|
||
|
||
handleEditClosed({ row }) {
|
||
const original = this.modifiedRows[row.id];
|
||
if (original) {
|
||
// 深度比较对象差异
|
||
const changed = Object.keys(original).some((key) => {
|
||
// 特殊处理日期类型
|
||
if (key === "dt") {
|
||
return (
|
||
this.$dayjs(original[key]).format() !==
|
||
this.$dayjs(row[key]).format()
|
||
);
|
||
}
|
||
return original[key] !== row[key];
|
||
});
|
||
|
||
if (!changed) {
|
||
this.$delete(this.modifiedRows, row.id);
|
||
}
|
||
}
|
||
},
|
||
async saveAllChanges() {
|
||
if (Object.keys(this.modifiedRows).length === 0) {
|
||
this.$message.warning("没有需要保存的修改");
|
||
return;
|
||
}
|
||
|
||
try {
|
||
// 创建分组映射
|
||
const groupMap = new Map();
|
||
|
||
// 遍历所有修改的行
|
||
Object.values(this.modifiedRows).forEach((row) => {
|
||
// 找到当前行在表格中的索引
|
||
const rowIndex = this.qualityStatistics.findIndex(
|
||
(r) => r.id === row.id
|
||
);
|
||
// 计算所属分组的起始索引（每6行一组）
|
||
const groupIndex = Math.floor(rowIndex / 6) * 6;
|
||
|
||
// 如果该组还未创建，初始化分组
|
||
if (!groupMap.has(groupIndex)) {
|
||
groupMap.set(groupIndex, {
|
||
baseRow: this.qualityStatistics[groupIndex],
|
||
modifiedRows: new Set(),
|
||
});
|
||
}
|
||
|
||
// 将修改行添加到对应分组
|
||
const group = groupMap.get(groupIndex);
|
||
group.modifiedRows.add(rowIndex % 6); // 记录组内修改的位置
|
||
});
|
||
|
||
// 构建最终更新数据
|
||
const updateList = [];
|
||
groupMap.forEach((group, groupIndex) => {
|
||
const groupRows = this.qualityStatistics.slice(
|
||
groupIndex,
|
||
groupIndex + 6
|
||
);
|
||
|
||
// 生成6条更新记录（即使部分未修改）
|
||
Array.from({ length: 6 }).forEach((_, i) => {
|
||
const row = groupRows[i] || {};
|
||
if (group.baseRow == undefined) {
|
||
throw new Error("需要保存的数据不在当前页");
|
||
}
|
||
updateList.push({
|
||
id: row.id,
|
||
plIdGroup: row.idGroup,
|
||
description: group.baseRow.description,
|
||
plCode: group.baseRow.code,
|
||
plPci: group.baseRow.pci,
|
||
plValue01: row.value01,
|
||
plValue02: row.value02,
|
||
plValue03: row.value03,
|
||
plValue04: row.value04,
|
||
plValue05: row.value05,
|
||
plValue06: group.baseRow.value06,
|
||
plValue07: group.baseRow.value07,
|
||
plValue08: group.baseRow.value08,
|
||
plValue09: row.value09,
|
||
plValue10: row.value10,
|
||
plValue11: row.value11,
|
||
plCreatedBy: row.createdBy,
|
||
plCreatedTime: row.createdTime,
|
||
plUpdatedBy: row.updatedBy,
|
||
plUpdatedTime: row.updatedTime,
|
||
});
|
||
});
|
||
});
|
||
|
||
const { code, data } = await UpdateRawMateriallist(updateList);
|
||
if (code === 200) {
|
||
this.$message.success(`成功保存${data}条记录`);
|
||
this.modifiedRows = {};
|
||
await this.fetchData();
|
||
// 保持合并单元格状态
|
||
this.mergeTableRows(6);
|
||
}
|
||
} catch (error) {
|
||
console.error("保存失败:", error);
|
||
this.$message.error(
|
||
"保存失败: " + (error.response?.data?.message || error.message)
|
||
);
|
||
}
|
||
},
|
||
updateUser(value) {
|
||
console.log(value);
|
||
},
|
||
|
||
addRecord() {
|
||
this.showAddDialog = false;
|
||
AddRawMateriallist({ num: 1 }).then((res) => {
|
||
if (res.code === 200) this.fetchData();
|
||
});
|
||
},
|
||
async fetchData() {
|
||
try {
|
||
this.isLoading = true;
|
||
|
||
const query = {
|
||
startDate: this.$dayjs(this.searchForm.startDate).format(
|
||
"YYYY-MM-DDTHH:mm:ss"
|
||
),
|
||
endDate: this.$dayjs(this.searchForm.endDate).format(
|
||
"YYYY-MM-DDTHH:mm:ss"
|
||
),
|
||
batchNumber: this.searchForm.batchNumber || undefined,
|
||
colorCode: this.searchForm.colorCode || undefined,
|
||
productDescription: this.searchForm.productDescription || undefined,
|
||
pageNum: this.pagination.currentPage,
|
||
pageSize: this.pagination.pageSize,
|
||
};
|
||
|
||
const { code, data } = await GetRawMateriallist(query);
|
||
if (code === 200) {
|
||
this.qualityStatistics = data.item1.map((item) => ({
|
||
...item,
|
||
dt: this.$dayjs(item.dt).isValid()
|
||
? this.$dayjs(item.dt).format("YYYY-MM-DD HH:mm:ss")
|
||
: null,
|
||
}));
|
||
|
||
this.pagination.total = data.item2;
|
||
this.realTotal = Math.ceil(data.item2 / 5); // 根据实际分组调整
|
||
this.$nextTick(() => this.mergeTableRows(5)); // 根据实际分组调整
|
||
}
|
||
} catch (error) {
|
||
console.error("数据加载失败:", error);
|
||
this.$message.error(
|
||
"数据加载失败: " + (error.response?.data?.message || error.message)
|
||
);
|
||
} finally {
|
||
this.isLoading = false;
|
||
}
|
||
},
|
||
// fetchData() {
|
||
// this.isLoading = true;
|
||
// setTimeout(() => (this.isLoading = false), 30000);
|
||
// const query = { ...this.searchForm, ...this.pagination };
|
||
// ["batchNumber", "colorCode", "productDescription"].forEach(
|
||
// (key) => delete query[key]
|
||
// );
|
||
// GetRawMateriallist(query).then((res) => {
|
||
// if (res.code === 200) {
|
||
// this.qualityStatistics = res.data.item1;
|
||
// this.pagination.total = res.data.item2;
|
||
// this.realTotal = Math.ceil(this.pagination.total / 5);
|
||
// this.mergeTableRows(5);
|
||
// this.isLoading = false;
|
||
// }
|
||
// });
|
||
// },
|
||
|
||
getHeaderCellStyle() {
|
||
return {
|
||
backgroundColor: "#2D3D51",
|
||
color: "#ffffff",
|
||
border: "1px solid #161823",
|
||
fontSize: "18px",
|
||
};
|
||
},
|
||
|
||
getCellStyle() {
|
||
return {
|
||
border: "1px solid #161823",
|
||
fontSize: "16px",
|
||
fontWeight: "700",
|
||
};
|
||
},
|
||
|
||
exportData() {
|
||
this.$refs.dataTable.openExport();
|
||
// const data = { ...this.searchForm, ...this.pagination, type: this.searchForm.reportType + 1, isShowDetail: isDetailed };
|
||
// const fileName = `${this.reportTypes[this.searchForm.reportType].label}${isDetailed ? '-缺陷详情' : '-日生产报表'}.xlsx`;
|
||
// downloadStatisticsTableExcel(data).then(res => {
|
||
// const blobURL = URL.createObjectURL(res.data);
|
||
// const link = document.createElement('a');
|
||
// link.href = blobURL;
|
||
// link.download = fileName;
|
||
// link.style.display = 'none';
|
||
// document.body.appendChild(link);
|
||
// link.click();
|
||
// document.body.removeChild(link);
|
||
// URL.revokeObjectURL(blobURL);
|
||
// });
|
||
},
|
||
|
||
offsetRate(num) {
|
||
return num === null ? "" : parseInt(num);
|
||
},
|
||
offsetValue(num) {
|
||
return num === 0 || num === "0" ? "" : num;
|
||
},
|
||
|
||
handleContextMenuClick({ menu, row }) {
|
||
switch (menu.code) {
|
||
case "hideColumn":
|
||
this.hideColumn(row);
|
||
break;
|
||
case "showAllColumns":
|
||
this.resetColumns();
|
||
break;
|
||
case "removeRow":
|
||
this.removeRow(row);
|
||
break;
|
||
case "updateRow":
|
||
this.updateRow(row);
|
||
break;
|
||
}
|
||
},
|
||
|
||
hideColumn(column) {
|
||
this.$refs.dataTable.hideColumn(column);
|
||
this.hiddenColumns.push(column.title);
|
||
this.resetMergedCells();
|
||
},
|
||
|
||
resetColumns() {
|
||
this.$refs.dataTable.resetColumn();
|
||
this.hiddenColumns = [];
|
||
this.resetMergedCells();
|
||
},
|
||
|
||
resetMergedCells() {
|
||
this.mergeTableRows(this.searchForm.reportType === 3 ? 2 : 3);
|
||
},
|
||
|
||
removeRow(row) {
|
||
this.$confirm("此操作将永久删除该组记录, 是否继续?", "提示", {
|
||
confirmButtonText: "确定",
|
||
cancelButtonText: "取消",
|
||
type: "warning",
|
||
}).then(() => {
|
||
DelRawMateriallist({ idGroup: row.idGroup }).then((res) => {
|
||
if (res.code === 200) {
|
||
this.$message.success("删除成功!");
|
||
this.fetchData();
|
||
} else {
|
||
this.$message.error("删除失败!请检查!");
|
||
}
|
||
});
|
||
});
|
||
},
|
||
|
||
// updateRow(row) {
|
||
// const baseIndex = Math.floor(this.qualityStatistics.indexOf(row) / 5) * 5;
|
||
// const updatedData = Array.from({ length: 5 }, (_, i) => ({
|
||
// id: this.qualityStatistics[baseIndex + i].id,
|
||
// plIdGroup: this.qualityStatistics[baseIndex + i].idGroup,
|
||
// description: this.qualityStatistics[baseIndex].description,
|
||
// plCode: this.qualityStatistics[baseIndex].code,
|
||
// plPci: this.qualityStatistics[baseIndex].pci,
|
||
// plValue01: this.qualityStatistics[baseIndex + i].value01,
|
||
// plValue02: this.qualityStatistics[baseIndex + i].value02,
|
||
// plValue03: this.qualityStatistics[baseIndex + i].value03,
|
||
// plValue04: this.qualityStatistics[baseIndex + i].value04,
|
||
// plValue05: this.qualityStatistics[baseIndex + i].value05,
|
||
// plValue06: this.qualityStatistics[baseIndex].value06,
|
||
// plValue07: this.qualityStatistics[baseIndex + i].value07,
|
||
// plValue08: this.qualityStatistics[baseIndex + i].value08,
|
||
// plValue09: this.qualityStatistics[baseIndex].value09,
|
||
// plValue10: this.qualityStatistics[baseIndex].value10,
|
||
// plValue11: this.qualityStatistics[baseIndex].value11,
|
||
// plCreatedBy: this.qualityStatistics[baseIndex + i].createdBy,
|
||
// plCreatedTime: this.qualityStatistics[baseIndex + i].createdTime,
|
||
// plUpdatedBy: this.qualityStatistics[baseIndex + i].updatedBy,
|
||
// plUpdatedTime: this.qualityStatistics[baseIndex + i].updatedTime,
|
||
// }));
|
||
|
||
// UpdateRawMateriallist(updatedData).then((res) => {
|
||
// if (res.code === 200) {
|
||
// this.$message.success(`更新成功-${res.data}`);
|
||
// }
|
||
// });
|
||
// },
|
||
|
||
mergeTableRows(rowsPerGroup) {
|
||
this.mergedCells = [];
|
||
for (let i = 0; i < this.qualityStatistics.length; i += rowsPerGroup) {
|
||
this.mergedCells.push(
|
||
{ row: i, col: 0, rowspan: rowsPerGroup },
|
||
{ row: i, col: 1, rowspan: rowsPerGroup },
|
||
{ row: i, col: 2, rowspan: rowsPerGroup },
|
||
{ row: i, col: 8, rowspan: rowsPerGroup },
|
||
{ row: i, col: 11, rowspan: rowsPerGroup },
|
||
{ row: i, col: 12, rowspan: rowsPerGroup },
|
||
{ row: i, col: 13, rowspan: rowsPerGroup }
|
||
);
|
||
}
|
||
},
|
||
|
||
isMenuItemVisible(menu) {
|
||
// Implement visibility logic if needed
|
||
return true;
|
||
},
|
||
// 初始化防抖函数
|
||
initDebounce() {
|
||
this.searchDebounce = debounce(this.doSearchMaterial, 500);
|
||
},
|
||
|
||
// 输入处理
|
||
handleSearchMaterial(row) {
|
||
if (!this.searchDebounce) {
|
||
this.initDebounce();
|
||
}
|
||
|
||
// 清除旧数据
|
||
if (!row.description) {
|
||
this.materialList = [];
|
||
return;
|
||
}
|
||
|
||
this.searchDebounce(row.description);
|
||
},
|
||
|
||
// 实际搜索方法
|
||
async doSearchMaterial(query) {
|
||
try {
|
||
const res = await QueryMaterialOptions({ query });
|
||
this.materialList = res.data;
|
||
} catch (e) {
|
||
console.error("搜索失败", e);
|
||
}
|
||
},
|
||
|
||
// 选择物料
|
||
handleSelectMaterial(row, material) {
|
||
row.description = material.value;
|
||
row.code = material.color;
|
||
this.materialList = [];
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
/* 建议列表样式 */
|
||
.material-suggestions {
|
||
position: absolute;
|
||
z-index: 999;
|
||
background: white;
|
||
border: 1px solid #e8eaec;
|
||
max-height: 200px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.material-suggestions div {
|
||
padding: 8px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.material-suggestions div:hover {
|
||
background-color: #f5f7fa;
|
||
}
|
||
</style>
|