refactor(仪表板、数据大屏): 优化发布

core/core-backend/src/main/java/io/dataease/visualization/server/DataVisualizationServer.java

@@ -495,7 +495,7 @@ public class DataVisualizationServer implements DataVisualizationApi {
     @DeLog(id = "#p0.id", ot = LogOT.MODIFY, stExp = "#p0.type")
     @Override
     @Transactional
-    public void updateCanvas(DataVisualizationBaseRequest request) {
+    public DataVisualizationVO updateCanvas(DataVisualizationBaseRequest request) {
         Long dvId = request.getId();
         if (dvId == null) {
             DEException.throwException("ID can not be null");
@@ -525,6 +525,7 @@ public class DataVisualizationServer implements DataVisualizationApi {
         coreVisualizationManage.innerEdit(visualizationInfo);
         //保存图表信息
         chartDataManage.saveChartViewFromVisualization(request.getComponentData(), dvId, request.getCanvasViewInfo());
+        return new DataVisualizationVO(visualizationInfo.getStatus());
     }
 
     @Override

core/core-frontend/src/components/dashboard/DbToolbar.vue

@@ -736,7 +736,11 @@ const initOpenHandler = newWindow => {
           >
             {{ t('data_set.save') }}
           </el-button>
-          <el-dropdown popper-class="menu-outer-dv_popper" trigger="hover">
+          <el-dropdown
+            :disabled="dvInfo.status === 0"
+            popper-class="menu-outer-dv_popper"
+            trigger="hover"
+          >
             <el-button
               @click="saveCanvasWithCheck(true, 1)"
               style="float: right; margin: 0 12px 0 0"
@@ -746,7 +750,7 @@ const initOpenHandler = newWindow => {
             </el-button>
             <template #dropdown>
               <el-dropdown-menu>
-                <el-dropdown-item @click="recoverToPublished" :disabled="dvInfo.status !== 2">
+                <el-dropdown-item @click="recoverToPublished" v-if="dvInfo.status === 2">
                   <el-icon class="handle-icon">
                     <Icon name="icon_left_outlined"
                       ><dv-recover-outlined class="svg-icon toolbar-icon"
@@ -754,7 +758,10 @@ const initOpenHandler = newWindow => {
                   </el-icon>
                   {{ t('visualization.publish_recover') }}
                 </el-dropdown-item>
-                <el-dropdown-item @click="publishStatusChange(0)" :disabled="dvInfo.status === 0">
+                <el-dropdown-item
+                  @click="publishStatusChange(0)"
+                  v-if="[1, 2].includes(dvInfo.status)"
+                >
                   <el-icon class="handle-icon">
                     <Icon name="icon_left_outlined"
                       ><dv-cancel-publish class="svg-icon toolbar-icon"

core/core-frontend/src/components/data-visualization/DvToolbar.vue

@@ -491,7 +491,11 @@ const fullScreenPreview = () => {
         >
           {{ t('visualization.save') }}
         </el-button>
-        <el-dropdown effect="dark" popper-class="menu-outer-dv_popper" trigger="hover">
+        <el-dropdown
+          :disabled="dvInfo.status === 0"
+          popper-class="menu-outer-dv_popper"
+          trigger="hover"
+        >
           <el-button
             @click="saveCanvasWithCheck(true, 1)"
             style="float: right; margin: 0 12px 0 0"
@@ -501,7 +505,7 @@ const fullScreenPreview = () => {
           </el-button>
           <template #dropdown>
             <el-dropdown-menu>
-              <el-dropdown-item @click="recoverToPublished" :disabled="dvInfo.status !== 2">
+              <el-dropdown-item @click="recoverToPublished" v-if="dvInfo.status === 2">
                 <el-icon class="handle-icon">
                   <Icon name="icon_left_outlined"
                     ><dv-recover-outlined class="svg-icon toolbar-icon"
@@ -511,7 +515,7 @@ const fullScreenPreview = () => {
               </el-dropdown-item>
               <el-dropdown-item
                 @click.stop="publishStatusChange(0)"
-                :disabled="dvInfo.status === 0"
+                v-if="[1, 2].includes(dvInfo.status)"
               >
                 <el-icon class="handle-icon">
                   <Icon name="icon_left_outlined"

core/core-frontend/src/locales/en.ts

@@ -2894,6 +2894,7 @@ export default {
     column_name: 'Field name'
   },
   visualization: {
+    publish_update_tips: 'Update available',
     filter_freeze_tips:
       'A pinned query component already exists. Confirm switching to this component?',
     query_position: 'Query Component Position',

core/core-frontend/src/locales/tw.ts

@@ -2814,6 +2814,7 @@ export default {
     column_name: '欄位名稱'
   },
   visualization: {
+    publish_update_tips: '有更新',
     filter_freeze_tips: '已存在置頂查詢組件，確定切換該組件？',
     query_position: '查詢組件位置',
     default: '預設',

core/core-frontend/src/locales/zh-CN.ts

@@ -2820,6 +2820,7 @@ export default {
     column_name: '字段名称'
   },
   visualization: {
+    publish_update_tips: '有更新',
     filter_freeze_tips: '已存在置顶查询组件,确定切换该组件？',
     query_position: '查询组件位置',
     default: '默认',

core/core-frontend/src/style/index.less

@@ -148,6 +148,7 @@ body {
 .field-icon-red {
   color: #f54a45;
 }
+
 .field-icon-url {
   color: #3370ff;
 }
@@ -195,9 +196,11 @@ body {
 
 .hover-icon-in-table {
   color: var(--ed-color-primary) !important;
+
   &[aria-expanded='true'] {
     background: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1));
   }
+
   &:hover {
     background: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1));
   }
@@ -241,6 +244,7 @@ body {
 .toolbar-icon-disabled {
   cursor: not-allowed !important;
   color: #5f5f5f !important;
+
   &:active,
   &:hover {
     background: transparent;
@@ -276,6 +280,7 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
+
   .ed-icon {
     font-size: 14px;
     position: relative;
@@ -285,6 +290,7 @@ body {
   &:disabled {
     color: #5f5f5f;
     cursor: not-allowed;
+
     &::after {
       display: none !important;
     }
@@ -356,13 +362,16 @@ body {
 .create-dialog {
   .ed-form-item {
     margin-bottom: 16px;
+
     &.is-error {
       margin-bottom: 40px;
     }
+
     &:last-child {
       &.is-error {
         margin-bottom: 24px;
       }
+
       margin-bottom: 0;
     }
   }
@@ -390,13 +399,16 @@ em {
   max-height: 100vh;
   overflow-y: auto;
   background: none !important;
+
   .ed-dialog__header {
     padding: 0px;
+
     .ed-dialog__headerbtn {
       .ed-icon {
         font-size: 24px;
         color: white;
       }
+
       background: rgba(31, 35, 41, 0.9);
       height: 48px;
       width: 48px;
@@ -404,11 +416,13 @@ em {
       right: 24px;
       padding: 12px;
       border-radius: 50%;
+
       &:hover {
         background: #646a73;
       }
     }
   }
+
   .ed-dialog__body {
     padding: 0px;
     background-color: #1f232999;
@@ -494,6 +508,7 @@ strong {
 
   .btn-text {
     padding: 2px 4px;
+
     &:hover {
       background: var(--primary10, #3370ff1a);
     }
@@ -528,6 +543,7 @@ strong {
       transform: rotate(-360deg);
     }
   }
+
   .ed-message__icon {
     color: var(--primary, #3370ff);
     animation: circle infinite 0.75s linear;

core/core-frontend/src/utils/canvasUtils.ts

@@ -610,8 +610,12 @@ export async function canvasSave(callBack) {
     })
   }
   method(canvasInfo).then(res => {
-    // saveCanvas 为初次保存 状态为0 updateCanvas为二次保存状态为2
-    dvMainStore.updateDvInfoCall(method === updateCanvas ? 2 : 0, res.data, newContentId)
+    if (method === updateCanvas) {
+      // saveCanvas 为初次保存 状态为0 updateCanvas为二次保存状态为2
+      dvMainStore.updateDvInfoCall(res.data?.status, null, newContentId)
+    } else {
+      dvMainStore.updateDvInfoCall(0, res.data, newContentId)
+    }
     snapshotStore.resetStyleChangeTimes()
     callBack(res)
   })

core/core-frontend/src/views/data-visualization/PreviewHead.vue

@@ -114,7 +114,9 @@ const initOpenHandler = newWindow => {
 <template>
   <div class="preview-head flex-align-center">
     <div :title="dvInfo.name" class="canvas-name ellipsis">{{ dvInfo.name }}</div>
-
+    <div v-show="dvInfo.status === 2" class="canvas-have-update">
+      {{ t('visualization.publish_update_tips') }}
+    </div>
     <el-tooltip
       effect="dark"
       :content="favorited ? t('visualization.cancel_store') : t('visualization.store')"
@@ -254,6 +256,16 @@ const initOpenHandler = newWindow => {
     font-size: 16px;
     font-weight: 500;
   }
+  .canvas-have-update {
+    background-color: rgba(52, 199, 36, 0.2);
+    color: rgba(44, 169, 31, 1);
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 20px;
+    vertical-align: middle;
+    padding: 0 4px;
+    margin-left: 8px;
+  }
   .custom-icon {
     cursor: pointer;
     margin-left: 8px;

sdk/api/api-base/src/main/java/io/dataease/api/visualization/DataVisualizationApi.java

@@ -62,7 +62,7 @@ public interface DataVisualizationApi {
     @PostMapping("/updateCanvas")
     @DePermit(value = {"#p0.id + ':manage'"}, busiFlag = "#p0.type")
     @Operation(summary = "画布更新")
-    void updateCanvas(@RequestBody DataVisualizationBaseRequest request);
+    DataVisualizationVO updateCanvas(@RequestBody DataVisualizationBaseRequest request);
 
 
     @PostMapping("/updatePublishStatus")

sdk/api/api-base/src/main/java/io/dataease/api/visualization/vo/DataVisualizationVO.java

@@ -202,4 +202,8 @@ public class DataVisualizationVO implements Serializable {
         }
         this.version = version;
     }
+
+    public DataVisualizationVO(Integer status) {
+        this.status = status;
+    }
 }