refactor(Navbar.vue): 退出样式调整，tagView添加关闭图标，引入字段全局方法。

src/App.vue

@@ -10,8 +10,3 @@ export default {
 }
 </script>
 
-<style>
-body .el-table th.gutter {
-  display: table-cell !important;
-}
-</style>

src/api/system/dict.ts

@@ -0,0 +1,100 @@
+import request from "@utils/request";
+
+
+/**
+ * 获取字典分页列表
+ *
+ * @param queryParams
+ */
+export function listDictByPage(queryParams: object) {
+    return request({
+        url: '/youlai-admin/api/v2/dict/page',
+        method: 'get',
+        params: queryParams
+    })
+}
+
+/**
+ * 新增字典
+ *
+ * @param data
+ */
+export function addDict(data: object) {
+    return request({
+        url: '/youlai-admin/api/v2/dict',
+        method: 'post',
+        data: data
+    })
+}
+
+/**
+ * 修改字典
+ *
+ * @param id
+ * @param data
+ */
+export function updateDict(id: number, data: object) {
+    return request({
+        url: '/youlai-admin/api/v2/dict/' + id,
+        method: 'put',
+        data: data
+    })
+}
+
+
+/**
+ * 获取字典项分页列表
+ *
+ * @param queryParams
+ */
+export function listDictItemsByPage(queryParams: object) {
+    return request({
+        url: '/youlai-admin/api/v2/dict/items/page',
+        method: 'get',
+        params: queryParams
+    })
+}
+
+
+/**
+ * 根据字典编码获取字典项列表
+ *
+ * @param dictCode
+ */
+export function listDictItems(dictCode: string) {
+    return request({
+        url: '/youlai-admin/api/v2/dict/items',
+        method: 'get',
+        params: {dictCode: dictCode}
+    })
+}
+
+
+/**
+ * 新增字典项
+ *
+ * @param data
+ */
+export function addDictItem(data: object) {
+    return request({
+        url: '/youlai-admin/api/v2/dict/items',
+        method: 'post',
+        data: data
+    })
+}
+
+/**
+ * 修改字典项
+ *
+ * @param id
+ * @param data
+ */
+export function updateDictItem(id: number, data: object) {
+    return request({
+        url: '/youlai-admin/api/v2/dict/items/' + id,
+        method: 'put',
+        data: data
+    })
+}
+
+

src/layout/components/Navbar.vue

@@ -96,6 +96,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+
+.el-dropdown-menu__item{
+  display: block!important;
+  line-height: 30px;
+}
+
 .navbar {
   height: 50px;
   overflow: hidden;

src/layout/components/TagsView/index.vue

@@ -13,7 +13,11 @@
           @contextmenu.prevent.native="openMenu(tag,$event)"
       >
         {{ tag.meta.title }}
-        <span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)"/>
+        <span v-if="!isAffix(tag)" @click.prevent.stop="closeSelectedTag(tag)">
+          <el-icon :size="8">
+           <close />
+          </el-icon>
+        </span>
       </router-link>
     </scroll-pane>
     <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
@@ -26,6 +30,9 @@
 </template>
 
 <script lang="ts">
+
+import {Close} from '@element-plus/icons'
+
 import ScrollPane from './ScrollPane.vue'
 import path from 'path-browserify'
 import {useStore} from "@store";
@@ -44,7 +51,7 @@ import {RouteRecordRaw, useRoute, useRouter} from 'vue-router'
 import {TagView} from "@store/interface";
 
 export default defineComponent({
-  components: {ScrollPane},
+  components: {ScrollPane,Close},
   setup() {
     const store = useStore()
     const router = useRouter()

src/main.ts

@@ -1,7 +1,7 @@
-import { createApp } from 'vue'
+import {createApp} from 'vue'
 import App from './App.vue'
 import router from "./router";
-import {store,key} from './store'
+import {store, key} from './store'
 import '@/styles/index.scss'
 
 import ElementPlus from 'element-plus'
@@ -12,23 +12,26 @@ import 'virtual:svg-icons-register';
 
 // @see https://blog.csdn.net/qq_37213281/article/details/121422027
 import * as ElIconModules from '@element-plus/icons'
-
 import '@/permission'
 
-// 全局组件
+
-import  Pagination from '@/components/Pagination/index.vue'
+import Pagination from '@/components/Pagination/index.vue'
+import {listDictItems} from '@/api/system/dict.ts'
 
 
-const app=createApp(App)
+const app = createApp(App)
 
 // 统一注册el-icon图标
-for(let iconName in ElIconModules ){
+for (let iconName in ElIconModules) {
-    app.component(iconName,(ElIconModules as any)[iconName] )
+    app.component(iconName, (ElIconModules as any)[iconName])
 }
 
+// 全局方法
+app.config.globalProperties.$listDictItems = listDictItems
+
 app
-    .component('Pagination',Pagination)
+    .component('Pagination', Pagination) // 全局组件
     .use(router)
-    .use(store,key)
+    .use(store, key)
-    .use(ElementPlus,{locale})
+    .use(ElementPlus, {locale})
     .mount('#app')

src/utils/ruoyi.ts

@@ -1,124 +0,0 @@
-/*
- * @Description:
- * @Autor: scy😊
- * @Date: 2021-02-04 09:08:51
- * @LastEditors: ZY
- * @LastEditTime: 2021-02-23 14:44:09
- */
-// const baseURL = process.env.VUE_APP_BASE_API
-//
-// export function download(fileName: any) {
-//   window.location.href = baseURL + '/common/download?fileName=' + encodeURI(fileName) + '&delete=' + true
-// }
-
-// 添加日期范围
-
-type Params = {[key: string]: any}
-
-export const addDateRange = (params: Params, dateRange: any, propName?: any) => {
-  const search = params
-  search.params = {}
-  if (dateRange !== null && dateRange !== '') {
-    if (typeof (propName) === 'undefined') {
-      search.params.beginTime = dateRange[0]
-      search.params.endTime = dateRange[1]
-    } else {
-      search.params['begin' + propName] = dateRange[0]
-      search.params['end' + propName] = dateRange[1]
-    }
-  }
-  console.log(search)
-  return search
-}
-
-/**
- * 构造树型结构数据
- * @param {*} data 数据源
- * @param {*} id id字段 默认 'id'
- * @param {*} parentId 父节点字段 默认 'parentId'
- * @param {*} children 孩子节点字段 默认 'children'
- * @param {*} rootId 根Id 默认 0
- */
-export const handleTree = (data?: any, id?: any, parentId?: any, children?: any, rootId?: any) => {
-  id = id || 'id'
-  parentId = parentId || 'parentId'
-  children = children || 'children'
-  const parentIds = data.map((item: any) => { return item[parentId] })
-  rootId = rootId || Math.min(...parentIds) || 0
-  // 对源数据深度克隆
-  const cloneData = JSON.parse(JSON.stringify(data))
-  // 循环所有项
-  const treeData = cloneData.filter((father: any) => {
-    const branchArr = cloneData.filter((child: any) => {
-      // 返回每一项的子级数组
-      return father[id] === child[parentId]
-    })
-    if (branchArr.length > 0) {
-      father.children = branchArr
-    }
-    // 返回第一层
-    return father[parentId] === rootId
-  })
-  return treeData !== '' ? treeData : data
-}
-
-// 回显数据字典
-export const selectDictLabel = (datas: Array<any>, value: string) => {
-  const actions: string[] = []
-  Object.keys(datas).some((key) => {
-    if (datas[key].dictValue === value) {
-      actions.push(datas[key].dictLabel)
-      return true
-    }
-  })
-  return actions.join('')
-}
-
-// 转换字符串，undefined,null等转化为""
-export function praseStrEmpty(str: null | undefined) {
-  if (!str || str === undefined || str === null) {
-    return ''
-  }
-  return str
-}
-
-// 日期格式化
-export function parseTime(time: any, pattern: any) {
-  if (arguments.length === 0 || !time) {
-    return null
-  }
-  const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
-  let date
-  if (typeof time === 'object') {
-    date = time
-  } else {
-    if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
-      time = parseInt(time)
-    } else if (typeof time === 'string') {
-      time = time.replace(new RegExp(/-/gm), '/')
-    }
-    if ((typeof time === 'number') && (time.toString().length === 10)) {
-      time = time * 1000
-    }
-    date = new Date(time)
-  }
-  const formatObj = {
-    y: date.getFullYear(),
-    m: date.getMonth() + 1,
-    d: date.getDate(),
-    h: date.getHours(),
-    i: date.getMinutes(),
-    s: date.getSeconds(),
-    a: date.getDay()
-  }
-  const timestr = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result: any, key: any) => {
-    let value = formatObj[key]
-    // Note: getDay() returns 0 on Sunday
-    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
-    if (result.length > 0 && value < 10) {
-      value = '0' + value
-    }
-    return value || 0
-  })
-  return timestr
-}

src/views/system/client/index.vue

@@ -49,7 +49,7 @@
         <template #default="scope">
           <el-button
               type="primary"
-              :icon="Edit"
+              :icon="Plus"
               size="mini"
               circle
               plain
@@ -116,7 +116,7 @@
 <script setup lang="ts">
 import {list, detail, update, add, del} from '@/api/system/client'
 import {Search, Plus, Edit, Refresh, Delete} from '@element-plus/icons'
-import {onMounted, reactive, toRefs, ref, unref} from 'vue'
+import {onMounted, reactive, getCurrentInstance, ref, unref} from 'vue'
 import {ElForm, ElMessage,ElMessageBox} from "element-plus";
 
 const state = reactive({
@@ -261,6 +261,12 @@ function handleDelete(row:any) {
 
 onMounted(() => {
   handleQuery()
+
+  // 全局方法调用
+  const { proxy } = getCurrentInstance();
+  proxy.$listDictItems('gender').then(response=>{
+    console.log('性别字典数据',response.data)
+  })
 })
 
 </script>

src/views/system/dept/index.vue

@@ -262,7 +262,6 @@ import { defineComponent, onMounted, reactive, toRefs, unref, ref } from 'vue'
 import {Search, Plus, Edit, Refresh, Delete} from '@element-plus/icons'
 import { listDept, getDept, delDept, updateDept, addDept } from '@/api/system/dept'
 import treeselect  from '@/components/TreeSelect/Index.vue'
-import { handleTree, parseTime } from '@/utils/ruoyi'
 import { ElForm, ElMessage } from 'element-plus'
 
 export default defineComponent({
@@ -395,7 +394,7 @@ export default defineComponent({
     }
     /** 查询部门下拉树结构 */
     const getTreeselect = () => {
-      treeselect().then(response => {
+      treeselect().then(response=> {
         dataMap.deptOptions = response?.data
         dataMap.originOptions = flatten(response?.data) as any
       })
@@ -417,7 +416,7 @@ export default defineComponent({
       console.log(row.deptId)
       dataMap.deptidfix = row.deptId
 
-      const result = await getDept(row.deptId)
+      const result = await getDept(row.deptId) as any
       if (result?.code === 200) {
         dataMap.formUpdata = result.data
         dataMap.formVal.deptName = result.data.deptName
@@ -473,7 +472,7 @@ export default defineComponent({
     }
     /** 删除按钮操作 */
     const handleDelete = async(row: any) => {
-      const result = await delDept(row.deptId)
+      const result = await delDept(row.deptId) as any
       if (result?.code === 200) {
         getList()
       } else {
@@ -499,7 +498,7 @@ export default defineComponent({
       // })
     })
 
-    return { ...toRefs(dataMap),Search,Plus,Edit,Delete,Refresh,Delete, parseTime,dialogshow, getDeptId, flatten, getTreeselect, formDialog, statusFormat, queryForm, getList, normalizer, handleDelete, cancel, handleQuery, resetQuery, handleAdd, handleUpdate, submitForm }
+    return { ...toRefs(dataMap),Search,Plus,Edit,Delete,Refresh,dialogshow, getDeptId, flatten, getTreeselect, formDialog, statusFormat, queryForm, getList, normalizer, handleDelete, cancel, handleQuery, resetQuery, handleAdd, handleUpdate, submitForm }
   }
 })