权限规则基础配置

src/api/auth/rule.js

@@ -116,3 +116,20 @@ export function setAuthRuleSort(rule_id, sort) {
     }
   })
 }
+
+/**
+ * 根据编号自动设置排序值
+ * @param {Array} rule_id
+ */
+export function setAuthRuleIndex(rule_id) {
+  return request({
+    url: '/v1/auth_rule',
+    method: 'post',
+    params: {
+      method: 'set.auth.rule.index'
+    },
+    data: {
+      rule_id
+    }
+  })
+}

src/views/system/admin/member/index.vue

@@ -50,7 +50,6 @@ export default {
   },
   mounted() {
     this.initialization()
-    this.handleSubmit()
   },
   methods: {
     // 数据初始加载
@@ -62,6 +61,9 @@ export default {
         .then(res => {
           this.group = res.data
         })
+        .then(() => {
+          this.handleSubmit()
+        })
     },
     // 刷新列表页面
     handleRefresh() {

src/views/system/auth/rule/componnets/PageHeader/index.vue

@@ -0,0 +1,99 @@
+<template>
+  <el-form
+    :inline="true"
+    :model="form"
+    ref="form"
+    size="mini"
+    style="margin-bottom: -18px;">
+
+    <el-form-item label="模块" prop="module">
+      <el-select
+        v-model="form.module"
+        clearable
+        placeholder="请选择"
+        style="width: 120px;">
+        <el-option
+          v-for="(item, index) in module"
+          :key="index"
+          :label="item"
+          :value="index"/>
+      </el-select>
+    </el-form-item>
+
+    <el-form-item label="用户组" prop="group_id">
+      <el-select
+        v-model="form.group_id"
+        clearable
+        placeholder="请选择">
+        <el-option
+          v-for="item in group"
+          :key="item.group_id"
+          :label="item.name"
+          :value="item.group_id"/>
+      </el-select>
+    </el-form-item>
+
+    <el-form-item label="状态" prop="status">
+      <el-select
+        v-model="form.status"
+        clearable
+        placeholder="请选择"
+        style="width: 120px;">
+        <el-option label="启用" value="1"/>
+        <el-option label="禁用" value="0"/>
+      </el-select>
+    </el-form-item>
+
+    <el-form-item>
+      <el-button
+        type="primary"
+        :disabled="loading"
+        @click="handleFormSubmit">
+        <cs-icon name="search"/>
+        查询
+      </el-button>
+    </el-form-item>
+
+    <el-form-item>
+      <el-button
+        @click="handleFormReset">
+        <cs-icon name="refresh"/>
+        重置
+      </el-button>
+    </el-form-item>
+
+  </el-form>
+</template>
+
+<script>
+export default {
+  props: {
+    loading: {
+      default: false
+    },
+    module: {
+      default: () => {}
+    },
+    group: {
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      form: {
+        module: undefined,
+        group_id: undefined,
+        status: undefined
+      }
+    }
+  },
+  methods: {
+    handleFormSubmit() {
+      this.$emit('submit', this.form)
+    },
+    handleFormReset() {
+      this.$refs.form.resetFields()
+    }
+  }
+}
+</script>

src/views/system/auth/rule/componnets/PageMain/index.vue

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'index'
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/system/auth/rule/index.vue

@@ -1,17 +1,95 @@
 <template>
   <cs-container>
-    <template slot="header">header</template>
-    Hello Rule
-    <template slot="footer">footer</template>
+    <page-header
+      slot="header"
+      :loading="loading"
+      :module="module"
+      :group="group"
+      @submit="handleSubmit"
+      ref="header"/>
+    <page-main
+      :tree-data="tree"
+      :loading="loading"
+      :module="module"
+      :group="group"
+      @refresh="handleRefresh"/>
   </cs-container>
 </template>
 
 <script>
+import { getMenuModule } from '@/api/auth/menu'
+import { getAuthGroupList } from '@/api/auth/group'
+import { getAuthRuleList } from '@/api/auth/rule'
+
 export default {
-  name: 'rule'
-}
-</script>
+  name: 'system-auth-rule',
+  components: {
+    'PageHeader': () => import('./componnets/PageHeader'),
+    'PageMain': () => import('./componnets/PageMain')
+  },
+  data() {
+    return {
+      loading: false,
+      tree: [],
+      module: {},
+      group: {}
+    }
+  },
+  mounted() {
+    this.initialization()
+  },
+  methods: {
+    // 数据初始加载
+    initialization() {
+      Promise.all([
+        getMenuModule(),
+        getAuthGroupList({ status: 1 })
+      ])
+        .then(res => {
+          this.module = res[0]
+          res[1].data.forEach(value => {
+            this.group[value.group_id] = value
+          })
+        })
+        .then(() => {
+          this.handleSubmit()
+        })
+    },
+    // 重新载入页面
+    handleRefresh() {
+      this.$nextTick(() => {
+        this.$refs.header.handleFormSubmit()
+      })
+    },
+    // 提交查询请求
+    handleSubmit(form) {
+      this.loading = true
+      getAuthRuleList(form)
+        .then(res => {
+          this.tree = []
+          for (const index in this.module) {
+            if (!this.module.hasOwnProperty(index)) {
+              continue
+            }
 
-<style scoped>
+            this.tree[index] = {
+              rule_id: index,
+              name: this.module[index],
+              children: [],
+              system: true
+            }
+          }
 
-</style>
+          if (res.data.length > 0) {
+            res.data.forEach(value => {
+              this.tree[value.module].children.push(value)
+            })
+          }
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    }
+  }
+}
+</script>