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

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

Browse Source
main
黄伟杰 23 hours 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>
<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="noPassNum" align="center"/>
<el-table-column label="原因" prop="remark" align="center"/>
<el-table-column label="合格数量" prop="num" align="center" :formatter="emptyTableFormatter"/>
<el-table-column label="不合格数量" prop="noPassNum" align="center" :formatter="emptyTableFormatter"/>
<el-table-column label="原因" prop="remark" align="center" :formatter="emptyTableFormatter"/>
<el-table-column
label="报工时间"
align="center"
prop="baogongTime"
:formatter="dateFormatter"
:formatter="dateEmptyFormatter"
width="180px"
sortable />
<el-table-column label="报工人" prop="creator" align="center"/>
<el-table-column label="报工人" prop="creator" align="center" :formatter="emptyTableFormatter"/>
<!-- <el-table-column
label="创建时间"
align="center"
prop="createTime"
:formatter="dateFormatter"
:formatter="dateEmptyFormatter"
width="180px"
sortable /> -->
</el-table>
@ -52,6 +52,12 @@ const { t } = useI18n() // 国际化
const loading = ref(true) // 列表的加载中
const list = ref<BaogongRecordVO[]>([]) // 列表的数据
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({
pageNo: 1,
pageSize: 10,
@ -79,4 +85,4 @@ const getList = async () => {
onMounted(() => {
getList()
})
</script>
</script>

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

@ -75,21 +75,21 @@
<!-- 列表 -->
<ContentWrap>
<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="planId" />
<el-table-column label="派工数量" align="center" prop="num" />
<el-table-column label="id" align="center" prop="id" :formatter="emptyTableFormatter" />
<el-table-column label="关联计划id" align="center" prop="planId" :formatter="emptyTableFormatter" />
<el-table-column label="派工数量" align="center" prop="num" :formatter="emptyTableFormatter" />
<el-table-column
label="派工时间"
align="center"
prop="baogongTime"
:formatter="dateFormatter"
:formatter="dateEmptyFormatter"
width="180px"
sortable />
<el-table-column
label="创建时间"
align="center"
prop="createTime"
:formatter="dateFormatter"
:formatter="dateEmptyFormatter"
width="180px"
sortable />
<el-table-column label="操作" align="center" min-width="120px">
@ -141,6 +141,12 @@ const { t } = useI18n() // 国际化
const loading = ref(true) // 列表的加载中
const list = ref<BaogongRecordVO[]>([]) // 列表的数据
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 planTableMaxHeight = ref(520)
const planPaginationRef = ref<HTMLElement>()
@ -233,4 +239,4 @@ onMounted(() => {
onBeforeUnmount(() => {
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"
>
<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 :label="t('ProductionPlan.Plan.dialogTaskDetailLabel')" prop="taskDetailId">
<el-select
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-input disabled :model-value="taskDetailDisplayText" />
</el-form-item>
<el-form-item prop="code">
<template #label>
@ -46,10 +33,11 @@
</template>
<el-row :gutter="10" class="!w-full">
<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 :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-row>
</el-form-item>
@ -60,7 +48,6 @@
<el-input
disabled
:model-value="processRouteDisplayName"
:placeholder="t('ProductionPlan.Plan.dialogProcessRouteEmptyText')"
/>
</el-form-item>
<el-form-item :label="t('ProductionPlan.Plan.dialogProcessRouteItemsLabel')">
@ -72,20 +59,22 @@
class="process-route-items-table"
: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
:label="t('ProductionPlan.Plan.routeItemParameterCodeColumn')"
prop="processParameterCode"
min-width="140"
align="center"
:formatter="emptyTableFormatter"
/>
<el-table-column
:label="t('ProductionPlan.Plan.routeItemParameterNameColumn')"
prop="processParameterName"
min-width="160"
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">
<template #default="scope">
{{ getRouteItemDeviceDisplay(scope.row) }}
@ -94,40 +83,19 @@
</el-table>
</el-form-item>
<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 :label="t('ProductionPlan.Plan.dialogPlanStartLabel')" prop="planStartTime">
<el-date-picker
disabled
v-model="formData.planStartTime"
type="date"
value-format="x"
:placeholder="t('ProductionPlan.Plan.dialogPlanStartPlaceholder')"
class="!w-full"
/>
<el-input disabled :model-value="formatDateText(formData.planStartTime)" />
</el-form-item>
<el-form-item :label="t('ProductionPlan.Plan.dialogPlanEndLabel')" prop="planEndTime">
<el-date-picker
disabled
v-model="formData.planEndTime"
type="date"
value-format="x"
:placeholder="t('ProductionPlan.Plan.dialogPlanEndPlaceholder')"
class="!w-full"
/>
<el-input disabled :model-value="formatDateText(formData.planEndTime)" />
</el-form-item>
<el-form-item :label="t('ProductionPlan.Plan.dialogLatestStartLabel')" prop="latestStartTime">
<el-date-picker
disabled
v-model="formData.latestStartTime"
type="date"
value-format="x"
:placeholder="t('ProductionPlan.Plan.dialogLatestStartPlaceholder')"
class="!w-full"
/>
<el-input disabled :model-value="formatDateText(formData.latestStartTime)" />
</el-form-item>
<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>
</el-tab-pane>
@ -160,21 +128,21 @@
row-key="id"
: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.lineChangeItemBeforeDeviceColumn')" prop="beforeDeviceName" min-width="150" align="center" />
<el-table-column :label="t('ProductionPlan.Plan.lineChangeItemAfterDeviceColumn')" prop="afterDeviceName" min-width="150" align="center" />
<el-table-column label="操作人" prop="operatorUserName" min-width="120" align="center" />
<el-table-column :label="t('ProductionPlan.Plan.lineChangeRemarkColumn')" prop="remark" min-width="160" 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" :formatter="emptyTableFormatter" />
<el-table-column :label="t('ProductionPlan.Plan.lineChangeItemAfterDeviceColumn')" prop="afterDeviceName" min-width="150" align="center" :formatter="emptyTableFormatter" />
<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" :formatter="emptyTableFormatter" />
</el-table>
</template>
</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.lineChangeCountColumn')" prop="changeCount" width="120" align="center" />
<el-table-column :label="t('ProductionPlan.Plan.lineChangePassNumberColumn')" prop="passNumber" width="140" align="center" />
<el-table-column label="操作人" prop="operatorUserName" min-width="120" align="center" />
<el-table-column :label="t('ProductionPlan.Plan.lineChangeRemarkColumn')" prop="remark" min-width="160" 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" :formatter="emptyTableFormatter" />
<el-table-column :label="t('ProductionPlan.Plan.lineChangePassNumberColumn')" prop="passNumber" width="140" align="center" :formatter="emptyTableFormatter" />
<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" :formatter="emptyTableFormatter" />
</el-table>
<Pagination
:total="lineChangeRecordTotal"
@ -189,7 +157,6 @@
<script setup lang="ts">
import { LineChangeRecordBatchVO, PlanApi, PlanProcessRouteItemVO, PlanVO } from '@/api/mes/plan'
import { TaskApi, TaskDetailVO } from '@/api/mes/task'
import { dateFormatter2 } from '@/utils/formatTime'
import BaogongRecordList from '@/views/mes/baogongrecord/components/BaogongRecordList.vue'
import dayjs from 'dayjs'
@ -213,6 +180,22 @@ const lineChangeRecordQueryParams = reactive({
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> & {
workerId?: number
groupType?: number | string
@ -259,19 +242,23 @@ const formData = ref<PlanDetailFormData>({
const deliveryDateText = computed(() => {
const sourceValue = formData.value.deliveryDate ?? formData.value.finishDate
if (!sourceValue) return ''
const value = dayjs(sourceValue)
if (!value.isValid()) return String(sourceValue)
return value.format('YYYY-MM-DD')
return formatDateText(sourceValue)
})
const taskDetailDisplayText = computed(() => {
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(() => {
if (!formData.value.processRouteId) return ''
return formData.value.processRouteName || String(formData.value.processRouteId)
if (isEmptyValue(formData.value.processRouteId)) return emptyText
return formatEmptyText(formData.value.processRouteName || formData.value.processRouteId)
})
const getRouteItemDeviceDisplay = (row: PlanProcessRouteItemVO) => {
if (!row?.deviceId) return ''
return row.deviceName || String(row.deviceId)
if (!row?.deviceId) return emptyText
return formatEmptyText(row.deviceName || row.deviceId)
}
const getLineChangeBatchRowKey = (row: LineChangeRecordBatchVO) => {
@ -372,4 +359,11 @@ const resetForm = () => {
.plan-detail-drawer :deep(.el-drawer__body) {
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