ezhizao_yzbh_vue/src/views/business/collect/count/index.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 class="list-search-container" :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
            <el-form-item label="客户名称：" prop="companyName">
                <el-input v-model="queryParams.companyName" size="small" placeholder="请输入客户名称" style="width: 150px"
                    clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="审核人：" prop="examineName">
                <el-input v-model="queryParams.examineName" size="small" placeholder="请输入审核人名称" style="width: 150px"
                    clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="合同编号：" prop="contractNo">
                <el-input v-model="queryParams.contractNo" size="small" placeholder="请输入合同编号" style="width: 150px"
                    clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="产品名称：">
                <el-select size="small" v-model="queryParams.taskTypeIds" placeholder="产品名称" clearable
                    style="width: 150px" multiple>
                    <el-option v-for="item in taskType " :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item prop="receiptDateFilter" label="到账时间：">
                <el-date-picker v-model="queryParams.receiptDateFilter" 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 prop="examineTimeFilter" label="审核时间：">
                <el-date-picker v-model="queryParams.examineTimeFilter" 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="确认所属时间：" label-width="95px">
                <el-date-picker v-model="queryParams.actuallyDateFilter" 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="projectName">
            <el-input v-model="queryParams.projectName" size="small" placeholder="请输入项目名称" style="width: 150px"
                      clearable @keyup.enter="handleQuery" />
          </el-form-item>
            <div style="margin-top: 10px;">
                <el-form-item label="是否是项目：" prop="isProject" label-width="auto">
                    <el-select size="small" v-model="queryParams.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="isNew">
                    <el-select size="small" v-model="queryParams.isNew" 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 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="accountList" size="small" border height="100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="index" width="55" align="center" />
            <el-table-column label="公司名称" align="center" prop="companyName" >
            </el-table-column>
            <el-table-column label="产品名称" align="center" prop="typeName">
            </el-table-column>
            <el-table-column label="合同编号" align="center" prop="contractNo">
            </el-table-column>
          <el-table-column label="开始月" align="center" prop="inputStartMonth">
          </el-table-column>
          <el-table-column label="结束月" align="center" prop="inputEndMonth">
          </el-table-column>
          <el-table-column label="服务月数" align="center" prop="serviceNum">
          </el-table-column>
            <el-table-column label="到账日期" align="center" prop="receiptDate">
            </el-table-column>
            <el-table-column label="确认所属时间" align="center" prop="actuallyDate">
              <template #default="scope">
                {{ actuallyDateFormat(scope.row.actuallyDate) }}
              </template>
            </el-table-column>
            <el-table-column label="提收款金额" align="center" prop="withdrawalAmount">
            </el-table-column>
            <el-table-column label="申请人" align="center" prop="applierName">
                <template #default="scope">
                    <el-link type="primary" @click="openDetail(scope.row)" style="font-size: 12px;">
                        {{scope.row.applierName}}</el-link>
                </template>
            </el-table-column>
            <el-table-column label="合同类型" align="center" prop="contractType">
            </el-table-column>
            <el-table-column label="是否是项目" align="center" prop="isProject">
            </el-table-column>
          <el-table-column label="项目名称" align="center">
            <template #default="scope">
              {{scope.row.projectName}}
            </template>
          </el-table-column>
            <el-table-column label="服务金额" align="center" prop="detailAllAmount">
            </el-table-column>
            <el-table-column label="实收" align="center" prop="reallyDetailAmount">
                <template #default="scope">
                    <el-link type="primary" @click="openDetailIn(scope.row)" style="font-size: 12px;">
                        {{scope.row.reallyDetailAmount}}</el-link>
                </template>
            </el-table-column>
            <el-table-column label="待收" align="center" prop="waitDetailAmount">
            </el-table-column>
            <el-table-column label="支出" align="center" prop="outAmount">
                <template #default="scope">
                    <el-link type="primary" @click="openDetailOut(scope.row)" style="font-size: 12px;">
                        {{scope.row.outAmount}}</el-link>
                </template>
            </el-table-column>
            <el-table-column label="审核人" align="center" prop="verifyName" >
            </el-table-column>
            <el-table-column label="审核时间" align="center" prop="examineTime" >
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize" @pagination="getList" />

        <el-dialog title="提收款详情" v-model="open" width="auto" append-to-body>
            <div v-if="inData.length > 0">
                <div>
                    <span>收款情况</span>
                </div>
                <el-table v-loading="loading" :data="inData" size="small" border height="100%">
                    <el-table-column label="序号" align="center" type="index" />
                    <el-table-column label="公司名称" width="230" align="center" prop="companyName" />
                    <el-table-column label="产品名称" width="180" align="center" prop="typeName" />
                    <el-table-column label="合同编号" width="180" align="center" prop="contractNo" />
                    <el-table-column label="到账日期" align="center" prop="receiptDate" />
                    <el-table-column label="提收款金额" align="center" prop="withdrawalAmount" />
                    <el-table-column label="申请人" width="100" align="center" prop="applierName" />
                    <el-table-column label="合同类型" align="center" prop="contractType" />
                    <el-table-column label="是否是项目" align="center" prop="isProject" />
                    <el-table-column label="服务金额" align="center" prop="detailAllAmount" />
                    <el-table-column label="实收" align="center" prop="reallyDetailAmount" />
                    <el-table-column label="审核人" align="center" prop="verifyName" />
                    <el-table-column label="确认所属时间" align="center" prop="actuallyDate" />
                    <el-table-column label="审核时间" align="center" prop="examineTime">
                        <template #default="scope">
                            {{(scope.row.examineTime === '0000-00-00 00:00:00') ? '' : scope.row.examineTime}}
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div v-if="outData.length > 0">
                <div style="margin-top: 20px;">
                    <span>支付情况</span>
                </div>
                <el-table v-loading="loading" :data="outData" size="small" border height="100%">
                    <el-table-column label="序号" align="center" type="index" />
                    <el-table-column label="公司名称" width="230" align="center" prop="companyName" />
                    <el-table-column label="产品名称" width="180" align="center" prop="typeName" />
                    <el-table-column label="合同编号" width="180" align="center" prop="contractNo" />
                    <el-table-column label="付款金额" align="center" prop="withdrawalAmount" />
                    <el-table-column label="申请人" width="100" align="center" prop="applierName" />
                    <el-table-column label="合同类型" align="center" prop="contractType" />
                    <!-- <el-table-column label="是否是项目" align="center" prop="isProject" /> -->
                    <el-table-column label="服务金额" align="center" prop="detailAllAmount" />
                    <el-table-column label="实收" align="center" prop="reallyDetailAmount" />
                    <!-- <el-table-column label="审核时间" align="center" prop="examineTime"/> -->
                    <el-table-column label="审核时间" align="center" prop="examineTime">
                        <template #default="scope">
                            {{(scope.row.examineTime === '0000-00-00 00:00:00') ? '' : scope.row.examineTime}}
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" icon="Finished" size="small" @click="open = false">确 定</el-button>
                    <el-button icon="close" size="small" @click="open = false">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup name="Collectcount">
    // import {
    //     statistics
    // } from "@/api/business/account";
    import {
        statistics, listTask, exportStatistics, getByContract
    } from "@/api/business/financial/collection";
    import { getToken, getTenant } from "@/utils/auth";
    const { proxy } = getCurrentInstance();
    /** 字典数组区 */
    /** 查询 对象 */

    const accountList = ref([]);
    const inData = ref([]);
    const outData = ref([]);
    const loading = ref(true);
    const ids = ref([]);
    const single = ref(true);
    const multiple = ref(true);
    const total = ref(0);
    const open = ref(false);
    /** 查询对象 */
    const queryParams = ref({
        pageNum: 1,
        pageSize: 20,
        tenantId: getTenant(),

    });
    const taskType = ref([]);
    const contractTypes = ref([
        {
            label: "新签",
            value: 0,
        },
        {
            label: "续签",
            value: 1,
        },
    ]);
    const projectTypes = ref([
        {
            label: "是",
            value: 0,
        },
        {
            label: "否",
            value: 1,
        },

    ]);
    onActivated(() => {
        // 你的逻辑
        getList();
    });
    /***********************  方法区  ****************************/
    listTasks()
    /** 查询报表列表 */
    function getList() {
        loading.value = true;
        statistics(queryParams.value).then((response) => {
            accountList.value = response.rows;
            total.value = response.total;
            loading.value = false;
        });
    }
    function listTasks() {
        listTask().then(res => {
            taskType.value = res;
        })
    }
    /** 搜索按钮操作 */
    function handleQuery() {
        queryParams.value.pageNum = 1;
        getList();
    }

    /** 重置按钮操作 */
    function resetQuery() {
        proxy.resetForm("queryRef");
        queryParams.value.taskTypeIds = [];
        queryParams.value.receiptDateFilter = []
        queryParams.value.examineTimeFilter = []
        queryParams.value.actuallyDateFilter = []
        handleQuery();
    }

    // 多选框选中数据
    function handleSelectionChange(selection) {
        ids.value = selection.map((item) => item.id);
        single.value = selection.length != 1;
        multiple.value = !selection.length;
    }


    function openDetail(item) {
        loading.value = true;
        let data = JSON.parse(JSON.stringify(queryParams.value));
        data.contractId = item.contractId
        data.taskTypeIds.push(item.taskTypeId)
        getByContract(data).then((res) => {
            if (res.code == 200) {
                inData.value = res.data.data.inList
                inData.value.forEach(element => {
                    element.withdrawalAmount = item.withdrawalAmount
                });
                outData.value = res.data.data.outList
                outData.value.forEach(element => {
                    element.contractType = item.contractType
                });
                loading.value = false;
                open.value = true;
            } else {
                proxy.$modal.msgError(res.msg);
            }
        });
    }

    function openDetailIn(item) {
        loading.value = true;
        let data = JSON.parse(JSON.stringify(queryParams.value));
        data.contractId = item.contractId
        data.taskTypeIds.push(item.taskTypeId)
        getByContract(data).then((res) => {
            if (res.code == 200) {
                inData.value = res.data.data.inList
                inData.value.forEach(element => {
                    element.withdrawalAmount = item.withdrawalAmount
                });
                outData.value = []
                loading.value = false;
                open.value = true;
            } else {
                proxy.$modal.msgError(res.msg);
            }
        });
    }

    function openDetailOut(item) {
        loading.value = true;
        let data = JSON.parse(JSON.stringify(queryParams.value));
        data.contractId = item.contractId
        data.taskTypeIds.push(item.taskTypeId)
        getByContract(data).then((res) => {
            if (res.code == 200) {
                outData.value = res.data.data.outList
                outData.value.forEach(element => {
                    element.contractType = item.contractType
                });
                inData.value = []
                loading.value = false;
                open.value = true;
            } else {
                proxy.$modal.msgError(res.msg);
            }
        });
    }
    /** 保存按钮操作 */
    function handleSave(row) {
        if (row.name == null || row.name == "") {
            proxy.$modal.msgError("账户名称不能为空！");
            return;
        }

        if (row.accountNum == null || row.accountNum == "") {
            proxy.$modal.msgError("账号不能为空！");
            return;
        }
        if (row.isAdd) {
            addAccount(row).then((response) => {
                proxy.$modal.msgSuccess("添加成功");
                visible.value = false;
                getList.value();
            });
            row.isAdd = false;
            getList();
            getList();
        }

        if (row.isEdit) {
            updateAccount(row).then((response) => {
                proxy.$modal.msgSuccess("修改成功");
                visible.value = false;
                getList.value();
            });
            queryParams.isEdit = false;
            getList();
        }

        getList();
    }

    /** 新增按钮操作 */
    function handleAdd() {
        // 此处必须进行深拷贝，否则添加的明细，将都指向了一个对象
        const _newSource = JSON.parse(JSON.stringify(queryParams.value));
        accountList.value.push(_newSource);
        handleSourceCurrentChange(_newSource);
    }

    /** 取消按钮操作 */
    function handCancel(row) {
        if (row.isEdit) row.isEdit = false;
        else accountList.value.length = accountList.value.length - 1;
    }

    /** 修改按钮操作 */
    function handleSourceCurrentChange(row) {
        row.isAdd = true;
    }

    /** 修改按钮操作 */
    function handleUpdate(row) {
        row.isEdit = true;
    }

    /** 删除按钮操作 */
    function handleDelete(row) {
        const _ids = row.id || ids.value;
        proxy.$modal
            .confirm("是否确认删除选中的数据项？")
            .then(function () {
                return delAccount(_ids);
            })
            .then(() => {
                getList();
                proxy.$modal.msgSuccess("删除成功！");
            })
            .catch(() => { });
    }

    /** 导出按钮操作 */
    function handleExport() {
        exportStatistics(queryParams.value);
    }
const actuallyDateFormat = (actuallyDate) => {
  let str = "";
  actuallyDate.split(",").forEach((s)=>{
    if(s !== "0000-00-00"){
      str+=s+",";
    }
  })
  str = str.substring(0,str.length-1);
  return str;
}
    getList();
</script>