|
|
@@ -9,7 +9,7 @@
|
|
|
<el-button type="primary" v-if="!editing" @click="changeMode()">编辑照片</el-button>
|
|
|
<el-button type="danger" v-if="editing" @click="remove()">删除照片</el-button>
|
|
|
<el-button type="primary" v-if="editing" @click="confirm()">确定</el-button>
|
|
|
- <el-button type="primary" v-if="editing" @click="editing = false">取消</el-button>
|
|
|
+ <el-button type="primary" v-if="editing" @click="cancel">取消</el-button>
|
|
|
</div>
|
|
|
<el-alert
|
|
|
v-if="editing"
|
|
|
@@ -23,25 +23,35 @@
|
|
|
</div>
|
|
|
</el-alert>
|
|
|
<el-checkbox-group v-model="checked">
|
|
|
- <div
|
|
|
- v-for="(item) in list"
|
|
|
- :key="item.url"
|
|
|
- class="img-container"
|
|
|
- >
|
|
|
- <div v-if="editing" class="ctrl-bar">
|
|
|
- <el-checkbox class="check" :label="item.id"></el-checkbox>
|
|
|
- <i class="el-icon-view" :class="{active: views.includes(item.id)}" @click="setView(item)"></i>
|
|
|
+ <draggable :list="list" :disabled="!editing" style="display: flex;">
|
|
|
+ <div
|
|
|
+ v-for="(item) in list"
|
|
|
+ :key="item.url"
|
|
|
+ class="img-container"
|
|
|
+ >
|
|
|
+ <div v-if="editing" class="ctrl-bar">
|
|
|
+ <el-checkbox class="check" :label="item.id"></el-checkbox>
|
|
|
+ <i class="el-icon-view" :class="{active: views.includes(item.id)}" @click="setView(item)"></i>
|
|
|
+ </div>
|
|
|
+ <div v-else class="ctrl-bar-view">
|
|
|
+ <el-tooltip effect="dark" content="设为封面" placement="top" :open-delay=".5">
|
|
|
+ <i class="el-icon-picture-outline-round" @click="setCover(item)"></i>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip effect="dark" :content="views.includes(item.id) ? '设为不可见' : '设为可见'" placement="top" :open-delay=".5">
|
|
|
+ <i class="el-icon-view" :class="{active: views.includes(item.id)}" @click="setViewItem(item)"></i>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ <el-image
|
|
|
+ :src="item.url"
|
|
|
+ class="img"
|
|
|
+ :preview-src-list="list.map(item => item.url)">
|
|
|
+ </el-image>
|
|
|
+ <el-tooltip v-if="!editing" class="item" effect="dark" :content="item.name" placement="top" :open-delay=".5">
|
|
|
+ <div class="name">{{item.name}}</div>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-input class="nameinput" v-else v-model="item.name" size="mini" placeholder="请输入照片名称" clearable/>
|
|
|
</div>
|
|
|
- <el-image
|
|
|
- :src="item.url"
|
|
|
- class="img"
|
|
|
- :preview-src-list="list.map(item => item.url)">
|
|
|
- </el-image>
|
|
|
- <el-tooltip v-if="!editing" class="item" effect="dark" :content="item.name" placement="top" :open-delay=".3">
|
|
|
- <div class="name">{{item.name}}</div>
|
|
|
- </el-tooltip>
|
|
|
- <el-input class="nameinput" v-else v-model="item.name" size="mini" placeholder="请输入照片名称" clearable/>
|
|
|
- </div>
|
|
|
+ </draggable>
|
|
|
</el-checkbox-group>
|
|
|
<empty v-if="list.length == 0"/>
|
|
|
</div>
|
|
|
@@ -59,11 +69,13 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
+import draggable from 'vuedraggable'
|
|
|
import uploadPopup from '@/views/resetTeaming/components/training-photos/upload'
|
|
|
-import { photoQueryPage, photoDel } from '@/views/resetTeaming/components/training-photos/api'
|
|
|
+import { photoQueryPage, photoDel, photoUpdate, photoAlbumUpdate } from '@/views/resetTeaming/components/training-photos/api'
|
|
|
export default {
|
|
|
components: {
|
|
|
'upload-popup': uploadPopup,
|
|
|
+ draggable,
|
|
|
},
|
|
|
computed: {
|
|
|
detailName() {
|
|
|
@@ -92,11 +104,40 @@ export default {
|
|
|
openUpload() {
|
|
|
this.uploadVisible = true
|
|
|
},
|
|
|
+ setInitViwes() {
|
|
|
+ this.views = this.list.filter(item => item.clientShow).map(item => item.id)
|
|
|
+ },
|
|
|
+ async setCover(item) {
|
|
|
+ try {
|
|
|
+ await this.$confirm('是否确认设置为封面?', '提示')
|
|
|
+ await photoAlbumUpdate({
|
|
|
+ id: this.$route.params.id,
|
|
|
+ coverUrl: item.url
|
|
|
+ })
|
|
|
+ this.$message.success('设置成功')
|
|
|
+ this.FetchList()
|
|
|
+ } catch (error) {}
|
|
|
+ },
|
|
|
+ async setViewItem(item) {
|
|
|
+ try {
|
|
|
+ await this.$confirm('是否确认修改可见状态?', '提示')
|
|
|
+ await photoUpdate([{
|
|
|
+ ...item,
|
|
|
+ clientShow: +!item.clientShow
|
|
|
+ }])
|
|
|
+ this.$message.success('设置成功')
|
|
|
+ this.FetchList()
|
|
|
+ } catch (error) {}
|
|
|
+ },
|
|
|
changeMode() {
|
|
|
this.checked = []
|
|
|
- this.views = this.list.filter(item => item.clientShow).map(item => item.id)
|
|
|
+ this.setInitViwes()
|
|
|
this.editing = true
|
|
|
},
|
|
|
+ cancel() {
|
|
|
+ this.editing = false
|
|
|
+ this.list = this.list.sort((a, b) => a.order - b.order)
|
|
|
+ },
|
|
|
submited() {
|
|
|
this.FetchList()
|
|
|
},
|
|
|
@@ -114,15 +155,26 @@ export default {
|
|
|
async FetchList() {
|
|
|
try {
|
|
|
const res = await photoQueryPage({photoAlbumId: this.$route.params.id})
|
|
|
- console.log(res.data.rows)
|
|
|
+ // console.log(res.data.rows)
|
|
|
+ this.setInitViwes()
|
|
|
this.list = res.data.rows
|
|
|
} catch (error) {}
|
|
|
},
|
|
|
async confirm() {
|
|
|
try {
|
|
|
await this.$confirm('是否确认修改照片信息?', '提示')
|
|
|
-
|
|
|
- } catch (error) {}
|
|
|
+ const data = this.list.map((item, index) => ({
|
|
|
+ ...item,
|
|
|
+ order: index,
|
|
|
+ clientShow: +this.views.includes(item.id)
|
|
|
+ }))
|
|
|
+ await photoUpdate(data)
|
|
|
+ this.editing = false
|
|
|
+ this.$message.success('修改成功')
|
|
|
+ this.FetchList()
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error)
|
|
|
+ }
|
|
|
},
|
|
|
async remove() {
|
|
|
try {
|
|
|
@@ -130,6 +182,9 @@ export default {
|
|
|
await photoDel({
|
|
|
ids: this.checked.join(',')
|
|
|
})
|
|
|
+ this.$message.success('删除成功')
|
|
|
+ this.editing = false
|
|
|
+ this.FetchList()
|
|
|
} catch (error) {}
|
|
|
}
|
|
|
}
|
|
|
@@ -143,6 +198,7 @@ export default {
|
|
|
flex-direction: column;
|
|
|
text-align: center;
|
|
|
position: relative;
|
|
|
+ cursor: move;
|
|
|
>.name{
|
|
|
width: 150px;
|
|
|
height: 30px;
|
|
|
@@ -160,7 +216,8 @@ export default {
|
|
|
margin-top: 10px;
|
|
|
}
|
|
|
}
|
|
|
-.ctrl-bar{
|
|
|
+.ctrl-bar,
|
|
|
+.ctrl-bar-view{
|
|
|
background-color: rgba(0, 0, 0, .45);
|
|
|
height: 30px;
|
|
|
position: absolute;
|
|
|
@@ -172,7 +229,19 @@ export default {
|
|
|
align-items: center;
|
|
|
padding: 0 15px;
|
|
|
}
|
|
|
-.el-icon-view{
|
|
|
+.ctrl-bar-view{
|
|
|
+ opacity: 0;
|
|
|
+ visibility: hidden;
|
|
|
+ transition: all .3s;
|
|
|
+}
|
|
|
+.img-container:hover{
|
|
|
+ .ctrl-bar-view{
|
|
|
+ opacity: 1;
|
|
|
+ visibility: visible;
|
|
|
+ }
|
|
|
+}
|
|
|
+.el-icon-view,
|
|
|
+.el-icon-picture-outline-round{
|
|
|
font-size: 14px;
|
|
|
color: #fff;
|
|
|
cursor: pointer;
|
wolyshaw
