vue-super-crud 1.7.1

package/docs/.vuepress/components/form/baseUse/tooltip.vue

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <sc-form :options="options" :loading.sync="loading" v-model="data">
+      <template #slot-tooltip>
+        提示slot
+      </template>
+    </sc-form>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      loading: false,
+      options: {
+        columns: 2,
+        labelWidth: "120px",
+        renderColumns: [
+          {
+            label: "提示",
+            prop: "tooltip",
+            tooltip: "提示",
+          },
+          {
+            label: "提示slot",
+            prop: "slot",
+          },
+          {
+            label: "提示render",
+            prop: "tooltipRender",
+            tooltipRender: () => <div>提示render</div>,
+          },
+        ],
+      },
+      data: {},
+    };
+  },
+};
+</script>

package/docs/.vuepress/components/form/baseUse/validate.vue

@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <sc-form :options="options" :loading.sync="loading" v-model="data">
+    </sc-form>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      loading: false,
+      options: {
+        columns: 2,
+        action: {
+          submit: {},
+          reset: {},
+        },
+        renderColumns: [
+          {
+            label: "必填项",
+            prop: "required",
+            required: true,
+          },
+          {
+            label: "正则",
+            prop: "regulars",
+            rules: ["number"],
+          },
+          {
+            label: "自定义",
+            prop: "custom",
+            rules: [
+              {
+                validator: (rule, value, callback) => {
+                  if (value) {
+                    callback();
+                  } else {
+                    callback(new Error("error1"));
+                  }
+                },
+                trigger: "change",
+              },
+            ],
+          },
+        ],
+      },
+      data: {},
+    };
+  },
+};
+</script>

package/docs/.vuepress/components/form/detail/base.vue

@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <div style="margin-bottom: 10px;">
+      <el-button @click="detail = !detail" size="small">切换模式</el-button>
+      <el-tag>当前模式：{{ detail ? "详情" : "编辑" }}</el-tag>
+    </div>
+    <sc-form :options="options" v-model="data"> </sc-form>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      detail: true,
+      dictData: [
+        {
+          value: "1",
+          label: "张三",
+        },
+        {
+          value: "2",
+          label: "李四",
+        },
+      ],
+
+      data: {
+        name: "张三",
+        gender: "男",
+        checkbox: ["1", "2"],
+        select: "1,2",
+      },
+    };
+  },
+  computed: {
+    options() {
+      return {
+        detail: this.detail,
+        columns: 2,
+        columnGap: "10px",
+        renderColumns: [
+          {
+            label: "姓名",
+            prop: "name",
+          },
+          {
+            label: "性别",
+            prop: "gender",
+          },
+          {
+            label: "checkbox",
+            prop: "checkbox",
+            comp: {
+              name: "sc-checkbox",
+              options: this.dictData,
+            },
+          },
+          {
+            label: "自定义详情渲染组件",
+            prop: "select",
+            comp: {
+              name: "sc-select",
+              multiple: true,
+              options: this.dictData,
+            },
+            detail: {
+              comp: {
+                name: "sc-value-format",
+                options: this.dictData,
+              },
+            },
+          },
+        ],
+      };
+    },
+  },
+};
+</script>

package/docs/.vuepress/components/form/detail/border.vue

@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <div style="margin-bottom: 10px;">
+      <el-button @click="detail = !detail" size="small">切换模式</el-button>
+      <el-tag>当前模式：{{ detail ? "详情" : "编辑" }}</el-tag>
+    </div>
+    <sc-form :options="options" v-model="data" border> </sc-form>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      detail: true,
+      dictData: [
+        {
+          value: "1",
+          label: "张三",
+        },
+        {
+          value: "2",
+          label: "李四",
+        },
+      ],
+
+      data: {
+        name: "张三张三张三张三张三张三张三张三张三张三张三张三张三",
+        gender: "男",
+        checkbox: ["1", "2"],
+        select: "1",
+        input:
+          "李四李四李四李四李四李四李四李四李四李四李四李四李四李四李四李四李四李四李四李四李四李四李四李四李四李四李四李四",
+      },
+    };
+  },
+  computed: {
+    options() {
+      return {
+        detail: this.detail,
+        columns: 3,
+        // columnGap: "10px",
+        renderColumns: [
+          {
+            label: "姓名",
+            prop: "name",
+          },
+          {
+            label: "性别",
+            prop: "gender",
+          },
+          {
+            label: "checkbox",
+            prop: "checkbox",
+            comp: {
+              name: "sc-checkbox",
+              options: this.dictData,
+            },
+            contentTip: "111111111",
+          },
+          {
+            label: "checkbox",
+            prop: "checkbox",
+            comp: {
+              name: "sc-checkbox",
+              options: this.dictData,
+            },
+          },
+          {
+            label: "select",
+            prop: "select",
+            widthSize: 2,
+            comp: {
+              name: "sc-select",
+              options: this.dictData,
+            },
+          },
+          {
+            label: "input",
+            prop: "input",
+            comp: {
+              type: "textarea",
+            },
+          },
+        ],
+      };
+    },
+  },
+};
+</script>

package/docs/.vuepress/components/form/detail/singleDetail.vue

@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <div style="margin-bottom: 10px;">
+      <el-button @click="detail = !detail" size="small">切换模式</el-button>
+      <el-tag>当前模式：{{ detail ? "详情" : "编辑" }}</el-tag>
+    </div>
+    <sc-form :options="options" v-model="data"> </sc-form>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      detail: true,
+      dictData: [
+        {
+          value: "1",
+          label: "张三",
+        },
+        {
+          value: "2",
+          label: "李四",
+        },
+      ],
+
+      data: {
+        name: "张三",
+        gender: "男",
+        checkbox: ["1", "2"],
+        select: "1",
+      },
+    };
+  },
+  computed: {
+    options() {
+      return {
+        columns: 2,
+        columnGap: "10px",
+        renderColumns: [
+          {
+            label: "姓名",
+            prop: "name",
+          },
+          {
+            label: "性别",
+            prop: "gender",
+          },
+          {
+            label: "checkbox",
+            prop: "checkbox",
+            isDetail: this.detail,
+            comp: {
+              name: "sc-checkbox",
+              options: this.dictData,
+            },
+          },
+          {
+            label: "select",
+            prop: "select",
+            isDetail: this.detail,
+            comp: {
+              name: "sc-select",
+              options: this.dictData,
+            },
+          },
+        ],
+      };
+    },
+  },
+};
+</script>

package/docs/.vuepress/components/formatData/baseUse.vue

@@ -0,0 +1,131 @@
+<template>
+  <div>
+    <sc-form v-model="form" :options="options" />
+
+    <!-- 格式化前后的值对比 -->
+    <div>
+      <h3>格式化数据展示：</h3>
+
+      <div style="margin-bottom: 20px;">
+        <div>省市区对象转数组：</div>
+        <div>
+          <div>原始值三个字段：{{ JSON.stringify(form.address) }}</div>
+          <div>格式化后：{{ form.$address }}</div>
+        </div>
+      </div>
+
+      <div style="margin-bottom: 20px;">
+        <div>字符串转数组：</div>
+        <div>
+          <div>原始值：{{ form.tags }}</div>
+          <div>格式化后：{{ form.$tags }}</div>
+        </div>
+      </div>
+
+      <div style="margin-bottom: 20px;">
+        <div>数字格式化：</div>
+        <div>
+          <div>原始值：{{ form.price }}</div>
+          <div>格式化后：{{ form.$price }}</div>
+        </div>
+      </div>
+
+      <div>
+        <div>自定义：</div>
+        <div>
+          <div>原始值：{{ form.custom }}</div>
+          <div>格式化后：{{ form.$custom }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { cityTreeData } from "../mock";
+import { pick } from "lodash-es";
+export default {
+  data() {
+    return {
+      pick,
+      form: {
+        address: {
+          province: "浙江",
+          city: "杭州",
+          district: "西湖区",
+        },
+        tags: "前端,Vue,React",
+        price: 1234.56,
+        custom: "123",
+      },
+      options: {
+        labelWidth: "160px",
+        renderColumns: [
+          {
+            label: "省市区对象转数组",
+            prop: "address",
+            required: true,
+            validateProp: "address.province",
+            formatData: {
+              type: "multiPropToArr",
+              isObject: true,
+              multiProp: ["province", "city", "district"],
+              formatValue: true, // 开启格式化值存储
+            },
+            comp: {
+              name: "el-cascader",
+              options: cityTreeData, // 省市区选项数据
+            },
+          },
+          {
+            label: "字符串转数组",
+            prop: "tags",
+            formatData: {
+              type: "strToArr",
+              formatValue: true,
+            },
+            comp: {
+              name: "el-select",
+              multiple: true,
+              options: [
+                { label: "前端", value: "前端" },
+                { label: "Vue", value: "Vue" },
+                { label: "React", value: "React" },
+              ],
+            },
+          },
+          {
+            label: "数字格式化",
+            prop: "price",
+            formatData: {
+              type: "numberFormat",
+              precision: 2,
+              prefix: "¥",
+              formatValue: true,
+            },
+            comp: {
+              name: "el-input",
+            },
+          },
+          {
+            label: "自定义格式化",
+            prop: "custom",
+            formatData: {
+              input: (value) => {
+                return value + "--custom";
+              },
+              output: (value) => {
+                return value.replace("--custom", "");
+              },
+              formatValue: true,
+            },
+            comp: {
+              name: "el-input",
+            },
+          },
+        ],
+      },
+    };
+  },
+};
+</script>