import { defAxios as request } from '@/utils/http' | import { defAxios as request } from '@/utils/http' | ||||
/** | /** | ||||
* 获取菜单分页数据接口 | |||||
* @returns 菜单分页数据 | |||||
* 获取菜单管理数据接口 | |||||
* @returns 菜单数据 | |||||
*/ | */ | ||||
export function getMenuList(params) { | export function getMenuList(params) { | ||||
return request({ | return request({ |
} | } | ||||
} | } | ||||
// 处理数据结构 | // 处理数据结构 | ||||
const resultInfo = res[listField] ? res[listField] : [] | |||||
const resultInfo = res[listField] ? res[listField] : res | |||||
dataSourceRef.value = dataType === 'tree' ? dealTree(resultInfo) : resultInfo | dataSourceRef.value = dataType === 'tree' ? dealTree(resultInfo) : resultInfo | ||||
setPagination({ | setPagination({ | ||||
[pageField]: currentPage, | [pageField]: currentPage, | ||||
* @returns 返回树形结构数据 | * @returns 返回树形结构数据 | ||||
*/ | */ | ||||
function dealTree(info) { | function dealTree(info) { | ||||
const tree = toTreeData(info.data, 'id', 'pid', 'children') | |||||
const tree = toTreeData(info, 'id', 'pid', 'children') | |||||
return tree | return tree | ||||
} | } | ||||
} | } | ||||
async function reFetch(opt) { | async function reFetch(opt) { | ||||
console.log('opt', opt) | |||||
const { paginationSetting } = unref(propsRef) | const { paginationSetting } = unref(propsRef) | ||||
const pageField = paginationSetting.pageField | const pageField = paginationSetting.pageField | ||||
const sizeField = paginationSetting.sizeField | const sizeField = paginationSetting.sizeField |
<template> | <template> | ||||
<div> | <div> | ||||
<n-card> | <n-card> | ||||
<headSearch :info="info" @search="handleSearch" /> | |||||
<data-table | <data-table | ||||
:columns="data.columns" | |||||
:data="data.data" | |||||
:pagination="data.pagination" | |||||
:columns="columns" | |||||
:data="data" | |||||
:request="loadDataTable" | :request="loadDataTable" | ||||
:row-key="(row) => row.id" | :row-key="(row) => row.id" | ||||
data-type="tree" | data-type="tree" | ||||
</data-table> | </data-table> | ||||
</n-card> | </n-card> | ||||
</div> | </div> | ||||
<!-- 新增、编辑弹窗 --> | |||||
<dept-modal | |||||
v-if="modalShow" | |||||
v-model:visible="modalShow" | |||||
:row="rowData" | |||||
@done="handleSearch" | |||||
/> | |||||
</template> | </template> | ||||
<script> | <script> | ||||
import headSearch from '@/components/Search/index.vue' | |||||
import dataTable from '@/components/DataTable/index.vue' | import dataTable from '@/components/DataTable/index.vue' | ||||
import TableAction from '@/components/DataTable/tools/Action.vue' | import TableAction from '@/components/DataTable/tools/Action.vue' | ||||
import { getDeptList } from '@/api/system/dept/index.js' | |||||
import { h, onMounted, unref } from 'vue' | |||||
import { reactive } from 'vue' | |||||
import { getDeptList, deleteDept } from '@/api/system/dept/index.js' | |||||
import { h, unref, toRefs, ref, reactive } from 'vue' | |||||
import DeptModal from './components/DeptModal.vue' | |||||
import info from './info.js' | |||||
export default { | export default { | ||||
name: 'MenuPage', | name: 'MenuPage', | ||||
components: { dataTable }, | |||||
components: { dataTable, DeptModal, headSearch}, | |||||
setup() { | setup() { | ||||
const data = reactive({ | const data = reactive({ | ||||
columns: [ | columns: [ | ||||
} | } | ||||
], | ], | ||||
data: [], | data: [], | ||||
pagination: { | |||||
pageSize: 10 | |||||
} | |||||
info: ref(info), | |||||
modalShow: false, | |||||
rowData: {} | |||||
}) | }) | ||||
// 新增 | |||||
function handleModal() { | |||||
data.modalShow = true | |||||
} | |||||
// 编辑 | |||||
function play(row) { | function play(row) { | ||||
console.log(row) | |||||
data.rowData = row | |||||
data.modalShow = true | |||||
} | } | ||||
/** | /** | ||||
* @description: 获取部门数据并做树形结构处理 | * @description: 获取部门数据并做树形结构处理 | ||||
* @return {*} | * @return {*} | ||||
*/ | */ | ||||
async function fetchList() { | |||||
const params = { | |||||
page: 1, | |||||
limit: 10 | |||||
const params = ref({}) | |||||
const tableRef = ref() | |||||
function handleSearch(data) { | |||||
params.value = { | |||||
...data | |||||
} | } | ||||
const res = await getDeptList(params) | |||||
data.data = res.data | |||||
tableRef.value.reFetch({ ...unref(params) }) | |||||
} | } | ||||
const params = reactive({ | |||||
name: 'xiaoMa' | |||||
}) | |||||
const loadDataTable = async(res) => { | const loadDataTable = async(res) => { | ||||
const _params = { | const _params = { | ||||
return await getDeptList(_params) | return await getDeptList(_params) | ||||
} | } | ||||
onMounted(() => { | |||||
fetchList() | |||||
}) | |||||
return { data, loadDataTable } | |||||
return { ...toRefs(data), loadDataTable, handleSearch, handleModal } | |||||
} | } | ||||
} | } | ||||
</script> | </script> |
const data = [ | |||||
{ | |||||
label: '部门名称', | |||||
key: 'name', | |||||
props: { | |||||
placeholder: '请输入部门名称' | |||||
} | |||||
} | |||||
// { | |||||
// label: '角色类型', | |||||
// type: 'select', | |||||
// key: 'op', | |||||
// props: { | |||||
// options: [{ | |||||
// label: 11, value: 1 | |||||
// }] | |||||
// } | |||||
// }, | |||||
// { | |||||
// label: '角色类型', | |||||
// type: 'date', | |||||
// key: 'date', | |||||
// props: { | |||||
// type: 'date' | |||||
// } | |||||
// } | |||||
] | |||||
export default data | |||||
:on-negative-click="handleClose" | :on-negative-click="handleClose" | ||||
> | > | ||||
<template #Context> | <template #Context> | ||||
<n-form ref="formRef" :model="menuForm" :rules="menuRules" require-mark-placement="left" :label-width="80" label-placement="left"> | |||||
<n-form ref="formRef" :model="form" :rules="rules" require-mark-placement="left" :label-width="80" label-placement="left"> | |||||
<n-grid x-gap="12" :cols="2"> | <n-grid x-gap="12" :cols="2"> | ||||
<n-gi> | <n-gi> | ||||
<n-form-item label="上级菜单" path="pid"> | <n-form-item label="上级菜单" path="pid"> | ||||
<n-select | <n-select | ||||
v-model:value="menuForm.pid" | |||||
v-model:value="form.pid" | |||||
placeholder="请选择上级菜单" | placeholder="请选择上级菜单" | ||||
:options="getMenuList" | :options="getMenuList" | ||||
/> | /> | ||||
</n-gi> | </n-gi> | ||||
<n-gi> | <n-gi> | ||||
<n-form-item label="菜单类型" path="type"> | <n-form-item label="菜单类型" path="type"> | ||||
<n-radio-group v-model:value="menuForm.type" name="type"> | |||||
<n-radio v-for="item in typeOptions" :key="`type_${item.key}`" :value="item.key"> | |||||
<n-radio-group v-model:value="form.type" name="type"> | |||||
<n-radio v-for="item in typeOptions" :key="item.key" :value="item.key"> | |||||
{{ item.label }} | {{ item.label }} | ||||
</n-radio> | </n-radio> | ||||
</n-radio-group> | </n-radio-group> | ||||
</n-gi> | </n-gi> | ||||
<n-gi> | <n-gi> | ||||
<n-form-item label="菜单名称" path="title"> | <n-form-item label="菜单名称" path="title"> | ||||
<n-input v-model:value="menuForm.title" placeholder="请输入菜单名称" /> | |||||
<n-input v-model:value="form.title" placeholder="请输入菜单名称" /> | |||||
</n-form-item> | </n-form-item> | ||||
</n-gi> | </n-gi> | ||||
<n-gi> | <n-gi> | ||||
<n-form-item label="打开方式" path="target"> | <n-form-item label="打开方式" path="target"> | ||||
<n-radio-group v-model:value="menuForm.target" name="target"> | |||||
<n-radio v-for="item in openOptions" :key="`target_${item.key}`" :value="item.key"> | |||||
<n-radio-group v-model:value="form.target" name="target"> | |||||
<n-radio v-for="item in openOptions" :key="item.key" :value="item.key"> | |||||
{{ item.label }} | {{ item.label }} | ||||
</n-radio> | </n-radio> | ||||
</n-radio-group> | </n-radio-group> | ||||
</n-gi> | </n-gi> | ||||
<n-gi> | <n-gi> | ||||
<n-form-item label="菜单图标" path="icon"> | <n-form-item label="菜单图标" path="icon"> | ||||
<n-input v-model:value="menuForm.icon" placeholder="请选择菜单图标" /> | |||||
<n-input v-model:value="form.icon" :disabled="form.type === 1" placeholder="请选择菜单图标" /> | |||||
</n-form-item> | </n-form-item> | ||||
</n-gi> | </n-gi> | ||||
<n-gi> | <n-gi> | ||||
<n-form-item label="权限标识" path="permission"> | <n-form-item label="权限标识" path="permission"> | ||||
<n-input v-model:value="menuForm.permission" placeholder="请输入权限标识" /> | |||||
<n-input v-model:value="form.permission" :disabled="form.type === 0" placeholder="请输入权限标识" /> | |||||
</n-form-item> | </n-form-item> | ||||
</n-gi> | </n-gi> | ||||
<n-gi> | <n-gi> | ||||
<n-form-item label="路由地址" path="path"> | <n-form-item label="路由地址" path="path"> | ||||
<n-input v-model:value="menuForm.path" placeholder="请输入路由地址" /> | |||||
<n-input v-model:value="form.path" :disabled="form.type === 1" placeholder="请输入路由地址" /> | |||||
</n-form-item> | </n-form-item> | ||||
</n-gi> | </n-gi> | ||||
<n-gi> | <n-gi> | ||||
<n-form-item label="排序号" path="sort"> | <n-form-item label="排序号" path="sort"> | ||||
<n-input v-model:value="menuForm.sort" placeholder="请输入排序号" /> | |||||
<n-input-number v-model:value="form.sort" placeholder="请输入排序号" /> | |||||
</n-form-item> | </n-form-item> | ||||
</n-gi> | </n-gi> | ||||
<n-gi> | <n-gi> | ||||
<n-form-item label="组件路径" path="component"> | <n-form-item label="组件路径" path="component"> | ||||
<n-input v-model:value="menuForm.component" placeholder="请输入组件路径" /> | |||||
<n-input v-model:value="form.component" :disabled="form.type === 1" placeholder="请输入组件路径" /> | |||||
</n-form-item> | </n-form-item> | ||||
</n-gi> | </n-gi> | ||||
<n-gi> | <n-gi> | ||||
<n-form-item label="是否可见" path="hide"> | <n-form-item label="是否可见" path="hide"> | ||||
<n-radio-group v-model:value="menuForm.hide" name="hide"> | |||||
<n-radio v-for="item in visibleOptions" :key="`hide_${item.key}`" :value="item.key"> | |||||
<n-radio-group v-model:value="form.hide" name="hide"> | |||||
<n-radio v-for="item in visibleOptions" :key="item.key" :value="item.key"> | |||||
{{ item.label }} | {{ item.label }} | ||||
</n-radio> | </n-radio> | ||||
</n-radio-group> | </n-radio-group> | ||||
</n-gi> | </n-gi> | ||||
<n-gi> | <n-gi> | ||||
<n-form-item label="菜单状态" path="status"> | <n-form-item label="菜单状态" path="status"> | ||||
<n-radio-group v-model:value="menuForm.status" name="status"> | |||||
<n-radio v-for="item in statusOptions" :key="`status_${item.key}`" :value="item.key"> | |||||
<n-radio-group v-model:value="form.status" name="status"> | |||||
<n-radio v-for="item in statusOptions" :key="item.key" :value="item.key"> | |||||
{{ item.label }} | {{ item.label }} | ||||
</n-radio> | </n-radio> | ||||
</n-radio-group> | </n-radio-group> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
import { defineComponent, computed, reactive, toRefs, ref } from 'vue' | |||||
import { defineComponent, computed, reactive, toRefs } from 'vue' | |||||
import Modal from '@/components/Modal/index.vue' | import Modal from '@/components/Modal/index.vue' | ||||
import { addMenu } from '@/api/system/menu/index.js' | |||||
import { addMenu, editMenu } from '@/api/system/menu/index.js' | |||||
export default defineComponent({ | export default defineComponent({ | ||||
name: 'MenuModal', | name: 'MenuModal', | ||||
components: { Modal }, | components: { Modal }, | ||||
} | } | ||||
}, | }, | ||||
emits: { | emits: { | ||||
'update:visible': null | |||||
'update:visible': null, | |||||
'done': null | |||||
}, | }, | ||||
setup(props, { emit }) { | setup(props, { emit }) { | ||||
const data = reactive({ | const data = reactive({ | ||||
menuForm: { | |||||
pid: null, | |||||
type: '0', | |||||
title: '', | |||||
target: '0', | |||||
icon: '', | |||||
permission: '', | |||||
path: '', | |||||
sort: '', | |||||
component: '', | |||||
hide: '0', | |||||
status: '1' | |||||
}, | |||||
menuRules: { | |||||
title: { | |||||
form: {}, | |||||
rules: { | |||||
title: [{ | |||||
required: true, | required: true, | ||||
message: '请输入菜单名称', | message: '请输入菜单名称', | ||||
trigger: ['blur'] | |||||
}, | |||||
sort: { | |||||
trigger: 'blur' | |||||
}], | |||||
sort: [{ | |||||
required: true, | required: true, | ||||
message: '请输入排序号', | message: '请输入排序号', | ||||
trigger: ['blur'] | |||||
} | |||||
trigger: 'blur' | |||||
}] | |||||
}, | }, | ||||
typeOptions: [ | typeOptions: [ | ||||
{ key: '0', label: '菜单' }, | |||||
{ key: '1', label: '按钮' } | |||||
{ key: 0, label: '菜单' }, | |||||
{ key: 1, label: '按钮' } | |||||
], | ], | ||||
openOptions: [ | openOptions: [ | ||||
{ key: '0', label: '组件' }, | |||||
{ key: '1', label: '内链' }, | |||||
{ key: '2', label: '外链' } | |||||
{ key: '1', label: '内部' }, | |||||
{ key: '2', label: '外部' } | |||||
], | ], | ||||
visibleOptions: [ | visibleOptions: [ | ||||
{ key: '0', label: '可见' }, | |||||
{ key: '1', label: '不可见' } | |||||
{ key: 0, label: '可见' }, | |||||
{ key: 1, label: '不可见' } | |||||
], | ], | ||||
statusOptions: [ | statusOptions: [ | ||||
{ key: '1', label: '在用' }, | |||||
{ key: '2', label: '停用' } | |||||
] | |||||
{ key: 1, label: '在用' }, | |||||
{ key: 2, label: '停用' } | |||||
], | |||||
menuList: [] | |||||
}) | }) | ||||
const getMenuList = computed(() => { | const getMenuList = computed(() => { | ||||
const list = props.menuList.map((item) => { | const list = props.menuList.map((item) => { | ||||
const menu = { | const menu = { | ||||
label: item.title, | label: item.title, | ||||
value: item.pid | |||||
value: item.id | |||||
} | } | ||||
return menu | return menu | ||||
}) | }) | ||||
}) | }) | ||||
const getModalOptions = computed(() => { | const getModalOptions = computed(() => { | ||||
const row = props.data | |||||
if (props.data.pid === 0) { | |||||
row.pid = null | |||||
} | |||||
return { | return { | ||||
show: props.visible, | show: props.visible, | ||||
title: props.data ? '修改菜单' : '新建菜单', | |||||
title: props.data.title ? '修改菜单' : '添加菜单', | |||||
form: Object.assign(data.form, row), | |||||
width: 700, | width: 700, | ||||
negativeText: '取消', | negativeText: '取消', | ||||
positiveText: '确认' | positiveText: '确认' | ||||
const handleClose = () => { | const handleClose = () => { | ||||
emit('update:visible', false) | emit('update:visible', false) | ||||
} | } | ||||
const formRef = ref() | |||||
const handleConfirm = () => { | |||||
formRef.value?.validate((errors) => { | |||||
if (!errors) { | |||||
const params = { | |||||
...data.menuForm | |||||
} | |||||
addMenu(params) | |||||
.then(res => { | |||||
handleClose() | |||||
}) | |||||
} else { | |||||
$message.error('清先完成校验') | |||||
} | |||||
}) | |||||
return false | |||||
} | |||||
return { | return { | ||||
...toRefs(data), | ...toRefs(data), | ||||
formRef, | |||||
getMenuList, | getMenuList, | ||||
getModalOptions, | getModalOptions, | ||||
handleClose, | |||||
handleConfirm | |||||
handleClose | |||||
} | |||||
}, | |||||
methods: { | |||||
// 表单提交 | |||||
handleConfirm() { | |||||
const type = this.data.title ? 'add' : 'edit' | |||||
this.$refs.formRef.validate((errors) => { | |||||
if (!errors) { | |||||
if (type === 'add') { | |||||
addMenu(this.form).then(res => { | |||||
if (res.code === 0) { | |||||
this.handleClose() | |||||
this.$emit('done') | |||||
$message.success(res.msg) | |||||
} else { | |||||
$message.error(res.msg) | |||||
} | |||||
}).catch(e => { | |||||
console.log(e) | |||||
}) | |||||
} else if (type === 'edit') { | |||||
editMenu(this.form).then(res => { | |||||
if (res.code === 0) { | |||||
this.handleClose() | |||||
this.$emit('done') | |||||
$message.success(res.msg) | |||||
} else { | |||||
$message.error(res.msg) | |||||
} | |||||
}) | |||||
} | |||||
} else { | |||||
$message.error('请完善必填信息') | |||||
} | |||||
}) | |||||
} | } | ||||
} | } | ||||
}) | }) |
<template> | <template> | ||||
<div> | <div> | ||||
<n-card> | <n-card> | ||||
<data-table :columns="data.columns" :pagination="false" :data="data.data" size="large" @fetch-success="getFechData"> | |||||
<headSearch :info="info" @search="handleSearch" /> | |||||
<data-table | |||||
ref="tableRef" | |||||
:columns="columns" | |||||
:pagination="false" | |||||
data-type="tree" | |||||
:request="loadDataTable" | |||||
> | |||||
<template #tableTitle> | <template #tableTitle> | ||||
<n-button type="primary" @click="handlleRoleAdd"> | |||||
添加菜单 | |||||
</n-button> | |||||
<n-button type="primary" @click="handlleRoleAdd"> 添加菜单 </n-button> | |||||
</template> | </template> | ||||
</data-table> | </data-table> | ||||
</n-card> | </n-card> | ||||
</div> | </div> | ||||
<RoleModal v-model:visible="data.modalShow" :data="data.selectRow" :menu-list="data.data" /> | |||||
<MenuModal | |||||
v-model:visible="modalShow" | |||||
:data="rowData" | |||||
:menu-list="menuList" | |||||
@done="handleSearch" | |||||
/> | |||||
</template> | </template> | ||||
<script> | <script> | ||||
import headSearch from '@/components/Search/index.vue' | |||||
import dataTable from '@/components/DataTable/index.vue' | import dataTable from '@/components/DataTable/index.vue' | ||||
import RoleModal from './components/MenuModal.vue' | |||||
import MenuModal from './components/MenuModal.vue' | |||||
import TableTags from '@/components/DataTable/tools/Tags.vue' | |||||
import Action from '@/components/DataTable/tools/Action.vue' | import Action from '@/components/DataTable/tools/Action.vue' | ||||
import { getMenuList } from '@/api/system/index.js' | |||||
import { h, onMounted } from 'vue' | |||||
import { reactive } from 'vue' | |||||
import { getMenu, getMenuList, deleteMenu } from '@/api/system/menu/index.js' | |||||
import { h, ref, unref, reactive, toRefs, onMounted } from 'vue' | |||||
import info from './info.js' | |||||
export default { | export default { | ||||
name: 'MenuPage', | name: 'MenuPage', | ||||
components: { dataTable, RoleModal }, | |||||
components: { dataTable, MenuModal, headSearch }, | |||||
setup() { | setup() { | ||||
const data = reactive({ | const data = reactive({ | ||||
columns: [ | columns: [ | ||||
title: '菜单类型', | title: '菜单类型', | ||||
key: 'type', | key: 'type', | ||||
align: 'center', | align: 'center', | ||||
width: 100 | |||||
}, | |||||
{ | |||||
title: '请求方式', | |||||
key: 'method', | |||||
align: 'center', | |||||
width: 100 | |||||
width: 100, | |||||
render(row) { | |||||
return h(TableTags, { | |||||
data: row.type, | |||||
filters: [ | |||||
{ | |||||
key: 0, | |||||
label: '菜单' | |||||
}, | |||||
{ | |||||
key: 1, | |||||
label: '节点' | |||||
} | |||||
] | |||||
}) | |||||
} | |||||
}, | }, | ||||
{ | { | ||||
title: '路由地址', | title: '路由地址', | ||||
align: 'center', | align: 'center', | ||||
width: 200 | width: 200 | ||||
}, | }, | ||||
{ | |||||
title: '权限标识', | |||||
key: 'permission', | |||||
align: 'center', | |||||
width: 200 | |||||
}, | |||||
{ | { | ||||
title: '状态', | title: '状态', | ||||
key: 'status', | key: 'status', | ||||
align: 'center', | align: 'center', | ||||
width: 100 | |||||
width: 100, | |||||
render(row) { | |||||
return h(TableTags, { | |||||
data: row.status, | |||||
filters: [ | |||||
{ | |||||
key: 1, | |||||
label: '在用' | |||||
}, | |||||
{ | |||||
key: 2, | |||||
label: '停用' | |||||
} | |||||
] | |||||
}) | |||||
} | |||||
}, | }, | ||||
{ | { | ||||
title: '排序', | title: '排序', | ||||
width: 100 | width: 100 | ||||
}, | }, | ||||
{ | { | ||||
title: '可见', | |||||
title: '是否可见', | |||||
key: 'hide', | key: 'hide', | ||||
align: 'center', | align: 'center', | ||||
width: 100 | |||||
width: 100, | |||||
render(row) { | |||||
return h(TableTags, { | |||||
data: row.hide, | |||||
filters: [ | |||||
{ | |||||
key: 1, | |||||
label: '可见' | |||||
}, | |||||
{ | |||||
key: 2, | |||||
label: '不可见' | |||||
} | |||||
] | |||||
}) | |||||
} | |||||
}, | }, | ||||
{ | { | ||||
title: '创建时间', | title: '创建时间', | ||||
type: 'button', | type: 'button', | ||||
props: { | props: { | ||||
type: 'primary', | type: 'primary', | ||||
onClick: play.bind(null, row) | |||||
onClick: add.bind(null, row) | |||||
}, | }, | ||||
auth: 'basic_list' | auth: 'basic_list' | ||||
}, | }, | ||||
{ | { | ||||
label: '修改', | label: '修改', | ||||
type: 'button', | |||||
props: { | |||||
type: 'primary', | |||||
onClick: play.bind(null, row) | |||||
}, | |||||
auth: 'basic_list' | auth: 'basic_list' | ||||
}, | }, | ||||
{ | { | ||||
label: '删除', | label: '删除', | ||||
type: 'popconfirm', | type: 'popconfirm', | ||||
auth: 'basic_list' | |||||
auth: 'basic_list', | |||||
tip: '确定删除这条数据吗?', | |||||
props: { | |||||
negativeText: '取消', | |||||
positiveText: '确认', | |||||
onPositiveClick: deleteSingle.bind(null, row.id) | |||||
} | |||||
} | } | ||||
], | ], | ||||
align: 'center' | align: 'center' | ||||
} | } | ||||
} | } | ||||
], | ], | ||||
data: [], | |||||
info: ref(info), | |||||
modalShow: false, | modalShow: false, | ||||
selectRow: null | |||||
menuList: [], | |||||
rowData: { | |||||
status: 1, | |||||
type: 0, | |||||
hide: 0 | |||||
} | |||||
}) | }) | ||||
function play(row) { | |||||
console.log(row) | |||||
// 获取全部菜单信息 | |||||
async function getMenuAll() { | |||||
const list = await getMenu() | |||||
data.menuList = list.data | |||||
} | } | ||||
onMounted(() => { | |||||
getMenuAll() | |||||
}) | |||||
/** | /** | ||||
* @description: 获取菜单数据 | * @description: 获取菜单数据 | ||||
* @return {*} | * @return {*} | ||||
*/ | */ | ||||
async function fetchList() { | |||||
const res = await getMenuList() | |||||
data.data = res.data | |||||
const params = ref({}) | |||||
const tableRef = ref() | |||||
function handleSearch(data) { | |||||
params.value = { | |||||
...data | |||||
} | |||||
tableRef.value.reFetch({ ...unref(params) }) | |||||
} | |||||
const loadDataTable = async(res) => { | |||||
const _params = { | |||||
...unref(params), | |||||
...res | |||||
} | |||||
return await getMenuList(_params) | |||||
} | } | ||||
// 打开新增弹框 | |||||
function handlleRoleAdd() { | function handlleRoleAdd() { | ||||
data.modalShow = true | data.modalShow = true | ||||
data.rowData = {} | |||||
} | } | ||||
/** | |||||
* @description: 获取表单数据 | |||||
* @param {*} data | |||||
* @return {*} | |||||
*/ | |||||
function getFechData(data) { | |||||
// 行内新增 | |||||
function add(row) { | |||||
data.modalShow = true | |||||
data.rowData = {} | |||||
data.rowData.pid = row.id | |||||
} | |||||
// 编辑 | |||||
function play(row) { | |||||
data.rowData = row | |||||
data.modalShow = true | |||||
} | |||||
// 单个删除数据 | |||||
function deleteSingle(id) { | |||||
deleteData(id) | |||||
} | } | ||||
onMounted(() => { | |||||
fetchList() | |||||
}) | |||||
// 删除方法 | |||||
function deleteData(id) { | |||||
deleteMenu(id) | |||||
.then((res) => { | |||||
if (res.code === 0) { | |||||
handleSearch({}) | |||||
$message.success(res.msg) | |||||
} else { | |||||
$message.error(res.msg) | |||||
} | |||||
}) | |||||
.catch((e) => { | |||||
console.log(e) | |||||
}) | |||||
} | |||||
return { | return { | ||||
data, | |||||
...toRefs(data), | |||||
tableRef, | |||||
loadDataTable, | |||||
handleSearch, | |||||
handlleRoleAdd, | handlleRoleAdd, | ||||
getFechData | |||||
deleteSingle | |||||
} | } | ||||
} | } | ||||
} | } | ||||
</script> | </script> | ||||
<style scoped lang='scss'> | <style scoped lang='scss'> | ||||
</style> | </style> |
const data = [ | |||||
{ | |||||
label: '菜单名称', | |||||
key: 'title', | |||||
props: { | |||||
placeholder: '请输入菜单名称' | |||||
} | |||||
} | |||||
] | |||||
export default data | |||||
placeholder: '请输入角色名称' | placeholder: '请输入角色名称' | ||||
} | } | ||||
} | } | ||||
// { | |||||
// label: '角色类型', | |||||
// type: 'select', | |||||
// key: 'op', | |||||
// props: { | |||||
// options: [{ | |||||
// label: 11, value: 1 | |||||
// }] | |||||
// } | |||||
// }, | |||||
// { | |||||
// label: '角色类型', | |||||
// type: 'date', | |||||
// key: 'date', | |||||
// props: { | |||||
// type: 'date' | |||||
// } | |||||
// } | |||||
] | ] | ||||
export default data | export default data |
} | } | ||||
}) | }) | ||||
} | } | ||||
} else { | |||||
$message.error('请完善必填信息') | |||||
} | } | ||||
}) | }) | ||||
} | } |
} | } | ||||
return { | return { | ||||
data, | |||||
loadDataTable, | loadDataTable, | ||||
handleModal, | handleModal, | ||||
...toRefs(data), | ...toRefs(data), |