inl-ui 0.0.37 → 0.0.39

package/src/pageComponent/components/ProFormItem.tsx

@@ -1,197 +1,197 @@
-/*
- * @Abstract: 动态表单项 根据api返回的描述 渲染不同的表单元素
- * @Author: wang liang
- * @Date: 2022-03-29 15:56:57
- * @LastEditors: wang liang
- * @LastEditTime: 2022-04-22 16:59:34
- */
-
-import {
-  Ref,
-  defineComponent,
-  inject,
-  computed,
-  ref,
-  watch,
-  PropType,
-} from "vue";
-import { isObject } from "lodash";
-
-import {
-  FormItem,
-  Input,
-  InputNumber,
-  Switch,
-  Select,
-  SelectOption,
-} from "ant-design-vue";
-
-const ProFormItem = defineComponent({
-  props: {
-    description: {
-      type: Object,
-      required: true,
-    },
-    onChange: {
-      type: Function as PropType<(name: string, value: any) => void>,
-      required: true,
-    },
-  },
-  setup(props) {
-    // 参数描述
-    const paramDefine = computed(() => props.description.paramDefine);
-    // 参数值描述
-    const paramDefineValue = computed(() => props.description.paramDefineValue);
-    // 表单类型
-    const type = computed(() => paramDefine.value.type);
-    // 是否是开关表单
-    const isSwitch = computed(() => type.value === "boolean");
-
-    /* 是否修改状态 */
-    const isEdit = inject<Ref<boolean>>("isEdit")!;
-
-    /* ===== 输入框值 ===== */
-    const inputValue = ref();
-    watch(
-      [() => props.description, isEdit],
-      () => {
-        // 传入的描述变化 / 切换为只读模式  =>  恢复输入框的值
-        const value = props.description.paramDefineValue.value;
-        // boolean类型 true/false是字符串 所以需要单独判断
-        inputValue.value = isSwitch.value
-          ? value === "false"
-            ? false
-            : true
-          : value;
-      },
-      { deep: true, immediate: true }
-    );
-    // 输入框变化回调
-    const handleValueChange = (e: any) => {
-      if (isObject(e)) {
-        inputValue.value = (e as any).target.value;
-      } else {
-        inputValue.value = e;
-      }
-      // 通知父组件 值变化 父组件绑定到Form组件上(表单验证)
-      props.onChange(props.description.paramDefine.code, inputValue.value);
-    };
-
-    /* ==== 根据类型 返回不同的表单项 ===== */
-    let Filed: any = null;
-    switch (type.value) {
-      case "float":
-      case "int":
-        Filed = InputNumber;
-        break;
-      case "boolean":
-        Filed = Switch;
-        break;
-      case "select":
-        Filed = Select;
-        break;
-
-      default:
-        Filed = Input;
-        break;
-    }
-
-    // 动态表单规则
-    const rules = computed(() => {
-      const res: any[] = [];
-      // 最大值
-      if (paramDefine.value.maxValue !== null) {
-        res.push({
-          type: "number",
-          max: Number(paramDefine.value.maxValue),
-          message: `最大值为${paramDefine.value.maxValue}`,
-        });
-      }
-      // 最小值
-      if (paramDefine.value.minValue !== null) {
-        res.push({
-          type: "number",
-          min: Number(paramDefine.value.minValue),
-          message: `最小值为${paramDefine.value.minValue}`,
-        });
-      }
-      // 最大长度
-      if (paramDefine.value.limitLength !== null) {
-        res.push({
-          max: Number(paramDefine.value.limitLength),
-          message: `最多输入${paramDefine.value.limitLength}个字符`,
-        });
-      }
-      // 正则
-      if (paramDefine.value.regularExpression) {
-        res.push({
-          pattern: new RegExp(paramDefine.value.regularExpression),
-          message: `请输入正确的格式: ${paramDefine.value.regularExpression}`,
-        });
-      }
-      // 是否必须
-      if (paramDefine.value.required) {
-        res.push({
-          required: true,
-          message: `${paramDefine.value.name}是必填项`,
-        });
-      }
-      return res;
-    });
-
-    // 动态输入框prop
-    const inputProps = computed(() => {
-      const res: any = {};
-
-      // 单位
-      if (paramDefine.value.unit) {
-        res["addon-after"] = paramDefine.value.unit;
-      }
-      // 是否可修改
-      if (!paramDefine.value.writeable || !isEdit.value) {
-        res.disabled = true;
-      }
-
-      /* 值绑定 开关需要绑定checked属性 */
-      if (isSwitch.value) {
-        res.checked = inputValue.value;
-      } else {
-        res.value = inputValue.value;
-      }
-
-      return res;
-    });
-
-    return () => {
-      // console.log(isSwitch.value);
-
-      const vModel = isSwitch.value
-        ? [inputValue.value, "checked"]
-        : [inputValue.value, "value"];
-      return (
-        <FormItem
-          name={paramDefine.value.code}
-          key={paramDefine.value.id}
-          label={paramDefine.value.name}
-          rules={rules.value}
-        >
-          <Filed
-            style={{ width: isSwitch.value ? "" : "100%" }}
-            {...inputProps.value}
-            onChange={handleValueChange}
-          >
-            {paramDefine.value.listDataType === "json" &&
-              paramDefine.value.listDataValue &&
-              paramDefine.value.listDataValue.map((item: any) => (
-                <SelectOption key={item.value} value={item.value}>
-                  {item.name}
-                </SelectOption>
-              ))}
-          </Filed>
-        </FormItem>
-      );
-    };
-  },
-});
-
-export default ProFormItem;
+/*
+ * @Abstract: 动态表单项 根据api返回的描述 渲染不同的表单元素
+ * @Author: wang liang
+ * @Date: 2022-03-29 15:56:57
+ * @LastEditors: wang liang
+ * @LastEditTime: 2022-04-22 16:59:34
+ */
+
+import {
+  Ref,
+  defineComponent,
+  inject,
+  computed,
+  ref,
+  watch,
+  PropType,
+} from "vue";
+import { isObject } from "lodash";
+
+import {
+  FormItem,
+  Input,
+  InputNumber,
+  Switch,
+  Select,
+  SelectOption,
+} from "ant-design-vue";
+
+const ProFormItem = defineComponent({
+  props: {
+    description: {
+      type: Object,
+      required: true,
+    },
+    onChange: {
+      type: Function as PropType<(name: string, value: any) => void>,
+      required: true,
+    },
+  },
+  setup(props) {
+    // 参数描述
+    const paramDefine = computed(() => props.description.paramDefine);
+    // 参数值描述
+    const paramDefineValue = computed(() => props.description.paramDefineValue);
+    // 表单类型
+    const type = computed(() => paramDefine.value.type);
+    // 是否是开关表单
+    const isSwitch = computed(() => type.value === "boolean");
+
+    /* 是否修改状态 */
+    const isEdit = inject<Ref<boolean>>("isEdit")!;
+
+    /* ===== 输入框值 ===== */
+    const inputValue = ref();
+    watch(
+      [() => props.description, isEdit],
+      () => {
+        // 传入的描述变化 / 切换为只读模式  =>  恢复输入框的值
+        const value = props.description.paramDefineValue.value;
+        // boolean类型 true/false是字符串 所以需要单独判断
+        inputValue.value = isSwitch.value
+          ? value === "false"
+            ? false
+            : true
+          : value;
+      },
+      { deep: true, immediate: true }
+    );
+    // 输入框变化回调
+    const handleValueChange = (e: any) => {
+      if (isObject(e)) {
+        inputValue.value = (e as any).target.value;
+      } else {
+        inputValue.value = e;
+      }
+      // 通知父组件 值变化 父组件绑定到Form组件上(表单验证)
+      props.onChange(props.description.paramDefine.code, inputValue.value);
+    };
+
+    /* ==== 根据类型 返回不同的表单项 ===== */
+    let Filed: any = null;
+    switch (type.value) {
+      case "float":
+      case "int":
+        Filed = InputNumber;
+        break;
+      case "boolean":
+        Filed = Switch;
+        break;
+      case "select":
+        Filed = Select;
+        break;
+
+      default:
+        Filed = Input;
+        break;
+    }
+
+    // 动态表单规则
+    const rules = computed(() => {
+      const res: any[] = [];
+      // 最大值
+      if (paramDefine.value.maxValue !== null) {
+        res.push({
+          type: "number",
+          max: Number(paramDefine.value.maxValue),
+          message: `最大值为${paramDefine.value.maxValue}`,
+        });
+      }
+      // 最小值
+      if (paramDefine.value.minValue !== null) {
+        res.push({
+          type: "number",
+          min: Number(paramDefine.value.minValue),
+          message: `最小值为${paramDefine.value.minValue}`,
+        });
+      }
+      // 最大长度
+      if (paramDefine.value.limitLength !== null) {
+        res.push({
+          max: Number(paramDefine.value.limitLength),
+          message: `最多输入${paramDefine.value.limitLength}个字符`,
+        });
+      }
+      // 正则
+      if (paramDefine.value.regularExpression) {
+        res.push({
+          pattern: new RegExp(paramDefine.value.regularExpression),
+          message: `请输入正确的格式: ${paramDefine.value.regularExpression}`,
+        });
+      }
+      // 是否必须
+      if (paramDefine.value.required) {
+        res.push({
+          required: true,
+          message: `${paramDefine.value.name}是必填项`,
+        });
+      }
+      return res;
+    });
+
+    // 动态输入框prop
+    const inputProps = computed(() => {
+      const res: any = {};
+
+      // 单位
+      if (paramDefine.value.unit) {
+        res["addon-after"] = paramDefine.value.unit;
+      }
+      // 是否可修改
+      if (!paramDefine.value.writeable || !isEdit.value) {
+        res.disabled = true;
+      }
+
+      /* 值绑定 开关需要绑定checked属性 */
+      if (isSwitch.value) {
+        res.checked = inputValue.value;
+      } else {
+        res.value = inputValue.value;
+      }
+
+      return res;
+    });
+
+    return () => {
+      // console.log(isSwitch.value);
+
+      const vModel = isSwitch.value
+        ? [inputValue.value, "checked"]
+        : [inputValue.value, "value"];
+      return (
+        <FormItem
+          name={paramDefine.value.code}
+          key={paramDefine.value.id}
+          label={paramDefine.value.name}
+          rules={rules.value}
+        >
+          <Filed
+            style={{ width: isSwitch.value ? "" : "100%" }}
+            {...inputProps.value}
+            onChange={handleValueChange}
+          >
+            {paramDefine.value.listDataType === "json" &&
+              paramDefine.value.listDataValue &&
+              paramDefine.value.listDataValue.map((item: any) => (
+                <SelectOption key={item.value} value={item.value}>
+                  {item.name}
+                </SelectOption>
+              ))}
+          </Filed>
+        </FormItem>
+      );
+    };
+  },
+});
+
+export default ProFormItem;

package/src/pageComponent/components/SearchSelect.tsx

@@ -1,142 +1,142 @@
-/*
- * @Abstract: 可以搜索的选择下拉框 对Select组件的二次封装
- * @Author: wang liang
- * @Date: 2022-04-19 16:46:58
- * @LastEditors: wang liang
- * @LastEditTime: 2022-04-24 13:58:53
- */
-
-import { PropType, defineComponent, ref, watch, inject } from "vue";
-import useVModel from "@/pageComponent/hooks/useVModel";
-import { getInstance } from "@/api/axios";
-import { isNil, debounce, isEqual } from "lodash";
-import { every } from "@/pageComponent/utils/is";
-import faceName from "@/api/faceName";
-
-const SearchSelect = defineComponent({
-  emits: ["update:value"],
-  props: {
-    value: {
-      type: [String, Array, Number],
-    },
-    // 获取列表的url
-    getUrl: {
-      type: String,
-      required: true,
-    },
-    /* 额外的参数 必须有值才能搜索 */
-    extParams: {
-      type: Object,
-    },
-    valuePorp: {
-      type: Object as PropType<{ key: string; label: string }>,
-      default: () => ({}),
-    },
-    /* 需要排除的值  不展示在下拉列表中 也无法选中 */
-    excludeValues: {
-      type: Array,
-      default: () => [],
-    },
-    // 对话框是否打开，打开后重新获取数据
-    visible: {
-      type: Boolean,
-    },
-  },
-  setup(props, { emit, attrs }) {
-    const urlPrefix: any = inject("urlPrefix")!;
-    const instance = getInstance({
-      prefix: urlPrefix.prefix,
-      serverName: urlPrefix.serverName ?? faceName.common,
-    });
-    const modelValue = useVModel(props, "value", emit);
-
-    /* 列表 */
-    const optionList = ref([]);
-    const isFetching = ref(false);
-    let lastFetchId = 0;
-    const getOptionList = debounce(async (val: string) => {
-      if (
-        !props.extParams ||
-        every(props.extParams, (key, value) => !isNil(value))
-      ) {
-        const fetchId = lastFetchId;
-        // 获取下拉列表
-        optionList.value = [];
-        isFetching.value = true;
-        try {
-          // 调用api传入参数
-          const { data } = await instance.get(props.getUrl, {
-            params: { ...props.extParams, keyword: val },
-          });
-          if (lastFetchId !== fetchId) {
-            // for fetch callback order
-            return;
-          }
-          optionList.value = data;
-        } finally {
-          isFetching.value = false;
-        }
-      }
-    }, 300);
-    getOptionList("");
-
-    watch(
-      () => props.extParams,
-      (curr, prev) => {
-        if (!isEqual(curr, prev)) {
-          getOptionList("");
-        }
-      }
-    );
-    watch(
-      () => props.visible,
-      (val) => {
-        if (val) {
-          getOptionList("");
-        }
-      }
-    );
-
-    watch(
-      () => props.excludeValues,
-      (curr, prev) => {
-        if (isEqual(curr, prev)) return;
-        if (Array.isArray(modelValue.value)) {
-          modelValue.value = modelValue.value.filter(
-            (item) => !props.excludeValues.includes(item)
-          );
-        } else {
-          if (props.excludeValues.includes(modelValue.value)) {
-            modelValue.value = undefined;
-          }
-        }
-      }
-    );
-
-    return () => (
-      <a-select
-        {...attrs}
-        notFoundContent={isFetching.value ? "加载中" : "暂无数据"}
-        showSearch
-        defaultActiveFirstOption={false}
-        showArrow={true}
-        filterOption={false}
-        v-model={[modelValue.value, "value"]}
-        onSearch={getOptionList}
-      >
-        {optionList.value.map(
-          (item: any) =>
-            !props.excludeValues.includes(
-              item[props.valuePorp.key ?? "id"]
-            ) && (
-              <a-select-option key={item[props.valuePorp.key ?? "id"]}>
-                {item[props.valuePorp.label ?? "name"]}
-              </a-select-option>
-            )
-        )}
-      </a-select>
-    );
-  },
-});
-
-export default SearchSelect;
+/*
+ * @Abstract: 可以搜索的选择下拉框 对Select组件的二次封装
+ * @Author: wang liang
+ * @Date: 2022-04-19 16:46:58
+ * @LastEditors: wang liang
+ * @LastEditTime: 2022-04-24 13:58:53
+ */
+
+import { PropType, defineComponent, ref, watch, inject } from "vue";
+import useVModel from "@/pageComponent/hooks/useVModel";
+import { getInstance } from "@/api/axios";
+import { isNil, debounce, isEqual } from "lodash";
+import { every } from "@/pageComponent/utils/is";
+import faceName from "@/api/faceName";
+
+const SearchSelect = defineComponent({
+  emits: ["update:value"],
+  props: {
+    value: {
+      type: [String, Array, Number],
+    },
+    // 获取列表的url
+    getUrl: {
+      type: String,
+      required: true,
+    },
+    /* 额外的参数 必须有值才能搜索 */
+    extParams: {
+      type: Object,
+    },
+    valuePorp: {
+      type: Object as PropType<{ key: string; label: string }>,
+      default: () => ({}),
+    },
+    /* 需要排除的值  不展示在下拉列表中 也无法选中 */
+    excludeValues: {
+      type: Array,
+      default: () => [],
+    },
+    // 对话框是否打开，打开后重新获取数据
+    visible: {
+      type: Boolean,
+    },
+  },
+  setup(props, { emit, attrs }) {
+    const urlPrefix: any = inject("urlPrefix")!;
+    const instance = getInstance({
+      prefix: urlPrefix.prefix,
+      serverName: urlPrefix.serverName ?? faceName.common,
+    });
+    const modelValue = useVModel(props, "value", emit);
+
+    /* 列表 */
+    const optionList = ref([]);
+    const isFetching = ref(false);
+    let lastFetchId = 0;
+    const getOptionList = debounce(async (val: string) => {
+      if (
+        !props.extParams ||
+        every(props.extParams, (key, value) => !isNil(value))
+      ) {
+        const fetchId = lastFetchId;
+        // 获取下拉列表
+        optionList.value = [];
+        isFetching.value = true;
+        try {
+          // 调用api传入参数
+          const { data } = await instance.get(props.getUrl, {
+            params: { ...props.extParams, keyword: val },
+          });
+          if (lastFetchId !== fetchId) {
+            // for fetch callback order
+            return;
+          }
+          optionList.value = data;
+        } finally {
+          isFetching.value = false;
+        }
+      }
+    }, 300);
+    getOptionList("");
+
+    watch(
+      () => props.extParams,
+      (curr, prev) => {
+        if (!isEqual(curr, prev)) {
+          getOptionList("");
+        }
+      }
+    );
+    watch(
+      () => props.visible,
+      (val) => {
+        if (val) {
+          getOptionList("");
+        }
+      }
+    );
+
+    watch(
+      () => props.excludeValues,
+      (curr, prev) => {
+        if (isEqual(curr, prev)) return;
+        if (Array.isArray(modelValue.value)) {
+          modelValue.value = modelValue.value.filter(
+            (item) => !props.excludeValues.includes(item)
+          );
+        } else {
+          if (props.excludeValues.includes(modelValue.value)) {
+            modelValue.value = undefined;
+          }
+        }
+      }
+    );
+
+    return () => (
+      <a-select
+        {...attrs}
+        notFoundContent={isFetching.value ? "加载中" : "暂无数据"}
+        showSearch
+        defaultActiveFirstOption={false}
+        showArrow={true}
+        filterOption={false}
+        v-model={[modelValue.value, "value"]}
+        onSearch={getOptionList}
+      >
+        {optionList.value.map(
+          (item: any) =>
+            !props.excludeValues.includes(
+              item[props.valuePorp.key ?? "id"]
+            ) && (
+              <a-select-option key={item[props.valuePorp.key ?? "id"]}>
+                {item[props.valuePorp.label ?? "name"]}
+              </a-select-option>
+            )
+        )}
+      </a-select>
+    );
+  },
+});
+
+export default SearchSelect;