From 732ef1de336024c9acc9c15aa2973d3a5dbd7b89 Mon Sep 17 00:00:00 2001
From: zhongwenkai <3478244299@qq.com>
Date: Thu, 28 May 2026 18:04:30 +0800
Subject: [PATCH] =?UTF-8?q?style=EF=BC=9A=E4=BF=AE=E6=94=B9=E6=A8=A1?=
 =?UTF-8?q?=E5=85=B7=E7=AE=A1=E7=90=86=E7=9A=84=E7=BB=B4=E4=BF=AE=E5=8D=95?=
 =?UTF-8?q?-=E6=96=B0=E5=A2=9E=E3=80=81=E7=BC=96=E8=BE=91=E3=80=81?=
 =?UTF-8?q?=E7=BB=B4=E4=BF=AE=E5=BC=B9=E6=A1=86=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/mold/moldrepair/MoldRepairForm.vue | 452 ++++++++++---------
 src/views/mold/moldrepair/index.vue          |  21 +-
 2 files changed, 260 insertions(+), 213 deletions(-)

diff --git a/src/views/mold/moldrepair/MoldRepairForm.vue b/src/views/mold/moldrepair/MoldRepairForm.vue
index 13264125..6ae10f93 100644
--- a/src/views/mold/moldrepair/MoldRepairForm.vue
+++ b/src/views/mold/moldrepair/MoldRepairForm.vue
@@ -1,149 +1,154 @@
 <template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible" width="1200px" @closed="handleDialogClosed">
-    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px" v-loading="formLoading">
-      <el-row>
-        <el-col :span="8">
-          <el-form-item :label="t('MoldManagement.MoldRepair.repairCode')" prop="repairCode">
-<template #label>
-    <span>
-      {{ t('MoldManagement.MoldRepair.repairCode') }}
-      <el-tooltip :content="t('MoldManagement.MoldRepair.repairCode')" placement="top">
-        <Icon icon="ep:question-filled" />
-      </el-tooltip>
-    </span>
-  </template>
-  <el-row :gutter="10" style="width: 100%;">
-    <el-col :xs="24" :sm="18" :md="16" :lg="14" :xl="12">
-      <el-input 
-        :disabled="formData.isCode == true || formType === 'update'" 
-        v-model="formData.repairCode" 
-        :placeholder="t('common.code')"
-      />
-    </el-col>
-    <el-col :xs="24" :sm="6" :md="4" :lg="3" :xl="2">
-      <div>
-        <el-switch 
-          v-model="formData.isCode" 
-          :disabled="formType === 'update'"
-        />
-      </div>
-    </el-col>
-  </el-row>
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item :label="t('MoldManagement.MoldRepair.repairName')" prop="repairName">
-            <el-input
-              v-model="formData.repairName"
-              :placeholder="t('MoldManagement.MoldRepair.placeholderRepairName')"
-              :disabled="isRepairMode"
-            />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="8">
-          <el-form-item :label="t('MoldManagement.MoldRepair.mold')" prop="moldId">
-            <el-select
-              v-model="formData.moldId" filterable clearable :loading="moldLoading"
-              :disabled="isRepairMode"
-              :placeholder="t('MoldManagement.MoldRepair.placeholderMold')"
-              class="!w-full"
-            >
-              <el-option v-for="opt in moldOptions" :key="String(opt.value)" :label="opt.label" :value="opt.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item :label="t('MoldManagement.MoldRepair.moldName')" prop="moldName" :required="false">
-            <el-input v-model="formData.moldName" :placeholder="t('MoldManagement.MoldRepair.placeholderMoldNameAuto')" disabled />
-          </el-form-item>
-        </el-col>
-         <el-col :span="8">
-          <el-form-item :label="t('MoldManagement.MoldRepair.moldCode')" prop="moldCode" :required="false">
-            <el-input v-model="formData.moldCode" :placeholder="t('MoldManagement.MoldRepair.placeholderMoldCodeAuto')" disabled />
-          </el-form-item>
-        </el-col>
-        <!-- <el-col :span="8">
-          <el-form-item label="规格型号" prop="machinerySpec" :required="false">
-            <el-input v-model="formData.machinerySpec" placeholder="自动带出" disabled />
-          </el-form-item>
-          <el-form-item label="品牌" prop="machineryBrand" :required="false">
-            <el-input v-model="formData.machineryBrand" placeholder="自动带出" disabled />
-          </el-form-item>
-        </el-col> -->
-      </el-row>
-      <el-row>
-        <el-col :span="8">
-          <el-form-item :label="t('MoldManagement.MoldRepair.repairUser')" prop="acceptedBy">
-            <el-select
-              v-model="formData.acceptedBy" filterable clearable
-              :placeholder="t('MoldManagement.MoldRepair.placeholderAcceptUser')"
-              class="!w-full"
-              :disabled="isRepairMode">
-              <el-option v-for="item in users" :key="String(item.id)" :label="item.nickname" :value="String(item.id)" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item :label="t('MoldManagement.MoldRepair.confirmUser')" prop="confirmBy">
-            <el-select
-              v-model="formData.confirmBy" filterable clearable
-              :placeholder="t('MoldManagement.MoldRepair.placeholderConfirmUser')"
-              class="!w-full"
-              :disabled="isRepairMode">
-              <el-option v-for="item in users" :key="String(item.id)" :label="item.nickname" :value="String(item.id)" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <template v-if="showRepairFields">
-        <el-row>
-          <el-col :span="8">
-            <el-form-item :label="t('MoldManagement.MoldRepair.requireDate')" prop="requireDate">
-              <el-date-picker
-                v-model="formData.requireDate" type="date" value-format="x"
-                :placeholder="t('MoldManagement.MoldRepair.placeholderRequireDate')"
-                class="!w-full" :disabled="repairFieldsDisabled"
-              />
-            </el-form-item>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item :label="t('MoldManagement.MoldRepair.finishDate')" prop="finishDate">
-              <el-date-picker
-                v-model="formData.finishDate" type="date" value-format="x"
-                :placeholder="t('MoldManagement.MoldRepair.placeholderFinishDate')"
-                class="!w-full" :disabled="repairFieldsDisabled"
-              />
-            </el-form-item>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item :label="t('MoldManagement.MoldRepair.confirmDate')" prop="confirmDate">
-              <el-date-picker
-                v-model="formData.confirmDate" type="date" value-format="x"
-                :placeholder="t('MoldManagement.MoldRepair.placeholderConfirmDate')"
-                class="!w-full" :disabled="repairFieldsDisabled"
-              />
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-form-item :label="t('MoldManagement.MoldRepair.repairResult')" prop="repairResult">
-          <Editor v-model="formData.repairResult" height="150px" :readonly="repairFieldsDisabled" />
-        </el-form-item>
-      </template>
-    </el-form>
-    <el-tabs v-model="subTabsName">
-      <el-tab-pane :label="t('MoldManagement.MoldRepair.tabMoldRepairLine')" name="moldRepairLine">
-        <MoldRepairLineForm ref="moldRepairLineFormRef" :repair-id="formData.id" :line-mode="lineMode" />
-      </el-tab-pane>
-    </el-tabs>
-    <template #footer>
+  <div class="dv-repair-panel">
+    <div class="dv-repair-panel__header">
+      <div class="dv-repair-panel__title">{{ dialogTitle }}</div>
+      <el-button text @click="closeForm">
+        <Icon icon="ep:close" />
+      </el-button>
+    </div>
+    <div class="dv-repair-dialog" v-loading="formLoading">
+      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px">
+        <section class="dv-repair-section">
+          <div class="dv-repair-section__title">基本信息</div>
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <el-form-item :label="t('MoldManagement.MoldRepair.repairCode')" prop="repairCode">
+                <template #label>
+                  <span>
+                    {{ t('MoldManagement.MoldRepair.repairCode') }}
+                    <el-tooltip :content="t('MoldManagement.MoldRepair.repairCode')" placement="top">
+                      <Icon icon="ep:question-filled" />
+                    </el-tooltip>
+                  </span>
+                </template>
+                <div class="dv-repair-code-row">
+                  <el-input
+                    :disabled="formData.isCode == true || formType === 'update'"
+                    v-model="formData.repairCode"
+                    :placeholder="t('common.code')"
+                  />
+                  <el-switch
+                    v-model="formData.isCode"
+                    :disabled="formType === 'update'"
+                  />
+                </div>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item :label="t('MoldManagement.MoldRepair.repairName')" prop="repairName">
+                <el-input
+                  v-model="formData.repairName"
+                  :placeholder="t('MoldManagement.MoldRepair.placeholderRepairName')"
+                  :disabled="isRepairMode"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item :label="t('MoldManagement.MoldRepair.mold')" prop="moldId">
+                <el-select
+                  v-model="formData.moldId" filterable clearable :loading="moldLoading"
+                  :disabled="isRepairMode"
+                  :placeholder="t('MoldManagement.MoldRepair.placeholderMold')"
+                  class="!w-full"
+                >
+                  <el-option v-for="opt in moldOptions" :key="String(opt.value)" :label="opt.label" :value="opt.value" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <el-form-item :label="t('MoldManagement.MoldRepair.moldName')" prop="moldName" :required="false">
+                <el-input v-model="formData.moldName" :placeholder="t('MoldManagement.MoldRepair.placeholderMoldNameAuto')" disabled />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item :label="t('MoldManagement.MoldRepair.moldCode')" prop="moldCode" :required="false">
+                <el-input v-model="formData.moldCode" :placeholder="t('MoldManagement.MoldRepair.placeholderMoldCodeAuto')" disabled />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <el-form-item :label="t('MoldManagement.MoldRepair.repairUser')" prop="acceptedBy">
+                <el-select
+                  v-model="formData.acceptedBy" filterable clearable
+                  :placeholder="t('MoldManagement.MoldRepair.placeholderAcceptUser')"
+                  class="!w-full"
+                  :disabled="isRepairMode">
+                  <el-option v-for="item in users" :key="String(item.id)" :label="item.nickname" :value="String(item.id)" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item :label="t('MoldManagement.MoldRepair.confirmUser')" prop="confirmBy">
+                <el-select
+                  v-model="formData.confirmBy" filterable clearable
+                  :placeholder="t('MoldManagement.MoldRepair.placeholderConfirmUser')"
+                  class="!w-full"
+                  :disabled="isRepairMode">
+                  <el-option v-for="item in users" :key="String(item.id)" :label="item.nickname" :value="String(item.id)" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </section>
+
+        <section v-if="showRepairFields" class="dv-repair-section">
+          <div class="dv-repair-section__title">处理结果</div>
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <el-form-item :label="t('MoldManagement.MoldRepair.requireDate')" prop="requireDate">
+                <el-date-picker
+                  v-model="formData.requireDate" type="date" value-format="x"
+                  :placeholder="t('MoldManagement.MoldRepair.placeholderRequireDate')"
+                  class="!w-full" :disabled="repairFieldsDisabled"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item :label="t('MoldManagement.MoldRepair.finishDate')" prop="finishDate">
+                <el-date-picker
+                  v-model="formData.finishDate" type="date" value-format="x"
+                  :placeholder="t('MoldManagement.MoldRepair.placeholderFinishDate')"
+                  class="!w-full" :disabled="repairFieldsDisabled"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item :label="t('MoldManagement.MoldRepair.confirmDate')" prop="confirmDate">
+                <el-date-picker
+                  v-model="formData.confirmDate" type="date" value-format="x"
+                  :placeholder="t('MoldManagement.MoldRepair.placeholderConfirmDate')"
+                  class="!w-full" :disabled="repairFieldsDisabled"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="24">
+              <el-form-item :label="t('MoldManagement.MoldRepair.repairResult')" prop="repairResult">
+                <Editor v-model="formData.repairResult" height="150px" :readonly="repairFieldsDisabled" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </section>
+      </el-form>
+
+      <el-tabs v-model="subTabsName" style="margin-top: 16px;">
+        <el-tab-pane :label="t('MoldManagement.MoldRepair.tabMoldRepairLine')" name="moldRepairLine">
+          <MoldRepairLineForm ref="moldRepairLineFormRef" :repair-id="formData.id" :line-mode="lineMode" />
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+
+    <div class="dv-repair-footer">
+      <el-button @click="closeForm">{{ t('common.cancel') }}</el-button>
       <el-button @click="submitForm" type="primary" :disabled="formLoading">{{ t('common.ok') }}</el-button>
-      <el-button @click="dialogVisible = false">{{ t('common.cancel') }}</el-button>
-    </template>
-  </Dialog>
+    </div>
+  </div>
 </template>
+
 <script setup lang="ts">
 import { MoldRepairApi, MoldRepairVO } from '@/api/mold/moldrepair'
 import { MoldRepairItemsApi } from '@/api/mold/moldRepairItems'
@@ -156,7 +161,6 @@ defineOptions({ name: 'MoldRepairForm' })
 const { t } = useI18n()
 const message = useMessage()
 
-const dialogVisible = ref(false)
 const dialogTitle = ref('')
 const formLoading = ref(false)
 const formType = ref('')
@@ -164,6 +168,7 @@ const isRepairMode = computed(() => formType.value === 'update' || formType.valu
 const showRepairFields = computed(() => formType.value === 'update' || formType.value === 'repair')
 const repairFieldsDisabled = computed(() => formType.value !== 'repair')
 const isHydrating = ref(false)
+const openRequestId = ref(0)
 const emit = defineEmits(['success', 'closed'])
 const formData = ref({
   id: undefined,
@@ -397,29 +402,21 @@ const prefillLinesByMold = async (moldId: number | undefined) => {
   setLineRows(list.map(toMoldRepairLineRow))
 }
 
-let openRequestId = 0
-
 const open = async (type: string, id?: number) => {
-  const currentOpenId = ++openRequestId
-  dialogVisible.value = true
-  dialogTitle.value =
-    type === 'repair'
-      ? t('MoldManagement.MoldRepair.dialogTitleRepair')
-      : type === 'create'
-        ? t('MoldManagement.MoldRepair.dialogTitleCreate')
-        : t('MoldManagement.MoldRepair.dialogTitleUpdate')
+  const currentOpenId = ++openRequestId.value
+  dialogTitle.value = type === 'repair' ? '维修处理结果' : t('action.' + type)
   formType.value = type
   resetForm()
   await ensureUsersLoaded()
   await ensureMoldOptionsLoaded()
-  if (currentOpenId !== openRequestId) return
+  if (currentOpenId !== openRequestId.value) return
   if (id) {
     formLoading.value = true
     try {
       isHydrating.value = true
       formData.value = await MoldRepairApi.getMoldRepair(id)
 
-      if (currentOpenId !== openRequestId) return
+      if (currentOpenId !== openRequestId.value) return
 
       ;(formData.value as any).requireDate = (formData.value as any).requireDate ?? undefined
       ;(formData.value as any).finishDate = (formData.value as any).finishDate ?? undefined
@@ -456,66 +453,25 @@ const open = async (type: string, id?: number) => {
 }
 defineExpose({ open })
 
-const handleDialogClosed = () => {
-  openRequestId++
+const closeForm = () => {
+  openRequestId.value++
   emit('closed')
 }
 
-onBeforeUnmount(() => {
-  openRequestId++
-})
-
 const submitForm = async () => {
   await formRef.value.validate()
-  try {
-    await moldRepairLineFormRef.value.validate()
-  } catch {
-    subTabsName.value = 'moldRepairLine'
-    return
-  }
   formLoading.value = true
   try {
-    const data = { ...(formData.value as any) } as MoldRepairVO & { moldId?: number; componentId?: number }
-      ;(data as any).acceptedBy = normalizeUserId((data as any).acceptedBy)
-      ;(data as any).confirmBy = normalizeUserId((data as any).confirmBy)
-      ;(data as any).moldCode = (data as any).moldCode ?? (data as any).machineryCode
-      ;(data as any).moldName = (data as any).moldName ?? (data as any).machineryName
-
-    delete (data as any).machineryId
-    delete (data as any).machineryCode
-    delete (data as any).machineryName
-    if (formType.value === 'repair') {
-      ;(data as any).status = 1
-    }
-    ;(data as any).moldId = formData.value.moldId
-    const lineList = moldRepairLineFormRef.value.getData() || []
-
-    if (formType.value === 'repair') {
-      const requireDate = (data as any).requireDate
-      const finishDate = (data as any).finishDate
-      const confirmDate = (data as any).confirmDate
-      const repairResult = (data as any).repairResult
-      const updateReqVOList = lineList
-      await MoldRepairApi.updateMoldRepairStatus({
-        id: (data as any).id,
-        requireDate,
-        finishDate,
-        confirmDate,
-        repairResult,
-        updateReqVOList,
-      })
-      message.success(t('common.updateSuccess'))
+    const data = { ...formData.value }
+    if (formType.value === 'create') {
+      await MoldRepairApi.createMoldRepair(data)
+      message.success(t('common.createSuccess'))
     } else {
-      ;(data as any).moldRepairLines = lineList
-      if (formType.value === 'create') {
-        await MoldRepairApi.createMoldRepair(data)
-        message.success(t('common.createSuccess'))
-      } else {
-        await MoldRepairApi.updateMoldRepair(data)
-        message.success(t('common.updateSuccess'))
-      }
+      await MoldRepairApi.updateMoldRepair(data)
+      message.success(t('common.updateSuccess'))
     }
-    dialogVisible.value = false
+    await moldRepairLineFormRef.value?.submit()
+    closeForm()
     emit('success')
   } finally {
     formLoading.value = false
@@ -546,3 +502,85 @@ const resetForm = () => {
   formRef.value?.resetFields()
 }
 </script>
+
+<style lang="scss" scoped>
+.dv-repair-panel {
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: var(--el-box-shadow-light);
+}
+
+.dv-repair-panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.dv-repair-panel__title {
+  color: #1f2937;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.dv-repair-dialog {
+  max-height: calc(100vh - 220px);
+  padding: 20px 20px 0;
+  padding-right: 16px;
+  overflow-y: auto;
+}
+
+.dv-repair-section {
+  margin-bottom: 20px;
+  padding: 16px;
+  background: #f8f9fa;
+  border-radius: 8px;
+}
+
+.dv-repair-section__title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 16px;
+  padding-left: 8px;
+  border-left: 3px solid #409eff;
+}
+
+.dv-repair-code-row {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.dv-repair-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  width: 100%;
+  padding: 16px 20px 20px;
+  border-top: 1px solid #ebeef5;
+}
+
+@media (max-width: 1200px) {
+  .dv-repair-section .el-col {
+    flex: 0 0 100%;
+  }
+}
+
+@media (max-width: 768px) {
+  .dv-repair-panel__header {
+    padding: 14px 16px;
+  }
+
+  .dv-repair-dialog {
+    max-height: none;
+    padding: 16px 16px 0;
+    overflow-y: visible;
+  }
+
+  .dv-repair-footer {
+    padding: 16px;
+  }
+}
+</style>
diff --git a/src/views/mold/moldrepair/index.vue b/src/views/mold/moldrepair/index.vue
index 582b9255..7f8e533b 100644
--- a/src/views/mold/moldrepair/index.vue
+++ b/src/views/mold/moldrepair/index.vue
@@ -1,5 +1,6 @@
 <template>
-  <ContentWrap>
+  <ContentWrap v-if="!formVisible">
+    <!-- 搜索工作栏 -->
     <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" min-label-width="68px">
       <el-form-item :label="t('MoldManagement.MoldRepair.repairCode')" prop="repairCode">
         <el-input
@@ -106,7 +107,8 @@
     </el-form>
   </ContentWrap>
 
-  <ContentWrap>
+  <ContentWrap v-if="!formVisible">
+    <!-- 列表 -->
     <el-table
       ref="tableRef" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" row-key="id"
       @selection-change="handleSelectionChange">
@@ -179,17 +181,19 @@
         </template>
       </el-table-column>
     </el-table>
+    <!-- 分页 -->
     <Pagination
       :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
       @pagination="getList" />
   </ContentWrap>
 
-  <MoldRepairForm v-if="formVisible" ref="formRef" @success="getList" @closed="formVisible = false" />
+  <div v-if="formVisible">
+    <MoldRepairForm ref="formRef" @success="handleFormSuccess" @closed="formVisible = false" />
+  </div>
 </template>
 
 <script setup lang="ts">
-import { DICT_TYPE } from '@/utils/dict'
-import { dateFormatter, dateFormatter2 } from '@/utils/formatTime'
+import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import { MoldRepairApi, MoldRepairVO } from '@/api/mold/moldrepair'
 import MoldRepairForm from './MoldRepairForm.vue'
@@ -302,8 +306,8 @@ const resetQuery = () => {
   handleQuery()
 }
 
-const formRef = ref()
 const formVisible = ref(false)
+const formRef = ref()
 
 const openForm = async (type: string, id?: number) => {
   formVisible.value = true
@@ -311,6 +315,11 @@ const openForm = async (type: string, id?: number) => {
   formRef.value?.open(type, id)
 }
 
+const handleFormSuccess = () => {
+  formVisible.value = false
+  getList()
+}
+
 const buildIdsParam = (ids: number | number[]) => {
   return Array.isArray(ids) ? ids.join(',') : String(ids)
 }