mirror of
https://github.com/cool-team-official/cool-admin-vue.git
synced 2025-12-10 20:02:54 +00:00
优化
This commit is contained in:
parent
e31bce93d1
commit
440c103fc1
@ -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
|
||||
@ -1278,4 +1409,72 @@ 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>
|
||||
|
||||
```
|
||||
@ -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) {
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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
26
pnpm-lock.yaml
generated
@ -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))
|
||||
|
||||
@ -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>
|
||||
@ -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]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user