anxine-htgl/src/views/orderList/index.vue

<template>
  <div class="app-container">
    <div v-show="!eventDetailsState.show">
      <FilterButton :filter-items="filterItems" :active-value="queryParams.activeFilter" @filter-change="handleFilterChange" />
      <transition name="fade">
        <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="70px">
          <el-form-item label="输入搜索：" prop="name">
            <el-input v-model="queryParams.name" placeholder="请输入订单编号" clearable @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="收货人：" prop="consignee">
            <el-input v-model="queryParams.consignee" placeholder="请输入用户账号" clearable @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="商品类型：" prop="submissionTime">
            <el-select v-model="queryParams.serviceStatus" clearable>
              <el-option v-for="item in service_class" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="提交时间：">
            <el-date-picker
              v-model="value1"
              type="datetimerange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              date-format="YYYY/MM/DD"
              time-format="hh:mm:ss"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleQuery">搜索</el-button>
            <el-button @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </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-row>
      <!-- 表格组件 -->
      <el-table ref="multipleTable" v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
        <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-danger" @click="cancelOrder(scope.row.id)">
              取消订单
            </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>
    <order-details v-if="eventDetailsState.show" :id="eventDetailsState.id" @close="handleEventDetailsClose" />
  </div>
</template>

<script setup name="orderList">
import OrderDetails from '@/views/orderList/orderDetails.vue';
import { addDateRange2 } from '@/utils/ruoyi.js';

const { proxy } = getCurrentInstance();
const { service_class } = toRefs(proxy?.useDict('service_class'));
const queryFormRef = ref();
const value1 = ref([]);
// 搜索条件
const queryParams = reactive({
  name: '',
  serviceClass: '',
  serviceStatus: '',
  page: 1,
  page_size: 10,
  activeFilter: 'all'
});
const filterItems = [
  { label: '全部订单', value: 'all', sum: 5 },
  { label: '待签署', value: 'pending_sign', sum: 1 },
  { label: '待付款', value: 'pending_payment', sum: 1 },
  { label: '已取消', value: 'cancelled', sum: 1 },
  { label: '已完成', value: 'completed', sum: 1 },
  { label: '已退款', value: 'refunded', sum: 1 }
];
// 表格数据
const originalData = [
  {
    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 getList = () => {
  loading.value = true;
  const query = addDateRange2(queryParams, value1.value, 'startTime', 'endTime');
  setTimeout(() => {
    loading.value = false;
  }, 500);
};

// 点击查询
const handleQuery = () => {
  queryParams.page = 1;
  getList();
};

// 重置查询条件
const resetQuery = () => {
  if (queryFormRef.value) {
    queryFormRef.value.resetFields(); // 重置表单并清除校验状态
  }
  // 重置日期选择器
  value1.value = null;

  queryParams.page = 1;
  getList();
};

const cancelOrder = (id) => {
  proxy?.$modal.confirm('确定要取消订单吗？').then(() => {

  });
};

// 多选框选中数据
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 dataList = computed(() => {
  if (queryParams.activeFilter === 'all') {
    return originalData;
  }
  const statusMap = {
    'pending_sign': '待签署',
    'pending_payment': '待付款',
    'cancelled': '已取消',
    'completed': '已完成',
    'refunded': '已退款'
  };
  return originalData.filter((item) => item.orderStatus === statusMap[queryParams.activeFilter]);
});

const handleFilterChange = (value) => {
  queryParams.activeFilter = value;
  // 这里可以添加根据筛选条件重新获取数据的逻辑
  getList();
};

const handleExport = () => {};
let eventDetailsState = reactive({
  show: false,
  id: ''
});
const viewDetails = (row) => {
  if (row) {
    eventDetailsState.id = row.id;
    eventDetailsState.show = true;
  }
};
const handleEventDetailsClose = () => {
  eventDetailsState.show = false;
};

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>