vue-super-crud 1.7.1

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

@@ -0,0 +1,82 @@
+<template>
+  <sc-crud
+    default-expand-all
+    :search.sync="search"
+    :options="options"
+    :data="data"
+    :total="total"
+    @getList="getList"
+  >
+  </sc-crud>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      data: [
+        {
+          id: 1,
+          name: "部门A",
+          manager: "张三",
+          children: [
+            {
+              id: 11,
+              name: "小组A-1",
+              manager: "李四",
+              children: [
+                {
+                  id: 111,
+                  name: "成员A-1-1",
+                  manager: "",
+                },
+              ],
+            },
+            {
+              id: 12,
+              name: "小组A-2",
+              manager: "王五",
+            },
+          ],
+        },
+        {
+          id: 2,
+          name: "部门B",
+          manager: "赵六",
+          children: [
+            {
+              id: 21,
+              name: "小组B-1",
+              manager: "",
+            },
+          ],
+        },
+      ],
+    };
+  },
+  computed: {
+    options() {
+      return {
+        editConfig: {
+          mode: "row",
+          trigger: "manual",
+          edit: {},
+        },
+        renderColumns: [
+          {
+            prop: "name",
+            label: "名称",
+            isEdit: false,
+          },
+          {
+            prop: "manager",
+            label: "负责人",
+            required: true,
+          },
+        ],
+      };
+    },
+  },
+  methods: {},
+};
+</script>

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

@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <el-button size="small" type="primary" @click="openDialog"
+      >component配置弹窗</el-button
+    >
+    <el-button size="small" type="primary" @click="renderDialog"
+      >render函数弹窗</el-button
+    >
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      form: {},
+    };
+  },
+  computed: {
+    renderColumns() {
+      return [
+        {
+          prop: "name",
+          label: "姓名",
+        },
+        {
+          prop: "age",
+          label: "年龄",
+        },
+        {
+          prop: "sex",
+          label: "性别",
+          comp: {
+            name: "el-checkbox-group",
+            options: [
+              {
+                label: "男",
+                value: "男",
+              },
+              {
+                label: "女",
+                value: "女",
+              },
+            ],
+          },
+        },
+      ];
+    },
+  },
+  methods: {
+    openDialog() {
+      this.$scDialog({
+        title: "comp配置",
+        width: "500px",
+        comp: {
+          name: "sc-form",
+          renderColumns: this.renderColumns,
+        },
+      }).show(
+        () => {
+          console.log(this.form, "this.form");
+          this.$message.success("确认");
+        },
+        () => {
+          this.$message.success("取消");
+        }
+      );
+    },
+    renderDialog() {
+      this.$scDialog({
+        title: "render函数",
+        width: "500px",
+        render: (h, vm) => {
+          return (
+            <sc-form v-model={this.form} renderColumns={this.renderColumns} />
+          );
+        },
+      }).show(
+        () => {
+          console.log(this.form, "this.form");
+          this.$message.success("确认");
+        },
+        () => {
+          this.$message.success("取消");
+        }
+      );
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

package/docs/.vuepress/components/dialog/baseUse/beforeConfirm.vue

@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <el-button size="small" type="primary" @click="openDialog"
+      >confirm 弹窗</el-button
+    >
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      form: {},
+    };
+  },
+  computed: {
+    renderColumns() {
+      return [
+        {
+          prop: "name",
+          label: "姓名",
+          required: true,
+        },
+        {
+          prop: "age",
+          label: "年龄",
+          required: true,
+        },
+        {
+          prop: "sex",
+          label: "性别",
+          comp: {
+            name: "el-checkbox-group",
+            options: [
+              {
+                label: "男",
+                value: "男",
+              },
+              {
+                label: "女",
+                value: "女",
+              },
+            ],
+          },
+        },
+      ];
+    },
+  },
+  methods: {
+    openDialog() {
+      this.$scDialog({
+        title: "弹窗",
+        width: "500px",
+        render: () => (
+          <sc-form
+            ref="form"
+            v-model={this.form}
+            renderColumns={this.renderColumns}
+          />
+        ),
+        confirm: async (cb) => {
+          this.$message.success("确认之前校验表单");
+          await this.$refs.form.validate();
+          cb();
+          console.log(this.form, "this.form");
+          this.$message.success("确认");
+        },
+        cancel: async (cb) => {
+          this.$message.error("取消之前");
+          cb();
+        },
+      }).show();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

package/docs/.vuepress/components/dialog/baseUse/control.vue

@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <el-button size="small" type="primary" @click="openDialog">弹窗</el-button>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      form: {},
+    };
+  },
+  computed: {
+    renderColumns() {
+      return [
+        {
+          prop: "name",
+          label: "姓名",
+        },
+        {
+          prop: "age",
+          label: "年龄",
+        },
+        {
+          prop: "sex",
+          label: "性别",
+          comp: {
+            name: "el-checkbox-group",
+            options: [
+              {
+                label: "男",
+                value: "男",
+              },
+              {
+                label: "女",
+                value: "女",
+              },
+            ],
+          },
+        },
+      ];
+    },
+  },
+  methods: {
+    openDialog() {
+      const vm = this.$scDialog({
+        title: "手动控制弹窗",
+        width: "500px",
+        render: (h) => {
+          return (
+            <div>
+              <el-button
+                onClick={() => vm.hide()}
+                type="primary"
+                style="margin-bottom: 20px;"
+              >
+                点击关闭弹窗
+              </el-button>
+              <el-button
+                onClick={() => (vm.loading = true)}
+                type="primary"
+                style="margin-bottom: 20px;"
+              >
+                弹窗loading
+              </el-button>
+            </div>
+          );
+        },
+      });
+      vm.show(() => {
+        this.$message.success("确认");
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

package/docs/.vuepress/components/dialog/baseUse/drawer.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <el-button size="small" type="primary" @click="openDialog"
+      >抽屉式弹窗</el-button
+    >
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      form: {},
+    };
+  },
+  computed: {
+    renderColumns() {
+      return [
+        {
+          prop: "name",
+          label: "姓名",
+        },
+        {
+          prop: "age",
+          label: "年龄",
+        },
+        {
+          prop: "sex",
+          label: "性别",
+          comp: {
+            name: "el-checkbox-group",
+            options: [
+              {
+                label: "男",
+                value: "男",
+              },
+              {
+                label: "女",
+                value: "女",
+              },
+            ],
+          },
+        },
+      ];
+    },
+  },
+  methods: {
+    openDialog() {
+      this.$scDialog({
+        title: "弹窗",
+        width: "500px",
+        drawer: true,
+      }).show();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

package/docs/.vuepress/components/dialog/baseUse/footer.vue

@@ -0,0 +1,87 @@
+<template>
+  <div>
+    <el-button size="small" type="primary" @click="openDialog"
+      >自定义底部按钮</el-button
+    >
+    <el-button size="small" type="primary" @click="openDialog1"
+      >隐藏底部按钮</el-button
+    >
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      form: {},
+    };
+  },
+  computed: {
+    renderColumns() {
+      return [
+        {
+          prop: "name",
+          label: "姓名",
+        },
+        {
+          prop: "age",
+          label: "年龄",
+        },
+        {
+          prop: "sex",
+          label: "性别",
+          comp: {
+            name: "el-checkbox-group",
+            options: [
+              {
+                label: "男",
+                value: "男",
+              },
+              {
+                label: "女",
+                value: "女",
+              },
+            ],
+          },
+        },
+      ];
+    },
+  },
+  methods: {
+    openDialog() {
+      this.$scDialog({
+        title: "弹窗",
+        width: "500px",
+        footer: {
+          align: "left",
+          confirm: {
+            label: "确认111",
+            type: "primary",
+          },
+          cancel: false,
+          handles: [
+            {
+              label: "自定义",
+              type: "primary",
+              onClick: (vm) => {
+                vm.hide();
+              },
+            },
+          ],
+        },
+      }).show();
+    },
+    openDialog1() {
+      this.$scDialog({
+        title: "弹窗",
+        width: "500px",
+        footer: {
+          hidden: true,
+        },
+      }).show();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

package/docs/.vuepress/components/dialog/baseUse/insertSlot.vue

@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <el-button size="small" type="primary" @click="openDialog">弹窗</el-button>
+    <div v-insertSlot="dialogVm">
+      <div v-show="form.radio">v-show</div>
+      <div v-if="form.radio">v-if</div>
+      <div v-for="item in form.sex" :key="item">{{ item }}</div>
+      <sc-form v-model="form" :renderColumns="renderColumns"></sc-form>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      form: {
+        sex: [],
+      },
+      dialogVm: null,
+    };
+  },
+  computed: {
+    renderColumns() {
+      return [
+        {
+          prop: "radio",
+          label: "切换动态更新",
+          comp: {
+            name: "el-radio-group",
+            options: [
+              {
+                label: "隐藏",
+                value: "",
+              },
+              {
+                label: "展示",
+                value: "1",
+              },
+            ],
+          },
+        },
+        {
+          prop: "age",
+          label: "年龄",
+          hidden: this.form.radio,
+        },
+        {
+          prop: "sex",
+          label: "v-for",
+          comp: {
+            name: "el-checkbox-group",
+            options: [
+              {
+                label: "1111",
+                value: "1111",
+              },
+              {
+                label: "2222",
+                value: "2222",
+              },
+            ],
+          },
+        },
+      ];
+    },
+  },
+  methods: {
+    openDialog() {
+      this.dialogVm = this.$scDialog({
+        title: "v-insertSlot弹窗",
+        width: "500px",
+      }).show();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,91 @@
+<template>
+  <el-form v-if="isMounted" :model="form" label-width="80px">
+    <!-- 省份选择 -->
+    <el-form-item label="省份">
+      <el-select v-model="form.province" placeholder="请选择省份" clearable>
+        <el-option
+          v-for="item in $scDict.provinces"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+    </el-form-item>
+
+    <!-- 城市选择 -->
+    <el-form-item label="城市">
+      <el-select
+        v-model="form.city"
+        placeholder="请选择城市"
+        :disabled="!form.province"
+        clearable
+      >
+        <el-option
+          v-for="item in $scDict.cities"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+    </el-form-item>
+
+    <!-- 显示选中结果 -->
+    <el-form-item label="当前选择">
+      <div class="selected-info">
+        {{ selectedAddress }}
+      </div>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import { mockApi } from "../mock";
+export default {
+  data() {
+    return {
+      form: {
+        province: "",
+        city: "",
+      },
+      isMounted: false,
+    };
+  },
+  computed: {
+    selectedAddress() {
+      if (!this.isMounted) return;
+      if (!this.form.province) return "未选择";
+      const province = this.$scDict.provinces.findLabel(this.form.province);
+      const city = this.$scDict.cities.findLabel(this.form.city);
+      return city ? `${province} - ${city}` : province;
+    },
+  },
+  mounted() {
+    this.isMounted = true;
+    // 注册省份字典
+    this.$scDict.register("provinces", {
+      request: mockApi.getProvinces,
+      immediate: true,
+    });
+
+    // 注册城市字典，使用函数形式的params监听省份变化
+    this.$scDict.register("cities", {
+      request: mockApi.getCities,
+      // 监听省份变化，返回请求参数
+      params: () => this.form.province,
+    });
+  },
+  watch: {
+    // 当省份改变时，清空城市选择
+    "form.province"() {
+      this.form.city = "";
+    },
+  },
+};
+</script>
+
+<style scoped>
+.selected-info {
+  color: #409eff;
+  font-weight: bold;
+}
+</style>