general-basic-form 2.0.10 → 2.0.11

package/README.md

@@ -163,6 +163,7 @@ getList会传出默认的参数,首次请求时会有页数和分页大小,重
           prop: "spName",
           type: "select",
           multiple:true, //多选
+          selectSetting:{},
           option: [
             { value: "3", label: "满印" },
             { value: "1", label: "区域印花" },
@@ -173,7 +174,9 @@ getList会传出默认的参数,首次请求时会有页数和分页大小,重
           label: "创建时间",
           prop: "create_time",
           type: "date-picker",
-          "value-format": "yyyyMMdd"
+          datePackerSetting: {
+            "range-separator": "至",
+          }
         },
         {
           label: "二次工艺成本价格（人民币分）",
@@ -249,6 +252,7 @@ getList会传出默认的参数,首次请求时会有页数和分页大小,重
           label: "分类",
           prop: "分类",
           type: "cascader",
+          selectSetting:{},
           options: [
             {
               value: "zhinan",

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "general-basic-form",
-  "version": "2.0.10",
+  "version": "2.0.11",
   "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",
@@ -46,16 +46,5 @@
     "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"
-  ]
+  "typings": "./publish/index.d.ts"
 }

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/GeneralBasicForm.vue

@@ -0,0 +1,246 @@
+<!--
+ * @Author: 陈德立*******419287484@qq.com
+ * @Date: 2021-08-20 17:14:53
+ * @LastEditTime: 2023-12-07 17:07:44
+ * @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" />
+      <Radio v-if="item.type === 'radio'" :item="item" />
+      <Select v-if="item.type === 'select'" :item="item" />
+      <Divider v-if="item.type === 'divider'" :item="item" />
+      <Cascader v-if="item.type === 'cascader'" :item="item" />
+      <DatePicker v-if="item.type === 'date-picker'" :item="item" />
+      <InputNumber v-if="item.type === 'input-number'" :item="item" />
+      <InputMobileVerification
+        v-if="item.type === 'input-mobile-verification'"
+        :item="item"
+      />
+      <InputGraphicVerification
+        v-if="item.type === 'input-graphic-verification'"
+        :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/VBasic/input-graphic-verification/index.vue";
+import InputMobileVerification from "./components/VBasic/input-mobile-verification/index.vue";
+import Divider from "./components/VBasic/divider/index.vue";
+import Radio from "./components/VBasic/radio/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";
+
+export default defineComponent({
+  name: "GeneralBasicForm",
+  components: {
+    Input,
+    InputNumber,
+    InputGraphicVerification,
+    InputMobileVerification,
+    Divider,
+    Radio,
+    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",
+    },
+    noUrlParameters: {
+      // 不接受和不改变url的参数
+      type: Boolean,
+      default: () => false,
+    },
+    formData: {
+      // 外部传入的表单数据，用于回填
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      formLoading: this.loading || false,
+    };
+  },
+  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: {
+      handler(val) {
+        // console.log(val);
+        this.queryParams = {
+          ...(this.noUrlParameters ? {} : this.queryParams),
+          ...val,
+        };
+        // console.log(this.queryParams);
+      },
+      // watch 默认是懒执行的：仅当数据源变化时，才会执行回调。但在某些场景中，我们希望在创建侦听器时，立即执行一遍回调。举例来说，我们想请求一些初始数据，然后在相关状态更改时重新请求数据。
+      // https://cn.vuejs.org/guide/essentials/watchers.html#deep-watchers
+      immediate: true,
+      // 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);
+    },
+  },
+  provide() {
+    return {
+      // 显式提供一个计算属性
+      [formLoadingKey]: {
+        formLoading: computed(() => this.formLoading),
+        updateFormLoading: (val) => {
+          this.formLoading = 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/cascader/index.vue

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

package/src/components/VBasic/date-picker/index.vue

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

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>

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

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

@@ -0,0 +1,56 @@
+<!--
+ * @Author: 陈德立*******419287484@qq.com
+ * @Date: 2023-11-09 10:01:20
+ * @LastEditTime: 2023-11-16 10:52:01
+ * @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 { inject } from "vue";
+import { formLoadingKey } from "../../../injectKey";
+import type {
+  BasicFormComponentsProps,
+  InputGraphicVerification,
+} from "../../../types/componentsProps";
+const { item } = defineProps<{ item: any }>();
+const { graphicSrc = "", getGraphic = () => {} }: InputGraphicVerification =
+  item;
+
+const { formLoading, updateFormLoading } = inject<any>(formLoadingKey);
+// console.log(formLoading.value, "formLoading.value");
+const graphicClick = async () => {
+  // console.log('click', getGraphic);
+  if (getGraphic && !formLoading.value) {
+    await getGraphic();
+  }
+};
+</script>
+
+<template>
+  <div class="input-graphic-verification" v-loading="formLoading">
+    <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

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