vue-super-crud 1.7.1 → 1.7.2

package/docs/.vuepress/components/mockData/example.vue

@@ -1,290 +0,0 @@
-<template>
-  <div>
-    <h3>表单</h3>
-    <sc-form v-model="form" :options="options"> </sc-form>
-    <h3 style="margin-top: 20px;">表格</h3>
-    <sc-crud :data="data" :options="crudOptions"> </sc-crud>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      form: {
-        multiSelect: [],
-        daterange: [],
-        checkbox: [],
-        cascader: [],
-        transfer: [],
-      },
-      data: [
-        {
-          id: 1,
-          input: "",
-          select: "",
-        },
-        {
-          id: 2,
-          input: "",
-          select: "",
-        },
-        {
-          id: 3,
-          input: "",
-          select: "",
-        },
-        {
-          id: 4,
-          input: "",
-          select: "",
-        },
-      ],
-    };
-  },
-  computed: {
-    options() {
-      return {
-        renderColumns: [
-          // 1. 输入框类
-          {
-            prop: "input",
-            label: "普通输入框",
-            comp: {
-              name: "el-input",
-              maxlength: 20,
-              "show-word-limit": true,
-            },
-          },
-          {
-            prop: "input2",
-            label: "校验规则生成",
-            rules: ["email"],
-          },
-          {
-            prop: "textarea",
-            label: "文本域",
-            comp: {
-              name: "el-input",
-              type: "textarea",
-              rows: 3,
-              placeholder: "请输入多行文本",
-            },
-          },
-          {
-            prop: "number",
-            label: "数字输入框",
-            comp: {
-              name: "el-input-number",
-              min: 0,
-              max: 100,
-              step: 1,
-            },
-          },
-
-          // 2. 选择器类
-          {
-            prop: "select",
-            label: "下拉选择",
-            comp: {
-              name: "el-select",
-              options: [
-                { label: "选项1", value: "1" },
-                { label: "选项2", value: "2" },
-                { label: "选项3", value: "3" },
-                { label: "选项4", value: "4" },
-              ],
-            },
-          },
-          {
-            prop: "multiSelect",
-            label: "多选选择器",
-            comp: {
-              name: "el-select",
-              multiple: true,
-              options: [
-                { label: "选项A", value: "A" },
-                { label: "选项B", value: "B" },
-                { label: "选项C", value: "C" },
-                { label: "选项D", value: "D" },
-              ],
-            },
-          },
-
-          // 3. 日期时间类
-          {
-            prop: "date",
-            label: "日期选择",
-            comp: {
-              name: "el-date-picker",
-              type: "date",
-              valueFormat: "yyyy-MM-dd",
-            },
-          },
-          {
-            prop: "daterange",
-            label: "日期范围",
-            comp: {
-              name: "el-date-picker",
-              type: "daterange",
-              startPlaceholder: "开始日期",
-              endPlaceholder: "结束日期",
-              valueFormat: "yyyy-MM-dd",
-            },
-          },
-          {
-            prop: "time",
-            label: "时间选择",
-            comp: {
-              name: "el-time-picker",
-              valueFormat: "HH:mm:ss",
-            },
-          },
-
-          // 4. 单选复选类
-          {
-            prop: "radio",
-            label: "单选组",
-            comp: {
-              name: "el-radio-group",
-              options: [
-                { label: "选项1", value: "1" },
-                { label: "选项2", value: "2" },
-                { label: "选项3", value: "3" },
-                { label: "选项4", value: "4" },
-              ],
-            },
-          },
-          {
-            prop: "checkbox",
-            label: "复选框组",
-            comp: {
-              name: "el-checkbox-group",
-              options: [
-                { label: "选项A", value: "A" },
-                { label: "选项B", value: "B" },
-                { label: "选项C", value: "C" },
-                { label: "选项D", value: "D" },
-              ],
-            },
-          },
-
-          // 5. 级联选择器
-          {
-            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" },
-                  ],
-                },
-              ],
-            },
-          },
-
-          // 6. 开关、滑块、评分类
-          {
-            prop: "switch",
-            label: "开关",
-            comp: {
-              name: "el-switch",
-              "active-text": "开启",
-              "inactive-text": "关闭",
-            },
-          },
-          {
-            prop: "slider",
-            label: "滑块",
-            comp: {
-              name: "el-slider",
-              min: 0,
-              max: 100,
-              step: 10,
-              "show-stops": true,
-            },
-          },
-          {
-            prop: "rate",
-            label: "评分",
-            comp: {
-              name: "el-rate",
-              max: 5,
-              "allow-half": true,
-              "show-text": true,
-            },
-          },
-
-          // 7. 穿梭框
-          {
-            prop: "transfer",
-            label: "穿梭框",
-            comp: {
-              name: "el-transfer",
-              data: [
-                { key: 1, label: "选项1" },
-                { key: 2, label: "选项2" },
-                { key: 3, label: "选项3" },
-              ],
-              titles: ["待选列表", "已选列表"],
-            },
-          },
-        ],
-      };
-    },
-    crudOptions() {
-      return {
-        toolbar: false,
-        renderColumns: [
-          {
-            prop: "id",
-            label: "ID",
-            isEdit: false,
-          },
-          {
-            prop: "input",
-            label: "普通输入框",
-            isEdit: true,
-            form: {
-              comp: {
-                name: "el-input",
-                maxlength: 20,
-                "show-word-limit": true,
-              },
-            },
-          },
-          {
-            prop: "select",
-            label: "下拉选择",
-            isEdit: true,
-            form: {
-              comp: {
-                name: "el-select",
-                options: [
-                  { label: "选项1", value: "1" },
-                  { label: "选项2", value: "2" },
-                  { label: "选项3", value: "3" },
-                  { label: "选项4", value: "4" },
-                ],
-              },
-            },
-          },
-        ],
-      };
-    },
-  },
-};
-</script>

package/docs/.vuepress/components/positionSlot/base.vue

@@ -1,24 +0,0 @@
-<template>
-  <sc-position>
-    <template #left>
-      <el-button type="primary">左侧</el-button>
-    </template>
-    <template #right>
-      <el-button type="primary">右侧</el-button>
-    </template>
-    <template #top>
-      <el-button style="width: 100%;" type="primary">顶部</el-button>
-    </template>
-    <template #bottom>
-      <el-button style="width: 100%;" type="primary">底部</el-button>
-    </template>
-    <el-input v-model="value" placeholder="请输入内容" />
-  </sc-position>
-</template>
-<script>
-export default {
-  data() {
-    return { value: "" };
-  },
-};
-</script>

package/docs/.vuepress/components/positionSlot/form.vue

@@ -1,71 +0,0 @@
-<template>
-  <div>
-    <h3>表单</h3>
-    <sc-form v-model="form" :options="options">
-      <template #test-left>
-        <el-button>渲染单元格左侧</el-button>
-      </template>
-      <template #test-right>
-        <el-button>渲染单元格右侧</el-button>
-      </template>
-      <template #test-top="scope">
-        <el-button style="width: 100%;">{{
-          scope.row.test || "渲染单元格顶部"
-        }}</el-button>
-      </template>
-      <template #test-bottom>
-        <el-button style="width: 100%;">渲染单元格底部</el-button>
-      </template>
-    </sc-form>
-    <h3>表格</h3>
-    <sc-crud :options="options" :data="data"
-      ><template #test-left>
-        <el-button>渲染单元格左侧 </el-button>
-      </template>
-      <template #test-right>
-        <el-button>渲染单元格右侧</el-button>
-      </template>
-      <template #test-top="scope">
-        <el-button style="width: 100%;">{{
-          scope.row.test || "渲染单元格顶部"
-        }}</el-button>
-      </template>
-      <template #test-bottom>
-        <el-button style="width: 100%;">渲染单元格底部</el-button>
-      </template>
-    </sc-crud>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      form: {},
-      data: [
-        {
-          test: "",
-          test2: "11111",
-        },
-      ],
-      options: {
-        labelWidth: "160px",
-        renderColumns: [
-          {
-            label: "渲染单元格",
-            prop: "test",
-            position: true,
-            comp: {
-              name: "el-input",
-            },
-          },
-          {
-            label: "普通单元格",
-            prop: "test2",
-          },
-        ],
-      },
-    };
-  },
-};
-</script>

package/docs/.vuepress/components/positionSlot/table.vue

@@ -1,85 +0,0 @@
-<template>
-  <sc-crud
-    :loading.sync="loading"
-    :search.sync="search"
-    :options="options"
-    :data="data"
-    :total="total"
-    @getList="getList"
-  >
-    <template #handleRow>
-      <el-button>操作栏</el-button>
-    </template>
-    <template #handleRow-left>
-      <el-button type="primary">操作栏左侧</el-button>
-    </template>
-    <template #handleRow-right>
-      <el-button type="primary">操作栏右侧</el-button>
-    </template>
-    <template #handleRow-top>
-      <el-button type="primary" style="width: 100%;">操作栏顶部</el-button>
-    </template>
-    <template #handleRow-bottom>
-      <el-button type="primary" style="width: 100%;">操作栏底部</el-button>
-    </template>
-    <template #name-header-left>
-      <el-button type="primary">左侧</el-button>
-    </template>
-    <template #name-header-right>
-      <el-button type="primary">右侧</el-button>
-    </template>
-    <template #name-header-top>
-      <el-button type="primary" style="width: 100%;">顶部</el-button>
-    </template>
-    <template #name-header-bottom>
-      <el-button type="primary" style="width: 100%;">底部</el-button>
-    </template>
-    <template #pagination-left>
-      <el-button type="primary">左侧</el-button>
-    </template>
-    <template #pagination-right>
-      <el-button type="primary">右侧</el-button>
-    </template>
-    <template #pagination-top>
-      <el-button type="primary" style="width: 100%;">顶部</el-button>
-    </template>
-    <template #pagination-bottom>
-      <el-button type="primary" style="width: 100%;">底部</el-button>
-    </template>
-  </sc-crud>
-</template>
-
-<script>
-import { mockApi } from "../mock";
-export default {
-  data() {
-    return {
-      loading: false,
-      search: {
-        pageNum: 1,
-        pageSize: 2,
-      },
-      options: {
-        init: true,
-        renderColumns: [
-          { prop: "name", label: "姓名" },
-          { prop: "gender", label: "性别" },
-          { prop: "age", label: "年龄" },
-          { prop: "city", label: "城市" },
-        ],
-      },
-      data: [],
-      total: 0,
-    };
-  },
-  methods: {
-    async getList() {
-      this.loading = true;
-      const { data, total } = await mockApi.getList(this.search);
-      this.data = data;
-      this.total = total;
-      this.loading = false;
-    },
-  },
-};
-</script>

package/docs/.vuepress/components/tabs/base.vue

@@ -1,57 +0,0 @@
-<template>
-  <sc-tabs
-    v-model="activeTab"
-    :tab-list="tabList"
-    all
-    refresh
-    type="card"
-    @tab-click="handleTabClick"
-  >
-    <template #tab1>
-      <div>标签1的内容</div>
-    </template>
-
-    <template #tab2-label="scope">
-      <i class="el-icon-date"></i>
-      {{ scope.label }}
-    </template>
-
-    <template #tab2>
-      <div>标签2的内容</div>
-    </template>
-  </sc-tabs>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      activeTab: "tab1",
-      tabList: [
-        {
-          label: "标签1",
-          name: "tab1",
-          icon: "el-icon-date",
-          cache: true,
-        },
-        {
-          label: "标签2",
-          name: "tab2",
-        },
-        {
-          label: "标签3",
-          name: "tab3",
-          render: () => {
-            return <div>标签3的内容</div>;
-          },
-        },
-      ],
-    };
-  },
-  methods: {
-    handleTabClick(tab, item) {
-      console.log("点击的标签：", tab, item);
-    },
-  },
-};
-</script>