ldt-manger-web/src/views/ldt_bills/bills.vue

<template>
  <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               :page.sync="page"
               :permission="permissionList"
               :before-open="beforeOpen"
               v-model="form"
               ref="crud"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @row-del="rowDel"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad">
      <template slot-scope="{type,size}" slot="createTimeSearch">
        <el-radio-group v-model="query.createTime" :size="size" style="float: left">
          <el-radio-button @click="searchStateChange" :label="-1">全部</el-radio-button>
          <el-radio-button @click="searchStateChange" :label="1">今天</el-radio-button>
          <el-radio-button @click="searchStateChange" :label="2">昨天</el-radio-button>
          <el-radio-button @click="searchStateChange" :label="3">最近七天</el-radio-button>
          <el-radio-button @click="searchStateChange" :label="4">最近30天</el-radio-button>
          <el-radio-button @click="searchStateChange" :label="5">本月</el-radio-button>
          <el-radio-button @click="searchStateChange" :label="6">本年</el-radio-button>
        </el-radio-group>
        <avue-date v-model="query.createTimeRange" type="datetimerange" format="yyyy年MM月dd日 hh:mm:ss"
                   value-format="yyyy-MM-dd hh:mm:ss" placeholder="请选择日期"
                   :size="size"
                   @change="searchStateChange"
                   style="width: 280px;margin-left:5px;float: left"
                   range-separator="-"
                   start-placeholder="开始日期"
                   end-placeholder="结束日期"></avue-date>
      </template>
      <template slot-scope="{type,size}" slot="typeSearch">
        <el-radio-group v-model="query.type" :size="size" @change="searchStateChange">
          <el-radio-button :label="select.value" v-for="(select,index) in option.column.find(ele=>{
            return ele.prop==='type';
          }).dicData" :key="index">{{ select.label }}
          </el-radio-button>
        </el-radio-group>
      </template>
      <template slot-scope="{type,size}" slot="payStatusSearch">
        <el-radio-group v-model="query.payStatus" :size="size" @change="searchStateChange">
          <el-radio-button :label="select.value" v-for="(select,index) in option.column.find(ele=>{
            return ele.prop==='payStatus';
          }).dicData" :key="index">{{ select.label }}
          </el-radio-button>
        </el-radio-group>
      </template>
      <template slot-scope="{type,size}" slot="keySearch">
        <el-input type="text" placeholder="订单ID" v-model="query.key" :size="size"
                  style="width: 300px;margin: 1px 5px 1px 0;">
          <el-button type="primary" :size="size" icon="el-icon-search" slot="append"
                     @click="searchStateChange"></el-button>
        </el-input>
        <el-button type="primary" :size="size" icon="el-icon-top" @click="generateListAndDownload">生成列表</el-button>
        <!--        <el-button type="primary" :size="size">导出已生成列表</el-button>-->
      </template>
      <template slot="menuLeft">
        <avue-data-panel :option="censusOption"></avue-data-panel>
      </template>
      <!--      <template slot-scope="scope" slot="dataInfo">-->
      <!--        <div v-if="scope.row.payStatus==='付款成功'">-->
      <!--          优惠金额：-->
      <!--          <div-->
      <!--            style="background-color: #0baaee;color: white; border-radius: 5px; margin:10px; padding:0 10px 0 10px ; display:inline;">-->
      <!--            {{parseFloat(scope.row.totalPrice-scope.row.price).toFixed(2)}}-->
      <!--          </div>-->
      <!--        </div>-->
      <!--      </template>-->
    </avue-crud>
  </basic-container>
</template>

<script>
import {getList, censusPrice, getDetail, add, update, remove, generateList} from "@/api/ldt_bills/bills";
import {mapGetters} from "vuex";
import moment from "moment";
import FileUtil from "@/util/fileUtil";

export default {
  data() {
    return {
      form: {},
      query: {
        createTime: -1,
        createTimeRange: [],
        payStatus: -1,
        type: -1,
      },
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      selectionList: [],
      option: {
        height: 'auto',
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        addBtn: false,
        delBtn: false,
        editBtn: false,
        viewBtn: true,
        selection: true,
        searchBtn: false,
        emptyBtn: false,
        dialogClickModal: false,
        column: [
          {
            label: "付款方",
            prop: "payId",
            hide: true,
            rules: [{
              required: true,
              message: "请输入付款方",
              trigger: "blur"
            }]
          },
          /*{
            prop: "dataInfo",
            slot: true,
            width: 250,
            display: false,
            label: "数据统计"
          },*/
          {
            label: "付款方",
            prop: "payerName",
            rules: [{
              required: true,
              message: "请输入付款方",
              trigger: "blur"
            }]
          },
          {
            label: "收款方",
            hide: true,
            prop: "receiveId",
            rules: [{
              required: true,
              message: "请输入收款方",
              trigger: "blur"
            }]
          },
          {
            label: "收款方",
            prop: "receiverName",
            rules: [{
              required: true,
              message: "请输入收款方",
              trigger: "blur"
            }]
          },
          {
            label: "金额原价",
            prop: "cost",
            rules: [{
              required: true,
              message: "请输入金额原价",
              trigger: "blur"
            }]
          },
          {
            label: "折扣",
            prop: "discount",
            hide: true,
            rules: [{
              required: true,
              message: "请输入折扣",
              trigger: "blur"
            }]
          },
          {
            label: "实付金额",
            prop: "price",
            rules: [{
              required: true,
              message: "请输入实付金额",
              trigger: "blur"
            }]
          },
          {
            label: "总金额",
            prop: "totalPrice",
            rules: [{
              required: true,
              message: "请输入实付金额",
              trigger: "blur"
            }]
          },
          {
            label: "交易类型",
            prop: "type",
            search: true,
            searchSpan: 24,
            searchslot: true,
            searchOrder: 1,
            dicData: [{
              label: "全部",
              value: -1
            }, {
              label: "用户付款",
              value: "USER_PAY"
            }, {
              label: "代理充值",
              value: "AGENT_CHARGE"
            }, {
              label: "微信充值",
              value: "WECHAT_PAY"
            }, {
              label: "商家充值",
              value: "MALL_RECHARGE"
            }],
            rules: [{
              required: true,
              message: "请输入交易类型（用户付款，代理充值，商场充值）",
              trigger: "blur"
            }]
          },
          {
            label: "付款方式",
            prop: "payway",
            rules: [{
              required: true,
              message: "请输入付款方式",
              trigger: "blur"
            }]
          },
          {
            label: "付款插件",
            prop: "payPlugin",
            hide: true,
            rules: [{
              required: true,
              message: "请输入付款插件",
              trigger: "blur"
            }]
          },
          {
            label: "渠道积分id",
            prop: "channelId",
            hide: true,
            rules: [{
              required: true,
              message: "请输入渠道积分id",
              trigger: "blur"
            }]
          },
          {
            label: "支付状态",
            prop: "payStatus",
            type: "select",
            search: true,
            searchSpan: 24,
            searchslot: true,
            searchOrder: 2,
            dicData: [{
              label: "全部",
              value: -1
            }, {
              label: "待付款",
              value: "待付款"
            }, {
              label: "付款成功",
              value: "付款成功"
            }, {
              label: "已完结",
              value: "已完结"
            }, {
              label: "取消付款",
              value: "取消付款"
            }],
            rules: [{
              required: true,
              message: "请输入待付款，付款成功，取消付款",
              trigger: "blur"
            }]
          },
          {
            label: "订单标题",
            prop: "title",
            rules: [{
              required: true,
              message: "请输入订单标题",
              trigger: "blur"
            }]
          },
          {
            label: "订单描述",
            prop: "billDesc",
            hide: true,
            rules: [{
              required: true,
              message: "请输入订单描述",
              trigger: "blur"
            }]
          },
          {
            label: "订单超时时间",
            prop: "exTime",
            hide: true,
            rules: [{
              required: true,
              message: "请输入订单超时时间",
              trigger: "blur"
            }]
          },
          {
            label: "appid",
            prop: "appid",
            hide: true,
            rules: [{
              required: true,
              message: "请输入appid",
              trigger: "blur"
            }]
          },
          {
            label: "openid",
            prop: "openid",
            hide: true,
            rules: [{
              required: true,
              message: "请输入openid",
              trigger: "blur"
            }]
          },
          {
            label: "消耗积分",
            prop: "pointNum",
            rules: [{
              required: true,
              message: "请输入消耗积分",
              trigger: "blur"
            }]
          },
          {
            label: "消耗余额",
            prop: "balanceNum",
            rules: [{
              required: true,
              message: "请输入消耗余额",
              trigger: "blur"
            }]
          },
          {
            label: "第三方平台订单号",
            prop: "thirdOrderId",
            hide: true,
            rules: [{
              required: true,
              message: "请输入第三方平台订单号",
              trigger: "blur"
            }]
          },
          {
            label: "收取的服务费",
            prop: "fee",
            rules: [{
              required: true,
              message: "请输入收取的服务费",
              trigger: "blur"
            }]
          },
          {
            label: "积分交易费",
            prop: "pointFee",
            rules: [{
              required: true,
              message: "请输入积分交易费",
              trigger: "blur"
            }]
          },
          {
            label: "创建时间",
            prop: "createTime",
            type: "datetime",
            format: "yyyy-MM-dd hh:mm:ss",
            valueFormat: "yyyy-MM-dd hh:mm:ss",
            searchRange: true,
            addDisplay: false,
            editDisplay: false,
            search: true,
            searchSpan: 24,
            searchOrder: 0,
            searchslot: true,
            rules: [{
              required: true,
              message: "请输入通知时间",
              trigger: "blur"
            }]
          },
          {
            label: "关键字",
            prop: "key",
            hide: true,
            search: true,
            searchslot: true,
            searchOrder: 5,
            searchSpan: 24,
            editDisplay: false,
          },
        ]
      },
      data: [],
      censusOption: {
        span: 8,
        data: [
          {
            title: '用户付款',
            prop: "USER_PAY",
            count: 0,
            decimals: 2,
            icon: 'el-icon-message',
            color: '#00a7d0',
          },
          {
            title: '代理充值',
            prop: "AGENT_CHARGE",
            count: 0,
            decimals: 2,
            icon: 'el-icon-info',
            color: 'rgb(27, 201, 142)',
          },
          {
            title: '商场充值',
            prop: "MALL_RECHARGE",
            count: 0,
            decimals: 2,
            icon: 'el-icon-success',
            color: 'rgb(230, 71, 88)',
          }
        ]
      }
    };
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.bills_add, false),
        viewBtn: this.vaildData(this.permission.bills_view, false),
        delBtn: this.vaildData(this.permission.bills_delete, false),
        editBtn: this.vaildData(this.permission.bills_edit, false)
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    }
  },
  watch: {
    //监听创建时间变化
    "query.createTime": {
      handler(value) {
        //防止重复调用
        if (value !== undefined) {
          this.query.createTimeRange = [];
          switch (value) {
            case -1:
              this.query.createTimeStart = undefined;
              this.query.createTimeEnd = undefined;
              break;
            case 1: //今天
              this.query.createTimeStart = moment().format("yyyy-MM-DD 00:00:00");
              this.query.createTimeEnd = moment().format("yyyy-MM-DD HH:mm:ss");
              break;
            case 2: //昨天
              this.query.createTimeStart = moment().subtract(1, 'days').format("yyyy-MM-DD 00:00:00");
              this.query.createTimeEnd = moment().subtract(1, 'days').format("yyyy-MM-DD 23:59:59");
              break;
            case 3: //近7天
              this.query.createTimeStart = moment().subtract(7, 'days').format("yyyy-MM-DD HH:mm:ss");
              this.query.createTimeEnd = moment().format("yyyy-MM-DD HH:mm:ss");
              break;
            case 4: //近30天
              this.query.createTimeStart = moment().subtract(30, 'days').format("yyyy-MM-DD HH:mm:ss");
              this.query.createTimeEnd = moment().format("yyyy-MM-DD HH:mm:ss");
              break;
            case 5: //本月
              this.query.createTimeStart = moment().format("yyyy-MM-01 00:00:00");
              this.query.createTimeEnd = moment().format(`yyyy-MM-DD HH:mm:ss`);
              break;
            case 6: //本年
              this.query.createTimeStart = moment().format("yyyy-01-01 00:00:00");
              this.query.createTimeEnd = moment().format(`yyyy-MM-DD HH:mm:ss`);
              break;
            default:
              break;
          }
        }
      }
    },
    //监听创建时间变化
    "query.createTimeRange": {
      handler(value) {
        //防止重复调用
        if (value.length === 2) {
          this.query.createTimeStart = value[0];
          this.query.createTimeEnd = value[1];
          this.query.createTime = undefined;
        }
      }
    },
  },
  created() {
    this.getCensusPrice();
  },
  methods: {
    rowSave(row, done, loading) {
      add(row).then(() => {
        this.onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        done();
      }, error => {
        loading();
        window.console.log(error);
      });
    },
    rowUpdate(row, index, done, loading) {
      update(row).then(() => {
        this.onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        done();
      }, error => {
        loading();
        console.log(error);
      });
    },
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        });
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return remove(this.ids);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.$refs.crud.toggleSelection();
        });
    },
    beforeOpen(done, type) {
      if (["edit", "view"].includes(type)) {
        getDetail(this.form.id).then(res => {
          this.form = res.data.data;
        });
      }
      done();
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      let values = {
        ...params,
      };
      values.createTime = null;
      values.createTimeRange = null;
      this.loading = true;
      getList(page.currentPage, page.pageSize, values).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.selectionClear();
      });
    },
    getCensusPrice() {
      censusPrice().then(res => {
        res.data.data.forEach(ele => {
          this.censusOption.data.find(ele2=>{
            return ele2.prop === ele.type;
          }).count = ele.price;
        })
      });
      // <span style="font-family: '宋体'">
      //             用户付款总额:
      //             <span style="background-color: #8c70b6;color: white; border-radius: 5px; margin:10px; padding:0 10px 0 10px ;">
      //               {{parseFloat(parseFloat(censusPrice.USER_PAY!==undefined?censusPrice.USER_PAY:0) + parseFloat(censusPrice.WECHAT_PAY!==undefined?censusPrice.WECHAT_PAY:0)).toFixed(2)}}
      //             </span>
      //           </span>&nbsp;
      // <span type="warning" style="font-family: '宋体'">
      //             代理充值总额:
      //             <span style="background-color: #a9c985;color: white; border-radius: 5px; margin:10px; padding:0 10px 0 10px ;">
      //               {{parseFloat(censusPrice.AGENT_CHARGE!==undefined?censusPrice.AGENT_CHARGE:0).toFixed(2)}}
      //             </span>
      //           </span>&nbsp;
      // <span type="info" style="font-family: '宋体'">
      //             商场充值总额:
      //             <span style="background-color: #d50e71;color: white; border-radius: 5px; margin:10px; padding:0 10px 0 10px ;">
      //               {{parseFloat(censusPrice.MALL_RECHARGE!==undefined?censusPrice.MALL_RECHARGE:0).toFixed(2)}}
      //             </span>
      //           </span>
    },
    //搜索状态改变
    searchStateChange() {
      setTimeout(() => {
        const newQuery = {};
        this.page.currentPage = 1;
        for (const item in this.query) {
          if (this.query[item] !== undefined && this.query[item] !== -1) {
            newQuery[item] = this.query[item];
          }
        }
        this.onLoad(this.page, newQuery);
      }, 100);
    },
    //生成列表并到处
    generateListAndDownload() {
      const newQuery = {};
      for (const item in this.query) {
        if (this.query[item] !== undefined && this.query[item] !== -1) {
          newQuery[item] = this.query[item];
        }
      }
      newQuery.createTime = null;
      newQuery.createTimeRange = null;
      //获取列表键值对
      newQuery.keyValue = {};
      this.option.column.forEach(ele => {
        newQuery.keyValue[ele.prop] = ele.label;
      });
      newQuery.keyValue = JSON.stringify(newQuery.keyValue);
      this.loading = true;
      //生成列表
      generateList(this.page.currentPage, this.page.pageSize, newQuery).then(res => {
        FileUtil.download(res.data, {
          type: "application/vnd.ms-excel"
        }, `生成付款账单-${moment().format("yyyy-MM-DD HH:mm:ss")}.xls`);
      }).finally(() => {
        this.loading = false;
      });
    },
  }
};
</script>

<style>
</style>