修改组件页面

src/views/auth/role/index.vue

@@ -29,7 +29,7 @@
                     <div class="mt10 mr10" style="display: flex; justify-content: end">
                         <el-button type="primary" icon="el-icon-Select" @click="saveSystem">保存</el-button>
                     </div>
-                    <el-checkbox-group v-model="systemIds" class="md10  system" >
+                    <el-checkbox-group v-model="systemIds" class="md10 system">
                         <el-checkbox v-for="item in systemList" :label="item.name" :value="item.id" :key="item.id" />
                     </el-checkbox-group>
                 </el-tab-pane>
@@ -46,7 +46,7 @@ import Table from '@/components/table/index.vue'
 import TableHeader from '@/components/table/header/index.vue'
 import Tree from '@/components/tree/allocation.vue'
 import { functionTree } from '@/api/user-boot/function'
-import { getFunctionsByRoleIndex, updateRoleMenu } from '@/api/user-boot/roleFuction'
+import { getFunctionsByRoleIndex, updateRoleMenu, getSystemByRoleId, systemAdd } from '@/api/user-boot/roleFuction'
 import { mainHeight } from '@/utils/layout'
 import { del } from '@/api/user-boot/role'
 import { ElMessage } from 'element-plus'
@@ -163,6 +163,9 @@ const currentChange = (data: any) => {
     getFunctionsByRoleIndex({ id: data.row.id }).then((res: any) => {
         treeRef.value.treeRef.setCheckedKeys(res.data.map((item: any) => item.id))
     })
+    getSystemByRoleId({ id: data.row.id }).then((res: any) => {
+        systemIds.value = res.data.systemIds || []
+    })
 }
 
 const timeout = ref<NodeJS.Timeout>()
@@ -185,17 +188,17 @@ const checkChange = (data: any) => {
         })
 }
 const saveSystem = () => {
-    //  updateRoleMenu({
-    //     id: menuListId.value,
-    //     idList: systemIds.value
-    // })
-    //     .then(() => {
-    //         ElMessage.success('操作成功!')
-    //         treeRef.value.loading = false
-    //     })
-    //     .catch(() => {
-    //         treeRef.value.loading = false
-    //     })
+    systemAdd({
+        roleId: menuListId.value,
+        systemIds: systemIds.value
+    })
+        .then(() => {
+            ElMessage.success('操作成功!')
+            treeRef.value.loading = false
+        })
+        .catch(() => {
+            treeRef.value.loading = false
+        })
 }
 onMounted(() => {
     tableStore.index()
@@ -209,11 +212,11 @@ const addRole = () => {
 :deep(.el-tabs--border-card > .el-tabs__content) {
     padding: 0px !important;
 }
-.system{
+.system {
     width: 330px;
     height: calc(100vh - 225px);
-     border: 1px solid var(--el-border-color);
-     padding: 5px 10px;
+    border: 1px solid var(--el-border-color);
+    padding: 5px 10px;
     display: flex;
     flex-direction: column;
 }

src/views/auth/role/popupForm.vue

@@ -1,74 +1,86 @@
-<template>
-    <el-dialog class="cn-operate-dialog" width="700px" v-model.trim="dialogVisible" :title="title">
-        <el-form :inline="false" :model="form" label-width="auto" class="form-one" :rules="rules">
-            <el-form-item label="角色名称">
-                <el-input maxlength="32" show-word-limit v-model.trim="form.name" placeholder="请输入菜单名称" />
-            </el-form-item>
-            <el-form-item label="角色编码">
-                <el-input maxlength="32" show-word-limit v-model.trim="form.code" placeholder="请输入菜单名称" />
-            </el-form-item>
-            <el-form-item label="角色描述">
-                <el-input maxlength="300" show-word-limit v-model.trim="form.remark" :rows="2" type="textarea"
-                    placeholder="请输入描述" />
-            </el-form-item>
-        </el-form>
-
-        <template #footer>
-            <span class="dialog-footer">
-                <el-button @click="dialogVisible = false">取消</el-button>
-                <el-button type="primary" @click="submit">确认</el-button>
-            </span>
-        </template>
-    </el-dialog>
-</template>
-<script lang="ts" setup>
-import { ref, inject } from 'vue'
-import { reactive } from 'vue'
-import TableStore from '@/utils/tableStore'
-import { ElMessage } from 'element-plus'
-import { add, update } from '@/api/user-boot/role'
-import { useAdminInfo } from '@/stores/adminInfo'
-
-const adminInfo = useAdminInfo()
-const tableStore = inject('tableStore') as TableStore
-// do not use same name with ref
-const form = reactive({
-    code: '',
-    name: '',
-    remark: '',
-    id: '',
-    type: 0
-})
-const rules = {
-    name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
-    code: [{ required: true, message: '角色编码不能为空', trigger: 'blur' }]
-}
-const dialogVisible = ref(false)
-const title = ref('新增菜单')
-const open = (text: string, data?: anyObj) => {
-    title.value = text
-    dialogVisible.value = true
-    if (data) {
-        for (let key in form) {
-            form[key] = data[key]
-        }
-    } else {
-        for (let key in form) {
-            form[key] = ''
-        }
-    }
-}
-const submit = async () => {
-    if (form.id) {
-        await update(form)
-    } else {
-        form.type = adminInfo.$state.userType + 1
-        await add(form)
-    }
-    ElMessage.success('保存成功')
-    tableStore.index()
-    dialogVisible.value = false
-}
-
-defineExpose({ open })
-</script>
+<template>
+    <el-dialog class="cn-operate-dialog" width="700px" v-model.trim="dialogVisible" :title="title">
+        <el-form :inline="false" ref="formRef" :model="form" label-width="auto" class="form-one" :rules="rules">
+            <el-form-item label="角色名称" prop="name">
+                <el-input maxlength="32" show-word-limit v-model.trim="form.name" placeholder="请输入菜单名称" />
+            </el-form-item>
+            <el-form-item label="角色编码" prop="code">
+                <el-input maxlength="32" show-word-limit v-model.trim="form.code" placeholder="请输入菜单名称" />
+            </el-form-item>
+            <el-form-item label="角色描述">
+                <el-input
+                    maxlength="300"
+                    show-word-limit
+                    v-model.trim="form.remark"
+                    :rows="2"
+                    type="textarea"
+                    placeholder="请输入描述"
+                />
+            </el-form-item>
+        </el-form>
+
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="dialogVisible = false">取消</el-button>
+                <el-button type="primary" @click="submit">确认</el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+<script lang="ts" setup>
+import { ref, inject } from 'vue'
+import { reactive } from 'vue'
+import TableStore from '@/utils/tableStore'
+import { ElMessage } from 'element-plus'
+import { add, update } from '@/api/user-boot/role'
+import { useAdminInfo } from '@/stores/adminInfo'
+
+const adminInfo = useAdminInfo()
+const tableStore = inject('tableStore') as TableStore
+// do not use same name with ref
+const form = reactive({
+    code: '',
+    name: '',
+    remark: '',
+    id: '',
+    type: 0
+})
+const rules = {
+    name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
+    code: [{ required: true, message: '角色编码不能为空', trigger: 'blur' }]
+}
+const dialogVisible = ref(false)
+const title = ref('新增菜单')
+const formRef = ref()
+const open = (text: string, data?: anyObj) => {
+    formRef.value?.resetFields()
+    title.value = text
+    dialogVisible.value = true
+    if (data) {
+        for (let key in form) {
+            form[key] = data[key]
+        }
+    } else {
+        for (let key in form) {
+            form[key] = ''
+        }
+    }
+}
+const submit = async () => {
+    formRef.value.validate(async valid => {
+        if (valid) {
+            if (form.id) {
+                await update(form)
+            } else {
+                form.type = adminInfo.$state.userType + 1
+                await add(form)
+            }
+            ElMessage.success('保存成功')
+            tableStore.index()
+            dialogVisible.value = false
+        }
+    })
+}
+
+defineExpose({ open })
+</script>