邓洁 : 修改页面细节

src/views/system/menu/index.vue

@@ -23,7 +23,7 @@
               :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" row-key="menuId" :lazy="true"
               v-loading="loading" v-tabh>
       <el-table-column prop="menuName" label="菜单名称"/>
-      <el-table-column prop="icon" label="图标">
+      <el-table-column prop="icon" label="图标" width="60px">
         <template #default="scope">
           <!--          <el-icon>-->
           <!--            <component :is="scope.row.icon" />-->
@@ -31,10 +31,10 @@
           <svg-icon :name="scope.row.icon"/>
         </template>
       </el-table-column>
-      <el-table-column prop="orderNum" label="排序"/>
+      <el-table-column prop="orderNum" label="排序" width="60px"/>
       <el-table-column prop="perms" label="权限标识"/>
       <el-table-column prop="component" label="组件路径"/>
-      <el-table-column prop="state" label="状态">
+      <el-table-column prop="state" label="状态" width="80px">
         <template #default="scope">
           <tag dict-type="normal_disable" :value="scope.row.state"/>
         </template>
@@ -45,7 +45,7 @@
           <el-button type="text" size="mini" @click="handleAdd(scope.row)">新增</el-button>
           <el-button type="text" size="mini" @click="handleEdit(scope.row.menuId)">修改</el-button>
           <el-button type="text" size="mini" @click="handleAssignRoles(scope.row)">分配角色</el-button>
-          <el-button type="text" size="mini" @click="handleDel(scope.row.menuId, scope.row.menuName)">删除</el-button>
+          <popover-delete :name="scope.row.menuName" :type="'菜单'" @delete="handleDel(scope.row.menuId)"/>
         </template>
       </el-table-column>
     </el-table>
@@ -67,7 +67,7 @@
         </el-form-item>
         <el-form-item label="菜单图标">
           <template #label>
-            <div  style="display: flex;align-items: center">
+            <div style="display: flex;align-items: center">
               <span style="margin-right: 5px">菜单图标</span>
               <svg-icon v-if="form.icon" :name="form.icon" :class-name="'middle-icon'"/>
             </div>
@@ -157,12 +157,12 @@
         </el-row>
       </el-form>
       <template #footer>
-        <span>
-          <el-button @click="handleCancel">取消</el-button>
-          <el-button type="primary" @click="handleSubmit(formInstance)">
-            确定
-          </el-button>
-        </span>
+        <!--                      <span>-->
+        <el-button @click="handleCancel">取消</el-button>
+        <el-button type="primary" @click="handleSubmit(formInstance)">
+          确定
+        </el-button>
+        <!--                      </span>-->
       </template>
     </el-dialog>
   </div>
@@ -176,6 +176,8 @@ import {useCacheStore} from '@/stores/cache.js'
 import Tag from '@/components/Tag.vue'
 import SvgIcon from '@/components/svgIcon/index.vue'
 import IconSelect from '@/components/iconSelect/index.vue'
+import PopoverDelete from "@/components/PopoverDelete.vue";
+
 const cacheStore = useCacheStore()
 const queryParams = reactive({
   menuName: undefined,
@@ -186,6 +188,7 @@ const loading = ref(true)
 const list = ref([])
 const tableTree = ref()
 const isExpand = ref(true)
+const deleteVisible = ref(false)
 const isVisited = ref(false)
 const title = ref('')
 const form = ref({
@@ -212,9 +215,9 @@ const formRules = ref({
 })
 const formInstance = ref()
 const menuOpt = ref([])
-const router =useRouter()
-const getSelectIcon=(val)=>{
-  form.value.icon=val
+const router = useRouter()
+const getSelectIcon = (val) => {
+  form.value.icon = val
 }
 
 const getList = async () => {
@@ -249,7 +252,7 @@ const restFrom = () => {
 const handleAdd = async (row) => {
   title.value = '新增菜单'
   restFrom()
-  if(row.menuId!==undefined){
+  if (row.menuId !== undefined) {
     await getMenuInfo(row.menuId).then(res => {
       form.value.parentId = res.data.parentId
     })
@@ -262,7 +265,7 @@ const handleAdd = async (row) => {
     }]
   })
   isVisited.value = true
-  nextTick(()=>{
+  nextTick(() => {
     // 清空校验
     formInstance.value.clearValidate()
   })
@@ -282,7 +285,7 @@ const expandChange = (data, isExpansion) => {
   }
 }
 //分配角色
-const handleAssignRoles=(row)=>{
+const handleAssignRoles = (row) => {
   router.push('/menu-auth/role/' + row.menuId)
 }
 const handleEdit = async (menuId) => {
@@ -299,26 +302,21 @@ const handleEdit = async (menuId) => {
     }]
   })
   isVisited.value = true
-  nextTick(()=>{
+  nextTick(() => {
     // 清空校验
     formInstance.value.clearValidate()
   })
 }
 
-const handleDel = (menuId, menuName) => {
-  ElMessageBox.confirm(`确认删除名称为${menuName}的菜单吗?`, '系统提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning'
-  }).then(() => {
-    delMenu(menuId).then(res => {
-      if (res.code === 1000) {
-        ElMessage.success(res.msg)
-        getList()
-      } else {
-        ElMessage.error(res.msg)
-      }
-    })
+const handleDel = (menuId) => {
+  delMenu(menuId).then(res => {
+    if (res.code === 1000) {
+      ElMessage.success(res.msg)
+      getList()
+      deleteVisible.value = false
+    } else {
+      ElMessage.error(res.msg)
+    }
   })
 }