Sfoglia il codice sorgente

新增订单中心

zhangdan 4 anni fa
parent
commit
b3ef63e0fe
2 ha cambiato i file con 207 aggiunte e 0 eliminazioni
  1. 22 0
      src/config/router.config.js
  2. 185 0
      src/views/Order/OrderCenter.vue

+ 22 - 0
src/config/router.config.js

@@ -47,6 +47,28 @@ export const asyncRouterMap = [{
           }
         ]
       },
+	  {
+	    path: '/Order',
+	    redirect: '/Order/OrderCenter',
+	    component: PageView,
+	    meta: {
+	      title: '订单中心',
+	      icon: 'snippets',
+	      // permission: 'M_setting_0'
+	    },
+		children: [{
+		    path: '/Order/OrderCenter',
+		    name: 'OrderCenter',
+		    component: () => import( /* webpackChunkName: "setting" */
+		      '@/views/Order/OrderCenter.vue'),
+		    meta: {
+		      title: '订单中心',
+		      icon: 'snippets',
+		      // permission: 'M_sys_dataDictionary'
+		    }
+		  }
+		]
+	  },
       {
         path: '/setting',
         redirect: '/setting/userList',

+ 185 - 0
src/views/Order/OrderCenter.vue

@@ -0,0 +1,185 @@
+<template>
+  <a-card :bordered="false">
+    <!-- 搜索条件 -->
+    <div class="orderCenter-searchForm">
+      <a-form layout="inline">
+        <a-row :gutter="48">
+          <a-col :span="8">
+            <a-form-item label="创建时间">
+              <a-range-picker v-model="time" :placeholder="['开始时间','结束时间']" @change="onChange"/>
+            </a-form-item>
+          </a-col>
+          <a-col :span="6">
+            <a-form-item label="网点名称">
+              <v-select v-model="searchForm.name" placeholder="请选择" allowClear style="width: 200px;"></v-select>
+            </a-form-item>
+          </a-col> 
+          <a-col :span="6">
+            <a-form-item label="单号">
+              <a-input v-model.trim="searchForm.num" placeholder="请输入" allowClear style="width: 200px;"/>
+            </a-form-item>
+          </a-col>
+          <a-col :span="4">
+            <a-button style="margin-right: 10px;" type="primary" @click="$refs.table.refresh(true)">查询</a-button>
+            <a-button type="" @click="resetForm">重置</a-button>
+          </a-col>  
+        </a-row>
+        <a-row :gutter="48">
+          <a-col :span="8">
+            <a-form-item label="服务项目">
+              <v-select v-model="searchForm.name" placeholder="请选择" allowClear style="width: 200px;"></v-select>
+            </a-form-item>
+          </a-col>
+          <a-col :span="6">
+            <a-form-item label="手机号码">
+              <a-input v-model.trim="searchForm.num" placeholder="请输入" allowClear maxLength="11" style="width: 200px;"/>
+            </a-form-item>
+          </a-col>
+          <a-col :span="6">
+            <a-form-item label="状态">
+              <v-select v-model="searchForm.name" placeholder="请选择" allowClear style="width: 200px;"></v-select>
+            </a-form-item>
+          </a-col>
+        </a-row>  
+      </a-form>
+    </div>
+    <!-- 合计 -->
+    <div class="total">
+      <a-alert message="合计: 40单, 实收: 2000元" type="info" show-icon />
+    </div>
+    <!-- 列表 -->
+    <s-table 
+      ref="tableData"
+      size="default"
+      :rowKey="(record) => record.id"
+      :columns="columns"
+      :data="loadData"
+      bordered>
+      <!-- 状态 -->
+      <span slot="status" slot-scope="text, record">
+        <template></template>
+      </span>
+      <!-- 操作 -->
+      <span slot="action" slot-scope="text, record">
+        <a-button type="primary">查看</a-button>
+        <a-button type="danger">退款</a-button>
+      </span>
+    </s-table>
+  </a-card>
+</template>
+
+<script>
+  import { STable, VSelect } from '@/components'
+  export default{
+    components: { STable, VSelect },
+    data(){
+      return{
+        // 查询参数
+        searchForm: {
+          name: '',
+          num: ''
+        },
+        time:null,
+        columns:[
+          {
+            title: '创建时间',
+            dataIndex: 'createTime',
+            width: '40',
+            align: 'center'
+            
+          },
+          {
+            title: '单号',
+            dataIndex: 'createTime',
+            width: '40',
+            align: 'center'
+            
+          },
+          {
+            title: '网点名称',
+            dataIndex: 'createTime',
+            width: '40',
+            align: 'center'
+            
+          },
+          {
+            title: '服务项目',
+            dataIndex: 'createTime',
+            width: '40',
+            align: 'center'
+            
+          },
+          {
+            title: '手机号码',
+            dataIndex: 'createTime',
+            width: '40',
+            align: 'center'
+            
+          },
+          {
+            title: '应收(¥)',
+            dataIndex: 'createTime',
+            width: '40',
+            align: 'center'
+            
+          },
+          {
+            title: '实收(¥)',
+            dataIndex: 'createTime',
+            width: '40',
+            align: 'center'
+            
+          },
+          {
+            title: '优惠(¥)',
+            dataIndex: 'createTime',
+            width: '40',
+            align: 'center'
+          },
+          {
+            title: '状态',
+            dataIndex: 'status',
+            width: '40',
+            align: 'center',
+            scopedSlots: { customRender: 'status' }
+            
+          },
+          {
+            title: '操作',
+            dataIndex: 'action',
+            width: '40',
+            align: 'center',
+            scopedSlots: { customRender: 'action' }
+            
+          }
+        ],
+        // 加载数据方法 必须为 Promise 对象
+        loadData: parameter => {
+          // return getTenantsList(Object.assign(parameter, this.searchForm)).then(res => {
+          //   if (res.status == 200) {
+          //     const no = (res.data.pageNo - 1) * res.data.pageSize
+          //     for (let i = 0; i < res.data.list.length; i++) {
+          //       const _item = res.data.list[i]
+          //       _item.no = no + i + 1
+          //       _item.status = _item.status + '' === '1'
+          //     }
+          //     return res.data
+          //   }
+          // })
+        }
+      }
+    }
+  }
+</script>
+
+<style>
+  .orderCenter-searchForm ,.addButton{
+    margin-bottom: 0;
+  }
+  .orderCenter-searchForm .ant-form-inline .ant-form-item{
+    margin-bottom: 15px;
+  }
+  .total{
+    margin-bottom:15px;
+  }
+</style>