From 0ec07a4d731d3d31f3571fc17498cf40f882a84a Mon Sep 17 00:00:00 2001
From: jackhoo_98 <jackhoo_98@foxmail.com>
Date: Fri, 31 Mar 2023 15:55:12 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20bug#10847=20=E4=BF=AE=E5=A4=8D=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95=E7=AE=A1=E7=90=86=E9=83=A8=E5=88=86bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/Menu/Detail/BasicInfo.vue    |   1 -
 src/views/system/Menu/Detail/ButtonMange.vue  |  22 +-
 .../Menu/components/ChooseIconDialog.vue      |  34 +--
 src/views/system/Menu/components/fields.ts    | 246 ++++++++++++++++++
 src/views/system/Menu/index.vue               |  14 +-
 5 files changed, 275 insertions(+), 42 deletions(-)
 create mode 100644 src/views/system/Menu/components/fields.ts

diff --git a/src/views/system/Menu/Detail/BasicInfo.vue b/src/views/system/Menu/Detail/BasicInfo.vue
index 025a1d92..8c4ebeb4 100644
--- a/src/views/system/Menu/Detail/BasicInfo.vue
+++ b/src/views/system/Menu/Detail/BasicInfo.vue
@@ -258,7 +258,6 @@
 
 <script setup lang="ts">
 import PermissionButton from '@/components/PermissionButton/index.vue';
-
 import { FormInstance, message } from 'ant-design-vue';
 import ChooseIconDialog from '../components/ChooseIconDialog.vue';
 import PermissChoose from '../components/PermissChoose.vue';
diff --git a/src/views/system/Menu/Detail/ButtonMange.vue b/src/views/system/Menu/Detail/ButtonMange.vue
index 77d8f618..7f37467b 100644
--- a/src/views/system/Menu/Detail/ButtonMange.vue
+++ b/src/views/system/Menu/Detail/ButtonMange.vue
@@ -63,26 +63,29 @@
 
 <script setup lang="ts">
 import PermissionButton from '@/components/PermissionButton/index.vue';
-
 import ButtonAddDialog from '../components/ButtonAddDialog.vue';
-
 import { getMenuInfo_api, saveMenuInfo_api } from '@/api/system/menu';
 import { message } from 'jetlinks-ui-components';
 
 const permission = 'system/Menu';
 // 路由
 const route = useRoute();
-const routeParams = {
+const routeParams = reactive({
     id: route.params.id === ':id' ? '' : (route.params.id as string),
     ...route.query,
-};
+});
+const paramsId = ref('');
 
 // 弹窗相关
 const selectItem = ref<any>({});
 const dialogVisible = ref(false);
 const dialogTitle = ref<'查看' | '新增' | '编辑'>('新增');
 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 };
     dialogTitle.value = mode;
     dialogVisible.value = true;
@@ -147,6 +150,15 @@ type tableDataItem = {
     description?: string;
     permissions: object[];
 };
+
+watch(
+    () => route.params.id,
+    (value) => {
+        if (!!value) {
+            paramsId.value = value;
+        }
+    },
+);
 </script>
 
 <style lang="less" scoped>
diff --git a/src/views/system/Menu/components/ChooseIconDialog.vue b/src/views/system/Menu/components/ChooseIconDialog.vue
index 3f9f8c74..05181209 100644
--- a/src/views/system/Menu/components/ChooseIconDialog.vue
+++ b/src/views/system/Menu/components/ChooseIconDialog.vue
@@ -10,6 +10,7 @@
             <j-radio-button
                 v-for="typeStr in iconKeys"
                 :value="typeStr"
+                :key="typeStr"
                 :class="{ active: selected === typeStr }"
             >
                 <AIcon :type="typeStr" />
@@ -19,6 +20,7 @@
 </template>
 
 <script setup lang="ts">
+import iconKeys from './fields';
 const emits = defineEmits(['confirm', 'update:visible']);
 const props = defineProps<{
     visible: boolean;
@@ -28,38 +30,6 @@ const confirm = () => {
     emits('confirm', selected.value);
     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>('');
 </script>
diff --git a/src/views/system/Menu/components/fields.ts b/src/views/system/Menu/components/fields.ts
new file mode 100644
index 00000000..4297d200
--- /dev/null
+++ b/src/views/system/Menu/components/fields.ts
@@ -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;
diff --git a/src/views/system/Menu/index.vue b/src/views/system/Menu/index.vue
index 021a0f6c..4a330446 100644
--- a/src/views/system/Menu/index.vue
+++ b/src/views/system/Menu/index.vue
@@ -25,6 +25,7 @@
                             <AIcon type="PlusOutlined" />新增
                         </PermissionButton>
                         <j-button
+                            v-if="admin"
                             style="margin-left: 12px"
                             @click="router.push('/system/Menu/Setting')"
                             >菜单配置</j-button
@@ -79,10 +80,12 @@
 
 <script setup lang="ts" name="Menu">
 import PermissionButton from '@/components/PermissionButton/index.vue';
-
 import { getMenuTree_api, delMenuInfo_api } from '@/api/system/menu';
 import { message } from 'jetlinks-ui-components';
 import dayjs from 'dayjs';
+import { useUserInfo } from '@/store/userInfo';
+
+const admin = useUserInfo().userInfos?.type.id === 'admin';
 
 const permission = 'system/Menu';
 
@@ -108,7 +111,7 @@ const columns = [
         search: {
             type: 'string',
         },
-        width: 220,
+        // width: 220,
     },
     {
         title: '页面地址',
@@ -133,7 +136,8 @@ const columns = [
         title: '说明',
         dataIndex: 'describe',
         key: 'describe',
-        width: 200,
+        ellipsis: true,
+        // width: 200,
     },
     {
         title: '创建时间',
@@ -150,8 +154,9 @@ const columns = [
         title: '操作',
         dataIndex: 'action',
         key: 'action',
+        fixed: 'right',
         scopedSlots: true,
-        width: 140,
+        width: 200,
     },
 ];
 const queryParams = ref({ terms: [] });
@@ -246,6 +251,7 @@ const table = reactive({
 
 <style lang="less" scoped>
 .menu-container {
+    width: 100%;
     :deep(.ant-table-cell) {
         .ant-btn-link {
             padding: 0;