权限管理菜单表树形结构表格静态排版；登录界面微调

.env.development

@@ -2,4 +2,4 @@
 ENV = 'development'
 
 # base api
-VUE_APP_BASE_API = 'http://127.0.0.1:8080/Device_Manager/'
+VUE_APP_BASE_API = ''

package.json

@@ -16,6 +16,7 @@
     "dependencies": {
         "axios": "0.18.1",
         "core-js": "3.6.5",
+        "echarts": "^5.0.1",
         "element-ui": "2.13.2",
         "file-saver": "^2.0.5",
         "js-cookie": "2.2.0",

src/api/orgnization.js

@@ -1,9 +1,11 @@
 import request from '@/utils/request'
-
-export function getList(query, current = 1, page_size = 10) {
+//queryJson: 
+export function getList(query, current = 1, page_size = 10, V_LOGINNAME = 'admin', V_PASSWORD = '123456') {
+    query.queryJson = { "V_LOGINNAME": "admin", "V_PASSWORD": "e10adc3949ba59abbe56e057f20f883e" };
     return request({
-        // url: '/vue-admin-template/table/list',
-        url: 'companyManagement/queryCompanyList',
+        //url: '/vue-admin-template/table/list',
+        url: '/Device_Manager/companyManagement/queryCompanyList',
+        // url: '/time',
         method: 'post',
         // params
         data: {

src/main.js

@@ -15,6 +15,17 @@ import router from './router'
 import '@/icons' // icon
 import '@/permission' // permission control
 
+// 按需引入 引入 ECharts 主模块
+var echarts = require('echarts/lib/echarts')
+    // 引入柱状图
+require('echarts/lib/chart/bar')
+    // 引入提示框和标题组件
+require('echarts/lib/component/tooltip')
+require('echarts/lib/component/title')
+
+//全部引入
+var echarts = require('echarts')
+
 /**
  * If you don't want to use mock-server
  * you want to use MockJs for mock api

src/utils/request.js

@@ -56,31 +56,36 @@ service.interceptors.response.use(
     response => {
         const res = response.data
 
+        // console.log(res)
+
+
+        return res
+
         // if the custom code is not 20000, it is judged as an error.
-        if (res.code !== 20000) {
-            Message({
-                message: res.message || 'Error',
-                type: 'error',
-                duration: 5 * 1000
-            })
+        // if (res.code !== 200) {
+        //     Message({
+        //         message: res.message || 'Error',
+        //         type: 'error',
+        //         duration: 5 * 1000
+        //     })
 
-            // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
-            if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
-                // to re-login
-                MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
-                    confirmButtonText: 'Re-Login',
-                    cancelButtonText: 'Cancel',
-                    type: 'warning'
-                }).then(() => {
-                    store.dispatch('user/resetToken').then(() => {
-                        location.reload()
-                    })
-                })
-            }
-            return Promise.reject(new Error(res.message || 'Error'))
-        } else {
-            return res
-        }
+        //     // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
+        //     if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
+        //         // to re-login
+        //         MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
+        //             confirmButtonText: 'Re-Login',
+        //             cancelButtonText: 'Cancel',
+        //             type: 'warning'
+        //         }).then(() => {
+        //             store.dispatch('user/resetToken').then(() => {
+        //                 location.reload()
+        //             })
+        //         })
+        //     }
+        //     return Promise.reject(new Error(res.message || 'Error'))
+        // } else {
+        //     return res
+        // }
     },
     error => {
         console.log('err' + error) // for debug

src/views/index/components/lineChart.vue

@@ -0,0 +1,135 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+// require('echarts/theme/macarons') // echarts theme
+// import resize from './mixins/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '350px'
+    },
+    autoResize: {
+      type: Boolean,
+      default: true
+    },
+    chartData: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val)
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+      this.setOptions(this.chartData)
+    },
+    setOptions({ expectedData, actualData } = {}) {
+      this.chart.setOption({
+        xAxis: {
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          boundaryGap: false,
+          axisTick: {
+            show: false
+          }
+        },
+        grid: {
+          left: 10,
+          right: 10,
+          bottom: 20,
+          top: 30,
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross'
+          },
+          padding: [5, 10]
+        },
+        yAxis: {
+          axisTick: {
+            show: false
+          }
+        },
+        legend: {
+          data: ['expected', 'actual']
+        },
+        series: [{
+          name: 'expected', itemStyle: {
+            normal: {
+              color: '#FF005A',
+              lineStyle: {
+                color: '#FF005A',
+                width: 2
+              }
+            }
+          },
+          smooth: true,
+          type: 'line',
+          data: expectedData,
+          animationDuration: 2800,
+          animationEasing: 'cubicInOut'
+        },
+        {
+          name: 'actual',
+          smooth: true,
+          type: 'line',
+          itemStyle: {
+            normal: {
+              color: '#3888fa',
+              lineStyle: {
+                color: '#3888fa',
+                width: 2
+              },
+              areaStyle: {
+                color: '#f3f8ff'
+              }
+            }
+          },
+          data: actualData,
+          animationDuration: 2800,
+          animationEasing: 'quadraticOut'
+        }]
+      })
+    }
+  }
+}
+</script>

src/views/index/index.vue

@@ -1,77 +1,98 @@
 <template>
   <div class="app-container" style="background:black;margin:0 padding:0">
-      <div class="main-container-box">
-    <div class="nav-header">安防综合管理平台</div>
-    <div class="panel-box">
-      <div class="panel sbgk">
-        <div class="panel-tit">
-          设备工况
-        </div>
-        <div class="pie-box">
-          <div class="pie-item">
-            饼状图1
-          </div>
+    <div class="main-container-box">
+      <div class="nav-header">安防综合管理平台</div>
+      <div class="panel-box">
+        <div class="panel sbgk">
+          <div class="panel-tit">设备工况</div>
+          <div class="pie-box">
+            <div class="pie-item">饼状图1</div>
 
-          <div class="pie-item">
-            饼状图2
+            <div class="pie-item">饼状图2</div>
           </div>
-        </div>
 
-        <div class="num-analysis">
-          <div>
-            <ul>
-              <li>
-                <p class="num-tit">设备总数</p>
-                <p class="num-no">260</p>
-              </li>
-              <li>
-                <p class="num-tit">异常数量</p>
-                <p class="num-no" style="color:#F84803">260</p>
-              </li>
-            </ul>
+          <div class="num-analysis">
+            <div>
+              <ul>
+                <li>
+                  <p class="num-tit">设备总数</p>
+                  <p class="num-no">260</p>
+                </li>
+                <li>
+                  <p class="num-tit">异常数量</p>
+                  <p class="num-no" style="color: #f84803">260</p>
+                </li>
+              </ul>
+            </div>
+            <div>
+              <ul>
+                <li>
+                  <p class="num-tit">设备总数</p>
+                  <p class="num-no" style="color: #00acff">260</p>
+                </li>
+                <li>
+                  <p class="num-tit">异常数量</p>
+                  <p class="num-no" style="color: #fec400">260</p>
+                </li>
+              </ul>
+            </div>
           </div>
-          <div>
-            <ul>
-               <li>
-                <p class="num-tit">设备总数</p>
-                <p class="num-no" style="color:#00ACFF">260</p>
-              </li>
-              <li>
-                <p class="num-tit">异常数量</p>
-                <p class="num-no" style="color:#FEC400">260</p>
-              </li>
-            </ul>
-          </div>
-        </div>
 
-     
-        <div class="panel-footer"></div>
+          <div class="panel-footer"></div>
+        </div>
+        <!-- <div class="panel monitor"></div> -->
       </div>
-      <!-- <div class="panel monitor"></div> -->
     </div>
   </div>
-   
-  </div>
 </template>
 
 
 <script>
-
-
-
 export default {
   data() {
-    return {
-      
-  
-  
-}
+    return {};
+  },
+  mounted() {
+  this.initCharts();
+},
+methods: {
+  initCharts() {
+    this.chart = echarts.init(this.$el);
+    this.setOptions();
+  },
+  setOptions() {
+    this.chart.setOption({
+      title: {
+        text: 'ECharts 入门示例'
+      },
+      tooltip: {},
+      xAxis: {
+        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
+      },
+      yAxis: {},
+      series: [{
+        name: '销量',
+        type: 'bar',
+        data: [5, 20, 36, 10, 10, 20]
+      }]
+    })
   }
+},
+
+watch: {
+  options: {
+    handler(options) {
+      this.chart.setOption(this.options)
+    },
+    deep: true
+  },
 }
+};
 </script>
-<style >
-.app-container{
-    background:black;margin:0 ;padding:0;
-    height:100vh;
+<style scoped>
+.app-container {
+  margin: 0;
+  padding: 0;
+  height: 100vh;
 }
 </style>

src/views/system/auth-manage/index.vue

@@ -1,8 +1,9 @@
 <template>
   <div>
     <div class="menu-tab">
-      <el-tabs type="border-card">
-        <el-tab-pane label="菜单表">
+      <el-tabs type="border-card" v-model="activeName">
+        <!-- 菜单表 start -->
+        <el-tab-pane label="菜单表" name="first">
           <div class="app-container">
             <div class="filter-container">
               <div class="filter-left">
@@ -118,11 +119,7 @@
               </el-table-column>
             </el-table>
 
-            <el-dialog
-              title="新增"
-              :visible.sync="dialogFormVisible"
-            
-            >
+            <el-dialog title="新增" :visible.sync="dialogFormVisible">
               <el-form :model="form">
                 <el-form-item label="菜单名称:" :label-width="formLabelWidth">
                   <el-input v-model="form.name4" autocomplete="off"></el-input>
@@ -183,9 +180,10 @@
             </el-dialog>
           </div>
         </el-tab-pane>
+        <!-- 菜单表 end-->
 
         <!-- 角色表 start-->
-        <el-tab-pane label="角色表">
+        <el-tab-pane label="角色表" name="second">
           <div class="app-container">
             <div class="filter-container">
               <div class="filter-left">
@@ -287,6 +285,149 @@
                 </template>
               </el-table-column>
             </el-table>
+
+            <el-dialog
+              title="新增"
+              class="roleDialog"
+              :visible.sync="dialogFormVisible2"
+              width="60%"
+            >
+              <el-form :model="form">
+                <el-form-item label="角色名称:" :label-width="formLabelWidth2">
+                  <el-input v-model="form.name4" autocomplete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="角色ID:" :label-width="formLabelWidth2">
+                  <el-input v-model="form.name4" autocomplete="off"></el-input>
+                </el-form-item>
+
+                <el-form-item
+                  label="可操作菜单及权限:"
+                  :label-width="formLabelWidth2"
+                  class="table-item"
+                >
+                  <div class="role-details inside-base">
+                    <div class="inside-base-main clearfix">
+                      <!-- 中间内容 -->
+                      <div class="inside-base-cont">
+                        <div class="role-cont clearfix">
+                          <div>
+                            <el-checkbox
+                              class="check-page-all"
+                              v-model="checkPageAll"
+                              @change="checkPageAllEv($event)"
+                            ></el-checkbox>
+                            <!--  -->
+                            <el-table
+                              ref="table"
+                              :data="tableData3"
+                              :cell-class-name="goodsInfo"
+                              :row-class-name="warning"
+                              style="width: 100%; margin-bottom: 20px"
+                              row-key="id"
+                              :expand-row-keys="['3', '4']"
+                              border
+                              :indent="10"
+                              :select-on-indeterminate="true"
+                              :tree-props="{
+                                children: 'childList',
+                                hasChildren: 'hasChildren',
+                              }"
+                            >
+                              <el-table-column type="selection" width="55">
+                                <template slot-scope="scope">
+                                  <el-checkbox
+                                    v-model="scope.row.pageCheck"
+                                    @change="pageCheckEv(scope)"
+                                  ></el-checkbox>
+                                </template>
+                              </el-table-column>
+
+                              <el-table-column
+                                prop="page"
+                                label="菜单名称"
+                                width="130px"
+                              >
+                              </el-table-column>
+                              <el-table-column class="operation" label="">
+                                <template slot-scope="scope">
+                                  <el-checkbox
+                                    label="查询"
+                                    v-model="scope.row.fnCheck.check"
+                                    @change="fnCheckEv(scope, 'check')"
+                                    v-if="scope.row.fnList.includes('查询')"
+                                  ></el-checkbox>
+
+                                  <el-checkbox
+                                    label="新增"
+                                    v-model="scope.row.fnCheck.add"
+                                    @change="fnCheckEv(scope, 'add')"
+                                    v-if="scope.row.fnList.includes('新增')"
+                                  ></el-checkbox>
+                                  <el-checkbox
+                                    label="修改"
+                                    v-model="scope.row.fnCheck.mod"
+                                    @change="fnCheckEv(scope, 'mod')"
+                                    v-if="scope.row.fnList.includes('修改')"
+                                  ></el-checkbox>
+
+                                  <el-checkbox
+                                    label="删除"
+                                    v-model="scope.row.fnCheck.del"
+                                    @change="fnCheckEv(scope, 'del')"
+                                    v-if="scope.row.fnList.includes('删除')"
+                                  ></el-checkbox>
+
+                                  <el-checkbox
+                                    label="导出"
+                                    v-model="scope.row.fnCheck.export"
+                                    @change="fnCheckEv(scope, 'export')"
+                                    v-if="scope.row.fnList.includes('导出')"
+                                  ></el-checkbox>
+
+                                  <el-checkbox
+                                    label="安防管理视图"
+                                    v-model="scope.row.fnCheck.viewport"
+                                    @change="fnCheckEv(scope, 'viewport')"
+                                    v-if="
+                                      scope.row.fnList.includes('安防管理视图')
+                                    "
+                                  ></el-checkbox>
+
+                                  <el-checkbox
+                                    label="实时告警"
+                                    v-model="scope.row.fnCheck.alarm"
+                                    @change="fnCheckEv(scope, 'alarm')"
+                                    v-if="scope.row.fnList.includes('实时告警')"
+                                  ></el-checkbox>
+
+                                  <el-checkbox
+                                    label="任务管理"
+                                    v-model="scope.row.fnCheck.task"
+                                    @change="fnCheckEv(scope, 'task')"
+                                    v-if="scope.row.fnList.includes('任务管理')"
+                                  ></el-checkbox>
+                                </template>
+                              </el-table-column>
+                            </el-table>
+                            <!--  -->
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </el-form-item>
+              </el-form>
+              <div slot="footer" class="dialog-footer">
+                <el-button
+                  @click="dialogFormVisible2 = false"
+                  style="background: #f6f6f6"
+                  >取 消</el-button
+                >
+                <el-button type="primary" @click="dialogFormVisible2 = false"
+                  >提 交</el-button
+                >
+              </div>
+            </el-dialog>
           </div>
         </el-tab-pane>
         <!-- 角色表 end-->
@@ -298,8 +439,12 @@
 
 <script>
 export default {
+  name: "RoleDetails",
+
   data() {
     return {
+      activeName: "second",
+
       tableData: [
         {
           menuName: "系统管理",
@@ -430,9 +575,499 @@ export default {
         desc: "",
       },
       formLabelWidth: "100px",
+      formLabelWidth2: "150px",
+
+      // 角色新增表格
+
+      msg: "",
+      checkPageAll: false,
+      tableData3: [
+        {
+          id: 1, // id
+          page: "系统管理", // 页面分类
+          pageCheck: false, // 是否可查看页面
+          fnList: [], // 功能权限有哪些
+          fnCheck: {
+            check: false,
+            add: false,
+            mod: false,
+            del: false,
+            export: false,
+          },
+
+          childList: [
+            {
+              p_id: 12,
+              id: 8,
+              page: "人员管理",
+              pageCheck: false,
+              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
+              fnCheck: {
+                add: false,
+                del: false,
+                mod: false,
+                check: false,
+              },
+            },
+            {
+              p_id: 13,
+              id: 9,
+              page: "权限管理",
+              pageCheck: false,
+              fnList: [], // 功能权限有哪些
+              fnCheck: {
+                add: false,
+                del: false,
+                mod: false,
+                check: false,
+              },
+              childList: [
+                {
+                  p_id: 2,
+                  id: 10,
+                  page: "菜单表",
+                  pageCheck: false,
+                  fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
+                  fnCheck: {
+                    add: false,
+                    del: false,
+                    mod: false,
+                    check: false,
+                  },
+                },
+                {
+                  p_id: 2,
+                  id: 11,
+                  page: "角色表",
+                  pageCheck: false,
+                  fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
+                  fnCheck: {
+                    add: false,
+                    del: false,
+                    mod: false,
+                    check: false,
+                  },
+                },
+              ],
+            },
+            {
+              p_id: 14,
+              id: 30,
+              page: "组织机构",
+              pageCheck: false,
+              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
+              fnCheck: {
+                add: false,
+                del: false,
+                mod: false,
+                check: false,
+              },
+            },
+            {
+              p_id: 15,
+              id: 33,
+              page: "安全机制",
+              pageCheck: false,
+              fnList: [], // 功能权限有哪些
+              fnCheck: {
+                add: false,
+                del: false,
+                mod: false,
+                check: false,
+              },
+            },
+            {
+              p_id: 16,
+              id: 93,
+              page: "单位信息",
+              pageCheck: false,
+              fnList: [], // 功能权限有哪些
+              fnCheck: {
+                add: false,
+                del: false,
+                mod: false,
+                check: false,
+              },
+            },
+          ],
+        },
+        {
+          id: 2,
+          page: "用户管理",
+          pageCheck: false,
+          fnList: [], // 功能权限有哪些
+          fnCheck: {
+            add: false,
+            del: false,
+            mod: false,
+            check: false,
+          },
+          childList: [
+            {
+              p_id: 2,
+              id: 39,
+              page: "账号管理",
+              pageCheck: false,
+              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
+              fnCheck: {
+                add: false,
+                del: false,
+                mod: false,
+                check: false,
+              },
+            },
+            {
+              p_id: 2,
+              id: 32,
+              page: "日志管理",
+              pageCheck: false,
+              fnList: ["查询"], // 功能权限有哪些
+              fnCheck: {
+                add: false,
+                del: false,
+                mod: false,
+                check: false,
+              },
+            },
+          ],
+        },
+
+        {
+          id: 3,
+          page: "设备管理",
+          pageCheck: false,
+          fnList: [], // 功能权限有哪些
+          fnCheck: {
+            add: false,
+            del: false,
+            mod: false,
+            check: false,
+          },
+          childList: [
+            {
+              p_id: 2,
+              id: 31,
+              page: "摄像头",
+              pageCheck: false,
+              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
+              fnCheck: {
+                add: false,
+                del: false,
+                mod: false,
+                check: false,
+              },
+            },
+            {
+              p_id: 2,
+              id: 22,
+              page: "周边防界",
+              pageCheck: false,
+              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
+              fnCheck: {
+                add: false,
+                del: false,
+                mod: false,
+                check: false,
+              },
+            },
+          ],
+        },
+
+        {
+          id: 4,
+          page: "巡检管理",
+          pageCheck: false,
+          fnList: [], // 功能权限有哪些
+          fnCheck: {
+            add: false,
+            del: false,
+            mod: false,
+            check: false,
+          },
+          childList: [
+            {
+              p_id: 1,
+              id: 41,
+              page: "巡检点",
+              pageCheck: false,
+              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
+              fnCheck: {
+                add: false,
+                del: false,
+                mod: false,
+                check: false,
+              },
+            },
+            {
+              p_id: 2,
+              id: 42,
+              page: "巡检路线",
+              pageCheck: false,
+              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
+              fnCheck: {
+                add: false,
+                del: false,
+                mod: false,
+                check: false,
+              },
+            },
+            {
+              p_id: 3,
+              id: 43,
+              page: "电子巡更",
+              pageCheck: false,
+              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
+              fnCheck: {
+                add: false,
+                del: false,
+                mod: false,
+                check: false,
+              },
+            },
+            {
+              p_id: 4,
+              id: 44,
+              page: "巡检计划",
+              pageCheck: false,
+              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
+              fnCheck: {
+                add: false,
+                del: false,
+                mod: false,
+                check: false,
+              },
+            },
+          ],
+        },
+
+        {
+          id: 5,
+          page: "告警中心",
+          pageCheck: false,
+          fnList: [], // 功能权限有哪些
+          fnCheck: {
+            add: false,
+            del: false,
+            mod: false,
+            check: false,
+          },
+          childList: [
+            {
+              p_id: 1,
+              id: 51,
+              page: "告警记录",
+              pageCheck: false,
+              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
+              fnCheck: {
+                add: false,
+                del: false,
+                mod: false,
+                check: false,
+              },
+            },
+            {
+              p_id: 2,
+              id: 52,
+              page: "任务中心",
+              pageCheck: false,
+              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
+              fnCheck: {
+                add: false,
+                del: false,
+                mod: false,
+                check: false,
+              },
+            },
+          ],
+        },
+        {
+          id: 6,
+          page: "综合查询",
+          pageCheck: false,
+          fnList: ["安防管理视图", "实时告警", "任务管理"], // 功能权限有哪些
+          fnCheck: {
+            viewport: false,
+            alarm: false,
+            task: false,
+          },
+        },
+      ],
     };
   },
   methods: {
+    goodsInfo(row) {
+      if (row.columnIndex == 2) {
+        return "goodsInfo"; //给第2个td里面添加goodsInfo的类名
+      }
+
+      if (row.row.fnList.length == 0) {
+        return "warning";
+      }
+    },
+
+    warning(row) {
+      if (row.row.fnList.length == 0) {
+        return "warning";
+      }
+    },
+
+    // 查找父级函数
+    getParent(data2, nodeId2) {
+      var arrRes = [];
+      if (data2.length === 0) {
+        if (nodeId2) {
+          arrRes.push(data2);
+        }
+        return arrRes;
+      }
+      let rev = (data, nodeId) => {
+        for (var i = 0, length = data.length; i < length; i++) {
+          let node = data[i];
+          if (node.id === nodeId) {
+            arrRes.push(node);
+            rev(data2, node.p_id);
+            break;
+          } else {
+            if (node.childList) {
+              rev(node.childList, nodeId);
+            }
+          }
+        }
+        return arrRes;
+      };
+      arrRes = rev(data2, nodeId2);
+      return arrRes;
+    },
+    /**
+     * 页面选择
+     */
+    // 总选框事件
+    checkPageAllEv(item) {
+   
+      let checkAll = (data, checked) => {
+        for (let x of data) {
+          x.pageCheck = checked;
+          if (x.childList) {
+            checkAll(x.childList, checked);
+          }
+        }
+      };
+      if (item === true) {
+        checkAll(this.tableData, true);
+      } else {
+        checkAll(this.tableData, false);
+      }
+    },
+    // 遍历json数据
+    isCheckAllEv(data) {
+      let isCheckAll = true;
+      let fn = (data) => {
+        for (let x of data) {
+          if (x.pageCheck === false) {
+            isCheckAll = false;
+            return isCheckAll;
+          }
+          if (x.childList) {
+            fn(x.childList);
+          }
+        }
+      };
+      fn(data);
+      console.log(isCheckAll);
+      return isCheckAll;
+    },
+    // 子选框事件
+    pageCheckEv(scope) {
+      // 如果有子项，则子项的选框选择跟当前一致
+      if (scope.row.childList) {
+        this.handleCheckAll(scope.row, scope.row.pageCheck);
+      }
+      // 查找父级选框
+      this.getParent(this.tableData, scope.row.id).forEach((item, i) => {
+        if (!item.childList) {
+          item.pageCheck = scope.row.pageCheck;
+        } else {
+          var num = 0;
+          item.childList.forEach((item, i) => {
+            if (item.pageCheck === true) {
+              num += 1;
+            }
+          });
+          if (num === item.childList.length) {
+            item.pageCheck = true;
+          } else {
+            item.pageCheck = false;
+          }
+        }
+      });
+
+      // 是否所有子项都已经勾选
+      if (this.isCheckAllEv(this.tableData) === true) {
+        this.checkPageAll = true;
+      } else {
+        this.checkPageAll = false;
+      }
+    },
+    handleCheckAll(row, checked) {
+      row.pageCheck = checked;
+      if (row.childList) {
+        let that = this;
+        row.childList.forEach((element, i) => {
+          that.handleCheckAll(row.childList[i], checked);
+        });
+      }
+    },
+    /**
+     * 功能选择
+     */
+    // 子选框事件
+    fnCheckEv(scope, type) {
+      // 如果有子项，则子项的选框选择跟当前一致
+      if (scope.row.childList) {
+        this.handleFnAll(scope.row, scope.row.fnCheck[type], type);
+      }
+      // 查找父级选框
+      this.getParent(this.tableData, scope.row.id).forEach((item, i) => {
+        if (!item.childList) {
+          item.fnCheck[type] = scope.row.fnCheck[type];
+        } else {
+          var num = 0;
+          item.childList.forEach((item, i) => {
+            if (item.fnCheck[type] === true) {
+              num += 1;
+            }
+          });
+          if (num === item.childList.length) {
+            item.fnCheck[type] = true;
+          } else {
+            item.fnCheck[type] = false;
+          }
+        }
+      });
+    },
+    handleFnAll(row, fnCheck, type) {
+      row.fnCheck[type] = fnCheck;
+      if (row.childList) {
+        let that = this;
+        row.childList.forEach((element, i) => {
+          that.handleFnAll(row.childList[i], fnCheck, type);
+        });
+      }
+    },
+
+    handleDataAll(row, dataCheck, type) {
+      for (let x in row.dataCheck) {
+        row.dataCheck[x] = false;
+      }
+      row.dataCheck[type] = dataCheck;
+      if (row.childList) {
+        let that = this;
+        row.childList.forEach((element, i) => {
+          that.handleDataAll(row.childList[i], dataCheck, type);
+        });
+      }
+    },
+
     handleEdit(index, row) {
       alert(index, row);
     },
@@ -572,4 +1207,32 @@ export default {
   height: 35px;
   line-height: 35px;
 }
+
+.roleDialog .el-dialog .el-form-item {
+  margin: 20px 20px 0;
+}
+.roleDialog .el-dialog .el-form-item:first-child,
+.roleDialog .el-dialog .el-form-item:nth-child(2) {
+  display: inline-block;
+}
+.el-dialog .el-form-item.table-item {
+  width: 96%;
+}
+
+/* 权限第二行居左样式 */
+
+.goodsInfo .cell {
+  text-align: left;
+  padding: 0 10px 0 10px;
+}
+
+.table-item td {
+  line-height: 30px;
+  height: 30px;
+}
+</style>
+<style >
+.warning td {
+  background: #f5f5f5;
+}
 </style>

src/views/system/organization/index.vue

@@ -308,7 +308,7 @@ export default {
   },
 
   created() {
-    //aa 4渲染数据
+    //aa 2:钩子里调用查询组件
     this.fetchData();
   },
 
@@ -318,8 +318,8 @@ export default {
     //aa 3请求接口
      fetchData(){
       getList(this.query,this.page.current,this.page.size).then(response=>{
-         this.list = response.data.items;
-         this.page.total=response.data.total;
+        //  this.list = response.data;
+        //  this.page.total=response.data.total;
           console.log('response',response)
       })
     },

vue.config.js

@@ -36,17 +36,21 @@ module.exports = {
             warnings: false,
             errors: true
         },
+
+
+        // before: require('./mock/mock-server.js'),ç
+
+        //解决跨越问题
         proxy: {
             [process.env.VUE_APP_BASE_API]: {
-                target: 'http://127.0.0.1:8080/Device_Manager/',
+                target: 'http://127.0.0.1:8080',
+                // target: "https://devapimeeting.talkmed.com",
                 changeOrigin: true,
                 pathRewrite: {
                     ['^' + process.env.VUE_APP_BASE_API]: ''
                 }
             }
         },
-
-        before: require('./mock/mock-server.js')
     },
     configureWebpack: {
         // provide the app's title in webpack's name field, so that