tangxuan
/
yy_rms_39zhiyao_duizhao
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(src/views/shortcut): 新增快捷方式设置

Browse Source
duizhaopin_ui
duan 2 years ago
parent f6e876f551
commit 139355c05c
6 changed files with 302 additions and 1 deletions
Show Stats Download Patch File Download Diff File

1
package.json
Unescape View File

@ -26,6 +26,7 @@
"px2rem-loader": "^0.1.9", "px2rem-loader": "^0.1.9",
"vue": "2.6.10", "vue": "2.6.10",
"vue-router": "3.0.6", "vue-router": "3.0.6",
"vuedraggable": "^2.24.3",
"vuex": "3.1.0", "vuex": "3.1.0",
"vuex-persistedstate": "^4.1.0" "vuex-persistedstate": "^4.1.0"
}, },

2
src/icons/svg/关闭.svg
Unescape View File

@ -0,0 +1,2 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1660629901763" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3256" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
</style></defs><path d="M851.408 715.648L647.76 512l203.648-203.648-135.76-135.76L512 376.24 308.352 172.592l-135.76 135.76L376.24 512 172.592 715.648l135.76 135.76L512 647.76l203.648 203.648z" fill="#ffffff" p-id="3257"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 902 B

2
src/icons/svg/加号.svg
Unescape View File

@ -0,0 +1,2 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1660631934752" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2573" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
</style></defs><path d="M867.7 423.8H599.8V155.9c0-49.3-40-89.3-89.3-89.3s-89.3 40-89.3 89.3v267.9H153.3c-49.3 0-89.3 40-89.3 89.3s40 89.3 89.3 89.3h267.9v267.9c0 49.3 40 89.3 89.3 89.3s89.3-40 89.3-89.3V602.4h267.9c49.3 0 89.3-40 89.3-89.3s-40-89.3-89.3-89.3z" p-id="2574" fill="#ffffff"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 970 B

7
src/router/index.js
Unescape View File

@ -42,8 +42,15 @@ export const constantRoutes = [
component: () => import('@/views/home/index'), component: () => import('@/views/home/index'),
hidden: true hidden: true
}, },
{
path: '/shortcut',
name: 'Shortcut',
component: () => import('@/views/shortcut/index'),
hidden: true
},
{ {
path: '/userinfo', path: '/userinfo',
redirect: '/userinfo/index',
component: Layout, component: Layout,
hidden: true, hidden: true,
children: [ children: [

7
src/views/home/index.vue
Unescape View File

@ -14,10 +14,14 @@
<div key="5" class="home-pic-item" @click="picClick('user')"><img src="@/assets/2-主界面/用户管理.png" alt=""></div> <div key="5" class="home-pic-item" @click="picClick('user')"><img src="@/assets/2-主界面/用户管理.png" alt=""></div>
</div> </div>
<div class="home-menu"> <div class="home-menu">
<div v-for="item in 9" :key="item" class="home-menu-item"> <div v-for="item in 8" :key="item" class="home-menu-item">
<div class="home-menu-item-img"><img src="@/assets/2-主界面/库存盘点.png" alt=""></div> <div class="home-menu-item-img"><img src="@/assets/2-主界面/库存盘点.png" alt=""></div>
<div class="home-menu-item-text">库存盘点</div> <div class="home-menu-item-text">库存盘点</div>
</div> </div>
<div class="home-menu-item" @click="$router.push('/shortcut')">
<div class="home-menu-item-img"><img src="@/assets/2-主界面/更多.png" alt=""></div>
<div class="home-menu-item-text">更多</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -91,6 +95,7 @@ export default {
} }
} }
.home-menu-item-text{ .home-menu-item-text{
text-align: center;
font-size: 1.75rem; font-size: 1.75rem;
font-weight: 400; font-weight: 400;
color: #606266; color: #606266;

284
src/views/shortcut/index.vue
Unescape View File

@ -0,0 +1,284 @@
<template>
<div>
<div class="home-top">
<div class="home-top-left"> <img src="@/assets/2-主界面/logo.png" alt=""> </div>
<div class="home-top-mid"><img src="@/assets/rms/主界面-黑-80px.png" alt=""></div>
<div class="home-top-right"><img class="home-top-right-img" src="@/assets/2-主界面/关闭.png" alt=""></div>
</div>
<div class="content-container-text">
<div class="title"><div class="return" @click="$router.push('/')"><i class="el-icon-arrow-left" /> 返回</div>快捷方式设置</div>
<div class="content">
<div class="content-item">
<div class="sub-title">已选择快捷方式 <span class="sub-title-num">（已选7/7）</span></div>
<draggable :list="items" class="items">
<li v-for="(item,index) in items" :key="item.id" class="item">
<div class="item-container">
<svg-icon icon-class="关闭" class="opt-icon" @click="handleDel(index)" />
<div class="item-img">
<img src="@/assets/2-主界面/库存盘点.png" alt="">
</div>
<el-tooltip :content="item.name" :disabled="item.name.length < 5" placement="top" effect="light">
<div class="item-title">{{ item.name }}</div>
</el-tooltip>
</div>
</li>
</draggable>
<div class="bottom">
<div class="bottom-desc">按住拖拽，调整顺序</div>
<div class="bottom-opt"><el-button type="primary" @click="handleEnable">应用</el-button></div>
</div>
</div>
<div class="content-item item-right">
<div v-for="(item,index) in itemList" :key="item.id + 'l'">
<div class="sub-title">{{ item.title }}</div>
<ul class="items-right">
<li v-for="(it,idx) in item.items" :key="idx +'' + index" class="item">
<div class="item-container">
<svg-icon icon-class="加号" class="opt-icon opt-right" @click="handleAdd(index,idx)" />
<div class="item-img">
<img src="@/assets/2-主界面/库存盘点.png" alt="">
</div>
<el-tooltip :content="it.name" :disabled="it.name.length < 5" placement="top" effect="light">
<div class="item-title">{{ it.name }}</div>
</el-tooltip>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import draggable from 'vuedraggable'
export default {
name: 'Shortcut',
components: {
draggable
},
data() {
return {
items: [
{ name: '试剂入库', id: 0 },
{ name: '试剂领用', id: 1 },
{ name: '试剂管理', id: 2 }
],
itemList: [
{
id: 0,
title: '试剂管理',
items: [
{ name: '试剂入库试', id: 0 },
{ name: '试剂领用', id: 1 },
{ name: '试剂管理', id: 2 },
{ name: '试剂入库', id: 0 },
{ name: '试剂领用', id: 1 },
{ name: '试剂管理', id: 2 }
]
},
{
id: 1,
title: '标准品管理',
items: [
{ name: '试剂入库', id: 0 },
{ name: '试剂领用', id: 1 },
{ name: '试剂管理', id: 2 }
]
},
{
id: 2,
title: '用户管理',
items: [
{ name: '试剂入库', id: 0 },
{ name: '试剂领用', id: 1 },
{ name: '试剂管理', id: 2 }
]
}
]
}
},
methods: {
handleEnable() {
console.log(this.items)
},
handleAdd(index, idx) {
const item = this.itemList[index].items.splice(idx, 1)
this.items.push(...item)
},
handleDel(index) {
const item = this.items.splice(index, 1)
const idx = 0
this.itemList[idx].items.push(...item)
}
}
}
</script>
<style scoped>
.title{
font-size: 28px;
font-weight: bold;
color: #303133;
text-align: center;
}
.content-container-text{
padding: 2rem 1rem 2rem 1rem;
height: calc(100vh - 6rem);
background: linear-gradient(180deg, #F3F5F9 0%, #D3D9E7 100%);
}
.return {
font-size: 20px;
font-weight: 400;
color: #303133;
float: left;
}
.content{
display: flex;
/*height: calc( 100vh - 200px) ;*/
height: 77vh;
margin-top: 2rem;
}
.content-item{
margin: 1rem;
width: 50%;
background: rgba(255,255,255,0.0800);
border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
opacity: 1;
border: 0.0625rem solid #FFFFFF;
padding: 2rem;
}
.sub-title{
font-size: 1.25rem;
font-weight: bold;
color: #303133;
line-height: 0;
}
.sub-title-num{
font-size: 1rem;
font-weight: 400;
color: #909399;
}
.items{
/*height: calc( 100vh - 270px);*/
height: 60vh;
margin-top: 2rem;
list-style: none;
overflow-y: auto;
padding: 0;
}
.bottom{
display: flex;
justify-content: space-between;
align-items: center;
}
.item-img img{
height: 5rem;
}
.item-title{
font-size: 20px;
font-weight: 400;
color: #606266;
margin-top: 0.5rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.item-container{
margin: 0 1rem 1rem 1rem;
text-align: center;
}
.item{
float: left;
background: rgba(255,255,255,0.2000);
border-radius: 4px 4px 4px 4px;
opacity: 1;
border: 2px solid #FFFFFF;
height: 9.5rem;
width: 7.5rem;
margin: 1rem;
}
.opt-icon{
position: relative;
top: -10px;
right: -55px;
background: #C0C4CC;
border-radius: 50%;
padding: 0.1rem;
}
.item-right {
overflow-y: auto;
}
.items-right{
margin-top: 2rem;
list-style: none;
overflow-y: auto;
padding: 0;
}
.opt-right{
background: #409EFF;
}
</style>
<style lang="scss" scoped>
.home-top{
height: 6rem;
background: #FFFFFF;
display: flex;
align-items: center;
justify-content: space-between;
margin-right: 2rem;
margin-left: 2rem;
.home-top-left{
img{
height: 6rem;
}
}
.home-top-mid{
margin-right: 11.25rem;
img{
width: 31.25rem;
}
}
.home-top-right{
img{
height: 2.5rem;
}
}
}
.bottom-desc{
font-size: 16px;
font-weight: 400;
color: #909399;
}
</style>
<style lang="scss" scoped>
.home-top{
height: 6rem;
background: #FFFFFF;
display: flex;
align-items: center;
justify-content: space-between;
margin-right: 2rem;
margin-left: 2rem;
.home-top-left{
img{
height: 6rem;
}
}
.home-top-mid{
margin-right: 11.25rem;
img{
width: 31.25rem;
}
}
.home-top-right{
img{
height: 2.5rem;
}
}
}
</style>
Write Preview
Loading…
Cancel
Save