settings 表单

This commit is contained in:
pushuo 2022-08-05 16:06:24 +08:00
parent 53f7530cee
commit e66d5f115b
6 changed files with 179 additions and 114 deletions

View File

@ -12,6 +12,8 @@
namespace Beike\Admin\Http\Controllers;
use Beike\Repositories\SettingRepo;
use Beike\Repositories\CountryRepo;
use Beike\Repositories\CurrencyRepo;
use Beike\Repositories\SystemSettingRepo;
use Illuminate\Http\Request;
@ -24,9 +26,25 @@ class SettingController extends Controller
*/
public function index()
{
$settings = SystemSettingRepo::getList();
$themes = [
['value' => 'default', 'label' => '默认主题'],
['value' => 'black', 'label' => '黑色主题']
];
return view('admin::pages.setting', ['settings' => $settings]);
$tax_address = [
['value' => 'shipping', 'label' => '配送地址'],
['value' => 'payment', 'label' => '账单地址']
];
$data = [
'settings' => SystemSettingRepo::getList(),
'countries' => CountryRepo::all(),
'currencies' => CurrencyRepo::all(),
'tax_address' => $tax_address,
'themes' => $themes
];
return view('admin::pages.setting', $data);
}

View File

@ -0,0 +1,26 @@
<?php
namespace Beike\Admin\View\Components\Form;
use Illuminate\View\Component;
class Select extends Component
{
public string $name;
public string $value;
public string $title;
public array $options;
public function __construct(string $name, string $value, string $title, array $options)
{
$this->name = $name;
$this->title = $title;
$this->value = $value;
$this->options = $options;
}
public function render()
{
return view('admin::components.form.select');
}
}

View File

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

View File

@ -0,0 +1,10 @@
<x-admin::form.row :title="$title">
{{-- <input type="text" name="{{ $name }}" class="form-control wp-400" value="{{ $value }}" placeholder="{{ $title }}"> --}}
<select class="form-select" aria-label="Default select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
{{ $slot }}
</x-admin::form.row>

View File

@ -1,12 +1,15 @@
<x-admin::form.row :title="$title">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="{{ $name }}" id="{{ $name }}-1" value="1" {{ $value ? 'checked' : '' }}>
<label class="form-check-label" for="{{ $name }}-1">启用</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="{{ $name }}" id="{{ $name }}-0" value="0" {{ !$value ? 'checked' : '' }}>
<label class="form-check-label" for="{{ $name }}-0">禁用</label>
<div class="mb-1 mt-2">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="{{ $name }}" id="{{ $name }}-1" value="1" {{ $value ? 'checked' : '' }}>
<label class="form-check-label" for="{{ $name }}-1">启用</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="{{ $name }}" id="{{ $name }}-0" value="0" {{ !$value ? 'checked' : '' }}>
<label class="form-check-label" for="{{ $name }}-0">禁用</label>
</div>
</div>
{{ $slot }}
</x-admin::form.row>
@if (0)

View File

@ -1,125 +1,132 @@
@extends('admin::layouts.master')
@section('title', '插件编辑')
@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 h-min-600">
<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>
<div class="card-body">
<h6 class="border-bottom pb-3 mb-4">基础设置</h6>
<form action="" method="POST" id="app">
@csrf
<x-admin::form.row title="默认地址">
<div class="d-flex">
<div>
<select class="form-select wp-200 me-3" name="country_id" aria-label="Default select example">
@foreach ($countries as $country)
<option
value="{{ $country->id }}"
{{ $country->id == system_setting('base.country_id', '1') ? 'selected': '' }}>
{{ $country->name }}
</option>
@endforeach
</select>
<div class="text-muted font-size-12 lh-base">默认国家设置</div>
</div>
<div>
<select class="form-select wp-200 zones-select" name="zone_id" aria-label="Default select example"></select>
<div class="text-muted font-size-12 lh-base">默认省份设置</div>
</div>
</div>
</x-admin::form.row>
<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>
<x-admin::form.row title="默认语言">
<select class="form-select wp-200 me-3" name="locale" aria-label="Default select example">
@foreach ($languages as $language)
<option
value="{{ $language->code }}"
{{ $language->code == system_setting('base.locale', 'zh_cn') ? 'selected': '' }}>
{{ $language->name }}
</option>
@endforeach
</select>
<div class="text-muted font-size-12 lh-base">默认语言设置</div>
</x-admin::form.row>
<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>
<x-admin::form.row title="默认货币">
<select class="form-select wp-200 me-3" name="currency" aria-label="Default select example">
@foreach ($currencies as $currency)
<option
value="{{ $currency->code }}"
{{ $currency->code == system_setting('base.currency', 'USD') ? 'selected': '' }}>
{{ $currency->name }}
</option>
@endforeach
</select>
<div class="text-muted font-size-12 lh-base">默认货币设置</div>
</x-admin::form.row>
<x-admin-form-input name="admin_name" title="后台目录" value="{{ old('admin_name', system_setting('base.admin_name', 'admin')) }}">
<div class="text-muted font-size-12 lh-base">管理后台目录,默认为admin</div>
</x-admin-form-input>
<x-admin::form.row title="模版主题">
<select class="form-select wp-200 me-3" name="theme" aria-label="Default select example">
@foreach ($themes as $theme)
<option
value="{{ $theme['value'] }}"
{{ $theme['value'] == system_setting('base.theme', 'default') ? 'selected': '' }}>
{{ $theme['label'] }}
</option>
@endforeach
</select>
<div class="text-muted font-size-12 lh-base">主题模板选择</div>
</x-admin::form.row>
<x-admin-form-switch name="tax" title="启用税费" value="{{ old('tax', system_setting('base.tax', '0')) }}">
<div class="text-muted font-size-12 lh-base">是否启用税费计算</div>
</x-admin-form-switch>
<x-admin::form.row title="税费地址">
<select class="form-select wp-200 me-3" name="tax_address" aria-label="Default select example">
@foreach ($tax_address as $address)
<option
value="{{ $address['value'] }}"
{{ $address['value'] == system_setting('base.address', 'shipping') ? 'selected': '' }}>
{{ $address['label'] }}
</option>
@endforeach
</select>
<div class="text-muted font-size-12 lh-base">按什么地址计算税费</div>
</x-admin::form.row>
<x-admin::form.row title="">
<button type="submit" class="btn btn-primary 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($settings)
},
const country_id = {{ system_setting('base.country_id', '1') }};
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.post('settings', this.form).then((res) => {
this.$message.success(res.message);
})
// 获取身份
const getZones = (country_id) => {
$http.get(`countries/${country_id}/zones`).then((res) => {
console.log(res);
if (res.data.zones.length > 0) {
$('select[name="zone_id"]').html('');
res.data.zones.forEach((zone) => {
$('select[name="zone_id"]').append(`
<option value="${zone.id}">${zone.name}</option>
`);
});
},
}
});
</script>
} else {
$('select[name="zone_id"]').html(`
<option value="">请选择</option>
`);
}
})
}
<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()
}
});
}
$(function() {
getZones(country_id);
$('select[name="country_id"]').on('change', function () {
getZones($(this).val());
});
});
</script>
@endpush