jp-xpgj-GA-file/src/projects/business/views/Master/EditFun.vue

<template>
	<div id="app">

		<common ref="common" @asynCallBack="asynCallBack"></common>
		<top-header :pageTitle="pageTitle" :rightLink="rightLink" :doRightLink="doRightLink"></top-header>


		<div class="mui-content vongi-icons">
			<div class="vongi-all">
				<h4 class="vongi-center">您可以将常用的应用添加到主页</h4>
				<ul class="mui-table-view mui-grid-view mui-grid-9">
					<draggable element="ul" v-model="menuList" :options="{draggable:'.mui-table-view-cell'}">
						<li draggable="true" v-for="(item,index) in menuList" class="mui-table-view-cell mui-media mui-col-xs-3">
							<!-- <router-link :to="{name:item.iconRoute,query:item.iconParam}"> -->
							<img :src="requirePic(item.iconPic)" />
							<div class="mui-media-body" v-text="item.iconName"></div>
							<!-- </router-link> -->
							<span @click="del(item.id,index)" class="mui-icon mui-icon-closeempty vongi-close"></span>
						</li>
					</draggable>
				</ul>
			</div>
			<div class="vongi-all">
				<h2>全部服务</h2>
				<div v-if="iten.cun_num" v-for="(iten,indey) in allFunList">
					<h4 v-text="iten.name"></h4>
					<ul class="mui-table-view mui-grid-view mui-grid-9">
						<li v-show="item.is_show" v-for="(item,index) in iten.list" :class="'mui-table-view-cell mui-media mui-col-xs-3 '+(item.iconRoute?'':'kfz')">
							<!-- <router-link :to="{name:item.iconRoute,query:item.iconParam}"> -->
							<img :src="requirePic(item.iconPic)" />
							<div class="mui-media-body" v-text="item.iconName"></div>
							<!-- </router-link> -->
							<span @click="add(indey,index)" class="mui-icon mui-icon-plusempty vongi-add"></span>
						</li>
					</ul>
				</div>
			</div>
		</div>

		<loading :visible="isLoading"></loading>
	</div>
</template>

<script>
	import draggable from 'vuedraggable'
	import * as API_User from '$project/apis/user'
	import Common from '$project/components/Common.vue'
	import Loading from '$project/components/Loading.vue'
	import TopHeader from '$project/components/TopHeader.vue'
	import NavMenu from '@/components/NavMenu.vue'
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		name: 'MasterEditFun',
		components: {
			Common,
			Loading,
			TopHeader,
			NavMenu,
			draggable,
		},
		data() {
			return {
				isLoading: false,

				pageTitle: '管理常用服务',

				rightLink: {
					show: true,
					icon: 'mui-btn mui-btn-primary',
					style: 'width: 55px;height: 25px;margin-top:5px;margin-right: 0px;line-height: 5px;color: #fff;font-size:16px;',
					title: '完成'
				},

				allFunList: [],
				menuList: [],
				idList: [],
			}
		},
		created() {
			this.menuList = this.menu_list;
			this.resetIdList();
		},
		methods: {
			//引入图片
			requirePic(file) {
				if (file) {
					if (file.indexOf('http') == 0) {
						return file;
					} else {
						return require('$project/assets/img/' + file);
					}
				}
			},
			//获取所有的功能列表包括常用功能
			getAllFunList() {
				this.isLoading = true;
				API_User.getAllFunList().then(response => {
					this.isLoading = false;
					this.allFunList = this.resetAllFunList(response.allIcon);
				}).catch(error => {
					mui.toast(error);
				})
			},
			//重置数组
			resetAllFunList(list) {
				for (var i = 0; i < list.length; i++) {
					var num = 0;
					for (var j = 0; j < list[i]['list'].length; j++) {
						if (this.idList.indexOf(list[i]['list'][j]['id']) > -1) {
							list[i]['list'][j]['is_show'] = 0;
						} else {
							list[i]['list'][j]['is_show'] = 1;
							num++;
						}
					}
					list[i]['cun_num'] = num;
				}
				return list;
			},
			resetIdList() {
				var list = [];
				for (var i = 0; i < this.menuList.length; i++) {
					list.push(this.menuList[i]['id']);
				}
				this.idList = list;
			},
			//添加图标
			add(indy, index) {
				this.menuList.push(this.allFunList[indy]['list'][index])
				this.allFunList[indy]['list'][index]['is_show'] = 0;
				this.allFunList[indy]['cun_num']--;
			},
			//减少图标
			del(id, index) {

				for (var i = 0; i < this.menuList.length; i++) {
					if (this.menuList[i]['id'] == id) {
						this.menuList.splice(i, 1);
					}
				}

				var allFunList = this.allFunList;
				for (var i = 0; i < allFunList.length; i++) {
					var item = allFunList[i];
					for (var j = 0; j < item['list'].length; j++) {
						if (item['list'][j]['id'] == id) {
							item['list'][j]['is_show'] = 1;
							item['cun_num']++;
							this.$set(this.allFunList, i, item)
						}
					}
				}
			},
			//保存常用图片
			doRightLink() {
				this.isLoading = true;
				this.resetIdList();
				API_User.saveFun(this.idList.join(',')).then(response => {
					this.isLoading = false;
					mui.toast('保存成功');
					this.$router.go(-1);
				}).catch(error => {
					mui.toast(error);
				})
			},
			asynCallBack() {

			},
		},
		mounted() {
			this.getAllFunList()
		},
		destroyed() {

		},
		computed: {
			...mapGetters({
				openId: 'wx_openid',
				token: 'token',
				person_data: 'person_data',
				person_popedom: 'person_popedom',
				menu_list: 'menu_list'
			})
		}
	}
</script>

<style src="$project/assets/css/iconfont.css"></style>
<style scoped src="$project/assets/css/xpgj.css"></style>
<style scoped src="$project/assets/css/xpwyfyy.css"></style>
<style scoped>
	.mui-table-view ul {
		padding-left: 0;
	}
</style>