hb_pqs_web/src/views/Process-supervision/components/harmonicmanagement/Proportion.vue

<template>
    <div>
        <el-button type="primary" size="small" icon="el-icon-check" @click="preserve">保存</el-button>
        <el-button type="primary" size="small" icon="el-icon-date" @click="dialogVisible = true">
            配置保存年限
        </el-button>
        <vxe-table
            resizable
            ref="xTable"
            size="mini"
            border
            :height="height"
            show-overflow
            :tree-config="{ children: 'children' }"
            :data="tableData1"
            :edit-config="{ trigger: 'click', mode: 'cell' }"
            header-cell-class-name="table_header"
            class="mt10"
        >
            <vxe-table-column field="name" title="部门" tree-node></vxe-table-column>
            <!-- <vxe-table-column
        field="size"
        align="center"
        title="Size"
      ></vxe-table-column>
      <vxe-table-column
        field="type"
        align="center"
        title="Type"
      ></vxe-table-column> -->
            <vxe-table-column
                field="proportion"
                align="center"
                title="占比(%)"
                :edit-render="{
                    name: '$input',
                    props: { type: 'float', digits: 2, max: 100, min: 0 }
                }"
            ></vxe-table-column>
        </vxe-table>
        <el-dialog
            :close-on-click-modal="false"
            title="年限设置"
            :visible.sync="dialogVisible"
            width="300px"
            :before-close="handleClose"
        >
            <el-input
                v-model="value"
                placeholder="请输入年限"
                style="width: 240px"
                @input="handleEdit"
                class="mr10"
            ></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" size="small" @click="handleClose">取 消</el-button>
                <el-button type="primary" size="small" @click="define">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { deptTree } from '@/api/admin/dept'
import {
    queryPlanConfig,
    addPlanConfig,
    addPlanCycle
} from '@/api/Process-supervision/tiaoHarmonicmanagement/harmonicmanagement'
export default {
    components: {},
    props: {},
    data() {
        return {
            dialogVisible: false,
            value: '',
            tableData1: [],
            height: null,
            list: [],
            treeList: []
        }
    },
    created() {},
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.info()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.height = window.sessionStorage.getItem('appheight') - 126
        },
        async info() {
            await queryPlanConfig().then(res => {
                this.list = res.data
            })
            await deptTree().then(res => {
                this.tableData1 = this.circulationTreeData(res.data)
                //console.log(`123`, this.circulationTreeData(this.tableData1));
                setTimeout(() => {
                    this.$refs.xTable.setAllTreeExpand(true)
                }, 0)
            })
        },

        handleClose() {
            this.dialogVisible = false
            this.value = ''
        },
        define() {
            if (this.value.length > 0) {
                addPlanCycle({
                    cycleNum: this.value
                }).then(res => {
                    if (res.data.flag == true) {
                        this.$message({
                            message: '年限设置成功!',
                            type: 'success'
                        })
                        this.handleClose()
                    } else {
                        this.$message({
                            message: `本次普测计划周期还未结束,请在 ${res.data.endYear} 后设置!`,
                            type: 'warning'
                        })
                    }
                })
            } else {
                this.$message({
                    message: '请输入年限!',
                    type: 'warning'
                })
            }
        },
        //树递归

        circulationTreeData(rows) {
            let children = []

            rows.forEach((item, index) => {
                let proportion = 0
                this.list.forEach(val => {
                    if (val.orgId == item.id) {
                        proportion = val.proportion
                        return
                    }
                })

                if (item.children && item.children.length > 0) {
                    children.push({
                        name: item.name,
                        id: item.id,
                        proportion: proportion,
                        children: this.circulationTreeData(item.children)
                    })
                } else {
                    children.push({
                        name: item.name,
                        id: item.id,
                        proportion: proportion
                    })
                }
            })

            return children
        },

        preserve() {
            this.treeList = []
            this.circulation(this.tableData1)
            setTimeout(() => {
                addPlanConfig(this.treeList).then(res => {
                    if (res.code == 'A0000') {
                        this.$message({
                            message: '保持成功!',
                            type: 'success'
                        })
                        this.info()
                    }
                })
            }, 0)
        },

        circulation(rows) {
            let children = []

            rows.forEach((item, index) => {
                this.treeList.push({
                    orgName: item.name,
                    orgId: item.id,
                    proportion: item.proportion
                })
                if (item.children && item.children.length > 0) {
                    this.circulation(item.children)
                }
            })

            return children
        },
        // 在 Input 值改变时触发
        handleEdit(e) {
            let value = e.replace(/^(0+)|[^\d]+/g, '') // 以0开头或者输入非数字，会被替换成空
            value = value.replace(/(\d{15})\d*/, '$1') // 最多保留15位整数
            this.value = value
        }
    },

    computed: {},

    watch: {}
}
</script>
<style lang="less" scoped>
@import url('../../../../styles/comStyle.less');
</style>