From dc5a8f31c9461baa08b66d2a3db916176ffb5521 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=9C=9F=E8=B1=86=E5=93=A5?= <zhanglp15229380174@163.com>
Date: Sat, 6 Aug 2022 02:27:35 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E5=A4=8D=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95=E6=97=A0=E6=B3=95=E9=80=89=E6=8B=A9=E5=9B=BE=E6=A0=87?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.en.md                                 |  15 +-
 src/components/QuickCrud/index.vue           |  11 +-
 src/components/QuickForm/index.vue           | 153 ++++++++++++++++---
 src/layout/components/AiniMenu/index.vue     |   5 +-
 src/layout/components/AiniMenuItem/index.vue |   9 +-
 src/main.ts                                  |  20 ++-
 src/types/form.ts                            |   2 +
 src/views/menu/index.vue                     |  11 +-
 src/views/system/menu/index.vue              |  81 +++++-----
 9 files changed, 232 insertions(+), 75 deletions(-)

diff --git a/README.en.md b/README.en.md
index c943d1a..f6e2dfa 100644
--- a/README.en.md
+++ b/README.en.md
@@ -5,18 +5,22 @@
 
 ## 简介
 
-quick-vue3-admin 是一款免费开源快速搭建中后台系统框架。本框架基于 vite2+element-plus 等最新主流技术并封装了通用的组件方便开发者提高工作效率。后期也会通过版本升级的方式来维护并更新，使开发者拥有一款长期并且稳定的脚手架。
+quick-vue3-admin 是一款免费开源快速搭建中后台系统框架。本框架基于 vite2、vue3、element-plus、pinia 等最新主流技术并封装了通用的组件方便开发者提高工作效率。后期也会通过版本升级的方式来维护并更新，使开发者拥有一款长期并且稳定的脚手架。本团队还提供了基于 quick 框架开发的各类业务项目，如有相关需求联系管理员。
 
 ## 软件特色
 
-1. 使用前端最新技术栈 vite2、vue3 和 typescript
+1. 使用 vite2、vue3、element-plus、pinia 和 typescript 等前言技术
 2. 封装了通用的组件
 3. 提供了系统管理常用功能模块
 4. 提供权限管理模块
 5. 动态菜单技术
 6. 动态路由技术
-7. 前后端分离
-8. 官方提供稳定并长期维护的后端接口项目
+7. 使用 JWT 鉴权
+8. 使用中间件异常处理
+9. 前后端分离
+10. 提供免费帮助通道
+11. 免费提供框架演示环境
+12. 官方提供稳定并长期维护的 node 轻后端接口项目
 
 ## 预览
 
@@ -76,7 +80,7 @@ pnpm run build
 
 ## 寻求帮助
 
-1. 百度尝试解决
+1. 查看官方帮助文档
 2. 发起 Issue
 3. 加 quick 框架 QQ 群：558795174
 
@@ -93,3 +97,4 @@ pnpm run build
 5.  点个 star 把
 6.  如果你觉得这个项目对你有帮助，你可以帮作者买一杯咖啡表示支持!
     ![donate](./public/payImages/alipay.jpg)
+7.  如需加入开源，请联系管理员
diff --git a/src/components/QuickCrud/index.vue b/src/components/QuickCrud/index.vue
index 3d3a430..35ac071 100644
--- a/src/components/QuickCrud/index.vue
+++ b/src/components/QuickCrud/index.vue
@@ -64,6 +64,11 @@ const props = defineProps({
       return []
     },
   },
+  formInline: {
+    type: Boolean,
+    default: false,
+  },
+
   leftTree: {
     type: [Boolean, Object],
     default: false,
@@ -113,12 +118,14 @@ const {
   dialogTitle,
   formModel,
   formItems,
+  formInline,
 } = toRefs(props) as {
   searchFormModel: Ref<boolean | any>
   searchFormItems: Ref<FormItem[]>
   dialogTitle: Ref<boolean | any>
   formModel: Ref<any>
   formItems: Ref<FormItem[]>
+  formInline: Ref<boolean>
   leftTree: Ref<any>
   leftTreeRefresh: Ref<boolean>
   tableData: Ref<any>
@@ -518,7 +525,8 @@ onActivated(() => {
         <el-dialog
           v-model="dialogFormVisible"
           :title="title"
-          width="35%"
+          :width="formInline ? '60%' : '35%'"
+          :append-to-body="true"
           :destroy-on-close="true"
           @close="handleCancel()"
         >
@@ -526,6 +534,7 @@ onActivated(() => {
             ref="quickFormRef"
             :model="formModel"
             :form-items="formItems"
+            :form-inline="formInline"
             :form-type="dialogFormType"
             :hidden-action="true"
             @submit="handleSubmit"
diff --git a/src/components/QuickForm/index.vue b/src/components/QuickForm/index.vue
index 725de72..59c520f 100644
--- a/src/components/QuickForm/index.vue
+++ b/src/components/QuickForm/index.vue
@@ -1,8 +1,9 @@
 <script lang="ts" setup>
 import { defineExpose, defineProps, toRefs, Ref, defineEmits, ref } from 'vue'
-import { Plus } from '@element-plus/icons-vue'
-import { FormInstance } from 'element-plus'
+import { Plus, Setting } from '@element-plus/icons-vue'
+import { FormInstance, TabsPaneContext } from 'element-plus'
 import { FormItem } from '@/types/form'
+import elementPlusIcons from '@/config/elementPlusIcon.json'
 
 /**
  * form
@@ -24,7 +25,7 @@ const props = defineProps({
       return []
     },
   },
-  inline: {
+  formInline: {
     type: Boolean,
     default: false,
   },
@@ -44,25 +45,35 @@ const props = defineProps({
 /**
  * props toRefs
  */
-const {
-  model,
-  inline = false,
-  formItems,
-  formType,
-  actionSlot = false,
-  hiddenAction = false,
-} = toRefs(props) as {
-  model: Ref<any>
-  inline: Ref<boolean>
-  formItems: Ref<FormItem[]>
-  formType: Ref<string>
-  actionSlot: Ref<boolean>
-  hiddenAction: Ref<boolean>
-}
+const { model, formInline, formItems, formType, actionSlot, hiddenAction } =
+  toRefs(props) as {
+    model: Ref<any>
+    formInline: Ref<boolean>
+    formItems: Ref<FormItem[]>
+    formType: Ref<string>
+    actionSlot: Ref<boolean>
+    hiddenAction: Ref<boolean>
+  }
+
 /**
  * emits
  */
 const emits = defineEmits(['submit', 'clear'])
+const iconVisible = ref(false)
+/**
+ * tabs
+ */
+const activeName = ref('element')
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+const selectIcon = (item, option) => {
+  item.select(option.value)
+  iconVisible.value = false
+}
+const iconClick = () => {
+  iconVisible.value = true
+}
 /**
  * 函数
  */
@@ -75,7 +86,7 @@ const handleClear = () => {
 defineExpose({ handleSubmit })
 </script>
 <template>
-  <el-form ref="formRef" :model="model" :inline="inline" size="default">
+  <el-form ref="formRef" :model="model" :inline="formInline" size="default">
     <template v-for="(item, index) in formItems" :key="index">
       <el-form-item
         v-if="
@@ -94,6 +105,7 @@ defineExpose({ handleSubmit })
           <el-select
             v-model="model[item.vModel]"
             :placeholder="item.placeholder"
+            :style="{ width: formInline ? '400px' : '100%' }"
             :disabled="
               (formType === 'add' && item.addDisabled) ||
               (formType === 'edit' && item.editDisabled) ||
@@ -115,6 +127,7 @@ defineExpose({ handleSubmit })
             :props="{
               expandTrigger: 'hover',
             }"
+            :style="{ width: formInline ? '400px' : '100%' }"
             @change="item.change"
           />
         </template>
@@ -125,6 +138,7 @@ defineExpose({ handleSubmit })
             type="textarea"
             :autocomplete="item.autocomplete"
             :placeholder="item.placeholder"
+            :style="{ width: formInline ? '400px' : '100%' }"
             :readonly="
               (formType === 'add' && item.addReadonly) ||
               (formType === 'edit' && item.editReadonly) ||
@@ -139,6 +153,7 @@ defineExpose({ handleSubmit })
             :placeholder="item.placeholder"
             type="password"
             show-password
+            :style="{ width: formInline ? '400px' : '100%' }"
             :readonly="
               (formType === 'add' && item.addReadonly) ||
               (formType === 'edit' && item.editReadonly) ||
@@ -153,6 +168,7 @@ defineExpose({ handleSubmit })
             :show-file-list="false"
             :on-success="item.success"
             :before-upload="item.beforeUpload"
+            :style="{ width: formInline ? '400px' : '100%' }"
           >
             <img v-if="item.imgUrl" :src="item.imgUrl" class="avatar" />
             <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
@@ -164,6 +180,7 @@ defineExpose({ handleSubmit })
             type="number"
             :autocomplete="item.autocomplete"
             :placeholder="item.placeholder"
+            :style="{ width: formInline ? '400px' : '100%' }"
             :readonly="
               (formType === 'add' && item.addReadonly) ||
               (formType === 'edit' && item.editReadonly) ||
@@ -184,6 +201,7 @@ defineExpose({ handleSubmit })
             :data="item.options"
             :check-strictly="true"
             :render-after-expand="false"
+            :style="{ width: formInline ? '400px' : '100%' }"
             :disabled="
               (formType === 'add' && item.addDisabled) ||
               (formType === 'edit' && item.editDisabled) ||
@@ -191,11 +209,80 @@ defineExpose({ handleSubmit })
             "
           />
         </template>
+        <template v-else-if="item.type == 'icon'">
+          <!-- v-model:visible="iconVisible" -->
+          <el-popover placement="bottom" width="1000px" trigger="click">
+            <template #reference>
+              <el-input
+                v-model="model[item.vModel]"
+                :autocomplete="item.autocomplete"
+                :placeholder="item.placeholder"
+                :style="{ width: formInline ? '400px' : '100%' }"
+                :readonly="
+                  (formType === 'add' && item.addReadonly) ||
+                  (formType === 'edit' && item.editReadonly) ||
+                  formType === 'detail'
+                "
+                @click="iconClick()"
+              >
+                <template #append>
+                  <el-icon>
+                    <component :is="model[item.vModel]" />
+                  </el-icon>
+                </template>
+              </el-input>
+            </template>
+            <el-tabs
+              v-model="activeName"
+              class="demo-tabs"
+              @tab-click="handleClick"
+            >
+              <el-tab-pane label="element官方" name="element">
+                <ul class="icon-list">
+                  <li
+                    v-for="(option, index) in elementPlusIcons"
+                    :key="index"
+                    class="icon-item"
+                    @click="selectIcon(item, option)"
+                  >
+                    <span class="svg-icon">
+                      <el-icon style="font-size: 20px">
+                        <component :is="option.value" />
+                      </el-icon>
+                      <span style="margin-top: 8px">
+                        {{ option.label }}
+                      </span>
+                    </span>
+                  </li>
+                </ul>
+              </el-tab-pane>
+              <el-tab-pane label="自定义" name="custorm">
+                <ul class="icon-list">
+                  <li
+                    v-for="(option, index) in item.options"
+                    :key="index"
+                    class="icon-item"
+                  >
+                    <span class="svg-icon">
+                      <el-icon style="font-size: 20px">
+                        <component :is="option.value" />
+                      </el-icon>
+                      <span style="margin-top: 8px">
+                        {{ option.label }}
+                      </span>
+                    </span>
+                  </li>
+                </ul>
+              </el-tab-pane>
+            </el-tabs>
+          </el-popover>
+        </template>
         <template v-else>
           <el-input
             v-model="model[item.vModel]"
             :autocomplete="item.autocomplete"
             :placeholder="item.placeholder"
+            :style="{ width: formInline ? '400px' : '100%' }"
             :readonly="
               (formType === 'add' && item.addReadonly) ||
               (formType === 'edit' && item.editReadonly) ||
@@ -239,4 +326,32 @@ defineExpose({ handleSubmit })
   height: 178px;
   text-align: center;
 }
+.icon-list {
+  overflow-y: scroll;
+  list-style: none;
+  padding: 0 !important;
+  border-top: 1px solid var(--el-border-color);
+  border-left: 1px solid var(--el-border-color);
+  border-radius: 4px;
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  height: 300px;
+  .icon-item {
+    text-align: center;
+    color: var(--el-text-color-regular);
+    height: 90px;
+    font-size: 13px;
+    border-right: 1px solid var(--el-border-color);
+    border-bottom: 1px solid var(--el-border-color);
+    transition: background-color var(--el-transition-duration);
+  }
+  .svg-icon {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    cursor: pointer;
+  }
+}
 </style>
diff --git a/src/layout/components/AiniMenu/index.vue b/src/layout/components/AiniMenu/index.vue
index 927ab26..376292b 100644
--- a/src/layout/components/AiniMenu/index.vue
+++ b/src/layout/components/AiniMenu/index.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { HomeFilled } from '@element-plus/icons-vue'
 import { computed, watch, ref } from 'vue'
 import { useAppStore } from '@/store/modules/app'
 import { useUserStore } from '@/store/modules/user'
@@ -69,7 +68,9 @@ watch(activeMenuId, (val: string) => {
     @close="handleClose"
   >
     <el-menu-item index="/home" :router="true" @click="homeMenuClick">
-      <el-icon><HomeFilled /></el-icon>
+      <el-icon>
+        <component :is="'home-filled'" />
+      </el-icon>
       <span>首页</span>
     </el-menu-item>
     <aini-menu-item :menu-list="menuList"></aini-menu-item>
diff --git a/src/layout/components/AiniMenuItem/index.vue b/src/layout/components/AiniMenuItem/index.vue
index f0e9a54..d9de45f 100644
--- a/src/layout/components/AiniMenuItem/index.vue
+++ b/src/layout/components/AiniMenuItem/index.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
  import { Ref, defineProps, toRefs } from 'vue'
-import { Setting } from '@element-plus/icons-vue'
 import { useTabStore } from '@/store/modules/tab'
 import { Menubar } from '@/types/menu'
 import { Tab } from '@/types/tab'
@@ -48,7 +47,9 @@ const menuClick = (item:Menubar) => {
     <template v-if="item.children && item.children.length > 0">
       <el-sub-menu :index="item.id.toString()">
         <template #title>
-          <el-icon><Setting /></el-icon>
+          <el-icon>
+            <component :is="item.icon" />
+          </el-icon>
           <span>{{ item.menuName }}</span>
         </template>
         <aini-menu-item :menu-list="item.children"></aini-menu-item>
@@ -57,7 +58,9 @@ const menuClick = (item:Menubar) => {
     <template v-else>
       <el-menu-item :index="item.id.toString()" @click="menuClick(item)">
         <template #title>
-          <el-icon><Setting /></el-icon>
+          <el-icon>
+            <component :is="item.icon" />
+          </el-icon>
           <span>{{ item.menuName }}</span>
         </template>
       </el-menu-item>
diff --git a/src/main.ts b/src/main.ts
index 0377ac2..1cce46c 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,6 +3,7 @@ import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
 import en from 'element-plus/es/locale/lang/en'
+import * as Elicons from '@element-plus/icons-vue'
 import 'quick-vue3-ui/dist/style.css'
 import * as echarts from 'echarts'
 import App from './App.vue'
@@ -14,12 +15,15 @@ import { useAppStore } from './store/modules/app'
 const app = createApp(App)
 const appStore = useAppStore(pinia)
 
-app.use(ElementPlus, {
-  locale: appStore.getLanguage === 'zh' ? zhCn : en,
-})
-app.use(pinia)
-app.use(router)
-app.use(i18n)
 app.config.globalProperties.$echarts = echarts
-
-app.mount('#app')
+Object.keys(Elicons).forEach((key) => {
+  app.component(key, Elicons[key])
+})
+app
+  .use(ElementPlus, {
+    locale: appStore.getLanguage === 'zh' ? zhCn : en,
+  })
+  .use(pinia)
+  .use(router)
+  .use(i18n)
+  .mount('#app')
diff --git a/src/types/form.ts b/src/types/form.ts
index ca9ec75..c53dc30 100644
--- a/src/types/form.ts
+++ b/src/types/form.ts
@@ -29,9 +29,11 @@ export interface FormItem {
   imgUrl?: string
   prop?: string
   rules?: any
+  width?: string
   maxLength?: string
   format?: () => any
   change?: (value: string) => void
+  select?: (value: string) => void
   success?: () => void
   beforeUpload?: () => void
 }
diff --git a/src/views/menu/index.vue b/src/views/menu/index.vue
index c4da2c0..48457a6 100644
--- a/src/views/menu/index.vue
+++ b/src/views/menu/index.vue
@@ -110,8 +110,17 @@ const formItems = reactive<Array<FormItem>>([
     labelWidth: '80px',
     vModel: 'icon',
     placeholder: '菜单图标',
-    prop: 'icon',
+    type: 'test',
+    options: parentTreeList,
   },
+  // {
+  //   label: '菜单图标',
+  //   labelWidth: '80px',
+  //   vModel: 'icon',
+  //   placeholder: '菜单图标',
+  //   prop: 'icon',
+  //   type: 'icon',
+  // },
   {
     label: '排序',
     labelWidth: '80px',
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index c4da2c0..a062c19 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -8,6 +8,7 @@ import { FormItem } from '@/types/form'
 import { Options } from '@/types/options.js'
 import { getMenuList, addMenu, updateMenu, deleteMenu } from '@/api/menu'
 import QuickCrud from '@/components/QuickCrud/index.vue'
+import elementPlusIcons from '@/config/custormIcons.json'
 
 const dataList = reactive<Array<Menu>>([])
 const parentTreeList = reactive<Array<Options>>([])
@@ -42,6 +43,7 @@ const formItems = reactive<Array<FormItem>>([
     placeholder: '菜单编号',
     editReadonly: true,
     prop: 'menuId',
+    width: '400px',
     rules: [
       {
         required: true,
@@ -56,6 +58,7 @@ const formItems = reactive<Array<FormItem>>([
     vModel: 'menuName',
     placeholder: '菜单名称',
     prop: 'menuName',
+    width: '400px',
     rules: [
       {
         required: true,
@@ -64,18 +67,6 @@ const formItems = reactive<Array<FormItem>>([
       },
     ],
   },
-  {
-    label: '路由',
-    labelWidth: '80px',
-    vModel: 'path',
-    placeholder: '路由',
-  },
-  {
-    label: '视图',
-    labelWidth: '80px',
-    vModel: 'viewPath',
-    placeholder: '视图',
-  },
   {
     label: '菜单类型',
     labelWidth: '80px',
@@ -83,6 +74,7 @@ const formItems = reactive<Array<FormItem>>([
     placeholder: '菜单类型',
     prop: 'menuType',
     type: 'select',
+    width: '400px',
     options: [
       {
         label: '目录',
@@ -111,6 +103,26 @@ const formItems = reactive<Array<FormItem>>([
     vModel: 'icon',
     placeholder: '菜单图标',
     prop: 'icon',
+    type: 'icon',
+    options: elementPlusIcons,
+    width: '400px',
+    select: (val) => {
+      formModel.icon = val
+    },
+  },
+  {
+    label: '路由',
+    labelWidth: '80px',
+    vModel: 'path',
+    placeholder: '路由',
+    width: '400px',
+  },
+  {
+    label: '视图',
+    labelWidth: '80px',
+    vModel: 'viewPath',
+    placeholder: '视图',
+    width: '400px',
   },
   {
     label: '排序',
@@ -118,16 +130,8 @@ const formItems = reactive<Array<FormItem>>([
     vModel: 'sort',
     placeholder: '排序',
     prop: 'sort',
+    width: '400px',
   },
-  // {
-  //   label: '父级菜单',
-  //   labelWidth: '80px',
-  //   vModel: 'pid',
-  //   placeholder: '父级菜单',
-  //   prop: 'pid',
-  //   type: 'select',
-  //   options: [],
-  // },
   {
     label: '父级菜单',
     labelWidth: '80px',
@@ -135,22 +139,8 @@ const formItems = reactive<Array<FormItem>>([
     placeholder: '父级菜单',
     type: 'tree',
     options: parentTreeList,
+    width: '400px',
   },
-  {
-    label: '外链',
-    labelWidth: '80px',
-    vModel: 'link',
-    placeholder: '外链',
-    prop: 'link',
-    type: 'switch',
-  },
-  {
-    label: '链接地址',
-    labelWidth: '80px',
-    vModel: 'linkUrl',
-    placeholder: '链接地址',
-  },
-
   {
     label: '是否启用',
     labelWidth: '80px',
@@ -158,6 +148,7 @@ const formItems = reactive<Array<FormItem>>([
     placeholder: '是否启用',
     prop: 'enabled',
     type: 'switch',
+    width: '400px',
   },
   {
     label: '是否显示',
@@ -166,6 +157,23 @@ const formItems = reactive<Array<FormItem>>([
     placeholder: '是否显示',
     prop: 'status',
     type: 'switch',
+    width: '400px',
+  },
+  {
+    label: '外链',
+    labelWidth: '80px',
+    vModel: 'link',
+    placeholder: '外链',
+    prop: 'link',
+    type: 'switch',
+    width: '400px',
+  },
+  {
+    label: '链接地址',
+    labelWidth: '80px',
+    vModel: 'linkUrl',
+    placeholder: '链接地址',
+    width: '400px',
   },
 ])
 const handleFormSubmit = (form: Menu, done: any) => {
@@ -321,6 +329,7 @@ const load = () => {
 </script>
 <template>
   <quick-crud
+    :form-inline="true"
     :dialog-title="dialogTitle"
     :form-model="formModel"
     :form-items="formItems"
-- 
Gitee