146 lines
3.2 KiB
Vue
146 lines
3.2 KiB
Vue
<template>
|
|
<fs-page>
|
|
<el-row class="mx-2">
|
|
<el-col xs="24" :sm="8" :md="6" :lg="4" :xl="4" class="p-1">
|
|
<el-card :body-style="{ height: '100%' }">
|
|
<p class="font-mono font-black text-center text-xl pb-5">
|
|
部门列表
|
|
<el-tooltip effect="dark" :content="content" placement="right">
|
|
<el-icon>
|
|
<QuestionFilled />
|
|
</el-icon>
|
|
</el-tooltip>
|
|
</p>
|
|
<el-input v-model="filterText" :placeholder="placeholder" />
|
|
<el-tree
|
|
ref="treeRef"
|
|
class="font-mono font-bold leading-6 text-7xl"
|
|
:data="data"
|
|
:props="treeProps"
|
|
:filter-node-method="filterNode"
|
|
icon="ArrowRightBold"
|
|
:indent="12"
|
|
@node-click="onTreeNodeClick"
|
|
>
|
|
<template #default="{ node, data }">
|
|
<span class="text-center font-black text-xl">{{ node.label }}</span>
|
|
</template>
|
|
</el-tree>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col xs="24" :sm="16" :md="18" :lg="20" :xl="20" class="p-1">
|
|
<el-card :body-style="{ height: '100%' }">
|
|
<fs-crud ref="crudRef" v-bind="crudBinding">
|
|
<template #actionbar-right>
|
|
<importExcel api="api/system/user/" >导入 </importExcel>
|
|
</template>
|
|
</fs-crud>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
</fs-page>
|
|
</template>
|
|
|
|
<script lang="ts" setup name="user">
|
|
import { useExpose, useCrud } from '@fast-crud/fast-crud';
|
|
import { createCrudOptions } from './crud';
|
|
import * as api from './api';
|
|
import { ElTree } from 'element-plus';
|
|
import { ref, onMounted, watch, toRaw } from 'vue';
|
|
import XEUtils from 'xe-utils';
|
|
import importExcel from '/@/components/importExcel/index.vue'
|
|
|
|
interface Tree {
|
|
id: number;
|
|
name: string;
|
|
status: boolean;
|
|
children?: Tree[];
|
|
}
|
|
|
|
interface APIResponseData {
|
|
code?: number;
|
|
data: [];
|
|
msg?: string;
|
|
}
|
|
|
|
// 引入组件
|
|
const placeholder = ref('请输入部门名称');
|
|
const filterText = ref('');
|
|
const treeRef = ref<InstanceType<typeof ElTree>>();
|
|
|
|
const treeProps = {
|
|
children: 'children',
|
|
label: 'name',
|
|
icon: 'icon',
|
|
};
|
|
|
|
watch(filterText, (val) => {
|
|
treeRef.value!.filter(val);
|
|
});
|
|
|
|
const filterNode = (value: string, data: Tree) => {
|
|
if (!value) return true;
|
|
return toRaw(data).name.indexOf(value) !== -1;
|
|
};
|
|
|
|
let data = ref([]);
|
|
|
|
const content = `
|
|
1.部门信息;
|
|
`;
|
|
|
|
const getData = () => {
|
|
api.GetDept({}).then((ret: APIResponseData) => {
|
|
const responseData = ret.data;
|
|
const result = XEUtils.toArrayTree(responseData, {
|
|
parentKey: 'parent',
|
|
children: 'children',
|
|
strict: true,
|
|
});
|
|
data.value = result;
|
|
});
|
|
};
|
|
|
|
//树形点击事件
|
|
const onTreeNodeClick = (node: any) => {
|
|
const { id } = node;
|
|
crudExpose.doSearch({ form: { dept: id } });
|
|
};
|
|
|
|
// 页面打开后获取列表数据
|
|
onMounted(() => {
|
|
getData();
|
|
});
|
|
|
|
// crud组件的ref
|
|
const crudRef = ref();
|
|
// crud 配置的ref
|
|
const crudBinding = ref();
|
|
// 暴露的方法
|
|
const { crudExpose } = useExpose({ crudRef, crudBinding });
|
|
// 你的crud配置
|
|
const { crudOptions } = createCrudOptions({ crudExpose });
|
|
// 初始化crud配置
|
|
const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });
|
|
|
|
// 页面打开后获取列表数据
|
|
onMounted(() => {
|
|
crudExpose.doRefresh();
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.el-row {
|
|
height: 100%;
|
|
|
|
.el-col {
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.el-card {
|
|
height: 100%;
|
|
}
|
|
</style>
|