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{ .container{
width: 300px; .onecontent{
margin: 0 auto; .oneitem{
.content{ min-height: 30px;
.item{ width: 100%;
width: 100%; .header{
height:50px; font-size: 14px;
.header{ color: rgb(192, 186, 186);
font-size: 12px; margin-bottom: 5px;
color: rgb(192, 186, 186); span:nth-child(2){
margin-bottom: 5px; margin-left: 30px;
span:nth-child(2){
margin-left: 30px;
}
}
.footer{
font-size: 13px;
font-family:Helvetica;
color:#323538;
}
margin-bottom: 30px;
} }
height: 200px; }
margin: 0 auto; .footer{
overflow: hidden; font-size: 15px;
transition:height 3s ease; font-family:Helvetica;
} color:#323538;
.button{ }
width: 300px; padding:0 15px;
height: 20px; margin-bottom: 20px;
background-color: white;
color: #8CB4E2;
margin: 0 auto;
text-align: center;
margin-top: 15px;
padding-top: 5px;
border-top: 1px solid grey;
} }
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> <template>
<div class="container"> <div class="container">
<div class="content"> <div class="onecontent" ref="onecontent">
<div v-for="item in infos" :key="item.id" class="item"> <div v-for="item in items" :key="item.id" class="oneitem" ref="oneitem">
<div class="header"><span>{{item.time}}</span> <span>{{item.method}}</span></div> <div class="header"><span>{{item.date}}</span> <span>{{item.method}}</span></div>
<div class="footer">{{item.info}}</div> <div class="footer">{{item.info}}</div>
</div> </div>
</div> </div>
...@@ -13,25 +13,90 @@ ...@@ -13,25 +13,90 @@
</template> </template>
<script lang="ts"> <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({ @Component({
components: {} components: {}
}) })
export default class APPHistoryList extends Vue { export default class APPHistoryList extends Vue {
/**
* 代码表服务对象
*
* @type {CodeListService}
* @memberof APPHistoryList
*/
public codeListService: CodeListService = new CodeListService();
/** /**
* 传入数据 * 传入数据items
* *
* @type {Array} * @type {Array}
* @memberof APPHistoryList * @memberof APPHistoryList
*/ */
@Prop({default:()=>{ return [ @Prop() public items!: Array<any>;
{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:'胡维将状态由"规划中"修改为"实现中"'}, * 传入数据itemNameDetail
{time:'2020-08-23',method:'手动变更',info:'胡维将状态由"实现中"修改为"已实现"；将完成时间由"空"修改为"2020-08-20 14：00：31"'}, *
]}}) public infos ?: Array<any>; * @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 { ...@@ -39,7 +104,7 @@ export default class APPHistoryList extends Vue {
* @type {String} * @type {String}
* @memberof APPHistoryList * @memberof APPHistoryList
*/ */
public text = '查看更多记录'; public text:string = '查看更多记录';
/** /**
* 文本切换 * 文本切换
...@@ -47,8 +112,23 @@ export default class APPHistoryList extends Vue { ...@@ -47,8 +112,23 @@ export default class APPHistoryList extends Vue {
* @type {Boolean} * @type {Boolean}
* @memberof APPHistoryList * @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 { ...@@ -56,8 +136,23 @@ export default class APPHistoryList extends Vue {
* @type {Number} * @type {Number}
* @memberof APPHistoryList * @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 { ...@@ -65,20 +160,55 @@ export default class APPHistoryList extends Vue {
* @returns {void} * @returns {void}
* @memberof APPHistoryList * @memberof APPHistoryList
*/ */
public loadMore(): void { public loadMore():void {
this.isShow = !this.isShow; this.isShow = !this.isShow;
this.text = this.isShow? '收起':'查看更多记录'; this.text = this.isShow? '收起':'查看更多记录';
let ele:any = document.querySelector('.content'); let ele:any = document.querySelector('.onecontent');
let ite:any = document.querySelectorAll('.item'); let ite:any = document.querySelectorAll('.oneitem');
let startHeig:number = 0; this.startHeig = 0;
let endHeig:number = 0; this.endHeig = 0;
for(let i = 0; i <= this.num; i++){ 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++){ 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 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或