暂存代码

env.d.ts

@@ -1 +1,3 @@
 /// <reference types="vite/client" />
+
+declare module 'splitpanes'

package.json

@@ -20,6 +20,7 @@
     "element-plus": "^2.2.28",
     "nprogress": "^0.2.0",
     "pinia": "^2.0.29",
+    "splitpanes": "^3.1.0",
     "vue": "^3.2.45",
     "vue-cropper": "^1.0.5",
     "vue-router": "^4.1.6",

src/views/system/menu.vue

@@ -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>