乡村相册
This commit is contained in:
yanran200730
215
packages/3.0.0/AppVillageAlbum/components/List.vue
vendored
215
packages/3.0.0/AppVillageAlbum/components/List.vue
vendored
@@ -7,7 +7,7 @@
|
||||
<ai-search-bar>
|
||||
<template #left>
|
||||
<ai-select
|
||||
v-model="search.status"
|
||||
v-model="search.type"
|
||||
@change="search.current = 1, getList()"
|
||||
placeholder="请选择相册主题"
|
||||
:selectList="dict.getDict('villagePictureAlbumType')">
|
||||
@@ -29,39 +29,26 @@
|
||||
<h2>添加相片</h2>
|
||||
</div>
|
||||
<div class="list-item" v-for="(item, index) in list" :key="index">
|
||||
<div>
|
||||
<div class="list-item__title">
|
||||
<h2 :style="{color: dict.getColor('questionnaireStatus', item.status)}">{{ dict.getLabel('questionnaireStatus', item.status) }}</h2>
|
||||
<span :class="'type-' + item.type">{{ dict.getLabel('questionnaireType', item.type) }}</span>
|
||||
</div>
|
||||
<p>{{ item.title }}</p>
|
||||
<div class="list-item__user">
|
||||
<span>{{ item.createUnitName }}</span>
|
||||
<span>{{ item.createUserName }}</span>
|
||||
</div>
|
||||
<div class="list-item__img">
|
||||
<img :src="item.url">
|
||||
</div>
|
||||
<div class="list-item__bottom">
|
||||
<span>{{ item.dataCount }} 份数据</span>
|
||||
<div class="left">
|
||||
<span class="tag">{{ dict.getLabel('villagePictureAlbumType', item.type) }}</span>
|
||||
<span>{{ item.createUserName }}</span>
|
||||
</div>
|
||||
<i>{{ item.createTime }}</i>
|
||||
</div>
|
||||
<div class="list-item__operate">
|
||||
<el-button
|
||||
type="text"
|
||||
icon="iconfont iconshare"
|
||||
@click="toAdd(item.id)"
|
||||
icon="iconfont iconExported"
|
||||
class="list-item__operate--item"
|
||||
:disabled="item.status !== '1'">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
type="text"
|
||||
icon="iconfont iconunpublish"
|
||||
class="list-item__operate--item"
|
||||
@click="toStop(item.id)">
|
||||
@click="downloadImg(item.url)">
|
||||
下载
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="id = item.id, isShowAdd = true"
|
||||
@click="remove(item.id)"
|
||||
type="text"
|
||||
icon="iconfont iconpublish"
|
||||
class="list-item__operate--item">
|
||||
@@ -92,7 +79,7 @@
|
||||
current: 1,
|
||||
areaId: '',
|
||||
size: 1000000,
|
||||
title: '',
|
||||
type: '',
|
||||
timeTag: ''
|
||||
},
|
||||
isShowAdd: false,
|
||||
@@ -119,7 +106,9 @@
|
||||
|
||||
methods: {
|
||||
changeArea (e) {
|
||||
|
||||
this.loading = true
|
||||
this.search.current = 1
|
||||
this.getList()
|
||||
},
|
||||
|
||||
getList () {
|
||||
@@ -141,6 +130,17 @@
|
||||
})
|
||||
},
|
||||
|
||||
remove (id) {
|
||||
this.$confirm('确定删除该数据？').then(() => {
|
||||
this.instance.post(`/app/appvillagepicturealbum/delete?ids=${id}`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('删除成功！')
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
downloadImg (url) {
|
||||
let image = new Image()
|
||||
image.setAttribute('crossOrigin', 'anonymous')
|
||||
@@ -228,106 +228,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.publish {
|
||||
.tips {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 36px;
|
||||
margin-bottom: 20px;
|
||||
padding: 0 12px;
|
||||
background: #E8EFFF;
|
||||
border-radius: 2px;
|
||||
|
||||
i {
|
||||
margin-right: 2px;
|
||||
color: #2367ff;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 12px;
|
||||
color: #222222;
|
||||
}
|
||||
}
|
||||
|
||||
.form-item__wrapper {
|
||||
padding-left: 24px;
|
||||
|
||||
.checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 9px;
|
||||
|
||||
&:first-child {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #888888;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
|
||||
span {
|
||||
margin-left: 16px;
|
||||
color: #888888;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
position: relative;
|
||||
padding-left: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #222222;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
z-index: 1;
|
||||
width: 3px;
|
||||
height: 16px;
|
||||
background: #2266FF;
|
||||
content: ' ';
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-item__container {
|
||||
margin-left: 9px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.form-field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
|
||||
i {
|
||||
margin-right: 4px;
|
||||
color: #FF4466;
|
||||
font-size: 14px;
|
||||
}
|
||||
h2 {
|
||||
color: #222222;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #888888;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.newPagination {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@@ -419,44 +319,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.iframe {
|
||||
display: block;
|
||||
width: 375px;
|
||||
min-height: 450px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.ai-dialog__success {
|
||||
::v-deep .ai-dialog__content {
|
||||
max-height: initial!important;
|
||||
}
|
||||
}
|
||||
|
||||
.type-0 {
|
||||
color: #2266FF;
|
||||
background: rgba(34, 102, 255, 0.1);
|
||||
}
|
||||
|
||||
.type-1 {
|
||||
color: rgba(34, 170, 153, 1);
|
||||
background: rgba(34, 170, 153, 0.1);
|
||||
}
|
||||
|
||||
.type-2 {
|
||||
color: rgba(248, 180, 37, 1);
|
||||
background: rgba(248, 180, 37, 0.1);
|
||||
}
|
||||
|
||||
.type-3 {
|
||||
color: rgba(102, 119, 187, 1);
|
||||
background: rgba(102, 119, 187, 0.1);
|
||||
}
|
||||
|
||||
.type-4 {
|
||||
color: rgba(236, 68, 97, 1);
|
||||
background: rgba(236, 68, 97, 0.1);
|
||||
}
|
||||
|
||||
.form-list__list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -470,6 +332,16 @@
|
||||
margin-bottom: 12px;
|
||||
padding: 18px 16px 16px;
|
||||
|
||||
.list-item__img {
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.list-item__operate {
|
||||
display: flex;
|
||||
@@ -546,6 +418,21 @@
|
||||
i {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.tag {
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
margin-right: 8px;
|
||||
padding: 0 6px;
|
||||
border-radius: 4px;
|
||||
background: #42D784;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
@@ -615,7 +502,7 @@
|
||||
|
||||
& > div {
|
||||
width: calc((100% - 60px) / 4);
|
||||
height: 196px;
|
||||
height: 216px;
|
||||
margin: 0 20px 20px 0;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.05);
|
||||
|
||||
Reference in New Issue
Block a user