wash_server_v2/admin-ui/src/views/order/serviceOrder/lifeServicesOrder.vue

<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" @submit.native.prevent :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item label="订单编号" prop="orderNo">
                <el-input v-model="queryParams.orderNo" placeholder="请输入订单编号" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="订单状态" prop="orderStatus">
                <el-select v-model="queryParams.orderStatus" placeholder="请选择支付状态" clearable>
                    <el-option v-for="dict in dict.type.order_goods_status" :key="dict.value" :label="dict.label" :value="dict.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="客户姓名" prop="realName">
                <el-input v-model="queryParams.realName" placeholder="请输入客户姓名" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="手机号" prop="phoneNumber">
                <el-input v-model="queryParams.phoneNumber" placeholder="请输入手机号" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="支付时间">
                <el-date-picker clearable v-model="queryPayTime" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="getPayTime"> </el-date-picker>
            </el-form-item>
            <el-form-item label="下单时间">
                <el-date-picker clearable v-model="queryCreateTime" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="getCreateTime"> </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <!--            <el-col :span="1.5">-->
            <!--                <el-button type="warning" plain icon="el-icon-download" @click="handleExport" v-hasPermi="['order:goods:export']" v-if="userInfoVO.userType == '00'">导出</el-button>-->
            <!--            </el-col>-->
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <Page uri="/mapi/order/goods/list" :request-params="queryParams" ref="pagination">
            <el-table-column label="订单编号" align="center" prop="orderNo" width="150px" />
            <el-table-column label="客户信息" align="center" width="150">
                <template slot-scope="scope">
                    <span>{{ scope.row.realName ? scope.row.realName : '--' }}</span>
                    <br />
                    <span>{{ scope.row.phoneNumber ? scope.row.phoneNumber : '' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="预约时间" align="center" prop="appointmentTime" width="150px">
                <template slot-scope="scope">
                    {{ scope.row.appointmentTime ? scope.row.appointmentTime : '--' }}
                </template>
            </el-table-column>
            <el-table-column label="订单总价" align="center" prop="totalPrice" width="100px" />
            <el-table-column label="抵扣金额" align="center" prop="deductAmount" width="100px">
                <template slot-scope="scope">
                    {{ scope.row.deductAmount ? scope.row.deductAmount : '--' }}
                </template>
            </el-table-column>
            <el-table-column label="支付金额" align="center" prop="payAmount" width="100px" />
            <el-table-column label="支付方式" align="center" prop="payType" width="100px">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.recharge_pay_type" :value="scope.row.payType" />
                </template>
            </el-table-column>
            <el-table-column label="订单状态" align="center" prop="orderStatus">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.order_goods_status" :value="scope.row.orderStatus" />
                </template>
            </el-table-column>
            <el-table-column label="下单时间" align="center" prop="createTime" width="150px" />
            <el-table-column label="支付时间" align="center" prop="payTime" width="150px">
                <template slot-scope="scope">
                    {{ scope.row.payTime ? scope.row.payTime : '--' }}
                </template>
            </el-table-column>

            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="200">
                <template slot-scope="scope">
                    <el-button type="text" icon="el-icon-chat-dot-square" @click="orderDetail(scope.row)">订单详情</el-button>
                    <el-button type="text" icon="el-icon-check" @click="btn_receiving(scope.row)" v-if="scope.row.orderStatus == '1'">接单</el-button>
                    <el-button type="text" icon="el-icon-check" @click="btn_confirm(scope.row)" v-if="scope.row.orderStatus == '2'">确认</el-button>
                </template>
            </el-table-column>
        </Page>
        <!--    详情-->
        <el-dialog :title="detailTitle" :visible.sync="openDetail" width="80%" append-to-body>
            <el-card>
                <el-descriptions title="客户信息" v-show="detailView" :column="3" border :label-style="{ 'text-align': 'center' }" :contentStyle="{ 'text-align': 'center' }">
                    <el-descriptions-item label="客户姓名">{{ detailView.realName }}</el-descriptions-item>
                    <el-descriptions-item label="客户手机号">{{ detailView.phoneNumber }}</el-descriptions-item>
                    <el-descriptions-item label="订单状态">
                        <dict-tag :options="dict.type.order_goods_status" :value="detailView.orderStatus" />
                    </el-descriptions-item>
                    <el-descriptions-item label="收货联系人">{{ detailView.contactName ? detailView.contactName : '暂无信息' }}</el-descriptions-item>
                    <el-descriptions-item label="收货人手机号">{{ detailView.contactPhone ? detailView.contactPhone : '暂无信息' }}</el-descriptions-item>
                    <el-descriptions-item label="下单时间">{{ detailView.createTime ? detailView.createTime : '暂无信息' }}</el-descriptions-item>
                    <el-descriptions-item label="支付时间">{{ detailView.payTime ? detailView.payTime : '暂无信息' }}</el-descriptions-item>
                    <!--          <el-descriptions-item label="发货时间">{{detailView.sendTime?detailView.sendTime:'暂无信息'}}</el-descriptions-item>-->
                    <el-descriptions-item label="预约时间">{{ detailView.appointmentTime ? detailView.appointmentTime : '暂无信息' }}</el-descriptions-item>
                    <el-descriptions-item label="确认收货时间">{{ detailView.finishTime ? detailView.finishTime : '暂无信息' }}</el-descriptions-item>
                    <el-descriptions-item label="订单总价">{{ detailView.totalPrice ? detailView.totalPrice : '暂无信息' }}</el-descriptions-item>
                    <!--          <el-descriptions-item label="物流公司">{{detailView.deliveryCompany?detailView.deliveryCompany:'暂无信息'}}</el-descriptions-item>-->
                    <!--          <el-descriptions-item label="物流单号">{{detailView.totalPrice?detailView.totalPrice:'暂无信息'}}</el-descriptions-item>-->
                    <el-descriptions-item label="收货地址" span="3">{{ detailView.province }}{{ detailView.city }}{{ detailView.area }}{{ detailView.address }}{{ detailView.addressDetail }}</el-descriptions-item>
                    <el-descriptions-item label="备注信息" span="3">{{ detailView.deliveryNo ? detailView.deliveryNo : '暂无信息' }}</el-descriptions-item>
                </el-descriptions>
            </el-card>
            <div class="head-column2">
                <el-table v-loading="detailLoading" :data="detailView.orderGoodsSkuList">
                    <el-table-column label="分类" align="center" prop="goodsCategoryName" />
                    <el-table-column :label="goodsType == 0 ? '商品名称' : '材料名称'" align="center" prop="goodsName" width="250px" />
                    <el-table-column :label="goodsType == 0 ? '商品规格' : '材料规格'" align="center" width="250px">
                        <template slot-scope="scope">
                            <div style="text-align: center">{{ scope.row.skuName.replace(' ', '/') }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="数量" align="center" prop="buyNum" />
                    <el-table-column label="价格（元）" align="center" prop="salePrice" />
                    <el-table-column label="总和（元）" align="center">
                        <template slot-scope="scope">
                            <span>{{ scope.row.buyNum * scope.row.salePrice }}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-row :gutter="10" class="box-shadow" style="margin-top: 10px">
                <el-col :span="21">
                    <el-form label-width="130px" style="height: 80px; padding-top: 20px; text-align: right" :inline="true" size="small">
                        <el-form-item label="总金额（元）:">
                            {{ costTotalPrice }}
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </el-dialog>
    </div>
</template>

<script>
import { getGoods, listGoods, receiveOrder, confirmFinish } from '@/api/order/goods'
import { findUserByPhoneNumber, getUser } from '@/api/app/user'

export default {
    name: 'lifeServicesOrder',
    dicts: ['order_goods_status', 'delivery_company', 'recharge_pay_type'],
    data() {
        return {
            userInfoVO: null,
            //
            orderLoading: true,
            // 遮罩层
            loading: false,
            detailLoading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 弹出层标题
            title: '',
            detailTitle: '',
            // 是否显示弹出层
            open: false,
            openDetail: false,
            openRePayPage: false,
            openDeliveryPage: false,
            // 查询参数
            queryParams: {
                realName: null,
                phoneNumber: null,
                orderNo: null,
                orderStatus: null
            },
            // 表单参数
            payFrom: {},
            // 表单校验
            rules: {},
            goodsType: null,
            // 商品订单表格数据
            GoodsList: [],
            // 可选商品集合
            goodsList: null,
            // 已选商品集合
            addGoodsList: [],
            // 自定义一个计算数量的临时对象集合
            purchaseCountVOList: [],
            // 总金额
            totalPrice: 0,
            // 总件数
            totalCount: 0,
            // 详情数据
            detailView: {},
            // 详情总金额
            costTotalPrice: null,
            appUserInfo: null,
            goodsOrderInfo: null,
            payMoney: null,
            deliveryVo: {
                orderId: null,
                deliveryCompany: null,
                deliveryNo: null
            },
            queryCreateTime: null,
            queryPayTime: null
        }
    },
    created() {
        this.handleUser()
        // this.goodsType = this.getUrlParam('goodsType')
        this.goodsType = '2'
        this.getList()
    },
    computed: {
        calculateTotalCount() {
            this.totalCount = 0
            this.detailView.orderGoodsSkuList.forEach((vo) => {
                this.totalCount = this.totalCount + vo.buyNum
            })
            return this.totalCount
        },
        calculatePayMoney() {
            this.payMoney = this.payFrom.deductAmount ? this.costTotalPrice - this.payFrom.deductAmount : this.costTotalPrice
            return this.payMoney
        }
    },
    methods: {
        handleUser() {
            this.userInfoVO = this.getUserInfo()
        },
        getCreateTime() {
            if (this.queryCreateTime != null) {
                this.queryParams.createTimeFrom = this.queryCreateTime[0]
                this.queryParams.createTimeTo = this.queryCreateTime[1]
            }
        },
        getPayTime() {
            if (this.queryPayTime != null) {
                this.queryParams.beginPayTime = this.queryPayTime[0]
                this.queryParams.endPayTime = this.queryPayTime[1]
            }
        },
        getList() {
            this.queryParams.goodsType = this.goodsType
            this.$nextTick(() => {
                this.$refs.pagination.handleSearch(true)
            })
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1
            this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.queryCreateTime = null
            this.queryParams.createTimeFrom = null
            this.queryParams.createTimeTo = null

            this.queryPayTime = null
            this.queryParams.beginPayTime = null
            this.queryParams.endPayTime = null
            this.resetForm('queryForm')
            this.handleQuery()
        },

        // 订单详情
        orderDetail(row) {
            this.openDetail = true
            this.detailTitle = '订单商品详情'
            this.detailLoading = true
            this.detailView = {}
            const id = row.id
            getGoods(id).then((response) => {
                this.detailView = response.data
                this.costTotalPrice = this.detailView.totalPrice
                this.detailLoading = false
            })
        },

        //接单
        btn_receiving(row) {
            this.$confirm('是否确认接单？')
                .then(() => {
                    const vo = {
                        orderId: row.id
                    }
                    receiveOrder(vo).then((response2) => {
                        this.$modal.msgSuccess('接单成功')
                        this.getList()
                    })
                })
                .catch(() => {})
        },

        //确认订单
        btn_confirm(row) {
            this.$confirm('是否确认完成该订单？')
                .then(() => {
                    const vo = {
                        orderId: row.id
                    }
                    confirmFinish(vo).then((response2) => {
                        this.$modal.msgSuccess('确认完成成功')
                        this.getList()
                    })
                })
                .catch(() => {})
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download(
                'mapi/order/goods/export',
                {
                    ...this.queryParams,
                    ...{ goodsType: this.goodsType }
                },
                `goods_order_${new Date().getTime()}.xlsx`
            )
        }
    }
}
</script>
<style>
.list_title {
    text-align: center;
    line-height: 40px;
}
.head-container-two {
    height: 500px;
    display: block;
    overflow-y: scroll;
}
.head-column1 {
    height: 300px;
    display: block;
    overflow-y: scroll;
}
.head-column2 {
    height: 600px;
    display: block;
    overflow-y: scroll;
}
.box-shadow .el-button--medium {
    font-size: 18px;
}
</style>