139 lines
3.0 KiB
Vue
139 lines
3.0 KiB
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" :time-format="true" />
|
|
</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>
|
|
import moment from 'moment';
|
|
|
|
const InfoItem = {
|
|
name: 'InfoItem',
|
|
components: {},
|
|
props: ['label', 'value', 'timeFormat'],
|
|
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.timeFormat
|
|
? moment(this.value).format('YYYY-MM-DD HH:mm:ss')
|
|
: 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>
|