<template>
|
<div class="container">
|
<flex-layout>
|
<page-panel class="page-list-banner" :border="true" slot="header">
|
<div slot="title" class="page-panel-title">
|
<span class="title-pillar"></span>
|
试验报告查看
|
</div>
|
<!-- <template slot="btnGrp">
|
<el-button type="primary" @click="resetParams" size="mini">高级筛选</el-button>
|
</template> -->
|
<div class="table-layout">
|
<div class="table-row">
|
<!-- 查询条件 -->
|
<div class="table-cell text-right">输入查询</div>
|
<div class="table-cell">
|
<el-input type="text" v-model.trim="keyword" size="small" placeholder="请输入关键字"></el-input>
|
</div>
|
<div class="table-cell" style="width:60%">
|
</div>
|
</div>
|
</div>
|
<div class="banner-btn-grp">
|
<div class="el-pagination-btns">
|
<el-button type="primary" @click="getList" round size="mini" icon="el-icon-search">查询
|
</el-button>
|
</div>
|
<div class="el-pagination-btns">
|
<el-button type="warning" @click="resetParams" round size="mini" icon="el-icon-refresh-right">重置</el-button>
|
</div>
|
</div>
|
</page-panel>
|
<page-panel title="数据列表" class="flex-page-content">
|
<template slot="btnGrp">
|
<el-button type="primary" size="mini" icon="el-icon-plus" @click="dialogFormVisible = true">新建文件夹
|
</el-button>
|
</template>
|
<el-table stripe size="mini" header-row-class-name="header-primary" height="100%" :data="table.datas"
|
v-loading="table.loading" element-loading-background="rgba(0, 0, 0, 0.8)">
|
<el-table-column prop="name" align="center" :resizable="false" label="文件夹">
|
</el-table-column>
|
<el-table-column prop="size" align="center" :resizable="false" label="文件大小">
|
</el-table-column>
|
<el-table-column prop="updateTime" align="center" :resizable="false" label="更新时间">
|
</el-table-column>
|
<el-table-column fixed="right" label="操作" width="340" align="center">
|
<template slot-scope="scope">
|
<el-button type="success" size="mini" @click="seeDetails(scope.row)">查看</el-button>
|
<el-button type="primary" size="mini" @click="dialogFormVisible=true">编辑</el-button>
|
<el-button type="danger" size="mini" @click="remove(scope.row)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</page-panel>
|
<div class="flex-page-footer" slot="footer">
|
<el-pagination size="mini" :current-page="page.pageCurr" :page-sizes="[10, 20, 30, 50, 100]"
|
:page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="page.pageAll"
|
@current-change="currentChange" @size-change="sizeChange"></el-pagination>
|
</div>
|
</flex-layout>
|
|
|
<el-dialog title="添加文件夹" width="400px" top="0" :visible.sync="dialogFormVisible" :close-on-click-modal="false"
|
class="dialog-center" :modal-append-to-body="false">
|
<div class="dialog-form">
|
<el-form ref="ruleForm" size="mini" label-position="top" class="params-dialog">
|
<el-form-item label="文件夹名称">
|
<el-input v-model="addname" autocomplete="off"></el-input>
|
</el-form-item>
|
<div class="form-footer">
|
<three-btn @click="dialogFormVisible=false">添加</three-btn>
|
</div>
|
</el-form>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import pagePanel from '@/components/pagePanel';
|
import ThreeBtn from '@/components/ThreeBtn.vue'
|
export default {
|
data() {
|
return {
|
keyword: '',
|
table: {
|
headers: [],
|
datas: [{
|
name: '2021-04-03 空载实验项目报告',
|
size: '10.2MB',
|
updateTime: '2021-04-05 12:00:00',
|
}, {
|
name: '2021-04-01 空载实验项目报告',
|
size: '8.6MB',
|
updateTime: '2021-04-02 09:00:00',
|
}, {
|
name: '2021-03-25 空载实验项目报告',
|
size: '11.5MB',
|
updateTime: '2021-04-02 14:00:00',
|
}, {
|
name: '2021-03-22 空载实验项目报告',
|
size: '11.5MB',
|
updateTime: '2021-04-02 17:00:00',
|
}, {
|
name: '2021-03-20 空载实验项目报告',
|
size: '10.3MB',
|
updateTime: '2021-04-02 11:00:00',
|
}],
|
loading: false
|
},
|
page: {
|
pageCurr: 1,
|
pageSize: 10,
|
pageAll: 0
|
},
|
dialogFormVisible: false,
|
addname: ''
|
};
|
},
|
components: {
|
pagePanel,
|
ThreeBtn
|
},
|
methods: {
|
// 查询用户列表
|
getList() {
|
let params = {
|
pageNum: this.page.pageCurr,
|
pageSize: this.page.pageSize
|
};
|
this.table.datas = [{
|
name: '2021-04-03 空载实验项目报告',
|
size: '10.2MB',
|
updateTime: '2021-04-03 12:00:00',
|
}, {
|
name: '2021-04-01 空载实验项目报告',
|
size: '8.6MB',
|
updateTime: '2021-04-01 09:00:00',
|
}, {
|
name: '2021-03-25 空载实验项目报告',
|
size: '11.5MB',
|
updateTime: '2021-03-25 14:00:00',
|
}, {
|
name: '2021-03-22 空载实验项目报告',
|
size: '11.5MB',
|
updateTime: '2021-03-22 17:00:00',
|
}, {
|
name: '2021-03-20 空载实验项目报告',
|
size: '10.3MB',
|
updateTime: '2021-03-20 11:00:00',
|
}]
|
let data = {};
|
if (this.keyword) {
|
data.search = this.keyword;
|
let arr = []
|
this.table.datas.map(item => {
|
if (item.name.indexOf(data.search) != -1) {
|
arr.push(item)
|
}
|
})
|
this.table.datas = arr;
|
}
|
|
// roleSearch(params, data).then((res) => {
|
// res = res.data.data;
|
// res.list.forEach((item) => {
|
// item.stateStr = item.state == 0 ? true : false;
|
// });
|
// this.page.pageAll = res.total;
|
// this.table.datas = res.list;
|
// }).catch((err) => {
|
// console.log(err)
|
// });
|
}
|
// 重置搜索条件
|
,
|
resetParams() {
|
|
},
|
//查看详情
|
seeDetails(val) {
|
console.log(val)
|
this.$router.push({
|
path: '/index/testReportDetails',
|
}).catch(err => {
|
console.log(err)
|
});
|
},
|
//移除角色
|
remove() {
|
this.$confirm("确认删除该文件夹吗？", '系统提示', {
|
type: 'warning',
|
}).then(() => {
|
// console.log(row)
|
// let postData = {
|
// roleId: row.id
|
// }
|
this.$message({
|
message: '删除成功！',
|
type: 'success'
|
});
|
// deleteRole(postData).then((res) => {
|
// if (res.data.code == 1) {
|
// this.$message({
|
// message: '删除成功！',
|
// type: 'success'
|
// });
|
// this.getList();
|
// }
|
// }).catch((err) => {
|
// console.log(err)
|
// });
|
}).catch(() => {});
|
},
|
currentChange(value) {
|
this.page.pageCurr = value;
|
this.getList();
|
},
|
sizeChange(value) {
|
this.page.pageCurr = 1;
|
this.page.pageSize = value;
|
this.getList();
|
},
|
},
|
mounted() {
|
this.getList();
|
},
|
beforeDestroy() {
|
|
}
|
};
|
</script>
|
|
<style scoped>
|
.container {
|
height: 100%;
|
}
|
|
.page-list-banner {
|
margin-bottom: 10px;
|
}
|
|
.num {
|
cursor: pointer;
|
color: aqua;
|
}
|
|
.dialog-form {
|
background-color: #ececec;
|
padding: 20px;
|
width: 100%;
|
height: 100%;
|
}
|
</style>
|
