inl-ui 0.0.4 → 0.0.7

package/src/pageComponent/components/ProFormItem.tsx

@@ -1,185 +0,0 @@
-/*
- * @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: paramDefine.value.maxValue,
-          message: `最大值为${paramDefine.value.maxValue}`,
-        });
-      }
-      // 最小值
-      if (paramDefine.value.minValue !== null) {
-        res.push({
-          type: "number",
-          min: paramDefine.value.minValue,
-          message: `最小值为${paramDefine.value.minValue}`,
-        });
-      }
-      // 最大长度
-      if (paramDefine.value.limitLength !== null) {
-        res.push({ max: paramDefine.value.limitLength });
-      }
-      // 正则
-      if (paramDefine.value.regularExpression) {
-        res.push({ pattern: new RegExp(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}
-          >
-            <SelectOption key="你好">你好</SelectOption>
-          </Filed>
-        </FormItem>
-      );
-    };
-  },
-});
-
-export default ProFormItem;

package/src/pageComponent/components/SearchSelect.tsx

@@ -1,127 +0,0 @@
-/*
- * @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 } from "vue";
-import useVModel from "@/pageComponent/hooks/useVModel";
-import { instance } from "@/pageComponent/api";
-import { isNil, debounce, isEqual } from "lodash";
-import { every } from "@/pageComponent/utils/is";
-
-import { Select, SelectOption } from "ant-design-vue";
-import { ArrowDownOutlined, ArrowUpOutlined } from "@ant-design/icons-vue";
-
-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: () => [],
-    },
-  },
-  setup(props, { emit, attrs }) {
-    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.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 () => (
-      <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"]
-            ) && (
-              <SelectOption key={item[props.valuePorp.key ?? "id"]}>
-                {item[props.valuePorp.label ?? "name"]}
-              </SelectOption>
-            )
-        )}
-      </Select>
-    );
-  },
-});
-
-export default SearchSelect;

package/src/pageComponent/components/Sidebar.tsx

@@ -1,123 +0,0 @@
-import {
-  defineComponent,
-  reactive,
-  ref,
-  h,
-  resolveComponent,
-  watch,
-} from "vue";
-import { Menu, MenuItem, SubMenu } from "ant-design-vue";
-import { useRoute, useRouter } from "vue-router";
-
-// props
-const props = {
-  menu: {
-    type: Array,
-    default: [],
-  },
-  path: {
-    type: String,
-    default: "",
-  },
-};
-
-interface SOLT {
-  icon?: Function;
-  title: Function;
-}
-
-interface State {
-  openKeys: Array<string>;
-  selectedKeys: Array<string>;
-}
-
-export default defineComponent({
-  components: { Menu, MenuItem, SubMenu },
-  props,
-  setup(prop, context) {
-    const router = useRouter();
-    const route = useRoute();
-
-    const state: State = reactive({
-      openKeys: [],
-      selectedKeys: [],
-    });
-
-    watch(
-      route,
-      (nVal) => {
-        const urlList = nVal.path.split("/");
-        state.openKeys = [urlList[urlList.length - 2]];
-        state.selectedKeys = [urlList[urlList.length - 1]];
-      },
-      { deep: true, immediate: true }
-    );
-
-    const toPath = (path: string) => {
-      router.push({
-        path: prop.path + path,
-      });
-    };
-
-    const getSlots = (title: string, icon?: any) => {
-      const obj: SOLT = {
-        title: () => title,
-      };
-      if (icon) {
-        obj.icon = () => h(resolveComponent(icon));
-      }
-
-      return obj;
-    };
-
-    const getMenuItem = (item: any, fPath?: string) => {
-      const { meta } = item;
-      let ele;
-
-      if (meta.hide !== true) {
-        ele = (
-          <MenuItem
-            key={item.path}
-            onClick={() => toPath((fPath ? `${fPath}/` : "") + item.path)}
-            v-slots={getSlots(meta.title, meta?.icon || "container-outlined")}
-          >
-            {meta.title}
-          </MenuItem>
-        );
-      }
-      return ele;
-    };
-
-    const getSubMenu = (obj: any, fPath?: string) => {
-      return obj.map((item: any, index: string) => {
-        const { meta } = item;
-        let result;
-
-        if (meta.hide !== true) {
-          if (item?.children && item?.children.length > 0) {
-            result = (
-              <SubMenu key={item.path} v-slots={getSlots(meta.title)}>
-                {getSubMenu(item.children, item.path)}
-              </SubMenu>
-            );
-          } else {
-            result = getMenuItem(item, fPath);
-          }
-        }
-        return result;
-      });
-    };
-
-    return () => (
-      <Menu
-        mode="inline"
-        v-models={[
-          [state.selectedKeys, "selectedKeys"],
-          [state.openKeys, "openKeys"],
-        ]}
-      >
-        {getSubMenu(prop.menu)}
-      </Menu>
-    );
-  },
-});

package/src/pageComponent/components/loginBox/README.md

@@ -1,21 +0,0 @@
-# 登录盒子
-
-> 为方便开发调试，特推出登录盒子模块
-
-## 组件名称 [loginBox] 可根据引入进行自定义修改
-
-> 该组件依赖于 antv [form、input、message]
-
-## 参数
-
-| 参数名称 | 类型    | 默认值 | 作用                       |
-| -------- | ------- | ------ | -------------------------- |
-| password | String  |        | 设置默认密码               |
-| username | String  |        | 设置默认账号               |
-| autoMsg  | Boolean |        | 是否自动提示并拦截错误信息 |
-
-## 方法
-
-| 方法名称 | 类型     | 返回参数                         | 作用         |
-| -------- | -------- | -------------------------------- | ------------ |
-| onSubmit | Function | (e: EventBySubmitParams) => void | 用于提交表单 |

package/src/pageComponent/components/loginBox/index.tsx

@@ -1,174 +0,0 @@
-import { defineComponent, reactive, ref, PropType } from "vue";
-import { Form, FormItem, Input, message } from "ant-design-vue";
-import { phoneNumber } from "@/pageComponent/utils/validation";
-import code from "@/pageComponent/assets/img/code.png";
-
-type LoginType = 1 | 2;
-
-// submit 参数
-export interface EventBySubmitParams {
-  password: string;
-  username: string;
-  loginType: LoginType;
-  msg?: string;
-}
-// loginTab 数据格式
-export type LoginTab<T = LoginType> = Array<{ name: string; id: T }>;
-// props
-const props = {
-  loginTab: {
-    type: Array as PropType<LoginTab>,
-    default(): LoginTab {
-      return [
-        {
-          name: "扫码登录",
-          id: 1,
-        },
-        {
-          name: "账号登录",
-          id: 2,
-        },
-      ];
-    },
-  },
-  password: {
-    default: "",
-  },
-  username: {
-    default: "",
-  },
-  autoMsg: Boolean,
-};
-
-export default defineComponent({
-  props,
-  emits: ["submit"],
-  setup(prop, context) {
-    const formRef = ref();
-
-    const loginType = ref<LoginType>(2);
-    const formVal = reactive({
-      password: prop.password,
-      username: prop.username,
-    });
-
-    const sendMsg = (msg: string, type: "error" | "success") => {
-      if (!props.autoMsg) return;
-
-      if (type === "error") {
-        message.error(msg);
-      }
-      if (type === "success") {
-        message.success(msg);
-      }
-    };
-    const renderLoginTab = () => {
-      return (
-        <div class="login_tab">
-          {prop.loginTab.map((item) => (
-            <div
-              class={["item", item.id === loginType.value ? "active" : ""]}
-              onClick={() => {
-                loginType.value = item.id as LoginType;
-              }}
-            >
-              {item.name}
-            </div>
-          ))}
-        </div>
-      );
-    };
-
-    const handleSubmit = async () => {
-      await formRef.value
-        .validate(["username", "password"])
-        .then()
-        .catch((e: any) => {
-          if (e.errorFields.length) {
-            throw new Error();
-          }
-        });
-
-      const data: EventBySubmitParams = {
-        username: formVal.username,
-        password: formVal.password,
-        loginType: loginType.value,
-      };
-
-      // if (data.username === '' || !phoneNumber.test(data.username)) {
-      //   data.msg = '手机号错误';
-      // }
-
-      // if (!data.password || data.password.length <= 7) {
-      //   data.msg = `${data.msg} 密码输入错误`;
-      // }
-
-      if (data.msg) {
-        sendMsg(data.msg, "error");
-      }
-      context.emit("submit", data);
-    };
-
-    const renderForm = () => {
-      return (
-        <Form
-          ref={formRef}
-          v-show={loginType.value === 2}
-          onSubmit={handleSubmit}
-          wrapper-col={{
-            span: 24,
-          }}
-          model={formVal}
-        >
-          <FormItem
-            name="username"
-            wrapper-col={{ span: 50 }}
-            rules={[{ required: true, message: "请输入用户名" }]}
-          >
-            <Input v-model={[formVal.username, "value"]}></Input>
-          </FormItem>
-          <FormItem
-            name="password"
-            rules={[
-              { required: true, message: "请输入密码" },
-              // { min: 8, max: 14, message: '密码长度在8-14个字符之间' },
-            ]}
-          >
-            <Input
-              type="password"
-              v-model={[formVal.password, "value"]}
-            ></Input>
-          </FormItem>
-
-          {/* <FormItem> */}
-          <a-button type="primary" block html-type="submit">
-            登录
-          </a-button>
-          {/* </FormItem> */}
-        </Form>
-      );
-    };
-
-    const renderLoginCode = () => {
-      return (
-        <div
-          v-show={loginType.value === 1}
-          style={{ width: "100%", textAlign: "center" }}
-        >
-          <img src={code} alt="" style={{ width: "60%" }} />
-          <p style={{ marginTop: "1rem" }}>请使用智信APP扫描二维码登录</p>
-        </div>
-      );
-    };
-
-    return () => (
-      <div class="login_box">
-        {renderLoginTab()}
-        <h3>智信PC客户端</h3>
-
-        {renderForm()}
-        {renderLoginCode()}
-      </div>
-    );
-  },
-});

package/src/pageComponent/config/global.ts

@@ -1,20 +0,0 @@
-import { App } from 'vue';
-// import VConsole from 'vconsole';
-import vitevui from 'vitevui';
-import vitevuu from 'vitevuu';
-import * as Icons from '@ant-design/icons-vue';
-import router from '@/router';
-import 'vitevui/lib/style.css';
-import '@/assets/styles/index.less';
-import 'inl-ui/dist/antd.less';
-import 'dayjs/locale/zh-cn';
-
-export default (app: App): void => {
-  app.config.globalProperties.$vitevuu = vitevuu;
-  app.use(vitevui).use(router);
-
-  for (const i in Icons) {
-    app.component(i, Icons[i]);
-  }
-  // new VConsole();
-};

package/src/pageComponent/config/htconfig.ts

@@ -1,32 +0,0 @@
-window.htconfig = {
-  Default: {
-    toolTipDelay: 100,
-    toolTipContinual: true,
-    debugTipBackground: "rgba(61,61,61,0.6)",
-    debugTipLabelColor: "#fff",
-    convertURL: (url: string) => {
-      const storagePrefix = "/ht_";
-      if (
-        storagePrefix &&
-        url &&
-        !/^data:image/.test(url) &&
-        !/^http/.test(url) &&
-        !/^https/.test(url)
-      ) {
-        url = `${storagePrefix}/${url}`;
-      }
-      // append timestamp
-      url += `${url.indexOf("?") >= 0 ? "&" : "?"}ts=${Date.now()}`;
-      // append sid
-      const match = window.location.href.match("sid=([0-9a-z-]*)");
-      if (match) {
-        // eslint-disable-next-line prefer-destructuring
-        window.sid = match[1];
-      }
-      if (window.sid) {
-        url += `&sid=${window.sid}`;
-      }
-      return url;
-    },
-  },
-};

package/src/pageComponent/config/install.ts

@@ -1,10 +0,0 @@
-import { createStore } from '@/_store';
-
-const state = {
-  a: 6,
-};
-
-createStore({
-  state,
-});
-export default createStore;

package/src/pageComponent/hooks/global.ts

@@ -1,12 +0,0 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-import { getCurrentInstance } from "vue";
-
-export default () => {
-  const { proxy } = getCurrentInstance()! as any;
-  return {
-    store: proxy!.$store,
-    vitevuu: proxy!.$vitevuu,
-    axios: proxy!.$axios,
-  };
-};