vue-super-crud 1.7.1

package/docs/.vuepress/components/crud/tableEdit/rowAction.vue

@@ -0,0 +1,107 @@
+<template>
+  <div>
+    <sc-crud
+      :search.sync="searchForm"
+      :options="options"
+      :data="data"
+      @edit="edit"
+      @save="save"
+      @cancel="cancel"
+    >
+    </sc-crud>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      searchForm: {},
+      data: [
+        {
+          id: 1,
+          name: "张三",
+          gender: "男",
+          age: 20,
+          city: "北京",
+          date: "2021-01-01",
+        },
+        {
+          id: 2,
+          name: "李四",
+          gender: "女",
+          age: 21,
+          city: "上海",
+          date: "2021-01-02",
+        },
+        {
+          id: 3,
+          name: "王五",
+          gender: "男",
+          age: 22,
+          city: "广州",
+          date: "2021-01-03",
+        },
+        {
+          id: 4,
+          name: "赵六",
+          gender: "女",
+          age: 23,
+          city: "深圳",
+          date: "2021-01-04",
+        },
+      ],
+      isEdit: true,
+    };
+  },
+  computed: {
+    options() {
+      return {
+        editConfig: {
+          mode: "row",
+          trigger: "manual",
+          edit: {
+            hasPermi: ["xx:xx:xx"],
+          }, // 操作列按钮配置
+        },
+        renderColumns: [
+          { prop: "name", label: "姓名" },
+          {
+            prop: "gender",
+            label: "性别",
+          },
+          {
+            prop: "age",
+            label: "年龄",
+          },
+          {
+            prop: "city",
+            label: "城市",
+          },
+          {
+            prop: "date",
+            label: "日期",
+          },
+        ],
+      };
+    },
+  },
+  methods: {
+    edit(done, scope) {
+      console.log("edit", scope);
+      this.$message.info("点击编辑", scope);
+      done();
+    },
+    save(done, scope) {
+      console.log("save", scope);
+      this.$message.success("点击保存", scope);
+      done();
+    },
+    cancel(done, scope) {
+      console.log("cancel", scope);
+      this.$message.warning("点击取消", scope);
+      done();
+    },
+  },
+};
+</script>

package/docs/.vuepress/components/crud/tableEdit/rowBatch.vue

@@ -0,0 +1,116 @@
+<template>
+  <div>
+    <el-button @click="isSelection = !isSelection"
+      >切换为批量编辑选中项</el-button
+    >
+    <el-button @click="isAll = !isAll">切换为编辑所有项</el-button>
+    <sc-crud
+      ref="crud"
+      :search.sync="searchForm"
+      :options="options"
+      :data="data"
+      @batchEdit="batchEdit"
+      @batchSave="batchSave"
+      @batchCancel="batchCancel"
+    >
+    </sc-crud>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      searchForm: {},
+      data: [
+        {
+          id: 1,
+          name: "张三",
+          gender: "男",
+          age: 20,
+          city: "北京",
+          date: "2021-01-01",
+        },
+        {
+          id: 2,
+          name: "李四",
+          gender: "女",
+          age: 21,
+          city: "上海",
+          date: "2021-01-02",
+        },
+        {
+          id: 3,
+          name: "王五",
+          gender: "男",
+          age: 22,
+          city: "广州",
+          date: "2021-01-03",
+        },
+        {
+          id: 4,
+          name: "赵六",
+          gender: "女",
+          age: 23,
+          city: "深圳",
+          date: "2021-01-04",
+        },
+      ],
+      isEdit: true,
+      isSelection: false,
+      isAll: false,
+    };
+  },
+  computed: {
+    options() {
+      return {
+        editConfig: {
+          mode: "row",
+          trigger: "manual",
+          batch: {
+            isSelect: this.isSelection,
+            hasPermi: ["xx:xx:xx"],
+          }, // 批量操作按钮配置
+        },
+        selection: this.isSelection,
+        renderColumns: [
+          { prop: "name", label: "姓名" },
+          {
+            prop: "gender",
+            label: "性别",
+          },
+          {
+            prop: "age",
+            label: "年龄",
+          },
+          {
+            prop: "city",
+            label: "城市",
+          },
+          {
+            prop: "date",
+            label: "日期",
+          },
+        ],
+      };
+    },
+  },
+  methods: {
+    batchEdit(done) {
+      console.log("batchEdit");
+      this.$message.info("点击批量编辑");
+      done(this.isAll ? this.data : this.data.slice(0, 2));
+    },
+    batchSave(done, rows) {
+      console.log("batchSave", rows);
+      this.$message.success("点击批量保存", rows);
+      done();
+    },
+    batchCancel(done, rows) {
+      console.log("batchCancel", rows);
+      this.$message.warning("点击批量取消", rows);
+      done();
+    },
+  },
+};
+</script>

package/docs/.vuepress/components/crud/tableEdit/rowClick.vue

@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <sc-crud
+      :search.sync="searchForm"
+      :options="options"
+      :data="data"
+      @edit="edit"
+      @save="save"
+    >
+    </sc-crud>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      searchForm: {},
+      data: [
+        {
+          id: 1,
+          name: "张三",
+          gender: "男",
+          age: 20,
+          city: "北京",
+          date: "2021-01-01",
+        },
+        {
+          id: 2,
+          name: "李四",
+          gender: "女",
+          age: 21,
+          city: "上海",
+          date: "2021-01-02",
+        },
+        {
+          id: 3,
+          name: "王五",
+          gender: "男",
+          age: 22,
+          city: "广州",
+          date: "2021-01-03",
+        },
+        {
+          id: 4,
+          name: "赵六",
+          gender: "女",
+          age: 23,
+          city: "深圳",
+          date: "2021-01-04",
+        },
+      ],
+      isEdit: true,
+    };
+  },
+  computed: {
+    options() {
+      return {
+        editConfig: {
+          mode: "row",
+          trigger: "click",
+        },
+        renderColumns: [
+          { prop: "name", label: "姓名" },
+          {
+            prop: "gender",
+            label: "性别",
+          },
+          {
+            prop: "age",
+            label: "年龄",
+          },
+          {
+            prop: "city",
+            label: "城市",
+          },
+          {
+            prop: "date",
+            label: "日期",
+          },
+        ],
+      };
+    },
+  },
+  methods: {
+    edit(done, scope) {
+      this.$message.info("编辑");
+      console.log(scope, "edit");
+      done();
+    },
+    save(done, scope) {
+      this.$message.success("保存");
+      console.log(scope, "save");
+      done();
+    },
+  },
+};
+</script>

package/docs/.vuepress/components/crud/validate/base.vue

@@ -0,0 +1,122 @@
+<template>
+  <div>
+    <sc-crud
+      ref="crud"
+      :search.sync="searchForm"
+      :options="options"
+      :data="data"
+    >
+    </sc-crud>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      searchForm: {},
+      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: "",
+          password: "sed laboris",
+          phone: "18157668675",
+          gender: "男",
+          age: 20,
+          status: 35,
+          updateTime: "2018-09-08 16:33:19",
+          updateUser: 58,
+          username: "石洋",
+        },
+      ],
+    };
+  },
+  computed: {
+    options() {
+      return {
+        handleRow: {
+          handles: [
+            {
+              label: "表格校验",
+              type: "primary",
+              onClick: (ctx) => {
+                this.$refs.crud.validate();
+              },
+            },
+            {
+              label: "清除校验",
+              type: "primary",
+              onClick: (ctx) => {
+                this.$refs.crud.clearValidate();
+              },
+            },
+            {
+              label: "表格第二行校验",
+              type: "primary",
+              onClick: (ctx) => {
+                this.$refs.crud.validateField(1);
+              },
+            },
+          ],
+        },
+        renderColumns: [
+          {
+            prop: "name",
+            label: "昵称",
+            isEdit: true,
+            required: true,
+          },
+          {
+            prop: "username",
+            label: "姓名",
+          },
+          {
+            prop: "gender",
+            label: "性别",
+            required: true,
+            isEdit: true,
+            form: {
+              // 使用form字段自定义编辑模式的组件
+              comp: {
+                name: "el-select",
+                clearable: true,
+                children: [
+                  {
+                    name: "el-option",
+                    label: "男",
+                    value: "男",
+                  },
+                  {
+                    name: "el-option",
+                    label: "女",
+                    value: "女",
+                  },
+                ],
+              },
+            },
+          },
+        ],
+      };
+    },
+  },
+  methods: {},
+};
+</script>

package/docs/.vuepress/components/crud/validate/custom.vue

@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <sc-crud
+      ref="crud"
+      :search.sync="searchForm"
+      :options="options"
+      :data="data"
+    >
+    </sc-crud>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      searchForm: {},
+      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: "石洋",
+        },
+      ],
+    };
+  },
+  computed: {
+    options() {
+      return {
+        handleRow: {
+          handles: [
+            {
+              label: "表格校验",
+              type: "primary",
+              onClick: () => {
+                this.$refs.crud.validate();
+              },
+            },
+            {
+              label: "清除校验",
+              type: "primary",
+              onClick: () => {
+                this.$refs.crud.clearValidate();
+              },
+            },
+          ],
+        },
+        renderColumns: [
+          {
+            prop: "name",
+            label: "昵称",
+            isEdit: true,
+            rules: [
+              {
+                validator: (rule, value, callback) => {
+                  if (value) {
+                    callback();
+                  } else {
+                    callback(new Error("error1"));
+                  }
+                },
+                trigger: "change",
+              },
+            ],
+          },
+        ],
+      };
+    },
+  },
+  methods: {},
+};
+</script>

package/docs/.vuepress/components/crud/validate/regulars.vue

@@ -0,0 +1,88 @@
+<template>
+  <div>
+    <sc-crud
+      ref="crud"
+      :search.sync="searchForm"
+      :options="options"
+      :data="data"
+    >
+    </sc-crud>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      searchForm: {},
+      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: "石洋",
+        },
+      ],
+      isEdit: false,
+    };
+  },
+  computed: {
+    options() {
+      return {
+        handleRow: {
+          handles: [
+            {
+              label: "表格校验",
+              type: "primary",
+              onClick: (ctx) => {
+                this.$refs.crud.validate();
+              },
+            },
+            {
+              label: "清除校验",
+              type: "primary",
+              onClick: (ctx) => {
+                this.$refs.crud.clearValidate();
+              },
+            },
+          ],
+        },
+        renderColumns: [
+          {
+            prop: "name",
+            label: "正整数校验",
+            isEdit: true,
+            rules: ["integer"],
+          },
+          {
+            prop: "username",
+            label: "自定义正则校验",
+            isEdit: true,
+            form: {
+              comp: {
+                placeholder: "请输入2到16个汉字",
+              },
+            },
+            rules: [
+              {
+                regular: /^(?:[\u4e00-\u9fa5·]{2,16})$/,
+                msg: "请输入2到16个汉字",
+              },
+            ],
+          },
+        ],
+      };
+    },
+  },
+  methods: {},
+};
+</script>

package/docs/.vuepress/components/crud/validate/relation.vue

@@ -0,0 +1,91 @@
+<template>
+  <sc-crud ref="crud" default-expand-all :options="options" :data="data">
+  </sc-crud>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      data: [
+        {
+          id: 1,
+          name: "总数量",
+          number: 100,
+          children: [
+            {
+              id: 11,
+              name: "子数量",
+              number: 50,
+            },
+            {
+              id: 12,
+              name: "子数量",
+              number: 30,
+            },
+            {
+              id: 13,
+              name: "子数量",
+              number: "",
+            },
+          ],
+        },
+      ],
+    };
+  },
+  computed: {
+    options() {
+      return {
+        renderColumns: [
+          {
+            prop: "name",
+            label: "名称",
+          },
+          {
+            prop: "number",
+            label: "数量",
+            isEdit: ({ row }) => row.name !== "总数量",
+            required: true,
+            form: {
+              comp: {
+                type: "number",
+                onBlur: (v, { row }) => {
+                  const father = this.data[0];
+                  father.children.forEach((i) => {
+                    if (row === i) return;
+                    this.$refs.crud.validateField({
+                      row: i,
+                      prop: "number",
+                    });
+                  });
+                },
+              },
+            },
+            rules: [
+              {
+                validator: (rule, value, callback) => {
+                  const father = this.data[0];
+                  if (father.children.some((i) => !i.number)) {
+                    callback();
+                    return;
+                  }
+                  let totalNumber = 0;
+                  father.children.forEach((item) => {
+                    totalNumber += Number(item.number);
+                  });
+                  if (totalNumber !== father.number) {
+                    callback(new Error("【子数量】总和不等于【总数量】"));
+                  } else {
+                    callback();
+                  }
+                },
+              },
+            ],
+          },
+        ],
+      };
+    },
+  },
+  methods: {},
+};
+</script>