完善页面配置页面

src/components/child/PageConfig.vue

@@ -0,0 +1,343 @@
+<template>
+    <div class="pageConfig-box">
+        <div class="pageConfig-head">
+            <div style="display: flex;">
+                <div>
+                    <el-select @change="Inquirechange()" v-model="ModulValue" clearable placeholder="全部模块">
+                        <el-option v-for="item in ModulList" :key="item.value" :label="item.name" :value="item.id">
+                        </el-option>
+                    </el-select>
+                </div>
+                &nbsp;&nbsp;
+                <div style="display: flex;">
+                    <el-input placeholder="请输入页面名称" v-model="SearchInput" clearable></el-input>
+                    &nbsp;&nbsp;
+                    <el-button type="primary" @click="btnSearch" >搜 索</el-button>
+                </div>
+            </div>
+           <div>
+            <el-button type="primary" @click="addPage"  >添 加</el-button>
+           </div>
+        </div>
+        <div class="pageConfig-table">
+                <el-table :data="pageList.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border style="width: 100%">
+                    <el-table-column prop="pageName" label="页面名称" width="180">
+                    </el-table-column>
+                    <el-table-column prop="systemMenuCode" label="页面Code" width="100">
+                    </el-table-column>
+                    <el-table-column prop="webUrl" label="WebUrl" width="130">
+                    </el-table-column>
+                    <el-table-column prop="androidUrl" label="AndroidUrl" width="130">
+                    </el-table-column>
+                    <el-table-column prop="iosUrl" label="IosUrl" width="130">
+                    </el-table-column>
+                    <el-table-column label="手机端图标" prop="icon" >
+                    </el-table-column>
+                    <el-table-column prop="pageIsEnable" label="web端是否启用" width="150">
+                        <template slot-scope="scope">
+                            <el-checkbox  :true-label="1"  disabled :false-label="0"  v-model="pageList[scope.$index].pageIsEnable" ></el-checkbox>
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="pagePhoneIsEnable" label="手机端是否启用" width="150">
+                        <template slot-scope="scope">
+                            <el-checkbox  :true-label="1" disabled :false-label="0"  v-model="pageList[scope.$index].PagePhoneIsEnable" ></el-checkbox>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="操作" >
+                        <template slot-scope="scope">
+                            <el-button type="primary" icon="el-icon-s-tools" @click="Edit(pageList[scope.$index])" >编 辑</el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+                <div class="block">
+                    <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                        :current-page="currentPage" :page-sizes="[5,10,14,20]" :page-size="pageSize"
+                        layout="total, sizes, prev, pager, next" :total="pageList.length">
+                    </el-pagination>
+                </div>
+        </div>
+
+        <el-dialog
+        title="提示"
+        width="30%"
+        :visible.sync="dialogVisible"
+        :modal-append-to-body='false'
+        :append-to-body="false"
+        >
+            <span>这是一段信息</span>
+            <span slot="footer" class="dialog-footer">
+            </span>
+        </el-dialog>
+
+        <Modal :title="dialogTitle" :height="350" :width="700" :show.sync="showModal" restrict-to=".is-vertical" @close="showModal = false" >
+            <template v-slot:content>
+                <div style="    padding: 10px;">
+                    <el-form label-position="left" label-width="70px" :model="pageBind">
+                        <el-row :gutter="20">
+                            <el-col :span="8">
+                                <el-form-item label="页面模块" >  <!--style="width: 48%;" -->
+                                    <el-select v-model="pageBind.modulid" placeholder="请选择">
+                                        <el-option 
+                                        v-for="item in Modulfiltr"
+                                        :key="item.id"
+                                        :label="item.name"
+                                        :value="item.id">
+                                        </el-option>
+                                    </el-select>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="页面名称" >  <!--style="width: 48%;" -->
+                                    <el-input v-model="pageBind.pageName"></el-input>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="页面代码" > 
+                                    <el-input v-model="pageBind.systemMenuCode"></el-input>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row :gutter="20">
+                            <el-col :span="8">
+                                <el-form-item label="webUrl">
+                                    <el-input v-model="pageBind.webUrl"></el-input>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="AndroidUrl">
+                                    <el-input v-model="pageBind.androidUrl"></el-input>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="IosUrl">
+                                    <el-input v-model="pageBind.iosUrl"></el-input>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row :gutter="20">
+                            <el-col :span="8">
+                                <el-form-item label="图标">
+                                    <el-input v-model="pageBind.icon"></el-input>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="16">
+                                <el-form-item label="页面备注">
+                                    <el-input v-model="pageBind.pageRemark"></el-input>
+                                </el-form-item>
+                            </el-col>
+                            
+                        </el-row>
+                        <el-row :gutter="20">
+                            <el-col :span="16">
+                                <el-checkbox label="Web" :true-label="1"  :false-label="0" v-model="pageBind.pageIsEnable"></el-checkbox>
+                                <el-checkbox label="Android是否启用" :true-label="1"  :false-label="0" v-model="pageBind.pagePhoneIsEnable" ></el-checkbox>
+                            </el-col>
+                        </el-row>
+                    </el-form>
+                </div>
+            </template>
+            <template v-slot:footer>
+                <div>
+                    <el-button @click="showModal = false" type="danger">取 消</el-button>
+                    <el-button type="primary" >保 存</el-button>
+                </div>
+            </template>
+        </Modal>
+
+    </div>
+</template>
+
+
+<script>
+import { cw } from '@fullcalendar/core/internal-common';
+import Modal from '../template/dialog.vue';
+
+export default {
+    data() {
+      return {
+        bufferData:{},//暂存数据
+        pageList:[], //页面数据
+        SearchInput:'', //查询的值
+        currentPage : 1 , //页码
+        pageSize: 5,// 每页的数据条数
+        ModulValue:'', //模块val 
+        ModulList:[],//模块数据
+        PathUrl:'http://localhost:5256',
+        dialogVisible: false,
+        showModal: false, //测试弹层
+        dialogTitle:'测试标题',
+        pageBind:{
+            androidUrl:'',
+            iosUrl:'',
+            pageIsEnable:0,
+            pageName:'',
+            pagePhoneIsEnable:0,
+            pageid:-1,
+            systemMenuCode:'',
+            webUrl:'',
+            modulName:'',
+            modulid:'',
+            icon:'',
+            modulRemark:'',
+            sTid:5,
+            pageRemark:'',
+        },//数据绑定对象
+      };
+    },
+    methods: {
+        pageload(){
+            var that =  this;
+            this.$axios.post(this.PathUrl + '/api/System/PageConfigInit', {
+                
+            }, {
+                headers: {
+                    'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1laWRlbnRpZmllciI6IkZ1dHVyZSIsImV4cCI6MTY3OTU0MjgwNSwiaXNzIjoiT0FTeXN0ZW0uY29tIiwiYXVkIjoiT0FTeXN0ZW0uY29tIn0.iy5SUInq1p3yjZultRPyzCa2ekLeepSdMLxvPwXY6MI',
+                }
+            }).then(resp => {
+                console.log(resp.data.data);
+                if (resp.data.code == 200) {
+                    that.bufferData = resp.data.data;
+                    that.ModulList = resp.data.data.modList.data;
+                    that.ModulList.unshift({
+                        'id':-1,
+                        'name':"全部模块",
+                        'sTid':-1
+                    });
+                    that.pageList = resp.data.data.viewList.data;
+                }
+            })
+        },
+        Inquirechange() {
+
+            var that = this;
+            if(this.ModulValue == -1){
+                this.pageList = this.bufferData.viewList.data;
+            }else{
+                this.pageList = this.bufferData.viewList.data.filter(function(item, i, arr) {
+                    return item.modulid == that.ModulValue;
+                });
+            }
+
+            this.currentPage = 1;
+        },
+        //每页条数改变时触发 选择一页显示多少行
+        handleSizeChange(val) {
+            this.currentPage = 1;
+            this.pageSize = val;
+        },
+        //当前页改变时触发 跳转其他页
+        handleCurrentChange(val) {
+            this.currentPage = val;
+        },
+        //搜索按钮
+        btnSearch(){
+            var that = this;
+            this.pageList = this.bufferData.viewList.data.filter(function(item, i, arr) {
+                return item.pageName.indexOf(that.SearchInput) != -1;
+            });
+        },
+        addPage(){
+            this.showModal = true;
+            this.dialogTitle='添加页面';
+            this.pageBind = {
+                androidUrl:'',
+                iosUrl:'',
+                pageIsEnable:0,
+                pageName:'',
+                pagePhoneIsEnable:0,
+                pageid:-1,
+                systemMenuCode:'',
+                webUrl:'',
+                modulName:'',
+                modulid:'',
+                icon:'',
+                modulRemark:'',
+                sTid:5,
+                pageRemark:'',
+            };
+        },
+        Edit(page){
+            console.log();
+            //this.dialogVisible = true;
+            this.showModal = true;
+            this.dialogTitle='编辑页面';
+            this.pageBind = page;
+        },
+        PageSave(){
+
+            if(this.pageBind.pageid == -1){
+                //新增
+                
+                
+
+            }else{
+                //修改
+
+
+            }
+        
+        }
+
+    },
+    mounted(){
+        this.pageload();
+    },
+    components: {
+        Modal
+    },
+    computed:{
+        Modulfiltr(){
+            var arr = this.ModulList;
+            arr.splice(0,1)
+            return arr ;
+        }
+    }
+}
+</script>
+<style>
+body {
+    margin: 0;
+    padding: 0;
+}
+
+.pageConfig-head {
+    display: flex;
+    justify-content: space-between;
+}
+
+.pageConfig-box {
+    background-color: #fff;
+    padding: 10px;
+    border-radius: 10px;
+}
+
+.pageConfig-table {
+    margin-top: 10px;
+}
+
+.pageConfig-table .block {
+    margin-top: 10px;
+}
+
+.pageConfig-table .el-table--enable-row-transition .el-table__body td.el-table__cell {
+    text-align: center;
+}
+
+.job-table .el-table--border .el-table__cell:first-child .cell {
+    text-align: center;
+}
+
+.el-checkbox__input.is-disabled + .el-checkbox__label {
+  color: #808080 !important;
+}
+
+.el-checkbox__input.is-disabled.is-checked + .el-checkbox__label {
+  color: #1890ff !important;
+}
+
+.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
+  background-color: #1890ff !important;
+  border-color: #1890ff !important;
+}
+
+</style>

src/components/template/dialog.vue

@@ -0,0 +1,164 @@
+<template>
+    <transition name="modal">
+        <div v-if="show" class="modal" :style="modalStyle">
+            <div class="modal-overlay" @click="close"></div>
+            <div class="modal-content" :style="modalcontentStyle">
+                <div class="modal-header">
+                    <div>
+                        <slot name="title">
+                            <span class="titleSpan">{{ title }}</span>
+                        </slot>
+                    </div>
+                    <div>
+                        <i class="el-icon-close" @click="close"></i>
+                    </div>
+                </div>
+                <div class="modal-body">
+                    <slot name="content"></slot>
+                </div>
+                <div class="modal-footer" :class="{ 'sticky-footer': stickyFooter }">
+                    <slot name="footer"></slot>
+                </div>
+            </div>
+        </div>
+</transition>
+</template>
+  
+<script>
+  export default {
+    props: {
+      show: {
+        type: Boolean,
+        required: true
+      },
+      restrictTo: {
+        type: String,
+        default: ''
+      },
+      title: {
+            type: String,
+            default: '弹层标题'
+      },
+      width: {
+            type: [String, Number],
+            default: 'auto'
+      },
+      height: {
+            type: [String, Number],
+            default: 'auto'
+      },
+      stickyFooter: {
+        type: Boolean,
+        default: true
+     }
+    },
+    computed: {
+      modalStyle() {
+
+        if (this.restrictTo) {
+          const el = document.querySelector(this.restrictTo);
+          if (el) {
+            return {
+              position: 'absolute',
+              top: `${el.offsetTop}px`,
+              left: `${el.offsetLeft}px`,
+              width: `${el.offsetWidth}px`,
+              height: `${el.offsetHeight}px`,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            };
+          }
+        }
+        return {
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center'
+        };
+      },
+      modalcontentStyle(){
+        const style = {};
+        if (this.width !== 'auto') {
+            style.width = this.width + 'px';
+        }
+
+        if (this.height !== 'auto') {
+            style.height = this.height + 'px';
+        }
+
+        return style;
+      }
+    },
+    methods: {
+      close() {
+        this.$emit('close');
+      }
+    },
+    mounted() {
+        document.body.style.overflow = 'hidden';
+    },
+  }
+</script>
+  
+<style scoped>
+  .modal {
+    z-index: 99;
+    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
+  }
+  
+  .modal-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  
+  .modal-content {
+    background-color: #fff;
+    padding: 20px;
+    z-index: 999;
+    BORDER-RADIUS: 10px;
+    position: relative;
+  }
+
+  .modal-body {
+    margin-bottom: 20px;
+    font-size: 15px;
+  }
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+}
+.modal-header{
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 20px;
+}
+
+.sticky-footer {
+  position: absolute;
+  bottom: 20px;
+  right: 30px;
+}
+
+.titleSpan{
+    font-size: 18px;
+    color: #303133;
+    
+}
+
+/* 过渡效果 */
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity 0.25s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+</style>

src/router/index.js

@@ -15,6 +15,7 @@ import AuthorityJob from '@/components/child/AuthorityJob'
 import Controltree from '@/components/child/Controltree'
 import Company from '@/components/system/Company'
 import AuthorityUser from '@/components/child/AuthorityUser'
+import PageConfig from '@/components/child/PageConfig'
 
 
 Vue.use(Router)
@@ -85,7 +86,12 @@ export default new Router({
           path: '/home/Company',
           name: 'Company',
           component: Company
-        }
+        },
+        {
+          path: '/home/PageConfig',
+          name: 'PageConfig',
+          component: PageConfig
+        },
       ]
     },
     {