全屏编辑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 { .route-table .el-table__cell .cell {
white-space: nowrap; 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> </style>
</head> </head>
<body> <body>
@ -390,7 +398,9 @@
<el-dialog <el-dialog
:title="mockFileDialog.mode === 'edit' ? '修改 Mock 文件' : mockFileDialog.mode === 'copy' ? '复制 Mock 文件' : '新增 Mock 文件'" :title="mockFileDialog.mode === 'edit' ? '修改 Mock 文件' : mockFileDialog.mode === 'copy' ? '复制 Mock 文件' : '新增 Mock 文件'"
:visible.sync="mockFileDialog.visible" :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 :model="mockFileDialog.form" label-width="180px">
<el-form-item label="别名"> <el-form-item label="别名">
@ -415,9 +425,15 @@
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item label="文件内容"> <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 <el-input
type="textarea" type="textarea"
:rows="12" :autosize="mockFileDialog.fullscreen ? { minRows: 28, maxRows: 28 } : { minRows: 12, maxRows: 12 }"
v-model="mockFileDialog.form.content" v-model="mockFileDialog.form.content"
placeholder='{"code":0,"message":"ok"}' placeholder='{"code":0,"message":"ok"}'
></el-input> ></el-input>
@ -633,6 +649,7 @@
}, },
mockFileDialog: { mockFileDialog: {
visible: false, visible: false,
fullscreen: false,
mode: "create", mode: "create",
form: { form: {
fileName: "", fileName: "",
@ -827,6 +844,7 @@
}, },
openMockFileDialogForCreate: function () { openMockFileDialogForCreate: function () {
this.mockFileDialog.mode = "create"; this.mockFileDialog.mode = "create";
this.mockFileDialog.fullscreen = false;
this.mockFileDialog.form = this.getDefaultMockFileForm(); this.mockFileDialog.form = this.getDefaultMockFileForm();
this.mockFileDialog.visible = true; this.mockFileDialog.visible = true;
}, },
@ -834,6 +852,7 @@
var full = item.filePath || ""; var full = item.filePath || "";
var name = full.indexOf("mock/") === 0 ? full.slice(5) : full; var name = full.indexOf("mock/") === 0 ? full.slice(5) : full;
this.mockFileDialog.mode = "edit"; this.mockFileDialog.mode = "edit";
this.mockFileDialog.fullscreen = false;
this.mockFileDialog.form = { this.mockFileDialog.form = {
fileName: name, fileName: name,
alias: String(item.alias || ""), alias: String(item.alias || ""),
@ -853,6 +872,7 @@
}, },
openMockFileDialogForCopy: function (item) { openMockFileDialogForCopy: function (item) {
this.mockFileDialog.mode = "copy"; this.mockFileDialog.mode = "copy";
this.mockFileDialog.fullscreen = false;
this.mockFileDialog.form = { this.mockFileDialog.form = {
fileName: "", fileName: "",
alias: String(item.alias || "") + "-副本", alias: String(item.alias || "") + "-副本",