2020-10-08

todo-list

前端传递专案id阶段id
基本信息查询接口开发

record-list

vue里的keys()用不了,不是用不了，是自己理解错了，正确的用法是Object.keys(xxObj);
1
Object.keys(xxxObj);
chrome 49 版本处理不了arr.forEach()函数，forEach()函数是异步的处理，在高版本上的浏览器上测试了。
貌似不是forEach的原因，貌似是因为alert();的原因，浏览器一执行alert();就卡死了。我写了一个最简单的alert()事件都要出问题，那么是因为win10上不兼容chrome49 32位的原因吧，
不折腾了，win10的原因，win7下跑都没有问题，这个问题有点棘手。绕过alert(),写一个弹窗提示组件modal。
写了一个alert模态框的组件

AlertModal.vue

<template>
    <div id="myModal" class="modal" v-if="displayFlag">
		<div class="modal-content">
			<div class="modal-header">
				<span class="close" v-on:click="$emit('close', flag)">×</span>
				<h2>系统提示信息</h2>
			</div>
			<div class="modal-body">
				<p>{{ msg }}</p>
			</div>
			<div class="modal-footer">
				<button v-on:click="$emit('close', flag)">关闭</button>
			</div>
		</div>
	</div>
</template>

<script>
export default {
    name: 'ViewTemplate',
    props: {
        msg: String,
        displayFlag: Boolean
    },
    data: function () {
        return {
            title: 'ViewTemplate',
            flag: false,
        }
    },
}
</script>

<style scoped>
/* 弹窗 (background) */
.modal {
	/* display: none; 默认隐藏 */
	position: fixed;
	z-index: 1;
	padding-top: 100px;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.4);
}

/* 弹窗内容 */
.modal-content {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	background-color: #fefefe;
	margin: auto;
	padding: 0;
	border: 1px solid #888;
	width: 50vw;
	/* height: 50vh; */
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
	-webkit-animation-name: animatetop;
	-webkit-animation-duration: 0.4s;
	animation-name: animatetop;
	animation-duration: 0.4s;
}

/* 添加动画 */
@-webkit-keyframes animatetop {
	from {top:-300px; opacity:0}
	to {top:0; opacity:1}
}

@keyframes animatetop {
	from {top: -300px; opacity:0}
	to {top:0; opacity:1}
}

/* 关闭按钮 */
.close {
	color: white;
	float: right;
	font-size: 28px;
	font-weight: bold;
}

.close:hover,
.close:focus {
	color: #000;
	text-decoration: none;
	cursor: pointer;
}

.modal-header {
	padding: 2px 16px;
	background-color: #5587A2;
	color: black;
}

.modal-body {
	overflow: auto;
	padding: 2px 16px;
	flex-grow: 1;
}

.modal-footer {
	padding: 2px 16px;
	background-color: #5587A2;
	text-align: center;
	color: black;
}
</style>

调用方代码

<html>
    <alert-modal v-bind:display-flag="alertFlag" v-bind:msg="alertMsg" v-on:close="closeAlert($event)" />
</html>

<script>
    closeAlert (flag) {
        this.alertFlag = flag;
    },
</script>

forEach()函数还是不行，49版本会卡死，尽量用经典for循环吧
专案id，阶段id，创建人工号传递，Vue路由中传递参数

<html>
    <span class="look" title="查看" @click="view(item.id)"></span> 
</html>

<script>
    view(id){
        this.$router.push({path:"/cbimToolsBack/toolsDetail",query:{id:id,mode:"view"}})
        },
</script>

在 /cbimToolsBack/toolsDetail 路由里

1	let query = this.$route.query

官方文档看了半天没看懂，直接搜索出来了理想的结果，看来不能只看官方文档啊。

又在折腾jpa的自动创建时间更新时间问题

home-record-list

reference-site-list

Vue

Vue 路由组件传参

GitHub Vue 路由组件传参demo

vue2 router 动态传参，多个参数