import { createVNode, render, h, reactive } from 'vue';
|
import { ElDialog, ElForm, ElFormItem, ElSelect, ElOption, ElButton, ElMessage, ElLoading } from 'element-plus';
|
let extension = {
|
components: {
|
//查询界面扩展组件
|
gridHeader: '',
|
gridBody: '',
|
gridFooter: '',
|
//新建、编辑弹出框扩展组件
|
modelHeader: '',
|
modelBody: '',
|
modelFooter: ''
|
},
|
tableAction: '', //指定某张表的权限(这里填写表名,默认不用填写)
|
buttons: { view: [], box: [], detail: [] }, //扩展的按钮
|
methods: {
|
//下面这些方法可以保留也可以删除
|
onInit() {
|
// let InOrder = this.buttons.find(x => x.value == 'StockOutbound');
|
// if (InOrder) {
|
// InOrder.onClick = function () {
|
// let rows = this.$refs.table.getSelected();
|
// if (rows.length == 0) return this.$error("请选择数据!");
|
// if (rows.length > 1) return this.$error("请选择单条数据!");
|
// var keys = rows.map(x => { return x.stockId });
|
// this.http
|
// .post("api/Task/Outbound?id="+keys[0], null, "数据处理中")
|
// .then((x) => {
|
// if (!x.status) return this.$message.error(x.message);
|
// this.$message.success("操作成功");
|
// this.refresh();
|
// });
|
// }
|
// }
|
this.columns.forEach(column => {
|
// if (column.field == 'materielCode') {
|
// column.formatter = (row) => {
|
// var str = '';
|
// var list = row.materielCode.split(',');
|
// for (let index = 0; index < list.length; index++) {
|
// str += list[index] + '<br>';
|
// }
|
// return str = list[0] == "" ? "空箱" : str;
|
// }
|
// }
|
// if (column.field == 'batchNo') {
|
// column.formatter = (row) => {
|
// var str = '';
|
// var list = row.batchNo.split(',');
|
// for (let index = 0; index < list.length; index++) {
|
// str += list[index] + '<br>';
|
// }
|
// return str = list[0] == "" ? "无" : str;
|
// }
|
// }
|
// if (column.field == 'materielInfo') {
|
// const today = new Date()
|
// column.formatter = (row) => {
|
// if (row.details.length > 0) {
|
// const today = new Date();
|
// const closestDate = row.details
|
// .map(x => {
|
// const date = new Date(x.effectiveDate);
|
// const diffInDays = Math.ceil(Math.abs((today - date) / (1000 * 60 * 60 * 24)));
|
// return { date, diffInDays };
|
// })
|
// .reduce((closest, current) => (current.diffInDays < closest.diffInDays ? current : closest))
|
// .date;
|
|
// const daysSinceClosest = Math.ceil(Math.abs((today - closestDate) / (1000 * 60 * 60 * 24)));
|
// return '<span style="color: #F56C6C">' + daysSinceClosest + "天" + '</span>';
|
// } else {
|
// return '<span style="color: #F56C6C">' + "无保质期" + '</span>';
|
// }
|
|
// }
|
// }
|
if (column.field == 'sumStock') {
|
column.formatter = (row) => {
|
if (row.details.length > 0) {
|
var sum = 0;
|
const closestDate = row.details
|
.map(x => {
|
sum += (x.stockQuantity)
|
})
|
return '<span style="color: #F56C6C">' + sum + row.details[0].unit + '</span>';
|
} else {
|
return '<span style="color: #F56C6C">' + "1个" + '</span>';
|
}
|
|
}
|
}
|
if (column.field === 'orderStatistics') {
|
column.formatter = (row) => {
|
// 校验details是否存在且有数据
|
if (row.details && row.details.length > 0) {
|
// 按barcode + supplyCode + BatchNo 组合维度分组统计stockQuantity总和，并记录单位（取第一个非空单位）
|
const groupSumMap = row.details.reduce((acc, item) => {
|
// 获取分组关键字段，为空时赋予默认值
|
const supplyCode = item.supplyCode || '未知供应商编码';
|
const batchNo = item.batchNo || '未知批次号';
|
const materielCode = item.materielCode || '未知物料'; // 保留原有物料编码
|
const quantity = Number(item.stockQuantity) || 0;
|
const unit = item.unit || ''; // 获取单位，无则为空
|
|
// 组合分组键（可根据需要调整显示格式）
|
const groupKey = `${supplyCode}|${batchNo}|${materielCode}`;
|
|
// 累加数量，保留第一个非空单位
|
acc[groupKey] = {
|
total: (acc[groupKey]?.total || 0) + quantity,
|
unit: acc[groupKey]?.unit || unit,
|
supplyCode,
|
batchNo,
|
materielCode
|
};
|
return acc;
|
}, {});
|
|
// 每个分组项生成独立div，跨行显示（包含所有分组维度和单位）
|
const displayItems = Object.entries(groupSumMap).map(([_, data]) => {
|
// 处理单位显示：有单位则加空格显示，无则不显示
|
const unitText = data.unit ? ` ${data.unit}` : '';
|
|
// 组装显示文本（可根据需求调整字段显示顺序和格式）
|
return `<div style="line-height: 1.5; white-space: normal; margin-bottom: 4px;">
|
供应商编码：${data.supplyCode} | 批次号：${data.batchNo} | 物料编码：${data.materielCode}：${data.total}${unitText}
|
</div>`;
|
});
|
|
const displayContent = displayItems.join('');
|
return `<div style="color: #716cf5ff; white-space: normal; word-break: break-all;">${displayContent}</div>`;
|
} else {
|
return '<span style="color: #F56C6C">空箱</span>';
|
}
|
};
|
}
|
if (column.field == 'stockOrderNo') {
|
column.formatter = (row) => {
|
// 有明细数据时处理
|
if (row.details && row.details.length > 0) {
|
// 提取所有非空的orderNO并去重
|
const uniqueOrderNOs = [...new Set(
|
row.details.map(item => item.orderNo).filter(no => no) // 过滤空单据号
|
)];
|
|
// 有有效单据号则换行显示，否则显示默认文本
|
if (uniqueOrderNOs.length > 0) {
|
return `<span style="color: #F56C6C">${uniqueOrderNOs.join('<br>')}</span>`;
|
} else {
|
return '<span style="color: #F56C6C">暂无单据</span>';
|
}
|
} else {
|
// 无明细数据时显示默认文本
|
return '<span style="color: #F56C6C">暂无单据</span>';
|
}
|
}
|
}
|
})
|
|
let SelectTake = this.buttons.find(x => x.value == 'SelectStockTake');
|
if (SelectTake) {
|
// 改为箭头函数确保this指向Vue组件实例
|
SelectTake.onClick = async () => {
|
// 获取选中数据（与原逻辑一致，确保是数组格式）
|
let stockViews = this.$refs.table.getSelected();
|
|
// 数据校验：至少选择一条数据
|
if (stockViews.length === 0) return ElMessage.error("请选择需要操作的数据!");
|
|
// 站台选项（可根据实际业务调整选项值）
|
const stationOptions = [
|
{ label: "站台2", value: "2-1" },
|
{ label: "站台3", value: "3-1" },
|
{ label: "站台4", value: "4-1" },
|
];
|
|
// 创建弹窗挂载节点
|
const mountNode = document.createElement("div");
|
document.body.appendChild(mountNode);
|
|
// 表单数据（绑定选中的站台）
|
const formData = reactive({
|
outStation: stationOptions[0].value, // 默认选中第一个站台
|
});
|
|
// 创建弹窗VNode
|
const vnode = createVNode(
|
ElDialog,
|
{
|
title: "库存操作 - 选择出库站台",
|
width: "500px",
|
modelValue: true,
|
appendToBody: true,
|
"onUpdate:modelValue": (isVisible) => {
|
if (!isVisible) {
|
render(null, mountNode);
|
document.body.removeChild(mountNode);
|
}
|
},
|
style: {
|
padding: "20px 0",
|
borderRadius: "8px",
|
},
|
},
|
{
|
default: () =>
|
h(
|
ElForm,
|
{
|
model: formData,
|
rules: {
|
outStation: [
|
{ required: true, message: "请选择出库站台", trigger: "change" },
|
],
|
},
|
ref: "stockTakeForm", // 表单ref标识
|
labelWidth: "100px",
|
style: {
|
padding: "0 30px",
|
},
|
},
|
[
|
// 站台选择下拉框
|
h(ElFormItem, {
|
label: "出库站台",
|
prop: "outStation",
|
style: { marginBottom: "24px" },
|
}, [
|
h(ElSelect, {
|
placeholder: "请选择出库站台",
|
modelValue: formData.outStation,
|
"onUpdate:modelValue": (val) => {
|
formData.outStation = val;
|
},
|
style: {
|
width: "100%",
|
height: "40px",
|
borderRadius: "4px",
|
borderColor: "#dcdfe6",
|
},
|
}, stationOptions.map((station) =>
|
h(ElOption, { label: station.label, value: station.value })
|
)),
|
]),
|
// 底部按钮区域
|
h("div", {
|
style: {
|
textAlign: "right",
|
marginTop: "8px",
|
paddingRight: "4px",
|
},
|
}, [
|
// 取消按钮
|
h(ElButton, {
|
type: "text",
|
onClick: () => {
|
render(null, mountNode);
|
document.body.removeChild(mountNode);
|
ElMessage.info("取消库存操作");
|
},
|
style: { marginRight: "8px", color: "#606266" },
|
}, "取消"),
|
// 确定按钮
|
h(ElButton, {
|
type: "primary",
|
onClick: async () => {
|
// 确保表单ref已挂载
|
await this.$nextTick();
|
const formRef = vnode.component.refs.stockTakeForm;
|
|
if (!formRef) {
|
ElMessage.error("表单初始化失败，请重试");
|
return;
|
}
|
|
// 表单验证
|
try {
|
await formRef.validate();
|
} catch (err) {
|
return;
|
}
|
|
// 构造请求参数：
|
// 1. 请求体：直接传递stockViews数组（对应后端List<StockViewDTO>）
|
// 2. outStation：通过查询参数传递（因后端未指定[FromBody]接收该参数）
|
const requestBody = stockViews; // 直接传递选中数组（确保数组内对象结构与StockViewDTO一致）
|
const outStation = formData.outStation;
|
|
// 接口请求：Post方式，请求体传stockViews数组，outStation拼到URL查询参数
|
try {
|
// 拼接查询参数（如果outStation有特殊字符，可使用encodeURIComponent处理）
|
const url = `api/Task/TakeOutbound?outStation=${encodeURIComponent(outStation)}`;
|
|
const x = await this.http.post(
|
url, // 带查询参数的URL
|
requestBody, // 请求体：stockViews数组
|
"数据处理中"
|
);
|
|
if (!x.status) {
|
ElMessage.error(x.message || "库存操作失败");
|
return;
|
}
|
|
ElMessage.success("操作成功");
|
this.refresh(); // 原刷新逻辑保留
|
} catch (error) {
|
console.error("库存接口请求失败：", error);
|
ElMessage.error("请求失败，请稍后重试");
|
} finally {
|
// 无论成功失败，关闭弹窗
|
render(null, mountNode);
|
document.body.removeChild(mountNode);
|
}
|
},
|
style: { borderRadius: "4px", padding: "8px 20px" },
|
}, "确定操作"),
|
]),
|
]),
|
}
|
);
|
|
// 绑定app上下文（确保弹窗内组件正常工作）
|
vnode.appContext = this.$.appContext;
|
render(vnode, mountNode);
|
};
|
}
|
},
|
onInited() {
|
//框架初始化配置后
|
//如果要配置明细表,在此方法操作
|
//this.detailOptions.columns.forEach(column=>{ });
|
},
|
searchBefore(param) {
|
//界面查询前,可以给param.wheres添加查询参数
|
//返回false，则不会执行查询
|
return true;
|
},
|
searchAfter(result) {
|
//查询后，result返回的查询数据,可以在显示到表格前处理表格的值
|
return true;
|
},
|
addBefore(formData) {
|
//新建保存前formData为对象，包括明细表，可以给给表单设置值，自己输出看formData的值
|
return true;
|
},
|
updateBefore(formData) {
|
//编辑保存前formData为对象，包括明细表、删除行的Id
|
return true;
|
},
|
rowClick({ row, column, event }) {
|
//查询界面点击行事件
|
this.$refs.table.$refs.table.toggleRowSelection(row); //单击行时选中当前行;
|
},
|
modelOpenAfter(row) {
|
//点击编辑、新建按钮弹出框后，可以在此处写逻辑，如，从后台获取数据
|
//(1)判断是编辑还是新建操作： this.currentAction=='Add';
|
//(2)给弹出框设置默认值
|
//(3)this.editFormFields.字段='xxx';
|
//如果需要给下拉框设置默认值，请遍历this.editFormOptions找到字段配置对应data属性的key值
|
//看不懂就把输出看：console.log(this.editFormOptions)
|
}
|
}
|
};
|
export default extension;
|
