general-basic-form 2.0.0 → 2.0.2

package/README.md

@@ -1,6 +1,6 @@
 # GeneralBasicForm
 
-一个兼容 Vue2 和 Vue3 的表单组件 <br/>
+一个兼容 Vue3 和 React(未来实现) 的表单组件 <br/>
 
 示例:
 
@@ -45,10 +45,11 @@ import GeneralBasicForm from 'general-basic-form'
       />
     
       <style lang="scss" scoped>
-      :deep {
-        .el-form-item {
-          margin-bottom: 22px;
-        }
+      :deep(.el-form-item) {
+        margin-bottom: 16px;
+      }
+      :deep(.el-divider--horizontal) {
+        margin: 8px 0px;
       }
       </style>
 
@@ -63,14 +64,29 @@ getList会传出默认的参数,首次请求时会有页数和分页大小,重
 
 表单数据校验需要拿到内部表单的ref
 
-    this.$refs["generalBasicForm"].$refs["queryFormRef"]    
-      .validate(
-        async (valid) => {
-          if (valid) { 
-            console.log(this.$refs["generalBasicForm"]["queryParams"]);
+    async getSmscode() {
+      const VGeneralBasicFormRef = this.$refs['VGeneralBasicFormRef'] as any
+      const state = await new Promise<boolean>((resolve, reject) => {
+        VGeneralBasicFormRef.$refs['queryFormRef']?.validateField(
+          'user_phone',
+          async (valid: FormValidateCallback | undefined) => {
+            if (valid) {
+              const { user_phone } = VGeneralBasicFormRef['queryParams']
+              const res: any = await SmscodeList({ user_phone })
+              if (res) {
+                console.log(res)
+                resolve(true)
+              } else {
+                resolve(false)
+              }
+            } else {
+              resolve(false)
+            }
           }
-        }
-      );
+        )
+      })
+      return state
+    },
 
 
 ![image-20211014191532067](https://raw.githubusercontent.com/Alan1034/PicturesServer/main/PicGo_imgs/202110141915657.png)
@@ -83,10 +99,25 @@ getList会传出默认的参数,首次请求时会有页数和分页大小,重
     formOnly:true // 只展示表单不展示按钮
     noUrlParameters:true // 不接受和不改变url的参数
     formItem: [
+    	{
+          label: '',
+          prop: 'bsName35',
+          type: 'divider',
+          dividerSetting: {
+          },
+          template: {
+            default: () => {
+              return "123123123";
+            },
+          },
+        },
         { label: "款式名称",
           prop: "bsName",
           type: "input",
-          placeholder: "请输入图片名称/分类名称/图片标签",
+       	  inputSetting: {
+            placeholder: '请输入手机验证码',
+            style: 'width: 100%'
+          },
           rules: [
             {
               message: "请输入信息"
@@ -101,7 +132,7 @@ getList会传出默认的参数,首次请求时会有页数和分页大小,重
               return <svg-icon icon-class="baifenbi" />;
             },
           },
-          maxlength: "3000"},
+    	},
         {
           label: "二次工艺",
           prop: "spName",
@@ -133,6 +164,40 @@ getList会传出默认的参数,首次请求时会有页数和分页大小,重
             },
           ],
         },
+        {
+          label: '',
+          prop: 'bsName2',
+          type: 'input-graphic-verification',
+          inputSetting: {
+            placeholder: '请输入图形验证码',
+            style: 'width: 100%'
+          },
+          rules: [
+            {
+              message: '请输入图形验证码',
+              trigger: 'blur'
+            }
+          ],
+          graphicSrc, // 请求图像的URL
+          getGraphic, // 重新请求图像的函数
+          key:Math.random(),  // 必传，图像更新后必须更新。如果URL会变化也可以用URL代替
+        },
+        {
+          label: '',
+          prop: 'bsName3',
+          type: 'input-mobile-verification',
+          inputSetting: {
+            placeholder: '请输入手机验证码',
+            style: 'width: 100%'
+          },
+          rules: [
+            {
+              message: '请输入手机验证码',
+              trigger: 'blur'
+            }
+          ]
+          getSmscode,// 获取验证码的回调函数,获取失败必须返回false,否则计时器不会重新计算
+        },
         {
           label: "分类",
           prop: "分类",
@@ -201,9 +266,6 @@ getList会传出默认的参数,首次请求时会有页数和分页大小,重
           ],
         },
       ],
-      //分别支持input输入框，select单选框，date-picker日期选择器，cascader层级选择器 四种组件
-      
-      //date-picker可以传入'start-placeholder'和'end-placeholder'，其他组件支持placeholder传入
     
       //rules为表单校验规则，每个组件都可以传入
     
@@ -212,5 +274,74 @@ getList会传出默认的参数,首次请求时会有页数和分页大小,重
       //suffix	输入框尾部内容，只对 type="text" 有效
       //prepend	输入框前置内容，只对 type="text" 有效
       //append	输入框后置内容，只对 type="text" 有效
+      
+      //divider支持template：
+      //default
+支持组件:
+
+ /**
+
+  \* @description: 输入框
+
+  */
+
+ 'input' = 'input',
+
+ /**
+
+  \* @description: 输入框/图像验证码
+
+  */
+
+ 'input-graphic-verification' = 'input-graphic-verification',
+
+ /**
+
+  \* @description: 输入框/手机验证码
+
+  */
+
+ 'input-mobile-verification' = 'input-mobile-verification',
+
+ /**
+
+  \* @description: 分割线
+
+  */
+
+ 'divider' = 'divider',
+
+ /**
+
+  \* @description: 选择器
+
+  */
+
+ 'select' = 'select',
+
+ /**
+
+  \* @description: 级联选择器
+
+  */
+
+ 'cascader' = 'cascader',
+
+ /**
+
+  \* @description: 日期选择器
+
+  */
+
+ 'date-picker' = 'date-picker',
+
+ /**
+
+  \* @description: 数字输入框
+
+  */
+
+ 'input-number' = 'input-number',
+
 安装：npm i general-basic-form<br/>
-install: npm i general-basic-form
+install: npm i general-basic-form

package/package.json

@@ -1,48 +1,46 @@
-{
-  "name": "general-basic-form",
-  "version": "2.0.0",
-  "description": "",
-  "files": [
-    "dist"
-  ],
-  "main": "./dist/index.umd.js",
-  "module": "./dist/index.mjs",
-  "exports": {
-    ".": {
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.umd.js"
-    }
-  },
-  "types": "./dist/index.d.ts",
-  "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"
-  },
-  "keywords": [
-    "general-basic-form",
-    "form",
-    "vue",
-    "vue2",
-    "vue3",
-    "element-plus"
-  ],
-  "author": "chendeli419287484@qq.com",
-  "license": "ISC",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/Alan1034/GeneralBasicForm"
-  },
-  "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",
-    "cross-env": "^7.0.3",
-    "npm-run-all": "^4.1.5",
-    "typescript": "^5.2.2",
-    "vite-plugin-image-optimizer": "^1.1.6"
-  }
-}
+{
+  "name": "general-basic-form",
+  "version": "2.0.2",
+  "description": "",
+  "main": "./src/index.ts",
+  "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"
+  },
+  "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",
+    "cross-env": "^7.0.3",
+    "chalk": "^2.4.2",
+    "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.4.2",
+    "vue": ">=3.3.4",
+    "vue-router": ">=4.2.4"
+  }
+}

package/script/link.ts

@@ -0,0 +1,34 @@
+/*
+ * @Author: 陈德立*******419287484@qq.com
+ * @Date: 2023-11-10 09:39:59
+ * @LastEditTime: 2023-11-10 10:26:53
+ * @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'
+
+const updateMain = () => {
+  try {
+    const packageTxt = fs.readFileSync(path.join(__dirname, '../package.json'), 'utf8');
+    const packageJson = JSON.parse(packageTxt);
+    const mainDir = "./src/index.ts"
+    delete packageJson.files
+    delete packageJson.module
+    delete packageJson.exports
+    delete packageJson.types
+    packageJson.main = mainDir
+    const versionData = JSON.stringify(packageJson, null, 2);
+    fs.writeFileSync(path.join(__dirname, '../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,42 @@
+/*
+ * @Author: 陈德立*******419287484@qq.com
+ * @Date: 2023-11-10 09:39:59
+ * @LastEditTime: 2023-11-10 10:29:27
+ * @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'
+
+const updateMain = () => {
+  try {
+    const packageTxt = fs.readFileSync(path.join(__dirname, '../package.json'), 'utf8');
+    const packageJson = JSON.parse(packageTxt);
+    const umdDir = "./dist/index.umd.js"
+    const esDir = "./dist/index.mjs"
+    packageJson.main = umdDir
+    packageJson.module = esDir
+    packageJson.exports = {
+      ".": {
+        "import": esDir,
+        "require": umdDir
+      }
+    }
+    packageJson.typings = "./dist/index.d.ts"
+    packageJson.files = [
+      "/dist"
+    ]
+    const versionData = JSON.stringify(packageJson, null, 2);
+    fs.writeFileSync(path.join(__dirname, '../package.json'), versionData, 'utf8');
+    console.log(chalk.green.bold('修改入口配置成功！当前入口路径为为：' + umdDir));
+  } catch (error) {
+    console.log(chalk.red.bold('修改入口配置出错:', error.toString()));
+  }
+
+}
+
+updateMain()

package/src/GeneralBasicForm.vue

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

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