<template>
|
<div class="app-container">
|
<el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true">
|
<el-form-item label="订单号" prop="orderNo">
|
<el-input v-model="queryParams.orderNo" placeholder="请输入订单号" clearable style="width: 200px" @keyup.enter="getDataList"></el-input>
|
</el-form-item>
|
<el-form-item label="购买人" prop="buyName">
|
<el-input v-model="queryParams.buyName" placeholder="请输入购买人名称" clearable style="width: 200px" @keyup.enter="getDataList"></el-input>
|
</el-form-item>
|
<el-form-item label="支付方式" prop="payType">
|
<el-select v-model="queryParams.payType" placeholder="支付方式" clearable style="width: 200px">
|
<el-option v-for="dict in pay_type" :key="dict.value" :label="dict.label" :value="dict.value" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="订单状态" prop="orderState">
|
<el-select v-model="queryParams.orderState" placeholder="订单状态" clearable style="width: 200px">
|
<el-option v-for="dict in orderState" :key="dict.value" :label="dict.label" :value="dict.value" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="审核状态" prop="checkState">
|
<el-select v-model="queryParams.checkState" placeholder="审核状态" clearable style="width: 200px">
|
<el-option v-for="dict in check_state" :key="dict.value" :label="dict.label" :value="dict.value" />
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" icon="Search" @click="getDataList">搜索</el-button>
|
<el-button 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="primary" plain :disabled="power.add" @click="handleRate">解冻</el-button>
|
</el-col>
|
<el-col :span="1.5">
|
<el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
|
</el-col> -->
|
<right-toolbar v-model:showSearch="showSearch" @queryTable="getDataList"></right-toolbar>
|
</el-row>
|
<el-table v-loading="tableOption.loading" :data="dataTable" @cell-dblclick="handleInfo">
|
<el-table-column type="index" width="50" />
|
<el-table-column label="订单号" align="center" key="orderNo" prop="orderNo" width="180" />
|
<el-table-column label="购买人" align="center" key="buyName" prop="buyName" width="150" />
|
<el-table-column label="推荐人" align="center" key="recommendName" prop="recommendName" width="150" />
|
<el-table-column label="订单类型" align="center" width="100">
|
<template #default="scope">
|
<span>{{ dispOrderType(scope.row.orderType) }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="订单状态" align="center" width="100">
|
<template #default="scope">
|
<span>{{ dispOrderState(scope.row.orderState) }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="支付方式" align="center" width="100">
|
<template #default="scope">
|
<span>{{ dispPayType(scope.row.payType) }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="订单金额" align="center" key="orderMoney" prop="orderMoney" width="120" />
|
<el-table-column label="支付金额" align="center" key="money" prop="money" width="120" />
|
<el-table-column label="余额" align="center" key="balance" prop="balance" width="120" />
|
<el-table-column label="灵玉" align="center" key="integral" prop="integral" width="120" />
|
<el-table-column label="下单时间" align="center" key="addTime" prop="addTime" width="200" />
|
<el-table-column label="支付时间" align="center" key="payTime" prop="payTime" width="200" />
|
<el-table-column label="审核状态" align="center" width="100">
|
<template #default="scope">
|
<span>{{ dispCheckState(scope.row.checkState) }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="审核人" align="center" key="checkName" prop="checkName" width="200" />
|
<el-table-column label="审核时间" align="center" key="checkTime" prop="checkTime" width="200" />
|
<el-table-column label="审核备注" align="center" key="orderRemark" prop="orderRemark" width="200" />
|
<el-table-column label="订单备注" align="center" key="orderRemark" prop="orderRemark" width="250" />
|
</el-table>
|
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getDataList" />
|
<el-dialog title="订单详情" v-model="isOpenInfo" width="1000px" draggable :close-on-click-modal="false">
|
<el-descriptions :column="3">
|
<el-descriptions-item label="订单号">{{ dataInfo.orderNo }}</el-descriptions-item>
|
<el-descriptions-item label="推荐人">{{ dataInfo.recommendName }}</el-descriptions-item>
|
<el-descriptions-item label="购买人">{{ dataInfo.buyName }}</el-descriptions-item>
|
<el-descriptions-item label="订单类型">{{ dispOrderType(dataInfo.orderType) }}</el-descriptions-item>
|
<el-descriptions-item label="订单状态">{{ dispOrderState(dataInfo.orderState) }}</el-descriptions-item>
|
<el-descriptions-item label="支付方式">{{ dispPayType(dataInfo.payType) }}</el-descriptions-item>
|
<el-descriptions-item label="订单金额">{{ dataInfo.orderMoney }}</el-descriptions-item>
|
<el-descriptions-item label="支付金额">{{ dataInfo.money }}</el-descriptions-item>
|
<el-descriptions-item label="余额">{{ dataInfo.balance }}</el-descriptions-item>
|
<el-descriptions-item label="灵玉">{{ dataInfo.integral }}</el-descriptions-item>
|
<el-descriptions-item label="支付金额">{{ dataInfo.money }}</el-descriptions-item>
|
<el-descriptions-item label="支付时间">{{ dataInfo.payTime }}</el-descriptions-item>
|
<el-descriptions-item label="下单时间">{{ dataInfo.addTime }}</el-descriptions-item>
|
<el-descriptions-item label="审核状态">{{ dispCheckState(dataInfo.checkState) }}</el-descriptions-item>
|
<el-descriptions-item label="审核人">{{ dataInfo.checkName }}</el-descriptions-item>
|
<el-descriptions-item label="审核时间" v-if="dataInfo.checkState == '3' || dataInfo.checkState == '4'">{{ dataInfo.checkTime }}</el-descriptions-item>
|
<el-descriptions-item label="审核备注" v-if="dataInfo.checkState == '3' || dataInfo.checkState == '4'">{{ dataInfo.checkRemark }}</el-descriptions-item>
|
<el-descriptions-item label="订单备注">{{ dataInfo.orderRemark }}</el-descriptions-item>
|
</el-descriptions>
|
<el-row v-if="dataInfo.payType == '3'">
|
<el-col :span="2">支付凭证</el-col>
|
<el-col :span="20">
|
<div style="display: flex">
|
<ImagePreview :src="dataInfo.payImg" width="60px" height="60px"></ImagePreview>
|
</div>
|
</el-col>
|
</el-row>
|
</el-dialog>
|
</div>
|
</template>
|
<script setup lang="ts">
|
import { reactive, onMounted, toRefs, ref, getCurrentInstance } from "vue";
|
import { GetDataList, GetDataInfo } from "@/api/orders/index";
|
import type { FormInstance } from "element-plus";
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
const { order_type, check_state, pay_type } = proxy.useDict("order_type", "check_state", "pay_type");
|
const state = reactive({
|
dataTable: [] as any[], //数据列表
|
total: 0, //总条数
|
tableOption: {
|
//表格配置
|
loading: true,
|
},
|
power: {
|
//操作权限
|
add: false,
|
single: false, //
|
multiple: true, //
|
},
|
dataInfo: {} as any, //数据详情
|
showSearch: true, //是否显示分类
|
isOpenInfo: false,
|
isOpenRate: false,
|
});
|
const { dataTable, total, tableOption, power, showSearch, isOpenInfo, dataInfo } = toRefs(state);
|
|
onMounted(() => {
|
getDataList();
|
});
|
|
const orderState = [
|
{ label: "待支付", value: "1" },
|
{ label: "待发货", value: "2" },
|
{ label: "待收货", value: "3" },
|
{ label: "已完成", value: "4" },
|
{ label: "已取消", value: "5" },
|
];
|
|
//#region commonDisp
|
|
/**
|
* 订单状态
|
* @param e
|
*/
|
const dispOrderState = (e: string) => {
|
return orderState.find((f) => f.value == e)?.label;
|
};
|
|
/**
|
* 订单类型
|
* @param e
|
*/
|
const dispOrderType = (e: string) => {
|
let stt = order_type.value.find((f: Dict.dictType) => f.value == e);
|
return stt ? stt.label : "";
|
};
|
|
/**
|
* 审核状态
|
* @param e
|
*/
|
const dispCheckState = (e: string) => {
|
let stt = check_state.value.find((f: Dict.dictType) => f.value == e);
|
return stt ? stt.label : "";
|
};
|
|
/**
|
* 支付方式
|
* @param e
|
*/
|
const dispPayType = (e: string) => {
|
let stt = pay_type.value.find((f: Dict.dictType) => f.value == e);
|
return stt ? stt.label : "";
|
};
|
|
//#endregion
|
|
//#region 查询
|
|
const queryRef = ref<FormInstance>();
|
const queryParams = reactive({
|
//查询配置参数
|
pageNum: 1,
|
pageSize: 10,
|
buyName: "", //购买人
|
payType: "", //支付方式
|
orderNo: "", //订单号
|
orderType: 1,
|
checkState: "", //审核状态
|
orderState: "",
|
});
|
/**
|
* 获取数据列表
|
*/
|
const getDataList = async () => {
|
// if (queryParams.shopState == 0) queryParams.shopState = "";
|
await GetDataList(queryParams).then((res) => {
|
if (res.code == 200) {
|
state.dataTable = res.rows;
|
state.total = res.total;
|
state.tableOption.loading = false;
|
}
|
});
|
};
|
|
/**
|
* 重置
|
*/
|
const resetQuery = () => {
|
queryRef.value!.resetFields();
|
};
|
|
//#endregion
|
|
//#region 详情
|
|
/**
|
* 查看详情
|
*/
|
const handleInfo = (e: any) => {
|
getDataInfo(e.id, () => {
|
state.isOpenInfo = true;
|
});
|
};
|
|
/**
|
* 查看详情
|
*/
|
const getDataInfo = (e: number, f: () => void) => {
|
GetDataInfo(e).then((res) => {
|
if (res.code == 200) {
|
state.dataInfo = res.data;
|
f();
|
}
|
});
|
};
|
//#endregion
|
</script>
|
|
<style scoped lang="scss">
|
.el-table :deep(.danger-row) {
|
--el-table-tr-bg-color: var(--el-color-danger-light-9);
|
}
|
._el-row {
|
padding: 5px 0px;
|
border-bottom: 1px solid var(--el-border-color);
|
// margin-left: 20px;
|
align-items: center;
|
|
.el-input__wrapper {
|
padding: 0px !important;
|
}
|
}
|
// .td {
|
// overflow: hidden;
|
// }
|
// :deep(.el-descriptions__table) {
|
// table-layout: fixed;
|
// }
|
:deep(.el-descriptions__cell) {
|
padding: 8px 0px !important;
|
}
|
// .custom-item-sty {
|
// color: #333;
|
// padding: 8px 0px;
|
// font-weight: bold;
|
// overflow-x: hidden;
|
// }
|
</style>
|
