factory_web/src/views/pum/planitem.vue

<template>
	<el-drawer
		v-model="visible"
		title="计划详情"
		:size="'90%'"
		destroy-on-close
		@closed="$emit('closed')"
	>
		<div style="padding: 8px">
			<div>
				<el-card style="width: 100%" header="基本信息" shadow="hover">
					<el-descriptions>
						<el-descriptions-item label="计划名称">{{
							orderObj.name
						}}</el-descriptions-item>
						<el-descriptions-item label="计划编号">{{
							orderObj.number
						}}</el-descriptions-item>
						<el-descriptions-item label="计划状态">{{
							stateOption[orderObj.state]
						}}</el-descriptions-item>
					</el-descriptions>
				</el-card>
			</div>
			<div style="height: 8px"></div>
			<div>
				<el-card style="width: 100%" header="计划明细" shadow="hover">
					<div>
						<el-button
							type="primary"
							icon="el-icon-plus"
							v-auth="'pu_planitem.create'"
							@click="add"
							v-if="orderObj.state == 10"
							>新增</el-button
						>
					</div>
					<scTable
						ref="table"
						:apiObj="apiObj"
						row-key="id"
						stripe
						:params="query"
						:query="query"
						hidePagination
						hideDo
						:summary-method="getSummaries"
						:span-method="arraySpanMethod"
						show-summary
					>
						<el-table-column type="index" width="50" />
						<el-table-column
							label="物料名称"
							prop="material"
							show-overflow-tooltip
						>
							<template #default="scope">
								<span v-if="scope.row.material_">
									{{ scope.row.material_.full_name }}</span
								>
							</template>
						</el-table-column>
						<el-table-column label="采购数量" prop="need_count">
						</el-table-column>
						<el-table-column label="物料单价" prop="unit_price">
						</el-table-column>
						<el-table-column label="总价" prop="total_price">
						</el-table-column>
						<el-table-column
							label="需求日期"
							prop="need_date"
							show-overflow-tooltip
						>
						</el-table-column>
						<el-table-column label="部门" prop="belong_dept_name">
						</el-table-column>
						<el-table-column label="关联采购订单" prop="pu_order">
							<template #default="scope">
								<span v-if="scope.row.pu_order">是</span>
								<span v-else>否</span>
							</template>
						</el-table-column>
						<el-table-column label="创建人" prop="create_by_name">
						</el-table-column>
						<el-table-column
							label="备注"
							prop="note"
							show-overflow-tooltip
						>
						</el-table-column>
						<el-table-column
							label="操作"
							fixed="right"
							align="center"
							width="100px"
						>
							<template #default="scope">
								<el-button
									link
									type="primary"
									@click="table_edit(scope.row)"
									v-auth="'pu_planitem.update'"
									v-if="orderObj.state == 10"
								>
									编辑
								</el-button>
								<el-button
									link
									type="danger"
									@click="table_del(scope.row)"
									v-auth="'pu_planitem.delete'"
									v-if="orderObj.state == 10"
								>
									删除
								</el-button>
							</template>
						</el-table-column>
					</scTable>
				</el-card>
			</div>
		</div>
	</el-drawer>
	<save-dialog
		v-if="dialog.save"
		ref="saveDialog"
		:puPlan="puPlan"
		@success="handleSaveSuccess"
		@closed="dialog.save = false"
	></save-dialog>
</template>
<script>
import saveDialog from "./planitem_form.vue";
export default {
	name: "rparty",
	components: {
		saveDialog,
	},
	props: {
		planId: {
			type: String,
			default: "",
		},
	},
	data() {
		return {
			dialog: {
				save: false,
			},
			puPlan: "",
			orderObj: {},
			apiObj: null,
			query: {
				page: 1,
				page_size: 20,
				pu_plan: "",
			},
			stateOption: {
				10: "创建中",
				20: "已提交",
				30: "下单中",
				40: "下单完成",
				40: "已完成",
			},
			visible: false,
		};
	},
	mounted() {
		this.puPlan = this.planId;
		this.query.pu_plan = this.planId;
		this.apiObj = this.$API.pum.planitem.list;
		// this.$refs.table.refresh();
		this.getOrder();
	},
	methods: {
		open() {
			this.visible = true;
		},
		getOrder() {
			this.$API.pum.plan.item.req(this.puPlan).then((res) => {
				this.orderObj = res;
			});
		},
		//添加
		add() {
			this.dialog.save = true;
			this.$nextTick(() => {
				this.$refs.saveDialog.open("add");
			});
		},
		//编辑
		table_edit(row) {
			this.dialog.save = true;
			this.$nextTick(() => {
				this.$refs.saveDialog.open("edit").setData(row);
			});
		},
		//查看
		table_show(row) {
			this.dialog.save = true;
			this.$nextTick(() => {
				this.$refs.saveDialog.open("show").setData(row);
			});
		},

		//删除
		table_del(row) {
			this.$confirm(`确定删除该计划详情吗？`, "提示", {
				type: "warning",
			})
				.then(() => {
					this.$API.pum.planitem.delete
						.req(row.id)
						.then((res) => {
							this.$message.success("删除成功");
							return res;
						})
						.catch((err) => {
							return err;
						});
				})
				.catch(() => {});
		},
		arraySpanMethod({ rowIndex, columnIndex }) {
			console.log(rowIndex, columnIndex);
			if (rowIndex === 0) {
				// return [1, 2];
			}
		},
		getSummaries({ columns, data }) {
			const sums = [];
			columns.forEach((column, index) => {
				if (index === 0) {
					sums[index] = "合计";
					return;
				}
				if (index == 4) {
					const values = data.map((item) =>
						Number(item[column.property])
					);
					if (!values.every((value) => Number.isNaN(value))) {
						sums[index] = values.reduce((prev, curr) => {
							const value = Number(curr); //Number转换为数值
							let sum = Number(
								Number(prev) + Number(curr)
							).toFixed(2); //toFixed(2)数据项保留两位小数
							if (!isNaN(value)) {
								return sum;
							} else {
								return prev;
							}
						}, 0);
						sums[index] += "元"; //给合计项添加单位
					} else {
						sums[index] = "0元";
					}
				}
			});

			return sums;
		},
		//本地更新数据
		handleSaveSuccess(data, mode) {
			if (mode == "add") {
				this.$refs.table.refresh();
			} else if (mode == "edit") {
				this.$refs.table.refresh();
			}
		},
		handleQuery() {
			this.$refs.table.queryData(this.query);
		},
		resetQuery() {
			this.query = {};
		},
	},
};
</script>