修改tree 新增授权

src/components/PublicPageTable/index.vue

@@ -1,26 +1,26 @@
 <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>
+    <el-table ref="table" :data="tableData" row-key="id" border default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}" @selection-change="handleSelectionChange" @select="selectBox">
+      <el-table-column type="selection" width="55">
+      </el-table-column>
+      <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>
 </template>
 
@@ -33,6 +33,12 @@ export default {
       default: () => []
     }
   },
+  data () {
+    return {
+      ids: [],
+      multipleSelection: []
+    }
+  },
   methods: {
     handleDetails (row) {
       this.$emit('handleDetails', row)
@@ -42,19 +48,42 @@ export default {
     },
     handleRemove (row) {
       this.$emit('handleRemove', row)
-    }
+    },
+    handleSelectionChange (rows) {
+
+    },
+    selectBoxAllChild (row) {
+      const { isCheck, children } = row
+      if (children?.length) {
+        if (isCheck) {
+          children.map(item => {
+            item.isCheck = true
+            this.$refs.table.toggleRowSelection(item, isCheck)
+            this.selectBoxAllChild(item)
+          })
+        } else {
+          children.map(item => {
+            item.isCheck = false
+            this.$refs.table.toggleRowSelection(item, isCheck)
+            this.selectBoxAllChild(item)
+          })
+        }
+      }
+    },
+    selectBox (selection, row) {
+      row.isCheck = !row.isCheck
+      const { children } = row
+      if (children) {
+        this.selectBoxAllChild(row)
+      }
+    },
   }
 }
 </script>
 
 <style lang="scss" scoped>
 .PublicPageTable {
-  padding: 20px;
-  height: calc(100vh - 120px);
-  &-content {
-    background-color: #fff;
-    height: 100%;
-    position: relative;
-  }
+  width: 100%;
+  height: 100%;
 }
 </style>

src/components/publicPageForm/index.vue

@@ -2,7 +2,7 @@
   <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" class="PublicPageForm">
     <el-form ref="ruleForm" :model="tableForm" :label-width="labelWidth">
       <el-row :gutter="20">
-        <el-col v-for="(item, index) in formItemArr" :key=" index" :span="formType == 'horizontal' ? formSpan : 24"  v-show="isShow(item.isdisplay)">
+        <el-col v-for="(item, index) in formItemArr" :key=" index" :span="formType == 'horizontal' ? formSpan : 24" v-show="isShow(item.isdisplay)">
           <el-form-item :rules="fromDataReq(item)" :prop="item.pagecode" :label="item.pagename">
             <template v-if="fromDataType(item.datatype) == 'SELECT'">
               <el-select class="input-shadow" size="small" filterable default-first-option style="width: 100%" v-model="tableForm[item.pagecode]" @change="changeSelect(item.pagecode, item)" placeholder="请选择" clearable @clear="tableForm[item.pagecode] = ''">
@@ -155,7 +155,7 @@ export default {
       const formItemCopy = _.cloneDeep(formItem)
       const [allResult, allResultKey] = [[], []]
       formItemCopy.map(({ dropdownlist, pagecode, defaultfilter }) => {
-        if (((dropdownlist || dropdownlist == 0)&&dropdownlist!="")) {
+        if (((dropdownlist || dropdownlist == 0) && dropdownlist != "")) {
           const datacontent = dropdownlist == 19 ? this.formatDefault(defaultfilter) : { filter: { 1: 1 } }
           allResultKey.push(pagecode)
           allResult.push(Query({ serviceid: dropdownlist, datacontent, event: '0' }))
@@ -208,12 +208,12 @@ export default {
       });
       return flag
     },
-    isShow(isdisplay){
+    isShow (isdisplay) {
       let show = false
-      if(eval(isdisplay)){
+      if (eval(isdisplay)) {
         show = true
       }
-      else{
+      else {
         show = false
       }
       return show

src/components/publicPageTree/index.vue

@@ -5,7 +5,7 @@
     </div>
     <div class="publicPageTree_tree">
       <el-scrollbar style="height: 100%" :horizontal="false">
-        <el-tree class="filter-tree" :data="data" :props="defaultProps" node-key="pageconfigurationid" :default-expanded-keys="defaultKeys" :filter-node-method="filterNode" ref="tree" @node-click="treeNodeClick" />
+        <el-tree class="filter-tree" :data="data" :props="defaultProps" :node-key="nodeKey" :default-expanded-keys="defaultKeys" :filter-node-method="filterNode" ref="tree" @node-click="treeNodeClick" />
       </el-scrollbar>
     </div>
   </div>
@@ -22,6 +22,10 @@ export default {
       type: Array,
       default: () => []
     },
+    treeMap: {
+      type: Object,
+      default: () => new Object()
+    },
     depMath: {
       type: Number | String,
       default: 0
@@ -37,6 +41,7 @@ export default {
         label: 'pagename'
       },
       defaultKeys: [],
+      nodeKey: 'pageconfigurationid',
       msgCaps: []
     }
   },
@@ -52,6 +57,15 @@ export default {
       deep: true,
       immediate: true
     },
+    treeMap: {
+      handler (row) {
+        const { nodeKey, nodeValue } = row
+        if (nodeKey) this.nodeKey = nodeKey
+        if (nodeValue) this.defaultProps.label = nodeValue
+      },
+      deep: true,
+      immediate: true
+    },
     depMath: {
       handler (arr) {
         this.pageInit(arr)
@@ -83,6 +97,7 @@ export default {
     async queryTreeData (defaultfilter, serviceid, pagename) {
       this.loading = true;
       const datacontent = { filter: defaultfilter }
+      const { nodeKey, nodeValue } = this.treeMap
       try {
         const { code, returnData } = await Query({
           serviceid,
@@ -91,8 +106,11 @@ export default {
         });
         if (code == 0 && returnData?.length) {
           const name = '全部'
-          const treeMenu = listToTree(returnData, 'superiorid', 'pageconfigurationid')
-          const treeMenuAll = [{ pagename: name, serviceid: name, superiorid: name, pageconfigurationid: -1, children: treeMenu }]
+          const treeMenu = listToTree(returnData, 'superiorid', nodeKey)
+          const treeObj = { serviceid: name, superiorid: name, children: treeMenu }
+          treeObj[nodeValue] = name
+          treeObj[nodeKey] = -1
+          const treeMenuAll = [treeObj]
           this.defaultKeys = [-1]
           this.data = treeMenuAll
         } else {

src/views/dataAccessPage/components/accessPageTable.vue

@@ -1,12 +0,0 @@
-<template>
-  <div>2</div>
-</template>
-
-<script>
-export default {
-
-}
-</script>
-
-<style>
-</style>

src/views/dataAccessPage/components/accessPageTree.vue

@@ -64,6 +64,7 @@ export default {
       tableObj: {}, //删除数据
       tableOptions: {}, //表单数据下拉
       labelWidth: '120px', //表单文字距离
+      passparameters: {}
     }
   },
   watch: {
@@ -91,10 +92,11 @@ export default {
     if (!pageAuthfroms.length) return
 
     const { pageconfigurationid } = pageAuthfroms[0]
-    const { pagename, serviceid } = pageAuthtrees[0]
+    const { pagename, serviceid, passparameters } = pageAuthtrees[0]
     const tableColumnArrs = pageAuths.filter(item => item['superiorid'] == pageconfigurationid && item['pagetype'] == 'column')
     this.formItem = tableColumnArrs.filter(item => item.isdisplay == 1)
     this.pageServiceId = serviceid
+    this.passparameters = passparameters
     this.getColumnData(tableColumnArrs)
     this.queryTreeData(serviceid, pagename)
   },
@@ -105,7 +107,7 @@ export default {
     },
 
     treeNodeClick (data) {
-      console.log(data)
+      this.$emit('treeNodeClick', Object.assign(data, { passparameters: this.passparameters }))
     },
 
     append () {

src/views/dataAccessPage/index.vue

@@ -3,10 +3,10 @@
     <PublicPageHeader class="dataAccessPage_header" page-title="服务管理" />
     <div class="dataAccessPage_content flex-wrap">
       <div class="dataAccessPage_content_left">
-        <AccessPageTree />
+        <AccessPageTree @treeNodeClick="treeNodeClick" />
       </div>
       <div class="dataAccessPage_content_right">
-        <AccessPageTable style="padding: 0;" :data-flag="true" data-title="算法配置" />
+        <AccessPageTable style="padding: 0;" :data-flag="true" :msg-content="msgContent" data-title="算法配置" />
       </div>
     </div>
   </div>
@@ -18,7 +18,17 @@ import AccessPageTree from './components/accessPageTree.vue'
 import AccessPageTable from '@/views/tablePage'
 export default {
   name: 'DataAccessPage',
-  components: { PublicPageHeader, AccessPageTree, AccessPageTable }
+  components: { PublicPageHeader, AccessPageTree, AccessPageTable },
+  data () {
+    return {
+      msgContent: {}
+    }
+  },
+  methods: {
+    treeNodeClick (row) {
+      this.msgContent = row
+    }
+  }
 }
 </script>
 

src/views/permissionPage/index.vue

@@ -1,91 +1,17 @@
 <template>
   <div class="permissionPage">
-    <PublicPageHeader page-title="界面配置管理" @handleAdd="handleAdd">
-      <el-button size="small" @click="advancedDrawer = true" 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" placeholder="请输入权限项名称" 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" placeholder="请输入权限项编码" 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" placeholder="请输入路由地址" clearable></el-input>
-          </el-form-item>
-          <el-form-item v-if="dialogForm.pagetype == 2" label="页面路径">
-            <el-input size="small" v-model="dialogForm.pagename" placeholder="请输入页面路径" clearable></el-input>
-          </el-form-item>
-          <el-form-item label="描述">
-            <el-input size="small" v-model="dialogForm.pagename" placeholder="请输入描述" 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" placeholder="请输入跳转地址" clearable></el-input>
-          </el-form-item>
-          <el-form-item label="弹框标识">
-            <el-input size="small" v-model="dialogForm.pagename" placeholder="请输入弹框标识" clearable></el-input>
-          </el-form-item>
-          <el-form-item label="传递参数">
-            <el-input size="small" v-model="dialogForm.pagename" placeholder="请输入传递参数" clearable></el-input>
-          </el-form-item>
-          <el-form-item label="数据服务ID">
-            <el-input size="small" v-model="dialogForm.pagename" placeholder="请输入数据服务ID" 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" placeholder="请输入数据服务ID" clearable></el-input>
-          </el-form-item>
-        </template>
-      </el-form>
-    </PublicPageDialog>
+    <PublicPageHeader class="permissionPage_head" page-title="界面配置管理" />
+    <div class="permissionPage_content flex">
+      <div class="permissionPage_content_left">
+        <PublicPageTree />
+      </div>
+      <div class="permissionPage_content_right">
+        <PublicPageTable :table-data="tableData" @handleDetails="handleDetails" @handleEdit="handleEdit" @handleRemove="handleRemove" />
+      </div>
+    </div>
     <!--高级查询-->
     <PublicPageDialog dialog-title="高级查询" dialogSize="600px" :dialog-drawer="advancedDrawer" @handleClose="advancedDrawer = false" @handleSubmit="advancedTable('advancedDialogForm')">
       <AdvancedQuery ref="advancedDialogForm" @getAdvancedQueryData="getAdvancedQueryData" />
-      <template slot="d_foot">
-        <el-button size="small" type="primary">收藏</el-button>
-      </template>
     </PublicPageDialog>
   </div>
 </template>
@@ -94,40 +20,60 @@
 import PublicPageHeader from '@/components/PublicPageHeader'
 import PublicPageTable from '@/components/PublicPageTable'
 import PublicPageDialog from '@/components/PublicPageDialog'
+import PublicPageTree from '@/components/publicPageTree'
 import AdvancedQuery from '@/components/AdvancedQuery'
 export default {
-  name: 'permissionPage',
-  components: { PublicPageHeader, PublicPageTable, PublicPageDialog, AdvancedQuery },
+  name: 'Permissionpage',
+  components: { PublicPageHeader, PublicPageTable, PublicPageDialog, PublicPageTree, AdvancedQuery },
   data () {
     return {
       tableData: [{
         id: 1,
+        upid: null,
         date: '2016-05-02',
         name: '王小虎',
         address: '上海市普陀区金沙江路 1518 弄'
       }, {
         id: 2,
+        upid: null,
         date: '2016-05-04',
         name: '王小虎',
         address: '上海市普陀区金沙江路 1517 弄'
       }, {
         id: 3,
+        upid: null,
         date: '2016-05-01',
         name: '王小虎',
         address: '上海市普陀区金沙江路 1519 弄',
         children: [{
           id: 31,
+          upid: 3,
           date: '2016-05-01',
           name: '王小虎',
-          address: '上海市普陀区金沙江路 1519 弄'
+          address: '上海市普陀区金沙江路 1519 弄',
+          children: [{
+            id: 41,
+            upid: 31,
+            date: '2016-05-01',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1519 弄'
+          }, {
+            id: 42,
+            upid: 31,
+            date: '2016-05-01',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1519 弄'
+          }]
         }, {
           id: 32,
+          upid: 3,
           date: '2016-05-01',
           name: '王小虎',
           address: '上海市普陀区金沙江路 1519 弄'
         }]
       }, {
         id: 4,
+        upid: null,
         date: '2016-05-03',
         name: '王小虎',
         address: '上海市普陀区金沙江路 1516 弄'
@@ -205,5 +151,24 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss" scoped>
+.permissionPage {
+  height: calc(100vh - 80px);
+  padding: 20px;
+  &_content {
+    margin-top: 20px;
+    height: calc(100vh - 180px);
+    &_left {
+      width: 360px;
+      margin-right: 20px;
+      height: 100%;
+    }
+    &_right {
+      width: calc(100% - 380px);
+      height: 100%;
+      background-color: #fff;
+      padding: 20px;
+    }
+  }
+}
 </style>

src/views/tablePage/index.vue

@@ -7,7 +7,7 @@
     <div :style="pageTableContentHeight" class="TablePage_content flex-wrap">
       <template v-if="!dataFlag">
         <div v-if="treeData.length" class="TablePage_content_left">
-          <PublicPageTree :tree-data="treeData" :dep-math="depMath" @treeNodeClick="treeNodeClick" />
+          <PublicPageTree :tree-data="treeData" :dep-math="depMath" :tree-map="treeNodeMap" @treeNodeClick="treeNodeClick" />
         </div>
       </template>
       <div :class="dataFlag ? 'tableAuto' : treeData.length ? 'tableSacle' : 'tableAuto'" class="TablePage_content_right">
@@ -72,6 +72,7 @@ export default {
       pageTitle: '', //页面名称
       treeData: [], //tree数据
       treeParameters: {}, //tree传递参数
+      treeNodeMap: {}, //tree传递map
       tableCols: [], //表头数据
       tableData: [], //表格数据
       tableBtns: [], //表格按钮权限
@@ -120,6 +121,21 @@ export default {
       return this.tableBtns.filter(item => item.servicetype == 5)[0]
     },
   },
+  watch: {
+    msgContent: {
+      handler (row) {
+        if (row && Object.keys(row).length) {
+          const { passparameters } = row
+          const filterItem = this.formatDefault(passparameters, row)
+          if (!Object.keys(filterItem).length) return
+          this.defaultfilter = filterItem
+          this.queryTableData(true)
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
   mounted () {
     this.pageInit()
   },
@@ -152,7 +168,8 @@ export default {
     },
     //根据页面tree设置数据
     getPageTreeSetting (pageAuthtrees) {
-      const { passparameters } = pageAuthtrees[0]
+      const { passparameters, dropdownlistid, dropdownlistlabel } = pageAuthtrees[0]
+      this.treeNodeMap = { nodeKey: dropdownlistid, nodeValue: dropdownlistlabel }
       this.treeParameters = passparameters
       this.treeData = pageAuthtrees
     },
@@ -185,7 +202,6 @@ export default {
     //获取表头数据
     getColumnData (columnArrs = []) {
       const returnData = [...columnArrs]
-      console.log(returnData)
       this.$store.dispatch('auth/changeAuthMsg', returnData)
       const tableColsCopy = _.cloneDeep(returnData).filter((item) => item.isdisplay == 1 || item.isdisplay == 'true');
       const tableColsCopyOrder = _.orderBy(tableColsCopy, ['displaynumber'], ['asc']);