yudao-dev/src/views/extend/processFlowView/components/ProcessInfo.vue

<!-- 
    filename: ProcessInfo.vue
    author: liubin
    date: 2023-10-20 15:00:58
    description: 
-->

<template>
	<section class="process-info">
		<SearchBar :formConfigs="searchBarFormConfig" ref="search-bar" />

		<el-row :gutter="20">
			<el-col :span="6">
				<InfoItem label="工艺名称" :value="form.name" />
			</el-col>
			<el-col :span="6">
				<InfoItem label="产线" :value="form.lineName" />
			</el-col>
			<el-col :span="12">
				<InfoItem label="工艺描述" :value="form.remark" />
			</el-col>
		</el-row>

		<el-row :gutter="20" style="margin-top: 12px;">
			<el-col :span="6">
				<!-- <InfoItem label="创建人" value="xxse" /> -->
			</el-col>
			<el-col :span="6">
				<InfoItem label="创建时间" :value="form.createTime" />
			</el-col>
			<el-col :span="6">
				<!-- <InfoItem label="更新人" value="xxse" /> -->
			</el-col>
			<el-col :span="6">
				<!-- <InfoItem label="更新时间" value="2023-10-22 10:11:00" /> -->
			</el-col>
		</el-row>
	</section>
</template>

<script>

const InfoItem = {
	name: 'InfoItem',
	components: {},
	props: ['label', 'value'],
	data() {
		return {};
	},
	computed: {},
	methods: {},
	render: function (h) {
		return (
			<div style="display: flex; align-items: center; font-size: 14px; line-height: 1.5">
				<span style="width: 100px; text-align: left; font-weight: 700">{this.label}:</span>
				<span style="width: 200px; text-align: left; text-overflow: ellipse; white-space: nowrap">
					{this.value}
				</span>
			</div>
		);
	},
};

export default {
	name: 'ProcessInfo',
	components: { InfoItem },
	props: {},
	inject: ['getFlowId'],
	data() {
		return {
			infoUrl: '/extend/process-flow/get',
			searchBarFormConfig: [{ label: '工艺详情' }],
			form: {
				id: null,
				name: null,
				lineName: null,
				createTime: null,
				remark: null,
				enable: null,
				code: null
			},
		};
	},
	activated() {
		this.getInfo()
	},
	computed: {},
	methods: {
		// utils
		http(url, method, payload) {
			return this.$axios({
				url,
				method,
				params: method === 'get' ? payload : null,
				data: method !== 'get' ? payload : null,
			})
		},
		put(payload) {
			return this.http(this.updateUrl, 'put', payload);
		},
		post(payload) {
			return this.http(this.addUrl, 'post', payload);
		},
		recv(payload) {
			return this.http(this.pageUrl, 'get', payload);
		},
		info(payload) {
			return this.http(this.infoUrl, 'get', payload);
		},
		async getInfo() {
			const flowId = this.$route.params.id;
			if (!flowId) this.$router.go(-1);
			const { code, data } = await this.info({ id: flowId });
			// debugger;
			if (code == 0) {
				this.form = {
					...data
				};
			} else {
				this.$modal.msgError('工艺信息获取失败')
			}
		}
	},
};
</script>

<style scoped lang="scss">
.process-info {
	padding: 12px 20px 20px;
	background: #fff;
	border-radius: 8px;
}
</style>