2022年5月18日11:49:42

src/data/menuData.ts

@@ -134,6 +134,11 @@ export const list = [
             path: 'menu',
             icon: 'User',
             children: []
+        },{
+            title: '部门管理',
+            path: 'department',
+            icon: 'HomeFilled',
+            children: []
         }]
-    }
+    }   
 ];

src/router/index.ts

@@ -21,10 +21,18 @@ const routes: RouteRecordRaw[] = [
           key: () => import('@/views/system/home/Home.vue'),
         },
       },
+      {
+        path: '/views/system/department',
+        name: 'department',
+        meta: { title: '部门管理', isAuth: true }, //用户自定内容
+        components: {
+          key: () => import('@/views/system/department/department.vue'),
+        },
+      },
       {
         path: '/views/system/menu',
         name: 'menu',
-        meta: { title: '菜单模块', isAuth: true }, //用户自定内容
+        meta: { title: '菜单管理', isAuth: true }, //用户自定内容
         components: {
           key: () => import('@/views/system/menu/index.vue'),
         },

src/views/system/department/department.vue

@@ -0,0 +1,176 @@
+<template>
+    <crud-template ref="crud" :home-data="field" :tableData="testData" @submit="submit" @handleEdit="handleEdit">
+        <template #dialog>
+            <el-form :inline="false" ref="ruleFormRef" :rules="rules" :model="item">
+
+                <el-form-item class="as-bold" :label-width="labelWidth" label="名称" prop="title">
+                    <div style="width: 100%">
+                        <el-input v-model="item.title" placeholder="请输入部门名称"></el-input>
+                    </div>
+                </el-form-item>
+
+                <el-form-item class="as-bold" :label-width="labelWidth" label="排序">
+                    <!-- 简单解决sort类型问题 -->
+                    <div v-show="false">
+                        {{ item.sort = Number(item.sort) }}
+                    </div>
+                    <el-input-number class="el-input-number" v-model="item.sort" style="width: 100%;"
+                        controls-position="right">
+                    </el-input-number>
+                </el-form-item>
+
+                <div class="as-layout-horizontal">
+                    <el-form-item class="as-weight as-bold" :label-width="labelWidth" label="顶级部门">
+                        <el-radio-group v-model="item.top" @change="change">
+                            <el-radio label="是" />
+                            <el-radio label="否" />
+                        </el-radio-group>
+                    </el-form-item>
+
+                    <el-form-item class="as-weight as-bold" :label-width="labelWidth" label="状态">
+                        <el-radio-group v-model="item.start">
+                            <el-radio label="启用" />
+                            <el-radio label="禁用" />
+                        </el-radio-group>
+                    </el-form-item>
+                </div>
+
+                <el-form-item v-show="topStart" class="as-bold" :label-width="labelWidth" label="上级部门">
+                    <el-tree-select v-model="item.section" :data="threeData" />
+                </el-form-item>
+
+            </el-form>
+        </template>
+    </crud-template>
+</template>
+<!-- 部门管理模块 -->
+<script lang="ts" setup>
+// @ts-ignore crudFrom模板
+import CrudTemplate from "@/crud/index.vue"
+import { add, get, empty } from "@/utils/offLineData"
+import { reactive, ref, toRaw } from 'vue'
+
+const labelWidth = '80px'
+const topStart = ref(false)
+const initData = [
+    {
+        title: '黔通智联',
+        sort: 1,
+        start: '启用',
+        top: '是',
+        children: [{
+            title: '部门一',
+            start: '启用',
+            top: '否',
+            sort: 2,
+            children: []
+        }]
+    },
+    {
+        title: '世纪恒通',
+        sort: 3,
+        start: '启用',
+        top: '是',
+        children: [{
+            title: '部门二',
+            start: '启用',
+            top: '否',
+            sort: 4
+        }]
+    }]
+
+const threeData = [
+    {
+        value: '黔通智联',
+        label: '黔通智联',
+        children: [
+            {
+                value: '部门一',
+                label: '部门一',
+                children: [],
+            },
+        ],
+    }, {
+        value: '世纪恒通',
+        label: '世纪恒通',
+        children: [
+            {
+                value: '部门二',
+                label: '部门二',
+                children: [],
+            },
+        ],
+    },
+]
+
+let item = ref({
+    title: '',
+    sort: 0,
+    top: '是',
+    start: '启用',
+    section: ''
+})
+
+//切换事件
+const change = (event: any) => {
+    console.log(event);
+    if (event === '是') {
+        topStart.value = false;
+    } else {
+        topStart.value = true;
+    }
+}
+
+//编辑事件
+const handleEdit = (idx: any, row: any) => {
+    console.log(row);
+
+    item.value = toRaw(row)
+}
+
+//表单校验
+const ruleFormRef: any = ref()
+const crud: any = ref()
+const rules = reactive({ title: [{ required: true, message: '请输入部门名称', trigger: 'blur' }] })
+
+empty('department')
+if (get('department').length === 0) {
+    add('department', initData)
+}
+const testData: any = get('department')
+
+const field = {
+    rowKey: 'title',
+    searchShow: false,
+    crudShow: true,
+    dialogCustom: true,
+    field: [{
+        prop: 'title',
+        label: '名称',
+    }, {
+        prop: 'sort',
+        label: '排序',
+    }, {
+        prop: 'start',
+        label: '状态',
+    }]
+}
+
+const submit = () => {
+    ruleFormRef.value.validate((valid: any, fields: any) => {
+        if (valid) {
+            console.log(item, ruleFormRef);
+            crud.value.reset()
+        } else {
+            return false
+        }
+    })
+}
+
+</script> 
+<style  scoped>
+/*数字文本框文本对齐方式 */
+/deep/ .el-input-number .el-input__inner {
+    text-align: left;
+}
+</style>