general-basic-form 2.0.62 → 2.0.63

package/README.md

@@ -118,7 +118,7 @@ getList会传出默认的参数,首次请求时会有页数和分页大小,重
             const params = VGeneralBasicFormRef.value['queryParams']
             resolve(params)
           } else {
-            resolve(false)
+            reject()
           }
         }
       )
@@ -127,17 +127,30 @@ getList会传出默认的参数,首次请求时会有页数和分页大小,重
 
 ![image-20211014191532067](https://raw.githubusercontent.com/Alan1034/PicturesServer/main/PicGo_imgs/202110141915657.png)
 
+parametersType类型介绍
+
+| parametersType形式 | 支持页面刷新 | 参数改变引起路由跳转 | 组件间共享数据 | 存储上限 | 浏览器兼容性 |
+| ------------------ | ------------ | -------------------- | -------------- | -------- | ------------ |
+| url                | 是           | 是                   | 是             | 中       | 高           |
+| data               | 否           | 否                   | 否             | 高       | 高           |
+| indexDB            | 是           | 否                   | 是             | 高       | 中           |
+
 数据示例:
 
     showSearch: true, // 显示搜索条件
     getList(); // 请求数据的函数
     afterReset(); // 在重置按钮点击完后但还没重新请求时触发的的函数
     formOnly:true // 只展示表单不展示按钮
-    noUrlParameters:true // 不接受和不改变url的参数
+    parametersType:"url" // 见parametersType类型介绍
     loading:false // 加载动画
     formData:{} // 注意，因为可能出现的性能问题在组件watch formData的变化时没有使用deep，所以有时候深度的修改会不生效，导致表单数据不完整
     noInputBlank: true //校验input框不能仅输入空格
     //例子：formData.value.x=y ✘ | formData.value={...formData.value,x:y} ✔
+    currentPageKey:"page", //当前页数key
+    pageSizeKey:"limit", //每页显示个数key
+    defCurrentPage:1, //默认的页数
+    defPageSize：10, //默认的每页显示个数
+    queryWhenReady:false,//初始化完成后自动触发查找数据函数，建议用这个this.$refs["VGeneralBasicFormRef"].handleQuery({ defaultPageFirst: false })
     formItem: [
     	{
           label: '',

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "general-basic-form",
-  "version": "2.0.62",
+  "version": "2.0.63",
   "description": "",
-  "main": "./dist/index.umd.cjs",
+  "main": "./src/index.ts",
   "type": "module",
   "scripts": {
     "build": "cross-env CURRENT_ENV=prod run-p type-check build-only",
@@ -19,7 +19,9 @@
     "vue",
     "vue2",
     "vue3",
-    "element-plus"
+    "element-plus",
+    "element-ui",
+    "Ant Design Vue"
   ],
   "author": "chendeli419287484@qq.com",
   "license": "ISC",
@@ -46,19 +48,8 @@
     "vue": ">=3.3.4",
     "vue-router": ">=4.2.4"
   },
-  "typings": "./dist/index.d.ts",
+  "typings": "./publish/index.d.ts",
   "dependencies": {
-    "network-spanner": "^1.2.8"
-  },
-  "module": "./dist/index.js",
-  "exports": {
-    ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.umd.cjs"
-    },
-    "./style": "./dist/style.css"
-  },
-  "files": [
-    "/dist"
-  ]
+    "network-spanner": "^1.2.14"
+  }
 }

package/script/link.ts

@@ -0,0 +1,36 @@
+/*
+ * @Author: 陈德立*******419287484@qq.com
+ * @Date: 2023-11-10 09:39:59
+ * @LastEditTime: 2023-11-15 18:04:19
+ * @LastEditors: 陈德立*******419287484@qq.com
+ * @Github: https://github.com/Alan1034
+ * @Description: link处理流程
+ * @FilePath: \GeneralBasicForm\script\link.ts
+ * 
+ */
+import path from "path";
+import fs from 'fs'
+import chalk from 'chalk'
+import { fileURLToPath } from 'url'
+const __filenameNew = fileURLToPath(import.meta.url)
+const __dirnameNew = path.dirname(__filenameNew)
+const updateMain = () => {
+  try {
+    const packageTxt = fs.readFileSync(path.join(__dirnameNew, '../package.json'), 'utf8');
+    const packageJson = JSON.parse(packageTxt);
+    const mainDir = "./src/index.ts"
+    delete packageJson.files
+    delete packageJson.module
+    delete packageJson.exports
+    packageJson.typings = "./publish/index.d.ts"
+    packageJson.main = mainDir
+    const versionData = JSON.stringify(packageJson, null, 2);
+    fs.writeFileSync(path.join(__dirnameNew, '../package.json'), versionData, 'utf8');
+    console.log(chalk.green.bold('修改入口配置成功！当前入口路径为为：' + mainDir));
+  } catch (error) {
+    console.log(chalk.red.bold('修改入口配置出错:', error.toString()));
+  }
+
+}
+
+updateMain()

package/script/unlink.ts

@@ -0,0 +1,45 @@
+/*
+ * @Author: 陈德立*******419287484@qq.com
+ * @Date: 2023-11-10 09:39:59
+ * @LastEditTime: 2023-11-16 15:09:53
+ * @LastEditors: 陈德立*******419287484@qq.com
+ * @Github: https://github.com/Alan1034
+ * @Description: unlink处理流程
+ * @FilePath: \GeneralBasicForm\script\unlink.ts
+ * 
+ */
+import path from "path";
+import fs from 'fs'
+import chalk from 'chalk'
+import { fileURLToPath } from 'url'
+const __filenameNew = fileURLToPath(import.meta.url)
+const __dirnameNew = path.dirname(__filenameNew)
+const updateMain = () => {
+  try {
+    const packageTxt = fs.readFileSync(path.join(__dirnameNew, '../package.json'), 'utf8');
+    const packageJson = JSON.parse(packageTxt);
+    const umdDir = "./dist/index.umd.cjs"
+    const esDir = "./dist/index.js"
+    packageJson.main = umdDir
+    packageJson.module = esDir
+    packageJson.exports = {
+      ".": {
+        "import": esDir,
+        "require": umdDir
+      },
+      "./style": "./dist/style.css"
+    }
+    packageJson.typings = "./dist/index.d.ts"
+    packageJson.files = [
+      "/dist"
+    ]
+    const versionData = JSON.stringify(packageJson, null, 2);
+    fs.writeFileSync(path.join(__dirnameNew, '../package.json'), versionData, 'utf8');
+    console.log(chalk.green.bold('修改入口配置成功！当前入口路径为为：' + umdDir));
+  } catch (error) {
+    console.log(chalk.red.bold('修改入口配置出错:', error.toString()));
+  }
+
+}
+
+updateMain()

package/src/Descriptions.vue

@@ -0,0 +1,107 @@
+<!--
+ * @Author: 陈德立*******419287484@qq.com
+ * @Date: 2023-12-08 17:45:01
+ * @LastEditTime: 2024-09-25 18:16:46
+ * @LastEditors: 陈德立*******419287484@qq.com
+ * @Github: https://github.com/Alan1034
+ * @Description: 对展示描述列表的封装
+ * @FilePath: \GeneralBasicForm\src\Descriptions.vue
+ * 
+-->
+<template>
+  <component :is="descriptions" :column="1" border class="form-width" v-bind="$attrs">
+    <component :is="descriptionsItem" v-for="(item, i) in renderFormItem" :key="item.prop" :label="item.label"
+      v-bind="item.descriptionsItemProps">
+      <RenderComponent v-if="item.render" :i="i" :render="item.render" :formData="formData"></RenderComponent>
+      <span v-else>
+        {{ formData[item.prop] }}
+      </span>
+    </component>
+  </component>
+</template>
+
+<script lang="ts" setup>
+import type { PropType, FunctionalComponent, VNode } from "vue";
+import { shallowRef, watch, ref } from "vue";
+import type { ComponentType } from "./types/componentType"
+import type { ItemType } from "./types/basicFrom";
+const props = defineProps({
+  formData: {
+    type: Object,
+    required: true,
+  },
+  formItem: {
+    type: Array as unknown as PropType<ItemType[]>,
+    required: true,
+  },
+  componentType: {
+    type: String as unknown as PropType<ComponentType>,
+    default: "Element Plus"
+  },
+  strict: {
+    // 使用strict参数后，如果formData内的某个字段没有值，对应的描述元素将不会展示（包括标签文字），但有render的字段仍然会展示
+    type: Boolean,
+    default: false
+  },
+});
+const renderFormItem = ref<ItemType[]>([])
+watch(
+  () => [props.formData, props.formItem],
+  ([NewFormData = {}, NewFormItem = <any>[]]) => {
+    let PhasedFormItem = NewFormItem
+    if (props.strict) {
+      // strict严格模式过滤formItem
+      // console.log(NewFormData)
+      // console.log(PhasedFormItem)
+      for (const key in NewFormData) {
+        if (Object.prototype.hasOwnProperty.call(NewFormData, key)) {
+          const element = NewFormData[key];
+          if (!element) {
+            PhasedFormItem = PhasedFormItem.filter((item) => {
+              return ((item.prop !== key) || (item.render))
+            })
+          }
+        }
+      }
+
+
+    }
+    // console.log(PhasedFormItem)
+    renderFormItem.value = PhasedFormItem
+  },
+  { immediate: true }
+);
+const descriptions = shallowRef("el-descriptions-item")
+const descriptionsItem = shallowRef("descriptions-item")
+switch (props.componentType) {
+  case "Element Plus":
+    descriptions.value = "el-descriptions-item"
+    descriptionsItem.value = "el-descriptions-item"
+    break;
+  case "Ant Design Vue":
+    descriptions.value = "a-descriptions"
+    descriptionsItem.value = "a-descriptions-item"
+    break;
+  default:
+    break;
+}
+type RenderComponentProps = {
+  i: any;
+  formData: Object;
+  render: (item: any) => VNode | String;
+};
+type Events = {};
+// 函数直接返回VNode模板会识别成[object Promise]，因此需要转换成函数式组件
+const RenderComponent: FunctionalComponent<RenderComponentProps, Events> = (
+  props,
+  context
+) => {
+  const { i, render, formData } = props;
+  return render({
+    row: formData,
+    $index: i,
+  });
+};
+</script>
+
+<style></style>

package/src/GeneralBasicForm.vue

@@ -0,0 +1,240 @@
+<!--
+ * @Author: 陈德立*******419287484@qq.com
+ * @Date: 2021-08-20 17:14:53
+ * @LastEditTime: 2025-03-10 21:02:58
+ * @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="getItemRules(item)">
+      <Input v-if="/^input$/i.test(item.type)" :item="item" />
+      <Radio v-if="/^radio$/i.test(item.type)" :item="item" />
+      <Select v-if="/^select$/i.test(item.type)" :item="item" />
+      <Divider v-if="/^divider$/i.test(item.type)" :item="item" />
+      <Cascader v-if="/^cascader$/i.test(item.type)" :item="item" />
+      <Checkbox v-if="/^checkbox$/i.test(item.type)" :item="item" />
+      <DatePicker v-if="/^date-picker$/i.test(item.type)" :item="item" />
+      <InputNumber v-if="/^input-number$/i.test(item.type)" :item="item" />
+      <slot v-if="/^form-item-slot$/i.test(item.type)" :name="item.name"></slot>
+      <InputMobileVerification v-if="/^input-mobile-verification$/i.test(item.type)" :item="item" />
+      <InputGraphicVerification v-if="/^input-graphic-verification$/i.test(item.type)" :item="item" :key="item.key" />
+    </el-form-item>
+    <slot></slot>
+    <el-form-item v-if="!formOnly">
+      <el-button type="primary" :size="size" @click="handleQuery" v-loading="formLoading">查询</el-button>
+      <el-button :size="size" @click="resetQuery">重置</el-button>
+    </el-form-item>
+    <slot name="behind-the-button" />
+  </el-form>
+</template>
+
+<script lang="ts">
+import { provide, ref, PropType, defineComponent, computed } from "vue";
+import type { ItemType } from "./types/basicFrom";
+// import { useRoute } from "vue-router";
+import Input from "./components/VBasic/input/index.vue";
+import InputNumber from "./components/VBasic/input-number/index.vue";
+import InputGraphicVerification from "./components/CustomCom/input-graphic-verification/index.vue";
+import InputMobileVerification from "./components/CustomCom/input-mobile-verification/index.vue";
+import Divider from "./components/VBasic/divider/index.vue";
+import Radio from "./components/VBasic/radio/index.vue";
+import Checkbox from "./components/VBasic/checkbox/index.vue";
+import DatePicker from "./components/VBasic/date-picker/index.vue";
+import Select from "./components/VBasic/select/index.vue";
+import Cascader from "./components/VBasic/cascader/index.vue";
+import { formLoadingKey } from "./injectKey";
+import {  HandleParamsData } from "network-spanner"
+export default defineComponent({
+  name: "GeneralBasicForm",
+  components: {
+    Input,
+    InputNumber,
+    InputGraphicVerification,
+    InputMobileVerification,
+    Divider,
+    Radio,
+    Checkbox,
+    DatePicker,
+    Select,
+    Cascader,
+  },
+  props: {
+    showSearch: {
+      // 是否展示所有元素
+      type: Boolean,
+      default: true,
+    },
+    loading: {
+      // 加载动画
+      type: Boolean,
+      default: false,
+    },
+    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: "default",
+    },
+    labelWidth: {
+      // 表单文字宽度
+      type: String,
+      default: "90px",
+    },
+    parametersType: {
+      type: String,
+      default: "url",
+    },
+    DBPrimaryKey: {
+      // indexDB的primaryKey，一般配合parametersType==="indexDB"使用
+      type: [String, Number],
+      required: false,
+    },
+    formData: {
+      // 外部传入的表单数据，用于回填
+      type: Object,
+      default: () => { },
+    },
+    noInputBlank: {
+      // 用于判断input框是否校验仅空格
+      type: Boolean,
+      default: () => false,
+    },
+    currentPageKey: {
+      type: String,
+      default: "page",
+    },
+    pageSizeKey: {
+      type: String,
+      default: "limit",
+    },
+    defCurrentPage: {
+      type: Number,
+      default: 1,
+    },
+    defPageSize: {
+      type: Number,
+      default: 10,
+    },
+    queryWhenReady: {
+      // 初始化完成后自动触发查找数据函数
+      type: Boolean,
+      default: () => false,
+    }
+  },
+  data() {
+    return {
+      formLoading: this.loading || false,
+      queryParams: HandleParamsData.initQueryParams({
+        vm: this
+      }), // form表单数据
+    };
+  },
+  provide() {
+    return {
+      // 显式提供一个计算属性
+      [formLoadingKey]: {
+        formLoading: computed(() => this.formLoading),
+        updateFormLoading: (val) => {
+          this.formLoading = val;
+        },
+      },
+      // 使用computed保持响应性
+      queryParams: computed(() => this.queryParams),
+    };
+  },
+  setup(props) {
+    const { size, getList } = props;
+    provide(/* 注入名 */ "size", /* 值 */ size);
+    provide(/* 注入名 */ "getList", /* 值 */ getList);
+  },
+  watch: {
+    formData: {
+      handler(val, oldVal) {
+        if (JSON.stringify(val) !== JSON.stringify(this.queryParams)) {
+          this.queryParams = {
+            ...this.queryParams,
+            ...val,
+          };
+        }
+        // console.log(this.queryParams);
+      },
+      // watch 默认是懒执行的：仅当数据源变化时，才会执行回调。但在某些场景中，我们希望在创建侦听器时，立即执行一遍回调。举例来说，我们想请求一些初始数据，然后在相关状态更改时重新请求数据。
+      // https://cn.vuejs.org/guide/essentials/watchers.html#deep-watchers
+      immediate: true,
+      deep: true,
+    },
+    queryParams: {
+      handler(val) {
+        this.$emit("update:formData", { ...val });
+      },
+      deep: true,
+    },
+    loading(val) {
+      // console.log("loading", val);
+      if (this.formLoading === val) {
+        return;
+      }
+      this.formLoading = val;
+    },
+    formLoading(val) {
+      // console.log("formLoading", val);
+      if (this.loading === val) {
+        return;
+      }
+      this.$emit("update:loading", val);
+    },
+  },
+
+  methods: {
+    /** 搜索按钮操作 */
+    handleQuery(queryParameter = <any>{}) {
+      HandleParamsData.handleQuery({
+        queryParameter, vm: this
+      })
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      HandleParamsData.resetQuery({
+        vm: this
+      })
+    },
+
+    getItemRules(item: any) {
+      const newRules = HandleParamsData.getItemRules({
+        item,
+        vm: this
+      })
+      return newRules;
+    },
+  },
+});
+</script>
+
+<style scoped></style>

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>