menu.vue 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241
  1. <!-- -->
  2. <template>
  3. <div class="hc-layout-box menu-page">
  4. <hc-card :scrollbar="false" action-size="lg">
  5. <template #header>
  6. <el-button color="#20C98B" type="primary" @click="addMenu">
  7. <hc-icon name="add" class="text-white" />
  8. <span class="text-white">新增</span>
  9. </el-button>
  10. <el-button color="#FF6C6C" :disabled="tableCheckedKeys.length === 0" @click="rowDelClick">
  11. <hc-icon name="delete-bin-2" class="text-white" />
  12. <span class="text-white">删除</span>
  13. </el-button>
  14. </template>
  15. <template #extra>
  16. <el-input v-model="searchForm.queryValue" placeholder="请输入菜单名称搜索" clearable />
  17. <el-button color=" #4b4b4b" type="primary" class="ml-2">
  18. <hc-icon name="search" class="text-white" />
  19. <span class="text-white">搜索</span>
  20. </el-button>
  21. </template>
  22. <hc-table
  23. ui="no-border" has-children="hasChildren1" :is-index="true"
  24. :column="tableColumn" :datas="tableData"
  25. :index-style="{ fixed: true, width: 60 }" is-check border :check-style="{ fixed: true, width: 29 }"
  26. class="menu-page-table"
  27. @selection-change="tableSelectionChange"
  28. >
  29. <template #name="{ row }">
  30. <i v-if="row.source" :class="[`ri-${row?.source}`]" class="hc-icon-i table-menu-icon" />
  31. <span>{{ row.name }}</span>
  32. </template>
  33. <template #category="{ row }">
  34. <span v-if="row.category === 1">菜单</span>
  35. <span v-if="row.category === 2">按钮</span>
  36. </template>
  37. <template #action="{ row }">
  38. <el-link type="success" @click="eidtMenu(row)"> <hc-icon name="edit" />编辑</el-link>
  39. <el-link type="success" @click="addChildren(row)"> <hc-icon name="edit" />新增子项</el-link>
  40. <el-link type="success" @click="copyChildren(row)"> <hc-icon name="file-copy" />复制</el-link>
  41. </template>
  42. </hc-table>
  43. <template #action>
  44. <HcPages :pages="searchForm" @change="pageChange" />
  45. </template>
  46. </hc-card>
  47. </div>
  48. <!-- 菜单新增编辑 -->
  49. <hc-dialog
  50. v-model="menuDataModal" bg-color="#ffffff" is-to-body widths="60rem"
  51. :title="isCopy ? '复制菜单数据' : formModel.id ? '编辑菜单' : '修改菜单'" @save="menuDataModalSave" @close="menuDataModalClose"
  52. >
  53. <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="left" label-width="auto" size="large">
  54. <el-row :gutter="20">
  55. <el-col :span="12">
  56. <el-form-item label="菜单名称:" prop="name">
  57. <el-input v-model="formModel.name" placeholder="六字以内的名称" />
  58. </el-form-item>
  59. <el-form-item label="路由地址:" prop="path">
  60. <el-input v-model="formModel.path" placeholder="url上显示的地址" />
  61. </el-form-item>
  62. <el-form-item label="菜单编号:" prop="code">
  63. <el-input v-model="formModel.code" placeholder="路由中的跳转name" />
  64. </el-form-item>
  65. <el-form-item label="菜单备注:">
  66. <el-input v-model="formModel.remark" />
  67. </el-form-item>
  68. </el-col>
  69. <el-col :span="12">
  70. <el-form-item label="上级菜单:">
  71. <el-cascader v-model="formModel.parentId" :options="tableData" :props="topMenuoptions" clearable />
  72. </el-form-item>
  73. <el-form-item label="菜单图标:">
  74. <el-input v-model="formModel.source" placeholder="图标库为 ">
  75. <template #append>
  76. <a href="https://remixicon.cn/" target="_blank">图标库</a>
  77. </template>
  78. </el-input>
  79. </el-form-item>
  80. <el-form-item label="菜单排序:">
  81. <el-input-number v-model="formModel.sort" :min="1" :max="10" controls-position="right" />
  82. </el-form-item>
  83. <el-form-item label="菜单类型:">
  84. <el-radio-group v-model="formModel.category">
  85. <el-radio :value="1">
  86. 菜单
  87. </el-radio>
  88. <el-radio :value="2" class="ml-6">
  89. 按钮
  90. </el-radio>
  91. </el-radio-group>
  92. </el-form-item>
  93. </el-col>
  94. </el-row>
  95. </el-form>
  96. </hc-dialog>
  97. </template>
  98. <script setup>
  99. import { ref, watch } from 'vue'
  100. import { HcDelMsg } from 'hc-vue3-ui'
  101. import config from '~src/config/index'
  102. const tableColumn = [
  103. { key: 'name', name: '菜单名称', minWidth: 260 },
  104. { key: 'code', name: '菜单编号', width: 240 },
  105. { key: 'path', name: '路由地址', minWidth: 220 },
  106. { key: 'category', name: '菜单类型', width: 90, align: 'center' },
  107. { key: 'sort', name: '排序', width: 80, align: 'center' },
  108. { key: 'remark', name: '备注', minWidth: 200 },
  109. { key: 'action', name: '操作', width: 180, fixed:'right', align: 'center' },
  110. ]
  111. const tableData = ref([
  112. { name: 'admin', code: 'xxx', key3: '超级管理员' },
  113. { key1: '13028304756', key2: 'aaa', key3: '角色' },
  114. ])
  115. const tableCheckedKeys = ref([])
  116. //多选事件
  117. const tableSelectionChange = (rows) => {
  118. tableCheckedKeys.value = rows
  119. }
  120. //搜索表单
  121. const searchForm = ref({
  122. queryValue: null, current: 1, size: 20, total: 0,
  123. })
  124. const getTableData = ()=>{
  125. }
  126. //分页被点击
  127. const pageChange = ({ current, size }) => {
  128. searchForm.value.current = current
  129. searchForm.value.size = size
  130. getTableData()
  131. }
  132. //菜单数据弹窗
  133. const isCopy = ref(false)
  134. const menuDataModal = ref(false)
  135. const formRef = ref(null)
  136. const formModel = ref({ category: 1 })
  137. const formRules = {
  138. name: { required: true, trigger: 'blur', message: '请输入菜单名称' },
  139. path: { required: true, trigger: 'blur', message: '请输入路由地址' },
  140. code: { required: true, trigger: 'blur', message: '请输入菜单编号' },
  141. }
  142. const topMenuoptions = {
  143. checkStrictly: true,
  144. emitPath: false,
  145. value: 'id',
  146. label: 'name',
  147. }
  148. //编辑菜单
  149. const eidtMenu = (row) => {
  150. formModel.value = {
  151. ...row,
  152. children: null,
  153. }
  154. isCopy.value = false
  155. menuDataModal.value = true
  156. }
  157. //新增菜单
  158. const addMenu = () => {
  159. formModel.value = {
  160. sysId: config.sysId,
  161. isOpen: 1,
  162. isLayout: 1,
  163. category: 1,
  164. parentId: 0,
  165. sort: 1,
  166. }
  167. isCopy.value = false
  168. menuDataModal.value = true
  169. }
  170. const copyChildren = (row) => {
  171. formModel.value = {
  172. ...row,
  173. children: null,
  174. id: '',
  175. }
  176. isCopy.value = true
  177. menuDataModal.value = true
  178. }
  179. const rowDelClick = ()=>{
  180. HcDelMsg( async ( resolve) => {
  181. // await removeContractTreeNode()
  182. resolve() //关闭弹窗的回调
  183. })
  184. }
  185. //新增子级菜单
  186. const addChildren = (row) => {
  187. formModel.value = {
  188. sysId: config.sysId,
  189. isOpen: 1,
  190. isLayout: 1,
  191. category: 1,
  192. parentId: row.id,
  193. sort: 1,
  194. }
  195. isCopy.value = false
  196. menuDataModal.value = true
  197. }
  198. const menuDataModalSave = ()=>{
  199. }
  200. const menuDataModalClose = ()=>{
  201. }
  202. </script>
  203. <style lang='scss' scoped>
  204. .hc-layout-box{
  205. position: relative;
  206. height: 100%;
  207. width: 100%;
  208. }
  209. </style>
  210. <style>
  211. .menu-page-table .el-table[hc].new {
  212. --el-table-header-bg-color: #101010;
  213. --el-table-header-text-color: #fff;
  214. --el-table-text-color: #101010;
  215. thead.is-group th.el-table__cell {
  216. background: var(--el-table-header-bg-color);
  217. }
  218. thead .el-table-fixed-column--left.el-table__cell,
  219. thead .el-table-fixed-column--right.el-table__cell {
  220. background: var(--el-table-header-bg-color) !important;
  221. }
  222. tbody .el-table-fixed-column--left.el-table__cell,
  223. tbody .el-table-fixed-column--right.el-table__cell {
  224. background: var(--el-table-tr-bg-color) !important;
  225. }
  226. .el-table__body tr.current-row>td.el-table__cell {
  227. background-color: var(--el-table-current-row-bg-color) !important;
  228. }
  229. }
  230. </style>