diff --git a/src/components/SubmitDetailPage1.vue b/src/components/SubmitDetailPage1.vue
new file mode 100644
index 0000000..77f10de
--- /dev/null
+++ b/src/components/SubmitDetailPage1.vue
@@ -0,0 +1,86 @@
+<template>
+        <n-form ref="formRef" :model="formDetailData"  label-placement="left" label-width="80">
+            <!-- <n-form-item label="批次号/SN码" path="traceCode" label-width="100" v-show="showTraceCode">
+                    <n-input v-model:value="formDetailData.traceCode" disabled  />
+            </n-form-item> -->
+            <n-form-item label="判定数量" path="qty" label-width="70" >
+                    <n-input-number
+                        style="width: 100%;" 
+                        v-model:value="formDetailData.qty"
+                        placeholder="请输入判定数量" :min="0" 
+                        :disabled="disabled"
+                    />
+            </n-form-item>     
+            <n-form-item label="备注"  label-width="70">
+                    <n-input
+                        v-model:value="formDetailData.remark"
+                        type="textarea"
+                        placeholder="输入备注原因"
+                        :disabled="disabled"
+                    />
+            </n-form-item>   
+
+            </n-form>
+</template>
+<script setup lang="ts">
+    import { onMounted, ref, watch } from 'vue';
+
+    import {qcResultDetailApi,QcResultDetail} from "@/api/qcResultDetail.ts";
+
+
+    
+
+    const emit = defineEmits(['update:formDetailData'])
+
+
+    const props = defineProps({
+        id:Number,
+        formDetailData:Object as () => QcResultDetail,
+        disabled:Boolean,
+        showTraceCode:Boolean
+    })
+
+    let formDetailData = ref({...props.formDetailData})
+    let isInitLoading = true
+   
+
+    watch(
+        ()=> props.formDetailData,
+        (newVal)=>{
+            formDetailData.value = {...newVal}
+        },
+        { deep: true, immediate: true }
+    )
+
+    watch(
+        formDetailData,
+        (newVal)=>{
+            //  if (isInitLoading) {
+            //     isInitLoading = false
+            //     return
+            // }
+            emit('update:formDetailData',{...newVal})
+        },
+        { deep: true, flush: 'post' }
+    )
+
+    async function loadData() {
+        if(!props.id) return
+        qcResultDetailApi.detail(props.id).then((res:any)=>{
+            formDetailData.value = { ...formDetailData.value, ...res }         
+        })
+    }
+
+    // watch(() => props.id, (val: Number)=>{
+    //     loadData();
+    // })
+
+    watch(() => props.id, (val: number)=>{
+        loadData();
+    })
+
+    onMounted(()=>{
+        loadData()
+    })
+
+</script>
\ No newline at end of file
diff --git a/src/components/SumbitDetailCard1.vue b/src/components/SumbitDetailCard1.vue
new file mode 100644
index 0000000..b505fad
--- /dev/null
+++ b/src/components/SumbitDetailCard1.vue
@@ -0,0 +1,222 @@
+<template>
+        <div style="margin: 20px;padding: 20px;border: 4px double #ccc;border-radius: 10px;">
+            <div style="margin-bottom: 20px;padding-bottom: 10px;font-size: 18px;color: #145165;border-bottom:1px solid #ccc;"><span style="padding-right: 20px;color: #5c6163;">批次号/SN码</span>{{ formDetailOKData.traceCode }}</div>
+            <div style="display: flex;justify-content: space-between;flex-wrap: wrap;">
+                <div style="width: 48%;margin-bottom: 20px;padding:15px 15px 0;border: 2px dashed #ccc;border-radius: 8px;">
+                    <div style="margin-bottom: 20px;padding-bottom: 10px;font-size: 16px;color: #838282;border-bottom:1px solid #ccc;">合格</div>
+                    <SubmitDetailPage1
+                        key="ok"
+                        :disabled="false"
+                        :formDetailData="formDetailOKData"
+                        :showTraceCode="showTraceCode"
+                        @update:formDetailData= "handleFormDetailOKData"
+                    />
+                </div>
+                <div style="width: 48%;margin-bottom: 20px;padding:15px 15px 0;border: 2px dashed #ccc;border-radius: 8px;">
+                    <div style="margin-bottom: 20px;padding-bottom: 10px;font-size: 16px;color: #838282;border-bottom:1px solid #ccc;">报废</div>
+                    <SubmitDetailPage1
+                        key="scrap"
+                        :disabled="false"
+                        :formDetailData="formDetailScrapData"
+                        :showTraceCode="showTraceCode"
+                        @update:formDetailData= "handleFormDetailScrapData"
+                    />
+                </div>
+
+                <div style="width: 48%;padding: 15px 15px 0;border: 2px dashed #ccc;border-radius: 8px;">
+                    <div style="margin-bottom: 20px;padding-bottom: 10px;font-size: 16px;color: #838282;border-bottom:1px solid #ccc;">返工</div>
+                    <SubmitDetailPage1
+                        key="rework"
+                        :disabled="false"
+                        :formDetailData="formDetailReworkData"
+                        :showTraceCode="showTraceCode"
+                        @update:formDetailData= "handleFormDetailReworkData"
+                    />
+                </div>
+
+                <div style="width: 48%;padding: 15px 15px 0;border: 2px dashed #ccc;border-radius: 8px;">
+                    <div style="margin-bottom: 20px;padding-bottom: 10px;font-size: 16px;color: #838282;border-bottom:1px solid #ccc;">让步接收</div>
+                    <SubmitDetailPage1
+                        key="conession"
+                        :disabled="false"
+                        :formDetailData="formDetailConcessionData"
+                        :showTraceCode="showTraceCode"
+                        @update:formDetailData= "handleFormDetailConcessionData"
+                    />
+                </div>
+            </div>
+            
+
+            
+            
+        </div>
+
+        
+        <!-- <n-tabs type="card" animated>
+            <n-tab-pane name="合格" tab="合格"  v-if="showOkTab">
+                <SubmitDetailPage1
+                    key="ok"
+                    :disabled="false"
+                    :formDetailData="formDetailOKData"
+                    :showTraceCode="showTraceCode"
+                    @update:formDetailData= "handleFormDetailOKData"
+                />
+            </n-tab-pane>
+            <n-tab-pane name="报废" tab="报废"  v-if="showScrapTab">
+                 <SubmitDetailPage1
+                 key="scrap"
+                :disabled="false"
+                :formDetailData="formDetailScrapData"
+                :showTraceCode="showTraceCode"
+                @update:formDetailData= "handleFormDetailScrapData"
+                />
+            </n-tab-pane>
+            <n-tab-pane name="返工" tab="返工"  v-if="showReworkTab">
+                <SubmitDetailPage1
+                  key="rework"
+                :disabled="false"
+                :formDetailData="formDetailReworkData"
+                :showTraceCode="showTraceCode"
+                @update:formDetailData= "handleFormDetailReworkData"
+                />
+            </n-tab-pane>
+             <n-tab-pane name="让步接收" tab="让步接收"  v-if="showConnessionTab">
+             
+                <SubmitDetailPage1
+                 key="conession"
+                :disabled="false"
+                :formDetailData="formDetailConcessionData"
+                :showTraceCode="showTraceCode"
+                @update:formDetailData= "handleFormDetailConcessionData"
+                />
+            </n-tab-pane>
+        </n-tabs> -->
+</template>
+<script setup lang="ts">
+import { ref, reactive, watch, onMounted } from 'vue'
+import {
+  NButton, NSpace, useMessage
+} from 'naive-ui'
+
+import {useRoute} from "vue-router";
+
+import {qcResultDetailApi, type QcResultDetail} from "@/api/qcResultDetail.ts";
+import { qualityTestingApi} from '@/api/qualityTesting'
+import router from '@/router';
+import SubmitDetailPage1 from '@/components/SubmitDetailPage1.vue';
+
+const props = defineProps({
+    showOkTab:Boolean,
+    showScrapTab:Boolean,
+    showReworkTab:Boolean,
+    showConnessionTab:Boolean,
+    showTraceCode:Boolean,
+    qcId:Number
+
+})
+
+const message = useMessage()
+const route = useRoute()
+
+
+const traceCode = ref(String(route.params.traceCode))
+
+
+
+const emit = defineEmits(['updateSubmitDetail','qcSumitDetail'])
+
+const submitDetail = reactive<any>({})
+
+const defaultFormDetailData:QcResultDetail  = {
+  qcId: undefined,
+  resultType: undefined,
+  qty:  0,
+  traceCode: undefined,
+  defectCode: undefined,
+  handleAction: undefined,
+  actionStatus: undefined,
+  remark: '',
+  title:undefined,
+  images:[],
+  attachments:[]
+}
+
+const formDetailOKData = reactive<QcResultDetail>({ ...defaultFormDetailData,traceCode:traceCode.value, resultType: 1,handleAction:'下一道工序',actionStatus:1 })
+
+const formDetailScrapData = reactive<QcResultDetail>({ ...defaultFormDetailData,traceCode:traceCode.value,resultType: 2,handleAction:'报废次品',actionStatus:1 })
+const formDetailReworkData = reactive<QcResultDetail>({ ...defaultFormDetailData,traceCode:traceCode.value,resultType: 3,handleAction:'返工',actionStatus:1 })
+const formDetailConcessionData = reactive<QcResultDetail>({ ...defaultFormDetailData,traceCode:traceCode.value,resultType: 4,handleAction:'让步接收',actionStatus:1  })
+
+function handleFormDetailOKData(formDetailData:QcResultDetail) {
+    console.log('===OK表单触发更新===', formDetailData)
+    Object.assign(formDetailOKData, formDetailData)
+    submitDetail.okData = formDetailOKData
+}
+
+function handleFormDetailScrapData(formDetailData:QcResultDetail) {
+    console.log('===报废表单触发更新===', formDetailData) 
+    Object.assign(formDetailScrapData, formDetailData)
+     submitDetail.scrapData = formDetailScrapData
+}
+
+function handleFormDetailReworkData(formDetailData:QcResultDetail) {
+  Object.assign(formDetailReworkData, formDetailData)
+  submitDetail.reworkData = formDetailReworkData
+}
+
+function handleFormDetailConcessionData(formDetailData:QcResultDetail){
+  Object.assign(formDetailConcessionData, formDetailData)
+  submitDetail.concessionData = formDetailConcessionData
+}
+
+
+
+watch(
+    submitDetail,
+    (newVal)=>{
+
+        emit('updateSubmitDetail',{...newVal})
+    },{ deep: true }
+)
+
+
+watch(
+    submitDetail,
+    (newVal)=>{
+        emit('qcSumitDetail',{...newVal})
+    }
+)
+
+
+function handleReset() {
+        Object.assign(formDetailOKData, { ...defaultFormDetailData, resultType: 1, handleAction: '下一道工序', actionStatus: 1 })
+        Object.assign(formDetailScrapData, { ...defaultFormDetailData, resultType: 2, handleAction: '报废次品', actionStatus: 1 })
+        Object.assign(formDetailReworkData, { ...defaultFormDetailData, resultType: 3, handleAction: '返工', actionStatus: 1 })
+        Object.assign(formDetailConcessionData, { ...defaultFormDetailData, resultType: 4, handleAction: '让步接收', actionStatus: 1 })
+
+        message.info("表单已重置")
+}
+
+
+async function loadData() {
+  if(props.qcId == -1) return  
+  const resultList = await qcResultDetailApi.selectlistByqcId(props.qcId);
+  Object.assign(formDetailOKData,{...resultList.formDetailOKData})
+  Object.assign(formDetailScrapData,{...resultList.formDetailScrapData})
+  Object.assign(formDetailReworkData, { ...resultList.formDetailReworkData})
+  Object.assign(formDetailConcessionData, { ...resultList.formDetailConsecctionData })
+
+submitDetail.okData = resultList.formDetailOKData ?? { ...defaultFormDetailData, resultType: 1, handleAction: '下一道工序', actionStatus: 1 }
+  submitDetail.scrapData = resultList.formDetailScrapData ?? { ...defaultFormDetailData, resultType: 2, handleAction: '报废次品', actionStatus: 1 }
+  submitDetail.reworkData = resultList.formDetailReworkData ?? { ...defaultFormDetailData, resultType: 3, handleAction: '返工', actionStatus: 1 }
+  submitDetail.concessionData = resultList.formDetailConsecctionData ?? { ...defaultFormDetailData, resultType: 4, handleAction: '让步接收', actionStatus: 1 }
+
+}
+
+onMounted(()=>{
+    loadData()
+})
+
+
+
+</script>
\ No newline at end of file