|
|
@@ -0,0 +1,227 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <div class="app-content">
|
|
|
+ <div class="title">分佣统计</div>
|
|
|
+
|
|
|
+ <el-form class="search-form" :inline="true">
|
|
|
+ <!-- 快捷时间选择 -->
|
|
|
+ <el-form-item>
|
|
|
+ <el-select v-model="value" placeholder="请选择日期" @change="handleTypeChange">
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <!-- 自定义时间范围 -->
|
|
|
+ <el-form-item v-if="value === '0'">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="dateRange"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ @change="handleDateRangeChange">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="cyan" icon="el-icon-search" @click="getList">搜索</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <div class="data-box">
|
|
|
+ <div class="table-box">
|
|
|
+ <el-button
|
|
|
+ class="export"
|
|
|
+ size="small"
|
|
|
+ @click="handleExport"
|
|
|
+ v-hasPermi="['his:statistics:commissionExport']">
|
|
|
+ 导出
|
|
|
+ </el-button>
|
|
|
+
|
|
|
+ <el-table
|
|
|
+ :data="list"
|
|
|
+ border
|
|
|
+ :summary-method="getSummaries"
|
|
|
+ show-summary
|
|
|
+ max-height="500"
|
|
|
+ style="width: 100%;">
|
|
|
+ <el-table-column prop="name" label="公司名称"></el-table-column>
|
|
|
+ <el-table-column prop="amountYuan" label="分佣金额(元)"></el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { statistics,exportCommission } from "@/api/his/adv";
|
|
|
+import resize from '../../dashboard/mixins/resize'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'Index',
|
|
|
+ mixins: [resize],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ options: [
|
|
|
+ { value: '1', label: '今天' },
|
|
|
+ { value: '2', label: '昨天' },
|
|
|
+ { value: '3', label: '本周' },
|
|
|
+ { value: '4', label: '上周' },
|
|
|
+ { value: '5', label: '本月' },
|
|
|
+ { value: '6', label: '上月' },
|
|
|
+ { value: '7', label: '本季度' },
|
|
|
+ { value: '8', label: '上季度' },
|
|
|
+ { value: '9', label: '本年' },
|
|
|
+ { value: '10', label: '上年' },
|
|
|
+ { value: '0', label: '自定义' } // 添加自定义选项
|
|
|
+ ],
|
|
|
+ value: '5',
|
|
|
+ dateRange: [], // 自定义时间范围 [startTime, endTime]
|
|
|
+ startTime: '', // 开始时间
|
|
|
+ endTime: '', // 结束时间
|
|
|
+ list: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ created() {
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ // 切换时间类型
|
|
|
+ handleTypeChange(val) {
|
|
|
+ if (val !== '0') {
|
|
|
+ this.dateRange = [];
|
|
|
+ this.startTime = '';
|
|
|
+ this.endTime = '';
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 自定义时间范围变化
|
|
|
+ handleDateRangeChange(val) {
|
|
|
+ if (val && val.length === 2) {
|
|
|
+ this.startTime = val[0];
|
|
|
+ this.endTime = val[1];
|
|
|
+ } else {
|
|
|
+ this.startTime = '';
|
|
|
+ this.endTime = '';
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ handleExport() {
|
|
|
+ // 校验自定义时间
|
|
|
+ if (this.value === '0' && (!this.startTime || !this.endTime)) {
|
|
|
+ this.$message.warning('请选择自定义时间范围');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ var data = {
|
|
|
+ type: this.value === '0' ? null : this.value,
|
|
|
+ startTime: this.startTime,
|
|
|
+ endTime: this.endTime
|
|
|
+ }
|
|
|
+ exportCommission(data).then((response) => {
|
|
|
+ this.download(response.msg);
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ getList() {
|
|
|
+ // 校验自定义时间
|
|
|
+ if (this.value === '0' && (!this.startTime || !this.endTime)) {
|
|
|
+ this.$message.warning('请选择自定义时间范围');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ var data = {
|
|
|
+ type: this.value === '0' ? null : this.value,
|
|
|
+ startTime: this.startTime,
|
|
|
+ endTime: this.endTime
|
|
|
+ }
|
|
|
+
|
|
|
+ statistics(data).then((response) => {
|
|
|
+ this.list = response.list;
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ getSummaries(param) {
|
|
|
+ const { columns, data } = param;
|
|
|
+ const sums = [];
|
|
|
+
|
|
|
+ columns.forEach((column, index) => {
|
|
|
+ if (index === 0) {
|
|
|
+ sums[index] = '总计';
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ const values = data.map(item => Number(item[column.property]));
|
|
|
+
|
|
|
+ if (!values.every(value => isNaN(value))) {
|
|
|
+ const sum = values.reduce((prev, curr) => {
|
|
|
+ const value = Number(curr);
|
|
|
+ if (!isNaN(value)) {
|
|
|
+ return prev + curr;
|
|
|
+ } else {
|
|
|
+ return prev;
|
|
|
+ }
|
|
|
+ }, 0);
|
|
|
+
|
|
|
+ // 保留两位小数
|
|
|
+ sums[index] = sum.toFixed(2) + ' 元';
|
|
|
+ } else {
|
|
|
+ sums[index] = '';
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ return sums;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.app-container {
|
|
|
+ border: 1px solid #e6e6e6;
|
|
|
+ padding: 12px;
|
|
|
+
|
|
|
+ .app-content {
|
|
|
+ background-color: white;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ padding: 20px 30px 0px 30px;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: black;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-form {
|
|
|
+ margin: 20px 30px 0px 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .data-box {
|
|
|
+ padding: 30px;
|
|
|
+ background-color: rgb(255, 255, 255);
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .el-select {
|
|
|
+ margin: 5px 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .table-box {
|
|
|
+ margin-top: 15px;
|
|
|
+
|
|
|
+ .export {
|
|
|
+ float: right;
|
|
|
+ margin: 10px 0px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|