|
|
@@ -0,0 +1,306 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <div v-show="!commodityManageFormState.show">
|
|
|
+ <div class="status-filter" style="display: flex; justify-content: space-between">
|
|
|
+ <div>
|
|
|
+ <button
|
|
|
+ v-for="item in filterItems"
|
|
|
+ :key="item.value"
|
|
|
+ class="filter-btn"
|
|
|
+ :class="{ active: activeFilter === item.value }"
|
|
|
+ @click="handleFilterChange(item.value)"
|
|
|
+ style="margin-right: 10px"
|
|
|
+ >
|
|
|
+ {{ item.label }} ({{ item.sum }})
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <el-button type="primary" @click="resetQuery"
|
|
|
+ ><el-icon><Refresh /></el-icon> 刷新</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <transition name="fade">
|
|
|
+ <div>
|
|
|
+ <el-form ref="queryFormRef" :model="queryParams">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="4">
|
|
|
+ <el-form-item label="输入搜索：" prop="name">
|
|
|
+ <el-input v-model="queryParams.name" placeholder="请输入报告名称" clearable @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4">
|
|
|
+ <el-form-item label="收货人：" prop="consignee">
|
|
|
+ <el-select v-model="queryParams.serviceClass" clearable>
|
|
|
+ <!--<el-option v-for="item in mm_event_type" :key="item.value" :label="item.label" :value="item.value"></el-option>-->
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4">
|
|
|
+ <el-form-item label="商品类型：" prop="submissionTime">
|
|
|
+ <el-select v-model="queryParams.serviceStatus" clearable>
|
|
|
+ <!--<el-option v-for="item in mm_event_type" :key="item.value" :label="item.label" :value="item.value"></el-option>-->
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4">
|
|
|
+ <el-form-item label="提交时间：" prop="serviceStatus">
|
|
|
+ <el-date-picker v-model="value1" type="datetime" placeholder="请选择时间" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4">
|
|
|
+ <el-button type="primary" @click="handleQuery">查询</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </transition>
|
|
|
+ <el-row :gutter="10" class="mb8">
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="3">
|
|
|
+ <el-select v-model="sortField" placeholder="排序方式" @change="handleSortChange">
|
|
|
+ <el-option
|
|
|
+ v-for="item in sortOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <!-- 表格组件 -->
|
|
|
+ <el-table ref="multipleTable" v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
|
|
|
+ <el-table-column type="selection" width="55" align="center" />
|
|
|
+ <el-table-column label="订单编号" align="center" prop="id" />
|
|
|
+ <el-table-column label="提交时间" align="center" prop="submissionTime" />
|
|
|
+ <el-table-column label="用户账号" align="center" prop="userAccount" />
|
|
|
+ <el-table-column label="订单金额" align="center" prop="orderAmount" />
|
|
|
+ <el-table-column label="支付方式" align="center" prop="paymentMethod" />
|
|
|
+ <el-table-column label="商品分类" align="center" prop="category" />
|
|
|
+ <el-table-column label="订单状态" align="center" prop="orderStatus" />
|
|
|
+ <el-table-column label="接口状态" align="center" prop="status" />
|
|
|
+ <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
|
+ <template #default="scope">
|
|
|
+ <!-- 待签署和待付款状态显示取消订单 -->
|
|
|
+ <el-text
|
|
|
+ v-if="['待签署', '待付款'].includes(scope.row.orderStatus)"
|
|
|
+ class="common-btn-text-primary"
|
|
|
+ @click="cancelOrder(scope.row)"
|
|
|
+ >
|
|
|
+ 取消订单
|
|
|
+ </el-text>
|
|
|
+
|
|
|
+ <!-- 已完成状态显示查看详情 -->
|
|
|
+ <el-text
|
|
|
+ v-if="scope.row.orderStatus === '已完成'"
|
|
|
+ class="common-btn-text-primary"
|
|
|
+ @click="viewDetails(scope.row)"
|
|
|
+ >
|
|
|
+ 查看详情
|
|
|
+ </el-text>
|
|
|
+
|
|
|
+ <!-- 已退款和已取消状态不显示操作按钮 -->
|
|
|
+ <span v-if="['已退款', '已取消'].includes(scope.row.orderStatus)">-</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <pagination v-show="total > 0" v-model:page="queryParams.page" v-model:limit="queryParams.page_size" :total="total" @pagination="getList" />
|
|
|
+ </div>
|
|
|
+ <CommodityManageForm v-if="commodityManageFormState.show" @onCancel="commodityManageFormState.show = false" @onConfirm="handleCommodityManageFormState" />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup name="CommodityManage">
|
|
|
+import CommodityManageForm from "@/views/commodityManage/CommodityManageForm.vue";
|
|
|
+
|
|
|
+const { proxy } = getCurrentInstance();
|
|
|
+const queryFormRef = ref();
|
|
|
+const value1 = ref();
|
|
|
+// 搜索条件
|
|
|
+const queryParams = reactive({
|
|
|
+ name: '',
|
|
|
+ serviceClass: '',
|
|
|
+ serviceStatus: '',
|
|
|
+ page: 1,
|
|
|
+ page_size: 10
|
|
|
+});
|
|
|
+// 表格数据
|
|
|
+const dataList = ref([
|
|
|
+ {
|
|
|
+ id: 'DD20230515001',
|
|
|
+ submissionTime: '2023-05-15 09:30:45',
|
|
|
+ userAccount: 'user_zhangsan',
|
|
|
+ orderAmount: '¥258.00',
|
|
|
+ paymentMethod: '微信支付',
|
|
|
+ category: '电子产品',
|
|
|
+ orderStatus: '待签署', // 改为中文状态值
|
|
|
+ status: '正常'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'DD20230515002',
|
|
|
+ submissionTime: '2023-05-15 10:15:22',
|
|
|
+ userAccount: 'user_lisi',
|
|
|
+ orderAmount: '¥599.00',
|
|
|
+ paymentMethod: '支付宝',
|
|
|
+ category: '家居用品',
|
|
|
+ orderStatus: '待付款', // 改为中文状态值
|
|
|
+ status: '正常'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'DD20230515003',
|
|
|
+ submissionTime: '2023-05-15 13:45:18',
|
|
|
+ userAccount: 'user_wangwu',
|
|
|
+ orderAmount: '¥1299.00',
|
|
|
+ paymentMethod: '银联云闪付',
|
|
|
+ category: '家用电器',
|
|
|
+ orderStatus: '已取消', // 改为中文状态值
|
|
|
+ status: '正常'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'DD20230515004',
|
|
|
+ submissionTime: '2023-05-15 15:20:33',
|
|
|
+ userAccount: 'user_zhaoliu',
|
|
|
+ orderAmount: '¥89.00',
|
|
|
+ paymentMethod: '微信支付',
|
|
|
+ category: '食品饮料',
|
|
|
+ orderStatus: '已完成', // 改为中文状态值
|
|
|
+ status: '已关闭'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'DD20230515005',
|
|
|
+ submissionTime: '2023-05-15 18:05:07',
|
|
|
+ userAccount: 'user_qianqi',
|
|
|
+ orderAmount: '¥1999.00',
|
|
|
+ paymentMethod: '支付宝',
|
|
|
+ category: '数码产品',
|
|
|
+ orderStatus: '已退款', // 改为中文状态值
|
|
|
+ status: '异常'
|
|
|
+ }
|
|
|
+]);
|
|
|
+// 加载中
|
|
|
+const loading = ref(false);
|
|
|
+// 总数
|
|
|
+const total = ref(0);
|
|
|
+// 表格选中的所有id
|
|
|
+const ids = ref([]);
|
|
|
+// 表格选中一个
|
|
|
+const single = ref(true);
|
|
|
+// 表格选中多个
|
|
|
+const multiple = ref(true);
|
|
|
+// 选中行的数据
|
|
|
+const selectedRow = ref(null);
|
|
|
+// 新增弹窗参数
|
|
|
+const commodityManageFormState = ref({
|
|
|
+ show: false,
|
|
|
+ id: ''
|
|
|
+})
|
|
|
+
|
|
|
+// 获取数据
|
|
|
+const getList = () => {
|
|
|
+ loading.value = true;
|
|
|
+ setTimeout(() => {
|
|
|
+ loading.value = false;
|
|
|
+ }, 500)
|
|
|
+}
|
|
|
+
|
|
|
+// 点击查询
|
|
|
+const handleQuery = () => {
|
|
|
+ queryParams.page = 1;
|
|
|
+ getList();
|
|
|
+};
|
|
|
+
|
|
|
+// 重置查询条件
|
|
|
+const resetQuery = () => {
|
|
|
+ if (queryFormRef.value) {
|
|
|
+ queryFormRef.value.resetFields(); // 重置表单并清除校验状态
|
|
|
+ }
|
|
|
+ // 重置日期选择器
|
|
|
+ value1.value = null;
|
|
|
+ // 重置查询参数
|
|
|
+ Object.assign(queryParams, {
|
|
|
+ name: '',
|
|
|
+ serviceClass: '',
|
|
|
+ serviceStatus: '',
|
|
|
+ page: 1,
|
|
|
+ page_size: 10
|
|
|
+ });
|
|
|
+ // 重置为全部订单
|
|
|
+ activeFilter.value = 'all';
|
|
|
+
|
|
|
+ getList();
|
|
|
+};
|
|
|
+
|
|
|
+// 新增修改确认回调
|
|
|
+const handleCommodityManageFormState = () => {
|
|
|
+ commodityManageFormState.value.show = false;
|
|
|
+ handleQuery();
|
|
|
+};
|
|
|
+
|
|
|
+const cancelOrder = (row) => {};
|
|
|
+
|
|
|
+// 多选框选中数据
|
|
|
+const handleSelectionChange = (selection) => {
|
|
|
+ ids.value = selection.map((item) => item.reportId);
|
|
|
+ selectedRow.value = selection.length === 1 ? selection[0] : null;
|
|
|
+ single.value = selection.length != 1;
|
|
|
+ multiple.value = !selection.length;
|
|
|
+};
|
|
|
+
|
|
|
+const activeFilter = ref('all');
|
|
|
+
|
|
|
+const filterItems = [
|
|
|
+ { label: '全部订单', value: 'all', sum: 1000 },
|
|
|
+ { label: '待签署', value: 'pending_sign', sum: 1000 },
|
|
|
+ { label: '待付款', value: 'pending_payment', sum: 1000 },
|
|
|
+ { label: '已取消', value: 'cancelled', sum: 1000 },
|
|
|
+ { label: '已完成', value: 'completed', sum: 1000 },
|
|
|
+ { label: '已退款', value: 'refunded', sum: 1000 }
|
|
|
+]
|
|
|
+
|
|
|
+const handleFilterChange = (value) => {
|
|
|
+ activeFilter.value = value;
|
|
|
+ // 这里可以添加根据筛选条件重新获取数据的逻辑
|
|
|
+ getList();
|
|
|
+}
|
|
|
+
|
|
|
+const handleExport = () => {};
|
|
|
+
|
|
|
+const viewDetails = (row) => {};
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+getList();
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.status-filter {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 10px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.filter-btn {
|
|
|
+ padding: 6px 16px;
|
|
|
+ border: 1px solid #dcdfe6;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: #fff;
|
|
|
+ color: #606266;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s;
|
|
|
+}
|
|
|
+
|
|
|
+.filter-btn:hover {
|
|
|
+ color: #409eff;
|
|
|
+ border-color: #c6e2ff;
|
|
|
+ background-color: #ecf5ff;
|
|
|
+}
|
|
|
+
|
|
|
+.filter-btn.active {
|
|
|
+ color: #409eff;
|
|
|
+ border-color: #409eff;
|
|
|
+ background-color: #ecf5ff;
|
|
|
+}
|
|
|
+</style>
|
