heli-mes/mes-ui/mes-ui-admin-vue3/src/views/heli/partprocess/detail.vue

104 lines
3.9 KiB
Vue
Raw Normal View History

2026-01-04 11:04:58 +08:00
<template>
<el-card class="hl-card" style="position: relative">
<template #header>
<span>详情页</span>
</template>
<el-card class="hl-card-info">
<template #header>
<div class="hl-card-info-icona"></div><span class="hl-card-info-text">子项目信息</span>
<label style="display: inline-flex; align-items: center; margin-left: 40px;">
<el-checkbox class="large-checkbox" v-model="formData.flag" style="order: 1;" />
<span style="order: 2; margin-left: 10px;">不显示已完成</span>
</label>
</template>
</el-card>
<ContentWrap>
<el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" class="hl-table" height="300" border :cell-class-name="cellClassName">
<el-table-column type="index" width="100" fixed label="序号" align="center" />
<el-table-column label="子项目名称" align="center" prop="projectSubName" />
<el-table-column label="任务" align="center" prop="designTask" />
<el-table-column label="预计开始时间" align="center" prop="outsourcingTasks" :formatter="dateFormatter2" />
<el-table-column label="预计结束时间" align="center" prop="processingTask" :formatter="dateFormatter2" />
<el-table-column label="工单状态" align="center" prop="processInspection" />
<el-table-column label="生产进度" align="center" prop="assemblyTask" />
</el-table>
</ContentWrap>
<el-card class="hl-card-info">
<template #header>
<div class="hl-card-info-icona"></div><span class="hl-card-info-text">工单信息</span>
</template>
</el-card>
<ContentWrap v-if="type=='设计'">
<el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" class="hl-table" height="500" border :cell-class-name="cellClassName">
<el-table-column type="index" width="100" fixed label="序号" align="center" />
<el-table-column label="子项目名称" align="center" prop="projectSubName" />
<el-table-column label="任务" align="center" prop="designTask" />
<el-table-column label="预计开始时间" align="center" prop="outsourcingTasks" />
<el-table-column label="预计结束时间" align="center" prop="processingTask" />
<el-table-column label="工单状态" align="center" prop="processInspection" />
<el-table-column label="生产进度" align="center" prop="assemblyTask" />
</el-table>
</ContentWrap>
<div class="text-center hl-footer">
<el-button @click="() => router.back()" size="large"> </el-button>
</div>
</el-card>
</template>
<script setup lang="ts">
import {inject, ref} from 'vue'
import {dateFormatter2} from "@/utils/formatTime";
import * as PlansubdetailApi from '@/api/heli/plansubdetail'
const loading = ref(false) // 列表的加载中
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const { query } = useRoute()
const router = useRouter()
const reload = inject('reload')
const formLoading = ref(false) // 表单的加载中1修改时的数据加载2提交的按钮禁用
const list = ref([]) // 设计数据
const type = ref('sheji')
const formData = reactive({
id:undefined,
projectSubId:undefined,
flag:true
})
//初始化方法
onMounted(async () => {
console.log(query)
formData.projectSubId = query.projectSubId
})
/** 查询设计列表 */
const getList = async () => {
loading.value = true
try {
const data = await PlansubdetailApi.getPartProcess(formData)
list.value = data
} finally {
loading.value = false
}
}
</script>
<style>
.hl-card .alter-class {
position: relative;
border: solid 1px orange;
outline: solid 1px orange;
}
.large-checkbox {
transform: scale(1.5); /* 方法1使用scale放大 */
/* 或者 */
/* 方法2通过调整字体大小 */
/* font-size: 18px; */
}
</style>