|
@@ -1,209 +1,219 @@
|
|
|
<!--拓扑图缩略图卡片-->
|
|
|
<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>
|
|
|
+ <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>
|
|
|
- </div>
|
|
|
- <div class="tags">
|
|
|
- <span v-for="(t,i) in data.label" :key="data.name + i">{{t}}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
+ <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="220" 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"
|
|
|
+import { publishGraph } from "@/api/home";
|
|
|
export default {
|
|
|
- props: {
|
|
|
- data: {
|
|
|
- type: Object,
|
|
|
- default: () => {
|
|
|
- return {}
|
|
|
- }
|
|
|
+ props: {
|
|
|
+ data: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {
|
|
|
+ return {};
|
|
|
+ },
|
|
|
+ },
|
|
|
+ isRecycle: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ isPub: {
|
|
|
+ type: Number,
|
|
|
+ default: 0,
|
|
|
+ },
|
|
|
},
|
|
|
- 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")
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ moreList: [
|
|
|
+ { name: "edit", label: "编辑", show: "any" }, // 类型为 未发布/已发布 时出现
|
|
|
+ { 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,
|
|
|
+ };
|
|
|
},
|
|
|
- // 复选框改变时
|
|
|
- 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 => {
|
|
|
- if (res.result == "success") {
|
|
|
- this.$message.success("发布成功");
|
|
|
- this.$emit('publishSuc')
|
|
|
- } else {
|
|
|
- this.$message.success("发布失败");
|
|
|
+ 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 "edit":
|
|
|
+ this.$emit("toEdit", this.data);
|
|
|
+ break;
|
|
|
+ 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) => {
|
|
|
+ if (res.result == "success") {
|
|
|
+ this.$message.success("发布成功");
|
|
|
+ this.$emit("publishSuc");
|
|
|
+ } else {
|
|
|
+ this.$message.success("发布失败");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 进入编辑页面
|
|
|
+ toEdit(e) {
|
|
|
+ const targetName = e.target.nodeName.toLowerCase();
|
|
|
+ if (targetName == "div") {
|
|
|
+ this.$emit("toEdit", this.data);
|
|
|
}
|
|
|
- });
|
|
|
- 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;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- .content {
|
|
|
- .func {
|
|
|
+ .image {
|
|
|
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;
|
|
|
+ width: 100%;
|
|
|
+ height: 120px;
|
|
|
+ background-color: #f7f9fa;
|
|
|
}
|
|
|
- }
|
|
|
- .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;
|
|
|
- }
|
|
|
+ .shadow {
|
|
|
+ display: none;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ background-color: #8d939926;
|
|
|
+ .shadowCheck {
|
|
|
+ position: absolute;
|
|
|
+ // top: 8px;
|
|
|
+ // left: 12px;
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ padding: 8px 0 0 12px;
|
|
|
+ // background-color: #aaa;
|
|
|
+ }
|
|
|
}
|
|
|
- .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;
|
|
|
+ .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 {
|
|
|
+ cursor: default;
|
|
|
+ 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;
|
|
|
+ p {
|
|
|
+ font-size: 12px;
|
|
|
+ & + p {
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
</style>
|