style：模具管理-点检记录-检验结果页面样式优化

src/api/mold/ticketManagement/index.ts

@@ -6,11 +6,13 @@ export interface TicketManagementVO {
   planId?: string
   planNo?: string
   deviceName?: string
+  moldName?: string
   planType?: string | number
   configName?: string
   jobStatus?: string | number
   jobResult?: string
   jobUser?: string
+  operatorName?: string
   taskTime?: string
   taskEndTime?: string
   cancelReason?: string

src/locales/en.ts

@@ -3254,6 +3254,7 @@ export default {
 
     MoldWorkOrderInquiry: {
       moduleName: 'Work Order Inquiry',
+      basicInfo: 'Basic Information',
       planNo: 'Order No',
       planType: 'Type',
       planTypeInspect: 'Inspection',

src/locales/zh-CN.ts

@@ -2740,6 +2740,7 @@ export default {
 
     MoldWorkOrderInquiry: {
       moduleName: '工单查询',
+      basicInfo: '基本信息',
       planNo: '单号',
       planType: '类型',
       planTypeInspect: '点检',

src/views/mold/workOrderInquiry/components/TicketResultDialog.vue

@@ -1,123 +1,171 @@
 <template>
-  <Dialog v-model="dialogVisible" :title="dialogTitle" width="1500px">
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" :row-key="getRowKey">
-      <el-table-column type="index" :label="t('MoldManagement.TicketResultDialog.index')" align="center" width="70" />
-      <el-table-column :label="t('MoldManagement.TicketResultDialog.inspectionItemName')" align="center" prop="inspectionItemName" min-width="200"  sortable />
-      <el-table-column :label="t('MoldManagement.TicketResultDialog.inspectionMethod')" align="center" prop="inspectionMethod" min-width="160">
-        <template #default="scope">
-          <dict-tag type="Inspection_method" :value="scope.row.inspectionMethod" />
-        </template>
-      </el-table-column>
-      <el-table-column :label="t('MoldManagement.TicketResultDialog.judgmentCriteria')" align="center" prop="judgmentCriteria" min-width="180" />
-      <el-table-column :label="t('MoldManagement.TicketResultDialog.inspectionResult')" align="center" prop="inspectionResult" min-width="140">
-        <template #default="scope">
-          <el-tag v-if="String(scope.row.inspectionResult) === '0'" type="info">{{ t('MoldManagement.TicketResultDialog.inspectionResultPending') }}</el-tag>
-          <el-tag v-else-if="String(scope.row.inspectionResult) === '1'" type="success">{{ t('MoldManagement.TicketResultDialog.inspectionResultPass') }}</el-tag>
-          <el-tag v-else-if="String(scope.row.inspectionResult) === '2'" type="danger">{{ t('MoldManagement.TicketResultDialog.inspectionResultFail') }}</el-tag>
-          <span v-else>-</span>
-        </template>
-      </el-table-column>
-      <el-table-column :label="t('MoldManagement.TicketResultDialog.images')" align="center" prop="images" min-width="260">
-        <template #default="scope">
-          <div
-            v-if="String(scope.row.inspectionResult) === '0'"
-            v-loading="isImageUploading(String(scope.row.id))"
-            element-loading-text="上传中"
-            class="ticket-result-images"
-            :class="{ 'is-full': (imageMap[String(scope.row.id)] || []).length >= 3 }"
-          >
-            <UploadImgs
-              v-model="imageMap[String(scope.row.id)]"
-              :limit="3"
-              width="64px"
-              height="64px"
-              @uploading-change="setImageUploading(String(scope.row.id), $event)"
-            />
-          </div>
-          <div v-else-if="parseImages(scope.row.images).length" class="ticket-result-images">
-            <el-image
-              v-for="image in parseImages(scope.row.images)"
-              :key="image"
-              :src="image"
-              :preview-src-list="parseImages(scope.row.images)"
-              preview-teleported
-              fit="cover"
-              class="ticket-result-image"
-            />
-          </div>
-          <span v-else>-</span>
-        </template>
-      </el-table-column>
-      <el-table-column :label="t('EquipmentManagement.DvSubject.valueType')" align="center" prop="valueType" width="120" sortable>
-        <template #default="scope">
-          <el-tag
-            v-if="scope.row.valueType !== undefined && scope.row.valueType !== null && String(scope.row.valueType) !== ''"
-            effect="light" :type="getTagType('value_types', scope.row.valueType)"
-            :color="getTagColor('value_types', scope.row.valueType)"
-            :style="getTagStyle('value_types', scope.row.valueType)" disable-transitions>
-            {{ getTagLabel('value_types', scope.row.valueType) }}
+  <div class="ticket-result-page">
+    <ContentWrap>
+      <div class="ticket-result-header">
+        <el-button @click="handleClose">{{ t('common.back') }}</el-button>
+        <span class="ticket-result-title">{{ pageTitle }}</span>
+      </div>
+
+      <el-descriptions :title="t('MoldManagement.MoldWorkOrderInquiry.basicInfo')" :column="4" border>
+        <el-descriptions-item :label="t('MoldManagement.MoldWorkOrderInquiry.planNo')">
+          {{ currentRow?.planNo || '-' }}
+        </el-descriptions-item>
+        <el-descriptions-item :label="t('MoldManagement.MoldWorkOrderInquiry.moldName')">
+          {{ currentRow?.moldName || '-' }}
+        </el-descriptions-item>
+        <el-descriptions-item :label="t('MoldManagement.MoldWorkOrderInquiry.planType')">
+          <el-tag v-if="String(currentRow?.planType) === '1'" type="primary">
+            {{ t('MoldManagement.MoldWorkOrderInquiry.planTypeInspect') }}
+          </el-tag>
+          <el-tag v-else-if="String(currentRow?.planType) === '2'" type="success">
+            {{ t('MoldManagement.MoldWorkOrderInquiry.planTypeMaintain') }}
           </el-tag>
           <span v-else>-</span>
-        </template>
-      </el-table-column>
-      <el-table-column :label="t('MoldManagement.TicketResultDialog.inputValue')" align="center" min-width="150">
-        <template #default="scope">
-          <el-input
-            v-if="String(scope.row.valueType) === '0' || String(scope.row.valueType) === '2'"
-            v-model="scope.row.textInput"
-            :disabled="String(scope.row.inspectionResult) !== '0'"
-            clearable
-            :placeholder="t('common.inputText')"
-          />
-          <span v-else>-</span>
-        </template>
-      </el-table-column>
-      <el-table-column :label="t('MoldManagement.TicketResultDialog.remark')" align="center" prop="remark" min-width="180">
-        <template #default="scope">
-          <el-input v-if="String(scope.row.inspectionResult) === '0'" v-model="scope.row.remark" clearable :placeholder="t('common.inputText')" />
-          <span v-else>{{ scope.row.remark || '-' }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column :label="t('MoldManagement.TicketResultDialog.operate')" align="center" min-width="220" fixed="right">
-        <template #default="scope">
-          <el-radio-group v-if="String(scope.row.inspectionResult) === '0'" v-model="decisionMap[String(scope.row.id)]">
-            <el-radio :label="'1'">{{ t('MoldManagement.TicketResultDialog.pass') }}</el-radio>
-            <el-radio :label="'2'">{{ t('MoldManagement.TicketResultDialog.fail') }}</el-radio>
-          </el-radio-group>
+        </el-descriptions-item>
+        <el-descriptions-item :label="t('MoldManagement.MoldWorkOrderInquiry.jobStatus')">
+          <dict-tag :type="'job_status'" :value="jobStatus" />
+        </el-descriptions-item>
+        <el-descriptions-item :label="t('MoldManagement.MoldWorkOrderInquiry.configName')">
+          {{ currentRow?.configName || '-' }}
+        </el-descriptions-item>
+        <el-descriptions-item :label="t('MoldManagement.MoldWorkOrderInquiry.operatorName')">
+          {{ currentRow?.operatorName || '-' }}
+        </el-descriptions-item>
+        <el-descriptions-item :label="t('MoldManagement.MoldWorkOrderInquiry.taskTime')">
+          {{ formatDisplayTime(currentRow?.taskTime) }}
+        </el-descriptions-item>
+        <el-descriptions-item :label="t('MoldManagement.MoldWorkOrderInquiry.taskEndTime')">
+          {{ formatDisplayTime(currentRow?.taskEndTime) }}
+        </el-descriptions-item>
+        <el-descriptions-item :label="t('MoldManagement.MoldWorkOrderInquiry.jobResult')">
+          <el-tag v-if="currentRow?.jobResult == '1' || currentRow?.jobResult == 'OK'" type="success">
+            {{ t('MoldManagement.MoldWorkOrderInquiry.jobResultOk') }}
+          </el-tag>
+          <el-tag v-else-if="currentRow?.jobResult == '2' || currentRow?.jobResult == 'NG'" type="danger">
+            {{ t('MoldManagement.MoldWorkOrderInquiry.jobResultNg') }}
+          </el-tag>
           <span v-else>-</span>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <el-pagination
-	      v-show="total > 0" v-model:current-page="queryParams.pageNo" v-model:page-size="queryParams.pageSize"
-	      :background="true" :page-sizes="[10, 20, 30, 50, 100]" :pager-count="7" :total="total"
-	      class="mt-15px mb-15px flex justify-end" layout="total, sizes, prev, pager, next, jumper"
-	      @size-change="handleSizeChange" @current-change="handleCurrentChange" />
-
-	    <div v-if="String(jobStatus) === '4'" class="mt-10px text-14px">
-	      <span>{{ t('MoldManagement.MoldWorkOrderInquiry.jobStatus') }}：</span>
-	      <dict-tag :type="'job_status'" :value="jobStatus" />
-	      <span class="ml-20px">取消原因：</span>
-	      <span>{{ cancelReason || '-' }}</span>
-	    </div>
-
-    <template #footer>
-      <el-button @click="dialogVisible = false">{{ t('MoldManagement.TicketResultDialog.cancel') }}</el-button>
-      <el-button v-if="String(jobStatus) === '0'" type="primary" @click="handleSave" :loading="submitLoading" :disabled="hasImageUploading">{{ t('MoldManagement.TicketResultDialog.save') }}</el-button>
-    </template>
-  </Dialog>
+        </el-descriptions-item>
+        <el-descriptions-item v-if="String(jobStatus) === '4'"
+          :label="t('MoldManagement.MoldWorkOrderInquiry.cancelReason')" :span="3">
+          {{ cancelReason || '-' }}
+        </el-descriptions-item>
+      </el-descriptions>
+    </ContentWrap>
+
+    <ContentWrap>
+      <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" :row-key="getRowKey">
+        <el-table-column type="index" :label="t('MoldManagement.TicketResultDialog.index')" align="center" width="70" />
+        <el-table-column :label="t('MoldManagement.TicketResultDialog.inspectionItemName')" align="center"
+          prop="inspectionItemName" min-width="200" sortable />
+        <el-table-column :label="t('MoldManagement.TicketResultDialog.inspectionMethod')" align="center"
+          prop="inspectionMethod" min-width="160">
+          <template #default="scope">
+            <dict-tag type="Inspection_method" :value="scope.row.inspectionMethod" />
+          </template>
+        </el-table-column>
+        <el-table-column :label="t('MoldManagement.TicketResultDialog.judgmentCriteria')" align="center"
+          prop="judgmentCriteria" min-width="180" />
+        <el-table-column :label="t('MoldManagement.TicketResultDialog.inspectionResult')" align="center"
+          prop="inspectionResult" min-width="140">
+          <template #default="scope">
+            <el-tag v-if="String(scope.row.inspectionResult) === '0'" type="info">{{
+              t('MoldManagement.TicketResultDialog.inspectionResultPending') }}</el-tag>
+            <el-tag v-else-if="String(scope.row.inspectionResult) === '1'" type="success">{{
+              t('MoldManagement.TicketResultDialog.inspectionResultPass') }}</el-tag>
+            <el-tag v-else-if="String(scope.row.inspectionResult) === '2'" type="danger">{{
+              t('MoldManagement.TicketResultDialog.inspectionResultFail') }}</el-tag>
+            <span v-else>-</span>
+          </template>
+        </el-table-column>
+        <el-table-column :label="t('MoldManagement.TicketResultDialog.images')" align="center" prop="images"
+          min-width="260">
+          <template #default="scope">
+            <div v-if="String(scope.row.inspectionResult) === '0'" v-loading="isImageUploading(String(scope.row.id))"
+              element-loading-text="上传中" class="ticket-result-images"
+              :class="{ 'is-full': (imageMap[String(scope.row.id)] || []).length >= 3 }">
+              <UploadImgs v-model="imageMap[String(scope.row.id)]" :limit="3" width="64px" height="64px"
+                @uploading-change="setImageUploading(String(scope.row.id), $event)" />
+            </div>
+            <div v-else-if="parseImages(scope.row.images).length" class="ticket-result-images">
+              <el-image v-for="image in parseImages(scope.row.images)" :key="image" :src="image"
+                :preview-src-list="parseImages(scope.row.images)" preview-teleported fit="cover"
+                class="ticket-result-image" />
+            </div>
+            <span v-else>-</span>
+          </template>
+        </el-table-column>
+        <el-table-column :label="t('EquipmentManagement.DvSubject.valueType')" align="center" prop="valueType"
+          width="120" sortable>
+          <template #default="scope">
+            <el-tag
+              v-if="scope.row.valueType !== undefined && scope.row.valueType !== null && String(scope.row.valueType) !== ''"
+              effect="light" :type="getTagType('value_types', scope.row.valueType)"
+              :color="getTagColor('value_types', scope.row.valueType)"
+              :style="getTagStyle('value_types', scope.row.valueType)" disable-transitions>
+              {{ getTagLabel('value_types', scope.row.valueType) }}
+            </el-tag>
+            <span v-else>-</span>
+          </template>
+        </el-table-column>
+        <el-table-column :label="t('MoldManagement.TicketResultDialog.inputValue')" align="center" min-width="150">
+          <template #default="scope">
+            <el-input v-if="String(scope.row.valueType) === '0' || String(scope.row.valueType) === '2'"
+              v-model="scope.row.textInput" :disabled="String(scope.row.inspectionResult) !== '0'" clearable
+              :placeholder="t('common.inputText')" />
+            <span v-else>-</span>
+          </template>
+        </el-table-column>
+        <el-table-column :label="t('MoldManagement.TicketResultDialog.remark')" align="center" prop="remark"
+          min-width="180">
+          <template #default="scope">
+            <el-input v-if="String(scope.row.inspectionResult) === '0'" v-model="scope.row.remark" clearable
+              :placeholder="t('common.inputText')" />
+            <span v-else>{{ scope.row.remark || '-' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column :label="t('MoldManagement.TicketResultDialog.operate')" align="center" min-width="220"
+          fixed="right">
+          <template #default="scope">
+            <el-radio-group v-if="String(scope.row.inspectionResult) === '0'"
+              v-model="decisionMap[String(scope.row.id)]">
+              <el-radio :label="'1'">{{ t('MoldManagement.TicketResultDialog.pass') }}</el-radio>
+              <el-radio :label="'2'">{{ t('MoldManagement.TicketResultDialog.fail') }}</el-radio>
+            </el-radio-group>
+            <span v-else>-</span>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination v-show="total > 0" v-model:current-page="queryParams.pageNo"
+        v-model:page-size="queryParams.pageSize" :background="true" :page-sizes="[10, 20, 30, 50, 100]" :pager-count="7"
+        :total="total" class="mt-15px mb-15px flex justify-end" layout="total, sizes, prev, pager, next, jumper"
+        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+
+      <div class="ticket-result-footer">
+        <el-button v-if="String(jobStatus) === '0'" type="primary" @click="handleSave" :loading="submitLoading"
+          :disabled="hasImageUploading">
+          {{ t('MoldManagement.TicketResultDialog.save') }}
+        </el-button>
+      </div>
+    </ContentWrap>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { TicketManagementApi, TicketResultVO } from '@/api/mold/ticketManagement'
+import { TicketManagementApi, TicketManagementVO, TicketResultVO } from '@/api/mold/ticketManagement'
+import { formatDate } from '@/utils/formatTime'
 import { getStrDictOptions } from '@/utils/dict'
 import { isHexColor } from '@/utils/color'
 import { useDictStoreWithOut } from '@/store/modules/dict'
 
-defineOptions({ name: 'TicketResultDialog' })
+defineOptions({ name: 'TicketResultModule' })
 
-const emit = defineEmits(['success'])
+const emit = defineEmits(['success', 'closed'])
+const props = defineProps<{
+  ticketRow?: TicketManagementVO
+  title?: string
+}>()
 
 const { t } = useI18n()
 const message = useMessage()
@@ -125,16 +173,16 @@ const message = useMessage()
 const dictStore = useDictStoreWithOut()
 const dictReady = ref(false)
 
-const dialogVisible = ref(false)
-const dialogTitle = ref('检验结果')
+const pageTitle = computed(() => props.title || t('MoldManagement.TicketResultDialog.moduleName'))
 const loading = ref(false)
 const submitLoading = ref(false)
 
 const list = ref<TicketResultVO[]>([])
 const total = ref(0)
-const managementId = ref<number | undefined>(undefined)
-const jobStatus = ref<string | number | undefined>(undefined)
-const cancelReason = ref<string | undefined>(undefined)
+const currentRow = computed(() => props.ticketRow)
+const managementId = computed(() => props.ticketRow?.id)
+const jobStatus = computed(() => props.ticketRow?.jobStatus)
+const cancelReason = computed(() => props.ticketRow?.cancelReason)
 const decisionMap = reactive<Record<string, '1' | '2' | undefined>>({})
 const imageMap = reactive<Record<string, string[]>>({})
 const imageUploadingMap = reactive<Record<string, boolean>>({})
@@ -189,34 +237,29 @@ const queryParams = reactive({
   pageSize: 10
 })
 
-const open = async (options: { managementId: number; title?: string; jobStatus?: string | number; cancelReason?: string }) => {
-  dialogVisible.value = true
-  dialogTitle.value = options.title || t('MoldManagement.TicketResultDialog.moduleName')
-  managementId.value = options.managementId
-  jobStatus.value = options.jobStatus
-  cancelReason.value = options.cancelReason
+const resetResultState = () => {
   for (const key of Object.keys(decisionMap)) delete decisionMap[key]
   for (const key of Object.keys(imageMap)) delete imageMap[key]
   for (const key of Object.keys(imageUploadingMap)) delete imageUploadingMap[key]
+  list.value = []
+  total.value = 0
   queryParams.pageNo = 1
-  await getList()
 }
 
-defineExpose({ open })
-
 onMounted(async () => {
   await dictStore.setDictMap()
   dictReady.value = true
 })
 
 const getList = async () => {
-  if (!managementId.value) return
+  const id = managementId.value
+  if (!id) return
   loading.value = true
   try {
     const data = await TicketManagementApi.getTicketResultsPage({
       pageNo: queryParams.pageNo,
       pageSize: queryParams.pageSize,
-      managementId: managementId.value
+      managementId: id
     })
     list.value = data.list
     total.value = data.total
@@ -233,6 +276,15 @@ const getList = async () => {
   }
 }
 
+watch(
+  () => props.ticketRow?.id,
+  async (id) => {
+    resetResultState()
+    if (id) await getList()
+  },
+  { immediate: true }
+)
+
 const handleSizeChange = () => {
   queryParams.pageNo = 1
   getList()
@@ -260,7 +312,6 @@ const handleSave = async () => {
   try {
     await TicketManagementApi.batchUpdateTicketResults(payload)
     message.success(t('MoldManagement.TicketResultDialog.updateSuccess'))
-    dialogVisible.value = false
     emit('success')
   } catch {
     message.error(t('MoldManagement.TicketResultDialog.updateFail'))
@@ -269,6 +320,14 @@ const handleSave = async () => {
   }
 }
 
+const handleClose = () => {
+  emit('closed')
+}
+
+const formatDisplayTime = (value: any) => {
+  return value ? formatDate(value) : '-'
+}
+
 const getRowKey = (row: TicketResultVO) => {
   return String(row.id ?? '')
 }
@@ -311,5 +370,25 @@ const parseImages = (value: any): string[] => {
   height: 64px;
   border: 1px solid var(--el-border-color-lighter);
   border-radius: 6px;
+  margin-right: 6px;
+}
+
+.ticket-result-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.ticket-result-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+}
+
+.ticket-result-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
 }
 </style>

src/views/mold/workOrderInquiry/index.vue

@@ -1,4 +1,5 @@
 <template>
+  <template v-if="!resultVisible">
   <ContentWrap>
     <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" min-label-width="68px">
       <el-form-item :label="t('MoldManagement.MoldWorkOrderInquiry.planNo')" prop="planNo">
@@ -106,7 +107,15 @@
     <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize" @pagination="getList" />
   </ContentWrap>
 
-  <TicketResultDialog ref="resultDialogRef" @success="getList" />
+  </template>
+
+  <TicketResultDialog
+    v-else
+    :ticket-row="selectedResultRow"
+    :title="resultTitle"
+    @success="handleResultSuccess"
+    @closed="handleResultClosed"
+  />
 </template>
 
 <script setup lang="ts">
@@ -137,6 +146,15 @@ const list = ref<TicketManagementVO[]>([])
 const total = ref(0)
 const selectedIds = ref<number[]>([])
 const cancelLoading = ref(false)
+const resultVisible = ref(false)
+const selectedResultRow = ref<TicketManagementVO>()
+const resultTitle = computed(() => {
+  const row = selectedResultRow.value
+  if (!row) return t('MoldManagement.MoldWorkOrderInquiry.inspectResultTitle')
+  return row.planNo
+    ? `${t('MoldManagement.MoldWorkOrderInquiry.inspectResultTitlePrefix')}${row.planNo}`
+    : t('MoldManagement.MoldWorkOrderInquiry.inspectResultTitle')
+})
 
 const queryParams = reactive({
   pageNo: 1,
@@ -205,19 +223,22 @@ const handleBatchCancel = async () => {
   }
 }
 
-const resultDialogRef = ref<InstanceType<typeof TicketResultDialog>>()
-
-const handleRowClick = async (row: TicketManagementVO, column: any) => {
+const handleRowClick = (row: TicketManagementVO, column: any) => {
   if (column?.type === 'selection') return
   if (!row?.id) return
-  await resultDialogRef.value?.open({
-    managementId: row.id,
-    jobStatus: row.jobStatus,
-    cancelReason: row.cancelReason,
-    title: row.planNo
-      ? `${t('MoldManagement.MoldWorkOrderInquiry.inspectResultTitlePrefix')}${row.planNo}`
-      : t('MoldManagement.MoldWorkOrderInquiry.inspectResultTitle')
-  })
+  selectedResultRow.value = row
+  resultVisible.value = true
+}
+
+const handleResultClosed = () => {
+  resultVisible.value = false
+  selectedResultRow.value = undefined
+}
+
+const handleResultSuccess = async () => {
+  resultVisible.value = false
+  selectedResultRow.value = undefined
+  await getList()
 }
 
 onMounted(async () => {