general-basic-form 2.0.52 → 2.0.53

package/README.md

@@ -540,6 +540,7 @@ formItem:[ {
       }
   }]
 componentType:"Ant Design Vue"|"Element Plus"（默认）
+strict:Boolean //使用strict参数后，如果formData内的某个字段没有值，对应的描述元素将不会展示（包括标签文字）
 descriptionsItemProps:a-descriptions-item|el-descriptions-item的配置
 ```
 

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "general-basic-form",
-  "version": "2.0.52",
+  "version": "2.0.53",
   "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/Descriptions.vue

@@ -0,0 +1,106 @@
+<!--
+ * @Author: 陈德立*******419287484@qq.com
+ * @Date: 2023-12-08 17:45:01
+ * @LastEditTime: 2024-09-25 18:01:50
+ * @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内的某个字段没有值，对应的描述元素将不会展示（包括标签文字）
+    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
+            })
+          }
+        }
+      }
+
+
+    }
+    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,277 @@
+<!--
+ * @Author: 陈德立*******419287484@qq.com
+ * @Date: 2021-08-20 17:14:53
+ * @LastEditTime: 2024-09-04 17:18:32
+ * @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";
+
+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",
+    },
+    noUrlParameters: {
+      // 不接受和不改变url的参数
+      type: Boolean,
+      default: () => false,
+    },
+    formData: {
+      // 外部传入的表单数据，用于回填
+      type: Object,
+      default: () => {},
+    },
+    noInputBlank: {
+      // 用于判断input框是否校验仅空格
+      type: Boolean,
+      default: () => false,
+    },
+  },
+  data() {
+    return {
+      formLoading: this.loading || false,
+      trimRegex: /\S/,
+    };
+  },
+  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, oldVal) {
+        if (JSON.stringify(val) !== JSON.stringify(oldVal)) {
+          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,
+    },
+    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);
+    },
+  },
+  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();
+    },
+    getItemRules(item: any) {
+      const { type, rules = [] } = item;
+      const newRules = [...rules];
+      if (this.noInputBlank && type === "input") {
+        newRules.push({
+          pattern: this.trimRegex,
+          message: "请输入（不能仅输入空格）",
+          trigger: "blur",
+        });
+        return newRules;
+      }
+
+      return newRules;
+    },
+  },
+});
+</script>
+
+<style scoped>
+</style>

package/src/InfiniteScrollList.vue

@@ -0,0 +1,170 @@
+<!--
+ * @Author: 陈德立*******419287484@qq.com
+ * @Date: 2023-12-05 15:09:03
+ * @LastEditTime: 2024-07-16 10:46:16
+ * @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"
+    >
+      <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"
+    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: true,
+  },
+  extra: {
+    type: null as PropType<ExtraFunction>,
+    required: false,
+  },
+  defaultSelection: {
+    type: Array,
+    required: false,
+  },
+});
+const { search, id, name, extra } = 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;
+};
+const refreshList = () => {
+  lowReset();
+  loadList();
+};
+const selectInfo =
+  computed(() =>
+    list.value.filter((item) => checkedList.value.includes(item[id]))
+  ) || {};
+defineExpose({
+  reset,
+  lowReset,
+  loadList,
+  selectInfo,
+  list,
+  ifbottom,
+  refreshList,
+});
+</script>
+
+<style lang="less" scoped>
+.list {
+  height: 272px;
+  overflow: auto;
+  padding: 8px 0px;
+  .checkbox {
+    width: calc(100% - 32px);
+    padding: 0 16px;
+  }
+}
+</style>