优化代码

src/views/system/role.vue

@@ -18,28 +18,24 @@
                     <hc-search-input v-model="searchForm.roleName" color="#151921" text="搜索" @search="searchClick" />
                 </div>
             </template>
-            <hc-table
-                class="role-page-table"
-                is-check
-                :column="tableColumn"
-                :datas="tableData"
-
-                @selection-change="tableSelectionChange"
-            >
+            <hc-table class="role-page-table" is-check :column="tableColumn" :datas="tableData" @selection-change="tableSelectionChange">
                 <template #action="{ row }">
-                    <el-link type="success" @click="rowEditClick(row)">   <hc-icon name="edit" />编辑</el-link>
-                    <el-link type="success" @click="rowDelClick(row)">  <hc-icon name="delete-bin-2" />删除</el-link>
+                    <el-link type="success" @click="rowEditClick(row)">
+                        <hc-icon name="edit" />编辑
+                    </el-link>
+                    <el-link type="success" @click="rowDelClick(row)">
+                        <hc-icon name="delete-bin-2" />删除
+                    </el-link>
                 </template>
             </hc-table>
             <template #action>
-                <HcPages :pages="searchForm" @change="pageChange" />
+                <hc-pages :pages="searchForm" @change="pageChange" />
             </template>
         </hc-card>
     </div>
     <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 ref="formRef" :inline="true" :model="baseForm" label-width="auto" :rules="baseFormRules">
             <div class="hc-form-item">
@@ -51,52 +47,43 @@
         <hc-icon name="user-settings" style="font-size: 18px;" class="font-bold" />
         <span class="font-bold">权限设置</span>
         <el-divider style="margin-top: 10px;" />
-        <el-tree
-            ref="treeRef"
-            style="max-width: 600px"
-            :data="roleTreedata"
-            show-checkbox
-           
-            node-key="id"
-            highlight-current
-            :props="defaultProps"
-            :default-checked-keys="defaultCheckedKeys"
-        />
+        <el-tree ref="treeRef" style="max-width: 600px" :data="roleTreedata" show-checkbox node-key="id" highlight-current :props="defaultProps" :default-checked-keys="defaultCheckedKeys" />
     </hc-dialog>
 </template>
 
-   <script setup>
-   import { onMounted, ref, watch } from 'vue'
-   import { HcDelMsg } from 'hc-vue3-ui'
-   import { getList, getRole, grant, grantTree, remove } from '~api/system/role.js'
-   import { arrToId, formValidate, getArrValue, getObjValue } from 'js-fast-way'
-   import menuApi from '~api/system/menu'
-   onMounted(()=>{
-      getTableData()
-  })
-   const tableColumn = [
-       { key: 'roleName', name: '角色名称', align:'center' },
-
-       { key: 'action', name: '操作', align:'center' },
-   ]
-   const tableData = ref([])
+<script setup>
+import { onMounted, ref } from 'vue'
+import { HcDelMsg } from 'hc-vue3-ui'
+import { getList, getRole, grant, remove } from '~api/system/role.js'
+import { arrToId, formValidate, getArrValue } from 'js-fast-way'
+import menuApi from '~api/system/menu'
 
-   const addModal = ref(false)
-   const modalTitle = ref('新增')
-   const addClick = ()=>{
-    modalTitle.value = '新增'
-       addModal.value = true
-       baseForm.value = {}
-       defaultCheckedKeys.value = []
-       getRoleTreedata()
-   }
-   const baseForm = ref({ roleName:'' })
-   const baseFormRules = {
-    roleName: {
-        required: true,
-        trigger: 'blur',
-        message: '请输入角色名称',
-    },
+onMounted(()=>{
+    getTableData()
+})
+
+const tableColumn = [
+   { key: 'roleName', name: '角色名称', align:'center' },
+   { key: 'action', name: '操作', align:'center' },
+]
+const tableData = ref([])
+
+const addModal = ref(false)
+const modalTitle = ref('新增')
+const addClick = ()=>{
+modalTitle.value = '新增'
+   addModal.value = true
+   baseForm.value = {}
+   defaultCheckedKeys.value = []
+   getRoleTreedata()
+}
+const baseForm = ref({ roleName:'' })
+const baseFormRules = {
+roleName: {
+    required: true,
+    trigger: 'blur',
+    message: '请输入角色名称',
+},
 }
 const tableCheckedKeys = ref([])
  //多选事件
@@ -118,7 +105,7 @@ const getTableData = async () => {
     } else {
         tableData.value = []
     }
-    
+
 }
 const searchClick = () => {
     getTableData()
@@ -134,24 +121,20 @@ const rowEditClick = (row)=>{
     addModal.value = true
     baseForm.value = { ...row }
     getRoleDetail(row.id)
-   
     getRoleTreedata()
 }
 const getRoleDetail = async (id)=>{
-    const { error, code, data } = await getRole(
-       id,
-    )
+    const { error, code, data } = await getRole(id)
     if (!error && code === 200) {
         defaultCheckedKeys.value = data['menu']
     } else {
         defaultCheckedKeys.value = []
     }
-    
 }
 const rowDelClick = (row)=>{
     HcDelMsg( async ( resolve) => {
-            await removeRole(row.id)
-            resolve() //关闭弹窗的回调
+        await removeRole(row.id)
+        resolve() //关闭弹窗的回调
     })
 }
 const batchDelClick = ()=>{
@@ -160,12 +143,9 @@ const batchDelClick = ()=>{
         await removeRole(ids)
         resolve() //关闭弹窗的回调
     })
-
 }
 const removeRole = async (ids) => {
-    const { error, code, msg } = await remove(
-        ids,
-    )
+    const { error, code, msg } = await remove(ids)
     if (!error && code === 200) {
         window?.$message?.success('删除成功')
        getTableData()
@@ -173,14 +153,7 @@ const removeRole = async (ids) => {
         window.$message.error(msg ?? '操作失败')
     }
 }
-
-
-  const treeRef = ref(null)
-
-
-
-
-
+const treeRef = ref(null)
 const defaultProps = {
   children: 'children',
   label: 'title',
@@ -194,8 +167,6 @@ const getRoleTreedata = async () => {
     } else {
       roleTreedata.value = []
     }
-    
-  
 }
 const addsaveLoading = ref(false)
 const formRef = ref(null)
@@ -206,20 +177,19 @@ const modalSave = async ()=>{
     if (!isValidate) return false
     addsaveLoading.value = true
     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)
-                addModal.value = false
-                getTableData()
-            } else {
-                window.$message.error(msg ?? '操作失败')
-                
-            }
+        roleName:baseForm.value.roleName,
+        roleIds:[baseForm.value.id],
+        menuIds:menuIds,
+    })
+    //判断状态
+    addsaveLoading.value = false
+    if (!error && code === 200) {
+        window?.$message?.success(msg)
+        addModal.value = false
+        getTableData()
+    } else {
+        window.$message.error(msg ?? '操作失败')
+    }
 }
 </script>