<!--拓扑图缩略图卡片--> <template> <el-card :class="{'box-card': true, 'active': data.checked}" shadow="hover" :body-style="{ padding: '0px' }"> <div class="image" v-if="!data.pic" style="line-height: 120px;text-align: center;"> <img :src="require('@/assets/images/noImg.png')" style="height:60px;"> </div> <img class="image" v-else :src="`/image-service/common/image_get?systemId=dataPlatform&key=${data.pic}`"> <div class="shadow image" v-if="!isRecycle" @click.stop="toEdit"> <el-checkbox v-model="data.checked" class="shadowCheck" @change="changeCheck"></el-checkbox> </div> <div class="content"> <div> <span class="title" :title="data.name">{{data.name}}</span> <div class="func"> <el-popover placement="top" width="200" trigger="hover" popper-class="customPop"> <p>版本 : {{data.version}}</p> <p>更新时间 : {{data.lastUpdate}}</p> <!-- <p>更新人 : {{data.putUser || '张三'}}</p> --> <span slot="reference"><img :src="require('@/assets/images/tips.png')" style="width: 20px;height:20px" /></span> </el-popover> <el-dropdown :hide-on-click="false" placement="bottom-start" trigger="click" @command="handleCommand"> <span class="el-dropdown-link"> <img :src="require('@/assets/images/more.png')" style="width: 20px;height:20px" /> </span> <el-dropdown-menu slot="dropdown"> <template v-for="t in moreList"> <el-dropdown-item :key="t.name" :command="t.name" v-if="dropdownItemShow(t)">{{t.label}}</el-dropdown-item> </template> </el-dropdown-menu> </el-dropdown> </div> </div> <div class="tags"> <span v-for="(t,i) in data.label" :key="data.name + i">{{t}}</span> </div> </div> </el-card> </template> <script> import { publishGraph } from "@/api/home" export default { props: { data: { type: Object, default: () => { return {} } }, isRecycle: { type: Boolean, default: false }, isPub: { type: Number, default: 0 } }, data() { return { moreList: [ { name: 'rename', label: '重命名', show: 'any' }, // 类型为 未发布/已发布 时出现 { name: 'publish', label: '发布', show: 0 }, // 类型为 未发布 时出现 { name: 'download', label: '下载', show: 1 }, // 类型为 已发布 时出现 { name: 'editTag', label: '修改标签', show: 1 }, // 类型为 已发布 时出现 { name: 'moveTo', label: '移动到', show: 'any' }, // 类型为 未发布/已发布 时出现 { name: 'delete', label: '删除', show: 'any' }, // 类型为 未发布/已发布 时出现 { name: 'recover', label: '恢复', show: 'isRecycle' }, // 类型为 回收站 时出现 { name: 'deleteRecycle', label: '永久删除', show: 'isRecycle' }, // 类型为 回收站 时出现 ], checked: false }; }, methods: { // 显示下拉框内容选项判断 dropdownItemShow(item) { return (!this.isRecycle && (item.show == 'any' || item.show == this.isPub)) || (this.isRecycle && item.show == "isRecycle") }, // 复选框改变时 changeCheck() { this.$emit('changeCheck', this.data); }, // 点击更多中的命令时 handleCommand(command) { const pa = { graphId: this.data.graphId, id: this.data.id }; switch (command) { case "rename": case "download": case "editTag": case "moveTo": case "delete": case "recover": case "deleteRecycle": this.$emit(command, this.data) break; case "publish": publishGraph(pa).then(res => { this.$message.success("发布成功"); this.$emit('publishSuc') }); break; } }, // 进入编辑页面 toEdit(e) { const targetName = e.target.nodeName.toLowerCase(); if (targetName == 'div') { this.$emit("toEdit", this.data) } } }, }; </script> <style lang="less" scoped> .box-card { position: relative; width: 260px; height: 193px; border-radius: 8px; margin-right: 20px; margin-bottom: 20px; cursor: pointer; &:hover, &.active { border-color: #0091ff80; box-shadow: 0px 8px 16px 0px rgba(195, 199, 203, 0.4); .shadow { display: block; } .content { .func { display: block; } } } .image { display: block; width: 100%; height: 120px; background-color: #f7f9fa; } .shadow { display: none; position: absolute; top: 0; left: 0; background-color: #8d939926; .shadowCheck { position: absolute; top: 8px; left: 12px; } } .content { padding: 8px 12px; vertical-align: middle; .title { display: inline-block; color: #1f2429; margin: 0; max-width: 182px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .func { & > * + * { margin-left: 8px; } display: none; float: right; vertical-align: middle; i { font-size: 20px; } } .tags { margin-top: 4px; span { display: inline-block; padding: 1px 6px; font-size: 12px; color: #8d9399; line-height: 18px; border: 1px solid #8d9399; border-radius: 3px; margin-bottom: 11px; & + span { margin-left: 4px; } } } } } .customPop { p { font-size: 12px; & + p { margin-top: 10px; } } } </style>