You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
496 lines
12 KiB
496 lines
12 KiB
<template>
|
|
<div class="list1">
|
|
<el-page-header
|
|
class="header"
|
|
@back="$router.replace('/index')"
|
|
:content="type + '：共搜索到' + total + '条'"
|
|
>
|
|
</el-page-header>
|
|
|
|
<div class="container">
|
|
<el-skeleton animated :loading="loading">
|
|
<template #template>
|
|
<div class="list">
|
|
<div class="list__item" v-for="i in 8" :key="i">
|
|
<el-skeleton-item
|
|
class="list__item--name"
|
|
variant="text"
|
|
style="height: 36px; margin-right: 40px"
|
|
></el-skeleton-item>
|
|
<div class="list__item--btn">预览</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template>
|
|
<div>
|
|
<div class="list" v-if="list.length > 0">
|
|
<div class="list__item" v-for="i in list" :key="i.id">
|
|
<div
|
|
class="list__item--pre"
|
|
v-if="i.leixing == 5"
|
|
>
|
|
{{ i.wenjian }}【{{ i.nianfen }}】{{ i.bianhao }}号
|
|
</div>
|
|
<div class="list__item--name">{{ i.biaoti }}</div>
|
|
<div class="list__item--type" :style="{'background': ['#a8f35f','#407cbe','#bf6865','#5d53cf','#7d7e4d'][i.leixing-1]}">{{ typeFormat(i.leixing) }}</div>
|
|
<div class="list__item--date">
|
|
{{ $moment(new Date(i.created_at)).format("YYYY-MM-DD") }}
|
|
</div>
|
|
<el-dropdown
|
|
trigger="click"
|
|
placement="bottom-start"
|
|
@command="open"
|
|
>
|
|
<div class="list__item--btn" @click="getDetail(i)">预览</div>
|
|
<template #dropdown>
|
|
<el-dropdown-menu v-if="load">
|
|
<div
|
|
style="width: 100px; position: relative; height: 60px"
|
|
>
|
|
<Spin fix></Spin>
|
|
</div>
|
|
</el-dropdown-menu>
|
|
<el-dropdown-menu v-else>
|
|
<template v-if="uploadsList.length > 0">
|
|
<el-dropdown-item
|
|
:command="item"
|
|
v-for="item in uploadsList"
|
|
>
|
|
{{ item.name }}
|
|
</el-dropdown-item>
|
|
</template>
|
|
<template v-else>
|
|
<el-dropdown-item disabled> 暂无内容 </el-dropdown-item>
|
|
</template>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
<div class="list__item--download">
|
|
<el-dropdown
|
|
trigger="click"
|
|
placement="bottom-start"
|
|
@command="down"
|
|
>
|
|
<i class="el-icon-download" @click="getDetail(i)"></i>
|
|
<template #dropdown>
|
|
<el-dropdown-menu v-if="load">
|
|
<div
|
|
style="width: 100px; position: relative; height: 60px"
|
|
>
|
|
<Spin fix></Spin>
|
|
</div>
|
|
</el-dropdown-menu>
|
|
<el-dropdown-menu v-else>
|
|
<template v-if="uploadsList.length > 0">
|
|
<el-dropdown-item
|
|
:command="item"
|
|
v-for="item in uploadsList"
|
|
>
|
|
{{ item.name }}
|
|
</el-dropdown-item>
|
|
</template>
|
|
<template v-else>
|
|
<el-dropdown-item disabled>
|
|
暂无内容
|
|
</el-dropdown-item>
|
|
</template>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<el-empty v-else :image-size="200"></el-empty>
|
|
</div>
|
|
</template>
|
|
</el-skeleton>
|
|
|
|
<el-pagination
|
|
class="page"
|
|
background
|
|
layout="prev, pager, next"
|
|
:page-size.sync="$store.state.reception.select.page_size"
|
|
:total="total"
|
|
:current-page.sync="$store.state.reception.select.page"
|
|
@current-change="
|
|
(e) => {
|
|
$store.commit('reception/SET_SELECTED', { key: 'page', value: e });
|
|
getMaterial();
|
|
}
|
|
"
|
|
>
|
|
</el-pagination>
|
|
</div>
|
|
|
|
<Modal
|
|
:width="76"
|
|
transfer
|
|
:z-index="6000"
|
|
v-model="showModal"
|
|
:footer-hide="true"
|
|
title="预览"
|
|
>
|
|
<template>
|
|
<iframe
|
|
style="width: 100%; height: 57vh"
|
|
:src="codeUri"
|
|
border="0"
|
|
></iframe>
|
|
</template>
|
|
</Modal>
|
|
|
|
<div
|
|
class="type-select"
|
|
:class="{ 'type-select-hidden': !isTypeSelectShow }"
|
|
>
|
|
<div
|
|
v-for="item in formType"
|
|
class="type-select__item"
|
|
:class="{ 'type-select__item-active': isSelectedType(item) }"
|
|
@click="typeSelect(item)"
|
|
>
|
|
{{ item.label }}
|
|
</div>
|
|
|
|
<p class="close" @click="isTypeSelectShow = !isTypeSelectShow">
|
|
<i
|
|
:class="
|
|
isTypeSelectShow ? 'el-icon-d-arrow-left' : 'el-icon-d-arrow-right'
|
|
"
|
|
></i>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import formType from "@/const/formType";
|
|
import { download } from "@/utils/downloadRequest";
|
|
import { materials, detail } from "@/api/reception";
|
|
export default {
|
|
data() {
|
|
return {
|
|
formType,
|
|
isTypeSelectShow: true,
|
|
codeUri: "",
|
|
showModal: false,
|
|
loading: false,
|
|
list: [],
|
|
total: 0,
|
|
|
|
load: false,
|
|
uploadsList: [],
|
|
};
|
|
},
|
|
methods: {
|
|
typeSelect({ value }) {
|
|
let leixing = this.$store.state.reception.select.leixing
|
|
? this.$store.state.reception.select.leixing.split(",")
|
|
: [];
|
|
if (leixing.find((i) => i == value)) {
|
|
leixing.splice(leixing.indexOf(leixing.find((i) => i == value)), 1);
|
|
this.$store.commit("reception/SET_SELECTED", {
|
|
key: "leixing",
|
|
value: leixing.toString(),
|
|
});
|
|
} else {
|
|
leixing.push(value);
|
|
this.$store.commit("reception/SET_SELECTED", {
|
|
key: "leixing",
|
|
value: leixing.toString(),
|
|
});
|
|
}
|
|
|
|
this.getMaterial();
|
|
},
|
|
|
|
async getMaterial() {
|
|
this.loading = true;
|
|
const res = await materials(this.$store.state.reception.select);
|
|
this.total = res.tags.total;
|
|
this.list = res.tags.data;
|
|
this.loading = false;
|
|
},
|
|
|
|
async getDetail(i) {
|
|
this.load = true;
|
|
const res = await detail({
|
|
table_name: "materials",
|
|
id: i.id,
|
|
});
|
|
this.uploadsList =
|
|
res.detail?.id_material_fujian_uploads_material_id_relation || [];
|
|
this.load = false;
|
|
},
|
|
|
|
open(e) {
|
|
this.codeUri = `http://view.ali251.langye.net:8012/onlinePreview?url=${encodeURIComponent(
|
|
new Buffer(e.url).toString("base64")
|
|
)}`;
|
|
|
|
this.showModal = true;
|
|
//window.open(`http://view.ali251.langye.net:8012/onlinePreview?url=${codeUri}`)
|
|
},
|
|
down(e) {
|
|
download(e.url, "get", {}, e.name);
|
|
},
|
|
},
|
|
computed: {
|
|
isSelectedType() {
|
|
return function ({ value }) {
|
|
let leixing = this.$store.state.reception.select.leixing
|
|
? this.$store.state.reception.select.leixing.split(",")
|
|
: [];
|
|
return leixing.find((i) => i == value);
|
|
};
|
|
},
|
|
|
|
type() {
|
|
return this.formType
|
|
.filter((i) =>
|
|
(this.$store.state.reception.select.leixing
|
|
? this.$store.state.reception.select.leixing.split(",")
|
|
: []
|
|
).find((j) => j == i.value)
|
|
)
|
|
.map((i) => i.label)
|
|
.toString() || '全部文件';
|
|
},
|
|
typeFormat () {
|
|
return function (leixing) {
|
|
return this.formType.find(i => i.value === leixing)?.label
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getMaterial();
|
|
},
|
|
created() {
|
|
window.getMaterial = this.getMaterial;
|
|
},
|
|
beforeRouteEnter(to, from, next) {
|
|
next((vm) => {
|
|
vm.getMaterial();
|
|
});
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.type-select {
|
|
border-radius: 4px;
|
|
background: #fff;
|
|
text-align: center;
|
|
filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.04));
|
|
line-height: 3.5;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
|
|
transform: translateY(-50%);
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 16px;
|
|
|
|
&-hidden {
|
|
transform: translate(calc(-100% - 16px), -50%);
|
|
}
|
|
&__item {
|
|
color: #333;
|
|
font-size: 13.5px;
|
|
font-weight: 600;
|
|
transition: all 0.3s;
|
|
|
|
padding: 0 4px;
|
|
position: relative;
|
|
&::after {
|
|
content: "";
|
|
height: 1px;
|
|
background: rgba(160, 160, 160, 0.3);
|
|
|
|
position: absolute;
|
|
left: 8px;
|
|
right: 8px;
|
|
top: -0.5px;
|
|
}
|
|
&:hover {
|
|
color: #fff;
|
|
background: #4398da;
|
|
}
|
|
&-active {
|
|
color: #fff;
|
|
background: #247ec3;
|
|
}
|
|
}
|
|
& > div:nth-child(1) {
|
|
border-radius: 4px 4px 0 0;
|
|
&::after {
|
|
display: none;
|
|
}
|
|
}
|
|
& > div:nth-last-child(2) {
|
|
border-radius: 0 0 4px 4px;
|
|
}
|
|
|
|
.close {
|
|
width: 20px;
|
|
cursor: pointer;
|
|
background: #fff;
|
|
color: #333;
|
|
box-sizing: border-box;
|
|
font-size: 12px;
|
|
line-height: 2;
|
|
border-radius: 0 4px 4px 0;
|
|
transition: all 0.3s;
|
|
|
|
padding: 10px 4px 10px 2px;
|
|
transform: translate(100%, -50%);
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 0%;
|
|
&:hover {
|
|
color: #fff;
|
|
background: #247ec3;
|
|
}
|
|
}
|
|
}
|
|
::v-deep .el-page-header__content {
|
|
font-size: 15px;
|
|
}
|
|
.list1 {
|
|
background: #f8f8f8;
|
|
|
|
padding: 31px 18.75%;
|
|
position: relative;
|
|
}
|
|
.header {
|
|
background: #fff;
|
|
box-shadow: 0 0 15px 0 rgba(130, 127, 126, 0.1);
|
|
|
|
padding: 16px 23px 16px 22px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.container {
|
|
background: #fff;
|
|
border-radius: 2px;
|
|
box-shadow: 0 0 15px 0 rgba(130, 127, 126, 0.1);
|
|
|
|
padding: 24px 23px 44px 22px;
|
|
}
|
|
.list {
|
|
&__item {
|
|
display: flex;
|
|
align-items: center;
|
|
border-bottom: 1px solid #f8f8f8;
|
|
|
|
padding: 11px 9px 11px 27px;
|
|
position: relative;
|
|
|
|
&--pre {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: #398ac9;
|
|
|
|
padding-right: 10px;
|
|
margin-right: 10px;
|
|
position: relative;
|
|
|
|
&::after {
|
|
content: "";
|
|
width: 2px;
|
|
background: #398ac9;
|
|
|
|
position: absolute;
|
|
top: 2px;
|
|
bottom: 2px;
|
|
right: -1px;
|
|
}
|
|
}
|
|
&::before {
|
|
content: "";
|
|
height: 6px;
|
|
width: 6px;
|
|
border-radius: 6px;
|
|
background: #cad8e4;
|
|
|
|
transform: translateY(-50%);
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
}
|
|
&--name {
|
|
font-size: 13px;
|
|
color: #333;
|
|
flex: 1;
|
|
|
|
//padding-left: 10px;
|
|
}
|
|
&--type {
|
|
font-size: 12px;
|
|
padding: 2px 6px;
|
|
color: #fff;
|
|
border-radius: 20px;
|
|
|
|
margin: 0 10px;
|
|
}
|
|
&--date {
|
|
font-size: 13px;
|
|
color: #999999;
|
|
|
|
margin-right: 42px;
|
|
}
|
|
&--btn {
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
color: #247ec3;
|
|
border-radius: 30px;
|
|
border: 1px solid #247ec3;
|
|
transition: all 0.2s;
|
|
|
|
padding: 7px 17px;
|
|
margin-right: 23px;
|
|
|
|
&:hover {
|
|
color: #fff;
|
|
background: #247ec3;
|
|
}
|
|
}
|
|
&--download {
|
|
cursor: pointer;
|
|
& > i {
|
|
font-size: 16px;
|
|
color: #247ec3;
|
|
|
|
}
|
|
|
|
padding-right: 9px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.page {
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
margin-top: 30px;
|
|
|
|
& ::v-deep .btn-prev,
|
|
::v-deep .btn-next,
|
|
::v-deep .el-pager > li {
|
|
width: 39px;
|
|
height: 39px;
|
|
line-height: 39px;
|
|
text-align: center;
|
|
border-radius: 100px;
|
|
background: #fff;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
& ::v-deep .btn-prev,
|
|
::v-deep .btn-next {
|
|
background: #fff;
|
|
border: 1px solid #e7e7e7;
|
|
}
|
|
}
|
|
</style>
|