订单列表展示优化

application/admin/view/order_main/index.html

@@ -94,19 +94,63 @@
 
         <el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark"
                   style="font-size:12px;width: 100%;margin-top: 12px">
-            <el-table-column prop="id" label="订单ID" min-width="40" ></el-table-column>
+            <el-table-column prop="id" label="订单ID" min-width="30" ></el-table-column>
             <el-table-column prop="commissioner" label="专员" min-width="40" ></el-table-column>
-            <el-table-column prop="channel_name" label="渠道" min-width="80" ></el-table-column>
-            <el-table-column prop="channel_order_no" label="渠道订单号" min-width="90" ></el-table-column>
+            <el-table-column prop="channel_order_no" label="渠道" min-width="120" >
+                <template slot-scope="scope">
+                    <div><i class="el-icon-user" v-html="scope.row.channel_name"></i></div>
+                    <div><i class="el-icon-tickets" v-html="scope.row.channel_order_no"></i></div>
+                </template>
+            </el-table-column>
             <el-table-column prop="create_id" label="下单人" min-width="50" :formatter="getUserName"></el-table-column>
-            <el-table-column prop="user_name" label="用户名称" min-width="50" ></el-table-column>
-            <el-table-column prop="user_phone" label="手机号" min-width="60" ></el-table-column>
-            <el-table-column prop="total_amount" label="总金额" min-width="40" ></el-table-column>
+            <el-table-column prop="user_name" label="用户" min-width="80" >
+                <template slot-scope="scope">
+                    <div><i class="el-icon-user-solid" v-html="scope.row.user_name"></i></div>
+                    <div><i class="el-icon-phone" v-html="scope.row.user_name"></i></div>
+                </template>
+            </el-table-column>
+            <el-table-column prop="total_amount" label="金额" min-width="80" >
+                <template slot-scope="scope">
+                    <div v-html="'金额:'+scope.row.total_amount"></div>
+                    <div v-html="'成本:'+scope.row.cost_amount"></div>
+                </template>
+            </el-table-column>
             <el-table-column prop="order_status" label="状态" min-width="40" :formatter="getOrderMainStatus"></el-table-column>
             <el-table-column prop="create_time" label="下单时间" min-width="80" ></el-table-column>
-            <el-table-column prop="receipt_order_id" label="收款单ID" min-width="40" ></el-table-column>
-            <el-table-column prop="receipt_order_name" label="收款单名称" min-width="80" ></el-table-column>
-            <el-table-column label="操作" min-width="180">
+            <el-table-column prop="create_time" label="结束时间" min-width="90" >
+                <template slot-scope="scope">
+                    <div v-if="scope.row.success_time"><i class="el-icon-success" v-html="scope.row.success_time"></i></div>
+                    <div v-if="scope.row.cancel_time"><i class="el-icon-delete-solid" v-html="scope.row.cancel_time"></i></div>
+                </template>
+            </el-table-column>
+            <el-table-column prop="receipt_order_name" label="收款单" min-width="80" >
+                <template slot-scope="scope">
+                    <div v-if="scope.row.receipt_order_id!=0">
+                        <div v-html="scope.row.receipt_order_id"></div>
+                        <div v-html="scope.row.receipt_order_name"></div>
+                    </div>
+                </template>
+            </el-table-column>
+            <el-table-column prop="receipt_order_status" label="收款单状态" min-width="50" :formatter="getReceiptOrderStatus">
+                <template slot-scope="scope">
+                    <div v-if="scope.row.receipt_order_id!=0" >
+                        <div v-html="getReceiptOrderStatus(scope.row)" ></div>
+                    </div>
+                </template>
+            </el-table-column>
+            <el-table-column prop="receipt_order_name" label="备注" min-width="80" >
+                <template slot-scope="scope">
+                    <el-popover
+                            placement="top-start"
+                            title=""
+                            width="200"
+                            trigger="hover"
+                            :content="scope.row.order_memo">
+                        <div slot="reference" v-html="scope.row.order_memo" style="overflow:hidden;white-space: nowrap;"></div>
+                    </el-popover>
+                </template>
+            </el-table-column>
+            <el-table-column label="操作" min-width="70">
                 <template slot-scope="scope">
                     <el-button-group>
                         <el-button type="primary" size="mini" @click="edit(scope.row.id)" icon="el-icon-edit">编辑</el-button>
@@ -276,6 +320,14 @@
             },
         },
         methods: {
+            getReceiptOrderStatus(info){
+                for (let i = 0; i < this.receiptStatus.length; i++) {
+                    if (this.receiptStatus[i].id == info.receipt_order_status) {
+                        return this.receiptStatus[i].name
+                    }
+                }
+                return "-"
+            },
             getChannelList(){
                 axios.post("/hotel.php/cf_channel_info/getList", this.search).then((response) => {
                     console.log(response)