This commit is contained in:
pushuo 2022-08-11 19:30:32 +08:00
parent 116c7c5c45
commit 80d68c811a
9 changed files with 345 additions and 28 deletions

View File

@ -8,6 +8,7 @@ use Beike\Repositories\ProductRepo;
use Beike\Repositories\CategoryRepo;
use Beike\Repositories\LanguageRepo;
use Beike\Admin\Services\ProductService;
use Beike\Admin\Repositories\TaxClassRepo;
use Beike\Admin\Http\Resources\ProductResource;
class ProductController extends Controller
@ -72,6 +73,7 @@ class ProductController extends Controller
if ($product->id) {
$descriptions = $product->descriptions->keyBy('locale');
$categoryIds = $product->categories->pluck('id')->toArray();
$product->load('brand');
}
$data = [
@ -79,6 +81,7 @@ class ProductController extends Controller
'descriptions' => $descriptions ?? [],
'category_ids' => $categoryIds ?? [],
'languages' => LanguageRepo::all(),
'tax_classes' => TaxClassRepo::getList(),
'source' => [
'categories' => CategoryRepo::flatten(locale()),
],

View File

@ -1017,3 +1017,33 @@ body.page-product-form .selectable-variants .variants-wrap > div .name {
body.page-product-form .selectable-variants .variants-wrap > div .name + .btn-link {
padding-left: 5px;
}
.autocomplete-suggestions {
border: 1px solid rgb(126, 116, 116);
background: #FFF;
overflow: auto;
}
.autocomplete-suggestion {
padding: 2px 5px;
white-space: nowrap;
overflow: hidden;
}
.autocomplete-selected {
background: #F0F0F0;
}
.autocomplete-suggestions strong {
font-weight: normal;
color: #3399FF;
}
.autocomplete-group {
padding: 2px 5px;
}
.autocomplete-group strong {
display: block;
border-bottom: 1px solid #000;
}

View File

@ -2070,6 +2070,7 @@ var _document$querySelect;
window.$http = _js_http__WEBPACK_IMPORTED_MODULE_0__["default"];
window.bk = _common__WEBPACK_IMPORTED_MODULE_1__["default"];
_common__WEBPACK_IMPORTED_MODULE_1__["default"].autocomplete();
var base = document.querySelector('base').href;
var asset = document.querySelector('meta[name="asset"]').content;
var editor_language = ((_document$querySelect = document.querySelector('meta[name="editor_language"]')) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.content) || 'zh_cn';
@ -2093,14 +2094,8 @@ $(document).ready(function ($) {
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
beforeSend: function beforeSend() {
layer.load(2, {
shade: [0.3, '#fff']
});
},
complete: function complete() {
layer.closeAll('loading');
},
// beforeSend: function() { layer.load(2, {shade: [0.3,'#fff'] }); },
// complete: function() { layer.closeAll('loading'); },
error: function error(xhr, ajaxOptions, thrownError) {
if (xhr.responseJSON.message) {
layer.msg(xhr.responseJSON.message, function () {});
@ -2207,6 +2202,124 @@ __webpack_require__.r(__webpack_exports__);
fn.apply(_this, _arguments);
}, delay);
};
},
autocomplete: function autocomplete() {
$.fn.autocomplete = function (option) {
return this.each(function () {
this.timer = null;
this.items = new Array();
$.extend(this, option);
$(this).attr('autocomplete', 'off'); // Focus
$(this).on('focus', function () {
this.request();
}); // Blur
$(this).on('blur', function () {
setTimeout(function (object) {
object.hide();
}, 200, this);
}); // Keydown
$(this).on('keydown', function (event) {
switch (event.keyCode) {
case 27:
// escape
this.hide();
break;
default:
this.request();
break;
}
}); // Click
this.click = function (event) {
event.preventDefault();
var value = $(event.target).parent().attr('data-value');
if (value && this.items[value]) {
this.select(this.items[value]);
}
}; // Show
this.show = function () {
var pos = $(this).position();
$(this).siblings('ul.dropdown-menu').css({
top: pos.top + $(this).outerHeight(),
left: pos.left
});
$(this).siblings('ul.dropdown-menu').show();
}; // Hide
this.hide = function () {
$(this).siblings('ul.dropdown-menu').hide();
}; // Request
this.request = function () {
clearTimeout(this.timer);
this.timer = setTimeout(function (object) {
object.source($(object).val(), $.proxy(object.response, object));
}, 200, this);
}; // Response
this.response = function (json) {
var hasFocus = $(this).is(':focus');
if (!hasFocus) return;
var html = '';
if (json.length) {
for (var i = 0; i < json.length; i++) {
this.items[json[i]['value']] = json[i];
}
for (var i = 0; i < json.length; i++) {
if (!json[i]['category']) {
html += '<li data-value="' + json[i]['value'] + '"><a href="#" class="dropdown-item">' + json[i]['label'] + '</a></li>';
}
} // Get all the ones with a categories
var category = new Array();
for (var i = 0; i < json.length; i++) {
if (json[i]['category']) {
if (!category[json[i]['category']]) {
category[json[i]['category']] = new Array();
category[json[i]['category']]['name'] = json[i]['category'];
category[json[i]['category']]['item'] = new Array();
}
category[json[i]['category']]['item'].push(json[i]);
}
}
for (var i in category) {
html += '<li class="dropdown-header">' + category[i]['name'] + '</li>';
for (j = 0; j < category[i]['item'].length; j++) {
html += '<li data-value="' + category[i]['item'][j]['value'] + '"><a href="#">&nbsp;&nbsp;&nbsp;' + category[i]['item'][j]['label'] + '</a></li>';
}
}
}
if (html) {
this.show();
} else {
this.hide();
}
$(this).siblings('ul.dropdown-menu').html(html);
};
$(this).after('<ul class="dropdown-menu"></ul>');
$(this).siblings('ul.dropdown-menu').delegate('a', 'click', $.proxy(this.click, this));
});
};
}
});

View File

@ -0,0 +1,29 @@
.autocomplete-suggestions {
border: 1px solid rgb(126, 116, 116);
background: #FFF;
overflow: auto;
}
.autocomplete-suggestion {
padding: 2px 5px;
white-space: nowrap;
overflow: hidden;
}
.autocomplete-selected {
background: #F0F0F0;
}
.autocomplete-suggestions strong {
font-weight: normal;
color: #3399FF;
}
.autocomplete-group {
padding: 2px 5px;
}
.autocomplete-group strong {
display: block;
border-bottom: 1px solid #000;
}

View File

@ -22,3 +22,4 @@ $primary: #fd560f;
@import 'element-ui';
@import 'login';
@import 'page-product';
@import 'autocomplete'

View File

@ -2,6 +2,7 @@ import http from "../../../js/http";
window.$http = http;
import common from "./common";
window.bk = common;
common.autocomplete();
const base = document.querySelector('base').href;
const asset = document.querySelector('meta[name="asset"]').content;
@ -25,8 +26,8 @@ if (typeof Vue != 'undefined') {
$(document).ready(function ($) {
$.ajaxSetup({
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
beforeSend: function() { layer.load(2, {shade: [0.3,'#fff'] }); },
complete: function() { layer.closeAll('loading'); },
// beforeSend: function() { layer.load(2, {shade: [0.3,'#fff'] }); },
// complete: function() { layer.closeAll('loading'); },
error: function(xhr, ajaxOptions, thrownError) {
if (xhr.responseJSON.message) {
layer.msg(xhr.responseJSON.message,() => {})

View File

@ -37,4 +37,132 @@ export default {
}, delay);
}
},
autocomplete() {
$.fn.autocomplete = function(option) {
return this.each(function() {
this.timer = null;
this.items = new Array();
$.extend(this, option);
$(this).attr('autocomplete', 'off');
// Focus
$(this).on('focus', function() {
this.request();
});
// Blur
$(this).on('blur', function() {
setTimeout(function(object) {
object.hide();
}, 200, this);
});
// Keydown
$(this).on('keydown', function(event) {
switch(event.keyCode) {
case 27: // escape
this.hide();
break;
default:
this.request();
break;
}
});
// Click
this.click = function(event) {
event.preventDefault();
let value = $(event.target).parent().attr('data-value');
if (value && this.items[value]) {
this.select(this.items[value]);
}
}
// Show
this.show = function() {
var pos = $(this).position();
$(this).siblings('ul.dropdown-menu').css({
top: pos.top + $(this).outerHeight(),
left: pos.left
});
$(this).siblings('ul.dropdown-menu').show();
}
// Hide
this.hide = function() {
$(this).siblings('ul.dropdown-menu').hide();
}
// Request
this.request = function() {
clearTimeout(this.timer);
this.timer = setTimeout(function(object) {
object.source($(object).val(), $.proxy(object.response, object));
}, 200, this);
}
// Response
this.response = function(json) {
let hasFocus = $(this).is(':focus');
if (!hasFocus) return;
var html = '';
if (json.length) {
for (var i = 0; i < json.length; i++) {
this.items[json[i]['value']] = json[i];
}
for (var i = 0; i < json.length; i++) {
if (!json[i]['category']) {
html += '<li data-value="' + json[i]['value'] + '"><a href="#" class="dropdown-item">' + json[i]['label'] + '</a></li>';
}
}
// Get all the ones with a categories
var category = new Array();
for (var i = 0; i < json.length; i++) {
if (json[i]['category']) {
if (!category[json[i]['category']]) {
category[json[i]['category']] = new Array();
category[json[i]['category']]['name'] = json[i]['category'];
category[json[i]['category']]['item'] = new Array();
}
category[json[i]['category']]['item'].push(json[i]);
}
}
for (var i in category) {
html += '<li class="dropdown-header">' + category[i]['name'] + '</li>';
for (j = 0; j < category[i]['item'].length; j++) {
html += '<li data-value="' + category[i]['item'][j]['value'] + '"><a href="#">&nbsp;&nbsp;&nbsp;' + category[i]['item'][j]['label'] + '</a></li>';
}
}
}
if (html) {
this.show();
} else {
this.hide();
}
$(this).siblings('ul.dropdown-menu').html(html);
}
$(this).after('<ul class="dropdown-menu"></ul>');
$(this).siblings('ul.dropdown-menu').delegate('a', 'click', $.proxy(this.click, this));
});
}
},
}

View File

@ -138,7 +138,7 @@
{type: 'custom',label: '自定义'}
],
static: [
{name: '个人中心', value: '{{ shop_route('account.index') }}', route: 'account.index'},
{name: '个人中心', value: 'account.index'},
],
link: null,
keyword: '',

View File

@ -55,22 +55,28 @@
<div class="help-text">开启多规格并且多规格配置了图片时,这里的图片将作为多规格的公用图片,展示在其后面</div>
</x-admin::form.row>
{{-- <x-admin-form-input name="video" title="视频" :value="old('video', $product->video ?? '')" /> --}}
<input type="hidden" name="name" value="">
<x-admin-form-input name="position" title="排序" :value="old('position', $product->position ?? '0')" />
<x-admin-form-input name="brand_id" title="品牌" value="0" />
<x-admin-form-input name="tax_class_id" title="税类" value="0" />
<x-admin::form.row title="品牌">
<input type="text" value="{{ $product->brand->name }}" id="brand-autocomplete" class="form-control wp-400 " />
<input type="hidden" name="brand_id" value="{{ old('brand_id', $product->brand_id ?? '') }}" />
</x-admin::form.row>
<x-admin-form-select title="税类" name="tax_class_id" :value="old('tax_class_id', $product->tax_class_id ?? '')" :options="$tax_classes->toArray()" key="id" label="title" />
<x-admin-form-switch name="active" title="状态" :value="old('active', $product->active ?? 1)" />
<x-admin::form.row title="分类">
@foreach ($source['categories'] as $_category)
<div class="wp-400 form-control" style="max-height: 300px;overflow-y: auto">
@foreach ($source['categories'] as $_category)
<div class="form-check">
<input class="form-check-input" type="checkbox" name="categories[]" value="{{ $_category->id }}"
id="category-{{ $_category->id }}" {{ in_array($_category->id, $category_ids) ? 'checked' : '' }}>
id="category-{{ $_category->id }}" {{ in_array($_category->id, $category_ids) ? 'checked' : '' }}>
<label class="form-check-label" for="category-{{ $_category->id }}">
{{ $_category->name }}
</label>
</div>
@endforeach
@endforeach
</div>
</x-admin::form.row>
<div>
@ -240,7 +246,7 @@
<x-admin::form.row title="">
<button type="submit" class="btn btn-primary">保存</button>
<button type="submit" class="btn btn-primary mt-3 btn-lg">保存</button>
</x-admin::form.row>
<el-dialog
@ -272,18 +278,8 @@
</div>
@endsection
@push('footer')
<script>
Vue.prototype.thumbnail = function thumbnail(image, width, height) {
// 判断 image 是否以 http 开头
if (image.indexOf('http') === 0) {
return image;
}
return '{{ asset('/') }}' + image;
};
var app = new Vue({
el: '#app',
data: {
@ -544,5 +540,21 @@
}
return results;
}
$(document).ready(function ($) {
$('#brand-autocomplete').autocomplete({
'source': function(request, response) {
$http.get(`brands/autocomplete?name=${encodeURIComponent(request)}`, null, {hload: true}).then((res) => {
response($.map(res.data, function(item) {
return {label: item['name'], value: item['id']}
}));
})
},
'select': function(item) {
$(this).val(item['label']);
$('input[name="brand_id"]').val(item['value']);
}
});
});
</script>
@endpush