Merge branch 'dev-v2' into pr@dev-v2_dzz

core/core-backend/src/main/resources/db/desktop/V2.1__ddl.sql

@@ -18,7 +18,7 @@ CREATE TABLE `visualization_template` (
 
 BEGIN;
 INSERT INTO `core_menu`
-VALUES (19, 0, 2, 'template-market', 'template-market', 4, NULL, '/template-market', 0, 1, 1);
+VALUES (19, 0, 2, 'template-market', 'template-market', 4, NULL, '/template-market', 1, 1, 0);
 INSERT INTO `core_menu`
 VALUES (20, 15, 2, 'template-setting', 'system/template-setting', 4, 'icon_template', '/template-setting', 0, 1, 1);
 COMMIT;

core/core-backend/src/main/resources/db/migration/V2.1__ddl.sql

@@ -20,7 +20,7 @@ CREATE TABLE `visualization_template`
 
 BEGIN;
 INSERT INTO `core_menu`
-VALUES (19, 0, 2, 'template-market', 'template-market', 4, NULL, '/template-market', 0, 1, 1);
+VALUES (19, 0, 2, 'template-market', 'template-market', 4, NULL, '/template-market', 1, 1, 0);
 INSERT INTO `core_menu`
 VALUES (20, 15, 2, 'template-setting', 'system/template-setting', 4, 'icon_template', '/template-setting', 0, 1, 1);
 COMMIT;

core/core-frontend/src/views/system/template-setting/index.vue

@@ -1,10 +1,5 @@
 <template>
-  <p class="router-title">模版管理</p>
-  <div class="sys-setting-p">
-    <div class="container-sys-param">
-      <template-manage></template-manage>
-    </div>
-  </div>
+  <template-manage></template-manage>
 </template>
 
 <script lang="ts" setup>
@@ -19,30 +14,3 @@ const handleClick = (tab, event: Event) => {
   console.log(tab, event)
 }
 </script>
-<style lang="less">
-.router-title {
-  color: #1f2329;
-  font-feature-settings: 'clig' off, 'liga' off;
-  font-family: PingFang SC;
-  font-size: 20px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 28px;
-}
-.sys-setting-p {
-  width: 100%;
-  background: var(--ContentBG, #ffffff);
-  height: calc(100vh - 176px);
-  box-sizing: border-box;
-  margin-top: 12px;
-}
-.setting-auto-h {
-  height: auto !important;
-}
-
-.container-sys-param {
-  height: 100%;
-  overflow-y: auto;
-}
-</style>
-<style lang="less" scoped></style>

core/core-frontend/src/views/template-market/component/MarketPreviewV2.vue

@@ -9,12 +9,11 @@
         </el-tooltip>
         <el-row v-show="state.asideActive" style="padding: 24px 12px 0">
           <el-row style="align-items: center">
-            <el-breadcrumb separator-icon="ArrowRight">
-              <el-breadcrumb-item class="custom-breadcrumb-item" @click="closePreview()">{{
-                t('visualization.template_preview')
-              }}</el-breadcrumb-item>
-              <el-breadcrumb-item>预览</el-breadcrumb-item>
-            </el-breadcrumb>
+            <span class="custom-breadcrumb-item" @click="closePreview()">{{
+              t('visualization.template_preview')
+            }}</span>
+            <el-icon><ArrowRight /></el-icon> <span class="custom-breadcrumb-item-to">预览</span>
+
             <el-tooltip class="box-item" effect="dark" content="收起" placement="right">
               <el-icon class="insert-retract" @click="asideActiveChange(false)">
                 <Icon name="market-retract"></Icon>
@@ -571,9 +570,13 @@ onMounted(() => {
 }
 
 .custom-breadcrumb-item {
+  font-size: 14px;
   cursor: pointer;
-  ::v-deep(.ed-breadcrumb__inner) {
-    color: rgba(100, 106, 115, 1);
-  }
+  color: rgba(100, 106, 115, 1);
+}
+
+.custom-breadcrumb-item-to {
+  font-size: 14px;
+  color: rgba(31, 35, 41, 1);
 }
 </style>

core/core-frontend/src/views/template-market/index.vue

@@ -55,11 +55,21 @@
           id="template-show-area"
           class="template-right"
         >
+          <el-col class="main-head">
+            <div class="custom-split-line"></div>
+            <span v-show="!state.searchText" class="custom-category">{{
+              state.marketActiveTab
+            }}</span>
+            <span v-show="state.searchText" class="custom-search">{{ state.marketActiveTab }}</span>
+            <span v-if="state.searchText" class="custom-search-result"
+              >的搜索结果是{{ searchResultCount }}个</span
+            >
+          </el-col>
           <el-col
             v-for="templateItem in state.currentMarketTemplateShowList"
             v-show="templateItem.showFlag"
             :key="templateItem.id"
-            style="padding: 24px 12px 0; text-align: center; flex: 0"
+            style="float: left; padding: 24px 12px 0; text-align: center; flex: 0"
             :style="{ width: state.templateSpan }"
           >
             <template-market-v2-item
@@ -90,7 +100,7 @@
 <script setup lang="ts">
 import { getCategoriesObject, searchMarket } from '@/api/templateMarket'
 import elementResizeDetectorMaker from 'element-resize-detector'
-import { nextTick, reactive, watch, onMounted, ref } from 'vue'
+import { nextTick, reactive, watch, onMounted, ref, computed } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { ElMessage } from 'element-plus-secondary'
 import { decompression } from '@/api/visualization/dataVisualization'
@@ -180,6 +190,11 @@ watch(
     initTemplateShow()
   }
 )
+
+const searchResultCount = computed(
+  () => state.currentMarketTemplateShowList.filter(template => template.showFlag).length
+)
+
 const nodeClick = data => {
   state.marketActiveTab = data.label
   initTemplateShow()
@@ -317,10 +332,10 @@ onMounted(() => {
   if (templateMainDom) {
     erd.listenTo(templateMainDom, element => {
       nextTick(() => {
-        const curSeparator = Math.trunc(templateMainDom.offsetWidth / state.templateMiniWidth)
-        state.templateSpan =
-          100 / Math.trunc(templateMainDom.offsetWidth / state.templateMiniWidth) + '%'
-        state.templateCurWidth = Math.trunc(templateMainDom.offsetWidth / curSeparator) - 33
+        const offsetWidth = templateMainDom.offsetWidth - 26
+        const curSeparator = Math.trunc(offsetWidth / state.templateMiniWidth)
+        state.templateSpan = 100 / Math.trunc(offsetWidth / state.templateMiniWidth) + '%'
+        state.templateCurWidth = Math.trunc(offsetWidth / curSeparator) - 33
       })
     })
   }
@@ -380,10 +395,11 @@ const previewInit = () => {
       }
       .template-right {
         flex: 1;
-        display: inherit;
+        display: inline;
         height: 100%;
         background: rgba(239, 240, 241, 1);
         overflow-y: auto;
+        padding: 16px 12px;
       }
 
       .template-empty {
@@ -398,6 +414,41 @@ const previewInit = () => {
     }
   }
 }
+
+.main-head {
+  width: 100%;
+  float: left;
+  height: 24px;
+  display: inline;
+  .custom-split-line {
+    margin: 4px 8px 0 12px;
+    width: 2px;
+    height: 16px;
+    background: rgba(51, 112, 255, 1);
+    float: left;
+  }
+  .custom-category {
+    float: left;
+    font-weight: 500;
+    font-size: 16px;
+    color: rgba(31, 35, 41, 1);
+  }
+  .custom-search {
+    float: left;
+    font-weight: 500;
+    font-size: 16px;
+    color: rgba(51, 112, 255, 1);
+    margin-right: 8px;
+  }
+
+  .custom-search-result {
+    float: left;
+    font-weight: 500;
+    font-size: 16px;
+    color: rgba(31, 35, 41, 1);
+    margin-right: 8px;
+  }
+}
 </style>
 
 <style lang="less">

core/core-frontend/src/views/template/component/DeTemplateItem.vue

@@ -26,7 +26,7 @@
             <slot>
               <el-dropdown-item command="rename">
                 <el-icon><EditPen /></el-icon>
-                {{ $t('chart.rename') }}
+                编辑
               </el-dropdown-item>
               <el-dropdown-item command="delete">
                 <el-icon><Delete /></el-icon>
@@ -90,6 +90,7 @@ const handleCommand = key => {
     border-bottom: 1px solid var(--deCardStrokeColor, #dee0e3);
     height: 144px;
     width: 100%;
+    padding: 4px 6px 0 4px;
     overflow: hidden;
 
     img {
@@ -105,7 +106,7 @@ const handleCommand = key => {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 8px 12px 9px 12px;
+    padding: 4px 12px 9px 12px;
     box-sizing: border-box;
 
     .el-icon-more {

core/core-frontend/src/views/template/component/DeTemplateList.vue

@@ -1,18 +1,5 @@
 <template xmlns:el-col="http://www.w3.org/1999/html">
   <div class="de-template-list">
-    <el-input
-      v-model="state.templateFilterText"
-      :placeholder="'搜索关键字'"
-      size="small"
-      class="de-input-search"
-      clearable
-    >
-      <template #prefix>
-        <el-icon>
-          <Icon name="de-search" />
-        </el-icon>
-      </template>
-    </el-input>
     <el-empty
       v-if="!templateListComputed.length && state.templateFilterText === ''"
       :image="NoneImage"
@@ -24,6 +11,16 @@
       :description="'没有找到相关内容'"
     />
     <ul>
+      <li
+        :class="[{ select: state.activeTemplate === '1' }]"
+        @click="nodeClick({ id: '1', label: '默认分类' })"
+      >
+        <el-icon class="de-icon-sense">
+          <Icon name="scene" />
+        </el-icon>
+        <span class="text-template-overflow" :title="'默认分类'">默认分类</span>
+      </li>
+      <hr class="custom-line" />
       <li
         v-for="ele in templateListComputed"
         :key="ele.name"
@@ -56,16 +53,13 @@
           </el-dropdown>
         </span>
       </li>
+      <li @click="add()">
+        <el-icon class="de-icon-sense">
+          <Plus />
+        </el-icon>
+        <span class="text-template-overflow">{{ t('visualization.add_category') }}</span>
+      </li>
     </ul>
-    <el-button
-      v-if="state.templateFilterText === ''"
-      style="width: 100%"
-      icon="el-icon-plus"
-      secondary
-      @click="add()"
-    >
-      {{ t('visualization.add_category') }}
-    </el-button>
   </div>
 </template>
 
@@ -105,8 +99,7 @@ const state = reactive({
 })
 
 const templateListComputed = computed(() => {
-  if (!state.templateFilterText) return [...props.templateList]
-  return props.templateList.filter(ele => ele['name']?.includes(state.templateFilterText))
+  return props.templateList.filter(ele => ele['id'] !== '1')
 })
 
 const clickMore = (type, data) => {
@@ -260,4 +253,11 @@ defineExpose({
   width: 20px;
   height: 20px;
 }
+
+.custom-line {
+  margin: 4px;
+  background: rgba(31, 35, 41, 0.15);
+  border: 0;
+  height: 1px;
+}
 </style>

core/core-frontend/src/views/template/index.vue

@@ -1,88 +1,111 @@
 <template>
-  <div style="width: 100%; height: 100%">
-    <div class="de-template">
-      <div class="tabs-container flex-tabs">
-        <div class="de-tabs-left">
-          <de-template-list
-            ref="templateListRef"
-            :template-type="state.currentTemplateType"
-            :template-list="state.templateList"
-            @templateDelete="templateFolderDelete"
-            @templateEdit="templateEdit"
-            @showCurrentTemplate="showCurrentTemplate"
-            @templateImport="templateImport"
-            @showTemplateEditDialog="showTemplateEditDialog"
-          />
-        </div>
-        <div class="de-tabs-right">
-          <div v-if="state.currentTemplateLabel" class="active-template">
-            {{ state.currentTemplateLabel }}&nbsp;&nbsp;({{ state.currentTemplateShowList.length }})
-            <el-button
-              type="primary"
-              icon="Upload"
-              @click="templateImport(state.currentTemplateId)"
-            >
-              {{ t('visualization.import') }}
-            </el-button>
-          </div>
-          <el-empty
-            v-if="!state.currentTemplateShowList.length"
-            :image="NoneImage"
-            :description="'暂无模版'"
-          />
-          <div v-show="state.currentTemplateId !== ''" id="template-box" class="template-box">
-            <de-template-item
-              v-for="item in state.currentTemplateShowList"
-              :key="item.id"
-              :width="state.templateCurWidth"
-              :model="item"
-              @command="key => handleCommand(key, item)"
-            />
+  <div class="template-head">
+    <p class="router-title">模版管理</p>
+    <el-button style="float: right" type="primary" @click="templateImport(state.currentTemplateId)">
+      {{ t('visualization.import') }}
+    </el-button>
+    <el-input
+      v-model="state.templateFilterText"
+      :placeholder="'搜索关键字'"
+      class="template-search-class"
+      clearable
+    >
+      <template #prefix>
+        <el-icon>
+          <Icon name="de-search" />
+        </el-icon>
+      </template>
+    </el-input>
+  </div>
+  <div class="sys-setting-p">
+    <div class="container-sys-param">
+      <div style="width: 100%; height: 100%">
+        <div class="de-template">
+          <div class="tabs-container flex-tabs">
+            <div class="de-tabs-left">
+              <de-template-list
+                ref="templateListRef"
+                :template-type="state.currentTemplateType"
+                :template-list="state.templateList"
+                @templateDelete="templateFolderDelete"
+                @templateEdit="templateEdit"
+                @showCurrentTemplate="showCurrentTemplate"
+                @templateImport="templateImport"
+                @showTemplateEditDialog="showTemplateEditDialog"
+              />
+            </div>
+            <div class="de-tabs-right">
+              <div v-if="state.currentTemplateLabel" class="active-template">
+                <span v-show="!state.templateFilterText"
+                  >{{ state.currentTemplateLabel }}&nbsp;&nbsp;({{
+                    state.currentTemplateShowList.length
+                  }})</span
+                >
+                <span v-show="state.templateFilterText">
+                  <span style="color: #3370ff">{{ state.currentTemplateLabel }}&nbsp;&nbsp;</span>
+                  <span>的搜索结果&nbsp;{{ currentTemplateShowListComputed.length }}&nbsp;个</span>
+                </span>
+              </div>
+              <el-empty
+                v-if="!state.currentTemplateShowList.length"
+                :image="NoneImage"
+                :description="'暂无模版'"
+              />
+              <div v-show="state.currentTemplateId !== ''" id="template-box" class="template-box">
+                <de-template-item
+                  v-for="item in currentTemplateShowListComputed"
+                  :key="item.id"
+                  :width="state.templateCurWidth"
+                  :model="item"
+                  @command="key => handleCommand(key, item)"
+                />
+              </div>
+            </div>
           </div>
         </div>
+        <el-dialog
+          :title="state.dialogTitle"
+          v-model="state.editTemplate"
+          append-to-body
+          class="de-dialog-form"
+          width="600px"
+        >
+          <el-form
+            ref="templateEditFormRef"
+            class="de-form-item"
+            :model="state.templateEditForm"
+            :rules="state.templateEditFormRules"
+          >
+            <el-form-item :label="state.dialogTitleLabel" prop="name">
+              <el-input v-model="state.templateEditForm.name" />
+            </el-form-item>
+          </el-form>
+          <template #footer>
+            <div class="dialog-footer">
+              <el-button secondary @click="close()">{{ t('commons.cancel') }}</el-button>
+              <el-button type="primary" @click="saveTemplateEdit(state.templateEditForm)"
+                >{{ t('commons.confirm') }}
+              </el-button>
+            </div>
+          </template>
+        </el-dialog>
+        <!--导入templateDialog-->
+        <el-dialog
+          :title="state.templateDialog.title"
+          v-model="state.templateDialog.visible"
+          :show-close="true"
+          class="de-dialog-form"
+          width="600px"
+        >
+          <de-template-import
+            v-if="state.templateDialog.visible"
+            :pid="state.templateDialog.pid"
+            @refresh="showCurrentTemplate(state.currentTemplateId, state.currentTemplateLabel)"
+            @closeEditTemplateDialog="closeEditTemplateDialog"
+          />
+        </el-dialog>
       </div>
     </div>
-    <el-dialog
-      :title="state.dialogTitle"
-      v-model="state.editTemplate"
-      append-to-body
-      class="de-dialog-form"
-      width="600px"
-    >
-      <el-form
-        ref="templateEditFormRef"
-        class="de-form-item"
-        :model="state.templateEditForm"
-        :rules="state.templateEditFormRules"
-      >
-        <el-form-item :label="state.dialogTitleLabel" prop="name">
-          <el-input v-model="state.templateEditForm.name" />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button secondary @click="close()">{{ t('commons.cancel') }}</el-button>
-          <el-button type="primary" @click="saveTemplateEdit(state.templateEditForm)"
-            >{{ t('commons.confirm') }}
-          </el-button>
-        </div>
-      </template>
-    </el-dialog>
-    <!--导入templateDialog-->
-    <el-dialog
-      :title="state.templateDialog.title"
-      v-model="state.templateDialog.visible"
-      :show-close="true"
-      class="de-dialog-form"
-      width="600px"
-    >
-      <de-template-import
-        v-if="state.templateDialog.visible"
-        :pid="state.templateDialog.pid"
-        @refresh="showCurrentTemplate(state.currentTemplateId, state.currentTemplateLabel)"
-        @closeEditTemplateDialog="closeEditTemplateDialog"
-      />
-    </el-dialog>
   </div>
 </template>
 
@@ -118,6 +141,7 @@ const roleValidator = (rule, value, callback) => {
 }
 
 const state = reactive({
+  templateFilterText: '',
   showShare: false,
   currentTemplateShowList: [],
   noneImg: '@/assets/None.png',
@@ -145,8 +169,8 @@ const state = reactive({
   currentTemplateLabel: '',
   currentTemplateId: '',
   templateList: [],
-  templateMiniWidth: 286,
-  templateCurWidth: 286,
+  templateMiniWidth: 256,
+  templateCurWidth: 256,
   formType: '',
   originName: '',
   templateDialog: {
@@ -156,6 +180,13 @@ const state = reactive({
   }
 })
 
+const currentTemplateShowListComputed = computed(() => {
+  if (!state.templateFilterText) return [...state.currentTemplateShowList]
+  return state.currentTemplateShowList.filter(ele =>
+    ele['name']?.includes(state.templateFilterText)
+  )
+})
+
 const nameList = computed(() => {
   const { nodeType } = state.templateEditForm || {}
   if (nodeType === 'template') {
@@ -168,6 +199,18 @@ const nameList = computed(() => {
   return []
 })
 
+const initStyle = () => {
+  nextTick(() => {
+    const tree = document.querySelector('.ed-tree')
+    // 创建横线元素
+    const line = document.createElement('hr')
+    line.classList.add('custom-line')
+
+    // 将横线元素插入到第一个选项后面
+    tree.firstElementChild.appendChild(line)
+  })
+}
+
 const nameRepeat = value => {
   if (!nameList.value) {
     return false
@@ -334,11 +377,12 @@ onMounted(() => {
   // 监听div变动事件
   erd.listenTo(templateMainDom, element => {
     nextTick(() => {
-      const curSeparator = Math.trunc(templateMainDom.offsetWidth / state.templateMiniWidth)
-      state.templateCurWidth =
-        Math.trunc(templateMainDom.offsetWidth / curSeparator) - 24 - curSeparator
+      const offsetWidth = templateMainDom.offsetWidth - 24
+      const curSeparator = Math.trunc(offsetWidth / state.templateMiniWidth)
+      state.templateCurWidth = Math.trunc(offsetWidth / curSeparator) - 24 - curSeparator
     })
   })
+  initStyle()
 })
 </script>
 
@@ -364,9 +408,8 @@ onMounted(() => {
 
   .de-tabs-right {
     flex: 1;
-    background: #fff;
-    padding: 24px 0 24px 24px;
     overflow: hidden;
+    background: rgba(239, 240, 241, 1);
 
     .template-box {
       display: flex;
@@ -376,12 +419,12 @@ onMounted(() => {
       align-content: flex-start;
       height: calc(100% - 10px);
       width: 100%;
-      padding-bottom: 24px;
+      padding: 16px 0px 16px 24px;
     }
 
     .active-template {
-      margin: 4px 0 20px 0;
-      padding-right: 24px;
+      height: 56px;
+      padding: 0px 24px;
       font-family: 'PingFang SC';
       font-style: normal;
       font-weight: 500;
@@ -389,8 +432,45 @@ onMounted(() => {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      color: var(--deTextPrimary, #1f2329);
+      color: rgba(31, 35, 41, 1);
+      background: #fff;
+      border-bottom: 1px solid rgba(31, 35, 41, 0.15);
     }
   }
 }
+
+.router-title {
+  color: #1f2329;
+  font-feature-settings: 'clig' off, 'liga' off;
+  font-family: PingFang SC;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 28px;
+  float: left;
+}
+.sys-setting-p {
+  width: 100%;
+  background: #ffffff;
+  height: calc(100vh - 136px);
+  box-sizing: border-box;
+  margin-top: 12px;
+}
+.setting-auto-h {
+  height: auto !important;
+}
+
+.container-sys-param {
+  height: 100%;
+  overflow-y: auto;
+}
+
+.template-head {
+  height: 32px;
+}
+.template-search-class {
+  float: right;
+  width: 320px;
+  margin-right: 12px;
+}
 </style>

pom.xml

@@ -25,7 +25,7 @@
         <mybatis-plus.version>3.5.3.1</mybatis-plus.version>
         <h2.version>1.4.199</h2.version>
         <knife4j.version>4.1.0</knife4j.version>
-        <calcite-core.version>1.36.0</calcite-core.version>
+        <calcite-core.version>1.35.1</calcite-core.version>
         <commons-dbcp2.version>2.6.0</commons-dbcp2.version>
         <antlr.version>3.5.2</antlr.version>
         <java-jwt.version>3.12.1</java-jwt.version>

sdk/api/api-base/src/main/java/io/dataease/api/chart/dto/ChartCustomFilterItemDTO.java

@@ -1,5 +1,7 @@
 package io.dataease.api.chart.dto;
 
+import com.fasterxml.jackson.databind.annotation.JsonSerialize;
+import com.fasterxml.jackson.databind.ser.std.ToStringSerializer;
 import lombok.Data;
 
 import java.io.Serializable;
@@ -9,6 +11,7 @@ import java.io.Serializable;
  */
 @Data
 public class ChartCustomFilterItemDTO implements Serializable {
+    @JsonSerialize(using = ToStringSerializer.class)
     private Long fieldId;
     private String term;
     private String value;

sdk/api/api-base/src/main/java/io/dataease/api/chart/dto/ChartQuotaDTO.java

@@ -1,5 +1,7 @@
 package io.dataease.api.chart.dto;
 
+import com.fasterxml.jackson.databind.annotation.JsonSerialize;
+import com.fasterxml.jackson.databind.ser.std.ToStringSerializer;
 import lombok.Data;
 
 /**
@@ -7,5 +9,6 @@ import lombok.Data;
  */
 @Data
 public class ChartQuotaDTO {
+    @JsonSerialize(using = ToStringSerializer.class)
     private Long id;
 }