全屏编辑mock数据

This commit is contained in:
dongzp 2026-06-09 14:33:03 +08:00
parent 03c2c83f68
commit a23a9846b3

View File

@ -51,6 +51,14 @@
.route-table .el-table__cell .cell {
white-space: nowrap;
}
.mock-content-textarea textarea {
font-family: Consolas, Monaco, "Courier New", monospace;
line-height: 1.5;
}
.el-dialog.is-fullscreen .el-dialog__body {
overflow-y: auto;
max-height: calc(100vh - 120px);
}
</style>
</head>
<body>
@ -390,7 +398,9 @@
<el-dialog
:title="mockFileDialog.mode === 'edit' ? '修改 Mock 文件' : mockFileDialog.mode === 'copy' ? '复制 Mock 文件' : '新增 Mock 文件'"
:visible.sync="mockFileDialog.visible"
width="760px"
:width="mockFileDialog.fullscreen ? '100%' : '760px'"
:fullscreen="mockFileDialog.fullscreen"
:top="mockFileDialog.fullscreen ? '0' : '15vh'"
>
<el-form :model="mockFileDialog.form" label-width="180px">
<el-form-item label="别名">
@ -415,9 +425,15 @@
</el-input>
</el-form-item>
<el-form-item label="文件内容">
<div style="display:flex;justify-content:flex-end;margin-bottom:6px;">
<el-button size="mini" type="text" @click="mockFileDialog.fullscreen = !mockFileDialog.fullscreen">
<i :class="mockFileDialog.fullscreen ? 'el-icon-copy-document' : 'el-icon-full-screen'"></i>
{{ mockFileDialog.fullscreen ? '退出全屏' : '全屏编辑' }}
</el-button>
</div>
<el-input
type="textarea"
:rows="12"
:autosize="mockFileDialog.fullscreen ? { minRows: 28, maxRows: 28 } : { minRows: 12, maxRows: 12 }"
v-model="mockFileDialog.form.content"
placeholder='{"code":0,"message":"ok"}'
></el-input>
@ -633,6 +649,7 @@
},
mockFileDialog: {
visible: false,
fullscreen: false,
mode: "create",
form: {
fileName: "",
@ -827,6 +844,7 @@
},
openMockFileDialogForCreate: function () {
this.mockFileDialog.mode = "create";
this.mockFileDialog.fullscreen = false;
this.mockFileDialog.form = this.getDefaultMockFileForm();
this.mockFileDialog.visible = true;
},
@ -834,6 +852,7 @@
var full = item.filePath || "";
var name = full.indexOf("mock/") === 0 ? full.slice(5) : full;
this.mockFileDialog.mode = "edit";
this.mockFileDialog.fullscreen = false;
this.mockFileDialog.form = {
fileName: name,
alias: String(item.alias || ""),
@ -853,6 +872,7 @@
},
openMockFileDialogForCopy: function (item) {
this.mockFileDialog.mode = "copy";
this.mockFileDialog.fullscreen = false;
this.mockFileDialog.form = {
fileName: "",
alias: String(item.alias || "") + "-副本",