verce-vue-test 0.0.5 → 0.0.7

package/888/1

@@ -0,0 +1,121 @@
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="isEdit ? '编辑用户' : '新增用户'"
+    width="520px"
+    destroy-on-close
+    @closed="resetForm"
+  >
+    <el-form ref="formRef" :model="form" :rules="rules" label-width="90px">
+      <el-form-item label="用户名" prop="username">
+        <el-input v-model="form.username" />
+      </el-form-item>
+
+      <el-form-item label="手机号" prop="phone">
+        <el-input v-model="form.phone" />
+      </el-form-item>
+
+      <el-form-item label="状态" prop="status">
+        <el-radio-group v-model="form.status">
+          <el-radio :value="1">启用</el-radio>
+          <el-radio :value="0">禁用</el-radio>
+        </el-radio-group>
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <el-button @click="dialogVisible = false">取消</el-button>
+      <el-button type="primary" :loading="loading" @click="handleSubmit">
+        保存
+      </el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { computed, reactive, ref, watch } from 'vue'
+import { ElMessage } from 'element-plus'
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  mode: {
+    type: String,
+    default: 'create'
+  },
+  rowData: {
+    type: Object,
+    default: () => null
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'success'])
+
+const dialogVisible = computed({
+  get: () => props.modelValue,
+  set: value => emit('update:modelValue', value)
+})
+
+const isEdit = computed(() => props.mode === 'edit')
+
+const formRef = ref()
+const loading = ref(false)
+
+const defaultForm = {
+  id: null,
+  username: '',
+  phone: '',
+  status: 1
+}
+
+const form = reactive({ ...defaultForm })
+
+const rules = {
+  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
+  phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }]
+}
+
+watch(
+  () => props.modelValue,
+  visible => {
+    if (!visible) return
+
+    Object.assign(form, defaultForm)
+
+    if (props.mode === 'edit' && props.rowData) {
+      Object.assign(form, props.rowData)
+    }
+
+    formRef.value?.clearValidate()
+  }
+)
+
+const resetForm = () => {
+  Object.assign(form, defaultForm)
+  formRef.value?.clearValidate()
+}
+
+const handleSubmit = async () => {
+  await formRef.value.validate()
+
+  loading.value = true
+  try {
+    if (isEdit.value) {
+      // await updateUserApi(form.id, form)
+      console.log('编辑：', form)
+      ElMessage.success('修改成功')
+    } else {
+      // await createUserApi(form)
+      console.log('新增：', form)
+      ElMessage.success('新增成功')
+    }
+
+    dialogVisible.value = false
+    emit('success')
+  } finally {
+    loading.value = false
+  }
+}
+</script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "verce-vue-test",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "private": false,
   "type": "module",
   "scripts": {

package/src/App.vue

@@ -33,6 +33,9 @@ import { RouterView } from 'vue-router'
         <el-menu-item index="/employee">
           <span>员工管理</span>
         </el-menu-item>
+        <el-menu-item index="/thousandth">
+          <span>千分位输入</span>
+        </el-menu-item>
         <el-menu-item index="/about">
           <span>关于</span>
         </el-menu-item>

package/src/components/ElInputThousandth.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { ref, watch, nextTick } from 'vue'
+
+defineOptions({ name: 'ElInputThousandth' })
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: number | string
+    placeholder?: string
+    disabled?: boolean
+  }>(),
+  {
+    modelValue: undefined,
+    placeholder: '',
+    disabled: false,
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number | string | undefined]
+}>()
+
+const isFocused = ref(false)
+const displayValue = ref('')
+const inputRef = ref<InstanceType<typeof import('element-plus')['ElInput']>>()
+
+function formatThousandth(val: string | number | undefined): string {
+  if (val === undefined || val === null || val === '') return ''
+  const str = String(val)
+  const num = Number(str)
+  if (isNaN(num)) return ''
+  const parts = str.split('.')
+  const intPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+  if (parts.length > 1) {
+    return intPart + '.' + parts[1]
+  }
+  return intPart
+}
+
+function stripNonNumeric(val: string): string {
+  let result = val.replace(/[^\d.]/g, '')
+  const dotIndex = result.indexOf('.')
+  if (dotIndex !== -1) {
+    result = result.slice(0, dotIndex + 1) + result.slice(dotIndex + 1).replace(/\./g, '')
+  }
+  if (dotIndex !== -1) {
+    const parts = result.split('.')
+    if (parts[1].length > 2) {
+      result = parts[0] + '.' + parts[1].slice(0, 2)
+    }
+  }
+  return result
+}
+
+function handleInput(val: string) {
+  const cleaned = stripNonNumeric(val)
+  displayValue.value = cleaned
+  if (cleaned === '' || cleaned === '.') {
+    emit('update:modelValue', undefined)
+  } else {
+    emit('update:modelValue', Number(cleaned))
+  }
+}
+
+function handleFocus() {
+  isFocused.value = true
+  const raw = props.modelValue !== undefined && props.modelValue !== null && props.modelValue !== ''
+    ? String(props.modelValue)
+    : ''
+  displayValue.value = raw
+}
+
+function handleBlur() {
+  isFocused.value = false
+  if (props.modelValue !== undefined && props.modelValue !== null && props.modelValue !== '') {
+    displayValue.value = formatThousandth(props.modelValue)
+  } else {
+    displayValue.value = ''
+  }
+}
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (!isFocused.value) {
+      displayValue.value = formatThousandth(val)
+    }
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <el-input
+    ref="inputRef"
+    :model-value="displayValue"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    @input="handleInput"
+    @focus="handleFocus"
+    @blur="handleBlur"
+  />
+</template>

package/src/router/index.ts

@@ -44,6 +44,11 @@ const router = createRouter({
       name: 'employee',
       component: () => import('../views/EmployeeView.vue'),
     },
+    {
+      path: '/thousandth',
+      name: 'thousandth',
+      component: () => import('../views/ThousandthView.vue'),
+    },
   ],
 })
 

package/src/views/ThousandthView.vue

@@ -0,0 +1,57 @@
+<template>
+  <el-card shadow="hover">
+    <template #header>
+      <span>千分位输入演示</span>
+    </template>
+
+    <el-form :model="form" label-width="120px" style="max-width: 600px">
+      <el-form-item label="金额">
+        <ElInputThousandth v-model="form.amount" placeholder="请输入金额" />
+      </el-form-item>
+
+      <el-form-item label="价格">
+        <ElInputThousandth v-model="form.price" placeholder="请输入价格" />
+      </el-form-item>
+
+      <el-form-item label="数量">
+        <el-input-number v-model="form.quantity" :min="1" />
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" @click="handleSubmit">提交</el-button>
+        <el-button @click="handleReset">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-divider />
+
+    <el-descriptions title="表单数据" :column="1" border>
+      <el-descriptions-item label="金额">{{ form.amount }}</el-descriptions-item>
+      <el-descriptions-item label="价格">{{ form.price }}</el-descriptions-item>
+      <el-descriptions-item label="数量">{{ form.quantity }}</el-descriptions-item>
+    </el-descriptions>
+  </el-card>
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { ElMessage } from 'element-plus'
+import ElInputThousandth from '@/components/ElInputThousandth.vue'
+
+const form = reactive({
+  amount: undefined as number | undefined,
+  price: undefined as number | undefined,
+  quantity: 1,
+})
+
+const handleSubmit = () => {
+  ElMessage.success('提交成功！')
+  console.log('form data:', { ...form })
+}
+
+const handleReset = () => {
+  form.amount = undefined
+  form.price = undefined
+  form.quantity = 1
+}
+</script>