报单列表UI优化

src/views/shop/dec-order-list.vue

@@ -1,173 +1,206 @@
 <template>
-  <div class="app-container">
-    <el-table
-      :key="tableKey"
-      v-loading="listLoading"
-      :data="list"
-      border
-      fit
-      highlight-current-row
-      style="width: 100%;"
-    >
-      <el-table-column width="130px" align="center" :label="$t('shop.productCode')" prop="SKU_CODE">
-        <template slot-scope="{row}">
-          <span>{{ row.SKU_CODE }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column width="250px" align="center" :label="$t('shop.productName')" prop="GOODS_TITLE">
-        <template slot-scope="{row}">
-          <span style="height: auto; display:-webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient:vertical; -webkit-line-clamp:1;">
-						{{ row.GOODS_TITLE }}
-					</span>
-        </template>
-      </el-table-column>
-      <el-table-column width="120px" align="center" :label="$t('shop.productPrice')" prop="REAL_PRICE">
-        <template slot-scope="{row}">
-          <span>{{ row.REAL_PRICE }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column width="120px" align="center" :label="$t('shop.productBV')" prop="REAL_PV">
-        <template slot-scope="{row}">
-          <span>{{ row | bvFilter }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column width="80px" align="center" :label="$t('shop.qty')" prop="BUY_NUMS">
-        <template slot-scope="{row}">
-          <span>{{ row.BUY_NUMS }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column width="80px" align="center" :label="$t('shop.taxRate')" prop="TAX_RATE">
-        <template slot-scope="{row}">
-          <span>{{ row.TAX_RATE / 100 }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column width="120px" align="center" :label="$t('shop.taxAmount')" prop="TAX_AMOUNT">
-        <template slot-scope="{row}">
-          <span>{{ row.TAX_AMOUNT }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column width="120px" align="center" :label="$t('shop.totalPrice')" prop="TOTAL_AMOUNT">
-        <template slot-scope="{row}">
-          <span>{{ row.TOTAL_AMOUNT }}</span>
-        </template>
-      </el-table-column>
-			<el-table-column width="200px" align="center" :label="$t('shop.decCode')" prop="DEC_SN">
+	<div class="app-container">
+		<el-table
+			v-loading="listLoading"
+			fit
+			lazy
+			highlight-current-row
+			:data="tableData"
+		>
+			<el-table-column type="expand">
+				<template slot-scope="props">
+					<el-col :xs="18" :sm="18" :lg="18">
+						<el-card class="box-card" shadow="hover">
+							<el-table v-loading="listLoading" fit lazy highlight-current-row :data="props.row.hasChildren">
+								<el-table-column align="center" :label="$t('shop.productCode')" prop="SKU_CODE">
+									<template slot-scope="{row}">
+										<span style="white-space: nowrap;">{{ row.SKU_CODE }}</span>
+									</template>
+								</el-table-column>
+								<el-table-column min-width="200px" align="center" :label="$t('shop.productName')" prop="GOODS_TITLE">
+									<template slot-scope="{row}">
+										<span>{{ row.GOODS_TITLE }}</span>
+									</template>
+								</el-table-column >
+								<el-table-column align="center" :label="$t('shop.qty')" prop="BUY_NUMS">
+									<template slot-scope="{row}">
+										<span style="white-space: nowrap;">{{ row.BUY_NUMS }}</span>
+									</template>
+								</el-table-column>
+								<el-table-column align="center" :label="$t('shop.productPrice')">
+									<template slot-scope="{row}">
+										<span style="white-space: nowrap;">{{ $t('currency.sign') }} {{ row.REAL_PRICE | amountFilter }}</span>
+									</template>
+								</el-table-column>
+								<el-table-column align="center" :label="$t('shop.totalPrice')">
+									<template slot-scope="{row}">
+										<span style="white-space: nowrap;">{{ $t('currency.sign') }} {{ row | priceAmountFilter | amountFilter }}</span>
+									</template>
+								</el-table-column>
+								<el-table-column align="center" :label="$t('shop.totalBV')">
+									<template slot-scope="{row}">
+										<span style="white-space: nowrap;">{{ row | bvFilter | amountFilter }}</span>
+									</template>
+								</el-table-column>
+								<el-table-column align="center" :label="$t('shop.taxRate')">
+									<template slot-scope="{row}">
+										<span style="white-space: nowrap;">{{ row.TAX_RATE / 100 }}</span>
+									</template>
+								</el-table-column>
+								<el-table-column align="center" :label="$t('shop.taxAmount')">
+									<template slot-scope="{row}">
+										<span style="white-space: nowrap;">{{ $t('currency.sign') }} {{ row | taxAmountFilter | amountFilter }}</span>
+									</template>
+								</el-table-column>
+							</el-table>
+						</el-card>
+					</el-col>
+				</template>
+			</el-table-column>
+			<el-table-column align="center" :label="$t('shop.decCode')" prop="DEC_SN" min-width="120px" style="white-space: pre-wrap;">
+				<template slot-scope="{row}">
+					<span style="white-space: pre-wrap; display: inline-block; word-break: break-all;">{{ row.ORDER_SN }}</span>
+				</template>
+			</el-table-column>
+			<el-table-column align="center" :label="$t('shop.orderCode')" prop="SN" min-width="120px" style="white-space: pre-wrap;">
+				<template slot-scope="{row}">
+					<span style="white-space: pre-wrap; display: inline-block; word-break: break-all;">{{ row.ORDER_SN }}</span>
+				</template>
+			</el-table-column>
+			<el-table-column align="center" :label="$t('shop.memberCode')" prop="USER_NAME" min-width="150px"></el-table-column>
+			<el-table-column align="center" :label="$t('shop.memberName')" prop="REAL_NAME" min-width="150px">
+				<template slot-scope="{row}">
+					<span style="white-space: pre-wrap; display: inline-block; min-width: 120px; word-break: break-all;">{{ row.REAL_NAME }}</span>
+				</template>
+			</el-table-column>
+			<el-table-column align="center" :label="$t('shop.recipientName')" prop="CONSIGNEE" min-width="150px">
+				<template slot-scope="{row}">
+					<span style="white-space: pre-wrap; display: inline-block; min-width: 120px; word-break: break-all;">{{ row.CONSIGNEE }}</span>
+				</template>
+			</el-table-column>
+			<el-table-column align="center" :label="$t('shop.phoneNumber')" prop="MOBILE" min-width="130px"></el-table-column>
+			<el-table-column align="center" :label="$t('shop.shippingAddress')" prop="FULL_ADDRESS" min-width="140px">
+				<template slot-scope="{row}">
+					<span>{{ row.FULL_ADDRESS }}</span>
+				</template>
+			</el-table-column>
+			<el-table-column align="center" :label="$t('shop.payment')" prop="PAY_TYPE" min-width="100px"></el-table-column>
+			<el-table-column align="center" :label="$t('shop.createdTime')" prop="CREATED_AT" min-width="110px">
+				<template slot-scope="{row}">
+					<span>{{ row.CREATED_AT | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
+				</template>
+			</el-table-column>
+			<el-table-column align="center" :label="$t('shop.payTime')" prop="PAY_AT" min-width="110px">
+				<template slot-scope="{row}">
+					<span>{{ row.PAY_AT | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
+				</template>
+			</el-table-column>
+			<el-table-column align="center" :label="$t('shop.payStatus')" prop="STATUS" min-width="110px">
 				<template slot-scope="{row}">
-					<span>{{ row.DEC_SN }}</span>
+					<el-tag :type="row.STATUS | statusFilter">
+						{{ row.STATUS }}
+					</el-tag>
 				</template>
 			</el-table-column>
-      <el-table-column width="190px" align="center" :label="$t('shop.orderCode')" prop="ORDER_SN">
-        <template slot-scope="{row}">
-          <span>{{ row.ORDER_SN }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column width="120px" align="center" :label="$t('shop.memberCode')" prop="USER_NAME">
-        <template slot-scope="{row}">
-          <span>{{ row.USER_NAME }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column width="250px" align="center" :label="$t('shop.memberName')" prop="REAL_NAME">
-        <template slot-scope="{row}">
-          <span>{{ row.REAL_NAME }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column width="150px" align="center" :label="$t('shop.shippingAddress')" prop="FULL_ADDRESS">
-        <template slot-scope="{row}">
-          <span>{{ row.FULL_ADDRESS }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column width="130px" align="center" :label="$t('shop.sponsorCode')" prop="CON_USER_NAME">
-        <template slot-scope="{row}">
-          <span>{{ row.CON_USER_NAME }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column width="150px" align="center" :label="$t('shop.createdTime')" prop="CREATED_AT">
-        <template slot-scope="{row}">
-          <span>{{ row.CREATED_AT | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column class-name="status-col" align="center" width="100" :label="$t('shop.payStatus')" prop="STATUS">
-        <template slot-scope="{row}">
-          <el-tag :type="row.STATUS | statusFilter">
-            {{ row.STATUS }}
-          </el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column width="100px" align="center" :label="$t('shop.action')" class-name="small-padding fixed-width">
-        <template slot-scope="{row}">
-          <el-button type="primary" size="mini" @click="handleDownload(row.ORDER_SN)">{{ $t('shop.download') }}</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+			<el-table-column align="center" :label="$t('shop.action')" class-name="small-padding fixed-width">
+				<template slot-scope="{row}">
+					<el-button type="text" size="mini" @click="handleDownload(row.ORDER_SN)">{{ $t('shop.download') }}</el-button>
+				</template>
+			</el-table-column>
+		</el-table>
 
-    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
-  </div>
+		<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize" @pagination="getList" />
+	</div>
 </template>
 
 <script>
-import {fetchDecOrderList, downloadDecOrder} from '@/api/shop'
+import {downloadDecOrder, fetchDecOrderList} from '@/api/shop'
 import waves from '@/directive/waves'
 import tool from '@/utils/tool'
 import Pagination from '@/components/Pagination'
+import {formatAmount, getScreenWidth} from "@/utils"
 
 export default {
-  name: 'decOrderList',
-  components: { Pagination },
-  directives: { waves },
-  filters: {
-    bvFilter(row) {
-      return tool.calculateBV(row.REAL_PV, row.BUY_NUMS)
-    },
-    statusFilter(status) {
-      const statusMap = {
-        Unpaid: 'info',
-        Paid: 'success'
-      }
-      return statusMap[status]
-    }
-  },
-  data() {
-    return {
-      tableKey: 0,
-      list: null,
-      total: 0,
-      listLoading: true,
-      downloadLoading: false,
-      listQuery: {
-        page: 1,
-        pageSize: 20
-      }
-    }
-  },
-  created() {
-    // 订单列表查询
-    this.getList()
-  },
-  methods: {
-    getList() {
-      this.listLoading = true
-      fetchDecOrderList(this.listQuery).then(response => {
-        this.list = response.data.list
-        this.total = response.data.totalCount
+	name: 'orderList',
+	components: { Pagination },
+	directives: { waves },
+	filters: {
+		bvFilter(row) {
+			return tool.calculateBV(row.REAL_PV, row.BUY_NUMS)
+		},
+		taxAmountFilter(row) {
+			return tool.calculateTax(row.REAL_PRICE, row.BUY_NUMS)
+		},
+		priceAmountFilter(row) {
+			return tool.formatPrice(row.REAL_PRICE, row.BUY_NUMS)
+		},
+		amountFilter(amount) {
+			return formatAmount(amount)
+		},
+		statusFilter(status) {
+			const statusMap = {
+				Unpaid: 'info',
+				Paid: 'success'
+			}
+			return statusMap[status]
+		}
+	},
+	data() {
+		return {
+			tableKey: 0,
+			total: 0,
+			tableData: [],
+			listLoading: true,
+			downloadLoading: false,
+			listQuery: {
+				v: 2,
+				page: 1,
+				pageSize: 20
+			},
+			childrenNode: [],
+			screenWidth: getScreenWidth() > 600 ? '500px' : getScreenWidth() + 'px',
+			labelPosition: getScreenWidth() > 600 ? 'right' : 'top',
+		}
+	},
+	created() {
+		this.getList()
+	},
+	methods: {
+		getList() {
+			this.listLoading = true
+			fetchDecOrderList(this.listQuery).then(response => {
+				this.tableData = response.data.list
+				this.total = +response.data.totalCount
 
-        setTimeout(() => {
-          this.listLoading = false
-        }, 1.5 * 1000)
-      })
-    },
-    handleDownload(orderSn) {
-      this.downloadLoading = true
+				setTimeout(() => {
+					this.listLoading = false
+				}, 0.5 * 1000)
+			})
+		},
+		handleDownload(orderSn) {
+			this.downloadLoading = true
 			downloadDecOrder(orderSn).then(response => {
-        const { fileUrl, targetName } = response.data
-        const downloadElement = document.createElement('a')
-        downloadElement.target = '_blank'
-        downloadElement.href = process.env.VUE_APP_BASE_API + '/' + fileUrl
-        downloadElement.download = targetName
-        downloadElement.click()
-      })
+				const { fileUrl, targetName } = response.data
+				const downloadElement = document.createElement('a')
+				downloadElement.target = '_blank'
+				downloadElement.href = process.env.VUE_APP_BASE_API + '/' + fileUrl
+				downloadElement.download = targetName
+				downloadElement.click()
+			})
 
-      this.downloadLoading = false
-    }
-  }
+			this.downloadLoading = false
+		},
+	}
 }
 </script>
+
+<style>
+.el-table th.el-table__cell > .cell {
+	white-space: nowrap;
+}
+
+.el-table td.el-table__cell > .cell {
+	word-break: keep-all;
+	white-space: pre-wrap;
+}
+</style>