create-yss-spec 2.1.10 → 2.1.11

package/template/.cursor/skills/yss-ui/assets/demos/edit-table/async-remote/index.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { YButton, YEditTable } from '@yss-ui/components';
+import { Collapse as ACollapse, CollapsePanel as ACollapsePanel } from 'ant-design-vue';
+import { useAsyncRemote } from './hooks/useAsyncRemote';
+
+defineOptions({ name: 'DemoEditTableAsyncRemote' });
+
+const { data, columns, optionsMap, serverProductNameMap, editRules, add, onUpdateRow } = useAsyncRemote();
+</script>
+
+<template>
+  <div style="padding: 12px">
+    <div style="text-align: right; margin-bottom: 8px">
+      <YButton type="primary" @click="add">添 行</YButton>
+    </div>
+    <YEditTable
+      v-model:data="data"
+      :columns="columns"
+      :table-config="{ editConfig: { trigger: 'click', mode: 'row' }, editRules }"
+      :options-map="optionsMap"
+      addable
+      @add="add"
+      @update-row="onUpdateRow"
+    />
+
+    <a-collapse v-if="data" style="margin-top: 12px">
+      <a-collapse-panel key="data" header="查看数据">
+        <div style="padding: 12px; border: 1px dashed #d9d9d9; border-radius: 4px">
+          <div style="color: #999; margin-bottom: 6px">当前数据：</div>
+          <pre style="margin: 0; white-space: pre-wrap">{{ JSON.stringify(data, null, 2) }}</pre>
+        </div>
+      </a-collapse-panel>
+      <a-collapse-panel key="srv" header="模拟服务端返回（当前数据集）">
+        <div style="padding: 12px; border: 1px dashed #d9d9d9; border-radius: 4px">
+          <div style="color: #999; margin-bottom: 6px">products：</div>
+          <pre style="margin: 0; white-space: pre-wrap">{{ JSON.stringify(optionsMap.product, null, 2) }}</pre>
+          <div style="color: #999; margin: 6px 0">productNameMap（按所选产品动态过滤）：</div>
+          <pre style="margin: 0; white-space: pre-wrap">{{ JSON.stringify(serverProductNameMap, null, 2) }}</pre>
+        </div>
+      </a-collapse-panel>
+    </a-collapse>
+  </div>
+</template>
+
+<style scoped></style>

package/template/.cursor/skills/yss-ui/assets/demos/edit-table/basic/index.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import type { YEditTableColumn, YTableActionConfig } from '@yss-ui/components';
+import { YButton, YEditTable } from '@yss-ui/components';
+import { ref } from 'vue';
+
+defineOptions({ name: 'DemoEditTableBasic' });
+
+const tableRef = ref<any>();
+const data = ref<any[]>([
+  { name: '张三', age: 18, status: '1' },
+  { name: '李四', age: 25, status: '0' },
+]);
+
+const columns: YEditTableColumn[] = [
+  {
+    title: '姓名',
+    field: 'name',
+    component: 'form-item-input',
+  },
+  {
+    title: '年龄',
+    field: 'age',
+    component: 'form-item-input-number',
+    props: { min: 0 },
+  },
+  {
+    title: '状态（字典翻译）',
+    field: 'status',
+    component: 'form-item-select',
+    isTransform: true,
+    props: { fieldNames: { label: 'dictName', value: 'dictValue' } },
+  },
+  {
+    title: '状态（行内写死）',
+    field: 'status2',
+    component: 'form-item-select',
+    options: [
+      { label: '已完成', value: '0' },
+      { label: '进行中', value: '1' },
+    ],
+  },
+  { type: 'action', title: '操作', width: 160 },
+];
+
+const tableConfig = { editConfig: { trigger: 'click', mode: 'row' }, size: 'small' };
+
+const optionsMap = {
+  status: [
+    { dictName: '已完成', dictValue: '0' },
+    { dictName: '进行中', dictValue: '1' },
+    { dictName: '未开始', dictValue: '2' },
+    { dictName: '已取消', dictValue: '3' },
+  ],
+};
+
+const actionConfig: YTableActionConfig = {
+  buttons: [
+    {
+      key: 'remove',
+      text: '删除',
+      type: 'link',
+      isConfirm: true,
+      confirmProps: { title: '是否删除此行？', needLoading: true },
+      clickFn: (scope: any, _btn: any, { close, hideLoading }: any) => onDelete(data, { scope, close, hideLoading }),
+    },
+  ],
+};
+
+const add = () => {
+  const item: any = {};
+  columns.forEach(c => c.field && (item[c.field] = ''));
+  data.value.push(item);
+};
+
+const onDelete = (listRef: { value: any[] }, payload: any) => {
+  const { scope, close, hideLoading } = payload || {};
+  const { rowIndex } = scope || {};
+  setTimeout(() => {
+    listRef.value.splice(rowIndex, 1);
+    hideLoading?.();
+    close?.();
+  }, 300);
+};
+</script>
+
+<template>
+  <div style="padding: 12px">
+    <div style="text-align: right; margin-bottom: 8px">
+      <YButton style="margin-left: 8px" @click="add">添 行</YButton>
+    </div>
+    <YEditTable
+      ref="tableRef"
+      v-model:data="data"
+      addable
+      :columns="columns"
+      :table-config="tableConfig"
+      :options-map="optionsMap"
+      :action-config="actionConfig"
+      @add="add"
+    />
+  </div>
+</template>
+
+<style scoped></style>

package/template/.cursor/skills/yss-ui/assets/demos/edit-table/big-data/index.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import type { YEditTableColumn, YTableActionConfig } from '@yss-ui/components';
+import { YEditTable } from '@yss-ui/components';
+import { ref } from 'vue';
+
+defineOptions({ name: 'DemoEditTableBigData' });
+
+const STATUS = [
+  { dictName: '已完成', dictValue: '0' },
+  { dictName: '进行中', dictValue: '1' },
+  { dictName: '未开始', dictValue: '2' },
+  { dictName: '已取消', dictValue: '3' },
+];
+
+const columns: YEditTableColumn[] = [
+  { title: '序号', field: 'id', width: 80, align: 'center' },
+  { title: '姓名', field: 'name', component: 'form-item-input', minWidth: 140 },
+  { title: '年龄', field: 'age', component: 'form-item-input-number', props: { min: 0 }, width: 120, align: 'right' },
+  {
+    title: '状态',
+    field: 'status',
+    component: 'form-item-select',
+    isTransform: true,
+    props: { fieldNames: { label: 'dictName', value: 'dictValue' } },
+    width: 160,
+  },
+  { title: '日期', field: 'date', component: 'form-item-date', props: { format: 'YYYY-MM-DD' }, width: 160 },
+  { type: 'action', title: '操作', width: 160 },
+];
+
+const optionsMap = { status: STATUS };
+
+const makeRow = (i: number) => ({
+  id: i + 1,
+  name: `用户${i + 1}`,
+  age: (i % 60) + 18,
+  status: `${i % STATUS.length}`,
+  date: `2024-10-${String((i % 28) + 1).padStart(2, '0')}`,
+});
+
+const data = ref<any[]>(Array.from({ length: 1000 }, (_, i) => makeRow(i)));
+
+const actionConfig: YTableActionConfig = {
+  buttons: [
+    {
+      key: 'remove',
+      text: '删除',
+      type: 'link',
+      isConfirm: true,
+      confirmProps: { title: '是否删除此行？', needLoading: true },
+      clickFn: (scope: any, _btn: any, { close, hideLoading }: any) => onDelete(data, { scope, close, hideLoading }),
+    },
+  ],
+};
+
+const onDelete = (listRef: { value: any[] }, payload: any) => {
+  const { scope, close, hideLoading } = payload || {};
+  const { rowIndex } = scope || {};
+  setTimeout(() => {
+    listRef.value.splice(rowIndex, 1);
+    hideLoading?.();
+    close?.();
+  }, 300);
+};
+</script>
+
+<template>
+  <div style="padding: 12px">
+    <YEditTable
+      v-model:data="data"
+      :columns="columns"
+      :table-config="{ editConfig: { trigger: 'click', mode: 'row' }, showOverflow: 'tooltip' }"
+      :options-map="optionsMap"
+      :max-height="480"
+      :pageable="false"
+      :action-config="actionConfig"
+    />
+  </div>
+  <div style="padding: 0 12px; color: #999">当前行数：{{ data.length }}（无分页，滚动查看）</div>
+</template>
+
+<style scoped></style>

package/template/.cursor/skills/yss-ui/assets/demos/edit-table/custom-rule/index.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { YButton, YEditTable, type YEditTableColumn, type YTableActionConfig } from '@yss-ui/components';
+import { ref } from 'vue';
+
+defineOptions({ name: 'DemoEditTableCustomRule' });
+
+const tableRef = ref<any>();
+const data = ref<any[]>([
+  { name: '张三', age: 19, sex: '1' },
+  { name: '李四', age: 28, sex: '0' },
+]);
+
+const columns: YEditTableColumn[] = [
+  {
+    title: '姓名',
+    field: 'name',
+    component: 'form-item-input',
+    customRule: (value: string, _row: any, field: string, tableData: any[]) => {
+      const label = '姓名';
+      const val = (value || '').trim();
+      if (!val) return { errMsg: `${label}不能为空` };
+      if (val.length < 6) return { errMsg: `最小为 6 位` };
+      if (val.length > 20) return { errMsg: `${label}不能超过20个字符` };
+      const dup = tableData.filter(r => r?.[field] === val);
+      if (dup.length > 1) return { errMsg: `${label}不能重复` };
+      return { errMsg: '' };
+    },
+  },
+  { title: '年龄', field: 'age', component: 'form-item-input-number', props: { min: 0 } },
+  {
+    title: '性别',
+    field: 'sex',
+    component: 'form-item-select',
+    isTransform: true,
+    props: { fieldNames: { label: 'dictName', value: 'dictValue' } },
+  },
+  { type: 'action', title: '操作', width: 160 },
+];
+
+const tableConfig = {
+  editConfig: { trigger: 'click', mode: 'row' },
+  cellConfig: { height: 42 },
+  editRules: { sex: [{ required: true }] },
+};
+
+const optionsMap = {
+  sex: [
+    { dictName: '男', dictValue: '1' },
+    { dictName: '女', dictValue: '0' },
+  ],
+};
+
+const add = () => {
+  const item: any = {};
+  columns.forEach(c => c.field && (item[c.field] = ''));
+  data.value.push(item);
+};
+
+const verify = async () => {
+  if (!tableRef.value) {
+    return alert('表格组件未正确挂载');
+  }
+  const { valid, errorMsg } = (await tableRef.value?.validate()) ?? {};
+  if (!valid) {
+    const msg = (errorMsg as Map<string, string>).values()?.next()?.value;
+    return alert(msg ?? '校验失败');
+  }
+  alert('校验成功');
+};
+
+const actionConfig: YTableActionConfig = {
+  buttons: [
+    {
+      key: 'remove',
+      text: '删除',
+      type: 'link',
+      isConfirm: true,
+      confirmProps: { title: '是否删除此行？', needLoading: true },
+      clickFn: (scope: any, _btn: any, { close, hideLoading }: any) => onDelete(data, { scope, close, hideLoading }),
+    },
+  ],
+};
+
+const onDelete = (listRef: { value: any[] }, payload: any) => {
+  const { scope, close, hideLoading } = payload || {};
+  const { rowIndex } = scope || {};
+  setTimeout(() => {
+    listRef.value.splice(rowIndex, 1);
+    hideLoading?.();
+    close?.();
+  }, 300);
+};
+</script>
+
+<template>
+  <div style="padding: 12px">
+    <div style="text-align: right; margin-bottom: 8px">
+      <YButton type="primary" @click="verify">触发校验</YButton>
+      <YButton style="margin-left: 8px" @click="add">添 行</YButton>
+    </div>
+    <YEditTable
+      ref="tableRef"
+      v-model:data="data"
+      addable
+      :columns="columns"
+      :table-config="tableConfig"
+      :options-map="optionsMap"
+      :action-config="actionConfig"
+      @add="add"
+    />
+  </div>
+</template>
+
+<style scoped></style>

package/template/.cursor/skills/yss-ui/assets/demos/edit-table/direct-editable/index.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import type { YEditTableColumn, YTableActionConfig } from '@yss-ui/components';
+import { YEditTable } from '@yss-ui/components';
+import {
+  Collapse as ACollapse,
+  CollapsePanel as ACollapsePanel,
+  Input as AInput,
+  InputNumber as AInputNumber,
+  Select as ASelect,
+} from 'ant-design-vue';
+import { ref } from 'vue';
+
+defineOptions({ name: 'DemoEditTableDirectEditable' });
+
+const data = ref<any[]>([{ name: '张三', age: 18, status: '1' }]);
+
+const columns: YEditTableColumn[] = [
+  { title: '姓名', field: 'name' },
+  { title: '年龄', field: 'age' },
+  { title: '状态', field: 'status' },
+  { type: 'action', title: '操作', width: 160 },
+];
+
+const statusOptions = [
+  { dictName: '已完成', dictValue: '0' },
+  { dictName: '进行中', dictValue: '1' },
+  { dictName: '未开始', dictValue: '2' },
+  { dictName: '已取消', dictValue: '3' },
+];
+
+const add = () => {
+  const r: any = {};
+  columns.forEach(c => c.field && (r[c.field] = ''));
+  data.value.push(r);
+};
+
+const actionConfig: YTableActionConfig = {
+  buttons: [
+    {
+      key: 'remove',
+      text: '删除',
+      type: 'link',
+      isConfirm: true,
+      confirmProps: { title: '是否删除此行？', needLoading: true },
+      clickFn: (scope: any, _btn: any, { close, hideLoading }: any) => onDelete(data, { scope, close, hideLoading }),
+    },
+  ],
+};
+
+const onDelete = (listRef: { value: any[] }, payload: any) => {
+  const { scope, close, hideLoading } = payload || {};
+  const { rowIndex } = scope || {};
+  setTimeout(() => {
+    listRef.value.splice(rowIndex, 1);
+    hideLoading?.();
+    close?.();
+  }, 300);
+};
+</script>
+
+<template>
+  <div style="padding: 12px">
+    <YEditTable v-model:data="data" :columns="columns" :action-config="actionConfig" addable @add="add">
+      <!-- 全部单元格直接可编辑：使用字段插槽在查看态渲染输入控件 -->
+      <template #name="{ row }">
+        <a-input v-model:value="row.name" placeholder="请输入" />
+      </template>
+      <template #age="{ row }">
+        <a-input-number v-model:value="row.age" :min="0" style="width: 100%" placeholder="请输入" />
+      </template>
+      <template #status="{ row }">
+        <a-select
+          v-model:value="row.status"
+          :options="statusOptions"
+          :field-names="{ label: 'dictName', value: 'dictValue' }"
+          show-search
+          allow-clear
+          style="width: 100%"
+        />
+      </template>
+    </YEditTable>
+  </div>
+  <div style="padding: 12px 12px 0; color: #999">提示：点击任意单元格直接进入编辑。</div>
+  <a-collapse v-if="data" style="margin-top: 12px">
+    <a-collapse-panel key="data" header="查看数据">
+      <div style="padding: 12px; border: 1px dashed #d9d9d9; border-radius: 4px">
+        <div style="color: #999; margin-bottom: 6px">已保存的数据：</div>
+        <pre style="margin: 0; white-space: pre-wrap">{{ JSON.stringify(data, null, 2) }}</pre>
+      </div>
+    </a-collapse-panel>
+  </a-collapse>
+</template>
+
+<style scoped></style>

package/template/.cursor/skills/yss-ui/assets/demos/edit-table/drag/index.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import type { YEditTableColumn, YTableActionConfig } from '@yss-ui/components';
+import { YEditTable } from '@yss-ui/components';
+import { ref } from 'vue';
+
+defineOptions({ name: 'DemoEditTableDrag' });
+
+const tableRef = ref<any>();
+const data = ref<any[]>([
+  { name: '张三', age: 18, sex: '1' },
+  { name: '李四', age: 26, sex: '0' },
+]);
+
+const columns: YEditTableColumn[] = [
+  { title: '姓名', field: 'name', component: 'form-item-input' },
+  { title: '年龄', field: 'age', component: 'form-item-input-number', props: { min: 0 } },
+  {
+    title: '性别',
+    field: 'sex',
+    component: 'form-item-select',
+    isTransform: true,
+    props: { fieldNames: { label: 'dictName', value: 'dictValue' } },
+  },
+  { type: 'action', title: '操作', width: 160 },
+];
+
+const columns2: YEditTableColumn[] = [
+  { title: '姓名', field: 'name', component: 'form-item-input', dragSort: true },
+  { title: '年龄', field: 'age', component: 'form-item-input-number', props: { min: 0 } },
+  {
+    title: '性别',
+    field: 'sex',
+    component: 'form-item-select',
+    isTransform: true,
+    props: { fieldNames: { label: 'dictName', value: 'dictValue' } },
+  },
+  { type: 'action', title: '操作', width: 160 },
+];
+
+const tableConfig = { editConfig: { trigger: 'click', mode: 'row' } };
+
+const optionsMap = {
+  sex: [
+    { dictName: '男', dictValue: '1' },
+    { dictName: '女', dictValue: '0' },
+  ],
+};
+
+const add = () => {
+  const item: any = {};
+  columns.forEach(c => c.field && (item[c.field] = ''));
+  data.value.push(item);
+};
+
+const actionConfig: YTableActionConfig = {
+  buttons: [
+    {
+      key: 'remove',
+      text: '删除',
+      type: 'link',
+      isConfirm: true,
+      confirmProps: { title: '是否删除此行？', needLoading: true },
+      clickFn: (scope: any, _btn: any, { close, hideLoading }: any) => onDelete(data, { scope, close, hideLoading }),
+    },
+  ],
+};
+
+const onDelete = (listRef: { value: any[] }, payload: any) => {
+  const { scope, close, hideLoading } = payload || {};
+  const { rowIndex } = scope || {};
+  setTimeout(() => {
+    listRef.value.splice(rowIndex, 1);
+    hideLoading?.();
+    close?.();
+  }, 300);
+};
+</script>
+
+<template>
+  <div style="padding: 12px">
+    <YEditTable
+      ref="tableRef"
+      v-model:data="data"
+      addable
+      row-dragable
+      :columns="columns"
+      :table-config="tableConfig"
+      :options-map="optionsMap"
+      :action-config="actionConfig"
+      @add="add"
+    />
+
+    <!-- 不显示拖拽把手 -->
+    <YEditTable
+      ref="tableRef"
+      v-model:data="data"
+      addable
+      row-dragable
+      :show-drag-handle="false"
+      :drag-handle-width="0"
+      :columns="columns2"
+      :table-config="tableConfig"
+      :options-map="optionsMap"
+      :action-config="actionConfig"
+      @add="add"
+    />
+
+    <!-- 拖拽把手在右边 -->
+    <YEditTable
+      ref="tableRef"
+      v-model:data="data"
+      addable
+      row-dragable
+      :show-drag-handle="true"
+      drag-handle-placement="right"
+      :columns="columns2"
+      :table-config="tableConfig"
+      :options-map="optionsMap"
+      :action-config="actionConfig"
+      @add="add"
+    />
+  </div>
+</template>
+
+<style scoped></style>

package/template/.cursor/skills/yss-ui/assets/demos/edit-table/filter/index.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { YButton, YEditTable, type YEditTableColumn, type YTableActionConfig } from '@yss-ui/components';
+import { ref } from 'vue';
+
+defineOptions({ name: 'DemoEditTableFilter' });
+
+const tableRef = ref<any>();
+const data = ref<any[]>([
+  { name: '1', age: 18, sex: '1' },
+  { name: '2', age: 26, sex: '0' },
+]);
+
+const optionsMap = {
+  sex: [
+    { dictName: '男', dictValue: '1' },
+    { dictName: '女', dictValue: '0' },
+  ],
+  name: [
+    { label: '张三', value: '1' },
+    { label: '李四', value: '2' },
+    { label: '王五', value: '3' },
+    { label: '赵六', value: '4' },
+  ],
+};
+
+const columns: YEditTableColumn[] = [
+  {
+    title: '姓名',
+    field: 'name',
+    component: 'form-item-select',
+    isTransform: true,
+    props: { fieldNames: { label: 'label', value: 'value' } },
+    filterOptions: ({ field, optionsMap, row }: any) => {
+      const all = optionsMap?.[field] || [];
+      const selected = (data.value || []).reduce((acc: any[], item: any) => {
+        if (!item?.[field] || item === row) return acc;
+        acc.push(item[field]);
+        return acc;
+      }, []);
+      return all.filter((opt: any) => !selected.includes(opt.value));
+    },
+  },
+  { title: '年龄', field: 'age', component: 'form-item-input-number', props: { min: 0 } },
+  {
+    title: '性别',
+    field: 'sex',
+    component: 'form-item-select',
+    isTransform: true,
+    props: { fieldNames: { label: 'dictName', value: 'dictValue' } },
+  },
+  { type: 'action', title: '操作', width: 160 },
+];
+
+const tableConfig = {
+  editConfig: { trigger: 'click', mode: 'row' },
+  editRules: { name: [{ required: true }], sex: [{ required: true }] },
+};
+
+const add = () => {
+  const item: any = {};
+  columns.forEach(c => c.field && (item[c.field] = ''));
+  data.value.push(item);
+};
+
+const actionConfig: YTableActionConfig = {
+  buttons: [
+    {
+      key: 'remove',
+      text: '删除',
+      type: 'link',
+      isConfirm: true,
+      confirmProps: { title: '是否删除此行？', needLoading: true },
+      clickFn: (scope: any, _btn: any, { close, hideLoading }: any) => onDelete(data, { scope, close, hideLoading }),
+    },
+  ],
+};
+
+const onDelete = (listRef: { value: any[] }, payload: any) => {
+  const { scope, close, hideLoading } = payload || {};
+  const { rowIndex } = scope || {};
+  setTimeout(() => {
+    listRef.value.splice(rowIndex, 1);
+    hideLoading?.();
+    close?.();
+  }, 300);
+};
+</script>
+
+<template>
+  <div style="padding: 12px">
+    <div style="text-align: right; margin-bottom: 8px">
+      <YButton @click="add">添 行</YButton>
+    </div>
+    <YEditTable
+      ref="tableRef"
+      v-model:data="data"
+      addable
+      :columns="columns"
+      :table-config="tableConfig"
+      :options-map="optionsMap"
+      :action-config="actionConfig"
+      @add="add"
+    />
+  </div>
+</template>
+
+<style scoped></style>