123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241 |
- <!-- -->
- <template>
- <div class="hc-layout-box menu-page">
- <hc-card :scrollbar="false" action-size="lg">
- <template #header>
- <el-button color="#20C98B" type="primary" @click="addMenu">
- <hc-icon name="add" class="text-white" />
- <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" />
- <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" />
- <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"
- @selection-change="tableSelectionChange"
- >
- <template #name="{ row }">
- <i v-if="row.source" :class="[`ri-${row?.source}`]" class="hc-icon-i table-menu-icon" />
- <span>{{ row.name }}</span>
- </template>
- <template #category="{ row }">
- <span v-if="row.category === 1">菜单</span>
- <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>
- </template>
- </hc-table>
- <template #action>
- <HcPages :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"
- >
- <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" placeholder="六字以内的名称" />
- </el-form-item>
- <el-form-item label="路由地址:" prop="path">
- <el-input v-model="formModel.path" placeholder="url上显示的地址" />
- </el-form-item>
- <el-form-item label="菜单编号:" prop="code">
- <el-input v-model="formModel.code" placeholder="路由中的跳转name" />
- </el-form-item>
- <el-form-item label="菜单备注:">
- <el-input v-model="formModel.remark" />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="上级菜单:">
- <el-cascader v-model="formModel.parentId" :options="tableData" :props="topMenuoptions" clearable />
- </el-form-item>
- <el-form-item label="菜单图标:">
- <el-input v-model="formModel.source" placeholder="图标库为 ">
- <template #append>
- <a href="https://remixicon.cn/" target="_blank">图标库</a>
- </template>
- </el-input>
- </el-form-item>
- <el-form-item label="菜单排序:">
- <el-input-number v-model="formModel.sort" :min="1" :max="10" 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-group>
- </el-form-item>
- </el-col>
- </el-row>
- </el-form>
- </hc-dialog>
- </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 },
- { 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: '角色' },
- ])
- const tableCheckedKeys = ref([])
- //多选事件
- const tableSelectionChange = (rows) => {
- tableCheckedKeys.value = rows
- }
- //搜索表单
- const searchForm = ref({
- queryValue: null, current: 1, size: 20, total: 0,
- })
- const getTableData = ()=>{
-
- }
- //分页被点击
- const pageChange = ({ current, size }) => {
- searchForm.value.current = current
- searchForm.value.size = size
- getTableData()
- }
- //菜单数据弹窗
- const isCopy = ref(false)
- const menuDataModal = ref(false)
- const formRef = ref(null)
- const formModel = ref({ category: 1 })
- const formRules = {
- name: { required: true, trigger: 'blur', message: '请输入菜单名称' },
- path: { required: true, trigger: 'blur', message: '请输入路由地址' },
- code: { required: true, trigger: 'blur', message: '请输入菜单编号' },
- }
- const topMenuoptions = {
- checkStrictly: true,
- emitPath: false,
- value: 'id',
- label: 'name',
- }
- //编辑菜单
- const eidtMenu = (row) => {
- formModel.value = {
- ...row,
- children: null,
- }
- isCopy.value = false
- menuDataModal.value = true
- }
- //新增菜单
- const addMenu = () => {
- formModel.value = {
- sysId: config.sysId,
- isOpen: 1,
- isLayout: 1,
- category: 1,
- parentId: 0,
- sort: 1,
- }
- isCopy.value = false
- menuDataModal.value = true
- }
- const copyChildren = (row) => {
- formModel.value = {
- ...row,
- children: null,
- id: '',
- }
- isCopy.value = true
- menuDataModal.value = true
- }
- const rowDelClick = ()=>{
- HcDelMsg( async ( resolve) => {
- // await removeContractTreeNode()
- resolve() //关闭弹窗的回调
- })
- }
- //新增子级菜单
- const addChildren = (row) => {
- formModel.value = {
- sysId: config.sysId,
- isOpen: 1,
- isLayout: 1,
- category: 1,
- parentId: row.id,
- sort: 1,
- }
- isCopy.value = false
- menuDataModal.value = true
- }
- const menuDataModalSave = ()=>{
- }
- const menuDataModalClose = ()=>{
- }
- </script>
- <style lang='scss' scoped>
- .hc-layout-box{
- position: relative;
- height: 100%;
- width: 100%;
- }
- </style>
- <style>
- .menu-page-table .el-table[hc].new {
- --el-table-header-bg-color: #101010;
- --el-table-header-text-color: #fff;
- --el-table-text-color: #101010;
- thead.is-group th.el-table__cell {
- background: var(--el-table-header-bg-color);
- }
- thead .el-table-fixed-column--left.el-table__cell,
- thead .el-table-fixed-column--right.el-table__cell {
- background: var(--el-table-header-bg-color) !important;
- }
- tbody .el-table-fixed-column--left.el-table__cell,
- tbody .el-table-fixed-column--right.el-table__cell {
- background: var(--el-table-tr-bg-color) !important;
- }
- .el-table__body tr.current-row>td.el-table__cell {
- background-color: var(--el-table-current-row-bg-color) !important;
- }
- }
- </style>
|