general-basic-form 2.0.2 → 2.0.4

package/src/GeneralBasicForm.vue

@@ -1,234 +0,0 @@
-<!--
- * @Author: 陈德立*******419287484@qq.com
- * @Date: 2021-08-20 17:14:53
- * @LastEditTime: 2023-11-14 15:18:20
- * @LastEditors: 陈德立*******419287484@qq.com
- * @Github: https://github.com/Alan1034
- * @Description: 
- * @FilePath: \GeneralBasicForm\src\GeneralBasicForm.vue
- * 
--->
-/** 通用基本表单。用在表单页面搜索栏 */
-
-<template>
-  <el-form
-    :model="queryParams"
-    ref="queryFormRef"
-    v-show="showSearch"
-    inline
-    label-position="left"
-    :label-width="labelWidth"
-    v-bind="$attrs"
-  >
-    <el-form-item
-      v-for="item in formItem"
-      :label="item.label"
-      :prop="item.prop"
-      :key="item.prop"
-      :rules="item.rules"
-    >
-      <Input v-if="item.type === 'input'" :item="item" />
-      <InputGraphicVerification
-        v-if="item.type === 'input-graphic-verification'"
-        :item="item"
-        :key="item.key"
-      />
-      <InputMobileVerification
-        v-if="item.type === 'input-mobile-verification'"
-        :item="item"
-      />
-      <Divider v-if="item.type === 'divider'" :item="item" />
-      <el-select
-        filterable
-        v-else-if="item.type === 'select'"
-        v-model="queryParams[item.prop]"
-        :size="size"
-        v-bind="item.selectSetting || selectSetting"
-      >
-        <el-option
-          v-for="dict in item.option || []"
-          :key="dict.value"
-          :label="dict.desc"
-          :value="dict.value"
-        />
-      </el-select>
-      <el-cascader
-        filterable
-        v-else-if="item.type === 'cascader'"
-        v-model="queryParams[item.prop]"
-        :size="size"
-        :options="item.options || []"
-        v-bind="item.selectSetting || selectSetting"
-      ></el-cascader>
-      <el-date-picker
-        v-else-if="item.type === 'date-picker'"
-        v-model="queryParams[item.prop]"
-        :size="size"
-        v-bind="item.datePackerSetting || datePackerSetting"
-      ></el-date-picker>
-      <InputNumber v-if="item.type === 'input-number'" :item="item" />
-    </el-form-item>
-    <slot></slot>
-    <el-form-item v-if="!formOnly">
-      <el-button
-        type="primary"
-        icon="el-icon-search"
-        :size="size"
-        @click="handleQuery"
-        >查询</el-button
-      >
-      <el-button icon="el-icon-refresh" :size="size" @click="resetQuery"
-        >重置</el-button
-      >
-    </el-form-item>
-  </el-form>
-</template>
-
-<script lang="ts">
-import { provide, ref, PropType, defineComponent } from "vue";
-import type { ItemType } from "./types/basicFrom";
-import { useRoute } from "vue-router";
-import Input from "./components/VBasic/input";
-import InputNumber from "./components/VBasic/input-number";
-import InputGraphicVerification from "./components/VBasic/input-graphic-verification";
-import InputMobileVerification from "./components/VBasic/input-mobile-verification";
-import Divider from "./components/VBasic/divider";
-
-export default defineComponent({
-  name: "GeneralBasicForm",
-  components: {
-    Input,
-    InputNumber,
-    InputGraphicVerification,
-    InputMobileVerification,
-    Divider,
-  },
-  props: {
-    showSearch: {
-      // 是否展示所有元素
-      type: Boolean,
-      default: true,
-    },
-    formOnly: {
-      // 是否只展示表单不展示按钮
-      type: Boolean,
-      default: false,
-    },
-    getList: {
-      // 查找数据调用的函数
-      type: Function,
-      default: () => {},
-    },
-    afterReset: {
-      // 在重置按钮点击完后但还没重新请求时触发的的函数
-      type: Function,
-      default: () => {},
-    },
-    formItem: {
-      // 定义表单的数据
-      type: Array as unknown as PropType<ItemType[]>,
-      default: [],
-    },
-    size: {
-      // 控制按钮大小
-      type: String,
-      default: "medium",
-    },
-    labelWidth: {
-      // 表单文字宽度
-      type: String,
-      default: "90px",
-    },
-    noUrlParameters: {
-      // 不接受和不改变url的参数
-      type: Boolean,
-      default: () => false,
-    },
-    formData: {
-      // 外部传入的表单数据，用于回填
-      type: Object,
-      default: () => {},
-    },
-  },
-  data() {
-    return {
-      selectSetting: {
-        placeholder: "请选择",
-        clearable: true,
-        style: "width: 200px",
-      },
-      datePackerSetting: {
-        style: "width: 227px",
-        "start-placeholder": "开始日期",
-        "end-placeholder": "结束日期",
-        type: "daterange",
-      },
-    };
-  },
-  setup(props) {
-    const { size, noUrlParameters, getList } = props;
-    const route = useRoute();
-    const queryParams = ref({
-      ...(noUrlParameters ? {} : route?.query),
-    }); // form表单数据
-    provide(/* 注入名 */ "queryParams", /* 值 */ queryParams);
-    provide(/* 注入名 */ "size", /* 值 */ size);
-    provide(/* 注入名 */ "getList", /* 值 */ getList);
-    // const { formItem } = toRefs(props);
-    // const { formItem } = props;
-    // console.log(formItem);
-    // const queryParams = {};
-    // formItem.forEach((item) => {
-    //   queryParams[item.prop] = "";
-    // });
-    return {
-      queryParams,
-    };
-  },
-  watch: {
-    formData(val) {
-      this.queryParams = {
-        ...(this.noUrlParameters ? {} : this.queryParams),
-        ...val,
-      };
-    },
-  },
-  methods: {
-    /** 搜索按钮操作 */
-    handleQuery() {
-      const params = { page: 1, limit: 10 };
-      const searchParams = {
-        ...this.$route?.query,
-        ...this.queryParams,
-        ...params,
-      };
-      if (!this.noUrlParameters) {
-        this.$router.push({
-          query: { ...searchParams },
-        });
-      }
-      this.getList({
-        ...searchParams,
-      });
-    },
-    /** 重置按钮操作 */
-    async resetQuery() {
-      this.$refs.queryFormRef.resetFields();
-      const params = { page: 1 };
-      if (!this.noUrlParameters) {
-        await this.$router.push({
-          query: { ...params },
-        });
-      }
-      this.queryParams = {
-        ...(this.noUrlParameters ? {} : this.$route?.query),
-      };
-      this.afterReset();
-      this.handleQuery();
-    },
-  },
-});
-</script>
-
-<style scoped>
-</style>

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

@@ -1,52 +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,
-      },
-    };
-  },
-  methods: {
-    currentInputComponent() {
-      return "slot-archive";
-    },
-  },
-});
-</script>

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

@@ -1,67 +0,0 @@
-<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");
-    return { queryParams, getList, size };
-  },
-  data() {
-    return {
-      inputSetting: {
-        ...inputDefaultSetting,
-        ...this.item.inputSetting,
-      },
-    };
-  },
-  // 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-graphic-verification/index.vue

@@ -1,56 +0,0 @@
-<!--
- * @Author: 陈德立*******419287484@qq.com
- * @Date: 2023-11-09 10:01:20
- * @LastEditTime: 2023-11-15 10:15:28
- * @LastEditors: 陈德立*******419287484@qq.com
- * @Github: https://github.com/Alan1034
- * @Description: 图形验证码组件
- * @FilePath: \GeneralBasicForm\src\components\VBasic\input-graphic-verification\index.vue
- * 
--->
-
-<script setup lang="ts">
-import Input from "../input/index.vue";
-import { ref, computed, PropType, toRefs } from "vue";
-import type {
-  BasicFormComponentsProps,
-  InputGraphicVerification,
-} from "../../../types/componentsProps";
-const { item } = defineProps<{ item: any }>();
-const { graphicSrc = "", getGraphic = () => {} }: InputGraphicVerification =
-  item;
-const loading = ref(false);
-
-const graphicClick = async () => {
-  // console.log('click', getGraphic);
-  if (getGraphic && !loading.value) {
-    loading.value = true;
-    await getGraphic();
-    loading.value = false;
-  }
-};
-</script>
-
-<template>
-  <div class="input-graphic-verification" v-loading="loading">
-    <Input :item="item" class="input" />
-    <img class="graphic" @click="graphicClick" :src="graphicSrc" />
-  </div>
-</template>
-
-<style lang="less" scoped>
-.input-graphic-verification {
-  display: flex;
-  gap: 12px;
-  width: 100%;
-  .input {
-    flex: auto;
-  }
-  .graphic {
-    width: 109px;
-    height: 43px;
-    object-fit: fill;
-    flex: none;
-  }
-}
-</style>

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

@@ -1,31 +0,0 @@
-<!--
- * @Author: 陈德立*******419287484@qq.com
- * @Date: 2023-11-09 10:01:20
- * @LastEditTime: 2023-11-14 15:35:16
- * @LastEditors: 陈德立*******419287484@qq.com
- * @Github: https://github.com/Alan1034
- * @Description: 手机验证码组件
- * @FilePath: \GeneralBasicForm\src\components\VBasic\input-mobile-verification\index.vue
- * 
--->
-
-<script setup lang="ts">
-import Input from "../input/index.vue";
-import { h, watch, onBeforeUpdate, nextTick } from "vue";
-import { BasicFormComponentsProps } from "../../../types/componentsProps";
-import VerificationButton from "./verification-button.vue";
-const { item } = defineProps<{item:any}>();
-// 重新赋值一下触发下面的代码，否则响应会在内部进行
-const mobileItem = item;
-mobileItem.template = {
-  append: () => {
-    return h(VerificationButton, {
-      getSmscode: mobileItem.getSmscode,
-    });
-  },
-};
-</script>
-
-<template>
-  <Input :item="mobileItem" class="input"> </Input>
-</template>

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

@@ -1,64 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, onBeforeUnmount, Ref } from "vue";
-import type { InputMobileVerification } from "../../../types/componentsProps";
-const { getSmscode } = defineProps<{ getSmscode: Function }>();
-
-const defaultText = "获取验证码";
-const restTime = 60;
-const buttonText: Ref<string | number> = ref(defaultText);
-const timer = ref(null);
-const buttonType = computed(() => buttonText.value === defaultText);
-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();
-});
-</script>
-
-<template>
-  <el-button
-    class="verifiaction-button"
-    :style="{
-      color: buttonType
-        ? 'var(--color-primary, #409EFF)'
-        : 'var(--text-color-placeholder, #A8ABB2)',
-      cursor: buttonType ? 'pointer' : 'default',
-    }"
-    @click="buttonClick"
-    >{{ buttonType ? defaultText : buttonText + "s" }}</el-button
-  >
-</template>
-
-<style lang="less" scoped>
-.verifiaction-button {
-  width: 109px;
-}
-</style>

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

@@ -1,30 +0,0 @@
-<!--
- * @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,
-});
-</script>
-
-<template>
-  <el-input-number
-    v-model="queryParams[item.prop]"
-    :size="size"
-    v-bind="inputSetting"
-  />
-</template>

package/src/components/setting.ts

@@ -1,15 +0,0 @@
-/*
- * @Author: 陈德立*******419287484@qq.com
- * @Date: 2023-11-08 18:01:09
- * @LastEditTime: 2023-11-08 18:01:25
- * @LastEditors: 陈德立*******419287484@qq.com
- * @Github: https://github.com/Alan1034
- * @Description: 
- * @FilePath: \GeneralBasicForm\src\components\setting.ts
- * 
- */
-export const inputDefaultSetting = {
-  placeholder: "请输入",
-  style: "width: 200px",
-  clearable: true,
-}

package/src/index.ts

@@ -1,15 +0,0 @@
-/*
- * @Author: 陈德立*******419287484@qq.com
- * @Date: 2021-08-20 17:05:30
- * @LastEditTime: 2023-11-07 15:05:39
- * @LastEditors: 陈德立*******419287484@qq.com
- * @Github: https://github.com/Alan1034
- * @Description: 
- * @FilePath: \GeneralBasicForm\src\index.ts
- * 
- */
-
-import GeneralBasicForm from './GeneralBasicForm.vue';
-
-export const VGeneralBasicForm = GeneralBasicForm
-

package/src/types/basicFrom.ts

@@ -1,48 +0,0 @@
-export enum FormType {
-  /**
-   * @description: 输入框
-   * @return {*}
-   */
-  'input' = 'input',
-  /**
-   * @description: 输入框/图像验证码
-   * @return {*}
-   */
-  'input-graphic-verification' = 'input-graphic-verification',
-  /**
-   * @description: 输入框/手机验证码
-   * @return {*}
-   */
-  'input-mobile-verification' = 'input-mobile-verification',
-  /**
-   * @description: 分割线
-   * @return {*}
-   */
-  'divider' = 'divider',
-  /**
-   * @description: 选择器
-   * @return {*}
-   */
-  'select' = 'select',
-  /**
-   * @description: 级联选择器
-   * @return {*}
-   */
-  'cascader' = 'cascader',
-  /**
-   * @description: 日期选择器
-   * @return {*}
-   */
-  'date-picker' = 'date-picker',
-  /**
-   * @description: 数字输入框
-   * @return {*}
-   */
-  'input-number' = 'input-number',
-}
-
-export interface ItemType {
-  type: FormType;
-  // 扩展属性
-  [key: string]: any
-};

package/src/types/componentsProps.ts

@@ -1,17 +0,0 @@
-
-export interface BasicFormComponentsProps {
-  item: any;
-  // queryParams: Object | String;
-  // size:String;
-  // getList?:Function
-}
-
-
-export interface InputGraphicVerification {
-  graphicSrc?: any
-  getGraphic?: Function
-  key: string | number
-};
-export interface InputMobileVerification {
-  getSmscode: Function
-};

package/tsconfig.json

@@ -1,14 +0,0 @@
-{
-  "include": [
-    "public/index.d.tsex.d.ts",
-    "src/**/*",
-    "src/**/*.vue",
-    "public/*",
-  ],
-  "exclude": [],
-  "compilerOptions": {
-    "declaration": true,
-    "allowJs": true,
-    "composite": true
-  }
-}