yudao-dev/src/views/group/Schedule/detail.vue

<!--
 * @Author: zwq
 * @Date: 2025-10-21 14:27:23
 * @LastEditors: zwq
 * @LastEditTime: 2025-11-25 15:14:53
 * @Description:
-->
<template>
	<div>
		<div class="info-div">
			<div>
				<span class="title">计划编号:</span>
				{{ infoData.code }}
			</div>
			<div>
				<span class="title">计划状态:</span>
				{{ ['', '草稿', '已确认', '已作废'][infoData.status] }}
			</div>
			<div>
				<span class="title">计划名称:</span>
				{{ infoData.name }}
			</div>
			<div>
				<span class="title">部门:</span>
				{{ infoData.deptName }}
			</div>
			<div>
				<span class="title">开始时间:</span>
				{{ parseTime(infoData.startDay) }}
			</div>
			<div>
				<span class="title">结束时间:</span>
				{{ parseTime(infoData.endDay) }}
			</div>
			<div>
				<span class="title">周末休假方式:</span>
				{{ ['', '双休', '周六休', '周日休', '不休'][infoData.weekType] }}
			</div>
			<div>
				<span class="title">倒班方式:</span>
				{{ ['', '长白班', '两班倒', '三班倒'][infoData.shiftType] }}
			</div>
			<div>
				<span class="title">同班次连排:</span>
				{{ infoData.shiftSustainedNum }}日
			</div>
			<div>
				<span class="title">创建人:</span>
				{{ infoData.creatorName }}
			</div>
			<div>
				<span class="title">创建时间:</span>
				{{ parseTime(infoData.createTime) }}
			</div>
			<div v-if="infoData.status == 3">
				<span class="title">作废时间:</span>
				{{ parseTime(infoData.disableTime) }}
			</div>
			<div>
				<span class="title">备注:</span>
				{{ infoData.remark }}
			</div>
		</div>
		<div>
			<el-tabs v-model="activeName" stretch>
				<el-tab-pane label="班次" name="first"></el-tab-pane>
				<el-tab-pane label="班组" name="second"></el-tab-pane>
			</el-tabs>
			<base-table
				v-if="activeName == 'first'"
				:table-props="tableProps1"
				:page="1"
				:limit="10"
				:table-data="tableData1"></base-table>
			<base-table
				v-else
				:table-props="tableProps2"
				:page="1"
				:limit="10"
				:table-data="tableData2"></base-table>
		</div>
	</div>
</template>

<script>
import { parseTime } from '@/filter/code-filter';
import { getPlan } from '@/api/group/Schedule';

const tableProps1 = [
	{
		prop: 'name',
		label: '班次名称',
	},
	{
		prop: 'startTime',
		label: '开始时间',
		filter: (val) => {
			return val ? val.slice(0, -3) : '-';
		},
	},
	{
		prop: 'endTime',
		label: '结束时间',
		filter: (val) => {
			return val ? val.slice(0, -3) : '-';
		},
	},
	{
		prop: 'remark',
		label: '备注',
	},
];

const tableProps2 = [
	{
		prop: 'code',
		label: '班组编号',
		width: 140,
	},
	{
		prop: 'name',
		label: '班组名称',
	},
	{
		prop: 'isProduction',
		label: '是否生产班组',
		filter: (val) => {
			return val ? '是' : '否';
		},
		width: 110,
	},
	{
		prop: 'lineName',
		label: '产线及工段',
	},
];
export default {
	data() {
		return {
			infoData: {},
			activeName: 'first',
			tableProps1,
			tableData1: [],
			tableProps2,
			tableData2: [],
		};
	},
	methods: {
		init(id) {
			this.infoData = {};
			getPlan(id).then((res) => {
				this.infoData = res.data || {};
				this.tableData1 = res.data?.groupPlanClassesBaseVOList.sort(
					(a, b) => a.sort - b.sort
				);
				this.tableData2 = res.data?.groupPlanTeamBaseVOList;
				this.tableData2.forEach((item, index) => {
					let lineName = '';
					if (item.isProduction) {
						lineName = this.setLineName(item.bindLineTree);
					}
					this.$set(this.tableData2[index], 'lineName', lineName);
				});
			});
		},
		//提取绑定的产线工段名展示出来
		setLineName(val) {
			if (!val || val.length === 0) return '';

			const currentLevelNames = val.map((item) => item.name);

			// 处理当前层级显示
			let currentDisplay = '';
			if (currentLevelNames.length > 1) {
				currentDisplay = `(${currentLevelNames.join(' 、 ')})`;
			} else {
				currentDisplay = currentLevelNames[0];
			}

			// 查找所有子节点（取第一个有子节点的元素）
			const childNode = val.find(
				(item) => item.children && item.children.length > 0
			);
			if (childNode) {
				const childPath = this.setLineName(childNode.children);
				if (childPath) {
					return `${currentDisplay} / ${childPath}`;
				}
			}

			return currentDisplay;
		},
	},
};
</script>

<style scoped>
.info-div {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 10px;
}
.title {
	font-weight: bold;
}
</style>