vue-super-crud 1.7.1

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

@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <h3>选中数据：{{ JSON.stringify(selected) }}</h3>
+    <sc-crud
+      :loading.sync="loading"
+      :search.sync="search"
+      :selected.sync="selected"
+      :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: 15,
+      },
+      selected: [],
+      options: {
+        border: true,
+        init: true,
+        selection: {
+          banner: true,
+          reserveSelection: true,
+          spanProp: "city", // 开启该列合并
+        },
+        index: {
+          label: "序号",
+          spanProp: "gender",
+        },
+        renderColumns: [
+          {
+            prop: "city",
+            label: "城市",
+            spanProp: "city", // 开启该列合并
+          },
+          {
+            prop: "gender",
+            label: "性别",
+            spanProp: "gender", // 开启该列合并
+          },
+          {
+            prop: "age",
+            label: "年龄",
+          },
+        ],
+        showSummary: true, // 启用合计行
+      },
+      data: [],
+      total: 0,
+    };
+  },
+
+  methods: {
+    async getList() {
+      this.loading = true;
+      try {
+        const { data } = await mockApi.getList(this.search);
+        this.data = data;
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,99 @@
+<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,
+        showSummary: true, // 启用统计行
+        renderColumns: [
+          {
+            prop: "amount",
+            label: "金额",
+            summary: {
+              type: "sum",
+              prefix: "¥",
+              suffix: "元",
+              decimals: 2,
+              ignoreZero: true, // 忽略0值
+            },
+          },
+          {
+            prop: "score",
+            label: "得分",
+            summary: {
+              type: "avg",
+              decimals: 1,
+              suffix: "分",
+            },
+          },
+          {
+            prop: "status",
+            label: "状态统计",
+            summary: {
+              type: "count",
+              predicate: (value) => value === "active",
+              suffix: "个活跃",
+            },
+          },
+          {
+            prop: "nested.sales",
+            label: "销售额",
+            summary: {
+              type: "custom",
+              path: "nested.sales",
+              method: (values, data) => {
+                // 自定义统计逻辑
+                const total = values.reduce((sum, val) => sum + val, 0);
+                return total;
+              },
+            },
+          },
+        ],
+      },
+      data: [],
+      total: 0,
+    };
+  },
+
+  methods: {
+    async getList() {
+      this.loading = true;
+      try {
+        const { data, total } = await mockApi.getList(this.search);
+        this.data = data.map((item) => ({
+          ...item,
+          amount: Math.floor(Math.random() * 100),
+          score: Math.floor(Math.random() * 100),
+          status: Math.random() > 0.5 ? "active" : "inactive",
+          nested: {
+            sales: Math.floor(Math.random() * 100),
+          },
+        }));
+        this.total = total;
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+};
+</script>

package/docs/.vuepress/components/crud/tableEdit/addDeleteBtn.vue

@@ -0,0 +1,174 @@
+<template>
+  <div>
+    <sc-crud
+      :search.sync="searchForm"
+      :options="options"
+      :data="data"
+      @add="add"
+      @delete="handleDelete"
+      @batchDelete="handleBatchDelete"
+    >
+    </sc-crud>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      searchForm: {},
+      data: [
+        {
+          id: 1,
+          name: "张三",
+          gender: "男",
+          age: 20,
+          city: "北京",
+          date: "2021-01-01",
+        },
+        {
+          id: 2,
+          name: "李四",
+          gender: "女",
+          age: 21,
+          city: "上海",
+          date: "2021-01-02",
+        },
+        {
+          id: 3,
+          name: "王五",
+          gender: "男",
+          age: 22,
+          city: "广州",
+          date: "2021-01-03",
+        },
+        {
+          id: 4,
+          name: "赵六",
+          gender: "女",
+          age: 23,
+          city: "深圳",
+          date: "2021-01-04",
+        },
+        {
+          id: 5,
+          name: "孙七",
+          gender: "男",
+          age: 24,
+          city: "成都",
+          date: "2021-01-05",
+        },
+        {
+          id: 6,
+          name: "周八",
+          gender: "女",
+          age: 25,
+          city: "重庆",
+          date: "2021-01-06",
+        },
+      ],
+    };
+  },
+  computed: {
+    options() {
+      return {
+        selection: true,
+        editConfig: {
+          mode: "row",
+          edit: {},
+          add: {
+            addType: "last",
+          },
+          lastAdd: {},
+          delete: {
+            confirm: (scope) => `是否删除序号为${scope.$index + 1}的数据？`, // 删除提示
+          },
+          batchDelete: {
+            confirm: (rows) =>
+              `是否删除序号为${rows
+                .map((row) => row.$index + 1)
+                .join(",")}的数据？`, // 删除提示
+          },
+        },
+        renderColumns: [
+          {
+            prop: "name",
+            label: "姓名",
+          },
+          {
+            prop: "gender",
+            label: "性别",
+            form: {
+              comp: {
+                name: "el-select",
+                options: [
+                  { value: "男", label: "男" },
+                  { value: "女", label: "女" },
+                ],
+              },
+            },
+          },
+          {
+            prop: "age",
+            label: "年龄",
+            form: {
+              comp: {
+                name: "el-select",
+                options: [
+                  { value: 20, label: "20" },
+                  { value: 21, label: "21" },
+                  { value: 22, label: "22" },
+                  { value: 23, label: "23" },
+                ],
+              },
+            },
+          },
+          {
+            prop: "city",
+            label: "城市",
+            form: {
+              comp: {
+                name: "el-select",
+                options: [
+                  { value: "北京", label: "北京" },
+                  { value: "上海", label: "上海" },
+                  { value: "广州", label: "广州" },
+                  { value: "深圳", label: "深圳" },
+                ],
+              },
+            },
+          },
+          {
+            prop: "date",
+            label: "日期",
+            form: {
+              comp: {
+                name: "el-date-picker",
+                props: {
+                  type: "date",
+                  placeholder: "选择日期",
+                  valueFormat: "yyyy-MM-dd",
+                },
+              },
+            },
+          },
+        ],
+      };
+    },
+  },
+  methods: {
+    add(done, scope) {
+      console.log("add", scope);
+      done();
+    },
+    handleDelete(done, scope) {
+      console.log("handleDelete", scope);
+      done();
+    },
+    handleBatchDelete(done, rows) {
+      console.log("handleBatchDelete", rows);
+      done();
+    },
+  },
+};
+</script>

package/docs/.vuepress/components/crud/tableEdit/cellEdit.vue

@@ -0,0 +1,194 @@
+<template>
+  <div>
+    <sc-crud
+      :search.sync="searchForm"
+      :options="options"
+      :data="data"
+      @edit="edit"
+      @save="save"
+    >
+    </sc-crud>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      searchForm: {},
+      data: [
+        {
+          id: 1,
+          name: "张三",
+          gender: "男",
+          age: 20,
+          city: "北京",
+          date: "2021-01-01",
+          time: "12:00:00",
+          datetime: "2021-01-01 12:00:00",
+          color: "#409EFF",
+          switch: true,
+          rate: 3,
+          slider: 50,
+          radio: "1",
+          checkbox: ["1"],
+          select: "1",
+          cascader: ["1", "1-1"],
+          textarea: "这是一段文本",
+          number: 100,
+        },
+        {
+          id: 2,
+          name: "李四",
+          gender: "女",
+          age: 21,
+          city: "上海",
+          date: "2021-01-02",
+          time: "13:00:00",
+          datetime: "2021-01-02 13:00:00",
+          color: "#67C23A",
+          switch: false,
+          rate: 4,
+          slider: 30,
+          radio: "2",
+          checkbox: ["2"],
+          select: "2",
+          cascader: ["2", "2-1"],
+          textarea: "这是另一段文本",
+          number: 200,
+        },
+        {
+          id: 3,
+          name: "王五",
+          gender: "男",
+          age: 22,
+          city: "广州",
+          date: "2021-01-03",
+          time: "14:00:00",
+          datetime: "2021-01-03 14:00:00",
+          color: "#E6A23C",
+          switch: true,
+          rate: 5,
+        },
+        {
+          id: 4,
+          name: "赵六",
+          gender: "女",
+          age: 23,
+          city: "深圳",
+          date: "2021-01-04",
+          time: "15:00:00",
+          datetime: "2021-01-04 15:00:00",
+          color: "#F56C6C",
+          switch: false,
+          rate: 2,
+        },
+      ],
+      isEdit: true,
+    };
+  },
+  computed: {
+    options() {
+      return {
+        editConfig: {
+          mode: "cell",
+          autofocus: true,
+        },
+        renderColumns: [
+          { prop: "name", label: "输入框", required: true },
+          {
+            prop: "select",
+            label: "选择器",
+            form: {
+              comp: {
+                name: "el-select",
+                options: [
+                  { value: "1", label: "选项1" },
+                  { value: "2", label: "选项2" },
+                ],
+              },
+            },
+          },
+          {
+            prop: "cascader",
+            label: "级联选择器",
+            form: {
+              comp: {
+                name: "el-cascader",
+                options: [
+                  {
+                    value: "1",
+                    label: "选项1",
+                    children: [
+                      { value: "1-1", label: "选项1-1" },
+                      { value: "1-2", label: "选项1-2" },
+                    ],
+                  },
+                  {
+                    value: "2",
+                    label: "选项2",
+                    children: [
+                      { value: "2-1", label: "选项2-1" },
+                      { value: "2-2", label: "选项2-2" },
+                    ],
+                  },
+                ],
+              },
+            },
+          },
+          {
+            prop: "date",
+            label: "日期选择器",
+            form: {
+              comp: {
+                name: "el-date-picker",
+                "value-format": "yyyy-MM-dd",
+              },
+            },
+          },
+          {
+            prop: "time",
+            label: "时间选择器",
+            form: {
+              comp: {
+                name: "el-time-picker",
+                "value-format": "HH:mm:ss",
+              },
+            },
+          },
+          {
+            prop: "color",
+            label: "颜色选择器",
+            form: {
+              comp: {
+                name: "el-color-picker",
+              },
+            },
+          },
+          {
+            prop: "rate",
+            label: "评分",
+            form: {
+              comp: {
+                name: "el-rate",
+              },
+            },
+          },
+        ],
+      };
+    },
+  },
+  methods: {
+    edit(done, scope) {
+      this.$message.info("编辑");
+      console.log(scope, "edit");
+      done();
+    },
+    save(done, scope) {
+      this.$message.success("保存");
+      console.log(scope, "save");
+      done();
+    },
+  },
+};
+</script>