lshcomment 1.0.0

package/src/components/header/Header.vue

@@ -0,0 +1,566 @@
+<template>
+	<header class="app-header navbar">
+		<button class="navbar-toggler mobile-sidebar-toggler d-lg-none" type="button" @click="mobileSidebarToggle">
+			&#9776;
+		</button>
+		<b-link class="navbar-brand" :style="{'background': isWhiteBg ? '#fff':'#214a80'}">
+			<img class="white" :src="menuLogo" alt="">
+		</b-link>
+		<button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" @click="sidebarMinimize">&#9776;
+		</button>
+
+		<div class="mr-auto favorite_box" ref="favoriteBox">
+        <span class="ml-3 favorite_item" :ref="`favoriteItem${i}`" :class="{ active: item.active }"
+			  @click="itemClick(item)" v-for="(item, i) in tempFavoriteInfos" :key="i">
+            {{ item.resourceName }}
+        </span>
+		</div>
+
+		<div @click="expandClick" v-show="moreInfos.length" class="expand_box">
+			<el-dropdown trigger="click">
+            <span class="el-dropdown-link">
+                <img v-show="!expand" :src="url('/static/image/展开未选择@2x.png')" width="14px" height="14px">
+                <img v-show="expand" :src="url('/static/image/展开选中@2x.png')" width="20px" height="28px">
+            </span>
+				<el-dropdown-menu slot="dropdown" class="menu_box">
+					<el-dropdown-item
+						@click.native="itemClick(item)"
+						v-for="(item, i) in moreInfos" :key="i">
+						{{ item.resourceName }}
+					</el-dropdown-item>
+				</el-dropdown-menu>
+			</el-dropdown>
+		</div>
+    <!-- cti -->
+	<!-- <b-nav-item class="d-md-down-none mr-3" @click="showApprovalList">
+				<i class="fa fa-envelope-o" style="font-size:18px;"></i>
+				<b-badge pill variant="danger">{{ approvalNum }}</b-badge>
+			</b-nav-item> -->
+	<div class="portrayal-iconmail" @click="showApprovalList">
+				<i class="fa fa-envelope-o" style="font-size:28px;"></i>
+				<b-badge class="numbericon" pill variant="danger">{{ approvalNum }}</b-badge>
+			</div>
+	<!-- 图标 -->
+	<div class="portrayal-icon" @click="letPortrayalVisible" v-if="hasCustomerIcon">
+		<img src="../../assets/img/customer-portrayal-blue.png" alt="">
+	</div>
+    <el-select style="width: 80px; margin: 5px 35px 0 0" size="mini" v-model="statusListValue" placeholder="请选择">
+      <el-option
+        v-for="item in statusList"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value">
+      </el-option>
+    </el-select>
+    <el-select style="width: 80px; margin: 5px 15px 0 0" size="mini" v-model="statusValue" placeholder="请选择">
+      <el-option
+        v-for="item in status"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value">
+      </el-option>
+    </el-select>
+		<b-nav>
+<!--			<button class="navbar-toggler mobile-sidebar-toggler d-lg-none" type="button" @click="isVisible = !isVisible">-->
+<!--				&#9776;-->
+<!--			</button>-->
+
+<!--			<b-nav-item class="d-md-down-none mr-3" @click="isVisible = !isVisible">-->
+<!--				<i class="fa fa-angle-down" style="font-size:18px;"></i>-->
+<!--				<b-badge v-show="downLoadNum===0? false: true " pill variant="danger">-->
+<!--					{{ downLoadNum > 99 ? '...' : downLoadNum }}-->
+<!--				</b-badge>-->
+<!--			</b-nav-item>-->
+
+			<!-- 下载图标新增 -->
+			<b-nav-item class="d-md-down-none mr-3" @click="showdownLoadList">
+				<i class="fa fa-download" style="font-size:18px;"></i>
+				<b-badge v-show="downLoadNum===0? false: true " pill variant="danger">
+					{{ downLoadNum > 99 ? '...' : downLoadNum }}
+				</b-badge>
+			</b-nav-item>
+<!-- 审批 -->
+			<!-- <b-nav-item class="d-md-down-none mr-3" @click="showApprovalList">
+				<i class="fa fa-envelope-o" style="font-size:18px;"></i>
+				<b-badge pill variant="danger">{{ approvalNum }}</b-badge>
+			</b-nav-item> -->
+
+			<div id="now-time" class="now-time">
+				<p class="time">
+					<span class="iconfont icon-shijianicon"></span>
+					<span class="now-date">{{ time }}</span>
+					<span class="MorningOrAfternoon">{{ AMorPM }}</span>
+				</p>
+				<p class="year">{{ year }}
+					<span>{{ week }}</span>
+				</p>
+			</div>
+		</b-nav>
+		<div class="navbar-toggler"></div>
+		<changeOrg ref="modal1" :title="orgTitle" :userInfo="userInfo" :size="size"></changeOrg>
+		<downLoadingList @resetNum="resetNum" ref="downLoadModal"></downLoadingList>
+		<approvalList ref="approvalModal" @sendNum="getNum" @getNums='reloadNum'></approvalList>
+<!--		<transition name="fade">-->
+<!--			<callPopup v-show="isVisible" />-->
+<!--		</transition>-->
+    <portrayal
+      ref="refPortrayal"
+      v-show="portrayalVisible"
+      :statusValue="statusValue"
+      :statusListValue="statusListValue"
+      @changeHeaderStatusValue="changeHeaderStatusValue"
+    />
+	</header>
+</template>
+<script>
+// import callPopup from "../../components/call-popup/index"
+import Portrayal from 'components/portrayal/portrayal'
+import Api from "../../common/api.js";
+import common from "../../common/common.js";
+import config from "../../common/config.js";
+import changeOrg from "./changeOrg.vue";
+// import VueNativeSock from 'vue-native-websocket'
+import approvalList from "./../../views/approval-flow/approval-list.vue";
+import downLoadingList from "./../../views/downLoadList/downLoad-list.vue";
+
+import Vue from "vue";
+import {mapState, mapGetters, mapActions, mapMutations} from "vuex";
+import {
+  LSHCUSTOMER_ICON
+} from 'common/resource-btn'
+import { showBtn } from 'common/api-common'
+// Vue.use(VueNativeSock, config.wsUrl + common.getCookie('e_token'), {
+//       reconnection: true,
+//       reconnectionDelay: 3000
+//   })
+export default {
+	data() {
+		return {
+			// isVisible: false,
+			orgName: "",
+			empEnName: "",
+			empCnName: "",
+			orgTitle: "切换组织",
+			size: "",
+			flag: false,
+			imgpath: "/static/image/userimg.jpg",
+			defaultValue: "",
+			year: "",
+			time: "",
+			AMorPM: "",
+			week: "",
+			menuLogo:
+				common.env() == "development"
+					? config.menuLogoUrl
+					: "/resources/image/menuLogo.png",
+			isWhiteBg:
+				common.isWhiteBg(),
+			wrapperflag: false,
+			approvalNum: null,
+			downLoadNum: 0,
+      statusValue: null,
+      status: [{
+        value: 1,
+        label: '示闲'
+      },{
+        value: 0,
+        label: '示忙'
+      }],
+      statusListValue: null,
+      statusList:[{
+        value: 2,
+        label: '登录'
+      },{
+        value: 3,
+        label: '休息'
+      }],
+			timer: null,
+
+			expand: false,
+
+			tempFavoriteInfos: [],
+			moreInfos: [],
+		};
+	},
+	computed: {
+		...mapState("finance", ["organize"]),
+		...mapState('customerPortrayal', [
+      'customerPhoneNo',
+      'portrayalVisible',
+	  'isLogin',
+	  'statusCode'
+    ]),
+		...mapGetters('qualityTest', [
+			'favoriteInfos'
+		]),
+		userInfo() {
+			return JSON.parse(sessionStorage.getItem('userInfo'))
+		},
+		hasCustomerIcon() {
+			return showBtn(LSHCUSTOMER_ICON)
+		}
+	},
+	created() {
+		let _this = this;
+
+		this.getNum();
+		this.getDownloadNum();
+		this.loopQuery();
+		// this.$socket.onmessage = this.handleSocketMessage;    //调用socket方法
+	},
+	mounted() {
+		console.log(44, this.isLogin, this.statusCode)
+		// this.statusListValue = this.isLogin ? 2 : 3
+		// this.statusValue = this.statusCode === 'agentidle' ?  1 : 0
+		if (this.isLogin) this.statusListValue = 2
+		else {
+			this.statusListValue = 3
+		}
+		if (this.statusCode === 'agentidle') this.statusValue = 1
+		else if (this.statusCode === 'agentbusy') this.statusValue = 0
+		else this.statusValue = null
+		this.current()
+		this.setSideBarStatus({status: true});
+
+
+		const userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
+
+		const {orgCode} = userInfo.userAvailableInfo
+		const {empCode} = userInfo.empVo
+
+		this.queryEmpFavoriteInfosForLogin({
+			groupCode: orgCode,
+			resourceChannelCode: 'MenuPC',
+			empCode,
+			orgCode: userInfo.inCharegSubOrgVo.orgCode
+		})
+
+		window.addEventListener('resize', () => {
+			this.$nextTick(() => {
+				let ti = this.tempFavoriteInfos.length
+				if (this.$refs.favoriteBox && this.$refs.favoriteBox.children[0]) {
+					const offsetTop = this.$refs.favoriteBox.children[0].offsetTop
+
+					for (let i = 0, len = this.$refs.favoriteBox.children.length; i < len; i++) {
+						if (this.$refs.favoriteBox.children[i].offsetTop != offsetTop) {
+							ti = i
+							break
+						}
+					}
+					this.moreInfos = this.tempFavoriteInfos.slice(ti, this.tempFavoriteInfos.length)
+				}
+			})
+		})
+	},
+	components: {
+		changeOrg,
+		approvalList,
+		downLoadingList,
+		// callPopup,
+    Portrayal
+	},
+	methods: {
+		// 状态设置示忙
+		setStatus() {
+			this.statusValue = 0
+		},
+		...mapActions({
+		savePortrayalVisible: 'customerPortrayal/getPortrayalVisible'
+		}),
+		letPortrayalVisible (){
+			//this.portrayalVisible = true
+			this.savePortrayalVisible(!this.portrayalVisible)
+		},
+		url(path) {
+			const env = process.env.NODE_ENV
+			const origin = window.location.origin
+			return env == 'development' ? path : `${origin}/livecs${path}`
+		},
+		itemClick(item) {
+			const {webProjectCode, resourcePath} = item
+			this.tempFavoriteInfos.forEach(k => {
+				if (k.resourceCode === item.resourceCode) {
+					k.active = true
+				} else {
+					k.active = false
+				}
+			})
+			if (webProjectCode == 'livecs') {
+				this.$router.push({
+					path: resourcePath
+				})
+			} else {
+				window.location.href = `${window.location.origin}/${webProjectCode}${resourcePath}`
+			}
+		},
+		expandClick() {
+			this.expand = !this.expand
+		},
+		current() {
+			let _this = this
+			Api.currentTime({}, res => {
+				// let now = new Date(res.data)
+				let def = new Date() - new Date(res.data.replace(/\-/g, "/"))
+				setInterval(() => {
+					var now = new Date(new Date() - def)
+					var y = now.getFullYear();
+					var m = now.getMonth() + 1;
+					var d = now.getDate();
+					var h = now.getHours();
+					var mm = now.getMinutes();
+					var s = now.getSeconds();
+					var str;
+					if (h > 12) {
+						h -= 12;
+						str = " PM";
+					} else {
+						str = " AM";
+					}
+					h = h < 10 ? "0" + h : h;
+					d = d < 10 ? "0" + d : d;
+					m = m < 10 ? "0" + m : m;
+					mm = mm < 10 ? "0" + mm : mm;
+					s = s < 10 ? "0" + s : s;
+					var getWeek = now.getDay(); //注:0-6对应为星期日到星期六
+					switch (getWeek) {
+						case 0:
+							_this.week = "星期日";
+							break;
+						case 1:
+							_this.week = "星期一";
+							break;
+						case 2:
+							_this.week = "星期二";
+							break;
+						case 3:
+							_this.week = "星期三";
+							break;
+						case 4:
+							_this.week = "星期四";
+							break;
+						case 5:
+							_this.week = "星期五";
+							break;
+						case 6:
+							_this.week = "星期六";
+							break;
+						default:
+							_this.week = "系统错误！";
+					}
+					_this.year = `${y}年${m}月${d}日`;
+					_this.time = `${h}:${mm}`;
+					_this.AMorPM = str;
+				}, 1000)
+			})
+		},
+		resetNum() {
+			this.downLoadNum = 0;
+		},
+		//获取未下载及生成中数量
+		loopQuery() {
+			let _this = this;
+			this.timer = setInterval(() => {
+				_this.getDownloadNum();
+			}, 60000);
+		},
+		// 获取列表条数
+		getDownloadNum() {
+			let options = {
+				fileStateSet: [0, 1]
+			};
+			Api.downLoad.queryFileExportInfo(options, res => {
+				if (res.data.code == "success") {
+					let obj = res.data.obj;
+					this.downLoadNum = obj.total;
+				}
+			});
+		},
+		// websocket方法
+		// handleSocketMessage: function(data) {
+		//     console.log(data);
+		//     let _this = this
+		//     if (data.data.indexOf('file_message') >= 0 ) {
+		//         _this.$data.downLoadNum = parseInt(JSON.parse(data.data).value)
+		//         console.log('websocket:'+this.downLoadNum);
+		//     }
+		// },
+		// ...mapActions("login", ["getUserInfo"]),
+		// 将左侧菜单状态保存
+		...mapActions("baseweb", ["setSideBarStatus"]),
+		//显示审批流弹层
+		showApprovalList() {
+			this.$refs.approvalModal.showModal();
+		},
+		//显示下载列表页面
+		showdownLoadList() {
+			this.$refs.downLoadModal.showModal();
+		},
+		//获取推送消息的数量
+		getNum() {
+			//this.$refs.approvalModal.getList()
+		},
+		//
+		reloadNum(data) {
+			this.approvalNum = data;
+		},
+		sidebarToggle(e) {
+			e.preventDefault();
+			document.body.classList.toggle("sidebar-hidden");
+		},
+		sidebarMinimize(e) {
+
+			// 存在一个问题, 不会自适应
+			this.toggleSiderbar()
+
+			const NUM = 150;
+			let arr = this.$route.path.split("/");
+			if (arr[1] === "resourceUtilization" && arr[2] === "detail") {
+				let detail = this.$el.parentNode.children[1].children[1].children[1]
+					.children[0].children[1].children[0].children[0];
+				let offsetWidth = detail.offsetWidth;
+				this.wrapperflag = !this.wrapperflag;
+				this.wrapperflag
+					? (detail.children[1].children[1].style.width =
+					offsetWidth + NUM + "px")
+					: (detail.children[1].children[1].style.width =
+					offsetWidth - NUM + "px");
+			}
+			this.setSideBarStatus({status: document.querySelectorAll('.header-fixed')[0].className.indexOf('sidebar-minimized') > -1});
+
+			e.preventDefault();
+			document.body.classList.toggle("sidebar-minimized");
+		},
+		mobileSidebarToggle(e) {
+			e.preventDefault();
+			document.body.classList.toggle("sidebar-mobile-show");
+		},
+		asideToggle(e) {
+			e.preventDefault();
+			document.body.classList.toggle("aside-menu-hidden");
+		},
+
+		Org() {
+			this.$refs.modal1.showModal();
+		},
+		initpath() {
+			this.imgpath = common.islivePro() + this.imgpath;
+		},
+		changeHeaderStatusValue(type) {
+			console.log(type)
+			this.statusValue = type
+		},
+		...mapMutations({
+			toggleSiderbar: 'qualityTest/TOGGLE_SIDERBAR'
+		}),
+		...mapActions('qualityTest', [
+			'queryEmpFavoriteInfosForLogin'
+		])
+	},
+	watch: {
+		organize() {
+			this.Org();
+		},
+		favoriteInfos(val) {
+			this.moreInfos = []
+
+			this.tempFavoriteInfos = this.favoriteInfos.map(k => ({
+				...k,
+				active: process.env.NODE_ENV === 'development'
+					? location.pathname === k.resourcePath
+					: location.pathname === `/${k.webProjectCode}${k.resourcePath}`
+			}))
+
+			this.$nextTick(() => {
+				let ti = this.tempFavoriteInfos.length
+				if (this.$refs.favoriteBox.children[0]) {
+					const offsetTop = this.$refs.favoriteBox.children[0].offsetTop
+
+					for (let i = 0, len = this.$refs.favoriteBox.children.length; i < len; i++) {
+						if (this.$refs.favoriteBox.children[i].offsetTop != offsetTop) {
+							ti = i
+							break
+						}
+					}
+					this.moreInfos = this.tempFavoriteInfos.slice(ti, this.tempFavoriteInfos.length)
+				}
+			})
+		},
+		$route(to, from) {
+			this.tempFavoriteInfos = this.favoriteInfos.map(k => ({
+				...k,
+				active: process.env.NODE_ENV === 'development'
+					? location.pathname === k.resourcePath
+					: location.pathname === `/${k.webProjectCode}${k.resourcePath}`
+			}))
+		}
+	},
+	beforeDestroy() {
+		clearInterval(this.timer)
+	}
+};
+</script>
+<style lang="css" scoped>
+/deep/ .el-input .el-input__inner {
+  border-radius: 4px !important;
+}
+/deep/ .el-input__icon+.el-input__inner {
+  padding-right: 26px;
+}
+.favorite_box {
+	width: calc(100% - 850px);
+	height: 40px;
+	overflow: hidden;
+}
+
+.favorite_item {
+	display: inline-block;
+	height: 40px;
+	line-height: 40px;
+	cursor: pointer;
+	color: #9B9BA9;
+}
+
+.active {
+	/* border-bottom: 5px solid #2A4A7C; */
+	color: #1A223F;
+}
+
+.menu_box {
+	max-height: 400px;
+	max-width: 300px !important;
+	min-width: 150px !important;
+	overflow-y: auto;
+}
+
+.expand_box {
+	cursor: pointer;
+	margin-right: 20px;
+}
+
+.fade-enter-active, .fade-leave-active {
+	transition: opacity .5s;
+}
+.fade-enter, .fade-leave-to{
+	opacity: 0;
+}
+.portrayal-icon {
+    cursor: pointer;
+    z-index: 1;
+  }
+  .portrayal-iconmail {
+	margin-right:20px ;
+    cursor: pointer;
+    z-index: 1;
+	position: relative;
+  }
+.portrayal-icon img {
+	margin-right: 10px;
+	width: 24px;
+    height: 19px;
+}
+.numbericon{
+	position: absolute;
+	top: 0;
+	right: -20px;
+}
+</style>