zhywpt-web/src/views/settlement/reportManagement/clearingGroupDailyFlow/index copy.vue

<template>
  <div>
    <crud-template :ref="(el) => (crudRef = el)" class="as-weight" :home-data="field" :table-data="tableData"
      @btnSearch="btnSearch" @importData="importData" @refreshLeft="refreshLeft" @CurrentChange="handleCurrentChange"
      @download="downloadHandle" @pageSizeChange="(val) => {
      field.paging.currentPage = 1
      field.paging.pageSize = val
      getList()
    }">
      <template #search>
        <el-input maxlength="60" v-trim clearable v-model="searchForm.agencyName" style="width: 200px;"
          placeholder="请输入渠道名称" />
        <el-input maxlength="60" v-trim clearable v-model="searchForm.filledBy" style="width: 200px;"
          placeholder="请输入填表人" />
        <div class="as-gravity-center-start">
          <div class="date-label">推送日期:</div>
          <el-date-picker unlink-panels v-model="value1" type="daterange" range-separator="到" start-placeholder="统计开始日期"
            end-placeholder="统计结束日期" style="margin: 0 10px 10px 10px" format="YYYY-MM-DD" :clearable="false"
            @change="dateChangeHandle" />
        </div>
      </template>
    </crud-template>
  </div>
</template>

<!-- 黔通智联通行费结算报表 -->
<script lang="ts" setup>
  // @ts-ignore crudFrom模板
  import CrudTemplate from "@/crud/index.vue";
  import {
    ref,
    onMounted,
    computed
  } from "vue";
  import { ElMessage } from "element-plus";
  import BaseService from "@/utils/baseService";
  import moment from "moment";
  import $storeinitData from "@/store/initData"; //引入tab vuex
  import { exportFn, getDefaultTime, importFn } from '@/views/settlement/exportFn'

  const crudRef = ref();
  const searchForm = ref({
    agencyName: '',
    filledBy: "",
    startTime: "",
    endTime: "",
  });

  const tableData = ref([]);
  const PRODUCT_TYPE = computed(() => {
    return $storeinitData.state.dictData['SETTLEMENT_TYPE'] || []
  })

  const CARD_TYPE = [
    {
      label: '储值卡',
      value: 'STORED_VALUE_CARD'
    },
    {
      label: '记账卡',
      value: 'CHARGE_CARD'
    },
  ]

  //表单数据配置
  const formLabelWidth = "180px";
  const field = ref({
    tabSize: "small", //Table 的尺寸 large / default /small (默认default)
    searchShow: true, //是否显示搜索模块(默认false)
    border: true, //是否添加边框(默认false)
    dialogCustom: true, //自定义Dialog (默认false)
    dialogFooter: true, //隐藏弹窗页脚显示 (默认false)
    dialogWidth: "40%", //dialog宽度 (默认40%)
    crudShow: true, //是否显示CURD操作栏 (默认true)
    crudChildShow: true, //是否显示CURD子操作栏 (默认true)
    paginStart: true, //是否显示分页查询 (默认false)
    isPageSizes: true,
    pageLayout: 'total, sizes, prev, pager, next',
    titleDialog: "", //table 标题
    paging: {
      pageSize: 10,
      currentPage: 1,
      total: 0,
      pushMoneys: 0,
      pushMoneyMts: 0,
      pushAmounts: 0,
      pushCtAmounts: 0,
      pushCtRefundAmounts: 0,
      pushMtAmounts: 0,
      pushMtRefundAmounts: 0,
      counterofferAmounts: 0,
      counterofferCtAmounts: 0,
      counterofferMtAmounts: 0,
      collectionAmounts: 0,
    },
    crud: {
      add: false,
      cudText: [
        { isAmount: true, label: '推送通行交易总金额：', key: 'pushMoneys' },
        { isAmount: true, label: '推送多场景交易总金额：', key: 'pushMoneyMts' },
        { isAmount: true, label: '推送总金额：', key: 'pushAmounts' },
        { isAmount: true, label: '回盘通行交易总金额：', key: 'pushCtAmounts' },
        { isAmount: true, label: '回盘通行交易退费总金额：', key: 'pushCtRefundAmounts' },
        { isAmount: true, label: '回盘多场景交易总金额：', key: 'pushMtAmounts' },
        { isAmount: true, label: '回盘多场景交易退费总金额：', key: 'pushMtRefundAmounts' },
        { isAmount: true, label: '回盘总金额：', key: 'counterofferAmounts' },
        { isAmount: true, label: '回款通行交易总金额：', key: 'counterofferCtAmounts' },
        { isAmount: true, label: '回款多场景交易总金额：', key: 'counterofferMtAmounts' },
        { isAmount: true, label: '回款总金额：', key: 'collectionAmounts' },
      ],
    },
    searchOperation: {
      isDownload: true, // 导出
      isToLead: false, // 导入
      isAdd: false,
      isTransferMachine: false,
      isTemplate: true,
      templateUrl: import.meta.env.VITE_APP_UPLOAD_URL + 'sett-minio/template/报表管理/黔通智联通行费结算报表.xlsx',
      templateFileName: '黔通智联通行费结算报表导入模板'
    },
    tableSize: -1,
    operateShow: true, //是否为表格添加操作栏(默认true)
    operateTitle: "操作", //操作栏标题(默认为"")
    operateFixed: false, //操作栏是否固定(默认false)
    operateWidth: "100", //操作栏宽度
    operate: {
      info: true, //详情
      edit: false, //是否编辑(默认true)
      delete: false, //是否删除(默认true)
      remark: false, // 查看
    },
    extend: [
      {
        type: "index",
        label: "序号",
      },
    ],
    field: [
      {
        label: "卡类型",
        prop: "cardType",
        listData: CARD_TYPE,
        form: {
          formLabelWidth: formLabelWidth,
          width: "45%",
          type: "select",
          listData: CARD_TYPE,
        },
      },
      {
        label: "填表人",
        prop: "filledBy",
        form: {
          formLabelWidth: formLabelWidth,
          width: "45%",
          type: "input",
        },
      },
      {
        label: "渠道名称",
        prop: "agencyName",
        form: {
          formLabelWidth: formLabelWidth,
          width: "45%",
          type: "input",
        },
      },
      {
        label: "推送日期",
        prop: "pushDate",
        form: {
          formLabelWidth: formLabelWidth,
          width: "45%",
          type: "input",
        },
      },
      {
        label: "推送通行交易金额(元)",
        prop: "pushMoney",
        isAmount: true,
        form: {
          formLabelWidth: formLabelWidth,
          width: "45%",
          type: "input",
        },
      },
      {
        label: "推送多场景交易金额(元)",
        prop: "pushMoneyMt",
        isAmount: true,
        form: {
          formLabelWidth: formLabelWidth,
          width: "45%",
          type: "input",
        },
      },
      {
        label: "推送金额(元)",
        prop: "pushAmount",
        isAmount: true,
        form: {
          formLabelWidth: formLabelWidth,
          width: "45%",
          type: "input",
        },
      },
      {
        label: "回盘通行交易金额(元)",
        prop: "pushCtAmount",
        isAmount: true,
        form: {
          formLabelWidth: formLabelWidth,
          width: "45%",
          type: "input",
        },
      },
      {
        label: "回盘通行交易退费金额(元)",
        prop: "pushCtRefundAmount",
        isAmount: true,
        form: {
          formLabelWidth: formLabelWidth,
          width: "45%",
          type: "input",
        },
      },
      {
        label: "回盘多场景交易金额(元)",
        prop: "pushMtAmount",
        isAmount: true,
        form: {
          formLabelWidth: formLabelWidth,
          width: "45%",
          type: "input",
        },
      },
      {
        label: "回盘多场景交易退费金额(元)",
        prop: "pushMtRefundAmount",
        isAmount: true,
        form: {
          formLabelWidth: formLabelWidth,
          width: "45%",
          type: "input",
        },
      },
      {
        label: "回盘金额(元)",
        prop: "counterofferAmount",
        isAmount: true,
        form: {
          formLabelWidth: formLabelWidth,
          width: "45%",
          type: "input",
        },
      },

      {
        label: "回款通行交易金额(元)",
        prop: "counterofferCtAmount",
        isAmount: true,
        form: {
          formLabelWidth: formLabelWidth,
          width: "45%",
          type: "input",
        },
      },
      {
        label: "回款多场景交易金额(元)",
        prop: "counterofferMtAmount",
        isAmount: true,
        form: {
          formLabelWidth: formLabelWidth,
          width: "45%",
          type: "input",
        },
      },
      {
        label: "回款金额(元)",
        prop: "collectionAmount",
        isAmount: true,
        form: {
          formLabelWidth: formLabelWidth,
          width: "45%",
          type: "input",
        },
      },
      {
        label: "差异说明",
        prop: "differenceDescription",
        form: {
          formLabelWidth: formLabelWidth,
          width: "45%",
          type: "input",
        },
      },
      {
        label: "差异流水分析",
        prop: "differentialFlowAnalysis",
        form: {
          formLabelWidth: formLabelWidth,
          width: "45%",
          type: "input",
        },
      },
      {
        label: "能否补推流水",
        prop: "canPushFlowingWater",
        form: {
          formLabelWidth: formLabelWidth,
          width: "45%",
          type: "input",
        },
      }
    ],
  });
  // 搜索按钮
  function btnSearch() {
    field.value.paging.currentPage = 1;
    getList();
  }
  // 搜索重置
  function refreshLeft() {
    field.value.paging.currentPage = 1;
    searchForm.value = {
      agencyName: '',
      filledBy: "",
      startTime: "",
      endTime: "",
    };
    value1.value = defaultTime
    dateChangeHandle()
    tableData.value = [];
    getList();
  }

  const defaultTime: [Date, Date] = getDefaultTime('day', 1)
  const value1: any = ref(defaultTime) // 筛选时间
  // 时间
  function dateChangeHandle() {
    if (value1.value) {
      searchForm.value.startTime = value1.value[0]
      searchForm.value.endTime = value1.value[1]
    } else {
      searchForm.value.startTime = ''
      searchForm.value.endTime = ''
    }
  }
  function dateChange(time) {
    if (time) {
      time = moment(time).format("YYYY-MM-DD");
    }
    return time
  }

  // 获取列表
  function getList() {
    if (!searchForm.value.startTime || !searchForm.value.endTime) {
      ElMessage.error('请选择查询开始时间和结束时间')
      return
    }
    crudRef.value.tableLoding = true;
    // 参数
    const params: any = {
      pageNo: field.value.paging.currentPage,
      pageSize: field.value.paging.pageSize,
    };
    searchForm.value.startTime = dateChange(searchForm.value.startTime)
    searchForm.value.endTime = dateChange(searchForm.value.endTime)
    const searchFormList = { ...searchForm.value };
    for (const key in searchFormList) {
      if (searchFormList[key]) {
        params[key] = searchFormList[key];
      }
    }
    BaseService.postN('/settlew/cleardailyrecon/trafficflowsettlementpage', params).then((res: any) => {
      if (res && res.statusCode === 0) {
        const bizContent = res.data
        const data = bizContent.data || [];
        tableData.value = data;
        crudRef.value.tableLoding = false;
        field.value.paging.total = bizContent.totalCount;
        field.value.paging.pushMoneys = bizContent.pushMoneys
        field.value.paging.pushMoneyMts = bizContent.pushMoneyMts
        field.value.paging.pushAmounts = bizContent.pushAmounts
        field.value.paging.pushCtAmounts = bizContent.pushCtAmounts
        field.value.paging.pushCtRefundAmounts = bizContent.pushCtRefundAmounts
        field.value.paging.pushMtAmounts = bizContent.pushMtAmounts
        field.value.paging.pushMtRefundAmounts = bizContent.pushMtRefundAmounts
        field.value.paging.counterofferAmounts = bizContent.counterofferAmounts
        field.value.paging.counterofferCtAmounts = bizContent.counterofferCtAmounts
        field.value.paging.counterofferMtAmounts = bizContent.counterofferMtAmounts
        field.value.paging.collectionAmounts = bizContent.collectionAmounts
      } else {
        crudRef.value.tableLoding = false;
        ElMessage.error(res.message);
      }
    });
  }
  function handleCurrentChange(val: number) {
    field.value.paging.currentPage = val;
    getList();
  }
  // 导出
  function downloadHandle() {
    searchForm.value.startTime = dateChange(searchForm.value.startTime)
    searchForm.value.endTime = dateChange(searchForm.value.endTime)
    exportFn('/settlew/cleardailyrecon/collectdownload', searchForm.value, '黔通智联通行费结算报表')
  }
  // 导入
  function importData(url, reportFileName) {
    importFn('/settlew/daily/trafficflowsettlementimport', () => { }, { excelUrl: url, reportFileName })
  }
  onMounted(() => {
    dateChangeHandle()
    getList();
  })

</script>