角色页面转化crud

src/config/env.js

@@ -2,7 +2,8 @@
 
 const env = process.env
 let baseUrl = '';
-let iconfontVersion = ['667895_5lt01cjobo7']
+// 图表库为avue和pig2套地址
+let iconfontVersion = ['667895_5lt01cjobo7', '567566_qo5lxgtishg']
 let iconfontUrl = `//at.alicdn.com/t/font_$key.css`;
 let codeUrl = `/code`
 let actUrl = `${window.origin}/act/modeler.html?modelId=`;
@@ -20,4 +21,4 @@ export {
     iconfontVersion,
     codeUrl,
     env
-}
+}

src/const/crud/role.js

@@ -0,0 +1,109 @@
+/*
+ *    Copyright (c) 2018-2025, lengleng All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are met:
+ *
+ * Redistributions of source code must retain the above copyright notice,
+ * this list of conditions and the following disclaimer.
+ * Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ * Neither the name of the pig4cloud.com developer nor the names of its
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ * Author: lengleng (wangiegie@gmail.com)
+ */
+export const tableOption = {
+    border: true,
+    index: true,
+    indexLabel: '序号',
+    stripe: true,
+    menuAlign: 'center',
+    editBtn: false,
+    delBtn: false,
+    align: 'center',
+    addBtn: false,
+    column: [{
+        fixed: true,
+        label: 'id',
+        prop: 'roleId',
+        span: 24,
+        editDisabled: true,
+        addVisdiplay: false,
+    }, {
+        fixed: true,
+        label: '角色名称',
+        prop: 'roleName',
+        search: true,
+        span: 24,
+        rules: [{
+                required: true,
+                message: '角色名称不能为空',
+                trigger: 'blur'
+            },
+            {
+                min: 3,
+                max: 20,
+                message: '长度在 3 到 20 个字符',
+                trigger: 'blur'
+            }
+        ]
+    }, {
+        label: '角色标识',
+        prop: 'roleCode',
+        search: true,
+        span: 24,
+        rules: [{
+                required: true,
+                message: '角色标识不能为空',
+                trigger: 'blur'
+            },
+            {
+                min: 3,
+                max: 20,
+                message: '长度在 3 到 20 个字符',
+                trigger: 'blur'
+            }
+        ]
+    }, {
+        label: '所属部门',
+        prop: 'roleDeptId',
+        formsolt: true,
+        search: true,
+        solt: true,
+        span: 24,
+        rules: [{
+                required: true,
+                message: '所属部门不能为空',
+                trigger: 'blur'
+            },
+            {
+                min: 3,
+                max: 20,
+                message: '长度在 3 到 20 个字符',
+                trigger: 'blur'
+            }
+        ]
+    }, {
+        width: 180,
+        label: '角色描述',
+        prop: 'roleDesc',
+        overHidden: true,
+        type: 'textarea',
+        minRows: 6,
+        span: 24,
+    }, {
+        width: 180,
+        label: '创建时间',
+        prop: 'createTime',
+        search: true,
+        more: true,
+        type: 'datetime',
+        format: 'yyyy-MM-dd HH:mm',
+        valueFormat: 'yyyy-MM-dd HH:mm:ss',
+        editDisabled: true,
+        addVisdiplay: false,
+        span: 24,
+    }]
+}

src/const/crud/user.js

@@ -38,30 +38,72 @@ export const tableOption = {
         solt: true,
         search: true,
         span: 24,
+        rules: [{
+                required: true,
+                message: "请输入账户",
+                trigger: "blur"
+            },
+            {
+                min: 3,
+                max: 20,
+                message: "长度在 3 到 20 个字符",
+                trigger: "blur"
+            }
+        ]
     }, {
         label: '密码',
         prop: 'password',
         type: 'password',
         hide: true,
         span: 24,
+        rules: [{
+                required: true,
+                message: "请输入密码",
+                trigger: "blur"
+            },
+            {
+                min: 6,
+                max: 20,
+                message: "长度在 6 到 20 个字符",
+                trigger: "blur"
+            }
+        ]
     }, {
         label: '所属部门',
         prop: 'deptId',
+        search: true,
         formsolt: true,
         solt: true,
         span: 24,
+        rules: [{
+            required: true,
+            message: "请选择部门",
+            trigger: "blur"
+        }]
     }, {
         label: '角色',
         prop: 'role',
         formsolt: true,
         solt: true,
+        search: true,
         span: 24,
+        rules: [{
+            required: true,
+            message: "请选择角色",
+            trigger: "blur"
+        }],
     }, {
         label: '状态',
         prop: 'delFlag',
         type: "select",
         solt: true,
+        search: true,
         span: 24,
+        rules: [{
+            required: true,
+            message: "请选择状态",
+            trigger: "blur"
+        }],
         dicData: [{
             label: '有效',
             value: '0'
@@ -79,6 +121,8 @@ export const tableOption = {
         type: 'datetime',
         format: 'yyyy-MM-dd HH:mm',
         valueFormat: 'yyyy-MM-dd HH:mm:ss',
+        search: true,
+        more: true,
         editDisabled: true,
         addVisdiplay: false,
         span: 24,

src/views/admin/role/index.vue

@@ -18,161 +18,63 @@
 <template>
   <div class="app-container calendar-list-container">
     <basic-container>
-      <div class="filter-container">
-        <el-button class="filter-item"
-                   style="margin-left: 10px;"
-                   @click="handleCreate"
-                   type="primary"
-                   icon="edit"
-                   v-if="roleManager_btn_add">添加
-        </el-button>
-      </div>
-
-      <el-table :key='tableKey'
-                :data="list"
-                v-loading="listLoading"
-                element-loading-text="给我一点时间"
-                border
-                fit
-                highlight-current-row
-                style="width: 99%">
-
-        <el-table-column align="center"
-                         label="序号">
-          <template slot-scope="scope">
-            <span>{{scope.row.roleId}}</span>
-          </template>
-        </el-table-column>
-
-        <el-table-column label="角色名称">
-          <template slot-scope="scope">
-            <span>{{scope.row.roleName}}</span>
-          </template>
-        </el-table-column>
-
-        <el-table-column align="center"
-                         label="角色标识">
-          <template slot-scope="scope">
-            <span>{{scope.row.roleCode}}</span>
-          </template>
-        </el-table-column>
-
-        <el-table-column align="center"
-                         label="角色描述">
-          <template slot-scope="scope">
-            <span>{{scope.row.roleDesc }}</span>
-          </template>
-        </el-table-column>
-
-        <el-table-column align="center"
-                         label="所属部门">
-          <template slot-scope="scope">
-            <span>{{scope.row.deptName }}</span>
-          </template>
-        </el-table-column>
-
-        <el-table-column align="center"
-                         label="创建时间">
-          <template slot-scope="scope">
-            <span>{{scope.row.createTime | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
-          </template>
-        </el-table-column>
-
-        <el-table-column label="操作"
-                         width="220">
-          <template slot-scope="scope">
-            <el-button size="mini"
-                       type="success"
-                       v-if="roleManager_btn_edit"
-                       @click="handleUpdate(scope.row)">编辑
-            </el-button>
-            <el-button size="mini"
-                       type="danger"
-                       v-if="roleManager_btn_del"
-                       @click="handleDelete(scope.row)">删除
-            </el-button>
-            <el-button size="mini"
-                       type="info"
-                       plain
-                       @click="handlePermission(scope.row)"
-                       v-if="roleManager_btn_perm">权限
-            </el-button>
-          </template>
-        </el-table-column>
+      <avue-crud :option="tableOption"
+                 :data="list"
+                 ref="crud"
+                 :page="page"
+                 v-model="form"
+                 :table-loading="listLoading"
+                 :before-open="handleOpenBefore"
+                 @current-change="handleCurrentChange"
+                 @size-change="handleSizeChange"
+                 @search-change="handleFilter"
+                 @refresh-change="handleRefreshChange"
+                 @row-update="update"
+                 @row-save="create">
 
-      </el-table>
-
-      <div v-show="!listLoading"
-           class="pagination-container">
-        <el-pagination @size-change="handleSizeChange"
-                       @current-change="handleCurrentChange"
-                       :current-page.sync="listQuery.page"
-                       :page-sizes="[10,20,30, 50]"
-                       :page-size="listQuery.limit"
-                       layout="total, sizes, prev, pager, next, jumper"
-                       :total="total">
-        </el-pagination>
-      </div>
+        <template slot="menuLeft">
+          <el-button v-if="roleManager_btn_add"
+                     class="filter-item"
+                     @click="handleCreate"
+                     size="small"
+                     type="primary"
+                     icon="el-icon-edit">添加</el-button>
+        </template>
+        <template slot="roleDeptId"
+                  slot-scope="scope">
+          <el-tag>{{scope.row.deptName}}</el-tag>
+        </template>
+        <template slot="roleDeptIdForm"
+                  slot-scope="scope">
+          <avue-crud-input v-model="form.roleDeptId"
+                           type="tree"
+                           placeholder="请选择所属部门"
+                           :node-click="getNodeData"
+                           :dic="treeDeptData"
+                           :props="defaultProps"></avue-crud-input>
+        </template>
+        <template slot="menu"
+                  slot-scope="scope">
+          <el-button size="mini"
+                     type="success"
+                     v-if="roleManager_btn_edit"
+                     @click="handleUpdate(scope.row,scope.index)">编辑
+          </el-button>
+          <el-button size="mini"
+                     type="danger"
+                     v-if="roleManager_btn_del"
+                     @click="handleDelete(scope.row,scope.index)">删除
+          </el-button>
+          <el-button size="mini"
+                     type="info"
+                     plain
+                     @click="handlePermission(scope.row,scope.index)"
+                     v-if="roleManager_btn_perm">权限
+          </el-button>
+        </template>
+      </avue-crud>
     </basic-container>
-    <el-dialog :title="textMap[dialogStatus]"
-               :visible.sync="dialogFormVisible">
-      <el-form :model="form"
-               :rules="rules"
-               ref="form"
-               label-width="100px">
-        <el-form-item label="角色名称"
-                      prop="roleName">
-          <el-input v-model="form.roleName"
-                    placeholder="角色名称"></el-input>
-        </el-form-item>
-        <el-form-item label="角色标识"
-                      prop="roleCode">
-          <el-input v-model="form.roleCode"
-                    placeholder="角色标识"></el-input>
-        </el-form-item>
-        <el-form-item label="描述"
-                      prop="roleDesc">
-          <el-input v-model="form.roleDesc"
-                    placeholder="描述"></el-input>
-        </el-form-item>
-        <el-form-item label="所属部门"
-                      prop="roleDept">
-          <el-input v-model="form.deptName"
-                    placeholder="选择部门"
-                    @focus="handleDept()"
-                    readonly></el-input>
-          <el-input type="hidden"
-                    v-model="form.roleDeptId"></el-input>
-        </el-form-item>
-      </el-form>
-      <div slot="footer"
-           class="dialog-footer">
-        <el-button @click="cancel('form')">取 消</el-button>
-        <el-button v-if="dialogStatus=='create'"
-                   type="primary"
-                   @click="create('form')">确 定</el-button>
-        <el-button v-else
-                   type="primary"
-                   @click="update('form')">修 改</el-button>
-      </div>
-    </el-dialog>
-
-    <el-dialog :title="textMap[dialogStatus]"
-               :visible.sync="dialogDeptVisible">
-      <el-tree class="filter-tree"
-               :data="treeDeptData"
-               :default-checked-keys="checkedKeys"
-               node-key="id"
-               highlight-current
-               ref="deptTree"
-               @node-click="getNodeData"
-               :props="defaultProps"
-               :filter-node-method="filterNode"
-               default-expand-all>
-      </el-tree>
-    </el-dialog>
-
-    <el-dialog :title="textMap[dialogStatus]"
+    <el-dialog title="分配权限"
                :visible.sync="dialogPermissionVisible">
       <el-tree class="filter-tree"
                :data="treeData"
@@ -208,88 +110,36 @@ import {
 } from '@/api/role'
 import { fetchTree } from '@/api/menu'
 import { mapGetters } from 'vuex'
-
+import { tableOption } from '@/const/crud/role'
 export default {
   name: 'table_role',
   data () {
     return {
+      tableOption: tableOption,
       treeData: [],
       treeDeptData: [],
       checkedKeys: [],
       defaultProps: {
-        children: 'children',
-        label: 'name'
+        label: "name",
+        value: 'id'
+      },
+      page: {
+        total: 0, // 总页数
+        currentPage: 1, // 当前页数
+        pageSize: 20 // 每页显示多少条
       },
       menuIds: '',
-      list: null,
-      total: null,
+      list: [],
       listLoading: true,
       listQuery: {
         page: 1,
         limit: 20
       },
-      form: {
-        roleName: undefined,
-        roleCode: undefined,
-        roleDesc: undefined,
-        deptName: undefined,
-        roleDeptId: undefined
-      },
+      form: {},
       roleId: undefined,
       roleCode: undefined,
-      rules: {
-        roleName: [
-          {
-            required: true,
-            message: '角色名称',
-            trigger: 'blur'
-          },
-          {
-            min: 3,
-            max: 20,
-            message: '长度在 3 到 20 个字符',
-            trigger: 'blur'
-          }
-        ],
-        roleCode: [
-          {
-            required: true,
-            message: '角色标识',
-            trigger: 'blur'
-          },
-          {
-            min: 3,
-            max: 20,
-            message: '长度在 3 到 20 个字符',
-            trigger: 'blur'
-          }
-        ],
-        roleDesc: [
-          {
-            required: true,
-            message: '角色标识',
-            trigger: 'blur'
-          },
-          {
-            min: 3,
-            max: 20,
-            message: '长度在 3 到 20 个字符',
-            trigger: 'blur'
-          }
-        ]
-      },
-      statusOptions: ['0', '1'],
       rolesOptions: undefined,
-      dialogFormVisible: false,
-      dialogDeptVisible: false,
       dialogPermissionVisible: false,
-      dialogStatus: '',
-      textMap: {
-        update: '编辑',
-        create: '创建',
-        permission: '分配权限'
-      },
-      tableKey: 0,
       roleManager_btn_add: false,
       roleManager_btn_edit: false,
       roleManager_btn_del: false,
@@ -311,10 +161,18 @@ export default {
       this.listLoading = true
       fetchList(this.listQuery).then(response => {
         this.list = response.data.records
-        this.total = response.data.total
+        this.page.total = response.data.total
         this.listLoading = false
       })
     },
+    handleRefreshChange () {
+      this.getList()
+    },
+    handleFilter (param) {
+      this.listQuery = Object.assign(this.listQuery, param)
+      this.listQuery.page = 1;
+      this.getList();
+    },
     handleSizeChange (val) {
       this.listQuery.limit = val
       this.getList()
@@ -324,18 +182,14 @@ export default {
       this.getList()
     },
     handleCreate () {
-      this.resetTemp()
-      this.dialogStatus = 'create'
-      this.dialogFormVisible = true
+      this.$refs.crud.rowAdd();
     },
-    handleUpdate (row) {
-      getObj(row.roleId).then(response => {
-        this.form = response.data
-        this.form.deptName = row.deptName
-        this.form.roleDeptId = row.roleDeptId
-        this.dialogFormVisible = true
-        this.dialogStatus = 'update'
-      })
+    handleOpenBefore (show, type) {
+      this.handleDept();
+      show();
+    },
+    handleUpdate (row, index) {
+      this.$refs.crud.rowEdit(row, index);
     },
     handlePermission (row) {
       fetchRoleTree(row.roleId)
@@ -375,22 +229,19 @@ export default {
     handleDept () {
       fetchDeptTree().then(response => {
         this.treeDeptData = response.data
-        this.dialogDeptVisible = true
       })
     },
     filterNode (value, data) {
       if (!value) return true
       return data.label.indexOf(value) !== -1
     },
-    getNodeData (data) {
-      this.dialogDeptVisible = false
-      this.form.roleDeptId = data.id
+    getNodeData (data, done) {
       this.form.deptName = data.name
+      done();
     },
-    handleDelete (row) {
+    handleDelete (row, index) {
       delObj(row.roleId).then(response => {
-        this.dialogFormVisible = false
-        this.getList()
+        this.list.splice(index, 1);
         this.$notify({
           title: '成功',
           message: '删除成功',
@@ -399,48 +250,33 @@ export default {
         })
       })
     },
-    create (formName) {
-      const set = this.$refs
-      set[formName].validate(valid => {
-        if (valid) {
-          addObj(this.form).then(() => {
-            this.dialogFormVisible = false
-            this.getList()
-            this.$notify({
-              title: '成功',
-              message: '创建成功',
-              type: 'success',
-              duration: 2000
-            })
-          })
-        } else {
-          return false
-        }
-      })
-    },
-    cancel (formName) {
-      this.dialogFormVisible = false
-      this.$refs[formName].resetFields()
+    create (row, done, loading) {
+      addObj(this.form).then(() => {
+        this.getList()
+        done();
+        this.$notify({
+          title: '成功',
+          message: '创建成功',
+          type: 'success',
+          duration: 2000
+        })
+      }).catch(() => {
+        loading();
+      });
     },
-    update (formName) {
-      const set = this.$refs
-      set[formName].validate(valid => {
-        if (valid) {
-          this.dialogFormVisible = false
-          putObj(this.form).then(() => {
-            this.dialogFormVisible = false
-            this.getList()
-            this.$notify({
-              title: '成功',
-              message: '修改成功',
-              type: 'success',
-              duration: 2000
-            })
-          })
-        } else {
-          return false
-        }
-      })
+    update (row, index, done, loading) {
+      putObj(this.form).then(() => {
+        this.getList()
+        done();
+        this.$notify({
+          title: '成功',
+          message: '修改成功',
+          type: 'success',
+          duration: 2000
+        })
+      }).catch(() => {
+        loading();
+      });
     },
     updatePermession (roleId, roleCode) {
       this.menuIds = ''
@@ -462,14 +298,6 @@ export default {
             })
           })
       })
-    },
-    resetTemp () {
-      this.form = {
-        id: undefined,
-        roleName: undefined,
-        roleCode: undefined,
-        roleDesc: undefined
-      }
     }
   }
 }

src/views/admin/user/index.vue

@@ -67,18 +67,19 @@
           <el-button v-if="sys_user_edit"
                      size="small"
                      type="success"
-                     @click="handleUpdate(scope.row,scope.id)">编辑
+                     @click="handleUpdate(scope.row,scope.index)">编辑
           </el-button>
           <el-button v-if="sys_user_del"
                      size="small"
                      type="danger"
-                     @click="deletes(scope.row,scope.id)">删除
+                     @click="deletes(scope.row,scope.index)">删除
           </el-button>
         </template>
         <template slot="deptIdForm"
                   slot-scope="scope">
           <avue-crud-input v-model="form.deptId"
                            type="tree"
+                           placeholder="请选择所属部门"
                            :node-click="getNodeData"
                            :dic="treeDeptData"
                            :props="defaultProps"></avue-crud-input>
@@ -87,6 +88,7 @@
                   slot-scope="scope">
           <avue-crud-select v-model="role"
                             multiple
+                            placeholder="请选择角色，要先选择部门"
                             :dic="rolesOptions"
                             :props="roleProps"></avue-crud-select>
         </template>
@@ -180,7 +182,7 @@ export default {
       });
     },
     handleFilter (param) {
-      this.listQuery.username = param.username;
+      this.listQuery = Object.assign(this.listQuery, param)
       this.listQuery.page = 1;
       this.getList();
     },
@@ -228,10 +230,7 @@ export default {
         });
       }).catch(() => {
         loading();
-      });;
-    },
-    cancel (formName) {
-      this.$refs[formName].resetFields();
+      });
     },
     update (row, index, done, loading) {
       putObj(this.form).then(() => {