center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

fix: 模版管理优化

Browse Source
This commit is contained in:
dataeaseShu 2022-08-24 17:50:13 +08:00
parent 892c92d52c
commit 1a63b6113e
12 changed files with 136 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
frontend/src/assets/icon_nopicture_filled.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 498 B

5
frontend/src/styles/index.scss
View File

@ -1030,6 +1030,11 @@ div:focus {
}
.de-dialog-form {
.el-dialog__close {
font-size: 20px;
}
.el-dialog__body {
padding: 0 24px 24px 24px;
}

23
frontend/src/views/panel/template/component/TemplateImport.vue
View File

@ -10,11 +10,8 @@
:rules="templateInfoRules"
>
<el-form-item :label="$t('system_parameter_setting.template_name')" prop="name">
<el-row>
<el-col :span="19" style="padding-right: 2px;">
<el-input v-model="templateInfo.name" clearable size="small" />
</el-col>
<el-col :span="5" >
<div class="flex-template">
<el-input v-model="templateInfo.name" clearable size="small" />
<deBtn
style="margin-left: 10px"
class="el-icon-upload2"
@ -30,8 +27,7 @@
hidden
@change="handleFileChange"
/>
</el-col>
</el-row>
</div>
</el-form-item>
</el-form>
<el-row class="preview" :style="classBackground" />
@ -220,3 +216,16 @@ export default {
background-size: 100% 100% !important;
}
</style>
<style lang="scss">
.flex-template {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.el-input {
margin-right: 2px;
flex: 1;
}
}
</style>

26
frontend/src/views/panel/template/component/TemplateItem.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="de-card-model">
<div class="card-img-model">
<div :style="classBackground" class="de-card-model">
<div class="card-img-model" :style="classImg">
<img :src="model.snapshot" alt="" />
</div>
<div class="card-info">
@ -38,6 +38,25 @@ export default {
type: Object,
default: () => {},
},
width: {
type: Number
}
},
computed: {
classBackground() {
return {
width: this.width + 'px',
height: this.width * 0.714 + 'px',
}
},
classImg() {
return {
width: this.width + 'px',
height: this.width * 0.576 + 'px',
// background: `url(${this.model.snapshot}) no-repeat`,
// 'background-size': `100% 100%`
}
},
},
methods: {
handleCommand(key) {
@ -49,8 +68,6 @@ export default {
<style lang="scss">
.de-card-model {
width: 258px;
height: 184px;
box-sizing: border-box;
background: #ffffff;
border: 1px solid var(--deCardStrokeColor, #dee0e3);
@ -60,6 +77,7 @@ export default {
border-bottom: 1px solid var(--deCardStrokeColor, #dee0e3);
height: 144px;
width: 100%;
overflow: hidden;
img {
width: 100%;

4
frontend/src/views/panel/template/component/TemplateList.vue
View File

@ -3,7 +3,7 @@
<el-input
v-model="templateFilterText"
:placeholder="$t('panel.filter_keywords')"
size="mini"
size="small"
clearable
prefix-icon="el-icon-search"
/>
@ -22,7 +22,7 @@
v-for="ele in templateListComputed"
:key="ele.name"
>
<i class="el-icon-folder folder" />
<svg-icon icon-class="scene" class="ds-icon-scene" />
<span>{{ ele.name }}</span>
<span @click.stop class="more">
<el-dropdown

22
frontend/src/views/panel/template/index.vue
View File

@ -33,7 +33,7 @@
</div>
<div class="de-tabs-right">
<div v-if="currentTemplateLabel" class="active-template">
{{ currentTemplateLabel }}({{ currentTemplateShowList.length }})
{{ currentTemplateLabel }}&nbsp;&nbsp;({{ currentTemplateShowList.length }})
<deBtn
type="primary"
@click="templateImport(currentTemplateId)"
@ -46,10 +46,11 @@
v-if="!currentTemplateShowList.length"
description="暂无模版"
></el-empty>
<div v-if="currentTemplateId !== ''" class="template-box">
<div id="template-box" v-show="currentTemplateId !== ''" class="template-box">
<template-item
v-for="item in currentTemplateShowList"
:key="item.id"
:width="templateCurWidth"
:model="item"
@command="(key) => handleCommand(key, item)"
/>
@ -108,7 +109,10 @@ import TemplateList from "./component/TemplateList";
import TemplateItem from "./component/TemplateItem";
import TemplateImport from "./component/TemplateImport";
import { save, templateDelete, find } from "@/api/system/template";
import elementResizeDetectorMaker from 'element-resize-detector'
import msgCfm from "@/components/msgCfm/index";
import { log } from '@antv/g2plot/lib/utils';
export default {
name: "PanelMain",
mixins: [msgCfm],
@ -141,6 +145,8 @@ export default {
currentTemplateLabel: "",
currentTemplateId: "",
templateList: [],
templateMiniWidth: 262,
templateCurWidth: 262,
formType: "",
originName: "",
templateDialog: {
@ -165,6 +171,17 @@ export default {
},
mounted() {
this.getTree();
const _this = this
const erd = elementResizeDetectorMaker()
const templateMainDom = document.getElementById('template-box')
// 监听div变动事件
erd.listenTo(templateMainDom, element => {
_this.$nextTick(() => {
const curSeparator = Math.trunc(templateMainDom.offsetWidth / _this.templateMiniWidth)
console.log(1, curSeparator)
_this.templateCurWidth = Math.trunc(templateMainDom.offsetWidth / curSeparator) - 50
})
})
},
methods: {
roleValidator(rule, value, callback) {
@ -313,7 +330,6 @@ export default {
},
closeEditTemplateDialog() {
this.templateDialog.visible = false;
this.showCurrentTemplate(this.templateDialog.pid);
},
templateImport(pid) {
this.templateDialog.visible = true;

3
frontend/src/views/system/SysParam/BasicSetting.vue
View File

@ -235,7 +235,8 @@ export default {
this.show = true;
window.location.reload();
} else {
} this.openMessageSuccess("commons.save_failed", 'error');
this.openMessageSuccess("commons.save_failed", 'error');
}
});
},
cancel() {

2
frontend/src/views/system/SysParam/MapSetting/MapSettingLeft.vue
View File

@ -5,7 +5,7 @@
<el-row style="margin-bottom: 10px">
<el-input
v-model="filterText"
size="mini"
size="small"
:placeholder="$t('commons.search')"
prefix-icon="el-icon-search"
clearable

8
frontend/src/views/system/SysParam/MapSetting/index.vue
View File

@ -1,5 +1,5 @@
<template>
<de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]" style="height: calc(100vh - 150px);">
<de-container class="de-earth" v-loading="$store.getters.loadingMap[$store.getters.currentPath]" style="height: calc(100vh - 150px);">
<de-aside-container type="mapset" style="height: 100%;">
<map-setting-left ref="map_setting_tree" :tree-datas="treeDatas" @emit-add="emitAdd" @refresh-tree="refreshTree" @show-node-info="loadForm" />
@ -62,5 +62,9 @@ export default {
</script>
<style lang="scss" scoped>
.de-earth {
padding: 24px;
width: 100%;
overflow: auto;
}
</style>

76
frontend/src/views/system/plugin/index.vue
View File

@ -41,10 +41,17 @@
<div v-for="ele in data" :key="ele.pluginId" class="de-card-plugin">
<div class="card-info">
<div class="info-top">
<img
src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
<!-- <img
:src="`https://de.fit2cloud.com/api/pluginCommon/staticInfo/${ele.moduleName}/svg`"
alt=""
/>
/> -->
<el-image
:src="`https://de.fit2cloud.com/api/pluginCommon/staticInfo/${ele.moduleName}/svg`"
>
<div slot="error" class="image-slot">
<img :src="imgDefault"/>
</div>
</el-image>
<p class="title">{{ ele.descript }}</p>
<el-tooltip
class="item"
@ -74,7 +81,7 @@
<div class="card-method">
<el-upload
v-permission="['plugin:upload']"
:action="baseUrl + 'api/plugin/upload'"
:action="baseUrl + 'api/plugin/update/' + ele.pluginId"
:multiple="false"
:show-file-list="false"
:file-list="fileList"
@ -85,14 +92,31 @@
name="file"
:headers="headers"
>
<div class="btn-plugin"><i class="el-icon-more"></i>更新</div>
<div class="btn-plugin update">
<i class="el-icon-more"></i>更新
</div>
</el-upload>
<el-divider direction="vertical"></el-divider>
<el-tooltip
class="item"
effect="dark"
:content="'内置插件，无法卸载'"
placement="top"
>
<div
:class="[{ 'is-disable': btnDisabled(ele) }]"
v-if="checkPermission(['plugin:uninstall']) && btnDisabled(ele)"
@click="del(ele)"
class="btn-plugin uninstall"
>
<i class="el-icon-more"></i>卸载
</div>
</el-tooltip>
<div
:class="[{ 'is-disable': btnDisabled(ele) }]"
v-show="checkPermission(['plugin:uninstall'])"
v-if="checkPermission(['plugin:uninstall']) && !btnDisabled(ele)"
@click="del(ele)"
class="btn-plugin"
class="btn-plugin uninstall"
>
<i class="el-icon-more"></i>卸载
</div>
@ -119,6 +143,7 @@ export default {
name: "",
listValue: ["cost", "creator", "version", "installTime"],
data: [],
imgDefault: require('@/assets/icon_nopicture_filled.png'),
uploading: false,
baseUrl: process.env.VUE_APP_BASE_API,
fileList: [],
@ -159,14 +184,12 @@ export default {
pluginLists(0, 0, param).then((response) => {
this.data = response.data.listObject;
this.data.forEach((ele) => {
if (ele.installTime) {
ele.installTime = new Date(ele.installTime).format(
"yyyy-MM-dd hh:mm:ss"
);
}
if (ele.cost) {
ele.cost = ele.cost.toLocaleString();
}
ele.installTime = ele.installTime
? new Date(ele.installTime).format("yyyy-MM-dd hh:mm:ss")
: "-";
});
});
},
@ -194,10 +217,11 @@ export default {
},
del(row) {
if (row.pluginId < 4) return;
const options = {
title: "确定卸载该插件？",
content: "卸载并重启服务器之后才能生效",
confirmButtonText: this.$t('卸载'),
confirmButtonText: this.$t("卸载"),
type: "primary",
cb: () => {
uninstall(row.pluginId)
@ -266,6 +290,7 @@ export default {
font-weight: 400;
font-size: 14px;
line-height: 22px;
cursor: pointer;
/* identical to box height, or 157% */
display: flex;
@ -279,6 +304,19 @@ export default {
font-size: 13px;
margin-right: 5.33px;
}
&.is-disable {
cursor: not-allowed;
color: #bbbfc4;
}
}
.btn-plugin.update:not(.is-disable):hover {
color: var(--primaryHover, #26acff);
}
.btn-plugin.uninstall:not(.is-disable):hover {
color: var(--deDangerHover, #26acff);
}
}
@ -292,7 +330,8 @@ export default {
.info-top {
margin-bottom: 12px;
overflow: hidden;
img {
.el-image {
float: left;
box-sizing: border-box;
width: 40px;
@ -300,6 +339,15 @@ export default {
background: #ffffff;
border: 1px solid #dee0e3;
border-radius: 4px;
display: flex;
.image-slot {
padding: 4px;
}
}
img {
width: 100%;
height: 100%;
}
.title {

2
frontend/src/views/system/task/filterUser.vue
View File

@ -279,7 +279,7 @@ export default {
"dataset.task.last_exec_status",
].forEach((ele, index) => {
const { activeType: type, list } =
filterDataset[index];
this.filterDataset[index];
if (this.active[type].length) {
params.push(
`${this.$t(ele)}:${this.active[type]

1
frontend/src/views/system/task/filterUserRecord.vue
View File

@ -273,7 +273,6 @@ export default {
].forEach((ele, index) => {
const { activeType: type, list } =
this.filterDataset[index];
console.log('type', type);
if (this.active[type].length) {
params.push(
`${this.$t(ele)}:${this.active[type]