按钮组件控制 可脱拽弹框

<!-- 原始记录查看按钮 -->
        <yuanShiJiLuButton/> 
        <el-dialog :visible.sync="dialogTableVisible" class="yuanShiDialog" center width="80%" :modal="false" :close-on-click-modal="false" v-dialogDrag="elStyle">
            <span slot="title" style="font-size:26px">原始记录</span>
            <div class="liuLiangDanShawarp">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm" label-width="120px">
                    <h3 style="text-align: center">
                        <span v-if="!ruleForm.suoShuZhanDian || ruleForm.suoShuZhanDian.length < 1">____</span>
                        <span v-else>{{ ruleForm.suoShuZhanDian.split("/").join("")}}</span>
                        站
                        <span v-if="!ruleForm.m0008Zhan || ruleForm.m0008Zhan.length < 1">____</span>
                        <span v-else >{{ ruleForm.m0008Zhan }}</span>
                        埝（槽）流量、单沙测验记载表
                    </h3>

                    <el-table ref="singleTable" :data="ruleForm.yuanShitableData" :header-cell-style="{ textAlign: 'center' }"
                        style="width: 100%" class="tableClass">
                        <el-table-column label="序号" type="index" width="50px" align="center" />
                        <el-table-column label="施测时间">
                            <el-table-column label="月" width="65">
                                <template slot-scope="scope">
                                    <el-input class="removePadding" v-model="scope.row.t0008Month" readonly/>
                                </template>
                            </el-table-column>
                            <el-table-column label="日" width="65">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.t0008Day" readonly/>
                                </template>
                            </el-table-column>
                            <el-table-column label="时" width="65">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.t0008Hour" readonly/>
                                </template>
                            </el-table-column>
                            <el-table-column label="分" width="65">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.t0008Minute" readonly/>
                                </template>
                            </el-table-column>
                        </el-table-column>
                        <el-table-column label="水位（建筑物过水最低点：       ）">
                            <template slot="header" slot-scope="scope">
                                水位（建筑物过水最低点：
                                <span style="display:inline-block;width: 75px;">
                                    <el-input v-model="ruleForm.t0007ZuiDiDian" size="mini" readonly/>
                                </span> ）
                            </template>
                            <el-table-column label="水尺号数">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.t0008ShuiChi" readonly/>
                                </template>
                            </el-table-column>
                            <el-table-column label="读数（米）">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.t0008DuShu" readonly/>
                                </template>
                            </el-table-column>
                            <el-table-column label="水位（米）">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.t0008ShuiWei" readonly/>
                                </template>
                            </el-table-column>
                            <el-table-column label="水头（米）">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.t0008ShuiTou" readonly/>
                                </template>
                            </el-table-column>
                            <el-table-column>
                                <template slot="header" slot-scope="scope">
                                    流量（米<sup>3</sup>/秒）
                                </template>
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.t0008LiuLiang" readonly/>
                                </template>
                            </el-table-column>
                        </el-table-column>
                        <el-table-column label="含沙">
                            <el-table-column label="盛样桶" width="150">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.t0008ShengTong" readonly/>
                                </template>
                            </el-table-column>
                            <el-table-column label="沙号">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.t0008ShaHao" readonly/>
                                </template>
                            </el-table-column>
                            <el-table-column>
                                <template slot="header" slot-scope="scope">
                                    容量（厘米<sup>3</sup>）
                                </template>
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.t0008RongLiang" readonly/>
                                </template>
                            </el-table-column>
                        </el-table-column>
                        <el-table-column label="备注">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.t0008BeiZhu" readonly/>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogTableVisible = false">关 闭</el-button>
            </span>
        </el-dialog>

import yuanShiJiLuButton from "@/components/yuanShiJiLuButton/yuanShiJiLuButton"

export default {
    components:{
        yuanShiJiLuButton
    },
    data() {
        return {
            elStyle:{
                x:0,
                y:0,
                width:'80%',
                height:'490px',
                isButton:true
            },
            ruleForm: {
                t0008Month: '',
                t0008Day: '',
                t0008Hour: '',
                t0008Minute: '',
                t0008ShuiChi: '',
                t0008DuShu: '',
                t0008ShuiWei: '',
                t0008ShuiTou: '',
                t0008LiuLiang: '',
                t0008ShengTong: '',
                t0008ShaHao: '',
                t0008RongLiang: '',
                t0008BeiZhu: '',
                t0008Date: '',
                suoShuZhanDian: '',
                t0007ZuiDiDian: '',
                m0008Zhan: '',
                t0007Year: '',
                tableData: [],
                yuanShitableData:[]
            },
               yuanShiFileList:[],
            dialogTableVisible:false,  //历史数据查看弹框
}
method:{
openDialog(){
            this.dialogTableVisible = true;
            let params = {
                t0007Id: this.t0007Id
            }
            findSourceRecord(params).then(response => {
                if (response.code === 200) {
                    let data = response.data;
                    this.ruleForm.yuanShitableData = [];
                    if(data){
                        data.forEach(item =>{
                            this.ruleForm.yuanShitableData.push({
                                t0008Id: item.t0008Id,
                                m0008Nian: item.m0008Nian,
                                t0008Year: item.t0008Year,
                                t0008Month: item.t0008Month,
                                t0008Day: item.t0008Day,
                                t0008Hour: item.t0008Hour,
                                t0008Minute: item.t0008Minute,
                                t0008ShuiChi: item.t0008ShuiChi,
                                t0008DuShu: item.t0008DuShu,
                                t0008ShuiWei: item.t0008ShuiWei?               item.t0008ShuiWei:item.t0008SwMshu,
                                t0008ShuiTou: item.t0008ShuiTou,
                                t0008LiuLiang: item.t0008LiuLiang,
                                t0008ShengTong: item.t0008ShengTong,
                                t0008ShaHao: item.t0008ShaHao,
                                t0008RongLiang: item.t0008RongLiang,
                                t0008BeiZhu: item.t0008BeiZhu,
                                t0008Status: item.t0008Status,

                            })
                        })
                        
                    }
                }
            })
        },
}

按钮组件

<template>
    <div class="box">
        <div class="btnBox">
            <el-button class="btn" @click="openHistory()">
                <i class="el-icon-info"></i>
                <br>
                原始记录查看
            </el-button>
        </div>
    </div>
</template>
<script>
    export default {
        methods: {
            openHistory(){
                this.$parent.openDialog()
            },
        }
    }
</script>
<style lang="scss" scoped>
.box{
    position: relative;
}
.btnBox{
    position: fixed;
    right:50px;
    top:170px;
    z-index:999;
    .btn{
        padding:8px 5px 8px 5px;
        width:85px;
        height:85px;
        white-space:normal;
        font-size:23px;
        background-color: #b9eff9;
        color: rgb(25, 137, 250);border:none;
    }
    
}
</style>