<template>
|
<cl-form ref="Form">
|
<template #slot-order-detail>
|
<cl-crud padding="0">
|
<cl-row>
|
<el-button type="success" @click="add">添加回收物</el-button>
|
<el-button :disabled="Table?.selection.length === 0" type="danger" @click="remove()">
|
删除
|
</el-button>
|
</cl-row>
|
|
<cl-row>
|
<cl-table ref="Table" :data="data" :auto-height="false">
|
<!-- 回收物选择 -->
|
<template #column-itemName="{ scope }">
|
<el-form-item :prop="`items.${scope.$index}.itemId`"
|
:rules="{ required: true, message: '请选择回收物' }">
|
<el-select v-model="scope.row.itemId" filterable placeholder="请选择回收物"
|
style="width: 100%" @change="onItemChange(scope.row)">
|
<el-option v-for="item in itemOptions" :key="item.itemId" :label="item.itemName"
|
:value="item.itemId" />
|
</el-select>
|
</el-form-item>
|
</template>
|
|
<!-- 重量 -->
|
<template #column-weight="{ scope }">
|
<el-form-item :prop="`items.${scope.$index}.weight`"
|
:rules="{ required: true, message: '重量不能为空' }">
|
<el-input-number v-model="scope.row.weight" :min="0" :max="100000" :precision="2"
|
:controls="false" placeholder="重量/件数" @change="calcRow(scope.row)" />
|
</el-form-item>
|
</template>
|
|
<!-- 单价（只读） -->
|
<template #column-unitPrice="{ scope }">
|
<el-form-item>
|
<el-input-number v-model="scope.row.unitPrice" :controls="false" :precision="2"
|
disabled />
|
</el-form-item>
|
</template>
|
|
<!-- 金额（只读） -->
|
<template #column-amount="{ scope }">
|
<el-form-item>
|
<el-input-number v-model="scope.row.amount" :controls="false" :precision="2" disabled />
|
</el-form-item>
|
</template>
|
|
<!-- 碳积分（只读） -->
|
<template #column-carbonPoint="{ scope }">
|
<el-form-item>
|
<el-input-number v-model="scope.row.carbonPoint" :controls="false" :precision="2"
|
disabled />
|
</el-form-item>
|
</template>
|
|
<!-- 碳积分（只读） -->
|
<template #column-category="{ scope }">
|
<el-form-item>
|
<el-input v-model="scope.row.category" :controls="false" disabled />
|
</el-form-item>
|
</template>
|
|
<template #slot-btn="{ scope }">
|
<el-icon class="del-btn" @click="remove(scope.row.uid)">
|
<delete />
|
</el-icon>
|
</template>
|
</cl-table>
|
</cl-row>
|
</cl-crud>
|
</template>
|
</cl-form>
|
</template>
|
|
<script lang="ts" setup name="order-detail">
|
import { useForm, useTable } from "@cool-vue/crud";
|
import { computed, ref, onMounted } from "vue";
|
import { useCool } from "/@/cool";
|
import { ElMessage } from "element-plus";
|
import { isEmpty, find } from "lodash-es";
|
import { Delete } from "@element-plus/icons-vue";
|
import { uuid } from "/@/cool/utils";
|
|
const { service } = useCool();
|
const Form = useForm();
|
|
// 回收物字典
|
const itemOptions = ref<any[]>([]);
|
|
const currentOrderNo = ref<string>();
|
// 明细列表
|
const list = ref<any[]>([]);
|
|
// 表格数据
|
const data = computed(() => list.value.filter((e) => !e.isDel));
|
|
// 打开
|
async function open(orderNo: string) {
|
currentOrderNo.value = orderNo;
|
await refresh(orderNo);
|
|
Form.value?.open({
|
title: "回收订单明细",
|
form: { items: list.value },
|
width: "80%",
|
items: [
|
{
|
prop: "items",
|
component: { name: "slot-order-detail" }
|
}
|
],
|
on: {
|
submit(_, { close, done }) {
|
const delIds: number[] = [];
|
const add: any[] = [];
|
const update: any[] = [];
|
|
list.value.forEach((e) => {
|
if (e.id) {
|
if (e.isDel) {
|
delIds.push(e.id);
|
} else if (e.isEdit) {
|
update.push(e);
|
}
|
} else if (!e.isDel) {
|
add.push(e);
|
}
|
});
|
|
/*
|
const tasks: Promise<any>[] = [];
|
|
if (!isEmpty(delIds)) {
|
tasks.push(service.shop.recycleorderitem.delete({ ids: delIds }));
|
}
|
|
if (!isEmpty(update)) {
|
update.forEach((e) => tasks.push(service.shop.recycleorderitem.update(e)));
|
}
|
|
if (!isEmpty(add)) {
|
tasks.push(
|
service.shop.recycleorderitem.add(
|
add.map((e) => ({
|
...e,
|
orderNo: currentOrderNo.value!
|
}))
|
)
|
);
|
}
|
|
Promise.all(tasks)
|
.then(() => {
|
ElMessage.success("保存成功");
|
close();
|
})
|
.catch((err) => {
|
ElMessage.error(err.message);
|
refresh(orderNo);
|
done();
|
});
|
*/
|
|
const items = list.value
|
.filter(e => !e.isDel)
|
.map(e => ({
|
id: e.id,
|
itemId: e.itemId,
|
itemName: e.itemName,
|
weight: e.weight,
|
unitPrice: e.unitPrice,
|
amount: e.amount,
|
carbonPoint: e.carbonPoint,
|
category: e.category
|
}));
|
|
service.shop.recycleorder.saveWithSummary({
|
orderNo: currentOrderNo.value!,
|
items
|
})
|
.then(() => {
|
ElMessage.success("保存成功");
|
close();
|
})
|
.catch((err) => {
|
ElMessage.error(err.message);
|
refresh(currentOrderNo.value!);
|
done();
|
});
|
}
|
}
|
});
|
}
|
|
// 刷新明细
|
async function refresh(orderNo: string) {
|
const [items, details] = await Promise.all([
|
service.shop.recycleitem.list({
|
status: 0,
|
order: "id",
|
sort: "asc"
|
}),
|
service.shop.recycleorderitem.list({
|
orderNo,
|
order: "id",
|
sort: "asc"
|
})
|
]);
|
|
itemOptions.value = items;
|
|
list.value = details.map((e: any) => ({
|
...e,
|
weight: Number(e.weight),
|
unitPrice: Number(e.unitPrice),
|
amount: Number(e.amount),
|
carbonPoint: Number(e.carbonPoint),
|
uid: e.id
|
}));
|
}
|
|
// 新增
|
function add() {
|
list.value.push({
|
uid: uuid(),
|
itemId: "",
|
itemName: "",
|
category: "",
|
unit: "",
|
weight: 0,
|
unitPrice: 0,
|
amount: 0,
|
carbonPoint: 0,
|
isDel: false, // ✅ 补上
|
isEdit: false // ✅ 补上
|
});
|
}
|
|
// 删除
|
function remove(uid?: string) {
|
const arr = uid ? [uid] : Table.value?.selection.map((e) => e.uid);
|
list.value.forEach((e) => {
|
if (arr?.includes(e.uid)) {
|
e.isDel = true;
|
}
|
});
|
}
|
|
// 选择回收物
|
function onItemChange(row: any) {
|
const item = find(itemOptions.value, { itemId: row.itemId });
|
|
if (item) {
|
row.itemName = item.itemName;
|
row.category = item.category;
|
row.unitPrice = Number(item.price);
|
row.carbonPoint = Number(item.carbonPoint);
|
row.unit = item.unit;
|
}
|
|
row.isEdit = true;
|
calcRow(row);
|
}
|
|
// 计算金额
|
function calcRow(row: any) {
|
row.amount = Number((row.weight * row.unitPrice).toFixed(2));
|
row.carbonPoint = Number((row.amount * 100).toFixed(2));
|
}
|
|
const Table = useTable({
|
columns: [
|
{ type: "selection" },
|
{ label: "回收物", prop: "itemName", minWidth: 180 },
|
{ label: "重量/件数", prop: "weight", minWidth: 120 },
|
{ label: "单价", prop: "unitPrice", minWidth: 120 },
|
{ label: "金额", prop: "amount", minWidth: 120 },
|
{ label: "国标分类", prop: "category", minWidth: 120 },
|
{ label: "碳积分", prop: "carbonPoint", minWidth: 120 },
|
{ type: "op", width: 80, buttons: ["slot-btn"] }
|
]
|
});
|
|
defineExpose({
|
open
|
});
|
</script>
|
|
<style lang="scss" scoped>
|
.el-form-item {
|
margin-bottom: 0;
|
}
|
|
.del-btn {
|
cursor: pointer;
|
|
&:hover {
|
color: red;
|
}
|
}
|
</style>
|
