财务管理列表完成

src/api/lottery/customer-api.js

@@ -17,4 +17,12 @@ customerApi.getPageList = data => {
   })
 }
 
+customerApi.getBillPageList = data => {
+  return request({
+    url: '/taCustomerBill/getPageList',
+    method: 'post',
+    data
+  })
+}
+
 export default customerApi

src/router/index.js

@@ -170,9 +170,15 @@ export const asyncRoutes = [
       {
         path: 'customer-lottery-list',
         component: () => import('@/views/lottery/customer/customer-lottery-list'),
-        name: 'customerLotteryList2',
+        name: 'customerLotteryList',
         meta: { title: '彩民管理', icon: 'edit' }
       },
+      {
+        path: 'customer-bill-list',
+        component: () => import('@/views/lottery/customer/customer-bill-list'),
+        name: 'customerBillList',
+        meta: { title: '财务管理', icon: 'edit' }
+      },
     ]
   },
   // 404 page must be placed at the end !!!

src/views/lottery/customer/customer-bill-list.vue

@@ -0,0 +1,206 @@
+<template>
+  <div id="sys-user-list" class="app-container">
+    <!-- <div class="filter-container">
+      <el-input v-model="listQuery.name" placeholder="请输入昵称" clearable style="width: 160px" />
+      <el-input v-model="listQuery.phone" placeholder="请输入手机号" clearable style="width: 160px" />
+      <el-input v-model="listQuery.idCard" placeholder="请输入身份证号" clearable style="width: 160px" />
+      <el-button v-waves type="primary" icon="el-icon-search" style="width: 115px;" @click="handleFilter">搜索</el-button>
+    </div> -->
+
+    <el-table
+      :key="tableKey"
+      v-loading="listLoading"
+      :data="list"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%;"
+      @sort-change="sortChange"
+    >
+       <el-table-column label="流水编号" min-width="100px" align="center">
+        <template slot-scope="{row}">
+          <span>{{ row.billId }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="客户姓名" min-width="100px" align="center">
+        <template slot-scope="{row}">
+          <span>{{ row.customerName }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="费用简介" min-width="100px" align="center">
+        <template slot-scope="{row}">
+          <span>{{ row.summary }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="金额" min-width="110px" align="center">
+        <template slot-scope="{row}">
+          <span>{{ row.amount /100 }}元</span>
+        </template>
+      </el-table-column>
+       <el-table-column label="收支类型" min-width="110px" align="center">
+        <template slot-scope="{row}">
+          <span>{{ row.feeSign == 1 ? "收入" : "支出" }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="订单号" min-width="110px" align="center">
+        <template slot-scope="{row}">
+          <span>{{ row.orderId }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" prop="createTime" min-width="160px" align="center">
+        <template slot-scope="{row}">
+          <span>{{ row.createDate }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageIndex" :limit.sync="listQuery.pageSize" @pagination="getList" />
+
+  </div>
+</template>
+
+<script>
+  import waves from '@/directive/waves'
+  import Pagination from '@/components/Pagination'
+  import customerApi from '@/api/lottery/customer-api'
+
+  const stateEnum = { 0: '待审核', 1: '已审核', 2: '审核不通过' }
+  const statusOptions = [
+    { label: '已审核', value: 1 },
+    { label: '待审核', value: 0 },
+    { label: '审核不通过', value: 2 }
+  ]
+
+  export default {
+    name: 'shopLotteryList',
+    components: { Pagination },
+    directives: { waves },
+    filters: {
+      statusFilter(state) {
+        return stateEnum[state];
+      }
+    },
+    data() {
+      return {
+        tableKey: 0,
+        list: null,
+        total: 0,
+        listLoading: true,
+        sortColumn: 'bill_id',
+        sortAsc: false,
+        listQuery: {
+          pageIndex: 1,
+          pageSize: 10,
+          phone: null,
+          idCard: null,
+          name: null,
+          pageSorts: []
+        },
+        statusOptions,
+        tableColumnChecked: null
+      }
+    },
+    created() {
+      this.setDefaultSort()
+      this.getList()
+    },
+    methods: {
+      getList() {
+        this.listLoading = true
+        customerApi.getBillPageList(this.listQuery).then(response => {
+          this.list = response.data.records
+          this.total = response.data.total
+          this.listLoading = false
+        });
+      },
+
+      handleFilter() {
+        this.listQuery.pageIndex = 1
+        this.getList()
+      },
+      setDefaultSort() {
+        // 设置默认排序
+        this.listQuery.pageSorts = [{
+          column: this.sortColumn,
+          asc: this.sortAsc
+        }]
+      },
+      sortChange(data) {
+        const { prop, order } = data
+        if (prop === 'createTime') {
+          this.sortColumn = 'create_time'
+        } else {
+          this.sortColumn = prop
+        }
+        this.sortAsc = order === 'ascending'
+        this.listQuery.pageSorts = [{
+          column: this.sortColumn,
+          asc: this.sortAsc
+        }]
+        this.handleFilter()
+      },
+      getSortClass: function(key) {
+        if (this.sortColumn === key) {
+          return this.sortAsc ? 'ascending' : 'descending'
+        } else {
+          return ''
+        }
+      },
+      handUpdate(id, username) {
+        this.$confirm('您确定要删除 ' + username + ' ?', '删除提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          sysUserApi.delete(id).then(response => {
+            this.$message({
+              type: 'success',
+              message: '删除成功!'
+            });
+            this.handleFilter();
+          })
+        });
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  #sys-user-list .el-table th, .el-table td{
+    padding: 6px 0px;
+  }
+
+  #sys-user-list .filter-container {
+    padding-bottom: 10px;
+  }
+
+  #sys-user-list .filter-container .tree-select-item{
+    width: 120px;
+    display: inline-block;
+    vertical-align: top;
+    margin-right: 4px;
+  }
+
+  #sys-user-list .input-with-select {
+    vertical-align: top;
+    width: 505px;
+    margin-right: 4px;
+  }
+
+  #sys-user-list .input-with-select .el-select .el-input {
+    width: 120px;
+  }
+
+  #sys-user-list .input-with-select .el-input-group__prepend {
+    background-color: #fff;
+  }
+
+  #sys-user-list .filter-item {
+    margin-right: 4px;
+  }
+
+  #sys-user-list .el-table__body .operation .cell {
+    text-align: center;
+  }
+
+</style>