优化插件编辑页面等

This commit is contained in:
pushuo 2022-08-11 10:49:42 +08:00
parent 55ea7eb031
commit fc6cb5c8dc
10 changed files with 112 additions and 123 deletions

View File

@ -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();

View File

@ -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');
}
}

View File

@ -25,5 +25,5 @@ return [
'label' => '运费值',
'type' => 'string',
'required' => true,
],
]
];

View File

@ -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 {

View File

@ -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 {

View File

@ -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;

View File

@ -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>

View File

@ -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>

View File

@ -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

View File

@ -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);