vue-super-crud 1.7.1 → 1.7.4

package/examples/views/crud/handleRow.vue

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

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

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

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

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