Merge pull request #7272 from dataease/pr@dev-v2@feat_batch

feat: 模版管理支持批量操作

core/core-backend/src/main/resources/mybatis/ExtVisualizationTemplateMapper.xml

@@ -118,18 +118,17 @@
     </select>
 
     <delete id="deleteCategoryMapByTemplate">
-        delete from visualization_template_category_map tcm where tcm.template_id in (
+        delete from visualization_template_category_map tcm
-        select id from visualization_template vt
         <where>
             <if test="templateName">
-                and vt.name = #{templateName}
+                tcm.template_id in (
-            </if>
+                select id from visualization_template vt where vt.name = #{templateName})
-            <if test="templateId">
-                and vt.template_id = #{templateId}
             </if>
 
+            <if test="templateId">
+                and tcm.template_id = #{templateId}
+            </if>
         </where>
-        )
     </delete>
 
     <select id="findTemplateCategories" resultType="String">

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

@@ -161,7 +161,7 @@ const editTemplate = () => {
   // 全局名称校验
   nameCheck(nameCheckRequest).then(response => {
     save(state.templateInfo).then(response => {
-      ElMessage.success(t('导入成功'))
+      ElMessage.success(t('编辑成功'))
       emits('refresh')
       emits('closeEditTemplateDialog')
     })

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

@@ -1,5 +1,10 @@
 <template>
-  <div :style="classBackground" class="de-card-model">
+  <div
+    :style="classBackground"
+    class="de-card-model"
+    :class="{ 'de-card-model-active': batchState, 'de-card-model-checked': model.checked }"
+  >
+    <el-checkbox class="custom-item-checkbox" v-model="model.checked" />
     <div class="card-img-model" :style="classImg">
       <img :src="imgUrlTrans(model.snapshot)" alt="" />
     </div>
@@ -33,7 +38,7 @@
 
 <script setup lang="ts">
 import { imgUrlTrans } from '@/utils/imgUtils'
-import { computed } from 'vue'
+import { computed, toRefs } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 const { t } = useI18n()
 const emits = defineEmits(['command'])
@@ -44,9 +49,14 @@ const props = defineProps({
   },
   width: {
     type: Number
+  },
+  batchState: {
+    type: Boolean
   }
 })
 
+const { model, width, batchState } = toRefs(props)
+
 const dvTypeName = computed(() => {
   return props.model.dvType === 'dashboard' ? '仪表板' : '数据大屏'
 })
@@ -70,13 +80,28 @@ const handleCommand = key => {
 </script>
 
 <style lang="less">
+.de-card-model-checked {
+  border: 1px solid #3370ff !important;
+}
+.de-card-model-active {
+  .custom-item-checkbox {
+    display: inline !important;
+  }
+}
 .de-card-model {
   box-sizing: border-box;
+  position: relative;
   background: #ffffff;
-  border: 1px solid var(--deCardStrokeColor, #dee0e3);
+  border: 1px solid #dee0e3;
   border-radius: 4px;
   margin: 0 24px 25px 0;
   overflow: hidden;
+  .custom-item-checkbox {
+    position: absolute;
+    display: none;
+    right: 8px;
+    top: 8px;
+  }
   .card-img-model {
     border-bottom: 1px solid var(--deCardStrokeColor, #dee0e3);
     height: 144px;
@@ -138,6 +163,12 @@ const handleCommand = key => {
   }
 }
 
+.de-card-model:hover {
+  .custom-item-checkbox {
+    display: inline;
+  }
+}
+
 .de-card-model:hover {
   box-shadow: 0px 6px 24px rgba(31, 35, 41, 0.08);
 }

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

@@ -62,10 +62,22 @@
                   v-for="item in currentTemplateShowListComputed"
                   :key="item.id"
                   :width="state.templateCurWidth"
+                  :batch-state="batchState > 0"
                   :model="item"
                   @command="key => handleCommand(key, item)"
                 />
               </div>
+              <div v-show="batchState" class="batch-opt-area">
+                <el-button @click="batchUpdate" type="danger" plain style="margin-left: 24px"
+                  >修改分类</el-button
+                >
+                <el-button @click="batchDelete" type="danger" plain>批量删除</el-button>
+                <span style="margin-left: 24px; font-size: 14px">已选 {{ batchState }} 项</span>
+                <el-button @click="batchFullSelect" style="margin-left: 16px" text
+                  >全选 {{ currentTemplateShowListComputed.length }} 项</el-button
+                >
+                <el-button @click="batchClear" text>清空</el-button>
+              </div>
             </div>
           </div>
         </div>
@@ -152,6 +164,7 @@ const roleValidator = (rule, value, callback) => {
 }
 
 const state = reactive({
+  batchOptList: [],
   templateFilterText: '',
   showShare: false,
   currentTemplateShowList: [],
@@ -194,6 +207,30 @@ const state = reactive({
   }
 })
 
+const batchUpdate = () => {
+  // do
+}
+
+const batchDelete = () => {
+  // do
+}
+
+const batchFullSelect = () => {
+  currentTemplateShowListComputed.value.forEach(item => {
+    item.checked = true
+  })
+}
+
+const batchClear = () => {
+  currentTemplateShowListComputed.value.forEach(item => {
+    item.checked = false
+  })
+}
+
+const batchState = computed(() => {
+  return currentTemplateShowListComputed.value.filter(ele => ele.checked).length
+})
+
 const currentTemplateShowListComputed = computed(() => {
   if (!state.templateFilterText) return [...state.currentTemplateShowList]
   return state.currentTemplateShowList.filter(ele =>
@@ -436,7 +473,7 @@ onMounted(() => {
     flex: 1;
     overflow: hidden;
     background: rgba(239, 240, 241, 1);
-
+    position: relative;
     .template-box {
       display: flex;
       flex-wrap: wrap;
@@ -462,6 +499,15 @@ onMounted(() => {
       background: #fff;
       border-bottom: 1px solid rgba(31, 35, 41, 0.15);
     }
+    .batch-opt-area {
+      background-color: #ffffff;
+      position: absolute;
+      display: flex;
+      align-items: center;
+      height: 48px;
+      width: 100%;
+      bottom: 0;
+    }
   }
 }
 

sdk/api/api-base/src/main/java/io/dataease/api/template/dto/TemplateManageDTO.java

@@ -18,6 +18,8 @@ public class TemplateManageDTO extends VisualizationTemplateVO {
 
     private Long recentUseTime;
 
+    private Boolean checked = false;
+
     private List<TemplateManageDTO> children;
 
     private List<String> categories;