fj-dc-ui/.svn/pristine/73/730fb82eb6641c0a9ab51f8f28b1cc31ec25ba2d.svn-base

<template>
    <div>
        <el-container>
            <el-container>
                <el-main id="dxdcListMain" style="padding:5px 20px;">
                    <el-tabs v-model="currentViewId" type="card">
                        <el-col :span="4" ref="elw">
                            <el-card :body-style="{'padding':'0'}">
                                <export-tree-list-with-check-box-xskcxjg
                                        :pid="pid"
                                        :type="type"
                                        :pidNodes="pidNodes"
                                        :height="dxdcAsideHeight"
                                        :width="treeWidth"
                                        @treeCheckedDataChange="treeCheckedDataChange"
                                        @changeYear="changeYear"
                                ></export-tree-list-with-check-box-xskcxjg>
                            </el-card>
                        </el-col>
                        <el-tab-pane
                                :label="option.label"
                                :name="option.label"
                                v-for="option in options"
                                :key="option.value">
                            <el-col :span="20">
                                <component v-if="showTable" :is="option.value" :ids="ids" type="034"
                                    :newYear="newYear"></component>
                            </el-col>

                        </el-tab-pane>
                    </el-tabs>
                </el-main>
            </el-container>
        </el-container>
        <!-- 添加/编辑人员弹窗 -->
    </div>
</template>

<script>
    import report_xmjc from "./xskcxjg/report_xmjc.vue";
    import report_xmcc from "./xskcxjg/report_xmcc.vue";
    import report_dssjgxm from "./xskcxjg/report_dssjgxm.vue";
    import report_dssjgxmcc from "./xskcxjg/report_dssjgxmcc.vue";
    import report_wthz from "./xskcxjg/report_wthz.vue";
    import report_jcry from "./xskcxjg/report_jcry.vue";
    import exportTreeListWithCheckBoxXskcxjg from "./exportTreeListWithCheckBox_xry";

    export default {
        components: {
            report_xmjc,
            report_xmcc,
            report_dssjgxm,
            report_dssjgxmcc,
            report_wthz,
            report_jcry,
            exportTreeListWithCheckBoxXskcxjg: exportTreeListWithCheckBoxXskcxjg,
        },
        props: [],

        data() {
            return {
                options: [
                    {
                        value: "report_xmjc",
                        label: "附件3-1在建小型水库除险加固项目检查表"
                    },
                    {
                        value: "report_xmcc",
                        label: "附件3-2在建小型水库除险加固项目抽查情况统计表"
                    },
                    {
                        value: "report_dssjgxm",
                        label: "附件4-1待实施小型水库除险加固项目检查表"
                    },
                    {
                        value: "report_dssjgxmcc",
                        label: "附件4-2待实施小型水库除险加固项目抽查情况统计表"
                    },
                    {
                        value: "report_wthz",
                        label: "附件5检查发现问题汇总表"
                    },
                    {
                        value: "report_jcry",
                        label: "附件7检查人员情况表"
                    }

                ],
                value: "",
                currentViewId: "附件3-1在建小型水库除险加固项目检查表",
                showTable: true,
                currentNodeType: "",
                ids: [],
                pid: "000",
                pidNodes: [],
                type: "034",
                dxdcMainHeight: window.innerHeight - 180,
                dxdcAsideHeight: window.innerHeight - 180,
                windowHeight: window.innerHeight - 200,
                windowWidth: window.innerWidth - 350,
                treeWidth: 250,
                newYear: ""
            };
        },
        computed: {
            persId() {
                return localStorage.getItem("userid")
                    ? localStorage.getItem("userid")
                    : "1098101939614724096";
            }
        },
        mounted() {
            this.treeWidth = this.$refs.elw.$el.clientWidth;
        },

        watch: {},

        methods: {
            //树节点选中或取消事件
            treeCheckedDataChange(params) {
                // 如果是选中状态，把元素id加入到ids里
                if (params.newStatus) {
                    params.newCheckedArray.forEach((element, index) => {
                        let id = element.id;
                        if (id != null && id !== undefined && id !== "") {
                            this.ids.push(id);
                        }
                    });
                } else {
                    // 删除取消的元素id
                    params.changedItem.forEach((element, index) => {
                        let id = element.id;
                        let inx = this.ids.indexOf(id);
                        if (inx > -1) {
                            delete this.ids[inx];
                        }
                    });
                }
                // 去重
                this.ids = Array.from(new Set(this.ids));
                console.log("ids:" + this.ids);
            },
            changeYear(val) {
                this.newYear = val;
                this.ids = [];
            },
        }
    };
</script>

<style>
</style>