ibms/src/views/point/config_point/steps/step3.vue

<template>
    <div id="handsonStep2">
        <div class="btns-view">
            <el-button @click="dialogShow(1)">根据关键内容批量标准化设备标识</el-button>
            <el-button @click="dialogShow(2)">根据关键内容批量对应数据字典</el-button>
            <el-checkbox style="float:right;" @change="changeChecked" v-model="checked">只显示未标准化得的原始点位</el-checkbox>
        </div>
        <div id="handsontableSteps1" class="middle_sty" v-loading="isLoading">
            <handsontable-component v-if="pages.total" @mouseDown="clickEdit" ref="handsontable"></handsontable-component>
            <div v-else class="center">
                <i class="iconwushuju iconfont"></i> 暂无数据
            </div>
        </div>
        <div v-if="pages.total" class="right">
            <pagination :page="pages" @change="changePage"></pagination>
        </div>
        <own-dialog :width="'1200px'" :title=" isDataform ? '根据关键内容批量对应数据字典' : '根据关键内容批量标准化设备标识' " :dialogVisible="isDialogShow" @cancel="close">
            <dialog-main v-if="!isDataform"></dialog-main>
            <steps-main v-if="isDataform"></steps-main>
        </own-dialog>
        <own-dialog :width="'1200px'" :dialogVisible="isEditDialogShow" @cancel="closeEdit">
            <step3-edit v-if="isEditDialogShow" :editData='editData' @refresh='refreshData'></step3-edit>
        </own-dialog>
    </div>
</template>
<script>
    import handsontableComponent from "@/components/common/handsontable"
    import headerArr from "@/utils/point_edit/steps3.js"
    import {
        changeHeader,
        showTypes
    } from "@/utils/handsontable/delType"
    import {
        mapGetters,
        mapActions
    } from "vuex";
    import ownDialog from "@/components/el_pack/dialog"
    import dialogMain from "@/components/config_point/step3_point/dialog_main"
    import stepsMain from "@/components/config_point/step3_point/steps3_main"
    import {
        queryPointRela,
        getNoDealPoint
    } from "@/fetch/point_http"
    import step3Edit from '@/components/config_point/step3_edit/index'
    import pagination from "@/components/common/myPagination"
    export default {
        data() {
            return {
                checked: false,
                settings: {},
                isDialogShow: false,
                hot: null,
                isDataform: false,
                /************point3_step_edit*********************** */
                isEditDialogShow: false,
                editData: {}, //编辑数据
                pages: {
                    size: 50,
                    sizes: [10, 30, 50, 100, 150, 200],
                    total: 0,
                    currentPage: 0
                },
                isLoading: false,//loading
            }
        },
        computed: {
            ...mapGetters("project", [
                "projectId",
                "datasourceId",
                "protocolType"
            ])
        },
        created() {
            if (!this.protocolType) {
                this.$router.push({
                    path: "/configPoint"
                })
            }
        },
        mounted() {
            this.getData()
        },
        methods: {
            //页面关闭
            close() {
                this.isDialogShow = false
                this.getData()
            },
            //只显示为标准化的点位标识
            changeChecked() {
                if (this.checked) {
                    getNoDealPoint({
                        type: this.protocolType,
                        data: {
                            DataSourceId: this.datasourceId
                        }
                    }, res => {
                        let content = res.Content
                        let settings = {
                            data: content,
                            colHeaders: changeHeader(headerArr),
                            columns: showTypes(headerArr).map(item => {
                                item.readOnly = true
                                item.data = item.data
                                return item
                            }),
                            rowHeights: 30,
                            maxRows: res.Content.length
                        }
                        this.hot = this.$refs.handsontable.init(settings)
                        this.pages.total = res.Total
                        console.log(this.hot)
                    })
                } else {
                    this.getData()
                }
            },
            //页面显示num1为标准化设备标识，2为对应数据字典
            dialogShow(num) {
                if (num == 1) {
                    this.isDataform = false
                } else if (num == 2) {
                    this.isDataform = true
                }
                this.isDialogShow = true
            },
            //页面发生更改
            changePage() {
                this.getData()
            },
            /**
             * 表格点击事件
             * @param {当前条数据} rowData
             * @param {当前条} row
             * 
             * down something
             */
            clickEdit(rowData, row) {
                let activeCell = this.hot.getActiveEditor()
                console.log(activeCell.prop)
                if (activeCell.prop == "Point.Infos.edit") {
                    this.isEditDialogShow = true;
                    this.editData = rowData;
                }
                if(activeCell.prop == "Infos.edit"){
                    this.editData = {Point: rowData,RelationList: []};
                    this.isEditDialogShow = true;
                }
            },
            closeEdit() {
                this.isEditDialogShow = false;
                THIS.getData()
            },
            //初始化表格实例
            getData() {
                let width, param, settings
                param = {
                    type: this.protocolType,
                    data: {
                        DataSourceId: this.datasourceId,
                        "PageNumber": this.pages.currentPage || 1,
                        "PageSize": this.pages.size,
                    }
                }
                this.isLoading = true
                queryPointRela(param, res => {
                    let content = res.Content.map(item => {
                        if (item.RelationList.length) {
                            item.Point.DataRuleType = item.RelationList[0].DataRuleType
                            item.Point.PhysicalRelated = item.RelationList[0].EquipmentType + '-' + item.RelationList[0].InfomationPoint
                        }
                        return item
                    })
                    settings = {
                        data: content,
                        colHeaders: changeHeader(headerArr),
                        columns: showTypes(headerArr).map(item => {
                            item.readOnly = true
                            item.data = 'Point.' + item.data
                            return item
                        }),
                        rowHeights: 30,
                        maxRows: res.Content.length
                    }
                    this.pages.total = res.Total
                    if (this.pages.total) {
                        this.$nextTick(_ => {
                            this.hot = this.$refs.handsontable.init(settings)
                        })
                    }
                    this.isLoading = false
                    console.log(this.hot)
                })
            },
            //刷新数据
            refreshData() {
                this.getData()
                this.isEditDialogShow = false;
            }
        },
        components: {
            handsontableComponent,
            ownDialog,
            dialogMain,
            step3Edit,
            stepsMain,
            pagination
        }
    }
</script>
<style lang="scss" scoped>
    #handsonStep2 {
        flex: 1;
        display: flex;
        flex-flow: column;
        .btns-view {
            height: 40px;
            line-height: 40px;
            margin-bottom: 10px;
            padding: 0 10px;
        }
        #handsontableSteps1 {
            flex: 1;
            overflow: hidden;
            position: relative;
            margin: 0 10px;
        }
    }
</style>