vue-super-crud 1.7.1

package/docs/.vuepress/components/crud/search/base.vue

@@ -0,0 +1,123 @@
+<template>
+  <div>
+    <div style="margin-bottom: 10px;">
+      搜索参数:
+      <div>{{ JSON.stringify(search) }}</div>
+    </div>
+    <sc-crud
+      :loading.sync="loading"
+      :search.sync="search"
+      :options="options"
+      :data="data"
+      :total="total"
+      @getList="getList"
+    >
+    </sc-crud>
+  </div>
+</template>
+
+<script>
+import { mockApi } from "../../mock";
+export default {
+  data() {
+    return {
+      loading: false,
+      search: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      options: {
+        border: true,
+        init: true,
+        expandSearch: true, // 初始展开搜索框
+        renderColumns: [
+          {
+            prop: "name",
+            label: "姓名",
+            search: true, // 启用搜索
+          },
+          {
+            prop: "gender",
+            label: "性别",
+            search: {
+              comp: {
+                name: "el-select", // 使用下拉选择
+                options: [
+                  { label: "男", value: "男" },
+                  { label: "女", value: "女" },
+                ],
+              },
+              reset: () => {
+                console.log("重置事件");
+              },
+            },
+          },
+          {
+            prop: "age",
+            label: "年龄",
+          },
+          {
+            prop: "is30",
+            label: "大于30",
+            search: {
+              comp: {
+                name: "el-select",
+                options: [
+                  { label: "是", value: "是" },
+                  { label: "否", value: "否" },
+                ],
+              },
+            },
+          },
+          {
+            prop: "city",
+            label: "城市",
+            search: {
+              comp: {
+                name: "el-select",
+                options: [
+                  { label: "北京", value: "北京" },
+                  { label: "上海", value: "上海" },
+                  { label: "广州", value: "广州" },
+                ],
+              },
+            },
+          },
+          {
+            prop: "date",
+            label: "日期",
+            search: {
+              comp: {
+                name: "el-date-picker",
+                type: "daterange",
+                startPlaceholder: "开始日期",
+                endPlaceholder: "结束日期",
+                valueFormat: "yyyy-MM-dd",
+              },
+            },
+          },
+        ],
+        searchForm: {
+          columnWidth: "220px",
+          labelWidth: "80px",
+        },
+      },
+      data: [],
+      total: 0,
+    };
+  },
+
+  methods: {
+    async getList() {
+      this.loading = true;
+      try {
+        const { data, total } = await mockApi.getList(this.search);
+        this.data = data;
+        this.total = total;
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+};
+</script>

package/docs/.vuepress/components/crud/search/localSearch.vue

@@ -0,0 +1,124 @@
+<template>
+  <div>
+    <div style="margin-bottom: 10px;">
+      搜索参数:
+      <div>{{ JSON.stringify(search) }}</div>
+    </div>
+    <sc-crud
+      :loading.sync="loading"
+      :search.sync="search"
+      :options="options"
+      :data="data"
+      :total="total"
+      @getList="getList"
+    >
+    </sc-crud>
+  </div>
+</template>
+
+<script>
+import { mockApi } from "../../mock";
+export default {
+  data() {
+    return {
+      loading: false,
+      search: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      options: {
+        border: true,
+        init: true,
+        expandSearch: true, // 初始展开搜索框
+        localSearch: true, // 启用本地搜索
+        renderColumns: [
+          {
+            prop: "name",
+            label: "姓名",
+            search: true, // 启用搜索
+          },
+          {
+            prop: "gender",
+            label: "性别",
+            search: {
+              comp: {
+                name: "el-select", // 使用下拉选择
+                options: [
+                  { label: "男", value: "男" },
+                  { label: "女", value: "女" },
+                ],
+              },
+            },
+          },
+          {
+            prop: "age",
+            label: "年龄",
+            search: {
+              filter: (cellValue, searchValue, row) => {
+                console.log(cellValue, searchValue, row);
+                // 返回 true 表示匹配，false 表示不匹配
+                return cellValue > 30;
+              },
+            },
+          },
+          {
+            prop: "is30",
+            label: "大于30",
+            search: {
+              comp: {
+                name: "el-select",
+                options: [
+                  { label: "是", value: "是" },
+                  { label: "否", value: "否" },
+                ],
+              },
+            },
+          },
+          {
+            prop: "city",
+            label: "城市",
+            search: {
+              comp: {
+                name: "el-select",
+                options: [
+                  { label: "北京", value: "北京" },
+                  { label: "上海", value: "上海" },
+                  { label: "广州", value: "广州" },
+                ],
+              },
+            },
+          },
+          {
+            prop: "date",
+            label: "日期",
+            search: {
+              comp: {
+                name: "el-date-picker",
+                type: "daterange",
+                startPlaceholder: "开始日期",
+                endPlaceholder: "结束日期",
+                valueFormat: "yyyy-MM-dd",
+              },
+            },
+          },
+        ],
+      },
+      data: [],
+      total: 0,
+    };
+  },
+
+  methods: {
+    async getList() {
+      this.loading = true;
+      try {
+        const { data, total } = await mockApi.getList(this.search);
+        this.data = data;
+        this.total = total;
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+};
+</script>

package/docs/.vuepress/components/crud/search/special.vue

@@ -0,0 +1,148 @@
+<template>
+  <div>
+    <div style="margin-bottom: 15px;">搜索参数：{{ search }}</div>
+    <sc-crud
+      :loading.sync="loading"
+      :search.sync="search"
+      :options="options"
+      :data="data"
+      :total="total"
+      @getList="getList"
+    >
+      <!-- 自定义城市搜索组件 -->
+      <template #city-search>
+        <el-cascader
+          v-model="search.city"
+          :options="cityTreeData"
+          :props="{ checkStrictly: true }"
+          clearable
+        ></el-cascader>
+      </template>
+
+      <!-- 自定义年龄搜索标题 -->
+      <template #age-search-label>
+        <span>自定义年龄搜索标题 <i class="el-icon-warning"></i></span>
+      </template>
+
+      <!-- 自定义搜索头 -->
+      <template #date-searchHeader>
+        <div>
+          自定义搜索头
+        </div>
+      </template>
+    </sc-crud>
+  </div>
+</template>
+
+<script>
+import { mockApi, cityTreeData } from "../../mock";
+
+export default {
+  data() {
+    return {
+      loading: false,
+      cityTreeData,
+      search: {
+        pageNum: 1,
+        pageSize: 10,
+        city: [],
+        status: "",
+      },
+      options: {
+        border: true,
+        init: true,
+        expandSearch: true,
+        // 搜索表单配置
+        searchForm: {
+          columnWidth: "300px",
+          labelWidth: "100px",
+          // 自定义操作按钮
+          action: {
+            search: {
+              label: "查询",
+              icon: "el-icon-search",
+            },
+            reset: {
+              label: "清空",
+              icon: "el-icon-delete",
+            },
+            handles: [
+              {
+                label: "导出搜索结果",
+                icon: "el-icon-download",
+                type: "success",
+                onClick: (search) => {
+                  console.log("导出搜索条件：", search);
+                },
+              },
+            ],
+          },
+        },
+        // 表头搜索配置
+        searchHeader: {
+          trigger: "click",
+          placement: "bottom",
+        },
+        renderColumns: [
+          {
+            prop: "name",
+            label: "姓名",
+            search: {
+              // 自定义渲染函数
+              labelRender: () => (
+                <span>
+                  自定义姓名标题 <i class="el-icon-warning"></i>
+                </span>
+              ),
+            },
+          },
+          {
+            prop: "age",
+            label: "年龄",
+            search: true,
+          },
+          {
+            prop: "city",
+            label: "城市",
+            search: true, // 使用插槽自定义
+          },
+          {
+            prop: "status",
+            label: "状态",
+            search: {
+              comp: {
+                name: "el-radio-group",
+                options: [
+                  { label: "全部", value: "" },
+                  { label: "启用", value: 1 },
+                  { label: "禁用", value: 0 },
+                ],
+              },
+            },
+          },
+          {
+            prop: "date",
+            label: "测试",
+            search: true,
+          },
+        ],
+      },
+      data: [],
+      total: 0,
+    };
+  },
+
+  methods: {
+    async getList() {
+      this.loading = true;
+      try {
+        const { data, total } = await mockApi.getList(this.search);
+        this.data = data;
+        this.total = total;
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+};
+</script>

package/docs/.vuepress/components/crud/selection/events.vue

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <sc-crud
+      :selected="selectedRows"
+      :options="options"
+      :data="data"
+      @selection-change="handleSelectionChange"
+      @select="handleSelect"
+      @select-all="handleSelectAll"
+    >
+    </sc-crud>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      selectedRows: [],
+      options: {
+        selection: true,
+        renderColumns: [
+          { prop: "name", label: "姓名" },
+          { prop: "gender", label: "性别" },
+        ],
+      },
+      data: [
+        { id: 1, name: "张三", gender: "男" },
+        { id: 2, name: "李四", gender: "女" },
+      ],
+    };
+  },
+  methods: {
+    handleSelectionChange(selection) {
+      this.$message.success(`选中 ${selection.length} 条数据`);
+    },
+    handleSelect(selection, row) {
+      this.$message.info(
+        `${row.name} ${selection.includes(row) ? "被选中" : "取消选中"}`
+      );
+    },
+    handleSelectAll(selection) {
+      this.$message.info(`${selection.length ? "全选" : "取消全选"}`);
+    },
+  },
+};
+</script>

package/docs/.vuepress/components/crud/selection/pagination.vue

@@ -0,0 +1,94 @@
+<template>
+  <div>
+    <el-button @click="handleClick">手动更新选中数据</el-button>
+    <sc-crud
+      :loading.sync="loading"
+      :search.sync="search"
+      :selected.sync="selectedRows"
+      :options="options"
+      :data="data"
+      :total="total"
+      @getList="getList"
+    >
+    </sc-crud>
+  </div>
+</template>
+
+<script>
+import { mockApi } from "../../mock";
+export default {
+  data() {
+    return {
+      loading: false,
+      selectedRows: [
+        {
+          id: 1,
+        },
+        {
+          id: 2,
+        },
+        {
+          id: 3,
+        },
+        {
+          id: 8,
+        },
+        {
+          id: 7,
+        },
+      ],
+      search: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      options: {
+        selection: {
+          reserveSelection: true, // 是否保留选中状态
+          ctrlSelect: true, // 是否启用 Ctrl 键点击选中
+          shiftSelect: true, // 是否启用 Shift 键批量选中
+          banner: true, // 是否显示横幅
+          maxDisplay: 3, // 直接显示的最大数量
+          labelKey: "name", // 显示的字段名
+          clear: true, // 是否显示清除按钮
+          selectable: (row, index) => {
+            return index !== 0 && index !== 7;
+          },
+        },
+        init: true,
+        renderColumns: [
+          { prop: "name", label: "姓名" },
+          { prop: "gender", label: "性别" },
+          { prop: "age", label: "年龄" },
+          { prop: "city", label: "城市" },
+        ],
+      },
+      data: [],
+      total: 0,
+    };
+  },
+  computed: {
+    selectedNames() {
+      return this.selectedRows.map((row) => row.name).join("、");
+    },
+  },
+  methods: {
+    async getList() {
+      this.loading = true;
+      const { data, total } = await mockApi.getList(this.search);
+      this.data = data;
+      this.total = total;
+      this.loading = false;
+    },
+    handleClick() {
+      this.selectedRows = [
+        {
+          id: 1,
+        },
+        {
+          id: 3,
+        },
+      ];
+    },
+  },
+};
+</script>

package/docs/.vuepress/components/crud/selection/singleSelection.vue

@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <sc-crud
+      :loading.sync="loading"
+      :search.sync="search"
+      :selected.sync="selectedRows"
+      :options="options"
+      :data="data"
+      :total="total"
+      @getList="getList"
+    >
+    </sc-crud>
+  </div>
+</template>
+
+<script>
+import { mockApi } from "../../mock";
+export default {
+  data() {
+    return {
+      loading: false,
+      selectedRows: {
+        id: 2,
+      },
+      search: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      options: {
+        singleSelection: {
+          banner: true,
+          ctrlSelect: true,
+          selectable: (row, index) => {
+            return index !== 0;
+          },
+        },
+        init: true,
+        renderColumns: [
+          { prop: "name", label: "姓名" },
+          { prop: "gender", label: "性别" },
+          { prop: "age", label: "年龄" },
+          { prop: "city", label: "城市" },
+        ],
+      },
+      data: [],
+      total: 0,
+    };
+  },
+  computed: {
+    selectedNames() {
+      return this.selectedRows.map((row) => row.name).join("、");
+    },
+  },
+  methods: {
+    async getList() {
+      this.loading = true;
+      const { data, total } = await mockApi.getList(this.search);
+      this.data = data;
+      this.total = total;
+      this.loading = false;
+    },
+  },
+};
+</script>

package/docs/.vuepress/components/crud/span/base.vue

@@ -0,0 +1,69 @@
+<template>
+  <sc-crud
+    :loading.sync="loading"
+    :search.sync="search"
+    :options="options"
+    :data="data"
+    :total="total"
+    @getList="getList"
+  >
+  </sc-crud>
+</template>
+
+<script>
+import { mockApi } from "../../mock";
+export default {
+  data() {
+    return {
+      loading: false,
+      search: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      options: {
+        border: true,
+        init: true,
+        renderColumns: [
+          {
+            prop: "city",
+            label: "城市",
+            spanProp: "city", // 开启该列合并
+          },
+          {
+            prop: "gender",
+            label: "性别",
+            spanProp: "gender", // 开启该列合并
+          },
+          {
+            prop: "age",
+            label: "年龄",
+          },
+          {
+            prop: "is30",
+            label: "大于30",
+            spanProp: "is30",
+          },
+          { prop: "name", label: "姓名" },
+        ],
+        showSummary: true, // 启用合计行
+      },
+      data: [],
+      total: 0,
+    };
+  },
+
+  methods: {
+    async getList() {
+      this.loading = true;
+      try {
+        const { data, total } = await mockApi.getList(this.search);
+        // 根据当前排序字段对数据进行排序
+        this.data = [...data];
+        this.total = total;
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+};
+</script>