Compare commits
7 Commits
Author | SHA1 | Date | |
---|---|---|---|
![]() |
af5e550ddb | ||
![]() |
265077229d | ||
![]() |
1c3f606165 | ||
![]() |
439d897038 | ||
![]() |
70a47e35ec | ||
![]() |
b36dea2b0a | ||
![]() |
63b622ab2a |
14
README.md
14
README.md
@@ -2,16 +2,6 @@
|
|||||||
`CatchAdmin`是一款基于[Laravel](https://laravel.com)和[Element Plus](https://element-plus.org)二次开发而成后台管理系统。`Laravel` 社区也有许多非常优秀的后台管理系统,例如 `Nova`, 官方出品,当然是收费的,免费的有基于 `Livewire` 的 `Filament`,还有不得不说的 `Laravel Admin`。`CatchAdmin` 还是采用传统的前后端分离策略,`Laravel` 框架仅仅作为 `Api` 输出。将管理系统模块之间的耦合降到了最低限度。每个模块之间都有独立的控制器,路由,模型,数据表。在开发上尽可能将模块之间的影响降到最低,降低了开发上的难度。基于 `CatchAdmin `可以开发 `CMS`,`CRM`,`OA` 等 等系统。也封装了很多实用的工具,提升开发体验。
|
`CatchAdmin`是一款基于[Laravel](https://laravel.com)和[Element Plus](https://element-plus.org)二次开发而成后台管理系统。`Laravel` 社区也有许多非常优秀的后台管理系统,例如 `Nova`, 官方出品,当然是收费的,免费的有基于 `Livewire` 的 `Filament`,还有不得不说的 `Laravel Admin`。`CatchAdmin` 还是采用传统的前后端分离策略,`Laravel` 框架仅仅作为 `Api` 输出。将管理系统模块之间的耦合降到了最低限度。每个模块之间都有独立的控制器,路由,模型,数据表。在开发上尽可能将模块之间的影响降到最低,降低了开发上的难度。基于 `CatchAdmin `可以开发 `CMS`,`CRM`,`OA` 等 等系统。也封装了很多实用的工具,提升开发体验。
|
||||||
|
|
||||||
[中文](./README.md)|[英文](./README-en.md)
|
[中文](./README.md)|[英文](./README-en.md)
|
||||||
## 前后端完全分离版本
|
|
||||||
请使用 `server` 分支, 如果是新项目,请一定使用该完全分离分支。我们将在不久后会将项目分离出来
|
|
||||||
|
|
||||||
## 其他版本
|
|
||||||
- [tp8 新版本](https://gitee.com/catchamin/catchadmin-tp)
|
|
||||||
- [webman 高性能版本](https://gitee.com/catchamin/catchadmin-webman)
|
|
||||||
|
|
||||||
## 新功能
|
|
||||||
- [动态表单](https://catchadmin.com/docs/3.0/front/catch-form)
|
|
||||||
- [动态表格](https://catchadmin.com/docs/3.0/front/catch-table)
|
|
||||||
|
|
||||||
## 专业版
|
## 专业版
|
||||||
[专业版本官方地址](https://license.catchadmin.com)
|
[专业版本官方地址](https://license.catchadmin.com)
|
||||||
@@ -22,9 +12,13 @@
|
|||||||
|
|
||||||
我深信,付费后台管理系统将为您带来更多的价值和便利,帮助您提升工作效率
|
我深信,付费后台管理系统将为您带来更多的价值和便利,帮助您提升工作效率
|
||||||
|
|
||||||
|
|
||||||
## ⚠️Thinkphp 用户注意
|
## ⚠️Thinkphp 用户注意
|
||||||
由于新版本使用 `Laravel` 开发,所以请使用 `thinkphp` 分支或者 tag2.6.2,thinkphp 版本已经非常稳定了。
|
由于新版本使用 `Laravel` 开发,所以请使用 `thinkphp` 分支或者 tag2.6.2,thinkphp 版本已经非常稳定了。
|
||||||
|
|
||||||
|
## 为什么是 Laravel
|
||||||
|
`V2` 版本使用`Thinkphp`,但从其社区来看,从我个人角度来看开发组的心思已经不在维护框架上,因为据观察,每一次小版本发布都会引发一些小问题,虽然不大,但给人一种不够稳定的感觉,所以思索再三,使用 `Laravel`。`Laravel` 社区非常繁荣,他们每周都会发布新版本,以及围绕`Laravel`构建的生态也非常完善,有 `Horizon` 队列管理工具, `Telescope` 调试工具,`Octane`(基于 `Swoole` 和 `RoadRunner` 提高性能)等等一系列的工具,而且都是免费的。
|
||||||
|
|
||||||
## 功能
|
## 功能
|
||||||
- [x] 用户管理 后台用户管理
|
- [x] 用户管理 后台用户管理
|
||||||
- [x] 部门管理 配置公司的部门结构,支持树形结构
|
- [x] 部门管理 配置公司的部门结构,支持树形结构
|
||||||
|
@@ -15,9 +15,9 @@
|
|||||||
"ext-pdo": "*",
|
"ext-pdo": "*",
|
||||||
"ext-zip": "*",
|
"ext-zip": "*",
|
||||||
"guzzlehttp/guzzle": "^7.8.1",
|
"guzzlehttp/guzzle": "^7.8.1",
|
||||||
"laravel/framework": "^11.0",
|
"laravel/framework": "^v11.0.3",
|
||||||
"laravel/tinker": "^v2.9.0",
|
"laravel/tinker": "^v2.9.0",
|
||||||
"catchadmin/core": "^0.3.4"
|
"catchadmin/core": "^0.3.2"
|
||||||
},
|
},
|
||||||
"require-dev": {
|
"require-dev": {
|
||||||
"fakerphp/faker": "^v1.23.1",
|
"fakerphp/faker": "^v1.23.1",
|
||||||
|
1
modules/Cms
Submodule
1
modules/Cms
Submodule
Submodule modules/Cms added at 36e9e66e38
@@ -6,8 +6,8 @@ use Catch\Base\CatchModel;
|
|||||||
use Catch\Enums\Status;
|
use Catch\Enums\Status;
|
||||||
use Exception;
|
use Exception;
|
||||||
use Illuminate\Database\Eloquent\Model;
|
use Illuminate\Database\Eloquent\Model;
|
||||||
|
use Illuminate\Support\Facades\DB;
|
||||||
use Modules\Develop\Support\Generate\Create\Schema;
|
use Modules\Develop\Support\Generate\Create\Schema;
|
||||||
use Illuminate\Support\Facades\Schema as SchemaFacade;
|
|
||||||
|
|
||||||
class Schemas extends CatchModel
|
class Schemas extends CatchModel
|
||||||
{
|
{
|
||||||
@@ -90,7 +90,9 @@ class Schemas extends CatchModel
|
|||||||
{
|
{
|
||||||
$schema = parent::firstBy($id);
|
$schema = parent::firstBy($id);
|
||||||
|
|
||||||
foreach (SchemaFacade::getColumns($schema->name) as $column) {
|
$columns = [];
|
||||||
|
|
||||||
|
foreach (\Illuminate\Support\Facades\Schema::getColumns($schema->name) as $column) {
|
||||||
$columns[] = [
|
$columns[] = [
|
||||||
'name' => $column['name'],
|
'name' => $column['name'],
|
||||||
'type' => $column['type_name'],
|
'type' => $column['type_name'],
|
||||||
|
@@ -1,287 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<CatchForm :schema="form" @onSubmit="submit"/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
const form = {
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
name: 'Grid_FhAuLh',
|
|
||||||
props: {
|
|
||||||
columns: 2
|
|
||||||
},
|
|
||||||
component: 'grid',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
name: 'Grid_qRvhpR',
|
|
||||||
props: {
|
|
||||||
columns: 1
|
|
||||||
},
|
|
||||||
component: 'grid',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
name: 'type',
|
|
||||||
props: {
|
|
||||||
clearable: true,
|
|
||||||
options: [
|
|
||||||
{
|
|
||||||
value: 1,
|
|
||||||
label: '目录'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 2,
|
|
||||||
label: '菜单'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 3,
|
|
||||||
label: '按钮'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
optionType: 'button'
|
|
||||||
},
|
|
||||||
label: '菜单类型',
|
|
||||||
component: 'radio',
|
|
||||||
class: 'mt-4',
|
|
||||||
initialValue: 1
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'permission_name',
|
|
||||||
props: {
|
|
||||||
clearable: true
|
|
||||||
},
|
|
||||||
label: '菜单名称',
|
|
||||||
component: 'input',
|
|
||||||
class: 'mt-4',
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'module',
|
|
||||||
props: {
|
|
||||||
clearable: true,
|
|
||||||
options: [
|
|
||||||
{
|
|
||||||
label: '权限管理',
|
|
||||||
value: 'permissions'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '动态表单',
|
|
||||||
value: 'test'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Testss',
|
|
||||||
value: 'tests'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
label: '所属模块',
|
|
||||||
component: 'select',
|
|
||||||
class: 'mt-4',
|
|
||||||
required: true,
|
|
||||||
hidden: '{{$values.type == 3}}'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'route',
|
|
||||||
props: {
|
|
||||||
clearable: true
|
|
||||||
},
|
|
||||||
label: '路由Path',
|
|
||||||
component: 'input',
|
|
||||||
class: 'mt-4',
|
|
||||||
required: true,
|
|
||||||
hidden: '{{$values.type == 3}}'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'redirect',
|
|
||||||
props: {
|
|
||||||
clearable: true
|
|
||||||
},
|
|
||||||
label: '重定向',
|
|
||||||
component: 'input',
|
|
||||||
class: 'mt-4',
|
|
||||||
hidden: '{{$values.type == 3}}'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'sort',
|
|
||||||
props: {
|
|
||||||
clearable: true,
|
|
||||||
min: 1,
|
|
||||||
max: 10000
|
|
||||||
},
|
|
||||||
label: '排序',
|
|
||||||
component: 'input_number',
|
|
||||||
class: 'mt-4',
|
|
||||||
initialValue: 1
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Grid',
|
|
||||||
props: {
|
|
||||||
columns: 1
|
|
||||||
},
|
|
||||||
component: 'grid',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
name: 'parent_id',
|
|
||||||
props: {
|
|
||||||
clearable: true,
|
|
||||||
options: [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
parent_id: 0,
|
|
||||||
permission_name: '权限管理',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
parent_id: 1,
|
|
||||||
permission_name: '角色管理'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 8,
|
|
||||||
parent_id: 1,
|
|
||||||
permission_name: '菜单管理'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 15,
|
|
||||||
parent_id: 1,
|
|
||||||
permission_name: '岗位管理'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 22,
|
|
||||||
parent_id: 1,
|
|
||||||
permission_name: '部门管理'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 29,
|
|
||||||
parent_id: 1,
|
|
||||||
permission_name: '创建菜单'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 30,
|
|
||||||
parent_id: 0,
|
|
||||||
permission_name: '测试',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
id: 31,
|
|
||||||
parent_id: 30,
|
|
||||||
permission_name: '测试看看'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 37,
|
|
||||||
parent_id: 30,
|
|
||||||
permission_name: '创建'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
label: 'permission_name',
|
|
||||||
valueKey: 'id',
|
|
||||||
value: 'id',
|
|
||||||
'show-all-levels': false,
|
|
||||||
checkStrictly: true,
|
|
||||||
class: 'w-full'
|
|
||||||
},
|
|
||||||
label: '上级菜单',
|
|
||||||
component: 'cascader',
|
|
||||||
class: 'mt-4'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'permission_mark',
|
|
||||||
props: {
|
|
||||||
clearable: true,
|
|
||||||
api: 'options/controllers',
|
|
||||||
query: {
|
|
||||||
module: '{{ $values.module }}'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
label: '权限标识',
|
|
||||||
component: '{{$values.type == 3 ? "input" : "select"}}',
|
|
||||||
class: 'mt-4',
|
|
||||||
hidden: '{{$values.type == 1}}',
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'icon',
|
|
||||||
props: {
|
|
||||||
clearable: true
|
|
||||||
},
|
|
||||||
label: '图标',
|
|
||||||
component: 'icon_select',
|
|
||||||
class: 'mt-4',
|
|
||||||
hidden: '{{$values.type == 3}}'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'component',
|
|
||||||
props: {
|
|
||||||
clearable: true,
|
|
||||||
"allow-create": true
|
|
||||||
},
|
|
||||||
label: '所属组件',
|
|
||||||
component: 'select',
|
|
||||||
class: 'mt-4',
|
|
||||||
hidden: '{{$values.type == 3}}'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'hidden',
|
|
||||||
props: {
|
|
||||||
options: [
|
|
||||||
{
|
|
||||||
value: 1,
|
|
||||||
label: '是'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 2,
|
|
||||||
label: '否'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
label: '是否隐藏',
|
|
||||||
component: 'radio',
|
|
||||||
class: 'mt-4',
|
|
||||||
initialValue: 2,
|
|
||||||
hidden: '{{$values.type == 3}}'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'keepalive',
|
|
||||||
props: {
|
|
||||||
options: [
|
|
||||||
{
|
|
||||||
value: 1,
|
|
||||||
label: '是'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 2,
|
|
||||||
label: '否'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
label: '是否缓存',
|
|
||||||
component: 'radio',
|
|
||||||
class: 'mt-4',
|
|
||||||
initialValue: 2,
|
|
||||||
hidden: '{{$values.type == 3}}'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
// @ts-nocheck
|
|
||||||
/**import { useCreate } from '@/form/composables/useCreate'
|
|
||||||
const props = defineProps({
|
|
||||||
primary: [String, Number],
|
|
||||||
api: String,
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
const { form } = useCreate(props.api, props.primary)
|
|
||||||
*/
|
|
||||||
const submit = (formData) => {
|
|
||||||
console.log(formData)
|
|
||||||
}
|
|
||||||
</script>
|
|
@@ -1,53 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<catch-table
|
|
||||||
:columns="[
|
|
||||||
{
|
|
||||||
label: '角色名称',
|
|
||||||
prop: 'role_name'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '角色标识',
|
|
||||||
prop: 'description'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '角色描述',
|
|
||||||
prop: 'role_name'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '创建时间',
|
|
||||||
prop: 'created_at'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'operate',
|
|
||||||
label: '操作',
|
|
||||||
width: 200
|
|
||||||
}
|
|
||||||
]"
|
|
||||||
:api="api"
|
|
||||||
:search-form="[
|
|
||||||
{
|
|
||||||
type: 'input',
|
|
||||||
label: '角色名称',
|
|
||||||
name: 'role_name'
|
|
||||||
}
|
|
||||||
]"
|
|
||||||
row-key="id"
|
|
||||||
:pagination="false"
|
|
||||||
>
|
|
||||||
<template #dialog="row">
|
|
||||||
<Create :primary="row?.id" :api="api"/>
|
|
||||||
</template>
|
|
||||||
</catch-table>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
// @ts-nocheck
|
|
||||||
// import Create from './form/create.vue'
|
|
||||||
import Create from './create.vue'
|
|
||||||
|
|
||||||
const api = 'permissions/roles'
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
@@ -8,7 +8,7 @@
|
|||||||
{ label: 'ZIP 安装', value: 2 },
|
{ label: 'ZIP 安装', value: 2 },
|
||||||
]"
|
]"
|
||||||
:key="item.value"
|
:key="item.value"
|
||||||
:value="item.value"
|
:label="item.value"
|
||||||
name="type"
|
name="type"
|
||||||
>{{ item.label }}
|
>{{ item.label }}
|
||||||
</el-radio-button>
|
</el-radio-button>
|
||||||
|
@@ -25,12 +25,6 @@ const router: RouteRecordRaw[] = [
|
|||||||
meta: { title: '代码生成', hidden: true, active_menu: '/develop/schemas' },
|
meta: { title: '代码生成', hidden: true, active_menu: '/develop/schemas' },
|
||||||
component: () => import('./generate/index.vue'),
|
component: () => import('./generate/index.vue'),
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: 'dymaic',
|
|
||||||
name: 'dymaic',
|
|
||||||
meta: { title: '动态表格' },
|
|
||||||
component: () => import('./dymaic/index.vue'),
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
@@ -1,29 +1,27 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<VueDraggable v-model="structures" target=".el-table__body tbody" animation="150" @end="onEnd">
|
<el-table :data="structures" class="draggable">
|
||||||
<el-table :data="structures" class="draggable" :lazy="false">
|
<el-table-column prop="field" :label="$t('generate.schema.structure.field_name.name')" />
|
||||||
<el-table-column prop="field" :label="$t('generate.schema.structure.field_name.name')" />
|
<el-table-column prop="type" :label="$t('generate.schema.structure.type.name')">
|
||||||
<el-table-column prop="type" :label="$t('generate.schema.structure.type.name')">
|
<template #default="scope">
|
||||||
<template #default="scope">
|
<el-tag type="success">{{ scope.row.type }}</el-tag>
|
||||||
<el-tag type="success">{{ scope.row.type }}</el-tag>
|
</template>
|
||||||
</template>
|
</el-table-column>
|
||||||
</el-table-column>
|
<el-table-column prop="nullable" :label="$t('generate.schema.structure.nullable')" width="90px">
|
||||||
<el-table-column prop="nullable" :label="$t('generate.schema.structure.nullable')" width="90px">
|
<template #default="scope">
|
||||||
<template #default="scope">
|
<el-tag v-if="scope.row.nullable">{{ $t('system.yes') }}</el-tag>
|
||||||
<el-tag v-if="scope.row.nullable">{{ $t('system.yes') }}</el-tag>
|
<el-tag v-else type="info">{{ $t('system.no') }}</el-tag>
|
||||||
<el-tag v-else type="info">{{ $t('system.no') }}</el-tag>
|
</template>
|
||||||
</template>
|
</el-table-column>
|
||||||
</el-table-column>
|
<el-table-column prop="default" :label="$t('generate.schema.structure.default')" />
|
||||||
<el-table-column prop="default" :label="$t('generate.schema.structure.default')" />
|
<!--<el-table-column prop="comment" label="注释" />-->
|
||||||
<!--<el-table-column prop="comment" label="注释" />-->
|
<el-table-column prop="id" :label="$t('generate.schema.structure.operate')" width="120px">
|
||||||
<el-table-column prop="id" :label="$t('generate.schema.structure.operate')" width="120px">
|
<template #default="scope">
|
||||||
<template #default="scope">
|
<el-button type="primary" :icon="Edit" @click="updateField(scope.row.id)" size="small" />
|
||||||
<el-button type="primary" :icon="Edit" @click="updateField(scope.row.id)" size="small" />
|
<el-button type="danger" :icon="Delete" @click="deleteField(scope.row.id)" size="small" />
|
||||||
<el-button type="danger" :icon="Delete" @click="deleteField(scope.row.id)" size="small" />
|
</template>
|
||||||
</template>
|
</el-table-column>
|
||||||
</el-table-column>
|
</el-table>
|
||||||
</el-table>
|
|
||||||
</VueDraggable>
|
|
||||||
|
|
||||||
<div class="flex justify-end mt-4">
|
<div class="flex justify-end mt-4">
|
||||||
<el-button type="success" :icon="Plus" @click="addField">{{ $t('system.add') }}</el-button>
|
<el-button type="success" :icon="Plus" @click="addField">{{ $t('system.add') }}</el-button>
|
||||||
@@ -90,21 +88,21 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { Ref, ref } from 'vue'
|
import { computed, Ref, ref } from 'vue'
|
||||||
import { useSchemaStore, Structure } from '../store'
|
import { useSchemaStore, Structure } from '../store'
|
||||||
import { Delete, Plus, Edit } from '@element-plus/icons-vue'
|
import { Delete, Plus, Edit } from '@element-plus/icons-vue'
|
||||||
import type { FormInstance } from 'element-plus'
|
import type { FormInstance } from 'element-plus'
|
||||||
import Message from '/admin/support/message'
|
import Message from '/admin/support/message'
|
||||||
import http from '/admin/support/http'
|
import http from '/admin/support/http'
|
||||||
import { Code } from '/admin/enum/app'
|
import { Code } from '/admin/enum/app'
|
||||||
import { VueDraggable } from 'vue-draggable-plus'
|
|
||||||
|
|
||||||
const schemaStore = useSchemaStore()
|
const schemaStore = useSchemaStore()
|
||||||
const emits = defineEmits(['prev', 'next'])
|
const emits = defineEmits(['prev', 'next'])
|
||||||
const visible = ref(false)
|
const visible = ref(false)
|
||||||
|
|
||||||
// 初始化
|
const structures = computed(() => {
|
||||||
const structures = ref(schemaStore.getStructures)
|
return schemaStore.getStructures
|
||||||
|
})
|
||||||
|
|
||||||
const structure: Ref<Structure> = ref(schemaStore.initStructure())
|
const structure: Ref<Structure> = ref(schemaStore.initStructure())
|
||||||
// structure
|
// structure
|
||||||
@@ -119,8 +117,6 @@ const updateField = (id: number) => {
|
|||||||
structure.value = s
|
structure.value = s
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
schemaStore.setStructures(structures.value)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const form = ref<FormInstance>()
|
const form = ref<FormInstance>()
|
||||||
@@ -138,10 +134,7 @@ const submitStructure = (formEl: FormInstance | undefined) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const deleteField = (id: number) => {
|
const deleteField = (id: number) => {
|
||||||
structures.value = structures.value.filter((s: Structure) => {
|
schemaStore.filterStructures(id)
|
||||||
return !(s.id === id)
|
|
||||||
})
|
|
||||||
schemaStore.setStructures(structures.value)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const next = () => {
|
const next = () => {
|
||||||
@@ -156,10 +149,7 @@ const next = () => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 调整数据结构
|
|
||||||
const onEnd = () => {
|
|
||||||
schemaStore.setStructures(structures.value)
|
|
||||||
}
|
|
||||||
const types: string[] = [
|
const types: string[] = [
|
||||||
'id',
|
'id',
|
||||||
'smallIncrements',
|
'smallIncrements',
|
||||||
@@ -211,6 +201,7 @@ const types: string[] = [
|
|||||||
'tinyIncrements',
|
'tinyIncrements',
|
||||||
'tinyInteger',
|
'tinyInteger',
|
||||||
'tinyText',
|
'tinyText',
|
||||||
|
'unsignedDecimal',
|
||||||
'uuid',
|
'uuid',
|
||||||
'year',
|
'year',
|
||||||
]
|
]
|
||||||
|
@@ -28,13 +28,11 @@ class PermissionsController extends Controller
|
|||||||
public function index(Request $request): mixed
|
public function index(Request $request): mixed
|
||||||
{
|
{
|
||||||
if ($request->get('from') == 'role') {
|
if ($request->get('from') == 'role') {
|
||||||
return $this->model->setBeforeGetList(function ($query){
|
return $this->model->getList();
|
||||||
return $query->orderByDesc('sort');
|
|
||||||
})->getList();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return $this->model->setBeforeGetList(function ($query) {
|
return $this->model->setBeforeGetList(function ($query) {
|
||||||
return $query->with('actions')->whereIn('type', [MenuType::Top->value(), MenuType::Menu->value()])->orderByDesc('sort');
|
return $query->with('actions')->whereIn('type', [MenuType::Top->value(), MenuType::Menu->value()]);
|
||||||
})->getList();
|
})->getList();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@@ -8,7 +8,7 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="状态" prop="status">
|
<el-form-item label="状态" prop="status">
|
||||||
<el-radio-group v-model="formData.status">
|
<el-radio-group v-model="formData.status">
|
||||||
<el-radio v-for="item in options" :key="item.value" :value="item.value" name="status">{{ item.label }}</el-radio>
|
<el-radio v-for="item in options" :key="item.value" :label="item.value" name="status">{{ item.label }}</el-radio>
|
||||||
</el-radio-group>
|
</el-radio-group>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="排序" prop="sort">
|
<el-form-item label="排序" prop="sort">
|
||||||
@@ -30,7 +30,7 @@ import { useShow } from '/admin/composables/curd/useShow'
|
|||||||
import { onMounted } from 'vue'
|
import { onMounted } from 'vue'
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
primary: [Number, String],
|
primary: String | Number,
|
||||||
api: String,
|
api: String,
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@@ -11,7 +11,7 @@
|
|||||||
{ label: '按钮', value: 3 },
|
{ label: '按钮', value: 3 },
|
||||||
]"
|
]"
|
||||||
:key="item.value"
|
:key="item.value"
|
||||||
:value="item.value"
|
:label="item.value"
|
||||||
name="type"
|
name="type"
|
||||||
>{{ item.label }}
|
>{{ item.label }}
|
||||||
</el-radio-button>
|
</el-radio-button>
|
||||||
@@ -63,7 +63,7 @@
|
|||||||
{ label: '隐藏', value: 2 },
|
{ label: '隐藏', value: 2 },
|
||||||
]"
|
]"
|
||||||
:key="item.value"
|
:key="item.value"
|
||||||
:value="item.value"
|
:label="item.value"
|
||||||
name="hidden"
|
name="hidden"
|
||||||
>{{ item.label }}</el-radio
|
>{{ item.label }}</el-radio
|
||||||
>
|
>
|
||||||
@@ -77,7 +77,7 @@
|
|||||||
{ label: '禁用', value: 2 },
|
{ label: '禁用', value: 2 },
|
||||||
]"
|
]"
|
||||||
:key="item.value"
|
:key="item.value"
|
||||||
:value="item.value"
|
:label="item.value"
|
||||||
name="keepalive"
|
name="keepalive"
|
||||||
>{{ item.label }}
|
>{{ item.label }}
|
||||||
</el-radio>
|
</el-radio>
|
||||||
@@ -110,7 +110,7 @@ import http from '/admin/support/http'
|
|||||||
import { MenuType } from '/admin/enum/app'
|
import { MenuType } from '/admin/enum/app'
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
primary: [String,Number],
|
primary: String | Number,
|
||||||
api: String,
|
api: String,
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@@ -18,9 +18,9 @@
|
|||||||
<el-tag v-for="action in scope.row.actions" class="cursor-pointer min-w-fit" @click="open(action.id)" closable @close="destroy(api, action.id)">{{ action.permission_name }}</el-tag>
|
<el-tag v-for="action in scope.row.actions" class="cursor-pointer min-w-fit" @click="open(action.id)" closable @close="destroy(api, action.id)">{{ action.permission_name }}</el-tag>
|
||||||
</div>
|
</div>
|
||||||
<div v-else>
|
<div v-else>
|
||||||
<el-popconfirm v-if="scope.row.type === MenuType.PAGE_TYPE" confirm-button-text="确认" title="添加基础actions" @confirm="actionGenerate(scope.row.id)" placement="top">
|
<el-popconfirm confirm-button-text="确认" title="添加基础actions" @confirm="actionGenerate(scope.row.id)" placement="top">
|
||||||
<template #reference>
|
<template #reference>
|
||||||
<el-tag class="cursor-pointer w-8">
|
<el-tag class="cursor-pointer w-8" v-if="scope.row.type === MenuType.PAGE_TYPE">
|
||||||
<Icon name="cog-6-tooth" class="animate-spin w-5 h-5" v-if="generateId === scope.row.id" />
|
<Icon name="cog-6-tooth" class="animate-spin w-5 h-5" v-if="generateId === scope.row.id" />
|
||||||
<Icon name="plus" className="w-4 h-4" v-else />
|
<Icon name="plus" className="w-4 h-4" v-else />
|
||||||
</el-tag>
|
</el-tag>
|
||||||
|
@@ -6,6 +6,7 @@ use Catch\CatchAdmin;
|
|||||||
use Catch\Traits\DB\BaseOperate;
|
use Catch\Traits\DB\BaseOperate;
|
||||||
use Catch\Traits\DB\ScopeTrait;
|
use Catch\Traits\DB\ScopeTrait;
|
||||||
use Catch\Traits\DB\Trans;
|
use Catch\Traits\DB\Trans;
|
||||||
|
use Catch\Traits\DB\WithAttributes;
|
||||||
use Illuminate\Contracts\Http\Kernel;
|
use Illuminate\Contracts\Http\Kernel;
|
||||||
use Illuminate\Database\Eloquent\Casts\Attribute;
|
use Illuminate\Database\Eloquent\Casts\Attribute;
|
||||||
use Illuminate\Database\Eloquent\Model;
|
use Illuminate\Database\Eloquent\Model;
|
||||||
@@ -16,7 +17,7 @@ use Symfony\Component\HttpFoundation\Response;
|
|||||||
|
|
||||||
class LogOperate extends Model
|
class LogOperate extends Model
|
||||||
{
|
{
|
||||||
use BaseOperate, Trans, ScopeTrait;
|
use WithAttributes,BaseOperate, Trans, ScopeTrait;
|
||||||
|
|
||||||
protected $table = 'log_operate';
|
protected $table = 'log_operate';
|
||||||
|
|
||||||
|
@@ -59,7 +59,7 @@ trait UserRelations
|
|||||||
/* @var Permissions $permissionsModel */
|
/* @var Permissions $permissionsModel */
|
||||||
$permissionsModel = app($this->getPermissionsModel());
|
$permissionsModel = app($this->getPermissionsModel());
|
||||||
if ($this->isSuperAdmin()) {
|
if ($this->isSuperAdmin()) {
|
||||||
$permissions = $permissionsModel->orderByDesc('sort')->get();
|
$permissions = $permissionsModel->get();
|
||||||
} else {
|
} else {
|
||||||
$permissionIds = Collection::make();
|
$permissionIds = Collection::make();
|
||||||
$this->roles()->with('permissions')->get()
|
$this->roles()->with('permissions')->get()
|
||||||
@@ -67,7 +67,7 @@ trait UserRelations
|
|||||||
$permissionIds = $permissionIds->concat($role->permissions?->pluck('id'));
|
$permissionIds = $permissionIds->concat($role->permissions?->pluck('id'));
|
||||||
});
|
});
|
||||||
|
|
||||||
$permissions = $permissionsModel->whereIn('id', $permissionIds->unique())->orderByDesc('sort')->get();
|
$permissions = $permissionsModel->whereIn('id', $permissionIds->unique())->get();
|
||||||
}
|
}
|
||||||
|
|
||||||
$this->setAttribute('permissions', $permissions->each(fn ($permission) => $permission->setAttribute('hidden', $permission->isHidden())));
|
$this->setAttribute('permissions', $permissions->each(fn ($permission) => $permission->setAttribute('hidden', $permission->isHidden())));
|
||||||
|
@@ -2,8 +2,8 @@
|
|||||||
<div class="table-default">
|
<div class="table-default">
|
||||||
<div class="w-full flex justify-end">
|
<div class="w-full flex justify-end">
|
||||||
<el-radio-group v-model="query.scope" size="small" @change="search">
|
<el-radio-group v-model="query.scope" size="small" @change="search">
|
||||||
<el-radio-button value="self">只看自己</el-radio-button>
|
<el-radio-button label="self">只看自己</el-radio-button>
|
||||||
<el-radio-button value="all">全部</el-radio-button>
|
<el-radio-button label="all">全部</el-radio-button>
|
||||||
</el-radio-group>
|
</el-radio-group>
|
||||||
</div>
|
</div>
|
||||||
<el-table :data="tableData" class="mt-3" v-loading="loading">
|
<el-table :data="tableData" class="mt-3" v-loading="loading">
|
||||||
|
51
package.json
51
package.json
@@ -8,49 +8,48 @@
|
|||||||
"preview": "vite preview"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@heroicons/vue": "^2.1.3",
|
"@heroicons/vue": "^2.1.1",
|
||||||
"@tinymce/tinymce-vue": "^5.1.1",
|
"@tinymce/tinymce-vue": "^5.1.1",
|
||||||
"@vueuse/core": "^10.9.0",
|
"@vueuse/core": "^10.1.2",
|
||||||
"element-plus": "^2.6.3",
|
"element-plus": "^2.5.3",
|
||||||
"nprogress": "^0.2.0",
|
"nprogress": "^0.2.0",
|
||||||
"pinia": "^2.1.7",
|
"pinia": "^2.1.7",
|
||||||
"terser": "^5.29.2",
|
"terser": "^5.16.6",
|
||||||
"vue": "^3.4.21",
|
"vue": "^3.4.15",
|
||||||
"vue-draggable-plus": "^0.4.0",
|
|
||||||
"vue-i18n": "9",
|
"vue-i18n": "9",
|
||||||
"vue-router": "4.3.0",
|
"vue-router": "4.2.5",
|
||||||
"vuedraggable": "^2.24.3"
|
"vuedraggable": "^2.24.3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@iconify-json/logos": "^1.1.42",
|
"@iconify-json/logos": "^1.1.31",
|
||||||
"@rollup/plugin-alias": "^5.1.0",
|
"@rollup/plugin-alias": "^5.0.0",
|
||||||
"@types/mockjs": "^1.0.7",
|
"@types/mockjs": "^1.0.7",
|
||||||
"@types/node": "^20.11.30",
|
"@types/node": "^20.2.3",
|
||||||
"@types/nprogress": "^0.2.0",
|
"@types/nprogress": "^0.2.0",
|
||||||
"@typescript-eslint/eslint-plugin": "^6.21.0",
|
"@typescript-eslint/eslint-plugin": "^6.19.1",
|
||||||
"@typescript-eslint/parser": "^6.21.0",
|
"@typescript-eslint/parser": "^6.19.1",
|
||||||
"@vitejs/plugin-vue": "^5.0.4",
|
"@vitejs/plugin-vue": "^5.0.3",
|
||||||
"@vitejs/plugin-vue-jsx": "^3.1.0",
|
"@vitejs/plugin-vue-jsx": "^3.1.0",
|
||||||
"autoprefixer": "^10.4.19",
|
"autoprefixer": "^10.4.17",
|
||||||
"axios": "^1.6.8",
|
"axios": "^1.5.1",
|
||||||
"eslint": "^8.57.0",
|
"eslint": "^8.41.0",
|
||||||
"eslint-config-standard": "^17.0.0",
|
"eslint-config-standard": "^17.0.0",
|
||||||
"eslint-plugin-import": "^2.27.5",
|
"eslint-plugin-import": "^2.27.5",
|
||||||
"eslint-plugin-n": "^16.0.0",
|
"eslint-plugin-n": "^16.0.0",
|
||||||
"eslint-plugin-promise": "^6.1.1",
|
"eslint-plugin-promise": "^6.1.1",
|
||||||
"eslint-plugin-vue": "^9.23.0",
|
"eslint-plugin-vue": "^9.19.2",
|
||||||
"mockjs": "^1.1.0",
|
"mockjs": "^1.1.0",
|
||||||
"postcss": "^8.4.38",
|
"postcss": "^8.4.33",
|
||||||
"prettier": "3.2.5",
|
"prettier": "2.8.8",
|
||||||
"sass": "^1.72.0",
|
"sass": "^1.62.1",
|
||||||
"tailwindcss": "^3.4.1",
|
"tailwindcss": "^3.4.1",
|
||||||
"typescript": "^5.4.3",
|
"typescript": "^5.1.6",
|
||||||
"unplugin-auto-import": "^0.17.5",
|
"unplugin-auto-import": "^0.17.3",
|
||||||
"unplugin-icons": "^0.18.5",
|
"unplugin-icons": "^0.18.2",
|
||||||
"unplugin-vue-components": "^0.26.0",
|
"unplugin-vue-components": "^0.25.2",
|
||||||
"vite": "^5.2.3",
|
"vite": "^5.0.12",
|
||||||
"vite-plugin-html": "^3.2.0",
|
"vite-plugin-html": "^3.2.0",
|
||||||
"vite-plugin-mock": "^3.0.0",
|
"vite-plugin-mock": "^3.0.0",
|
||||||
"vue-tsc": "^2.0.7"
|
"vue-tsc": "^1.6.5"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex justify-end pt-5">
|
<div class="flex justify-end pt-5">
|
||||||
<el-pagination background :layout="layout" :current-page="page" :page-size="limit" @current-change="changePage" @size-change="changeLimit" :total="parseInt(total)" :page-sizes="pageSizes" />
|
<el-pagination background :layout="layout" :current-page="page" :page-size="limit" @current-change="changePage" @size-change="changeLimit" :total="total" :page-sizes="pageSizes" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -14,10 +14,12 @@ const pageSizes = [10, 20, 30, 50]
|
|||||||
interface paginate {
|
interface paginate {
|
||||||
page: number
|
page: number
|
||||||
limit: number
|
limit: number
|
||||||
total: string
|
total: number
|
||||||
changePage: number
|
changePage: number
|
||||||
changeLimit: number
|
changeLimit: number
|
||||||
}
|
}
|
||||||
|
|
||||||
const { page, limit, total, changePage, changeLimit } = inject('paginate') as paginate
|
const { page, limit, total, changePage, changeLimit } = inject('paginate') as paginate
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
|
@@ -30,8 +30,4 @@ defineProps({
|
|||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped></style>
|
||||||
:deep(.el-form-item) {
|
|
||||||
min-width: 240px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
@@ -1,158 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-form :class="schema.class" :model="formValues" :label-width="schema.labelWidth || 100" :label-position="schema.labelAlign || 'right'" :size="schema.size || 'default'" :disabled="schema.disabled" :hide-required-asterisk="schema.hideRequiredAsterisk" ref="formRef" v-bind="$attrs">
|
|
||||||
<FormRender :formItems="formItems" />
|
|
||||||
<slot name="body"/>
|
|
||||||
<FormItem v-bind="footer" />
|
|
||||||
<slot name="footer"/>
|
|
||||||
</el-form>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref, computed, reactive, provide, watch, onMounted } from 'vue'
|
|
||||||
import type { FormInstance } from 'element-plus'
|
|
||||||
import { handleLinkages, deepParse, setDataByPath, getDataByPath } from '/admin/components/catchForm/support'
|
|
||||||
import FormRender from './FormRender.vue'
|
|
||||||
import FormItem from './FormItem.vue'
|
|
||||||
import { cloneDeep, merge } from 'lodash'
|
|
||||||
import type { anyObject, schemaType } from '/admin/components/catchForm/config/commonType'
|
|
||||||
import { $schema, $formValues, $selectData, $formEvents, $initialValues } from '/admin/components/catchForm/config/symbol'
|
|
||||||
|
|
||||||
const props = defineProps<
|
|
||||||
Readonly<{
|
|
||||||
schema: schemaType
|
|
||||||
schemaContext?: anyObject
|
|
||||||
}>
|
|
||||||
>()
|
|
||||||
|
|
||||||
const modelValue = defineModel()
|
|
||||||
const emit = defineEmits<{
|
|
||||||
onChange: [values: anyObject]
|
|
||||||
onSubmit: [values: anyObject]
|
|
||||||
onSubmitFailed: [e: anyObject]
|
|
||||||
}>()
|
|
||||||
const formRef = ref<FormInstance>()
|
|
||||||
const selectData = reactive({})
|
|
||||||
const initialValues = reactive({})
|
|
||||||
const stateFormValues = ref({})
|
|
||||||
|
|
||||||
const formValues = computed({
|
|
||||||
get() {
|
|
||||||
return modelValue.value || stateFormValues.value
|
|
||||||
},
|
|
||||||
set(values) {
|
|
||||||
modelValue.value = values
|
|
||||||
stateFormValues.value = values
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const context = computed(() => ({
|
|
||||||
$values: formValues.value,
|
|
||||||
$selectData: selectData,
|
|
||||||
$initialValues: initialValues,
|
|
||||||
...props.schemaContext
|
|
||||||
}))
|
|
||||||
|
|
||||||
const formItems = computed(() => deepParse(props.schema.items || [], context.value))
|
|
||||||
|
|
||||||
// 保持schema的响应 传递给后代使用
|
|
||||||
const currentSchema = computed(() => props.schema)
|
|
||||||
|
|
||||||
// 表单底部
|
|
||||||
const defaultFooter = {
|
|
||||||
name: 'FormFooter',
|
|
||||||
props: {
|
|
||||||
class: 'flex justify-end mt-4'
|
|
||||||
},
|
|
||||||
component: 'inline',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
name: 'divider_xAlcpi',
|
|
||||||
props: {
|
|
||||||
name: '提交',
|
|
||||||
clickEvent: 'submitForm'
|
|
||||||
},
|
|
||||||
component: 'button',
|
|
||||||
style: 'margin-right:10px'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'divider_UktsYm',
|
|
||||||
props: {
|
|
||||||
name: '重置',
|
|
||||||
clickEvent: 'resetForm',
|
|
||||||
type: 'default'
|
|
||||||
},
|
|
||||||
component: 'button'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
const footer = computed(() => props.schema.footer || defaultFooter)
|
|
||||||
const validate = () => formRef.value?.validate()
|
|
||||||
|
|
||||||
const submit = async () => {
|
|
||||||
try {
|
|
||||||
await validate()
|
|
||||||
emit('onSubmit', formValues.value)
|
|
||||||
return formValues.value
|
|
||||||
} catch (e: any) {
|
|
||||||
emit('onSubmitFailed', e)
|
|
||||||
return Promise.reject(e)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const getFormValues = () => ({ ...formValues.value })
|
|
||||||
const setFormValues = (values: anyObject) => {
|
|
||||||
formValues.value = { ...formValues.value, ...values }
|
|
||||||
}
|
|
||||||
|
|
||||||
const resetFields = (names: string[]) => {
|
|
||||||
if (names) {
|
|
||||||
let temp = cloneDeep(formValues.value)
|
|
||||||
|
|
||||||
names.forEach(name => {
|
|
||||||
temp = setDataByPath(temp, name, getDataByPath(initialValues, name))
|
|
||||||
})
|
|
||||||
|
|
||||||
formValues.value = temp
|
|
||||||
|
|
||||||
} else {
|
|
||||||
formValues.value = initialValues
|
|
||||||
}
|
|
||||||
|
|
||||||
clearValidate();
|
|
||||||
}
|
|
||||||
// 这里做一个魔法操作,分栏操作,导致第二栏没有办法初始化,所以 resetFields 下
|
|
||||||
// 只有创建的时候进行该操作
|
|
||||||
onMounted(() => {
|
|
||||||
resetFields([]);
|
|
||||||
})
|
|
||||||
// const reset validates
|
|
||||||
const clearValidate = () => {
|
|
||||||
formRef.value?.clearValidate()
|
|
||||||
}
|
|
||||||
watch(
|
|
||||||
formValues,
|
|
||||||
(newVal, oldVal) => {
|
|
||||||
emit('onChange', newVal)
|
|
||||||
handleLinkages({ newVal, oldVal, formValues, formItems: formItems.value })
|
|
||||||
},
|
|
||||||
{ deep: true }
|
|
||||||
)
|
|
||||||
|
|
||||||
watch(initialValues, newVal => {
|
|
||||||
formValues.value = merge(formValues.value, newVal)
|
|
||||||
})
|
|
||||||
|
|
||||||
provide($schema, currentSchema)
|
|
||||||
provide($formValues, {
|
|
||||||
formValues,
|
|
||||||
updateFormValues: (values: anyObject) => (formValues.value = values)
|
|
||||||
})
|
|
||||||
provide($selectData, selectData)
|
|
||||||
provide($formEvents, { submit, validate, getFormValues, setFormValues, resetFields })
|
|
||||||
provide($initialValues, {
|
|
||||||
initialValues,
|
|
||||||
updateInitialValues: (values: anyObject) => Object.assign(initialValues, values)
|
|
||||||
})
|
|
||||||
|
|
||||||
defineExpose({ submit, validate, getFormValues, setFormValues, resetFields, context })
|
|
||||||
</script>
|
|
@@ -1,30 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div v-if="disabled" v-bind="$attrs" class="disabled-wrapper">
|
|
||||||
<div class="mask"></div>
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<template v-else> <slot /> </template>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
defineProps({
|
|
||||||
disabled: Boolean
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.disabled-wrapper {
|
|
||||||
background-color: var(--el-disabled-bg-color);
|
|
||||||
position: relative;
|
|
||||||
.mask {
|
|
||||||
cursor: not-allowed;
|
|
||||||
position: absolute;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
@@ -1,193 +0,0 @@
|
|||||||
<!-- eslint-disable vue/no-multiple-template-root -->
|
|
||||||
<template>
|
|
||||||
<template v-if="!hidden">
|
|
||||||
<div v-if="config.type === 'layout'" :style="itemStyle" :class="thisProps.class">
|
|
||||||
<component :is="config.component" :name="name" :props="props" :children="children" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-else-if="config.type === 'assist'" :style="itemStyle" :class="thisProps.class">
|
|
||||||
<component :is="config.component" v-bind="props" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<el-form-item v-else id="form-item" :style="itemStyle" :label="label" :key="name" :prop="name" :rules="computeRules" :class="thisProps.class">
|
|
||||||
<!--<template #label v-if="!hideLabel">
|
|
||||||
<div class="form-item-label">
|
|
||||||
<div >{{ label }}</div>
|
|
||||||
<div class="ico" v-if="help">
|
|
||||||
<el-tooltip class="box-item" effect="dark" :content="help">
|
|
||||||
<div><icon-render name="help" /></div>
|
|
||||||
</el-tooltip>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>-->
|
|
||||||
<component :is="config.component" :class="formItemProps.class" :disabled="schema.disabled" :size="schema.size" v-bind="formItemProps" v-model:[config.modelName]="value" />
|
|
||||||
</el-form-item>
|
|
||||||
</template>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { computed, inject, nextTick, onMounted, ref } from 'vue'
|
|
||||||
import { isArray, isString } from 'lodash'
|
|
||||||
import { isRegexString, getDataByPath, setDataByPath } from '/admin/components/catchForm/support'
|
|
||||||
import { $global, $schema, $formValues, $initialValues } from '/admin/components/catchForm/config/symbol'
|
|
||||||
import type { formItemType, changeItemType, schemaType, anyObject, $globalType } from '/admin/components/catchForm/config/commonType'
|
|
||||||
import defaultElements from '/admin/components/catchForm/components'
|
|
||||||
|
|
||||||
type FormItemProps = {
|
|
||||||
label?: string
|
|
||||||
name: string
|
|
||||||
component: string
|
|
||||||
required?: boolean
|
|
||||||
props?: object
|
|
||||||
initialValue?: any
|
|
||||||
help?: string
|
|
||||||
children?: formItemType[]
|
|
||||||
hidden?: boolean | string
|
|
||||||
hideLabel?: boolean
|
|
||||||
rules?: any[]
|
|
||||||
// eslint-disable-next-line vue/no-reserved-props
|
|
||||||
class?: string
|
|
||||||
// eslint-disable-next-line vue/no-reserved-props
|
|
||||||
style?: any
|
|
||||||
change?: changeItemType[]
|
|
||||||
}
|
|
||||||
|
|
||||||
const thisProps = defineProps<FormItemProps>()
|
|
||||||
|
|
||||||
const { elements = {} } = inject<$globalType>($global, { elements: defaultElements })
|
|
||||||
|
|
||||||
const schema = inject<schemaType>($schema)
|
|
||||||
|
|
||||||
const { formValues, updateFormValues } = inject($formValues, {
|
|
||||||
formValues: ref({}),
|
|
||||||
updateFormValues: (values: anyObject) => {
|
|
||||||
console.log(values)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const { initialValues, updateInitialValues } = inject($initialValues, {
|
|
||||||
initialValues: {},
|
|
||||||
updateInitialValues: (values: anyObject) => {
|
|
||||||
console.log(values)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const value = computed({
|
|
||||||
get() {
|
|
||||||
return getDataByPath(formValues.value, thisProps.name)
|
|
||||||
},
|
|
||||||
set(val) {
|
|
||||||
const newValues = setDataByPath(formValues.value, thisProps.name, val)
|
|
||||||
|
|
||||||
updateFormValues(newValues)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const itemStyle = computed(() => ({
|
|
||||||
// marginBottom: thisProps.design ? 0 : '18px',
|
|
||||||
...thisProps.style
|
|
||||||
}))
|
|
||||||
|
|
||||||
const computeRules = computed(() => {
|
|
||||||
const { rules, required } = thisProps
|
|
||||||
|
|
||||||
const ruleData = []
|
|
||||||
|
|
||||||
if (required) {
|
|
||||||
ruleData.push({ required: true, message: '该字段是必填字段', trigger: 'blur' })
|
|
||||||
}
|
|
||||||
|
|
||||||
if (rules) {
|
|
||||||
const ruleParse = rules.map(({ type, message, trigger, customReg }) => {
|
|
||||||
const ruleDef = {
|
|
||||||
message,
|
|
||||||
trigger
|
|
||||||
}
|
|
||||||
if (['email', 'url'].includes(type)) {
|
|
||||||
return { ...ruleDef, type }
|
|
||||||
}
|
|
||||||
if (type === 'custom') {
|
|
||||||
return {
|
|
||||||
...ruleDef,
|
|
||||||
pattern: customReg
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (isRegexString(type)) {
|
|
||||||
return {
|
|
||||||
...ruleDef,
|
|
||||||
pattern: type
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return {}
|
|
||||||
})
|
|
||||||
return [...ruleData, ...ruleParse]
|
|
||||||
}
|
|
||||||
|
|
||||||
return ruleData
|
|
||||||
})
|
|
||||||
|
|
||||||
const currentComponent = computed(() => {
|
|
||||||
if (isString(value.value) && /^{{\s*(.*?)\s*}}$/.test(value.value)) {
|
|
||||||
return 'input'
|
|
||||||
}
|
|
||||||
|
|
||||||
return thisProps.component
|
|
||||||
})
|
|
||||||
|
|
||||||
const config = computed(() => {
|
|
||||||
return elements[currentComponent.value] || {}
|
|
||||||
})
|
|
||||||
|
|
||||||
const formItemProps = computed(() => {
|
|
||||||
const initProps: anyObject = {
|
|
||||||
...thisProps.props,
|
|
||||||
name: thisProps.name
|
|
||||||
}
|
|
||||||
|
|
||||||
if (thisProps.children) {
|
|
||||||
initProps.children = thisProps.children
|
|
||||||
}
|
|
||||||
|
|
||||||
return initProps
|
|
||||||
})
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
if (thisProps.initialValue !== undefined) {
|
|
||||||
if (!value.value || (isArray(value.value) && value.value.length === 0)) {
|
|
||||||
const newInitialValues = setDataByPath(initialValues, thisProps.name, thisProps.initialValue)
|
|
||||||
updateInitialValues(newInitialValues)
|
|
||||||
// select array value
|
|
||||||
if (isArray(value.value)) {
|
|
||||||
nextTick(() => {
|
|
||||||
value.value = thisProps.initialValue
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
if (!value.value && thisProps.default !== undefined) {
|
|
||||||
const newInitialValues = setDataByPath(initialValues, thisProps.name, thisProps.default)
|
|
||||||
updateInitialValues(newInitialValues)
|
|
||||||
}*/
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
#form-item {
|
|
||||||
.form-item-label {
|
|
||||||
display: flex;
|
|
||||||
position: relative;
|
|
||||||
.ico {
|
|
||||||
margin-left: 3px;
|
|
||||||
font-size: 15px;
|
|
||||||
position: relative;
|
|
||||||
.el-tooltip__trigger {
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
@@ -1,13 +0,0 @@
|
|||||||
<!-- eslint-disable vue/no-multiple-template-root -->
|
|
||||||
<template>
|
|
||||||
<form-item v-for="item in formItems" :key="item.name" v-bind="item" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import type { formItemsType } from '/admin/components/catchForm/config/commonType'
|
|
||||||
import FormItem from './FormItem.vue'
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
formItems: formItemsType
|
|
||||||
}>()
|
|
||||||
</script>
|
|
@@ -1,6 +0,0 @@
|
|||||||
import { ElAlert } from 'element-plus'
|
|
||||||
export default {
|
|
||||||
name: 'alert',
|
|
||||||
component: ElAlert,
|
|
||||||
type: 'assist'
|
|
||||||
}
|
|
@@ -1,41 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-button class="Button" v-bind="{ ...$attrs, ...props }" @click="onClick">{{ name }}</el-button>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { inject } from 'vue'
|
|
||||||
import { ElButton } from 'element-plus'
|
|
||||||
import { $formEvents } from '/admin/components/catchForm/config/symbol'
|
|
||||||
|
|
||||||
const formEvents = inject($formEvents)
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
name: String,
|
|
||||||
disabled: Boolean,
|
|
||||||
type: {
|
|
||||||
type: String,
|
|
||||||
default: 'primary'
|
|
||||||
},
|
|
||||||
clickEvent: String,
|
|
||||||
customEvent: Function,
|
|
||||||
color: String
|
|
||||||
})
|
|
||||||
|
|
||||||
const onClick = () => {
|
|
||||||
if (props.clickEvent === 'submitForm') {
|
|
||||||
formEvents.submit()
|
|
||||||
}
|
|
||||||
if (props.clickEvent === 'resetForm') {
|
|
||||||
formEvents.resetFields()
|
|
||||||
}
|
|
||||||
if (props.clickEvent === 'custom') {
|
|
||||||
props.customEvent()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.Button {
|
|
||||||
/* background-color: v-bind(color); */
|
|
||||||
}
|
|
||||||
</style>
|
|
@@ -1,7 +0,0 @@
|
|||||||
import Button from './Button.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'button',
|
|
||||||
component: Button,
|
|
||||||
type: 'assist'
|
|
||||||
}
|
|
@@ -1,24 +0,0 @@
|
|||||||
<template>
|
|
||||||
<ElCard v-bind="{ ...props, ...$attrs }">
|
|
||||||
<FormRender :formItems="children" />
|
|
||||||
</ElCard>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ElCard } from 'element-plus'
|
|
||||||
import FormRender from '/admin/components/catchForm/FormRender.vue'
|
|
||||||
|
|
||||||
defineProps({
|
|
||||||
props: Object,
|
|
||||||
children: Array,
|
|
||||||
design: Boolean
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.form-item-grid {
|
|
||||||
.el-form-item {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
@@ -1,7 +0,0 @@
|
|||||||
import Card from './Card.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'card',
|
|
||||||
component: Card,
|
|
||||||
type: 'layout'
|
|
||||||
}
|
|
@@ -1,55 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-cascader
|
|
||||||
v-model="modelValue"
|
|
||||||
:options="options"
|
|
||||||
:show-all-levels="!takeLastLevel"
|
|
||||||
:props="{
|
|
||||||
multiple,
|
|
||||||
value: valueKey,
|
|
||||||
label,
|
|
||||||
checkStrictly,
|
|
||||||
}"
|
|
||||||
v-bind="$attrs"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { onMounted } from 'vue'
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
options: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
},
|
|
||||||
checkStrictly: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
multiple: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
type: String,
|
|
||||||
default: 'label'
|
|
||||||
},
|
|
||||||
valueKey: {
|
|
||||||
type: String,
|
|
||||||
default: 'value'
|
|
||||||
},
|
|
||||||
value: {
|
|
||||||
type:[String, Number, Array],
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
api: Object,
|
|
||||||
name: String,
|
|
||||||
takeLastLevel: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
const modelValue = defineModel()
|
|
||||||
onMounted(() => {
|
|
||||||
modelValue.value = props.value
|
|
||||||
})
|
|
||||||
</script>
|
|
@@ -1,7 +0,0 @@
|
|||||||
import Cascader from './Cascader.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'cascader',
|
|
||||||
type: 'basic',
|
|
||||||
component: Cascader
|
|
||||||
}
|
|
@@ -1,71 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div v-if="!options.length" style="font-size: 12px">暂无选项</div>
|
|
||||||
|
|
||||||
<el-checkbox-group v-bind="$attrs" v-model="modelValue" @change="selectChange">
|
|
||||||
<template v-if="optionType === 'circle' || optionType === 'border'">
|
|
||||||
<el-checkbox v-for="item in options" :key="item[valueKey]" :value="item[valueKey]" :border="optionType === 'border'" :disabled="item.disabled">{{ item[label] }}</el-checkbox>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<el-space v-if="optionType === 'button'" wrap :size="[space, space]">
|
|
||||||
<el-checkbox-button v-for="item in options" :key="item[valueKey]" :value="item[valueKey]" size="large" :disabled="item.disabled">{{ item[label] }}</el-checkbox-button>
|
|
||||||
</el-space>
|
|
||||||
</el-checkbox-group>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { onMounted } from 'vue'
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
options: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
},
|
|
||||||
mode: {
|
|
||||||
type: String,
|
|
||||||
default: 'static'
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
type: String,
|
|
||||||
default: 'label'
|
|
||||||
},
|
|
||||||
valueKey: {
|
|
||||||
type: String,
|
|
||||||
default: 'value'
|
|
||||||
},
|
|
||||||
autoSelectedFirst: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
api: Object,
|
|
||||||
name: String,
|
|
||||||
optionType: {
|
|
||||||
type: String,
|
|
||||||
default: 'circle'
|
|
||||||
},
|
|
||||||
space: {
|
|
||||||
type: Number,
|
|
||||||
default: 0
|
|
||||||
},
|
|
||||||
multiple: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true // 不可更改
|
|
||||||
},
|
|
||||||
value: {
|
|
||||||
type: Array,
|
|
||||||
default: []
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
// const emits = defineEmits(['update:modelValue', 'onChangeSelect'])
|
|
||||||
const modelValue = defineModel()
|
|
||||||
const selectChange = value => {
|
|
||||||
modelValue.value = value
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
modelValue.value = props.value
|
|
||||||
})
|
|
||||||
// const { selectVal, currentOptions, selectChange, loading } = useSelect(props, emits)
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped></style>
|
|
@@ -1,7 +0,0 @@
|
|||||||
import Checkbox from './Checkbox.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'checkbox',
|
|
||||||
type: 'basic',
|
|
||||||
component: Checkbox
|
|
||||||
}
|
|
@@ -1,34 +0,0 @@
|
|||||||
<template>
|
|
||||||
<ElCollapse v-bind="{ ...props, ...$attrs }" v-model="activeKey">
|
|
||||||
<ElCollapseItem v-for="item in children" :key="item.name" :name="item.name">
|
|
||||||
<template #title>
|
|
||||||
<Title :title="item.title" italic type="h4" />
|
|
||||||
</template>
|
|
||||||
<FormRender :formItems="item.children" />
|
|
||||||
</ElCollapseItem>
|
|
||||||
</ElCollapse>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { onMounted, ref } from 'vue'
|
|
||||||
import FormRender from '/admin/components/catchForm/FormRender.vue'
|
|
||||||
import Title from '../Title/Title.vue'
|
|
||||||
const thisProps = defineProps({
|
|
||||||
props: Object,
|
|
||||||
children: Array
|
|
||||||
})
|
|
||||||
|
|
||||||
const activeKey = ref([])
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
activeKey.value = thisProps.children.filter(item => item.checked).map(item => item.name)
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.form-item-grid {
|
|
||||||
.el-form-item {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
@@ -1,7 +0,0 @@
|
|||||||
import Collapse from './Collapse.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'collapse',
|
|
||||||
component: Collapse,
|
|
||||||
type: 'layout'
|
|
||||||
}
|
|
@@ -1,24 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { onMounted } from 'vue'
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
value: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const modelValue = defineModel()
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
modelValue.value = props.value
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<el-color-picker v-model="modelValue" v-bind="$attrs"/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
|
|
||||||
</style>
|
|
@@ -1,6 +0,0 @@
|
|||||||
import { ElColorPicker } from 'element-plus'
|
|
||||||
export default {
|
|
||||||
name: 'color_picker',
|
|
||||||
component: ElColorPicker,
|
|
||||||
type: 'basic'
|
|
||||||
}
|
|
@@ -1,30 +0,0 @@
|
|||||||
<template>
|
|
||||||
<span class="empty" v-if="!componentName">请输入全局注册得组件名</span>
|
|
||||||
<component v-else :is="componentName" v-model="value" v-bind="$attrs" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { computed } from 'vue'
|
|
||||||
|
|
||||||
defineProps({
|
|
||||||
componentName: String,
|
|
||||||
modelValue: null
|
|
||||||
})
|
|
||||||
|
|
||||||
const modelValue = defineModel()
|
|
||||||
|
|
||||||
const value = computed({
|
|
||||||
get() {
|
|
||||||
return modelValue.value
|
|
||||||
},
|
|
||||||
set(val) {
|
|
||||||
modelValue.value = val
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.empty {
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
</style>
|
|
@@ -1,11 +0,0 @@
|
|||||||
import Custom from './Custom.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'custom',
|
|
||||||
component: Custom,
|
|
||||||
initialValues: {
|
|
||||||
label: '自定义组件',
|
|
||||||
component: 'Custom',
|
|
||||||
props: {}
|
|
||||||
}
|
|
||||||
}
|
|
@@ -1,7 +0,0 @@
|
|||||||
import { ElDatePicker } from 'element-plus'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'date_picker',
|
|
||||||
component: ElDatePicker,
|
|
||||||
type: 'basic'
|
|
||||||
}
|
|
@@ -1,13 +0,0 @@
|
|||||||
<template>
|
|
||||||
<ElDivider v-bind="$attrs">{{ title }}</ElDivider>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ElDivider } from 'element-plus'
|
|
||||||
|
|
||||||
defineProps({
|
|
||||||
title: String
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style></style>
|
|
@@ -1,7 +0,0 @@
|
|||||||
import Divider from './Divider.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'divider',
|
|
||||||
component: Divider,
|
|
||||||
type: 'assist'
|
|
||||||
}
|
|
@@ -1,161 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div id="formList">
|
|
||||||
<div>
|
|
||||||
<template v-if="mode === 'inline'">
|
|
||||||
<el-form-item v-for="(item, index) in list" :key="item.key" class="list-item">
|
|
||||||
<div class="list-item-content">
|
|
||||||
<el-space>
|
|
||||||
<form-item v-for="field in fields(index)" v-bind="field" :key="field.label" :name="`${name}.${index}.${field.name}`" hideLabel />
|
|
||||||
</el-space>
|
|
||||||
|
|
||||||
<el-button v-if="allowReduce" @click="handleReduceItem(index)" circle size="small" :disabled="disabled">
|
|
||||||
<Icon name="minus"/>
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
</el-form-item>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-if="mode === 'card'">
|
|
||||||
<el-card v-for="(item, index) in list" :key="item.key" class="list-card">
|
|
||||||
<template #header>
|
|
||||||
<div class="card-header">
|
|
||||||
<span>{{ title + (index + 1) }}</span>
|
|
||||||
<el-button v-if="allowReduce" @click="handleReduceItem(index)" circle size="small" :disabled="disabled">
|
|
||||||
<Icon name="minus"/>
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<form-item v-for="field in fields(index)" v-bind="field" :key="field.label" class="list-card-item" :name="`${name}.${index}.${field.name}`" />
|
|
||||||
</el-card>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<el-table v-if="mode === 'table' && list.length" :data="list" style="width: 100%">
|
|
||||||
<el-table-column :prop="item.name" :label="item.label" :key="item.name" v-for="item in children" :width="item.width" :formatter="(row, _, __, index) => formatter(item, row, index)" />
|
|
||||||
<el-table-column fixed="right" min-width="60">
|
|
||||||
<template #default="record">
|
|
||||||
<el-button v-if="allowReduce" @click="handleReduceItem(record.$index)" circle size="small" :disabled="disabled">
|
|
||||||
<Icon name="minus"/>
|
|
||||||
</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<el-button v-if="allowAdd && !isMax" @click="handleAddItem" circle size="small" :disabled="disabled">
|
|
||||||
<Icon name="plus"/>
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { computed, h } from 'vue'
|
|
||||||
import FormItem from '/admin/components/catchForm/FormItem.vue'
|
|
||||||
import { deepParse } from '/admin/components/catchForm/support'
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
modelValue: Array,
|
|
||||||
children: Array,
|
|
||||||
allowAdd: {
|
|
||||||
default: true,
|
|
||||||
type: Boolean
|
|
||||||
},
|
|
||||||
allowReduce: {
|
|
||||||
default: true,
|
|
||||||
type: Boolean
|
|
||||||
},
|
|
||||||
defaultLineCount: {
|
|
||||||
default: 0,
|
|
||||||
type: Number
|
|
||||||
},
|
|
||||||
maxLines: {
|
|
||||||
default: 999,
|
|
||||||
type: Number
|
|
||||||
},
|
|
||||||
mode: {
|
|
||||||
default: 'table',
|
|
||||||
type: String
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
default: '卡片',
|
|
||||||
type: String
|
|
||||||
},
|
|
||||||
newItemDefaults: {
|
|
||||||
type: Function,
|
|
||||||
default: () => ({})
|
|
||||||
},
|
|
||||||
name: String,
|
|
||||||
disabled: Boolean
|
|
||||||
})
|
|
||||||
|
|
||||||
const modelValue = defineModel();
|
|
||||||
|
|
||||||
const list = computed(() => {
|
|
||||||
return modelValue.value || []
|
|
||||||
})
|
|
||||||
|
|
||||||
const fields = computed(() => index => deepParse(props.children, { $item: list.value[index], $index: index }))
|
|
||||||
|
|
||||||
const isMax = computed(() => {
|
|
||||||
return list.value.length >= props.maxLines
|
|
||||||
})
|
|
||||||
|
|
||||||
const handleAddItem = () => {
|
|
||||||
if (isMax.value) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
modelValue.value = [...list.value, props.newItemDefaults(list.value.length)]
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleReduceItem = index => {
|
|
||||||
const newData = list.value.filter((v, i) => i !== index)
|
|
||||||
|
|
||||||
modelValue.value = newData
|
|
||||||
}
|
|
||||||
|
|
||||||
const formatter = (item, data, index) => {
|
|
||||||
return h(FormItem, {
|
|
||||||
...deepParse(item, { $item: list.value[index], $index: index }),
|
|
||||||
hideLabel: true,
|
|
||||||
style: { marginBottom: 0 },
|
|
||||||
name: `${props.name}.${index}.${item.name}`
|
|
||||||
})
|
|
||||||
// return (
|
|
||||||
// <FormItem
|
|
||||||
// {...deepParse(item, { $item: list.value[index], $index: index })}
|
|
||||||
// hideLabel
|
|
||||||
// style={{ marginBottom: 0 }}
|
|
||||||
// name={`${props.name}.${index}.${item.name}`}
|
|
||||||
// />
|
|
||||||
// )
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
#formList {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
.list-item {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
.list-item-content {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.list-card {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
.card-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.list-card-item {
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.list-btn {
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
@@ -1,7 +0,0 @@
|
|||||||
import FormList from './FormList.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'form_list',
|
|
||||||
component: FormList,
|
|
||||||
type: 'high'
|
|
||||||
}
|
|
@@ -1,36 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="form-item-grid">
|
|
||||||
<div :style="gridStyle">
|
|
||||||
<FormRender :formItems="children" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { computed } from 'vue'
|
|
||||||
import FormRender from '/admin/components/catchForm/FormRender.vue'
|
|
||||||
|
|
||||||
const thisProps = defineProps({
|
|
||||||
name: String,
|
|
||||||
props: Object,
|
|
||||||
children: Array,
|
|
||||||
design: Boolean
|
|
||||||
})
|
|
||||||
const gridStyle = computed(() => ({
|
|
||||||
display: 'grid',
|
|
||||||
'grid-template-columns': `repeat(${thisProps.props.columns}, 1fr)`,
|
|
||||||
'row-gap': thisProps.props['row-gap'] + 'px',
|
|
||||||
'column-gap': thisProps.props['column-gap'] + 'px'
|
|
||||||
}))
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.form-item-grid {
|
|
||||||
.el-form-item {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
.el-form-item__content {
|
|
||||||
align-items: start;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
@@ -1,7 +0,0 @@
|
|||||||
import Grid from './Grid.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'grid',
|
|
||||||
type: 'layout',
|
|
||||||
component: Grid
|
|
||||||
}
|
|
@@ -1,21 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-popover placement="right" :width="400" trigger="click">
|
|
||||||
<template #reference>
|
|
||||||
<el-input v-model="iconModel" name="icon" clearable />
|
|
||||||
</template>
|
|
||||||
<div>
|
|
||||||
<Icons v-model="iconModel" @close="closeSelectIcon" />
|
|
||||||
</div>
|
|
||||||
</el-popover>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from 'vue'
|
|
||||||
const iconModel = defineModel()
|
|
||||||
// 选择 icon
|
|
||||||
const visible = ref(false)
|
|
||||||
// 关闭选择 icon
|
|
||||||
const closeSelectIcon = () => {
|
|
||||||
visible.value = false
|
|
||||||
}
|
|
||||||
</script>
|
|
@@ -1,7 +0,0 @@
|
|||||||
import IconSelect from './IconSelect.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'icon_select',
|
|
||||||
type: 'basic',
|
|
||||||
component: IconSelect
|
|
||||||
}
|
|
@@ -1,20 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="form-item-inline">
|
|
||||||
<div :class="InlineStyle">
|
|
||||||
<FormRender :formItems="children" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { computed } from 'vue'
|
|
||||||
import FormRender from '/admin/components/catchForm/FormRender.vue'
|
|
||||||
|
|
||||||
const thisProps = defineProps({
|
|
||||||
name: String,
|
|
||||||
props: Object,
|
|
||||||
children: Array,
|
|
||||||
class: String
|
|
||||||
})
|
|
||||||
const InlineStyle = computed(() => thisProps.props.class)
|
|
||||||
</script>
|
|
@@ -1,7 +0,0 @@
|
|||||||
import Inline from './Inline.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'inline',
|
|
||||||
type: 'layout',
|
|
||||||
component: Inline
|
|
||||||
}
|
|
@@ -1,8 +0,0 @@
|
|||||||
import { ElInput } from 'element-plus'
|
|
||||||
import { h } from 'vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'input',
|
|
||||||
component: h(ElInput, { showWordLimit: true, autocomplete: 'off' }),
|
|
||||||
type: 'basic'
|
|
||||||
}
|
|
@@ -1,39 +0,0 @@
|
|||||||
<template>
|
|
||||||
<span id="NumberInput">
|
|
||||||
<el-input-number v-bind="{ ...$attrs, ...props }" v-model="value" />
|
|
||||||
<span class="unit" v-if="unit">{{ unit }} </span>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { computed } from 'vue'
|
|
||||||
import { ElInputNumber } from 'element-plus'
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
unit: String,
|
|
||||||
min: { type: Number, default: 0 },
|
|
||||||
max: Number,
|
|
||||||
disabled: Boolean,
|
|
||||||
step: { type: Number, default: 1 }
|
|
||||||
})
|
|
||||||
|
|
||||||
const modelValue = defineModel()
|
|
||||||
|
|
||||||
const value = computed({
|
|
||||||
get() {
|
|
||||||
return modelValue.value
|
|
||||||
},
|
|
||||||
set(val) {
|
|
||||||
modelValue.value = val
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
#NumberInput {
|
|
||||||
position: relative;
|
|
||||||
.unit {
|
|
||||||
margin: 0 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
@@ -1,7 +0,0 @@
|
|||||||
import InputNumber from './InputNumber.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'input_number',
|
|
||||||
type: 'basic',
|
|
||||||
component: InputNumber
|
|
||||||
}
|
|
@@ -1,8 +0,0 @@
|
|||||||
import { ElInput } from 'element-plus'
|
|
||||||
import { h } from 'vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'password',
|
|
||||||
component: h(ElInput, { type: 'password', showWordLimit: true, autocomplete: 'off' }),
|
|
||||||
type: 'basic'
|
|
||||||
}
|
|
@@ -1,68 +0,0 @@
|
|||||||
<!-- eslint-disable vue/no-multiple-template-root -->
|
|
||||||
<template>
|
|
||||||
<div v-if="!options.length" style="font-size: 12px">暂无选项</div>
|
|
||||||
<el-radio-group v-model="modelValue" @change="clickRadio" v-bind="$attrs">
|
|
||||||
<el-space wrap :direction="direction" :size="[space, space]" alignment="normal" v-if="space > 0">
|
|
||||||
<template v-if="optionType === 'circle' || optionType === 'border'">
|
|
||||||
<el-radio v-for="item in options" :key="item[value]" :value="item[value]" :border="optionType === 'border'">{{ item[label] }}</el-radio>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-else>
|
|
||||||
<el-radio-button v-for="item in options" :key="item[value]" :value="item[value]" :size="$attrs.size">{{ item[label] }} </el-radio-button>
|
|
||||||
</template>
|
|
||||||
</el-space>
|
|
||||||
<div v-else>
|
|
||||||
<template v-if="optionType === 'circle' || optionType === 'border'">
|
|
||||||
<el-radio v-for="item in options" :key="item[value]" :value="item[value]" :border="optionType === 'border'">{{ item[label] }}</el-radio>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-else>
|
|
||||||
<el-radio-button v-for="item in options" :key="item[value]" :value="item[value]" :size="$attrs.size">{{ item[label] }} </el-radio-button>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</el-radio-group>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
// import { defineEmits } from 'vue'
|
|
||||||
// import useSelect from '/admin/components/catchForm/hooks/useSelect'
|
|
||||||
|
|
||||||
defineProps({
|
|
||||||
options: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
type: String,
|
|
||||||
default: 'label'
|
|
||||||
},
|
|
||||||
value: {
|
|
||||||
type: String,
|
|
||||||
default: 'value'
|
|
||||||
},
|
|
||||||
autoSelectedFirst: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
api: Object,
|
|
||||||
name: String,
|
|
||||||
optionType: {
|
|
||||||
type: String,
|
|
||||||
default: 'circle'
|
|
||||||
},
|
|
||||||
|
|
||||||
direction: {
|
|
||||||
type: String,
|
|
||||||
default: 'horizontal'
|
|
||||||
},
|
|
||||||
space: {
|
|
||||||
type: Number,
|
|
||||||
default: 0
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const modelValue = defineModel()
|
|
||||||
const clickRadio = value => {
|
|
||||||
modelValue.value = value
|
|
||||||
}
|
|
||||||
</script>
|
|
@@ -1,7 +0,0 @@
|
|||||||
import Radio from './Radio.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'radio',
|
|
||||||
type: 'basic',
|
|
||||||
component: Radio
|
|
||||||
}
|
|
@@ -1,7 +0,0 @@
|
|||||||
import { ElRate } from 'element-plus'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'rate',
|
|
||||||
component: ElRate,
|
|
||||||
type: 'basic'
|
|
||||||
}
|
|
@@ -1,84 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-select v-bind="$attrs" class="w-full" clearable filterable :multiple="multiple" :value-key="valueKey" v-model="modelValue">
|
|
||||||
<template v-if="group">
|
|
||||||
<el-option-group v-for="group in elOptions" :key="group[label]" :label="group[label]">
|
|
||||||
<el-option v-for="item in group.options" :key="item[valueKey]" :label="item[label]" :value="item[valueKey]" />
|
|
||||||
</el-option-group>
|
|
||||||
</template>
|
|
||||||
<el-option v-for="option in elOptions" :key="option[valueKey]" :label="option[label]" :value="option[valueKey]" v-else>
|
|
||||||
<slot />
|
|
||||||
</el-option>
|
|
||||||
</el-select>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { inject, ref, watch } from 'vue'
|
|
||||||
import { $global} from '/admin/components/catchForm/config/symbol'
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
options: {
|
|
||||||
type: Array,
|
|
||||||
require: false,
|
|
||||||
default: () => {
|
|
||||||
return []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
type: String,
|
|
||||||
default: 'label'
|
|
||||||
},
|
|
||||||
valueKey: {
|
|
||||||
type: String,
|
|
||||||
default: 'value'
|
|
||||||
},
|
|
||||||
multiple: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
api: {
|
|
||||||
type: String,
|
|
||||||
require: false,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
group: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
query: {
|
|
||||||
type: Object,
|
|
||||||
default: null
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
interface Option {
|
|
||||||
label: string
|
|
||||||
value: string | number
|
|
||||||
}
|
|
||||||
|
|
||||||
interface GroupOption {
|
|
||||||
label: string
|
|
||||||
options: Array<Option>
|
|
||||||
}
|
|
||||||
|
|
||||||
const modelValue = defineModel()
|
|
||||||
|
|
||||||
const { http } = inject($global)
|
|
||||||
const getOptions = () => {
|
|
||||||
http.get(props.api, props.query).then(r => {
|
|
||||||
elOptions.value = r.data.data
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const elOptions: any = props.group ? ref<Array<GroupOption>>() : ref<Array<Option>>()
|
|
||||||
if (props.api) {
|
|
||||||
if (!props.query) {
|
|
||||||
getOptions()
|
|
||||||
} else {
|
|
||||||
watch(props, function () {
|
|
||||||
getOptions()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
elOptions.value = props.options
|
|
||||||
}
|
|
||||||
</script>
|
|
@@ -1,7 +0,0 @@
|
|||||||
import Select from './Select.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'select',
|
|
||||||
type: 'basic',
|
|
||||||
component: Select
|
|
||||||
}
|
|
@@ -1,7 +0,0 @@
|
|||||||
import { ElSlider } from 'element-plus'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'slider',
|
|
||||||
component: ElSlider,
|
|
||||||
type: 'basic'
|
|
||||||
}
|
|
@@ -1,7 +0,0 @@
|
|||||||
import { ElSwitch } from 'element-plus'
|
|
||||||
import cswitch from './index.vue'
|
|
||||||
export default {
|
|
||||||
name: 'switch',
|
|
||||||
component: cswitch,
|
|
||||||
type: 'basic'
|
|
||||||
}
|
|
@@ -1,28 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { onMounted } from 'vue'
|
|
||||||
import { before } from 'node:test'
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
value: {
|
|
||||||
type: [Boolean, String, Number],
|
|
||||||
default: false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
defineOptions({
|
|
||||||
name: 'cswitch'
|
|
||||||
})
|
|
||||||
|
|
||||||
const valueModel = defineModel()
|
|
||||||
onMounted(() => {
|
|
||||||
valueModel.value = props.value
|
|
||||||
})
|
|
||||||
|
|
||||||
const change = (val: any) => {
|
|
||||||
valueModel.value = val
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<el-switch @change="change" v-model="valueModel"/>
|
|
||||||
</template>
|
|
@@ -1,8 +0,0 @@
|
|||||||
import { ElInput } from 'element-plus'
|
|
||||||
import { h } from 'vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'textarea',
|
|
||||||
component: h(ElInput, { type: 'textarea', showWordLimit: true, autocomplete: 'off' }),
|
|
||||||
type: 'basic'
|
|
||||||
}
|
|
@@ -1,23 +0,0 @@
|
|||||||
<template>
|
|
||||||
<component :is="type" :class="class" :style="{ fontStyle: italic ? 'italic' : 'normal' }">{{
|
|
||||||
title
|
|
||||||
}}</component>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
defineProps({
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: '这是一个标题'
|
|
||||||
},
|
|
||||||
type: {
|
|
||||||
type: String,
|
|
||||||
default: 'h3'
|
|
||||||
},
|
|
||||||
class: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
italic: Boolean
|
|
||||||
})
|
|
||||||
</script>
|
|
@@ -1,7 +0,0 @@
|
|||||||
import Title from './Title.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'title',
|
|
||||||
component: Title,
|
|
||||||
type: 'assist'
|
|
||||||
}
|
|
@@ -1,38 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Disabled :disabled="disabled"> <ElTransfer v-bind="$attrs" v-model="modelValue" :data="options" :props="{ label: props.label, key: props.valueKey }" /></Disabled>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ElTransfer } from 'element-plus'
|
|
||||||
import Disabled from '/admin/components/catchForm/Disabled.vue'
|
|
||||||
|
|
||||||
const modelValue = defineModel()
|
|
||||||
const props = defineProps({
|
|
||||||
options: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
},
|
|
||||||
mode: {
|
|
||||||
type: String,
|
|
||||||
default: 'static'
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
type: String,
|
|
||||||
default: 'label'
|
|
||||||
},
|
|
||||||
valueKey: {
|
|
||||||
type: String,
|
|
||||||
default: 'value'
|
|
||||||
},
|
|
||||||
api: Object,
|
|
||||||
disabled: Boolean
|
|
||||||
})
|
|
||||||
|
|
||||||
// const emits = defineEmits(['update:modelValue', 'onChangeSelect'])
|
|
||||||
|
|
||||||
// const { selectVal, currentOptions, selectChange, loading } = useSelect(props, emits)
|
|
||||||
|
|
||||||
// watchEffect(() => {
|
|
||||||
// console.log(currentOptions.value)
|
|
||||||
// })
|
|
||||||
</script>
|
|
@@ -1,7 +0,0 @@
|
|||||||
import Transfer from './Transfer.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'transfer',
|
|
||||||
type: 'basic',
|
|
||||||
component: Transfer
|
|
||||||
}
|
|
@@ -1,86 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-tree
|
|
||||||
ref="tree"
|
|
||||||
:data="data"
|
|
||||||
:node-key="valueKey"
|
|
||||||
:class="class"
|
|
||||||
:props="{ label }"
|
|
||||||
@check="selectPermissions"
|
|
||||||
@node-click="nodeClick"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref, nextTick, onMounted, watch, inject } from 'vue'
|
|
||||||
import { isArray } from 'lodash'
|
|
||||||
import { $global} from '/admin/components/catchForm/config/symbol'
|
|
||||||
|
|
||||||
const tree = ref()
|
|
||||||
const modelValue = defineModel()
|
|
||||||
const currentCheckedKeys = ref<Array<number>|Array<string>|string|number>([])
|
|
||||||
const data = ref<any>([])
|
|
||||||
const { http } = inject($global)
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
options: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
},
|
|
||||||
mode: {
|
|
||||||
type: String,
|
|
||||||
default: 'static'
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
type: String,
|
|
||||||
default: 'label'
|
|
||||||
},
|
|
||||||
valueKey: {
|
|
||||||
type: String,
|
|
||||||
default: 'id'
|
|
||||||
},
|
|
||||||
class: {
|
|
||||||
type: String,
|
|
||||||
default: 'w-full'
|
|
||||||
},
|
|
||||||
api: {
|
|
||||||
type: String,
|
|
||||||
default: null
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
if (props.api) {
|
|
||||||
http.get(props.api).then((r:any) => {
|
|
||||||
data.value = r.data.data
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
data.value = props.options
|
|
||||||
}
|
|
||||||
|
|
||||||
// 设置已选权限
|
|
||||||
const selectPermissions = (checkedNodes: any, checkedKeys: any) => {
|
|
||||||
currentCheckedKeys.value = checkedKeys.checkedKeys.concat(checkedKeys.halfCheckedKeys).sort()
|
|
||||||
tree.value.setCheckedKeys(checkedKeys.checkedKeys)
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
nextTick(() => {
|
|
||||||
if (tree.value) {
|
|
||||||
if (isArray(modelValue.value)) {
|
|
||||||
modelValue.value.forEach(id => {
|
|
||||||
tree.value.setChecked(id, true, false)
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
tree.value.setCurrentKey(modelValue.value, true, false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
const nodeClick = (node:any) => {
|
|
||||||
currentCheckedKeys.value = node.id
|
|
||||||
}
|
|
||||||
// 监听选中的 checked
|
|
||||||
watch(() => currentCheckedKeys.value, (newValue) => {
|
|
||||||
modelValue.value = newValue
|
|
||||||
}, {deep: true})
|
|
||||||
</script>
|
|
@@ -1,7 +0,0 @@
|
|||||||
import Tree from './Tree.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'tree',
|
|
||||||
type: 'basic',
|
|
||||||
component: Tree
|
|
||||||
}
|
|
@@ -1,79 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-upload v-model:file-list="fileList" :action="action" :name="uploadKey" multiple :before-upload="beforeAvatarUpload" :limit="limit" :on-exceed="handleExceed" v-bind="$attrs">
|
|
||||||
<el-button type="primary">
|
|
||||||
<template #icon><IconRender name="upload" /></template>
|
|
||||||
{{ buttonText }}
|
|
||||||
</el-button>
|
|
||||||
</el-upload>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { onBeforeMount, computed } from 'vue'
|
|
||||||
import { ElUpload, ElButton, ElMessage } from 'element-plus'
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
action: String,
|
|
||||||
height: Number,
|
|
||||||
width: Number,
|
|
||||||
fileTypes: { type: Array, default: () => [] },
|
|
||||||
size: Number,
|
|
||||||
dataPath: {
|
|
||||||
type: String,
|
|
||||||
default: 'data'
|
|
||||||
},
|
|
||||||
uploadKey: {
|
|
||||||
type: String,
|
|
||||||
default: 'file'
|
|
||||||
},
|
|
||||||
buttonText: {
|
|
||||||
type: String,
|
|
||||||
default: '点击上传'
|
|
||||||
},
|
|
||||||
limit: {
|
|
||||||
type: Number,
|
|
||||||
default: 2
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const modelValue = defineModel({
|
|
||||||
type: Array,
|
|
||||||
required: true
|
|
||||||
})
|
|
||||||
|
|
||||||
const fileList = computed({
|
|
||||||
get() {
|
|
||||||
return modelValue.value
|
|
||||||
},
|
|
||||||
set(val) {
|
|
||||||
modelValue.value = val
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const beforeAvatarUpload = rawFile => {
|
|
||||||
const [, type] = rawFile.type.split('/')
|
|
||||||
|
|
||||||
// if (!props.fileTypes.includes(type)) {
|
|
||||||
// ElMessage.error('不支持该图片格式!')
|
|
||||||
// return false
|
|
||||||
// }
|
|
||||||
|
|
||||||
if (rawFile.size / 1024 / 1024 > props.size) {
|
|
||||||
ElMessage.error(`图片文件大小不能超过${props.size}MB!`)
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleExceed = () => {
|
|
||||||
ElMessage.warning(`上传数量限制为 ${props.limit} 个!`)
|
|
||||||
}
|
|
||||||
|
|
||||||
onBeforeMount(() => {
|
|
||||||
const { modelValue } = props
|
|
||||||
|
|
||||||
if (modelValue) {
|
|
||||||
imageUrl.value = modelValue
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
@@ -1,7 +0,0 @@
|
|||||||
import Upload from './Upload.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'upload',
|
|
||||||
component: Upload,
|
|
||||||
type: 'basic'
|
|
||||||
}
|
|
@@ -1,79 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { watch } from 'vue'
|
|
||||||
import { uploadFile } from '/admin/composables/upload'
|
|
||||||
const props = defineProps({
|
|
||||||
action: {
|
|
||||||
type: String
|
|
||||||
},
|
|
||||||
name: {
|
|
||||||
type: String,
|
|
||||||
default: 'image'
|
|
||||||
},
|
|
||||||
auto: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
// eslint-disable-next-line vue/no-reserved-props
|
|
||||||
class: {
|
|
||||||
type: String,
|
|
||||||
default: 'w-24 h-24'
|
|
||||||
},
|
|
||||||
requestFrom: {
|
|
||||||
type: String,
|
|
||||||
default: 'Dashboard'
|
|
||||||
},
|
|
||||||
token:{
|
|
||||||
type: String,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
ext: {
|
|
||||||
type: Array,
|
|
||||||
default: () => {
|
|
||||||
return ['docx', 'pdf', 'txt', 'html', 'zip', 'tar', 'doc', 'css', 'csv', 'ppt', 'xlsx', 'xls', 'xml']
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// 定义文件 v-model
|
|
||||||
const fileModel = defineModel({
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
required: true
|
|
||||||
})
|
|
||||||
const { upload, beforeUpload, handleExceed, handleSuccess, file, filename} = uploadFile(props.action, props.ext)
|
|
||||||
// 更新 model 的 value
|
|
||||||
watch(
|
|
||||||
() => file.value,
|
|
||||||
(newValue, oldValue) => {
|
|
||||||
fileModel.value = newValue
|
|
||||||
}
|
|
||||||
)
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<el-upload
|
|
||||||
ref="upload"
|
|
||||||
:action="action"
|
|
||||||
:show-file-list="false"
|
|
||||||
:name="name"
|
|
||||||
:on-exceed="handleExceed"
|
|
||||||
:auto-upload="auto"
|
|
||||||
:headers="{ authorization: token, 'Request-from': requestFrom }"
|
|
||||||
v-bind="$attrs"
|
|
||||||
:before-upload="beforeUpload"
|
|
||||||
:on-success="handleSuccess"
|
|
||||||
:limit="1"
|
|
||||||
>
|
|
||||||
<div v-if="fileModel">
|
|
||||||
{{ filename }}
|
|
||||||
</div>
|
|
||||||
<div v-else>
|
|
||||||
<div class="flex items-center justify-center w-24 h-12 text-[14px] border border-blue-100 border-dashed rounded">
|
|
||||||
<div>点击上传文件</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-upload>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
|
|
||||||
</style>
|
|
@@ -1,7 +0,0 @@
|
|||||||
import UploadFile from './UploadFile.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'upload_file',
|
|
||||||
component: UploadFile,
|
|
||||||
type: 'basic'
|
|
||||||
}
|
|
@@ -1,95 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { ref, watch } from 'vue'
|
|
||||||
import { uploadFile } from '/admin/composables/upload'
|
|
||||||
import { getFilename } from '/admin/support/helper'
|
|
||||||
import { Plus, Delete } from '@element-plus/icons-vue'
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
action: {
|
|
||||||
type: String,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
name: {
|
|
||||||
type: String,
|
|
||||||
default: 'image'
|
|
||||||
},
|
|
||||||
auto: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
// eslint-disable-next-line vue/no-reserved-props
|
|
||||||
class: {
|
|
||||||
type: String,
|
|
||||||
default: 'w-24 h-24'
|
|
||||||
},
|
|
||||||
requestFrom: {
|
|
||||||
type: String,
|
|
||||||
default: 'Dashboard'
|
|
||||||
},
|
|
||||||
token:{
|
|
||||||
type: String,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
ext: {
|
|
||||||
type: Array,
|
|
||||||
default: () => {
|
|
||||||
return ['docx', 'pdf', 'txt', 'html', 'zip', 'tar', 'doc', 'css', 'csv', 'ppt', 'xlsx', 'xls', 'xml']
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// 定义文件 v-model
|
|
||||||
const filesModel = defineModel({
|
|
||||||
type: Array,
|
|
||||||
default: [],
|
|
||||||
required: true
|
|
||||||
})
|
|
||||||
const files = ref([])
|
|
||||||
|
|
||||||
const { upload, beforeUpload, handleExceed, handleSuccess, file, filename} = uploadFile(props.action, props.ext)
|
|
||||||
const delFile = (key: number) => {
|
|
||||||
files.value = files.value.filter((item, index) => index !== key)
|
|
||||||
filesModel.value = files.value
|
|
||||||
}
|
|
||||||
// 更新 model 的 value
|
|
||||||
watch(
|
|
||||||
() => file.value,
|
|
||||||
(newValue, oldValue) => {
|
|
||||||
files.value.push(newValue)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
watch(() => files.value, (newValue, oldValue) => {
|
|
||||||
filesModel.value = newValue
|
|
||||||
}, { deep: true, immediate: true })
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<el-upload
|
|
||||||
ref="upload"
|
|
||||||
:action="action"
|
|
||||||
multiple
|
|
||||||
:show-file-list="false"
|
|
||||||
:name="name"
|
|
||||||
:auto-upload="auto"
|
|
||||||
:headers="{ authorization: token, 'Request-from': requestFrom }"
|
|
||||||
v-bind="$attrs"
|
|
||||||
:on-exceed="handleExceed"
|
|
||||||
:before-upload="beforeUpload"
|
|
||||||
:on-success="handleSuccess"
|
|
||||||
>
|
|
||||||
<div class="flex flex-col w-full">
|
|
||||||
<div>
|
|
||||||
<div class="flex items-center justify-center w-24 h-12 text-[14px] border border-blue-100 border-dashed rounded">
|
|
||||||
<div>点击上传文件</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="w-full">
|
|
||||||
<div v-for="(item, key) in files" :key="key" class="flex justify-between w-full">
|
|
||||||
<div>{{ getFilename(item) }}</div>
|
|
||||||
<div class="h-8 flex items-center ml-4"><el-icon @click.stop="delFile(key)" class="cursor-pointer"><Delete /></el-icon></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-upload>
|
|
||||||
</template>
|
|
||||||
|
|
@@ -1,7 +0,0 @@
|
|||||||
import UploadFiles from './UploadFiles.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'upload_files',
|
|
||||||
component: UploadFiles,
|
|
||||||
type: 'basic'
|
|
||||||
}
|
|
@@ -1,71 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-upload
|
|
||||||
:action="action"
|
|
||||||
:show-file-list="false"
|
|
||||||
name="image"
|
|
||||||
:auto-upload="auto"
|
|
||||||
:headers="{ authorization: token, 'Request-from': requestFrom }"
|
|
||||||
ref="upload"
|
|
||||||
:on-exceed="handleExceed"
|
|
||||||
:on-success="handleSuccess"
|
|
||||||
:before-upload="beforeUpload"
|
|
||||||
:limit="1"
|
|
||||||
>
|
|
||||||
<img v-if="fileModel" :src="fileModel" :class="class" />
|
|
||||||
<div v-else>
|
|
||||||
<div class="flex items-center justify-center w-24 h-24 border border-collapse">
|
|
||||||
<el-icon><Plus /></el-icon>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-upload>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { watch } from 'vue'
|
|
||||||
import { uploadImage } from '/admin/composables/upload'
|
|
||||||
import { Plus } from '@element-plus/icons-vue'
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
action: {
|
|
||||||
type: String
|
|
||||||
},
|
|
||||||
name: {
|
|
||||||
type: String,
|
|
||||||
default: 'image'
|
|
||||||
},
|
|
||||||
auto: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
// eslint-disable-next-line vue/no-reserved-props
|
|
||||||
class: {
|
|
||||||
type: String,
|
|
||||||
default: 'w-24 h-24'
|
|
||||||
},
|
|
||||||
requestFrom: {
|
|
||||||
type: String,
|
|
||||||
default: 'Dashboard'
|
|
||||||
},
|
|
||||||
token:{
|
|
||||||
type: String
|
|
||||||
},
|
|
||||||
ext: {
|
|
||||||
type: Array,
|
|
||||||
default: () => ['jpg', 'jpeg', 'png', 'bmp', 'gif']
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// 定义文件 v-model
|
|
||||||
const fileModel = defineModel({
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
required: true
|
|
||||||
})
|
|
||||||
const { upload, beforeUpload, handleExceed, handleSuccess, file } = uploadImage(props.action, props.ext)
|
|
||||||
// 更新 model 的 value
|
|
||||||
watch(
|
|
||||||
() => file.value,
|
|
||||||
(newValue, oldValue) => {
|
|
||||||
fileModel.value = newValue
|
|
||||||
}
|
|
||||||
)
|
|
||||||
</script>
|
|
@@ -1,7 +0,0 @@
|
|||||||
import UploadImage from './UploadImage.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'upload_image',
|
|
||||||
component: UploadImage,
|
|
||||||
type: 'basic'
|
|
||||||
}
|
|
@@ -1,95 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="grid grid-cols-4 gap-2">
|
|
||||||
<div v-for="(item, key) in images" :key="key" class="relative w-24 h-24 group">
|
|
||||||
<img :src="item" class="w-full h-full" />
|
|
||||||
<div class="w-full h-full absolute top-0 left-0 bg-black bg-opacity-50 z-10 hidden group-hover:block" >
|
|
||||||
</div>
|
|
||||||
<div class="absolute top-9 left-10 text-white z-50" >
|
|
||||||
<el-icon @click.prevent="delImage(key)" class="cursor-pointer"><Delete /></el-icon>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<el-upload
|
|
||||||
:action="action"
|
|
||||||
:show-file-list="false"
|
|
||||||
:name="name"
|
|
||||||
multiple
|
|
||||||
:headers="{ authorization: token, 'Request-from': requestFrom }"
|
|
||||||
ref="upload"
|
|
||||||
:on-exceed="handleExceed"
|
|
||||||
:on-success="handleSuccess"
|
|
||||||
:before-upload="beforeUpload"
|
|
||||||
>
|
|
||||||
<div class="flex items-center justify-center w-24 h-24 border border-collapse">
|
|
||||||
<el-icon><Plus /></el-icon>
|
|
||||||
</div>
|
|
||||||
</el-upload>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref, watch } from 'vue'
|
|
||||||
import { uploadImage } from '/admin/composables/upload'
|
|
||||||
import { Plus, Delete } from '@element-plus/icons-vue'
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
action: {
|
|
||||||
type: String,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
name: {
|
|
||||||
type: String,
|
|
||||||
default: 'image'
|
|
||||||
},
|
|
||||||
auto: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
// eslint-disable-next-line vue/no-reserved-props
|
|
||||||
class: {
|
|
||||||
type: String,
|
|
||||||
default: 'w-24 h-24 p-2'
|
|
||||||
},
|
|
||||||
requestFrom: {
|
|
||||||
type: String,
|
|
||||||
default: 'Dashboard'
|
|
||||||
},
|
|
||||||
multiple: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
token:{
|
|
||||||
type: String,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
ext: {
|
|
||||||
type: Array,
|
|
||||||
default: () => ['jpg', 'jpeg', 'png', 'bmp', 'gif']
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// 定义文件 v-model
|
|
||||||
const filesModel = defineModel({
|
|
||||||
type: Array<String>,
|
|
||||||
default: [],
|
|
||||||
required: true
|
|
||||||
})
|
|
||||||
const images = ref([])
|
|
||||||
const { upload, beforeUpload, handleExceed, handleSuccess, file } = uploadImage(props.action, props.ext)
|
|
||||||
const delImage = (key: number) => {
|
|
||||||
images.value = images.value.filter((item, index) => index !== key)
|
|
||||||
filesModel.value = images.value
|
|
||||||
}
|
|
||||||
// 更新 model 的 value
|
|
||||||
watch(
|
|
||||||
() => file.value,
|
|
||||||
(newValue, oldValue) => {
|
|
||||||
images.value.push(newValue)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
watch(() => images.value, (newValue, oldValue) => {
|
|
||||||
filesModel.value = newValue
|
|
||||||
}, { deep: true, immediate: true })
|
|
||||||
</script>
|
|
||||||
|
|
@@ -1,7 +0,0 @@
|
|||||||
import UploadImages from './UploadImages.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'upload_images',
|
|
||||||
component: UploadImages,
|
|
||||||
type: 'basic'
|
|
||||||
}
|
|
@@ -1,12 +0,0 @@
|
|||||||
import type { formElement } from '/admin/components/catchForm/config/commonType'
|
|
||||||
|
|
||||||
const modules = import.meta.glob('./*/index.ts', { eager: true })
|
|
||||||
const components: { [component: string]: formElement } = {}
|
|
||||||
|
|
||||||
for (const path in modules) {
|
|
||||||
const data = (modules[path] as { default: formElement }).default
|
|
||||||
if (data) {
|
|
||||||
components[data.name] = data
|
|
||||||
}
|
|
||||||
}
|
|
||||||
export default components
|
|
@@ -1,64 +0,0 @@
|
|||||||
export default [
|
|
||||||
{
|
|
||||||
label: 'url',
|
|
||||||
component: 'Input',
|
|
||||||
name: 'props.api.url',
|
|
||||||
initialValue: '/current/query/article',
|
|
||||||
designKey: 'form-UrE8'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '请求方式',
|
|
||||||
component: 'Radio',
|
|
||||||
name: 'props.api.method',
|
|
||||||
props: {
|
|
||||||
mode: 'static',
|
|
||||||
autoSelectedFirst: true,
|
|
||||||
options: [
|
|
||||||
{
|
|
||||||
label: 'GET',
|
|
||||||
value: 'GET'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'POST',
|
|
||||||
value: 'POST'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'PUT',
|
|
||||||
value: 'PUT'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'DELETE',
|
|
||||||
value: 'DELETE'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
designKey: 'form-nOpD'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '请求参数',
|
|
||||||
component: 'JsonEdit',
|
|
||||||
name: 'props.api.params',
|
|
||||||
hidden: '{{ ["POST","PUT"].includes($values.props.api.method) }}',
|
|
||||||
initialValue: {},
|
|
||||||
props: {
|
|
||||||
mode: 'dialog'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '请求参数',
|
|
||||||
component: 'JsonEdit',
|
|
||||||
name: 'props.api.data',
|
|
||||||
hidden: '{{ ["GET","DELETE"].includes($values.props.api.method) }}',
|
|
||||||
initialValue: {},
|
|
||||||
props: {
|
|
||||||
mode: 'dialog'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '数据路径',
|
|
||||||
component: 'Input',
|
|
||||||
name: 'props.api.dataPath',
|
|
||||||
initialValue: 'data',
|
|
||||||
designKey: 'form-UrE8'
|
|
||||||
}
|
|
||||||
]
|
|
@@ -1,47 +0,0 @@
|
|||||||
import { recursionDelete } from '/admin/components/catchForm/support'
|
|
||||||
|
|
||||||
const basicAttr = (omit = [], moreAttrs = []) => {
|
|
||||||
const attr = [
|
|
||||||
{ label: '标签', component: 'Input', name: 'label' },
|
|
||||||
{
|
|
||||||
label: '唯一标识',
|
|
||||||
component: 'Input',
|
|
||||||
name: 'name',
|
|
||||||
help: "既是唯一标识,也是数据路径。比如输入【props.name】,数据就会保存为 { props: { name:'xxx' } }"
|
|
||||||
},
|
|
||||||
{ label: '字段说明', component: 'Textarea', name: 'help' },
|
|
||||||
{
|
|
||||||
label: '占位提示',
|
|
||||||
component: 'Input',
|
|
||||||
name: 'props.placeholder',
|
|
||||||
designKey: 'form-ekRL'
|
|
||||||
},
|
|
||||||
{ label: '初始值', component: 'Input', name: 'initialValue' },
|
|
||||||
{
|
|
||||||
component: 'Grid',
|
|
||||||
children: [
|
|
||||||
{ label: '是否必填', component: 'Switch', name: 'required' },
|
|
||||||
{ label: '是否只读', component: 'Switch', name: 'props.readonly' },
|
|
||||||
{ label: '是否禁用', component: 'Switch', name: 'props.disabled' },
|
|
||||||
{ label: '隐藏字段', component: 'Switch', name: 'hidden' },
|
|
||||||
{ label: '隐藏标签', component: 'Switch', name: 'hideLabel' }
|
|
||||||
],
|
|
||||||
props: {
|
|
||||||
columns: 3,
|
|
||||||
'row-gap': 0,
|
|
||||||
'column-gap': 20
|
|
||||||
},
|
|
||||||
designKey: 'form-R003',
|
|
||||||
name: 'cNmCuu',
|
|
||||||
style: {
|
|
||||||
marginBottom: 0
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
const omitAttrs = recursionDelete(attr, (item) => !omit.includes(item.name))
|
|
||||||
|
|
||||||
return [...omitAttrs, ...moreAttrs]
|
|
||||||
}
|
|
||||||
|
|
||||||
export default basicAttr
|
|
@@ -1,18 +0,0 @@
|
|||||||
const basicAttr = (omit = []) => {
|
|
||||||
const attr = [
|
|
||||||
{ label: '自定义class', component: 'Input', name: 'props.class' },
|
|
||||||
{
|
|
||||||
label: '自定义style',
|
|
||||||
component: 'JsonEdit',
|
|
||||||
name: 'props.style',
|
|
||||||
help: '与vue的style对象格式一样',
|
|
||||||
props: {
|
|
||||||
mode: 'dialog'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
return attr.filter((item) => !omit.includes(item.name))
|
|
||||||
}
|
|
||||||
|
|
||||||
export default basicAttr
|
|
@@ -1,6 +0,0 @@
|
|||||||
export { default as basicAttr } from './basicAttr'
|
|
||||||
export { default as highAttr } from './highAttr'
|
|
||||||
export { default as apiAttr } from './apiAttr'
|
|
||||||
export { default as linkageAttr } from './linkageAttr'
|
|
||||||
export { default as optionAttr } from './optionAttr'
|
|
||||||
export { default as mergeAttr } from './mergeAttr'
|
|
@@ -1,36 +0,0 @@
|
|||||||
export default [
|
|
||||||
{
|
|
||||||
component: 'Alert',
|
|
||||||
props: {
|
|
||||||
type: 'success',
|
|
||||||
description: '对于配置级的联动,请直接点击下方按钮【编辑配置文本】,通过插值表达式实现',
|
|
||||||
closable: true,
|
|
||||||
'show-icon': true
|
|
||||||
},
|
|
||||||
designKey: 'design-MQPU',
|
|
||||||
name: 'form-Oqi5'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '值联动',
|
|
||||||
help: '本字段值改变时,修改其他字段的值',
|
|
||||||
name: 'change',
|
|
||||||
component: 'FormList',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
label: '目标字段',
|
|
||||||
name: 'target',
|
|
||||||
component: 'Input',
|
|
||||||
props: {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '值',
|
|
||||||
name: 'value',
|
|
||||||
component: 'Input',
|
|
||||||
props: {}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
props: {
|
|
||||||
mode: 'card'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
@@ -1,32 +0,0 @@
|
|||||||
const mergeAttr = (attrConfig) => {
|
|
||||||
const { basic = [], high = [], linkage = [] } = attrConfig
|
|
||||||
|
|
||||||
const attrs = [
|
|
||||||
{
|
|
||||||
component: 'Collapse',
|
|
||||||
name: 'mergeAttr',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
title: '常用属性',
|
|
||||||
name: 'basic',
|
|
||||||
checked: true,
|
|
||||||
children: basic
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '高级属性',
|
|
||||||
name: 'high',
|
|
||||||
children: high
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '联动规则',
|
|
||||||
name: 'linkage',
|
|
||||||
children: linkage
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
return attrs
|
|
||||||
}
|
|
||||||
|
|
||||||
export default mergeAttr
|
|
@@ -1,91 +0,0 @@
|
|||||||
import apiAttr from './apiAttr'
|
|
||||||
|
|
||||||
export default [
|
|
||||||
{
|
|
||||||
component: 'Divider',
|
|
||||||
props: {
|
|
||||||
title: '选项设置',
|
|
||||||
contentPosition: 'center'
|
|
||||||
},
|
|
||||||
designKey: 'design-gSnX',
|
|
||||||
name: 'form-xDEe',
|
|
||||||
style: {
|
|
||||||
marginTop: '40px'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '标签key',
|
|
||||||
component: 'Input',
|
|
||||||
name: 'props.labelKey',
|
|
||||||
designKey: 'form-X6hs'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '值Key',
|
|
||||||
component: 'Input',
|
|
||||||
name: 'props.valueKey',
|
|
||||||
designKey: 'form-STkl'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '数据模式',
|
|
||||||
component: 'Radio',
|
|
||||||
name: 'props.mode',
|
|
||||||
props: {
|
|
||||||
mode: 'static',
|
|
||||||
options: [
|
|
||||||
{
|
|
||||||
label: '静态',
|
|
||||||
value: 'static'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '远程',
|
|
||||||
value: 'remote'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
optionType: 'button',
|
|
||||||
space: 0
|
|
||||||
},
|
|
||||||
designKey: 'form-PLpj'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '静态选项',
|
|
||||||
name: 'props.options',
|
|
||||||
component: 'FormList',
|
|
||||||
hidden: '{{$values.props.mode!=="static"}}',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
label: '选项名',
|
|
||||||
name: '{{$values.props.labelKey}}',
|
|
||||||
component: 'Input',
|
|
||||||
props: {
|
|
||||||
placeholder: '请输入...'
|
|
||||||
},
|
|
||||||
designKey: 'form-LnGh'
|
|
||||||
// initialValue: "{{ '选项' + ($index+1) }}"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '选项值',
|
|
||||||
name: '{{$values.props.valueKey}}',
|
|
||||||
component: 'Input',
|
|
||||||
props: {},
|
|
||||||
designKey: 'form-HYtW'
|
|
||||||
// initialValue: "{{ 'value' + ($index+1) }}"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
designKey: 'form-Iwpd',
|
|
||||||
props: {
|
|
||||||
mode: 'table',
|
|
||||||
newItemDefaults:
|
|
||||||
'{{ (index) => ({ [$values.props.labelKey]: `选项${index + 1}`, [$values.props.valueKey]: `value${index + 1}` }) }}'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
component: 'Card',
|
|
||||||
props: {
|
|
||||||
// header: '远程数据'
|
|
||||||
},
|
|
||||||
designKey: 'id-pGeN',
|
|
||||||
name: 'form-6vzT',
|
|
||||||
hidden: '{{$values.props.mode==="static"}}',
|
|
||||||
children: apiAttr
|
|
||||||
}
|
|
||||||
]
|
|
@@ -1,70 +0,0 @@
|
|||||||
type anyObject = { [key: string]: any }
|
|
||||||
|
|
||||||
type formValuesType = anyObject
|
|
||||||
|
|
||||||
type contextType = {
|
|
||||||
$values: formValuesType
|
|
||||||
$selectData: formValuesType
|
|
||||||
$initialValues: formValuesType
|
|
||||||
[key: string]: any
|
|
||||||
}
|
|
||||||
|
|
||||||
type changeItemType = {
|
|
||||||
target: string
|
|
||||||
value: any
|
|
||||||
}
|
|
||||||
|
|
||||||
interface formItemType {
|
|
||||||
label?: string
|
|
||||||
name: string
|
|
||||||
component: string
|
|
||||||
required?: boolean
|
|
||||||
props?: object
|
|
||||||
default?: any
|
|
||||||
help?: string
|
|
||||||
children?: formItemType[]
|
|
||||||
hidden?: boolean | string
|
|
||||||
hideLabel?: boolean
|
|
||||||
rules?: any[]
|
|
||||||
class?: string
|
|
||||||
style?: any
|
|
||||||
change?: changeItemType[]
|
|
||||||
footer: formItemType
|
|
||||||
}
|
|
||||||
|
|
||||||
type formItemsType = formItemType[]
|
|
||||||
|
|
||||||
type schemaType = {
|
|
||||||
labelWidth: number
|
|
||||||
labelAlign: string
|
|
||||||
size: string
|
|
||||||
footer: Object
|
|
||||||
class?: string
|
|
||||||
disabled?: boolean
|
|
||||||
hideRequiredAsterisk?: boolean
|
|
||||||
labelBold?: boolean
|
|
||||||
items: formItemsType
|
|
||||||
}
|
|
||||||
|
|
||||||
type formElement = {
|
|
||||||
name: string
|
|
||||||
component: any
|
|
||||||
icon: string
|
|
||||||
type: 'assist' | 'layout' | 'basic' | 'high'
|
|
||||||
order: number
|
|
||||||
attr: formItemsType
|
|
||||||
initialValues: formItemType
|
|
||||||
modelName: string
|
|
||||||
}
|
|
||||||
|
|
||||||
type iconSelectConfigType = { component?: any; propKey?: string; iconList?: string[] }
|
|
||||||
|
|
||||||
type $globalType = {
|
|
||||||
http?: any
|
|
||||||
getSchema?: (schemaId: string) => Promise<schemaType>
|
|
||||||
elements?: { [key: string]: formElement }
|
|
||||||
iconSelectConfig?: iconSelectConfigType
|
|
||||||
customElements?: { [key: string]: formElement }
|
|
||||||
}
|
|
||||||
|
|
||||||
export type { anyObject, schemaType, formValuesType, contextType, formItemType, formItemsType, formElement, changeItemType, $globalType, iconSelectConfigType }
|
|
@@ -1,10 +0,0 @@
|
|||||||
/* eslint-disable symbol-description */
|
|
||||||
export const $global = Symbol()
|
|
||||||
export const $schema = Symbol()
|
|
||||||
export const $formValues = Symbol()
|
|
||||||
export const $selectData = Symbol()
|
|
||||||
export const $formEvents = Symbol()
|
|
||||||
export const $initialValues = Symbol()
|
|
||||||
export const $current = Symbol()
|
|
||||||
export const $methods = Symbol()
|
|
||||||
export const $hoverKey = Symbol()
|
|
@@ -1,2 +0,0 @@
|
|||||||
export { default as selectLoadMore } from './selectLoadMore'
|
|
||||||
export { default as tableLoadMore } from './tableLoadMore'
|
|
@@ -1,23 +0,0 @@
|
|||||||
import { nextTick } from 'vue'
|
|
||||||
|
|
||||||
const loadMore = (app) => {
|
|
||||||
app.directive('selectLoadMore', {
|
|
||||||
mounted: function (el, binding) {
|
|
||||||
nextTick(() => {
|
|
||||||
const dropdown = document.querySelector(`.${binding.arg} .el-select-dropdown__wrap`) // 获取下拉框元素
|
|
||||||
|
|
||||||
if (dropdown) {
|
|
||||||
dropdown.addEventListener('scroll', function () {
|
|
||||||
// 监听元素触底
|
|
||||||
const condition = this.scrollHeight - this.scrollTop - 5 <= this.clientHeight
|
|
||||||
if (condition) {
|
|
||||||
binding.value()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
export default loadMore
|
|
@@ -1,20 +0,0 @@
|
|||||||
import { nextTick } from 'vue'
|
|
||||||
|
|
||||||
const loadMore = app => {
|
|
||||||
app.directive('tableLoadMore', {
|
|
||||||
mounted: function (el, binding) {
|
|
||||||
nextTick(() => {
|
|
||||||
const dom = el.querySelector('.el-scrollbar__wrap') // 获取下拉框元素
|
|
||||||
dom.addEventListener('scroll', function () {
|
|
||||||
// 监听元素触底
|
|
||||||
const condition = this.scrollHeight - this.scrollTop - 5 <= this.clientHeight
|
|
||||||
if (condition) {
|
|
||||||
binding.value()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
export default loadMore
|
|
@@ -1,49 +0,0 @@
|
|||||||
import { ref, watch, inject } from 'vue'
|
|
||||||
import { isEqual, debounce, throttle } from 'lodash'
|
|
||||||
import { getDataByPath } from '/admin/components/catchForm/support'
|
|
||||||
|
|
||||||
const useRequest = ({ api, debounceTime, throttleTime }) => {
|
|
||||||
const $request = inject('$request')
|
|
||||||
|
|
||||||
const data = ref([])
|
|
||||||
const loading = ref(false)
|
|
||||||
|
|
||||||
const fetchData = async () => {
|
|
||||||
loading.value = true
|
|
||||||
|
|
||||||
const res = await $request.get(api)
|
|
||||||
|
|
||||||
const resData = getDataByPath(res, api.dataPath)
|
|
||||||
|
|
||||||
data.value = resData
|
|
||||||
|
|
||||||
loading.value = false
|
|
||||||
}
|
|
||||||
|
|
||||||
const debounceRemote = debounce(fetchData, debounceTime)
|
|
||||||
const throttleRemote = throttle(fetchData, throttleTime)
|
|
||||||
|
|
||||||
const run = () => {
|
|
||||||
if (debounceTime) {
|
|
||||||
return debounceRemote()
|
|
||||||
}
|
|
||||||
if (throttleTime) {
|
|
||||||
return throttleRemote()
|
|
||||||
}
|
|
||||||
|
|
||||||
return fetchData()
|
|
||||||
}
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => api,
|
|
||||||
(newVal, oldVal) => {
|
|
||||||
if (!isEqual(newVal, oldVal)) {
|
|
||||||
run()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
return { data, loading }
|
|
||||||
}
|
|
||||||
|
|
||||||
export default useRequest
|
|
@@ -1,151 +0,0 @@
|
|||||||
import { ref, reactive, computed, watch, onMounted, inject } from 'vue'
|
|
||||||
import { isEqual, isPlainObject, debounce } from 'lodash'
|
|
||||||
import { getDataByPath } from '/admin/components/catchForm/support'
|
|
||||||
import { $selectData, $global } from '/admin/components/catchForm/config/symbol'
|
|
||||||
|
|
||||||
const useSelect = (props, emits) => {
|
|
||||||
const selectData = inject($selectData)
|
|
||||||
|
|
||||||
const { request } = inject($global)
|
|
||||||
|
|
||||||
const selectVal = computed({
|
|
||||||
get() {
|
|
||||||
return props.modelValue
|
|
||||||
},
|
|
||||||
set(val) {
|
|
||||||
emits('update:modelValue', val)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const currentOptions = ref([])
|
|
||||||
|
|
||||||
const loading = ref(false)
|
|
||||||
|
|
||||||
const isMax = ref(false)
|
|
||||||
|
|
||||||
const stateParams = reactive({
|
|
||||||
pageNum: 1,
|
|
||||||
pageSize: 10
|
|
||||||
// filters: {},
|
|
||||||
})
|
|
||||||
|
|
||||||
const fetchData = debounce(async () => {
|
|
||||||
if (isMax.value || !props.api) return
|
|
||||||
|
|
||||||
const { url, method, data, dataPath } = props.api
|
|
||||||
|
|
||||||
loading.value = true
|
|
||||||
|
|
||||||
let res = null
|
|
||||||
if (method === 'get') {
|
|
||||||
res = await request.get(url, data)
|
|
||||||
} else {
|
|
||||||
res = await request.post(url, data)
|
|
||||||
}
|
|
||||||
|
|
||||||
const resData = getDataByPath(res, dataPath)
|
|
||||||
|
|
||||||
if (resData.length !== stateParams.pageSize) {
|
|
||||||
isMax.value = true
|
|
||||||
}
|
|
||||||
|
|
||||||
const resDataParse = resData.map(item => {
|
|
||||||
if (isPlainObject(item)) {
|
|
||||||
return item
|
|
||||||
}
|
|
||||||
return { label: item, value: item }
|
|
||||||
})
|
|
||||||
|
|
||||||
currentOptions.value = [...currentOptions.value, ...resDataParse]
|
|
||||||
|
|
||||||
stateParams.pageNum++
|
|
||||||
|
|
||||||
loading.value = false
|
|
||||||
}, 300)
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
const { mode, options } = props
|
|
||||||
if (mode === 'static') {
|
|
||||||
currentOptions.value = options
|
|
||||||
isMax.value = true
|
|
||||||
}
|
|
||||||
if (mode === 'remote') {
|
|
||||||
fetchData()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => props.api,
|
|
||||||
(newVal, oldVal) => {
|
|
||||||
// bug:这里发生只api内存地址变化,实际api无变化也会触发监听。暂时使用深层对比解决
|
|
||||||
if (!isEqual(newVal, oldVal)) {
|
|
||||||
currentOptions.value = []
|
|
||||||
isMax.value = false
|
|
||||||
stateParams.pageNum = 1
|
|
||||||
fetchData()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
watch(currentOptions, newVal => {
|
|
||||||
const { autoSelectedFirst, modelValue, valueKey, multiple, sort } = props
|
|
||||||
// 自动选中第一项
|
|
||||||
if (autoSelectedFirst && newVal.length && !modelValue?.length) {
|
|
||||||
const firstValue = multiple ? [newVal[0][valueKey]] : newVal[0][valueKey]
|
|
||||||
emits('update:modelValue', firstValue)
|
|
||||||
selectChange(firstValue)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (sort) {
|
|
||||||
currentOptions.value = currentOptions.value.sort((a, b) => a.value - b.value)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => props.options,
|
|
||||||
newVal => {
|
|
||||||
if (props.mode === 'static') {
|
|
||||||
currentOptions.value = newVal
|
|
||||||
}
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => props.mode,
|
|
||||||
newVal => {
|
|
||||||
if (newVal === 'static') {
|
|
||||||
currentOptions.value = props.options
|
|
||||||
}
|
|
||||||
if (newVal === 'remote') {
|
|
||||||
currentOptions.value = []
|
|
||||||
fetchData()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
const selectChange = val => {
|
|
||||||
const { valueKey, multiple, name } = props
|
|
||||||
|
|
||||||
let valueData = {}
|
|
||||||
|
|
||||||
if (multiple) {
|
|
||||||
// 多选就过滤出vals对应的源数据
|
|
||||||
valueData = currentOptions.value.filter(item => {
|
|
||||||
return val.includes(item[valueKey])
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
// 单选找到单项对应的源数据
|
|
||||||
valueData = currentOptions.value.find(item => item[valueKey] === val)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 如果接到了selectData,给顶级组件保存当前值对应得数据源
|
|
||||||
if (selectData) {
|
|
||||||
selectData[name] = valueData
|
|
||||||
}
|
|
||||||
emits('onChangeSelect', selectData)
|
|
||||||
}
|
|
||||||
|
|
||||||
return { selectVal, selectChange, currentOptions, loading, fetchData, isMax }
|
|
||||||
}
|
|
||||||
|
|
||||||
export default useSelect
|
|
@@ -1,69 +0,0 @@
|
|||||||
import type { App } from 'vue'
|
|
||||||
import CatchForm from './CatchForm.vue'
|
|
||||||
import { $global } from '/admin/components/catchForm/config/symbol'
|
|
||||||
import * as Directives from '/admin/components/catchForm/directive'
|
|
||||||
|
|
||||||
import type {
|
|
||||||
anyObject,
|
|
||||||
schemaType,
|
|
||||||
formValuesType,
|
|
||||||
contextType,
|
|
||||||
formItemType,
|
|
||||||
formItemsType,
|
|
||||||
formElement,
|
|
||||||
changeItemType,
|
|
||||||
$globalType
|
|
||||||
} from '/admin/components/catchForm/config/commonType'
|
|
||||||
import components from '/admin/components/catchForm/components'
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 合并 custom elements
|
|
||||||
* @param customElements
|
|
||||||
* @returns
|
|
||||||
*/
|
|
||||||
const handleMergeElements = (customElements: { [key: string]: formElement }) => {
|
|
||||||
const mergeElements: { [key: string]: formElement } = {}
|
|
||||||
|
|
||||||
Object.entries(components).forEach(([key, value]) => {
|
|
||||||
const customData = customElements[key]
|
|
||||||
if (customData) {
|
|
||||||
return (mergeElements[key] = {
|
|
||||||
...value,
|
|
||||||
component: customData.component,
|
|
||||||
modelName: customData.modelName || 'modelValue',
|
|
||||||
attr: customData.attr || value.attr
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
return (mergeElements[key] = { ...value, modelName: 'modelValue' })
|
|
||||||
})
|
|
||||||
|
|
||||||
return mergeElements
|
|
||||||
}
|
|
||||||
|
|
||||||
type $optionsType = {
|
|
||||||
http?: any
|
|
||||||
// elements?: { [key: string]: formElement }
|
|
||||||
// iconSelectConfig?: iconSelectConfigType
|
|
||||||
customElements?: { [key: string]: formElement }
|
|
||||||
}
|
|
||||||
|
|
||||||
const install = function (app: App<Element>, options: $optionsType = {}) {
|
|
||||||
const { http, customElements = {} } = options
|
|
||||||
|
|
||||||
app.provide($global, {
|
|
||||||
http: http,
|
|
||||||
elements: handleMergeElements(customElements)
|
|
||||||
})
|
|
||||||
// 注册指令
|
|
||||||
Object.values(Directives).forEach(fn => fn(app))
|
|
||||||
}
|
|
||||||
|
|
||||||
export { CatchForm }
|
|
||||||
|
|
||||||
export type { anyObject, schemaType, formValuesType, contextType, formItemType, formItemsType, formElement, changeItemType, $globalType }
|
|
||||||
|
|
||||||
export function bootstrapCatchForm(app: App, options:Object = {}) {
|
|
||||||
install(app, options)
|
|
||||||
app.component('CatchForm', CatchForm)
|
|
||||||
}
|
|
@@ -1,163 +0,0 @@
|
|||||||
/* eslint-disable no-new-func */
|
|
||||||
import { cloneDeep, isString, isPlainObject, isArray } from 'lodash'
|
|
||||||
import type { formValuesType } from '/admin/components/catchForm/config/commonType'
|
|
||||||
import type { formItemType, formItemsType } from '/admin/components/catchForm/config/commonType'
|
|
||||||
import { isEqual } from 'lodash'
|
|
||||||
import type { anyObject, contextType} from '/admin/components/catchForm/config/commonType'
|
|
||||||
|
|
||||||
type handleLinkagesType = (obj: { newVal: Object; oldVal: Object; formValues: anyObject; formItems: formItemsType }) => void
|
|
||||||
|
|
||||||
// 模板转换函数,将一个由双大括号包裹的字符串,转化为js表达式并返回结果(context限制变量范围)
|
|
||||||
const templateParse = (str: string, context: contextType) => {
|
|
||||||
if (!str) return str
|
|
||||||
if (typeof str !== 'string') return str
|
|
||||||
|
|
||||||
const template = str.match(/{{(.+?)}}/)
|
|
||||||
if (template) {
|
|
||||||
try {
|
|
||||||
const parse = new Function(Object.keys(context).join(','), 'return ' + template[1])
|
|
||||||
|
|
||||||
return parse(...Object.values(context))
|
|
||||||
} catch (e) {
|
|
||||||
// console.log(str, '模板转换错误:', e)
|
|
||||||
return str
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
return str
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const deepParse = (prop: any, context: contextType): any => {
|
|
||||||
const $values = context.$values
|
|
||||||
|
|
||||||
if (isString(prop)) {
|
|
||||||
return templateParse(prop, context)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isPlainObject(prop)) {
|
|
||||||
return Object.keys(prop).reduce((all, key) => {
|
|
||||||
const itemContext = { ...context }
|
|
||||||
|
|
||||||
if (prop.name && $values) {
|
|
||||||
itemContext.$val = getDataByPath($values, prop.name)
|
|
||||||
itemContext.$select = context.$selectData[prop.name]
|
|
||||||
}
|
|
||||||
|
|
||||||
return { ...all, [key]: deepParse(prop[key], itemContext) }
|
|
||||||
}, {})
|
|
||||||
}
|
|
||||||
if (isArray(prop)) {
|
|
||||||
return prop.map(item => {
|
|
||||||
return deepParse(item, context)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
return prop
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleLinkages: handleLinkagesType = ({ newVal, oldVal, formValues, formItems }) => {
|
|
||||||
for (const item of formItems) {
|
|
||||||
const newValue = getDataByPath(newVal, item.name)
|
|
||||||
const oldValue = getDataByPath(oldVal, item.name)
|
|
||||||
|
|
||||||
if (item.change && !isEqual(newValue, oldValue)) {
|
|
||||||
let temp = cloneDeep(formValues.value)
|
|
||||||
item.change.forEach(({ target, value }) => {
|
|
||||||
temp = setDataByPath(temp, target, value)
|
|
||||||
})
|
|
||||||
formValues.value = temp
|
|
||||||
}
|
|
||||||
|
|
||||||
if (item.children && item.component !== 'FormList') {
|
|
||||||
handleLinkages({
|
|
||||||
newVal,
|
|
||||||
oldVal,
|
|
||||||
formValues,
|
|
||||||
formItems: item.children
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const recursionDelete = (items: formItemsType, callback: (item: formItemType) => boolean): formItemsType => {
|
|
||||||
const data = items.filter(callback)
|
|
||||||
return data.map(item => {
|
|
||||||
if (item.children) {
|
|
||||||
return {
|
|
||||||
...item,
|
|
||||||
children: recursionDelete(item.children, callback)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return item
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const setDataByPath = (object: formValuesType, path: string, value: any) => {
|
|
||||||
const cloneObj = cloneDeep(object)
|
|
||||||
// 将路径字符串分割成路径数组
|
|
||||||
const pathArray = path.split('.')
|
|
||||||
// 递归函数,用于在对象的深层级找到要修改的位置并更新其值
|
|
||||||
function update(obj: formValuesType, pathArray: string[], value: any) {
|
|
||||||
// 如果路径数组为空,表示已经到达了最后一级,更新值并返回
|
|
||||||
if (pathArray.length === 1) {
|
|
||||||
obj[pathArray[0]] = value
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取当前路径的第一个部分
|
|
||||||
const currentKey = pathArray.shift()
|
|
||||||
|
|
||||||
if (currentKey) {
|
|
||||||
// 如果当前键不存在,则创建一个空对象
|
|
||||||
if (!obj[currentKey]) {
|
|
||||||
obj[currentKey] = {}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 递归调用更新函数
|
|
||||||
update(obj[currentKey], pathArray, value)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 调用递归函数
|
|
||||||
update(cloneObj, pathArray, value)
|
|
||||||
|
|
||||||
// 返回更新后的对象
|
|
||||||
return cloneObj
|
|
||||||
}
|
|
||||||
|
|
||||||
const isRegexString = (str: string) => {
|
|
||||||
const regexMetaCharacters = /[.*+?^${}()|[\]\\]/
|
|
||||||
|
|
||||||
return regexMetaCharacters.test(str)
|
|
||||||
}
|
|
||||||
|
|
||||||
const getRandomId = (length: number) => {
|
|
||||||
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
|
|
||||||
let randomId = ''
|
|
||||||
|
|
||||||
for (let i = 0; i < length; i++) {
|
|
||||||
const randomIndex = Math.floor(Math.random() * characters.length)
|
|
||||||
randomId += characters.charAt(randomIndex)
|
|
||||||
}
|
|
||||||
|
|
||||||
return randomId
|
|
||||||
}
|
|
||||||
|
|
||||||
const getDataByPath = (obj: anyObject, path: string) => {
|
|
||||||
// 使用正则表达式分割路径字符串
|
|
||||||
const keys = path.split('.')
|
|
||||||
|
|
||||||
// 遍历路径,逐层深入对象
|
|
||||||
let result = obj
|
|
||||||
for (const key of keys) {
|
|
||||||
if (result && typeof result === 'object' && key in result) {
|
|
||||||
result = result[key]
|
|
||||||
} else {
|
|
||||||
// 如果路径无效,返回 undefined 或者其他默认值
|
|
||||||
return undefined
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return result
|
|
||||||
}
|
|
||||||
|
|
||||||
export { setDataByPath, recursionDelete, isRegexString, getRandomId, handleLinkages, getDataByPath, deepParse}
|
|
@@ -1,34 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div v-if="notNeedPopover()">
|
|
||||||
{{ content }}
|
|
||||||
</div>
|
|
||||||
<el-popover v-else effect="dark" placement="top-start" :width="300" trigger="hover" :content="content">
|
|
||||||
<template #reference>
|
|
||||||
{{ ellipsis(length) }}
|
|
||||||
</template>
|
|
||||||
</el-popover>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
interface Prop {
|
|
||||||
content?: string
|
|
||||||
length: number
|
|
||||||
}
|
|
||||||
|
|
||||||
const props = defineProps<Prop>()
|
|
||||||
|
|
||||||
// need popover
|
|
||||||
const notNeedPopover = () => {
|
|
||||||
const length = props.content ? props.content.length : 0
|
|
||||||
return length <= 20
|
|
||||||
}
|
|
||||||
|
|
||||||
// 截取
|
|
||||||
const ellipsis = (length: number): string => {
|
|
||||||
if (props.content) {
|
|
||||||
return props.content.substring(0, length) + '...'
|
|
||||||
}
|
|
||||||
|
|
||||||
return ''
|
|
||||||
}
|
|
||||||
</script>
|
|
@@ -1,62 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-switch @change="enabeldField" :active-value="activeValue" :inactive-value="inactiveValue" :model-value="modelValue" :loading="loading" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { useEnabled } from '/admin/composables/curd/useEnabled'
|
|
||||||
import { Status } from '/admin/enum/app'
|
|
||||||
import { ref, inject } from 'vue'
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
api: {
|
|
||||||
required: true,
|
|
||||||
type: String
|
|
||||||
},
|
|
||||||
id: {
|
|
||||||
required: false,
|
|
||||||
type: [String, Number]
|
|
||||||
},
|
|
||||||
field: {
|
|
||||||
require: false,
|
|
||||||
type: String,
|
|
||||||
default: 'status'
|
|
||||||
},
|
|
||||||
refresh: {
|
|
||||||
type: Function,
|
|
||||||
defaulat: null,
|
|
||||||
required: false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const modelValue = defineModel()
|
|
||||||
// @ts-ignore
|
|
||||||
const { enabled, success, loading, afterEnabled } = useEnabled()
|
|
||||||
|
|
||||||
const activeValue = ref<boolean | number | string>()
|
|
||||||
const inactiveValue = ref<boolean | number | string>()
|
|
||||||
|
|
||||||
if (typeof modelValue.value === 'boolean') {
|
|
||||||
activeValue.value = true
|
|
||||||
inactiveValue.value = false
|
|
||||||
} else {
|
|
||||||
activeValue.value = Status.ENABLE
|
|
||||||
inactiveValue.value = Status.DISABLE
|
|
||||||
}
|
|
||||||
|
|
||||||
success(() => {
|
|
||||||
modelValue.value = modelValue.value === activeValue.value ? inactiveValue.value : activeValue.value
|
|
||||||
})
|
|
||||||
|
|
||||||
afterEnabled.value = () => {
|
|
||||||
if (props.refresh) {
|
|
||||||
props.refresh()
|
|
||||||
} else {
|
|
||||||
const refresh = inject('refresh') as Function
|
|
||||||
refresh()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const enabeldField = () => {
|
|
||||||
enabled(props.api, props.id as string | number, { field: props.field })
|
|
||||||
}
|
|
||||||
</script>
|
|
@@ -1,115 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="grid w-full grid-cols-1 gap-4 pl-2 sm:grid-cols-3 lg:grid-cols-6 place-content-between">
|
|
||||||
<template v-for="(item, k) in fields" :key="k">
|
|
||||||
<div v-if="item.show && (k < 3 || expand)" class="align-items-center justify-items-center">
|
|
||||||
<el-form-item :label="item.label" v-if="item.type === 'input'">
|
|
||||||
<el-input :placeholder="item.placeholder" v-model="query[item.name]" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item :label="item.label" v-if="item.type === 'select'">
|
|
||||||
<Select :api="item.api" :options="item.options" v-model="query[item.name]" :placeholder="item.placeholder" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item :label="item.label" v-if="item.type === 'input-number'">
|
|
||||||
<el-input-number v-model="query[item.name]" :placeholder="item.placeholder" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item :label="item.label" v-if="item.type === 'date'">
|
|
||||||
<el-date-picker type="date" v-model="query[item.name]" :placeholder="item.placeholder" clearable value-format="YYYY-MM-DD" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item :label="item.label" v-if="item.type === 'datetime'">
|
|
||||||
<el-date-picker type="datetime" v-model="query[item.name]" :placeholder="item.placeholder" clearable value-format="YYYY-MM-DD HH:mm:ss" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item :label="item.label" v-if="item.type === 'tree'">
|
|
||||||
<el-tree-select v-model="query[item.name]" value-key="id" :placeholder="item.placeholder" clearable :data="item.options" check-strictly :props="item.props" />
|
|
||||||
</el-form-item>
|
|
||||||
<template v-if="item.type === 'range'">
|
|
||||||
<div class="flex flex-wrap">
|
|
||||||
<el-form-item :label="item.label">
|
|
||||||
<div class="flex flex-wrap gap-x-2">
|
|
||||||
<div v-for="(sitem, key) in item.children" :key="key">
|
|
||||||
<el-input v-model="query[item.name]" :placeholder="item.placeholder" v-if="sitem.type === 'input'" clearable />
|
|
||||||
<Select :api="item.api" :options="item.options" v-model="query[item.name]" :placeholder="item.placeholder" clearable v-if="item.type === 'select'" />
|
|
||||||
<el-input-number v-model="query[item.name]" :placeholder="item.placeholder" v-if="sitem.type === 'input-number'" clearable />
|
|
||||||
<el-date-picker type="date" v-model="query[item.name]" :placeholder="item.placeholder" v-if="sitem.type === 'date'" clearable value-format="YYYY-MM-DD" />
|
|
||||||
<el-date-picker type="datetime" v-model="query[item.name]" :placeholder="item.placeholder" v-if="sitem.type === 'datetime'" clearable value-format="YYYY-MM-DD HH:mm:ss" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<div class="flex justify-end col-end-0 sm:col-end-5 lg:col-end-8">
|
|
||||||
<el-button type="primary" @click="search"> {{ t('system.search') }} </el-button>
|
|
||||||
<el-button @click="reset"> {{ t('system.reset') }} </el-button>
|
|
||||||
<el-button @click="expandSearch()" v-if="fields.length > 3" text circle>
|
|
||||||
<Icon :name="expand ? 'chevron-up' : 'chevron-down'" className="w-4 h-4" />
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script lang="ts" setup>
|
|
||||||
// @ts-nocheck
|
|
||||||
import { reactive, ref } from 'vue'
|
|
||||||
import { isBoolean, t } from '/admin/support/helper'
|
|
||||||
type itemType = 'input' | 'select' | 'input-number' | 'date' | 'datetime' | 'range'
|
|
||||||
interface Option {
|
|
||||||
label: string
|
|
||||||
value: string | number
|
|
||||||
}
|
|
||||||
interface field {
|
|
||||||
type: itemType
|
|
||||||
label: string
|
|
||||||
name: string
|
|
||||||
api?: string
|
|
||||||
placeholder?: string
|
|
||||||
default?: any
|
|
||||||
options?: Array<Option>
|
|
||||||
children?: Array<field>
|
|
||||||
show?: boolean
|
|
||||||
props?: Object // 树形 props
|
|
||||||
}
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
fields: {
|
|
||||||
type: Array<field>,
|
|
||||||
default: () => {
|
|
||||||
return []
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const emits = defineEmits(['search', 'reset'])
|
|
||||||
const query = ref<Object>({})
|
|
||||||
const expand = ref<boolean>(false)
|
|
||||||
|
|
||||||
const _fields = ref<Array<field>>(props.fields)
|
|
||||||
_fields.value = _fields.value?.map(field => {
|
|
||||||
if (!field.placeholder) {
|
|
||||||
field.placeholder = (field.type === 'select' ? '请选择' : '请输入') + field.label
|
|
||||||
}
|
|
||||||
field.show = isBoolean(field.show) ? field.show : true
|
|
||||||
return reactive(field)
|
|
||||||
})
|
|
||||||
|
|
||||||
const search = () => {
|
|
||||||
emits('search', query.value, true)
|
|
||||||
}
|
|
||||||
|
|
||||||
const reset = () => {
|
|
||||||
query.value = {}
|
|
||||||
emits('reset')
|
|
||||||
}
|
|
||||||
const expandSearch = () => {
|
|
||||||
expand.value = !expand.value
|
|
||||||
}
|
|
||||||
|
|
||||||
defineExpose({ reset })
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
:deep(.el-form-item__label) {
|
|
||||||
font-size: 14px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-form-item) {
|
|
||||||
margin-bottom: 0px !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
@@ -1,63 +0,0 @@
|
|||||||
export type columnType = 'expand' | 'selection' | 'index' | 'operate'
|
|
||||||
export type fixed = 'fiexed' | 'right' | 'left'
|
|
||||||
export interface Column {
|
|
||||||
type?: columnType // 类型 expand select index
|
|
||||||
label?: string
|
|
||||||
prop?: string
|
|
||||||
'min-width'?: string | number
|
|
||||||
width?: number | string
|
|
||||||
slot?: 'string'
|
|
||||||
header: 'string' // 表头插槽名称
|
|
||||||
align?: string
|
|
||||||
fixed?: fixed
|
|
||||||
sortable?: boolean | string
|
|
||||||
'sort-method'?: Function
|
|
||||||
'sort-by'?: Function
|
|
||||||
resizable?: boolean
|
|
||||||
formatter?: Function // function(row, column, cellValue, index)
|
|
||||||
'header-align'?: string
|
|
||||||
'class-name'?: string
|
|
||||||
selectable?: Function // function(row, index)
|
|
||||||
show: boolean
|
|
||||||
index?: number | Function // 如果设置了 type=index,可以通过传递 index 属性来自定义索引
|
|
||||||
children?: Array<Column> // 多级表头
|
|
||||||
filter?:Function,
|
|
||||||
ellipsis?:boolean|number, // 当文字太多时,可以使用省略文字
|
|
||||||
switch?: boolean, // swith 字段状态切换
|
|
||||||
switchRefresh?: Function, // switch refresh 刷新
|
|
||||||
// 图片预览
|
|
||||||
image?: boolean,
|
|
||||||
preview: boolean, // 默认不预览
|
|
||||||
// 标签
|
|
||||||
tags?: boolean|Array<number>,
|
|
||||||
// 链接🔗
|
|
||||||
link?:boolean,
|
|
||||||
link_text?: string,
|
|
||||||
// 操作
|
|
||||||
update?: boolean, // 编辑操作
|
|
||||||
destroy?: boolean // 删除操作
|
|
||||||
}
|
|
||||||
|
|
||||||
// 分页
|
|
||||||
export interface paginate {
|
|
||||||
layout:string,
|
|
||||||
limit: number,
|
|
||||||
page: number,
|
|
||||||
limits: Array<number>,
|
|
||||||
total: number,
|
|
||||||
changePage: Function,
|
|
||||||
changeLimit: Function
|
|
||||||
}
|
|
||||||
|
|
||||||
// option
|
|
||||||
export interface Option {
|
|
||||||
label: string,
|
|
||||||
value: string|number
|
|
||||||
}
|
|
||||||
// 搜索 item
|
|
||||||
export interface SItem {
|
|
||||||
type: string,
|
|
||||||
name: string,
|
|
||||||
default: any,
|
|
||||||
options: Array<Option>
|
|
||||||
}
|
|
@@ -1,48 +0,0 @@
|
|||||||
import { defineComponent } from 'vue'
|
|
||||||
import { ElTableColumn } from 'element-plus'
|
|
||||||
import { Column } from './ctable'
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'DynamicTable',
|
|
||||||
props: {
|
|
||||||
columns: {
|
|
||||||
type: Array<Column>,
|
|
||||||
default: []
|
|
||||||
},
|
|
||||||
api: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
setup(props, { slots }) {
|
|
||||||
const renderColumns = (columns: Array<Column>) => {
|
|
||||||
return columns.map(column => {
|
|
||||||
if (column.children) {
|
|
||||||
return (
|
|
||||||
<ElTableColumn label="{column.label}" key="{column.label}">
|
|
||||||
{renderColumns(column.children)}
|
|
||||||
</ElTableColumn>
|
|
||||||
)
|
|
||||||
} else {
|
|
||||||
return (
|
|
||||||
<ElTableColumn label="{column.label}" prop="{column.prop}" key="{column.prop}">
|
|
||||||
{{
|
|
||||||
default: (row: any) => {
|
|
||||||
// 使用默认插槽
|
|
||||||
return row[column.prop as string]
|
|
||||||
},
|
|
||||||
customSlot: (row: any) => {
|
|
||||||
// 使用具名插槽 customSlot
|
|
||||||
return slots.customSlot ? slots.customSlot({ column, row }) : null
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
</ElTableColumn>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
return renderColumns(props.columns)
|
|
||||||
// return () => <ElTable data="{props.data}">{renderColumns(props.columns)}</ElTable>
|
|
||||||
}
|
|
||||||
})
|
|
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user