@a2simcode/ui 0.0.220 → 0.0.221

package/docs/components/meta/table.ts

@@ -107,6 +107,12 @@ export default {
       "type": "string",
       "default": "'id'"
     },
+    {
+      "name": "rowDrag",
+      "description": "是否支持行拖动排序",
+      "type": "boolean",
+      "default": "false"
+    },
     {
       "name": "actions",
       "description": "行内操作按钮配置",

package/docs/components/table.md

@@ -68,6 +68,19 @@
   </template>
 </Demo>
 
+## Layer Form 弹层表单
+
+通过列类型 `j-layerform` 可以在单元格中渲染一个按钮，点击后打开弹层表单，表单内容复用 `j-layer-form` 的 `schema` 和 `formConfig` 配置方式。
+
+<Demo :source-code="tableLayerFormCode">
+  <template #source>
+    <table-layer-form />
+  </template>
+  <template #description>
+    在 `columns` 中设置 `type: 'j-layerform'`，并通过 `config.schema`、`config.formConfig`、`config.layerLabel`、`config.layerWidth`、`config.layerHeight` 配置弹层表单。示例中编辑内容会直接同步当前行数据。
+  </template>
+</Demo>
+
 ## Checkbox 交互布局
 
 通过列类型 `checkbox` 可以渲染一个内置的交互布局：两行内容（like/collect + normal/special），点击会实时更新当前行的数据并刷新显示。
@@ -345,6 +358,19 @@
   </template>
 </Demo>
 
+## 行拖动排序
+
+通过 `row-drag` 属性开启行拖动排序。拖动列与序号列分开显示，拖动完成后会自动同步 `v-model`，并触发 `change` 事件，事件类型为 `sort`。
+
+<Demo :source-code="tableRowDragCode">
+  <template #source>
+    <table-row-drag />
+  </template>
+  <template #description>
+    开启 <code>row-drag</code> 后，会新增独立的拖动列，序号列仍单独显示。示例中通过 <code>v-model</code> 直接展示拖动后的最新数据顺序。
+  </template>
+</Demo>
+
 ## API
 
 <ApiTable :data="tableApi" componentName="table" />
@@ -354,6 +380,7 @@ import TableBasic from '../examples/table/basic.vue'
 import TableTag from '../examples/table/tag.vue'
 import TableIcon from '../examples/table/icon.vue'
 import TableLink from '../examples/table/link.vue'
+import TableLayerForm from '../examples/table/layer-form.vue'
 import TableDynamicType from '../examples/table/dynamic-type.vue'
 import TableCheckboxLayout from '../examples/table/checkbox-layout.vue'
 import TableCustomLayout from '../examples/table/custom-layout.vue'
@@ -375,12 +402,14 @@ import TableActions from '../examples/table/actions.vue'
 import TableActionFilter from '../examples/table/action-filter.vue'
 import TableEditable from '../examples/table/editable.vue'
 import TableAddRow from '../examples/table/add-row.vue'
+import TableRowDrag from '../examples/table/row-drag.vue'
 import tableApi from './meta/table'
 
 import tableBasicCode from '../examples/table/basic.vue?raw'
 import tableTagCode from '../examples/table/tag.vue?raw'
 import tableIconCode from '../examples/table/icon.vue?raw'
 import tableLinkCode from '../examples/table/link.vue?raw'
+import tableLayerFormCode from '../examples/table/layer-form.vue?raw'
 import tableDynamicTypeCode from '../examples/table/dynamic-type.vue?raw'
 import tableCheckboxLayoutCode from '../examples/table/checkbox-layout.vue?raw'
 import tableCustomLayoutCode from '../examples/table/custom-layout.vue?raw'
@@ -402,4 +431,5 @@ import tableActionsCode from '../examples/table/actions.vue?raw'
 import tableActionFilterCode from '../examples/table/action-filter.vue?raw'
 import tableEditableCode from '../examples/table/editable.vue?raw'
 import tableAddRowCode from '../examples/table/add-row.vue?raw'
+import tableRowDragCode from '../examples/table/row-drag.vue?raw'
 </script>

package/docs/examples/table/layer-form.vue

@@ -0,0 +1,133 @@
+<template>
+  <div>
+    <div style="position: relative; width: 100%; height: 360px">
+      <j-table :columns="columns" :records="records" />
+    </div>
+
+    <div style="margin-top: 16px">
+      <div style="margin-bottom: 8px; font-weight: 600">当前表格数据</div>
+      <pre
+        style="
+          margin: 0;
+          padding: 12px;
+          background: #f7f8fa;
+          border-radius: 4px;
+          overflow: auto;
+        "
+      >{{ JSON.stringify(records, null, 2) }}</pre>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const columns = ref([
+  {
+    id: 'name',
+    config: {
+      label: '姓名',
+      width: 160,
+    },
+  },
+  {
+    id: 'department',
+    config: {
+      label: '部门',
+      width: 160,
+    },
+  },
+  {
+    id: 'phone',
+    config: {
+      label: '手机号',
+      width: 180,
+    },
+  },
+  {
+    id: 'setting',
+    type: 'j-layerform',
+    config: {
+      label: '资料设置',
+      width: 120,
+      align: 'center',
+      buttonLabel: '编辑资料',
+      layerLabel: '编辑员工资料',
+      layerWidth: 640,
+      layerHeight: 320,
+      formConfig: {
+        labelWidth: 90,
+        labelPosition: 'right',
+        size: 'default',
+        gutter: 16,
+        span: 12,
+      },
+      schema: [
+        {
+          id: 'name',
+          type: 'j-input',
+          config: {
+            label: '姓名',
+            placeholder: '请输入姓名',
+          },
+        },
+        {
+          id: 'department',
+          type: 'j-select',
+          config: {
+            label: '部门',
+            placeholder: '请选择部门',
+            dataType: 'options',
+            options: [
+              { label: '研发部', value: '研发部' },
+              { label: '产品部', value: '产品部' },
+              { label: '运营部', value: '运营部' },
+            ],
+          },
+        },
+        {
+          id: 'phone',
+          type: 'j-input',
+          config: {
+            label: '手机号',
+            placeholder: '请输入手机号',
+          },
+        },
+        {
+          id: 'remark',
+          type: 'j-input',
+          config: {
+            label: '备注',
+            placeholder: '请输入备注',
+            span: 24,
+          },
+        },
+      ],
+    },
+  },
+])
+
+const records = ref([
+  {
+    id: '1',
+    name: '张三',
+    department: '研发部',
+    phone: '13800000001',
+    remark: '负责前端模块',
+  },
+  {
+    id: '2',
+    name: '李四',
+    department: '产品部',
+    phone: '13800000002',
+    remark: '负责需求梳理',
+  },
+  {
+    id: '3',
+    name: '王五',
+    department: '运营部',
+    phone: '13800000003',
+    remark: '负责活动投放',
+  },
+])
+</script>

package/docs/examples/table/row-drag.vue

@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <div style="height: 360px">
+      <j-table v-model="records" row-drag :columns="columns" />
+    </div>
+    <div style="margin-top: 16px">
+      <h3>当前顺序：</h3>
+      <pre>{{ records.map((item) => `${item.id} - ${item.name}`).join('\n') }}</pre>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const columns = ref([
+  {
+    id: 'name',
+    config: {
+      label: '姓名',
+      width: 160,
+    },
+  },
+  {
+    id: 'department',
+    config: {
+      label: '部门',
+      width: 160,
+    },
+  },
+  {
+    id: 'score',
+    config: {
+      label: '绩效分',
+      width: 100,
+      align: 'right',
+    },
+  },
+])
+
+const records = ref([
+  {
+    id: 'U001',
+    name: '张三',
+    department: '产品',
+    score: 95,
+  },
+  {
+    id: 'U002',
+    name: '李四',
+    department: '研发',
+    score: 88,
+  },
+  {
+    id: 'U003',
+    name: '王五',
+    department: '测试',
+    score: 91,
+  },
+  {
+    id: 'U004',
+    name: '赵六',
+    department: '运营',
+    score: 84,
+  },
+])
+</script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a2simcode/ui",
-  "version": "0.0.220",
+  "version": "0.0.221",
   "description": "A Vue 3 UI Component Library",
   "type": "module",
   "main": "./dist/simcode-ui.umd.js",