div<template>
|
<el-dialog
|
v-model="dialogVisible"
|
:title="dialogType === 'add' ? '新增生产加工' : '编辑生产加工'"
|
width="1200px"
|
:close-on-click-modal="false"
|
@close="handleClose"
|
>
|
<el-button type="primary" @click="handlData">选择数据</el-button>
|
<ETableModify
|
:columns="columns"
|
height="200"
|
@cell-edit="handleCellEdit"
|
:showOperations="false"
|
:tableData="tableData"
|
@row-click="handleRowClick"
|
:editableColumns="['used']"
|
/>
|
<div class="empty-table">
|
<h1>生产明细</h1>
|
<el-row :gutter="10">
|
<el-col :span="2">
|
<el-button type="primary" @click="addNewRow">
|
<el-icon>
|
<Plus />
|
</el-icon>
|
新增
|
</el-button>
|
</el-col>
|
<el-col :span="2">
|
<el-button type="danger" @click="clearAllRows">
|
<el-icon>
|
<Delete />
|
</el-icon>
|
清空
|
</el-button>
|
</el-col>
|
<!-- <el-col :span="2">
|
<el-button type="warning" @click="calculateAllCosts">
|
<el-icon>
|
<Warning />
|
</el-icon> 重新计算
|
</el-button>
|
</el-col> -->
|
</el-row>
|
<ProductionDetailsTable
|
v-model="detailsTableData"
|
:border="false"
|
:show-operations="true"
|
:auto-calculate="true"
|
@input-change="handleDetailsChange"
|
@delete-row="handleDeleteRow"
|
/>
|
|
</div>
|
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="handleClose">取 消</el-button>
|
<el-button type="primary" :loading="loading" @click="handleSubmit"
|
>确 定</el-button
|
>
|
</div>
|
</template>
|
</el-dialog>
|
<el-dialog
|
v-model="innerVisible"
|
width="1000"
|
title="选择配置数据"
|
center
|
append-to-body
|
>
|
<ETable
|
@selection-change="handleSelectionChange"
|
:showOperations="false"
|
:columns="formalDatabaseColumns"
|
:tableData="formalDatabaseData"
|
height="400"
|
@cell-edit="handleCellEdit"
|
:show-selection="true"
|
/>
|
<el-row :gutter="24">
|
<el-col :span="2" :offset="22">
|
<el-button type="primary" @click="handleSelectData">确定</el-button>
|
</el-col>
|
</el-row>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { ref, reactive, watch } from "vue";
|
import ETable from "@/components/Table/ETable.vue";
|
import ETableModify from "@/components/Table/EtableModify.vue";
|
import ProductionDetailsTable from "./ProductionDetailsTable.vue";
|
import { ElMessage } from "element-plus";
|
import { Delete, Warning, Plus } from "@element-plus/icons-vue";
|
import { getOfficialAll } from "@/api/production/index.js";
|
|
const props = defineProps({
|
visible: {
|
type: Boolean,
|
default: false,
|
},
|
type: {
|
type: String,
|
default: "add", // 'add' 或 'edit'
|
},
|
rowData: {
|
type: Object,
|
default: () => ({}),
|
},
|
});
|
const dialogVisible = defineModel("visible", {
|
type: Boolean,
|
default: false,
|
});
|
const emit = defineEmits(["update:visible", "success"]);
|
|
const innerVisible = ref(false);
|
const dialogType = ref("add");
|
const loading = ref(false);
|
const formRef = ref(null);
|
const tableData = ref([]);
|
const currentRow = ref(null);
|
const columns = [
|
{ label: "供应商名称", prop: "supplierName" },
|
{ label: "煤种", prop: "coal" },
|
{ label: "单价(不含税)", prop: "priceExcludingTax" },
|
{ label: "库存数量", prop: "inventoryQuantity" },
|
{
|
label: "使用数量",
|
prop: "used",
|
editable: true,
|
width: 120,
|
editType: "number",
|
},
|
|
];
|
const detailsTableData = ref([
|
|
]);
|
const handleRowClick = (row) => {
|
currentRow.value = row;
|
};
|
const formalDatabaseColumns = ref([
|
{ prop: "supplierName", label: "供应商名称", minwidth: 150 },
|
{ prop: "coal", label: "煤种类型", minwidth: 60 },
|
{ prop: "inventoryQuantity", label: "库存数量", minwidth: 80 },
|
{ prop: "unit", label: "单位", minwidth: 100 },
|
{ prop: "priceExcludingTax", label: "单价（不含税）", minwidth: 80 },
|
{ prop: "createTime", label: "登记日期", minwidth: 400 },
|
]);
|
// 表单数据
|
const formData = reactive({
|
category: "",
|
unit: "",
|
productionVolume: 0,
|
laborCost: 0,
|
materialCost: 0,
|
equipmentCost: 0,
|
totalCost: 0,
|
totalPrice: 0,
|
profit: 0,
|
reviewer: "",
|
date: "",
|
});
|
const handlData =async () => {
|
innerVisible.value = true;
|
let res = await getOfficialAll();
|
console.log("获取配置数据", res);
|
if (res.code === 200) {
|
formalDatabaseData.value = res.data;
|
} else {
|
ElMessage.error("获取配置数据失败");
|
}
|
};
|
const formalDatabaseData = ref([]);
|
const formalDatabaseSelectedData = ref([]);
|
formalDatabaseData.value = [
|
];
|
// 初始化
|
const Initialization = () => {
|
tableData.value = [];
|
};
|
defineExpose({
|
Initialization
|
});
|
const handleSelectData = (row) => {
|
if (!innerVisible.value) return;
|
// 获取选中的数据
|
const selectedData = formalDatabaseSelectedData.value;
|
if (selectedData.length === 0) {
|
ElMessage.warning("请至少选择一条数据");
|
return;
|
}
|
// 将选中的数据根据需要筛选到表格中
|
selectedData.forEach((item) => {
|
const existingItem = tableData.value.find(
|
(row) => row.id === item.id
|
);
|
if (!existingItem) {
|
tableData.value.push(
|
Object.assign({}, item, {
|
used: 0, // 初始使用数量为0
|
})
|
);
|
}
|
});
|
innerVisible.value = false;
|
};
|
const handleSelectionChange = (selection) => {
|
formalDatabaseSelectedData.value = selection;
|
};
|
const reset = () => {
|
// formRef
|
formRef.value?.resetFields();
|
};
|
|
const selectChange = (value) => {};
|
|
// 提交表单
|
const handleSubmit = async () => {
|
console.log("提交表单数据:", tableData.value);
|
console.log(detailsTableData.value);
|
let data = {
|
productionList: detailsTableData.value,
|
productionInventoryList: tableData.value,
|
};
|
console.log("提交数据", data);
|
// dialogVisible.value = false;
|
};
|
|
// 关闭弹窗
|
const handleClose = () => {
|
dialogVisible.value = false;
|
formRef.value?.resetFields();
|
Object.assign(formData, {
|
category: "",
|
unit: "",
|
productionVolume: 0,
|
laborCost: 0,
|
materialCost: 0,
|
equipmentCost: 0,
|
totalCost: 0,
|
totalPrice: 0,
|
profit: 0,
|
reviewer: "",
|
date: "",
|
});
|
};
|
|
// 添加单元格编辑处理函数
|
const handleCellEdit = (row, prop, value) => {
|
if (prop === "used" && Number(value) > Number(row.stock)) {
|
ElMessage.warning("使用数量不能大于库存数量！");
|
row.used = row.stock;
|
}
|
};
|
|
// 处理生产明细表格的操作
|
const addNewRow = () => {
|
detailsTableData.value.push({
|
coalType: "",
|
productionQuantity: "",
|
laborCost: "",
|
energyConsumptionCost: "",
|
equipmentDepreciation: "",
|
purchasePrice: "",
|
autoCalculate: "0.00",
|
producer:"",
|
});
|
};
|
|
const clearAllRows = () => {
|
detailsTableData.value = [];
|
ElMessage.success("已清空所有数据");
|
};
|
|
const calculateAllCosts = () => {
|
detailsTableData.value.forEach((row) => {
|
const laborCost = parseFloat(row.laborCost) || 0;
|
const energyCost = parseFloat(row.energyCost) || 0;
|
const equipmentDepreciation = parseFloat(row.equipmentDepreciation) || 0;
|
const purchasePrice = parseFloat(row.purchasePrice) || 0;
|
|
row.totalCost = (
|
laborCost +
|
energyCost +
|
equipmentDepreciation +
|
purchasePrice
|
).toFixed(2);
|
});
|
ElMessage.success("重新计算完成");
|
};
|
|
const handleDetailsChange = (data) => {
|
console.log("生产明细数据变化:", data);
|
};
|
|
const handleDeleteRow = (index) => {
|
ElMessage.success(`已删除第 ${index + 1} 行数据`);
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.el-form {
|
.el-row {
|
padding-top: 20px;
|
background: rgba($color: #f8fafb, $alpha: 0.5);
|
}
|
}
|
|
.el-row > .el-col > h1 {
|
font-weight: bolder;
|
}
|
.empty-table > .el-row{
|
margin-bottom: 12px;
|
}
|
</style>
|
