vue-super-crud 1.7.1

package/docs/.vuepress/components/crud/baseUse/height.vue

@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <sc-crud :search.sync="searchForm" :options="options" :data="data">
+    </sc-crud>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      searchForm: {},
+      options: {
+        height: "300px", // 设置为`auto`，会自适应窗口高度，配合calcHeight参数去调节范围
+        calcHeight: 0, // 值为应减去的底部高度
+        renderColumns: [
+          { prop: "name", label: "昵称", search: true },
+          {
+            label: "信息",
+            children: [
+              // 表头子级
+              {
+                prop: "username",
+                label: "姓名",
+                search: {
+                  comp: {
+                    name: "el-date-picker",
+                  },
+                },
+                children: [
+                  {
+                    prop: "username",
+                    label: "姓名",
+                    search: {
+                      comp: {
+                        name: "el-date-picker",
+                      },
+                    },
+                  },
+                  {
+                    prop: "gender",
+                    label: "性别",
+                  },
+                ],
+              },
+              {
+                prop: "gender",
+                label: "性别",
+              },
+            ],
+          },
+        ],
+      },
+      data: [
+        {
+          createTime: "2018-06-02 12:28:47",
+          createUser: 94,
+          id: 56,
+          idNumber: "8",
+          name: "识间华中张认",
+          password: "sed laboris",
+          phone: "18157668675",
+          gender: "男",
+          age: 20,
+          status: 35,
+          updateTime: "2018-09-08 16:33:19",
+          updateUser: 58,
+          username: "石洋",
+        },
+      ],
+    };
+  },
+  mounted() {
+    const dataRepeated = [];
+    for (let i = 0; i < 50; i++) {
+      dataRepeated.push(Object.assign({}, this.data[0]));
+    }
+    this.data = dataRepeated;
+  },
+  methods: {},
+};
+</script>

package/docs/.vuepress/components/crud/baseUse/index.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <sc-crud :search.sync="searchForm" :options="options" :data="data">
+    </sc-crud>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      searchForm: {},
+      options: {
+        index: {
+          label: "序号",
+        },
+        expand: true,
+        renderColumns: [
+          { prop: "name", label: "昵称", search: true },
+          {
+            prop: "username",
+            label: "姓名",
+            search: {
+              name: "el-date-picker",
+            },
+          },
+          {
+            prop: "gender",
+            label: "性别",
+          },
+        ],
+      },
+      data: [
+        {
+          createTime: "2018-06-02 12:28:47",
+          createUser: 94,
+          id: 56,
+          idNumber: "8",
+          name: "识间华中张认",
+          password: "sed laboris",
+          phone: "18157668675",
+          gender: "男",
+          age: 20,
+          status: 35,
+          updateTime: "2018-09-08 16:33:19",
+          updateUser: 58,
+          username: "石洋",
+        },
+      ],
+    };
+  },
+  methods: {},
+};
+</script>

package/docs/.vuepress/components/crud/baseUse/loading.vue

@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <el-button type="primary" @click="loading = !loading"
+      >切换loading</el-button
+    >
+    <sc-crud
+      :search.sync="searchForm"
+      :options="options"
+      :data="data"
+      :loading.sync="loading"
+    >
+    </sc-crud>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      loading: true,
+      searchForm: {},
+      options: {
+        loadingText: "拼命加载中...",
+        loadingSpinner: "el-icon-loading",
+        loadingBackground: "rgba(0, 0, 0, 0.8)",
+        disableLoading: true, //禁用组件内部控制加载状态
+        handleRow: [
+          {
+            label: "组件按钮",
+            type: "primary",
+          },
+        ],
+        renderColumns: [
+          { prop: "name", label: "昵称", search: true },
+          {
+            prop: "username",
+            label: "姓名",
+            search: {
+              name: "el-date-picker",
+            },
+          },
+          {
+            prop: "gender",
+            label: "性别",
+          },
+        ],
+      },
+      data: [
+        {
+          createTime: "2018-06-02 12:28:47",
+          createUser: 94,
+          id: 56,
+          idNumber: "8",
+          name: "识间华中张认",
+          password: "sed laboris",
+          phone: "18157668675",
+          gender: "男",
+          age: 20,
+          status: 35,
+          updateTime: "2018-09-08 16:33:19",
+          updateUser: 58,
+          username: "石洋",
+        },
+      ],
+    };
+  },
+  mounted() {},
+  methods: {},
+};
+</script>

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

@@ -0,0 +1,108 @@
+<template>
+  <div>
+    <sc-crud
+      :search.sync="searchForm"
+      :options="options"
+      :data.sync="data"
+      :total="total"
+      @getList="getList"
+    >
+    </sc-crud>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      searchForm: {
+        pageNum: 2, // 当前页码
+        pageSize: 20, // 每页条数
+      },
+      options: {
+        init: true,
+        pagination: {
+          // 自定义pagination
+          background: false,
+          on: {
+            "size-change": (v) => {
+              this.$message.success("size-change");
+            },
+          },
+        },
+        props: {
+          pageNum: "pageNum", // 分页参数
+          pageSize: "pageSize", // 分页参数
+          listResult: "data", // 列表数据
+          total: "total", // 列表条数
+        },
+        renderColumns: [
+          { prop: "name", label: "昵称", search: true },
+          {
+            prop: "username",
+            label: "姓名",
+            search: true,
+          },
+          {
+            prop: "gender",
+            label: "性别",
+            search: true,
+          },
+        ],
+      },
+      data: [],
+      total: 0,
+    };
+  },
+  methods: {
+    async getList() {
+      const { data, total } = await this.listApi(this.searchForm);
+      this.data = data;
+      this.total = total;
+    },
+    listApi() {
+      // 模拟请求api
+      return new Promise((resolve, reject) => {
+        setTimeout(() => {
+          resolve({
+            code: 200,
+            data: [
+              {
+                createTime: "2018-06-02 12:28:47",
+                createUser: 94,
+                id: 56,
+                idNumber: "8",
+                name: "识间华中张认",
+                password: "sed laboris",
+                phone: "18157668675",
+                gender: "男",
+                age: 20,
+                status: 35,
+                updateTime: "2018-09-08 16:33:19",
+                updateUser: 58,
+                username: "石洋",
+              },
+              {
+                createTime: "2018-06-02 12:28:47",
+                createUser: 94,
+                id: 57,
+                idNumber: "8",
+                name: "识间华中张认1",
+                password: "sed laboris",
+                phone: "18157668675",
+                gender: "男",
+                age: 20,
+                status: 35,
+                updateTime: "2018-09-08 16:33:19",
+                updateUser: 58,
+                username: "石洋11",
+              },
+            ],
+            total: 100,
+          });
+        }, 1000);
+      });
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,114 @@
+<template>
+  <div>
+    <sc-crud :search.sync="searchForm" :options="options" :data="data">
+    </sc-crud>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      searchForm: {},
+      options: {
+        selection: {
+          ctrlSelect: true, // 按下ctrl键点击整行选中
+          shiftSelect: true, // 按下shift键批量多选
+        },
+        renderColumns: [
+          { prop: "name", label: "昵称", search: true },
+          {
+            prop: "username",
+            label: "姓名",
+            search: {
+              name: "el-date-picker",
+            },
+          },
+          {
+            prop: "gender",
+            label: "性别",
+          },
+        ],
+      },
+      data: [
+        {
+          createTime: "2018-06-02 12:28:47",
+          createUser: 94,
+          id: 56,
+          idNumber: "8",
+          name: "识间华中张认",
+          password: "sed laboris",
+          phone: "18157668675",
+          gender: "男",
+          age: 20,
+          status: 35,
+          updateTime: "2018-09-08 16:33:19",
+          updateUser: 58,
+          username: "石洋",
+        },
+        {
+          createTime: "2018-06-02 12:28:47",
+          createUser: 94,
+          id: 66,
+          idNumber: "8",
+          name: "识间华中张认",
+          password: "sed laboris",
+          phone: "18157668675",
+          gender: "男",
+          age: 20,
+          status: 35,
+          updateTime: "2018-09-08 16:33:19",
+          updateUser: 58,
+          username: "石洋",
+        },
+        {
+          createTime: "2018-06-02 12:28:47",
+          createUser: 94,
+          id: 77,
+          idNumber: "8",
+          name: "识间华中张认",
+          password: "sed laboris",
+          phone: "18157668675",
+          gender: "男",
+          age: 20,
+          status: 35,
+          updateTime: "2018-09-08 16:33:19",
+          updateUser: 58,
+          username: "石洋",
+        },
+        {
+          createTime: "2018-06-02 12:28:47",
+          createUser: 94,
+          id: 88,
+          idNumber: "8",
+          name: "识间华中张认",
+          password: "sed laboris",
+          phone: "18157668675",
+          gender: "男",
+          age: 20,
+          status: 35,
+          updateTime: "2018-09-08 16:33:19",
+          updateUser: 58,
+          username: "石洋",
+        },
+        {
+          createTime: "2018-06-02 12:28:47",
+          createUser: 94,
+          id: 99,
+          idNumber: "8",
+          name: "识间华中张认",
+          password: "sed laboris",
+          phone: "18157668675",
+          gender: "男",
+          age: 20,
+          status: 35,
+          updateTime: "2018-09-08 16:33:19",
+          updateUser: 58,
+          username: "石洋",
+        },
+      ],
+    };
+  },
+  methods: {},
+};
+</script>

package/docs/.vuepress/components/crud/baseUse/summaryMethod.vue

@@ -0,0 +1,118 @@
+<template>
+  <div>
+    <sc-crud
+      :loading="loading"
+      :search.sync="searchForm"
+      :options="options"
+      :data="data"
+      :total="total"
+      :spanMethod="spanMethod"
+      @getList="getList"
+    >
+    </sc-crud>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      loading: false,
+      searchForm: {},
+      options: {
+        init: true,
+        border: true,
+        renderColumns: [
+          {
+            prop: "number",
+            label: "合计",
+            summary: "sum",
+          },
+          {
+            prop: "number",
+            label: "平均",
+            summary: "avg",
+          },
+          {
+            prop: "number",
+            label: "最大值",
+            summary: "max",
+          },
+          {
+            prop: "number",
+            label: "最小值",
+            summary: "min",
+          },
+          {
+            prop: "number",
+            label: "自定义summary",
+            summary: (values, data) => {
+              return values.reduce((acc, curr) => acc + curr, 0);
+            },
+          },
+        ],
+      },
+      data: [],
+      total: 0,
+    };
+  },
+  methods: {
+    spanMethod({ row, column, rowIndex, columnIndex }) {
+      if (column.property === "gender") {
+        if (rowIndex === 0) {
+          return {
+            rowspan: 2,
+            colspan: 1,
+          };
+        }
+        if (rowIndex === 1) {
+          return {
+            rowspan: 0,
+            colspan: 0,
+          };
+        }
+        return {
+          rowspan: 1,
+          colspan: 1,
+        };
+      }
+    },
+    async getList() {
+      this.loading = true;
+      const { data, total } = await this.listApi(this.searchForm);
+      this.loading = false;
+      this.data = data;
+      this.total = total;
+    },
+    listApi() {
+      // 模拟请求api
+      return new Promise((resolve, reject) => {
+        setTimeout(() => {
+          resolve({
+            code: 200,
+            data: [
+              {
+                id: 56,
+                number: 1,
+              },
+              {
+                id: 56,
+                number: 2,
+              },
+              {
+                id: 56,
+                number: 3,
+              },
+              {
+                id: 56,
+                number: 4,
+              },
+            ],
+            total: 2,
+          });
+        }, 1000);
+      });
+    },
+  },
+};
+</script>

package/docs/.vuepress/components/crud/baseUse/title.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <sc-crud :search.sync="searchForm" :options="options" :data="data">
+    </sc-crud>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      searchForm: {},
+      options: {
+        title: "表格标题",
+        renderColumns: [
+          {
+            prop: "name",
+            label: "昵称",
+            search: true,
+          },
+          {
+            prop: "username",
+            label: "姓名",
+            search: true,
+          },
+          {
+            prop: "gender",
+            label: "性别",
+            search: true,
+          },
+        ],
+      },
+      data: [
+        {
+          createTime: "2018-06-02 12:28:47",
+          createUser: 94,
+          id: 56,
+          idNumber: "8",
+          name: "识间华中张认",
+          password: "sed laboris",
+          phone: "18157668675",
+          gender: "男",
+          age: 20,
+          status: 35,
+          updateTime: "2018-09-08 16:33:19",
+          updateUser: 58,
+          username: "石洋",
+        },
+      ],
+    };
+  },
+  methods: {},
+};
+</script>

package/docs/.vuepress/components/crud/baseUse/toolbar.vue

@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <sc-crud :search.sync="searchForm" :options="options" :data="data">
+      <template #toolbar-left="config">
+        <!-- ctx为crud组件实例 -->
+        <el-button :size="config.size">toolbar插槽</el-button>
+      </template>
+    </sc-crud>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      searchForm: {},
+      options: {
+        // 不需要自定义内置按钮时可以简写为数组 toolbar: [{label: "自定义按钮"...}]
+        toolbar: {
+          search: {
+            label: "自定义搜索显隐", // 自定义 hover 提示词
+          },
+          reset: {
+            label: "自定义重置", // 自定义 hover 提示词
+          },
+          zoom: {
+            label: "自定义最大化", // 自定义 hover 提示词
+          },
+          column: {
+            label: "自定义列设置", // 自定义 hover 提示词
+          },
+        },
+        renderColumns: [
+          { prop: "name", label: "昵称", search: true },
+          {
+            prop: "username",
+            label: "姓名",
+            search: {
+              name: "el-date-picker",
+            },
+          },
+          {
+            prop: "gender",
+            label: "性别",
+          },
+        ],
+      },
+      data: [
+        {
+          createTime: "2018-06-02 12:28:47",
+          createUser: 94,
+          id: 56,
+          idNumber: "8",
+          name: "识间华中张认",
+          password: "sed laboris",
+          phone: "18157668675",
+          gender: "男",
+          age: 20,
+          status: 35,
+          updateTime: "2018-09-08 16:33:19",
+          updateUser: 58,
+          username: "石洋",
+        },
+      ],
+    };
+  },
+  methods: {},
+};
+</script>