haiwei-module-admin 1.0.0

package/src/views/mime/components/save/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <nm-form-dialog ref="form" v-bind="form" v-on="on" :visible.sync="visible_">
+    <el-row>
+      <el-col :span="20" :offset="1">
+        <el-form-item label="扩展名：" prop="ext">
+          <el-input v-model="form.model.ext" clearable />
+        </el-form-item>
+        <el-form-item label="值：" prop="value">
+          <el-input v-model="form.model.value" clearable />
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </nm-form-dialog>
+</template>
+<script>
+import { mixins } from 'netmodular-ui'
+
+// 接口
+const { add, edit, update } = $api.admin.mime
+
+export default {
+  mixins: [mixins.formSave],
+  data() {
+    return {
+      title: 'MIME',
+      actions: {
+        add,
+        edit,
+        update
+      },
+      form: {
+        width: '40%',
+        model: {
+          ext: '',
+          value: ''
+        },
+        rules: {
+          ext: [{ required: true, message: '请输入扩展名' }],
+          value: [{ required: true, message: '请输入值' }]
+        }
+      }
+    }
+  }
+}
+</script>

package/src/views/mime/index/cols.js

@@ -0,0 +1,16 @@
+export default [
+  {
+    name: 'id',
+    label: '编号',
+    width: 250,
+    show: false
+  },
+  {
+    name: 'ext',
+    label: '扩展名'
+  },
+  {
+    name: 'value',
+    label: '值'
+  }
+]

package/src/views/mime/index/index.vue

@@ -0,0 +1,55 @@
+<template>
+  <nm-container>
+    <nm-list ref="list" v-bind="list">
+      <!--查询条件-->
+      <template v-slot:querybar>
+        <el-form-item label="扩展名：" prop="ext">
+          <el-input v-model="list.model.ext" clearable />
+        </el-form-item>
+      </template>
+
+      <!--按钮-->
+      <template v-slot:querybar-buttons>
+        <nm-button v-bind="buttons.add" @click="add" />
+      </template>
+
+      <!--操作列-->
+      <template v-slot:col-operation="{ row }">
+        <nm-button v-bind="buttons.edit" @click="edit(row)" />
+        <nm-button-delete v-bind="buttons.del" :id="row.id" :action="removeAction" @success="refresh" />
+      </template>
+    </nm-list>
+
+    <!--编辑-->
+    <save-page :id="curr.id" :visible.sync="dialog.save" @success="refresh" />
+  </nm-container>
+</template>
+<script>
+import { mixins } from 'netmodular-ui'
+import page from './page'
+import cols from './cols'
+import SavePage from '../components/save'
+
+// 接口
+const api = $api.admin.mime
+
+export default {
+  name: page.name,
+  mixins: [mixins.list],
+  components: { SavePage },
+  data() {
+    return {
+      list: {
+        title: page.title,
+        cols,
+        action: api.query,
+        model: {
+          ext: ''
+        }
+      },
+      removeAction: api.remove,
+      buttons: page.buttons
+    }
+  }
+}
+</script>

package/src/views/mime/index/page.js

@@ -0,0 +1,42 @@
+/** 页面信息 */
+const page = new (function() {
+  this.title = 'MIME'
+  this.icon = 'media'
+  this.name = 'admin_mime'
+  this.path = '/admin/mime'
+
+  // 关联权限
+  this.permissions = [`${this.name}_query_get`]
+
+  this.buttons = {
+    add: {
+      text: '添加',
+      type: 'success',
+      code: `${this.name}_add`,
+      icon: 'add',
+      permissions: [`${this.name}_add_post`]
+    },
+    edit: {
+      text: '编辑',
+      type: 'text',
+      icon: 'edit',
+      code: `${this.name}_edit`,
+      permissions: [`${this.name}_edit_get`, `${this.name}_update_post`]
+    },
+    del: {
+      text: '删除',
+      type: 'text',
+      icon: 'delete',
+      code: `${this.name}_del`,
+      permissions: [`${this.name}_delete_delete`]
+    }
+  }
+})()
+
+/** 路由信息 */
+export const route = {
+  page,
+  component: () => import(/* webpackChunkName: "Admin.Mime" */ './index')
+}
+
+export default page

package/src/views/module/components/page-list/index.vue

@@ -0,0 +1,234 @@
+<template>
+  <nm-dialog v-bind="dialog" :visible.sync="visible_">
+    <template v-slot:title> 页面列表({{ module.name }}) </template>
+    <div class="nm-module-page-list">
+      <section class="left">
+        <el-tabs ref="pageTab" v-model="pageTab" tab-position="left" style="height: 100%;">
+          <el-tab-pane v-for="page in pages" :key="page.code" :name="page.code" :label="page.name">
+            <span slot="label"><nm-icon :name="page.icon" /> {{ page.name }}</span>
+          </el-tab-pane>
+        </el-tabs>
+      </section>
+      <section class="right">
+        <nm-tabs>
+          <el-tabs type="card">
+            <el-tab-pane>
+              <span slot="label"><i class="el-icon-date"></i> 详情</span>
+              <nm-scrollbar style="height:100%">
+                <el-divider content-position="left">页面信息</el-divider>
+                <el-form>
+                  <el-row>
+                    <el-col :span="10" :offset="1">
+                      <el-form-item label="标题：">
+                        <span>{{ page.name }} </span>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="10">
+                      <el-form-item label="图标：">
+                        <nm-icon class="nm-size-25" :name="page.icon" />
+                      </el-form-item>
+                    </el-col>
+                  </el-row>
+                  <el-row>
+                    <el-col :span="10" :offset="1">
+                      <el-form-item label="路由名称：">
+                        <span>{{ page.code }} </span>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="10">
+                      <el-form-item label="路由路径：">
+                        <span>{{ page.path }} </span>
+                      </el-form-item>
+                    </el-col>
+                  </el-row>
+                  <el-row>
+                    <el-col :span="10" :offset="1">
+                      <el-form-item label="路由缓存：">
+                        <span><el-switch :value="page.cache" disabled> </el-switch> </span>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="10">
+                      <el-form-item label="框架内：">
+                        <span><el-switch :value="page.frameIn" disabled> </el-switch> </span>
+                      </el-form-item>
+                    </el-col>
+                  </el-row>
+                  <el-row>
+                    <el-col :span="10" :offset="1">
+                      <el-form-item label="权限验证：">
+                        <span><el-switch :value="!page.noPermission" disabled> </el-switch> </span>
+                      </el-form-item>
+                    </el-col>
+                  </el-row>
+                </el-form>
+                <el-divider content-position="left">关联权限</el-divider>
+                <el-table :data="pagePermissions" border stripe size="mini" style="width: 100%">
+                  <el-table-column prop="name" label="名称" width="180" align="center"> </el-table-column>
+                  <el-table-column prop="controller" label="控制器" width="120" align="center"> </el-table-column>
+                  <el-table-column prop="action" label="方法" align="center"> </el-table-column>
+                  <el-table-column prop="httpMethod" label="请求方式" width="70" align="center">
+                    <template slot-scope="scope">
+                      {{ getHttpMethodName(scope.row.httpMethod) }}
+                    </template>
+                  </el-table-column>
+                  <el-table-column prop="code" label="编码" align="center" show-overflow-tooltip> </el-table-column>
+                </el-table>
+              </nm-scrollbar>
+            </el-tab-pane>
+            <el-tab-pane>
+              <span slot="label"><i class="el-icon-date"></i> 按钮</span>
+              <nm-box page>
+                <el-table :data="buttons" border stripe size="mini" style="width: 100%;">
+                  <el-table-column prop="text" label="名称" align="center" width="100"> </el-table-column>
+                  <el-table-column prop="icon" label="图标" align="center" width="100">
+                    <template v-slot="scope">
+                      <nm-icon v-if="scope.row.icon" :name="scope.row.icon" class="nm-size-18" />
+                    </template>
+                  </el-table-column>
+                  <el-table-column prop="code" label="编码" align="center"> </el-table-column>
+                  <el-table-column prop="permissions" label="关联权限" align="center">
+                    <template v-slot="scope">
+                      <p v-for="p in scope.row.permissions" :key="p">{{ p }}</p>
+                    </template>
+                  </el-table-column>
+                </el-table>
+              </nm-box>
+            </el-tab-pane>
+          </el-tabs>
+        </nm-tabs>
+      </section>
+    </div>
+  </nm-dialog>
+</template>
+<script>
+import { mapState } from 'vuex'
+import { mixins } from 'netmodular-ui'
+
+const { queryByCodes } = $api.admin.permission
+
+export default {
+  mixins: [mixins.visible],
+  data() {
+    return {
+      dialog: {
+        icon: 'permission',
+        width: '900px',
+        height: '80%',
+        noScrollbar: true
+      },
+      pageTab: '',
+      page: {
+        name: '',
+        code: '',
+        icon: '',
+        path: '',
+        permissions: [],
+        buttons: []
+      },
+      pagePermissions: [],
+      buttons: []
+    }
+  },
+  props: {
+    module: Object
+  },
+  computed: {
+    ...mapState('app/page', { allPages: s => s.pages }),
+    pages() {
+      if (!this.module.code) return []
+      return this.allPages.filter(m => m.moduleCode.toLowerCase() === this.module.code.toLowerCase())
+    }
+  },
+  methods: {
+    getHttpMethodName(httpMethod) {
+      switch (httpMethod) {
+        case 0:
+          return 'GET'
+        case 1:
+          return 'PUT'
+        case 2:
+          return 'POST'
+        case 3:
+          return 'DELETE'
+        case 4:
+          return 'HEAD'
+        case 5:
+          return 'OPTIONS'
+        case 6:
+          return 'TRACE'
+        case 7:
+          return 'PATCH'
+      }
+    }
+  },
+  watch: {
+    pages(val) {
+      if (val.length > 0) {
+        this.pageTab = val[0].code
+      } else {
+        this.pageTab = ''
+      }
+    },
+    pageTab(val) {
+      this.pagePermissions = []
+      this.buttons = []
+      if (val) this.page = this.pages.find(m => m.code === val)
+      if (!this.page) {
+        this.page = {
+          name: '',
+          code: '',
+          icon: '',
+          permissions: [],
+          buttons: []
+        }
+      } else {
+        queryByCodes(this.page.permissions).then(data => {
+          if (data) {
+            this.pagePermissions = data
+          }
+        })
+
+        if (this.page.buttons) {
+          for (let key in this.page.buttons) {
+            this.buttons.push(this.page.buttons[key])
+          }
+        }
+      }
+    }
+  }
+}
+</script>
+<style lang="scss">
+.nm-module-page-list {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  height: 100%;
+
+  .left {
+    flex-shrink: 0;
+    .el-tabs__header {
+      margin-right: 0;
+    }
+    .el-tabs__item {
+      text-align: left !important;
+    }
+  }
+  .right {
+    flex-grow: 1;
+
+    .el-tab-pane {
+      box-sizing: border-box;
+
+      .el-scrollbar__view {
+        padding: 10px 20px;
+      }
+    }
+  }
+}
+.left-pane {
+  .el-tabs__content {
+    display: none;
+  }
+}
+</style>

package/src/views/module/components/permission-list/cols.js

@@ -0,0 +1,36 @@
+export default [
+  {
+    name: 'id',
+    label: '编号',
+    show: false,
+    width: 260
+  },
+  {
+    name: 'name',
+    label: '名称'
+  },
+  {
+    name: 'moduleCode',
+    label: '模块编码',
+    show: false
+  },
+  {
+    name: 'controller',
+    label: '控制器',
+    width: '120'
+  },
+  {
+    name: 'action',
+    label: '方法'
+  },
+  {
+    name: 'httpMethod',
+    label: '请求方式',
+    width: '80'
+  },
+  {
+    name: 'code',
+    label: '唯一编码',
+    width: '300'
+  }
+]

package/src/views/module/components/permission-list/index.vue

@@ -0,0 +1,90 @@
+<template>
+  <nm-list-dialog v-bind="dialog" :visible.sync="visible_" @open="onOpen">
+    <template v-slot:title> 接口权限列表({{ module.name }}) </template>
+    <nm-list ref="list" v-bind="list">
+      <!--查询条件-->
+      <template v-slot:querybar>
+        <el-form-item label="名称：" prop="name">
+          <el-input v-model="list.model.name" clearable />
+        </el-form-item>
+      </template>
+
+      <template v-slot:col-httpMethod="{ row }"> {{ getHttpMethodName(row.httpMethod) }} </template>
+    </nm-list>
+  </nm-list-dialog>
+</template>
+<script>
+import { mixins } from 'netmodular-ui'
+import cols from './cols'
+const { query } = $api.admin.permission
+
+export default {
+  mixins: [mixins.visible],
+  data() {
+    return {
+      dialog: {
+        icon: 'permission',
+        width: '900px'
+      },
+      list: {
+        cols,
+        noHeader: true,
+        noOperation: true,
+        action: this.query,
+        queryOnCreated: false,
+        noFooter: true,
+        model: {
+          name: ''
+        }
+      },
+      rows: []
+    }
+  },
+  props: {
+    module: Object
+  },
+  methods: {
+    refresh() {
+      query({ moduleCode: this.module.code }).then(rows => {
+        this.rows = rows
+        this.$refs.list.refresh()
+      })
+    },
+    query() {
+      const name = this.list.model.name
+      const rows = name ? this.rows.filter(m => m.name.includes(name)) : this.rows
+      return new Promise(resolve => {
+        resolve({
+          rows: rows,
+          total: rows.length
+        })
+      })
+    },
+    onOpen() {
+      this.list.model.name = ''
+      this.list.model.moduleCode = this.module.code
+      this.refresh()
+    },
+    getHttpMethodName(httpMethod) {
+      switch (httpMethod) {
+        case 0:
+          return 'GET'
+        case 1:
+          return 'PUT'
+        case 2:
+          return 'POST'
+        case 3:
+          return 'DELETE'
+        case 4:
+          return 'HEAD'
+        case 5:
+          return 'OPTIONS'
+        case 6:
+          return 'TRACE'
+        case 7:
+          return 'PATCH'
+      }
+    }
+  }
+}
+</script>