Web/admin-govern
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改输入框字段限制

Browse Source
This commit is contained in:
GGJ
2024-12-13 14:36:23 +08:00
parent a856075ddb
commit 8c4cc891e5
58 changed files with 663 additions and 1211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/baInput/components/array.vue
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 v-model="item.key"></el-input>
<el-input maxlength="32" show-word-limit v-model="item.key"></el-input>
</el-col>
<el-col :span="10">
<el-input v-model="item.value"></el-input>
<el-input maxlength="32" show-word-limit v-model="item.value"></el-input>
</el-col>
<el-col :span="4">
<el-button @click="onDelArrayItem(idx)" size="small" icon="el-icon-Delete" circle />
@@ -17,7 +17,8 @@
</el-row>
<el-row :gutter="10">
<el-col :span="10" :offset="10">
<el-button v-blur class="ba-add-array-item" @click="onAddArrayItem" icon="el-icon-Plus">{{ t('Add') }}</el-button>
<el-button v-blur class="ba-add-array-item" @click="onAddArrayItem" icon="el-icon-Plus">{{ t('Add')
}}</el-button>
</el-col>
</el-row>
</div>
@@ -76,9 +77,11 @@ watch(
padding: 5px 0;
color: var(--el-text-color-secondary);
}
.ba-array-item {
margin-bottom: 6px;
}
.ba-add-array-item {
float: right;
}

62
src/components/baInput/components/iconSelector.vue
View File

@@ -1,31 +1,17 @@
<template>
<el-popover
:placement='placement'
trigger='focus'
:hide-after='0'
:width='state.selectorWidth'
:visible='state.popoverVisible'
>
<div
@mouseover.stop='state.iconSelectorMouseover = true'
@mouseout.stop='state.iconSelectorMouseover = false'
class='icon-selector'
>
<el-popover :placement='placement' trigger='focus' :hide-after='0' :width='state.selectorWidth'
:visible='state.popoverVisible'>
<div @mouseover.stop='state.iconSelectorMouseover = true' @mouseout.stop='state.iconSelectorMouseover = false'
class='icon-selector'>
<transition name='el-zoom-in-center'>
<div class='icon-selector-box'>
<div class='selector-header'>
<div class='selector-title'>{{ title ? title : '请选择图标' }}</div>
<div class='selector-tab'>
<span
:title="'Element Puls ' + 'utils.Icon'"
@click="onChangeTab('ele')"
:class="state.iconType == 'ele' ? 'active' : ''"
>ele</span>
<span
:title="'Font Awesome ' + 'utils.Icon'"
@click="onChangeTab('awe')"
:class="state.iconType == 'awe' ? 'active' : ''"
>awe</span>
<span :title="'Element Puls ' + 'utils.Icon'" @click="onChangeTab('ele')"
:class="state.iconType == 'ele' ? 'active' : ''">ele</span>
<span :title="'Font Awesome ' + 'utils.Icon'" @click="onChangeTab('awe')"
:class="state.iconType == 'awe' ? 'active' : ''">awe</span>
<!-- <span :title="'utils.Ali iconcont Icon'" @click="onChangeTab('ali')"-->
<!-- :class="state.iconType == 'ali' ? 'active' : ''"-->
<!-- >ali</span>-->
@@ -40,13 +26,8 @@
<div class='selector-body'>
<el-scrollbar ref='selectorScrollbarRef'>
<div v-if='renderFontIconNames.length > 0'>
<div
class='icon-selector-item'
:title='item'
@click='onIcon(item)'
v-for='(item, key) in renderFontIconNames'
:key='key'
>
<div class='icon-selector-item' :title='item' @click='onIcon(item)'
v-for='(item, key) in renderFontIconNames' :key='key'>
<Icon :name='item' />
</div>
</div>
@@ -56,22 +37,13 @@
</transition>
</div>
<template #reference>
<el-input
v-model='state.inputValue'
:size='size'
:disabled='disabled'
placeholder='搜索图标'
ref='selectorInput'
@focus='onInputFocus'
@blur='onInputBlur'
:class="'size-' + size"
>
<el-input maxlength="32" show-word-limit v-model='state.inputValue' :size='size' :disabled='disabled'
placeholder='搜索图标' ref='selectorInput' @focus='onInputFocus' @blur='onInputBlur'
:class="'size-' + size">
<template #prepend>
<div class='icon-prepend'>
<Icon
:key="'icon' + state.iconKey"
:name='state.prependIcon ? state.prependIcon : state.defaultModelValue'
/>
<Icon :key="'icon' + state.iconKey"
:name='state.prependIcon ? state.prependIcon : state.defaultModelValue' />
<div v-if='showIconName' class='name'>
{{ state.prependIcon ? state.prependIcon : state.defaultModelValue }}
</div>
@@ -87,7 +59,7 @@
<script setup lang='ts'>
import { reactive, ref, onMounted, nextTick, watch, computed } from 'vue'
import { getElementPlusIconfontNames,getAwesomeIconfontNames } from '@/utils/iconfont'
import { getElementPlusIconfontNames, getAwesomeIconfontNames } from '@/utils/iconfont'
import { useEventListener } from '@vueuse/core'
import type { Placement } from 'element-plus'
@@ -169,7 +141,7 @@ const onChangeTab = (name: IconType) => {
getAwesomeIconfontNames().then((res) => {
state.fontIconNames = res.map((name) => `fa ${name}`)
})
}
}
// else if (name == 'ali') {
// getIconfontNames().then((res) => {
// state.fontIconNames = res.map((name) => `iconfont ${name}`)

74
src/components/tree/device.vue
View File

@@ -1,59 +1,34 @@
<!-- 设备管理使用折叠面板渲染多个tree -->
<template>
<div
:style="{ width: menuCollapse ? '40px' : props.width }"
style="display: flex; transition: all 0.3s; 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 :style="{ width: menuCollapse ? '40px' : props.width }"
style="display: flex; transition: all 0.3s; 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 v-model="filterText" autocomplete="off" placeholder="请输入内容" clearable>
<el-input maxlength="32" show-word-limit v-model="filterText" autocomplete="off" placeholder="请输入内容"
clearable>
<template #prefix>
<Icon name="el-icon-Search" style="font-size: 16px" />
</template>
</el-input>
<!-- </el-form-item> -->
<Icon
@click="onMenuCollapse"
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
:class="menuCollapse ? 'unfold' : ''"
size="18"
class="fold ml10 menu-collapse"
style="cursor: pointer"
v-if="props.canExpand"
/>
<Icon @click="onMenuCollapse" :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
: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-item title="治理设备" name="0" v-if="zlDeviceData.length != 0">
<el-tree
:style="{ height: bxsDeviceData.length != 0 ? 'calc(100vh - 300px)' : 'calc(100vh - 238px)' }"
ref="treeRef1"
:props="defaultProps"
highlight-current
:filter-node-method="filterNode"
node-key="id"
default-expand-all
v-bind="$attrs"
:data="zlDeviceData"
style="overflow: auto"
>
ref="treeRef1" :props="defaultProps" highlight-current :filter-node-method="filterNode"
node-key="id" default-expand-all v-bind="$attrs" :data="zlDeviceData" style="overflow: auto">
<template #default="{ node, data }">
<span class="custom-tree-node">
<Icon
:name="data.icon"
style="font-size: 16px"
:style="{ color: data.color }"
v-if="data.icon"
/>
<Icon :name="data.icon" style="font-size: 16px" :style="{ color: data.color }"
v-if="data.icon" />
<span style="margin-left: 4px">{{ node.label }}</span>
</span>
</template>
@@ -62,24 +37,13 @@
<el-collapse-item title="便携式设备" name="1" v-if="bxsDeviceData.length != 0">
<el-tree
:style="{ height: zlDeviceData.length != 0 ? 'calc(100vh - 280px)' : 'calc(100vh - 238px)' }"
ref="treeRef2"
:props="defaultProps"
highlight-current
default-expand-all
:filter-node-method="filterNode"
node-key="id"
:data="bxsDeviceData"
v-bind="$attrs"
style="overflow: auto"
>
ref="treeRef2" :props="defaultProps" highlight-current default-expand-all
:filter-node-method="filterNode" node-key="id" :data="bxsDeviceData" v-bind="$attrs"
style="overflow: auto">
<template #default="{ node, data }">
<span class="custom-tree-node">
<Icon
:name="data.icon"
style="font-size: 16px"
:style="{ color: data.color }"
v-if="data.icon"
/>
<Icon :name="data.icon" style="font-size: 16px" :style="{ color: data.color }"
v-if="data.icon" />
<span style="margin-left: 4px">{{ node.label }}</span>
</span>
</template>

12
src/components/tree/govern/pointTreeWx.vue
View File

@@ -4,7 +4,7 @@
<div class="cn-tree">
<div style="display: flex; align-items: center" class="mb10">
<el-input v-model="filterText" placeholder="请输入内容" clearable>
<el-input maxlength="32" show-word-limit v-model="filterText" placeholder="请输入内容" clearable>
<template #prefix>
<Icon name="el-icon-Search" style="font-size: 16px" />
</template>
@@ -95,7 +95,7 @@ const defaultProps = {
}
const emit = defineEmits(['init', 'checkChange', 'nodeChange', 'editNode', 'getChart','Policy'])
const emit = defineEmits(['init', 'checkChange', 'nodeChange', 'editNode', 'getChart', 'Policy'])
const config = useConfig()
const tree = ref()
const treRef = ref()
@@ -145,11 +145,13 @@ const clickNode = (e: anyObj) => {
if (props.template) {
getTemplateByDept({ id: dictData.state.area[0].id }).then((res: any) => {
emit('Policy', res.data)
getTreeList()
getTreeList()
}).catch(err => {
getTreeList() })
getTreeList()
})
} else {
getTreeList()}
getTreeList()
}
</script>
<style lang="scss" scoped>

54
src/components/tree/index.vue
View File

@@ -1,49 +1,25 @@
<template>
<div :style="{ width: menuCollapse ? '40px' : props.width }" style='transition: all 0.3s; 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 :style="{ width: menuCollapse ? '40px' : props.width }" style='transition: all 0.3s; 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-input v-model='filterText' placeholder='请输入内容' clearable>
<el-input maxlength="32" show-word-limit v-model='filterText' placeholder='请输入内容' clearable>
<template #prefix>
<Icon name='el-icon-Search' style='font-size: 16px' />
</template>
</el-input>
<Icon
@click='onMenuCollapse'
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
:class="menuCollapse ? 'unfold' : ''"
size='18'
class='fold ml10 menu-collapse'
style='cursor: pointer'
v-if='props.canExpand'
/>
<Icon @click='onMenuCollapse' :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
:class="menuCollapse ? 'unfold' : ''" size='18' class='fold ml10 menu-collapse'
style='cursor: pointer' v-if='props.canExpand' />
</div>
<el-tree
style='flex: 1; overflow: auto;'
ref='treeRef'
:props='defaultProps'
highlight-current
@check-change="checkTreeNodeChange"
:filter-node-method='filterNode'
node-key='id'
v-bind='$attrs'
>
<el-tree style='flex: 1; overflow: auto;' ref='treeRef' :props='defaultProps' highlight-current
@check-change="checkTreeNodeChange" :filter-node-method='filterNode' node-key='id' v-bind='$attrs'>
<template #default='{ node, data }'>
<span class='custom-tree-node'>
<Icon
:name='data.icon'
style='font-size: 16px'
:style='{ color: data.color }'
v-if='data.icon'
/>
<Icon :name='data.icon' style='font-size: 16px' :style='{ color: data.color }'
v-if='data.icon' />
<span style='margin-left: 4px'>{{ node.label }}</span>
</span>
</template>
@@ -90,9 +66,9 @@ const filterNode = (value: string, data: any) => {
if (!value) return true
return data.name.includes(value)
}
const checkTreeNodeChange=()=>{
console.log( treeRef.value?.getCheckedNodes(),"ikkkkkiisiiisis");
emit('checkTreeNodeChange',treeRef.value?.getCheckedNodes())
const checkTreeNodeChange = () => {
console.log(treeRef.value?.getCheckedNodes(), "ikkkkkiisiiisis");
emit('checkTreeNodeChange', treeRef.value?.getCheckedNodes())
}
const treeRef = ref<InstanceType<typeof ElTree>>()
defineExpose({ treeRef })

73
src/components/tree/point.vue
View File

@@ -1,58 +1,32 @@
<!-- 设备监控使用折叠面板渲染多个tree -->
<template>
<div
:style="{ width: menuCollapse ? '40px' : props.width }"
style="display: flex; transition: all 0.3s; 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 :style="{ width: menuCollapse ? '40px' : props.width }"
style="display: flex; transition: all 0.3s; 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 }">
<div style="display: flex; align-items: center" class="mb10">
<el-input v-model="filterText" placeholder="请输入内容" clearable>
<el-input maxlength="32" show-word-limit v-model="filterText" placeholder="请输入内容" clearable>
<template #prefix>
<Icon name="el-icon-Search" style="font-size: 16px" />
</template>
</el-input>
<Icon
@click="onMenuCollapse"
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
:class="menuCollapse ? 'unfold' : ''"
size="18"
class="fold ml10 menu-collapse"
<Icon @click="onMenuCollapse" :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
:class="menuCollapse ? 'unfold' : ''" size="18" class="fold ml10 menu-collapse"
style="cursor: pointer"
v-if="props.canExpand && route.path != '/admin/govern/reportCore/statistics/index'"
/>
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-item title="治理设备" name="0" v-if="zlDeviceData.length != 0">
<el-tree
:style="{ height: bxsDeviceData.length != 0 ? 'calc(100vh - 300px)' : 'calc(100vh - 238px)' }"
ref="treeRef1"
:props="defaultProps"
highlight-current
:filter-node-method="filterNode"
node-key="id"
default-expand-all
v-bind="$attrs"
:data="zlDeviceData"
style="overflow: auto"
>
ref="treeRef1" :props="defaultProps" highlight-current :filter-node-method="filterNode"
node-key="id" default-expand-all v-bind="$attrs" :data="zlDeviceData" style="overflow: auto">
<template #default="{ node, data }">
<span class="custom-tree-node">
<Icon
:name="data.icon"
style="font-size: 16px"
:style="{ color: data.color }"
v-if="data.icon"
/>
<Icon :name="data.icon" style="font-size: 16px" :style="{ color: data.color }"
v-if="data.icon" />
<span style="margin-left: 4px">{{ node.label }}</span>
</span>
</template>
@@ -61,24 +35,13 @@
<el-collapse-item title="便携式设备" name="1" v-if="bxsDeviceData.length != 0">
<el-tree
:style="{ height: zlDeviceData.length != 0 ? 'calc(100vh - 280px)' : 'calc(100vh - 238px)' }"
ref="treeRef2"
:props="defaultProps"
highlight-current
default-expand-all
:filter-node-method="filterNode"
node-key="id"
:data="bxsDeviceData"
v-bind="$attrs"
style="overflow: auto"
>
ref="treeRef2" :props="defaultProps" highlight-current default-expand-all
:filter-node-method="filterNode" node-key="id" :data="bxsDeviceData" v-bind="$attrs"
style="overflow: auto">
<template #default="{ node, data }">
<span class="custom-tree-node">
<Icon
:name="data.icon"
style="font-size: 16px"
:style="{ color: data.color }"
v-if="data.icon"
/>
<Icon :name="data.icon" style="font-size: 16px" :style="{ color: data.color }"
v-if="data.icon" />
<span style="margin-left: 4px">{{ node.label }}</span>
</span>
</template>