新增权限配置页

src/components/PublicPageDialog/index.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="PublicPageDialog">
+    <el-drawer :title="dialogTitle" :visible.sync="dialogDrawer" :size="dialogSize" :direction="dialogDirection" :before-close="handleClose">
+      <div class="PublicPageDialog-content">
+        <slot />
+      </div>
+      <div class="PublicPageDialog-foot">
+        <el-button @click="handleClose" size="small">取消</el-button>
+        <slot name="d_foot" />
+        <el-button @click="handleSubmit" type="primary" size="small">确定</el-button>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PublicPageDialog',
+  props: {
+    dialogTitle: {
+      type: String,
+      default: ''
+    },
+    dialogDrawer: {
+      type: Boolean,
+      default: false
+    },
+    dialogDirection: {
+      type: String,
+      default: 'rtl'
+    },
+    dialogSize: {
+      type: String | Number,
+      default: '350px'
+    }
+  },
+  methods: {
+    handleClose () {
+      this.$emit('handleClose')
+    },
+    handleSubmit () {
+      this.$emit('handleSubmit')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep.PublicPageDialog {
+  position: relative;
+  .el-drawer__header {
+    span {
+      font-weight: 600;
+      font-size: 16px;
+      color: #000;
+    }
+  }
+  .el-select {
+    width: 100%;
+  }
+  &-content {
+    padding: 0 20px 20px 20px;
+    padding-bottom: 72px;
+  }
+  &-foot {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    z-index: 10;
+    text-align: right;
+    padding: 20px;
+    background-color: rgb(255, 255, 255);
+    box-shadow: 0 0 10px 0 hsla(0, 6%, 58%, 0.6);
+    transition: all 0.3s ease 0s;
+  }
+}
+</style>
+

src/components/PublicPageHeader/index.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="PublicPageHeader">
+    <div class="PublicPageHeader-title">{{ pageTitle }}</div>
+    <div class="PublicPageHeader-btns">
+      <slot />
+      <el-button size="small" @click="handleAdd()" type="primary">新增</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PublicPageHeader',
+  props: {
+    pageTitle: {
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+    handleAdd () {
+      this.$emit('handleAdd')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.PublicPageHeader {
+  height: 40px;
+  line-height: 40px;
+  background-color: #fff;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 20px;
+  margin-bottom: 20px;
+}
+</style>

src/components/PublicPageTable/index.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="PublicPageTable">
+    <div class="PublicPageTable-content">
+      <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
+        <el-table-column prop="name" label="名称" width="450">
+        </el-table-column>
+        <el-table-column prop="date" label="类型" width="180">
+        </el-table-column>
+        <el-table-column prop="address" label="所属应用">
+        </el-table-column>
+        <el-table-column prop="address" label="编码">
+        </el-table-column>
+        <el-table-column prop="address" label="描述">
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-button @click="handleDetails(scope.row)" type="text">详情</el-button>
+            <el-button @click="handleEdit(scope.row)" type="text">编辑</el-button>
+            <el-button @click="handleRemove(scope.row)" type="text">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PublicPageTable',
+  props: {
+    tableData: {
+      type: Array,
+      default: () => []
+    }
+  },
+  methods: {
+    handleDetails (row) {
+      this.$emit('handleDetails', row)
+    },
+    handleEdit (row) {
+      this.$emit('handleEdit', row)
+    },
+    handleRemove (row) {
+      this.$emit('handleRemove', row)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.PublicPageTable {
+  padding: 20px;
+  height: calc(100vh - 140px);
+  &-content {
+    background-color: #fff;
+    height: 100%;
+    position: relative;
+  }
+}
+</style>

src/layout/components/AppMain.vue

@@ -9,20 +9,11 @@
 <template>
   <section class="app-main">
     <div class="app-main-content">
-      <transition
-        name="fade-transform"
-        mode="out-in"
-      >
-        <keep-alive
-          v-if="$route.meta && $route.meta.keepAlive"
-          :max="6"
-        >
+      <transition name="fade-transform" mode="out-in">
+        <keep-alive v-if="$route.meta && $route.meta.keepAlive" :max="6">
           <router-view :key="key" />
         </keep-alive>
-        <router-view
-          v-else
-          :key="key"
-        />
+        <router-view v-else :key="key" />
       </transition>
     </div>
   </section>
@@ -32,7 +23,7 @@
 export default {
   name: 'AppMain',
   computed: {
-    key() {
+    key () {
       return Object.keys(this.$route.query).reduce((string, currentKey, index) => {
         if (currentKey !== 'fastFilter') {
           string += `${index ? '&' : '?'}${currentKey}=${this.$route.query[currentKey]}`
@@ -56,8 +47,9 @@ export default {
   /* margin-top: 112px; */
 }
 .app-main-content {
-  min-height: calc(100vh - 100px);
+  min-height: calc(100vh - 80px);
   background: #dfe3ea;
+  font-size: 14px;
 }
 .fixed-header + .app-main {
   padding-top: 50px;

src/router/index.js

@@ -66,6 +66,19 @@ export const constantRoutes = [
       },
     ],
   },
+  {
+    path: '/permission',
+    component: Layout,
+    meta: { title: '权限管理' },
+    children: [
+      {
+        path: '/permission',
+        name: 'Permission',
+        meta: { title: '页面配置' },
+        component: () => import('@/views/permissionPage/index.vue'),
+      },
+    ]
+  },
   // { path: '/', redirect: '/nopower', component: () => import('@/views/noPower'), hidden: true }
   // 404 page must be placed at the end !!!
 ]

src/views/permissionPage/index.vue

@@ -0,0 +1,192 @@
+<template>
+  <div class="permissionPage">
+    <PublicPageHeader page-title="界面配置管理" @handleAdd="handleAdd">
+      <el-button size="small" @click="handleAdd()" type="primary">高级查询</el-button>
+    </PublicPageHeader>
+    <PublicPageTable :table-data="tableData" @handleDetails="handleDetails" @handleEdit="handleEdit" @handleRemove="handleRemove" />
+    <PublicPageDialog :dialog-title="dialogTitle" :dialog-drawer="dialogDrawer" @handleClose="handleClose" @handleSubmit="submitTable">
+      <el-form ref="dialogForm" :rules="rules" :model="dialogForm">
+        <el-form-item label="权限项名称" prop="pagename">
+          <el-input size="small" v-model="dialogForm.pagename" clearable></el-input>
+        </el-form-item>
+        <el-form-item label="权限项类型" prop="pagetype">
+          <el-select size="small" v-model="dialogForm.pagetype" clearable placeholder="权限项类型">
+            <el-option label="模块" value="1"></el-option>
+            <el-option label="页面" value="2"></el-option>
+            <el-option label="按钮" value="3"></el-option>
+            <el-option label="表格" value="4"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="所属应用" prop="pagetype">
+          <el-select size="small" v-model="dialogForm.pagetype" clearable placeholder="所属应用">
+            <el-option label="模块" value="1"></el-option>
+            <el-option label="页面" value="2"></el-option>
+            <el-option label="按钮" value="3"></el-option>
+            <el-option label="表格" value="4"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="权限项编码">
+          <el-input size="small" v-model="dialogForm.pagename" clearable></el-input>
+        </el-form-item>
+        <el-form-item label="是否显示">
+          <el-select size="small" v-model="dialogForm.pagename" clearable placeholder="是否显示">
+            <el-option label="是" value="1"></el-option>
+            <el-option label="否" value="0"></el-option>
+          </el-select>
+        </el-form-item>
+        <template v-if="!dialogForm.pagetype || dialogForm.pagetype == 1 || dialogForm.pagetype == 2">
+          <el-form-item label="路由地址">
+            <el-input size="small" v-model="dialogForm.pagename" clearable></el-input>
+          </el-form-item>
+          <el-form-item v-if="dialogForm.pagetype == 2" label="页面路径">
+            <el-input size="small" v-model="dialogForm.pagename" clearable></el-input>
+          </el-form-item>
+          <el-form-item label="描述">
+            <el-input size="small" v-model="dialogForm.pagename" clearable></el-input>
+          </el-form-item>
+        </template>
+        <template v-else-if="dialogForm.pagetype == 3">
+          <el-form-item label="打开方式">
+            <el-select size="small" v-model="dialogForm.pagename" clearable placeholder="打开方式">
+              <el-option label="跳转页面" value="1"></el-option>
+              <el-option label="打开弹框" value="2"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="跳转地址">
+            <el-input size="small" v-model="dialogForm.pagename" clearable></el-input>
+          </el-form-item>
+          <el-form-item label="弹框标识">
+            <el-input size="small" v-model="dialogForm.pagename" clearable></el-input>
+          </el-form-item>
+          <el-form-item label="传递参数">
+            <el-input size="small" v-model="dialogForm.pagename" clearable></el-input>
+          </el-form-item>
+          <el-form-item label="数据服务ID">
+            <el-input size="small" v-model="dialogForm.pagename" clearable></el-input>
+          </el-form-item>
+        </template>
+        <template v-else-if="dialogForm.pagetype == 4">
+          <el-form-item label="显示方式">
+            <el-select size="small" v-model="dialogForm.pagename" clearable placeholder="显示方式">
+              <el-option label="树形" value="1"></el-option>
+              <el-option label="表格" value="2"></el-option>
+              <el-option label="树形表格" value="3"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="数据服务ID">
+            <el-input size="small" v-model="dialogForm.pagename" clearable></el-input>
+          </el-form-item>
+        </template>
+      </el-form>
+    </PublicPageDialog>
+  </div>
+</template>
+
+<script>
+import PublicPageHeader from '@/components/PublicPageHeader'
+import PublicPageTable from '@/components/PublicPageTable'
+import PublicPageDialog from '@/components/PublicPageDialog'
+export default {
+  name: 'permissionPage',
+  components: { PublicPageHeader, PublicPageTable, PublicPageDialog },
+  data () {
+    return {
+      tableData: [{
+        id: 1,
+        date: '2016-05-02',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        id: 2,
+        date: '2016-05-04',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1517 弄'
+      }, {
+        id: 3,
+        date: '2016-05-01',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1519 弄',
+        children: [{
+          id: 31,
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        }, {
+          id: 32,
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        }]
+      }, {
+        id: 4,
+        date: '2016-05-03',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1516 弄'
+      }],
+      dialogDrawer: false,
+      dialogTitle: '新增界面配置',
+      dialogForm: {
+        pagename: '',
+        pagetype: ''
+      },
+      rules: {
+        pagename: [
+          { required: true, message: '请输入权限项名称', trigger: 'blur' },
+        ],
+        pagetype: [
+          { required: true, message: '请选择权限类型', trigger: 'change' },
+        ]
+      }
+    }
+  },
+  methods: {
+    //获取页面数据
+    async getPageData () {
+      const { code, message, returnData } = await getVCode();
+      if (code == 0 && isValue(returnData)) {
+        const { verifyCodeImage } = returnData;
+        this.baseImg = verifyCodeImage;
+      } else {
+        this.$message.error(message);
+      }
+    },
+    //新增
+    handleAdd () {
+      this.dialogDrawer = true
+      this.dialogTitle = '新增界面配置'
+    },
+    //详情
+    handleDetails (row) {
+      console.log(row)
+    },
+    //编辑
+    handleEdit (row) {
+      this.dialogDrawer = true
+      this.dialogTitle = '编辑界面配置'
+      console.log(row)
+    },
+    //删除
+    handleRemove (row) {
+      console.log(row)
+    },
+    //关闭
+    handleClose () {
+      this.$refs['dialogForm'].resetFields()
+      this.dialogDrawer = false
+    },
+    submitTable () {
+      this.$refs['dialogForm'].validate((valid) => {
+        if (valid) {
+          alert('submit!')
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style>
+</style>