|
|
@@ -1,7 +1,159 @@
|
|
|
-<script lang="ts" setup></script>
|
|
|
+<script lang="ts" setup>
|
|
|
+import { Splitpanes, Pane } from 'splitpanes'
|
|
|
+import 'splitpanes/dist/splitpanes.css'
|
|
|
+import { ElTree } from 'element-plus'
|
|
|
+import type { BasicForm } from '@/types/form'
|
|
|
+interface Tree {
|
|
|
+ id: number
|
|
|
+ label: string
|
|
|
+ children?: Tree[]
|
|
|
+}
|
|
|
+
|
|
|
+const filterText = ref('')
|
|
|
+const treeRef = ref<InstanceType<typeof ElTree>>()
|
|
|
+
|
|
|
+const defaultProps = {
|
|
|
+ children: 'children',
|
|
|
+ label: 'label'
|
|
|
+}
|
|
|
+
|
|
|
+watch(filterText, val => {
|
|
|
+ treeRef.value?.filter(val)
|
|
|
+})
|
|
|
+
|
|
|
+const filterNode = (value: string, data: any) => {
|
|
|
+ if (!value) return true
|
|
|
+ return data.label.includes(value)
|
|
|
+}
|
|
|
+
|
|
|
+const data: Tree[] = [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ label: '系统管理',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ label: '用户管理'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ label: '角色管理'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ label: '组织机构',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ id: 5,
|
|
|
+ label: '机构管理'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+]
|
|
|
+
|
|
|
+const formConfig = reactive<BasicForm>({
|
|
|
+ span: 24,
|
|
|
+ props: {
|
|
|
+ labelPosition: 'right'
|
|
|
+ },
|
|
|
+ formItems: [
|
|
|
+ {
|
|
|
+ label: '显示姓名',
|
|
|
+ value: '',
|
|
|
+ name: 'name',
|
|
|
+ type: 'input',
|
|
|
+ rules: [{ required: true, message: '请输入显示姓名', trigger: 'blur' }]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '多语言编码',
|
|
|
+ value: '',
|
|
|
+ name: 'loginName',
|
|
|
+ type: 'input'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '上级菜单',
|
|
|
+ value: '',
|
|
|
+ name: 'company',
|
|
|
+ type: 'select'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '类型',
|
|
|
+ value: '',
|
|
|
+ name: 'part',
|
|
|
+ type: 'select',
|
|
|
+ options: [
|
|
|
+ { label: '目录', value: '1' },
|
|
|
+ { label: '菜单', value: '2' },
|
|
|
+ { label: '按钮', value: '3' },
|
|
|
+ { label: '路由', value: '4' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '菜单图标',
|
|
|
+ value: '',
|
|
|
+ name: 'remark',
|
|
|
+ type: 'input',
|
|
|
+ slots: [
|
|
|
+ {
|
|
|
+ name: 'append',
|
|
|
+ alias: 'append1'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+})
|
|
|
+const create = (data: any) => {
|
|
|
+ console.log(data)
|
|
|
+}
|
|
|
+const update = (data: any) => {
|
|
|
+ console.log(data)
|
|
|
+}
|
|
|
+const formData = reactive<any>({})
|
|
|
+
|
|
|
+const selIcon = () => {
|
|
|
+ console.log(121)
|
|
|
+}
|
|
|
+</script>
|
|
|
|
|
|
<template>
|
|
|
- <div></div>
|
|
|
+ <splitpanes class="default-theme">
|
|
|
+ <pane min-size="20%" max-size="70">
|
|
|
+ <el-card class="box-card left">
|
|
|
+ <template #header>
|
|
|
+ <el-input v-model="filterText" placeholder="输入关键字进行过滤" />
|
|
|
+ </template>
|
|
|
+ <el-tree
|
|
|
+ ref="treeRef"
|
|
|
+ class="filter-tree"
|
|
|
+ :data="data"
|
|
|
+ :props="defaultProps"
|
|
|
+ default-expand-all
|
|
|
+ :filter-node-method="filterNode"
|
|
|
+ show-checkbox
|
|
|
+ />
|
|
|
+ </el-card>
|
|
|
+ </pane>
|
|
|
+ <pane>
|
|
|
+ <el-card class="box-card up">
|
|
|
+ <template #header>
|
|
|
+ <span>工作台</span>
|
|
|
+ </template>
|
|
|
+ <pro-form :formConfig="formConfig" :formData="formData" ref="proFormRef" :update="update" :create="create">
|
|
|
+ <template #append> testt </template>
|
|
|
+ <template #append1>
|
|
|
+ <el-button @click="selIcon">
|
|
|
+ <el-icon class="el-icon--right"><MoreFilled /></el-icon>
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </pro-form>
|
|
|
+ </el-card>
|
|
|
+ </pane>
|
|
|
+ <pane max-size="70">
|
|
|
+ <span>4</span>
|
|
|
+ </pane>
|
|
|
+ </splitpanes>
|
|
|
</template>
|
|
|
|
|
|
<style lang="scss" scoped></style>
|
18834741618