general-basic-form 2.0.52 → 2.0.53

package/src/components/CustomCom/img-mask/index.vue

@@ -0,0 +1,79 @@
+<!-- @format -->
+
+<!--
+ * @Author: 陈德立*******419287484@qq.com
+ * @Date: 2024-09-05 16:09:07
+ * @LastEditTime: 2024-09-05 17:11:51
+ * @LastEditors: 陈德立*******419287484@qq.com
+ * @Github: https://github.com/Alan1034
+ * @Description: 制作遮罩层图片打碎与重组循环动画
+ * @FilePath: \GeneralBasicForm\src\components\CustomCom\img-mask\index.vue
+ * 
+-->
+<!-- @format -->
+
+<template>
+  <canvas ref="loadingCanvas"></canvas>
+</template>
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+const loadingCanvas = ref() as any
+const { imgSrc } = defineProps<{ imgSrc: string }>();
+onMounted(() => {
+  const img = new Image();
+  const pieces = [];
+  const piecesX = 8; // Number of horizontal pieces
+  const piecesY = 8; // Number of vertical pieces
+  let pieceHeight = 0;
+  let pieceWidth = 0;
+  const shatterAngle = 300; //
+  const canvas = loadingCanvas.value;
+  const ctx = canvas.getContext('2d');
+  img.onload = function () {
+    canvas.width = img.width;
+    canvas.height = img.height;
+    pieceWidth = Math.floor(img.width / piecesX);
+    pieceHeight = Math.floor(img.height / piecesY);
+    shatterImage();
+    animate(); // 开始对碎片的动画处理
+  };
+  img.src = imgSrc;
+  const shatterImage = () => {
+    for (let i = 0; i < piecesY; i++) {
+      for (let j = 0; j < piecesX; j++) {
+        pieces.push({
+          x: pieceWidth * j,
+          y: pieceHeight * i,
+          offsetX: (Math.random() - 0.5) * shatterAngle,
+          offsetY: (Math.random() - 0.5) * shatterAngle
+        });
+      }
+    }
+  }
+  const animate = () => {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    let renderFinish = true
+    pieces.forEach((piece, index) => {
+      ctx.drawImage(img, piece.x, piece.y, pieceWidth, pieceHeight, piece.x + piece.offsetX, piece.y + piece.offsetY, pieceWidth, pieceHeight);
+      // Gradually reposition pieces to original position
+      if (Math.abs(piece.offsetX) > 0.5) {
+        renderFinish = false
+        piece.offsetX *= 0.95;
+      }
+      if (Math.abs(piece.offsetY) > 0.5) {
+        piece.offsetY *= 0.95;
+        renderFinish = false
+      }
+    });
+    if (renderFinish) {
+      setTimeout(() => {
+        shatterImage();
+        animate();
+      }, 300);
+    } else {
+      requestAnimationFrame(animate);
+    }
+
+  }
+})
+</script>

package/src/components/CustomCom/input-graphic-verification/index.vue

@@ -0,0 +1,82 @@
+<!-- @format -->
+
+<!--
+ * @Author: 陈德立*******419287484@qq.com
+ * @Date: 2023-11-09 10:01:20
+ * @LastEditTime: 2024-09-05 17:07:07
+ * @LastEditors: 陈德立*******419287484@qq.com
+ * @Github: https://github.com/Alan1034
+ * @Description: 图形验证码组件
+ * @FilePath: \GeneralBasicForm\src\components\CustomCom\input-graphic-verification\index.vue
+ * 
+-->
+
+<script setup lang="ts">
+import EInput from "../../VBasic/input/index.vue";
+import AInput from "../../VABasic/input/index.vue";
+import anime from 'animejs/lib/anime.es.js';
+import { inject, shallowRef, computed } from "vue";
+import { formLoadingKey } from "../../../injectKey";
+import ImgMask from "../img-mask/index.vue";
+import type { InputGraphicVerification } from "../../../types/componentsProps";
+import type { ComponentType } from "../../../types/componentType";
+const { item, componentType = "Element Plus", loading = false } = defineProps<{ item: any, componentType?: ComponentType, loading?: boolean }>();
+const {
+  graphicSrc = "",
+  graphicAlt = "",
+  getGraphic = () => { },
+  key,
+}: InputGraphicVerification = item;
+
+const { formLoading } = inject<any>(formLoadingKey, false);
+const verificationLoading = computed(() => {
+  return formLoading?.value || loading
+})
+const graphicClick = async () => {
+  // console.log('click', getGraphic);
+  if (getGraphic && !verificationLoading?.value) {
+    await getGraphic();
+
+  }
+};
+
+const inputType = shallowRef(EInput)
+
+switch (componentType) {
+  case "Element Plus":
+    inputType.value = EInput
+    break;
+  case "Ant Design Vue":
+    inputType.value = AInput
+    break;
+  default:
+    break;
+}
+</script>
+
+<template>
+  <div class="input-graphic-verification">
+    <component :is="inputType" :item="item" class="input" />
+    <ImgMask class="graphic" :imgSrc="graphicSrc" v-if="verificationLoading" />
+    <img v-else class="graphic" @click="graphicClick" :src="graphicSrc" :alt="graphicAlt || `${key}`" />
+  </div>
+</template>
+
+<style lang="less" scoped>
+.input-graphic-verification {
+  display: flex;
+  gap: 12px;
+  width: 100%;
+
+  .input {
+    flex: auto;
+  }
+
+  .graphic {
+    width: 108px;
+    height: 43px;
+    object-fit: fill;
+    flex: none;
+  }
+}
+</style>

package/src/components/CustomCom/input-mobile-verification/index.vue

@@ -0,0 +1,52 @@
+<!--
+ * @Author: 陈德立*******419287484@qq.com
+ * @Date: 2023-11-09 10:01:20
+ * @LastEditTime: 2024-09-18 10:47:17
+ * @LastEditors: 陈德立*******419287484@qq.com
+ * @Github: https://github.com/Alan1034
+ * @Description: 手机验证码组件
+ * @FilePath: \GeneralBasicForm\src\components\CustomCom\input-mobile-verification\index.vue
+ * 
+-->
+
+<script setup lang="ts">
+import EInput from "../../VBasic/input/index.vue";
+import AInput from "../../VABasic/input/index.vue";
+import { h, shallowRef } from "vue";
+import type { ComponentType } from "../../../types/componentType";
+import VerificationButton from "./verification-button.vue";
+const { item, componentType = "Element Plus" } = defineProps<{ item: any, componentType?: ComponentType }>();
+// 重新赋值一下触发下面的代码，否则响应会在内部进行
+const mobileItem = item;
+const inputType = <any>shallowRef(EInput)
+switch (componentType) {
+  case "Element Plus":
+    inputType.value = EInput;
+    mobileItem.template = {
+      append: () => {
+        return h(VerificationButton, {
+          getSmscode: mobileItem.getSmscode,
+          item,
+        });
+      },
+    };
+    break;
+  case "Ant Design Vue":
+    inputType.value = AInput
+    mobileItem.template = {
+      suffix: () => {
+        return h(VerificationButton, {
+          getSmscode: mobileItem.getSmscode,
+          item,
+        });
+      },
+    };
+    break;
+  default:
+    break;
+}
+</script>
+
+<template>
+  <component :is="inputType" :item="mobileItem" class="input" />
+</template>

package/src/components/CustomCom/input-mobile-verification/verification-button.vue

@@ -0,0 +1,81 @@
+<!--
+ * @Author: 陈德立*******419287484@qq.com
+ * @Date: 2024-09-03 15:58:20
+ * @LastEditTime: 2024-09-18 10:54:40
+ * @LastEditors: 陈德立*******419287484@qq.com
+ * @Github: https://github.com/Alan1034
+ * @Description: 
+ * @FilePath: \GeneralBasicForm\src\components\CustomCom\input-mobile-verification\verification-button.vue
+ * 
+-->
+<script setup lang="ts">
+import { ref, computed, onBeforeUnmount, Ref, shallowRef } from "vue";
+import type { ComponentType } from "../../../types/componentType";
+const { getSmscode, componentType = "Element Plus", item } = defineProps<{ getSmscode: Function, componentType?: ComponentType, item: any }>();
+
+const defaultText = "获取验证码";
+const restTime = 60;
+const buttonText: Ref<string | number> = ref(defaultText);
+const timer = ref(null);
+const buttonType = computed(() => buttonText.value === defaultText);
+const buttonName = shallowRef("el-button")
+switch (componentType) {
+  case "Element Plus":
+    buttonName.value = "el-button"
+    break;
+  case "Ant Design Vue":
+    buttonName.value = "a-button"
+    break;
+  default:
+    break;
+}
+const reset = () => {
+  if (!timer) {
+    return;
+  }
+  clearInterval(timer.value);
+  timer.value = null;
+  buttonText.value = defaultText;
+};
+const buttonClick = async () => {
+  if (buttonText.value !== defaultText) {
+    return;
+  }
+  buttonText.value = restTime;
+  timer.value = setInterval(() => {
+    if (Number(buttonText.value) <= 0 || !buttonText.value) {
+      reset();
+      return;
+    } else {
+      buttonText.value = Number(buttonText.value) - 1;
+    }
+  }, 1000);
+  if (!getSmscode) {
+    return;
+  } else {
+    const statue = await getSmscode();
+    if (statue === false) {
+      reset();
+    }
+  }
+};
+onBeforeUnmount(() => {
+  reset();
+});
+const buttonSetting = { ...item.buttonSetting }
+</script>
+
+<template>
+  <component :is="buttonName" class="verifiaction-button" :style="{
+    color: buttonType
+      ? 'var(--color-primary, #409EFF)'
+      : 'var(--text-color-placeholder, #A8ABB2)',
+    cursor: buttonType ? 'pointer' : 'default',
+  }" @click="buttonClick" v-bind="buttonSetting">{{ buttonType ? defaultText : buttonText + "s" }}</component>
+</template>
+
+<style lang="less" scoped>
+.verifiaction-button {
+  width: 109px;
+}
+</style>

package/src/components/VABasic/input/index.vue

@@ -0,0 +1,75 @@
+<!--
+ * @Author: 陈德立*******419287484@qq.com
+ * @Date: 2024-09-04 18:01:00
+ * @LastEditTime: 2024-09-09 19:37:36
+ * @LastEditors: 陈德立*******419287484@qq.com
+ * @Github: https://github.com/Alan1034
+ * @Description: 
+ * @FilePath: \GeneralBasicForm\src\components\VABasic\input\index.vue
+ * 
+-->
+<template>
+  <a-input @keydown.enter="getList" @change="onInputChange" :value="queryParams[item.prop]" :size="size"
+    v-bind="inputSetting">
+    <template v-for="(templateEle, name) in item.template" #[name]>
+      <component :key="name" v-if="templateEle" :is="currentInputComponent()" :templateEle="templateEle" />
+    </template>
+  </a-input>
+</template>
+
+<script lang="ts">
+import { defineComponent, inject } from "vue";
+import { inputDefaultSetting } from "../../setting";
+
+export default defineComponent({
+  components: {
+    InputArchive: (props) => {
+      const { templateEle } = props;
+      return templateEle();
+    },
+  },
+  props: {
+    item: null, // null就是any
+  },
+  setup() {
+    const queryParams = inject("queryParams", {});
+    const getList = inject("getList", () => { });
+    const size = inject("size", "default");
+    const Form = inject("Form") as any;
+    const formItemContext = Form.useInjectFormItemContext();
+    return { queryParams, getList, size, formItemContext };
+  },
+  data() {
+    return {
+      inputSetting: {
+        ...inputDefaultSetting,
+        ...this.item.inputSetting,
+        ...this.item.setting,
+      },
+    };
+  },
+  // created() {
+  //   console.log("new", this.item);
+  //   console.log("new", this.inputSetting);
+  // },
+  methods: {
+    currentInputComponent() {
+      return "input-archive";
+    },
+    onInputChange(e: any) {
+      this.queryParams[this.item.prop] = (e.target as any).value
+      this.formItemContext.onFieldChange();
+    }
+  },
+  // watch: {
+  //   item(val) {
+  //     console.log("item", val);
+  //   },
+  //   size(val) {
+  //     console.log(val);
+  //   },
+  // },
+});
+</script>
+
+<style></style>

package/src/components/VBasic/cascader/index.vue

@@ -0,0 +1,32 @@
+<!--
+ * @Author: 陈德立*******419287484@qq.com
+ * @Date: 2023-11-08 18:03:42
+ * @LastEditTime: 2023-12-07 17:06:11
+ * @LastEditors: 陈德立*******419287484@qq.com
+ * @Github: https://github.com/Alan1034
+ * @Description: 
+ * @FilePath: \GeneralBasicForm\src\components\VBasic\cascader\index.vue
+ * 
+-->
+<script setup lang="ts">
+import { selectDefaultSetting } from "../../setting";
+import { ref, inject } from "vue";
+import { BasicFormComponentsProps } from "../../../types/componentsProps";
+const { item } = defineProps<{ item: any }>();
+const queryParams = inject("queryParams", {});
+const size = inject("size");
+const selectSetting = ref({
+  ...selectDefaultSetting,
+  ...item.selectSetting,
+  ...item.setting,
+});
+</script>
+
+<template>
+  <el-cascader
+    v-model="queryParams[item.prop]"
+    :size="size"
+    :options="item.options || []"
+    v-bind="selectSetting"
+  ></el-cascader>
+</template>

package/src/components/VBasic/checkbox/index.vue

@@ -0,0 +1,37 @@
+<!--
+ * @Author: 陈德立*******419287484@qq.com
+ * @Date: 2023-11-08 18:03:42
+ * @LastEditTime: 2023-12-28 14:51:25
+ * @LastEditors: 陈德立*******419287484@qq.com
+ * @Github: https://github.com/Alan1034
+ * @Description: 单选框组件
+ * @FilePath: \GeneralBasicForm\src\components\VBasic\checkbox\index.vue
+ * 
+-->
+<script setup lang="ts">
+import { ref, inject } from "vue";
+// import { BasicFormComponentsProps } from "../../../types/componentsProps";
+const { item } = defineProps<{ item: any }>();
+const queryParams = inject("queryParams", {});
+const size = inject("size");
+const checkboxGroupSetting = ref({
+  ...item.checkboxGroupSetting,
+  ...item.setting,
+});
+</script>
+
+<template>
+  <el-checkbox-group
+    v-model="queryParams[item.prop]"
+    :size="size"
+    v-bind="checkboxGroupSetting"
+  >
+    <el-checkbox
+      v-for="dict in item.option || []"
+      :size="size"
+      :key="dict.value"
+      v-bind="dict"
+      >{{ dict.label }}</el-checkbox
+    >
+  </el-checkbox-group>
+</template>

package/src/components/VBasic/date-picker/index.vue

@@ -0,0 +1,31 @@
+<!--
+ * @Author: 陈德立*******419287484@qq.com
+ * @Date: 2023-11-08 18:03:42
+ * @LastEditTime: 2023-12-07 16:49:21
+ * @LastEditors: 陈德立*******419287484@qq.com
+ * @Github: https://github.com/Alan1034
+ * @Description: 
+ * @FilePath: \GeneralBasicForm\src\components\VBasic\date-picker\index.vue
+ * 
+-->
+<script setup lang="ts">
+import { datePackerDefaultSetting } from "../../setting";
+import { ref, inject } from "vue";
+import { BasicFormComponentsProps } from "../../../types/componentsProps";
+const { item } = defineProps<{ item: any }>();
+const queryParams = inject("queryParams", {});
+const size = inject("size");
+const datePackerSetting = ref({
+  ...datePackerDefaultSetting,
+  ...item.datePackerSetting,
+  ...item.setting,
+});
+</script>
+
+<template>
+  <el-date-picker
+    v-model="queryParams[item.prop]"
+    :size="size"
+    v-bind="datePackerSetting"
+  />
+</template>

package/src/components/VBasic/divider/index.vue

@@ -0,0 +1,53 @@
+<!--
+ * @Author: 陈德立*******419287484@qq.com
+ * @Date: 2023-11-09 10:01:20
+ * @LastEditTime: 2023-11-10 16:51:18
+ * @LastEditors: 陈德立*******419287484@qq.com
+ * @Github: https://github.com/Alan1034
+ * @Description: 分割线
+ * @FilePath: \deal-front-endd:\work\GeneralBasicForm\src\components\VBasic\divider\index.vue
+ * 
+-->
+
+<template>
+  <el-divider v-bind="dividerSetting">
+    <template v-for="(templateEle, name) in item.template" #[name]>
+      <component
+        :key="name"
+        v-if="templateEle"
+        :is="currentInputComponent()"
+        :templateEle="templateEle"
+      />
+    </template>
+  </el-divider>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  components: {
+    slotArchive: (props) => {
+      const { templateEle } = props;
+      return templateEle();
+    },
+  },
+  props: {
+    item: null, // null就是any
+  },
+  setup() {},
+  data() {
+    return {
+      dividerSetting: {
+        ...this.item.dividerSetting,
+        ...this.item.setting,
+      },
+    };
+  },
+  methods: {
+    currentInputComponent() {
+      return "slot-archive";
+    },
+  },
+});
+</script>

package/src/components/VBasic/input/index.vue

@@ -0,0 +1,67 @@
+<!--
+ * @Author: 陈德立*******419287484@qq.com
+ * @Date: 2024-09-04 19:17:23
+ * @LastEditTime: 2024-09-10 09:51:10
+ * @LastEditors: 陈德立*******419287484@qq.com
+ * @Github: https://github.com/Alan1034
+ * @Description: 
+ * @FilePath: \GeneralBasicForm\src\components\VBasic\input\index.vue
+ * 
+-->
+<template>
+  <el-input @keydown.enter="getList" v-model="queryParams[item.prop]" :size="size" v-bind="inputSetting">
+    <template v-for="(templateEle, name) in item.template" #[name]>
+      <component :key="name" v-if="templateEle" :is="currentInputComponent()" :templateEle="templateEle" />
+    </template>
+  </el-input>
+</template>
+
+<script lang="ts">
+import { defineComponent, inject } from "vue";
+import { inputDefaultSetting } from "../../setting";
+export default defineComponent({
+  components: {
+    InputArchive: (props) => {
+      const { templateEle } = props;
+      return templateEle();
+    },
+  },
+  props: {
+    item: null, // null就是any
+  },
+  setup() {
+    const queryParams = inject("queryParams", {});
+    const getList = inject("getList");
+    const size = inject("size", 'default');
+    return { queryParams, getList, size };
+  },
+  data() {
+    return {
+      inputSetting: {
+        ...inputDefaultSetting,
+        ...this.item.inputSetting,
+        ...this.item.setting,
+      },
+    };
+  },
+  // created() {
+  //   console.log("new", this.item);
+  //   console.log("new", this.inputSetting);
+  // },
+  methods: {
+    currentInputComponent() {
+      return "input-archive";
+    },
+  },
+  // watch: {
+  //   item(val) {
+  //     console.log("item", val);
+  //   },
+  //   size(val) {
+  //     console.log(val);
+  //   },
+  // },
+});
+</script>
+
+<style></style>

package/src/components/VBasic/input-number/index.vue

@@ -0,0 +1,31 @@
+<!--
+ * @Author: 陈德立*******419287484@qq.com
+ * @Date: 2023-11-08 18:03:42
+ * @LastEditTime: 2023-11-14 15:35:38
+ * @LastEditors: 陈德立*******419287484@qq.com
+ * @Github: https://github.com/Alan1034
+ * @Description: 
+ * @FilePath: \GeneralBasicForm\src\components\VBasic\input-number\index.vue
+ * 
+-->
+<script setup lang="ts">
+import { inputDefaultSetting } from "../../setting";
+import { ref, inject } from "vue";
+import { BasicFormComponentsProps } from "../../../types/componentsProps";
+const { item } = defineProps<{item:any}>();
+const queryParams = inject("queryParams", {});
+const size = inject("size");
+const inputSetting = ref({
+  ...inputDefaultSetting,
+  ...item.inputSetting,
+  ...item.setting,
+});
+</script>
+
+<template>
+  <el-input-number
+    v-model="queryParams[item.prop]"
+    :size="size"
+    v-bind="inputSetting"
+  />
+</template>

package/src/components/VBasic/radio/index.vue

@@ -0,0 +1,37 @@
+<!--
+ * @Author: 陈德立*******419287484@qq.com
+ * @Date: 2023-11-08 18:03:42
+ * @LastEditTime: 2024-01-09 11:38:11
+ * @LastEditors: 陈德立*******419287484@qq.com
+ * @Github: https://github.com/Alan1034
+ * @Description: 单选框组件
+ * @FilePath: \GeneralBasicForm\src\components\VBasic\radio\index.vue
+ * 
+-->
+<script setup lang="ts">
+import { ref, inject } from "vue";
+// import { BasicFormComponentsProps } from "../../../types/componentsProps";
+const { item } = defineProps<{ item: any }>();
+const queryParams = inject("queryParams", {});
+const size = inject("size");
+const radioGroupSetting = ref({
+  ...item.radioGroupSetting,
+  ...item.setting,
+});
+</script>
+
+<template>
+  <el-radio-group
+    v-model="queryParams[item.prop]"
+    :size="size"
+    v-bind="radioGroupSetting"
+  >
+    <el-radio
+      v-for="dict in item.option || []"
+      :size="size"
+      :key="dict.value"
+      v-bind="dict"
+      >{{ dict.label }}</el-radio
+    >
+  </el-radio-group>
+</template>