This commit is contained in:
神仙都没用 2025-02-20 10:51:34 +08:00
parent 6e38a2bbb7
commit 669fe3fe30
5 changed files with 101 additions and 67 deletions

View File

@ -232,13 +232,7 @@ const Table = useTable({
],
plugins: [
Plugins.Table.toTree({
lazy: true,
async onRefresh() {
return service.base.sys.menu.list().then(res => {
menu.get();
return res;
});
}
lazy: true
})
]
});
@ -366,7 +360,13 @@ const Upsert = useUpsert({
// cl-crud
const Crud = useCrud(
{
service: service.base.sys.menu
service: service.base.sys.menu,
onRefresh(params, { render }) {
service.base.sys.menu.list(params).then(res => {
menu.get();
render(res);
});
}
},
app => {
app.refresh({

View File

@ -245,23 +245,20 @@ const Table = useTable({
]
}
],
plugins: [
Plugins.Table.toTree({
async onRefresh(params) {
return service.dict.info.list(params).then(res => {
//
dict.refresh([ViewGroup.value?.selected?.key]);
return res;
});
}
})
]
plugins: [Plugins.Table.toTree()]
});
// cl-crud
const Crud = useCrud({
service: service.dict.info
service: service.dict.info,
onRefresh(params, { render }) {
service.dict.info.list(params).then(res => {
render(res);
//
dict.refresh([ViewGroup.value?.selected?.key]);
});
}
});
//

View File

@ -1,6 +1,16 @@
import { useCrud, useForm, } from '@cool-vue/crud';
import { useCrud, useForm } from '@cool-vue/crud';
import { cloneDeep, isEmpty, isFunction, isString } from 'lodash-es';
import { computed, defineComponent, onMounted, type PropType, ref, type Ref, toValue, useModel } from 'vue';
import {
computed,
defineComponent,
onActivated,
onMounted,
type PropType,
ref,
type Ref,
toValue,
useModel
} from 'vue';
import { deepTree, parsePx } from '/@/cool/utils';
import { useI18n } from 'vue-i18n';
import { useCool } from '/@/cool';
@ -25,8 +35,6 @@ export default defineComponent({
type: String,
default: 'value'
},
// 请求接口,如果是字符串,则使用 crud 下的方法
api: [String, Function],
width: [String, Number],
// 是否树形
@ -39,20 +47,28 @@ export default defineComponent({
defaultExpandAll: Boolean,
// 顶级标签
topLabel: String,
// 是否选择当前表格数据,如果是,则不能选择自身及其下级
current: Boolean,
// 请求接口,如果是字符串,则使用 crud 下的方法
api: [String, Function],
// 值变化刷新
refreshOnChange: {
type: Boolean,
default: true
},
// 是否在激活时刷新
refreshOnActivated: {
type: Boolean,
default: true
}
},
emits: ['update:modelValue', 'change'],
setup(props, { emit, expose }) {
const { refs, setRefs } = useCool();
const { refs, setRefs, route } = useCool();
const { t } = useI18n();
// cl-crud
@ -65,14 +81,14 @@ export default defineComponent({
const isSearch = computed(() => !Form.value || Form.value?.name === 'search');
// 选项
const options = ref<Dict.Item[]>()
const options = ref<Dict.Item[]>();
// 选中值
const value = useModel(props, 'modelValue');
// 列表
const list = computed(() => {
let data: any[] = []
let data: any[] = [];
if (props.current) {
data = cloneDeep(toValue(Crud.value?.['cl-table']?.data));
@ -95,7 +111,6 @@ export default defineComponent({
}
deep({ children: data }, false);
} else {
data = toValue(options.value || props.options) || [];
}
@ -108,10 +123,10 @@ export default defineComponent({
[props.valueKey]: 0,
children: data
}
]
];
}
return data
return data;
});
// 获取值
@ -164,26 +179,36 @@ export default defineComponent({
// 获取选项数据
function refresh() {
let req: Promise<any> | null = null
let req: Promise<any> | null = null;
if (isString(props.api)) {
req = Crud.value?.service[props.api]()
req = Crud.value?.service[props.api]();
}
if (isFunction(props.api)) {
req = props.api()
req = props.api();
}
if (req) {
req.then(res => {
options.value = deepTree(res);
})
});
}
}
onMounted(() => {
refresh()
})
if (props.api) {
refresh();
onActivated(() => {
if (props.refreshOnActivated) {
if (!Form.value || Form.value?.name == 'search') {
refresh();
}
}
});
}
});
expose({
focus
@ -198,7 +223,6 @@ export default defineComponent({
// 占位符
const placeholder = isSearch.value ? t('全部') : t('请选择');
// 树形下拉框
const TreeSelect = (
<el-tree-select

View File

@ -1,6 +1,6 @@
import { useCrud } from "@cool-vue/crud";
import { deepTree } from "/@/cool/utils";
import { isEmpty } from "lodash-es";
import { useCrud } from '@cool-vue/crud';
import { deepTree } from '/@/cool/utils';
import { isEmpty } from 'lodash-es';
interface Item extends Eps.BaseSysMenuEntity {
children?: Item[];
@ -22,26 +22,48 @@ export function toTree(
// 设置刷新方法
if (Crud.value) {
Crud.value.config.onRefresh = (params: any, { render }: any) => {
const req = options.onRefresh
? options.onRefresh(params)
: Crud.value?.service.list(params);
// 原 cl-crud 的 onRefresh
const onRefresh = Crud.value.config.onRefresh;
if (req) {
req.then((list) => {
render(onData(list, params.sort));
});
}
// 重写 onRefresh
Crud.value.config.onRefresh = async (
params: Parameters<ClCrud.Config['onRefresh']>[0],
{ render, next, done }: Parameters<ClCrud.Config['onRefresh']>[1]
) => {
const req: Promise<any[]> = new Promise(resolve => {
if (onRefresh) {
const _next = async (params?: any) => {
const res = await next(params);
resolve(res.list);
};
const _render = (list: any[]) => {
resolve(list);
};
onRefresh(params, { render: _render, next: _next, done });
} else {
resolve(
options.onRefresh
? options.onRefresh(params)
: Crud.value?.service[Crud.value.dict.api.list](params)
);
}
});
const list = await req;
render(onData(list, params.sort));
};
}
// 数据处理
const onData = (list: Item[], sort: "desc" | "asc") => {
const onData = (list: Item[], sort: 'desc' | 'asc') => {
const data = deepTree(list, sort);
// 递归处理
const deep = (arr: Item[]) => {
arr.forEach((e) => {
arr.forEach(e => {
const nodes: { [key: number]: Item[] } =
exposed.Table.value?.store.states.lazyTreeNodeMap.value || {};
@ -69,10 +91,10 @@ export function toTree(
// 层级参数
exposed.config.props.lazy = true;
exposed.config.props["row-key"] = "id";
exposed.config.props["tree-props"] = {
children: "children",
hasChildren: "hasChildren"
exposed.config.props['row-key'] = 'id';
exposed.config.props['tree-props'] = {
children: 'children',
hasChildren: 'hasChildren'
};
// 层级事件

View File

@ -173,26 +173,17 @@ defineOptions({
import { useI18n } from 'vue-i18n';
import { inject, nextTick, onMounted, reactive, ref, useSlots } from 'vue';
import {
ArrowLeft,
ArrowRight,
ArrowRightBold,
Refresh as IconRefresh,
Plus,
Search
} from '@element-plus/icons-vue';
import { Search } from '@element-plus/icons-vue';
import { useBrowser, useCool } from '/@/cool';
import { ContextMenu, useForm } from '@cool-vue/crud';
import { ElMessage, ElMessageBox } from 'element-plus';
import { assign, isEmpty, merge } from 'lodash-es';
import { deepTree } from '/@/cool/utils';
import { useClipboard } from '@vueuse/core';
const { browser, onScreenChange } = useBrowser();
const slots = useSlots();
const Form = useForm();
const { refs, setRefs } = useCool();
const { copy } = useClipboard();
const { t } = useI18n();
//