From fe85974425775c3dbcbe943fce94cee30ca26cae Mon Sep 17 00:00:00 2001
From: xuhuajiao <13476289682@163.com>
Date: Thu, 5 May 2022 10:28:53 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9D=83=E9=99=90=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/dept/index.vue  | 257 +++++++++++++------------------
 src/views/system/menu/index.vue  | 101 +++---------
 src/views/system/role/index.vue  |  12 +-
 src/views/system/role/role2.json |  38 +++++
 4 files changed, 170 insertions(+), 238 deletions(-)
 create mode 100644 src/views/system/role/role2.json

diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
index 998d57d..05e672b 100644
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -14,7 +14,6 @@
               placeholder="机构名称"
               style="width: 200px;"
               class="filter-item"
-              @keyup.enter.native="crud.toQuery"
             />
           </div>
           <div class="form_item">
@@ -26,13 +25,11 @@
               placeholder="管理员名称"
               style="width: 200px;"
               class="filter-item"
-              @keyup.enter.native="crud.toQuery"
             />
           </div>
-          <rrOperation />
         </el-col>
         <el-col class="page_add" :span="4">
-          <el-button class="table_add" type="primary" round @click="addDialogVisible = true">新增</el-button>
+          <el-button class="table_add" type="primary" round @click="addDept">新增</el-button>
         </el-col>
       </el-row>
     </div>
@@ -41,16 +38,21 @@
       append-to-body
       :close-on-click-modal="false"
       :show-close="false"
-      :before-close="crud.cancelCU"
       :visible.sync="addDialogVisible"
-      title="新增"
-      width="620px"
+      :title="layerTitle"
+      width="630px"
     >
-      <el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="80px">
+      <el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="100px">
         <el-form-item label="机构名称" prop="name">
-          <el-input v-model="form.name" style="width: 360px;" />
+          <el-input v-model="form.org_name" style="width: 360px;" />
           <span class="init_password">密码默认：123456</span>
         </el-form-item>
+        <el-form-item label="管理员名称" prop="name" label-width="100px">
+          <el-input v-model="form.user_name" style="width: 360px;" />
+        </el-form-item>
+        <el-form-item label="管理员账号" prop="name" label-width="100px">
+          <el-input v-model="form.user_account" style="width: 360px;" />
+        </el-form-item>
         <el-form-item label="有效时间" prop="indate">
           <el-date-picker
             v-model="form.indate"
@@ -71,9 +73,21 @@
             />
           </el-select>
         </el-form-item>
+        <el-form-item label="权限" prop="permissionAll">
+          <el-checkbox v-model="treeCheckAll" @change="handleCheckedAll">全选</el-checkbox>
+          <el-tree
+            ref="role"
+            :data="roleTree"
+            :default-expand-all="true"
+            :props="defaultProps"
+            show-checkbox
+            node-key="id"
+            @check-change="handleCheckChange"
+          />
+        </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button :loading="crud.status.cu === 2" type="primary" round @click="crud.submitCU">新增</el-button>
+        <el-button type="primary" round>新增</el-button>
         <el-button round @click="addDialogVisible=false">关闭</el-button>
       </div>
     </el-dialog>
@@ -99,16 +113,10 @@
       <el-col>
         <el-table
           ref="table"
-          v-loading="crud.loading"
           lazy
-          :load="getDeptDatas"
-          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
           :data="tableData"
           row-key="id"
           :header-cell-style="{ background: '#3a8aeb', color: '#fff' }"
-          @select="crud.selectChange"
-          @select-all="crud.selectAllChange"
-          @selection-change="crud.selectionChangeHandler"
         >
           <el-table-column :selectable="checkboxT" type="selection" width="55" />
           <el-table-column label="机构名称" align="center" prop="name" />
@@ -127,12 +135,11 @@
               <el-button
                 type="primary"
                 class="edit_btn"
-                @click="editFormData(scope.$index, scope.row)"
+                @click="editDept(scope.$index, scope.row)"
               >编辑</el-button>
               <el-button
                 type="primary"
                 class="stop_btn"
-                @click="editFormData(scope.$index, scope.row)"
               >停用</el-button>
               <el-button
                 type="info"
@@ -143,42 +150,39 @@
           </el-table-column>
         </el-table>
         <!--分页组件-->
-        <pagination />
+        <el-pagination style="margin-top: 20px;" background :current-page="page" :total="total" :page-size="size" :pager-count="5" :page-sizes="[3, 5, 10]" layout="prev, pager, next, jumper,->,sizes,total" @current-change="getDeptList" @size-change="handleSizeChange" />
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
-import crudDept from '@/api/system/dept'
-// import Treeselect from '@riophae/vue-treeselect';
-// import '@riophae/vue-treeselect/dist/vue-treeselect.css';
-// import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect';
-import CRUD, { presenter, header, form, crud } from '@crud/crud'
-import rrOperation from '@crud/RR.operation'
-// import crudOperation from '@crud/CRUD.operation';
-// import udOperation from '@crud/UD.operation';
-// import DateRangePicker from '@/components/DateRangePicker'
-import pagination from '@crud/Pagination'
-
-const defaultForm = {
-  id: null,
-  name: null,
-  versions: null,
-  indate: []
-}
+import roleTree from '../role/role2.json'
 export default {
   name: 'Dept',
-  components: { rrOperation, pagination },
-  cruds() {
-    return CRUD({ title: '部门', url: 'api/dept', crudMethod: { ...crudDept }})
-  },
-  mixins: [presenter(), header(), form(defaultForm), crud()],
-  // 设置数据字典
-  dicts: ['dept_status'],
+  components: {},
   data() {
     return {
-      depts: [],
+      layerTitle: '',
+      roleTree: null,
+      defaultProps: { children: 'children', label: 'label' },
+      treeCheckAll: false,
+      tags: [],
+      currentChecked: null,
+      page: 1,
+      size: 10,
+      total: 0,
+      query: {
+        blurry: null
+      },
+      form: {
+        id: null,
+        org_name: null,
+        user_name: null,
+        user_account: null,
+        indate: [],
+        versions: null
+      },
       rules: {
         name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
         versions: [
@@ -223,119 +227,70 @@ export default {
           date: '2021-1-1 14:00'
         }
       ]
-      // permission: {
-      //   add: ['admin', 'dept:add'],
-      //   edit: ['admin', 'dept:edit'],
-      //   del: ['admin', 'dept:del']
-      // },
-      // enabledTypeOptions: [{ key: 'true', display_name: '正常' }, { key: 'false', display_name: '禁用' }]
     }
   },
+  created() {
+    this.roleTree = roleTree
+  },
   methods: {
+    getDeptList() {
+
+    },
+    // 每条显示数据改变时的事件
+    handleSizeChange(size) {
+      // 整理参数
+      this.size = size
+      this.getDeptList()
+    },
+    addDept() {
+      this.addDialogVisible = true
+      this.layerTitle = '新增'
+    },
+    handleCheckedAll() {
+      if (this.treeCheckAll) {
+        this.$refs.role.setCheckedNodes(this.roleTree)
+      } else {
+        this.$refs.role.setCheckedKeys([])
+      }
+    },
+    handleCheckChange(data, checked) {
+      let childLength = 0
+      this.roleTree.forEach(function(item) {
+        childLength += item.children.length
+      }, 0)
+      const allLength = this.roleTree.length + childLength
+      this.form.permissionAll = this.$refs.role.getCheckedKeys().concat(this.$refs.role.getHalfCheckedKeys())
+      this.treeCheckAll = this.form.permissionAll.length == allLength
+      this.tags.push(data.label)
+      this.currentChecked = checked
+      for (var i = 0; i <= this.tags.length; i++) {
+        if (this.currentChecked == false) {
+          this.tags.splice(this.tags.indexOf(this.i), 1)
+        }
+      }
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          console.log(this.form)
+          alert('submit!')
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields()
+      this.roleFormVisible = false
+    },
+    editDept(index, row) {
+      this.addDialogVisible = true
+      this.layerTitle = '编辑'
+    },
     handleRecord(index, row) {
       this.recordVisible = true
     },
-    getDeptDatas(tree, treeNode, resolve) {
-      // const params = { pid: tree.id };
-      // setTimeout(() => {
-      //   crudDept.getDepts(params).then(res => {
-      //     resolve(res.content);
-      //   });
-      // }, 100);
-    },
-    // // 新增与编辑前做的操作
-    // [CRUD.HOOK.afterToCU](crud, form) {
-    //   if (form.pid !== null) {
-    //     form.isTop = '0';
-    //   } else if (form.id !== null) {
-    //     form.isTop = '1';
-    //   }
-    //   form.enabled = `${form.enabled}`;
-    //   if (form.id != null) {
-    //     this.getSupDepts(form.id);
-    //   } else {
-    //     this.getDepts();
-    //   }
-    // },
-    // getSupDepts(id) {
-    //   crudDept.getDeptSuperior(id).then(res => {
-    //     const date = res.content;
-    //     this.buildDepts(date);
-    //     this.depts = date;
-    //   });
-    // },
-    // buildDepts(depts) {
-    //   depts.forEach(data => {
-    //     if (data.children) {
-    //       this.buildDepts(data.children);
-    //     }
-    //     if (data.hasChildren && !data.children) {
-    //       data.children = null;
-    //     }
-    //   });
-    // },
-    // getDepts() {
-    //   crudDept.getDepts({ enabled: true }).then(res => {
-    //     this.depts = res.content.map(function(obj) {
-    //       if (obj.hasChildren) {
-    //         obj.children = null;
-    //       }
-    //       return obj;
-    //     });
-    //   });
-    // },
-    // // 获取弹窗内部门数据
-    // loadDepts({ action, parentNode, callback }) {
-    //   if (action === LOAD_CHILDREN_OPTIONS) {
-    //     crudDept.getDepts({ enabled: true, pid: parentNode.id }).then(res => {
-    //       parentNode.children = res.content.map(function(obj) {
-    //         if (obj.hasChildren) {
-    //           obj.children = null;
-    //         }
-    //         return obj;
-    //       });
-    //       setTimeout(() => {
-    //         callback();
-    //       }, 100);
-    //     });
-    //   }
-    // },
-    // // 提交前的验证
-    // [CRUD.HOOK.afterValidateCU]() {
-    //   if (this.form.pid !== null && this.form.pid === this.form.id) {
-    //     this.$message({
-    //       message: '上级部门不能为空',
-    //       type: 'warning'
-    //     });
-    //     return false;
-    //   }
-    //   if (this.form.isTop === '1') {
-    //     this.form.pid = null;
-    //   }
-    //   return true;
-    // },
-    // // 改变状态
-    // changeEnabled(data, val) {
-    //   this.$confirm('此操作将 "' + this.dict.label.dept_status[val] + '" ' + data.name + '部门, 是否继续？', '提示', {
-    //     confirmButtonText: '确定',
-    //     cancelButtonText: '取消',
-    //     type: 'warning'
-    //   })
-    //     .then(() => {
-    //       crudDept
-    //         .edit(data)
-    //         .then(res => {
-    //           this.crud.notify(this.dict.label.dept_status[val] + '成功', CRUD.NOTIFICATION_TYPE.SUCCESS);
-    //         })
-    //         .catch(err => {
-    //           data.enabled = !data.enabled;
-    //           console.log(err.response.data.message);
-    //         });
-    //     })
-    //     .catch(() => {
-    //       data.enabled = !data.enabled;
-    //     });
-    // },
     checkboxT(row, rowIndex) {
       return row.id !== 1
     }
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index 1cacd85..84de6f1 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -14,14 +14,17 @@
               placeholder="所属菜单"
               style="width: 200px;"
               class="filter-item"
-              @keyup.enter.native="crud.toQuery"
             />
           </div>
           <div class="form_item">
             <span>时间：</span>
-            <date-range-picker v-model="query.createTime" class="date-item" />
+            <el-date-picker
+              v-model="query.createTime"
+              value-format="yyyy-MM-dd"
+              type="date"
+              placeholder="选择时间"
+            />
           </div>
-          <rrOperation />
         </el-col>
         <el-col class="page_add" :span="4">
           <el-button class="table_add" type="primary" round @click="addDialogVisible = true">新增</el-button>
@@ -55,11 +58,10 @@
             />
           </el-select>
         </el-form-item>
-        <el-form-item label="新增权限" prop="permission">
+        <el-form-item label="子菜单" prop="permission">
           <el-input
             v-model="form.permission"
-            :disabled="form.iframe"
-            placeholder="新增权限"
+            placeholder="子菜单"
             style="width: 336px;"
           />
         </el-form-item>
@@ -68,7 +70,7 @@
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button :loading="crud.status.cu === 2" type="primary" round @click="crud.submitCU">添加</el-button>
+        <el-button type="primary" round>添加</el-button>
         <el-button round @click="addDialogVisible=false">关闭</el-button>
       </div>
     </el-dialog>
@@ -77,15 +79,10 @@
       <el-col>
         <el-table
           ref="table"
-          v-loading="crud.loading"
           lazy
-          :load="getMenus"
           :data="tableData"
           row-key="id"
           :header-cell-style="{ background: '#3a8aeb', color: '#fff' }"
-          @select="crud.selectChange"
-          @select-all="crud.selectAllChange"
-          @selection-change="crud.selectionChangeHandler"
         >
           <el-table-column type="selection" width="55" align="center" />
           <el-table-column prop="title" label="菜单标题" align="center" />
@@ -99,34 +96,20 @@
 </template>
 
 <script>
-import crudMenu from '@/api/system/menu'
-// import IconSelect from '@/components/IconSelect'
-// import Treeselect from '@riophae/vue-treeselect'
-// import '@riophae/vue-treeselect/dist/vue-treeselect.css'
-// import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
-import CRUD, { presenter, header, form, crud } from '@crud/crud'
-import rrOperation from '@crud/RR.operation'
-// import crudOperation from '@crud/CRUD.operation'
-// import udOperation from '@crud/UD.operation'
-import DateRangePicker from '@/components/DateRangePicker'
-
-// crud交由presenter持有
-const defaultForm = {
-  id: null,
-  title: null,
-  path: null,
-  permission: null
-}
 export default {
   name: 'Menu',
-  components: { rrOperation, DateRangePicker },
-  cruds() {
-    return CRUD({ title: '菜单', url: 'api/menus', crudMethod: { ...crudMenu }})
-  },
-  mixins: [presenter(), header(), form(defaultForm), crud()],
+  components: {},
   data() {
     return {
-      menus: [],
+      query: {
+        blurry: null,
+        createTime: null
+      },
+      form: {
+        title: null,
+        permission: null,
+        path: null
+      },
       addDialogVisible: false,
       tableData: [
         {
@@ -184,52 +167,6 @@ export default {
     }
   },
   methods: {
-    // 新增与编辑前做的操作
-    [CRUD.HOOK.afterToCU](crud, form) {
-      this.menus = []
-      if (form.id != null) {
-        if (form.pid === null) {
-          form.pid = 0
-        }
-        this.getSupDepts(form.id)
-      } else {
-        this.menus.push({ id: 0, label: '顶级类目', children: null })
-      }
-    },
-    getMenus(tree, treeNode, resolve) {
-      const params = { pid: tree.id }
-      setTimeout(() => {
-        crudMenu.getMenus(params).then(res => {
-          resolve(res.content)
-        })
-      }, 100)
-    },
-    getSupDepts(id) {
-      crudMenu.getMenuSuperior(id).then(res => {
-        const children = res.map(function(obj) {
-          if (!obj.leaf && !obj.children) {
-            obj.children = null
-          }
-          return obj
-        })
-        this.menus = [{ id: 0, label: '顶级类目', children: children }]
-      })
-    },
-    loadMenus({ action, parentNode, callback }) {
-      if (action === LOAD_CHILDREN_OPTIONS) {
-        crudMenu.getMenusTree(parentNode.id).then(res => {
-          parentNode.children = res.map(function(obj) {
-            if (!obj.leaf) {
-              obj.children = null
-            }
-            return obj
-          })
-          setTimeout(() => {
-            callback()
-          }, 100)
-        })
-      }
-    },
     // 选中图标
     selected(name) {
       this.form.icon = name
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index 3cd51c7..ef922e3 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -227,18 +227,20 @@ export default {
       }
     },
     handleCheckChange(data, checked) {
-      this.tags.push(data.label)
+      let childLength = 0
+      this.roleTree.forEach(function(item) {
+        childLength += item.children.length
+      }, 0)
+      const allLength = this.roleTree.length + childLength
       this.form.permissionAll = this.$refs.role.getCheckedKeys().concat(this.$refs.role.getHalfCheckedKeys())
-      console.log(this.form.permissionAll, '选中的节点')
+      this.treeCheckAll = this.form.permissionAll.length == allLength
+      this.tags.push(data.label)
       this.currentChecked = checked
       for (var i = 0; i <= this.tags.length; i++) {
         if (this.currentChecked == false) {
           this.tags.splice(this.tags.indexOf(this.i), 1)
         }
       }
-
-      console.log(this.$refs.role.getCheckedNodes())
-      console.log(this.tags)
     },
     submitForm(formName) {
       this.$refs[formName].validate((valid) => {
diff --git a/src/views/system/role/role2.json b/src/views/system/role/role2.json
new file mode 100644
index 0000000..dee9be5
--- /dev/null
+++ b/src/views/system/role/role2.json
@@ -0,0 +1,38 @@
+[{
+  "id": 1,
+	"label": "首页",
+	"children": []
+}, {
+  "id": 2,
+	"label": "内容管理",
+	"children": [{
+    "id": 5,
+		"label": "素材库"
+	}, {
+    "id": 6,
+		"label": "上屏发布"
+	}, {
+    "id": 7,
+		"label": "主题库"
+	}]
+}, {
+  "id": 3,
+	"label": "设备管理",
+	"children": [{
+    "id": 8,
+		"label": "设备列表"
+	}, {
+    "id": 9,
+		"label": "开关机配置"
+	}]
+}, {
+  "id": 4,
+	"label": "用户管理",
+	"children": [{
+    "id": 10,
+		"label": "用户列表"
+	}, {
+    "id": 11,
+		"label": "角色管理"
+	}]
+}]
\ No newline at end of file