预览切换问题

core/core-frontend/src/viewsnew/TemplateResource/addclass.vue

@@ -4,9 +4,15 @@ import type { FormInstance } from 'element-plus'
 import { ElMessage } from 'element-plus-secondary'
 import { useI18n } from '@/hooks/web/useI18n'
 import {save} from '@/api/template'
+const props = defineProps({
+    classformlist: {
+        type: Object,
+        required: true
+    },
+})
 const emits = defineEmits(['closeClassDialog', 'classrefresh'])
 const { t } = useI18n()
-const classform = ref({ name: '', nodeType: 'folder', templateType: 'self', level: 0 })
+const classform:any = ref({ name: '', nodeType: 'folder', templateType: 'self', level: 0 })
 const ruleFormRef = ref<FormInstance>()
 const rules = ref({
     name: [
@@ -27,7 +33,7 @@ const submitForm = async (formEl: FormInstance | undefined) => {
         if (valid) {
             save({ ...classform.value }).then(() => {
                 ElMessage({
-                    message: '添加成功',
+                    message: classform.value.id?'编辑成功':'添加成功',
                     type: 'success',
                     showClose: true
                 })
@@ -43,13 +49,20 @@ const submitForm = async (formEl: FormInstance | undefined) => {
         }
     })
 }
+onMounted(() => { 
+ if(props.classformlist.id){
+    classform.value = props.classformlist
+ }else{
+    classform.value = { name: '', nodeType: 'folder', templateType: 'self', level: 0 }
+ }
+})
 function cancel() {
     emits('closeClassDialog')
 }
 </script>
 <template>
     <div class="template-import">
-        <el-form ref="ruleFormRef" :rules="rules" :model="classform" label-width="80px">
+        <el-form ref="ruleFormRef" :rules="rules" :model="classform" label-width="80px" style="margin-top: 10px;">
             <el-form-item label="分类名称" prop="name">
                 <el-input v-model="classform.name" />
             </el-form-item>

core/core-frontend/src/viewsnew/TemplateResource/index.vue

@@ -4,7 +4,7 @@ import { useRouter } from 'vue-router'
 import { searchMarketPreview } from '@/api/templateMarket'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useCache } from '@/hooks/web/useCache'
-import { ElMessage,ElMessageBox } from 'element-plus-secondary'
+import { ElMessage, ElMessageBox } from 'element-plus-secondary'
 import { Base64 } from 'js-base64'
 import { useEmbedded } from '@/store/modules/embedded'
 import { useAppStoreWithOut } from '@/store/modules/app'
@@ -13,6 +13,8 @@ import type { FormInstance } from 'element-plus'
 import AddTemplate from '@/viewsnew/TemplateResource/addtemplate.vue'
 import AddTemplateClass from '@/viewsnew/TemplateResource/addclass.vue'
 import { templateDelete } from '@/api/template'
+import { handler } from 'ace-builds-internal/keyboard/textarea'
+import { findCategories,deleteCategory } from '@/api/template'
 const basePath = import.meta.env.VITE_API_BASEPATH
 const router = useRouter()
 const { t } = useI18n()
@@ -25,6 +27,8 @@ const activeIndex: any = ref(null)
 const embeddedStore = useEmbedded()
 const appStore = useAppStoreWithOut()
 const isEmbedded = computed(() => appStore.getIsDataEaseBi || appStore.getIsIframe)
+const classdialog = ref(false)
+const classtitle = ref('新增分类')
 const state = reactive({
   initReady: true,
   curPosition: 'branch',
@@ -199,14 +203,16 @@ const initOpenHandler = newWindow => {
   }
 }
 const dialogVisible = ref(false)
-const classform = ref({ name: '' })
+const classformlist = ref({ name: '' })
 const dialogVisibles = ref(false)
 const optType = ref('insert')
+
 onMounted(() => {
   init()
 })
 function addClass() {
-  classform.value = { name: '' }
+  classtitle.value = '新增分类'
+  classformlist.value = { name: '' }
   dialogVisible.value = true
 }
 function importTemplate() {
@@ -257,6 +263,13 @@ function mouseover(index) { // 鼠标移入遮罩层
 function mouseleave() { // 鼠标移出遮罩层
   mask.value = -1
 }
+const classmask = ref(-1)
+function mouseovers(index) { // 鼠标移入遮罩层
+  classmask.value = index
+}
+function mouseleaves() { // 鼠标移出遮罩层
+  classmask.value = -1
+}
 function closeClassDialog() {
   dialogVisible.value = false
 }
@@ -272,18 +285,18 @@ function editTemplate(item) {
   dialogVisibles.value = true
   templateId.value = item.id
 }
-function refresh(){
+function refresh() {
   searchMarketPreview().then(res => {
     classList.value = res.data.contents
     if (activeIndex.value) {
       dataList.value = classList.value[activeIndex.value].contents
-    }else{
+    } else {
       activeIndex.value = 0
       dataList.value = classList.value[activeIndex.value].contents
     }
   })
 }
-function delTemplate(item){
+function delTemplate(item) {
   console.log(classList.value[activeIndex.value].category.value)
   ElMessageBox.confirm('提示，确定删除吗？', {
     confirmButtonType: 'primary',
@@ -297,11 +310,59 @@ function delTemplate(item){
         type: 'success',
         showClose: true
       })
-        refresh()
+      init()
     })
   })
 }
-const isclassmask = ref(false)
+const classAllList = ref([])
+function queryClass() {
+  const request = {
+    templateType: 'self',
+    level: '0'
+  }
+  findCategories(request).then(res => {
+    classAllList.value = res.data
+    console.log(res.data)
+  })
+}
+//分类管理
+function classManage() {
+  queryClass()
+  classdialog.value = true
+}
+function handleClose() {
+  classdialog.value = false
+}
+function delClass(item){
+  ElMessageBox.confirm('提示，确定删除该分类吗？', {
+    confirmButtonType: 'primary',
+    type: 'warning',
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+  }).then(() => {
+    deleteCategory(item.id).then(response => {
+      if (response.data === 'success') {
+        ElMessage({
+          message: '删除成功',
+          type: 'success',
+          showClose: true
+        })
+        queryClass()
+      } else {
+        ElMessage({
+          message: '删除失败',
+          type: 'error',
+          showClose: true
+        })
+      }
+    })
+  })
+}
+function editClass(item){
+  classtitle.value = '分类重命名'
+  classformlist.value = item
+  dialogVisible.value = true
+}
 </script>
 <template>
   <div class="common-layout">
@@ -312,18 +373,13 @@ const isclassmask = ref(false)
         </template>
       </el-input>
       <div class="import-btn" @click="importTemplate">导入模板</div>
-      <div class="import-btn" @click="addClass">添加分类</div>
+      <div class="import-btn" @click="classManage">分类管理</div>
     </div>
     <div>
       <div class="class_list_box">
         <div v-for="(item, classindex) in classList" :key="classindex"
-          :class="activeIndex === classindex ? 'class_list_active' : 'class_list'" @click="classclick(classindex)" 
+          :class="activeIndex === classindex ? 'class_list_active' : 'class_list'" @click="classclick(classindex)">
-          @mouseover="mouseover(classindex)" @mouseleave="mouseleave">
           <div class="class_list_text">{{ item.category.label }} ({{ item.contents.length }}) </div>
-          <div v-if="mask == classindex" style="position: absolute;right: -10px;top: -20px;">
-              <img src="@/assets/newimg/icon/editpro.png" style="width: 14px;height: 14px;cursor: pointer;" @click="editTemplate(item)" title="编辑模板">
-              <img src="@/assets/newimg/icon/del.png" alt="" @click="delTemplate(item)" style="width: 14px;height: 14px;margin-left: 5px;cursor: pointer;" title="删除">
-          </div>
         </div>
       </div>
       <div class="application_list_box">
@@ -337,8 +393,10 @@ const isclassmask = ref(false)
           </div>
           <div class="mask_box" v-if="mask == index">
             <div>
-              <img src="@/assets/newimg/icon/editpro.png" @click="editTemplate(item)" style="cursor: pointer;" title="编辑模板">
+              <img src="@/assets/newimg/icon/editpro.png" @click="editTemplate(item)" style="cursor: pointer;"
-              <img src="@/assets/newimg/icon/del.png" alt="" @click="delTemplate(item)" style="margin-left: 10px;cursor: pointer;" title="删除">
+                title="编辑模板">
+              <img src="@/assets/newimg/icon/del.png" alt="" @click="delTemplate(item)"
+                style="margin-left: 10px;cursor: pointer;" title="删除">
             </div>
             <div style="display: flex;justify-content: center;margin-top: 20px;">
               <div class="yulan" @click="preview(item, index)">预览</div>
@@ -348,13 +406,37 @@ const isclassmask = ref(false)
         </div>
       </div>
     </div>
-    <el-dialog v-model="dialogVisible" title="添加分类" width="30%" :before-close="closeClassDialog">
+    <el-dialog v-model="dialogVisible" :title="classtitle" width="30%" :before-close="closeClassDialog">
-      <AddTemplateClass v-if="dialogVisible" @closeClassDialog="closeClassDialog" :classrefresh="classrefresh" />
+      <AddTemplateClass v-if="dialogVisible" :classformlist="classformlist" @closeClassDialog="closeClassDialog" :classrefresh="classrefresh" />
     </el-dialog>
     <el-dialog v-model="dialogVisibles" title="导入模板" width="30%" :before-close="closeTemplateDialog">
       <AddTemplate v-if="dialogVisibles" :optType="optType" :classList="classList" :templateId="templateId" @init="init"
         @closeTemplateDialog="closeTemplateDialog" />
     </el-dialog>
+    <el-dialog v-model="classdialog" title="分类管理" width="500px" :before-close="handleClose">
+      <div style="height: calc(100vh - 300px);overflow: auto;">
+        <div style="display: flex;align-items:center;justify-content: space-between;margin: 10px 0px;">
+          <div>分类列表</div>
+          <div class="import-btn" @click="addClass">添加分类</div>
+        </div>
+        <div class="class_manage_list" v-for="(classitem, classindex) in classAllList" :key="classindex"
+        @mouseover="mouseovers(classindex)" @mouseleave="mouseleaves">
+          <div class="class_manage_list_text">{{classitem.name}}</div>
+          <div v-if="classmask == classindex" class="class_manage_list_text">
+            <img src="@/assets/newimg/icon/editpro.png" style="cursor: pointer;"
+                title="重命名" @click="editClass(classitem)">
+              <img src="@/assets/newimg/icon/del.png" alt="" @click="delClass(classitem)"
+                style="margin-left: 10px;cursor: pointer;" title="删除">
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="classdialog = false">取消</el-button>
+          <el-button type="primary" @click="classdialog = false">确定</el-button>
+        </span>
+      </template>
+    </el-dialog>
   </div>
 
 </template>
@@ -576,7 +658,20 @@ const isclassmask = ref(false)
 
 .class-add:hover {
   background-color: #434343;
-  ;
+}
+.class_manage_list{
+  height: 40px;
+  line-height: 40px;
+  padding:0px 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.class_manage_list:hover{
+background: #434343;
+}
+.class_manage_list_text{
+  color: #fff;
 }
 </style>
 <style>
@@ -694,8 +789,9 @@ const isclassmask = ref(false)
   background: #434343;
   color: #fff;
 }
-.ed-dialog__header{
+
-  padding: 0px;
+.ed-dialog__header {
-  padding-bottom: 10px;
+  padding: 0px !important;
+  padding-bottom: 10px !important;
 }
 </style>

core/core-frontend/src/viewsnew/application/SfcEditor/NavbarEditor/assocPage.vue

@@ -54,14 +54,15 @@ const loadCanvasData = (dvId, weight?, ext?) => {
   )
 }
 onMounted(() => {
+
   isFormCreate.value = false
   dataInitState.value = false
   getInit()
 })
 watch(() => props.moduleinfo, (val) => {
+  getInit()
   isFormCreate.value = false
   dataInitState.value = false
-  getInit()
 })
 onBeforeMount(() => {
   dvMainStore.canvasDataInit()
@@ -75,6 +76,7 @@ function getInit() {
   handleNodeClick(params)
 }
 function handleNodeClick(e) {
+  console.log(e,8)
   isFormCreate.value = false
   dataInitState.value = false
   isNavbar.value = false
@@ -87,6 +89,7 @@ function handleNodeClick(e) {
     loading.value = false
     loadCanvasData(e.id, 9, 0)
   } else if (e.type == '04' || e.type == '05' || e.type == '06'||e.type == '09') {
+    console.log(e,9)
     moduleInfo.value = e
     isFormCreate.value = true
     loading.value = false
@@ -94,6 +97,7 @@ function handleNodeClick(e) {
     isNavbar.value = true
     loading.value = false
   }
+  console.log(isFormCreate.value,10)
 }
 </script>
 <template>