角色页面中增加了新增与删除角色时调用后端的过程；对显示效果进行了微调

frontend/src/views/authority/role/components/roleUnit.vue

@@ -3,13 +3,13 @@
   <el-dialog :model-value="dialogVisible" :title="title" v-bind="dialogSmall" @close="handleCancel" width="500" draggable>
     <div>
         <el-form :model="data">
-        <el-form-item label="角色类型名称" :label-width="100">
-          <el-input v-model="data.rolename" placeholder="请输入类型名称" autocomplete="off" />
+        <el-form-item label="名称" :label-width="100">
+          <el-input v-model="data.rolename" placeholder="请输入名称" autocomplete="off" />
         </el-form-item>
-        <el-form-item label="角色类型编码" :label-width="100">
-          <el-input v-model="data.id" placeholder="请输入角色类型编码" autocomplete="off" />
+        <el-form-item label="编码" :label-width="100">
+          <el-input v-model="data.id" placeholder="请输入编码" autocomplete="off" />
         </el-form-item>
-        <el-form-item label="角色类型状态" :label-width="100">
+        <el-form-item label="状态" :label-width="100">
           <el-switch
             v-model=value
             inline-prompt
@@ -18,15 +18,15 @@
             inactive-text="禁用"
           />
         </el-form-item>
-        <el-form-item label="角色类型备注" :label-width="100">
-          <el-input v-model="data.describe" placeholder="请输入备注" autocomplete="off" />
+        <el-form-item label="备注" :label-width="100">
+          <el-input v-model="data.describe" :rows="2" type="textarea" placeholder="请输入备注" autocomplete="off" />
         </el-form-item>
       </el-form>
       </div>
     <template #footer>
       <div class="dialog-footer">
         <el-button @click="handleCancel">取消</el-button>
-        <el-button type="primary" @click="handleCancel">
+        <el-button type="primary" @click="handleOK">
           保存
         </el-button>
       </div>
@@ -38,8 +38,11 @@
   <script lang="ts" setup>
   import { ref,computed  } from 'vue'
   import {dialogSmall} from '@/utils/elementBind'
+  import {
+    addRole,
+  } from '@/api/role/role'
 
-  const {dialogVisible,title,data}  = defineProps<{
+  const {dialogVisible,title,data,updataList}  = defineProps<{
     dialogVisible:boolean;
     title:string;
     data:{
@@ -48,10 +51,15 @@
       status:number;
       describe:string;
     }
+    updataList:Function
   }>();
 
   const value = computed({
-    get: () => data.status === 1,
+    get: () => { 
+      if(title === '新增角色')
+        return true
+      data.status === 1
+    },
     set: (value: boolean) => data.status = value ? 1 : 0
   })
   
@@ -63,4 +71,14 @@
     emit('update:visible',false)
   }
   
+  const handleOK = () => {
+    addRole(data).then(res => {
+      if(res.code === "200")
+        ElMessage.success(res.message)
+
+        updataList()
+    })
+    emit('update:visible',false)
+  }
+  
   </script>