联调

src/views/Basic/Role/RoleDataPermissionForm.vue

@@ -15,36 +15,38 @@
       label="权限范围"
       style="display: flex"
     >
-      <template #header>
-        全选/全不选:
-        <el-switch
-          v-model="treeNodeAll"
-          active-text="是"
-          inactive-text="否"
-          inline-prompt
-          @change="handleCheckedTreeNodeAll()"
+      <el-card class="card" shadow="never">
+        <template #header>
+          全选/全不选:
+          <el-switch
+            v-model="treeNodeAll"
+            active-text="是"
+            inactive-text="否"
+            inline-prompt
+            @change="handleCheckedTreeNodeAll()"
+          />
+          全部展开/折叠:
+          <el-switch
+            v-model="deptExpand"
+            active-text="展开"
+            inactive-text="折叠"
+            inline-prompt
+            @change="handleCheckedTreeExpand"
+          />
+          父子联动(选中父节点，自动选择子节点):
+          <el-switch v-model="checkStrictly" active-text="是" inactive-text="否" inline-prompt />
+        </template>
+        <el-tree
+          ref="treeRef"
+          :check-strictly="!checkStrictly"
+          :data="deptOptions"
+          :props="defaultProps"
+          default-expand-all
+          empty-text="加载中，请稍后"
+          node-key="id"
+          show-checkbox
         />
-        全部展开/折叠:
-        <el-switch
-          v-model="deptExpand"
-          active-text="展开"
-          inactive-text="折叠"
-          inline-prompt
-          @change="handleCheckedTreeExpand"
-        />
-        父子联动(选中父节点，自动选择子节点):
-        <el-switch v-model="checkStrictly" active-text="是" inactive-text="否" inline-prompt />
-      </template>
-      <el-tree
-        ref="treeRef"
-        :check-strictly="!checkStrictly"
-        :data="deptOptions"
-        :props="defaultProps"
-        default-expand-all
-        empty-text="加载中，请稍后"
-        node-key="id"
-        show-checkbox
-      />
+      </el-card>
     </el-form-item>
     <el-form-item label-width="0">
       <el-button :disabled="formLoading" type="primary" @click="submitForm">保存权限</el-button>
@@ -52,15 +54,31 @@
   </el-form>
 </template>
 <script lang="ts" name="RoleDataPermissionForm" setup>
-// import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { defaultProps, handleTree } from '@/utils/tree'
 import { SystemDataScopeEnum } from '@/utils/constants'
 
+import * as DeptApi from '@/api/system/dept'
+import * as PermissionApi from '@/api/system/permission'
+import * as RoleApi from '@/api/system/role'
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
+const props = defineProps({
+  roleId: {
+    type: Number
+  }
+})
+
+watch(
+  () => props.roleId,
+  (newValue) => {
+    getRoleInfo(newValue)
+  }
+)
+
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const formData = reactive({
+const formData = ref({
   id: 0,
   name: '',
   dataScope: undefined,
@@ -82,12 +100,24 @@ const dataScopeOptions = [
   { label: '仅本人数据权限', value: 5 }
 ]
 
+async function getRoleInfo(id) {
+  formData.value = await RoleApi.getRole(id)
+}
+
 /** 提交表单 */
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 const submitForm = async () => {
   formLoading.value = true
   try {
-    // await PermissionApi.assignRoleDataScope(data)
+    const data = {
+      roleId: formData.value.id,
+      dataScope: formData.value.dataScope,
+      dataScopeDeptIds:
+        formData.value.dataScope !== SystemDataScopeEnum.DEPT_CUSTOM
+          ? []
+          : treeRef.value.getCheckedKeys(false)
+    }
+    await PermissionApi.assignRoleDataScope(data)
     message.success(t('common.updateSuccess'))
     // 发送操作成功的事件
     emit('success')
@@ -112,56 +142,12 @@ const handleCheckedTreeExpand = () => {
   }
 }
 
-deptOptions.value = handleTree([
-  {
-    id: 100,
-    name: '芋道源码',
-    parentId: 0
-  },
-  {
-    id: 101,
-    name: '深圳总公司',
-    parentId: 100
-  },
-  {
-    id: 103,
-    name: '研发部门',
-    parentId: 101
-  },
-  {
-    id: 108,
-    name: '市场部门',
-    parentId: 102
-  },
-  {
-    id: 102,
-    name: '长沙分公司',
-    parentId: 100
-  },
-  {
-    id: 104,
-    name: '市场部门',
-    parentId: 101
-  },
-  {
-    id: 109,
-    name: '财务部门',
-    parentId: 102
-  },
-  {
-    id: 105,
-    name: '测试部门',
-    parentId: 101
-  },
-  {
-    id: 106,
-    name: '财务部门',
-    parentId: 101
-  },
-  {
-    id: 107,
-    name: '运维部门',
-    parentId: 101
-  }
-])
+async function init() {
+  getRoleInfo(props.roleId)
+  deptOptions.value = handleTree(await DeptApi.getSimpleDeptList())
+}
+
+onMounted(() => {
+  init()
+})
 </script>