-copy

src/views/systemManage/rolePermission/roleInfoCom/index copy.vue

@@ -0,0 +1,261 @@
+<template>
+  <div class="siteManage-main roleInfoPage">
+    <div style="text-align: right; margin-bottom: 20px">
+      <!-- <el-button type="success" >新增</el-button> -->
+      <el-button type="primary" @click="saveMenu()">保存</el-button>
+    </div>
+
+    <el-table :data="menuData" border stripe>
+      <el-table-column prop="label" label="菜单" width="180"></el-table-column>
+      <el-table-column prop="authority2" label="权限" class="roleLeft">
+        <template #default="scope">
+          <el-radio-group
+            v-model="scope.row.authority2"
+            @change="listTabsChange(scope.row)"
+          >
+            <el-radio label="1" :disabled="radio1 == 1 ? true : false">
+              是
+            </el-radio>
+            <el-radio label="0" :disabled="radio1 == 1 ? true : false">
+              否
+            </el-radio>
+          </el-radio-group>
+        </template>
+      </el-table-column>
+    </el-table>
+    <br />
+    <br />
+
+    <!-- 树结构的表格 start -->
+    <el-table
+      :data="tableData"
+      style="width: 100%; margin-bottom: 20px"
+      row-key="id"
+      border
+      
+    >
+      <el-table-column prop="date" label="菜单" width="180" />
+      <el-table-column prop="name" label="权限" >
+        <template #default="scope">
+          <el-radio-group
+            v-model="scope.row.authority2"
+       
+          >
+            <el-radio label="1">是</el-radio>
+            <el-radio label="0">否</el-radio>
+          </el-radio-group>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 树结构的表格 end -->
+
+    <!-- 带复选框的树结构 start -->
+
+    <!-- 带复选框的树结构 end -->
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted, watch } from 'vue'
+import * as api from '@/api/systemManage/rolePermission.js'
+import { ElMessage } from 'element-plus'
+
+export default defineComponent({
+  name: 'RoleInfoCom',
+  props: ['menuData', 'objItem', 'radio1'],
+
+  // props: {
+  //   menuData: Object,
+  //   objItem: Object,
+  //   radio1: String,
+  // },
+
+  setup(props) {
+    const aa = ref([])
+    const saveArr = ref([])
+    const tableData = ref([
+      {
+        id: 1,
+        date: '告警管理',
+        name: 'wangxiaohu',
+        authority2: '1',
+        children: [
+          {
+            id: 11,
+            date: '新增',
+            name: 'wangxiaohu',
+            authority2: '1',
+          },
+          {
+            id: 12,
+            date: '修改',
+            name: 'wangxiaohu',
+            authority2: '1',
+          },
+          {
+            id: 13,
+            date: '删除',
+            name: 'wangxiaohu',
+            authority2: '0',
+          },
+        ],
+      },
+      {
+        id: 2,
+        date: '站点管理',
+        name: 'wangxiaohu',
+        authority2: '1',
+        children: [
+          {
+            id: 21,
+            date: '新增',
+            name: 'wangxiaohu',
+            authority2: '1',
+          },
+          {
+            id: 22,
+            date: '修改',
+            name: 'wangxiaohu',
+            authority2: '1',
+          },
+          {
+            id: 23,
+            date: '删除',
+            name: 'wangxiaohu',
+            authority2: '0',
+          },
+        ],
+      },
+      {
+        id: 3,
+        date: '数据管理',
+        name: 'wangxiaohu',
+        authority2: '0',
+        children: [
+          {
+            id: 31,
+            date: '同比分析报表',
+            name: 'wangxiaohu',
+            authority2: '0',
+
+            children: [
+              {
+                id: 41,
+                date: '新增',
+                name: 'wangxiaohu',
+                authority2: '0',
+              },
+              {
+                id: 42,
+                date: '修改',
+                name: 'wangxiaohu',
+                authority2: '0',
+              },
+              {
+                id: 43,
+                date: '删除',
+                name: 'wangxiaohu',
+                authority2: '0',
+              },
+            ],
+          },
+
+          {
+            id: 32,
+            date: '台区管理',
+            name: 'wangxiaohu',
+            authority2: '0',
+            children: [
+              {
+                id: 51,
+                date: '新增',
+                name: 'wangxiaohu',
+                authority2: '0',
+              },
+              {
+                id: 52,
+                date: '修改',
+                name: 'wangxiaohu',
+                authority2: '0',
+              },
+              {
+                id: 53,
+                date: '删除',
+                name: 'wangxiaohu',
+                authority2: '0',
+              },
+            ],
+          },
+        ],
+      },
+    ])
+
+    function saveMenu() {
+      api
+        .saveMenu({
+          menuIds: saveArr.value,
+          roleId: props.radio1,
+          roleKey: props.objItem.roleKey,
+          roleName: props.objItem.roleName,
+          roleSort: props.objItem.roleSort,
+        })
+        .then((requset) => {
+          if (requset.status === 'SUCCESS') {
+            ElMessage.success({
+              message: '权限修改成功',
+              type: 'success',
+            })
+          } else {
+            ElMessage.error(requset.msg)
+          }
+        })
+    }
+
+    const listTabsChange = (value) => {
+      saveArr.value = []
+      value
+
+      props.menuData.forEach(function (item) {
+        if (item.authority2 == '1') {
+          saveArr.value.push(item.id)
+          var aa = item.children
+          aa.forEach(function (item) {
+            saveArr.value.push(item.id)
+          })
+        }
+      })
+    }
+
+    onMounted(() => {})
+    //监听变化
+    watch(
+      () => props.radio1,
+      (newVal) => {
+        newVal
+
+        // if (newVal == '1') {
+        //   alert(1)
+        //   props.menuData.forEach(function (item) {
+        //     item.authority2 = '1'
+        //     saveArr.value.push(item.id)
+        //   })
+        //   console.log(' 22props.menuData')
+        //   console.log(props.menuData)
+        // }
+      }
+    )
+
+    return {
+      saveMenu,
+      aa,
+      listTabsChange,
+      saveArr,
+      tableData,
+    }
+  },
+})
+</script>
+
+<style  lang="scss">
+</style>