smart_archives_web/src/views/data-collect/data-set-manage/components/share.vue

<template>
    <!-- 小型弹窗 -->
    <el-dialog class="l-dialog" :class="lDialog" :title="title" :visible.sync="dialogVisible" :showClose="true"
        :closeOnClickModal="false" @close="handleClose" :append-to-body="true">
        <div>
            <!-- 文档式表格 -->
            <div class="doc-wrap">
                <table class="doc-table">
                    <tbody>
                        <tr>
                            <th>名称</th>
                            <td>获取{{ rowData.selectedNodeName }}接口</td>
                        </tr>
                        <tr>
                            <th>描述</th>
                            <td>依据ID获取{{ rowData.selectedNodeName }}相关信息</td>
                        </tr>
                        <tr>
                            <th>URL</th>
                            <td>smartArchives/data/Collect/list?id={{ rowData.id }}</td>
                        </tr>
                        <tr>
                            <th>HTTP请求方式</th>
                            <td>GET</td>
                        </tr>
                        <tr>
                            <th>请求参数</th>
                            <td>
                                <table class="inner-table">
                                    <thead>
                                        <tr>
                                            <th>参数名称</th>
                                            <th>必选</th>
                                            <th>类型及范围</th>
                                            <th>说明</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>id</td>
                                            <td>true</td>
                                            <td>字符串</td>
                                            <td>/</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>

                        <tr>
                            <th>返回结果</th>
                            <td>
                                <pre class="code" v-text="resultJson"></pre>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button class="clear-btn" @click="handleClose" :disabled="disabled">取消</el-button>
        </span>
    </el-dialog>
</template>
<script>
export default {
    name: "Share",
    props: ["width", "dataForm", "title", "disabled", "rowData"],
    data() {
        return {
            lDialog: this.width > 500 ? "w700" : "w500",
            dialogVisible: true,
            isDisabled: true,
            resultJson: '',
        };
    },
    created() {
        this.initFormData();
    },
    methods: {
        /** 初始化表单数据 */
        initFormData() {
            if (this.rowData) {
                // 将 rowData 的 data 字段（对象或数组）美化成 JSON 文本展示
                let payload = this.rowData && this.rowData.data
                if (payload === undefined) {
                    // 兼容没有 data 字段时，直接把 rowData 作为展示对象
                    payload = this.rowData
                }
                try {
                    this.resultJson = JSON.stringify(payload, null, 2)
                } catch (e) {
                    this.resultJson = String(payload)
                }
            }
        },
        /*关闭弹窗 */
        handleClose() {
            this.dialogVisible = false;
            this.$emit("closeDialog");
            setTimeout(() => {
                this.dialogVisible = true;
            });
        },
        /**确认弹窗 */
        sureBtnClick() {
            this.dialogVisible = false;
            this.$emit("closeDialog");
            setTimeout(() => {
                this.dialogVisible = true;
            });
        },
    },
};
</script>
<style lang="scss">
.w700 ::v-deep .el-dialog {
    width: 700px;
}

.w500 ::v-deep .el-dialog {
    width: 500px;
}

.w500 ::v-deep .el-dialog__header,
.w700 ::v-deep .el-dialog__header {
    // background: #eeeeee;

    .el-dialog__title {
        font-size: 16px;
    }
}

.yxq .el-range-separator {
    margin-right: 7px !important;
}

.el-date-editor--daterange.el-input__inner {
    width: 260px;
}

.form-item {
    width: 100%;
}

.select-style {
    display: flex;
    justify-content: space-between;
}

.doc-wrap {
    margin-top: 8px;
}

.doc-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.doc-table th,
.doc-table td {
    border: 1px solid #dcdfe6;
    padding: 8px 10px;
    vertical-align: top;
}

.doc-table th {
    width: 120px;
    background: #f5f7fa;
    color: #303133;
    text-align: right;
}

.doc-table .inner-table {
    width: 100%;
    border-collapse: collapse;
}

.doc-table .inner-table th,
.doc-table .inner-table td {
    border: 1px solid #e4e7ed;
    padding: 6px 8px;
    text-align: left;
}

.code {
    background: #f8f8f8;
    border: 1px solid #ebeef5;
    padding: 8px;
    border-radius: 4px;
    white-space: pre-wrap;
    word-break: break-all;
}
</style>