bonus-ui/src/views/material/cost/component/applyHome.vue

<template>
    <div class="app-container" id="costApplyList">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px">
            <el-form-item >
                <treeselect
                    ref="treeselectRef"
                    v-model="unitIds"
                    :options="unitList" :normalizer="normalizer"
                    :show-count="true"         style="width: 300px;"
                    :disable-branch-nodes="true"
                    noChildrenText="没有数据了" noOptionsText="没有数据" noResultsText="没有搜索结果"
                    placeholder="请选择结算单位" @select="unitChange"
                    :multiple="true"
                >
            </treeselect>
                <!-- <el-cascader v-model="unitIds"
                    :show-all-levels="false"
                    :options="unitList"
                    :props="selectTreeProps"
                    filterable
                    clearable
                    collapse-tags
                    @change="unitChange"
                    popper-class="popper-select"
                    placeholder="请选择单位"
                ></el-cascader>  -->
            </el-form-item>
            <el-form-item prop="projectIds">
                <treeselect
                    v-model="queryParams.projectId"
                    :options="proList" :normalizer="normalizer"
                    :show-count="true" style="width: 240px" :disable-branch-nodes="true"
                    noChildrenText="没有数据了" noOptionsText="没有数据" noResultsText="没有搜索结果"
                    placeholder="请选择结算工程" @select="proChange"
                />
                <!-- <el-cascader v-model="projectIds"
                        :show-all-levels="false"
                        :options="proList"
                        :props="selectTreeProps"
                        filterable clearable
                        collapse-tags
                        @change="proChange"
                        placeholder="请选择工程"
                    ></el-cascader>  -->
            </el-form-item>
            <el-form-item prop="agreementCode">
                <el-tooltip content="协议编号" placement="top" :disabled="!queryParams.agreementCode">
                    <template #content>
                        {{ queryParams.agreementCode }}
                    </template>
                    <el-input v-model="queryParams.agreementCode" placeholder="请输入协议号" clearable disabled/>
                </el-tooltip>
            </el-form-item>
            <el-form-item prop="sltStatus">
                <el-select
                    v-model="queryParams.sltStatus"
                    placeholder="请选择结算状态"
                    clearable
                    filterable
                >
                    <el-option
                    v-for="dict in dict.type.cost_status"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    size="mini"
                    @click="handleQuery"
                    >查询</el-button
                >
                <el-button
                    icon="el-icon-refresh"
                    size="mini"
                    @click="resetQuery"
                    >重置</el-button
                >
                <el-button
                    type="primary"
                    plain
                    size="mini"
                    @click="handleApplyList"
                    >批量结算</el-button
                >
                <el-button
                    type="primary"
                    plain
                    size="mini"
                    @click="openPrintDialog"
                    >协议书</el-button
                >
            </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="tableList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" :selectable="(row) => row.sltStatus == 0 || row.sltStatus == 3"/>
            <el-table-column label="序号" align="center" width="80" type="index">
                <template slot-scope="scope">
                    <span>{{
                        (queryParams.pageNum - 1) * 10 + scope.$index + 1
                    }}</span>
                </template>
            </el-table-column>
            <el-table-column label="协议编号" align="center" prop="agreementCode" :show-overflow-tooltip="true"/>
            <el-table-column label="结算单位" align="center" prop="unitName" :show-overflow-tooltip="true"/>
            <el-table-column label="结算工程" align="center" prop="projectName" :show-overflow-tooltip="true"/>
            <el-table-column label="合计费用（元）" align="center" prop="costs" :show-overflow-tooltip="true">
                <template slot-scope="scope" v-if="scope.row.costs != null && scope.row.costs!=''">
                            {{ scope.row.costs.toFixed(2) }}
                </template>
            </el-table-column>
            <el-table-column label="结算状态" align="center" prop="sltStatus" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.cost_status" :value="scope.row.sltStatus"/>
                </template>
                <!-- <template slot-scope="scope">
                    <span v-if="scope.row.sltStatus == '0'">未结算</span>
                    <span v-if="scope.row.sltStatus == '1'">已结算</span>
                    <span v-if="scope.row.sltStatus == '2'">已审核</span>
                    <span v-if="scope.row.sltStatus == '3'">已驳回</span>
                </template> -->
            </el-table-column>
            <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true"/>
            <!-- <el-table-column label="租赁期限(天)" align="center" prop="leaseDay" :show-overflow-tooltip="true" />
            <el-table-column label="授权人" align="center" prop="authPerson" :show-overflow-tooltip="true" />
            <el-table-column label="联系电话 " align="center" prop="phone" :show-overflow-tooltip="true" /> -->
            <el-table-column label="操作" align="center" width="300" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" icon="el-icon-edit"
                        @click="handleApply(scope.row)"
                        v-if="scope.row.sltStatus == '0' || (scope.row.sltStatus == '3')"
                        >结算申请</el-button>
                <!-- <el-button size="mini" type="danger" icon="el-icon-delete"
                            @click="handleDelete(scope.row)"
                        >撤销申请</el-button> -->
                </template>
            </el-table-column>
        </el-table>

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

        <!-- 协议单弹窗 -->
        <el-dialog :visible.sync="openPrint" width="1100px" append-to-body>
          <div id="checkId">
            <div style="height: 600px; overflow-y: scroll" >
                <vue-easy-print tableShow ref="remarksPrintRef" class="print">
                <div style="text-align: center; font-weight: 600; font-size: 16px">
                    机具设备有偿使用费结算协议书
                </div>
                <div class="info" style="margin-top: 10px; display: flex; flex-wrap: wrap">
                    <div class="item" style=" width: 65%; flex-shrink: 0; margin-bottom: 5px; font-size: 14px;">
                    </div>
                    <div class="item" style=" width: 35%; flex-shrink: 0; margin-bottom: 5px; font-size: 14px;">
                        <span>协议号：</span>
                    </div>
                </div>
                <div class="tabelColumn">
                    <div class="columnLabel" style="width: 20%;">工程名称：</div>
                    <div class="columnContent" style="width: 80%;">金上-湖北线路工程（川12标）</div>
                </div>
                <div class="tabelColumn">
                    <div class="columnLabel" style="width: 20%;">承租单位：</div>
                    <div class="columnContent" style="width: 40%;">金上-湖北线路工程（川12标）项目部</div>
                    <div class="columnLabel" style="width: 10%;border-left: 1px solid #9c9c9c;">日期：</div>
                    <div class="columnContent" style="width: 30%;">2024-12-01</div>
                </div>
                <div class="tabelColumn">
                    <div class="columnLabel" style="width: 100%;">结算项目及金额(元)</div>
                </div>
                <div class="tabelColumn">
                    <div class="columnLabel" style="width: 60%;">一、施工机具有偿使用费：</div>
                    <div class="columnContent" style="width: 40%;">￥ 13144247. 44</div>
                </div>
                <div class="tabelColumn">
                    <div class="columnLabel" style="width: 60%;">二、施工机具维修费：</div>
                    <div class="columnContent" style="width: 40%;">￥ 13144247. 44</div>
                </div>
                <div class="tabelColumn">
                    <div class="columnLabel" style="width: 60%;">三、施工机具丢失费：</div>
                    <div class="columnContent" style="width: 40%;">￥ 13144247. 44</div>
                </div>
                <div class="tabelColumn">
                    <div class="columnLabel" style="width: 60%;">四、施工机具损坏赔偿费：</div>
                    <div class="columnContent" style="width: 40%;">￥ 13144247. 44</div>
                </div>
                <div class="tabelColumn">
                    <div class="columnLabel" style="width: 20%;">费用合计金额（大写）：</div>
                    <div class="columnContent" style="width: 40%;">贰仟肆佰伍拾陆万伍仟肆佰捌拾玖元肆角伍分</div>
                    <div class="columnContent" style="width: 40%;">￥ 24565489.45</div>
                </div>
                <div class="tabelColumn">
                    <div class="columnLabel" style="width: 20%;">说明：</div>
                    <div class="columnContent" style="width: 80%;">本协议一式三份，甲方一份，乙方一份，经双方签字后生效。</div>
                </div>
                <div class="tabelColumn" style="border: 1px solid #9c9c9c;">
                    <div class="columnLabel" style="width: 20%;">备注：</div>
                    <div class="columnContent" style="width: 80%;">此费用仅为在机具设备分公司发生费用，未计从项目部领用机具费用。</div>
                </div>


                <div class="fillIn" style="margin-top: 20px; display: flex; justify-content: space-between;">
                    <div class="item" style="width: 33%">
                    <div>
                        <span>部门负责人：</span>
                    </div>
                    </div>

                    <div class="item" style="width: 33%">
                    <div>
                        <span>承租负责人：</span>
                    </div>
                    </div>

                    <div class="item" style="width: 33%">
                    <div>
                        <span>核算员：</span>
                    </div>
                    </div>
                </div>
                </vue-easy-print>
            </div>
          </div>

            <div slot="footer" class="dialog-footer" style="text-align: center">
                <el-button type="primary" @click="print">打 印</el-button>
                <el-button @click="openPrint = false">关 闭</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import {
    // getProjectList,
    getUnitList,
    // getAgreementInfoById,
} from '@/api/back/index.js'
import { getSltAgreementInfo,getProjectListByUnitIds,getAgreementInfoById } from '@/api/cost/cost'
import vueEasyPrint from "vue-easy-print";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import printJS from 'print-js'
export default {
    name: 'CostApplyList',
    dicts: ['cost_status'],
    components: { Treeselect },
    data() {
        return {
            // 遮罩层
            loading: false,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 总条数
            total: 0,
            // 单位数据
            unitList: [],
            // 工程数据
            proList: [],
            unitIds: [],
            projectIds: null,
            selectTreeProps: {
                children: 'children',
                label: 'name',
                value: 'id',
                multiple: true,//false
            },
            // statusList: [
            //     { id: '1', name: '未结算' },
            //     { id: '2', name: '已结算' },
            //     { id: '3', name: '已审核' },
            //     { id: '4', name: '已驳回' },
            // ],
            // 表格数据
            tableList: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                sltStatus: '',
                isCommit:'',
                unitId: null,
                projectId: null,
                agreementId: [],
                agreementCode: '',
            },
            openPrint:false
        }
    },
    // updated() {
    //     this.$nextTick(() => {
    //         // 通过 ref 获取 treeselect 组件的 DOM 元素
    //         const treeselectElm = this.$refs.treeselectRef.$el;
    //         if (treeselectElm && typeof treeselectElm.getBoundingClientRect === 'function') {
    //             const rect = treeselectElm.getBoundingClientRect();
    //             // 处理 rect
    //             console.log(rect);
    //         }
    //     });
    // },
    created() {
        this.GetUnitData()
        // this.GetProData()
        this.getList()
    },
    methods: {
        /** 转换菜单数据结构 */
        normalizer(node) {
            if (node.children && !node.children.length) {
                delete node.children;
            }
            return {
                id: node.id,
                label: node.name,
                children: node.children,
            };
        },
        // 获取 来往单位 列表数据
        async GetUnitData() {
                const params = {
                    // projectId: this.queryParams.projectId /*  */,
                }
                const res = await getUnitList(params)
                this.unitList = res.data;
                if(this.queryParams.projectId){
             this.getAgreementInfo()
                }

        },
        unitChange(val){
                console.log('Selected values:', val); // 检查选中的值
                // this.unitIds.push(Number(val.id));
            // if(val&&val.length>0){
            //     this.queryParams.unitId=this.unitIds[this.unitIds.length - 1]
            // }else if(val&&val.length==0){
            //     this.queryParams.unitId=""
            // }
            console.log("xxxxxxxxx",this.queryParams.unitId)
            console.log("yyyyyyyyy",this.unitIds)
            // this.GetProData()
            setTimeout(()=>{
                this.queryParams.projectId=null
                this.queryParams.agreementId = null
                this.queryParams.agreementCode = null
                this.GetProData()
            },500)
        },
        // 获取 工程名称 列表数据
        async GetProData() {
                const unitIdsAsNumbers = this.unitIds.map(id => Number(id));
                const params = {
                    unitIds: unitIdsAsNumbers,
                }
                const res = await getProjectListByUnitIds(params)
                this.proList = res.data;

                this.getAgreementInfo()
        },
        proChange(val){
            // if(val&&val.length>0){
            //     this.queryParams.projectId=this.projectIds[this.projectIds.length - 1]
            // }else if(val&&val.length==0){
            //     this.queryParams.projectId=""
            // }
            // this.GetUnitData()
            setTimeout(()=>{
                this.GetUnitData()
            },500)
        },
        // 获取 协议id
        async getAgreementInfo() {
            if (this.unitIds && this.unitIds.length > 0 && this.queryParams.projectId) {
                const params = {
                    unitIds: this.unitIds,
                    projectId: this.queryParams.projectId,
                }
                const res = await getAgreementInfoById(params)
                console.log(res)
                if ((!res.data && res.data.some(item => !item.agreementId))) {
                    this.$message.error('当前单位和工程无协议！')
                    this.queryParams.unitId = null
                    this.queryParams.projectId = null
                    this.GetUnitData()
                    this.GetProData()
                } else {
                    this.queryParams.agreementId = res.data.map(item => item.agreementId);
                    this.queryParams.agreementCode = res.data.map(item => item.agreementCode).join(',');
                }
            }
        },
        /** 查询列表 */
        getList() {
            this.loading = true
            const params = {
                pageNum: this.queryParams.pageNum,
                pageSize: this.queryParams.pageSize,
                projectId: this.queryParams.projectId,
                sltStatus: this.queryParams.sltStatus,
                // ...this.queryParams,
                unitIds: this.unitIds,

            }
            getSltAgreementInfo(params).then((response) => {
                this.tableList = response.rows
                this.total = response.total
                this.loading = false
            })
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1
            this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.unitIds=[]
            this.projectIds=[]
            this.queryParams={
                pageNum: 1,
                pageSize: 10,
                sltStatus: '',
                isCommit:'',
                unitId: null,
                projectId: null,
                agreementId: [],
                agreementCode: '',
            }
            this.resetForm('queryForm')
            this.handleQuery()
        },
        //结算申请
        handleApply(row) {
            let arr = [];
            arr.push(row);
            // console.log(arr)
            // console.log(this.ids)
            // console.log(JSON.stringify(arr))
            // this.$tab.closeOpenPage({
            //     path: '/cost/costApplyDetail',
            //     query: {
            //         rowData: JSON.stringify(arr),
            //     },
            // })
            this.$emit("goDetail",JSON.stringify(arr));
        },
        handleApplyList() {
            if (this.ids.length < 1) {
                this.$message.error('请勾选需要结算的数据！')
                return
            }
            if (this.ids.length > 0) {
                let arr = this.ids
                this.$emit("goDetail",JSON.stringify(arr));
            }
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item)
            this.single = selection.length != 1
            this.multiple = !selection.length
        },
        openPrintDialog(){
            this.openPrint = true
        },
        //维修任务单打印
        print() {
          // this.$refs.remarksPrintRef.print();
          printJS({
            printable: 'checkId',
            type: 'html',
            targetStyles: ['*'],
            maxWidth:'1400'
            // 其他配置选项
          });
        },

        /** 删除按钮操作 */
        handleDelete(row) {
            // const agreementId = row.agreementId;
            // let param = {
            //   agreementId:row.agreementId+''
            // }
            // this.$modal.confirm('是否确认删除该数据项？').then(function() {
            //   return removeAgreement(param);
            // }).then(() => {
            //   this.getList();
            //   this.$modal.msgSuccess("删除成功");
            // }).catch(() => {});
        },
        /** 导出按钮操作 */
        handleExport() {
            // this.download('material/agreementInfo/export', {
            //   ...this.queryParams
            // }, `协议_${new Date().getTime()}.xlsx`)
        },
    },
}
</script>
<style lang="scss" scoped>
::v-deep.el-table .fixed-width .el-button--mini {
    width: 80px !important;
    margin-bottom: 10px;
}
.dialog-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.tabelColumn {
    width:1000px;
    height: 50px;
    display: flex;
    align-items: center;
    border: 1px solid #9c9c9c;
    // margin-bottom: 1px;
    border-bottom: none;
}
.columnLabel {
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-left: none;
}
.columnContent {
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-left: 1px solid #9c9c9c;
}
</style>