优化首页 模版新增标签

src/views/Editor/Toolbar/ElementTemplateData.vue

@@ -77,6 +77,30 @@
                     </el-select>
                 </div>
             </template>
+            <p class="q-mt-md"><span class="Required q-mr-md"></span>标签：</p>
+            <div class="row wrap q-mt-md">
+                <el-tag
+                    v-for="tag in dynamicTags"
+                    :key="tag"
+                    class="mx-1 q-mr-md q-mb-md"
+                    closable
+                    :disable-transitions="false"
+                    @close="handleClose(tag)">
+                    {{ tag }}
+                </el-tag>
+                <el-input
+                    v-if="inputVisible"
+                    ref="InputRef"
+                    v-model="inputValue"
+                    class="ml-1 w-20"
+                    size="small"
+                    @keyup.enter="handleInputConfirm"
+                    @blur="handleInputConfirm"
+                />
+                <el-button v-else class="button-new-tag ml-1" size="small" @click="showInput">
+                    + 添加标签
+                </el-button>
+            </div>
             <p class="q-mt-md"><span class="Required q-mr-md">*</span>选择颜色：</p>
             <div class="row wrap q-mt-md">
                 <el-select v-model="queryObj.ColorStr" class="m-2" placeholder="请选择颜色"
@@ -105,8 +129,10 @@
   </template>
   
   <script lang="ts" setup>
-  import { computed, ref, reactive, watch, inject } from 'vue'
+  
+  import { computed, ref, reactive, watch, inject, nextTick } from 'vue'
   import { storeToRefs } from 'pinia'
+  import { ElInput } from 'element-plus'
   import { useMainStore, useSlidesStore, useScreenStore } from '@/store'
   import LineService from '@/services/LineService'
   import ConfigService from '@/services/ConfigService'
@@ -115,7 +141,7 @@
 
     const datas = reactive({
         DataSource:{},
-        CountryValue: null
+        CountryValue: null,
     })
     const dispositionObj = ref({} as any)
     const queryObj = ref({} as any)
@@ -125,6 +151,14 @@
     const Series = ref([] as Array < any > ) //系列
 
     const cursors = [] as Array<any>
+
+    const inputValue = ref('')
+    const dynamicTags = ref([])
+    const inputVisible = ref(false)
+    const InputRef = ref<InstanceType<typeof ElInput>>()
+    if(queryObj.value.TagJsonStr!=''){
+        dynamicTags.value = queryObj.value.TagJsonStr.split(',')
+    }
    
     const slidesStore = useSlidesStore()
     const { slides, slideIndex } = storeToRefs(slidesStore)
@@ -145,6 +179,27 @@
         slidesStore.setSlides(newSlides)
     })
 
+    const showInput = () => {
+        inputVisible.value = true
+        nextTick(() => {
+            InputRef.value.input.focus()
+        })
+    }
+
+    const handleClose = (tag: string) => {
+        dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
+        queryObj.value.TagJsonStr = dynamicTags.value.join(',')
+    }
+
+    const handleInputConfirm = () => {
+        if (inputValue.value) {
+            dynamicTags.value.push(inputValue.value)
+        }
+        queryObj.value.TagJsonStr = dynamicTags.value.join(',')
+        inputVisible.value = false
+        inputValue.value = ''
+    }
+
     const setDialogForExport = (type: DialogForExportTypes) => {
         mainStore.setDialogForExport(type)
         mainMenuVisible.value = false

src/views/Market/Index.vue

@@ -64,7 +64,7 @@
                     </div>
                 </div>
             </div>
-            <div style="height: 750px;overflow: auto;" v-loading="loading">
+            <div style="margin-top: 20px;" v-loading="loading">
                 <div v-if="dataList.length>0" class="q-mt-lg row wrap bg-white rounded" style="padding: 30px 10px 0 10px;">
                     <template v-for="(item,index) in dataList">
                         <div class="MarketIndexListBox">
@@ -79,7 +79,7 @@
                     </template>
                 </div>
                 <div v-else class="q-mt-lg bg-white rounded" style="padding: 30px 10px 30px 10px;text-align: center;color: #909399;">暂无数据</div>
-                <div v-if="dataList.length>0" class="q-mt-lg row" style="justify-content: center;">
+                <div v-if="dataList.length>0" class="q-mt-lg row" style="justify-content: center;margin-bottom: 40px">
                     <!-- hide-on-single-page -->
                     <el-pagination
                     background