vue-super-crud 1.7.1 → 1.7.2

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

@@ -1,90 +0,0 @@
-<template>
-  <div>
-    <div style="margin-bottom: 15px;">queryForm:：{{ searchForm }}</div>
-    <sc-crud
-      :search.sync="searchForm"
-      :options="options"
-      :data="data"
-      @search="handleSearch"
-      @reset="handleReset"
-    >
-    </sc-crud>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      //搜索的表单对象，
-      searchForm: {
-        name: "defaultName", //仅第一次搜索默认值，重置后清除
-      },
-      options: {
-        searchForm: true, //是否显示搜索表单
-        searchHeader: true, // 是否显示表格搜索头
-        renderColumns: [
-          { prop: "name", label: "昵称", search: true },
-          {
-            prop: "username",
-            label: "姓名",
-            search: {
-              reset: () => {
-                console.log("重置事件");
-              },
-              comp: {
-                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: {
-    /**
-     * 搜索触发。
-     * @param {Function} done - 回调函数，完成时调用
-     */
-    handleSearch(done) {
-      setTimeout(() => {
-        done();
-      }, 1000);
-    },
-    /**
-     * 重置触发。
-     * @param {Function} done - 回调函数，完成时调用
-     * @param {Object} prop - 单个重置的列属性名。
-     */
-    handleReset(done, prop) {
-      console.log(prop, "handleReset");
-      setTimeout(() => {
-        done();
-      }, 1000);
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped></style>

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

@@ -1,78 +0,0 @@
-<template>
-  <div>
-    <div style="margin-bottom: 15px;">queryForm:：{{ searchForm }}</div>
-    <sc-crud :search.sync="searchForm" :options="options" :data="data">
-      <!-- 插槽 自定义搜索标题 -->
-      <template slot="name-search-label">
-        <div>插槽自定义label</div>
-      </template>
-      <template slot="name-search">
-        <div>插槽自定义搜索内容</div>
-      </template>
-    </sc-crud>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      searchForm: {
-        name: "defaultName",
-        sexCustom: [],
-      },
-      options: {
-        searchForm: true,
-        searchHeader: true,
-        renderColumns: [
-          { prop: "name", label: "昵称", search: true },
-          {
-            prop: "username",
-            label: "姓名",
-            search: {
-              comp: {
-                name: "el-select",
-              },
-              labelRender: () => {
-                // jsx 自定义搜索标题
-                return <div>jsx label</div>;
-              },
-            },
-          },
-          {
-            prop: "gender",
-            label: "性别",
-            search: {
-              prop: "sexCustom", //自定义search取值字段
-              label: "自定义搜索标题", //自定义search标题
-              comp: {
-                name: "el-date-picker",
-              },
-            },
-          },
-        ],
-      },
-      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>
-
-<style lang="scss" scoped></style>

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

@@ -1,107 +0,0 @@
-<template>
-  <div>
-    <div style="margin-bottom: 15px;">queryForm:：{{ searchForm }}</div>
-    <sc-crud :search.sync="searchForm" :options="options" :data="data">
-      <!-- 自定义搜索头插槽 -->
-      <template #gender-searchHeader>
-        <div>自定义搜索头插槽</div>
-      </template>
-    </sc-crud>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      searchForm: {
-        customProp: "",
-      },
-      options: {
-        // 搜索表单配置
-        searchForm: {
-          // .... 其余属性同form表单
-          initShow: true, // 初始化是否展开搜索框
-          columnWidth: "400px", // 搜索框每列宽度
-          labelWidth: "150px", // 搜索框label宽度
-          action: {
-            search: {
-              // 自定义搜索按钮
-              label: "自定义搜索",
-              icon: "el-icon-magic-stick",
-            },
-            reset: {
-              label: "自定义重置",
-            },
-            handles: [
-              // 添加自定义按钮
-              {
-                label: "自定义按钮",
-                icon: "el-icon-magic-stick",
-                onClick: () => {
-                  this.$message.success("自定义按钮");
-                },
-              },
-            ],
-          },
-        },
-        // 搜索头配置
-        searchHeader: {
-          // ...其余属性与el-popover组件配置相同
-          width: "100px", // 搜索头宽度
-        },
-        renderColumns: [
-          { prop: "name", label: "昵称", search: true },
-          {
-            prop: "updateTime",
-            label: "自定义搜索头组件",
-            searchHeader: {
-              // 单个搜索头配置 与searchHeader相同
-              width: "400px",
-              // 自定义搜索头组件，覆盖继承自search的组件
-              comp: {
-                name: "el-select",
-              },
-            },
-            search: {
-              comp: {
-                name: "el-date-picker",
-                type: "daterange",
-                rangeSeparator: "-",
-                startPlaceholder: "开始日期",
-                endPlaceholder: "结束日期",
-                valueFormat: "yyyy-MM-dd",
-              },
-            },
-          },
-          {
-            prop: "gender",
-            label: "自定义搜索头插槽",
-            search: {},
-          },
-        ],
-      },
-      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>
-
-<style lang="scss" scoped></style>

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>