[2024-07-15](UPDATE): 上传图片页面优化
This commit is contained in:
june
parent
a4c0ce45e9
commit
534466b40b
338
static/js/index.js.back
Normal file
338
static/js/index.js.back
Normal file
@ -0,0 +1,338 @@
|
||||
function Domain() {
|
||||
this.tableData = null
|
||||
this.model = false
|
||||
this.editIndex = -1
|
||||
// this.url = "http://127.0.0.1:8300/domain"
|
||||
this.url = "https://monitor.api.ggbba.top/domain"
|
||||
this.currentPage = 1
|
||||
this.pageData = null
|
||||
this.searchText = ""
|
||||
this.numPages = 0
|
||||
}
|
||||
|
||||
// 搜索域名
|
||||
Domain.prototype.searchDomain = function () {
|
||||
let self = this
|
||||
$('#search-btn').click(function () {
|
||||
let search = $('#search-input').val()
|
||||
self.searchText = search
|
||||
if (self.searchText) {
|
||||
self.currentPage = 1
|
||||
self.initTableData(self.currentPage, self.searchText)
|
||||
} else {
|
||||
self.initTableData(1, "")
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 点击分页按钮
|
||||
Domain.prototype.domainPageBtn = function () {
|
||||
let self = this
|
||||
$('.page-btn').click(function () {
|
||||
self.currentPage = parseInt($(this).attr('data-p'))
|
||||
self.initTableData(self.currentPage, self.searchText)
|
||||
})
|
||||
}
|
||||
|
||||
// 分页初始化
|
||||
Domain.prototype.domainPageInit = function () {
|
||||
let self = this
|
||||
// 是否是最后一页
|
||||
let is_finally = false
|
||||
// 是否是第一页
|
||||
let is_first = false
|
||||
// 总页数
|
||||
let num_pages = self.pageData['num_pages']
|
||||
|
||||
if (self.currentPage === 1) {
|
||||
is_first = true
|
||||
}
|
||||
if (self.currentPage === num_pages) {
|
||||
is_finally = true
|
||||
}
|
||||
self.pageData['is_first'] = is_first
|
||||
self.pageData['is_finally'] = is_finally
|
||||
}
|
||||
|
||||
// 表单验证
|
||||
Domain.prototype.verifyDomain = function (domain) {
|
||||
let patt = /(https?|ftp|file):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/i
|
||||
return patt.test(domain)
|
||||
}
|
||||
|
||||
// 错误弹窗
|
||||
Domain.prototype.alertError = function (msg) {
|
||||
swal('提示', msg, 'error');
|
||||
}
|
||||
|
||||
// 弹窗
|
||||
Domain.prototype.alertToast = function (msg, type) {
|
||||
swal({
|
||||
'title': msg,
|
||||
'text': '',
|
||||
'type': type,
|
||||
'showCancelButton': false,
|
||||
'showConfirmButton': false,
|
||||
'timer': 1000
|
||||
})
|
||||
}
|
||||
|
||||
// 带确认按钮的弹窗
|
||||
Domain.prototype.alertConfirm = function (params) {
|
||||
swal({
|
||||
'title': params['title'] ? params['title'] : '提示',
|
||||
'showCancelButton': true,
|
||||
'showConfirmButton': true,
|
||||
'type': params['type'] ? params['type'] : '',
|
||||
'confirmButtonText': params['confirmText'] ? params['confirmText'] : '确定',
|
||||
'cancelButtonText': params['cancelText'] ? params['cancelText'] : '取消',
|
||||
'text': params['text'] ? params['text'] : ''
|
||||
}, function (isConfirm) {
|
||||
if (isConfirm) {
|
||||
if (params['confirmCallback']) {
|
||||
params['confirmCallback']()
|
||||
}
|
||||
} else {
|
||||
if (params['cancelCallback']) {
|
||||
params['cancelCallback']()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 成功弹窗
|
||||
Domain.prototype.alertSuccessToast = function (msg) {
|
||||
if (!msg) {
|
||||
msg = '成功！'
|
||||
}
|
||||
this.alertToast(msg, 'success')
|
||||
}
|
||||
|
||||
// 渲染模板
|
||||
Domain.prototype.renderPage = function () {
|
||||
let self = this;
|
||||
let html = template('tpl-table-tr', {domainList: self.tableData})
|
||||
$('#tbody-domin').empty().append(html)
|
||||
html = template('tpl-page-li', {page_data: self.pageData})
|
||||
$('#page-li').empty().append(html)
|
||||
self.editDomain()
|
||||
self.deleteDomain()
|
||||
self.domainPageBtn()
|
||||
}
|
||||
|
||||
// 初始化数据
|
||||
Domain.prototype.initTableData = function (num, query) {
|
||||
let self = this;
|
||||
let requestUrl = self.url + '/page/' + num
|
||||
if (query) {
|
||||
requestUrl += "?search=" + query
|
||||
}
|
||||
$.get(requestUrl, function (data, status) {
|
||||
if (data['code'] === 200) {
|
||||
self.currentPage = num
|
||||
self.tableData = data['data']['domain_data']
|
||||
self.pageData = data['data']['pagination_data']
|
||||
self.numPages = self.pageData['num_pages']
|
||||
self.domainPageInit()
|
||||
self.renderPage()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 添加域名
|
||||
Domain.prototype.addDomain = function () {
|
||||
let self = this;
|
||||
$("#add-domain").click(function () {
|
||||
self.initAddForm()
|
||||
})
|
||||
}
|
||||
|
||||
// 初始化添加域名表单弹窗
|
||||
Domain.prototype.initAddForm = function () {
|
||||
this.model = false
|
||||
$('#DomainModalLabel').text("添加域名")
|
||||
$('#cdn-f').prop('checked', true)
|
||||
$('#boce-f').prop('checked', true)
|
||||
$('#form-key').val("")
|
||||
$('#form-domain').val("")
|
||||
$('#form-remark').val("")
|
||||
}
|
||||
|
||||
// 提交添加域名表单
|
||||
Domain.prototype.addSubmit = function () {
|
||||
let self = this
|
||||
|
||||
let boceId = $("input[name='options-boce']:checked").attr("id")
|
||||
let boce = false
|
||||
if (boceId === "boce-t") {
|
||||
boce = true
|
||||
}
|
||||
|
||||
let cdnId = $("input[name='options-cdn']:checked").attr("id")
|
||||
let cdn = false
|
||||
if (cdnId === "cdn-t") {
|
||||
cdn = true
|
||||
}
|
||||
|
||||
let domain = $('#form-domain').val()
|
||||
let autoKey = $('#form-key').val()
|
||||
let remark = $('#form-remark').val()
|
||||
let requestData = {'name': domain,'auth_key': auto_Key, 'remark': remark, 'boce': boce, 'category': cdn}
|
||||
|
||||
$("#DomainModal").modal("hide")
|
||||
if (!self.verifyDomain(domain)) {
|
||||
self.alertError("域名格式不正确")
|
||||
return
|
||||
}
|
||||
$.ajax({
|
||||
type: "post",
|
||||
url: self.url,
|
||||
data: JSON.stringify(requestData),
|
||||
contentType: "application/json; charset=utf-8",
|
||||
dataType: "json",
|
||||
success: function (result) {
|
||||
self.alertSuccessToast("添加成功!")
|
||||
self.initTableData(self.numPages, '')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 编辑域名
|
||||
Domain.prototype.editDomain = function () {
|
||||
let self = this;
|
||||
$(".edit-domain").click(function () {
|
||||
let index = $(this).attr('data-index')
|
||||
self.initEditForm(index)
|
||||
})
|
||||
}
|
||||
|
||||
// 初始化编辑域名表单弹窗
|
||||
Domain.prototype.initEditForm = function (index) {
|
||||
this.editIndex = index
|
||||
this.model = true
|
||||
$('#DomainModalLabel').text("编辑域名")
|
||||
let data = this.tableData[index]
|
||||
if (data['category']) {
|
||||
$('#cdn-t').prop('checked', true)
|
||||
} else {
|
||||
$('#cdn-f').prop('checked', true)
|
||||
}
|
||||
if (data['boce']) {
|
||||
$('#boce-t').prop('checked', true)
|
||||
} else {
|
||||
$('#boce-f').prop('checked', true)
|
||||
}
|
||||
$('#form-key').val(data['auth_key'])
|
||||
$('#form-domain').val(data['name'])
|
||||
$('#form-remark').val(data['remark'])
|
||||
}
|
||||
|
||||
// 编辑域名表单提交
|
||||
Domain.prototype.editSubmit = function () {
|
||||
let self = this
|
||||
if (self.model) {
|
||||
let data = this.tableData[self.editIndex]
|
||||
let id = data['id']
|
||||
|
||||
let boceId = $("input[name='options-boce']:checked").attr("id")
|
||||
let boce = false
|
||||
if (boceId === "boce-t") {
|
||||
boce = true
|
||||
}
|
||||
|
||||
let cdnId = $("input[name='options-cdn']:checked").attr("id")
|
||||
let cdn = false
|
||||
if (cdnId === "cdn-t") {
|
||||
cdn = true
|
||||
}
|
||||
|
||||
let domain = $('#form-domain').val()
|
||||
let autoKey = $('#form-key').val()
|
||||
let remark = $('#form-remark').val()
|
||||
let requestData = {'id': id, 'name': domain, 'auth_key': autoKey, 'remark': remark, 'boce': boce, 'category': cdn}
|
||||
|
||||
$("#DomainModal").modal("hide")
|
||||
if (!self.verifyDomain(domain)) {
|
||||
self.alertError("域名格式不正确")
|
||||
return
|
||||
}
|
||||
$.ajax({
|
||||
type: "put",
|
||||
url: self.url,
|
||||
data: JSON.stringify(requestData),
|
||||
contentType: "application/json; charset=utf-8",
|
||||
dataType: "json",
|
||||
success: function (result) {
|
||||
self.alertSuccessToast("编辑成功!")
|
||||
self.tableData[self.editIndex] = requestData
|
||||
self.renderPage()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 表单提交策略
|
||||
Domain.prototype.submitData = function () {
|
||||
let self = this;
|
||||
$('#submit-data').click(function () {
|
||||
if (self.model) {
|
||||
self.editSubmit()
|
||||
} else {
|
||||
self.addSubmit()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 删除域名
|
||||
Domain.prototype.deleteDomain = function () {
|
||||
let self = this;
|
||||
$('.delete-domain').click(function () {
|
||||
let index = $(this).attr('data-index')
|
||||
let requestData = {'id': self.tableData[index]['id']}
|
||||
self.alertConfirm({
|
||||
'text': '您确定要删除' + self.tableData[index]['name'] + '吗？',
|
||||
'confirmCallback': function () {
|
||||
$.ajax({
|
||||
type: "delete",
|
||||
url: self.url,
|
||||
data: JSON.stringify(requestData),
|
||||
contentType: "application/json; charset=utf-8",
|
||||
dataType: "json",
|
||||
success: function (result) {
|
||||
self.alertSuccessToast("删除成功!")
|
||||
self.initTableData(self.currentPage, self.searchText)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 入口方法
|
||||
Domain.prototype.run = function () {
|
||||
let self = this
|
||||
self.initTableData(self.currentPage, '')
|
||||
self.addDomain()
|
||||
self.editDomain()
|
||||
self.submitData()
|
||||
self.deleteDomain()
|
||||
self.domainPageBtn()
|
||||
self.searchDomain()
|
||||
}
|
||||
|
||||
// 构造执行入口
|
||||
$(function () {
|
||||
// 模板过滤方法
|
||||
if (window.template) {
|
||||
template.defaults.imports.domainSubstring = function (dateValue) {
|
||||
if (dateValue.length > 40 ) {
|
||||
return dateValue.substring(0, 37) + "..."
|
||||
} else {
|
||||
return dateValue
|
||||
}
|
||||
}
|
||||
}
|
||||
let domain = new Domain()
|
||||
domain.run()
|
||||
})
|
||||
|
||||
@ -23,11 +23,11 @@
|
||||
</div>
|
||||
<div class="card-footer text-muted" style="background-color: #fcf8e3">
|
||||
<div id="preview"></div>
|
||||
<div class="input-group mb-3">
|
||||
<input type="text" class="form-control" placeholder="图片链接" aria-label="图片链接"
|
||||
aria-describedby="button-addon2">
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-outline-primary" type="button" id="button-addon2">复制链接</button>
|
||||
<div class="card" style="width: 18rem;">
|
||||
<img src="https://a.520gexing.com/uploads/allimg/2023092607/z52gncuk0ei.jpg" class="card-img-top" alt="">
|
||||
<div class="card-body">
|
||||
<p>https://a.520gexing.com/uploads/allimg/2023092607/z52gncuk0ei.jpg</p>
|
||||
<button type="button" class="btn btn-primary img-copy-url-btn">复制链接</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user