文件信息显示
This commit is contained in:
parent
be712b42f7
commit
1c1d419852
|
@ -0,0 +1,27 @@
|
||||||
|
let timestampFormatDate = function (timestamp) {
|
||||||
|
if (!timestamp) {
|
||||||
|
return timestamp
|
||||||
|
}
|
||||||
|
|
||||||
|
let date = new Date(timestamp);
|
||||||
|
|
||||||
|
let y = date.getFullYear();
|
||||||
|
|
||||||
|
let MM = date.getMonth() + 1;
|
||||||
|
MM = MM < 10 ? ('0' + MM) : MM;
|
||||||
|
|
||||||
|
let d = date.getDate();
|
||||||
|
d = d < 10 ? ('0' + d) : d;
|
||||||
|
|
||||||
|
let h = date.getHours();
|
||||||
|
h = h < 10 ? ('0' + h) : h;
|
||||||
|
|
||||||
|
let m = date.getMinutes();
|
||||||
|
m = m < 10 ? ('0' + m) : m;
|
||||||
|
|
||||||
|
let s = date.getSeconds();
|
||||||
|
s = s < 10 ? ('0' + s) : s;
|
||||||
|
|
||||||
|
return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
|
||||||
|
};
|
||||||
|
export default timestampFormatDate
|
|
@ -1,12 +1,52 @@
|
||||||
<template>
|
<template>
|
||||||
<el-upload
|
<div>
|
||||||
accept=".jmx"
|
<el-upload
|
||||||
drag
|
accept=".jmx"
|
||||||
:action="jmxUploadPath">
|
drag
|
||||||
<i class="el-icon-upload"/>
|
:show-file-list="false"
|
||||||
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
|
:action="jmxUploadPath"
|
||||||
<div class="el-upload__tip" slot="tip">只能上传jmx文件</div>
|
:before-upload="beforeUpload"
|
||||||
</el-upload>
|
:file-list="fileList">
|
||||||
|
<i class="el-icon-upload"/>
|
||||||
|
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
|
||||||
|
<div class="el-upload__tip" slot="tip">只能上传jmx文件</div>
|
||||||
|
</el-upload>
|
||||||
|
|
||||||
|
<el-table
|
||||||
|
:data="tableData"
|
||||||
|
style="width: 100%">
|
||||||
|
<el-table-column
|
||||||
|
prop="name"
|
||||||
|
label="文件名">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="size"
|
||||||
|
label="文件大小">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="type"
|
||||||
|
label="文件类型">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
label="修改时间">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<i class="el-icon-time"/>
|
||||||
|
<span style="margin-left: 10px">{{ scope.row.lastModified | timestampFormatDate }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="status"
|
||||||
|
label="文件状态">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
label="操作">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button @click="handleDownload(scope.row)" type="text" size="small">下载</el-button>
|
||||||
|
<el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
@ -14,9 +54,42 @@
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
jmxUploadPath: '/testplan/file/upload',
|
jmxUploadPath: '/testplan/file/upload',
|
||||||
|
fileList: [],
|
||||||
|
tableData: [],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
}
|
beforeUpload(file) {
|
||||||
|
window.console.log(file);
|
||||||
|
|
||||||
|
if (!this.fileValidator(file)) {
|
||||||
|
/// todo: 显示错误信息
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.tableData.push({
|
||||||
|
name: file.name,
|
||||||
|
size: file.size + 'Byte', /// todo: 按照大小显示Byte、KB、MB等
|
||||||
|
type: 'JMX',
|
||||||
|
lastModified: file.lastModified,
|
||||||
|
status: 'todo',
|
||||||
|
});
|
||||||
|
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
handleDownload(row) {
|
||||||
|
/// todo
|
||||||
|
window.console.log("download: " + row);
|
||||||
|
},
|
||||||
|
handleDelete(row) {
|
||||||
|
/// todo
|
||||||
|
window.console.log("delete: " + row);
|
||||||
|
},
|
||||||
|
fileValidator(file) {
|
||||||
|
/// todo: 是否需要对文件内容和大小做限制
|
||||||
|
|
||||||
|
return file.size > 0;
|
||||||
|
},
|
||||||
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -7,6 +7,7 @@ import ajax from "../common/ajax";
|
||||||
import App from './App.vue';
|
import App from './App.vue';
|
||||||
import router from "./components/router/router";
|
import router from "./components/router/router";
|
||||||
import i18n from "../i18n/i18n";
|
import i18n from "../i18n/i18n";
|
||||||
|
import timestampFormatDate from "./components/common/filter/TimestampFormatDateFilter";
|
||||||
|
|
||||||
Vue.config.productionTip = false;
|
Vue.config.productionTip = false;
|
||||||
Vue.use(icon);
|
Vue.use(icon);
|
||||||
|
@ -16,6 +17,9 @@ Vue.use(ElementUI, {
|
||||||
Vue.use(filters);
|
Vue.use(filters);
|
||||||
Vue.use(ajax);
|
Vue.use(ajax);
|
||||||
|
|
||||||
|
// filter
|
||||||
|
Vue.filter('timestampFormatDate', timestampFormatDate);
|
||||||
|
|
||||||
new Vue({
|
new Vue({
|
||||||
el: '#app',
|
el: '#app',
|
||||||
router,
|
router,
|
||||||
|
|
Loading…
Reference in New Issue