verce-vue-test 0.0.1 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "verce-vue-test",
-  "version": "0.0.1",
+  "version": "0.0.5",
   "private": false,
   "type": "module",
   "scripts": {
@@ -9,14 +9,14 @@
     "preview": "vite preview",
     "build-only": "vite build",
     "type-check": "vue-tsc --build",
-        "发布": "npm publish",
+    "发布": "npm publish",
     "修订 ": "npm version patch",
     "次版本": "npm version minor",
     "主版本": "npm version major",
     "登录": "npm login ",
     "一键发布": "npm version patch && npm publish"
   },
-    "keywords": [
+  "keywords": [
     "express",
     "web",
     "application"
@@ -43,7 +43,7 @@
   "engines": {
     "node": "^20.19.0 || >=22.12.0"
   },
-    "publishConfig": {
+  "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org"
   }

package/src/App.vue

@@ -30,6 +30,9 @@ import { RouterView } from 'vue-router'
         <el-menu-item index="/table-pro-for">
           <span>循环表格</span>
         </el-menu-item>
+        <el-menu-item index="/employee">
+          <span>员工管理</span>
+        </el-menu-item>
         <el-menu-item index="/about">
           <span>关于</span>
         </el-menu-item>

package/src/components/ElFormDialog.vue

@@ -0,0 +1,285 @@
+<script setup lang="ts">
+import { ref, reactive, watch, nextTick, computed } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+
+/**
+ * 基于 Element Plus 的表单弹窗组件
+ * 支持新增/编辑模式，通过 fields 配置动态渲染表单项
+ * 支持 input、select、number、date、textarea、radio、switch 等字段类型
+ */
+defineOptions({
+  name: 'ElFormDialog',
+  inheritAttrs: false, // 不自动将 $attrs 绑定到根元素，避免属性透传到 el-dialog
+})
+
+/** 表单字段类型 */
+type FieldType = 'input' | 'select' | 'number' | 'date' | 'textarea' | 'radio' | 'switch'
+
+/** 表单字段配置项 */
+type FormField = {
+  /** 字段属性名，对应表单数据中的 key */
+  prop: string
+  /** 字段标签文本 */
+  label: string
+  /** 字段类型 */
+  type: FieldType
+  /** 占位提示文本，不传则根据类型自动生成 */
+  placeholder?: string
+  /** 是否必填，为 true 时自动生成必填校验规则 */
+  required?: boolean
+  /** 自定义校验规则，优先级低于 props.rules 中同名字段的规则 */
+  rules?: FormRules[string]
+  /** 下拉选项列表，适用于 select 和 radio 类型 */
+  options?: Array<{ label: string; value: any }>
+  /** 数字输入框最小值，适用于 number 类型 */
+  min?: number
+  /** 数字输入框最大值，适用于 number 类型 */
+  max?: number
+  /** 文本域行数，适用于 textarea 类型，默认 3 */
+  rows?: number
+  /** switch 打开时的文字描述 */
+  activeText?: string
+  /** switch 关闭时的文字描述 */
+  inactiveText?: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    /** 控制弹窗显示/隐藏，支持 v-model 双向绑定 */
+    modelValue: boolean
+    /** 表单字段配置列表 */
+    fields: FormField[]
+    /** 表单数据对象，编辑时需传入包含 id 的对象，新增时传入空对象 */
+    formData: Record<string, any>
+    /** 弹窗标题，不传则根据是否编辑自动显示"新增"或"编辑" */
+    title?: string
+    /** 弹窗宽度 */
+    width?: string
+    /** 自定义校验规则，与 fields 中的 required/rules 合并，同名字段优先使用此处的规则 */
+    rules?: FormRules
+  }>(),
+  {
+    width: '600px',
+  },
+)
+
+const emit = defineEmits<{
+  /** 弹窗显示状态变化时触发，用于 v-model 双向绑定 */
+  'update:modelValue': [value: boolean]
+  /** 点击确认按钮且表单校验通过后触发，参数为表单数据（编辑时包含 id） */
+  confirm: [data: Record<string, any>]
+}>()
+
+/** 表单实例引用，用于调用 validate、clearValidate 等方法 */
+const formRef = ref<FormInstance>()
+
+/**
+ * 弹窗显示状态的双向绑定计算属性
+ * 读取时返回 props.modelValue，设置时触发 update:modelValue 事件
+ */
+const dialogVisible = computed({
+  get: () => props.modelValue,
+  set: value => emit('update:modelValue', value),
+})
+
+/** 是否为编辑模式（根据 formData 中是否包含 id 判断） */
+const isEdit = computed(() => !!props.formData?.id)
+
+/** 弹窗标题，优先使用 props.title，否则编辑模式显示"编辑"、新增模式显示"新增" */
+const dialogTitle = computed(() => {
+  if (props.title) return props.title
+  return isEdit.value ? '编辑' : '新增'
+})
+
+/** 响应式表单数据对象，根据 fields 配置动态初始化 */
+const form = reactive<Record<string, any>>({})
+
+/**
+ * 合并后的表单校验规则
+ * 合并逻辑：
+ * 1. 以 props.rules 为基础
+ * 2. 若字段配置了 required 且 props.rules 中无对应规则，则自动生成必填规则
+ * 3. 若字段配置了自定义 rules 且 props.rules 中无对应规则，则使用字段的自定义规则
+ * 注：props.rules 中的规则优先级最高，不会被字段级配置覆盖
+ */
+const mergedRules = computed(() => {
+  const rules: FormRules = { ...props.rules }
+  props.fields.forEach(field => {
+    if (field.required && !rules[field.prop]) {
+      rules[field.prop] = [
+        {
+          required: true,
+          // 根据字段类型自动生成提示语：select/date 用"选择"，其他用"输入"
+          message: `请${field.type === 'select' || field.type === 'date' ? '选择' : '输入'}${field.label}`,
+          // 根据字段类型自动选择触发方式：switch/select/date 用 change，其他用 blur
+          trigger: field.type === 'switch' ? 'change' : field.type === 'select' || field.type === 'date' ? 'change' : 'blur',
+        },
+      ]
+    }
+    if (field.rules && !rules[field.prop]) {
+      rules[field.prop] = field.rules
+    }
+  })
+  return rules
+})
+
+/**
+ * 初始化表单数据
+ * 1. 清空原有表单数据
+ * 2. 根据 fields 配置逐字段初始化，使用 formData 中对应值或默认值
+ *    - switch 类型默认 false
+ *    - number 类型默认 undefined
+ *    - 其他类型默认空字符串
+ */
+const initForm = () => {
+  Object.keys(form).forEach(key => delete form[key])
+  props.fields.forEach(field => {
+    if (field.type === 'switch') {
+      form[field.prop] = props.formData?.[field.prop] ?? false
+    } else if (field.type === 'number') {
+      form[field.prop] = props.formData?.[field.prop] ?? undefined
+    } else {
+      form[field.prop] = props.formData?.[field.prop] ?? ''
+    }
+  })
+}
+
+/**
+ * 监听弹窗打开事件
+ * 弹窗打开时：初始化表单数据，并在下一帧清除校验状态（避免残留的校验提示）
+ */
+watch(
+  () => props.modelValue,
+  val => {
+    if (val) {
+      initForm()
+      nextTick(() => formRef.value?.clearValidate())
+    }
+  },
+)
+
+/**
+ * 确认按钮点击处理
+ * 1. 校验表单
+ * 2. 校验通过后触发 confirm 事件，传递表单数据（编辑时附带 id）
+ * 3. 关闭弹窗
+ */
+const handleConfirm = async () => {
+  if (!formRef.value) return
+  await formRef.value.validate(valid => {
+    if (!valid) return
+    emit('confirm', { ...form, id: props.formData?.id })
+    dialogVisible.value = false
+  })
+}
+
+/** 取消按钮点击处理，直接关闭弹窗 */
+const handleCancel = () => {
+  dialogVisible.value = false
+}
+</script>
+
+<template>
+  <!-- 弹窗容器：禁止点击遮罩关闭、关闭时销毁内容 -->
+  <el-dialog
+    v-model="dialogVisible"
+    :title="dialogTitle"
+    :width="width"
+    :close-on-click-modal="false"
+    destroy-on-close
+  >
+    <!-- 表单容器 -->
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="mergedRules"
+      label-width="100px"
+    >
+      <!-- 动态渲染表单项，根据 field.type 选择对应的输入组件 -->
+      <el-form-item
+        v-for="field in fields"
+        :key="field.prop"
+        :label="field.label"
+        :prop="field.prop"
+      >
+        <!-- 文本输入框 -->
+        <el-input
+          v-if="field.type === 'input'"
+          v-model="form[field.prop]"
+          :placeholder="field.placeholder || `请输入${field.label}`"
+        />
+
+        <!-- 数字输入框 -->
+        <el-input-number
+          v-else-if="field.type === 'number'"
+          v-model="form[field.prop]"
+          :min="field.min"
+          :max="field.max"
+          :placeholder="field.placeholder || `请输入${field.label}`"
+          style="width: 100%"
+        />
+
+        <!-- 下拉选择框 -->
+        <el-select
+          v-else-if="field.type === 'select'"
+          v-model="form[field.prop]"
+          :placeholder="field.placeholder || `请选择${field.label}`"
+          style="width: 100%"
+        >
+          <el-option
+            v-for="opt in field.options"
+            :key="opt.value"
+            :label="opt.label"
+            :value="opt.value"
+          />
+        </el-select>
+
+        <!-- 日期选择器 -->
+        <el-date-picker
+          v-else-if="field.type === 'date'"
+          v-model="form[field.prop]"
+          type="date"
+          :placeholder="field.placeholder || `请选择${field.label}`"
+          style="width: 100%"
+        />
+
+        <!-- 文本域 -->
+        <el-input
+          v-else-if="field.type === 'textarea'"
+          v-model="form[field.prop]"
+          type="textarea"
+          :rows="field.rows || 3"
+          :placeholder="field.placeholder || `请输入${field.label}`"
+        />
+
+        <!-- 开关 -->
+        <el-switch
+          v-else-if="field.type === 'switch'"
+          v-model="form[field.prop]"
+          :active-text="field.activeText"
+          :inactive-text="field.inactiveText"
+        />
+
+        <!-- 单选框组 -->
+        <el-radio-group
+          v-else-if="field.type === 'radio'"
+          v-model="form[field.prop]"
+        >
+          <el-radio
+            v-for="opt in field.options"
+            :key="opt.value"
+            :value="opt.value"
+          >
+            {{ opt.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+    </el-form>
+
+    <!-- 底部按钮区域 -->
+    <template #footer>
+      <el-button @click="handleCancel">取消</el-button>
+      <el-button type="primary" @click="handleConfirm">确认</el-button>
+    </template>
+  </el-dialog>
+</template>

package/src/components/ElTablePro.vue

@@ -91,6 +91,7 @@ type ColumnOption = {
   key: string      // 列唯一标识
   label: string    // 列显示名称
   visible: boolean // 是否可见
+  disabled: boolean // 是否禁用选择
   vnode: VNode     // 列的 VNode 节点
 }
 
@@ -144,10 +145,15 @@ const currentPageSize = computed({
 
 // 是否全选（弹窗中的临时状态）
 const isAllSelected = computed({
-  get: () => pendingColumnOptions.value.length > 0 && pendingColumnOptions.value.every(col => col.visible),
+  get: () => {
+    const selectable = pendingColumnOptions.value.filter(col => !col.disabled)
+    return selectable.length > 0 && selectable.every(col => col.visible)
+  },
   set: value => {
     pendingColumnOptions.value.forEach(col => {
-      col.visible = value
+      if (!col.disabled) {
+        col.visible = value
+      }
     })
   },
 })
@@ -211,6 +217,7 @@ const restoreColumnConfig = () => {
 
     // 遍历列选项，更新可见性状态
     columnOptions.value.forEach(column => {
+      if (column.disabled) return
       const match = cacheColumns.find(item => item.key === column.key)
       if (match) {
         column.visible = match.visible
@@ -289,10 +296,12 @@ const initColumns = () => {
   const children = flattenVNodes(rawChildren)
 
   columnOptions.value = children.map((vnode, index) => {
+    const columnProps = vnode.props as Record<string, any> | null
     return {
       key: getColumnKey(vnode, index),
       label: getColumnLabel(vnode, index),
-      visible: true,
+      visible: columnProps?.visible !== false,
+      disabled: columnProps?.disabled ?? false,
       vnode,
     }
   })
@@ -399,6 +408,7 @@ initColumns()
           >
             <el-checkbox
               v-model="column.visible"
+              :disabled="column.disabled"
             >
               {{ column.label }}
             </el-checkbox>

package/src/router/index.ts

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

package/src/views/EmployeeView.vue

@@ -0,0 +1,204 @@
+<template>
+  <ElTablePro
+    :data="tableData"
+    :total="total"
+    v-model:page="query.page"
+    v-model:page-size="query.pageSize"
+    table-key="employee"
+    row-key="id"
+    border
+    stripe
+    v-loading="loading"
+    @pagination-change="handlePaginationChange"
+  >
+    <template #toolbar>
+      <el-button type="primary" @click="handleAdd">新增</el-button>
+    </template>
+
+    <el-table-column prop="id" label="ID" width="80" disabled />
+    <el-table-column prop="name" label="姓名" width="120" />
+    <el-table-column prop="department" label="部门" width="120">
+      <template #default="{ row }">
+        <el-tag :type="deptTagType(row.department)">
+          {{ row.department }}
+        </el-tag>
+      </template>
+    </el-table-column>
+    <el-table-column prop="position" label="职位" />
+    <el-table-column prop="salary" label="薪资" width="120">
+      <template #default="{ row }">
+        ¥{{ row.salary.toLocaleString() }}
+      </template>
+    </el-table-column>
+    <el-table-column prop="status" label="状态" width="100">
+      <template #default="{ row }">
+        <el-tag :type="row.status ? 'success' : 'danger'">
+          {{ row.status ? '在职' : '离职' }}
+        </el-tag>
+      </template>
+    </el-table-column>
+    <el-table-column label="操作" width="180">
+      <template #default="{ row }">
+        <el-button link type="primary" @click="handleEdit(row)">编辑</el-button>
+        <el-button link type="danger" @click="handleDelete(row)">删除</el-button>
+      </template>
+    </el-table-column>
+  </ElTablePro>
+
+  <ElFormDialog
+    v-model="dialogVisible"
+    :fields="formFields"
+    :form-data="currentRow"
+    title="员工信息"
+    @confirm="handleFormConfirm"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import ElTablePro from '@/components/ElTablePro.vue'
+import ElFormDialog from '@/components/ElFormDialog.vue'
+import type { FormRules } from 'element-plus'
+
+type Employee = {
+  id: number
+  name: string
+  department: string
+  position: string
+  salary: number
+  status: boolean
+}
+
+const formFields = [
+  { prop: 'name', label: '姓名', type: 'input' as const, required: true },
+  {
+    prop: 'department',
+    label: '部门',
+    type: 'select' as const,
+    required: true,
+    options: [
+      { label: '技术部', value: '技术部' },
+      { label: '产品部', value: '产品部' },
+      { label: '设计部', value: '设计部' },
+      { label: '市场部', value: '市场部' },
+      { label: '人事部', value: '人事部' },
+    ],
+  },
+  { prop: 'position', label: '职位', type: 'input' as const, required: true },
+  { prop: 'salary', label: '薪资', type: 'number' as const, required: true, min: 0 },
+  { prop: 'status', label: '状态', type: 'switch' as const, activeText: '在职', inactiveText: '离职' },
+]
+
+const rules: FormRules = {
+  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
+  department: [{ required: true, message: '请选择部门', trigger: 'change' }],
+  position: [{ required: true, message: '请输入职位', trigger: 'blur' }],
+  salary: [{ required: true, message: '请输入薪资', trigger: 'blur' }],
+}
+
+const loading = ref(false)
+const total = ref(0)
+const dialogVisible = ref(false)
+const currentRow = ref<Record<string, any>>({})
+
+const query = reactive({
+  page: 1,
+  pageSize: 10,
+})
+
+const allData = ref<Employee[]>([
+  { id: 1, name: '陈伟', department: '技术部', position: '前端工程师', salary: 18000, status: true },
+  { id: 2, name: '刘芳', department: '产品部', position: '产品经理', salary: 22000, status: true },
+  { id: 3, name: '张磊', department: '技术部', position: '后端工程师', salary: 20000, status: true },
+  { id: 4, name: '王丽', department: '设计部', position: 'UI设计师', salary: 16000, status: true },
+  { id: 5, name: '李强', department: '市场部', position: '市场总监', salary: 25000, status: true },
+  { id: 6, name: '赵敏', department: '人事部', position: 'HR经理', salary: 17000, status: false },
+  { id: 7, name: '孙涛', department: '技术部', position: '架构师', salary: 35000, status: true },
+  { id: 8, name: '周婷', department: '产品部', position: '产品助理', salary: 10000, status: true },
+  { id: 9, name: '吴凯', department: '技术部', position: '测试工程师', salary: 14000, status: false },
+  { id: 10, name: '郑华', department: '设计部', position: '视觉设计师', salary: 15000, status: true },
+  { id: 11, name: '冯雪', department: '市场部', position: '运营专员', salary: 12000, status: true },
+  { id: 12, name: '杨帆', department: '技术部', position: 'DevOps工程师', salary: 23000, status: true },
+])
+
+const tableData = ref<Employee[]>([])
+
+let nextId = 13
+
+const deptTagType = (dept: string) => {
+  const map: Record<string, string> = {
+    '技术部': 'primary',
+    '产品部': 'warning',
+    '设计部': 'success',
+    '市场部': 'danger',
+    '人事部': 'info',
+  }
+  return map[dept] || 'info'
+}
+
+const getList = () => {
+  loading.value = true
+  setTimeout(() => {
+    const start = (query.page - 1) * query.pageSize
+    const end = start + query.pageSize
+    tableData.value = allData.value.slice(start, end)
+    total.value = allData.value.length
+    loading.value = false
+  }, 300)
+}
+
+const handlePaginationChange = () => {
+  getList()
+}
+
+const handleAdd = () => {
+  currentRow.value = {}
+  dialogVisible.value = true
+}
+
+const handleEdit = (row: Employee) => {
+  currentRow.value = { ...row }
+  dialogVisible.value = true
+}
+
+const handleFormConfirm = (data: Record<string, any>) => {
+  if (data.id) {
+    const index = allData.value.findIndex(item => item.id === data.id)
+    if (index !== -1) {
+      allData.value[index] = { ...allData.value[index], ...data }
+    }
+    ElMessage.success('编辑成功')
+  } else {
+    allData.value.unshift({
+      id: nextId++,
+      name: data.name,
+      department: data.department,
+      position: data.position,
+      salary: data.salary,
+      status: data.status ?? true,
+    })
+    ElMessage.success('新增成功')
+  }
+  getList()
+}
+
+const handleDelete = (row: Employee) => {
+  ElMessageBox.confirm(`确认删除员工 ${row.name}？`, '提示', {
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    const index = allData.value.findIndex(item => item.id === row.id)
+    if (index !== -1) {
+      allData.value.splice(index, 1)
+    }
+    getList()
+    ElMessage.success('删除成功')
+  }).catch(() => {})
+}
+
+onMounted(() => {
+  getList()
+})
+</script>

package/src/views/TableProForView.vue

@@ -22,6 +22,7 @@
       :label="col.label"
       :width="col.width"
       :min-width="col.minWidth"
+      :visible="col.visible"
     >
       <template v-if="col.slot" #default="{ row }">
         <el-tag
@@ -56,11 +57,12 @@ interface ColumnConfig {
   width?: number | string
   minWidth?: number | string
   slot?: boolean
+  visible?: boolean
 }
 
 const columns: ColumnConfig[] = [
   { prop: 'id', label: 'ID', width: 80 },
-  { prop: 'name', label: '商品名称', minWidth: 150 },
+  { prop: 'name', label: '商品名称', minWidth: 150, visible: false },
   { prop: 'category', label: '分类', width: 120, slot: true },
   { prop: 'price', label: '价格', width: 100 },
   { prop: 'stock', label: '库存', width: 80 },

package/.vscode/settings.json

@@ -1,8 +0,0 @@
-{
-  "explorer.fileNesting.enabled": true,
-  "explorer.fileNesting.patterns": {
-    "tsconfig.json": "tsconfig.*.json, env.d.ts, typed-router.d.ts",
-    "vite.config.*": "jsconfig*, vitest.config.*, cypress.config.*, playwright.config.*",
-    "package.json": "package-lock.json, pnpm*, .yarnrc*, yarn*, .eslint*, eslint*, .oxlint*, oxlint*, .oxfmt*, .prettier*, prettier*, .editorconfig"
-  }
-}