|
|
@@ -0,0 +1,299 @@
|
|
|
+<template>
|
|
|
+ <div class="app-list-content">
|
|
|
+ <x-crud class="liu-crud-wrap" @load="onLoad">
|
|
|
+
|
|
|
+ <template #slot-tabs>
|
|
|
+ <el-tabs class="liu-tabs" type="border-card" v-model="tabIndex">
|
|
|
+ <el-tab-pane v-for="(item, index) in tabsData" :key="index" :label="`${item.text}`" :name="item.key" ></el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template #table-column-amount="{scope}">
|
|
|
+ <span> {{ scope.row.io == 1 ? '+' : '-' }} {{ scope.row.amount }} </span>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template #table-column-staffName="{scope}">
|
|
|
+ <span>{{ scope.row.staffName != '' ? scope.row.staffName : '-' }}</span>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template #table-column-capitalType="{scope}">
|
|
|
+ <span v-if="scope.row.capitalType == 75">售后返充</span>
|
|
|
+ <span v-else-if="scope.row.capitalType == 62">线下充值</span>
|
|
|
+ <span v-else-if="scope.row.capitalType == 66">线上充值</span>
|
|
|
+ <span v-else-if="scope.row.capitalType == 64">结账</span>
|
|
|
+ <span v-else>其它</span>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template #table-column-payWay="{scope}">
|
|
|
+ <span v-if="scope.row.capitalType == 62 || scope.row.capitalType == 66">
|
|
|
+ <span v-if="scope.row.payWay == 0">微信</span>
|
|
|
+ <span v-else-if="scope.row.payWay == 1">支付宝</span>
|
|
|
+ <span v-else-if="scope.row.payWay == 2">余额</span>
|
|
|
+ <span v-else-if="scope.row.payWay == 4">现金</span>
|
|
|
+ <span v-else-if="scope.row.payWay == 5">银行卡</span>
|
|
|
+ <span v-else>其它</span>
|
|
|
+ </span>
|
|
|
+ <span v-else>-</span>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template #slot-search-list="{scope}">
|
|
|
+
|
|
|
+ <el-select @change="getCurrentCp" v-model="currentCustomName" filterable remote reserve-keyword placeholder="搜索客户" clearable
|
|
|
+ :remote-method="searchCpInfo" :loading="loading" style="width:200px;margin-right:10px;" size="middle">
|
|
|
+ <el-option v-for="item in customInfoList" :key="item.id" :label="`${item.name}（${item.id}）`" :value="item.id"> </el-option>
|
|
|
+ </el-select>
|
|
|
+
|
|
|
+ <span style="margin-left:9px;font-size:28px;">时间：</span>
|
|
|
+ <el-date-picker v-model="currentDateList" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" @change="getSearchDate" value-format="yyyy-MM-dd"
|
|
|
+ class="custom-date-picker" end-placeholder="结束日期" :picker-options="pickerOptions" size="middle" style="margin-right:8px;">
|
|
|
+ </el-date-picker>
|
|
|
+
|
|
|
+ <el-button type="primary" size="middle" style="margin-left:10px;" @click="exportData()">导出数据</el-button>
|
|
|
+
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </x-crud>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { mapGetters, mapActions } from 'vuex';
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ app: null,
|
|
|
+ tabIndex: '0',
|
|
|
+ tabsData: [
|
|
|
+ {
|
|
|
+ text: '列表',
|
|
|
+ key: '0',
|
|
|
+ val: 0
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ customInfoList: [],
|
|
|
+ loading: false,
|
|
|
+ currentCustomName:'',
|
|
|
+ customId:0,
|
|
|
+ pickerOptions: {
|
|
|
+ shortcuts: [{
|
|
|
+ text: '最近一周',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
|
|
+ picker.$emit('pick', [start, end]);
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ text: '最近一个月',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
|
|
+ picker.$emit('pick', [start, end]);
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ text: '最近三个月',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
|
|
+ picker.$emit('pick', [start, end]);
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ startTime:'',
|
|
|
+ endTime:'',
|
|
|
+ searchTime:'',
|
|
|
+ currentDateList:[],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onLoad({ ctx, app }) {
|
|
|
+ this.app = app;
|
|
|
+ if (this.$route.query.customId) {
|
|
|
+ this.customId = this.$route.query.customId;
|
|
|
+ this.currentCustomName = this.$route.query.customName ? this.$route.query.customName : ''
|
|
|
+ }
|
|
|
+ ctx.service(this.$service.customDebtChange)
|
|
|
+ .set('table', {
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ prop: 'id',
|
|
|
+ label: 'ID',
|
|
|
+ align: 'center',
|
|
|
+ width: 100
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'addTime',
|
|
|
+ label: '日期',
|
|
|
+ align: 'center',
|
|
|
+ width: 180
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'customId',
|
|
|
+ label: '客户ID',
|
|
|
+ align: 'center',
|
|
|
+ width: 100
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'customName',
|
|
|
+ label: '客户名称',
|
|
|
+ align: 'center',
|
|
|
+ width: 150
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'capitalType',
|
|
|
+ label: '类型',
|
|
|
+ align: 'center',
|
|
|
+ width: 120
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'payWay',
|
|
|
+ label: '支付方式',
|
|
|
+ align: 'center',
|
|
|
+ width: 120
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'event',
|
|
|
+ label: '事项',
|
|
|
+ align: 'center',
|
|
|
+ width: 200
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'staffName',
|
|
|
+ label: '人员',
|
|
|
+ align: 'center',
|
|
|
+ width: 100
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'amount',
|
|
|
+ label: '变动',
|
|
|
+ align: 'center',
|
|
|
+ width: 120
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'balance',
|
|
|
+ label: '余额',
|
|
|
+ align: 'center',
|
|
|
+ width: 120
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'remark',
|
|
|
+ label: '备注',
|
|
|
+ align: 'center',
|
|
|
+ width: 200
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ op: {
|
|
|
+ visible: true,
|
|
|
+ props: {
|
|
|
+ width: 100,
|
|
|
+ align: 'center',
|
|
|
+ fixed: 'right',
|
|
|
+ label: '操作'
|
|
|
+ },
|
|
|
+ layout: ['slot-column-option']
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .set('dict', {
|
|
|
+ search: {
|
|
|
+ keyWord: 'name'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .set('search', {
|
|
|
+ key: { placeholder: '...' }
|
|
|
+ })
|
|
|
+ .set('layout', [
|
|
|
+ ['slot-tabs'],
|
|
|
+ ['slot-search-list'],
|
|
|
+ ['data-table'],
|
|
|
+ ['flex1', 'pagination']
|
|
|
+ ])
|
|
|
+ .done();
|
|
|
+ this.refreshData()
|
|
|
+ },
|
|
|
+ getCurrentCp(e){
|
|
|
+ this.customId = e
|
|
|
+ this.refreshData()
|
|
|
+ },
|
|
|
+ refreshData(){
|
|
|
+ this.app.refresh({searchTime:this.searchTime,startTime:this.startTime,endTime:this.endTime,customId:this.customId})
|
|
|
+ },
|
|
|
+ exportData(){
|
|
|
+ this.$service.customDebtChange.getChangeList({searchTime:this.searchTime,startTime:this.startTime,endTime:this.endTime,customId:this.customId,pageSize:9999999,export:1}).then(res => {
|
|
|
+ if(res.file){
|
|
|
+ window.location.href = res.file
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ searchCpInfo(query) {
|
|
|
+ let that = this
|
|
|
+ if (query !== '') {
|
|
|
+ this.loading = true;
|
|
|
+ this.$service.custom.list({name:query,type:0}).then(res=>{
|
|
|
+ that.loading = false
|
|
|
+ that.customInfoList = res.list
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.customInfoList = []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getSearchDate(){
|
|
|
+ if (this.$util.isEmpty(this.currentDateList)) {
|
|
|
+ this.searchTime = ''
|
|
|
+ this.startTime = ''
|
|
|
+ this.endTime = ''
|
|
|
+ }else{
|
|
|
+ this.searchTime = 'custom'
|
|
|
+ this.startTime = this.currentDateList[0]
|
|
|
+ this.endTime = this.currentDateList[1]
|
|
|
+ }
|
|
|
+ this.refreshData()
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.user-name-warp {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ span {
|
|
|
+ margin-left: 6px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.recharge-modal-content {
|
|
|
+ @include disFlex(center, space-around);
|
|
|
+ .card-name {
|
|
|
+ width: 200px;
|
|
|
+ height: 100%;
|
|
|
+ border-right: 1px solid $borderColor;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.store-icon {
|
|
|
+ i {
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-icon-check {
|
|
|
+ color: #fee470;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-icon-close {
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+}
|
|
|
+.accounts-list{
|
|
|
+ width: 80%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ .accounts-center{
|
|
|
+ width: 80%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
