wuhui_zzw
/
wyyl
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

!79 Fix the background brand page turning back problem, optimize the form submission interaction, etc. 

* Fix the background brand page turning back problem, optimize the form …
This commit is contained in:
蒲硕 2023-04-11 07:40:23 +00:00 committed by Edward Yang
parent d4b8c148a1
commit 98e962a6fd
14 changed files with 127 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
beike/Admin/View/Components/Form/Select.php
View File

@ -14,16 +14,19 @@ class Select extends Component
public array $options;
public string $width;
public string $key;
public string $label;
public function __construct(string $name, string $value, string $title, array $options, ?string $key = 'value', ?string $label = 'label')
public function __construct(string $name, string $value, string $title, array $options, string $width = '400', ?string $key = 'value', ?string $label = 'label')
{
$this->name = $name;
$this->title = $title;
$this->value = $value;
$this->options = $options;
$this->width = $width;
$this->key = $key;
$this->label = $label;
}

62
resources/beike/admin/css/_global.scss vendored
View File

@ -462,4 +462,66 @@ table.table thead th, .fw-bold, h1,h2,h3, h4, h5, h6, b, strong, .card .card-hea
}
}
}
}
.autocomplete-group-wrapper {
.inline-input {
width: 100%;
}
.item-group-wrapper {
padding: 10px;
min-height: 280px;
overflow: auto;
background-color: #f5f5f5;
// border: 1px solid #e3e3e3;
.item {
overflow: hidden;
position: relative;
padding: 5px 8px;
margin-bottom: 4px;
background: #fff;
border: 1px solid #eee;
cursor: move;
display: flex;
align-items: center; // flex-start | center
justify-content: space-between; // flex-end | center | space-between
&:hover {
border-color: #aaa;
}
div {
display: flex;
line-height: 1;
width: calc(100% - 16px);
align-items: center; // flex-start | center
i {
margin-right: 4px;
}
}
span {
font-size: 12px;
overflow: hidden;
padding: 2px 0;
text-overflow:ellipsis;
white-space: nowrap;
}
i {
// position: absolute;
color: #999;
font-weight: 400;
&.right {
cursor: pointer;
&:hover {
color: #222;
}
}
}
}
}
}

73
resources/beike/admin/css/_page-pages.scss vendored
View File

@ -1,73 +0,0 @@
@charset "UTF-8";
/**
* @copyright 2022 beikeshop.com - All Rights Reserved.
* @link https://beikeshop.com
* @Author pu shuo <pushuo@guangda.work>
* @Date 2022-08-09 14:12:25
* @LastEditTime 2022-09-16 19:05:44
*/
body.page-pages-form {
.autocomplete-group-wrapper {
.inline-input {
width: 100%;
}
.item-group-wrapper {
padding: 10px;
min-height: 280px;
overflow: auto;
background-color: #f5f5f5;
// border: 1px solid #e3e3e3;
.item {
overflow: hidden;
position: relative;
padding: 5px 8px;
margin-bottom: 4px;
background: #fff;
border: 1px solid #eee;
cursor: move;
display: flex;
align-items: center; // flex-start | center
justify-content: space-between; // flex-end | center | space-between
&:hover {
border-color: #aaa;
}
div {
display: flex;
line-height: 1;
width: calc(100% - 16px);
align-items: center; // flex-start | center
i {
margin-right: 4px;
}
}
span {
font-size: 12px;
overflow: hidden;
padding: 2px 0;
text-overflow:ellipsis;
white-space: nowrap;
}
i {
// position: absolute;
color: #999;
font-weight: 400;
&.right {
cursor: pointer;
&:hover {
color: #222;
}
}
}
}
}
}
}

62
resources/beike/admin/css/_page-product.scss vendored
View File

@ -179,66 +179,4 @@ body.page-product-form {
}
}
}
.autocomplete-group-wrapper {
.inline-input {
width: 100%;
}
.item-group-wrapper {
padding: 10px;
min-height: 280px;
overflow: auto;
background-color: #f5f5f5;
// border: 1px solid #e3e3e3;
.item {
overflow: hidden;
position: relative;
padding: 5px 8px;
margin-bottom: 4px;
background: #fff;
border: 1px solid #eee;
cursor: move;
display: flex;
align-items: center; // flex-start | center
justify-content: space-between; // flex-end | center | space-between
&:hover {
border-color: #aaa;
}
div {
display: flex;
line-height: 1;
width: calc(100% - 16px);
align-items: center; // flex-start | center
i {
margin-right: 4px;
}
}
span {
font-size: 12px;
overflow: hidden;
padding: 2px 0;
text-overflow:ellipsis;
white-space: nowrap;
}
i {
// position: absolute;
color: #999;
font-weight: 400;
&.right {
cursor: pointer;
&:hover {
color: #222;
}
}
}
}
}
}
}

1
resources/beike/admin/css/app.scss vendored
View File

@ -23,7 +23,6 @@ $primary: #fd560f;
@import 'element-ui';
@import 'login';
@import 'page-product';
@import 'page-pages';
@import 'marketing';
@import 'autocomplete';
@import 'page-category';

13
resources/beike/admin/js/bootstrap-validation.js vendored
View File

@ -3,13 +3,24 @@
* @link https://beikeshop.com
* @Author pu shuo <pushuo@guangda.work>
* @Date 2022-08-17 15:42:46
* @LastEditTime 2023-04-10 13:56:07
* @LastEditTime 2023-04-11 09:28:34
*/
// Example starter JavaScript for disabling form submissions if there are invalid fields
$(function () {
var forms = document.querySelectorAll(".needs-validation");
// 触发表单提交
$(document).on('click', '.submit-form', function(event) {
const form = $(this).attr('form');
if ($(`form#${form}`).find('button[type="submit"]').length > 0) {
$(`form#${form}`).find('button[type="submit"]')[0].click();
} else {
$(`form#${form}`).submit();
}
});
// Loop over them and prevent submission
Array.prototype.slice.call(forms).forEach(function (form) {
form.addEventListener(

17
resources/beike/admin/js/common.js vendored
View File

@ -3,7 +3,7 @@
* @link https://beikeshop.com
* @Author pu shuo <pushuo@guangda.work>
* @Date 2022-08-22 18:32:26
* @LastEditTime 2023-03-30 17:30:08
* @LastEditTime 2023-04-10 15:47:07
*/
export default {
@ -154,4 +154,19 @@ export default {
}
}
},
// 列表页使用 vue ajax 分页，点击浏览起前进后退按钮时，重新加载数据
ajaxPageReloadData(app) {
window.addEventListener('popstate', () => {
const page = this.getQueryString('page');
if (app.page < 2) {
window.history.back(-1);
return;
}
app.page = page * 1 - 1;
app.loadData();
});
},
}

2
resources/beike/admin/views/components/form/select.blade.php
View File

@ -1,5 +1,5 @@
<x-admin::form.row :title="$title">
<select class="form-select wp-200 me-3" name="{{ $name }}">
<select class="form-select me-3 wp-{{ $width }}" name="{{ $name }}">
@foreach ($options as $option)
<option value="{{ $option[$key] }}" {{ $option[$key] == $value ? 'selected': '' }}>{{ $option[$label] }}</option>
@endforeach

26
resources/beike/admin/views/pages/brands/index.blade.php
View File

@ -43,7 +43,7 @@
</div>
<el-pagination v-if="brands.data.length" layout="prev, pager, next" background :page-size="brands.per_page" :current-page.sync="page"
:total="brands.total"></el-pagination>
:total="brands.total" :current-page.sync="page"></el-pagination>
</div>
<el-dialog title="{{ __('admin/common.brand') }}" :visible.sync="dialog.show" width="600px"
@ -93,12 +93,7 @@
data: {
brands: @json($brands ?? []),
page: 1,
source: {
// languages: ['zh-ck','en-gb']
languages: @json($languages ?? []),
},
page: bk.getQueryString('page', 1) * 1,
dialog: {
show: false,
index: null,
@ -126,8 +121,25 @@
},
},
mounted() {
bk.ajaxPageReloadData(this)
},
computed: {
url() {
const url = @json(admin_route('brands.index'));
if (this.page) {
return url + '?page=' + this.page;
}
return url;
},
},
methods: {
loadData() {
window.history.pushState('', '', this.url);
$http.get(`brands?page=${this.page}`).then((res) => {
this.brands = res.data.brands;
})

9
resources/beike/admin/views/pages/page_categories/form.blade.php
View File

@ -4,7 +4,7 @@
@section('page-title-right')
<x-admin::form.row title="">
<button type="button" class="mt-3 btn btn-primary submit-form">{{ __('common.save') }}</button>
<button type="button" class="mt-3 btn btn-primary submit-form btn-lg" form="form-page-categories">{{ __('common.save') }}</button>
</x-admin::form.row>
@endsection
@ -25,6 +25,7 @@
<div id="customer-app-form" class="card">
<div class="card-body h-min-600">
<form novalidate class="needs-validation"
id="form-page-categories"
action="{{ $page_category->id ? admin_route('page_categories.update', [$page_category->id]) : admin_route('page_categories.store') }}"
method="POST">
@csrf
@ -100,12 +101,6 @@
@push('footer')
<script>
$(document).ready(function($) {
$('.submit-form').click(function () {
$('.needs-validation').find('button[type="submit"]').click()
})
})
var app = new Vue({
el: '#app',

8
resources/beike/admin/views/pages/pages/form.blade.php
View File

@ -10,7 +10,7 @@
@section('page-title-right')
<x-admin::form.row title="">
<button type="button" class="mt-3 btn btn-primary submit-form">{{ __('common.save') }}</button>
<button type="button" class="mt-3 btn btn-primary submit-form btn-lg" form="form-page">{{ __('common.save') }}</button>
</x-admin::form.row>
@endsection
@ -26,7 +26,7 @@
<div id="app" class="card h-min-600">
<div class="card-body">
<form novalidate class="needs-validation" action="{{ $page->id ? admin_route('pages.update', [$page->id]) : admin_route('pages.store') }}" method="POST">
<form novalidate id="form-page" class="needs-validation" action="{{ $page->id ? admin_route('pages.update', [$page->id]) : admin_route('pages.store') }}" method="POST">
<div class="tab-content">
<div class="tab-pane fade show active" id="tab-content">
@csrf
@ -150,10 +150,6 @@
@push('footer')
<script>
$('.submit-form').click(function () {
$('.needs-validation').find('button[type="submit"]').click()
})
var app = new Vue({
el: '#app',

9
resources/beike/admin/views/pages/products/form/form.blade.php
View File

@ -11,7 +11,7 @@
@endpush
@section('page-title-right')
<button type="button" class="btn btn-lg btn-primary submit-form">{{ __('common.save') }}</button>
<button type="button" class="btn btn-lg btn-primary submit-form" form="app">{{ __('common.save') }}</button>
@endsection
@section('content')
@ -101,7 +101,6 @@
@endhookwrapper
<x-admin-form-select :title="__('admin/tax_class.index')" name="tax_class_id" :value="old('tax_class_id', $product->tax_class_id ?? '')" :options="$tax_classes" key="id" label="title" />
<x-admin-form-switch name="active" :title="__('common.status')" :value="old('active', $product->active ?? 1)" />
<x-admin::form.row :title="__('admin/category.index')">
<div class="wp-400 form-control" style="max-height: 240px;overflow-y: auto">
@ -117,6 +116,8 @@
</div>
</x-admin::form.row>
<x-admin-form-switch name="active" :title="__('common.status')" :value="old('active', $product->active ?? 1)" />
@hook('admin.product.edit.extra')
<div>
@ -952,10 +953,6 @@
}
$(document).ready(function ($) {
$('.submit-form').click(function () {
$('.needs-validation').find('button[type="submit"]').click()
})
$('#brand-autocomplete').autocomplete({
'source': function(request, response) {
$http.get(`brands/autocomplete?name=${encodeURIComponent(request)}`, null, {hload: true}).then((res) => {

2
resources/beike/admin/views/pages/products/index.blade.php
View File

@ -139,7 +139,7 @@
</td>
@endif
@hook('admin.product.list.column_value')
<td width="140" class="text-end">
<td class="text-end">
@if ($product['deleted_at'] == '')
<a href="{{ admin_route('products.edit', [$product['id']]) }}" class="btn btn-outline-secondary btn-sm">{{ __('common.edit') }}</a>
<a href="javascript:void(0)" class="btn btn-outline-danger btn-sm" @click.prevent="deleteProduct({{ $loop->index }})">{{ __('common.delete') }}</a>

6
resources/beike/admin/views/pages/setting.blade.php
View File

@ -2,6 +2,10 @@
@section('title', __('admin/setting.index'))
@section('page-title-right')
<button type="button" class="btn btn-lg btn-primary submit-form" form="app">{{ __('common.save') }}</button>
@endsection
@section('content')
<div id="plugins-app-form" class="card h-min-600">
<div class="card-body">
@ -254,7 +258,7 @@
</div>
<x-admin::form.row title="">
<button type="submit" class="btn btn-primary mt-4">{{ __('common.submit') }}</button>
<button type="submit" class="btn btn-primary d-none mt-4">{{ __('common.submit') }}</button>
</x-admin::form.row>
</form>
</div>