feat: 角色crud对接完成

src/api/role/role.js

@@ -37,6 +37,13 @@ export const getRoleExcludeMenuId = (params) => {
     params
   });
 };
+
+// 新增修改
+export const operate = (data) => {
+  if(data.roleId) return editRole(data)
+  return addRole(data)
+}
+
 // 新增角色
 export const addRole = (data) => {
   return request({

src/views/system/role/add.vue

@@ -3,21 +3,69 @@
     <baseTitle title="角色信息录入"></baseTitle>
     <fvForm :schema="schame" @getInstance="getInstance" :rules="rules"></fvForm>
     <baseTitle title="分配菜单"></baseTitle>
+    <fvCheckbox :options="localData.checkOptions" v-model="localData.checkList" @change="checkBoxChange" />
+    <el-input v-model="localData.filterText" placeholder="请输入关键词" style="width: 400px;" />
+    <div class="menu-assign">
+      <el-tree 
+        ref="menuTree"
+        :data="localData.menuData"
+        :filter-node-method="filterMenu"
+        :props="localData.menuTreeProps"
+        :check-strictly="localData.checkStrictly"
+        show-checkbox
+        node-key="menuId"
+        @check-change="checkChange"
+      />
+    </div>
+    <div class="oper-page-btn">
+      <el-button type="primary" @click="handleSubmit">提交</el-button>
+      <el-button type="primary" @click="handleBack">返回</el-button>
+    </div>
   </div>
 </template>
 
 <script setup lang="jsx">
 import { useTagsView } from '@/stores/tagsview.js'
+import { useAuthStore } from '@/stores/userstore.js'
 import fvRadio from '@/fvcomponents/fvRadio/index.vue'
+import { ElLoading, ElNotification } from 'element-plus';
+import { getMenuList } from '@/api/system/menuman.js'
+import { getRoleDetail, operate} from "@/api/role/role";
 
 const tagsViewStore = useTagsView()
+const authStore = useAuthStore()
 const route = useRoute()
 
 const form = ref(null)
+const menuTree = ref(null)
 const loading = ref(false)
 
+const isExpand = ref('展开')
+const isAllChose = ref('全选')
 const localData = reactive({
-
+  filterText: '',
+  menuData: [],
+  menuTreeProps: {
+    value: "menuId",
+    label: 'menuName',
+    children: 'children'
+  },
+  checkStrictly: false,
+  checkList: ['3'],
+  checkOptions: [
+    {
+      label: isExpand.value,
+      value: '1'
+    },
+    {
+      label: isAllChose.value,
+      value: '2'
+    },
+    {
+      label: '父子联动',
+      value: '3'
+    },
+  ]
 })
 
 const schame = computed(()=>{
@@ -47,19 +95,6 @@ const schame = computed(()=>{
         type: 'number'
       }
     },
-    {
-      label: '数据范围',
-      prop: 'dataScope',
-      component: markRaw(fvRadio),
-      props: {
-        options: [
-          {value:'1',label:'所有数据权限'},
-          {value:'2',label:'自定义数据权限'},
-          {value:'3',label:'本部门数据权限'},
-          {value:'4',label:'本部门及以下数据权限'}
-        ]
-      }
-    },
     {
       label: '状态',
       prop: 'state',
@@ -67,9 +102,20 @@ const schame = computed(()=>{
       props: {
         cacheKey: 'normal_disable'
       }
-    }
+    },
+    {
+      label: '是否为模版',
+      prop: 'template',
+      component: markRaw(fvRadio),
+      props: {
+        options: [
+          { label: '是', value: true },
+          { label: '否', value: false },
+        ]
+      }
+    },
   ]
-  return arr
+  return !authStore.roles.includes('superAdmin') ? arr.slice(-1) : arr
 })
 
 const rules = reactive({
@@ -82,15 +128,99 @@ const getInstance = (e) => {
   form.value = e
 }
 
-const init = () => {
-  form.value.setValues({state: '1', dataScope: '1'})
+const init = async () => {
+  form.value.setValues({state: '1', template: false})
+  const { data } = await getMenuList()
+  localData.menuData = data
 }
 
-onMounted(()=>{
-  init()
+const getInfo = async () => {
+  if(!route.query.id) return
+  const { data } = await getRoleDetail(route.query.id)
+  data.menuIds.forEach(key=>{
+    menuTree.value.setChecked(key, true, false)
+  })
+  if(route.query.isAdd) {
+    delete data.roleId
+    delete data.roleName
+    delete data.roleKey
+  }
+  form.value.setValues(data)
+}
+
+const filterMenu = (value, data) => {
+  if(!value) return true
+  return data.menuName.includes(value)
+}
+
+const checkChange = (data) => {
+  return menuTree.value.getCheckedKeys()
+}
+
+const checkBoxChange = (val) => {
+  localData.checkStrictly = val.includes('3')
+  let nodes = menuTree.value.store.nodesMap
+  if (val.includes('1')) {
+    for (const node in nodes) {
+      nodes[node].expanded = true;
+    }
+    isExpand.value = '折叠'
+  } else {
+    for (const node in nodes) {
+      nodes[node].expanded = false;
+    }
+    isExpand.value = '展开'
+  }
+  if (val.includes('2')) {
+    menuTree.value.setCheckedNodes(localData.menuData)
+    isAllChose.value = '不全选'
+  } else {
+    menuTree.value.setCheckedNodes([])
+    isAllChose.value = '全选'
+  }
+}
+
+const handleSubmit = async () => {
+  const loading = ElLoading.service({fullscreen: true})
+  const { isValidate } = await form.value.validate()
+  if(!isValidate) return Promise.reject()
+  const values = form.value.getValues()
+  values.menuIds = checkChange()
+  operate(values).then(res=>{
+    ElNotification({
+      title: route.query.isAdd ? '新增' : '编辑',
+      message: res.msg,
+      type: res.code === 1000 ? 'success' : 'error'
+    })
+    loading.close()
+    res.code === 1000 ? tagsViewStore.delViewAndGoView('/system/role') : null
+  }).finally(()=>{
+    loading.close()
+  })
+}
+
+const handleBack = () => {
+  history.back()
+}
+
+watch(localData, (val)=>{
+  menuTree.value.filter(val.filterText)
+})
+
+onMounted( async ()=>{
+  loading.value = true
+  await init()
+  if(route.query.id) {
+    await getInfo()
+  }
+  loading.value = false
 })
 </script>
 
 <style lang="scss" scoped>
-
+.menu-assign {
+  width: 400px;
+  max-height: 500px;
+  overflow: auto;
+}
 </style>

src/views/system/role/index.vue

@@ -6,8 +6,11 @@
 <script setup lang="jsx">
 import fvSelect from '@/fvcomponents/fvSelect/index.vue'
 import Tag from '@/components/Tag.vue'
-import { ElMessageBox } from 'element-plus';
+import { ElMessageBox, ElNotification } from 'element-plus';
+import { deleteRole } from "@/api/role/role";
+import { useAuthStore } from '@/stores/userstore.js'
 
+const authStore = useAuthStore()
 const router = useRouter()
 
 const shortcuts = [
@@ -87,6 +90,12 @@ const searchConfig = reactive([
 
 const tableIns = ref()
 
+const auths = {
+  edit: ['admin:role:edit'],
+  del: ['admin:role:del'],
+  add: ['admin:role:add'],
+}
+
 const tableConfig = reactive({
   columns: [
     {
@@ -119,18 +128,52 @@ const tableConfig = reactive({
     {
       prop: 'oper',
       label: '操作',
-      align: 'center',
-      currentRender: ({row, index}) => (
-        <div>
-          <el-button type="primary" link onClick={()=>handleEdit(row)}>修改</el-button>
-          <el-button type="primary" link onClick={()=>handleAssign(row)}>分配用户</el-button>
-          <el-button type="danger" link onClick={()=>handleDel(row)}>删除</el-button>
-        </div>
-      )
+      align: 'right',
+      currentRender: ({row, index}) => {
+        let btn = [{label: '修改', auth: auths.edit, func: ()=>handleEdit(row) , type: 'primary'}]
+        row.template ?
+        btn.push(
+          {
+            label: '使用模版',
+            auth: auths.edit,
+            func: ()=>handleUseTemp(row),
+            type: 'primary'
+          }
+        ) :
+        btn.push(
+          {
+            label: '分配用户',
+            auth: auths.edit,
+            func: ()=>handleAssign(row),
+            type: 'primary'
+          }
+        )
+        if(authStore.roles.includes('superAdmin')) {
+          btn.push({label: '删除', auth: auths.edit, func: ()=>handleDel(row) , type: 'danger'}) 
+        } else if(!row.template) {
+          btn.push({label: '删除', auth: auths.edit, func: ()=>handleDel(row) , type: 'danger'})
+        }
+        return (
+          <div>
+            {
+              btn.map(item=>(
+                <el-button 
+                  type={item.type} 
+                  v-perm={item.auth} 
+                  onClick={()=>item.func()}
+                  link
+                  >
+                  {item.label}
+                </el-button>
+              ))
+            }
+          </div>
+        )
+      },
     }
   ],
   api: '/admin/role',
-  btns: [{name: '新增', key: 'add', auth: ['admin:role:add'], type: 'primary'}],
+  btns: [{name: '新增', key: 'add', auth: auths.add, type: 'primary'}],
   params: {}
 })
 
@@ -170,7 +213,22 @@ const handleAdd = () => {
 }
 
 const handleEdit = (row) => {
+  router.push({
+    path: '/system/roleedit',
+    query: {
+      id: row.roleId
+    }
+  })
+}
 
+const handleUseTemp = (row) => {
+  router.push({
+    path: '/system/roleadd',
+    query: {
+      id: row.roleId,
+      isAdd: 1
+    }
+  })
 }
 
 const handleAssign = (row) => {
@@ -178,12 +236,27 @@ const handleAssign = (row) => {
 }
 
 const handleDel = (row) => {
+  if (!(row.template && authStore.roles.includes('superAdmin'))) {
+    ElNotification({
+      title: '提示',
+      message: '模版角色只能由超级管理员删除!',
+      type: 'warning'
+    })
+    return
+  }
+  
   ElMessageBox.confirm('确定删除该条数据吗?', '确定删除', {
     type: 'warning',
     confirmButtonText: '确定',
     cancelButtonText: '取消'
   }).then(async res => {
-    // const { code } = await 
+    const { code, msg } = await deleteRole(row.roleId)
+    ElNotification({
+      title: '删除',
+      message: msg,
+      type: code === 1000 ? 'success' : 'error'
+    })
+    tableIns.value.refresh()
   }).catch(()=>{})
 }