longlong/xw_admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改快捷功能入口

Browse Source
This commit is contained in:
龙运模 2024-09-19 23:23:06 +08:00
parent 7485e589e4
commit 3a3997f351
7 changed files with 260 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

19
src/api/model/home.js Normal file
View File

@ -0,0 +1,19 @@
import config from "@/config";
import http from "@/utils/request";
export default {
quickList: {
url: `${config.API_URL}/user.quick.function`,
name: "用户快捷功能列表",
post: async function (params) {
return await http.post(this.url, params);
},
},
quickSave: {
url: `${config.API_URL}/user.quick.function.save`,
name: "用户快捷功能列表",
post: async function (params) {
return await http.post(this.url, params);
},
},
};

3
src/assets/icons/index.js
View File

@ -111,6 +111,9 @@ export { default as FinanceMag } from './menu/Finance.vue'
export { default as Reports } from './menu/ReportForms.vue'
export { default as ShipmentMag } from './menu/Shipment.vue'
export { default as Inventory } from './menu/Stock.vue'
// 二层菜单
export { default as AccountInfo } from './menu/UserInfo.vue'
export { default as OrderList } from './menu/WorkOrder.vue'
export { default as Gather } from './home/gather.vue'
export { default as HomeChart } from './home/chart.vue'

40
src/style/home.scss
View File

@ -16,39 +16,44 @@
flex: 1;
display: flex;
overflow: hidden;
.boxScrollbar{
display: flex;
align-items: center;
}
}
}
.headerBox{
.cardBox{
.inletView{
.inletView{
display: flex;
align-items: center;
align-items: flex-start;
flex-wrap: wrap;
.leftBox{
display: flex;
align-items: center;
flex-wrap: wrap;
}
.item{
display: flex;
align-items: center;
flex-direction: column;
margin-right: 30px;
.img{
margin:0 18px 0 0;
padding-bottom: 20px;
width: 50px;
.img{
width: 50px;height: 50px;background: var(--el-color-primary);border-radius: 8px;
display: flex;align-items: center;justify-content: center;
cursor: pointer;
}
.text{
margin-top: 8px;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
}
.add{
display: flex;
justify-content: center;
align-items: center;
margin: 0;
margin:0;
padding-bottom: 20px;
.addBack{
background: #f2f2f2;
border-radius: 8px;
@ -57,6 +62,7 @@
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.icon{
width: 30px;
@ -68,7 +74,10 @@
text-align: center;
}
}
}
}
.headerBox{
.cardBox{
.newBell{
display: flex;
flex-wrap: wrap;
@ -161,13 +170,6 @@
}
}
.boxScrollbar{
.el-scrollbar__wrap{
display: flex;
align-items: center;
}
}
@media (max-width: 992px){
.consoleView{

159
src/views/home/console/components/shortcuts.vue Normal file
View File

@ -0,0 +1,159 @@
<template>
<view class="pointBox inletView">
<el-scrollbar height="100%" class="boxScrollbar">
<div class="leftBox">
<div class="item" v-for="(item,index) in inletList" :key="index">
<div class="img">
<el-icon size="26" color="#fff" class="icon" v-if="item.meta && item.meta.icon"><component :is="item.meta.icon || 'el-icon-menu'" /></el-icon>
</div>
<text class="text">{{item.meta && item.meta.title}}</text>
</div>
<div class="item add" @click="inletVisible=true">
<div class="addBack">
<i class="icon"><sc-icon-HomeAdd /></i>
</div>
<text class="text">添加</text>
</div>
</div>
</el-scrollbar>
</view>
<el-drawer v-model="inletVisible" :size="450" title="快捷功能管理" destroy-on-close>
<el-container>
<el-main>
<div class="dragList">
<div class="title">已选快捷功能</div>
<draggable class="dragView" v-model="inletList" animation="200" item-key="id" group="people">
<template #item="{ element }">
<div class="box">
<div class="img">
<el-icon size="26" color="#fff" class="icon" v-if="element.meta && element.meta.icon"><component :is="element.meta.icon || 'el-icon-menu'" /></el-icon>
</div>
<div class="text">{{element.meta && element.meta.title}}</div>
</div>
</template>
</draggable>
<el-empty v-if="inletList.length==0" :image-size="80" description="未添加任何快捷功能"></el-empty>
</div>
<div class="dragList">
<div class="title">常用功能拖拽到上方快捷功能中</div>
<draggable class="dragView" v-model="list" animation="200" item-key="id" group="people">
<template #item="{ element }">
<div class="box">
<div class="img imgDis">
<el-icon size="26" color="#fff" class="icon" v-if="element.meta && element.meta.icon"><component :is="element.meta.icon || 'el-icon-menu'" /></el-icon>
</div>
<div class="text">{{element.meta && element.meta.title}}</div>
</div>
</template>
</draggable>
<el-empty v-if="list.length==0" :image-size="80" description="暂无数据"></el-empty>
</div>
</el-main>
<el-footer style="padding:10px;">
<el-button type="primary" @click="save" :loading="isSave">保存配置</el-button>
</el-footer>
</el-container>
</el-drawer>
</template>
<script>
import draggable from 'vuedraggable'
export default {
name: "shortcuts",
components:{
draggable
},
data(){
return{
isSave:false,
listData:[],
inletList:[],
inletVisible:false,
list:[]
}
},
watch:{
},
mounted() {
this.getList()
},
methods:{
async getList() {
const res = await this.$API.home.quickList.post();
if(res.code == 200){
let isCheArr = [];
let noList = [];
res.data.forEach(item=>{
if(item.checked){
isCheArr.push(item);
}else{
noList.push(item);
}
})
this.listData = res.data;
this.inletList = isCheArr;
this.list = noList;
}
},
async save() {
if(this.inletList && this.inletList.length>0){
this.inletList.forEach(item=>{
item.checked = true;
})
}
if(this.list && this.list.length>0){
this.list.forEach(item=>{
item.checked = false
})
}
let newArr = [...this.inletList,...this.list];
this.isSave = true;
const params = newArr.map((item,index)=>({name:item.name,status:item.checked,sort:index+1}))
const res = await this.$API.home.quickSave.post(params);
this.isSave = false;
if (res.code == 200) {
this.$message.success('保存成功');
await this.getList();
}
}
}
}
</script>
<style scoped lang="scss">
.pointBox{width: 100%;height: 100%;overflow: hidden;display: flex;align-items: center;justify-content: flex-start;}
.icon{color: #fff;}
.dragList{
.title{
border-top: 1px solid #f2f2f2;
padding-top: 10px;
}
}
.dragView{
min-height: 40px;
display: flex;flex-wrap: wrap;
.box{
display: flex;
align-items: center;
flex-direction: column;
margin:0 20px 0 0;
padding:10px 0 10px 0;
width: 50px;
.img{
width: 50px;height: 50px;background: var(--el-color-primary);border-radius: 8px;
display: flex;align-items: center;justify-content: center;
cursor: pointer;
}
.imgDis{
background: var(--el-color-primary-light-8);
}
.text{
margin-top: 8px;
width: 100%;white-space: nowrap;overflow: hidden;text-overflow:ellipsis;
}
}
}
</style>

37
src/views/home/console/index.vue
View File

@ -5,22 +5,9 @@
<el-row class="colRow" :gutter="20">
<el-col class="leftCol" :span="10" :md="10" :sm="24" :xs="24">
<div class="cardBox">
<div class="cardTitle">快捷功能入口</div>
<div class="cardBody inletView">
<el-scrollbar class="boxScrollbar">
<div class="leftBox">
<div class="item" v-for="(item,index) in inletList" :key="index">
<el-image class="img" :src="item.url"></el-image>
<text class="text">{{item.name}}</text>
</div>
</div>
</el-scrollbar>
<div class="item add">
<div class="addBack">
<i class="icon"><sc-icon-HomeAdd /></i>
</div>
<text class="text">添加</text>
</div>
<div class="cardTitle">占位</div>
<div class="cardBody">
</div>
</div>
</el-col>
@ -103,9 +90,9 @@
</el-col>
<el-col class="rightCol" :span="8" :md="8" :sm="24" :xs="24">
<div class="cardBox chartView">
<div class="cardTitle">占位</div>
<div class="cardTitle">快捷功能入口</div>
<div class="cardBody">
<pointBox />
<shortcuts />
</div>
</div>
</el-col>
@ -120,23 +107,20 @@ import progressBox from "./components/progress";
import barBox from "./components/bar";
import ringBox from "./components/ring";
import pointBox from "./components/point";
import shortcuts from "./components/shortcuts";
export default {
name: "index",
components:{
progressBox,
barBox,
ringBox,
pointBox
pointBox,
shortcuts
},
data(){
return{
inletList:[
{name:'日报',url:'https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/image/home1.png'},
{name:'销售订单',url:'https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/image/home2.png'},
{name:'库存列表',url:'https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/image/home3.png'},
{name:'统计',url:'https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/image/home4.png'},
{name:'维修订单',url:'https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/image/home4.png'},
],
briefing:[
{num:189376,name:'数据采集条数',icon:'sc-icon-Gather'},
{num:12496,name:'维保待维修',icon:'sc-icon-HomeSetup'},
@ -185,6 +169,7 @@ export default {
}
.footerBox{
flex: 5;
overflow: hidden;
padding-top: 5px;
}
.colRow{

16
src/views/setting/company/see.vue
View File

@ -20,10 +20,22 @@
<span>{{form.owner}} {{form.mobile}}</span>
</el-form-item>
<el-form-item label="公司LOGO" prop="logo">
<el-image style="height: 80px;width: 80px;border-radius: 2px;" fit="cover" :src="form.logo"></el-image>
<el-image style="height: 80px;width: 80px;border-radius: 2px;" fit="cover" :src="form.logo">
<template #error>
<div class="image-slot" style="text-align: center;font-size: 60px;">
<el-icon><el-icon-Picture /></el-icon>
</div>
</template>
</el-image>
</el-form-item>
<el-form-item label="证件照" prop="doc_attach">
<el-image v-for="item in form.doc_attach" :key="item" style="height: 80px;width: 80px;border-radius: 2px;margin: 0 5px 5px 0" fit="cover" :src="item.doc_url"></el-image>
<el-image v-for="item in form.doc_attach" :key="item" style="height: 80px;width: 80px;border-radius: 2px;margin: 0 5px 5px 0" fit="cover" :src="item.doc_url">
<template #error>
<div class="image-slot" style="text-align: center;font-size: 60px;">
<el-icon><el-icon-Picture /></el-icon>
</div>
</template>
</el-image>
</el-form-item>
</el-form>
<template #footer>