This commit is contained in:
神仙都没用 2025-02-22 16:55:45 +08:00
parent e31bce93d1
commit 440c103fc1
8 changed files with 289 additions and 31 deletions

View File

@ -1095,6 +1095,137 @@ function open() {
```
## 选择表格 示例
```vue
<template>
<div class="scope">
<div class="h">
<el-tag size="small" effect="dark" disable-transitions>select-table</el-tag>
<span>选择表格</span>
</div>
<div class="c">
<el-button @click="open">预览</el-button>
<demo-code :files="['crud/select-table.vue']" />
<!-- 自定义表格组件 -->
<cl-form ref="Form" />
</div>
<div class="f">
<span class="date">2025-02-07</span>
</div>
</div>
</template>
<script setup lang="ts">
import { useForm } from '@cool-vue/crud';
import { useCool } from '/@/cool';
import UserSelect from '/$/user/components/user-select.vue';
const { service } = useCool();
const Form = useForm();
const columns = [
{
label: '头像',
prop: 'headImg',
component: {
name: 'cl-avatar'
}
},
{
label: '昵称',
prop: 'nickName'
},
{
label: '创建时间',
prop: 'createTime'
}
];
function open() {
Form.value?.open({
width: '800px',
title: '选择表格',
items: [
{
label: '多选 - default',
prop: 'a',
value: [],
component: {
vm: UserSelect,
props: {
multiple: true
}
},
span: 12
},
{
label: '单选 - default',
prop: 'b',
component: {
name: 'cl-select-table',
props: {
pickerType: 'default',
multiple: false,
columns,
service: service.base.sys.user
}
},
span: 12
},
{
label: '多选 - text',
prop: 'c',
value: [],
component: {
name: 'cl-select-table',
props: {
pickerType: 'text',
multiple: true,
columns,
service: service.base.sys.user
}
},
span: 12
},
{
label: '单选 - text',
prop: 'd',
component: {
name: 'cl-select-table',
props: {
pickerType: 'text',
multiple: false,
columns,
service: service.base.sys.user
}
},
span: 12
},
{
label: '多选 - table',
prop: 'e',
value: [],
component: {
name: 'cl-select-table',
props: {
pickerType: 'table',
multiple: true,
columns,
service: service.base.sys.user
}
}
}
]
});
}
</script>
```
## Service 配置 示例
```vue
@ -1279,3 +1410,71 @@ function open() {
</script>
```
## 选择成员 示例
```vue
<template>
<div class="scope">
<div class="h">
<el-tag size="small" effect="dark" disable-transitions>user-select</el-tag>
<span>选择成员</span>
</div>
<div class="c">
<el-button @click="open">预览</el-button>
<demo-code :files="['crud/user-select.vue']" />
<!-- 自定义表格组件 -->
<cl-form ref="Form" />
</div>
<div class="f">
<span class="date">2025-02-07</span>
</div>
</div>
</template>
<script setup lang="ts">
import { useForm } from '@cool-vue/crud';
const Form = useForm();
function open() {
Form.value?.open({
title: '选择成员',
items: [
{
label: '单选',
prop: 'userId',
component: {
name: 'cl-user-select',
props: {
multiple: false,
onChange(val) {
console.log(val);
}
}
},
required: true
},
{
label: '多选',
prop: 'userIds',
component: {
name: 'cl-user-select',
props: {
multiple: true,
onChange(val) {
console.log(val);
}
}
},
required: true
}
]
});
}
</script>
```

View File

@ -1280,7 +1280,6 @@ function open() {
}
},
{
label: '年龄',
prop: 'age',
component: {
name: 'el-input-number'
@ -1291,7 +1290,9 @@ function open() {
],
on: {
// 打开时触发
open() {},
open() {
console.log(Form.value?.validateField);
},
// 关闭时触发。当配置该方法时,关闭事件会被阻断,使用 done() 关闭窗口
close(action, done) {

View File

@ -13,7 +13,7 @@
"format": "prettier --write src/"
},
"dependencies": {
"@cool-vue/crud": "^8.0.1",
"@cool-vue/crud": "^8.0.2",
"@element-plus/icons-vue": "^2.3.1",
"@vueuse/core": "^12.5.0",
"@wangeditor/editor": "^5.1.23",

View File

@ -1,6 +1,6 @@
{
"name": "@cool-vue/crud",
"version": "8.0.1",
"version": "8.0.2",
"private": false,
"main": "./dist/index.umd.js",
"module": "./dist/index.es.js",

View File

@ -222,15 +222,17 @@ const ClContextMenu = defineComponent({
"is-active": ids.value.includes(id),
"is-ellipsis": e.ellipsis ?? true,
"is-disabled": e.disabled
}}>
}}
onClick={(ev: MouseEvent) => {
rowClick(e, id);
ev.stopPropagation();
}}
>
{/* 前缀图标 */}
{e.prefixIcon && <ElIcon>{h(toRaw(e.prefixIcon))}</ElIcon>}
{/* 标题 */}
<span
onClick={() => {
rowClick(e, id);
}}>
<span>
{e.label}
</span>

26
pnpm-lock.yaml generated
View File

@ -9,8 +9,8 @@ importers:
.:
dependencies:
'@cool-vue/crud':
specifier: ^8.0.1
version: 8.0.1(typescript@5.5.4)
specifier: ^8.0.2
version: 8.0.2(typescript@5.5.4)
'@element-plus/icons-vue':
specifier: ^2.3.1
version: 2.3.1(vue@3.5.13(typescript@5.5.4))
@ -331,8 +331,8 @@ packages:
resolution: {integrity: sha512-Y3IR1cRnOxOCDvMmNiym7XpXQ93iGDDPHx+Zj+NM+rg0fBaShfQLkg+hKPaZCEvg5N/LeCo4+Rj/i3FuJsIQaw==}
engines: {node: '>=6.9.0'}
'@cool-vue/crud@8.0.1':
resolution: {integrity: sha512-qITCLcmc5gCiqF2J2I5KsiywqTc/+4Umqy9MBx1dFsYvYfrGcqoRcybcz8cTO4CEDyIv0icymt4PRuKOf01igw==}
'@cool-vue/crud@8.0.2':
resolution: {integrity: sha512-7fXGfn1Li0n6vtHSj40mu2VuZV2L/T/HDllJXHMKq2ODo9EAttjcuTN/Z8b3KuOFHYpWp5iN+FqIzRNGEDxjUQ==}
'@cool-vue/vite-plugin@8.0.3':
resolution: {integrity: sha512-5vxH/EyPXOJvKClllhaTZUeWh9XRJZwZJxyRlHuK2nAuD+pQxTXZ85WB4QPociMrJcOC8uZ/97EdrS4yG2Jv3Q==}
@ -679,42 +679,36 @@ packages:
engines: {node: '>= 10.0.0'}
cpu: [arm]
os: [linux]
libc: [glibc]
'@parcel/watcher-linux-arm-musl@2.5.1':
resolution: {integrity: sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==}
engines: {node: '>= 10.0.0'}
cpu: [arm]
os: [linux]
libc: [musl]
'@parcel/watcher-linux-arm64-glibc@2.5.1':
resolution: {integrity: sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==}
engines: {node: '>= 10.0.0'}
cpu: [arm64]
os: [linux]
libc: [glibc]
'@parcel/watcher-linux-arm64-musl@2.5.1':
resolution: {integrity: sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==}
engines: {node: '>= 10.0.0'}
cpu: [arm64]
os: [linux]
libc: [musl]
'@parcel/watcher-linux-x64-glibc@2.5.1':
resolution: {integrity: sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==}
engines: {node: '>= 10.0.0'}
cpu: [x64]
os: [linux]
libc: [glibc]
'@parcel/watcher-linux-x64-musl@2.5.1':
resolution: {integrity: sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==}
engines: {node: '>= 10.0.0'}
cpu: [x64]
os: [linux]
libc: [musl]
'@parcel/watcher-win32-arm64@2.5.1':
resolution: {integrity: sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==}
@ -792,61 +786,51 @@ packages:
resolution: {integrity: sha512-A4iphFGNkWRd+5m3VIGuqHnG3MVnqKe7Al57u9mwgbyZ2/xF9Jio72MaY7xxh+Y87VAHmGQr73qoKL9HPbXj1g==}
cpu: [arm]
os: [linux]
libc: [glibc]
'@rollup/rollup-linux-arm-musleabihf@4.34.8':
resolution: {integrity: sha512-S0lqKLfTm5u+QTxlFiAnb2J/2dgQqRy/XvziPtDd1rKZFXHTyYLoVL58M/XFwDI01AQCDIevGLbQrMAtdyanpA==}
cpu: [arm]
os: [linux]
libc: [musl]
'@rollup/rollup-linux-arm64-gnu@4.34.8':
resolution: {integrity: sha512-jpz9YOuPiSkL4G4pqKrus0pn9aYwpImGkosRKwNi+sJSkz+WU3anZe6hi73StLOQdfXYXC7hUfsQlTnjMd3s1A==}
cpu: [arm64]
os: [linux]
libc: [glibc]
'@rollup/rollup-linux-arm64-musl@4.34.8':
resolution: {integrity: sha512-KdSfaROOUJXgTVxJNAZ3KwkRc5nggDk+06P6lgi1HLv1hskgvxHUKZ4xtwHkVYJ1Rep4GNo+uEfycCRRxht7+Q==}
cpu: [arm64]
os: [linux]
libc: [musl]
'@rollup/rollup-linux-loongarch64-gnu@4.34.8':
resolution: {integrity: sha512-NyF4gcxwkMFRjgXBM6g2lkT58OWztZvw5KkV2K0qqSnUEqCVcqdh2jN4gQrTn/YUpAcNKyFHfoOZEer9nwo6uQ==}
cpu: [loong64]
os: [linux]
libc: [glibc]
'@rollup/rollup-linux-powerpc64le-gnu@4.34.8':
resolution: {integrity: sha512-LMJc999GkhGvktHU85zNTDImZVUCJ1z/MbAJTnviiWmmjyckP5aQsHtcujMjpNdMZPT2rQEDBlJfubhs3jsMfw==}
cpu: [ppc64]
os: [linux]
libc: [glibc]
'@rollup/rollup-linux-riscv64-gnu@4.34.8':
resolution: {integrity: sha512-xAQCAHPj8nJq1PI3z8CIZzXuXCstquz7cIOL73HHdXiRcKk8Ywwqtx2wrIy23EcTn4aZ2fLJNBB8d0tQENPCmw==}
cpu: [riscv64]
os: [linux]
libc: [glibc]
'@rollup/rollup-linux-s390x-gnu@4.34.8':
resolution: {integrity: sha512-DdePVk1NDEuc3fOe3dPPTb+rjMtuFw89gw6gVWxQFAuEqqSdDKnrwzZHrUYdac7A7dXl9Q2Vflxpme15gUWQFA==}
cpu: [s390x]
os: [linux]
libc: [glibc]
'@rollup/rollup-linux-x64-gnu@4.34.8':
resolution: {integrity: sha512-8y7ED8gjxITUltTUEJLQdgpbPh1sUQ0kMTmufRF/Ns5tI9TNMNlhWtmPKKHCU0SilX+3MJkZ0zERYYGIVBYHIA==}
cpu: [x64]
os: [linux]
libc: [glibc]
'@rollup/rollup-linux-x64-musl@4.34.8':
resolution: {integrity: sha512-SCXcP0ZpGFIe7Ge+McxY5zKxiEI5ra+GT3QRxL0pMMtxPfpyLAKleZODi1zdRHkz5/BhueUrYtYVgubqe9JBNQ==}
cpu: [x64]
os: [linux]
libc: [musl]
'@rollup/rollup-win32-arm64-msvc@4.34.8':
resolution: {integrity: sha512-YHYsgzZgFJzTRbth4h7Or0m5O74Yda+hLin0irAIobkLQFRQd1qWmnoVfwmKm9TXIZVAD0nZ+GEb2ICicLyCnQ==}
@ -3079,7 +3063,7 @@ snapshots:
'@babel/helper-string-parser': 7.25.9
'@babel/helper-validator-identifier': 7.25.9
'@cool-vue/crud@8.0.1(typescript@5.5.4)':
'@cool-vue/crud@8.0.2(typescript@5.5.4)':
dependencies:
'@vue/runtime-core': 3.5.13
element-plus: 2.9.4(vue@3.5.13(typescript@5.5.4))

View File

@ -0,0 +1,71 @@
<template>
<div class="scope">
<div class="h">
<el-tag size="small" effect="dark" disable-transitions>context-menu</el-tag>
<span>右键菜单</span>
</div>
<div class="c">
<el-button @contextmenu="onContextMenu">预览</el-button>
<demo-code :files="['other/context-menu.vue']" />
</div>
<div class="f">
<span class="date">2025-02-22</span>
</div>
</div>
</template>
<script setup lang="ts">
import { ContextMenu } from '@cool-vue/crud';
import { Edit } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
function onContextMenu(e: MouseEvent) {
ContextMenu.open(e, {
list: [
{
label: '基础',
callback: done => {
ElMessage.success('新增');
done();
}
},
{
label: '图标',
suffixIcon: Edit,
callback: done => {
ElMessage.success('图标');
done();
}
},
{
label: '层级',
children: [
{
label: '新增',
callback: done => {
ElMessage.success('新增');
done();
}
},
{
label: '编辑',
callback: done => {
ElMessage.success('编辑');
done();
}
},
{
label: '删除',
callback: done => {
ElMessage.success('删除');
done();
}
}
]
}
]
});
}
</script>

View File

@ -89,6 +89,7 @@ import AdvSearchCustom from './components/adv-search/custom.vue';
import OtherTsx from './components/other/tsx';
import OtherTips from './components/other/tips.vue';
import OtherContextMenu from './components/other/context-menu.vue';
const { route, router } = useCool();
@ -207,7 +208,7 @@ const list = [
children: [
{
label: '高级',
children: [OtherTsx, OtherTips]
children: [OtherTsx, OtherTips, OtherContextMenu]
}
]
}