vue-super-crud 1.7.1

package/examples/views/crud/handleRow.vue

@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <sc-crud :options="options" :data="data"> </sc-crud>
+  </div>
+</template>
+
+<script>
+export default {
+  /**
+   *
+   */
+  data() {
+    return {
+      data: [
+        {
+          id: "1",
+          date: "2019-09-25",
+          name: "张三",
+          status: "2",
+          address: "广东省广州市天河区",
+        },
+        {
+          id: "2",
+          date: "2019-09-26",
+          name: "张三1",
+          status: "1",
+          address: "广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2",
+        },
+        {
+          id: "3",
+          date: "2019-09-27",
+          name: "张三2",
+          status: "3",
+          address: "广东省广州市天河区3",
+        },
+      ],
+      options: {
+        handleRow: {
+          add: true,
+          batchDelete: {
+            label: "删除-自定义",
+          },
+          handles: [
+            {
+              label: "自定义",
+              icon: "el-icon-edit",
+              onClick: (row) => {
+                console.log(row);
+              },
+            },
+          ],
+        },
+        toolbar: {
+          reset: false,
+          handles: [
+            {
+              label: "自定义",
+              icon: "el-icon-edit",
+              onClick: () => {
+                console.log("自定义");
+              },
+            },
+          ],
+        },
+        renderColumns: [
+          { prop: "name", label: "姓名" },
+          {
+            prop: "date",
+            label: "日期",
+          },
+          {
+            prop: "address",
+            label: "地址",
+          },
+          { prop: "date2", label: "日期" },
+        ],
+      },
+    };
+  },
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped></style>

package/examples/views/crud/search.vue

@@ -0,0 +1,116 @@
+<template>
+  <div>
+    <div>{{ queryForm }}</div>
+    <sc-crud
+      :search.sync="queryForm"
+      :options="options"
+      :data="data"
+      @search="handleSearch"
+      @reset="handleReset"
+    >
+      <template slot="date2-search-label">
+        <div>slot-label</div>
+      </template>
+    </sc-crud>
+  </div>
+</template>
+
+<script>
+export default {
+  /**
+   * 0.search.sync 搜索的表单对象
+   * 1.searchForm 控制初始化搜索框的显示
+   * 2.searchHeader 控制表格头搜索框的显示
+   * 3.searchForm 自定义搜索框的配置 其余配置同Form表单
+   * 4.search 搜索前方法 reset重置前方法， 调用done继续执行，传递参数会覆盖原来的queryForm
+   * 5.queryForm 设置默认搜索条件
+   * 6. search 配置
+   *  a. labelRender label jsx渲染
+   *  b. #[prop]-search-label label插槽
+   *  c. #[prop]-search 内容插槽
+   *  d. render 内容jsx渲染
+   *  e. label label文字
+   *  f. prop search独有字段
+   */
+  data() {
+    return {
+      queryForm: {
+        name: "defaultName",
+      },
+      data: [
+        {
+          id: "1",
+          date: "2019-09-25",
+          name: "张三",
+          status: "2",
+          address: "广东省广州市天河区",
+        },
+        {
+          id: "2",
+          date: "2019-09-26",
+          name: "张三1",
+          status: "1",
+          address: "广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2",
+        },
+        {
+          id: "3",
+          date: "2019-09-27",
+          name: "张三2",
+          status: "3",
+          address: "广东省广州市天河区3",
+        },
+      ],
+      options: {
+        searchForm: {
+          initShow: true, // 初始化是否展开搜索框
+        },
+        searchHeader: true, // 是否显示表格头搜索框
+        searchForm: {
+          action: {
+            search: {
+              //修改按钮配置
+              label: "查询1",
+            },
+          },
+        },
+        renderColumns: [
+          { prop: "name", label: "姓名", search: true },
+          {
+            prop: "date",
+            label: "日期",
+            search: {
+              prop: "date",
+              label: "搜索日期",
+              name: "el-date-picker",
+              format: "yyyy-MM-dd",
+              valueFormat: "yyyy-MM-dd",
+            },
+          },
+          {
+            prop: "address",
+            label: "地址",
+            search: {
+              labelRender: () => <div>地址Render</div>,
+            },
+          },
+          { prop: "date2", label: "日期", search: true },
+        ],
+      },
+    };
+  },
+  methods: {
+    handleSearch(done, param) {
+      setTimeout(() => {
+        done({ ...param, handles: "custom" });
+      }, 1000);
+    },
+    handleReset(done) {
+      setTimeout(() => {
+        done();
+      }, 1000);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

package/examples/views/dashboard/index.vue

@@ -0,0 +1,244 @@
+<template>
+  <div>
+    <el-button @click="visible = !visible">visible</el-button>
+    <sc-crud
+      v-if="visible"
+      init
+      :search.sync="searchForm"
+      :options="options"
+      :data="data"
+      :total="total"
+      @getList="getList"
+    >
+    </sc-crud>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      visible: false,
+      searchForm: {
+        pageSize: 1000,
+      },
+      options: {
+        // action: {
+        //   width: "200",
+        // },
+        editConfig: {
+          mode: "row",
+          // trigger: "click",
+          // edit: true,
+        },
+        height: "auto", // 设置为`auto`，会自适应窗口高度，配合calcHeight参数去调节范围
+        renderColumns: [
+          { prop: "name", label: "输入框", required: true },
+          {
+            prop: "select",
+            label: "选择器",
+            // comp: {
+            //   name: "el-select",
+            //   options: [
+            //     { value: "1", label: "选项1" },
+            //     { value: "2", label: "选项2" },
+            //   ],
+            // },
+            form: {
+              comp: {
+                name: "el-select",
+                options: [
+                  { value: "1", label: "选项1" },
+                  { value: "2", label: "选项2" },
+                ],
+              },
+            },
+          },
+          {
+            prop: "cascader",
+            label: "级联选择器",
+            // 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" },
+            //       ],
+            //     },
+            //   ],
+            // },
+            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",
+              },
+            },
+          },
+        ],
+      },
+      allData: [],
+      data: [],
+      total: 0,
+    };
+  },
+  mounted() {
+    this.allData = this.generateData(10000);
+  },
+  methods: {
+    getList() {
+      setTimeout(() => {
+        const { pageNum, pageSize } = this.searchForm;
+        const start = (pageNum - 1) * pageSize;
+        const end = pageNum * pageSize;
+
+        // 模拟分页数据
+        this.data = this.allData.slice(start, end);
+        this.total = this.allData.length;
+      }, 0);
+    },
+    generateData(count) {
+      const baseData = [
+        {
+          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,
+        },
+      ];
+
+      const cities = [
+        "北京",
+        "上海",
+        "广州",
+        "深圳",
+        "杭州",
+        "成都",
+        "武汉",
+        "西安",
+      ];
+      const names = ["张", "李", "王", "赵", "钱", "孙", "周", "吴"];
+      const colors = ["#409EFF", "#67C23A", "#E6A23C", "#F56C6C", "#909399"];
+
+      return Array.from({ length: count }, (_, index) => ({
+        id: index + 1,
+        name: names[Math.floor(Math.random() * names.length)] + "某某",
+        gender: Math.random() > 0.5 ? "男" : "女",
+        age: Math.floor(Math.random() * 40) + 18, // 18-57岁
+        city: cities[Math.floor(Math.random() * cities.length)],
+        date: this.randomDate("2020-01-01", "2024-12-31"),
+        time: this.randomTime(),
+        datetime:
+          this.randomDate("2020-01-01", "2024-12-31") + " " + this.randomTime(),
+        color: colors[Math.floor(Math.random() * colors.length)],
+        switch: Math.random() > 0.5,
+        rate: Math.floor(Math.random() * 5) + 1,
+        slider: Math.floor(Math.random() * 100),
+        radio: Math.random() > 0.5 ? "1" : "2",
+        checkbox: [Math.random() > 0.5 ? "1" : "2"],
+        select: Math.random() > 0.5 ? "1" : "2",
+        cascader: Math.random() > 0.5 ? ["1", "1-1"] : ["2", "2-1"],
+        textarea: "这是第" + (index + 1) + "条随机生成的文本",
+        number: Math.floor(Math.random() * 1000),
+      }));
+    },
+    randomDate(start, end) {
+      const startDate = new Date(start);
+      const endDate = new Date(end);
+      const randomTime =
+        startDate.getTime() +
+        Math.random() * (endDate.getTime() - startDate.getTime());
+      const date = new Date(randomTime);
+      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(
+        2,
+        "0"
+      )}-${String(date.getDate()).padStart(2, "0")}`;
+    },
+    randomTime() {
+      const hours = String(Math.floor(Math.random() * 24)).padStart(2, "0");
+      const minutes = String(Math.floor(Math.random() * 60)).padStart(2, "0");
+      const seconds = String(Math.floor(Math.random() * 60)).padStart(2, "0");
+      return `${hours}:${minutes}:${seconds}`;
+    },
+  },
+};
+</script>

package/examples/views/dashboard/index1.vue

@@ -0,0 +1,234 @@
+<template>
+  <div>
+    <el-button @click="visible = !visible">visible</el-button>
+    <el-card>
+      <el-table
+        v-if="visible"
+        height="800"
+        :data="tableData"
+        style="width: 100%;"
+        border
+        stripe
+        v-loading="loading"
+      >
+        <el-table-column
+          v-for="(column, index) in renderColumns"
+          :key="index"
+          :prop="column.prop"
+          :label="column.label"
+          :width="column.width || 'auto'"
+        >
+          <template #default="scope">
+            <div>{{ scope.row[column.prop] }}</div>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="pagination-container">
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="currentPage"
+          :page-sizes="[10, 20, 50, 100, 200]"
+          :page-size="pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+        />
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      visible: false,
+      tableData: [],
+      loading: false,
+      currentPage: 1,
+      pageSize: 1000,
+      total: 0,
+      allData: [],
+      renderColumns: [
+        { prop: "name", label: "输入框", required: true },
+        {
+          prop: "select",
+          label: "选择器",
+          // comp: {
+          //   name: "el-select",
+          //   options: [
+          //     { value: "1", label: "选项1" },
+          //     { value: "2", label: "选项2" },
+          //   ],
+          // },
+        },
+        {
+          prop: "cascader",
+          label: "级联选择器",
+          // 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: "日期选择器",
+          // comp: {
+          //   name: "el-date-picker",
+          //   "value-format": "yyyy-MM-dd",
+          // },
+        },
+        {
+          prop: "time",
+          label: "时间选择器",
+          // comp: {
+          //   name: "el-time-picker",
+          //   "value-format": "HH:mm:ss",
+          // },
+        },
+        {
+          prop: "color",
+          label: "颜色选择器",
+          // comp: {
+          //   name: "el-color-picker",
+          // },
+        },
+        {
+          prop: "rate",
+          label: "评分",
+          // comp: {
+          //   name: "el-rate",
+          // },
+        },
+      ],
+    };
+  },
+  mounted() {
+    this.allData = this.generateData(10000);
+    this.getList();
+  },
+  methods: {
+    getList() {
+      this.loading = true;
+      setTimeout(() => {
+        const start = (this.currentPage - 1) * this.pageSize;
+        const end = this.currentPage * this.pageSize;
+        this.tableData = this.allData.slice(start, end);
+        this.total = this.allData.length;
+        this.loading = false;
+      }, 0);
+    },
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.getList();
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.getList();
+    },
+    generateData(count) {
+      const baseData = [
+        {
+          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,
+        },
+      ];
+
+      const cities = [
+        "北京",
+        "上海",
+        "广州",
+        "深圳",
+        "杭州",
+        "成都",
+        "武汉",
+        "西安",
+      ];
+      const names = ["张", "李", "王", "赵", "钱", "孙", "周", "吴"];
+      const colors = ["#409EFF", "#67C23A", "#E6A23C", "#F56C6C", "#909399"];
+
+      return Array.from({ length: count }, (_, index) => ({
+        id: index + 1,
+        name: names[Math.floor(Math.random() * names.length)] + "某某",
+        gender: Math.random() > 0.5 ? "男" : "女",
+        age: Math.floor(Math.random() * 40) + 18,
+        city: cities[Math.floor(Math.random() * cities.length)],
+        date: this.randomDate("2020-01-01", "2024-12-31"),
+        time: this.randomTime(),
+        datetime:
+          this.randomDate("2020-01-01", "2024-12-31") + " " + this.randomTime(),
+        color: colors[Math.floor(Math.random() * colors.length)],
+        switch: Math.random() > 0.5,
+        rate: Math.floor(Math.random() * 5) + 1,
+        slider: Math.floor(Math.random() * 100),
+        radio: Math.random() > 0.5 ? "1" : "2",
+        checkbox: [Math.random() > 0.5 ? "1" : "2"],
+        select: Math.random() > 0.5 ? "1" : "2",
+        cascader: Math.random() > 0.5 ? ["1", "1-1"] : ["2", "2-1"],
+        textarea: "这是第" + (index + 1) + "条随机生成的文本",
+        number: Math.floor(Math.random() * 1000),
+      }));
+    },
+    randomDate(start, end) {
+      const startDate = new Date(start);
+      const endDate = new Date(end);
+      const randomTime =
+        startDate.getTime() +
+        Math.random() * (endDate.getTime() - startDate.getTime());
+      const date = new Date(randomTime);
+      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(
+        2,
+        "0"
+      )}-${String(date.getDate()).padStart(2, "0")}`;
+    },
+    randomTime() {
+      const hours = String(Math.floor(Math.random() * 24)).padStart(2, "0");
+      const minutes = String(Math.floor(Math.random() * 60)).padStart(2, "0");
+      const seconds = String(Math.floor(Math.random() * 60)).padStart(2, "0");
+      return `${hours}:${minutes}:${seconds}`;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.pagination-container {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>

package/examples/views/dashboard/test.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>test</div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped></style>