vue-super-crud 1.7.1 → 1.7.4

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

@@ -1,123 +0,0 @@
-<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

@@ -1,124 +0,0 @@
-<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

@@ -1,148 +0,0 @@
-<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

@@ -1,47 +0,0 @@
-<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

@@ -1,94 +0,0 @@
-<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

@@ -1,64 +0,0 @@
-<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

@@ -1,69 +0,0 @@
-<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>