feat 修改页面样式
This commit is contained in:
parent
f44f0c2cea
commit
47cd3b338e
66
admin.html
66
admin.html
@ -14,7 +14,7 @@
|
||||
background: #f5f7fa;
|
||||
}
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
max-width: 1320px;
|
||||
margin: 20px auto;
|
||||
padding: 0 16px 24px;
|
||||
}
|
||||
@ -51,6 +51,9 @@
|
||||
margin-top: 12px;
|
||||
text-align: right;
|
||||
}
|
||||
.route-table .el-table__cell .cell {
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -72,18 +75,18 @@
|
||||
<strong>路由配置（routes）</strong>
|
||||
<el-button size="mini" type="primary" @click="openRouteDialogForCreate">新增路由</el-button>
|
||||
</div>
|
||||
<el-table :data="pagedRoutes" border>
|
||||
<el-table-column label="接口名称" min-width="220">
|
||||
<el-table :data="pagedRoutes" border class="route-table" style="width: 100%;">
|
||||
<el-table-column label="接口名称" min-width="180" show-overflow-tooltip>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.apiName || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="请求路径" min-width="260">
|
||||
<el-table-column label="请求路径" min-width="220" show-overflow-tooltip>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.route }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Mock 文件路径" min-width="300">
|
||||
<el-table-column label="Mock 文件路径" min-width="240" show-overflow-tooltip>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.filePath }}</span>
|
||||
</template>
|
||||
@ -98,7 +101,7 @@
|
||||
<el-switch v-model="scope.row.enabled"></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="180">
|
||||
<el-table-column label="操作" width="160">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
@ -269,12 +272,22 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="返回状态码">
|
||||
<el-input-number
|
||||
<el-select
|
||||
v-model="routeDialog.form.statusCode"
|
||||
:min="100"
|
||||
:max="599"
|
||||
filterable
|
||||
allow-create
|
||||
default-first-option
|
||||
clearable
|
||||
placeholder="先选常用状态码，也可直接输入"
|
||||
style="width: 100%;"
|
||||
></el-input-number>
|
||||
>
|
||||
<el-option
|
||||
v-for="item in commonStatusCodes"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否启用 Mock">
|
||||
<el-switch v-model="routeDialog.form.enabled"></el-switch>
|
||||
@ -328,6 +341,22 @@
|
||||
activeMainTab: "routes",
|
||||
apiList: [],
|
||||
mockFiles: [],
|
||||
commonStatusCodes: [
|
||||
{ value: 200, label: "200 OK" },
|
||||
{ value: 201, label: "201 Created" },
|
||||
{ value: 204, label: "204 No Content" },
|
||||
{ value: 400, label: "400 Bad Request" },
|
||||
{ value: 401, label: "401 Unauthorized" },
|
||||
{ value: 403, label: "403 Forbidden" },
|
||||
{ value: 404, label: "404 Not Found" },
|
||||
{ value: 409, label: "409 Conflict" },
|
||||
{ value: 422, label: "422 Unprocessable Entity" },
|
||||
{ value: 429, label: "429 Too Many Requests" },
|
||||
{ value: 500, label: "500 Internal Server Error" },
|
||||
{ value: 501, label: "501 Not Implemented" },
|
||||
{ value: 502, label: "502 Bad Gateway" },
|
||||
{ value: 503, label: "503 Service Unavailable" },
|
||||
],
|
||||
routePagination: {
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
@ -397,6 +426,13 @@
|
||||
var start = (currentPage - 1) * pageSize;
|
||||
return source.slice(start, start + pageSize);
|
||||
},
|
||||
normalizeStatusCode: function (value) {
|
||||
var numeric = Number(value);
|
||||
if (Number.isInteger(numeric) && numeric >= 100 && numeric <= 599) {
|
||||
return numeric;
|
||||
}
|
||||
return 200;
|
||||
},
|
||||
handleRoutePageChange: function (page) {
|
||||
this.routePagination.currentPage = page;
|
||||
},
|
||||
@ -418,7 +454,9 @@
|
||||
rawRoute: rawRoute,
|
||||
route: route,
|
||||
filePath: routesObj[rawRoute],
|
||||
statusCode: Number(routeStatusesObj && routeStatusesObj[rawRoute]) || 200,
|
||||
statusCode: self.normalizeStatusCode(
|
||||
routeStatusesObj && routeStatusesObj[rawRoute],
|
||||
),
|
||||
apiName: matched ? matched.name : "",
|
||||
selectedApiRoute: matched ? matched.route : "",
|
||||
enabled: enabled,
|
||||
@ -438,12 +476,13 @@
|
||||
return obj;
|
||||
},
|
||||
toRouteStatusObject: function (routeArray) {
|
||||
var self = this;
|
||||
var obj = {};
|
||||
(routeArray || []).forEach(function (item) {
|
||||
var route = (item.route || "").trim();
|
||||
if (!route) return;
|
||||
var routeKey = item.enabled === false ? "#" + route : route;
|
||||
var statusCode = Number(item.statusCode) || 200;
|
||||
var statusCode = self.normalizeStatusCode(item.statusCode);
|
||||
obj[routeKey] = statusCode;
|
||||
});
|
||||
return obj;
|
||||
@ -501,7 +540,7 @@
|
||||
originalRawRoute: item.rawRoute || item.route || "",
|
||||
route: item.route || "",
|
||||
filePath: item.filePath || "mock/",
|
||||
statusCode: Number(item.statusCode) || 200,
|
||||
statusCode: this.normalizeStatusCode(item.statusCode),
|
||||
enabled: item.enabled !== false,
|
||||
};
|
||||
this.routeDialog.visible = true;
|
||||
@ -660,6 +699,7 @@
|
||||
}
|
||||
var payload = Object.assign({}, this.routeDialog.form, {
|
||||
useExistingFile: true,
|
||||
statusCode: this.normalizeStatusCode(this.routeDialog.form.statusCode),
|
||||
});
|
||||
try {
|
||||
var resp = await fetch("/__routes", {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user