general-basic-form 2.0.61 → 2.0.63

package/src/InfiniteScrollList.vue

@@ -0,0 +1,163 @@
+<!--
+ * @Author: 陈德立*******419287484@qq.com
+ * @Date: 2023-12-05 15:09:03
+ * @LastEditTime: 2024-11-21 19:37:38
+ * @LastEditors: 陈德立*******419287484@qq.com
+ * @Github: https://github.com/Alan1034
+ * @Description: 公共的无限滚动列表
+ * @FilePath: \GeneralBasicForm\src\InfiniteScrollList.vue
+ * 
+-->
+<template>
+  <el-checkbox-group v-model="checkedList" v-loading="loading" v-bind="props" v-if="props.checkbox">
+    <ul v-infinite-scroll="loadList" class="list" :infinite-scroll-disabled="ifbottom" :style="{ height }">
+      <li v-for="i in list" :key="i[id]" class="list-item">
+        <el-checkbox :value="i[id]" class="checkbox">{{ i[name] }}
+          <ExtraComponent :i="i" v-if="props.extra"></ExtraComponent>
+        </el-checkbox>
+      </li>
+    </ul>
+  </el-checkbox-group>
+  <ul v-infinite-scroll="loadList" class="list" :infinite-scroll-disabled="ifbottom" :style="{ height }" v-else
+    v-bind="props">
+    <li v-for="i in list" :key="i[id]" class="list-item">
+      <div class="checkbox">
+        {{ i[name] }}
+        <ExtraComponent :i="i" v-if="props.extra"></ExtraComponent>
+      </div>
+    </li>
+  </ul>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, watch } from "vue";
+import type { PropType, FunctionalComponent, VNode } from "vue";
+type SearchFunction = (page: Number) => Promise<[]>;
+type ExtraFunction = "false" | ((item: any) => VNode | String);
+const props = defineProps({
+  search: {
+    type: Function as PropType<SearchFunction>,
+    required: true,
+  },
+  checkbox: {
+    type: Boolean,
+    required: false,
+  },
+  id: {
+    type: String,
+    required: true,
+  },
+  name: {
+    type: String,
+    required: false,
+  },
+  extra: {
+    type: null as PropType<ExtraFunction>,
+    required: false,
+  },
+  defaultSelection: {
+    type: Array,
+    required: false,
+  },
+  height: {
+    type: String,
+    required: false,
+    default: "272px"
+  },
+});
+const { search, id, name, extra, height } = props;
+const list = ref<any[]>([]);
+const page = ref(1);
+const ifbottom = ref(false); //判断是否到底部，是的话就不再请求
+const checkedList = ref<any[]>([]);
+const loading = ref(false);
+type ExtraComponentProps = {
+  i: any;
+};
+type Events = {};
+// 函数直接返回VNode模板会识别成[object Promise]，因此需要转换成函数式组件
+const ExtraComponent: FunctionalComponent<ExtraComponentProps, Events> = (
+  props,
+  context
+) => {
+  const { i } = props;
+  // el-checkbox有固定高度，如果需要配置高度比较高，例如有换行的自定义extra，最好处理一下样式，例子：
+  // :deep(.el-checkbox) {
+  //   padding: 6px 16px !important;
+  //   display: flex;
+  //   align-items: baseline;
+  //   height: auto;
+  // }
+  return extra && extra !== "false" ? extra(i) : "";
+};
+const updateCheckedList = (newSelection: any[]) => {
+  checkedList.value = newSelection.map((item) => {
+    return typeof item === "object" ? item[id] : item;
+  });
+};
+watch(
+  () => props.defaultSelection,
+  (NewVal = [], oldVal = []) => {
+    updateCheckedList(NewVal);
+  },
+  { immediate: true }
+);
+const reset = () => {
+  lowReset();
+  checkedList.value = [];
+};
+const lowReset = () => {
+  page.value = 1;
+  list.value = [];
+  ifbottom.value = false;
+};
+const loadList = async () => {
+  if (loading.value) {
+    return;
+  }
+  if (ifbottom.value) {
+    return;
+  }
+  loading.value = true;
+  const resList = await search(page.value);
+  if (resList && resList.length > 0) {
+    list.value = [...list.value, ...resList];
+    page.value += 1;
+  } else {
+    ifbottom.value = true;
+  }
+  loading.value = false;
+  return
+};
+const refreshList = async() => {
+  lowReset();
+  await loadList();
+  return
+};
+const selectInfo =
+  computed(() =>
+    list.value.filter((item) => checkedList.value.includes(item[id]))
+  ) || {};
+defineExpose({
+  reset,
+  lowReset,
+  loadList,
+  selectInfo,
+  list,
+  ifbottom,
+  refreshList,
+  loading,
+});
+</script>
+
+<style lang="less" scoped>
+.list {
+  overflow: auto;
+  padding: 0;
+  margin: 0;
+  .checkbox {
+    width: calc(100% - 32px);
+    padding: 0 16px;
+  }
+}
+</style>

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,81 @@
+<!-- @format -->
+
+<!--
+ * @Author: 陈德立*******419287484@qq.com
+ * @Date: 2023-11-09 10:01:20
+ * @LastEditTime: 2024-11-21 19:14:22
+ * @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 { 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,56 @@
+<!--
+ * @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, ref } 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)
+const VerificationButtonRef = ref()
+switch (componentType) {
+  case "Element Plus":
+    inputType.value = EInput;
+    mobileItem.template = {
+      append: () => {
+        return h(VerificationButton, {
+          getSmscode: mobileItem.getSmscode,
+          item,
+          ref: VerificationButtonRef
+        });
+      },
+    };
+    break;
+  case "Ant Design Vue":
+    inputType.value = AInput
+    mobileItem.template = {
+      suffix: () => {
+        return h(VerificationButton, {
+          getSmscode: mobileItem.getSmscode,
+          item,
+          ref: VerificationButtonRef
+        });
+      },
+    };
+    break;
+  default:
+    break;
+}
+defineExpose({ VerificationButtonRef })
+</script>
+
+<template>
+  <component :is="inputType" :item="mobileItem" class="input" />
+</template>

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

@@ -0,0 +1,82 @@
+<!--
+ * @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 }
+defineExpose({ buttonClick, reset })
+</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>