linweidong
/
besure_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style：生产计划-详情-空值展示'-'

Browse Source
main
黄伟杰 1 week ago
parent c9a9af0bf7
commit fb08302aa9
3 changed files with 86 additions and 80 deletions
Show Stats Download Patch File Download Diff File

20
src/views/mes/baogongrecord/components/BaogongRecordList.vue
Unescape Escape View File

@ -2,22 +2,22 @@
<!-- 列表 --> <!-- 列表 -->
<ContentWrap> <ContentWrap>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true"> <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="合格数量" prop="num" align="center"/> <el-table-column label="合格数量" prop="num" align="center" :formatter="emptyTableFormatter"/>
<el-table-column label="不合格数量" prop="noPassNum" align="center"/> <el-table-column label="不合格数量" prop="noPassNum" align="center" :formatter="emptyTableFormatter"/>
<el-table-column label="原因" prop="remark" align="center"/> <el-table-column label="原因" prop="remark" align="center" :formatter="emptyTableFormatter"/>
<el-table-column <el-table-column
label="报工时间" label="报工时间"
align="center" align="center"
prop="baogongTime" prop="baogongTime"
:formatter="dateFormatter" :formatter="dateEmptyFormatter"
width="180px" width="180px"
sortable /> sortable />
<el-table-column label="报工人" prop="creator" align="center"/> <el-table-column label="报工人" prop="creator" align="center" :formatter="emptyTableFormatter"/>
<!-- <el-table-column <!-- <el-table-column
label="创建时间" label="创建时间"
align="center" align="center"
prop="createTime" prop="createTime"
:formatter="dateFormatter" :formatter="dateEmptyFormatter"
width="180px" width="180px"
sortable /> --> sortable /> -->
</el-table> </el-table>
@ -52,6 +52,12 @@ const { t } = useI18n() // 国际化
const loading = ref(true) // 列表的加载中 const loading = ref(true) // 列表的加载中
const list = ref<BaogongRecordVO[]>([]) // 列表的数据 const list = ref<BaogongRecordVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数 const total = ref(0) // 列表的总页数
const emptyText = '-'
const isEmptyValue = (value: unknown) => value === undefined || value === null || value === ''
const emptyTableFormatter = (_row: unknown, _column: unknown, cellValue: unknown) =>
isEmptyValue(cellValue) ? emptyText : String(cellValue)
const dateEmptyFormatter = (row: any, column: any, cellValue: unknown) =>
isEmptyValue(cellValue) ? emptyText : dateFormatter(row, column, cellValue)
const queryParams = reactive({ const queryParams = reactive({
pageNo: 1, pageNo: 1,
pageSize: 10, pageSize: 10,
@ -79,4 +85,4 @@ const getList = async () => {
onMounted(() => { onMounted(() => {
getList() getList()
}) })
</script> </script>

18
src/views/mes/baogongrecord/index.vue
Unescape Escape View File

@ -75,21 +75,21 @@
<!-- 列表 --> <!-- 列表 -->
<ContentWrap> <ContentWrap>
<el-table ref="tableRef" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" :max-height="planTableMaxHeight"> <el-table ref="tableRef" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" :max-height="planTableMaxHeight">
<el-table-column label="id" align="center" prop="id" /> <el-table-column label="id" align="center" prop="id" :formatter="emptyTableFormatter" />
<el-table-column label="关联计划id" align="center" prop="planId" /> <el-table-column label="关联计划id" align="center" prop="planId" :formatter="emptyTableFormatter" />
<el-table-column label="派工数量" align="center" prop="num" /> <el-table-column label="派工数量" align="center" prop="num" :formatter="emptyTableFormatter" />
<el-table-column <el-table-column
label="派工时间" label="派工时间"
align="center" align="center"
prop="baogongTime" prop="baogongTime"
:formatter="dateFormatter" :formatter="dateEmptyFormatter"
width="180px" width="180px"
sortable /> sortable />
<el-table-column <el-table-column
label="创建时间" label="创建时间"
align="center" align="center"
prop="createTime" prop="createTime"
:formatter="dateFormatter" :formatter="dateEmptyFormatter"
width="180px" width="180px"
sortable /> sortable />
<el-table-column label="操作" align="center" min-width="120px"> <el-table-column label="操作" align="center" min-width="120px">
@ -141,6 +141,12 @@ const { t } = useI18n() // 国际化
const loading = ref(true) // 列表的加载中 const loading = ref(true) // 列表的加载中
const list = ref<BaogongRecordVO[]>([]) // 列表的数据 const list = ref<BaogongRecordVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数 const total = ref(0) // 列表的总页数
const emptyText = '-'
const isEmptyValue = (value: unknown) => value === undefined || value === null || value === ''
const emptyTableFormatter = (_row: unknown, _column: unknown, cellValue: unknown) =>
isEmptyValue(cellValue) ? emptyText : String(cellValue)
const dateEmptyFormatter = (row: any, column: any, cellValue: unknown) =>
isEmptyValue(cellValue) ? emptyText : dateFormatter(row, column, cellValue)
const tableRef = ref() const tableRef = ref()
const planTableMaxHeight = ref(520) const planTableMaxHeight = ref(520)
const planPaginationRef = ref<HTMLElement>() const planPaginationRef = ref<HTMLElement>()
@ -233,4 +239,4 @@ onMounted(() => {
onBeforeUnmount(() => { onBeforeUnmount(() => {
window.removeEventListener("resize", updatePlanTableMaxHeight) window.removeEventListener("resize", updatePlanTableMaxHeight)
}) })
</script> </script>

128
src/views/mes/plan/components/PlanDetail.vue
Unescape Escape View File

@ -17,23 +17,10 @@
v-loading="formLoading" v-loading="formLoading"
> >
<el-form-item :label="t('ProductionPlan.Plan.dialogTaskLabel')" prop="taskCode"> <el-form-item :label="t('ProductionPlan.Plan.dialogTaskLabel')" prop="taskCode">
<el-input disabled v-model="formData.taskCode" :placeholder="t('ProductionPlan.Plan.dialogTaskPlaceholder')" /> <el-input disabled :model-value="formatEmptyText(formData.taskCode)" />
</el-form-item> </el-form-item>
<el-form-item :label="t('ProductionPlan.Plan.dialogTaskDetailLabel')" prop="taskDetailId"> <el-form-item :label="t('ProductionPlan.Plan.dialogTaskDetailLabel')" prop="taskDetailId">
<el-select <el-input disabled :model-value="taskDetailDisplayText" />
disabled
v-model="formData.taskDetailId"
clearable
filterable
:placeholder="t('ProductionPlan.Plan.dialogTaskDetailPlaceholder')"
>
<el-option
v-for="item in taskDetailList"
:key="item.id"
:label="`${item.productName}-${t('ProductionPlan.Plan.dialogTaskDetailUnplannedPrefix')}${Number(item.number || 0) - Number(item.planNumber || 0)}`"
:value="item.id"
/>
</el-select>
</el-form-item> </el-form-item>
<el-form-item prop="code"> <el-form-item prop="code">
<template #label> <template #label>
@ -46,10 +33,11 @@
</template> </template>
<el-row :gutter="10" class="!w-full"> <el-row :gutter="10" class="!w-full">
<el-col :xs="24" :sm="18" :md="16" :lg="14" :xl="12"> <el-col :xs="24" :sm="18" :md="16" :lg="14" :xl="12">
<el-input disabled v-model="formData.code" :placeholder="t('ProductionPlan.Plan.dialogCodePlaceholder')" /> <el-input disabled :model-value="formatEmptyText(formData.code)" />
</el-col> </el-col>
<el-col :xs="24" :sm="6" :md="4" :lg="3" :xl="2"> <el-col :xs="24" :sm="6" :md="4" :lg="3" :xl="2">
<el-switch disabled v-model="formData.isCode" /> <el-switch v-if="!isEmptyValue(formData.isCode)" disabled v-model="formData.isCode" />
<span v-else class="empty-inline-text">{{ emptyText }}</span>
</el-col> </el-col>
</el-row> </el-row>
</el-form-item> </el-form-item>
@ -60,7 +48,6 @@
<el-input <el-input
disabled disabled
:model-value="processRouteDisplayName" :model-value="processRouteDisplayName"
:placeholder="t('ProductionPlan.Plan.dialogProcessRouteEmptyText')"
/> />
</el-form-item> </el-form-item>
<el-form-item :label="t('ProductionPlan.Plan.dialogProcessRouteItemsLabel')"> <el-form-item :label="t('ProductionPlan.Plan.dialogProcessRouteItemsLabel')">
@ -72,20 +59,22 @@
class="process-route-items-table" class="process-route-items-table"
:empty-text="t('ProductionPlan.Plan.dialogProcessRouteEmptyText')" :empty-text="t('ProductionPlan.Plan.dialogProcessRouteEmptyText')"
> >
<el-table-column :label="t('ProductionPlan.Plan.routeItemSortColumn')" prop="sort" width="70" align="center" /> <el-table-column :label="t('ProductionPlan.Plan.routeItemSortColumn')" prop="sort" width="70" align="center" :formatter="emptyTableFormatter" />
<el-table-column <el-table-column
:label="t('ProductionPlan.Plan.routeItemParameterCodeColumn')" :label="t('ProductionPlan.Plan.routeItemParameterCodeColumn')"
prop="processParameterCode" prop="processParameterCode"
min-width="140" min-width="140"
align="center" align="center"
:formatter="emptyTableFormatter"
/> />
<el-table-column <el-table-column
:label="t('ProductionPlan.Plan.routeItemParameterNameColumn')" :label="t('ProductionPlan.Plan.routeItemParameterNameColumn')"
prop="processParameterName" prop="processParameterName"
min-width="160" min-width="160"
align="center" align="center"
:formatter="emptyTableFormatter"
/> />
<el-table-column :label="t('ProductionPlan.Plan.routeItemRemarkColumn')" prop="remark" min-width="140" align="center" /> <el-table-column :label="t('ProductionPlan.Plan.routeItemRemarkColumn')" prop="remark" min-width="140" align="center" :formatter="emptyTableFormatter" />
<el-table-column :label="t('ProductionPlan.Plan.routeItemDeviceColumn')" min-width="180" align="center"> <el-table-column :label="t('ProductionPlan.Plan.routeItemDeviceColumn')" min-width="180" align="center">
<template #default="scope"> <template #default="scope">
{{ getRouteItemDeviceDisplay(scope.row) }} {{ getRouteItemDeviceDisplay(scope.row) }}
@ -94,40 +83,19 @@
</el-table> </el-table>
</el-form-item> </el-form-item>
<el-form-item :label="t('ProductionPlan.Plan.dialogPlanNumberLabel')" prop="planNumber"> <el-form-item :label="t('ProductionPlan.Plan.dialogPlanNumberLabel')" prop="planNumber">
<el-input disabled v-model="formData.planNumber" /> <el-input disabled :model-value="formatEmptyText(formData.planNumber)" />
</el-form-item> </el-form-item>
<el-form-item :label="t('ProductionPlan.Plan.dialogPlanStartLabel')" prop="planStartTime"> <el-form-item :label="t('ProductionPlan.Plan.dialogPlanStartLabel')" prop="planStartTime">
<el-date-picker <el-input disabled :model-value="formatDateText(formData.planStartTime)" />
disabled
v-model="formData.planStartTime"
type="date"
value-format="x"
:placeholder="t('ProductionPlan.Plan.dialogPlanStartPlaceholder')"
class="!w-full"
/>
</el-form-item> </el-form-item>
<el-form-item :label="t('ProductionPlan.Plan.dialogPlanEndLabel')" prop="planEndTime"> <el-form-item :label="t('ProductionPlan.Plan.dialogPlanEndLabel')" prop="planEndTime">
<el-date-picker <el-input disabled :model-value="formatDateText(formData.planEndTime)" />
disabled
v-model="formData.planEndTime"
type="date"
value-format="x"
:placeholder="t('ProductionPlan.Plan.dialogPlanEndPlaceholder')"
class="!w-full"
/>
</el-form-item> </el-form-item>
<el-form-item :label="t('ProductionPlan.Plan.dialogLatestStartLabel')" prop="latestStartTime"> <el-form-item :label="t('ProductionPlan.Plan.dialogLatestStartLabel')" prop="latestStartTime">
<el-date-picker <el-input disabled :model-value="formatDateText(formData.latestStartTime)" />
disabled
v-model="formData.latestStartTime"
type="date"
value-format="x"
:placeholder="t('ProductionPlan.Plan.dialogLatestStartPlaceholder')"
class="!w-full"
/>
</el-form-item> </el-form-item>
<el-form-item :label="t('ProductionPlan.Plan.dialogRemarkLabel')" prop="remark"> <el-form-item :label="t('ProductionPlan.Plan.dialogRemarkLabel')" prop="remark">
<el-input disabled type="textarea" v-model="formData.remark" :placeholder="t('ProductionPlan.Plan.dialogRemarkPlaceholder')" /> <el-input disabled type="textarea" :model-value="formatEmptyText(formData.remark)" />
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-tab-pane> </el-tab-pane>
@ -160,21 +128,21 @@
row-key="id" row-key="id"
:empty-text="t('ProductionPlan.Plan.lineChangeItemEmptyText')" :empty-text="t('ProductionPlan.Plan.lineChangeItemEmptyText')"
> >
<el-table-column :label="t('ProductionPlan.Plan.lineChangeItemProcessParameterNameColumn')" prop="processParameterName" min-width="150" align="center" /> <el-table-column :label="t('ProductionPlan.Plan.lineChangeItemProcessParameterNameColumn')" prop="processParameterName" min-width="150" align="center" :formatter="emptyTableFormatter" />
<el-table-column :label="t('ProductionPlan.Plan.lineChangeItemBeforeDeviceColumn')" prop="beforeDeviceName" min-width="150" align="center" /> <el-table-column :label="t('ProductionPlan.Plan.lineChangeItemBeforeDeviceColumn')" prop="beforeDeviceName" min-width="150" align="center" :formatter="emptyTableFormatter" />
<el-table-column :label="t('ProductionPlan.Plan.lineChangeItemAfterDeviceColumn')" prop="afterDeviceName" min-width="150" align="center" /> <el-table-column :label="t('ProductionPlan.Plan.lineChangeItemAfterDeviceColumn')" prop="afterDeviceName" min-width="150" align="center" :formatter="emptyTableFormatter" />
<el-table-column label="操作人" prop="operatorUserName" min-width="120" align="center" /> <el-table-column label="&#x64CD;&#x4F5C;&#x4EBA;" prop="operatorUserName" min-width="120" align="center" :formatter="emptyTableFormatter" />
<el-table-column :label="t('ProductionPlan.Plan.lineChangeRemarkColumn')" prop="remark" min-width="160" align="center" /> <el-table-column :label="t('ProductionPlan.Plan.lineChangeRemarkColumn')" prop="remark" min-width="160" align="center" :formatter="emptyTableFormatter" />
</el-table> </el-table>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column :label="t('ProductionPlan.Plan.lineChangeBatchNoColumn')" prop="changeBatchNo" min-width="170" align="center" /> <el-table-column :label="t('ProductionPlan.Plan.lineChangeBatchNoColumn')" prop="changeBatchNo" min-width="170" align="center" :formatter="emptyTableFormatter" />
<el-table-column :label="t('ProductionPlan.Plan.lineChangeTimeColumn')" prop="changeTime" :formatter="dateFormatter2" width="170" align="center" /> <el-table-column :label="t('ProductionPlan.Plan.lineChangeTimeColumn')" prop="changeTime" :formatter="dateEmptyTableFormatter" width="170" align="center" />
<el-table-column :label="t('ProductionPlan.Plan.lineChangeCountColumn')" prop="changeCount" width="120" align="center" /> <el-table-column :label="t('ProductionPlan.Plan.lineChangeCountColumn')" prop="changeCount" width="120" align="center" :formatter="emptyTableFormatter" />
<el-table-column :label="t('ProductionPlan.Plan.lineChangePassNumberColumn')" prop="passNumber" width="140" align="center" /> <el-table-column :label="t('ProductionPlan.Plan.lineChangePassNumberColumn')" prop="passNumber" width="140" align="center" :formatter="emptyTableFormatter" />
<el-table-column label="操作人" prop="operatorUserName" min-width="120" align="center" /> <el-table-column label="&#x64CD;&#x4F5C;&#x4EBA;" prop="operatorUserName" min-width="120" align="center" :formatter="emptyTableFormatter" />
<el-table-column :label="t('ProductionPlan.Plan.lineChangeRemarkColumn')" prop="remark" min-width="160" align="center" /> <el-table-column :label="t('ProductionPlan.Plan.lineChangeRemarkColumn')" prop="remark" min-width="160" align="center" :formatter="emptyTableFormatter" />
</el-table> </el-table>
<Pagination <Pagination
:total="lineChangeRecordTotal" :total="lineChangeRecordTotal"
@ -189,7 +157,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { LineChangeRecordBatchVO, PlanApi, PlanProcessRouteItemVO, PlanVO } from '@/api/mes/plan' import { LineChangeRecordBatchVO, PlanApi, PlanProcessRouteItemVO, PlanVO } from '@/api/mes/plan'
import { TaskApi, TaskDetailVO } from '@/api/mes/task' import { TaskApi, TaskDetailVO } from '@/api/mes/task'
import { dateFormatter2 } from '@/utils/formatTime'
import BaogongRecordList from '@/views/mes/baogongrecord/components/BaogongRecordList.vue' import BaogongRecordList from '@/views/mes/baogongrecord/components/BaogongRecordList.vue'
import dayjs from 'dayjs' import dayjs from 'dayjs'
@ -213,6 +180,22 @@ const lineChangeRecordQueryParams = reactive({
pageSize: 10 pageSize: 10
}) })
const emptyText = '-'
const isEmptyValue = (value: unknown) => value === undefined || value === null || value === ''
const formatEmptyText = (value: unknown) => (isEmptyValue(value) ? emptyText : String(value))
const formatDateText = (value: unknown) => {
if (isEmptyValue(value)) return emptyText
const date = dayjs(value)
if (!date.isValid()) return formatEmptyText(value)
return date.format('YYYY-MM-DD')
}
const emptyTableFormatter = (_row: unknown, _column: unknown, cellValue: unknown) => formatEmptyText(cellValue)
const dateEmptyTableFormatter = (_row: unknown, _column: unknown, cellValue: unknown) => formatDateText(cellValue)
type PlanDetailFormData = Partial<PlanVO> & { type PlanDetailFormData = Partial<PlanVO> & {
workerId?: number workerId?: number
groupType?: number | string groupType?: number | string
@ -259,19 +242,23 @@ const formData = ref<PlanDetailFormData>({
const deliveryDateText = computed(() => { const deliveryDateText = computed(() => {
const sourceValue = formData.value.deliveryDate ?? formData.value.finishDate const sourceValue = formData.value.deliveryDate ?? formData.value.finishDate
if (!sourceValue) return '' return formatDateText(sourceValue)
const value = dayjs(sourceValue) })
if (!value.isValid()) return String(sourceValue) const taskDetailDisplayText = computed(() => {
return value.format('YYYY-MM-DD') const taskDetailId = formData.value.taskDetailId
if (isEmptyValue(taskDetailId)) return emptyText
const item = taskDetailList.value.find((detail) => String(detail.id) === String(taskDetailId))
if (!item) return formatEmptyText(taskDetailId)
return `${formatEmptyText(item.productName)}-${t('ProductionPlan.Plan.dialogTaskDetailUnplannedPrefix')}${Number(item.number || 0) - Number(item.planNumber || 0)}`
}) })
const processRouteDisplayName = computed(() => { const processRouteDisplayName = computed(() => {
if (!formData.value.processRouteId) return '' if (isEmptyValue(formData.value.processRouteId)) return emptyText
return formData.value.processRouteName || String(formData.value.processRouteId) return formatEmptyText(formData.value.processRouteName || formData.value.processRouteId)
}) })
const getRouteItemDeviceDisplay = (row: PlanProcessRouteItemVO) => { const getRouteItemDeviceDisplay = (row: PlanProcessRouteItemVO) => {
if (!row?.deviceId) return '' if (!row?.deviceId) return emptyText
return row.deviceName || String(row.deviceId) return formatEmptyText(row.deviceName || row.deviceId)
} }
const getLineChangeBatchRowKey = (row: LineChangeRecordBatchVO) => { const getLineChangeBatchRowKey = (row: LineChangeRecordBatchVO) => {
@ -372,4 +359,11 @@ const resetForm = () => {
.plan-detail-drawer :deep(.el-drawer__body) { .plan-detail-drawer :deep(.el-drawer__body) {
padding-top: 0; padding-top: 0;
} }
</style>
.empty-inline-text {
display: inline-flex;
align-items: center;
min-height: 32px;
color: var(--el-disabled-text-color);
}
</style>

Write Preview
Loading…
Cancel
Save