fix: 质检样式调整

src/views/order/factoryOrderNew/component/QualityFailDialog.vue

@@ -7,46 +7,48 @@
     :destroy-on-close="true"
     :destroy-on-close="true"
     @close="handleClose"
     @close="handleClose"
   >
   >
-    <ElForm ref="formRef" :model="form" :rules="rules">
-      <div v-if="qualityPassed">
-        <div style="margin: 5px 0 20px 0">确定质检通过吗？</div>
-      </div>
-      <div v-else style="margin: 0 0 10px 0">
-        <div>确定质检不通过吗？</div>
-      </div>
-      <ElFormItem
-        v-if="!qualityPassed"
-        label="原因"
-        prop="qualify_problem_type"
-      >
-        <ElSelect
-          v-model="form.qualify_problem_type"
-          placeholder="请选择不通过原因"
-          style="width: 100%"
-          clearable
-          filterable
-          @change="handleReasonChange"
+    <div class="confirm-body">
+      <ElIcon class="confirm-tip__icon" :size="24">
+        <WarningFilled />
+      </ElIcon>
+      <ElForm ref="formRef" :model="form" :rules="rules" class="confirm-form">
+        <div class="confirm-tip">
+          {{ qualityPassed ? '确定质检通过吗？' : '确定质检不通过吗？' }}
+        </div>
+        <ElFormItem
+          v-if="!qualityPassed"
+          label="原因"
+          prop="qualify_problem_type"
+        >
+          <ElSelect
+            v-model="form.qualify_problem_type"
+            placeholder="请选择不通过原因"
+            style="width: 100%"
+            clearable
+            filterable
+            @change="handleReasonChange"
+          >
+            <ElOption
+              v-for="item in reasonOptions"
+              :key="item.key"
+              :label="item.value"
+              :value="item.key"
+            />
+          </ElSelect>
+        </ElFormItem>
+        <ElFormItem
+          v-if="!qualityPassed && form.qualify_problem_type === 5"
+          label="具体原因"
+          prop="qualityIssues"
         >
         >
-          <ElOption
-            v-for="item in reasonOptions"
-            :key="item.key"
-            :label="item.value"
-            :value="item.key"
+          <ElInput
+            v-model="form.qualityIssues"
+            placeholder="请输入不通过原因"
+            clearable
           />
           />
-        </ElSelect>
-      </ElFormItem>
-      <ElFormItem
-        v-if="!qualityPassed && form.qualify_problem_type === 5"
-        label="具体原因"
-        prop="qualityIssues"
-      >
-        <ElInput
-          v-model="form.qualityIssues"
-          placeholder="请输入不通过原因"
-          clearable
-        />
-      </ElFormItem>
-    </ElForm>
+        </ElFormItem>
+      </ElForm>
+    </div>
     <template #footer>
     <template #footer>
       <div class="dialog-footer" style="text-align: center">
       <div class="dialog-footer" style="text-align: center">
         <ElButton @click="visible = false">取消</ElButton>
         <ElButton @click="visible = false">取消</ElButton>
@@ -62,6 +64,7 @@
 import { computed, reactive, ref } from 'vue'
 import { computed, reactive, ref } from 'vue'
 import { ElMessage } from 'element-plus'
 import { ElMessage } from 'element-plus'
 import type { FormInstance, FormRules } from 'element-plus'
 import type { FormInstance, FormRules } from 'element-plus'
+import { WarningFilled } from '@element-plus/icons-vue'
 import {
 import {
   getQualityTypeApi,
   getQualityTypeApi,
   qualityPodOrderOperationApi,
   qualityPodOrderOperationApi,
@@ -176,3 +179,20 @@ const handleSubmit = async () => {
 
 
 defineExpose({ open })
 defineExpose({ open })
 </script>
 </script>
+
+<style lang="scss" scoped>
+.confirm-form {
+  flex: 1;
+  min-width: 0;
+}
+
+.confirm-tip {
+  margin-bottom: 12px;
+  line-height: 24px;
+}
+
+.confirm-tip__icon {
+  flex-shrink: 0;
+  color: var(--el-color-warning);
+}
+</style>