feat: 分离前端列表

This commit is contained in:
JaguarJack 2022-12-06 19:27:38 +08:00
parent 0024080c28
commit 727e887729
38 changed files with 552 additions and 146 deletions

1
.gitignore vendored
View File

@ -5,6 +5,7 @@
/storage/*.key
/vendor
/fixer
/catch
.env
.env.backup
.env.production

View File

@ -17,7 +17,7 @@ php artisan serve
### PHP
使用 fixer 进行代码检查, 具体请查看根目录下 `.php-cs-fixer.dist.php` 文件的规范,还需要进行以下两步骤
```shell
mkdir path && cd path // any path name you set
mkdir path
```
```shell
composer require --working-dir=path friendsofphp/php-cs-fixer

View File

@ -2,6 +2,8 @@
namespace App\Exceptions;
use Catch\Enums\Code;
use Catch\Exceptions\CatchException;
use Catch\Exceptions\FailedException;
use Illuminate\Foundation\Exceptions\Handler as ExceptionHandler;
use Illuminate\Http\JsonResponse;
@ -70,7 +72,7 @@ class Handler extends ExceptionHandler
}
}
$e = new FailedException($message ?: 'Server Error');
$e = new FailedException($message ?: 'Server Error', $e instanceof CatchException ? $e->getCode() : Code::FAILED);
$response = parent::render($request, $e);

View File

@ -14,6 +14,8 @@ declare(strict_types=1);
namespace Catch\Base;
use Catch\Enums\Code;
use Catch\Exceptions\FailedException;
use Illuminate\Contracts\Auth\Authenticatable;
use Illuminate\Routing\Controller;
use Illuminate\Support\Facades\Auth;
@ -29,6 +31,12 @@ abstract class CatchController extends Controller
*/
protected function getLoginUser($guard = null): Authenticatable
{
return Auth::guard($guard ?: getGuardName())->user();
$user = Auth::guard($guard ?: getGuardName())->user();
if (! $user) {
throw new FailedException('登录失效, 请重新登录', Code::LOST_LOGIN);
}
return $user;
}
}

View File

@ -14,6 +14,7 @@ declare(strict_types=1);
namespace Catch;
use Catch\Support\Module\Installer;
use Illuminate\Support\Facades\File;
use Illuminate\Support\Str;
@ -360,4 +361,20 @@ class CatchAdmin
{
return Str::replaceFirst(base_path(), '.', $path);
}
/**
*
* @param string $module
* @return Installer
*/
public static function getModuleInstaller(string $module): Installer
{
$installer = self::getModuleServiceProviderNamespace($module).'Installer';
if (class_exists($installer)) {
return app($installer);
}
throw new \RuntimeException("Installer [$installer] Not Found");
}
}

View File

@ -51,7 +51,7 @@ abstract class CatchCommand extends Command
protected function initialize(InputInterface $input, OutputInterface $output): void
{
if ($input->hasArgument('module')
&& ! Module::all()->pluck('name')->merge(Collection::make(config('catch.module.default')))->contains(lcfirst($input->getArgument('module')))
&& ! Module::getEnabled()->pluck('name')->merge(Collection::make(config('catch.module.default')))->contains(lcfirst($input->getArgument('module')))
) {
$this->error(sprintf('Module [%s] Not Found', $input->getArgument('module')));
exit;

View File

@ -6,6 +6,7 @@ use Catch\Enums\Code;
use Catch\Events\User as UserEvent;
use Catch\Exceptions\FailedException;
use Exception;
use Illuminate\Auth\AuthenticationException;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Event;
@ -20,11 +21,13 @@ class AuthMiddleware
try {
$guardName = getGuardName();
if (Auth::guard($guardName)->check()) {
$user = Auth::guard($guardName)->user();
Event::dispatch(new UserEvent($user));
if (! $user = Auth::guard($guardName)->user()) {
throw new AuthenticationException();
}
Event::dispatch(new UserEvent($user));
return $next($request);
} catch (Exception|Throwable $e) {
if ($e instanceof TokenExpiredException) {
throw new FailedException(Code::LOGIN_EXPIRED->message(), Code::LOGIN_EXPIRED);
@ -35,8 +38,6 @@ class AuthMiddleware
}
throw new FailedException(Code::LOST_LOGIN->message().":{$e->getMessage()}", Code::LOST_LOGIN);
} finally {
return $next($request);
}
}
}

View File

@ -185,8 +185,8 @@ class CatchAdminServiceProvider extends ServiceProvider
protected function bootModuleProviders()
{
foreach ($this->app->make(ModuleRepositoryInterface::class)->getEnabled() as $module) {
if (class_exists($module['service'])) {
$this->app->register($module['service']);
if (class_exists($module['provider'])) {
$this->app->register($module['provider']);
}
}
}

View File

@ -64,7 +64,7 @@ class DatabaseDriver implements ModuleRepositoryInterface
'path' => $module['path'],
'description' => $module['desc'],
'keywords' => $module['keywords'],
'service' => sprintf('\\%s%s', CatchAdmin::getModuleNamespace($module['name']), ucfirst($module['name']).'ServiceProvider'),
'provider' => sprintf('\\%s%s', CatchAdmin::getModuleNamespace($module['name']), ucfirst($module['name']).'ServiceProvider'),
]);
}
@ -92,7 +92,7 @@ class DatabaseDriver implements ModuleRepositoryInterface
->update([
'name' => $module['name'],
'alias' => $module['alias'],
'path' => $module['path'],
'description' => $module['desc'],
'keywords' => $module['keywords'],
]);
@ -146,7 +146,7 @@ class DatabaseDriver implements ModuleRepositoryInterface
throw new FailedException(sprintf('Module [%s] has been created', $module['name']));
}
if ($this->model->where('alias', $module['alias'])->first()) {
if ($this->model->where('path', $module['path'])->first()) {
throw new FailedException(sprintf('Module Alias [%s] has been exised', $module['alias']));
}
}

View File

@ -78,7 +78,7 @@ class FileDriver implements ModuleRepositoryInterface
$this->hasSameModule($module, $modules);
$module['service'] = sprintf('\\%s', CatchAdmin::getModuleServiceProvider($module['path']));
$module['provider'] = sprintf('\\%s', CatchAdmin::getModuleServiceProvider($module['path']));
$module['version'] = '1.0.0';
$module['enable'] = true;

View File

@ -73,7 +73,7 @@ abstract class Installer
*
* @return void
*/
public function __invoke(): void
public function install(): void
{
// TODO: Implement __invoke() method.
$this->moduleRepository->create($this->info());

View File

@ -23,6 +23,10 @@ use Illuminate\Support\Facades\Request;
*/
trait BaseOperate
{
protected string $sortField = 'sort';
protected bool $sortDesc = true;
/**
*
*
@ -46,10 +50,18 @@ trait BaseOperate
{
$queryBuilder = self::query()->select($this->fieldsInList)->quickSearch();
if (in_array($this->sortField, $this->getFillable())) {
$queryBuilder = $queryBuilder->orderBy($this->sortField, $this->sortDesc ? 'desc' : 'asc');
}
$queryBuilder = $queryBuilder->orderByDesc('id');
if ($this->isPaginate) {
return $queryBuilder->paginate(Request::get('limit', $this->perPage));
}
return $queryBuilder->get();
}

View File

@ -93,8 +93,11 @@ class FrontTable extends Creator
return Str::of(File::get($this->getTableStub()))->replace([
$this->table, $this->search, $this->api, $this->paginate, $this->useList
], [
$this->getTableContent(), $this->getSearchContent(),
"'{$this->apiString}'", $this->getPaginateStubContent(), $this->getUseList()
$this->getTableContent(),
$this->getSearchContent(),
$this->apiString,
$this->getPaginateStubContent(),
$this->getUseList()
])->toString();
}
@ -215,15 +218,7 @@ HTML;
*/
protected function getPaginateStubContent(): string
{
return $this->hasPaginate ?
File::get(
dirname(__DIR__).DIRECTORY_SEPARATOR
.'stubs'.DIRECTORY_SEPARATOR.'vue'.
DIRECTORY_SEPARATOR.'paginate.stub'
)
: '';
return $this->hasPaginate ? '<Paginate />' : '';
}
/**
@ -232,9 +227,7 @@ HTML;
*/
protected function getUseList(): string
{
return $this->hasPaginate ?
'const { data, query, search, reset, changePage, changeLimit, loading } = useGetList(api)' :
'const { data, query, search, reset, loading } = useGetList(api)';
return 'const { data, query, search, reset, loading } = useGetList(api)';
}
/**

View File

@ -1,12 +0,0 @@
<div class="pt-2 pb-2 flex justify-end">
<el-pagination
background
layout="total,sizes,prev,pager,next"
:current-page="query.page"
:page-size="query.limit"
@current-change="changePage"
@size-change="changeLimit"
:total="total"
:page-sizes="[1, 10, 20, 30, 50]"
/>
</div>

View File

@ -1,24 +1,12 @@
<template>
<div>
<div class="w-full min-h-0 bg-white dark:bg-regal-dark pl-5 pt-5 pr-5 rounded-lg">
<el-form :inline="true">
{search}
<el-form-item>
<el-button type="primary" @click="search()">
<Icon name="magnifying-glass" class="w-4 mr-1 -ml-1" />
搜索
</el-button>
<el-button @click="reset()">
<Icon name="arrow-path" class="w-4 mr-1 -ml-1" />
重置
</el-button>
</el-form-item>
</el-form>
</div>
<Search :search="search" :reset="reset">
<template v-slot:body>
{search}
</template>
</Search>
<div class="pl-2 pr-2 bg-white dark:bg-regal-dark rounded-lg mt-4">
<div class="pt-5 pl-2">
<Add @click="show(null)" />
</div>
<Operate :show="show" />
<el-table :data="tableData" class="mt-3" v-loading="loading">
{table}
<el-table-column label="操作" width="200">
@ -28,8 +16,9 @@
</template>
</el-table-column>
</el-table>
{paginate}
<Paginate />
</div>
<Dialog v-model="visible" :title="title" destroy-on-close>
<Create @close="close" :primary="id" :api="api" />
</Dialog>
@ -41,23 +30,18 @@ import { computed, onMounted, ref, watch } from 'vue'
import Create from './create.vue'
import { useGetList } from '/admin/composables/curd/useGetList'
import { useDestroy } from '/admin/composables/curd/useDestroy'
import { useEnabled } from '/admin/composables/curd/useEnabled'
import { t } from '/admin/support/helper'
const visible = ref<boolean>(false)
const id = ref(null)
const api = {api}
const title = ref<string>('');
const api = '{api}'
const title = ref<string>('')
// const { data, query, search, reset, loading } = useGetList(api)
{useList}
const { destroy, isDeleted } = useDestroy()
const { enabled } = useEnabled()
onMounted(() => search())
const { destroy, deleted } = useDestroy()
const tableData = computed(() => data.value?.data)
const total = computed(() => data.value?.total)
const close = () => {
visible.value = false
@ -70,9 +54,9 @@ const show = primary => {
visible.value = true
}
watch(isDeleted, function (){
// change origin status
isDeleted.value = false
reset();
onMounted(() => {
search()
deleted(reset)
})
</script>

View File

@ -1,4 +1,5 @@
<?php
namespace Modules\Permissions\Enums;
use Catch\Enums\Enum;

View File

@ -0,0 +1,44 @@
<?php
declare(strict_types=1);
namespace Modules\Permissions\Http\Controllers;
use Catch\Base\CatchController as Controller;
use Modules\Permissions\Models\JobsModel;
use Illuminate\Http\Request;
class JobsController extends Controller
{
public function __construct(
protected readonly JobsModel $model
){}
/**
* @param Request $request
* @return mixed
*/
public function index(Request $request): mixed
{
return $this->model->getList();
}
public function store(Request $request)
{
return $this->model->storeBy($request->all());
}
public function show($id)
{
return $this->model->firstBy($id);
}
public function update($id, Request $request)
{
return $this->model->updateBy($id, $request->all());
}
public function destroy($id)
{
return $this->model->deleteBy($id);
}
}

View File

@ -1,19 +1,19 @@
<?php
declare(strict_types=1);
namespace Modules\Permissions\Http\Controllers;
use Catch\Base\CatchController as Controller;
use Modules\Permissions\Models\RolesModel;
use Illuminate\Http\Request;
use Modules\Permissions\Http\Requests\RoleRequest;
class RolesController extends Controller
{
public function __construct(
protected readonly RolesModel $model
){}
) {
}
/**
* @return mixed

View File

@ -17,7 +17,7 @@ class RoleRequest extends FormRequest
return [
'role_name' => sprintf('required|unique:%s,%s,%s', RolesModel::class, 'role_name', $this->get('id')),
'identify' => sprintf('required|alpha|unique:%s,%s,%s', RolesModel::class, 'role_name', $this->get('id')),
'identify' => sprintf('required|alpha|unique:%s,%s,%s', RolesModel::class, 'role_name', $this->get('id')),
];
}
@ -41,4 +41,4 @@ class RoleRequest extends FormRequest
'identify.unique' => '角色标识已存在',
];
}
}
}

View File

@ -0,0 +1,45 @@
<?php
declare(strict_types=1);
namespace Modules\Permissions\Models;
use Catch\Base\CatchModel as Model;
/**
* @property $id
* @property $job_name
* @property $coding
* @property $status
* @property $sort
* @property $description
* @property $creator_id
* @property $created_at
* @property $updated_at
* @property $deleted_at
*/
class JobsModel extends Model
{
protected $table = 'jobs';
protected $fillable = [ 'id', 'job_name', 'coding', 'status', 'sort', 'description', 'creator_id', 'created_at', 'updated_at', 'deleted_at' ];
/**
* @var array
*/
protected array $fieldsInList = ['id','job_name','coding','status','sort','description','created_at','updated_at'];
/**
* @var array
*/
protected array $form = ['job_name','coding','status','sort','description'];
/**
* @var array
*/
public array $searchable = [
'job_name' => 'like'
];
}

View File

@ -5,7 +5,6 @@ declare(strict_types=1);
namespace Modules\Permissions\Models;
use Catch\Base\CatchModel as Model;
use Illuminate\Support\Facades\Request;
/**
* @property $role_name
@ -22,7 +21,7 @@ class RolesModel extends Model
{
protected $table = 'roles';
protected $fillable = [ 'id', 'role_name', 'identify', 'parent_id', 'description', 'data_range', 'creator_id', 'created_at', 'updated_at', 'deleted_at' ];
protected $fillable = ['id', 'role_name', 'identify', 'parent_id', 'description', 'data_range', 'creator_id', 'created_at', 'updated_at', 'deleted_at'];
/**
* @var array
@ -49,5 +48,4 @@ class RolesModel extends Model
{
return self::query()->select($this->fieldsInList)->quickSearch()->get()->toTree();
}
}

View File

@ -0,0 +1,42 @@
<?php
namespace Modules\Permissions\Providers;
use Catch\Support\Module\Installer as ModuleInstaller;
class Installer extends ModuleInstaller
{
protected function info(): array
{
// TODO: Implement info() method.
return [
'name' => '权限管理',
'path' => 'Permissions',
'keywords' => '权限, 角色, 部门',
'description' => '权限管理模块',
'provider' => PermissionsServiceProvider::class
];
}
protected function migration(): string
{
// TODO: Implement migration() method.
return '';
}
protected function seeder(): string
{
// TODO: Implement seeder() method.
return '';
}
protected function requirePackages(): void
{
// TODO: Implement requirePackages() method.
}
protected function removePackages(): void
{
// TODO: Implement removePackages() method.
}
}

View File

@ -0,0 +1,42 @@
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('jobs', function (Blueprint $table) {
$table->increments('id');
$table->string('job_name', 50)->comment('岗位名称');
$table->string('coding', 30)->nullable()->comment('创建人ID');
$table->tinyInteger('status')->default('1')->comment('1 正常 2 停用');
$table->integer('sort')->default('1')->comment('排序');
$table->string('description', 1000)->nullable()->comment('岗位描述');
$table->creatorId();
$table->createdAt();
$table->updatedAt();
$table->deletedAt();
$table->engine='InnoDB';
$table->comment('岗位表');
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('jobs');
}
};

View File

@ -2,10 +2,12 @@
use Illuminate\Support\Facades\Route;
use Modules\Permissions\Http\Controllers\RolesController;
use Modules\Permissions\Http\Controllers\JobsController;
Route::prefix('permissions')->group(function () {
Route::apiResource('roles', RolesController::class);
Route::apiResource('roles', RolesController::class);
Route::apiResource('jobs', JobsController::class);
//next
});

View File

@ -0,0 +1,62 @@
<template>
<el-form :model="formData" label-width="120px" ref="form" v-loading="loading" class="pr-4">
<el-form-item label="岗位名称" prop="job_name" :rules="[{ required: true, message: '岗位名称必须填写' }]">
<el-input v-model="formData.job_name" name="job_name" clearable />
</el-form-item>
<el-form-item label="岗位编码" prop="coding">
<el-input v-model="formData.coding" name="coding" clearable />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="formData.status">
<el-radio v-for="item in options" :key="item.value" :label="item.value" name="status">{{ item.label }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number v-model="formData.sort" name="sort" :min="1" />
</el-form-item>
<el-form-item label="岗位描述" prop="description">
<el-input v-model="formData.description" name="description" clearable type="textarea" />
</el-form-item>
<div class="flex justify-end">
<el-button type="primary" @click="submitForm(form)">{{ $t('system.confirm') }}</el-button>
</div>
</el-form>
</template>
<script lang="ts" setup>
import { useCreate } from '/admin/composables/curd/useCreate'
import { useShow } from '/admin/composables/curd/useShow'
import { onMounted, watch } from 'vue'
const props = defineProps({
primary: String | Number,
api: String,
})
const emit = defineEmits(['close'])
const { formData, form, loading, submitForm, isClose } = useCreate(props.api, props.primary)
formData.value.status = 1
formData.value.sort = 1
watch(isClose, function (value) {
if (value) {
emit('close')
}
})
onMounted(() => {
if (props.primary) {
useShow(props.api, props.primary).then(r => {
formData.value = r.data
})
}
})
const options = [
{ label: '正常', value: 1 },
{ label: '禁用', value: 2 },
]
</script>

View File

@ -0,0 +1,68 @@
<template>
<div>
<Search :search="search" :reset="reset">
<template v-slot:body>
<el-form-item label="岗位名称" prop="job_name">
<el-input v-model="query.job_name" name="job_name" clearable />
</el-form-item>
</template>
</Search>
<div class="pl-2 pr-2 bg-white dark:bg-regal-dark rounded-lg mt-4">
<Operate :show="show" />
<el-table :data="tableData" class="mt-3" v-loading="loading">
<el-table-column prop="job_name" label="岗位名称" />
<el-table-column prop="coding" label="岗位编码" />
<el-table-column prop="status" label="状态" />
<el-table-column prop="sort" label="排序" />
<el-table-column prop="description" label="岗位描述" />
<el-table-column label="操作" width="200">
<template #default="scope">
<Update @click="show(scope.row.id)" />
<Destroy @click="destroy(api, scope.row.id)" />
</template>
</el-table-column>
</el-table>
<Paginate />
</div>
<Dialog v-model="visible" :title="title" destroy-on-close>
<Create @close="close" :primary="id" :api="api" />
</Dialog>
</div>
</template>
<script lang="ts" setup>
import { computed, onMounted, ref, watch } from 'vue'
import Create from './create.vue'
import { useGetList } from '/admin/composables/curd/useGetList'
import { useDestroy } from '/admin/composables/curd/useDestroy'
import { t } from '/admin/support/helper'
const visible = ref<boolean>(false)
const id = ref(null)
const api = 'permissions/jobs'
const title = ref<string>('')
// const { data, query, search, reset, loading } = useGetList(api)
const { data, query, search, reset, loading } = useGetList(api)
const { destroy, deleted } = useDestroy()
const tableData = computed(() => data.value?.data)
const close = () => {
visible.value = false
reset()
}
const show = primary => {
title.value = primary ? t('system.edit') : t('system.add')
id.value = primary
visible.value = true
}
onMounted(() => {
search()
deleted(reset)
})
</script>

View File

@ -13,6 +13,12 @@ const router: RouteRecordRaw[] = [
meta: { title: '角色管理', icon: 'home' },
component: () => import('./roles/index.vue'),
},
{
path: 'jobs',
name: 'jobs',
meta: { title: '岗位管理', icon: 'home' },
component: () => import('./jobs/index.vue'),
},
],
},
]

View File

@ -81,6 +81,16 @@ class Users extends Model implements AuthenticatableContract, JWTSubject
);
}
/**
* is super admin
*
* @return bool
*/
public function isSuperAdmin(): bool
{
return $this->{$this->primaryKey} == config('catch.super_admin');
}
/**
* update
* @param $id

View File

@ -21,17 +21,17 @@ return new class () extends Migration {
$table->string('email')->comment('邮箱');
$table->string('avatar')->comment('头像');
$table->string('avatar')->nullable()->comment('头像');
$table->string('remember_token', 1000)->comment('token');
$table->string('remember_token', 1000)->nullable()->comment('token');
$table->integer('creator_id');
$table->integer('creator_id')->default(0);
$table->status();
$table->string('login_ip')->comment('登录IP');
$table->string('login_ip')->nullable()->comment('登录IP');
$table->integer('login_at')->comment('登录时间');
$table->integer('login_at')->default(0)->comment('登录时间');
$table->createdAt();

View File

@ -1,7 +1,7 @@
<template>
<div>
<div class="w-full min-h-0 bg-white dark:bg-regal-dark pl-5 pt-5 pr-5 rounded-lg">
<el-form :inline="true">
<Search :search="search" :reset="reset">
<template v-slot:body>
<el-form-item label="用户名">
<el-input v-model="query.username" clearable />
</el-form-item>
@ -11,22 +11,10 @@
<el-form-item label="状态">
<Select v-model="query.status" clearable api="status" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="search()">
<Icon name="magnifying-glass" class="w-4 mr-1 -ml-1" />
搜索
</el-button>
<el-button @click="reset()">
<Icon name="arrow-path" class="w-4 mr-1 -ml-1" />
重置
</el-button>
</el-form-item>
</el-form>
</div>
</template>
</Search>
<div class="pl-2 pr-2 bg-white dark:bg-regal-dark rounded-lg mt-4">
<div class="pt-5 pl-2">
<Add @click="show(null)" />
</div>
<Operate :show="show" />
<el-table :data="tableData" class="mt-3" v-loading="loading">
<el-table-column prop="username" label="用户名" width="180" />
<el-table-column prop="avatar" label="头像" width="180" />
@ -45,18 +33,7 @@
</el-table-column>
</el-table>
<div class="pt-2 pb-2 flex justify-end">
<el-pagination
background
layout="total,sizes,prev, pager,next"
:current-page="query.page"
:page-size="query.limit"
@current-change="changePage"
@size-change="changeLimit"
:total="total"
:page-sizes="[10, 20, 30, 50]"
/>
</div>
<Paginate />
</div>
<Dialog v-model="visible" :title="title" destroy-on-close>
@ -70,7 +47,6 @@ import { computed, onMounted, ref, watch } from 'vue'
import Create from './create.vue'
import { useGetList } from '/admin/composables/curd/useGetList'
import { useDestroy } from '/admin/composables/curd/useDestroy'
import { useEnabled } from '/admin/composables/curd/useEnabled'
import { t } from '/admin/support/helper'
const visible = ref<boolean>(false)
@ -78,13 +54,10 @@ const id = ref(null)
const api = 'users'
const title = ref<string>('')
const { data, query, search, reset, changePage, changeLimit, loading } = useGetList(api)
const { destroy, isDeleted } = useDestroy()
onMounted(() => search())
const { data, query, search, reset, loading } = useGetList(api)
const { destroy, deleted } = useDestroy()
const tableData = computed(() => data.value?.data)
const total = computed(() => data.value?.total)
const close = () => {
visible.value = false
@ -97,8 +70,9 @@ const show = primary => {
visible.value = true
}
watch(isDeleted, function () {
isDeleted.value = false
reset()
onMounted(() => {
search()
deleted(reset)
})
</script>

View File

@ -0,0 +1,29 @@
<template>
<div class="pt-2 pb-2 flex justify-end">
<el-pagination
background
:layout="layout"
:current-page="page"
:page-size="limit"
@current-change="changePage"
@size-change="changeLimit"
:total="total"
:page-sizes="pageSizes"
/>
</div>
</template>
<script lang="ts" setup>
import {inject} from "vue";
const layout = 'total,sizes,prev, pager,next'
const pageSizes = [10, 20, 30, 50]
const {page, limit, total, changePage, changeLimit} = inject('paginate')
</script>
<style scoped>
</style>

View File

@ -0,0 +1,21 @@
<template>
<div class="pt-5 pl-2">
<Add @click="show(showParams)" />
<slot name="operate"/>
</div>
</template>
<script lang="ts" setup>
defineProps({
show: {
type: Function,
required: true,
},
showParams: null
})
</script>
<style scoped>
</style>

View File

@ -0,0 +1,33 @@
<template>
<div class="w-full min-h-0 bg-white dark:bg-regal-dark pl-5 pt-5 pr-5 rounded-lg">
<el-form :inline="true">
<slot name="body" />
<el-form-item>
<el-button type="primary" @click="search()">
<Icon name="magnifying-glass" class="w-4 mr-1 -ml-1" />
搜索
</el-button>
<el-button @click="reset()">
<Icon name="arrow-path" class="w-4 mr-1 -ml-1" />
重置
</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script lang="ts" setup>
defineProps({
search: {
type: Function,
required: true,
},
reset: {
type: Function,
required: true,
},
})
</script>
<style scoped></style>

View File

@ -4,7 +4,7 @@ import { Code } from '/admin/enum/app'
import Message from '/admin/support/message'
import { FormInstance } from 'element-plus'
import { AxiosResponse } from 'axios'
import { isFunction } from'/admin/support/helper'
import { isFunction } from '/admin/support/helper'
// get table list
export function useCreate(path: string, id: string | number | null = null, _formData: object = {}) {
@ -17,23 +17,22 @@ export function useCreate(path: string, id: string | number | null = null, _form
const beforeCreate = ref()
// 更新前 hook
const beforeUpdate = ref()
// store
function store(path: string, id: string | number | null = null) {
loading.value = true
let promise: Promise<AxiosResponse> | null = null
if (id) {
if (isFunction(beforeUpdate.value)) {
beforeUpdate.value()
beforeUpdate.value()
}
promise = http.put(path + '/' + id, unref(formData))
} else {
console.log(isFunction(beforeCreate.value), beforeCreate.value)
if (isFunction(beforeCreate.value)) {
beforeCreate.value()
}
promise = http.post(path, unref(formData))
}

View File

@ -1,23 +1,22 @@
import http from '/admin/support/http'
import { Code } from '/admin/enum/app'
import Message from '/admin/support/message'
import { ref } from 'vue'
import { isFunction } from'/admin/support/helper'
import { ref, watch } from 'vue'
import { isFunction } from '/admin/support/helper'
export function useDestroy(confirm: string = '确认删除吗') {
const isDeleted = ref(false)
const beforeDestroy = ref()
// fetch list
function destroy(path: string, id: string | number) {
Message.confirm(confirm + '?', function () {
// before destroy
if (isFunction(beforeDestroy.value)) {
beforeDestroy.value()
}
http
.delete(path + '/' + id)
.then(r => {
@ -32,5 +31,14 @@ export function useDestroy(confirm: string = '确认删除吗') {
})
}
return { destroy, isDeleted }
const deleted = (reset: Function) => {
watch(isDeleted, function (value) {
if (value) {
isDeleted.value = false
reset()
}
})
}
return { destroy, deleted }
}

View File

@ -1,16 +1,18 @@
import http from '/admin/support/http'
import { ref, unref } from 'vue'
import {provide, ref, unref} from 'vue'
import { Code } from '/admin/enum/app'
import Message from '/admin/support/message'
const initLimit = 10
const initPage = 1;
const initTotal = 10;
// get table list
export function useGetList(path: string) {
const data = ref<object>()
const page = ref(initPage)
const limit = ref(initLimit)
const page = ref<number>(initPage)
const limit = ref<number>(initLimit)
const total = ref<number>(initTotal)
const query = ref<object>({
page: page.value,
limit: limit.value,
@ -28,6 +30,8 @@ export function useGetList(path: string) {
closeLoading()
if (r.data.code === Code.SUCCESS) {
data.value = r.data
// @ts-ignore
total.value = data.value?.total
} else {
Message.error(r.data.message)
}
@ -48,6 +52,8 @@ export function useGetList(path: string) {
// reset
function reset() {
resetPage()
query.value = Object.assign({ page: page.value, limit: limit.value })
getList()
@ -61,15 +67,24 @@ export function useGetList(path: string) {
search()
}
function resetPage() {
page.value = 1
}
// change limit
function changeLimit(l: number) {
limit.value = l
resetPage()
// @ts-ignore
query.value.page = 1
// @ts-ignore
query.value.limit = l
search()
}
return { data, query, search, reset, changePage, changeLimit, loading }
// provider for paginate component
provide('paginate', {page, limit, total, changePage, changeLimit})
return { data, query, search, reset, loading }
}

View File

@ -28,6 +28,7 @@
<script setup lang="ts">
import { useAppStore } from '/admin/stores/modules/app'
import Notification from './notification.vue'
import Search from './search.vue'
const store = useAppStore()
</script>

View File

@ -1,10 +1,10 @@
<template>
<div class="w-10 h-10 grid place-items-center rounded-full mt-3 hover:cursor-pointer">
<div class="flex flex-row w-96">
<Icon name="magnifying-glass" class="hidden sm:block" @click="serachMenuVisable = true" />
<Icon name="magnifying-glass" class="hidden sm:block" @click="searchMenuVisiable = true" />
<Teleport to="body">
<el-dialog v-model="serachMenuVisable" width="30%" draggable>
<el-dialog v-model="searchMenuVisiable" width="30%" draggable>
<el-cascader :filterable="true" :options="options" @change="toWhere" placeholder="请输入菜单名称" clearable class="w-full" :show-all-levels="false" />
</el-dialog>
</Teleport>
@ -18,7 +18,7 @@ import { Menu } from '/admin/types/Menu'
import router from '/admin/router'
import { ref, computed } from 'vue'
const serachMenuVisable = ref(false)
const searchMenuVisiable = ref(false)
const permissionStore = usePermissionsStore()
const options = computed(() => {
@ -29,7 +29,7 @@ const toWhere = (value: string[]) => {
router.push({ path: value[value.length - 1] })
}
serachMenuVisable.value = false
searchMenuVisiable.value = false
}
/**