vue-super-crud 1.7.1

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

@@ -0,0 +1,72 @@
+<template>
+  <div v-if="isMounted">
+    <sc-form v-model="form" :options="options">
+      <template #defaultDict>
+        <el-select v-model="form.defaultDict">
+          <el-option
+            v-for="item in $scDict.gender"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </template>
+      <template #normalDict>
+        <el-select v-model="form.normalDict">
+          <el-option
+            v-for="item in $scDict.countries"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </template>
+    </sc-form>
+
+    <!-- 展示标签文本 -->
+    <p>
+      使用增强方法 findLabel 获取标签：{{
+        $scDict.countries.findLabel(form.normalDict)
+      }}
+    </p>
+    <p>
+      使用增强方法 getOption 获取完整对象：{{
+        $scDict.countries.getOption(form.normalDict)
+      }}
+    </p>
+  </div>
+</template>
+
+<script>
+import { mockApi } from "../mock";
+export default {
+  data() {
+    return {
+      form: {},
+      tableData: [],
+      isMounted: false,
+      options: {
+        renderColumns: [
+          {
+            label: "默认字典",
+            prop: "defaultDict",
+          },
+          {
+            label: "普通注册字典",
+            prop: "normalDict",
+          },
+        ],
+      },
+    };
+  },
+  mounted() {
+    this.isMounted = true;
+    this.$scDict.register("countries", {
+      request: mockApi.getProvinces,
+    });
+    this.$scDict.countries.wait().then((res) => {
+      console.log("字典加载完成", res);
+    });
+  },
+};
+</script>

package/docs/.vuepress/components/dict/component.vue

@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <sc-form v-model="form" :options="options"> </sc-form>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      form: {
+        sexValue: [],
+      },
+      options: {
+        labelWidth: "150px",
+        renderColumns: [
+          {
+            prop: "cascade",
+            label: "级联数据格式化组件",
+            dict: "cascade",
+            comp: {
+              name: "sc-cascade-format",
+            },
+          },
+          {
+            prop: "cascade",
+            label: "级联组件",
+            dict: "cascade",
+            comp: {
+              name: "el-cascader",
+            },
+          },
+          {
+            prop: "sexValue",
+            label: " 值格式化标签组件",
+            dict: "gender",
+            comp: {
+              name: "sc-value-format",
+              color: "auto",
+            },
+          },
+          {
+            prop: "sexValue",
+            label: "选择器",
+            dict: "gender",
+            comp: {
+              name: "el-select",
+              multiple: true,
+            },
+          },
+          {
+            prop: "sexValue",
+            label: "开关组件",
+            dict: "gender",
+            comp: {
+              name: "el-switch",
+            },
+          },
+          {
+            prop: "sexValue",
+            label: "单选框组件",
+            dict: "gender",
+            comp: {
+              name: "el-radio-group",
+            },
+          },
+          {
+            prop: "sexValue",
+            label: "复选框组件",
+            dict: "gender",
+            comp: {
+              name: "el-checkbox-group",
+            },
+          },
+        ],
+      },
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>

package/docs/.vuepress/components/dict/localDict.vue

@@ -0,0 +1,68 @@
+<template>
+  <sc-crud v-if="isMounted" :data.sync="data" :options="options"> </sc-crud>
+</template>
+
+<script>
+import { mockApi } from "../mock";
+export default {
+  name: "AddressSelect",
+  data() {
+    return {
+      isMounted: false,
+      data: [
+        {
+          province: "",
+          city: "",
+        },
+        {
+          province: "",
+          city: "",
+        },
+      ],
+    };
+  },
+  mounted() {
+    this.isMounted = true;
+    this.$scDict.register("provinces", {
+      request: mockApi.getProvinces,
+      immediate: true,
+    });
+  },
+  computed: {
+    options() {
+      if (!this.isMounted) return {};
+      return {
+        renderColumns: [
+          {
+            label: "省份",
+            prop: "pro",
+            comp: {
+              name: "el-select",
+              options: this.$scDict.provinces,
+              on: {
+                change: (val, { row }) => {
+                  row.city = "";
+                },
+              },
+            },
+          },
+          {
+            label: "城市",
+            prop: "city",
+            dict: {
+              local: true,
+              request: mockApi.getCities,
+              // 监听省份变化，返回请求参数
+              params: ({ row }) => row.pro,
+              immediate: false,
+            },
+            comp: {
+              name: "el-select",
+            },
+          },
+        ],
+      };
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <sc-form
+      :options="options"
+      :loading.sync="loading"
+      v-model="data"
+      @submit="submit"
+    >
+    </sc-form>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      loading: false,
+      options: {
+        action: {
+          submit: {},
+          reset: {},
+        },
+        columns: 2,
+        columnGap: "10px",
+        renderColumns: [
+          {
+            label: "姓名",
+            prop: "name",
+            required: true,
+          },
+          {
+            label: "性别",
+            prop: "gender",
+          },
+        ],
+      },
+      data: {},
+    };
+  },
+  methods: {
+    submit(cb, form) {
+      setTimeout(() => {
+        cb();
+      }, 500);
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <div style="margin: 0 0 20px 40px;">
+      <div>输入值：str2array-{{ data.strToArr }}</div>
+    </div>
+    <sc-form
+      ref="form"
+      :options="options"
+      :loading.sync="loading"
+      v-model="data"
+      @submit="submit"
+    >
+    </sc-form>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      loading: false,
+      dictData: [
+        {
+          value: "1",
+          label: "张三",
+        },
+        {
+          value: "2",
+          label: "李四",
+        },
+      ],
+
+      data: {
+        strToArr: "1,2",
+      },
+    };
+  },
+  computed: {
+    options() {
+      return {
+        action: {
+          submit: {},
+          reset: {},
+        },
+        columns: 2,
+        columnGap: "10px",
+        renderColumns: [
+          {
+            label: "字符转数组",
+            prop: "strToArr",
+            comp: {
+              name: "sc-checkbox",
+              options: this.dictData,
+            },
+            formatData: {
+              formatValue: true,
+              input: (value, { row }) => {
+                if (!value) {
+                  return [];
+                }
+                return typeof value === "string" ? value.split(",") : value;
+              },
+              output: (value, { row }) => {
+                if (!value) {
+                  return "";
+                }
+                return value.join(",");
+              },
+            },
+          },
+          {
+            label: "字符转数组-快捷方式",
+            prop: "strToArr",
+            comp: {
+              name: "sc-checkbox",
+              options: this.dictData,
+            },
+            formatData: "strToArr",
+          },
+        ],
+      };
+    },
+  },
+  methods: {
+    submit(cb, form) {
+      setTimeout(() => {
+        cb();
+      }, 500);
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <el-button
+      type="primary"
+      size="small"
+      @click="data.deep.deep.name = '改变deep值'"
+      >改变deep值</el-button
+    >
+    <el-button type="primary" size="small" @click="data.name = '改变name值'"
+      >改变name值</el-button
+    >
+    {{ data }}
+    <sc-form :options="options" v-model="data"> </sc-form>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dictData: [
+        {
+          value: "1",
+          label: "张三",
+        },
+        {
+          value: "2",
+          label: "李四",
+        },
+      ],
+
+      data: {
+        deep: {
+          deep: {
+            name: "deep",
+          },
+        },
+      },
+    };
+  },
+  computed: {
+    options() {
+      return {
+        columns: 2,
+        columnGap: "10px",
+        renderColumns: [
+          {
+            label: "姓名",
+            prop: "name",
+            deepProp: "deep.deep.name",
+          },
+        ],
+      };
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <sc-form :options="options" :loading.sync="loading" v-model="data">
+    </sc-form>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      loading: false,
+      options: {
+        layout: "grid",
+        columns: 2,
+        columnGap: "10px",
+        rowGap: "10px",
+        renderColumns: [
+          {
+            label: "widthSize",
+            prop: "widthSize",
+            widthSize: 2,
+          },
+          {
+            label: "heightSize",
+            prop: "heightSize",
+            heightSize: 2,
+            comp: {
+              type: "textarea",
+              autosize: { minRows: 4 },
+            },
+          },
+          {
+            label: "姓名",
+            prop: "name",
+          },
+          {
+            label: "年龄",
+            prop: "age",
+          },
+        ],
+      },
+      data: {},
+    };
+  },
+};
+</script>

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

@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <sc-form :options="options" :loading.sync="loading" v-model="data">
+      <template #custom>
+        自定义内容
+      </template>
+    </sc-form>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      loading: false,
+      data: {},
+      options: {
+        group: true,
+        action: {
+          submit: true,
+        },
+        renderColumns: [
+          {
+            label: "slot自定义内容",
+            prop: "custom",
+          },
+          {
+            label: "render自定义内容",
+            render: (h, scope) => {
+              return "自定义内容";
+            },
+          },
+          {
+            label: "分组1",
+            columns: 2,
+            children: [
+              {
+                label: "子项1",
+                prop: "1",
+              },
+              {
+                label: "子项2",
+                prop: "2",
+              },
+            ],
+          },
+          {
+            label: "分组2",
+            children: [
+              {
+                label: "子项1",
+                prop: "3",
+              },
+              {
+                label: "子项2",
+                prop: "4",
+              },
+            ],
+          },
+        ],
+      },
+    };
+  },
+  computed: {},
+};
+</script>

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

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <sc-form :options="options" :loading.sync="loading" v-model="data">
+    </sc-form>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      loading: false,
+      data: {},
+    };
+  },
+  computed: {
+    options() {
+      return {
+        columns: 2,
+        renderColumns: [
+          {
+            label: "输入值显示",
+            prop: "name",
+          },
+          {
+            label: "hidden隐藏项",
+            prop: "hidden",
+            hidden: !this.data.name,
+          },
+          {
+            label: "show隐藏项",
+            prop: "show",
+            show: this.data.name,
+          },
+        ],
+      };
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <sc-form :options="options" :loading.sync="loading" v-model="data">
+    </sc-form>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      loading: false,
+      options: {
+        layout: "grid",
+        autoFill: true,
+        columnWidth: "200px",
+        renderColumns: [
+          {
+            label: "姓名姓名",
+            prop: "name",
+          },
+          {
+            label: "年龄年龄",
+            prop: "age",
+          },
+          {
+            label: "姓名姓名",
+            prop: "name",
+          },
+          {
+            label: "年龄年龄",
+            prop: "age",
+          },
+          {
+            label: "姓名姓名",
+            prop: "name",
+          },
+          {
+            label: "年龄年龄",
+            prop: "age",
+          },
+        ],
+      },
+      data: {},
+    };
+  },
+};
+</script>

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

@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <sc-form :options="options" :loading.sync="loading" v-model="data">
+      <template #slot-label>
+        label-slot
+      </template>
+    </sc-form>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      loading: false,
+      options: {
+        columns: 2,
+        hiddenLabel: false,
+        labelOverTip: false,
+        renderColumns: [
+          {
+            label: "标签",
+            prop: "label",
+          },
+          {
+            label: "标签Slot",
+            prop: "slot",
+          },
+          {
+            label: "标签Render",
+            prop: "render",
+            labelRender: () => <span>label-render</span>,
+          },
+          {
+            label: "隐藏标签",
+            prop: "label",
+            hiddenLabel: true,
+          },
+          {
+            label: "超出隐藏标签超出超出超出",
+            prop: "over",
+            labelOverTip: true,
+            position: true,
+          },
+        ],
+      },
+      data: {},
+    };
+  },
+};
+</script>