digital-medicine-front/src/views/cdt/orders/index.vue

<template>
    <div class="p-3">
        <div class="bg-fff flex1 ov-hd d-flex flex-cln">
            <div class="pd-16 border-bottom">
                <div class="f-s-20 c-333 f-w-7 mb-12">订单管理</div>
                <searchTabs v-model="queryParams.status" @change="handleQuery" :list="tabs"></searchTabs>
            </div>
            <div class="flex1 ov-hd pd-16 d-flex flex-cln">
                <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="auto">
                    <el-form-item label="订单号：" prop="orderNo">
                        <el-input v-model="queryParams.orderNo" placeholder="搜订单号" clearable style="width: 180px" @keyup.enter="handleQuery" />
                    </el-form-item>
                    <el-form-item label="下单时间段" prop="dateRange">
                        <div class="d-flex" style="width: 180px">
                            <DateRange v-model="queryParams.dateRange" v-model:start-date="queryParams.startDate" v-model:end-date="queryParams.endDate" @change="handleQuery"></DateRange>
                        </div>
                    </el-form-item>
                    <el-form-item label="套餐名称：" prop="packageName">
                        <el-input v-model="queryParams.packageName" placeholder="请输入套餐名称关键字" clearable style="width: 160px" @keyup.enter="handleQuery" />
                    </el-form-item>
                    <el-form-item label="会员等级" prop="vipLevel">
                        <el-select style="width: 160px" v-model="queryParams.vipLevel" clearable placeholder="请选择会员等级" @change="handleQuery">
                            <el-option v-for="item in vip_level" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="买家名称：" prop="cpyName">
                        <el-input v-model="queryParams.cpyName" placeholder="搜买家名称及关键字" clearable style="width: 160px" @keyup.enter="handleQuery" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
                <div class="flex1 ov-hd">
                    <vxe-table :loading="loading" border :data="list" min-height="0" max-height="100%">
                        <!-- 序号 -->
                        <vxe-column type="seq" width="60" title="序号" fixed="left" align="center" />
                        <vxe-column title="订单号" field="orderNo" fixed="left" min-width="100" :formatter="colNoData" />
                        <vxe-column title="套餐名称" min-width="100">
                            <template #default="{ row }">{{ row?.testOrderDetailList[0]?.packageName }}</template>
                        </vxe-column>
                        <vxe-column title="买家" field="cpyName" min-width="100" :formatter="colNoData" />
                        <vxe-column title="会员等级" field="vipLevelName" min-width="100" :formatter="colNoData" />
                        <vxe-column title="检测项目" min-width="200">
                            <template #default="{ row }">
                                <div>
                                    {{ row?.testOrderDetailList[0]?.itemNames }}等{{ row?.testOrderDetailList[0]?.itemCount }}项
                                    <el-button @click="queryRowItems(row?.testOrderDetailList[0])" type="primary" text>点击查看详情{{ '>' }}</el-button>
                                </div>
                            </template>
                        </vxe-column>
                        <vxe-column title="检测周期" width="90">
                            <template #default="{ row }">{{ row?.testOrderDetailList[0]?.period }}个工作日</template>
                        </vxe-column>
                        <vxe-column title="实付款" width="90">
                            <template #default="{ row }">{{ row?.totalAmount }}元</template>
                        </vxe-column>
                        <vxe-column title="下单人" field="createName" width="90" :formatter="colNoData" />
                        <vxe-column title="下单时间" field="createTime" width="130" :formatter="colNoData" />
                        <vxe-column title="订单状态" width="100" fixed="right">
                            <template #default="{ row }">
                                <div class="c-primary">{{ selectDictLabel(test_order_status_bg, row?.status) }}</div>
                            </template>
                        </vxe-column>
                        <vxe-column title="订单备注" field="remark" min-width="100" fixed="right" :formatter="colNoData" />
                        <vxe-column title="操作" width="260" fixed="right">
                            <template #default="{ row }">
                                <el-button @click="EidtRemark(row)" text class="small-btn-font" type="primary" size="small">添加备注</el-button>
                                <template v-if="row?.status === '0' && row?.payType === '2'">
                                    <span></span>
                                    <el-button @click="confirmPay(row)" text class="small-btn-font" type="primary" size="small">确认付款</el-button>
                                </template>
                                <template v-if="row?.status === '4'">
                                    <span></span>
                                    <el-button @click="clickRowReport(row)" text class="small-btn-font" type="primary" size="small">上传报告</el-button>
                                </template>
                                <template v-if="row?.status === '5'">
                                    <span></span>
                                    <el-button @click="clickRownvoice(row)" text class="small-btn-font" type="primary" size="small">上传发票</el-button>
                                </template>
                                <span></span>
                                <el-button @click="router.push({ path: 'orders-detail', query: { orderId: row?.id} })" style="color: #0079fe;" text class="small-btn-font" type="primary" size="small">查看详情</el-button>
                            </template>
                        </vxe-column>
                    </vxe-table>
                </div>
            </div>
            <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
            <div class="pd-5"></div>
        </div>
    </div>
    <rowItems v-if="showRowItems" v-model:show="showRowItems" :packageId="rowId"></rowItems>
    <EditOrderRemark v-if="showRemark" v-model:show="showRemark" :info="rowInfo" @success="getList();getTabsCount()"></EditOrderRemark>
    <uploadReportForm v-if="showReport" v-model:show="showReport" :info="rowInfo" @success="getList();getTabsCount()"></uploadReportForm>
    <uploadInvoiceForm v-if="showInvoice" v-model:show="showInvoice" :info="rowInfo" @success="getList();getTabsCount()"></uploadInvoiceForm>
</template>
<script setup name="orders" lang="ts">
import { testOrderConfirmPay, testOrderList, testOrderListCount } from '@/api/cdt/orders';
import { colNoData } from '@/utils/noData';
import { DateRange, searchTabs } from '@/views/models';
import NP from 'number-precision';
import { EditOrderRemark, rowItems, uploadReportForm, uploadInvoiceForm } from '../models';
import { debounce } from 'lodash';
import { selectDictLabel } from '@/utils/ruoyi';
const router = useRouter();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { dm_package_type, dm_permit_type, vip_level, test_order_status_bg } = toRefs<any>(proxy?.useDict('dm_package_type', 'dm_permit_type', 'vip_level', 'test_order_status_bg'));
const queryParams = ref<any>({
    pageNum: 1,
    pageSize: 10,
    status: '2',
    dateRange: []
});
const queryFormRef = ref<any>();
const showRowItems = ref(false);
const showReport = ref(false);
const showInvoice = ref(false);
const loading = ref(false);
const total = ref(0);
const list = ref<any>([]);
const getList = debounce(async () => {
    loading.value = true;
    const res = await testOrderList(queryParams.value);
    if (!res || res.code !== 200) return;
    list.value = res.rows;
    total.value = res.total;
    loading.value = false;
}, 500);
const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getList();
};
const resetQuery = () => {
    queryFormRef.value?.resetFields();
    handleQuery();
};
const rowId = ref('');
const queryRowItems = (row: any) => {
    rowId.value = row?.packageId;
    showRowItems.value = true;
};
// 获取tabs统计数据
const tabs = ref<any[]>([]);
const getTabsCount = debounce(async () => {
    const res = await testOrderListCount();
    if (!res || res.code !== 200) return;
    // this.tabsList = res.rows;
    tabs.value = res.data.map(({ status, statusCount }: any) => ({ label: selectDictLabel(test_order_status_bg.value, status), value: status, count: statusCount }));
}, 500);
// 添加备注
const rowInfo = ref<any>({});
const showRemark = ref(false);
const EidtRemark = (row: any) => {
    rowInfo.value = row;
    showRemark.value = true;
};
// 上传报告
const clickRowReport = (row: any) => {
    rowInfo.value = row;
    showReport.value = true;
};
// 上传发票
const clickRownvoice = (row: any) => {
    rowInfo.value = row;
    showInvoice.value = true;
};
// 确认付款方法
const confirmPay = async (row: any) => {
    // 确认付款弹框
    ElMessageBox({
        title: '支付提示',
        cancelButtonText: '取消',
        confirmButtonText: '确认付款',
        showCancelButton: true,
        confirmButtonClass: 'el-button--danger',
        message: h('p', null, [h('div', null, `是否确认付款订单号：${row.orderNo}设置为已支付状态吗？`), h('div', null, [h('span', null, '注意：'), h('span', { style: 'color: #F56C6C' }, '确认付款后，代表该订单对公转账为已支付，请仔细核对！')])]),
        callback: async (action: string) => {
            if (action === 'confirm') {
                const res = await testOrderConfirmPay(row.id);
                if (res) {
                    ElMessage.success('操作成功');
                    getList();
                    getTabsCount();
                }
            }
        }
    });
};
onMounted(() => {
    getList();
    getTabsCount()
});
</script>