角色管理setup改造完成

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

@@ -31,7 +31,7 @@
               icon="copy-document"
               size="mini"
               type="text"
-              @click="copyAuthority(scope.row)"
+              @click="copyAuthorityFunc(scope.row)"
             >拷贝</el-button>
             <el-button
               icon="edit"
@@ -94,9 +94,7 @@
   </div>
 </template>
 
-<script>
-// 获取列表内容封装在mixins内部  getTableData方法 初始化已封装完成
-
+<script setup>
 import {
   getAuthorityList,
   deleteAuthority,
@@ -110,46 +108,37 @@ import Apis from '@/view/superAdmin/authority/components/apis.vue'
 import Datas from '@/view/superAdmin/authority/components/datas.vue'
 import warningBar from '@/components/warningBar/warningBar.vue'
 
-import infoList from '@/mixins/infoList'
-export default {
-  name: 'Authority',
-  components: {
-    Menus,
-    Apis,
-    Datas,
-    warningBar
-  },
-  mixins: [infoList],
-  data() {
-    var mustUint = (rule, value, callback) => {
+import { ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+
+const mustUint = (rule, value, callback) => {
   if (!/^[0-9]*[1-9][0-9]*$/.test(value)) {
     return callback(new Error('请输入正整数'))
   }
   return callback()
 }
 
-    return {
-      AuthorityOption: [
+const AuthorityOption = ref([
   {
     authorityId: '0',
     authorityName: '根角色'
   }
-      ],
-      listApi: getAuthorityList,
-      drawer: false,
-      dialogType: 'add',
-      activeRow: {},
-      activeUserId: 0,
-      dialogTitle: '新增角色',
-      dialogFormVisible: false,
-      apiDialogFlag: false,
-      copyForm: {},
-      form: {
+])
+const drawer = ref(false)
+const dialogType = ref('add')
+const activeRow = ref({})
+
+const dialogTitle = ref('新增角色')
+const dialogFormVisible = ref(false)
+const apiDialogFlag = ref(false)
+const copyForm = ref({})
+
+const form = ref({
   authorityId: '',
   authorityName: '',
   parentId: '0'
-      },
-      rules: {
+})
+const rules = ref({
   authorityId: [
     { required: true, message: '请输入角色ID', trigger: 'blur' },
     { validator: mustUint, trigger: 'blur' }
@@ -160,44 +149,61 @@ export default {
   parentId: [
     { required: true, message: '请选择请求方式', trigger: 'blur' }
   ]
+})
+
+const page = ref(1)
+const total = ref(0)
+const pageSize = ref(999)
+const tableData = ref([])
+const searchInfo = ref({})
+
+// 查询
+const getTableData = async() => {
+  const table = await getAuthorityList({ page: page.value, pageSize: pageSize.value, ...searchInfo.value })
+  if (table.code === 0) {
+    tableData.value = table.data.list
+    total.value = table.data.total
+    page.value = table.data.page
+    pageSize.value = table.data.pageSize
   }
 }
-  },
-  async created() {
-    this.pageSize = 999
-    await this.getTableData()
-  },
-  methods: {
-    changeRow(key, value) {
-      this.activeRow[key] = value
-    },
-    autoEnter(activeName, oldActiveName) {
-      const paneArr = ['menus', 'apis', 'datas']
+
+getTableData()
+
+const changeRow = (key, value) => {
+  activeRow.value[key] = value
+}
+const menus = ref(null)
+const apis = ref(null)
+const datas = ref(null)
+const autoEnter = (activeName, oldActiveName) => {
+  const paneArr = [menus, apis, datas]
   if (oldActiveName) {
-        if (this.$refs[paneArr[oldActiveName]].needConfirm) {
-          this.$refs[paneArr[oldActiveName]].enterAndNext()
-          this.$refs[paneArr[oldActiveName]].needConfirm = false
+    console.log(paneArr[oldActiveName].value.needConfirm)
+    if (paneArr[oldActiveName].value.needConfirm) {
+      paneArr[oldActiveName].value.enterAndNext()
+      paneArr[oldActiveName].value.needConfirm = false
+    }
   }
 }
-    },
 // 拷贝角色
-    copyAuthority(row) {
-      this.setOptions()
-      this.dialogTitle = '拷贝角色'
-      this.dialogType = 'copy'
-      for (const k in this.form) {
-        this.form[k] = row[k]
-      }
-      this.copyForm = row
-      this.dialogFormVisible = true
-    },
-    opdendrawer(row) {
-      this.drawer = true
-      this.activeRow = row
-    },
+const copyAuthorityFunc = (row) => {
+  setOptions()
+  dialogTitle.value = '拷贝角色'
+  dialogType.value = 'copy'
+  for (const k in form.value) {
+    form.value[k] = row[k]
+  }
+  copyForm.value = row
+  dialogFormVisible.value = true
+}
+const opdendrawer = (row) => {
+  drawer.value = true
+  activeRow.value = row
+}
 // 删除角色
-    deleteAuth(row) {
-      this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
+const deleteAuth = (row) => {
+  ElMessageBox.confirm('此操作将永久删除该角色, 是否继续?', '提示', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning'
@@ -205,76 +211,77 @@ export default {
     .then(async() => {
       const res = await deleteAuthority({ authorityId: row.authorityId })
       if (res.code === 0) {
-            this.$message({
+        ElMessage({
           type: 'success',
           message: '删除成功!'
         })
-            if (this.tableData.length === 1 && this.page > 1) {
-              this.page--
+        if (tableData.value.length === 1 && page.value > 1) {
+          page.value--
         }
-            this.getTableData()
+        getTableData()
       }
     })
     .catch(() => {
-          this.$message({
+      ElMessage({
         type: 'info',
         message: '已取消删除'
       })
     })
-    },
+}
 // 初始化表单
-    initForm() {
-      if (this.$refs.authorityForm) {
-        this.$refs.authorityForm.resetFields()
+const authorityForm = ref(null)
+const initForm = () => {
+  if (authorityForm.value) {
+    authorityForm.value.resetFields()
   }
-      this.form = {
+  form.value = {
     authorityId: '',
     authorityName: '',
     parentId: '0'
   }
-    },
+}
 // 关闭窗口
-    closeDialog() {
-      this.initForm()
-      this.dialogFormVisible = false
-      this.apiDialogFlag = false
-    },
+const closeDialog = () => {
+  initForm()
+  dialogFormVisible.value = false
+  apiDialogFlag.value = false
+}
 // 确定弹窗
 
-    async enterDialog() {
-      if (this.form.authorityId === '0') {
-        this.$message({
+const enterDialog = () => {
+  if (form.value.authorityId === '0') {
+    ElMessage({
       type: 'error',
       message: '角色id不能为0'
     })
     return false
   }
-      this.$refs.authorityForm.validate(async valid => {
+  authorityForm.value.validate(async valid => {
     if (valid) {
-          switch (this.dialogType) {
+      switch (dialogType.value) {
         case 'add':
           {
-                const res = await createAuthority(this.form)
+            const res = await createAuthority(form.value)
             if (res.code === 0) {
-                  this.$message({
+              ElMessage({
                 type: 'success',
                 message: '添加成功!'
               })
-                  this.getTableData()
-                  this.closeDialog()
+              getTableData()
+              closeDialog()
             }
           }
           break
         case 'edit':
           {
-                const res = await updateAuthority(this.form)
+            const res = await updateAuthority(form.value)
             if (res.code === 0) {
-                  this.$message({
+              ElMessage({
                 type: 'success',
                 message: '添加成功!'
               })
-                  this.getTableData()
-                  this.closeDialog()
+              getTableData()
+              closeDialog()
             }
           }
           break
@@ -288,84 +295,90 @@ export default {
             },
             oldAuthorityId: 0
           }
-              data.authority.authorityId = this.form.authorityId
-              data.authority.authorityName = this.form.authorityName
-              data.authority.parentId = this.form.parentId
-              data.authority.dataAuthorityId = this.copyForm.dataAuthorityId
-              data.oldAuthorityId = this.copyForm.authorityId
+          data.authority.authorityId = form.value.authorityId
+          data.authority.authorityName = form.value.authorityName
+          data.authority.parentId = form.value.parentId
+          data.authority.dataAuthorityId = copyForm.value.dataAuthorityId
+          data.oldAuthorityId = copyForm.value.authorityId
           const res = await copyAuthority(data)
           if (res.code === 0) {
-                this.$message({
+            ElMessage({
               type: 'success',
               message: '复制成功！'
             })
-                this.getTableData()
+            getTableData()
           }
         }
       }
 
-          this.initForm()
-          this.dialogFormVisible = false
+      initForm()
+      dialogFormVisible.value = false
     }
   })
-    },
-    setOptions() {
-      this.AuthorityOption = [
+}
+const setOptions = () => {
+  AuthorityOption.value = [
     {
       authorityId: '0',
       authorityName: '根角色'
     }
   ]
-      this.setAuthorityOptions(this.tableData, this.AuthorityOption, false)
-    },
-    setAuthorityOptions(AuthorityData, optionsData, disabled) {
-      this.form.authorityId = String(this.form.authorityId)
+  setAuthorityOptions(tableData.value, AuthorityOption.value, false)
+}
+const setAuthorityOptions = (AuthorityData, optionsData, disabled) => {
+  form.value.authorityId = String(form.value.authorityId)
   AuthorityData &&
         AuthorityData.forEach(item => {
           if (item.children && item.children.length) {
             const option = {
               authorityId: item.authorityId,
               authorityName: item.authorityName,
-              disabled: disabled || item.authorityId === this.form.authorityId,
+              disabled: disabled || item.authorityId === form.value.authorityId,
               children: []
             }
-            this.setAuthorityOptions(
+            setAuthorityOptions(
               item.children,
               option.children,
-              disabled || item.authorityId === this.form.authorityId
+              disabled || item.authorityId === form.value.authorityId
             )
             optionsData.push(option)
           } else {
             const option = {
               authorityId: item.authorityId,
               authorityName: item.authorityName,
-              disabled: disabled || item.authorityId === this.form.authorityId
+              disabled: disabled || item.authorityId === form.value.authorityId
             }
             optionsData.push(option)
           }
         })
-    },
+}
 // 增加角色
-    addAuthority(parentId) {
-      this.initForm()
-      this.dialogTitle = '新增角色'
-      this.dialogType = 'add'
-      this.form.parentId = parentId
-      this.setOptions()
-      this.dialogFormVisible = true
-    },
-    // 编辑角色
-    editAuthority(row) {
-      this.setOptions()
-      this.dialogTitle = '编辑角色'
-      this.dialogType = 'edit'
-      for (const key in this.form) {
-        this.form[key] = row[key]
+const addAuthority = (parentId) => {
+  initForm()
+  dialogTitle.value = '新增角色'
+  dialogType.value = 'add'
+  form.value.parentId = parentId
+  setOptions()
+  dialogFormVisible.value = true
 }
-      this.setOptions()
-      this.dialogFormVisible = true
+// 编辑角色
+const editAuthority = (row) => {
+  setOptions()
+  dialogTitle.value = '编辑角色'
+  dialogType.value = 'edit'
+  for (const key in form.value) {
+    form.value[key] = row[key]
   }
+  setOptions()
+  dialogFormVisible.value = true
 }
+
+</script>
+
+<script>
+
+export default {
+  name: 'Authority'
 }
 </script>
 

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

@@ -16,56 +16,62 @@
     />
   </div>
 </template>
-
 <script>
-import { getAllApis } from '@/api/api'
-import { UpdateCasbin, getPolicyPathByAuthorityId } from '@/api/casbin'
 export default {
   name: 'Apis',
-  props: {
+}
+</script>
+
+<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 {}
     },
     type: Object
   }
-  },
-  data() {
-    return {
-      apiTreeData: [],
-      apiTreeIds: [],
-      needConfirm: false,
-      apiDefaultProps: {
+})
+
+const apiDefaultProps = ref({
   children: 'children',
   label: 'description'
-      }
-    }
-  },
-  async created() {
-    // 获取api并整理成树结构
+})
+
+const apiTreeData = ref([])
+const apiTreeIds = ref([])
+const activeUserId = ref('')
+const init = async() => {
   const res2 = await getAllApis()
   const apis = res2.data.apis
 
-    this.apiTreeData = this.buildApiTree(apis)
+  apiTreeData.value = buildApiTree(apis)
   const res = await getPolicyPathByAuthorityId({
-      authorityId: this.row.authorityId
+    authorityId: props.row.authorityId
   })
-    this.activeUserId = this.row.authorityId
-    this.apiTreeIds = []
+  activeUserId.value = props.row.authorityId
+  apiTreeIds.value = []
   res.data.paths && res.data.paths.forEach(item => {
-      this.apiTreeIds.push('p:' + item.path + 'm:' + item.method)
+    apiTreeIds.value.push('p:' + item.path + 'm:' + item.method)
   })
-  },
-  methods: {
-    nodeChange() {
-      this.needConfirm = true
-    },
+}
+
+init()
+
+const needConfirm = ref(false)
+const nodeChange = () => {
+  needConfirm.value = true
+}
 // 暴露给外层使用的切换拦截统一方法
-    enterAndNext() {
-      this.authApiEnter()
-    },
+const enterAndNext = () => {
+  authApiEnter()
+}
+
 // 创建api树方法
-    buildApiTree(apis) {
+const buildApiTree = (apis) => {
   const apiObj = {}
   apis &&
         apis.forEach(item => {
@@ -86,10 +92,12 @@ export default {
     apiTree.push(treeNode)
   }
   return apiTree
-    },
+}
+
 // 关联关系确定
-    async authApiEnter() {
-      const checkArr = this.$refs.apiTree.getCheckedNodes(true)
+const apiTree = ref(null)
+const authApiEnter = async() => {
+  const checkArr = apiTree.value.getCheckedNodes(true)
   var casbinInfos = []
   checkArr && checkArr.forEach(item => {
     var casbinInfo = {
@@ -99,13 +107,17 @@ export default {
     casbinInfos.push(casbinInfo)
   })
   const res = await UpdateCasbin({
-        authorityId: this.activeUserId,
+    authorityId: activeUserId.value,
     casbinInfos
   })
   if (res.code === 0) {
-        this.$message({ type: 'success', message: 'api设置成功' })
-      }
-    }
+    ElMessage({ type: 'success', message: 'api设置成功' })
   }
 }
+
+defineExpose({
+  needConfirm,
+  enterAndNext
+})
+
 </script>

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

@@ -14,13 +14,17 @@
 </template>
 
 <script>
+export default {
+  name: 'Datas'
+}
+</script>
+
+<script setup>
 import { setDataAuthority } from '@/api/authority'
 import warningBar from '@/components/warningBar/warningBar.vue'
-
-export default {
-  name: 'Datas',
-  components: { warningBar },
-  props: {
+import { defineProps, ref, defineEmits, defineExpose } from 'vue'
+import { ElMessage } from 'element-plus'
+const props = defineProps({
   row: {
     default: function() {
       return {}
@@ -33,75 +37,82 @@ export default {
     },
     type: Array
   }
-  },
-  data() {
-    return {
-      authoritys: [],
-      dataAuthorityId: [],
-      needConfirm: false
+})
+
+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)
     }
-  },
-  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: {
+}
+
+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()
+
 // 暴露给外层使用的切换拦截统一方法
-    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 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 = []
-      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) {
+  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 => {
-        this.getChildrenId(item, arrBox)
+    getChildrenId(item, arrBox)
   })
-    },
+}
 // 提交
-    async authDataEnter() {
-      const res = await setDataAuthority(this.row)
+const authDataEnter = async() => {
+  console.log(123, props.row)
+  const res = await setDataAuthority(props.row)
   if (res.code === 0) {
-        this.$message({ type: 'success', message: '资源设置成功' })
+    ElMessage({ 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
-    }
-  }
+const selectAuthority = () => {
+  emit('changeRow', 'dataAuthorityId', dataAuthorityId.value)
+  needConfirm.value = true
 }
+
+defineExpose({
+  enterAndNext,
+  needConfirm
+})
+
 </script>

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

@@ -34,40 +34,40 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { getBaseMenuTree, getMenuAuthority, addMenuAuthority } from '@/api/menu'
 import {
   updateAuthority
 } from '@/api/authority'
-export default {
-  name: 'Menus',
-  props: {
+import { defineProps, defineEmits, ref, defineExpose } from 'vue'
+import { ElMessage } from 'element-plus'
+const props = defineProps({
   row: {
     default: function() {
       return {}
     },
     type: Object
   }
-  },
-  data() {
-    return {
-      menuTreeData: [],
-      menuTreeIds: [],
-      needConfirm: false,
-      menuDefaultProps: {
+})
+
+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
   }
-      }
-    }
-  },
-  async created() {
+})
+
+const init = async() => {
   // 获取所有菜单树
   const res = await getBaseMenuTree()
-    this.menuTreeData = res.data.menus
+  menuTreeData.value = res.data.menus
 
-    const res1 = await getMenuAuthority({ authorityId: this.row.authorityId })
+  const res1 = await getMenuAuthority({ authorityId: props.row.authorityId })
   const menus = res1.data.menus
   const arr = []
   menus.forEach(item => {
@@ -76,37 +76,48 @@ export default {
       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 })
+  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) {
-        this.$message({ type: 'success', message: '设置成功' })
-        this.$emit('changeRow', 'defaultRouter', res.data.authority.defaultRouter)
+    ElMessage({ type: 'success', message: '设置成功' })
+    emit('changeRow', 'defaultRouter', res.data.authority.defaultRouter)
+  }
+}
+const nodeChange = () => {
+  needConfirm.value = true
 }
-    },
-    nodeChange() {
-      this.needConfirm = true
-    },
 // 暴露给外层使用的切换拦截统一方法
-    enterAndNext() {
-      this.relation()
-    },
+const enterAndNext = () => {
+  relation()
+}
 // 关联树 确认方法
-    async relation() {
-      const checkArr = this.$refs.menuTree.getCheckedNodes(false, true)
+const menuTree = ref(null)
+const relation = async() => {
+  const checkArr = menuTree.value.getCheckedNodes(false, true)
   const res = await addMenuAuthority({
     menus: checkArr,
-        authorityId: this.row.authorityId
+    authorityId: props.row.authorityId
   })
   if (res.code === 0) {
-        this.$message({
+    ElMessage({
       type: 'success',
       message: '菜单设置成功!'
     })
   }
 }
-  }
+
+defineExpose({ enterAndNext, needConfirm })
+
+</script>
+
+<script>
+
+export default {
+  name: 'Menus'
 }
 </script>