You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

186 lines
5.5 KiB

<!-- @format -->
<template>
<div v-if="editableData" class="editable-cell-input-wrapper">
<a-input
:title="editableData.expectedValue"
v-model:value="editableData.expectedValue"
@pressEnter="save()" />
<CheckOutlined :style="{ color: '#37abc4', margin: '0 5px' }" @click="save()" />
<CloseCircleOutlined :style="{ color: '#37abc4' }" @click="clear()" />
<br />
<span v-if="editableData.message" class="config-message">
<CloseCircleFilled :style="{ color: 'red' }" />{{ editableData.message }}
</span>
</div>
<div v-else class="editable-cell-text-wrapper">
<span class="config-input">{{ configValue.expectedValue }}</span>
<EditOutlined :style="{ color: '#37abc4' }" @click="edit()" />
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { cloneDeep } from 'lodash-es';
import {
CheckOutlined,
EditOutlined,
CloseCircleOutlined,
CloseCircleFilled,
} from '@ant-design/icons-vue';
export interface DataItem {
childName: string;
remark: string;
configValue: string;
expectedValue: string;
key: string;
message: string;
rulesData: object;
}
export default defineComponent({
components: {
CheckOutlined,
EditOutlined,
CloseCircleOutlined,
CloseCircleFilled,
},
props: {
configValue: {
type: Object,
},
index: {
type: Number,
},
listKey: {
type: String,
},
},
emits: ['changeInput', 'blur'],
setup(props, ctx) {
let editableData = ref();
let ifShow = ref<boolean>(false);
//输入框编辑
const edit = () => {
// console.log('edit');
editableData.value = cloneDeep(props.configValue);
ifShow.value = true;
console.log(editableData.value);
};
//输入框保存
const save = () => {
// console.log('save');
let dataType = editableData.value.childSpecsDTO;
validatorRules();
if (validatorRules()) {
let value = {
configValue: editableData.value.expectedValue,
index: props.index,
key: props.listKey,
};
if (dataType.dataType == 'INT') {
value.configValue = parseInt(value.configValue);
}
ctx.emit('changeInput', value);
editableData.value = '';
} else {
}
};
//校验规则
const validatorRules = () => {
// console.log('校验规则');
let rulesData = editableData.value.childSpecsDTO;
let value = editableData.value.expectedValue;
// console.log(rulesData);
// console.log(value);
if (rulesData['min'] && rulesData['max']) {
}
const min = parseInt(rulesData['min']);
const max = parseInt(rulesData['max']);
// if (value == '') {
// editableData.value.message = '不可以为空';
// return false;
// }
if (rulesData.dataType == 'TEXT') {
if (value.length > rulesData.length) {
editableData.value.message = '字符串长度最大不超过' + rulesData.length;
// console.log('字符串长度最大不超过' + rulesData.length);
return false;
} else {
return true;
}
} else if (rulesData.dataType == 'DOUBLE') {
value = value + '';
if (value.length > 100) {
editableData.value.message = 'double类型支持最大位数为100';
return false;
}
if (!/^(-)?[0-9]+\.?([0-9]{0,16})?$/.test(value)) {
editableData.value.message = '双精度有效位为16';
return false;
}
if (value > max || value < min) {
editableData.value.message = ''.concat(`取值范围:${min} ~ ${max}`);
return false;
}
return true;
} else if (rulesData.dataType == 'FLOAT') {
if (!/^(-)?[0-9]+\.?([0-9]{0,7})?$/.test(value)) {
editableData.value.message = '单精度有效位为7';
return false;
}
if (value > max || value < min) {
editableData.value.message = ''.concat(`取值范围:${min} ~ ${max}`);
return false;
}
return true;
} else if (rulesData.dataType == 'INT') {
value = value.toString();
value = value.split('.');
if (value.length <= 1) {
value = parseInt(value);
if (typeof value === 'number' && value % 1 === 0) {
if (value < min || value > max) {
editableData.value.message = `取值范围:${min} ~ ${max}`;
return false;
} else {
return true;
}
} else {
editableData.value.message = '请输入正确的整数类型';
return false;
}
} else {
editableData.value.message = '请输入正确的整数类型';
return false;
}
} else {
return true;
}
};
//关闭输入框内容
const clear = () => {
editableData.value = '';
};
return {
save,
clear,
edit,
editableData,
};
},
});
</script>
<style scoped>
:deep(.editable-cell-input-wrapper input) {
width: 150px;
}
.config-message {
color: red;
}
.editable-cell-text-wrapper {
width: 70%;
display: flex;
justify-content: space-between;
align-items: center;
}
</style>