forked from opentiny/tiny-engine
Fix/serarch empty:为对部分功能设置搜索为空样式处理 (#446)
This commit is contained in:
parent
0afdf2fcae
commit
e98994f8d9
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<ul
|
||||
v-if="state.data.length"
|
||||
:class="['block-list', 'lowcode-scrollbar', { 'is-small-list': blockStyle === 'mini' }, { isShortcutPanel }]"
|
||||
@mouseleave="state.hover = false"
|
||||
>
|
||||
|
@ -122,12 +123,14 @@
|
|||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
<search-empty :isShow="!state.data.length" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { computed, watch, inject, reactive } from 'vue'
|
||||
import { iconSetting, iconPlus } from '@opentiny/vue-icon'
|
||||
import { Tooltip, Progress, Popover } from '@opentiny/vue'
|
||||
import SearchEmpty from './SearchEmpty.vue'
|
||||
import SvgButton from './SvgButton.vue'
|
||||
|
||||
const defaultImg =
|
||||
|
@ -140,7 +143,8 @@ export default {
|
|||
IconSetting: iconSetting(),
|
||||
IconPlus: iconPlus(),
|
||||
TinyPopover: Popover,
|
||||
SvgButton
|
||||
SvgButton,
|
||||
SearchEmpty
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
|
|
|
@ -0,0 +1,19 @@
|
|||
<template>
|
||||
<div v-if="isShow" class="empty-wrap">
|
||||
<svg-icon class="empty-icon" name="empty"></svg-icon>
|
||||
<p class="empty-text">暂无数据</p>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
/**
|
||||
* 控制搜索空数据显示
|
||||
*/
|
||||
isShow: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
|
@ -79,6 +79,7 @@ import BlockDeployDialog from './component/BlockDeployDialog.vue'
|
|||
import ProgressBar from './component/ProgressBar.vue'
|
||||
import MetaButtonGroup from './component/MetaButtonGroup.vue'
|
||||
import MetaTableColumns from './component/MetaTableColumns.vue'
|
||||
import SearchEmpty from './component/SearchEmpty.vue'
|
||||
|
||||
import i18n, { i18nKeyMaps } from '@opentiny/tiny-engine-controller/js/i18n'
|
||||
|
||||
|
@ -145,7 +146,8 @@ export const MetaComponents = {
|
|||
MetaIpSection,
|
||||
MetaRelatedEditor,
|
||||
MetaRelatedColumns,
|
||||
MetaTableColumns
|
||||
MetaTableColumns,
|
||||
SearchEmpty
|
||||
}
|
||||
|
||||
export {
|
||||
|
@ -206,5 +208,6 @@ export {
|
|||
BindI18n,
|
||||
BlockDeployDialog,
|
||||
ProgressBar,
|
||||
MetaTableColumns
|
||||
MetaTableColumns,
|
||||
SearchEmpty
|
||||
}
|
||||
|
|
|
@ -6,7 +6,11 @@
|
|||
clearable
|
||||
placeholder="请输入关键字搜索"
|
||||
@update:modelValue="searchBridgeData"
|
||||
></tiny-search>
|
||||
>
|
||||
<template #prefix>
|
||||
<tiny-icon-search />
|
||||
</template>
|
||||
</tiny-search>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div
|
||||
|
@ -19,10 +23,7 @@
|
|||
<div class="item-label">{{ item.name }}</div>
|
||||
<svg-icon class="setting-icon" name="setting" @click.stop="openEdit(item, index)"></svg-icon>
|
||||
</div>
|
||||
<div v-if="!list.length" class="empty-wrap">
|
||||
<svg-icon class="empty-icon" name="empty"></svg-icon>
|
||||
<p class="empty-text">暂无数据</p>
|
||||
</div>
|
||||
<search-empty :isShow="!list.length" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -30,6 +31,8 @@
|
|||
<script>
|
||||
import { watchEffect, ref, reactive } from 'vue'
|
||||
import { Search } from '@opentiny/vue'
|
||||
import { iconSearch } from '@opentiny/vue-icon'
|
||||
import { SearchEmpty } from '@opentiny/tiny-engine-common'
|
||||
import {
|
||||
RESOURCE_TYPE,
|
||||
ACTION_TYPE,
|
||||
|
@ -44,7 +47,9 @@ import {
|
|||
|
||||
export default {
|
||||
components: {
|
||||
TinySearch: Search
|
||||
TinySearch: Search,
|
||||
TinyIconSearch: iconSearch(),
|
||||
SearchEmpty
|
||||
},
|
||||
props: {
|
||||
name: {
|
||||
|
|
|
@ -15,7 +15,7 @@
|
|||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div v-if="!filteredKey.length" class="data-source-list-blank"><span>查询结果为空</span></div>
|
||||
<search-empty :isShow="!filteredKey.length" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -25,14 +25,15 @@ import { useModal } from '@opentiny/tiny-engine-controller'
|
|||
import { useResource } from '@opentiny/tiny-engine-controller'
|
||||
import { findExpressionInAppSchema } from '@opentiny/tiny-engine-controller/js/ast'
|
||||
import { constants } from '@opentiny/tiny-engine-utils'
|
||||
import { SvgButton } from '@opentiny/tiny-engine-common'
|
||||
import { SvgButton, SearchEmpty } from '@opentiny/tiny-engine-common'
|
||||
import { STATE, OPTION_TYPE } from './js/constants'
|
||||
|
||||
const { COMPONENT_NAME } = constants
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SvgButton
|
||||
SvgButton,
|
||||
SearchEmpty
|
||||
},
|
||||
props: {
|
||||
modelValue: {
|
||||
|
|
|
@ -15,8 +15,13 @@
|
|||
:modelValue="query"
|
||||
class="left-filter"
|
||||
placeholder="请输入搜索条件"
|
||||
clearable
|
||||
@update:modelValue="search"
|
||||
></tiny-search>
|
||||
>
|
||||
<template #prefix>
|
||||
<tiny-icon-search />
|
||||
</template>
|
||||
</tiny-search>
|
||||
<div class="add-btn">
|
||||
<tiny-button @click="openPanel(OPTION_TYPE.ADD)">{{
|
||||
activeName === STATE.CURRENT_STATE ? '添加变量' : '添加全局变量'
|
||||
|
@ -76,6 +81,7 @@ import {
|
|||
useHelp
|
||||
} from '@opentiny/tiny-engine-controller'
|
||||
import { setState, getSchema, deleteState, setGlobalState, getGlobalState } from '@opentiny/tiny-engine-canvas'
|
||||
import { iconSearch } from '@opentiny/vue-icon'
|
||||
import { CloseIcon, LinkButton } from '@opentiny/tiny-engine-common'
|
||||
import DataSourceList from './DataSourceList.vue'
|
||||
import CreateVariable from './CreateVariable.vue'
|
||||
|
@ -94,7 +100,8 @@ export default {
|
|||
TinyTabs: Tabs,
|
||||
TinyTabItem: TabItem,
|
||||
CreateStore,
|
||||
LinkButton
|
||||
LinkButton,
|
||||
TinyIconSearch: iconSearch()
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
const variableRef = ref(null)
|
||||
|
|
|
@ -110,10 +110,7 @@
|
|||
</tiny-grid-column>
|
||||
<template #empty>
|
||||
<div v-if="isLoading" id="empty-loading-box" class="i18n-loading"></div>
|
||||
<div v-else class="empty-wrap">
|
||||
<svg-icon class="empty-icon" name="empty"></svg-icon>
|
||||
<p class="empty-text">暂无数据</p>
|
||||
</div>
|
||||
<search-empty isShow="!isLoading" />
|
||||
</template>
|
||||
</tiny-grid>
|
||||
</div>
|
||||
|
@ -126,7 +123,7 @@ import { computed, ref, watchEffect, reactive, onMounted, nextTick, resolveCompo
|
|||
import useClipboard from 'vue-clipboard3'
|
||||
import { Grid, GridColumn, Input, Popover, Button, FileUpload, Loading, Tooltip, Select } from '@opentiny/vue'
|
||||
import { iconLoadingShadow } from '@opentiny/vue-icon'
|
||||
import { PluginPanel, LinkButton } from '@opentiny/tiny-engine-common'
|
||||
import { PluginPanel, LinkButton, SearchEmpty } from '@opentiny/tiny-engine-common'
|
||||
import { useTranslate, useApp, useModal, getGlobalConfig, useHelp } from '@opentiny/tiny-engine-controller'
|
||||
import { utils } from '@opentiny/tiny-engine-utils'
|
||||
import { useHttp } from '@opentiny/tiny-engine-http'
|
||||
|
@ -143,7 +140,8 @@ export default {
|
|||
PluginPanel,
|
||||
LinkButton,
|
||||
TinySelect: Select,
|
||||
TinyFileUpload: FileUpload
|
||||
TinyFileUpload: FileUpload,
|
||||
SearchEmpty
|
||||
},
|
||||
setup() {
|
||||
// 组件库iconLoadingShadow图标不能切换颜色,因此不同主题用不同icon
|
||||
|
|
|
@ -17,10 +17,7 @@
|
|||
</template>
|
||||
</tiny-grid-column>
|
||||
<template #empty>
|
||||
<div class="empty-wrap">
|
||||
<svg-icon class="empty-icon" name="empty"></svg-icon>
|
||||
<p class="empty-text">暂无数据</p>
|
||||
</div>
|
||||
<search-empty :isShow="true" />
|
||||
</template>
|
||||
</tiny-grid>
|
||||
</template>
|
||||
|
@ -30,7 +27,7 @@
|
|||
<script>
|
||||
import { reactive, watch, ref } from 'vue'
|
||||
import { Grid, GridColumn, Button } from '@opentiny/vue'
|
||||
import { PluginSetting, CloseIcon, BlockHistoryTemplate } from '@opentiny/tiny-engine-common'
|
||||
import { PluginSetting, CloseIcon, BlockHistoryTemplate, SearchEmpty } from '@opentiny/tiny-engine-common'
|
||||
import { useBlock, useModal } from '@opentiny/tiny-engine-controller'
|
||||
import { fetchBlockById, requestGroupBlockVersion } from './http'
|
||||
import { useVersionSelectPanel } from './js/usePanel'
|
||||
|
@ -42,7 +39,8 @@ export default {
|
|||
TinyButton: Button,
|
||||
PluginSetting,
|
||||
BlockHistoryTemplate,
|
||||
CloseIcon
|
||||
CloseIcon,
|
||||
SearchEmpty
|
||||
},
|
||||
setup() {
|
||||
const { confirm } = useModal()
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="blocks-wrap">
|
||||
<block-group v-model="state.groups" @changeGroup="changeGroup"></block-group>
|
||||
<tiny-search v-model="state.searchValue" placeholder="请输入关键字搜索">
|
||||
<tiny-search v-model="state.searchValue" clearable placeholder="请输入关键字搜索">
|
||||
<template #prefix> <tiny-icon-search /> </template>
|
||||
</tiny-search>
|
||||
<block-list v-model:blockList="filterBlocks" :show-add-button="true" :show-block-shot="true"></block-list>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="components-wrap">
|
||||
<tiny-search v-model="state.searchValue" placeholder="请输入关键字搜索" @update:modelValue="change">
|
||||
<tiny-search v-model="state.searchValue" placeholder="请输入关键字搜索" clearable @update:modelValue="change">
|
||||
<template #prefix> <icon-search /> </template>
|
||||
</tiny-search>
|
||||
<tiny-collapse v-model="state.activeName" class="lowcode-scrollbar">
|
||||
|
@ -24,6 +24,7 @@
|
|||
</template>
|
||||
</ul>
|
||||
</tiny-collapse-item>
|
||||
<search-empty :isShow="!state.components.length" />
|
||||
</tiny-collapse>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -31,6 +32,7 @@
|
|||
<script>
|
||||
import { inject, onMounted, reactive, ref } from 'vue'
|
||||
import { Collapse, CollapseItem, Search } from '@opentiny/vue'
|
||||
import { SearchEmpty } from '@opentiny/tiny-engine-common'
|
||||
import { iconSearch } from '@opentiny/vue-icon'
|
||||
import { useResource } from '@opentiny/tiny-engine-controller'
|
||||
import { CanvasDragItem, addComponent } from '@opentiny/tiny-engine-canvas'
|
||||
|
@ -41,7 +43,8 @@ export default {
|
|||
IconSearch: iconSearch(),
|
||||
TinyCollapse: Collapse,
|
||||
TinyCollapseItem: CollapseItem,
|
||||
CanvasDragItem
|
||||
CanvasDragItem,
|
||||
SearchEmpty
|
||||
},
|
||||
setup() {
|
||||
const COMPONENT_PANEL_COLUMNS = '1fr 1fr 1fr'
|
||||
|
|
Loading…
Reference in New Issue