角色管理修改

src/views/system/role.vue

@@ -36,12 +36,12 @@
             </template>
         </hc-card>
     </div>
-    <hc-dialog v-model="addModal" title="新增" widths="50rem">
+    <hc-dialog v-model="addModal" :title="modalTitle" widths="50rem" :loading="addsaveLoading" @save="modalSave">
         <hc-icon name="user" style="font-size: 18px;" class="font-bold" />
         <span class="font-bold">基础信息</span>
 
         <el-divider style="margin-top: 10px;" />
-        <el-form :inline="true" :model="baseForm" label-width="auto" :rules="baseFormRules">
+        <el-form ref="formRef" :inline="true" :model="baseForm" label-width="auto" :rules="baseFormRules">
             <div class="hc-form-item">
                 <el-form-item label="角色名称:" prop="roleName">
                     <el-input v-model="baseForm.roleName" placeholder="请输入" clearable />
@@ -67,7 +67,7 @@
    <script setup>
    import { onMounted, ref, watch } from 'vue'
    import { HcDelMsg } from 'hc-vue3-ui'
-   import { getList, grantTree, remove } from '~api/system/role.js'
+   import { getList, grant, grantTree, remove } from '~api/system/role.js'
    import { arrToId, formValidate, getArrValue, getObjValue } from 'js-fast-way'
    onMounted(()=>{
       getTableData()
@@ -77,18 +77,17 @@
 
        { key: 'action', name: '操作', align:'center' },
    ]
-   const tableData = ref([
-       { key1: 'admin', key2: 'xxx', key3: '超级管理员' },
-       { key1: '13028304756', key2: 'aaa', key3: '角色' },
-   ])
+   const tableData = ref([])
 
    const addModal = ref(false)
+   const modalTitle = ref('新增')
    const addClick = ()=>{
+    modalTitle.value = '新增'
        addModal.value = true
+       baseForm.value = {}
        getRoleTreedata()
    }
-   const baseForm = ref({
-    roleName:'' })
+   const baseForm = ref({ roleName:'' })
    const baseFormRules = {
     roleName: {
         required: true,
@@ -128,8 +127,10 @@ const pageChange = ({ current, size }) => {
     getTableData()
 }
 const rowEditClick = (row)=>{
+    modalTitle.value = '编辑'
     addModal.value = true
     baseForm.value = { ...row }
+    getRoleTreedata()
 }
 const rowDelClick = ()=>{
     HcDelMsg( async ( resolve) => {
@@ -179,6 +180,34 @@ const getRoleTreedata = async () => {
     }
     
   
+}
+const addsaveLoading = ref(false)
+const formRef = ref(null)
+
+const modalSave = async ()=>{
+    let menuIds = treeRef.value.getCheckedKeys()
+    console.log(menuIds, 'menuIds')
+    const isValidate = await formValidate(formRef.value)
+    if (!isValidate) return false
+
+    addsaveLoading.value = true
+    console.log(baseForm.value, 'baseForm.value')
+    const { error, code, msg } = await grant({
+                roleName:baseForm.value.roleName,
+                roleIds:baseForm.value.id,
+                menuIds:menuIds,
+            })
+            //判断状态
+            addsaveLoading.value = false
+            if (!error && code === 200) {
+                window?.$message?.success(msg)
+                getTableData()
+            } else {
+                window.$message.error(msg ?? '操作失败')
+            }
+        
+
+  
 }
 </script>