|
@@ -9,10 +9,12 @@
|
|
|
label-width="100px"
|
|
|
>
|
|
|
<el-form-item label="属性名称" prop="name">
|
|
|
- <el-input v-model="formData.name" placeholder="请输入属性名称" />
|
|
|
+ <el-input v-model="formData.name" placeholder="请输入属性名称"
|
|
|
+ @compositionstart="handleCompositionStart"
|
|
|
+ @compositionend="handleCompositionEnd"/>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="标识符" prop="code">
|
|
|
- <el-input v-model="formData.code" placeholder="请输入标识符" />
|
|
|
+ <el-form-item label="标识符" prop="code" >
|
|
|
+ <el-input v-model="formData.code" placeholder="请输入标识符" disabled/>
|
|
|
</el-form-item>
|
|
|
<!-- 属性配置 -->
|
|
|
<DeviceAttrModelProperty
|
|
@@ -43,7 +45,8 @@
|
|
|
import DeviceAttrModelProperty from './AttrTemplateModelProperty.vue'
|
|
|
import { DeviceAttrModelApi, DeviceAttrModelData } from '@/api/pms/deviceattrmodel'
|
|
|
import { DataSpecsDataType, DeviceAttrModelFormRules } from './config'
|
|
|
-import { cloneDeep } from 'lodash-es'
|
|
|
+import pinyin from 'pinyin'
|
|
|
+import { cloneDeep, debounce } from 'lodash-es'
|
|
|
import { isEmpty } from '@/utils/is'
|
|
|
import { defineProps } from 'vue'
|
|
|
|
|
@@ -57,11 +60,26 @@ const dialogVisible = ref(false) // 弹窗的是否展示
|
|
|
const dialogTitle = ref('') // 弹窗的标题
|
|
|
const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
|
|
|
const formType = ref('') // 表单的类型:create - 新增;update - 修改
|
|
|
+const isComposing = ref(false)
|
|
|
+
|
|
|
+// 处理输入法开始事件
|
|
|
+const handleCompositionStart = () => {
|
|
|
+ isComposing.value = true
|
|
|
+}
|
|
|
+
|
|
|
+// 处理输入法结束事件
|
|
|
+const handleCompositionEnd = (event: CompositionEvent) => {
|
|
|
+ isComposing.value = false
|
|
|
+ // 手动触发处理
|
|
|
+ generateIdentifier((event.target as HTMLInputElement).value)
|
|
|
+}
|
|
|
+
|
|
|
const formData = ref<DeviceAttrModelData>({
|
|
|
deviceCategoryId: -1,
|
|
|
dataType: DataSpecsDataType.DOUBLE,
|
|
|
type: DataSpecsDataType.DOUBLE,
|
|
|
requiredFlag: 0,
|
|
|
+ code: '',
|
|
|
description: '',
|
|
|
defaultValue: '',
|
|
|
selectOptions: {
|
|
@@ -151,11 +169,61 @@ const removeDataSpecs = (val: any) => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+// 处理属性名称生成标识符
|
|
|
+const processInputName = (name: string) => {
|
|
|
+ let result = ''
|
|
|
+ for (const char of name) {
|
|
|
+ // 汉字转拼音首字母
|
|
|
+ if (/[\u4e00-\u9fa5]/.test(char)) {
|
|
|
+ const pinyinArray = pinyin(char, {
|
|
|
+ style: pinyin.STYLE_FIRST_LETTER
|
|
|
+ })
|
|
|
+ if (pinyinArray[0]?.[0]) {
|
|
|
+ result += pinyinArray[0][0].toUpperCase()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 非汉字字符原样保留
|
|
|
+ else {
|
|
|
+ result += char
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return result
|
|
|
+}
|
|
|
+
|
|
|
+// 中文首字母提取方法
|
|
|
+const getChineseInitials = (name: string) => {
|
|
|
+ const chineseChars = name.match(/[\u4e00-\u9fa5]/g) || []
|
|
|
+ if (chineseChars.length === 0) return ''
|
|
|
+
|
|
|
+ const pinyinArray = pinyin(chineseChars.join(''), {
|
|
|
+ style: pinyin.STYLE_FIRST_LETTER,
|
|
|
+ })
|
|
|
+ return pinyinArray.map(arr => arr[0]?.charAt(0).toUpperCase()).join('')
|
|
|
+}
|
|
|
+
|
|
|
+// 生成标识符方法
|
|
|
+const generateIdentifier = debounce((name: string) => {
|
|
|
+ /* if (formData.value.code) return */
|
|
|
+
|
|
|
+ const initials = processInputName(name)
|
|
|
+ if (initials) {
|
|
|
+ formData.value.code = `${initials}_${Date.now()}`
|
|
|
+ }
|
|
|
+}, 800)
|
|
|
+
|
|
|
+// 监听属性名称变化
|
|
|
+watchEffect(() => {
|
|
|
+ if (formData.value.name && !isComposing.value) {
|
|
|
+ generateIdentifier(formData.value.name)
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
/** 重置表单 */
|
|
|
const resetForm = () => {
|
|
|
formData.value = {
|
|
|
dataType: DataSpecsDataType.DOUBLE,
|
|
|
type: DataSpecsDataType.DOUBLE,
|
|
|
+ code: '',
|
|
|
selectOptions: {
|
|
|
type: DataSpecsDataType.DOUBLE,
|
|
|
dataSpecs: {
|
|
@@ -165,4 +233,9 @@ const resetForm = () => {
|
|
|
}
|
|
|
formRef.value?.resetFields()
|
|
|
}
|
|
|
+
|
|
|
+onMounted(async () => {
|
|
|
+ // 如果不修改 属性名称 不要自动生成新标识符
|
|
|
+ isComposing.value = true
|
|
|
+})
|
|
|
</script>
|