项目资料收集

src/views/system/menu.vue

@@ -4,27 +4,25 @@
         <hc-card :scrollbar="false" action-size="lg">
             <template #header>
                 <el-button color="#20C98B" type="primary" @click="addMenu">
-                    <hc-icon name="add" class="text-white" />
+                    <hc-icon class="text-white" name="add" />
                     <span class="text-white">新增</span>
                 </el-button>
-
-                <el-button color="#FF6C6C" :disabled="tableCheckedKeys.length === 0" @click="rowDelClick">
-                    <hc-icon name="delete-bin-2" class="text-white" />
+                <el-button :disabled="tableCheckedKeys.length === 0" color="#FF6C6C" @click="rowDelClick">
+                    <hc-icon class="text-white" name="delete-bin-2" />
                     <span class="text-white">删除</span>
                 </el-button>
             </template>
             <template #extra>
-                <el-input v-model="searchForm.queryValue" placeholder="请输入菜单名称搜索" clearable />
-                <el-button color=" #4b4b4b" type="primary" class="ml-2">
-                    <hc-icon name="search" class="text-white" />
+                <el-input v-model="searchForm.queryValue" clearable placeholder="请输入菜单名称搜索" />
+                <el-button class="ml-2" color=" #4b4b4b" type="primary">
+                    <hc-icon class="text-white" name="search" />
                     <span class="text-white">搜索</span>
                 </el-button>
             </template>
             <hc-table
-                ui="no-border" has-children="hasChildren1" :is-index="true"
-                :column="tableColumn" :datas="tableData"
-                :index-style="{ fixed: true, width: 60 }" is-check border :check-style="{ fixed: true, width: 29 }"
-                class="menu-page-table"
+                :check-style="{ fixed: true, width: 29 }" :column="tableColumn" :datas="tableData"
+                :index-style="{ fixed: true, width: 60 }" :is-index="true" ui="no-border"
+                class="menu-page-table" has-children="hasChildren1" is-check border
                 @selection-change="tableSelectionChange"
             >
                 <template #name="{ row }">
@@ -36,21 +34,24 @@
                     <span v-if="row.category === 2">按钮</span>
                 </template>
                 <template #action="{ row }">
-                    <el-link type="success" @click="eidtMenu(row)">   <hc-icon name="edit" />编辑</el-link>
-                    <el-link type="success" @click="addChildren(row)">   <hc-icon name="edit" />新增子项</el-link>
-                    <el-link type="success" @click="copyChildren(row)">  <hc-icon name="file-copy" />复制</el-link>
+                    <el-link type="success" @click="eidtMenu(row)">
+                        <hc-icon name="edit" /> 编辑
+                    </el-link>
+                    <el-link type="success" @click="addChildren(row)">
+                        <hc-icon name="edit" /> 新增子项
+                    </el-link>
+                    <el-link type="success" @click="copyChildren(row)">
+                        <hc-icon name="file-copy" /> 复制
+                    </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="menuDataModal" bg-color="#ffffff" is-to-body widths="60rem"
-        :title="isCopy ? '复制菜单数据' : formModel.id ? '编辑菜单' : '修改菜单'" @save="menuDataModalSave" @close="menuDataModalClose"
-    >
+    <hc-dialog v-model="menuDataModal" :title="isCopy ? '复制菜单数据' : formModel.id ? '编辑菜单' : '修改菜单'" widths="60rem" @close="menuDataModalClose" @save="menuDataModalSave">
         <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="left" label-width="auto" size="large">
             <el-row :gutter="20">
                 <el-col :span="12">
@@ -79,16 +80,12 @@
                         </el-input>
                     </el-form-item>
                     <el-form-item label="菜单排序:">
-                        <el-input-number v-model="formModel.sort" :min="1" :max="10" controls-position="right" />
+                        <el-input-number v-model="formModel.sort" :max="10" :min="1" controls-position="right" />
                     </el-form-item>
                     <el-form-item label="菜单类型:">
                         <el-radio-group v-model="formModel.category">
-                            <el-radio :value="1">
-                                菜单
-                            </el-radio>
-                            <el-radio :value="2" class="ml-6">
-                                按钮
-                            </el-radio>
+                            <el-radio :value="1">菜单</el-radio>
+                            <el-radio :value="2" class="ml-6">按钮</el-radio>
                         </el-radio-group>
                     </el-form-item>
                 </el-col>
@@ -99,29 +96,28 @@
     <hc-menu-icon v-model="isIconShow" @finish="menuIconFinish" />
 </template>
 
-   <script setup>
-   import { ref, watch } from 'vue'
-   import { HcDelMsg } from 'hc-vue3-ui'
-   import config from '~src/config/index'
-   const tableColumn = [
-   { key: 'name', name: '菜单名称', minWidth: 260 },
+<script setup>
+import { ref } from 'vue'
+import { HcDelMsg } from 'hc-vue3-ui'
+import config from '~src/config/index'
+
+const tableColumn = [
+    { key: 'name', name: '菜单名称', minWidth: 260 },
     { key: 'code', name: '菜单编号', width: 240 },
     { key: 'path', name: '路由地址', minWidth: 220 },
     { key: 'category', name: '菜单类型', width: 90, align: 'center' },
     { key: 'sort', name: '排序', width: 80, align: 'center' },
     { key: 'remark', name: '备注', minWidth: 200 },
-    { key: 'action', name: '操作', width: 180, fixed:'right', align: 'center' },
-   ]
-   const tableData = ref([
-       { name: 'admin', code: 'xxx', key3: '超级管理员' },
-       { key1: '13028304756', key2: 'aaa', key3: '角色' },
-   ])
-
-
+    { key: 'action', name: '操作', width: 180, fixed: 'right', align: 'center' },
+]
+const tableData = ref([
+    { name: 'admin', code: 'xxx', key3: '超级管理员' },
+    { key1: '13028304756', key2: 'aaa', key3: '角色' },
+])
 
 
 const tableCheckedKeys = ref([])
- //多选事件
+//多选事件
 const tableSelectionChange = (rows) => {
     tableCheckedKeys.value = rows
 }
@@ -129,7 +125,7 @@ const tableSelectionChange = (rows) => {
 const searchForm = ref({
     queryValue: null, current: 1, size: 20, total: 0,
 })
-const getTableData = ()=>{
+const getTableData = () => {
 
 }
 //分页被点击
@@ -185,10 +181,10 @@ const copyChildren = (row) => {
     isCopy.value = true
     menuDataModal.value = true
 }
-const rowDelClick = ()=>{
-    HcDelMsg( async ( resolve) => {
-            // await removeContractTreeNode()
-            resolve() //关闭弹窗的回调
+const rowDelClick = () => {
+    HcDelMsg(async (resolve) => {
+        // await removeContractTreeNode()
+        resolve() //关闭弹窗的回调
     })
 }
 //新增子级菜单
@@ -204,23 +200,23 @@ const addChildren = (row) => {
     isCopy.value = false
     menuDataModal.value = true
 }
-const menuDataModalSave = ()=>{
+const menuDataModalSave = () => {
 
 }
-const menuDataModalClose = ()=>{
+const menuDataModalClose = () => {
 
 }
 
-   //图标选择
-   const isIconShow = ref(false)
-   const menuIconFinish = (icon) => {
-       formModel.value.source = icon
-       isIconShow.value = false
-   }
+//图标选择
+const isIconShow = ref(false)
+const menuIconFinish = (icon) => {
+    formModel.value.source = icon
+    isIconShow.value = false
+}
 </script>
 
- <style lang='scss' scoped>
-.hc-layout-box{
+<style lang='scss' scoped>
+.hc-layout-box {
     position: relative;
     height: 100%;
     width: 100%;