ezhizao_yzbh_vue/src/views/business/collect/detail/collectDetail.vue

<template>
  <div class="page-container list-container">
    <div class="list-btns-container">
      <el-button type="primary" size="small" icon="Download" @click="handleExport">导出</el-button>
    </div>
    <el-form ref="queryForm" class="list-search-container" :model="queryParams" :inline="true" label-width="68px">
      <el-form-item label="客户名称：" prop="bizCollection.companyName">
        <el-input v-model="queryParams.bizCollection.companyName" size="small" placeholder="请输入客户名称" style="width: 150px"
                  clearable @keyup.enter="handleQuery" />
      </el-form-item>

      <el-form-item label="合同编号：" prop="bizArchiveInput.contractNo">
        <el-input v-model="queryParams.bizArchiveInput.contractNo" size="small" placeholder="请输入合同编号" style="width: 150px"
                  clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="任务名称：" prop="taskTypeId">
        <el-select size="small" v-model="queryParams.taskTypeId" placeholder="任务名称" clearable
                   style="width: 150px">
          <el-option v-for="item in taskTypeList " :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item  label="确认所属时间：" label-width="95px" prop="bizArchiveInput.map.receiptDateFilter">
        <el-date-picker v-model="queryParams.bizArchiveInput.map.receiptDateFilter" size="small" type="daterange" clearable
                        format="YYYY - MM - DD " value-format="YYYY-MM-DD" range-separator="至" start-placeholder="业务日期"
                        end-placeholder="业务日期" style="width: 100%;"></el-date-picker>
      </el-form-item>
      <el-form-item label="甲方：" prop="bizArchiveInput.boss">
        <el-input v-model="queryParams.bizArchiveInput.boss" size="small" placeholder="请输入甲方" style="width: 150px"
                  clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="乙方：" prop="bizArchiveInput.party">
        <el-input v-model="queryParams.bizArchiveInput.party" size="small" placeholder="请输入乙方" style="width: 150px"
                  clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="申请人：" prop="bizCollection.applierName">
        <el-input v-model="queryParams.bizCollection.applierName" size="small" placeholder="请输入申请人" style="width: 150px"
                  clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="审核人：" prop="bizCollection.verifyName">
        <el-input v-model="queryParams.bizCollection.verifyName" size="small" placeholder="请输入审核人名称" style="width: 150px"
                  clearable @keyup.enter="handleQuery" />
      </el-form-item>


      <div style="margin-top: 10px;" >
        <el-form-item label="是否是项目：" prop="bizCollection.isProject" label-width="auto">
          <el-select size="small" v-model="queryParams.bizCollection.isProject" placeholder="是否是项目" clearable
                     style="width: 145px">
            <el-option v-for="item in projectTypes" :key="item.value" :label="item.label"
                       :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="新签/续签：" prop="bizArchiveInput.contractType">
          <el-select size="small" v-model="queryParams.bizArchiveInput.contractType" placeholder="新签/续签" clearable
                     style="width: 150px">
            <el-option v-for="item in contractTypes" :key="item.value" :label="item.label"
                       :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="项目名称：" prop="bizCollection.projectName">
          <el-input v-model="queryParams.bizCollection.projectName" size="small" placeholder="请输入审核人名称" style="width: 150px"
                    clearable @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="项目主体名称：" prop="bizCollection.projectMainName">
          <el-input v-model="queryParams.bizCollection.projectMainName" size="small" placeholder="请输入审核人名称" style="width: 150px"
                    clearable @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="请选择到账时间：" prop="bizArchiveInput.map.actuallyDateFilter">
          <el-date-picker v-model="queryParams.bizArchiveInput.map.actuallyDateFilter" type="daterange" clearable size="small"
                          format="YYYY - MM - DD " value-format="YYYY-MM-DD" range-separator="至" start-placeholder="业务日期"
                          end-placeholder="业务日期" style="width: 100%;"></el-date-picker>
        </el-form-item>

        <el-form-item style="margin-left: 40px;">
          <el-button type="primary" icon="Search" @click="handleQuery" size="small">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery" size="small">重置</el-button>
        </el-form-item>
      </div>

    </el-form>
    <!-- 列表区 -->
    <el-table v-loading="loading" :data="DataList" size="small" border height="100%">
      <el-table-column type="index" width="55" align="center" />
      <el-table-column label="客户名称" align="center" prop="bizCollection.companyName" >
      </el-table-column>
      <el-table-column label="合同编号" align="center" prop="bizArchiveInput.contractNo">
      </el-table-column>
      <el-table-column label="甲方" align="center" prop="bizArchiveInput.boss">
      </el-table-column>
      <el-table-column label="乙方" align="center" prop="bizArchiveInput.party">
      </el-table-column>
      <el-table-column label="任务名称" align="center" prop="taskTypeId">
        <template #default="scope">
            {{taskType[scope.row.taskTypeId]}}
        </template>
      </el-table-column>
      <el-table-column label="任务金额" align="center" prop="bizArchiveInput.amount">
      </el-table-column>
      <el-table-column label="本次收款金额" align="center" prop="arriveAmount">
      </el-table-column>
      <el-table-column label="合同类型" align="center" prop="bizArchiveInput.contractType">
        <template #default="scope">
          {{scope.row.bizArchiveInput.contractType == null?'':scope.row.bizArchiveInput.contractType === 0?'新签':'续签'}}
        </template>
      </el-table-column>
      <el-table-column label="是否是项目" align="center" prop="bizCollection.isProject">
        <template #default="scope">
          {{scope.row.bizCollection.isProject == null?'':scope.row.bizCollection.isProject === 0?'项目':'非项目'}}
        </template>
      </el-table-column>
      <el-table-column label="确认所属时间" align="center" prop="bizCollection.actuallyDate">
      </el-table-column>
      <el-table-column label="已收款金额" align="center" prop="arrived">
      </el-table-column>
      <el-table-column label="收款账户" align="center" prop="bizCollection.subsidiaryName">
      </el-table-column>
      <el-table-column label="申请人" align="center" prop="bizCollection.applierName">
      </el-table-column>
      <el-table-column label="审核人" align="center" prop="bizCollection.verifyName" >
      </el-table-column>
      <el-table-column label="审核时间" align="center" prop="bizCollection.verifyDate" >
      </el-table-column>
      <el-table-column label="项目名称" align="center" prop="bizCollection.projectName" >
      </el-table-column>
      <el-table-column label="项目主体名称" align="center" prop="bizCollection.projectMainName" >
      </el-table-column>
      <el-table-column label="到账日期" align="center" prop="bizCollection.arriveDate" >
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.params.pageNum"
                v-model:limit="queryParams.params.pageSize" @pagination="getList" />
  </div>
</template>

<script lang="ts" setup name="Business/collect/detail">

import {ref} from "@vue/reactivity";
import {defineComponent, getCurrentInstance, onActivated, onBeforeUpdate, reactive} from "vue";
import { getToken, getTenant } from "@/utils/auth";
import {
  statistics, listTask, exportStatistics, getByContract
} from "@/api/business/financial/collection";
import {listCollection,exportCollection} from "@/api/business/financial/collectDetail"
import {onMounted} from "@vue/runtime-core";
import integer from "async-validator/dist-types/validator/integer";

const { proxy } = getCurrentInstance();
interface ICollectionDetail {
  params:{
    pageNum?: number;
    pageSize?: number;
  }
  tenantId?: number;
  id?:number;
  bizCollection?:ICollection;
  bizArchiveInput?:IArchive;
  taskTypeName?:string;
  taskTypeId?:string;
  arriveAmount?:number;
  arrived?:number;
}
interface IArchive{
  Id?:number;
  party?:string;
  boss?:string;
  amount?:number;
  contractType?:string;
  contractNo?:string;
  map:{
    receiptDateFilter?:Array<string>;
    actuallyDateFilter?:Array<string>;
  }
  reqStatisticsVo?:any;
}
interface ICollection{
  companyName?:string;
  isProject?:number;
  arriveDate?:Date;
  actuallyDate?:Date;
  subsidiaryName?:string;
  applierName?:string;
  verifyName?:string;
  verifyDate?:Date;
  projectName?:string;
  projectMainName?:string;
}
const queryParams = ref<ICollectionDetail>({
  tenantId:getTenant(),
  bizArchiveInput:{
    map:{}
  },
  bizCollection:{},
  params:{
    pageNum: 1,
    pageSize: 20
  }
});
const taskType = ref<Map<string, string>>();
const projectTypes = ref([
  {
    label: "是",
    value: 0,
  },
  {
    label: "否",
    value: 1,
  },

]);
const contractTypes = ref([
  {
    label: "新签",
    value: 0,
  },
  {
    label: "续签",
    value: 1,
  },
]);
const loading = ref(true);
const total = ref(0);
const DataList = ref<ICollectionDetail[]>();
const taskTypeList = ref();
function listTasks() {
  listTask().then((res:any) => {
    taskTypeList.value = res as any[]
    taskType.value = taskTypeList.value.reduce((pre, cur) => {
      pre[cur.id] = cur.name;
      return pre
    }, {})
  })
}

const getList = () => {
  loading.value = true;
  listCollection(queryParams.value).then((res:any) => {
    DataList.value = res.rows;
    total.value = res.total;
    loading.value = false;
  }).catch(e=>{
    loading.value = false;
  })
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.params.pageNum = 1;
  getList();
}
function resetQuery() {
  proxy.$refs.queryForm.resetFields();
  handleQuery();
}
const handleExport  = () =>{
  exportCollection(queryParams.value,'收款明细导出.xlsx');
}
//组件激活时调用
onMounted(() => {
  // 你的逻辑
  getList();
  listTasks();
});

</script>
<style scoped>

</style>