noob-components/examples/App.vue

<template>
    <WkbTag>ssss</WkbTag>
    <el-button type="success" @click="newTerminal()">新终端</el-button>
    <ListTable :data="data" :height="500" :props="prop"></ListTable>

    <el-dialog class="no-padding" title="实时脚本终端" v-model="flag.termial" size="tiny" :close-on-click-modal="false" top="10vh"
        width="90%">
        <Terminal :url="url" :msgFilter="msgFilter"></Terminal>
        <!-- <TerminalSplit :url="url" :msgFilter="msgFilter" :prmt="prmt"></TerminalSplit> -->
    </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, onMounted, ref } from "vue";
import { useStore } from "vuex";
import { WkbTag, ListTable, Terminal, TerminalSplit, MenuTree } from "../packages";

const store = useStore();
const prefix = "ws://localhost/websocket/";
let index = 111;
let url = "";
const prmt = ref(">");
const flag = reactive({
    termial: false
})

const data = [
    { caseName: 111, taskName: 111, userId: 'test', content: 'content', createTime: 'createTime' }
]

const menus = [
    { title: "aaa", path: "aaa", icon: "" }
]

const prop = [
    {
        code: "caseName",
        name: "案件名称",
        width: 110,
    },
    {
        code: "taskName",
        name: "任务名称",
        width: 110,
    },
    {
        code: "userId",
        name: "用户名",
        width: 100,
    },
    {
        code: "content",
        name: "日志内容",
        width: 500,
    },
    {
        code: "createTime",
        name: "产生时间",
        width: 170,
    },
];

const newTerminal = () => {
    url = prefix + ++index;
    flag.termial = true;
}

const msgFilter = msg => {
    if (msg.startsWith("TTY_RES|")) {
        const res = JSON.parse(msg.substring(8));
        prmt.value = res.prmt;
        return null;
    } else {
        return msg;
    }
}

onMounted(() => {

});

</script>

<style lang="scss">
::v-deep .no-padding .el-dialog__body {
    background-color: black;
}
</style>