wip
This commit is contained in:
parent
116c7c5c45
commit
80d68c811a
|
|
@ -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()),
|
||||
],
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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="#"> ' + 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));
|
||||
});
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -22,3 +22,4 @@ $primary: #fd560f;
|
|||
@import 'element-ui';
|
||||
@import 'login';
|
||||
@import 'page-product';
|
||||
@import 'autocomplete'
|
||||
|
|
|
|||
|
|
@ -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,() => {})
|
||||
|
|
|
|||
|
|
@ -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="#"> ' + 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));
|
||||
});
|
||||
}
|
||||
},
|
||||
}
|
||||
|
|
@ -138,7 +138,7 @@
|
|||
{type: 'custom',label: '自定义'}
|
||||
],
|
||||
static: [
|
||||
{name: '个人中心', value: '{{ shop_route('account.index') }}', route: 'account.index'},
|
||||
{name: '个人中心', value: 'account.index'},
|
||||
],
|
||||
link: null,
|
||||
keyword: '',
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue