角色管理setup改造完成

web/src/view/superAdmin/authority/components/apis.vue

@@ -16,58 +16,64 @@
     />
   </div>
 </template>
-
 <script>
-import { getAllApis } from '@/api/api'
-import { UpdateCasbin, getPolicyPathByAuthorityId } from '@/api/casbin'
 export default {
   name: 'Apis',
-  props: {
-    row: {
-      default: function() {
-        return {}
-      },
-      type: Object
-    }
-  },
-  data() {
-    return {
-      apiTreeData: [],
-      apiTreeIds: [],
-      needConfirm: false,
-      apiDefaultProps: {
-        children: 'children',
-        label: 'description'
-      }
-    }
-  },
-  async created() {
-    // 获取api并整理成树结构
-    const res2 = await getAllApis()
-    const apis = res2.data.apis
+}
+</script>
 
-    this.apiTreeData = this.buildApiTree(apis)
-    const res = await getPolicyPathByAuthorityId({
-      authorityId: this.row.authorityId
-    })
-    this.activeUserId = this.row.authorityId
-    this.apiTreeIds = []
-    res.data.paths && res.data.paths.forEach(item => {
-      this.apiTreeIds.push('p:' + item.path + 'm:' + item.method)
-    })
-  },
-  methods: {
-    nodeChange() {
-      this.needConfirm = true
+<script setup>
+import { getAllApis } from '@/api/api'
+import { UpdateCasbin, getPolicyPathByAuthorityId } from '@/api/casbin'
+import { defineProps, ref, defineExpose } from 'vue'
+import { ElMessage } from 'element-plus'
+const props = defineProps({
+  row: {
+    default: function() {
+      return {}
     },
-    // 暴露给外层使用的切换拦截统一方法
-    enterAndNext() {
-      this.authApiEnter()
-    },
-    // 创建api树方法
-    buildApiTree(apis) {
-      const apiObj = {}
-      apis &&
+    type: Object
+  }
+})
+
+const apiDefaultProps = ref({
+  children: 'children',
+  label: 'description'
+})
+
+const apiTreeData = ref([])
+const apiTreeIds = ref([])
+const activeUserId = ref('')
+const init = async() => {
+  const res2 = await getAllApis()
+  const apis = res2.data.apis
+
+  apiTreeData.value = buildApiTree(apis)
+  const res = await getPolicyPathByAuthorityId({
+    authorityId: props.row.authorityId
+  })
+  activeUserId.value = props.row.authorityId
+  apiTreeIds.value = []
+  res.data.paths && res.data.paths.forEach(item => {
+    apiTreeIds.value.push('p:' + item.path + 'm:' + item.method)
+  })
+}
+
+init()
+
+const needConfirm = ref(false)
+const nodeChange = () => {
+  needConfirm.value = true
+}
+// 暴露给外层使用的切换拦截统一方法
+const enterAndNext = () => {
+  authApiEnter()
+}
+
+// 创建api树方法
+const buildApiTree = (apis) => {
+  const apiObj = {}
+  apis &&
         apis.forEach(item => {
           item.onlyId = 'p:' + item.path + 'm:' + item.method
           if (Object.prototype.hasOwnProperty.call(apiObj, item.apiGroup)) {
@@ -76,36 +82,42 @@ export default {
             Object.assign(apiObj, { [item.apiGroup]: [item] })
           }
         })
-      const apiTree = []
-      for (const key in apiObj) {
-        const treeNode = {
-          ID: key,
-          description: key + '组',
-          children: apiObj[key]
-        }
-        apiTree.push(treeNode)
-      }
-      return apiTree
-    },
-    // 关联关系确定
-    async authApiEnter() {
-      const checkArr = this.$refs.apiTree.getCheckedNodes(true)
-      var casbinInfos = []
-      checkArr && checkArr.forEach(item => {
-        var casbinInfo = {
-          path: item.path,
-          method: item.method
-        }
-        casbinInfos.push(casbinInfo)
-      })
-      const res = await UpdateCasbin({
-        authorityId: this.activeUserId,
-        casbinInfos
-      })
-      if (res.code === 0) {
-        this.$message({ type: 'success', message: 'api设置成功' })
-      }
+  const apiTree = []
+  for (const key in apiObj) {
+    const treeNode = {
+      ID: key,
+      description: key + '组',
+      children: apiObj[key]
     }
+    apiTree.push(treeNode)
+  }
+  return apiTree
+}
+
+// 关联关系确定
+const apiTree = ref(null)
+const authApiEnter = async() => {
+  const checkArr = apiTree.value.getCheckedNodes(true)
+  var casbinInfos = []
+  checkArr && checkArr.forEach(item => {
+    var casbinInfo = {
+      path: item.path,
+      method: item.method
+    }
+    casbinInfos.push(casbinInfo)
+  })
+  const res = await UpdateCasbin({
+    authorityId: activeUserId.value,
+    casbinInfos
+  })
+  if (res.code === 0) {
+    ElMessage({ type: 'success', message: 'api设置成功' })
   }
 }
+
+defineExpose({
+  needConfirm,
+  enterAndNext
+})
+
 </script>

web/src/view/superAdmin/authority/components/datas.vue

@@ -14,94 +14,105 @@
 </template>
 
 <script>
-import { setDataAuthority } from '@/api/authority'
-import warningBar from '@/components/warningBar/warningBar.vue'
-
 export default {
-  name: 'Datas',
-  components: { warningBar },
-  props: {
-    row: {
-      default: function() {
-        return {}
-      },
-      type: Object
-    },
-    authority: {
-      default: function() {
-        return []
-      },
-      type: Array
-    }
-  },
-  data() {
-    return {
-      authoritys: [],
-      dataAuthorityId: [],
-      needConfirm: false
-    }
-  },
-  created() {
-    this.authoritys = []
-    this.dataAuthorityId = []
-    this.roundAuthority(this.authority)
-    this.row.dataAuthorityId && this.row.dataAuthorityId.forEach(item => {
-      const obj = this.authoritys && this.authoritys.filter(au => au.authorityId === item.authorityId) && this.authoritys.filter(au => au.authorityId === item.authorityId)[0]
-      this.dataAuthorityId.push(obj)
-    })
-  },
-  methods: {
-    // 暴露给外层使用的切换拦截统一方法
-    enterAndNext() {
-      this.authDataEnter()
-    },
-    all() {
-      this.dataAuthorityId = [...this.authoritys]
-      this.$emit('changeRow', 'dataAuthorityId', this.dataAuthorityId)
-      this.needConfirm = true
-    },
-    self() {
-      this.dataAuthorityId = this.authoritys.filter(item => item.authorityId === this.row.authorityId)
-      this.$emit('changeRow', 'dataAuthorityId', this.dataAuthorityId)
-      this.needConfirm = true
-    },
-    selfAndChildren() {
-      const arrBox = []
-      this.getChildrenId(this.row, arrBox)
-      this.dataAuthorityId = this.authoritys.filter(item => arrBox.indexOf(item.authorityId) > -1)
-      this.$emit('changeRow', 'dataAuthorityId', this.dataAuthorityId)
-      this.needConfirm = true
-    },
-    getChildrenId(row, arrBox) {
-      arrBox.push(row.authorityId)
-      row.children && row.children.forEach(item => {
-        this.getChildrenId(item, arrBox)
-      })
-    },
-    // 提交
-    async authDataEnter() {
-      const res = await setDataAuthority(this.row)
-      if (res.code === 0) {
-        this.$message({ type: 'success', message: '资源设置成功' })
-      }
-    },
-    //   平铺角色
-    roundAuthority(authoritys) {
-      authoritys && authoritys.forEach(item => {
-        const obj = {}
-        obj.authorityId = item.authorityId
-        obj.authorityName = item.authorityName
-        this.authoritys.push(obj)
-        if (item.children && item.children.length) {
-          this.roundAuthority(item.children)
-        }
-      })
-    },
-    //   选择
-    selectAuthority() {
-      this.$emit('changeRow', 'dataAuthorityId', this.dataAuthorityId)
-      this.needConfirm = true
-    }
-  }
+  name: 'Datas'
 }
 </script>
+
+<script setup>
+import { setDataAuthority } from '@/api/authority'
+import warningBar from '@/components/warningBar/warningBar.vue'
+import { defineProps, ref, defineEmits, defineExpose } from 'vue'
+import { ElMessage } from 'element-plus'
+const props = defineProps({
+  row: {
+    default: function() {
+      return {}
+    },
+    type: Object
+  },
+  authority: {
+    default: function() {
+      return []
+    },
+    type: Array
+  }
+})
+
+const authoritys = ref([])
+const needConfirm = ref(false)
+//   平铺角色
+const roundAuthority = (authoritysData) => {
+  authoritysData && authoritysData.forEach(item => {
+    const obj = {}
+    obj.authorityId = item.authorityId
+    obj.authorityName = item.authorityName
+    authoritys.value.push(obj)
+    if (item.children && item.children.length) {
+      roundAuthority(item.children)
+    }
+  })
+}
+
+const dataAuthorityId = ref([])
+const init = () => {
+  roundAuthority(props.authority)
+  props.row.dataAuthorityId && props.row.dataAuthorityId.forEach(item => {
+    const obj = authoritys.value && authoritys.value.filter(au => au.authorityId === item.authorityId) && authoritys.value.filter(au => au.authorityId === item.authorityId)[0]
+    dataAuthorityId.value.push(obj)
+  })
+}
+
+init()
+
+// 暴露给外层使用的切换拦截统一方法
+const enterAndNext = () => {
+  console.log(123)
+  authDataEnter()
+}
+
+const emit = defineEmits(['changeRow'])
+const all = () => {
+  dataAuthorityId.value = [...authoritys.value]
+  emit('changeRow', 'dataAuthorityId', dataAuthorityId.value)
+  needConfirm.value = true
+}
+const self = () => {
+  dataAuthorityId.value = authoritys.value.filter(item => item.authorityId === props.row.authorityId)
+  emit('changeRow', 'dataAuthorityId', dataAuthorityId.value)
+  needConfirm.value = true
+}
+const selfAndChildren = () => {
+  const arrBox = []
+  getChildrenId(props.row, arrBox)
+  dataAuthorityId.value = authoritys.value.filter(item => arrBox.indexOf(item.authorityId) > -1)
+  emit('changeRow', 'dataAuthorityId', dataAuthorityId.value)
+  needConfirm.value = true
+}
+const getChildrenId = (row, arrBox) => {
+  arrBox.push(row.authorityId)
+  row.children && row.children.forEach(item => {
+    getChildrenId(item, arrBox)
+  })
+}
+// 提交
+const authDataEnter = async() => {
+  console.log(123, props.row)
+  const res = await setDataAuthority(props.row)
+  if (res.code === 0) {
+    ElMessage({ type: 'success', message: '资源设置成功' })
+  }
+}
+
+//   选择
+const selectAuthority = () => {
+  emit('changeRow', 'dataAuthorityId', dataAuthorityId.value)
+  needConfirm.value = true
+}
+
+defineExpose({
+  enterAndNext,
+  needConfirm
+})
+
+</script>

web/src/view/superAdmin/authority/components/menus.vue

@@ -34,79 +34,90 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { getBaseMenuTree, getMenuAuthority, addMenuAuthority } from '@/api/menu'
 import {
   updateAuthority
 } from '@/api/authority'
-export default {
-  name: 'Menus',
-  props: {
-    row: {
-      default: function() {
-        return {}
-      },
-      type: Object
-    }
-  },
-  data() {
-    return {
-      menuTreeData: [],
-      menuTreeIds: [],
-      needConfirm: false,
-      menuDefaultProps: {
-        children: 'children',
-        label: function(data) {
-          return data.meta.title
-        }
-      }
-    }
-  },
-  async created() {
-    // 获取所有菜单树
-    const res = await getBaseMenuTree()
-    this.menuTreeData = res.data.menus
+import { defineProps, defineEmits, ref, defineExpose } from 'vue'
+import { ElMessage } from 'element-plus'
+const props = defineProps({
+  row: {
+    default: function() {
+      return {}
+    },
+    type: Object
+  }
+})
 
-    const res1 = await getMenuAuthority({ authorityId: this.row.authorityId })
-    const menus = res1.data.menus
-    const arr = []
-    menus.forEach(item => {
-      // 防止直接选中父级造成全选
-      if (!menus.some(same => same.parentId === item.menuId)) {
-        arr.push(Number(item.menuId))
-      }
-    })
-    this.menuTreeIds = arr
-  },
-  methods: {
-    async setDefault(data) {
-      const res = await updateAuthority({ authorityId: this.row.authorityId, AuthorityName: this.row.authorityName, parentId: this.row.parentId, defaultRouter: data.name })
-      if (res.code === 0) {
-        this.$message({ type: 'success', message: '设置成功' })
-        this.$emit('changeRow', 'defaultRouter', res.data.authority.defaultRouter)
-      }
-    },
-    nodeChange() {
-      this.needConfirm = true
-    },
-    // 暴露给外层使用的切换拦截统一方法
-    enterAndNext() {
-      this.relation()
-    },
-    // 关联树 确认方法
-    async relation() {
-      const checkArr = this.$refs.menuTree.getCheckedNodes(false, true)
-      const res = await addMenuAuthority({
-        menus: checkArr,
-        authorityId: this.row.authorityId
-      })
-      if (res.code === 0) {
-        this.$message({
-          type: 'success',
-          message: '菜单设置成功!'
-        })
-      }
+const emit = defineEmits(['changeRow'])
+
+const menuTreeData = ref([])
+const menuTreeIds = ref([])
+const needConfirm = ref(false)
+const menuDefaultProps = ref({
+  children: 'children',
+  label: function(data) {
+    return data.meta.title
+  }
+})
+
+const init = async() => {
+  // 获取所有菜单树
+  const res = await getBaseMenuTree()
+  menuTreeData.value = res.data.menus
+
+  const res1 = await getMenuAuthority({ authorityId: props.row.authorityId })
+  const menus = res1.data.menus
+  const arr = []
+  menus.forEach(item => {
+    // 防止直接选中父级造成全选
+    if (!menus.some(same => same.parentId === item.menuId)) {
+      arr.push(Number(item.menuId))
     }
+  })
+  menuTreeIds.value = arr
+}
+
+init()
+
+const setDefault = async(data) => {
+  const res = await updateAuthority({ authorityId: props.row.authorityId, AuthorityName: props.row.authorityName, parentId: props.row.parentId, defaultRouter: data.name })
+  if (res.code === 0) {
+    ElMessage({ type: 'success', message: '设置成功' })
+    emit('changeRow', 'defaultRouter', res.data.authority.defaultRouter)
   }
 }
+const nodeChange = () => {
+  needConfirm.value = true
+}
+// 暴露给外层使用的切换拦截统一方法
+const enterAndNext = () => {
+  relation()
+}
+// 关联树 确认方法
+const menuTree = ref(null)
+const relation = async() => {
+  const checkArr = menuTree.value.getCheckedNodes(false, true)
+  const res = await addMenuAuthority({
+    menus: checkArr,
+    authorityId: props.row.authorityId
+  })
+  if (res.code === 0) {
+    ElMessage({
+      type: 'success',
+      message: '菜单设置成功!'
+    })
+  }
+}
+
+defineExpose({ enterAndNext, needConfirm })
+
+</script>
+
+<script>
+
+export default {
+  name: 'Menus'
+}
 </script>