tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
有来技术
2021-12-07 00:23:27 +08:00
parent a021f3e5e5
commit 2aee00631e
8 changed files with 141 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/App.vue
View File

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

100
src/api/system/dict.ts Normal file
View File

@@ -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
})
}

6
src/layout/components/Navbar.vue
View File

@@ -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;

11
src/layout/components/TagsView/index.vue
View File

@@ -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()

25
src/main.ts
View File

@@ -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 ){
app.component(iconName,(ElIconModules as any)[iconName] )
for (let iconName in ElIconModules) {
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(ElementPlus,{locale})
.use(store, key)
.use(ElementPlus, {locale})
.mount('#app')

124
src/utils/ruoyi.ts
View File

@@ -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
}

10
src/views/system/client/index.vue
View File

@@ -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>

9
src/views/system/dept/index.vue
View File

@@ -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 }
}
})