mirror of
https://github.com/veops/cmdb.git
synced 2025-08-08 21:47:06 +08:00
feat:citype regex check & pref:edit is_list (#380)
This commit is contained in:
wang-liang0615
GitHub
19
cmdb-ui/src/components/RegexSelect/constants.js
Normal file
19
cmdb-ui/src/components/RegexSelect/constants.js
Normal file
@@ -0,0 +1,19 @@
|
||||
/* eslint-disable no-useless-escape */
|
||||
|
||||
import i18n from '@/lang'
|
||||
export const regList = () => {
|
||||
return [
|
||||
{ id: 'letter', label: i18n.t('regexSelect.letter'), value: '^[A-Za-z]+$', message: '请输入字母' },
|
||||
{ id: 'number', label: i18n.t('regexSelect.number'), value: '^-?(?!0\\d+)\\d+(\\.\\d+)?$', message: '请输入数字' },
|
||||
{ id: 'letterAndNumber', label: i18n.t('regexSelect.letterAndNumber'), value: '^[A-Za-z0-9.]+$', message: '请输入字母和数字' },
|
||||
{ id: 'phone', label: i18n.t('regexSelect.phone'), value: '^1[3-9]\\d{9}$', message: '请输入正确手机号码' },
|
||||
{ id: 'landline', label: i18n.t('regexSelect.landline'), value: '^(?:(?:\\d{3}-)?\\d{8}|^(?:\\d{4}-)?\\d{7,8})(?:-\\d+)?$', message: '请输入正确座机' },
|
||||
{ id: 'zipCode', label: i18n.t('regexSelect.zipCode'), value: '^(0[1-7]|1[0-356]|2[0-7]|3[0-6]|4[0-7]|5[1-7]|6[1-7]|7[0-5]|8[013-6])\\d{4}$', message: '请输入正确邮政编码' },
|
||||
{ id: 'IDCard', label: i18n.t('regexSelect.IDCard'), value: '(^[1-9]\\d{5}(18|19|([23]\\d))\\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\\d{3}[0-9Xx]$)|(^[1-9]\\d{5}\\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\\d{3}$)', message: '请输入正确身份证号' },
|
||||
{ id: 'ip', label: i18n.t('regexSelect.ip'), value: '^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$', message: '请输入正确IP地址' },
|
||||
{ id: 'email', label: i18n.t('regexSelect.email'), value: '^\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\.\\w+([-.]\\w+)*$', message: '请输入正确邮箱' },
|
||||
{ id: 'link', label: i18n.t('regexSelect.link'), value: '^(https:\/\/www\.|http:\/\/www\.|https:\/\/|http:\/\/)?[a-zA-Z0-9]{2,}(\.[a-zA-Z0-9]{2,})(\.[a-zA-Z0-9]{2,})?$', message: '请输入链接' },
|
||||
{ id: 'monetaryAmount', label: i18n.t('regexSelect.monetaryAmount'), value: '^-?\\d+(,\\d{3})*(\.\\d{1,2})?$', message: '请输入货币金额' },
|
||||
{ id: 'custom', label: i18n.t('regexSelect.custom'), value: '', message: '' }
|
||||
]
|
||||
}
|
||||
2
cmdb-ui/src/components/RegexSelect/index.js
Normal file
2
cmdb-ui/src/components/RegexSelect/index.js
Normal file
@@ -0,0 +1,2 @@
|
||||
import RegexSelect from './regexSelect.vue'
|
||||
export default RegexSelect
|
||||
208
cmdb-ui/src/components/RegexSelect/regexSelect.vue
Normal file
208
cmdb-ui/src/components/RegexSelect/regexSelect.vue
Normal file
@@ -0,0 +1,208 @@
|
||||
<template>
|
||||
<a-popover
|
||||
trigger="click"
|
||||
placement="bottom"
|
||||
ref="regexSelect"
|
||||
overlayClassName="regex-select-wrapper"
|
||||
:overlayStyle="{ '--overlay-width': `${width}px` }"
|
||||
@visibleChange="visibleChange"
|
||||
>
|
||||
<div class="regex-select" slot="content">
|
||||
<div class="regex-select-left">
|
||||
<div class="regex-select-left-header">{{ $t('regexSelect.limitedFormat') }}</div>
|
||||
<div
|
||||
@click="
|
||||
() => {
|
||||
current = reg
|
||||
testInput = ''
|
||||
showMessage = false
|
||||
}
|
||||
"
|
||||
:class="{
|
||||
'regex-select-left-reg': true,
|
||||
'regex-select-left-reg-selected': current && current.label === reg.label,
|
||||
}"
|
||||
v-for="(reg, index) in regList"
|
||||
:key="reg.label"
|
||||
>
|
||||
<a-divider :style="{ margin: '2px -12px', width: 'calc(100% + 24px)' }" v-if="index === regList.length - 1" />
|
||||
{{ reg.label }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="regex-select-right">
|
||||
<template v-if="current">
|
||||
<div class="regex-select-right-header">{{ $t('regexSelect.regExp') }}</div>
|
||||
<div
|
||||
v-if="current.label !== $t('regexSelect.custom')"
|
||||
:style="{ color: '#000', fontSize: '12px', margin: '12px 0' }"
|
||||
>
|
||||
{{ current.value }}
|
||||
</div>
|
||||
<a-input
|
||||
:style="{ margin: '12px 0' }"
|
||||
size="small"
|
||||
v-else
|
||||
v-model="current.value"
|
||||
@change="
|
||||
() => {
|
||||
this.$emit('change', current)
|
||||
}
|
||||
"
|
||||
/>
|
||||
<template v-if="isShowErrorMsg">
|
||||
<div class="regex-select-right-header">{{ $t('regexSelect.errMsg') }}</div>
|
||||
<a-input :style="{ margin: '12px 0' }" size="small" v-model="current.message" />
|
||||
</template>
|
||||
<div class="regex-select-right-header">{{ $t('regexSelect.test') }}</div>
|
||||
<a-input v-model="testInput" :style="{ margin: '12px 0 4px' }" size="small" @change="validate" />
|
||||
<span :style="{ color: 'red', fontSize: '12px' }" v-if="showMessage">{{
|
||||
locale === 'zh' ? current.message || '错误' : $t('regexSelect.error')
|
||||
}}</span>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<a-input ref="regInput" :placeholder="$t('regexSelect.placeholder')" :value="current.label" @change="changeLabel">
|
||||
</a-input>
|
||||
</a-popover>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import { regList } from './constants'
|
||||
export default {
|
||||
name: 'RegexSelect',
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'change',
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
isShowErrorMsg: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
limitedFormat: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showMessage: false,
|
||||
width: 370,
|
||||
testInput: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['locale']),
|
||||
regList() {
|
||||
if (this.limitedFormat.length) {
|
||||
return regList().filter((item) => this.limitedFormat.includes(item.id))
|
||||
}
|
||||
return regList()
|
||||
},
|
||||
current: {
|
||||
get() {
|
||||
if (this.value?.value && !this.value?.label) {
|
||||
const _find = this.regList.find((reg) => reg.value === this.value?.value)
|
||||
return { ...this.value, label: _find?.label ?? this.$t('regexSelect.custom') }
|
||||
}
|
||||
return this.value ?? {}
|
||||
},
|
||||
set(val) {
|
||||
this.showMessage = false
|
||||
this.$emit('change', val)
|
||||
return val
|
||||
},
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
const regInput = this.$refs.regInput.$refs.input
|
||||
this.width = regInput.offsetWidth || 370
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
validate(e) {
|
||||
const reg = RegExp(this.current.value, 'g')
|
||||
this.showMessage = !reg.test(e.target.value)
|
||||
},
|
||||
changeLabel(e) {
|
||||
this.current = {}
|
||||
},
|
||||
visibleChange(visible) {
|
||||
if (visible) {
|
||||
this.$nextTick(() => {
|
||||
this.testInput = ''
|
||||
this.showMessage = false
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import '~@/style/static.less';
|
||||
.regex-select {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
display: flex;
|
||||
.regex-select-left {
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
border: 1px solid #cacdd9;
|
||||
border-radius: 4px;
|
||||
padding: 12px;
|
||||
&-reg {
|
||||
padding-left: 2px;
|
||||
cursor: pointer;
|
||||
&-selected,
|
||||
&:hover {
|
||||
color: #custom_colors[color_1];
|
||||
}
|
||||
}
|
||||
}
|
||||
&-right {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
border: 1px solid #cacdd9;
|
||||
border-radius: 4px;
|
||||
margin-left: 8px;
|
||||
padding: 12px;
|
||||
}
|
||||
&-left,
|
||||
&-right {
|
||||
&-header {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-left: 2px solid #custom_colors[color_1];
|
||||
padding-left: 6px;
|
||||
margin-left: -6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less">
|
||||
.regex-select-wrapper {
|
||||
.ant-popover-arrow {
|
||||
display: none;
|
||||
}
|
||||
.ant-popover-inner-content {
|
||||
padding: 0;
|
||||
min-width: 370px;
|
||||
width: var(--overlay-width);
|
||||
}
|
||||
}
|
||||
.regex-select-wrapper.ant-popover-placement-bottom .ant-popover-content {
|
||||
margin-top: -8px;
|
||||
}
|
||||
.regex-select-wrapper.ant-popover-placement-top .ant-popover-content {
|
||||
margin-bottom: -8px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user