优化插件编辑页面等
This commit is contained in:
parent
55ea7eb031
commit
fc6cb5c8dc
|
|
@ -16,6 +16,7 @@ use Beike\Admin\View\Components\Form\Select;
|
|||
use Beike\Console\Commands\MakeRootAdminUser;
|
||||
use Beike\Admin\View\Components\Form\InputLocale;
|
||||
use Beike\Admin\View\Components\Form\SwitchRadio;
|
||||
use Beike\Admin\View\Components\Form\Textarea;
|
||||
|
||||
class AdminServiceProvider extends ServiceProvider
|
||||
{
|
||||
|
|
@ -49,6 +50,7 @@ class AdminServiceProvider extends ServiceProvider
|
|||
'form-input' => Input::class,
|
||||
'form-select' => Select::class,
|
||||
'form-image' => Image::class,
|
||||
'form-textarea' => Textarea::class,
|
||||
]);
|
||||
|
||||
$this->registerGuard();
|
||||
|
|
|
|||
|
|
@ -0,0 +1,28 @@
|
|||
<?php
|
||||
|
||||
namespace Beike\Admin\View\Components\Form;
|
||||
|
||||
use Illuminate\View\Component;
|
||||
|
||||
class Textarea extends Component
|
||||
{
|
||||
public string $name;
|
||||
public string $title;
|
||||
public string $value;
|
||||
public bool $required;
|
||||
public bool $html;
|
||||
|
||||
public function __construct(string $name, string $title, ?string $value, bool $required = false, bool $html = false)
|
||||
{
|
||||
$this->name = $name;
|
||||
$this->title = $title;
|
||||
$this->value = $value;
|
||||
$this->required = $required;
|
||||
$this->html = $html;
|
||||
}
|
||||
|
||||
public function render()
|
||||
{
|
||||
return view('admin::components.form.textarea');
|
||||
}
|
||||
}
|
||||
|
|
@ -25,5 +25,5 @@ return [
|
|||
'label' => '运费值',
|
||||
'type' => 'string',
|
||||
'required' => true,
|
||||
],
|
||||
]
|
||||
];
|
||||
|
|
|
|||
|
|
@ -9987,13 +9987,13 @@ textarea.form-control-lg {
|
|||
.btn-lg, .btn-group-lg > .btn {
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 1.025rem;
|
||||
border-radius: 0.3rem;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.btn-sm, .btn-group-sm > .btn {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.7175rem;
|
||||
border-radius: 0.2rem;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.fade {
|
||||
|
|
|
|||
|
|
@ -9993,13 +9993,13 @@ textarea.form-control-lg {
|
|||
.btn-lg, .btn-group-lg > .btn {
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 1rem;
|
||||
border-radius: 0.3rem;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.btn-sm, .btn-group-sm > .btn {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.7rem;
|
||||
border-radius: 0.2rem;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.fade {
|
||||
|
|
|
|||
|
|
@ -14,6 +14,10 @@ $body-bg: #f9fbfd;
|
|||
|
||||
$font-family-base: 'poppins', sans-serif;
|
||||
$border-radius: 0;
|
||||
$btn-border-radius: 0;
|
||||
$btn-border-radius-sm: 0;
|
||||
$btn-border-radius-lg: 0;
|
||||
// $btn-border-width: 0;
|
||||
$font-size-base: 0.82rem;
|
||||
$form-check-input-width: 1.2em;
|
||||
$form-switch-width: 2.6em;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
@if (isset($html) && $html)
|
||||
@push('header')
|
||||
<script src="{{ asset('vendor/tinymce/5.9.1/tinymce.min.js') }}"></script>
|
||||
@endpush
|
||||
@endif
|
||||
|
||||
<x-admin::form.row :title="$title" :required="$required">
|
||||
<div class="{{ isset($html) && $html ? 'w-max-1000' : '' }}">
|
||||
<textarea type="text" name="{{ $name }}" class="{{ isset($html) && $html ? 'tinymce' : 'form-control wp-400' }}" placeholder="{{ $title }}">{{ $value }}</textarea>
|
||||
</div>
|
||||
{{ $slot }}
|
||||
</x-admin::form.row>
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
</aside>
|
||||
<div id="content">
|
||||
<div class="page-title-box"><h5 class="page-title">@yield('title')</h5></div>
|
||||
<div class="container-fluid p-0 mt-3">
|
||||
<div class="container-fluid p-0 mt-4">
|
||||
@yield('content')
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,127 +2,67 @@
|
|||
|
||||
@section('title', '插件编辑')
|
||||
|
||||
@push('header')
|
||||
<script src="{{ asset('vendor/tinymce/5.9.1/tinymce.min.js') }}"></script>
|
||||
{{-- <script src="{{ asset('vendor/tinymce-vue/tinymce-vue.min.js') }}"></script> --}}
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div id="plugins-app-form" class="card">
|
||||
<div class="card">
|
||||
<div class="card-body pt-5">
|
||||
<el-form :model="form" :rules="rules" ref="form" label-width="110px">
|
||||
<div v-for="column, index in source.columns">
|
||||
<el-form-item :label="column.label" v-if="column.type == 'string'" class="form-max-w" :prop="column.required ? column.name : ''" :required="column.required">
|
||||
<el-input v-model="form[column.name]" :placeholder="column.label"></el-input>
|
||||
<div class="text-muted font-size-12 lh-base" v-if="column.description">@{{ column.description }}</div>
|
||||
</el-form-item>
|
||||
<form action="{{ admin_route('plugins.update', [$plugin->code]) }}" method="POST">
|
||||
@csrf
|
||||
{{ method_field('put') }}
|
||||
|
||||
<el-form-item :label="column.label" v-if="column.type == 'text'" style="max-width: 900px;" :prop="column.required ? column.name : ''" :required="column.required">
|
||||
<textarea v-model="form[column.name]" :data-key="column.name" id="input-tinymce"></textarea>
|
||||
<div class="text-muted font-size-12 lh-base" v-if="column.description">@{{ column.description }}</div>
|
||||
</el-form-item>
|
||||
@foreach ($plugin->getColumns() as $column)
|
||||
@if ($column['type'] == 'string')
|
||||
<x-admin-form-input
|
||||
:name="$column['name']"
|
||||
:title="$column['label']"
|
||||
:required="$column['required'] ? true : false"
|
||||
:value="old($column['value'], $column['value'] ?? '')">
|
||||
@if (isset($column['description']))
|
||||
<div class="help-text font-size-12 lh-base">{{ $column['description'] }}</div>
|
||||
@endif
|
||||
</x-admin-form-input>
|
||||
@endif
|
||||
|
||||
<el-form-item :label="column.label" v-if="column.type == 'select'" class="form-max-w" :required="column.required">
|
||||
<el-select v-model="form[column.name]" placeholder="请选择" >
|
||||
<el-option v-for="option, o_i in column.options" :key="o_i" :label="option.label"
|
||||
:value="option.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<div class="text-muted font-size-12 lh-base" v-if="column.description">@{{ column.description }}</div>
|
||||
</el-form-item>
|
||||
<el-form-item :label="column.label" v-if="column.type == 'bool'" :required="column.required">
|
||||
<el-switch v-model="form[column.name]" :active-value="1" :inactive-value="0"></el-switch>
|
||||
<div class="text-muted font-size-12 lh-base" v-if="column.description">@{{ column.description }}</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm('form')">提交</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
@if ($column['type'] == 'select')
|
||||
<x-admin-form-select
|
||||
:name="$column['name']"
|
||||
:title="$column['label']"
|
||||
:value="old($column['value'], $column['value'] ?? '')"
|
||||
:options="$column['options']">
|
||||
@if (isset($column['description']))
|
||||
<div class="help-text font-size-12 lh-base">{{ $column['description'] }}</div>
|
||||
@endif
|
||||
</x-admin-form-select>
|
||||
@endif
|
||||
|
||||
@if ($column['type'] == 'bool')
|
||||
<x-admin-form-switch
|
||||
:name="$column['name']"
|
||||
:title="$column['label']"
|
||||
:value="old($column['value'], $column['value'] ?? '')">
|
||||
@if (isset($column['description']))
|
||||
<div class="help-text font-size-12 lh-base">{{ $column['description'] }}</div>
|
||||
@endif
|
||||
</x-admin-form-switch>
|
||||
@endif
|
||||
|
||||
@if ($column['type'] == 'textarea')
|
||||
<x-admin-form-textarea
|
||||
:name="$column['name']"
|
||||
:title="$column['label']"
|
||||
:required="$column['required'] ? true : false"
|
||||
:html="isset($column['html']) ? true : false"
|
||||
:value="old($column['value'], $column['value'] ?? '')">
|
||||
@if (isset($column['description']))
|
||||
<div class="help-text font-size-12 lh-base">{{ $column['description'] }}</div>
|
||||
@endif
|
||||
</x-admin-form-textarea>
|
||||
@endif
|
||||
@endforeach
|
||||
|
||||
<x-admin::form.row title="">
|
||||
<button type="submit" class="btn btn-primary btn-lg mt-4">提交</button>
|
||||
</x-admin::form.row>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('footer')
|
||||
<script>
|
||||
let app = new Vue({
|
||||
el: '#plugins-app-form',
|
||||
data: {
|
||||
customerTab: 'customer',
|
||||
form: {
|
||||
status: false
|
||||
},
|
||||
source: {
|
||||
columns: @json($plugin->getColumns())
|
||||
},
|
||||
|
||||
rules: {
|
||||
// name: [{required: true, message: '请输入用户名', trigger: 'blur'}, ],
|
||||
},
|
||||
},
|
||||
|
||||
// 在实例创建完成后被立即同步调用
|
||||
created () {
|
||||
},
|
||||
// 在挂载开始之前被调用:相关的 render 函数首次被调用
|
||||
beforeMount () {
|
||||
this.source.columns.forEach((e) => {
|
||||
this.$set(this.form, e.name, e.value)
|
||||
if (e.required) {
|
||||
this.rules[e.name] = [{required: true, message: `请输入${e.label}`, trigger: 'blur'}]
|
||||
}
|
||||
})
|
||||
},
|
||||
// 实例被挂载后调用
|
||||
mounted () {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
submitForm(form) {
|
||||
this.$refs[form].validate((valid) => {
|
||||
if (!valid) {
|
||||
this.$message.error('请检查表单是否填写正确');
|
||||
return;
|
||||
}
|
||||
|
||||
$http.put(`plugins/{{ $plugin->code }}`, this.form).then((res) => {
|
||||
this.$message.success(res.message);
|
||||
})
|
||||
});
|
||||
},
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
tinymce.init({
|
||||
selector: '#input-tinymce',
|
||||
language: "zh_CN",
|
||||
branding: false,
|
||||
height: 400,
|
||||
plugins: "link lists fullscreen table hr wordcount image imagetools code",
|
||||
menubar: "",
|
||||
toolbar: "undo redo | toolbarImageButton | bold italic underline strikethrough | forecolor backcolor | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | formatpainter removeformat | charmap emoticons | preview | template link anchor table toolbarImageUrlButton | fullscreen code",
|
||||
// contextmenu: "link image imagetools table",
|
||||
toolbar_items_size: 'small',
|
||||
image_caption: true,
|
||||
// imagetools_toolbar: 'imageoptions',
|
||||
toolbar_mode: 'wrap',
|
||||
font_formats:
|
||||
"微软雅黑='Microsoft YaHei';黑体=黑体;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Georgia=georgia,palatino;Helvetica=helvetica;Times New Roman=times new roman,times;Verdana=verdana,geneva",
|
||||
fontsize_formats: "10px 12px 14px 18px 24px 36px",
|
||||
relative_urls : true,
|
||||
setup:function(ed) {
|
||||
ed.on('change', function(e) {
|
||||
if (e.target.targetElm.dataset.key) {
|
||||
app.form[e.target.targetElm.dataset.key] = ed.getContent()
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -41,7 +41,10 @@ $input-btn-focus-box-shadow: 0 0 11px 0 rgba($color: $primary, $alpha: .1);
|
|||
|
||||
// $input-btn-padding-x: .75rem !default;
|
||||
$btn-focus-width: 0;
|
||||
$border-radius: 0;
|
||||
$btn-border-radius: 0;
|
||||
$btn-border-radius-sm: 0;
|
||||
$btn-border-radius-lg: 0;
|
||||
// $btn-padding-y: $input-btn-padding-y !default;
|
||||
// $btn-focus-box-shadow: 0 0 11px 0 rgba($color: $primary, $alpha: .1);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue