<template>
|
<div class="archive box_div">
|
<div class="menu_top">
|
<My-bread :list="[`${$t('synthesis.synthesis')}`, `${$t('synthesis.archive')}`]"></My-bread>
|
<!-- 下载列表 -->
|
<i
|
class="el-icon-tickets"
|
:title="$t('synthesis.DownloadList')"
|
></i>
|
</div>
|
<el-divider />
|
<!-- 查询框 -->
|
<div class="iquery">
|
<el-form
|
:inline="true"
|
:model="formInline"
|
class="demo-form-inline"
|
>
|
<!-- 数据类型 -->
|
<el-form-item :title="$t('archiveObj.dataType')">
|
<el-select
|
size="small"
|
v-model="formInline.dataType"
|
:popper-append-to-body="false"
|
:placeholder="$t('archiveObj.label1')"
|
@change="setDataTypeChange()"
|
>
|
<el-option
|
:label="$t('archiveObj.dataBank')"
|
value="type1"
|
></el-option>
|
<el-option
|
:label="$t('archiveObj.file')"
|
value="type2"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<!-- 资料类别 -->
|
<el-form-item :title="$t('archiveObj.dataClass')">
|
<el-select
|
:popper-append-to-body="false"
|
v-model="formInline.category"
|
multiple
|
clearable
|
collapse-tags
|
multiple
|
filterable
|
allow-create
|
default-first-option
|
size="small"
|
:placeholder="$t('archiveObj.label4')"
|
@change="categorySelectChange('orgName','org',categoryOptions)"
|
>
|
<el-option
|
v-for="item in categoryOptions"
|
:key="item.value"
|
:label="item.value"
|
:value="item.key"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<!-- 项目名称 -->
|
<el-form-item :title="$t('archiveObj.dataClass')">
|
<el-select
|
:popper-append-to-body="false"
|
v-model="formInline.item"
|
multiple
|
clearable
|
collapse-tags
|
multiple
|
filterable
|
allow-create
|
default-first-option
|
size="small"
|
:placeholder="$t('archiveObj.label5')"
|
@change="itemSelectChange('orgName','org',itemOptions)"
|
>
|
<el-option
|
v-for="item in itemOptions"
|
:key="item.code"
|
:label="item.name"
|
:value="item.code"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<!-- 单位 -->
|
<el-form-item :title="$t('archiveObj.unit')">
|
<el-select
|
size="small"
|
v-model="formInline.depName"
|
:placeholder="$t('archiveObj.label3')"
|
:popper-append-to-body="false"
|
>
|
<el-option
|
:value="formInline.depcode"
|
:label="formInline.depName"
|
style="height: auto"
|
>
|
<el-tree
|
ref="tree"
|
:data="depOption"
|
node-key="id"
|
:props="defaultProps"
|
@node-click="depChange"
|
/>
|
</el-option>
|
</el-select>
|
</el-select>
|
</el-form-item>
|
<!-- 关键字 -->
|
<el-form-item :title="$t('archiveObj.keywords')">
|
<el-input
|
:placeholder="$t('archiveObj.label6')"
|
v-model="formInline.keywords"
|
size="small"
|
> <i
|
:title="$t('common.iquery')"
|
@click="setSearchKeyWords"
|
slot="suffix"
|
class="el-input__icon el-icon-search"
|
></i></el-input>
|
</el-form-item>
|
<el-form-item style="float:right">
|
<el-button
|
type="primary"
|
size="small"
|
icon="el-icon-search"
|
>{{$t('synthesis.rangequery')}}</el-button>
|
|
</el-form-item>
|
<el-form-item style="float:right">
|
<el-button
|
type="info"
|
size="small"
|
icon="el-icon-refresh"
|
>{{$t('common.reset')}}</el-button>
|
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="contBox">
|
<div class="archTopBox">
|
|
<div
|
class="boxCard"
|
v-for="(item,index) in monthdata"
|
>
|
<el-card class="box-card">
|
<div
|
slot="header"
|
class="clearfix"
|
>
|
<span v-show="formInline.dataType=='type2'">{{item.name}}</span>
|
<span>{{item.tabDesc}}</span>
|
<div style="float: right; padding: 3px 0">
|
<i
|
class="el-icon-tickets"
|
:title="$t('common.details')"
|
@click="setCardDetails(item)"
|
></i>
|
<i
|
v-show="formInline.dataType=='type2'"
|
style="margin-left:10px"
|
class="el-icon-download"
|
:title="$t('common.download')"
|
></i>
|
<i
|
v-show="!item.isShow"
|
style="margin-left:10px"
|
class="el-icon-arrow-up"
|
:title="$t('archiveObj.fold')"
|
@click="setCardChange(item)"
|
></i>
|
<i
|
v-show="item.isShow"
|
style="margin-left:10px"
|
class="el-icon-arrow-down"
|
:title="$t('archiveObj.develop')"
|
@click="setCardChange(item)"
|
></i>
|
</div>
|
</div>
|
<div
|
:id="item.id"
|
style="margin:5px 1px"
|
v-show="!item.isShow && formInline.dataType=='type2'"
|
>
|
<div class="cardItem"> {{$t('archiveObj.dataType')}} : {{ item.mold }} </div>
|
<div class="cardItem"> {{$t('dataManage.vmobj.format')}} : {{ item.type }} </div>
|
<div class="cardItem"> {{$t('dataManage.vmobj.size')}} : {{stateFormatSizes(item.sizes)}} </div>
|
<div class="cardItem"> {{$t('dataManage.vmobj.createonuser')}} : {{item.uname}} </div>
|
<div class="cardItem"> {{$t('dataManage.vmobj.depName')}} : {{item.depName}} </div>
|
<div class="cardItem"> {{$t('dataManage.vmobj.createontime')}} : {{format(item.createTime)}} </div>
|
</div>
|
<div
|
:id="item.id"
|
style="margin:5px 1px"
|
v-show="!item.isShow && formInline.dataType!='type2'"
|
>
|
<div class="cardItem"> {{$t('archiveObj.dataType')}} : {{ item.mold }} </div>
|
<div class="cardItem"> {{$t('dataManage.vmobj.row')}} : {{ item.rows }} </div>
|
<!-- <div class="cardItem"> {{$t('archiveObj.storageType')}} : {{ item.tableType }} </div> -->
|
|
</div>
|
</el-card>
|
</div>
|
|
</div>
|
<div class="archBottomBox">
|
|
<div class="pagination_box">
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="listData.pageIndex"
|
:page-sizes="[10, 20, 50, 100]"
|
:page-size="listData.pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="listData.count"
|
>
|
</el-pagination>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import MyBread from "../../components/MyBread.vue";
|
import { selectdepTab, dataLib_selectProject, dataLib_selectDirTypes, dataLib_selectByPageForMeta, dataLib_selectTabs } from '../../api/api';
|
export default {
|
components: {
|
MyBread,
|
},
|
data() {
|
return {
|
formInline: {
|
dataType: "type2", //数据类型
|
category: [], //查询类别,
|
item: [],
|
depcode: null, //单位,
|
depName: null,//单位,
|
keywords: '',
|
},
|
categoryOptions: [],
|
itemOptions: [],
|
depOption: [],//单位列表
|
defaultProps: {
|
label: "name",
|
value: "id",
|
},
|
listData: {
|
pageIndex: 1,
|
pageSize: 10,
|
count: 0,
|
},
|
monthdata: [
|
]
|
};
|
},
|
mounted() {
|
this.getDepTreeData();
|
this.getCategorySelectData();
|
this.getItemSelectData();
|
this.getAllTabesData();
|
},
|
methods: {
|
//卡片详情点击事件
|
setCardDetails(res) {
|
|
},
|
//存储类型切换
|
setDataTypeChange() {
|
this.listData.pageIndex = 1;
|
this.listData.pageSize = 10;
|
this.getAllTabesData();
|
},
|
//卡片折叠效果
|
setCardChange(res) {
|
res.isShow = !res.isShow
|
},
|
//格式化时间
|
format(shijianchuo) {
|
//shijianchuo是整数，否则要parseInt转换
|
var time = new Date(shijianchuo);
|
var y = time.getFullYear();
|
var m = time.getMonth() + 1;
|
var d = time.getDate();
|
var h = time.getHours();
|
var mm = time.getMinutes();
|
var s = time.getSeconds();
|
return (
|
y +
|
'-' +
|
this.add0(m) +
|
'-' +
|
this.add0(d) +
|
' ' +
|
h +
|
':' +
|
mm +
|
':' +
|
s
|
);
|
},
|
//格式化时间
|
add0(m) {
|
return m < 10 ? '0' + m : m;
|
},
|
stateFormatSizes(res) {
|
if (res >= 1024) {
|
const val = parseFloat(res / 1024).toFixed(3);
|
return val + ' GB';
|
} else {
|
return res + ' MB';
|
}
|
},
|
|
handleSizeChange(val) {
|
this.listData.pageIndex = 1;
|
this.listData.pageSize = val;
|
this.getAllTabesData();
|
|
},
|
handleCurrentChange(val) {
|
this.listData.pageIndex = val;
|
this.getAllTabesData();
|
},
|
|
|
//查询数据库数据
|
async getQueryBankData() {
|
const data = await dataLib_selectTabs(this.listData);
|
if (data.code != 200) {
|
this.$message.error('数据库列表调用失败');
|
return;
|
}
|
var val = data.result;
|
val = val.filter((res) => {
|
|
res.mold = "数据库"
|
res.isShow = false
|
return res;
|
})
|
this.listData.count = data.count;
|
this.monthdata = data.result;
|
},
|
//查询文件数据
|
async getQueryFileData() {
|
const data = await dataLib_selectByPageForMeta(this.listData);
|
if (data.code != 200) {
|
this.$message.error('文件数据列表调用失败');
|
}
|
var val = data.result;
|
val = val.filter((res) => {
|
var type = "." + res.type;
|
res.name = res.name.replaceAll(type, "")
|
res.mold = "文件"
|
res.isShow = false
|
return res;
|
})
|
this.monthdata = val;
|
this.listData.count = data.count;
|
},
|
//查询数据
|
getAllTabesData() {
|
switch (this.formInline.dataType) {
|
case "type2"://文件数据
|
this.getQueryFileData();
|
break;
|
case "type1"://数据库数据
|
this.getQueryBankData();
|
break;
|
}
|
},
|
//项目名称数据
|
async getItemSelectData() {
|
const data = await dataLib_selectProject();//查询项目名称
|
if (data.code != 200) {
|
this.$message.error('项目名称列表调用失败');
|
}
|
this.itemOptions = data.result;
|
},
|
//获取资料类别数据
|
async getCategorySelectData() {
|
const data = await dataLib_selectDirTypes();
|
if (data.code != 200) {
|
this.$message.error('资料类别列表调用失败');
|
}
|
this.categoryOptions = data.result;
|
|
},
|
//关键字查询
|
setSearchKeyWords() {
|
},
|
//单位改变值触发
|
depChange(data, node, nodeData) {
|
this.formInline.depcode = data.code;
|
this.formInline.depName = data.name;
|
},
|
//资料类别下拉框值改变触发
|
categorySelectChange(model, prop, options) {
|
|
},
|
// 项目名称下拉框值改变触发
|
itemSelectChange(model, prop, options) {
|
|
},
|
//获取单位列表
|
async getDepTreeData() {
|
const data = await selectdepTab();
|
if (data.code != 200) {
|
return this.$message.error('单位列表获取失败');
|
}
|
this.depOption = this.treeData(data.result);
|
this.formInline.depcode = this.depOption[0].code
|
this.formInline.depName = this.depOption[0].name;
|
},
|
//树列表生成
|
treeData(source) {
|
let cloneData = JSON.parse(JSON.stringify(source)); // 对源数据深度克隆
|
return cloneData.filter((father) => {
|
// 循环所有项
|
let branchArr = cloneData.filter((child) => father.id == child.pid); // 对比ID，分别上下级菜单，并返回数据
|
branchArr.length > 0 ? (father.children = branchArr) : ""; // 给父级添加一个children属性，并赋值
|
return father.pid == 0; // 返回一级菜单
|
});
|
},
|
}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.archive {
|
width: calc(100% - 20px);
|
height: calc(100% - 20px);
|
padding: 10px;
|
position: relative;
|
overflow: auto;
|
|
.menu_top {
|
display: flex;
|
justify-content: space-between;
|
}
|
.iquery {
|
width: 100%;
|
padding-top: 10px;
|
}
|
.contBox {
|
width: 100%;
|
min-height: calc(100% - 111px);
|
flex-direction: column;
|
align-items: center;
|
justify-content: space-between;
|
display: flex;
|
|
.archTopBox {
|
width: 100%;
|
.cardItem {
|
margin-bottom: 10px;
|
margin-left: 20px;
|
}
|
}
|
.archBottomBox {
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
}
|
}
|
/deep/.el-card__body {
|
padding: 0px !important;
|
}
|
/deep/.el-card {
|
margin-bottom: 10px !important;
|
}
|
.show {
|
display: none;
|
}
|
}
|
</style>
|
