feat(order): order detail

src/views/devices/list.vue

@@ -139,6 +139,7 @@
           {
             field: 'searchKey',
             label: '手机号（用户名）',
+            labelWidth: 160,
             component: 'Input',
             colProps: {
               span: 6,

src/views/order/printModal.vue

@@ -1,24 +1,49 @@
 <template>
   <BasicModal v-bind="$attrs" @register="register" title="打印票据" @ok="handleSubmit" width="80%">
-    <BasicTable @register="registerTable" />
+    <BasicTable @register="registerTable">
+      <template #tableTitle>
+        <div class="pb-30px pl-15px">
+          <address>
+            <div>{{ modalRecord.consignee }}</div>
+            <div>{{ modalRecord.address }}</div>
+            <abbr title="phone"> 联系方式： </abbr> {{ modalRecord.mobile }}
+          </address>
+        </div>
+      </template>
+    </BasicTable>
   </BasicModal>
 </template>
 <script lang="ts">
   // reactive
-  import { defineComponent } from 'vue';
+  import { defineComponent, nextTick, reactive } from 'vue';
   import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
   import { BasicModal, useModalInner } from '/@/components/Modal';
-
+  import { cloneDeep } from 'lodash-es';
+  // goodsId: 77006478
+  // goodsName: "123"
+  // goodsSn: "123"
+  // goodsSpecifitionIds: null
+  // goodsSpecifitionNameValue: null
+  // id: 832
+  // isReal: null
+  // listPicUrl: "https://4dkk.4dage.com/shop/huafa/20211203/1428015744818c.jpg?x-oss-process=image/resize,m_fixed,w_400,h_400"
+  // marketPrice: 123
+  // number: 1
+  // orderId: 690
+  // productId: 2932
+  // retailPrice: 12312
   export default defineComponent({
     name: 'PrintModal',
     components: { BasicModal, BasicTable },
     emits: ['success', 'register', 'reload'],
     setup() {
       // const isUpdate = ref(true);
-      // let modalRecord = reactive({
-      //   id: 0,
-      //   brandId: 0,
-      // });
+      let modalRecord = reactive({
+        id: 0,
+        address: '',
+        consignee: '',
+        mobile: '',
+      });
       const columns: BasicColumn[] = [
         {
           title: '清单',
@@ -27,25 +52,25 @@
         },
         {
           title: '数量',
-          dataIndex: 'orderSn',
+          dataIndex: 'number',
           ellipsis: false,
           width: 180,
         },
         {
           title: '单价',
-          dataIndex: 'orderSn',
+          dataIndex: 'retailPrice',
           ellipsis: false,
           width: 180,
         },
         {
           title: '总价',
-          dataIndex: 'orderSn',
+          dataIndex: 'marketPrice',
           ellipsis: false,
           width: 180,
         },
       ];
 
-      const [registerTable] = useTable({
+      const [registerTable, { setTableData }] = useTable({
         title: '订单列表',
 
         columns: columns,
@@ -54,7 +79,8 @@
         // clickToRowSelect: false,
         // showTableSetting: true,
         // tableSetting: { fullScreen: true },
-        // showIndexColumn: false,
+        showIndexColumn: false,
+        maxHeight: 250,
         // rowKey: 'id',
         pagination: false,
 
@@ -66,8 +92,17 @@
       });
       function onDataReceive(data) {
         console.log('data', data);
-        // modalRecord = { ...data };
+        // modalRecord = { ...cloneDeep(data) };
+        // console.log('modalRecord', modalRecord);
+        modalRecord.consignee = data.consignee;
+        modalRecord.address = data.address;
+        modalRecord.mobile = data.mobile;
+
         // modalRecord.brandId = data.brandId;
+
+        nextTick(() => {
+          setTableData(cloneDeep(data.goodsList));
+        });
       }
       async function handleSubmit() {}
 
@@ -76,6 +111,7 @@
         handleSubmit,
         closeModal,
         registerTable,
+        modalRecord,
       };
     },
   });