优化系统设置、账户管理页面、菜单管理页面

src/views/system/menu.vue

@@ -1,99 +1,85 @@
 <template>
-        <HcCard actionSize="lg" scrollbar>
-            <template #header>
-                <div class="w-64 ml-3">
-                        <el-input v-model="searchForm.name" size="large" placeholder="请输入菜单名称搜索" clearable />
-                    </div>
-                <div class="ml-3">
-                        <el-button type="primary" @click="searchClick"  size="large">
-                            <HcIcon name="search-2"/>
-                            <span>搜索</span>
-                        </el-button>
-                </div>
+    <HcCard>
+        <template #header>
+            <div class="w-64">
+                <el-input v-model="searchForm.name" size="large" placeholder="请输入菜单名称搜索" clearable/>
+            </div>
+            <div class="ml-3">
+                <el-button type="primary" @click="searchClick" size="large">
+                    <HcIcon name="search-2"/>
+                    <span>搜索</span>
+                </el-button>
+            </div>
+        </template>
+        <template #extra>
+            <el-button type="primary" @click="addClick" size="large">
+                <HcIcon name="add"/>
+                <span>新增</span>
+            </el-button>
+            <el-button type="danger" @click="cancelClick" size="large" :disabled="tableCheckedKeys.length <= 0">
+                <HcIcon name="delete-bin-2"/>
+                <span>删除</span>
+            </el-button>
+        </template>
+        <HcTable :column="tableColumn" :datas="tableData" isCheck @selection-change="tableSelectionChange">
+            <template #name="{row}">{{ row['name'] }}</template>
+            <template #text="{row}">{{ row['text'] }}</template>
+            <template #color="{row}">{{ row['color'] }}</template>
+            <template #action="{row, index}">
+                <el-button size="small" type="primary" @click="eidtModal">编辑</el-button>
+                <el-button size="small" type="primary" @click="eidtModal">新增子项</el-button>
             </template>
-            <template #extra>
-                <div class="ml-2">
-                        <el-button type="primary" @click="addClick"  size="large">
-                            <HcIcon name="add"/>
-                            <span>新增</span>
-                        </el-button>
-                </div>
-                <div class="ml-2">
-                        <el-button type="danger" @click="cancelClick"  size="large" :disabled="tableCheckedKeys.length <= 0">
-                            <HcIcon name="delete-bin-2"/>
-                            <span>删除</span>
-                        </el-button>
-                </div>
-            </template>
-                <HcTable :column="tableColumn" :datas="tableData" isCheck @selection-change="tableSelectionChange" >
-                    <template #name="{row}">{{ row['name'] }}</template>
-                    <template #text="{row}">{{ row['text'] }}</template>
-                    <template #color="{row}">{{ row['color'] }}</template>
-                    <template #action="{row, index}">
-                        <el-button size="small" type="primary" @click="eidtModal">编辑</el-button>
-                        <el-button size="small" type="primary" @click="eidtModal">新增子项</el-button>
-                    </template>
-                </HcTable>
-
-            <template #action>
-                <HcPages :pages="searchForm" @change="pageChange"></HcPages>
-            </template>
-            <HcDialog bgColor="#ffffff" isToBody :show="addModal" :title="modalTitle+'菜单'" @close="addModalClose"  widths="80rem">
-                <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="left" label-width="auto"
-                             size="large">
-                        <el-row :gutter="20">
-                            <el-col :span="12">
-                                <el-form-item label="菜单名称:" prop="name">
-                                    <el-input v-model="formModel.name" />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="12">
-                                <el-form-item label="菜单类型:" prop="type">
-                                    <el-radio-group v-model="formModel.type">
-                                        <el-radio :label="3">菜单</el-radio>
-                                        <el-radio :label="6">按钮</el-radio>
-                                    </el-radio-group>
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="12">
-                                <el-form-item label="路由地址:" prop="location">
-                                    <el-input v-model="formModel.idNumber"  placeholder=""/>
-                                </el-form-item>
-                            </el-col>
-                      
-                            <el-col :span="12">
-                                <el-form-item label="上级菜单:">
-                                        <el-select v-model="formModel.top" class="block" placeholder="请选择" size="large" >
-                                            <el-option
-                                            v-for="item in topMenuoptions"
-                                            :key="item.value"
-                                            :label="item.label"
-                                            :value="item.value"
-                                            />
-                                        </el-select>
-
-
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="12">
-                                <el-form-item label="菜单编号:">
-                                    <el-input v-model="formModel.deptId"  placeholder=""/>
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="12">
-                                <el-form-item label="菜单图标:">
-                                    <el-input v-model="formModel.deptId"  placeholder=""/>
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="12">
-                                <el-form-item label="排序:">
-                                    <el-input v-model="formModel.deptId"  placeholder=""/>
-                                </el-form-item>
-                            </el-col>
-                        </el-row>
-                 </el-form>
-
-
+        </HcTable>
+        <template #action>
+            <HcPages :pages="searchForm" @change="pageChange"></HcPages>
+        </template>
+
+        <!--菜单新增编辑-->
+        <HcDialog bgColor="#ffffff" isToBody :show="addModal" :title="modalTitle + '菜单'" @close="addModalClose" widths="70rem">
+            <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="left" label-width="auto" size="large">
+                <el-row :gutter="20">
+                    <el-col :span="12">
+                        <el-form-item label="菜单名称:" prop="name">
+                            <el-input v-model="formModel.name"/>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="路由地址:" prop="location">
+                            <el-input v-model="formModel.idNumber" placeholder=""/>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="上级菜单:">
+                            <el-select v-model="formModel.top" class="block" placeholder="请选择" size="large">
+                                <el-option v-for="item in topMenuoptions" :key="item.value" :label="item.label" :value="item.value"/>
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="菜单编号:">
+                            <el-input v-model="formModel.deptId" placeholder=""/>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="菜单图标:">
+                            <el-input v-model="formModel.deptId" placeholder=""/>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="排序:">
+                            <el-input v-model="formModel.deptId" placeholder=""/>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="菜单类型:" prop="type">
+                            <el-radio-group v-model="formModel.type">
+                                <el-radio :label="3">菜单</el-radio>
+                                <el-radio :label="6">按钮</el-radio>
+                            </el-radio-group>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+            </el-form>
             <template #footer>
                 <div class="dialog-footer">
                     <el-button size="large" @click="addModal = false">
@@ -107,19 +93,14 @@
                 </div>
             </template>
         </HcDialog>
-         </HcCard>
-
-
-
-
+    </HcCard>
 </template>
 
 <script setup>
 import {ref, watch} from "vue";
-import {useAppStore} from "~src/store";
 
 const searchForm = ref({
- name:'',
+    name: '',
     current: 1, size: 20, total: 0
 })
 //分页被点击
@@ -127,7 +108,7 @@ const pageChange = ({current, size}) => {
     searchForm.value.current = current
     searchForm.value.size = size
 }
-const searchClick=()=>{
+const searchClick = () => {
 
 }
 const tableColumn = [
@@ -139,7 +120,7 @@ const tableColumn = [
     {key: 'text', name: '是否显示按钮'},
     {key: 'text', name: '排序'},
     {key: 'text', name: '上级菜单'},
-    {key: 'action', name: '操作', width: 200}
+    {key: 'action', name: '操作', width: 160}
 
 ]
 const tableData = ref([
@@ -150,22 +131,22 @@ const tableData = ref([
 const tableCheckedKeys = ref([]);
 const tableSelectionChange = (rows) => {
     tableCheckedKeys.value = rows
-    if(tableCheckedKeys.value.length>1){
+    if (tableCheckedKeys.value.length > 1) {
         window.$message.warning('只能选择一条数据')
     }
 }
-const modalTitle=ref('新增')
-const addModal=ref(false)
+const modalTitle = ref('新增')
+const addModal = ref(false)
 //弹窗关闭
 const addModalClose = () => {
     console.log('弹窗关闭')
-   addModal.value = false
+    addModal.value = false
 }
-const addClick=()=>{
+const addClick = () => {
     addModal.value = true
-    modalTitle.value='新增'
+    modalTitle.value = '新增'
 }
-const cancelClick=()=>{
+const cancelClick = () => {
     window?.$messageBox?.alert('您确定要删除该菜单信息吗? 一旦注销数据将彻底清除，请谨慎操作？', '删除提醒', {
         showCancelButton: true,
         confirmButtonText: '确认注销',
@@ -178,16 +159,16 @@ const cancelClick=()=>{
         }
     })
 }
-const sureSignUserLoading=ref(false)
-const sureSignUserClick=()=>{
+const sureSignUserLoading = ref(false)
+const sureSignUserClick = () => {
 
 }
-const eidtModal=()=>{
-    modalTitle.value='编辑'
-     addModal.value = true
+const eidtModal = () => {
+    modalTitle.value = '编辑'
+    addModal.value = true
 }
-const formRef=ref(null)
-const formModel=ref({})
+const formRef = ref(null)
+const formModel = ref({})
 const formRules = {
     name: {
         required: true,
@@ -205,13 +186,9 @@ const formRules = {
         message: "请选择类型"
     }
 }
-const topMenuoptions=ref([])
+const topMenuoptions = ref([])
 </script>
 
 <style lang="scss" scoped>
 
 </style>
-
-<style lang="scss">
-
-</style>

src/views/system/user.vue

@@ -17,18 +17,14 @@
             </div>
         </template>
         <template #extra>
-            <div class="ml-2">
-                <el-button type="primary" @click="addClick" size="large">
-                    <HcIcon name="add"/>
-                    <span>创建账户</span>
-                </el-button>
-            </div>
-            <div class="ml-2">
-                <el-button type="danger" @click="cancelClick" size="large" :disabled="tableCheckedKeys.length <= 0">
-                    <HcIcon name="delete-bin-2"/>
-                    <span>注销账户</span>
-                </el-button>
-            </div>
+            <el-button type="primary" @click="addClick" size="large">
+                <HcIcon name="add"/>
+                <span>创建账户</span>
+            </el-button>
+            <el-button type="danger" @click="cancelClick" size="large" :disabled="tableCheckedKeys.length <= 0">
+                <HcIcon name="delete-bin-2"/>
+                <span>注销账户</span>
+            </el-button>
         </template>
         <HcTable :column="tableColumn" :datas="tableData" isCheck @selection-change="tableSelectionChange">
             <template #name="{row}">{{ row['name'] }}</template>