feat(order): 重构订单页面- 新增 config.js 文件，定义订单搜索和表格配置

- 添加自定义搜索表单和内容组件
- 优化订单列表页面布局和功能
- 实现订单状态标签和操作按钮的自定义渲染

src/view/order/order/index.vue

@@ -1,92 +1,116 @@
 <template>
     <div >
-        <data class="gva-search-box2">
-            <el-form :inline="true" ref="formRef" :model="paramsQuery" class="demo-form-inline">
-                <el-form-item label="订单号">
-                    <el-input v-model="paramsQuery.orderId" placeholder="请输入" clearable />
-                </el-form-item>
-                <el-form-item label="订单时间">
-                    <el-date-picker
-                        v-model="queryTime"
-                        type="daterange"
-                        unlink-panels
-                        range-separator="至"
-                        start-placeholder="开始时间"
-                        end-placeholder="结束时间"
-                        value-format="YYYY-MM-DD"
-                        style="width:100%"
-                    />
-                </el-form-item>
-                <el-form-item>
-                    <el-button type="primary" @click="onSubmit(formRef)">查询</el-button>
-                    <el-button @click="reset(formRef)">重置</el-button>
-                </el-form-item>
-            </el-form>
-        </data>
+        <div class="searchForm">
+          <searchForm
+            :search="ORDER_SEARCH_CONFIG"
+            @searchData="searchData"
+            @resetData="resetData"
+            class="search-box searchForm"
+          />
+        </div>
         <div class="gva-table-box">
-            <el-table :data="tableData" style="width: 100%">
-                <el-table-column type="index" label="序号" width="120" />
-                <el-table-column prop="order_no" label="订单号" width="180" />
-                <el-table-column prop="name" label="商品名称" />
-                <el-table-column prop="price" label="价格" />
-                <el-table-column prop="order_type" label="类型" />
-                <el-table-column prop="status" label="状态" />
-                <el-table-column prop="CreatedAt" label="创建时间" />
-                <el-table-column prop="UpdatedAt" label="更新时间" />
-                <el-table-column label="操作" fixed="right" width="100">
-                    <template #default="scope">
-                        <!-- <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button> -->
-                        <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
+<!--            <el-table :data="tableData" style="width: 100%">-->
+<!--                <el-table-column type="index" label="序号" width="120" />-->
+<!--                <el-table-column prop="order_no" label="订单号" width="180" />-->
+<!--                <el-table-column prop="name" label="商品名称" />-->
+<!--                <el-table-column prop="price" label="价格" />-->
+<!--                <el-table-column prop="order_type" label="类型" />-->
+<!--                <el-table-column prop="status" label="状态" />-->
+<!--                <el-table-column prop="CreatedAt" label="创建时间" />-->
+<!--                <el-table-column prop="UpdatedAt" label="更新时间" />-->
+<!--                <el-table-column label="操作" fixed="right" width="100">-->
+<!--                    <template #default="scope">-->
+<!--                        <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>-->
+<!--                    </template>-->
+<!--                </el-table-column>-->
+<!--            </el-table>-->
+
+            <Content
+              @changePage="changePage"
+              :total="total"
+              v-model:tabloading="tableLoading"
+              v-model:currentPage="queryParams.page"
+              v-model:pageSize="queryParams.pageSize"
+              :data="tableData"
+              :config="ORDER_TABLE_CONFIG"
+            >
+              <template #status="{ row }">
+                <el-tag :type="tag(row.status).type">{{ tag(row.status).label }}</el-tag>
+              </template>
+              <template #operate="{ row }">
+                <el-button type="text" @click="handleDetail(row)">详情</el-button>
+                <el-button type="text" @click="handleDelete(row)">删除</el-button>
+              </template>
+            </Content>
+
         </div>
     </div>
 </template>
 <script setup>
+import searchForm from '@/components/searchForm/index.vue'
+import Content from '@/components/content/index.vue'
 import {list} from '@/api/order'
 import { ref, reactive, onMounted } from 'vue'
-const formRef = ref()
-const paramsQuery = reactive({
+import { ORDER_SEARCH_CONFIG, ORDER_TABLE_CONFIG } from '@/config'
+const tableLoading = ref(true),  tableData = ref([{ status: 1 }])
+const queryParams = reactive({
     page: 1,
     pageSize: 10,
     orderId: '',
     startTime: '',
     endTime: ''
-}), total = ref(0), queryTime = ref([])
-const tableData = ref([])
+}), total = ref(0)
+const EMPTY_STR = '- -'
+const tag = (status) => {
+    const map = {
+        1: { type: 'success', label: '已完成' },
+        2: { type: 'info', label: '待处理' },
+        3: { type: 'warning', label: '处理中' },
+        4: { type: 'danger', label: '已拒绝' }
+    }
+    return map[status] || { type: '', label: EMPTY_STR }
+}
+const searchData = (data) => {
+  if (data.times) {
+    data.startTime = data.times[0]
+    data.endTime = data.times[1]
+  }
+  queryParams.value.page = 1
+  queryParams.value = { ...queryParams.value, ...data }
+  delete queryParams.value.times
+  // console.log(queryParams.value)
+  getList()
+}
+const resetData = () => {
+  queryParams.value = {
+    page: 1,
+    pageSize: 10,
+  }
+  getList()
+}
 onMounted(() => {
     getList()
 })
-
 async function getList() {
-    const res = await list(paramsQuery)
+    const res = await list(queryParams)
     if(res.code === 0) {
         tableData.value = res.data.list
         total.value = res.data.total
     }
 }
-function onSubmit() {
-    console.log(queryTime.value)
-    paramsQuery.startTime = queryTime.value[0]
-    paramsQuery.endTime = queryTime.value[1]
-    getList()
-}
-function reset(formEl) {
-    if (!formEl) return
-    formEl.resetFields()
-    getList()
-}
+
 function handleDelete(row) {
     console.log(row)
 }
+function handleDetail(row) {
+
+}
+
+
+function changePage(data) {
+queryParams.value.pageNum = data
+getList()
+}
 </script>
 <style lang="scss" scoped>
-.demo-form-inline{
-    background: white;
-    padding: 1rem;
-    padding-bottom: 0;
-    margin-top: 0.5rem;
-    
-}
-</style>
+</style>