mirror of
https://github.com/TeaOSLab/EdgeAdmin.git
synced 2025-11-05 06:04:32 +08:00
优化自定义页面组件界面
This commit is contained in:
@@ -17,6 +17,7 @@ Vue.component("http-pages-box", {
|
||||
height: "26em",
|
||||
callback: function (resp) {
|
||||
that.pages.push(resp.data.page)
|
||||
that.notifyChange()
|
||||
}
|
||||
})
|
||||
},
|
||||
@@ -26,6 +27,7 @@ Vue.component("http-pages-box", {
|
||||
height: "26em",
|
||||
callback: function (resp) {
|
||||
Vue.set(that.pages, pageIndex, resp.data.page)
|
||||
that.notifyChange()
|
||||
}
|
||||
})
|
||||
},
|
||||
@@ -33,28 +35,55 @@ Vue.component("http-pages-box", {
|
||||
let that = this
|
||||
teaweb.confirm("确定要移除此页面吗?", function () {
|
||||
that.pages.$remove(pageIndex)
|
||||
that.notifyChange()
|
||||
})
|
||||
},
|
||||
notifyChange: function () {
|
||||
let parent = this.$el.parentNode
|
||||
while (true) {
|
||||
if (parent == null) {
|
||||
break
|
||||
}
|
||||
if (parent.tagName == "FORM") {
|
||||
break
|
||||
}
|
||||
parent = parent.parentNode
|
||||
}
|
||||
if (parent != null) {
|
||||
setTimeout(function () {
|
||||
Tea.runActionOn(parent)
|
||||
}, 100)
|
||||
}
|
||||
}
|
||||
},
|
||||
template: `<div>
|
||||
<input type="hidden" name="pagesJSON" :value="JSON.stringify(pages)"/>
|
||||
<table class="ui table selectable definition">
|
||||
<tr>
|
||||
<td class="title">自定义页面</td>
|
||||
<td>
|
||||
<div v-if="pages.length > 0">
|
||||
<div class="ui label small basic" v-for="(page,index) in pages">
|
||||
{{page.status}} -> <span v-if="page.bodyType == 'url'">{{page.url}}</span><span v-if="page.bodyType == 'html'">[HTML内容]</span> <a href="" title="修改" @click.prevent="updatePage(index, page.id)"><i class="icon pencil small"></i></a> <a href="" title="删除" @click.prevent="removePage(index)"><i class="icon remove"></i></a>
|
||||
</div>
|
||||
<div class="ui divider"></div>
|
||||
</div>
|
||||
<div>
|
||||
<button class="ui button small" type="button" @click.prevent="addPage()">+</button>
|
||||
</div>
|
||||
<p class="comment">根据响应状态码返回一些自定义页面,比如404,500等错误页面。</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div v-if="pages.length > 0" style="max-width: 30em">
|
||||
<table class="ui table selectable celled">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="four wide">响应状态码</th>
|
||||
<th>页面类型</th>
|
||||
<th style="width: 6.5em">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr v-for="(page,index) in pages">
|
||||
<td>
|
||||
<span v-if="page.status != null && page.status.length == 1">{{page.status[0]}}</span>
|
||||
<span v-else>{{page.status}}</span>
|
||||
</td>
|
||||
<td style="word-break: break-all"><span v-if="page.bodyType == 'url'">{{page.url}}</span><span v-if="page.bodyType == 'html'">[HTML内容]</span></td>
|
||||
<td>
|
||||
<a href="" title="修改" @click.prevent="updatePage(index, page.id)">修改</a>
|
||||
<a href="" title="删除" @click.prevent="removePage(index)">删除</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div style="margin-top: 1em">
|
||||
<button class="ui button small" type="button" @click.prevent="addPage()">+添加自定义页面</button>
|
||||
</div>
|
||||
<div class="ui margin"></div>
|
||||
</div>`
|
||||
})
|
||||
Reference in New Issue
Block a user