收款列表UI

src/api/caimei/finance/receipt.js

@@ -0,0 +1,23 @@
+import request from '@/utils/request'
+
+export function fetchList(query) {
+  return request({
+    url: '/finance/receipt/list',
+    method: 'get',
+    params: query
+  })
+}
+
+export function getReceiptType() {
+  return request({
+    url: '/finance/receipt/type',
+    method: 'get'
+  })
+}
+
+export function getReceipt(id) {
+  return request({
+    url: '/finance/receipt/' + id,
+    method: 'get'
+  })
+}

src/views/finance/receipt/detail.vue

@@ -5,14 +5,32 @@
 </template>
 
 <script>
+import { getReceipt, getReceiptType } from '@/api/caimei/finance/receipt'
 export default {
   name: 'ReceiptDetail',
   data() {
     return {
+      payTypeOptions: [],
+      receipt: {}
     }
   },
   created() {
-
+    this.getType()
+    this.getReceipt()
+  },
+  methods: {
+    getType() {
+      getReceiptType().then(response => {
+        this.payTypeOptions = response.data
+      })
+    },
+    getReceipt() {
+      if (this.$route.query.id) {
+        getReceipt(this.$route.query.id).then(response => {
+          this.receipt = response.data
+        })
+      }
+    }
   }
 }
 </script>

src/views/finance/receipt/list.vue

@@ -1,22 +1,267 @@
 <template>
   <div class="app-container">
-    <p>敬请期待...</p>
+    <div class="filter-container">
+      <el-input v-model="listQuery.id" placeholder="收款ID" class="filter-item" />
+      <el-input v-model="listQuery.orderId" placeholder="订单ID" class="filter-item" />
+      <el-input v-model="listQuery.orderNo" placeholder="订单编号" class="filter-item" />
+      <el-input v-model="listQuery.userName" placeholder="客户名称" class="filter-item" />
+      <el-select v-model="listQuery.payWay" placeholder="收款方式" class="filter-item">
+        <el-option v-for="item in payWayOptions" :key="item.id" :label="item.type" :value="item.id" />
+      </el-select>
+      <el-select v-model="listQuery.receiptType" placeholder="收款类别" class="filter-item">
+        <el-option v-for="item in receiptTypeOptions" :key="item.id" :label="item.type" :value="item.id" />
+      </el-select>
+      <el-select v-model="listQuery.receiptStatus" placeholder="收款状态" class="filter-item">
+        <el-option v-for="item in receiptStatusOptions" :key="item.id" :label="item.type" :value="item.id" />
+      </el-select>
+      <el-select v-model="listQuery.payType" placeholder="收款账号" class="filter-item">
+        <el-option v-for="item in payTypeOptions" :key="item.id" :label="item.type" :value="item.id" />
+      </el-select>
+      <el-select v-model="listQuery.receiptProgress" placeholder="收款进度" class="filter-item">
+        <el-option label="收款进度" value="" />
+        <el-option label="待收" value="1" />
+        <el-option label="部分收" value="2" />
+        <el-option label="全收" value="2" />
+      </el-select>
+      <el-select v-model="listQuery.receiptOrderType" placeholder="订单类型" class="filter-item">
+        <el-option v-for="item in orderTypeOptions" :key="item.id" :label="item.type" :value="item.id" />
+      </el-select>
+      <el-select v-model="listQuery.associationNum" placeholder="关联数量" class="filter-item">
+        <el-option label="关联数量" value="" />
+        <el-option label="单个" value="1" />
+        <el-option label="多个" value="2" />
+      </el-select>
+      <el-select v-model="listQuery.organizeId" placeholder="组织" class="filter-item">
+        <el-option label="组织" value="" />
+        <el-option label="采美" value="0" />
+        <el-option label="呵呵商城" value="9999" />
+        <el-option label="维沙" value="3" />
+      </el-select>
+      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
+        查询
+      </el-button>
+      <el-button class="filter-item" type="primary" icon="el-icon-document" @click="handleDownload">
+        导出Excel
+      </el-button>
+    </div>
+    <el-table :key="tableKey" v-loading="listLoading" :data="list" border fit highlight-current-row style="width:100%">
+      <el-table-column label="序号" align="center" width="50">
+        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
+      </el-table-column>
+      <el-table-column label="收款ID" align="center">
+        <template slot-scope="{row}">{{ row.id }}</template>
+      </el-table-column>
+      <el-table-column label="收款时间" align="center">
+        <template slot-scope="{row}">{{ row.receiptDate }}</template>
+      </el-table-column>
+      <el-table-column label="金额(￥)" align="center">
+        <template slot-scope="{row}">{{ row.receiptAmount }}</template>
+      </el-table-column>
+      <el-table-column label="收款方式" align="center">
+        <template slot-scope="{row}">
+          <span v-text="getPayWayText(row.payWay)" />
+        </template>
+      </el-table-column>
+      <el-table-column label="款项类别" align="center">
+        <template slot-scope="{row}">
+          <span v-text="getReceiptTypeText(row.receiptType)" />
+        </template>
+      </el-table-column>
+      <el-table-column label="收款账号" align="center">
+        <template slot-scope="{row}">
+          <span v-text="getPayTypeText(row.payType)" />
+        </template>
+      </el-table-column>
+      <el-table-column label="收款状态" align="center">
+        <template slot-scope="{row}">
+          <span v-text="getReceiptStatusText(row.receiptStatus)" />
+        </template>
+      </el-table-column>
+      <el-table-column label="机构名称" align="center">
+        <template slot-scope="{row}">
+          {{ row.userName }}
+          <span v-if="row.suffix" style="color:red;">（{{ row.suffix }}）</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="订单类型" align="center">
+        <template slot-scope="{row}">
+          <span v-text="getOrderTypeText(row.orderType)" />
+        </template>
+      </el-table-column>
+      <el-table-column label="关联订单号" align="center">
+        <template slot-scope="{row}">{{ row.orders }}</template>
+      </el-table-column>
+      <el-table-column label="操作" width="150" align="center">
+        <template slot-scope="{row}">
+          <el-button size="mini" type="primary" @click="handleDetail(row)">查看详情</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList" />
+
   </div>
 </template>
 
 <script>
+import { fetchList, getReceiptType } from '@/api/caimei/finance/receipt'
+import { parseTime } from '@/utils'
+import Pagination from '@/components/Pagination'
 export default {
   name: 'ReceiptList',
+  components: { Pagination },
   data() {
     return {
+      tableKey: 0,
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        pageNum: 1,
+        pageSize: 20,
+        id: '',
+        orderId: '',
+        orderNo: '',
+        userName: '',
+        payWay: '',
+        receiptType: '',
+        receiptStatus: '',
+        payType: '',
+        receiptProgress: '',
+        receiptOrderType: '',
+        associationNum: '',
+        organizeId: ''
+      },
+      payTypeOptions: [{ id: '', type: '收款账号' }],
+      payWayOptions: [
+        { id: '', type: '收款方式' },
+        { id: '1', type: '线上' },
+        { id: '2', type: '线下' },
+        { id: '3', type: '余额抵扣' }
+      ],
+      receiptTypeOptions: [
+        { id: '', type: '款项类别' },
+        { id: '1', type: '订单款' },
+        { id: '2', type: '非订单款' },
+        { id: '3', type: '返佣款' },
+        { id: '5', type: '供应商退款' },
+        { id: '6', type: '超级会员款' },
+        { id: '7', type: '二手商品上架费' }
+      ],
+      receiptStatusOptions: [
+        { id: '', type: '收款状态' },
+        { id: '1', type: '待确认' },
+        { id: '2', type: '已确认' },
+        { id: '3', type: '审核通过' },
+        { id: '4', type: '审核未通过' },
+        { id: '5', type: '收款撤销' }
+      ],
+      orderTypeOptions: [
+        { id: '', type: '订单类型' },
+        { id: '0', type: '协销' },
+        { id: '1', type: '自主' },
+        { id: '2', type: '呵呵' }
+      ]
     }
   },
   created() {
-
+    this.getType()
+    this.getList()
+  },
+  methods: {
+    handleFilter() {
+      this.listQuery.pageNum = 1
+      this.getList()
+    },
+    getList() {
+      this.listLoading = true
+      fetchList(this.listQuery).then(response => {
+        this.listLoading = false
+        this.list = response.data.results
+        this.total = response.data.totalRecord
+        // Just to simulate the time of the request
+        setTimeout(() => {
+          this.listLoading = false
+        }, 1.5 * 1000)
+      })
+    },
+    getType() {
+      getReceiptType().then(response => {
+        this.payTypeOptions = response.data
+        this.payTypeOptions.unshift({ id: '', type: '收款账号' })
+      })
+    },
+    getOptionText(id, options) {
+      let text = ''
+      options.forEach(item => {
+        if (item.id === id) {
+          text = item.type
+        }
+      })
+      return text
+    },
+    getPayTypeText(id) {
+      return this.getOptionText(id, this.payTypeOptions)
+    },
+    getPayWayText(id) {
+      return this.getOptionText(id, this.payWayOptions)
+    },
+    getReceiptTypeText(id) {
+      return this.getOptionText(id, this.receiptTypeOptions)
+    },
+    getReceiptStatusText(id) {
+      return this.getOptionText(id, this.receiptStatusOptions)
+    },
+    getOrderTypeText(id) {
+      return this.getOptionText(id, this.orderTypeOptions)
+    },
+    handleDetail(row) {
+      this.$router.push({ path: '/finance/receipt/detail', query: { id: row.id }})
+    },
+    handleDownload() {
+      this.downloadLoading = true
+      import('@/vendor/Export2Excel').then(excel => {
+        // 序号	进账时间	金额(¥)	进账方式	款项类别	进账账号 状态	订单类型	关联订单号	订单ID	运费	税费	订单金额(¥)	关联金额
+        const tHeader = ['Id', '进账时间', '金额(¥)', '进账方式', '款项类别', '进账账号', '状态', '订单类型', '关联订单号', '订单ID', '运费', '税费', '订单金额(¥)', '关联金额', '备注']
+        const filterVal = ['id', 'receiptDate', 'receiptAmount', 'payWay', 'receiptType', 'payType', 'receiptStatus', 'orderType', 'orders', 'orderId', 'freight', 'orderTax', 'orderFee', 'associateAmount', 'noOrderReason']
+        const list = this.list
+        const data = this.formatJson(filterVal, list)
+        excel.export_json_to_excel({
+          header: tHeader,
+          data,
+          filename: '收款列表',
+          autoWidth: true,
+          bookType: 'xlsx'
+        })
+        this.downloadLoading = false
+      })
+    },
+    formatJson(filterVal, jsonData) {
+      return jsonData.map(v => filterVal.map(j => {
+        if (j === 'receiptDate') {
+          return parseTime(v[j])
+        } else if (j === 'payType') {
+          return this.getPayTypeText(v[j])
+        } else if (j === 'payWay') {
+          return this.getPayWayText(v[j])
+        } else if (j === 'receiptType') {
+          return this.getReceiptTypeText(v[j])
+        } else if (j === 'receiptStatus') {
+          return this.getReceiptStatusText(v[j])
+        } else if (j === 'orderType') {
+          return this.getOrderTypeText(v[j])
+        } else {
+          return v[j]
+        }
+      }))
+    }
   }
 }
 </script>
 
 <style scoped>
-
+.filter-item{
+  width: 120px;
+  margin-right: 15px;
+}
 </style>

src/views/finance/receipt/user.vue

@@ -39,7 +39,7 @@
 </template>
 
 <script>
-import { getUser, updateUser, createUser, fetchPermissionList } from '@/api/caimei/finance'
+import { getUser, updateUser, createUser, fetchPermissionList } from '@/api/caimei/finance/receipt-user'
 
 const defaultUser = {
   id: '',

src/views/finance/receipt/users.vue

@@ -37,7 +37,7 @@
 </template>
 
 <script>
-import { fetchList, deleteUser } from '@/api/caimei/finance'
+import { fetchList, deleteUser } from '@/api/caimei/finance/receipt-user'
 
 export default {
   name: 'ReceiptUserList',

src/views/product/classify/form.vue

@@ -6,7 +6,7 @@
 
 <script>
 export default {
-  name: 'WebPageEdit',
+  name: 'ClassifyEdit',
   data() {
     return {
     }

src/views/product/classify/list.vue

@@ -6,7 +6,7 @@
 
 <script>
 export default {
-  name: 'WebPageList',
+  name: 'ClassifyList',
   data() {
     return {
     }

src/views/product/product/form.vue

@@ -6,7 +6,7 @@
 
 <script>
 export default {
-  name: 'WebPageEdit',
+  name: 'ProductEdit',
   data() {
     return {
     }

src/views/product/product/list.vue

@@ -6,7 +6,7 @@
 
 <script>
 export default {
-  name: 'WebPageList',
+  name: 'ProductList',
   data() {
     return {
     }