factory_web/src/views/mtm/route_show.vue

<template>
	<el-container v-loading="loading">

		<el-main class="nopadding" style="padding-right: 1px;">
			<el-container>
				<el-header style="height: 80px;display: block;padding:0">
					<el-card shadow="hover">
						<el-descriptions :column="3" title="基本信息">
							<el-descriptions-item label="工艺名称:">{{
								form.name
							}}</el-descriptions-item>
							<el-descriptions-item label="物料名称:">{{
								form.material_name
							}}</el-descriptions-item>
						</el-descriptions>
					</el-card>
				</el-header>
				<el-main>
					<el-container>
						<el-aside style="width: 50%;overflow: scroll;">
							<div
								style="font-weight: 600;color: #303133;font-size: 16px;padding: 10px 0;position: fixed;">
								工艺路线流程图</div>
							<el-tabs v-if="tabsTitle.length > 1" v-model="activeName" :tab-position="'left'"
								style="flex-direction: row;" @tab-click="tabshandleClick">
								<el-tab-pane :label="item" v-for="item in tabsTitle" :key="item"></el-tab-pane>
							</el-tabs>
							<scDegra style="margin-top: 50px;" v-if="limitedWatch" ref="degraDialogs" :nodes="nodes"
								:edges="edges" :rankdir="'DL'" @closeDialog="limitedWatch = false">
							</scDegra>
						</el-aside>
						<el-main class="padding: 1px">
							<scTable ref="tables" :data="tableData" row-key="id" hidePagination hideDo stripe border>
								<el-table-column label="排序" prop="sort" width="50">
								</el-table-column>
								<el-table-column label="工序" prop="process_name">
								</el-table-column>
								<el-table-column label="输入" prop="material_in_name">
								</el-table-column>
								<el-table-column label="输出" prop="material_out_name">
								</el-table-column>
								<el-table-column label="追踪方式">
									<template #default="scope">
										<span>{{ tracking_[scope.row.material_out_tracking] }}</span>
									</template>
								</el-table-column>
								<el-table-column label="出材率" prop="out_rate">
								</el-table-column>
								<el-table-column label="切分融合数量" prop="div_number">
								</el-table-column>
								<el-table-column label="工时" prop="hour_work">
								</el-table-column>
								<el-table-column label="批次校验" v-if="project_code !== 'bxerp'">
									<template #default="scope">
										<el-tag v-if="scope.row.batch_bind" type="success">是</el-tag>
									</template>
								</el-table-column>
							</scTable>
						</el-main>
					</el-container>

				</el-main>


			</el-container>
		</el-main>
		<el-aside width="20%" v-if="form.ticket">
			<ticketd :ticketId="form.ticket"></ticketd>
		</el-aside>
	</el-container>
</template>
<script>
import ticketd from '@/views/wf/ticketd.vue'
export default {
	emits: ["success", "closed"],
	components: { ticketd },
	props: {
		t_id: { type: String, default: null },
	},
	data() {
		return {
			loading: false,
			isSaveing: false,
			state_: {
				10: "创建中",
				20: "审批中",
				40: "进行中",
				50: "已完成",
			},
			tracking_: {
				10: "批次",
				20: "单个",
			},
			form: {
				ticket: null
			},
			nodes: [],
			edges: [],
			tabsTitle: ['总图'],
			tabsData: {},
			tableData: [],
			project_code: "",
			activeName: "总图",
			limitedWatch: false,
		};
	},
	mounted() {
		this.project_code = this.$TOOL.data.get("BASE_INFO").base.base_code;
		this.tableData = [];
		if (this.t_id) {
			this.getRoutePackDetail(this.t_id);
		}
	},
	methods: {
		//显示
		open() {
			this.visible = true;
			return this;
		},
		//表单注入数据
		setData(data) {
			let that = this;
			Object.assign(that.form, data);
			that.getRoute(that.form.material);
			that.getDEGdatas(data.id);
			this.getTabsList(data.id);
		},
		async getRoutePackDetail(id) {
			let res = await this.$API.mtm.routepack.item.req(id);
			this.setData(res);
		},
		getDEGdatas(id) {
			let that = this;
			that.$API.mtm.routepack.dag.req(id).then((res) => {
				that.nodes = res.nodes;
				that.edges = res.edges;
				that.tabsData['总图'] = res;
				if (!that.limitedWatch) {
					that.limitedWatch = true;
					that.$nextTick(() => {
						that.$refs.degraDialogs.open();
					});
				}
			})
		},
		getTabsList(id) {
			let that = this;
			that.$API.mtm.routepack.dags.req(id).then((res) => {
				let arr = [];
				for (let key in res) {
					arr.push(key);
				}
				if (arr.length > 1) {
					for (let key in res) {
						that.tabsTitle.push(res[key].name);
						that.tabsData[res[key].name] = res[key];
					}
				}
				console.log(that.tabsData);
			})
		},
		//文件列表加载
		getRoute(id) {
			this.$API.mtm.route.list
				.req({ page: 0, routepack: this.form.id })
				.then((res) => {
					this.tableData = res;
				});
		},
		tabshandleClick(val) {
			let that = this;
			let label = val.props.label;
			that.$nextTick(() => {
				that.nodes = that.tabsData[label].nodes;
				that.edges = that.tabsData[label].edges;
			})
		},
	},
};
</script>

<style scoped>
.el-transfer {
	--el-transfer-panel-width: 345px !important;
}
</style>