vue-super-crud 1.7.1

package/docs/.vuepress/components/crud/crudEvents/events.vue

@@ -0,0 +1,188 @@
+<template>
+  <div>
+    <sc-crud
+      :search.sync="searchForm"
+      :options="options"
+      :data="data"
+      @view="view"
+      @add="add"
+      @edit="edit"
+      @save="save"
+      @delete="handleDelete"
+      @cancel="cancel"
+      @change="change"
+      @getDetail="getDetail"
+    >
+    </sc-crud>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      searchForm: {},
+      options: {
+        action: {
+          view: true,
+          edit: true,
+          delete: true,
+        },
+        handleRow: {
+          add: true,
+        },
+        renderColumns: [
+          { prop: "name", label: "昵称", search: true, form: true },
+          {
+            prop: "username",
+            label: "姓名",
+            search: {
+              comp: {
+                name: "el-date-picker",
+              },
+            },
+            form: true,
+          },
+          {
+            prop: "gender",
+            label: "性别",
+            form: true,
+          },
+        ],
+      },
+      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: {
+    getDetail(done, scope, unLoading) {
+      this.detailApi().then((res) => {
+        done(res.data);
+        this.$message.success("获取详情");
+      });
+    },
+    // 点击新增触发 add（行编辑与单元格编辑只有在保存后才会改变数据）
+    add(done, scope, unLoading) {
+      this.$message.success("新增自定义参数");
+      // 传入自定义新增参数
+      done({
+        name: "测试",
+        username: "自定义新增参数",
+        gender: "男",
+      });
+    },
+    // 点击编辑触发 edit
+    edit(done, scope, unLoading) {
+      done({
+        // 自定义进入编辑时的参数
+        ...scope.row,
+        username: "自定义进入编辑时的参数",
+      });
+    },
+    // 点击保存触发 save（自由编辑没有save事件）
+    save(done, scope, unLoading) {
+      console.log(scope.mode);
+      if (scope.mode === "add") {
+        this.addApi(scope.row).then((res) => {
+          done({
+            // 自定义保存参数
+            ...scope.row,
+            gender: "自定义保存参数",
+          });
+        });
+      } else {
+        this.editApi(scope.row)
+          .then((res) => {})
+          .catch(() => {
+            unLoading(); // 失败时，手动停止loading
+            this.$message.error("保存失败");
+          });
+      }
+    },
+    // 点击查看触发 view
+    view(done, scope, unLoading) {
+      done();
+    },
+    // 点击删除触发 delete
+    handleDelete(done, scope, unLoading) {
+      this.deleteApi(scope.row).then((res) => {
+        done();
+      });
+    },
+    // 点击取消触发 cancel
+    cancel(done) {
+      done();
+      this.$message.success("取消编辑");
+    },
+    // 数据变化触发
+    change(done, scope) {
+      done();
+      setTimeout(() => {
+        this.$message.success("change，事件模式：" + scope.mode);
+      }, 500);
+    },
+    // 模拟请求api，在真实请求中除了 detailApi 不需要传参给本地，刷新列表即可
+    addApi(params) {
+      return new Promise((resolve, reject) => {
+        setTimeout(() => {
+          resolve();
+        }, 500);
+      });
+    },
+    editApi(params) {
+      return new Promise((resolve, reject) => {
+        setTimeout(() => {
+          reject();
+        }, 500);
+      });
+    },
+    deleteApi() {
+      return new Promise((resolve, reject) => {
+        setTimeout(() => {
+          resolve();
+        }, 500);
+      });
+    },
+    detailApi(scope) {
+      return new Promise((resolve, reject) => {
+        setTimeout(() => {
+          resolve({
+            code: 200,
+            msg: "success",
+            data: {
+              createTime: "2018-06-02 12:28:47",
+              createUser: 94,
+              id: 56,
+              idNumber: "8",
+              name: "识间华中张认1",
+              password: "sed laboris",
+              phone: "18157668675",
+              gender: "男",
+              age: 20,
+              status: 35,
+              updateTime: "2018-09-08 16:33:19",
+              updateUser: 58,
+              username: "石洋1",
+            },
+          });
+        }, 500);
+      });
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,142 @@
+<template>
+  <div>
+    <sc-crud title="原始数据" :options="rawOptions" :data="rawData" />
+
+    <sc-crud title="排序后数据" :options="options" :data="tableData" />
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    const columns = [
+      {
+        prop: "province",
+        label: "省份",
+        render: (h, { row }) => {
+          // 使用不同颜色区分不同省份
+          const colors = {
+            浙江: "#409EFF", // 蓝色
+            江苏: "#67C23A", // 绿色
+          };
+          return (
+            <span
+              style={{
+                color: colors[row.province] || "#909399",
+                fontWeight: "bold",
+              }}
+            >
+              {row.province}
+            </span>
+          );
+        },
+      },
+      {
+        prop: "city",
+        label: "城市",
+      },
+      { prop: "amount", label: "交易金额" },
+      { prop: "company", label: "公司名称" },
+    ];
+    return {
+      rawOptions: {
+        renderColumns: columns,
+      },
+      options: {
+        // 按省份、城市、交易金额的顺序进行多层级排序
+        sortProps: ["province", "city", "amount"],
+        sortMethod: (field, a, b) => {
+          if (field === "amount") {
+            return b[field] - a[field];
+          }
+        },
+        renderColumns: columns,
+      },
+      tableData: [],
+      rawData: [
+        {
+          province: "浙江",
+          city: "宁波",
+          company: "宁波中百",
+          amount: 3000,
+        },
+        {
+          province: "江苏",
+          city: "南京",
+          company: "南京银行",
+          amount: 9000,
+        },
+        {
+          province: "江苏",
+          city: "南京",
+          company: "南京银行",
+          amount: 4000,
+        },
+        {
+          province: "江苏",
+          city: "南京",
+          company: "南京银行",
+          amount: 3000,
+        },
+        {
+          province: "浙江",
+          city: "杭州",
+          company: "网易",
+          amount: 8000,
+        },
+        {
+          province: "江苏",
+          city: "苏州",
+          company: "苏州工业园",
+          amount: 4000,
+        },
+        {
+          province: "浙江",
+          city: "杭州",
+          company: "大华",
+          amount: 6000,
+        },
+        {
+          province: "浙江",
+          city: "宁波",
+          company: "杉杉股份",
+          amount: 5000,
+        },
+        {
+          province: "浙江",
+          city: "宁波",
+          company: "宁波中百",
+          amount: 1000,
+        },
+        {
+          province: "江苏",
+          city: "南京",
+          company: "南瑞集团",
+          amount: 7000,
+        },
+        {
+          province: "浙江",
+          city: "杭州",
+          company: "阿里巴巴",
+          amount: 10000,
+        },
+        {
+          province: "浙江",
+          city: "宁波",
+          company: "宁波中百",
+          amount: 2000,
+        },
+        {
+          province: "浙江",
+          city: "宁波",
+          company: "宁波中百",
+          amount: 3000,
+        },
+      ],
+    };
+  },
+  mounted() {
+    this.tableData = [...this.rawData];
+  },
+};
+</script>

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

@@ -0,0 +1,53 @@
+<template>
+  <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: {
+        init: true,
+        dynamicConfig: [
+          {
+            path: "firstChildren",
+            prop: "id",
+            label: "name",
+          },
+        ],
+        renderColumns: [
+          { prop: "materialCode", label: "编码" },
+          { prop: "materialName", label: "名称" },
+        ],
+      },
+      data: [],
+      total: 0,
+    };
+  },
+  methods: {
+    async getList() {
+      this.loading = true;
+      const { data, total } = await mockApi.getDynamicData(this.search);
+      this.data = data;
+      this.total = total;
+      this.loading = false;
+    },
+  },
+};
+</script>

package/docs/.vuepress/components/crud/genDynamicColumns/dynamicAndFixed.vue

@@ -0,0 +1,111 @@
+<template>
+  <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: {
+        init: true,
+        dynamicConfig: [
+          {
+            path: "firstChildren",
+            prop: "id",
+            label: "name",
+            columnConfig: (path, source) => {
+              return {
+                render: () => <div>空</div>,
+              };
+            },
+          },
+          {
+            path: "secondChildren",
+            prop: "sort",
+            label: (item) => `第${item.sort}轮报价`,
+            columnConfig: (path, source) => {
+              return {
+                children: [
+                  {
+                    label: "入选",
+                    prop: `${path}.choose`,
+                    comp: {
+                      name: "el-checkbox",
+                      trueLabel: "Y",
+                      falseLabel: "N",
+                    },
+                  },
+                  {
+                    label: "单价",
+                    prop: `${path}.productUnitPrice`,
+                    render: (h, { row }) => {
+                      return (
+                        <el-input
+                          v-model={source[row.$index].productUnitPrice}
+                        />
+                      );
+                    },
+                  },
+                  {
+                    label: "跟价",
+                    prop: `${path}.priceFollow`,
+                    render: (h, { row }) => {
+                      if (!source[row.$index].priceFollow) return;
+                      const isFollow = source[row.$index].priceFollow === "Y";
+                      return (
+                        <span
+                          style={{ color: isFollow ? "#67C23A" : "#F56C6C" }}
+                        >
+                          {isFollow ? "是" : "否"}
+                        </span>
+                      );
+                    },
+                  },
+                  {
+                    label: "降幅比例",
+                    prop: `${path}.pricePercentageChange`,
+                    formatter: (row) =>
+                      source[row.$index].pricePercentageChange &&
+                      source[row.$index].pricePercentageChange * 100 + "%",
+                  },
+                ],
+              };
+            },
+          },
+        ],
+        renderColumns: [
+          { prop: "materialCode", label: "编码" },
+          { prop: "materialName", label: "名称" },
+        ],
+      },
+      data: [],
+      total: 0,
+    };
+  },
+  methods: {
+    async getList() {
+      this.loading = true;
+      const { data, total } = await mockApi.getDynamicData(this.search);
+      this.data = data;
+      this.total = total;
+      this.loading = false;
+    },
+  },
+};
+</script>

package/docs/.vuepress/components/crud/genDynamicColumns/treeDynamic.vue

@@ -0,0 +1,68 @@
+<template>
+  <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: {
+        init: true,
+        dynamicConfig: [
+          {
+            path: "firstChildren",
+            prop: "id",
+            label: "name",
+            columnConfig: (path, source) => {
+              return {
+                render: () => <div>空</div>,
+              };
+            },
+          },
+          {
+            path: "secondChildren",
+            prop: "sort",
+            label: (item) => `第${item.sort}轮报价`,
+            columnConfig: (path, source) => {
+              return {
+                prop: `${path}.productUnitPrice`,
+              };
+            },
+          },
+        ],
+        renderColumns: [
+          { prop: "materialCode", label: "编码" },
+          { prop: "materialName", label: "名称" },
+        ],
+      },
+      data: [],
+      total: 0,
+    };
+  },
+  methods: {
+    async getList() {
+      this.loading = true;
+      const { data, total } = await mockApi.getDynamicData(this.search);
+      this.data = data;
+      this.total = total;
+      this.loading = false;
+    },
+  },
+};
+</script>

package/docs/.vuepress/components/crud/handleBar/handleRow.vue

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <sc-crud :search.sync="searchForm" :options="options" :data="data">
+      <template #handleRow-left="{size}">
+        <el-button :size="size">handleRow插槽</el-button>
+      </template>
+    </sc-crud>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      searchForm: {},
+      options: {
+        rowEdit: true,
+        handleRow: {
+          add: {
+            label: "自定义弹窗新增",
+          }, // 自定义弹窗新增按钮
+          batchDelete: {
+            label: "自定义批量删除",
+          }, // 自定义批量删除按钮
+          rowAdd: {
+            label: "定义行新增",
+          }, // 自定义行新增按钮
+        },
+        renderColumns: [
+          { prop: "name", label: "昵称", search: true },
+          {
+            prop: "username",
+            label: "姓名",
+            search: {
+              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: {},
+};
+</script>

package/docs/.vuepress/components/crud/handleBar/toolbar.vue

@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <sc-crud :search.sync="searchForm" :options="options" :data="data">
+      <template #toolbar-left="config">
+        <!-- ctx为crud组件实例 -->
+        <el-button :size="config.size">toolbar插槽</el-button>
+      </template>
+    </sc-crud>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      searchForm: {},
+      options: {
+        // 不需要自定义内置按钮时可以简写为数组 toolbar: [{label: "自定义按钮"...}]
+        toolbar: {
+          search: {
+            label: "自定义搜索显隐", // 自定义 hover 提示词
+          },
+          reset: {
+            label: "自定义重置", // 自定义 hover 提示词
+          },
+          zoom: {
+            label: "自定义最大化", // 自定义 hover 提示词
+          },
+          column: {
+            label: "自定义列设置", // 自定义 hover 提示词
+          },
+        },
+        renderColumns: [
+          { prop: "name", label: "昵称", search: true },
+          {
+            prop: "username",
+            label: "姓名",
+            search: {
+              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: {},
+};
+</script>