|
|
@@ -0,0 +1,306 @@
|
|
|
+<script setup lang="ts">
|
|
|
+import FormSearch, { type FormField } from "@/components/opts/form-search.vue";
|
|
|
+import TableButtons from "@/components/opts/btns2.vue";
|
|
|
+import Edit from "./edit.vue";
|
|
|
+import { PureTable } from "@pureadmin/table";
|
|
|
+import { computed, onBeforeMount, onMounted, reactive, ref, watch } from "vue";
|
|
|
+import * as $api from "@/api/order/index";
|
|
|
+import { hasAuth } from "@/router/utils";
|
|
|
+import message from "@/utils/message";
|
|
|
+import {enableOptions, payStatusOptions, SelectOption} from "@/constants/constants";
|
|
|
+import { cloneDeep } from "@pureadmin/utils";
|
|
|
+
|
|
|
+const editRef = ref();
|
|
|
+
|
|
|
+defineOptions({
|
|
|
+ name: "orderList"
|
|
|
+});
|
|
|
+
|
|
|
+const props: any = defineProps({
|
|
|
+ mode: {
|
|
|
+ required: false,
|
|
|
+ type: String,
|
|
|
+ default: "table"
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+const searchFormFields = computed((): FormField[] => {
|
|
|
+ const fields: FormField[] = [
|
|
|
+ {
|
|
|
+ type: "select",
|
|
|
+ label: "代理商",
|
|
|
+ prop: "agentId",
|
|
|
+ placeholder: "请选择",
|
|
|
+ dataSourceKey: "enableOptions",
|
|
|
+ options: {
|
|
|
+ keys: {
|
|
|
+ label: "label",
|
|
|
+ value: "value",
|
|
|
+ prop: "value"
|
|
|
+ },
|
|
|
+ filterable: true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ if (props.mode === "table") {
|
|
|
+ return fields;
|
|
|
+ } else {
|
|
|
+ return fields;
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+const pageData: any = reactive({
|
|
|
+ mode: "table",
|
|
|
+ permission: {
|
|
|
+ // query: ["user:query"],
|
|
|
+ // save: ["user:save"],
|
|
|
+ // update: ["user:update"],
|
|
|
+ // del: ["user:del"]
|
|
|
+ },
|
|
|
+ searchParam: {
|
|
|
+ searchState: true,
|
|
|
+ searchForm: {}
|
|
|
+ },
|
|
|
+ dataSource: {
|
|
|
+ enableOptions: []
|
|
|
+ },
|
|
|
+ /*按钮 */
|
|
|
+ btnOpts: {
|
|
|
+ leftBtns: [],
|
|
|
+ rightBtns: [
|
|
|
+ {
|
|
|
+ key: "search",
|
|
|
+ label: "查询",
|
|
|
+ icon: "ep:search",
|
|
|
+ state: true,
|
|
|
+ options: {
|
|
|
+ circle: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: "refresh",
|
|
|
+ label: "刷新",
|
|
|
+ icon: "ep:refresh",
|
|
|
+ state: true,
|
|
|
+ options: {
|
|
|
+ circle: true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ tableParam: {
|
|
|
+ list: [],
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ label: "代理商",
|
|
|
+ prop: "merchantName",
|
|
|
+ slot: "merchantName",
|
|
|
+ width: 220
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "今日总金额",
|
|
|
+ prop: "today.amount.total",
|
|
|
+ slot: "today.amount.total"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "今日支付金额",
|
|
|
+ prop: "today.amount.valid",
|
|
|
+ slot: "today.amount.valid"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "昨日总金额",
|
|
|
+ prop: "yesterday.amount.total",
|
|
|
+ slot: "yesterday.amount.total"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "昨日支付金额",
|
|
|
+ prop: "yesterday.amount.valid",
|
|
|
+ slot: "yesterday.amount.valid"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "本周总金额",
|
|
|
+ prop: "lastWeek.amount.total",
|
|
|
+ slot: "lastWeek.amount.total"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "本周支付金额",
|
|
|
+ prop: "lastWeek.amount.valid",
|
|
|
+ slot: "lastWeek.amount.valid"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "本月总金额",
|
|
|
+ prop: "lastMonth.amount.total",
|
|
|
+ slot: "lastMonth.amount.total"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "本月支付金额",
|
|
|
+ prop: "lastMonth.amount.valid",
|
|
|
+ slot: "lastMonth.amount.valid"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ loading: false,
|
|
|
+ pagination: {
|
|
|
+ pageSize: 10,
|
|
|
+ defaultPageSize: 10,
|
|
|
+ currentPage: 1,
|
|
|
+ background: true,
|
|
|
+ total: 0
|
|
|
+ }
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+const btnClickHandle = (val: string) => {
|
|
|
+ switch (val) {
|
|
|
+ case "add":
|
|
|
+ editRef.value!.open({ enable: 1 }, pageData.dataSource, "add");
|
|
|
+ break;
|
|
|
+ case "update":
|
|
|
+ break;
|
|
|
+ case "search":
|
|
|
+ _updateSearchState();
|
|
|
+ break;
|
|
|
+ case "refresh":
|
|
|
+ _loadData();
|
|
|
+ break;
|
|
|
+ case "switch":
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+/**
|
|
|
+ * 更新搜索表单
|
|
|
+ * @param data .
|
|
|
+ */
|
|
|
+const _updateSearchFormData = (data: any) => {
|
|
|
+ pageData.searchParam.searchForm = data;
|
|
|
+};
|
|
|
+/**
|
|
|
+ * 点击搜索按钮
|
|
|
+ */
|
|
|
+const _searchForm = (data: any) => {
|
|
|
+ pageData.searchParam.searchForm = data;
|
|
|
+ _loadData();
|
|
|
+};
|
|
|
+/**
|
|
|
+ * 重置
|
|
|
+ */
|
|
|
+const _resetSearchForm = (data?: any) => {
|
|
|
+ pageData.searchParam.searchForm = data;
|
|
|
+};
|
|
|
+/**
|
|
|
+ * 更新搜索表达的状态
|
|
|
+ */
|
|
|
+const _updateSearchState = () => {
|
|
|
+ pageData.searchParam.searchState = !pageData.searchParam.searchState;
|
|
|
+};
|
|
|
+/**
|
|
|
+ * 分页 - 改变每页条数
|
|
|
+ * @param val .
|
|
|
+ */
|
|
|
+const handleChangePageSize = (val: any) => {
|
|
|
+ pageData.tableParam.pagination.pageSize = val;
|
|
|
+ _loadData();
|
|
|
+};
|
|
|
+/**
|
|
|
+ * 分页 - 改变页码
|
|
|
+ * @param val .
|
|
|
+ */
|
|
|
+const handleChangeCurrentPage = (val: any) => {
|
|
|
+ pageData.tableParam.pagination.currentPage = val;
|
|
|
+ _loadData();
|
|
|
+};
|
|
|
+/**
|
|
|
+ * 获取查询参数
|
|
|
+ */
|
|
|
+const getQueryParams = () => {
|
|
|
+ const sqp = {};
|
|
|
+ const param = Object.assign(sqp, pageData.searchParam.searchForm);
|
|
|
+ param.current = pageData.tableParam.pagination.currentPage;
|
|
|
+ param.size = pageData.tableParam.pagination.pageSize;
|
|
|
+ return param;
|
|
|
+};
|
|
|
+/**
|
|
|
+ * 获取列表数据
|
|
|
+ * @param page .
|
|
|
+ */
|
|
|
+const _loadData = (page?: number) => {
|
|
|
+ const query = getQueryParams();
|
|
|
+ if (page) {
|
|
|
+ query.current = page;
|
|
|
+ }
|
|
|
+ pageData.tableParam.loading = true;
|
|
|
+ $api
|
|
|
+ .orderTotal(query)
|
|
|
+ .then((res: any) => {
|
|
|
+ if (res.success) {
|
|
|
+ pageData.tableParam.list = res.result;
|
|
|
+ // pageData.tableParam.pagination.total = Number(res.result.total);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ pageData.tableParam.loading = false;
|
|
|
+ });
|
|
|
+};
|
|
|
+onBeforeMount(() => {});
|
|
|
+onMounted(() => {
|
|
|
+ _loadData(1);
|
|
|
+});
|
|
|
+const merchantOptions = ref([
|
|
|
+ { label: "支付失败", value: -1 },
|
|
|
+ { label: "待支付", value: 0 },
|
|
|
+ { label: "支付成功", value: 1 },
|
|
|
+ { label: "退款", value: 2 }
|
|
|
+]);
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <el-card :shadow="'never'">
|
|
|
+ <template #default>
|
|
|
+ <div>
|
|
|
+ <form-search
|
|
|
+ :show="pageData.searchParam.searchState"
|
|
|
+ :form-field="searchFormFields"
|
|
|
+ :data-source="pageData.dataSource"
|
|
|
+ :query-permission="pageData.permission.query"
|
|
|
+ @search-form="_updateSearchFormData"
|
|
|
+ @search="_searchForm"
|
|
|
+ @reset="_resetSearchForm"
|
|
|
+ />
|
|
|
+ <!--operate-->
|
|
|
+ <table-buttons
|
|
|
+ :size="pageData.btnOpts.size"
|
|
|
+ :left-btns="pageData.btnOpts.leftBtns"
|
|
|
+ :right-btns="pageData.btnOpts.rightBtns"
|
|
|
+ @click="btnClickHandle"
|
|
|
+ />
|
|
|
+ <!--table-->
|
|
|
+ <pure-table
|
|
|
+ :data="pageData.tableParam.list"
|
|
|
+ :columns="pageData.tableParam.columns"
|
|
|
+ row-key="id"
|
|
|
+ border
|
|
|
+ stripe
|
|
|
+ :header-row-class-name="'table-header'"
|
|
|
+ :loading="pageData.tableParam.loading"
|
|
|
+ :pagination="pageData.tableParam.pagination"
|
|
|
+ @page-current-change="handleChangeCurrentPage"
|
|
|
+ @page-size-change="handleChangePageSize"
|
|
|
+ >
|
|
|
+ <template #ellipsis="{ row, column }">
|
|
|
+ <el-tooltip placement="top-start" :content="row[column.property]"
|
|
|
+ >{{ row[column.property] }}
|
|
|
+ </el-tooltip>
|
|
|
+ </template>
|
|
|
+ <template #enableOptions="scope">
|
|
|
+ <el-tag v-if="scope.row.status == -1">支付失败</el-tag>
|
|
|
+ <el-tag v-if="scope.row.status == 0">待支付</el-tag>
|
|
|
+ <el-tag v-if="scope.row.status == 1">支付成功</el-tag>
|
|
|
+ <el-tag v-if="scope.row.status == 2">退款</el-tag>
|
|
|
+ </template>
|
|
|
+ </pure-table>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-card>
|
|
|
+</template>
|
liu_lake