ibms/src/components/relation/overview/Modal/RelationMaintain.vue

<template>
    <div class="relation-maintain">
        <!--计算无需配置源末端的关系时提示-->
        <el-dialog
            :title="values.title"
            :visible.sync="dialogTableVisible"
        >
            <span class="font-big">{{values.autoComputed}}</span>
            <footer
                slot="footer"
                class="dialog-footer "
            >
                <el-button @click="dialogTableVisible = false">{{values.cancel}}</el-button>
                <el-button
                    type="primary"
                    @click="promptly"
                >{{values.promptly}}
                </el-button>
            </footer>
        </el-dialog>
        <!-- 计算需配置源末端的关系且已配置时提示-->
        <el-dialog
            :title="values.title"
            :visible.sync="dialogTableVisibleMore"
        >
            <div
                v-loading="TableVisibleMoreLoading"
                style="overflow:hidden"
            >
                <p class="font-big">{{values.existComputed}}</p>
                <p class="exist-title">{{values.existTitle}}</p>
                <el-row :span="24">
                    <el-col :span="8">
                        <span class="demonstration">{{values.originEquipment}}</span>
                        <el-cascader
                            :options="newOptions"
                            :key="isResouceShow"
                            v-model="ops"
                            :props="props"
                            @change="sourceOptions"
                            collapse-tags
                            clearable
                        />
                    </el-col>
                    <el-col :span="8">
                        <span class="demonstration">{{values.endEquipment}}</span>
<!--                                                    v-model="filterOps"
-->
                        <el-cascader
                            :options="disOptions"
                            :props="props"
                            collapse-tags
                            clearable
                        />
                    </el-col>
                </el-row>
                <footer
                    slot="footer"
                    class="dialog-footer "
                    style="float: right"
                >
                    <el-button @click="dialogTableVisibleMore = false">{{values.cancel}}</el-button>
                    <el-button
                        type="primary"
                        @click="computedUpdate"
                    >{{values.promptly}}
                    </el-button>
                </footer>
            </div>
        </el-dialog>
        <!--设定设备对象源/末端-->
        <el-dialog
            :title="values.title"
            :visible.sync="dialogEquipment"
        >
            <span class="font-big">{{values.underDesign}}</span>
            <footer
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    type="primary"
                    @click="dialogEquipment = false"
                >{{values.confirm}}
                </el-button>
            </footer>
        </el-dialog>
        <!--手动编辑：提示引导-->
        <el-dialog
            :title="values.title"
            :visible.sync="dialogManualTip"
        >
            <p class="font-big">{{values.tips}}</p>
            <p
                class="font-big"
                v-for="item in values.device"
            >{{item}}</p>
            <footer
                slot="footer"
                class="dialog-footer "
            >
                <el-button @click="dialogManualTip = false">{{values.confirm}}
                </el-button>
            </footer>
        </el-dialog>
        <!--手动编辑：手动维护-->
        <el-dialog
            :title="values.title"
            :visible.sync="dialogManualOption"
        >
            <p class="option-tip">{{values.optionTips}}</p>
            <el-row :span="24">
                <el-col :span="8">
                    <p>
                        <i class="iconfont icon-doc-line"/>
                        {{values.currentNum}} 0
                    </p>
                    <a href="/api/datacenter/graphic/template-downloads">
                    <el-button
                        type="primary"
                        class="mt-10"
                    >
                        {{values.download}}
                    </el-button>
                    </a>
                </el-col>
                <el-col :span="10">
                    {{values.lastTime}}
                </el-col>
            </el-row>
            <el-upload
                class="upload-demo"
                drag
                action="/api/datacenter/graphic/import"
                multiple
                name="fileName"
                :on-progress="progress"
                :on-success="success"
                :on-error="error"
            >
                <i class="el-icon-upload"/>
                <div
                    class="el-upload__text"
                    v-html="values.uploadTxt"
                />
                <div class="upload__tip danger" slot="tip">{{ values.uploadTips}}</div>
            </el-upload>
        </el-dialog>
        <!--手动编辑：手动维护.process结束-->
        <el-dialog
            :title="values.title"
            :visible.sync="dialogProcess"
        >
            <div class="block">
                <el-timeline>
                    <el-timeline-item
                        v-for="(activity, index) in activities"
                        :key="index"
                        :icon="activity.icon"
                        :type="activity.type"
                        :color="activity.color"
                        :size="activity.size"
                    >
                        {{activity.content}}
                    </el-timeline-item>
                </el-timeline>
            </div>
<!--            下载报告-->
            <a href="/api/datacenter//graphic/report-downloads">
                <el-button>{{values.downloadFile}}</el-button>
            </a>
            <footer
                slot="footer"
                class="dialog-footer "
            >
                <el-button @click="errBack">{{values.back}}</el-button>
                <el-button
                    type="primary"
                    @click="finish"
                >{{values.done}}
                </el-button>
            </footer>
        </el-dialog>
    </div>
</template>

<script>

    export default {
        name: "RelationMaintain",
        props: ['values', 'isComputed', 'source', 'TableVisibleMoreLoading'],
        created() {

        },
        mounted() {
        },
        data() {
            return {
                dialogTableVisible: false,
                dialogTableVisibleMore: false,
                dialogEquipment: false,
                dialogManualTip: false,
                dialogManualOption: false,
                dialogProcess: false,
                originEquipment: [],
                endEquipment: [],
                props: {
                    multiple: true,
                    label: 'FamilyName',
                    value: 'lId',
                    children: 'Items',

                }, // 级联
                activities: [{
                    content: '数据文件处理中..',
                    size: 'large',
                    type: 'primary',
                    icon: 'el-icon-check',
                    color: '#0bbd87'
                }, {
                    content: '数据处理失败',
                    color: '#0bbd87',
                    icon: 'el-icon-check',
                    size: 'large',
                    type: 'primary',
                }],
                vals: [],
                val: [],
                idArr: [],//存储所有选择的id
                secondary: [],//单独存储二级数据
                list: [],//获取后台数据，重新组合，添加唯一标识和源端标识
                isResouceShow: 0,
                result: [],//最终传给后台的数据
                ops: [],//第一个选择器model
                filterOps: [],//为清空第二个选择器
            }
        },
        computed:{
            fileHeaders() {
                return  {'Content-Type': 'multipart/form-data'}
            },
            newOptions() {
                ++this.isResouceShow
                let allList = []
                this.deepCopy(this.source).forEach(item => allList.push(...item.Items))
                this.list = allList.map((item, index) => {
                    item = {
                        ...item,
                        lId: index
                    }
                    item.Items.map(i => {
                        i.lId = i.Id + i.BlockId //添加唯一标识
                        i.Source = true //判断源末端
                        return i
                    })
                    return item
                })
                this.ops = this.list
                return this.list
            },
            //    末端数据添加disabled
            disOptions() {
                let arr = this.deepCopy(this.list).map(item => {
                    item.Items.map(i => {
                        if (this.idArr.includes(i.lId)) {
                            i.disabled = true
                        }
                        return i
                    })
                    return item
                })
                this.filterOps = arr
                return arr
            }

        },
        methods: {
            deepCopy(obj) {
                return JSON.parse(JSON.stringify(obj))
            },
            progress(event, file, fileList) {
                // console.log(event.file, fileList)
            },
            success(event, file, fileList) {
                this.dialogManualOption = true
                this.dialogProcess = true
                console.log(event.file, fileList,' file success')

            },
            error(event, file, fileList) {
                this.dialogManualOption = true
                this.dialogProcess = true
                console.log(event.file, fileList)

            },
            errBack() {
                this.dialogProcess = false
            },
            finish() {
                this.dialogProcess = false
                this.dialogManualOption = false
            },
            templateDownload() {
                this.$emit('template')
            },
            promptly() {
                console.log(this.isComputed, 'child isComputed')
                this.dialogTableVisible = false
            },
            sourceOptions(val) {
                //把所有id组装到一个数组
                this.idArr = val.map(item => item[1])
                //提取后台二级数据
                this.secondary = []
                this.deepCopy(this.list).forEach(item => this.secondary.push(...item.Items))
                //最终过滤
                let filterList = this.secondary.filter(item => this.idArr.includes(item.lId))
                //    组合成接口需要的数据格式
                let result = []
                filterList.forEach(item => {
                    let {BlockId, BuildingId, Domain, Id, MepSystemType, ProjectId, Source, SourceId, Type, Statistics} = item
                    result.push({
                        BlockId,
                        BuildingId,
                        Domain,
                        // Id,
                        MepSystemType,
                        ProjectId,
                        Source,
                        SourceId,
                        SourceType: Type,
                        Statistics
                    })
                })
                this.result = result

            },
            computedUpdate() {
                if (!this.result.length) {
                    this.$message({
                        showClose: true,
                        message: '请选择源端设备类',
                        type: 'warning'
                    });
                    return false
                } else {
                    this.$emit('openComputed', this.result)
                    this.dialogTableVisibleMore = false

                }
            }
        }
    }
</script>

<style scoped lang="less">
    .relation-maintain {
        .mt-10 {
            margin-top: 10px;
        }

        .danger {
            color: #d9001b;
        }

        .font-big {
            font-weight: 600;
        }


        .exist-title {
            font-size: 12px;
            color: #AAAAAA;
        }

        .option-tip {
            font-size: 18px;
            font-weight: 600;
        }

        .upload-demo {
            margin: 20px 0;

        }

        /deep/ .el-upload-dragger {
            width: 600px;
            margin: 0 auto;
        }
    }
</style>