This commit is contained in:
pushuo 2022-07-25 15:00:22 +08:00
parent 18b9752ce1
commit 91aaa2296a
10 changed files with 250 additions and 206 deletions

View File

@ -30,6 +30,86 @@ body {
min-height: 600px; min-height: 600px;
} }
.wp-100 {
width: 100px;
}
.wp-200 {
width: 200px;
}
.wp-300 {
width: 300px;
}
.wp-400 {
width: 400px;
}
.wp-500 {
width: 500px;
}
.wp-600 {
width: 600px;
}
.wp-700 {
width: 700px;
}
.wp-800 {
width: 800px;
}
.wp-900 {
width: 900px;
}
.wp-1000 {
width: 1000px;
}
.wp-100- {
width: calc(100% - 100px);
}
.wp-200- {
width: calc(100% - 200px);
}
.wp-300- {
width: calc(100% - 300px);
}
.wp-400- {
width: calc(100% - 400px);
}
.wp-500- {
width: calc(100% - 500px);
}
.wp-600- {
width: calc(100% - 600px);
}
.wp-700- {
width: calc(100% - 700px);
}
.wp-800- {
width: calc(100% - 800px);
}
.wp-900- {
width: calc(100% - 900px);
}
.wp-1000- {
width: calc(100% - 1000px);
}
.font-size-12 { .font-size-12 {
font-size: 12px; font-size: 12px;
} }
@ -442,10 +522,6 @@ table.table.table-striped > tbody > tr:nth-of-type(2n) {
} }
} }
.form-control {
border-radius: 2px;
font-size: 0.7rem;
}
.form-control:focus { .form-control:focus {
box-shadow: none; box-shadow: none;
} }

View File

@ -8941,7 +8941,7 @@ progress {
color: #212529; color: #212529;
background-color: #fff; background-color: #fff;
background-clip: padding-box; background-clip: padding-box;
border: 1px solid #ced4da; border: 1px solid #e2e2e2;
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
@ -9164,7 +9164,7 @@ textarea.form-control-lg {
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right 0.75rem center; background-position: right 0.75rem center;
background-size: 16px 12px; background-size: 16px 12px;
border: 1px solid #ced4da; border: 1px solid #e2e2e2;
border-radius: 0; border-radius: 0;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-webkit-appearance: none; -webkit-appearance: none;
@ -9417,7 +9417,7 @@ textarea.form-control-lg {
top: 0; top: 0;
left: 0; left: 0;
height: 100%; height: 100%;
padding: 0.8rem 0.75rem; padding: 0.9rem 0.75rem;
pointer-events: none; pointer-events: none;
border: 1px solid transparent; border: 1px solid transparent;
transform-origin: 0 0; transform-origin: 0 0;
@ -9429,7 +9429,7 @@ textarea.form-control-lg {
} }
} }
.form-floating > .form-control { .form-floating > .form-control {
padding: 0.8rem 0.75rem; padding: 0.9rem 0.75rem;
} }
.form-floating > .form-control::-moz-placeholder { .form-floating > .form-control::-moz-placeholder {
color: transparent; color: transparent;
@ -9516,7 +9516,7 @@ textarea.form-control-lg {
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
background-color: #e9ecef; background-color: #e9ecef;
border: 1px solid #ced4da; border: 1px solid #e2e2e2;
border-radius: 0; border-radius: 0;
} }

View File

@ -166,8 +166,8 @@ table.table {
} }
.form-control { .form-control {
border-radius: 2px; // border-radius: 2px;
font-size: 0.7rem; // font-size: 0.7rem;
&:focus { &:focus {
box-shadow: none; box-shadow: none;

View File

@ -23,6 +23,19 @@ body {
} }
} }
// 生成 100 200 300 ... 1000 的宽度
@for $i from 1 through 10 {
.wp-#{$i}00 {
width: #{$i}00px;
}
}
// clac(100% - #{$i}00px)
@for $i from 1 through 10 {
.wp-#{$i}00- {
width: calc(100% - #{$i}00px);
}
}
.font-size-12 { .font-size-12 {
font-size: 12px; font-size: 12px;
} }

View File

@ -17,11 +17,12 @@ $link-decoration: none;
$link-color: #1890ff; $link-color: #1890ff;
$form-floating-input-padding-t: 1.325rem; $form-floating-input-padding-t: 1.325rem;
$form-floating-input-padding-b: .625rem; $form-floating-input-padding-b: .625rem;
$form-floating-padding-y: .8rem; $form-floating-padding-y: .9rem;
$form-floating-height: 50px; $form-floating-height: 50px;
$btn-focus-width: 0; $btn-focus-width: 0;
$table-border-color: #e9ecef; $table-border-color: #e9ecef;
$border-color: #f3f3f3; $border-color: #f3f3f3;
$input-border-color: #e2e2e2;
@import './bootstrap-icons'; @import './bootstrap-icons';
@import 'node_modules/bootstrap-5.1.3/scss/bootstrap'; @import 'node_modules/bootstrap-5.1.3/scss/bootstrap';

View File

@ -1,8 +1,8 @@
<x-admin::form.row :title="$title"> <x-admin::form.row :title="$title">
@foreach (locales() as $index => $locale) @foreach (locales() as $index => $locale)
<div class="d-flex align-items-center mb-1"> <div class="d-flex wp-400">
<span class="input-group-text wp-100 px-1" id="basic-addon1">{{ $locale['name'] }}</span>
<input type="text" name="{{ $formatName($locale['code']) }}" value="{{ $formatValue($locale['code']) }}" class="form-control short" placeholder="{{ $locale['name'] }}"> <input type="text" name="{{ $formatName($locale['code']) }}" value="{{ $formatValue($locale['code']) }}" class="form-control short" placeholder="{{ $locale['name'] }}">
<span class="ml-1 text-muted">{{ $locale['name'] }}</span>
</div> </div>
@if ($attributes->has('required')) @if ($attributes->has('required'))
@error($errorKey($locale['code'])) @error($errorKey($locale['code']))

View File

@ -1,3 +1,3 @@
<x-admin::form.row :title="$title"> <x-admin::form.row :title="$title">
<input type="text" name="{{ $name }}" class="form-control form-control-sm short" value="{{ $value }}" placeholder="{{ $title }}"> <input type="text" name="{{ $name }}" class="form-control wp-400" value="{{ $value }}" placeholder="{{ $title }}">
</x-admin::form.row> </x-admin::form.row>

View File

@ -1,9 +1,7 @@
<div class="form-group"> <div class="row g-3 mb-3">
<div class="row"> <label for="" class="wp-200 col-form-label text-end">{{ $title ?? '' }}</label>
<label for="" class="col-sm-2 col-form-label">{{ $title ?? '' }}</label> <div class="col-auto">
<div class="col-sm-10"> {{ $slot }}
{{ $slot }}
</div>
</div> </div>
</div> </div>

View File

@ -6,7 +6,17 @@
<div id="plugins-app" class="card" v-cloak> <div id="plugins-app" class="card" v-cloak>
<div class="card-body"> <div class="card-body">
<a href="{{ admin_route('categories.create') }}" class="btn btn-primary">创建插件</a> {{-- <button type="button" @click="upload" class="btn btn-primary">上传插件</button> --}}
<el-upload
class="upload-demo"
action="{{ admin_route('plugins.import') }}"
:limit="1"
:on-change="handleFileChange"
:before-upload="beforeFileUpload"
accept=".zip"
>
<el-button size="small" type="primary">上传插件 (仅支持 zip 文件)</el-button>
</el-upload>
<div class="mt-4" style=""> <div class="mt-4" style="">
<table class="table"> <table class="table">
<thead> <thead>
@ -73,6 +83,18 @@
}) })
}, },
handleFileChange(e) {
console.log(e);
},
beforeFileUpload(e) {
console.log(e);
},
upload() {
},
installedPlugin(code, type, index) { installedPlugin(code, type, index) {
const self = this; const self = this;

View File

@ -43,215 +43,149 @@
<div> <div>
<h5 class="border-bottom pb-3 mb-4">商品库存</h5> <h5 class="border-bottom pb-3 mb-4">商品库存</h5>
<div class="form-group"> <x-admin::form.row title="启用多规格">
<div class="row align-items-center"> <el-switch v-model="editing.isVariable"></el-switch>
<label for="" class="col-sm-2 col-form-label">启用多规格</label> </x-admin::form.row>
<div class="col-sm-10">
<el-switch v-model="editing.isVariable"></el-switch>
</div>
</div>
</div>
<input v-if="form.skus.length" type="hidden" name="variables" :value="JSON.stringify(form.variables)"> <input v-if="form.skus.length" type="hidden" name="variables" :value="JSON.stringify(form.variables)">
<div class="form-group" v-if="editing.isVariable"> <div class="row g-3 mb-3" v-if="editing.isVariable">
<div class="row align-items-center"> <label for="" class="wp-200 col-form-label text-end"></label>
<label for="" class="col-sm-2 col-form-label"></label> <div class="col-auto wp-200-">
<div class="col-sm-10"> <div class="selectable-variants">
<div class="selectable-variants"> <div>
<div> <div v-for="(variant, variantIndex) in source.variables" :id="'selectable-variant-' + variantIndex">
<div v-for="(variant, variantIndex) in source.variables" :id="'selectable-variant-' + variantIndex"> <div class="title">
<div class="title"> <div>
<div> <b>@{{ variant.name[current_language_code] }}</b>
<b>@{{ variant.name[current_language_code] }}</b> <el-link type="primary" @click="modalVariantOpenButtonClicked(variantIndex, null)">编辑</el-link>
<el-link type="primary" @click="modalVariantOpenButtonClicked(variantIndex, null)">编辑</el-link> <el-link type="danger" class="ms-2" @click="removeSourceVariant(variantIndex)">移除</el-link>
<el-link type="danger" class="ms-2" @click="removeSourceVariant(variantIndex)">移除</el-link>
</div>
<div>
<el-checkbox v-model="variant.isImage" border size="mini" class="me-2 bg-white">添加规格图片</el-checkbox>
<el-button type="primary" plain size="mini" @click="modalVariantOpenButtonClicked(variantIndex, -1)">Add value</el-button>
</div>
</div> </div>
<draggable <div>
element="div" <el-checkbox v-model="variant.isImage" border size="mini" class="me-2 bg-white">添加规格图片</el-checkbox>
@start="isMove = true" <el-button type="primary" plain size="mini" @click="modalVariantOpenButtonClicked(variantIndex, -1)">Add value</el-button>
v-if="variant.values.length"
class="variants-wrap"
@update="(e) => {swapSourceVariantValue(e, variantIndex)}"
@end="isMove = false"
ghost-class="dragabble-ghost"
:list="variant.values"
:options="{animation: 100}"
>
<div v-for="(value, value_index) in variant.values" :key="value_index" class="variants-item" @dblclick="modalVariantOpenButtonClicked(variantIndex, value_index)">
{{-- <div class="value-img" v-if="variant.isImage"> --}}
{{-- <a href="" :id="'value-img-' + i + '-' + value_index" data-toggle="image" data-no-preview> --}}
{{-- <img :src="thumbnail(value.image)" class="img-responsive" /> --}}
{{-- </a> --}}
{{-- </div> --}}
<div class="open-file-manager variant-value-img" v-if="variant.isImage">
<div>
<img :src="thumbnail(value.image)" class="img-fluid">
</div>
</div>
<input type="hidden" v-model="value.image">
<div class="btn-remove" @click="removeSourceVariantValue(variantIndex, value_index)"><i class="el-icon-error"></i></div>
<div class="name">
@{{ value.name[current_language_code] }}
</div>
</div>
</draggable>
<div v-else>
<div class="p-2" @click="modalVariantOpenButtonClicked(variantIndex, -1)">请添加 Value</div>
</div> </div>
</div> </div>
<draggable
element="div"
@start="isMove = true"
v-if="variant.values.length"
class="variants-wrap"
@update="(e) => {swapSourceVariantValue(e, variantIndex)}"
@end="isMove = false"
ghost-class="dragabble-ghost"
:list="variant.values"
:options="{animation: 100}"
>
<div v-for="(value, value_index) in variant.values" :key="value_index" class="variants-item" @dblclick="modalVariantOpenButtonClicked(variantIndex, value_index)">
{{-- <div class="value-img" v-if="variant.isImage"> --}}
{{-- <a href="" :id="'value-img-' + i + '-' + value_index" data-toggle="image" data-no-preview> --}}
{{-- <img :src="thumbnail(value.image)" class="img-responsive" /> --}}
{{-- </a> --}}
{{-- </div> --}}
<el-button type="primary" size="small" @click="modalVariantOpenButtonClicked(-1, null)" class="btn btn-xs mr-1 mb-1">Add variant</el-button> <div class="open-file-manager variant-value-img" v-if="variant.isImage">
<div>
<img :src="thumbnail(value.image)" class="img-fluid">
</div>
</div>
<input type="hidden" v-model="value.image">
<div class="btn-remove" @click="removeSourceVariantValue(variantIndex, value_index)"><i class="el-icon-error"></i></div>
<div class="name">
@{{ value.name[current_language_code] }}
</div>
</div>
</draggable>
<div v-else>
<div class="p-2" @click="modalVariantOpenButtonClicked(variantIndex, -1)">请添加 Value</div>
</div>
</div> </div>
<div v-if="form.skus.length" class="mt-3"> <el-button type="primary" size="small" @click="modalVariantOpenButtonClicked(-1, null)" class="btn btn-xs mr-1 mb-1">Add variant</el-button>
<table class="table table-bordered table-hover"> </div>
<thead>
<th v-for="(variant, index) in form.variables" :key="'pv-header-' + index"> <div v-if="form.skus.length && form.variables.length" class="mt-3">
@{{ variant.name[current_language_code] || 'No name' }} <table class="table table-bordered table-hover">
</th> <thead>
<th>image</th> <th v-for="(variant, index) in form.variables" :key="'pv-header-' + index">
<th>model</th> @{{ variant.name[current_language_code] || 'No name' }}
<th>sku</th> </th>
<th>price</th> <th>image</th>
<th>orgin price</th> <th>model</th>
<th>cost price</th> <th>sku</th>
<th>quantity</th> <th>price</th>
</thead> <th>orgin price</th>
<tbody> <th>cost price</th>
<tr v-for="(sku, skuIndex) in form.skus" :key="skuIndex"> <th>quantity</th>
<template v-for="(variantValueIndex, j) in sku.variants"> </thead>
<td v-if="skuIndex % variantValueRepetitions[j] == 0" :key="'pvv' + skuIndex + '-' + j" <tbody>
:rowspan="variantValueRepetitions[j]"> <tr v-for="(sku, skuIndex) in form.skus" :key="skuIndex">
<span>@{{ form.variables[j].values[variantValueIndex].name[current_language_code] || 'No name' }}</span> <template v-for="(variantValueIndex, j) in sku.variants">
</td> <td v-if="skuIndex % variantValueRepetitions[j] == 0" :key="'pvv' + skuIndex + '-' + j"
</template> :rowspan="variantValueRepetitions[j]">
<td> <span>@{{ form.variables[j].values[variantValueIndex].name[current_language_code] || 'No name' }}</span>
<div class="open-file-manager variants-producr-img"> </td>
<div> </template>
<img :src="thumbnail(sku.image)" class="img-fluid"> <td>
</div> <div class="open-file-manager variants-producr-img">
<div>
<img :src="thumbnail(sku.image)" class="img-fluid">
</div> </div>
<input type="hidden" class="form-control" v-model="sku.image" :name="'skus[' + skuIndex + '][image]'" </div>
placeholder="image"> <input type="hidden" class="form-control" v-model="sku.image" :name="'skus[' + skuIndex + '][image]'"
placeholder="image">
<input type="hidden" class="form-control" :name="'skus[' + skuIndex + '][is_default]'" :value="skuIndex == 0 ? 1 : 0"> <input type="hidden" class="form-control" :name="'skus[' + skuIndex + '][is_default]'" :value="skuIndex == 0 ? 1 : 0">
<input v-for="(variantValueIndex, j) in sku.variants" type="hidden" <input v-for="(variantValueIndex, j) in sku.variants" type="hidden"
:name="'skus[' + skuIndex + '][variants][' + j + ']'" :value="variantValueIndex"> :name="'skus[' + skuIndex + '][variants][' + j + ']'" :value="variantValueIndex">
</td> </td>
<td><input type="text" class="form-control" v-model="sku.model" :name="'skus[' + skuIndex + '][model]'" <td><input type="text" class="form-control" v-model="sku.model" :name="'skus[' + skuIndex + '][model]'"
placeholder="model"></td> placeholder="model"></td>
<td><input type="text" class="form-control" v-model="sku.sku" :name="'skus[' + skuIndex + '][sku]'" placeholder="sku"> <td><input type="text" class="form-control" v-model="sku.sku" :name="'skus[' + skuIndex + '][sku]'" placeholder="sku">
</td> </td>
<td><input type="text" class="form-control" v-model="sku.price" :name="'skus[' + skuIndex + '][price]'" <td><input type="text" class="form-control" v-model="sku.price" :name="'skus[' + skuIndex + '][price]'"
placeholder="price"></td> placeholder="price"></td>
<td><input type="text" class="form-control" v-model="sku.origin_price" :name="'skus[' + skuIndex + '][origin_price]'" <td><input type="text" class="form-control" v-model="sku.origin_price" :name="'skus[' + skuIndex + '][origin_price]'"
placeholder="origin_price"></td> placeholder="origin_price"></td>
<td><input type="text" class="form-control" v-model="sku.cost_price" :name="'skus[' + skuIndex + '][cost_price]'" <td><input type="text" class="form-control" v-model="sku.cost_price" :name="'skus[' + skuIndex + '][cost_price]'"
placeholder="cost_price"> placeholder="cost_price">
</td> </td>
<td><input type="text" class="form-control" v-model="sku.quantity" :name="'skus[' + skuIndex + '][quantity]'" <td><input type="text" class="form-control" v-model="sku.quantity" :name="'skus[' + skuIndex + '][quantity]'"
placeholder="quantity"></td> placeholder="quantity"></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<template v-if="!editing.isVariable"> <template v-if="!editing.isVariable">
<div class="form-group"> <x-admin::form.row title="图片">
<div class="row align-items-center"> <div class="open-file-manager set-product-img">
<label for="" class="col-sm-2 col-form-label">图片</label> <div>
<div class="col-sm-10"> {{-- <img :src="thumbnail(form.skus[0].image)" class="img-fluid"> --}}
<img src="{{ old('skus.0.image', 'catalog/' . $product->skus[0]->image ?? '') }}" class="img-fluid">
<div class="open-file-manager set-product-img">
<div>
{{-- <img :src="thumbnail(form.skus[0].image)" class="img-fluid"> --}}
<img src="{{ old('skus.0.image', 'catalog/' . $product->skus[0]->image ?? '') }}" class="img-fluid">
</div>
</div>
<input type="hidden" value="{{ old('skus.0.image', $product->skus[0]->image ?? '') }}" name="skus[0][image]">
</div> </div>
</div> </div>
</div> <input type="hidden" value="{{ old('skus.0.image', $product->skus[0]->image ?? '') }}" name="skus[0][image]">
<div class="form-group"> </x-admin::form.row>
<div class="row align-items-center"> <x-admin-form-input name="skus[0][model]" title="model" :value="old('skus.0.model', $product->skus[0]->model ?? '')" />
<label for="" class="col-sm-2 col-form-label">model</label> <x-admin-form-input name="skus[0][sku]" title="sku" :value="old('skus.0.sku', $product->skus[0]->sku ?? '')" />
<div class="col-sm-10"> <x-admin-form-input name="skus[0][price]" title="price" :value="old('skus.0.price', $product->skus[0]->price ?? '')" />
<input type="text" class="form-control form-control-sm short" name="skus[0][model]" placeholder="model" <x-admin-form-input name="skus[0][origin_price]" title="origin_price" :value="old('skus.0.origin_price', $product->skus[0]->origin_price ?? '')" />
value="{{ old('skus.0.model', $product->skus[0]->model ?? '') }}"> <x-admin-form-input name="skus[0][cost_price]" title="cost_price" :value="old('skus.0.cost_price', $product->skus[0]->cost_price ?? '')" />
</div> <x-admin-form-input name="skus[0][quantity]" title="quantity" :value="old('skus.0.quantity', $product->skus[0]->quantity ?? '')" />
</div>
</div>
<div class="form-group">
<div class="row align-items-center">
<label for="" class="col-sm-2 col-form-label">sku</label>
<div class="col-sm-10">
<input type="text" class="form-control form-control-sm short" name="skus[0][sku]" placeholder="sku"
value="{{ old('skus.0.sku', $product->skus[0]->sku ?? '') }}">
</div>
</div>
</div>
<div class="form-group">
<div class="row align-items-center">
<label for="" class="col-sm-2 col-form-label">price</label>
<div class="col-sm-10">
<input type="text" class="form-control form-control-sm short" name="skus[0][price]" placeholder="price"
value="{{ old('skus.0.price', $product->skus[0]->price ?? '') }}">
</div>
</div>
</div>
<div class="form-group">
<div class="row align-items-center">
<label for="" class="col-sm-2 col-form-label">origin_price</label>
<div class="col-sm-10">
<input type="text" class="form-control form-control-sm short" name="skus[0][origin_price]" placeholder="origin_price"
value="{{ old('skus.0.origin_price', $product->skus[0]->origin_price ?? '') }}">
</div>
</div>
</div>
<div class="form-group">
<div class="row align-items-center">
<label for="" class="col-sm-2 col-form-label">cost_price</label>
<div class="col-sm-10">
<input type="text" name="skus[0][cost_price]" class="form-control form-control-sm short" placeholder="cost_price"
value="{{ old('skus.0.cost_price', $product->skus[0]->cost_price ?? '') }}">
</div>
</div>
</div>
<div class="form-group">
<div class="row align-items-center">
<label for="" class="col-sm-2 col-form-label">quantity</label>
<div class="col-sm-10">
<input type="text" class="form-control form-control-sm short" name="skus[0][quantity]" placeholder="quantity"
value="{{ old('skus.0.quantity', $product->skus[0]->quantity ?? '') }}">
</div>
</div>
</div>
<input type="hidden" name="skus[0][variants]" placeholder="variants" value=""> <input type="hidden" name="skus[0][variants]" placeholder="variants" value="">
<input type="hidden" name="skus[0][position]" placeholder="position" value="0"> <input type="hidden" name="skus[0][position]" placeholder="position" value="0">
<input type="hidden" name="skus[0][is_default]" placeholder="is_default" value="1"> <input type="hidden" name="skus[0][is_default]" placeholder="is_default" value="1">
</template> </template>
</div> </div>
<div class="form-group"> <x-admin::form.row title="">
<div class="row"> <button type="submit" class="btn btn-primary">Save</button>
<div class="col-sm-2"></div> </x-admin::form.row>
<div class="col-sm-10"><button type="submit" class="btn btn-primary">Save</button></div>
</div>
</div>
<el-dialog <el-dialog
title="编辑" title="编辑"