feat(orderlist):

src/utils/httpRequest.js

@@ -83,6 +83,7 @@ http.interceptors.response.use(response => {
     })
     return Promise.reject(res)
   }
+  return res
 }, error => {
   switch (error.response.status) {
     case 400:

src/views/modules/order/Table/BaseTable.vue

@@ -0,0 +1,198 @@
+<template>
+  <div class="table-wrap" v-loading='loading'>
+    <div class="table-page-search-wrapper" v-if="condition.length">
+      <el-form :inline="true" class="demo-form-inline" label-width='80px' size="small">
+        <el-row :gutter='10'>
+          <el-col :span='span' v-for='v in condition' :key='v.dataIndex'>
+            <el-form-item :label="layout === 'include' ? '' : v.title" style="display: flex">
+              <el-input v-model='queryParam[v.dataIndex]' :placeholder="layout === 'include' ? v.title : '请输入'"
+                v-if="v.type === 'input'" clearable />
+              <el-date-picker v-model='queryParam[v.dataIndex]' valueFormat="YYYY-MM-DD"
+                v-else-if="v.type === 'time-range'" :placeholder="layout === 'include' ? v.title : '请选择'" />
+              <el-select v-model='queryParam[v.dataIndex]' :placeholder="layout === 'include' ? v.title : '请选择'"
+                :default-value='v.defaultValue' v-else-if="v.type === 'select'" clearable>
+                <el-option :value='v1.value' :label="v1.label" v-for='v1 in v.options' :key='v1.value'></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span='24 - condition.length % (24 / span) * span'>
+            <span class="table-page-search-submitButtons">
+              <el-button type="primary" @click='onQueryClick' size="small">
+                查询
+              </el-button>
+              <el-button style="margin-left: 8px" @click='reset' size="small">
+                重置
+              </el-button>
+              <slot name='append-btn'></slot>
+            </span>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+    <el-table :data='tableData' style="margin: 6px 0;" v-bind="$attrs" v-on='$listeners' ref='table'>
+      <el-table-column type="selection" width="55" v-if="isSelection">
+      </el-table-column>
+      <el-table-column v-bind='v' :prop='v.dataIndex' :label='v.title' v-for="(v, i) in columns" :key='i'>
+        <template slot-scope="scope">
+          <!-- 格式化函数 -->
+          <span
+            v-if="v.scopedSlots && v.scopedSlots.customRender && Object.prototype.toString.call(v.scopedSlots.customRender) === '[object Function]'">
+            {{ v.scopedSlots.customRender(scope.row[v.dataIndex], scope.row, scope.$index) }}
+          </span>
+          <!-- 格式化插槽 -->
+          <slot v-else-if="v.scopedSlots && v.scopedSlots.customRender" v-bind='scope' :name="v.scopedSlots.customRender">
+          </slot>
+          <span v-else>{{ scope.row[v.dataIndex] }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination :layout="paginationSize === 'mini' ? 'prev, pager, next' : 'total, sizes, prev, pager, next, jumper'"
+      :currentPage.sync='localPagination.currentPage' :pageCount.sync='localPagination.totalPage'
+      :style="paginationSize === 'mini' ? 'display: flex;justify-content: center;' : 'display: flex;justify-content: flex-end;'"
+      :page-sizes="[5, 10, 20, 30, 50]" @size-change="queryTable" @current-change="queryTable" v-if='showPagination'>
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BaseTable',
+  props: {
+    columns: {
+      default: () => [],
+      required: true,
+    },
+    condition: {
+      default: () => [],
+      required: false
+    },
+    queryFunction: {
+      required: false
+    },
+    pagination: {
+      required: false,
+      default: () => ({
+        pageSize: 10,
+      }),
+    },
+    paginationText: {
+      required: false,
+      default: () => ({
+        currentPage: 'currentPage', total: 'total', totalPage: 'totalPage', data: 'data'
+      }),
+    },
+    span: {
+      required: false,
+      default: 6
+    },
+    paginationSize: {
+      required: false,
+      default: 'small'
+    },
+    layout: {
+      required: false,
+      default: 'normal'
+    },
+    // 无需查询的静态数据
+    injectData: {
+      required: false,
+      default: null
+    },
+    isSelection: {
+      required: false,
+      default: false
+    },
+    rowKey: {
+      required: false,
+      default: 'id'
+    },
+  },
+  data() {
+    return {
+      tableData: [],
+      queryParam: {}, // 暂存
+      confirmParam: {}, // 点击查询键后赋值
+
+      localPagination: Object.assign({
+        currentPage: 1,
+        total: 10
+      }, this.pagination),
+      loading: false,
+
+      selectedRows: [],
+      selectedRowKeys: [],
+
+      showPagination: true
+    };
+  },
+  async created() {
+    this.condition.forEach(v => {
+      v.defaultValue && this.$set(this.queryParam, v.dataIndex, v.defaultValue)
+    })
+    if (this.injectData) {
+      this.tableData = this.injectData
+      this.showPagination = false
+    } else {
+      this.queryTable()
+    }
+  },
+  watch: {
+    injectData: {
+      handler(v) {
+        this.tableData = v
+      },
+      deep: true
+    }
+  },
+  methods: {
+    async submit() {
+    },
+    onQueryClick() {
+      this.confirmParam = JSON.parse(JSON.stringify(this.queryParam))
+      this.localPagination.currentPage = 1
+      this.queryTable()
+    },
+    async queryTable() {
+      this.loading = true
+      try {
+        const { confirmParam, paginationText, localPagination } = this
+        const queryParamFilter = {}
+        Object.keys(confirmParam).forEach(key => confirmParam[key] && (queryParamFilter[key] = confirmParam[key]))
+        const queryResult = await this.queryFunction(
+          {
+            [paginationText.currentPage]: localPagination.currentPage,
+            query: queryParamFilter
+          }
+        )
+        this.tableData = queryResult[paginationText.data]
+        this.localPagination = {
+          currentPage: queryResult[paginationText.currentPage],
+          total: queryResult[paginationText.total],
+          totalPage: queryResult[paginationText.totalPage]
+        }
+      } finally {
+        this.loading = false
+      }
+    },
+    reset() {
+      this.queryParam = {}
+      this.confirmParam = {}
+      this.queryTable()
+    },
+    /**
+     * 表格重新加载方法
+     * 如果参数为 true, 则强制刷新到第一页
+     * @param Boolean bool
+     */
+    refresh(bool = false) {
+      bool && (this.localPagination.currentPage = 1)
+      this.queryTable()
+    },
+    test(v) {
+      console.log(v)
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

src/views/modules/order/Table/table.config.js

@@ -0,0 +1,60 @@
+export const order = {
+  columns: [
+    {
+      title: "编号",
+      dataIndex: "id",
+    },
+    {
+      title: "订单号",
+      dataIndex: "orderNo",
+    },
+    {
+      title: "下单人",
+      dataIndex: "addressName",
+    },
+    {
+      title: "订单金额",
+      dataIndex: "totalFee",
+    },
+    {
+      title: "支付方式",
+      dataIndex: "payType",
+    },
+    {
+      title: "订单状态",
+      dataIndex: "status",
+    },
+    {
+      title: "操作",
+      dataIndex: "action",
+      scopedSlots: { customRender: "action" },
+    },
+  ],
+  condition: [
+    {
+      title: "手机号",
+      dataIndex: "phone",
+      type: "input",
+    },
+    {
+      title: "订单状态",
+      dataIndex: "status",
+      type: "select",
+      defaultValue: '全部',
+      options: [
+        {
+          label: "全部",
+          value: "全部",
+        },
+        {
+          label: "待支付",
+          value: "待支付",
+        },
+        {
+          label: "已支付",
+          value: "已支付",
+        },
+      ],
+    },
+  ],
+}

src/views/modules/order/order.vue

@@ -1,503 +1,54 @@
 <template>
-  <div class="mod-order-order">
-    <el-form :inline="true"
-             :model="dataForm"
-             @keyup.enter.native="getDataList(this.page)">
-      <el-form-item label="订单编号:">
-        <el-input v-model="dataForm.orderNumber"
-                  placeholder="订单编号"
-                  clearable></el-input>
-      </el-form-item>
-      <el-form-item label="下单时间:">
-        <el-date-picker v-model="dateRange"
-                        type="datetimerange"
-                        range-separator="至"
-                        value-format="yyyy-MM-dd HH:mm:ss"
-                        start-placeholder="开始日期"
-                        end-placeholder="结束日期">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item label="订单状态:">
-        <template>
-          <el-select v-model="dataForm.status"
-                     clearable
-                     placeholder="请选择订单状态">
-            <el-option v-for="item in options"
-                       :key="item.value"
-                       :label="item.label"
-                       :value="item.value">
-            </el-option>
-          </el-select>
-        </template>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary"
-                   icon="el-icon-search"
-                   size="small"
-                   @click="getDataList()">查询</el-button>
-        <el-button v-if="isAuth('order:order:waitingConsignmentExcel')"
-                   @click="showConsignmentInfo()"
-                   type="primary"
-                   size="small">导出待发货订单</el-button>
-        <el-button v-if="isAuth('order:order:soldExcel')"
-                   @click="getSoldExcel()"
-                   type="primary"
-                   size="small">导出销售记录</el-button>
-        <el-button @click="clearDatas()"
-                   size="small">清空</el-button>
-      </el-form-item>
-    </el-form>
-    <div class="main">
-      <div class="content">
-        <div class="tit">
-          <el-row style="width:100%">
-            <el-col :span="10"><span class="item product">商品</span></el-col>
-            <el-col :span="3"><span class="item">成交单价/购买数量</span></el-col>
-            <el-col :span="3"><span class="item">实付金额</span></el-col>
-            <el-col :span="3"><span class="item">支付方式</span></el-col>
-            <el-col :span="3"><span class="item">订单状态</span></el-col>
-            <el-col :span="2"><span class="item">操作</span></el-col>
-          </el-row>
-        </div>
-        <div class="prod"
-             v-for="order in dataList"
-             :key="order.orderId">
-          <div class="prod-tit">
-            <span>订单编号：{{order.orderNumber}}</span>
-            <span>下单时间：{{order.createTime}}</span>
-            <!-- <span>买家：19999999999</span>
-            <span >联系电话：19999999999</span> -->
-          </div>
-          <div class="prod-cont">
-            <el-row style="width:100%">
-              <el-col :span="12">
-                <div class="prod-item">
-                  <div class="items name"
-                       v-for="orderItem in order.orderItems"
-                       :key="orderItem.orderItemId">
-                    <div class="prod-image">
-                      <img :src="resourcesUrl + orderItem.pic"
-                           style="height:100px;width: 100px;">
-                    </div>
-                    <div class="prod-name">
-                      <span>{{orderItem.prodName}}</span>
-                      <span class="prod-info">{{orderItem.skuName}}</span>
-                    </div>
-                    <div class="prod-price">
-                      <span>￥{{orderItem.price}}</span>
-                      <span>×{{orderItem.prodCount}}</span>
-                    </div>
-                  </div>
-                </div>
-              </el-col>
-              <el-col :span="3"
-                      style="height: 100%;">
-                <div class="item">
-                  <div>
-                    <span class="totalprice">￥{{order.actualTotal}}</span>
-                    <span v-if="order.freightAmount">（含运费：￥{{order.freightAmount}}）</span>
-                    <span>共{{order.productNums}}件</span>
-                  </div>
-                </div>
-              </el-col>
-              <el-col :span="3"
-                      style="height: 100%;">
-                <div class="item">
-                  <div>
-                    <span v-if="order.payType === 1">微信支付</span>
-                    <span v-else-if="order.payType === 2">支付宝</span>
-                    <span v-else>手动代付</span>
-                  </div>
-                </div>
-              </el-col>
-              <el-col :span="3"
-                      style="height: 100%;">
-                <div class="item">
-                  <span v-if="order.status === 1"
-                        size="small"
-                        type="danger">待付款</span>
-                  <span v-else-if="order.status === 2"
-                        size="small"
-                        type="danger">待发货</span>
-                  <span v-else-if="order.status === 3"
-                        size="small"
-                        type="danger">待收货</span>
-                  <span v-else-if="order.status === 4"
-                        size="small"
-                        type="danger">待评价</span>
-                  <span v-else-if="order.status === 5"
-                        size="small"
-                        type="danger">成功</span>
-                  <span v-else
-                        size="small">失败</span>
-                </div>
-              </el-col>
-              <el-col :span="3"
-                      style="height: 100%;">
-                <div class="item">
-                  <div class="operate">
-                    <!-- <button onclick="">打印订单</button><br> -->
-                    <el-button v-if="isAuth('order:order:update')"
-                               type="text"
-                               size="small"
-                               @click="addOrUpdateHandle(order.orderNumber)">查看</el-button>
-                  </div>
-                </div>
-              </el-col>
-            </el-row>
-          </div>
-          <div class="remark">
-            <div class="buyer-remark">
-              <span>备注:{{order.remarks}}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- 空 -->
-    <div class="empty-tips">暂无数据</div>
-    <el-pagination @size-change="sizeChangeHandle"
-                   @current-change="currentChangeHandle"
-                   :current-page="page.pageIndex"
-                   :page-sizes="[10, 20, 50, 100]"
-                   :page-size="page.pageSize"
-                   :total="page.total"
-                   layout="total, sizes, prev, pager, next, jumper">
-    </el-pagination>
-    <!-- 弹窗, 新增 / 修改 -->
-    <add-or-update v-if="addOrUpdateVisible"
-                   ref="addOrUpdate"
-                   @refreshDataList="getDataList"></add-or-update>
-    <consignment-info v-if="consignmentInfoVisible"
-                      ref="consignmentInfo"
-                      @inputCallback="getWaitingConsignmentExcel"></consignment-info>
+  <div>
+    <BaseTable :columns='columns' :condition='condition' :queryFunction='queryFunction' ref="table" paginationSize="mini"
+      :paginationText="{ currentPage: 'pageCurrent', total: 'countTotal', totalPage: 'pageCount', data: 'orderList' }"
+      size="small">
+      <template slot-scope="scope" slot='action'>
+        <el-button @click="show(scope)" type="text" size="small">查看</el-button>
+      </template>
+    </BaseTable>
+    <!-- <CreateLogicalPort ref='CreateLogicalPort' :row='row' page='预下发列表' @close='refresh'
+      :localPlatformObject='localPlatformObject'></CreateLogicalPort> -->
+    <showDialog ref="dialog"></showDialog>
   </div>
 </template>
 
 <script>
-import AddOrUpdate from './orderInfo'
-import ConsignmentInfo from './consignment-info'
+import BaseTable from "./Table/BaseTable.vue"
+import * as tableConfig from './Table/table.config'
+import showDialog from "./showDialog.vue"
 export default {
-  data () {
+  data() {
     return {
-      dataForm: {},
-      dateRange: [],
-      options: [{
-        value: 1,
-        label: '待付款'
-      },
-      {
-        value: 2,
-        label: '待发货'
-      },
-      {
-        value: 3,
-        label: '待收货'
-      },
-      {
-        value: 4,
-        label: '待评价'
-      },
-      {
-        value: 5,
-        label: '成功'
-      },
-      {
-        value: 6,
-        label: '失败'
-      }],
-      resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
-      dataList: [],
-      page: {
-        total: 0, // 总页数
-        currentPage: 1, // 当前页数
-        pageSize: 10 // 每页显示多少条
-      },
-      dataListLoading: false,
-      dataListSelections: [],
-      addOrUpdateVisible: false,
-      consignmentInfoVisible: false
+      columns: tableConfig.order.columns,
+      condition: tableConfig.order.condition,
+      queryParam: {},
+      queryFunction: params => new Promise((resolve, reject) => {
+        const formatParams = {
+          page: params.pageCurrent, ...params.query
+        }
+        return this.$http({
+          url: '/order/index',
+          method: 'post',
+          data: formatParams,
+          params: formatParams
+        }).then(
+          ({ data }) => {
+            resolve(data)
+          }
+        ).catch(e => reject(e))
+      }),
     }
   },
-  components: {
-    AddOrUpdate,
-    ConsignmentInfo
-  },
-  activated () {
-    this.getDataList(this.page)
+  components: { BaseTable, showDialog },
+  mounted() {
+
   },
   methods: {
-    // 获取数据列表
-    getDataList (page, params, done) {
-      page = (page === undefined ? this.page : page)
-      this.dataListLoading = true
-      this.$http({
-        url: this.$http.adornUrl('/order/order/page'),
-        method: 'get',
-        params: this.$http.adornParams(
-          Object.assign(
-            {
-              current: page == null ? this.page.currentPage : page.currentPage,
-              size: page == null ? this.page.pageSize : page.pageSize,
-              'orderNumber': this.dataForm.orderNumber,
-              'status': this.dataForm.status,
-              'startTime': this.dateRange === null ? null : this.dateRange[0], // 开始时间
-              'endTime': this.dateRange === null ? null : this.dateRange[1] // 结束时间
-            },
-            params
-          ), false
-        )
-      }).then(({ data }) => {
-        this.dataList = data.records
-        this.page.total = data.total
-        this.dataListLoading = false
-        if (done) {
-          done()
-        }
-      })
-    },
-    // 清除数据
-    clearDatas () {
-      this.dataForm = {}
-      this.dateRange = []
-    },
-    // 每页数
-    sizeChangeHandle (val) {
-      this.page.pageSize = val
-      this.page.currentPage = 1
-      this.getDataList(this.page)
-    },
-    // 当前页
-    currentChangeHandle (val) {
-      this.page.currentPage = val
-      this.getDataList(this.page)
-    },
-    // 多选
-    selectionChangeHandle (val) {
-      this.dataListSelections = val
-    },
-    orderStatus () {
-
-    },
-    // 新增 / 修改
-    addOrUpdateHandle (val) {
-      this.addOrUpdateVisible = true
-      this.$nextTick(() => {
-        this.$refs.addOrUpdate.init(val)
-      })
+    show(scope) {
+      this.$refs.dialog.show(scope.row)
     },
-    // 删除
-    deleteHandle (id) {
-      var ids = id ? [id] : this.dataListSelections.map(item => {
-        return item.orderId
-      })
-      this.$confirm(`确定进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        this.$http({
-          url: this.$http.adornUrl(`/prod/spec/${ids}`),
-          method: 'delete',
-          data: this.$http.adornData(ids, false)
-        }).then(({ data }) => {
-          this.$message({
-            message: '操作成功',
-            type: 'success',
-            duration: 1500,
-            onClose: () => {
-              this.getDataList(this.page)
-            }
-          })
-        })
-      }).catch(() => { })
-    },
-    showConsignmentInfo () {
-      this.consignmentInfoVisible = true
-      this.$nextTick(() => {
-        this.$refs.consignmentInfo.init()
-      })
-    },
-    getWaitingConsignmentExcel (consignmentInfo) {
-      this.$http({
-        url: this.$http.adornUrl('/order/order/waitingConsignmentExcel'),
-        method: 'get',
-        params: this.$http.adornParams({
-          'consignmentName': consignmentInfo.consignmentName,
-          'consignmentMobile': consignmentInfo.consignmentMobile,
-          'consignmentAddr': consignmentInfo.consignmentAddr,
-          'startTime': this.dateRange === null ? null : this.dateRange[0], // 开始时间
-          'endTime': this.dateRange === null ? null : this.dateRange[1] // 结束时间
-        }),
-        responseType: 'blob' // 解决文件下载乱码问题
-      }).then(({ data }) => {
-        var blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' })
-        const fileName = '待发货信息整理.xls'
-        const elink = document.createElement('a')
-        if ('download' in elink) { // 非IE下载
-          elink.download = fileName
-          elink.style.display = 'none'
-          elink.href = URL.createObjectURL(blob)
-          document.body.appendChild(elink)
-          elink.click()
-          URL.revokeObjectURL(elink.href) // 释放URL 对象
-          document.body.removeChild(elink)
-        } else { // IE10+下载
-          navigator.msSaveBlob(blob, fileName)
-        }
-      })
-    },
-    getSoldExcel () {
-      this.$http({
-        url: this.$http.adornUrl('/order/order/soldExcel'),
-        method: 'get',
-        params: this.$http.adornParams({
-          'startTime': this.dateRange === null ? null : this.dateRange[0], // 开始时间
-          'endTime': this.dateRange === null ? null : this.dateRange[1] // 结束时间
-        }),
-        responseType: 'blob' // 解决文件下载乱码问题
-      }).then(({ data }) => {
-        var blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' })
-        const fileName = '销售信息整理.xls'
-        const elink = document.createElement('a')
-        if ('download' in elink) { // 非IE下载
-          elink.download = fileName
-          elink.style.display = 'none'
-          elink.href = URL.createObjectURL(blob)
-          document.body.appendChild(elink)
-          elink.click()
-          URL.revokeObjectURL(elink.href) // 释放URL 对象
-          document.body.removeChild(elink)
-        } else { // IE10+下载
-          navigator.msSaveBlob(blob, fileName)
-        }
-      })
-    }
   }
 }
 </script>
-<style lang="scss">
-.mod-order-order {
-  .tit {
-    display: flex;
-    height: 45px;
-    align-items: center;
-  }
-  .tit .item {
-    padding: 0 10px;
-    width: 10%;
-    text-align: center;
-  }
-  .tit .product {
-    width: 25%;
-  }
-  .prod-tit {
-    padding: 10px;
-    background: #f8f8f9;
-    border-left: 1px solid #dddee1;
-    border-top: 1px solid #dddee1;
-    border-right: 1px solid #dddee1;
-  }
-  .prod-tit span {
-    margin-right: 15px;
-  }
-  .prod-cont {
-    display: flex;
-    border-top: 1px solid #dddee1;
-    border-bottom: 1px solid #dddee1;
-    border-left: 1px solid #dddee1;
-    color: #495060;
-  }
-  .prod-cont .item {
-    display: flex;
-    display: -webkit-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 10px;
-    // width: 10%;
-    border-right: 1px solid #dddee1;
-    text-align: center;
-    height: 100%;
-  }
-  .prod-cont .item span {
-    display: block;
-  }
-  .prod-cont .prod-item {
-    // width: 38%;
-    display: flex;
-    flex-direction: column;
-    border-right: 1px solid #dddee1;
-  }
-  .prod-name {
-    width: 55%;
-    text-align: left;
-  }
-  .prod-price {
-    position: absolute;
-    right: 40px;
-    text-align: right;
-  }
-  .prod-price span {
-    display: block;
-    margin-bottom: 10px;
-  }
-  .prod-name .prod-info {
-    display: block;
-    color: #80848f;
-    margin-top: 30px;
-  }
-  .prod-cont .items.name {
-    display: flex;
-    position: relative;
-    padding: 20px;
-    // height: 100px;
-    border-bottom: 1px solid #dddee1;
-  }
-  .prod-cont .items.name:last-child {
-    border-bottom: none;
-  }
-  .prod-image {
-    margin-right: 20px;
-    width: 100px;
-    height: 100px;
-  }
-  .prod-image img {
-    width: 100px;
-    height: 100px;
-  }
-  .item span {
-    display: block;
-    margin-bottom: 10px;
-  }
-  .item .operate {
-    color: #2d8cf0;
-  }
-  .item .totalprice {
-    color: #c00;
-  }
-  .prod .remark {
-    width: 100%;
-    height: 50px;
-    line-height: 50px;
-    background-color: #e8f7f6;
-    border-left: 1px solid #dddee1;
-    border-right: 1px solid #dddee1;
-    border-bottom: 1px solid #dddee1;
-    margin-bottom: 20px;
-  }
-  .buyer-remark {
-    padding: 0 20px;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  .empty-tips {
-    display: block;
-    width: 100%;
-    text-align: center;
-    margin: 50px 0;
-    color: #999;
-  }
-}
-</style>
+<style lang="scss"></style>

src/views/modules/order/showDialog.vue

@@ -0,0 +1,109 @@
+<template>
+    <el-dialog title="订单详情" :visible.sync="dialogVisible" width="50%" top="7vh" v-loading="loading" :destroy-on-close="true">
+        <el-form :model="form" :label-position="formLabelWidth" label-width="120px" size="mini" class="form-wrap">
+            <el-form-item label="下单时间">
+                <el-input v-model="form.paidAt" disabled></el-input>
+            </el-form-item>
+            <el-form-item label="订单编号">
+                <el-input v-model="form.orderNo" disabled></el-input>
+            </el-form-item>
+            <el-form-item label="订单金额">
+                <el-input v-model="form.totalFee" disabled></el-input>
+            </el-form-item>
+            <el-form-item label="订单状态">
+                <el-input v-model="form.status" disabled></el-input>
+            </el-form-item>
+            <el-form-item label="收件人信息">
+                <BaseTable :columns='columns1' :condition='[]' ref="table1" :injectData="[form]" size="small">
+                </BaseTable>
+            </el-form-item>
+            <el-form-item label="商品信息">
+                <BaseTable :columns='columns2' :condition='[]' ref="table2" :injectData="form.orderItems" size="small">
+                </BaseTable>
+            </el-form-item>
+            <el-form-item label="备注">
+                <el-input v-model="form.status" type="textarea" disabled></el-input>
+            </el-form-item>
+        </el-form>
+    </el-dialog>
+</template>
+
+<script>
+import BaseTable from "./Table/BaseTable.vue"
+export default {
+    name: 'showDialog',
+    components: { BaseTable, },
+    data() {
+        return {
+            dialogVisible: false,
+            loading: true,
+            columns1: [{
+                title: "姓名",
+                dataIndex: "addressName",
+            }, {
+                title: "电话",
+                dataIndex: "addressPhone",
+            }, {
+                title: "地址",
+                dataIndex: "addressText",
+            },],
+            columns2: [{
+                title: "图标",
+                dataIndex: "goodsCover",
+                scopedSlots: { customRender: (label, row, index) => `${row.goodsCover}` },
+            }, {
+                title: "名称",
+                dataIndex: "goodsName",
+            }, {
+                title: "价格",
+                dataIndex: "goodsPrice",
+            }, {
+                title: "数量",
+                dataIndex: "goodsAmount",
+            }, {
+                title: "小计",
+                dataIndex: "totalPrice",
+            }],
+            form: {
+                paidAt: "",
+                orderNo: '',
+                totalFee: 0,
+                status: '',
+                addressName: '',
+                addressPhone: '',
+                addressText: '',
+                beizhu: '',
+                orderItems: []
+            },
+            formLabelWidth: '120px'
+        };
+    },
+    methods: {
+        show({ id }) {
+            this.$http({
+                url: '/orderItem/show',
+                method: 'post',
+                data: { id },
+                params: { id }
+            }).then(
+                ({ data }) => {
+                    // this.form
+                    // this.$set(this.form,)
+                    Object.keys(this.form).forEach(key => {
+                        this.form[key] = data[key]
+                    })
+                    this.loading = false
+                }
+            )
+            this.dialogVisible = true;
+        }
+    }
+}
+</script>
+
+<style>
+.form-wrap {
+    max-height: 66vh;
+    overflow-y: scroll;
+}
+</style>