修改快捷功能入口

src/api/model/home.js

@@ -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);
+		},
+	},
+};

src/assets/icons/index.js

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

src/style/home.scss

@@ -16,32 +16,36 @@
 		flex: 1;
 		display: flex;
 		overflow: hidden;
-		.boxScrollbar{
-			display: flex;
-			align-items: center;
-		}
 	}
 }
 
-.headerBox{
-	.cardBox{
 .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;
+		margin:0 18px 0 0;
-				.img{
+		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{
@@ -49,6 +53,7 @@
 		justify-content: center;
 		align-items: center;
 		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;
@@ -69,6 +75,9 @@
 		}
 	}
 }
+
+.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{

src/views/home/console/components/shortcuts.vue

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

src/views/home/console/index.vue

@@ -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="cardTitle">占位</div>
-							<div class="cardBody inletView">
+							<div class="cardBody">
-								<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>
 						</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{

src/views/setting/company/see.vue

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