vue-super-crud 1.7.1

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

@@ -0,0 +1,219 @@
+<template>
+  <div>
+    <div class="demo-section">
+      <h3>控制行编辑状态：</h3>
+      <el-button @click="handleRowChange(0)">禁用第一行</el-button>
+      <el-button @click="handleRowChange(1)">禁用第二行</el-button>
+      <el-button @click="handleRowChange(2)">禁用第三行</el-button>
+      <el-button @click="handleRowChange(null)">取消禁用</el-button>
+    </div>
+
+    <div style="margin-bottom: 20px;">
+      <h3>控制列编辑状态：</h3>
+      <el-button @click="handleColumnChange('name')">禁用姓名列</el-button>
+      <el-button @click="handleColumnChange('gender')">禁用性别列</el-button>
+      <el-button @click="handleColumnChange('age')">禁用年龄列</el-button>
+      <el-button @click="handleColumnChange(null)">取消禁用</el-button>
+    </div>
+
+    <div style="margin-bottom: 20px;">
+      <h3>控制单元格编辑状态：</h3>
+      <el-button @click="handleCellChange('name')"
+        >禁用姓名第一个单元格</el-button
+      >
+      <el-button @click="handleCellChange('gender')"
+        >禁用性别第一个单元格</el-button
+      >
+      <el-button @click="handleCellChange('age')"
+        >禁用年龄第一个单元格</el-button
+      >
+      <el-button @click="handleCellChange(null)">取消禁用</el-button>
+    </div>
+
+    <sc-crud
+      :search.sync="searchForm"
+      ref="crud"
+      :options="options"
+      :data="data"
+    >
+    </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",
+        },
+      ],
+      disabledRowIndex: null,
+      disabledCellProp: null,
+      disabledCell: { row: null, prop: null },
+    };
+  },
+  computed: {
+    options() {
+      return {
+        editConfig: {
+          mode: "row",
+          batch: true,
+          edit: true,
+          isRowEdit: ({ row, $index }) => {
+            // 如果设置了禁用行索引，则该行不可编辑
+            if (this.disabledRowIndex !== null) {
+              return $index !== this.disabledRowIndex;
+            }
+            return true;
+          },
+        },
+        renderColumns: [
+          {
+            prop: "name",
+            label: "姓名",
+            isEdit: ({ row, $index }) => {
+              if (
+                this.disabledCell.row === 0 &&
+                this.disabledCell.prop === "name"
+              ) {
+                return $index !== 0;
+              }
+              return this.disabledCellProp !== "name";
+            },
+          },
+          {
+            prop: "gender",
+            label: "性别",
+            isEdit: ({ row, $index }) => {
+              if (
+                this.disabledCell.row === 0 &&
+                this.disabledCell.prop === "gender"
+              ) {
+                return $index !== 0;
+              }
+              return this.disabledCellProp !== "gender";
+            },
+            form: {
+              comp: {
+                name: "el-select",
+                options: [
+                  { value: "男", label: "男" },
+                  { value: "女", label: "女" },
+                ],
+              },
+            },
+          },
+          {
+            prop: "age",
+            label: "年龄",
+            isEdit: ({ row, $index }) => {
+              if (
+                this.disabledCell.row === 0 &&
+                this.disabledCell.prop === "age"
+              ) {
+                return $index !== 0;
+              }
+              return this.disabledCellProp !== "age";
+            },
+            form: {
+              comp: {
+                name: "el-select",
+                options: [
+                  { value: 20, label: "20" },
+                  { value: 21, label: "21" },
+                  { value: 22, label: "22" },
+                  { value: 23, label: "23" },
+                ],
+              },
+            },
+          },
+          {
+            prop: "city",
+            label: "城市",
+            form: {
+              comp: {
+                name: "el-select",
+                options: [
+                  { value: "北京", label: "北京" },
+                  { value: "上海", label: "上海" },
+                  { value: "广州", label: "广州" },
+                  { value: "深圳", label: "深圳" },
+                ],
+              },
+            },
+          },
+          {
+            prop: "date",
+            label: "日期",
+            form: {
+              comp: {
+                name: "el-date-picker",
+                props: {
+                  type: "date",
+                  placeholder: "选择日期",
+                  format: "yyyy-MM-dd",
+                  valueFormat: "yyyy-MM-dd",
+                },
+              },
+            },
+          },
+        ],
+      };
+    },
+  },
+  methods: {
+    // 控制行编辑状态
+    handleRowChange(index) {
+      this.disabledRowIndex = index;
+      this.$refs.crud.clearAllEdit();
+    },
+
+    // 控制单元格编辑状态
+    handleColumnChange(prop) {
+      this.disabledCellProp = prop;
+      this.$refs.crud.clearAllEdit();
+    },
+    handleCellChange(prop) {
+      if (prop === null) {
+        this.disabledCell = { row: null, prop: null };
+      } else {
+        // 设置第一行的指定列单元格为禁用状态
+        this.disabledCell = { row: 0, prop };
+      }
+      this.$refs.crud.clearAllEdit();
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,172 @@
+<template>
+  <div>
+    <sc-crud
+      :search.sync="searchForm"
+      :options="options"
+      :data="data"
+      @add="add"
+      @edit="edit"
+      @view="view"
+      @save="save"
+    >
+    </sc-crud>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      searchForm: {},
+      options: {
+        editConfig: {
+          mode: "dialog",
+          edit: {},
+          add: {
+            addType: "first",
+          },
+          view: {},
+          delete: true,
+          lastAdd: {},
+        },
+        dialog: {}, // 自定义弹窗配置
+        formOptions: {}, // 自定义表单配置
+        renderColumns: [
+          {
+            prop: "name",
+            label: "姓名",
+            form: {},
+          },
+          {
+            prop: "gender",
+            label: "性别",
+            form: {
+              comp: {
+                name: "el-select",
+                options: [
+                  { value: "男", label: "男" },
+                  { value: "女", label: "女" },
+                ],
+              },
+            },
+          },
+          {
+            prop: "age",
+            label: "年龄",
+            form: {
+              comp: {
+                name: "el-select",
+                options: [
+                  { value: 20, label: "20" },
+                  { value: 21, label: "21" },
+                  { value: 22, label: "22" },
+                  { value: 23, label: "23" },
+                ],
+              },
+            },
+          },
+          {
+            prop: "city",
+            label: "城市",
+            form: {
+              comp: {
+                name: "el-select",
+                options: [
+                  { value: "北京", label: "北京" },
+                  { value: "上海", label: "上海" },
+                  { value: "广州", label: "广州" },
+                  { value: "深圳", label: "深圳" },
+                ],
+              },
+            },
+          },
+          {
+            prop: "date",
+            label: "日期",
+            form: {
+              comp: {
+                name: "el-date-picker",
+                props: {
+                  type: "date",
+                  placeholder: "选择日期",
+                  valueFormat: "yyyy-MM-dd",
+                },
+              },
+            },
+          },
+        ],
+      },
+      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",
+        },
+        {
+          id: 5,
+          name: "孙七",
+          gender: "男",
+          age: 24,
+          city: "成都",
+          date: "2021-01-05",
+        },
+        {
+          id: 6,
+          name: "周八",
+          gender: "女",
+          age: 25,
+          city: "重庆",
+          date: "2021-01-06",
+        },
+      ],
+    };
+  },
+  methods: {
+    add(done, scope) {
+      this.$message("点击新增");
+      done();
+    },
+    edit(done, scope) {
+      this.$message("点击编辑");
+      done();
+    },
+    view(done, scope) {
+      this.$message("点击查看");
+      done();
+    },
+    save(done, scope) {
+      setTimeout(() => {
+        done();
+        this.$message("点击保存");
+      }, 500);
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,88 @@
+<template>
+  <div>
+    <sc-crud :search.sync="searchForm" :options="options" :data="data">
+    </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: "free",
+        },
+        renderColumns: [
+          { prop: "name", label: "姓名" },
+          {
+            prop: "gender",
+            label: "性别",
+          },
+          {
+            prop: "age",
+            label: "年龄",
+            form: {
+              comp: {
+                name: "el-select",
+                options: [
+                  { value: "1", label: "选项1" },
+                  { value: "2", label: "选项2" },
+                ],
+              },
+            },
+          },
+          {
+            prop: "city",
+            label: "城市",
+          },
+          {
+            prop: "date",
+            label: "日期",
+          },
+        ],
+      };
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <el-button type="primary" @click="isEdit = !isEdit"
+      >切换第三列编辑状态</el-button
+    >
+    <sc-crud :search.sync="searchForm" :options="options" :data="data">
+    </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 {
+        renderColumns: [
+          { prop: "name", label: "姓名" },
+          {
+            prop: "gender",
+            label: "性别",
+            isEdit: true,
+          },
+          {
+            prop: "age",
+            label: "年龄",
+            isEdit: this.isEdit,
+          },
+          {
+            prop: "city",
+            label: "城市",
+          },
+          {
+            prop: "date",
+            label: "日期",
+            isEdit: true,
+          },
+        ],
+      };
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,154 @@
+<template>
+  <div>
+    <div class="demo-section">
+      <h3>方法调用示例：</h3>
+      <el-button @click="setFirstRowEdit">设置第一行编辑</el-button>
+      <el-button @click="setMultiRowEdit">设置多行编辑</el-button>
+      <el-button @click="cancelRowEdit">取消编辑</el-button>
+      <el-button @click="saveRowEdit">保存编辑</el-button>
+    </div>
+
+    <div style="margin-bottom: 20px;">
+      <h3>其他操作：</h3>
+      <el-button @click="addNewRow">新增行</el-button>
+      <el-button @click="addNewRowToFirst">新增至首行</el-button>
+      <el-button @click="clearAllEditStatus">清除所有编辑</el-button>
+      <el-button @click="showEditingStatus">显示编辑状态</el-button>
+    </div>
+
+    <sc-crud
+      :search.sync="searchForm"
+      ref="crud"
+      :options="options"
+      :data="data"
+    >
+    </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",
+        },
+      ],
+    };
+  },
+  computed: {
+    options() {
+      return {
+        editConfig: {
+          mode: "row",
+          trigger: "manual",
+          edit: true,
+        },
+        renderColumns: [
+          { prop: "name", label: "姓名" },
+          {
+            prop: "gender",
+            label: "性别",
+            form: {
+              comp: {
+                name: "el-select",
+                options: [
+                  { value: "男", label: "男" },
+                  { value: "女", label: "女" },
+                ],
+              },
+            },
+          },
+          { prop: "age", label: "年龄" },
+          { prop: "city", label: "城市" },
+          { prop: "date", label: "日期" },
+        ],
+      };
+    },
+  },
+  methods: {
+    // 设置第一行进入编辑状态
+    setFirstRowEdit() {
+      const firstRow = this.data[0];
+      this.$refs.crud.setRowEdit(firstRow, {
+        type: "edit",
+        prop: "name", // 聚焦到name列
+      });
+    },
+
+    // 设置多行进入编辑状态
+    setMultiRowEdit() {
+      const rows = this.data.slice(0, 2); // 获取前两行
+      this.$refs.crud.setRowEdit(rows, { type: "edit" });
+    },
+
+    // 取消编辑状态
+    cancelRowEdit() {
+      const editingRows = this.$refs.crud.getEditingRows();
+      this.$refs.crud.setRowEdit(editingRows, { type: "cancel" });
+    },
+
+    // 保存编辑状态
+    saveRowEdit() {
+      const editingRows = this.$refs.crud.getEditingRows();
+      this.$refs.crud.setRowEdit(editingRows, { type: "save" });
+    },
+
+    // 新增行
+    addNewRow() {
+      this.$refs.crud.addRow({
+        name: "新用户",
+        gender: "男",
+        age: 25,
+      });
+    },
+
+    // 在首行新增
+    addNewRowToFirst() {
+      this.$refs.crud.addRow(
+        {
+          name: "新用户",
+          gender: "男",
+          age: 25,
+        },
+        "first"
+      );
+    },
+
+    // 清除所有编辑状态
+    clearAllEditStatus() {
+      this.$refs.crud.clearAllEdit();
+    },
+
+    // 显示编辑状态信息
+    showEditingStatus() {
+      // 获取所有编辑状态的行
+      const editingRows = this.$refs.crud.getEditingRows();
+      console.log("正在编辑的行:", editingRows);
+    },
+  },
+};
+</script>