全局添加输入框空格校验

This commit is contained in:
GGJ
2024-12-25 10:53:07 +08:00
parent 90efcc4ad2
commit aed771578a
98 changed files with 703 additions and 904 deletions

View File

@@ -6,10 +6,10 @@
</el-row>
<el-row class="ba-array-item" v-for="(item, idx) in state.value" :gutter="10" :key="idx">
<el-col :span="10">
<el-input maxlength="32" show-word-limit v-model="item.key"></el-input>
<el-input maxlength="32" show-word-limit v-model.trim="item.key"></el-input>
</el-col>
<el-col :span="10">
<el-input maxlength="32" show-word-limit v-model="item.value"></el-input>
<el-input maxlength="32" show-word-limit v-model.trim="item.value"></el-input>
</el-col>
<el-col :span="4">
<el-button @click="onDelArrayItem(idx)" size="small" icon="el-icon-Delete" circle />

View File

@@ -37,7 +37,7 @@
</transition>
</div>
<template #reference>
<el-input maxlength="32" show-word-limit v-model='state.inputValue' :size='size' :disabled='disabled'
<el-input maxlength="32" show-word-limit v-model.trim='state.inputValue' :size='size' :disabled='disabled'
placeholder='搜索图标' ref='selectorInput' @focus='onInputFocus' @blur='onInputBlur'
:class="'size-' + size">
<template #prepend>

View File

@@ -2,57 +2,28 @@
<div class="w100">
<!-- el-select 的远程下拉只在有搜索词时才会加载数据显示出 option 列表 -->
<!-- 使用 el-popover 在无数据/无搜索词时显示一个无数据的提醒 -->
<el-popover
width="100%"
placement="bottom"
popper-class="remote-select-popper"
<el-popover width="100%" placement="bottom" popper-class="remote-select-popper"
:visible="state.focusStatus && !state.loading && !state.keyword && !state.options.length"
:teleported="false"
:content="$t('utils.No data')"
>
:teleported="false" :content="$t('utils.No data')">
<template #reference>
<el-select
ref="selectRef"
class="w100"
@focus="onFocus"
@blur="onBlur"
:loading="state.loading || state.accidentBlur"
:filterable="true"
:remote="true"
clearable
remote-show-suffix
:remote-method="onLogKeyword"
v-model="state.value"
@change="onChangeSelect"
:multiple="multiple"
:key="state.selectKey"
@clear="onClear"
@visible-change="onVisibleChange"
v-bind="$attrs"
>
<el-option
class="remote-select-option"
v-for="item in state.options"
:label="item[field]"
:value="item[state.primaryKey].toString()"
:key="item[state.primaryKey]"
>
<el-select ref="selectRef" class="w100" @focus="onFocus" @blur="onBlur"
:loading="state.loading || state.accidentBlur" :filterable="true" :remote="true" clearable
remote-show-suffix :remote-method="onLogKeyword" v-model.trim="state.value" @change="onChangeSelect"
:multiple="multiple" :key="state.selectKey" @clear="onClear" @visible-change="onVisibleChange"
v-bind="$attrs">
<el-option class="remote-select-option" v-for="item in state.options" :label="item[field]"
:value="item[state.primaryKey].toString()" :key="item[state.primaryKey]">
<el-tooltip placement="right" effect="light" v-if="!isEmpty(tooltipParams)">
<template #content>
<p v-for="(tooltipParam, key) in tooltipParams" :key="key">{{ key }}: {{ item[tooltipParam] }}</p>
<p v-for="(tooltipParam, key) in tooltipParams" :key="key">{{ key }}: {{
item[tooltipParam] }}</p>
</template>
<div>{{ item[field] }}</div>
</el-tooltip>
</el-option>
<el-pagination
v-if="state.total"
:currentPage="state.currentPage"
:page-size="state.pageSize"
class="select-pagination"
layout="->, prev, next"
:total="state.total"
@current-change="onSelectCurrentPageChange"
/>
<el-pagination v-if="state.total" :currentPage="state.currentPage" :page-size="state.pageSize"
class="select-pagination" layout="->, prev, next" :total="state.total"
@current-change="onSelectCurrentPageChange" />
</el-select>
</template>
</el-popover>
@@ -304,6 +275,7 @@ defineExpose({
:deep(.remote-select-popper) {
text-align: center;
}
.remote-select-option {
white-space: pre;
}

View File

@@ -1,10 +1,11 @@
<template>
<div style="width: 540px">
<el-select v-model="interval" style="min-width: 90px; width: 90px; margin-right: 10px" @change="timeChange">
<el-select v-model.trim="interval" style="min-width: 90px; width: 90px; margin-right: 10px"
@change="timeChange">
<el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-date-picker v-model="timeValue" type="daterange" :disabled="disabledPicker"
<el-date-picker v-model.trim="timeValue" type="daterange" :disabled="disabledPicker"
style="width: 220px; margin-right: 10px" unlink-panels :clearable="false" range-separator=""
start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" :shortcuts="shortcuts" />
<el-button :disabled="backDisabled" type="primary" :icon="DArrowLeft" @click="preClick"></el-button>

View File

@@ -9,7 +9,7 @@
</el-form-item>
<el-form-item label="区域" v-if="area">
<Area ref="areaRef" v-model="tableStore.table.params.deptIndex" />
<Area ref="areaRef" v-model.trim="tableStore.table.params.deptIndex" />
</el-form-item>
<slot name="select"></slot>
</el-form>
@@ -20,7 +20,7 @@
</el-button>
<el-button @click="onComSearch" v-if="showSearch" type="primary" :icon="Search">查询</el-button>
<el-button @click="onResetForm" v-if="showSearch && showReset" :icon="RefreshLeft">重置</el-button>
</template>
</template>
<slot name="operation"></slot>
</div>
<el-form :style="showSelect && showUnfoldButton ? headerFormSecondStyleOpen : headerFormSecondStyleClose"
@@ -123,6 +123,7 @@ const computedSearchRow = () => {
// 获取第一行放了几个表单
const elFormItem = headerForm.value.$el.querySelectorAll('.el-form-item')
// 把第一行放不下的复制一份放到headerFormSecond.value.$el
let width = 0
for (let i = 0; i < elFormItem.length; i++) {
@@ -130,6 +131,7 @@ const computedSearchRow = () => {
if (width > headerForm.value.$el.offsetWidth) {
headerFormSecond.value.$el.appendChild(elFormItem[i])
}
}
// 判断是否需要折叠

View File

@@ -1,15 +1,14 @@
<!-- 设备管理使用折叠面板渲染多个tree -->
<template>
<div :style="{ width: menuCollapse ? '40px' : props.width }"
style="display: flex; overflow: hidden">
<div :style="{ width: menuCollapse ? '40px' : props.width }" style="display: flex; overflow: hidden">
<Icon v-show="menuCollapse" @click="onMenuCollapse" :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
:class="menuCollapse ? 'unfold' : ''" size="18" class="fold ml10 mt20 menu-collapse"
style="cursor: pointer" />
<div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }">
<div style="display: flex; align-items: center" class="mb10">
<!-- <el-form-item> -->
<el-input maxlength="32" show-word-limit v-model="filterText" autocomplete="off" placeholder="请输入内容"
clearable>
<el-input maxlength="32" show-word-limit v-model.trim="filterText" autocomplete="off"
placeholder="请输入内容" clearable>
<template #prefix>
<Icon name="el-icon-Search" style="font-size: 16px" />
</template>
@@ -19,7 +18,8 @@
:class="menuCollapse ? 'unfold' : ''" size="18" class="fold ml10 menu-collapse"
style="cursor: pointer" v-if="props.canExpand" />
</div>
<el-collapse :accordion="true" v-model="activeName" style="flex: 1; height: 100%" @change="changeDevice">
<el-collapse :accordion="true" v-model.trim="activeName" style="flex: 1; height: 100%"
@change="changeDevice">
<el-collapse-item title="治理设备" name="0" v-if="zlDeviceData.length != 0">
<el-tree
:style="{ height: bxsDeviceData.length != 0 ? 'calc(100vh - 300px)' : 'calc(100vh - 238px)' }"

View File

@@ -4,7 +4,7 @@
<div class="cn-tree">
<div style="display: flex; align-items: center" class="mb10">
<el-input maxlength="32" show-word-limit v-model="filterText" placeholder="请输入内容" clearable>
<el-input maxlength="32" show-word-limit v-model.trim="filterText" placeholder="请输入内容" clearable>
<template #prefix>
<Icon name="el-icon-Search" style="font-size: 16px" />
</template>

View File

@@ -5,7 +5,7 @@
style='cursor: pointer' />
<div class='cn-tree' :style='{ opacity: menuCollapse ? 0 : 1 }'>
<div style='display: flex; align-items: center' class='mb10'>
<el-input maxlength="32" show-word-limit v-model='filterText' placeholder='请输入内容' clearable>
<el-input maxlength="32" show-word-limit v-model.trim='filterText' placeholder='请输入内容' clearable>
<template #prefix>
<Icon name='el-icon-Search' style='font-size: 16px' />
</template>

View File

@@ -1,13 +1,12 @@
<!-- 设备监控使用折叠面板渲染多个tree -->
<template>
<div :style="{ width: menuCollapse ? '40px' : props.width }"
style="display: flex; overflow: hidden">
<div :style="{ width: menuCollapse ? '40px' : props.width }" style="display: flex; overflow: hidden">
<Icon v-show="menuCollapse" @click="onMenuCollapse" :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
:class="menuCollapse ? 'unfold' : ''" size="18" class="fold ml10 mt20 menu-collapse" style="cursor: pointer"
v-if="route.path != '/admin/govern/reportCore/statistics/index'" />
<div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1, display: menuCollapse ? 'none' : '' }">
<div style="display: flex; align-items: center" class="mb10">
<el-input maxlength="32" show-word-limit v-model="filterText" placeholder="请输入内容" clearable>
<el-input maxlength="32" show-word-limit v-model.trim="filterText" placeholder="请输入内容" clearable>
<template #prefix>
<Icon name="el-icon-Search" style="font-size: 16px" />
</template>
@@ -17,7 +16,8 @@
style="cursor: pointer"
v-if="props.canExpand && route.path != '/admin/govern/reportCore/statistics/index'" />
</div>
<el-collapse :accordion="true" v-model="activeName" style="flex: 1; height: 100%" @change="changeDevice">
<el-collapse :accordion="true" v-model.trim="activeName" style="flex: 1; height: 100%"
@change="changeDevice">
<el-collapse-item title="治理设备" name="0" v-if="zlDeviceData.length != 0">
<el-tree
:style="{ height: bxsDeviceData.length != 0 ? 'calc(100vh - 300px)' : 'calc(100vh - 238px)' }"