0017
/
iot-ui-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: bug#10847 修复菜单管理部分bug

This commit is contained in:
jackhoo_98 2023-03-31 15:55:12 +08:00
parent 11cf92b90e
commit 0ec07a4d73
5 changed files with 275 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/views/system/Menu/Detail/BasicInfo.vue
View File

@ -258,7 +258,6 @@
<script setup lang="ts"> <script setup lang="ts">
import PermissionButton from '@/components/PermissionButton/index.vue'; import PermissionButton from '@/components/PermissionButton/index.vue';
import { FormInstance, message } from 'ant-design-vue'; import { FormInstance, message } from 'ant-design-vue';
import ChooseIconDialog from '../components/ChooseIconDialog.vue'; import ChooseIconDialog from '../components/ChooseIconDialog.vue';
import PermissChoose from '../components/PermissChoose.vue'; import PermissChoose from '../components/PermissChoose.vue';

22
src/views/system/Menu/Detail/ButtonMange.vue
View File

@ -63,26 +63,29 @@
<script setup lang="ts"> <script setup lang="ts">
import PermissionButton from '@/components/PermissionButton/index.vue'; import PermissionButton from '@/components/PermissionButton/index.vue';
import ButtonAddDialog from '../components/ButtonAddDialog.vue'; import ButtonAddDialog from '../components/ButtonAddDialog.vue';
import { getMenuInfo_api, saveMenuInfo_api } from '@/api/system/menu'; import { getMenuInfo_api, saveMenuInfo_api } from '@/api/system/menu';
import { message } from 'jetlinks-ui-components'; import { message } from 'jetlinks-ui-components';
const permission = 'system/Menu'; const permission = 'system/Menu';
// 路由 // 路由
const route = useRoute(); const route = useRoute();
const routeParams = { const routeParams = reactive({
id: route.params.id === ':id' ? '' : (route.params.id as string), id: route.params.id === ':id' ? '' : (route.params.id as string),
...route.query, ...route.query,
}; });
const paramsId = ref('');
// 弹窗相关 // 弹窗相关
const selectItem = ref<any>({}); const selectItem = ref<any>({});
const dialogVisible = ref(false); const dialogVisible = ref(false);
const dialogTitle = ref<'查看' | '新增' | '编辑'>('新增'); const dialogTitle = ref<'查看' | '新增' | '编辑'>('新增');
const openDialog = (mode: '查看' | '新增' | '编辑', row: object) => { const openDialog = (mode: '查看' | '新增' | '编辑', row: object) => {
if (!routeParams.id) return message.warning('请先新增菜单基本信息'); if (!routeParams.id && !paramsId.value) {
return message.warning('请先新增菜单基本信息');
}
console.log(3);
selectItem.value = { ...row }; selectItem.value = { ...row };
dialogTitle.value = mode; dialogTitle.value = mode;
dialogVisible.value = true; dialogVisible.value = true;
@ -147,6 +150,15 @@ type tableDataItem = {
description?: string; description?: string;
permissions: object[]; permissions: object[];
}; };
watch(
() => route.params.id,
(value) => {
if (!!value) {
paramsId.value = value;
}
},
);
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>

34
src/views/system/Menu/components/ChooseIconDialog.vue
View File

@ -10,6 +10,7 @@
<j-radio-button <j-radio-button
v-for="typeStr in iconKeys" v-for="typeStr in iconKeys"
:value="typeStr" :value="typeStr"
:key="typeStr"
:class="{ active: selected === typeStr }" :class="{ active: selected === typeStr }"
> >
<AIcon :type="typeStr" /> <AIcon :type="typeStr" />
@ -19,6 +20,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import iconKeys from './fields';
const emits = defineEmits(['confirm', 'update:visible']); const emits = defineEmits(['confirm', 'update:visible']);
const props = defineProps<{ const props = defineProps<{
visible: boolean; visible: boolean;
@ -28,38 +30,6 @@ const confirm = () => {
emits('confirm', selected.value); emits('confirm', selected.value);
emits('update:visible', false); emits('update:visible', false);
}; };
const iconKeys = [
'EyeOutlined',
'EditOutlined',
'PlusOutlined',
'DeleteOutlined',
'CheckCircleOutlined',
'StopOutlined',
'CheckOutlined',
'CloseOutlined',
'DownOutlined',
'ImportOutlined',
'ExportOutlined',
'SyncOutlined',
'ExclamationCircleOutlined',
'UploadOutlined',
'LoadingOutlined',
'PlusCircleOutlined',
'QuestionCircleOutlined',
'DisconnectOutlined',
'LinkOutlined',
'PoweroffOutlined',
'SwapOutlined',
'BugOutlined',
'BarsOutlined',
'ArrowDownOutlined',
'SmallDashOutlined',
'TeamOutlined',
'MenuUnfoldOutlined',
'MenuFoldOutlined',
'InfoCircleOutlined',
'SearchOutlined',
];
const selected = ref<string>(''); const selected = ref<string>('');
</script> </script>

246
src/views/system/Menu/components/fields.ts Normal file
View File

@ -0,0 +1,246 @@
const direction = [
'StepBackward',
'StepForward',
'FastBackward',
'FastForward',
'Shrink',
'ArrowsAlt',
'Down',
'Up',
'Left',
'Right',
'CaretUp',
'CaretDown',
'CaretLeft',
'CaretRight',
'UpCircle',
'DownCircle',
'LeftCircle',
'RightCircle',
'DoubleRight',
'DoubleLeft',
'VerticalLeft',
'VerticalRight',
'VerticalAlignTop',
'VerticalAlignMiddle',
'VerticalAlignBottom',
'Forward',
'Backward',
'Rollback',
'Enter',
'Retweet',
'Swap',
'SwapLeft',
'SwapRight',
'ArrowUp',
'ArrowDown',
'ArrowLeft',
'ArrowRight',
'PlayCircle',
'UpSquare',
'DownSquare',
'LeftSquare',
'RightSquare',
'Login',
'Logout',
'MenuFold',
'MenuUnfold',
'BorderBottom',
'BorderHorizontal',
'BorderInner',
'BorderOuter',
'BorderLeft',
'BorderRight',
'BorderTop',
'BorderVerticle',
'PicCenter',
'PicLeft',
'PicRight',
'RadiusBottomleft',
'RadiusBottomright',
'RadiusUpleft',
'RadiusUpright',
'Fullscreen',
'FullscreenExit',
];
const suggestion = [
'Question',
'QuestionCircle',
'Plus',
'PlusCircle',
'Pause',
'PauseCircle',
'Minus',
'MinusCircle',
'PlusSquare',
'MinusSquare',
'Info',
'InfoCircle',
'Exclamation',
'ExclamationCircle',
'Close',
'CloseCircle',
'CloseSquare',
'Check',
'CheckCircle',
'CheckSquare',
'ClockCircle',
'Warning',
'IssuesClose',
'Stop',
];
const editor = [
'Edit',
'Form',
'Copy',
'Scissor',
'Delete',
'Snippets',
'Diff',
'Highlight',
'AlignCenter',
'AlignLeft',
'AlignRight',
'BgColors',
'Bold',
'Italic',
'Underline',
'Strikethrough',
'Redo',
'Undo',
'ZoomIn',
'ZoomOut',
'FontColors',
'FontSize',
'LineHeight',
'Dash',
'SmallDash',
'SortAscending',
'SortDescending',
'Drag',
'OrderedList',
'UnorderedList',
'RadiusSetting',
'ColumnWidth',
'ColumnHeight',
];
const data = [
'AreaChart',
'PieChart',
'BarChart',
'DotChart',
'LineChart',
'RadarChart',
'HeatMap',
'Fall',
'Rise',
'Stock',
'BoxPlot',
'Fund',
'Sliders',
];
// const logo = [
// 'Android',
// 'Apple',
// 'Windows',
// 'Ie',
// 'Chrome',
// 'Github',
// 'Aliwangwang',
// 'Dingding',
// 'WeiboSquare',
// 'WeiboCircle',
// 'TaobaoCircle',
// 'Html5',
// 'Weibo',
// 'Twitter',
// 'Wechat',
// 'Youtube',
// 'AlipayCircle',
// 'Taobao',
// 'Skype',
// 'Qq',
// 'MediumWorkmark',
// 'Gitlab',
// 'Medium',
// 'Linkedin',
// 'GooglePlus',
// 'Dropbox',
// 'Facebook',
// 'Codepen',
// 'CodeSandbox',
// 'CodeSandboxCircle',
// 'Amazon',
// 'Google',
// 'CodepenCircle',
// 'Alipay',
// 'AntDesign',
// 'AntCloud',
// 'Aliyun',
// 'Zhihu',
// 'Slack',
// 'SlackSquare',
// 'Behance',
// 'BehanceSquare',
// 'Dribbble',
// 'DribbbleSquare',
// 'Instagram',
// 'Yuque',
// 'Alibaba',
// 'Yahoo',
// 'Reddit',
// 'Sketch',
// ];
// 不显示，需要过滤
// const filter = [
// 'AlipaySquare',
// 'AmazonCircle',
// 'AmazonSquare',
// 'BehanceCircle',
// 'CodeSandboxSquare',
// 'CodeSandboxSquare',
// 'CodepenSquare',
// 'DingtalkCircle',
// 'DingtalkSquare',
// 'DribbbleCircle',
// 'DropboxCircle',
// 'DropboxSquare',
// 'Golden',
// 'GoogleCircle',
// 'GoogleSquare',
// 'GooglePlusCircle',
// 'GooglePlusSquare',
// 'GooglePlusSquare',
// 'IeCircle',
// 'IeSquare',
// 'MediumCircle',
// 'MediumSquare',
// 'QqCircle',
// 'QqSquare',
// 'RedditCircle',
// 'RedditSquare',
// 'Signal',
// 'SketchCircle',
// 'SketchSquare',
// 'SlackCircle',
// 'TaobaoSquare',
// 'TwitterCircle',
// 'TwitterSquare',
// 'ZhihuCircle',
// 'ZhihuSquare',
// 'createFromIconfontCN',
// 'default',
// 'getTwoToneColor',
// 'setTwoToneColor',
// ];
const datum = [...direction, ...suggestion, ...editor, ...data];
const iconKeys = datum.map((item) => item + 'Outlined');
export default iconKeys;

14
src/views/system/Menu/index.vue
View File

@ -25,6 +25,7 @@
<AIcon type="PlusOutlined" />新增 <AIcon type="PlusOutlined" />新增
</PermissionButton> </PermissionButton>
<j-button <j-button
v-if="admin"
style="margin-left: 12px" style="margin-left: 12px"
@click="router.push('/system/Menu/Setting')" @click="router.push('/system/Menu/Setting')"
>菜单配置</j-button >菜单配置</j-button
@ -79,10 +80,12 @@
<script setup lang="ts" name="Menu"> <script setup lang="ts" name="Menu">
import PermissionButton from '@/components/PermissionButton/index.vue'; import PermissionButton from '@/components/PermissionButton/index.vue';
import { getMenuTree_api, delMenuInfo_api } from '@/api/system/menu'; import { getMenuTree_api, delMenuInfo_api } from '@/api/system/menu';
import { message } from 'jetlinks-ui-components'; import { message } from 'jetlinks-ui-components';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { useUserInfo } from '@/store/userInfo';
const admin = useUserInfo().userInfos?.type.id === 'admin';
const permission = 'system/Menu'; const permission = 'system/Menu';
@ -108,7 +111,7 @@ const columns = [
search: { search: {
type: 'string', type: 'string',
}, },
width: 220, // width: 220,
}, },
{ {
title: '页面地址', title: '页面地址',
@ -133,7 +136,8 @@ const columns = [
title: '说明', title: '说明',
dataIndex: 'describe', dataIndex: 'describe',
key: 'describe', key: 'describe',
width: 200, ellipsis: true,
// width: 200,
}, },
{ {
title: '创建时间', title: '创建时间',
@ -150,8 +154,9 @@ const columns = [
title: '操作', title: '操作',
dataIndex: 'action', dataIndex: 'action',
key: 'action', key: 'action',
fixed: 'right',
scopedSlots: true, scopedSlots: true,
width: 140, width: 200,
}, },
]; ];
const queryParams = ref({ terms: [] }); const queryParams = ref({ terms: [] });
@ -246,6 +251,7 @@ const table = reactive({
<style lang="less" scoped> <style lang="less" scoped>
.menu-container { .menu-container {
width: 100%;
:deep(.ant-table-cell) { :deep(.ant-table-cell) {
.ant-btn-link { .ant-btn-link {
padding: 0; padding: 0;