2022年5月19日10:01:06

src/crud/index.vue

     })
 }
 const rules = reactive(initRules)
-
+//每次加载时搜索条件清空
+processData.search = {}
 //搜索条件
-let searchCondition: any = reactive(processData ? processData.search : [])
+let searchCondition: any = reactive(processData.search)
+console.log(searchCondition);
+
 
 //表单字段
 const form: any = ref(initForm)

src/data/menuData.ts

         children: [{
             title: '菜单管理',
             path: 'menu',
+            icon: 'Expand',
+            children: []
+        },{
+            title: '用户管理',
+            path: 'user',
             icon: 'User',
             children: []
+        },{
+            title: '角色管理',
+            path: 'role',
+            icon: 'UserFilled',
+            children: []
         },{
             title: '部门管理',
             path: 'department',
             icon: 'HomeFilled',
             children: []
         }]
-    }   
+    }
 ];

src/router/index.ts

           key: () => import('@/views/system/home/Home.vue'),
         },
       },
+      {
+        path: '/views/system/role',
+        name: 'role',
+        meta: { title: '用户管理', isAuth: true }, //用户自定内容
+        components: {
+          key: () => import('@/views/system/role/role.vue'),
+        },
+      },
+      {
+        path: '/views/system/user',
+        name: 'user',
+        meta: { title: '用户管理', isAuth: true }, //用户自定内容
+        components: {
+          key: () => import('@/views/system/user/user.vue'),
+        },
+      },
       {
         path: '/views/system/department',
         name: 'department',

src/views/system/department/department.vue

 <template>
     <crud-template ref="crud" :home-data="field" :tableData="testData" @submit="submit" @handleEdit="handleEdit">
+        <template #search="{ searchCondition }">
+            <el-input v-model="searchCondition.fileTwo" clearable placeholder="输入名称或邮箱名称" style="width: 200px;" />
+            <div>
+                <el-date-picker class="el-range-editor" v-model="searchCondition.fileOne" type="daterange"
+                    range-separator=":" start-placeholder="开始日期" end-placeholder="结束日期"
+                    style="margin: 0 10px 0 10px;" />
+            </div>
+        </template>
         <template #dialog>
             <el-form :inline="false" ref="ruleFormRef" :rules="rules" :model="item">
 
 
 const field = {
     rowKey: 'title',
-    searchShow: false,
+    searchShow: true,
     crudShow: true,
     dialogCustom: true,
     field: [{
 /deep/ .el-input-number .el-input__inner {
     text-align: left;
 }
+
+/deep/.el-range-editor.el-input__inner {
+  display: inline-flex;
+  align-items: center;
+  padding: 3px 10px;
+  height: 33px;
+  width: 300px;
+}
 </style>

src/views/system/home/Home.vue

 <template>
   <div class="as-layout-horizontal">
-    <div style="width:200px;padding:0 8px 0 8px">
-      <el-input :prefix-icon="Search" clearable placeholder="输入部门名称搜索" style="width: 200px;margin-bottom: 10px;" />
-      <el-tree :data="threeData" @node-click="handleNodeClick" />
+    <div style="width:200px;padding:0 8px 0 8px;"> 
+      <div class="as-layout-horizontal" style="width:200px;margin-bottom: 10px;">
+        <span class="as-weight as-bold" style="color:#606266">菜单分配</span>
+        <el-button disabled type="primary" size="small">保存</el-button>
+      </div>
+      <el-tree :props="props" :data="threeData" show-checkbox @node-click="handleNodeClick" />
     </div>
     <crud-template class="as-weight" ref="crud" :home-data="field" :tableData="testData" @submit="submit"
       @handleEdit="handleEdit">
           <el-date-picker class="el-range-editor" v-model="searchCondition.fileOne" type="daterange" range-separator=":"
             start-placeholder="开始日期" end-placeholder="结束日期" style="margin: 0 10px 0 10px;" />
         </div>
-        <el-select v-model="searchCondition.fileThree" placeholder="状态" style="width: 80px;margin-right: 10px;">
-          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-        </el-select>
-
       </template>
     </crud-template>
   </div>
 import { add, get, empty } from "@/utils/offLineData"
 import { reactive, ref, toRaw } from 'vue'
 import { Search } from '@element-plus/icons-vue'
+import {
+  list
+} from '@/data/menuData'
 
 const labelWidth = '80px'
 const topStart = ref(false)
 const initData = [
   {
-    name: 'test',
-    nickname: '测试',
-    sex: '男',
-    phone: '18888888889',
-    email: 'test@el-admin.vip',
-    department: '研发部',
-    start: '启用',
-    creationDate: '2020-05-05 11:15:49'
+    field1: '超级管理员',
+    field2: '全部',
+    field3: '1',
+    field4: '-',
+    field5: '2018-11-23 11:04:37'
   },
   {
-    name: 'admin',
-    nickname: '管理员',
-    sex: '男',
-    phone: '18888888888',
-    email: 'test@el-admin.vip',
-    department: '研发部',
-    start: '禁用',
-    creationDate: '2018-05-05 11:15:49'
+    field1: '普通用户',
+    field2: '自定义',
+    field3: '2',
+    field4: '-',
+    field5: '2018-11-23 13:09:06'
   }]
 
 //树数据
-const threeData = [
-  {
-    value: '黔通智联',
-    label: '黔通智联',
-    children: [
-      {
-        value: '部门一',
-        label: '部门一',
-        children: [],
-      },
-    ],
-  }, {
-    value: '世纪恒通',
-    label: '世纪恒通',
-    children: [
-      {
-        value: '部门二',
-        label: '部门二',
-        children: [],
-      },
-    ],
-  },
-]
+const threeData = list
+const props = {
+  label: 'title',
+  children: 'children',
+}
 
 //表单数据
 let item = ref({
   dialogCustom: false,
   operateWidth: '150', //操作栏宽度
   field: [{
-    prop: 'name',
-    label: '用户名称',
+    prop: 'field1',
+    label: '名称',
     form: {
       type: 'input'
     }
   }, {
-    prop: 'nickname',
-    label: '昵称',
+    prop: 'field2',
+    label: '数据权限',
     form: {
       type: 'input'
     }
   }, {
-    prop: 'sex',
-    label: '性别',
+    prop: 'field3',
+    label: '角色级别',
   }, {
-    prop: 'phone',
-    label: '电话',
+    prop: 'field4',
+    label: '描述',
     form: {
       type: 'input',
       itemType: 'phone'
     }
   }, {
-    prop: 'email',
-    label: '邮箱',
-    form: {
-      type: 'input'
-    }
-  }, {
-    prop: 'department',
-    label: '部门',
-  }, {
-    prop: 'start',
-    label: '状态',
-  }, {
-    prop: 'creationDate',
+    prop: 'field5',
     label: '创建日期',
     form: {
       type: 'date'

src/views/system/menu/index.vue

 <template>
   <crud-template :home-data="field" :tableData="list">
+    <template #search="{ searchCondition }">
+      <el-input v-model="searchCondition.fileTwo" clearable placeholder="输入名称或邮箱名称" style="width: 200px;" />
+      <div>
+        <el-date-picker class="el-range-editor" v-model="searchCondition.fileOne" type="daterange" range-separator=":"
+          start-placeholder="开始日期" end-placeholder="结束日期" style="margin: 0 10px 0 10px;" />
+      </div>
+    </template>
   </crud-template>
 </template>
 <script lang="ts" setup>
 
 const field = {
   rowKey: 'title',
-  searchShow: false,
-  crudShow: false,
+  searchShow: true,
+  crudShow: true,
   field: [{
     prop: 'title',
     label: '菜单标题',
     label: '页面名称',
   }]
 }
-</script>
+</script>
+<style scoped>
+/deep/.el-range-editor.el-input__inner {
+  display: inline-flex;
+  align-items: center;
+  padding: 3px 10px;
+  height: 33px;
+  width: 300px;
+}
+</style>

src/views/system/role/role.vue

+<template>
+  <div class="as-layout-horizontal">
+    <div style="width:200px;padding:0 8px 0 8px;"> 
+      <div class="as-layout-horizontal" style="width:200px;margin-bottom: 10px;">
+        <span class="as-weight as-bold" style="color:#606266">菜单分配</span>
+        <el-button disabled type="primary" size="small">保存</el-button>
+      </div>
+      <el-tree :props="props" :data="threeData" show-checkbox @node-click="handleNodeClick" />
+    </div>
+    <crud-template class="as-weight" ref="crud" :home-data="field" :tableData="testData" @submit="submit"
+      @handleEdit="handleEdit">
+      <template #search="{ searchCondition }">
+        <el-input v-model="searchCondition.fileTwo" clearable placeholder="输入名称或邮箱名称" style="width: 200px;" />
+        <div>
+          <el-date-picker class="el-range-editor" v-model="searchCondition.fileOne" type="daterange" range-separator=":"
+            start-placeholder="开始日期" end-placeholder="结束日期" style="margin: 0 10px 0 10px;" />
+        </div>
+      </template>
+    </crud-template>
+  </div>
+</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'
+import { Search } from '@element-plus/icons-vue'
+import {
+  list
+} from '@/data/menuData'
+
+const labelWidth = '80px'
+const topStart = ref(false)
+const initData = [
+  {
+    field1: '超级管理员',
+    field2: '全部',
+    field3: '1',
+    field4: '-',
+    field5: '2018-11-23 11:04:37'
+  },
+  {
+    field1: '普通用户',
+    field2: '自定义',
+    field3: '2',
+    field4: '-',
+    field5: '2018-11-23 13:09:06'
+  }]
+
+//树数据
+const threeData = list
+const props = {
+  label: 'title'
+}
+
+//表单数据
+let item = ref({
+  title: '',
+  sort: 0,
+  top: '是',
+  start: '启用',
+  section: ''
+})
+
+const options = [{
+  value: 'Option1',
+  label: '启用',
+},
+{
+  value: 'Option2',
+  label: '禁用',
+}]
+
+//树形事件
+const handleNodeClick = (event: any) => {
+  console.log(event);
+}
+
+//编辑事件
+const handleEdit = (idx: any, row: any) => {
+  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 = {
+  searchShow: true,
+  tabSize: 'small',
+  dialogCustom: false,
+  operateWidth: '150', //操作栏宽度
+  field: [{
+    prop: 'field1',
+    label: '名称',
+    form: {
+      type: 'input'
+    }
+  }, {
+    prop: 'field2',
+    label: '数据权限',
+    form: {
+      type: 'input'
+    }
+  }, {
+    prop: 'field3',
+    label: '角色级别',
+  }, {
+    prop: 'field4',
+    label: '描述',
+    form: {
+      type: 'input',
+      itemType: 'phone'
+    }
+  }, {
+    prop: 'field5',
+    label: '创建日期',
+    form: {
+      type: 'date'
+    }
+  }]
+}
+
+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-range-editor.el-input__inner {
+  display: inline-flex;
+  align-items: center;
+  padding: 3px 10px;
+  height: 33px;
+  width: 300px;
+}
+</style>

src/views/system/user/user.vue

+<template>
+  <div class="as-layout-horizontal">
+    <div style="width:200px;padding:0 8px 0 8px">
+      <el-input :prefix-icon="Search" clearable placeholder="输入部门名称搜索" style="width: 200px;margin-bottom: 10px;" />
+      <el-tree :data="threeData" @node-click="handleNodeClick" />
+    </div>
+    <crud-template class="as-weight" ref="crud" :home-data="field" :tableData="testData" @submit="submit"
+      @handleEdit="handleEdit">
+      <template #search="{ searchCondition }">
+        <el-input v-model="searchCondition.fileTwo" clearable placeholder="输入名称或邮箱名称" style="width: 200px;" />
+        <div>
+          <el-date-picker class="el-range-editor" v-model="searchCondition.fileOne" type="daterange" range-separator=":"
+            start-placeholder="开始日期" end-placeholder="结束日期" style="margin: 0 10px 0 10px;" />
+        </div>
+        <el-select v-model="searchCondition.fileThree" placeholder="状态" style="width: 80px;margin-right: 10px;">
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+
+      </template>
+    </crud-template>
+  </div>
+</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'
+import { Search } from '@element-plus/icons-vue'
+
+const labelWidth = '80px'
+const topStart = ref(false)
+const initData = [
+  {
+    name: 'test',
+    nickname: '测试',
+    sex: '男',
+    phone: '18888888889',
+    email: 'test@el-admin.vip',
+    department: '研发部',
+    start: '启用',
+    creationDate: '2020-05-05 11:15:49'
+  },
+  {
+    name: 'admin',
+    nickname: '管理员',
+    sex: '男',
+    phone: '18888888888',
+    email: 'test@el-admin.vip',
+    department: '研发部',
+    start: '禁用',
+    creationDate: '2018-05-05 11:15:49'
+  }]
+
+//树数据
+const threeData = [
+  {
+    value: '黔通智联',
+    label: '黔通智联',
+    children: [
+      {
+        value: '部门一',
+        label: '部门一',
+        children: [],
+      },
+    ],
+  }, {
+    value: '世纪恒通',
+    label: '世纪恒通',
+    children: [
+      {
+        value: '部门二',
+        label: '部门二',
+        children: [],
+      },
+    ],
+  },
+]
+
+//表单数据
+let item = ref({
+  title: '',
+  sort: 0,
+  top: '是',
+  start: '启用',
+  section: ''
+})
+
+const options = [{
+  value: 'Option1',
+  label: '启用',
+},
+{
+  value: 'Option2',
+  label: '禁用',
+}]
+
+//树形事件
+const handleNodeClick = (event: any) => {
+  console.log(event);
+}
+
+//编辑事件
+const handleEdit = (idx: any, row: any) => {
+  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 = {
+  searchShow: true,
+  tabSize: 'small',
+  dialogCustom: false,
+  operateWidth: '150', //操作栏宽度
+  field: [{
+    prop: 'name',
+    label: '用户名称',
+    form: {
+      type: 'input'
+    }
+  }, {
+    prop: 'nickname',
+    label: '昵称',
+    form: {
+      type: 'input'
+    }
+  }, {
+    prop: 'sex',
+    label: '性别',
+  }, {
+    prop: 'phone',
+    label: '电话',
+    form: {
+      type: 'input',
+      itemType: 'phone'
+    }
+  }, {
+    prop: 'email',
+    label: '邮箱',
+    form: {
+      type: 'input'
+    }
+  }, {
+    prop: 'department',
+    label: '部门',
+  }, {
+    prop: 'start',
+    label: '状态',
+  }, {
+    prop: 'creationDate',
+    label: '创建日期',
+    form: {
+      type: 'date'
+    }
+  }]
+}
+
+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-range-editor.el-input__inner {
+  display: inline-flex;
+  align-items: center;
+  padding: 3px 10px;
+  height: 33px;
+  width: 300px;
+}
+</style>