general-basic-form 2.0.61 → 2.0.63

package/README.md

@@ -11,6 +11,7 @@
 | VInputMobilecVerification | | √ | √ | √ |  |
 | VInputGraphicVerification | | √ | √ | √ |  |
 | VTreeTransfer | √ |  |  |  | √ |
+| VTabs | √ | | | | √ |
 
 示例:
 
@@ -117,7 +118,7 @@ getList会传出默认的参数,首次请求时会有页数和分页大小,重
             const params = VGeneralBasicFormRef.value['queryParams']
             resolve(params)
           } else {
-            resolve(false)
+            reject()
           }
         }
       )
@@ -126,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,64 +1,55 @@
-{
-  "name": "general-basic-form",
-  "version": "2.0.61",
-  "description": "",
-  "main": "./dist/index.umd.cjs",
-  "type": "module",
-  "scripts": {
-    "build": "cross-env CURRENT_ENV=prod run-p type-check build-only",
-    "test:e2e": "playwright test",
-    "build-only": "vite build",
-    "type-check": "tsc --noEmit -p tsconfig.json --composite false",
-    "link": "tsx script/link.ts && yarn link",
-    "unlink": "tsx script/unlink.ts && yarn unlink && run-p build",
-    "unlinkSetting": "tsx script/unlink.ts"
-  },
-  "keywords": [
-    "general-basic-form",
-    "form",
-    "vue",
-    "vue2",
-    "vue3",
-    "element-plus"
-  ],
-  "author": "chendeli419287484@qq.com",
-  "license": "ISC",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Alan1034/GeneralBasicForm.git"
-  },
-  "devDependencies": {
-    "@playwright/test": "^1.36.1",
-    "@types/node": "^20.8.10",
-    "@vitejs/plugin-legacy": "^4.1.1",
-    "@vitejs/plugin-vue": "^4.2.3",
-    "@vitejs/plugin-vue-jsx": "^3.0.1",
-    "chalk": "^2.4.2",
-    "cross-env": "^7.0.3",
-    "less": "^4.2.0",
-    "npm-run-all": "^4.1.5",
-    "tsx": "^4.0.0",
-    "typescript": "^5.2.2",
-    "vite-plugin-image-optimizer": "^1.1.6"
-  },
-  "peerDependencies": {
-    "element-plus": ">=2.6.0",
-    "vue": ">=3.3.4",
-    "vue-router": ">=4.2.4"
-  },
-  "typings": "./dist/index.d.ts",
-  "module": "./dist/index.js",
-  "exports": {
-    ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.umd.cjs"
-    },
-    "./style": "./dist/style.css"
-  },
-  "files": [
-    "/dist"
-  ],
-  "dependencies": {
-    "network-spanner": "^1.2.8"
-  }
-}
+{
+  "name": "general-basic-form",
+  "version": "2.0.63",
+  "description": "",
+  "main": "./src/index.ts",
+  "type": "module",
+  "scripts": {
+    "build": "cross-env CURRENT_ENV=prod run-p type-check build-only",
+    "test:e2e": "playwright test",
+    "build-only": "vite build",
+    "type-check": "tsc --noEmit -p tsconfig.json --composite false",
+    "link": "tsx script/link.ts && yarn link",
+    "unlink": "tsx script/unlink.ts && yarn unlink && run-p build",
+    "unlinkSetting": "tsx script/unlink.ts"
+  },
+  "keywords": [
+    "general-basic-form",
+    "form",
+    "vue",
+    "vue2",
+    "vue3",
+    "element-plus",
+    "element-ui",
+    "Ant Design Vue"
+  ],
+  "author": "chendeli419287484@qq.com",
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Alan1034/GeneralBasicForm.git"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.36.1",
+    "@types/node": "^20.8.10",
+    "@vitejs/plugin-legacy": "^4.1.1",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vitejs/plugin-vue-jsx": "^3.0.1",
+    "chalk": "^2.4.2",
+    "cross-env": "^7.0.3",
+    "less": "^4.2.0",
+    "npm-run-all": "^4.1.5",
+    "tsx": "^4.0.0",
+    "typescript": "^5.2.2",
+    "vite-plugin-image-optimizer": "^1.1.6"
+  },
+  "peerDependencies": {
+    "element-plus": ">=2.6.0",
+    "vue": ">=3.3.4",
+    "vue-router": ">=4.2.4"
+  },
+  "typings": "./publish/index.d.ts",
+  "dependencies": {
+    "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>