general-basic-form 2.0.63 → 2.0.64

package/src/InfiniteScrollList.vue

@@ -1,163 +0,0 @@
-<!--
- * @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

@@ -1,79 +0,0 @@
-<!-- @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

@@ -1,81 +0,0 @@
-<!-- @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

@@ -1,56 +0,0 @@
-<!--
- * @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

@@ -1,82 +0,0 @@
-<!--
- * @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

@@ -1,75 +0,0 @@
-<!--
- * @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

@@ -1,32 +0,0 @@
-<!--
- * @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

@@ -1,37 +0,0 @@
-<!--
- * @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

@@ -1,31 +0,0 @@
-<!--
- * @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

@@ -1,53 +0,0 @@
-<!--
- * @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>