Skip to content

iBiz-Vue-Mob-R7-Res
iBiz-Vue-Mob-R7-Res
提交 2bc1ef3e 编写于 作者: zhujiamin's avatar zhujiamin
浏览文件
操作

历史插件调整 --fix1

上级 8f8b6e89
隐藏空白字符变更
内嵌 并排
正在显示 包含 184 行增加 和 58 行删除
src/components/app-history-list/app-history-list.less
浏览文件 @ 2bc1ef3e
.container{
width: 300px;
margin: 0 auto;
.content{
.item{
width: 100%;
height:50px;
.header{
font-size: 12px;
color: rgb(192, 186, 186);
margin-bottom: 5px;
span:nth-child(2){
margin-left: 30px;
}
}
.footer{
font-size: 13px;
font-family:Helvetica;
color:#323538;
}
margin-bottom: 30px;
.container{
.onecontent{
.oneitem{
min-height: 30px;
width: 100%;
.header{
font-size: 14px;
color: rgb(192, 186, 186);
margin-bottom: 5px;
span:nth-child(2){
margin-left: 30px;
}
height: 200px;
margin: 0 auto;
overflow: hidden;
transition:height 3s ease;
}
.button{
width: 300px;
height: 20px;
background-color: white;
color: #8CB4E2;
margin: 0 auto;
text-align: center;
margin-top: 15px;
padding-top: 5px;
border-top: 1px solid grey;
}
.footer{
font-size: 15px;
font-family:Helvetica;
color:#323538;
}
padding:0 15px;
margin-bottom: 20px;
}
margin: 0 auto;
overflow: hidden;
transition:height 1s ease;
}
.button{
background-color: white;
color: #8CB4E2;
margin: 0 auto;
text-align: center;
font-size: 13px;
padding-top: 5px;
border-top: 1px solid rgb(248, 242, 242);
}
}
src/components/app-history-list/app-history-list.vue
浏览文件 @ 2bc1ef3e
<template>
<div class="container">
<div class="content">
<div v-for="item in infos" :key="item.id" class="item">
<div class="header"><span>{{item.time}}</span> <span>{{item.method}}</span></div>
<div class="onecontent" ref="onecontent">
<div v-for="item in items" :key="item.id" class="oneitem" ref="oneitem">
<div class="header"><span>{{item.date}}</span> <span>{{item.method}}</span></div>
<div class="footer">{{item.info}}</div>
</div>
</div>
......@@ -13,25 +13,90 @@
</template>
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
import { Vue, Component, Prop,Watch } from 'vue-property-decorator';
import { CodeListService } from "@/ibiz-core";
@Component({
components: {}
})
export default class APPHistoryList extends Vue {
/**
* 代码表服务对象
*
* @type {CodeListService}
* @memberof APPHistoryList
*/
public codeListService: CodeListService = new CodeListService();
/**
* 传入数据
* 传入数据items
*
* @type {Array}
* @memberof APPHistoryList
*/
@Prop({default:()=>{ return [
{time:'2020-08-20',method:'手动变更',info:'胡维将状态由"实现中"修改为"已实现"；将完成时间由"空"修改为"2020-08-20 14：00：31"'},
{time:'2020-08-21',method:'自动变更',info:'胡维将状态由"实现中"修改为"已实现"；将完成时间由"空"修改为"2020-08-20 14：00：31"'},
{time:'2020-08-22',method:'自动变更',info:'胡维将状态由"规划中"修改为"实现中"'},
{time:'2020-08-23',method:'手动变更',info:'胡维将状态由"实现中"修改为"已实现"；将完成时间由"空"修改为"2020-08-20 14：00：31"'},
]}}) public infos ?: Array<any>;
@Prop() public items!: Array<any>;
/**
* 传入数据itemNameDetail
*
* @type {any}
* @memberof APPHistoryList
*/
@Prop() public itemNameDetail?:any;
/**
* 监听itemNameDetail
*
* @returns {void}
* @memberof APPHistoryList
*/
@Watch('itemNameDetail')
itemNameDetailChange(){
this.handler();
}
/**
* 监听items
*
* @returns {void}
* @memberof APPHistoryList
*/
@Watch('items')
itemsChange(){
this.handler();
this.setHeight();
}
/**
* 获取代码表
*
* @returns {void}
* @memberof APPHistoryList
*/
public getCodeList(tag:string,type:string,value:any){
if (type == 'STATIC') {
let infos:any = this.$store.getters.getCodeListItems(tag);
let info:any = infos.find((v:any)=>v.value == value);
return info;
}
}
/**
* 解析代码表获取数据
*
* @returns {void}
* @memberof APPHistoryList
*/
public handler(){
this.items.forEach((v:any)=>{
if(v.actions){
let info:any = this.getCodeList(this.codeListAAA.actions.tag,'STATIC',v.actions);
v.method = info.text;
v.info = info.text;
}
})
}
/**
* 按钮文本
......@@ -39,7 +104,7 @@ export default class APPHistoryList extends Vue {
* @type {String}
* @memberof APPHistoryList
*/
public text = '查看更多记录';
public text:string = '查看更多记录';
/**
* 文本切换
......@@ -47,8 +112,23 @@ export default class APPHistoryList extends Vue {
* @type {Boolean}
* @memberof APPHistoryList
*/
public isShow = false;
public isShow:boolean = false;
/**
* 代码表规范
*
* @memberof APPHistoryList
*/
public codeListAAA :any= {
"actions":{
type:"static",
tag:"Action__type"
},
"old":{
type:"static",
tag:"Product__status"
}
}
/**
* 初始个数
......@@ -56,8 +136,23 @@ export default class APPHistoryList extends Vue {
* @type {Number}
* @memberof APPHistoryList
*/
public num = 3;
public num:number = 3;
/**
* 初始高度
*
* @type {Number}
* @memberof APPHistoryList
*/
public startHeig:number = 0;
/**
* 终止高度
*
* @type {Number}
* @memberof APPHistoryList
*/
public endHeig:number = 0;
/**
* 点击展开
......@@ -65,20 +160,55 @@ export default class APPHistoryList extends Vue {
* @returns {void}
* @memberof APPHistoryList
*/
public loadMore(): void {
public loadMore():void {
this.isShow = !this.isShow;
this.text = this.isShow? '收起':'查看更多记录';
let ele:any = document.querySelector('.content');
let ite:any = document.querySelectorAll('.item');
let startHeig:number = 0;
let endHeig:number = 0;
let ele:any = document.querySelector('.onecontent');
let ite:any = document.querySelectorAll('.oneitem');
this.startHeig = 0;
this.endHeig = 0;
for(let i = 0; i <= this.num; i++){
startHeig += ite[i].offsetHeight
this.startHeig += ite[i].offsetHeight;
}
for(let i = 0; i < ite.length; i++){
endHeig += ite[i].offsetHeight + 30
this.endHeig += ite[i].offsetHeight + 20;
}
ele.style.height = this.isShow?endHeig+'px': + startHeig+'px';
ele.style.height = this.isShow?this.endHeig+'px': + this.startHeig+'px';
}
/**
* 生命周期created
*
* @returns {void}
* @memberof APPHistoryList
*/
public created(){
this.handler();
}
/**
* 设置初始高度
*
* @returns {void}
* @memberof APPHistoryList
*/
public setHeight(){
let ele:any = this.$refs.onecontent;
let ite:any = this.$refs.oneitem;
for(let i = 0; i <= this.num; i++){
this.startHeig += ite[i].offsetHeight;
}
ele.style.height = this.startHeig + 'px';
}
/**
* 生命周期mounted
*
* @returns {void}
* @memberof APPHistoryList
*/
public mounted(){
this.setHeight();
}
}
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或