处理打包问题

src/views/spares/detail.vue

@@ -9,69 +9,149 @@
       <div class="content_left">
         <div class="content_left_info">
           <Descriptions title="客户信息" :column="3" v-if="detailData.customer">
-            <DescriptionsItem label="客户名称"> {{ detailData.customer.companyName }}</DescriptionsItem>
-            <DescriptionsItem label="联系人"> {{ detailData.customer.customerName }} </DescriptionsItem>
+            <DescriptionsItem label="客户名称">
+              {{ detailData.customer.companyName }}</DescriptionsItem
+            >
+            <DescriptionsItem label="联系人">
+              {{ detailData.customer.customerName }}
+            </DescriptionsItem>
             <DescriptionsItem label="联系电话"> {{ detailData.customer.phone }} </DescriptionsItem>
           </Descriptions>
           <Descriptions title="产品及故障信息" :column="3" v-if="detailData.orderReceivingVo">
-            <DescriptionsItem label="产品名称" v-if="detailData.repairerVo"> {{ t(`routes.device.type.${detailData.repairerVo.cameraType || 1}`)  }} </DescriptionsItem>
-            <DescriptionsItem label="产品SN码" v-if="detailData.repairerVo"> {{ detailData.repairerVo.cameraSnCode }} </DescriptionsItem>
-            <DescriptionsItem label="保修届满日期"> {{ detailData.orderReceivingVo.warrantyExpirationDate }} </DescriptionsItem>
-            <DescriptionsItem label="报修日期" > {{ detailData.repairerVo?.createTime }} </DescriptionsItem>
-            <DescriptionsItem label="送修方式" v-if="detailData.customerAddress"> {{ detailData.customerAddress.sendType?'前台送修':'快递寄送' }} </DescriptionsItem>
-            <DescriptionsItem label="保修类型"> {{ detailData.customerAddress.warrantyType == 0?'保修期内':detailData.customerAddress.warrantyType == 1?'保修期外':'非保修项目' }} </DescriptionsItem>
-            <DescriptionsItem label="维修单号"> {{ detailData.orderReceivingVo.repairId }} </DescriptionsItem>
-            <DescriptionsItem label="上次维修单号" :span="2"> {{ detailData.orderReceivingVo.repairerId }} </DescriptionsItem>
+            <DescriptionsItem label="产品名称" v-if="detailData.repairerVo">
+              {{ t(`routes.device.type.${detailData.repairerVo.cameraType || 1}`) }}
+            </DescriptionsItem>
+            <DescriptionsItem label="产品SN码" v-if="detailData.repairerVo">
+              {{ detailData.repairerVo.cameraSnCode }}
+            </DescriptionsItem>
+            <DescriptionsItem label="保修届满日期">
+              {{ detailData.orderReceivingVo.warrantyExpirationDate }}
+            </DescriptionsItem>
+            <DescriptionsItem label="报修日期">
+              {{ detailData.repairerVo?.createTime }}
+            </DescriptionsItem>
+            <DescriptionsItem label="送修方式" v-if="detailData.customerAddress">
+              {{ detailData.customerAddress.sendType ? '前台送修' : '快递寄送' }}
+            </DescriptionsItem>
+            <DescriptionsItem label="保修类型">
+              {{
+                detailData.customerAddress.warrantyType == 0
+                  ? '保修期内'
+                  : detailData.customerAddress.warrantyType == 1
+                  ? '保修期外'
+                  : '非保修项目'
+              }}
+            </DescriptionsItem>
+            <DescriptionsItem label="维修单号">
+              {{ detailData.orderReceivingVo.repairId }}
+            </DescriptionsItem>
+            <DescriptionsItem label="上次维修单号" :span="2">
+              {{ detailData.orderReceivingVo.repairerId }}
+            </DescriptionsItem>
             <DescriptionsItem label="故障描述" :span="3">
               <div>
                 <p>{{ detailData.repairerVo.faultMsg }}</p>
-                <ImagePreviewGroup>
-                  <Image :width="80" v-for="item in detailData.repairerVo.faultImg" :key="item" :src="item"></Image>
-                </ImagePreviewGroup>
-              </div> 
+                <PreviewGroup>
+                  <Image
+                    :width="80"
+                    v-for="item in detailData.repairerVo.faultImg"
+                    :key="item"
+                    :src="item"
+                  ></Image>
+                </PreviewGroup>
+              </div>
             </DescriptionsItem>
             <DescriptionsItem label="机器外观">
               <div>
                 <p>{{ detailData.repairRegisterVo?.orderFaultMsg }}</p>
-                <ImagePreviewGroup>
-                  <Image :width="80" v-for="item in detailData.orderReceivingVo?.orderFaultImg" :key="item" :src="item"></Image>
-                </ImagePreviewGroup>
-              </div> 
+                <PreviewGroup>
+                  <Image
+                    :width="80"
+                    v-for="item in detailData.orderReceivingVo?.orderFaultImg"
+                    :key="item"
+                    :src="item"
+                  ></Image>
+                </PreviewGroup>
+              </div>
+            </DescriptionsItem>
+            <DescriptionsItem label="售后工程师">
+              {{ detailData.orderReceivingVo?.sysUserName }}
+            </DescriptionsItem>
+            <DescriptionsItem label="接单日期">
+              {{ detailData.orderReceivingVo?.createTime }}
             </DescriptionsItem>
-            <DescriptionsItem label="售后工程师"> {{ detailData.orderReceivingVo?.sysUserName }} </DescriptionsItem>
-            <DescriptionsItem label="接单日期"> {{ detailData.orderReceivingVo?.createTime }} </DescriptionsItem>
             <DescriptionsItem label="检测结果" v-if="detailData.repairRegisterVo">
               <div>
-                <p>{{detailData.repairRegisterVo.checkResult}}</p>
-                <ImagePreviewGroup>
-                  <Image :width="80" v-for="item in detailData.repairRegisterVo.checkImg" :key="item" :src="item"></Image>
-                </ImagePreviewGroup>
-              </div> 
+                <p>{{ detailData.repairRegisterVo.checkResult }}</p>
+                <PreviewGroup>
+                  <Image
+                    :width="80"
+                    v-for="item in detailData.repairRegisterVo.checkImg"
+                    :key="item"
+                    :src="item"
+                  ></Image>
+                </PreviewGroup>
+              </div>
+            </DescriptionsItem>
+            <DescriptionsItem label="检测日期">
+              {{ detailData.repairRegisterVo?.createTime }}
+            </DescriptionsItem>
+            <DescriptionsItem label="所需备件">
+              {{ detailData.orderReceivingVo?.shipMobile }}
             </DescriptionsItem>
-            <DescriptionsItem label="检测日期"> {{ detailData.repairRegisterVo?.createTime }} </DescriptionsItem>
-            <DescriptionsItem label="所需备件"> {{ detailData.orderReceivingVo?.shipMobile }} </DescriptionsItem>
           </Descriptions>
           <Descriptions title="维修清单" :column="3" layout="vertical">
             <DescriptionsItem label="备件信息" :span="3">
               <BasicTable @register="registerTable"></BasicTable>
             </DescriptionsItem>
           </Descriptions>
-          <Descriptions  :column="3">
-            <DescriptionsItem label="维修工程师"> {{ detailData.repairRegisterVo?.sysUserName }}</DescriptionsItem>
-            <DescriptionsItem label="维修完成日期"> {{ detailData.repairRegisterVo?.overTime }} </DescriptionsItem>
-            <DescriptionsItem label="维修记录"> {{ detailData.repairRegisterVo?.remark }} </DescriptionsItem>
-            <DescriptionsItem label="测试工程师"> {{ detailData.RepairTestVo?.sysUserName }} </DescriptionsItem>
-            <DescriptionsItem label="测试通过时间" :span="2"> {{ detailData.repairRegisterVo?.passTime }} </DescriptionsItem>
-            <DescriptionsItem label="支付方式" :span="3"> 
+          <Descriptions :column="3">
+            <DescriptionsItem label="维修工程师">
+              {{ detailData.repairRegisterVo?.sysUserName }}</DescriptionsItem
+            >
+            <DescriptionsItem label="维修完成日期">
+              {{ detailData.repairRegisterVo?.overTime }}
+            </DescriptionsItem>
+            <DescriptionsItem label="维修记录">
+              {{ detailData.repairRegisterVo?.remark }}
+            </DescriptionsItem>
+            <DescriptionsItem label="测试工程师">
+              {{ detailData.RepairTestVo?.sysUserName }}
+            </DescriptionsItem>
+            <DescriptionsItem label="测试通过时间" :span="2">
+              {{ detailData.repairRegisterVo?.passTime }}
+            </DescriptionsItem>
+            <DescriptionsItem label="支付方式" :span="3">
               <div v-if="detailData.repairPay">
-                <p>{{ detailData.repairPay.payType==1?'微信':detailData.repairPay.payType==2?'支付宝':'银行' }}</p>
-                <ImagePreviewGroup>
-                  <Image :width="80" v-for="item in [detailData.repairPay.payImg]" :key="item" :src="item"></Image>
-                </ImagePreviewGroup>
-              </div> 
+                <p>{{
+                  detailData.repairPay.payType == 1
+                    ? '微信'
+                    : detailData.repairPay.payType == 2
+                    ? '支付宝'
+                    : '银行'
+                }}</p>
+                <PreviewGroup>
+                  <Image
+                    :width="80"
+                    v-for="item in [detailData.repairPay.payImg]"
+                    :key="item"
+                    :src="item"
+                  ></Image>
+                </PreviewGroup>
+              </div>
+            </DescriptionsItem>
+            <DescriptionsItem label="取回方式" v-if="detailData.customerAddress">
+              {{
+                detailData.customerAddress.getType == 0
+                  ? '前台取回'
+                  : `快递寄回 ${detailData.customerAddress.getTrackingNum}`
+              }}</DescriptionsItem
+            >
+            <DescriptionsItem label="收件信息" :span="2" v-if="detailData.customerAddress">
+              {{ detailData.customerAddress.getAddrName }}
+              {{ detailData.customerAddress.getAddrName
+              }}{{ detailData.customerAddress.getAddress }}
             </DescriptionsItem>
-            <DescriptionsItem label="取回方式" v-if="detailData.customerAddress"> {{detailData.customerAddress.getType==0?'前台取回':`快递寄回 ${detailData.customerAddress.getTrackingNum}`}}</DescriptionsItem>
-            <DescriptionsItem label="收件信息" :span="2" v-if="detailData.customerAddress"> {{detailData.customerAddress.getAddrName}} {{ detailData.customerAddress.getAddrName }}{{ detailData.customerAddress.getAddress }} </DescriptionsItem>
           </Descriptions>
           <!-- <Descriptions title="单据下载" :column="3">
             <DescriptionsItem label="维修记录" :span="3"> 
@@ -89,32 +169,64 @@
             </DescriptionsItem>
           </Descriptions> -->
           <Descriptions title="客户评价" :column="3" v-if="detailData.RepairComment">
-            <DescriptionsItem label="评价内容" > {{ detailData.RepairComment.comment }} </DescriptionsItem>
-            <DescriptionsItem label="评分"> {{ detailData.RepairComment.starRank }} </DescriptionsItem>
+            <DescriptionsItem label="评价内容">
+              {{ detailData.RepairComment.comment }}
+            </DescriptionsItem>
+            <DescriptionsItem label="评分">
+              {{ detailData.RepairComment.starRank }}
+            </DescriptionsItem>
           </Descriptions>
           <Descriptions title="备注" :column="3">
-            <DescriptionsItem label="备注内容"> {{ detailData.repairerVo?.remark }} </DescriptionsItem>
+            <DescriptionsItem label="备注内容">
+              {{ detailData.repairerVo?.remark }}
+            </DescriptionsItem>
           </Descriptions>
         </div>
       </div>
       <div class="content_right">
         <Timeline>
-          <TimelineItem v-for="(item,indexs) in stepList" :color="indexs == 0 ?'red':'green'" :key="indexs">
+          <TimelineItem
+            v-for="(item, indexs) in stepList"
+            :color="indexs == 0 ? 'red' : 'green'"
+            :key="indexs"
+          >
             <div class="timeItem">
               <div class="name">
-                <span>{{item.remark}}</span>
-                <a-button style="margin-left:50px" @click="handleSubmit"  v-for="butItem in butList" :key="butItem" v-if="indexs == 0"> {{butItem}} </a-button>
+                <span>{{ item.remark }}</span>
+                <a-button
+                  style="margin-left: 50px"
+                  @click="handleSubmit"
+                  v-for="butItem in butList"
+                  :key="butItem"
+                  v-if="indexs == 0"
+                >
+                  {{ butItem }}
+                </a-button>
               </div>
-              <div class="status">{{item.sysUserName}}完成{{item.remark}} <span>{{item.createTime}}</span></div>
-              <div class="itemText" v-if="item.customerAddress">{{ item.customerAddress.getType==0?'前台取回':`快递寄回  ${item.customerAddress.getTrackingNum}`}}</div>
-              <div class="itemText" v-if="item.customerAddress">{{ item.customerAddress.sendType==0?'前台送修':`快递寄送  ${item.customerAddress.sendTrackingNum}`}}</div>
-              <div class="itemText" v-if="item.repairRegisterVo">检测结论： {{ item.repairRegisterVo.checkResult}}</div>
+              <div class="status"
+                >{{ item.sysUserName }}完成{{ item.remark }} <span>{{ item.createTime }}</span></div
+              >
+              <div class="itemText" v-if="item.customerAddress">{{
+                item.customerAddress.getType == 0
+                  ? '前台取回'
+                  : `快递寄回  ${item.customerAddress.getTrackingNum}`
+              }}</div>
+              <div class="itemText" v-if="item.customerAddress">{{
+                item.customerAddress.sendType == 0
+                  ? '前台送修'
+                  : `快递寄送  ${item.customerAddress.sendTrackingNum}`
+              }}</div>
+              <div class="itemText" v-if="item.repairRegisterVo"
+                >检测结论： {{ item.repairRegisterVo.checkResult }}</div
+              >
               <div class="itemText">所需备件： 镜头x2、电池x1</div>
-              <div class="itemText" v-if="item.orderReceivingVo">机器外观： {{ item.orderReceivingVo.orderFaultMsg}}</div>
+              <div class="itemText" v-if="item.orderReceivingVo"
+                >机器外观： {{ item.orderReceivingVo.orderFaultMsg }}</div
+              >
               <div class="iamgeList">
-                <ImagePreviewGroup>
+                <PreviewGroup>
                   <Image :width="80" v-for="item in [logo]" :key="item" :src="item"></Image>
-                </ImagePreviewGroup>
+                </PreviewGroup>
               </div>
             </div>
           </TimelineItem>
@@ -123,7 +235,7 @@
     </div>
     <div class="bottom_but">
       <a-button type="primary" v-for="item in butList" :key="item" @click="goBack">
-        {{item}}
+        {{ item }}
       </a-button>
       <a-button type="primary" @click="goBack">
         {{ t('common.back') }}
@@ -131,108 +243,140 @@
     </div>
   </div>
 </template>
-<script lang="ts" setup>
-import { ref, onMounted, reactive } from 'vue';
+<script lang="ts">
+import { defineComponent, ref, onMounted, reactive } from 'vue';
 import { useI18n } from '/@/hooks/web/useI18n';
 import { useRouter } from 'vue-router';
 import { useMessage } from '/@/hooks/web/useMessage';
-import { detail ,process } from '/@/api/spares';
+import { detail, process } from '/@/api/spares';
 import { detailResult } from '/@/api/spares/model';
 import logo from '/@/assets/images/grey-logo.png';
-import { BasicTable, useTable, BasicColumn, TableImg, } from '/@/components/Table';
-import { Timeline, TimelineItem, Descriptions, DescriptionsItem, Image, ImagePreviewGroup } from 'ant-design-vue';
+import { BasicTable, useTable, BasicColumn, TableImg } from '/@/components/Table';
+import {
+  Timeline,
+  // TimelineItem,
+  Descriptions,
+  // DescriptionsItem,
+  Image,
+  // ImagePreviewGroup,
+} from 'ant-design-vue';
 import { cloneDeep } from 'lodash-es';
-const router = useRouter();
-const { createMessage } = useMessage();
-const { t } = useI18n();
-const repairId = ref<string|string[]>(router.currentRoute.value.params.id || '0')
-const detailData = ref<detailResult>({
-  customer:{},
-  customerAddress:{},
-  repairerVo:{},
-  RepairTestVo:{},
-  repairRegisterVo:{},
-  orderReceivingVo:{},
-  repairPay:{},
-  RepairComment:{},
-  priceList:[],
-});
-const stepList = ref([])
-const butList = ref([])
-onMounted(() => {
-  getData();
-});
-let dataSource = reactive([])
-const columns: BasicColumn[] = [
-  {
+export default defineComponent({
+  components: {
+      Image,
+      Descriptions: Descriptions,
+      DescriptionsItem: Descriptions.Item,
+      [Timeline.name]: Timeline,
+      [Timeline.Item.name]: Timeline.Item,
+      PreviewGroup: Image.PreviewGroup,
+    },
+  setup(props) {
+    const router = useRouter();
+    const { createMessage } = useMessage();
+    const { t } = useI18n();
+    const repairId = ref<string | string[]>(router.currentRoute.value.params.id || '0');
+    const detailData = ref<detailResult>({
+      customer: {},
+      customerAddress: {},
+      repairerVo: {},
+      RepairTestVo: {},
+      repairRegisterVo: {},
+      orderReceivingVo: {},
+      repairPay: {},
+      RepairComment: {},
+      priceList: [],
+    });
+    const stepList = ref<any>([]);
+    const butList = ref([]);
+    onMounted(() => {
+      getData();
+    });
+    let dataSource = reactive<any>([]);
+    const columns: BasicColumn[] = [
+      {
         title: '备件名称',
         dataIndex: 'name',
         width: 150,
-  },{
+      },
+      {
         title: '单价（元）',
         dataIndex: 'price',
         width: 100,
-  },{
+      },
+      {
         title: '数量',
         dataIndex: 'count',
         width: 110,
-  },{
+      },
+      {
         title: '小计（元）',
         dataIndex: 'total',
         width: 140,
-  },
-]
-async function getData() {
-  let res = await detail({repairId:repairId.value})
-  detailData.value = res
-  let countItem = {
-    id:3,
-    price:null,
-    name:'',
-    count:'合计（元）',
-    total:0
-  }
-  dataSource = res.priceList.map(ele => {
-    countItem.total = countItem.total + ele.price * ele.count
-    return {
-      ...ele,
-      total:ele.price * ele.count
+      },
+    ];
+    async function getData() {
+      let res = await detail({ repairId: repairId.value });
+      detailData.value = res;
+      let countItem = {
+        id: 3,
+        price: null,
+        name: '',
+        count: '合计（元）',
+        total: 0,
+      };
+      dataSource = res.priceList.map((ele) => {
+        countItem.total = countItem.total + ele.price * ele.count;
+        return {
+          ...ele,
+          total: ele.price * ele.count,
+        };
+      });
+      setTableData(cloneDeep([...dataSource, countItem]));
+      const stepRes = await process({ repairId: repairId.value });
+      let butTypeList = {
+        0: ['接单'],
+        1: ['检测登记'],
+        2: ['报价'],
+        3: ['修改报价'],
+        4: ['付款登记'],
+        5: ['备件出库'],
+        6: ['添加备件', '完成维修'],
+        7: ['备件回收'],
+        8: ['测试登记'],
+        9: ['付款登记'],
+        10: ['发货登记'],
+      };
+      butList.value = stepRes[0] ? butTypeList[stepRes[0].repairStatus || 0] : ['接单'];
+      stepList.value = stepRes;
+      console.log('repairId', dataSource, stepRes, butList.value);
     }
-  })
-  setTableData(cloneDeep([...dataSource,countItem]));
-  const stepRes = await process({repairId:repairId.value})
-  let butTypeList = {
-    0:['接单',],
-    1:['检测登记',],
-    2:['报价',],
-    3:['修改报价',],
-    4:['付款登记',],
-    5:['备件出库',],
-    6:['添加备件', '完成维修'],
-    7:['备件回收',],
-    8:['测试登记',],
-    9:['付款登记',],
-    10:['发货登记',],
-  }
-  butList.value = stepRes[0]?butTypeList[stepRes[0].repairStatus || 0]:['接单']
-  stepList.value = stepRes
-  console.log('repairId',dataSource,stepRes, butList.value)
-}
-function goBack() {
-  router.go(-1);
-}
-function handleSubmit() {
-  createMessage.success(t('common.optSuccess'));
-}
-const [registerTable, { setTableData }] = useTable({
-  dataSource:dataSource,
-  columns,
-  showSummary:true,
-  showIndexColumn:false,
-  rowKey:'id', 
-  pagination: false,
-  bordered: true,
-  canResize: false,
+    function goBack() {
+      router.go(-1);
+    }
+    function handleSubmit() {
+      createMessage.success(t('common.optSuccess'));
+    }
+    const [registerTable, { setTableData }] = useTable({
+      dataSource: dataSource,
+      columns,
+      showSummary: true,
+      showIndexColumn: false,
+      rowKey: 'id',
+      pagination: false,
+      bordered: true,
+      canResize: false,
+    });
+
+    return {
+      registerTable,
+      handleSubmit,
+      goBack,
+      butList,
+      dataSource,
+      stepList,
+      t,
+    };
+  },
 });
 </script>
 <style lang="less" scoped>
@@ -256,9 +400,9 @@ const [registerTable, { setTableData }] = useTable({
       width: calc(100% - 400px);
     }
   }
-  .bottom_but{
+  .bottom_but {
     text-align: center;
-    button{
+    button {
       margin: 20px;
     }
   }

src/views/work/detail.vue

@@ -9,69 +9,156 @@
       <div class="content_left">
         <div class="content_left_info">
           <Descriptions title="客户信息" :column="3" v-if="detailData.customer">
-            <DescriptionsItem label="客户名称"> {{ detailData.customer.companyName }}</DescriptionsItem>
-            <DescriptionsItem label="联系人"> {{ detailData.customer.customerName }} </DescriptionsItem>
+            <DescriptionsItem label="客户名称">
+              {{ detailData.customer.companyName }}</DescriptionsItem
+            >
+            <DescriptionsItem label="联系人">
+              {{ detailData.customer.customerName }}
+            </DescriptionsItem>
             <DescriptionsItem label="联系电话"> {{ detailData.customer.phone }} </DescriptionsItem>
           </Descriptions>
           <Descriptions title="产品及故障信息" :column="3" v-if="detailData.orderReceivingVo">
-            <DescriptionsItem label="产品名称" v-if="detailData.repairerVo"> {{ t(`routes.device.type.${detailData.repairerVo.cameraType || 1}`)  }} </DescriptionsItem>
-            <DescriptionsItem label="产品SN码" v-if="detailData.repairerVo"> {{ detailData.repairerVo.cameraSnCode }} </DescriptionsItem>
-            <DescriptionsItem label="保修届满日期"> {{ detailData.orderReceivingVo.warrantyExpirationDate }} </DescriptionsItem>
-            <DescriptionsItem label="报修日期" > {{ detailData.repairerVo?.createTime }} </DescriptionsItem>
-            <DescriptionsItem class="ellipsis" label="送修方式" v-if="detailData.customerAddress"> {{ detailData.customerAddress.sendType?'前台送修':`快递寄送:${detailData.customerAddress?.getTrackingNum}` }} </DescriptionsItem>
-            <DescriptionsItem label="保修类型"> {{ detailData.orderReceivingVo.warrantyType == 0?'保修期内':detailData.orderReceivingVo.warrantyType == 1?'保修期外':'非保修项目' }} </DescriptionsItem>
-            <DescriptionsItem label="维修单号"> {{ detailData.orderReceivingVo.repairId }} </DescriptionsItem>
-            <DescriptionsItem label="上次维修单号" :span="2"> {{ detailData.orderReceivingVo.repairerId }} </DescriptionsItem>
+            <DescriptionsItem label="产品名称" v-if="detailData.repairerVo">
+              {{ t(`routes.device.type.${detailData.repairerVo.cameraType || 1}`) }}
+            </DescriptionsItem>
+            <DescriptionsItem label="产品SN码" v-if="detailData.repairerVo">
+              {{ detailData.repairerVo.cameraSnCode }}
+            </DescriptionsItem>
+            <DescriptionsItem label="保修届满日期">
+              {{ detailData.orderReceivingVo.warrantyExpirationDate }}
+            </DescriptionsItem>
+            <DescriptionsItem label="报修日期">
+              {{ detailData.repairerVo?.createTime }}
+            </DescriptionsItem>
+            <DescriptionsItem class="ellipsis" label="送修方式" v-if="detailData.customerAddress">
+              {{
+                detailData.customerAddress.sendType
+                  ? '前台送修'
+                  : `快递寄送:${detailData.customerAddress?.getTrackingNum}`
+              }}
+            </DescriptionsItem>
+            <DescriptionsItem label="保修类型">
+              {{
+                detailData.orderReceivingVo.warrantyType == 0
+                  ? '保修期内'
+                  : detailData.orderReceivingVo.warrantyType == 1
+                  ? '保修期外'
+                  : '非保修项目'
+              }}
+            </DescriptionsItem>
+            <DescriptionsItem label="维修单号">
+              {{ detailData.orderReceivingVo.repairId }}
+            </DescriptionsItem>
+            <DescriptionsItem label="上次维修单号" :span="2">
+              {{ detailData.orderReceivingVo.repairerId }}
+            </DescriptionsItem>
             <DescriptionsItem label="故障描述" :span="3">
               <div>
                 <p>{{ detailData.repairerVo.faultMsg }}</p>
-                <ImagePreviewGroup>
-                  <Image :width="80" :height="80" v-for="item in detailData.repairerVo.faultImg" :key="item" :src="item"></Image>
-                </ImagePreviewGroup>
-              </div> 
+                <PreviewGroup>
+                  <Image
+                    :width="80"
+                    :height="80"
+                    v-for="item in detailData.repairerVo.faultImg"
+                    :key="item"
+                    :src="item"
+                  ></Image>
+                </PreviewGroup>
+              </div>
             </DescriptionsItem>
             <DescriptionsItem label="机器外观">
               <div>
                 <p>{{ detailData.repairRegisterVo?.orderFaultMsg }}</p>
-                <ImagePreviewGroup>
-                  <Image :width="80" v-for="item in detailData.orderReceivingVo?.orderFaultImg" :key="item" :src="item"></Image>
-                </ImagePreviewGroup>
-              </div> 
+                <PreviewGroup>
+                  <Image
+                    :width="80"
+                    v-for="item in detailData.orderReceivingVo?.orderFaultImg"
+                    :key="item"
+                    :src="item"
+                  ></Image>
+                </PreviewGroup>
+              </div>
+            </DescriptionsItem>
+            <DescriptionsItem label="售后工程师">
+              {{ detailData.orderReceivingVo?.sysUserName }}
+            </DescriptionsItem>
+            <DescriptionsItem label="接单日期">
+              {{ detailData.orderReceivingVo?.createTime }}
             </DescriptionsItem>
-            <DescriptionsItem label="售后工程师"> {{ detailData.orderReceivingVo?.sysUserName }} </DescriptionsItem>
-            <DescriptionsItem label="接单日期"> {{ detailData.orderReceivingVo?.createTime }} </DescriptionsItem>
             <DescriptionsItem label="检测结果" v-if="detailData.repairRegisterVo">
               <div>
-                <p>{{detailData.repairRegisterVo.checkResult}}</p>
-                <ImagePreviewGroup>
-                  <Image :width="80" :height="80" v-for="item in detailData.repairRegisterVo.checkImg" :key="item" :src="item"></Image>
-                </ImagePreviewGroup>
-              </div> 
+                <p>{{ detailData.repairRegisterVo.checkResult }}</p>
+                <PreviewGroup>
+                  <Image
+                    :width="80"
+                    :height="80"
+                    v-for="item in detailData.repairRegisterVo.checkImg"
+                    :key="item"
+                    :src="item"
+                  ></Image>
+                </PreviewGroup>
+              </div>
+            </DescriptionsItem>
+            <DescriptionsItem label="检测日期">
+              {{ detailData.repairRegisterVo?.createTime }}
+            </DescriptionsItem>
+            <DescriptionsItem label="所需备件">
+              {{ detailData.repairRegisterVo?.partNamesStr }}
             </DescriptionsItem>
-            <DescriptionsItem label="检测日期"> {{ detailData.repairRegisterVo?.createTime }} </DescriptionsItem>
-            <DescriptionsItem label="所需备件"> {{ detailData.repairRegisterVo?.partNamesStr }} </DescriptionsItem>
           </Descriptions>
           <Descriptions title="维修清单" :column="3" layout="vertical">
-            <DescriptionsItem label="备件信息" :span="3" >
+            <DescriptionsItem label="备件信息" :span="3">
               <BasicTable @register="registerTable"></BasicTable>
             </DescriptionsItem>
           </Descriptions>
-          <Descriptions  :column="3">
-            <DescriptionsItem label="维修工程师"> {{ detailData.repairRegisterVo?.sysUserName }}</DescriptionsItem>
-            <DescriptionsItem label="维修完成日期"> {{ detailData.repairRegisterVo?.overTime }} </DescriptionsItem>
-            <DescriptionsItem label="维修记录"> {{ detailData.repairRegisterVo?.remark }} </DescriptionsItem>
-            <DescriptionsItem label="测试工程师"> {{ detailData.repairTestVo?.sysUserName }} </DescriptionsItem>
-            <DescriptionsItem label="测试通过时间" :span="2"> {{ detailData.repairTestVo?.passTime }} </DescriptionsItem>
-            <DescriptionsItem label="支付方式" :span="3"> 
+          <Descriptions :column="3">
+            <DescriptionsItem label="维修工程师">
+              {{ detailData.repairRegisterVo?.sysUserName }}</DescriptionsItem
+            >
+            <DescriptionsItem label="维修完成日期">
+              {{ detailData.repairRegisterVo?.overTime }}
+            </DescriptionsItem>
+            <DescriptionsItem label="维修记录">
+              {{ detailData.repairRegisterVo?.remark }}
+            </DescriptionsItem>
+            <DescriptionsItem label="测试工程师">
+              {{ detailData.repairTestVo?.sysUserName }}
+            </DescriptionsItem>
+            <DescriptionsItem label="测试通过时间" :span="2">
+              {{ detailData.repairTestVo?.passTime }}
+            </DescriptionsItem>
+            <DescriptionsItem label="支付方式" :span="3">
               <div v-if="detailData.repairPay">
-                <p>{{ detailData.repairPay.payType==1?'微信':detailData.repairPay.payType==2?'支付宝':'银行' }}</p>
-                <ImagePreviewGroup>
-                  <Image :width="80" :height="80" v-for="item in [detailData.repairPay.payImg]" :key="item" :src="item"></Image>
-                </ImagePreviewGroup>
-              </div> 
+                <p>{{
+                  detailData.repairPay.payType == 1
+                    ? '微信'
+                    : detailData.repairPay.payType == 2
+                    ? '支付宝'
+                    : '银行'
+                }}</p>
+                <PreviewGroup>
+                  <Image
+                    :width="80"
+                    :height="80"
+                    v-for="item in [detailData.repairPay.payImg]"
+                    :key="item"
+                    :src="item"
+                  ></Image>
+                </PreviewGroup>
+              </div>
+            </DescriptionsItem>
+            <DescriptionsItem label="取回方式" v-if="detailData.customerAddress">
+              {{
+                detailData.customerAddress.getType == 0
+                  ? '前台取回'
+                  : `快递寄回 ${detailData.customerAddress?.getTrackingNum || ''}`
+              }}</DescriptionsItem
+            >
+            <DescriptionsItem label="收件信息" :span="2" v-if="detailData.customerAddress">
+              {{ detailData.customerAddress.getAddrName }}
+              {{ detailData.customerAddress.getAddrName
+              }}{{ detailData.customerAddress.getAddress }}
             </DescriptionsItem>
-            <DescriptionsItem label="取回方式" v-if="detailData.customerAddress"> {{detailData.customerAddress.getType==0?'前台取回':`快递寄回 ${detailData.customerAddress?.getTrackingNum || ''}`}}</DescriptionsItem>
-            <DescriptionsItem label="收件信息" :span="2" v-if="detailData.customerAddress"> {{detailData.customerAddress.getAddrName}} {{ detailData.customerAddress.getAddrName }}{{ detailData.customerAddress.getAddress }} </DescriptionsItem>
           </Descriptions>
           <!-- <Descriptions title="单据下载" :column="3">
             <DescriptionsItem label="维修记录" :span="3"> 
@@ -89,32 +176,72 @@
             </DescriptionsItem>
           </Descriptions> -->
           <Descriptions title="客户评价" :column="3" v-if="detailData.RepairComment">
-            <DescriptionsItem label="评价内容" > {{ detailData.RepairComment.comment }} </DescriptionsItem>
-            <DescriptionsItem label="评分"> {{ detailData.RepairComment.starRank }} </DescriptionsItem>
+            <DescriptionsItem label="评价内容">
+              {{ detailData.RepairComment.comment }}
+            </DescriptionsItem>
+            <DescriptionsItem label="评分">
+              {{ detailData.RepairComment.starRank }}
+            </DescriptionsItem>
           </Descriptions>
           <Descriptions title="备注" :column="3">
-            <DescriptionsItem label="备注内容"> {{ detailData.repairerVo?.remark }} </DescriptionsItem>
+            <DescriptionsItem label="备注内容">
+              {{ detailData.repairerVo?.remark }}
+            </DescriptionsItem>
           </Descriptions>
         </div>
       </div>
       <div class="content_right">
         <Timeline>
-          <TimelineItem v-for="(item,indexs) in stepList" :color="indexs == 0 ?'red':'green'" :key="indexs">
+          <TimelineItem
+            v-for="(item, indexs) in stepList"
+            :color="indexs == 0 ? 'red' : 'green'"
+            :key="indexs"
+          >
             <div class="timeItem">
               <div class="name">
-                <span>{{item.remark}}</span>
-                <a-button style="margin-left:50px" @click="handleBut(butItem)"  v-for="butItem in butList" :key="butItem" v-if="indexs == 0"> {{butItem}} </a-button>
+                <span>{{ item.remark }}</span>
+                <a-button
+                  style="margin-left: 50px"
+                  @click="handleBut(butItem)"
+                  v-for="butItem in butList"
+                  :key="butItem"
+                  v-if="indexs == 0"
+                >
+                  {{ butItem }}
+                </a-button>
               </div>
-              <div class="status">{{item.sysUserName}}完成{{item.remark}} <span>{{item.createTime}}</span></div>
-              <div class="itemText" v-if="item.customerAddress">{{ item.customerAddress.getType==0?'前台取回':`快递寄回  ${item.customerAddress.getTrackingNum}`}}</div>
-              <div class="itemText" v-if="item.customerAddress">{{ item.customerAddress.sendType==0?'前台送修':`快递寄送  ${item.customerAddress.sendTrackingNum}`}}</div>
-              <div class="itemText" v-if="item.repairRegisterVo">检测结论： {{ item.repairRegisterVo.checkResult}}</div>
-              <div class="itemText" v-if="item.repairRegisterVo">所需备件： {{ item.repairRegisterVo.partNamesStr }}</div>
-              <div class="itemText" v-if="item.orderReceivingVo">机器外观： {{ item.orderReceivingVo.orderFaultMsg}}</div>
+              <div class="status"
+                >{{ item.sysUserName }}完成{{ item.remark }} <span>{{ item.createTime }}</span></div
+              >
+              <div class="itemText" v-if="item.customerAddress">{{
+                item.customerAddress.getType == 0
+                  ? '前台取回'
+                  : `快递寄回  ${item.customerAddress.getTrackingNum}`
+              }}</div>
+              <div class="itemText" v-if="item.customerAddress">{{
+                item.customerAddress.sendType == 0
+                  ? '前台送修'
+                  : `快递寄送  ${item.customerAddress.sendTrackingNum}`
+              }}</div>
+              <div class="itemText" v-if="item.repairRegisterVo"
+                >检测结论： {{ item.repairRegisterVo.checkResult }}</div
+              >
+              <div class="itemText" v-if="item.repairRegisterVo"
+                >所需备件： {{ item.repairRegisterVo.partNamesStr }}</div
+              >
+              <div class="itemText" v-if="item.orderReceivingVo"
+                >机器外观： {{ item.orderReceivingVo.orderFaultMsg }}</div
+              >
               <div class="iamgeList">
-                <ImagePreviewGroup>
-                  <Image :width="80" :height="80" v-for="itemSrc in item.imagesInfo" :key="itemSrc" :src="itemSrc"></Image>
-                </ImagePreviewGroup>
+                <PreviewGroup>
+                  <Image
+                    :width="80"
+                    :height="80"
+                    v-for="itemSrc in item.imagesInfo"
+                    :key="itemSrc"
+                    :src="itemSrc"
+                  ></Image>
+                </PreviewGroup>
               </div>
             </div>
           </TimelineItem>
@@ -123,7 +250,7 @@
     </div>
     <div class="bottom_but">
       <a-button type="primary" v-for="item in butList" :key="item" @click="handleBut(item)">
-        {{item}}
+        {{ item }}
       </a-button>
       <a-button type="primary" @click="goBack">
         {{ t('common.back') }}
@@ -142,12 +269,12 @@
     <reviewModal @reload="reload" @register="registerReview" />
   </div>
 </template>
-<script lang="ts" setup>
-import { ref, onMounted, reactive } from 'vue';
+<script lang="ts">
+import { defineComponent, ref, onMounted, reactive } from 'vue';
 import { useI18n } from '/@/hooks/web/useI18n';
 import { useRouter } from 'vue-router';
 import { useMessage } from '/@/hooks/web/useMessage';
-import { detail ,process } from '/@/api/spares';
+import { detail, process } from '/@/api/spares';
 import { detailResult } from '/@/api/spares/model';
 import { useModal } from '/@/components/Modal';
 // import recoveryModal from './recoveryModal.vue';//录单
@@ -159,147 +286,197 @@ import remarksModal from '../spares/remarksModal.vue';
 import checkModel from './checkModel.vue';
 import partsListModal from './partsListModal.vue';
 import outModal from './outModal.vue';
-import addAccessoryModel from './addAccessoryModel.vue';
-import { BasicTable, useTable, BasicColumn, TableImg, } from '/@/components/Table';
-import { Timeline, TimelineItem, Descriptions, DescriptionsItem, Image, ImagePreviewGroup } from 'ant-design-vue';
+import reviewModal from './reviewModal.vue';
 import { cloneDeep } from 'lodash-es';
-const router = useRouter();
-const { createMessage } = useMessage();
-const { t } = useI18n();
-const repairId = ref<string|string[]>(router.currentRoute.value.params.id || '0')
-const detailData = ref<detailResult>({
-  customer:{},
-  customerAddress:{},
-  repairerVo:{},
-  RepairTestVo:{},
-  repairRegisterVo:{},
-  orderReceivingVo:{},
-  repairPay:{},
-  RepairComment:{},
-  priceList:[],
-});
-const stepList = ref([])
-const butList = ref([])
-onMounted(() => {
-  getData();
-});
-let dataSource = reactive([])
-const columns: BasicColumn[] = [
-  {
+import addAccessoryModel from './addAccessoryModel.vue';
+import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
+import { Timeline, Descriptions, Image, } from 'ant-design-vue';
+export default defineComponent({
+  name: 'detail',
+  components: {
+    Image,
+    BasicTable,
+    quoteModel,
+    deliveryModal,
+    payLogModal,
+    takingOrdersModel,
+    remarksModal,
+    checkModel,
+    partsListModal,
+    outModal,
+    addAccessoryModel,
+    Descriptions: Descriptions,
+    DescriptionsItem: Descriptions.Item,
+    Timeline: Timeline,
+    TimelineItem: Timeline.Item,
+    PreviewGroup: Image.PreviewGroup,
+    reviewModal,
+  },
+  setup(props) {
+    const router = useRouter();
+    const { createMessage } = useMessage();
+    const { t } = useI18n();
+    const repairId = ref<string | string[]>(router.currentRoute.value.params.id || '0');
+    const detailData = ref<detailResult>({
+      customer: {},
+      customerAddress: {},
+      repairerVo: {},
+      RepairTestVo: {},
+      repairRegisterVo: {},
+      orderReceivingVo: {},
+      repairPay: {},
+      RepairComment: {},
+      priceList: [],
+    });
+    const stepList = ref<any>([]);
+    const butList = ref<any>([]);
+    onMounted(() => {
+      getData();
+    });
+    let dataSource = reactive<any>([]);
+    const columns: BasicColumn[] = [
+      {
         title: '备件名称',
         dataIndex: 'name',
         width: 150,
-  },{
+      },
+      {
         title: '单价（元）',
         dataIndex: 'price',
         width: 100,
-  },{
+      },
+      {
         title: '数量',
         dataIndex: 'count',
         width: 110,
-  },{
+      },
+      {
         title: '小计（元）',
         dataIndex: 'total',
         width: 140,
-  },
-]
-async function getData() {
-  const stepRes = await process({repairId:repairId.value})
-  let butTypeList = {
-    0:['接单',],
-    1:['检测登记',],
-    2:['报价',],
-    3:['修改报价',],
-    4:['付款登记',],
-    5:['备件出库',],
-    6:['添加备件', '完成维修'],
-    7:['备件回收',],
-    8:['测试登记',],
-    9:['付款登记',],
-    10:['发货登记',],
-  }
-  butList.value = stepRes[0]?butTypeList[stepRes[0].repairStatus || 0]:['接单']
-  stepList.value = stepRes
-  let res = await detail({repairId:repairId.value})
-  detailData.value = res
-  let countItem = {
-    id:3,
-    price:null,
-    name:'',
-    count:'合计（元）',
-    total:0
-  }
-  dataSource = res.priceList.map(ele => {
-    countItem.total = countItem.total + (ele.price * ele.count)
-    return {
-      // ...ele,
-      count:ele.count,
-      name:ele.name,
-      price:ele.price,
-      id:ele.laborId,
-      total:ele.price * ele.count
+      },
+    ];
+    async function getData() {
+      const stepRes = await process({ repairId: repairId.value });
+      let butTypeList = {
+        0: ['接单'],
+        1: ['检测登记'],
+        2: ['报价'],
+        3: ['修改报价'],
+        4: ['付款登记'],
+        5: ['备件出库'],
+        6: ['添加备件', '完成维修'],
+        7: ['备件回收'],
+        8: ['测试登记'],
+        9: ['付款登记'],
+        10: ['发货登记'],
+      };
+      butList.value = stepRes[0] ? butTypeList[stepRes[0].repairStatus || 0] : ['接单'];
+      stepList.value = stepRes;
+      let res = await detail({ repairId: repairId.value });
+      detailData.value = res;
+      let countItem = {
+        id: 3,
+        price: null,
+        name: '',
+        count: '合计（元）',
+        total: 0,
+      };
+      dataSource = res.priceList.map((ele) => {
+        countItem.total = countItem.total + ele.price * ele.count;
+        return {
+          // ...ele,
+          count: ele.count,
+          name: ele.name,
+          price: ele.price,
+          id: ele.laborId,
+          total: ele.price * ele.count,
+        };
+      });
+      console.log('id', dataSource);
+      if (countItem.total) {
+        setTableData(cloneDeep([...dataSource, countItem]));
+      }
     }
-  })
-  console.log('id',dataSource)
-  if(countItem.total){
-    setTableData(cloneDeep([...dataSource,countItem]));
-  }
-}
-function goBack() {
-  router.go(-1);
-}
-function handleBut(item) {
-  console.log('handleBut',item,stepList.value[0].repairStatus)
-  let status = stepList.value[0]?.repairStatus
-  let record = {
-    cameraSnCode:detailData.value.repairerVo?.cameraSnCode,
-    cameraType:detailData.value.repairerVo?.cameraType,
-    repairId:detailData.value.orderReceivingVo?.repairId,
-  };
-  let openList = {
-    1:openTakingOrders,//检测登记
-    2:openQuoteModal,//报价
-    3:openTakingOrders,//修改报价
-    4:openPayLogModal,//付款登记
-    5:registerParts,//备件出库
-    7:registerParts,//备件回收
-    8:openReviewModal,//测试登记
-    9:openPayLogModal,//付款登记
-    10:openDeliveryModal,//发货登记
-    61:openAddModal,//添加备件
-    62:openOutModal,//完成维修
-  }
-  openList[status](true, {
-    ...record,
-    repairManName:detailData.value.repairRegisterVo?.sysUserName,
-  });
-}
-function handleSubmit() {
-  createMessage.success(t('common.optSuccess'));
-}
-function reload(){
-  getData()
-}
-const [registerParts, { openModal:openPartsModal }] = useModal();
-const [registerReview, { openModal:openReviewModal }] = useModal();
-const [registerRecovery, { openModal }] = useModal();
-const [registerQuote, { openModal:openQuoteModal }] = useModal();
-const [registerPayLog, { openModal:openPayLogModal }] = useModal();
-const [registerDelivery, { openModal:openDeliveryModal }] = useModal();
-const [registerTakingOrders, { openModal:openTakingOrders }] = useModal();
-const [registerRemarks, { openModal:openRemarksModal }] = useModal();
-// const [registerRecovery, { openModal }] = useModal();
-const [registerOut, { openModal:openOutModal }] = useModal();
-const [registerAdd, { openModal:openAddModal }] = useModal();
-const [registerTable, { setTableData }] = useTable({
-  dataSource:dataSource,
-  columns,
-  showSummary:true,
-  showIndexColumn:false,
-  rowKey:'id', 
-  pagination: false,
-  bordered: true,
-  canResize: false,
+    function goBack() {
+      router.go(-1);
+    }
+    function handleBut(item) {
+      console.log('handleBut', item, stepList.value[0].repairStatus);
+      let status = stepList.value[0]?.repairStatus;
+      let record = {
+        cameraSnCode: detailData.value.repairerVo?.cameraSnCode,
+        cameraType: detailData.value.repairerVo?.cameraType,
+        repairId: detailData.value.orderReceivingVo?.repairId,
+      };
+      let openList = {
+        1: openTakingOrders, //检测登记
+        2: openQuoteModal, //报价
+        3: openTakingOrders, //修改报价
+        4: openPayLogModal, //付款登记
+        5: registerParts, //备件出库
+        7: registerParts, //备件回收
+        8: openReviewModal, //测试登记
+        9: openPayLogModal, //付款登记
+        10: openDeliveryModal, //发货登记
+        61: openAddModal, //添加备件
+        62: openOutModal, //完成维修
+      };
+      openList[status](true, {
+        ...record,
+        repairManName: detailData.value.repairRegisterVo?.sysUserName,
+      });
+    }
+    function handleSubmit() {
+      createMessage.success(t('common.optSuccess'));
+    }
+    function reload() {
+      getData();
+    }
+    const [registerParts, { openModal: openPartsModal }] = useModal();
+    const [registerReview, { openModal: openReviewModal }] = useModal();
+    const [registerRecovery, { openModal }] = useModal();
+    const [registerQuote, { openModal: openQuoteModal }] = useModal();
+    const [registerPayLog, { openModal: openPayLogModal }] = useModal();
+    const [registerDelivery, { openModal: openDeliveryModal }] = useModal();
+    const [registerTakingOrders, { openModal: openTakingOrders }] = useModal();
+    const [registerRemarks, { openModal: openRemarksModal }] = useModal();
+    // const [registerRecovery, { openModal }] = useModal();
+    const [registerOut, { openModal: openOutModal }] = useModal();
+    const [registerAdd, { openModal: openAddModal }] = useModal();
+    const [registerTable, { setTableData }] = useTable({
+      dataSource: dataSource,
+      columns,
+      showSummary: true,
+      showIndexColumn: false,
+      rowKey: 'id',
+      pagination: false,
+      bordered: true,
+      canResize: false,
+    });
+    return {
+      registerParts,
+      registerReview,
+      registerRecovery,
+      registerQuote,
+      registerPayLog,
+      registerDelivery,
+      registerTakingOrders,
+      registerRemarks,
+      registerOut,
+      registerAdd,
+      registerTable,
+      handleSubmit,
+      goBack,
+      handleBut,
+      reload,
+      detailData,
+      butList,
+      dataSource,
+      stepList,
+      t,
+    };
+  },
 });
 </script>
 <style lang="less" scoped>
@@ -323,18 +500,17 @@ const [registerTable, { setTableData }] = useTable({
       width: calc(100% - 400px);
     }
   }
-  .bottom_but{
+  .bottom_but {
     text-align: center;
-    button{
+    button {
       margin: 20px;
     }
   }
-
 }
 </style>
 <style lang="less">
 .detailPage {
-  .ellipsis{
+  .ellipsis {
     // .ant-descriptions-item-container{
     //   overflow: hidden;
     //   white-space: nowrap;