Merge branch 'master' of https://gitee.com/dmc_qq/etc-project

src/crud/index.vue

@@ -169,9 +169,12 @@ if (tableFrom) {
     })
 }
 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

@@ -132,13 +132,23 @@ export const list = [
         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

@@ -21,6 +21,22 @@ const routes: RouteRecordRaw[] = [
           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

@@ -1,5 +1,13 @@
 <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">
 
@@ -130,7 +138,7 @@ const testData: any = get('department')
 
 const field = {
     rowKey: 'title',
-    searchShow: false,
+    searchShow: true,
     crudShow: true,
     dialogCustom: true,
     field: [{
@@ -162,4 +170,12 @@ const submit = () => {
 /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

@@ -1,107 +1,128 @@
 <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 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">
+
+                <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 :min="0" 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">
+                            <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="item.top === '否'" class="as-bold" :label-width="labelWidth" label="上级部门">
+                    <el-tree-select v-model="item.section" :data="threeData" />
+                </el-form-item>
+
+            </el-form>
+        </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'
-  }]
-
-//树数据
+    {
+        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: [],
-      },
-    ],
-  },
+    {
+        value: '黔通智联',
+        label: '黔通智联',
+        children: [
+            {
+                value: '部门一',
+                label: '部门一',
+                children: [],
+            },
+        ],
+    }, {
+        value: '世纪恒通',
+        label: '世纪恒通',
+        children: [
+            {
+                value: '部门二',
+                label: '部门二',
+                children: [],
+            },
+        ],
+    },
 ]
 
-//表单数据
 let item = ref({
-  title: '',
-  sort: 0,
-  top: '是',
-  start: '启用',
-  section: ''
+    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)
+    console.log(row);
+
+    item.value = toRaw(row)
 }
 
 //表单校验
@@ -111,71 +132,45 @@ const rules = reactive({ title: [{ required: true, message: '请输入部门名
 
 empty('department')
 if (get('department').length === 0) {
-  add('department', initData)
+    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'
-    }
-  }]
+    rowKey: 'title',
+    searchShow: true,
+    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
-    }
-  })
+    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;
+}
+
 /deep/.el-range-editor.el-input__inner {
   display: inline-flex;
   align-items: center;

src/views/system/menu/index.vue

@@ -1,5 +1,12 @@
 <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>
@@ -11,8 +18,8 @@ import {
 
 const field = {
   rowKey: 'title',
-  searchShow: false,
-  crudShow: false,
+  searchShow: true,
+  crudShow: true,
   field: [{
     prop: 'title',
     label: '菜单标题',
@@ -24,4 +31,13 @@ const field = {
     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

@@ -0,0 +1,151 @@
+<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

@@ -0,0 +1,186 @@
+<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>