From 7fa5beee2ff53e7d35b14b04725c4070928b7f43 Mon Sep 17 00:00:00 2001
From: Maple <869445424@qq.com>
Date: Tue, 12 Aug 2025 14:43:44 +0800
Subject: [PATCH] =?UTF-8?q?add:=20=E8=AE=A2=E5=8D=95=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E7=9A=84=E5=89=8D=E7=AB=AF=E9=A1=B5=E9=9D=A2=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E4=BA=86=EF=BC=8C=E4=BD=86=E6=98=AF=E5=9B=A0=E4=B8=BA=E6=9A=82?=
 =?UTF-8?q?=E6=97=B6=E4=B8=8D=E6=B8=85=E6=A5=9A=E8=AE=A2=E5=8D=95=E7=9A=84?=
 =?UTF-8?q?=E5=AD=97=E6=AE=B5=E9=82=A3=E4=BA=9B=EF=BC=8C=E5=90=8E=E7=AB=AF?=
 =?UTF-8?q?=E4=B9=9F=E6=B2=A1=E6=9C=89=E7=9B=B8=E5=AF=B9=E5=BA=94=E7=9A=84?=
 =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/types/components.d.ts                     |  62 +++++++
 .../order-management/index.vue                | 154 +++++++++++++++++-
 2 files changed, 215 insertions(+), 1 deletion(-)

diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index 7fa6b1b..73dac61 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -7,7 +7,69 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    ApprovalAssistant: typeof import('./../components/ApprovalAssistant/index.vue')['default']
+    ApprovalMessageItem: typeof import('./../components/NotificationCenter/ApprovalMessageItem.vue')['default']
+    Avatar: typeof import('./../components/Avatar/index.vue')['default']
+    Breadcrumb: typeof import('./../components/Breadcrumb/index.vue')['default']
+    CellCopy: typeof import('./../components/CellCopy/index.vue')['default']
+    Chart: typeof import('./../components/Chart/index.vue')['default']
+    ColumnSetting: typeof import('./../components/GiTable/src/components/ColumnSetting.vue')['default']
+    CronForm: typeof import('./../components/GenCron/CronForm/index.vue')['default']
+    CronModal: typeof import('./../components/GenCron/CronModal/index.vue')['default']
+    DateRangePicker: typeof import('./../components/DateRangePicker/index.vue')['default']
+    DayForm: typeof import('./../components/GenCron/CronForm/component/day-form.vue')['default']
+    FilePreview: typeof import('./../components/FilePreview/index.vue')['default']
+    GiCellAvatar: typeof import('./../components/GiCell/GiCellAvatar.vue')['default']
+    GiCellGender: typeof import('./../components/GiCell/GiCellGender.vue')['default']
+    GiCellStatus: typeof import('./../components/GiCell/GiCellStatus.vue')['default']
+    GiCellTag: typeof import('./../components/GiCell/GiCellTag.vue')['default']
+    GiCellTags: typeof import('./../components/GiCell/GiCellTags.vue')['default']
+    GiCodeView: typeof import('./../components/GiCodeView/index.vue')['default']
+    GiDot: typeof import('./../components/GiDot/index.tsx')['default']
+    GiEditTable: typeof import('./../components/GiEditTable/GiEditTable.vue')['default']
+    GiFooter: typeof import('./../components/GiFooter/index.vue')['default']
+    GiForm: typeof import('./../components/GiForm/src/GiForm.vue')['default']
+    GiIconBox: typeof import('./../components/GiIconBox/index.vue')['default']
+    GiIconSelector: typeof import('./../components/GiIconSelector/index.vue')['default']
+    GiIframe: typeof import('./../components/GiIframe/index.vue')['default']
+    GiOption: typeof import('./../components/GiOption/index.vue')['default']
+    GiOptionItem: typeof import('./../components/GiOptionItem/index.vue')['default']
+    GiPageLayout: typeof import('./../components/GiPageLayout/index.vue')['default']
+    GiSpace: typeof import('./../components/GiSpace/index.vue')['default']
+    GiSplitButton: typeof import('./../components/GiSplitButton/index.vue')['default']
+    GiSplitPane: typeof import('./../components/GiSplitPane/index.vue')['default']
+    GiSplitPaneFlexibleBox: typeof import('./../components/GiSplitPane/components/GiSplitPaneFlexibleBox.vue')['default']
+    GiSvgIcon: typeof import('./../components/GiSvgIcon/index.vue')['default']
+    GiTable: typeof import('./../components/GiTable/src/GiTable.vue')['default']
+    GiTag: typeof import('./../components/GiTag/index.tsx')['default']
+    GiThemeBtn: typeof import('./../components/GiThemeBtn/index.vue')['default']
+    HourForm: typeof import('./../components/GenCron/CronForm/component/hour-form.vue')['default']
+    Icon403: typeof import('./../components/icons/Icon403.vue')['default']
+    Icon404: typeof import('./../components/icons/Icon404.vue')['default']
+    Icon500: typeof import('./../components/icons/Icon500.vue')['default']
+    IconBorders: typeof import('./../components/icons/IconBorders.vue')['default']
+    IconTableSize: typeof import('./../components/icons/IconTableSize.vue')['default']
+    IconTreeAdd: typeof import('./../components/icons/IconTreeAdd.vue')['default']
+    IconTreeReduce: typeof import('./../components/icons/IconTreeReduce.vue')['default']
+    ImageImport: typeof import('./../components/ImageImport/index.vue')['default']
+    ImageImportWizard: typeof import('./../components/ImageImportWizard/index.vue')['default']
+    IndustrialImageList: typeof import('./../components/IndustrialImageList/index.vue')['default']
+    JsonPretty: typeof import('./../components/JsonPretty/index.vue')['default']
+    MinuteForm: typeof import('./../components/GenCron/CronForm/component/minute-form.vue')['default']
+    MonthForm: typeof import('./../components/GenCron/CronForm/component/month-form.vue')['default']
+    NotificationCenter: typeof import('./../components/NotificationCenter/index.vue')['default']
+    ParentView: typeof import('./../components/ParentView/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    SecondForm: typeof import('./../components/GenCron/CronForm/component/second-form.vue')['default']
+    SplitPanel: typeof import('./../components/SplitPanel/index.vue')['default']
+    TextCopy: typeof import('./../components/TextCopy/index.vue')['default']
+    TurbineGrid: typeof import('./../components/TurbineGrid/index.vue')['default']
+    UserSelect: typeof import('./../components/UserSelect/index.vue')['default']
+    Verify: typeof import('./../components/Verify/index.vue')['default']
+    VerifyPoints: typeof import('./../components/Verify/Verify/VerifyPoints.vue')['default']
+    VerifySlide: typeof import('./../components/Verify/Verify/VerifySlide.vue')['default']
+    WeekForm: typeof import('./../components/GenCron/CronForm/component/week-form.vue')['default']
+    YearForm: typeof import('./../components/GenCron/CronForm/component/year-form.vue')['default']
   }
 }
diff --git a/src/views/project-management/order-management/index.vue b/src/views/project-management/order-management/index.vue
index 89b1f33..22ffeda 100644
--- a/src/views/project-management/order-management/index.vue
+++ b/src/views/project-management/order-management/index.vue
@@ -1,11 +1,163 @@
 <script setup lang="ts">
+import { ref, reactive, computed, onMounted } from 'vue'
+import type { TableColumnData } from '@arco-design/web-vue'
 
+// 订单类型与状态
+type OrderStatus = '待支付' | '进行中' | '已完成' | '已取消'
+interface OrderItem { id: string; orderNo: string; customer: string; amount: number; status: OrderStatus; createTime: string }
+const StatusOptions: { label: string; value: OrderStatus }[] = [
+  { label: '待支付', value: '待支付' },
+  { label: '进行中', value: '进行中' },
+  { label: '已完成', value: '已完成' },
+  { label: '已取消', value: '已取消' },
+]
+
+// 假数据源与统计
+const allOrders = ref<OrderItem[]>([])
+const stats = computed(() => ({
+  total: allOrders.value.length,
+  pending: allOrders.value.filter(o=>o.status==='待支付').length,
+  progress: allOrders.value.filter(o=>o.status==='进行中').length,
+  done: allOrders.value.filter(o=>o.status==='已完成').length,
+  cancel: allOrders.value.filter(o=>o.status==='已取消').length,
+}))
+
+// 统计卡片渲染数据（去趋势化）
+const statCards = computed(() => [
+  { key: 'total', title: '订单总数', value: stats.value.total, color: '#2f54eb', iconChar: 'T' },
+  { key: 'pending', title: '待支付', value: stats.value.pending, color: '#faad14', iconChar: 'P' },
+  { key: 'progress', title: '进行中', value: stats.value.progress, color: '#1677ff', iconChar: 'R' },
+  { key: 'done', title: '已完成', value: stats.value.done, color: '#52c41a', iconChar: 'D' },
+  { key: 'cancel', title: '已取消', value: stats.value.cancel, color: '#8c8c8c', iconChar: 'C' },
+])
+
+// 查询表单与分页
+const searchForm = reactive({ orderNo: '', status: '' as ''|OrderStatus, timeRange: [] as [string,string]|[], page: 1, size: 10 })
+const filtered = computed(() => {
+  let list = allOrders.value.slice()
+  if (searchForm.orderNo) list = list.filter(o=>o.orderNo.includes(searchForm.orderNo.trim()))
+  if (searchForm.status) list = list.filter(o=>o.status===searchForm.status)
+  if (Array.isArray(searchForm.timeRange) && searchForm.timeRange.length===2) {
+    const [s,e] = searchForm.timeRange; const S=+new Date(s as any), E=+new Date(e as any)
+    list = list.filter(o=>{ const t=+new Date(o.createTime as any); return t>=S && t<=E })
+  }
+  return list
+})
+const paged = computed(() => {
+  const start = (searchForm.page-1)*searchForm.size
+  return filtered.value.slice(start, start+searchForm.size)
+})
+const pagination = reactive({ current: 1, pageSize: 10, total: 0, showTotal: true, showPageSize: true })
+
+// 表格列
+const columns: TableColumnData[] = [
+  { title: '订单编号', dataIndex: 'orderNo', width: 180 },
+  { title: '客户', dataIndex: 'customer', width: 160 },
+  { title: '金额', dataIndex: 'amount', width: 120, render: ({record}:any)=>`￥${(record.amount||0).toLocaleString()}` },
+  { title: '状态', dataIndex: 'status', width: 100, slotName: 'status' },
+  { title: '下单时间', dataIndex: 'createTime', width: 180 },
+  { title: '操作', slotName: 'action', width: 140, fixed: 'right' },
+]
+
+// 操作
+const loading = ref(false)
+const search = () => { pagination.total = filtered.value.length }
+const reset = () => { Object.assign(searchForm, { orderNo: '', status: '', timeRange: [], page: 1, size: 10 }); pagination.current=1; pagination.pageSize=10; search() }
+const onPageChange = (p:number)=>{ searchForm.page=p; pagination.current=p }
+const onPageSizeChange=(s:number)=>{ searchForm.size=s; searchForm.page=1; pagination.pageSize=s; pagination.current=1; search() }
+const getStatusColor = (s:OrderStatus)=>({ '待支付':'orange','进行中':'blue','已完成':'green','已取消':'gray' }[s])
+
+// 新增订单（本地）
+const showAdd = ref(false)
+const newOrder = reactive<{orderNo:string;customer:string;amount:number;status:OrderStatus;createTime:string}>(
+  { orderNo:'', customer:'', amount:0, status:'待支付', createTime:'' }
+)
+const openAdd = ()=>{ Object.assign(newOrder,{ orderNo:'',customer:'',amount:0,status:'待支付',createTime:new Date().toISOString().slice(0,19).replace('T',' ') }); showAdd.value=true }
+const submitAdd = ()=>{
+  const id = Math.random().toString(36).slice(2)
+  allOrders.value.unshift({ id, ...newOrder })
+  showAdd.value=false; search()
+}
+
+// 生成假数据
+const genMock = (n=60)=>{
+  const pick=<T,>(arr:T[])=>arr[Math.floor(Math.random()*arr.length)]
+  const now=Date.now()
+  return Array.from({length:n}).map((_,i)=>{
+    const offset = Math.floor(Math.random()*60)*86400000
+    const dt = new Date(now-offset).toISOString().slice(0,19).replace('T',' ')
+    const st = pick<OrderStatus>(['待支付','进行中','已完成','已取消'])
+    return { id:`O${i+1}`, orderNo:`NO${100000+i}`, customer:`客户${(i%20)+1}`, amount: Math.floor(Math.random()*50000)+1000, status: st, createTime: dt }
+  })
+}
+onMounted(()=>{ allOrders.value = genMock(88); search() })
 </script>
 
 <template>
+  <GiPageLayout>
+    <!-- 顶部统计（美化 + 居中 + 独立容器） -->
+    <a-row :gutter="12" class="mb-3 stats-row">
+      <a-col :span="24">
+        <div class="stats-wrap">
+          <a-row :gutter="12" justify="center">
+            <a-col v-for="card in statCards" :key="card.key" :xs="12" :sm="12" :md="6" :lg="4">
+              <a-card hoverable class="stat-card">
+                <div class="stat-inner">
+                  <div class="stat-icon" :style="{ background: card.color }">
+                    <span>{{ card.iconChar }}</span>
+                  </div>
+                  <div class="stat-value">{{ card.value }}</div>
+                  <div class="stat-title">{{ card.title }}</div>
+                </div>
+              </a-card>
+            </a-col>
+          </a-row>
+        </div>
+      </a-col>
+    </a-row>
 
+    <!-- 查询表单 + 新增按钮 -->
+    <GiForm :columns="[
+      { field:'orderNo', label:'订单编号', type:'input', props:{placeholder:'支持模糊查询'} },
+      { field:'status', label:'订单状态', type:'select', props:{ placeholder:'全部', options: StatusOptions } },
+      { field:'timeRange', label:'订单时间', type:'range-picker', props:{ showTime:true, format:'YYYY-MM-DD HH:mm:ss' } },
+    ]" v-model="searchForm" search size="medium" @search="search" @reset="reset">
+      <template #extra>
+        <a-button type="primary" @click="openAdd"><icon-plus/> 新增订单</a-button>
+      </template>
+    </GiForm>
+
+    <!-- 订单列表 -->
+    <GiTable :data="paged" :columns="columns" :loading="loading" :pagination="pagination"
+             @page-change="onPageChange" @page-size-change="onPageSizeChange" @refresh="search">
+      <template #status="{ record }"><a-tag :color="getStatusColor(record.status)">{{ record.status }}</a-tag></template>
+      <template #action="{ record }"><a-space>
+        <a-link @click="()=>{}">查看</a-link>
+        <a-link @click="()=>{}">编辑</a-link>
+      </a-space></template>
+    </GiTable>
+
+    <!-- 新增订单弹窗（本地） -->
+    <a-modal v-model:visible="showAdd" title="新增订单" :width="520" @before-ok="submitAdd">
+      <a-form :model="newOrder" layout="vertical">
+        <a-form-item field="orderNo" label="订单编号"><a-input v-model="newOrder.orderNo" placeholder="NO123456"/></a-form-item>
+        <a-form-item field="customer" label="客户"><a-input v-model="newOrder.customer"/></a-form-item>
+        <a-form-item field="amount" label="金额"><a-input-number v-model="newOrder.amount" style="width:100%"/></a-form-item>
+        <a-form-item field="status" label="状态"><a-select v-model="newOrder.status" :options="StatusOptions"/></a-form-item>
+        <a-form-item field="createTime" label="下单时间"><a-date-picker v-model="newOrder.createTime" show-time style="width:100%"/></a-form-item>
+      </a-form>
+    </a-modal>
+  </GiPageLayout>
 </template>
 
-<style scoped lang="scss">
+<style scoped>
+.mb-3{ margin-bottom:12px; }
+.stats-row{ }
+.stats-wrap{ max-width: 1200px; margin: 0 auto; }
+.stat-card{ border: 1px solid var(--color-border-2,#f0f0f0); background: linear-gradient(180deg,#ffffff 0%, #fafbff 100%); }
+.stat-inner{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:18px 10px; text-align:center; }
+.stat-icon{ width:44px; height:44px; border-radius:12px; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; margin-bottom:8px; box-shadow: 0 6px 16px rgba(0,0,0,0.08); }
+.stat-value{ font-size:28px; font-weight:700; color:#1d2129; line-height:1.2; }
+.stat-title{ margin-top:6px; color:#86909c; }
 
 </style>
\ No newline at end of file