inl-ui 0.0.4 → 0.0.7

package/src/pageComponent/components/CommonTree.tsx

@@ -1,362 +0,0 @@
-/*
- * @Abstract: 公共树结构组件 菜单管理、部门管理
- * @Author: wang liang
- * @Date: 2022-04-07 14:42:40
- * @LastEditors: wang liang
- * @LastEditTime: 2022-04-25 15:10:09
- */
-
-import { defineComponent, onBeforeUnmount, onMounted, ref } from "vue";
-import useProxy from "@/pageComponent/hooks/useProxy";
-import useBus from "@/pageComponent/hooks/useBus";
-import { debounce } from "lodash";
-import { findById } from "@/pageComponent/utils/tree";
-
-import { Tree, Input, Space, Button, Spin, Modal, Empty } from "ant-design-vue";
-import {
-  SearchOutlined,
-  CloudUploadOutlined,
-  CloudDownloadOutlined,
-  CopyOutlined,
-  EditOutlined,
-  DeleteOutlined,
-  PlusCircleOutlined,
-  HolderOutlined,
-} from "@ant-design/icons-vue";
-
-const CommonTree = defineComponent({
-  props: {
-    downLoadName: {
-      type: String,
-      default: "树结构数据.json",
-    },
-    getData: {
-      type: Function,
-      required: true,
-    },
-    onSelect: {
-      type: Function,
-    },
-    onCopy: {
-      type: Function,
-    },
-    onDelete: {
-      type: Function,
-    },
-    onEdit: {
-      type: Function,
-    },
-    onAdd: {
-      type: Function,
-    },
-    onDrop: {
-      type: Function,
-    },
-    isJSONOperation: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  setup(props) {
-    const proxy = useProxy();
-    const bus = useBus("system");
-
-    const searchText = ref("");
-
-    const treeData = ref([]);
-    const originData = ref([]);
-
-    const isLoading = ref(false);
-
-    // 获取数据
-    const getTreeData = debounce(async (callback?: () => void) => {
-      isLoading.value = true;
-      const data = await props.getData(searchText.value);
-      treeData.value = data;
-      originData.value = data;
-      isLoading.value = false;
-      // 默认选中第一个
-      if (!selectedKeys.value.length) {
-        selectedKeys.value[0] = data[0].id;
-        handleSelectNode([], { selected: true, node: data[0] });
-      }
-      callback?.();
-    }, 300);
-    getTreeData();
-    // 暴露刷新数据方法
-    proxy._refresh = getTreeData;
-
-    /* 当前选中的节点 */
-    const selectedKeys = ref<any[]>([]);
-    const handleSelectNode = (keys: any, { node, selected }: any) => {
-      if (!selected) {
-        props.onSelect?.(undefined);
-      } else {
-        props.onSelect?.(node);
-      }
-    };
-    // 更新节点后重新选中节点 展示最新的信息
-    proxy._reselect = () => {
-      const node: any = findById(treeData.value, selectedKeys.value[0]);
-      // const res = getParent(treeData.value, node.id);
-      // console.log(res);
-
-      handleSelectNode([], { node, selected: true });
-    };
-
-    /* ===== 节点操作 ===== */
-    // 下载JSON文件
-    const handleDownload = () => {
-      const str = JSON.stringify(originData.value, null, 2);
-      const blob = new Blob([str]);
-      const url = URL.createObjectURL(blob);
-      const aEl = document.createElement("a");
-      aEl.href = url;
-      aEl.download = props.downLoadName;
-      aEl.click();
-    };
-    // 复制节点
-    const handleCopy = (node: any) => {
-      Modal.confirm({
-        title: "复制菜单",
-        content: `确定复制菜单“${node.name}”?`,
-        async onOk() {
-          props.onCopy?.(node);
-        },
-      });
-    };
-    // 编辑节点
-    const handleEdit = (data: any) => {
-      props.onEdit?.(data);
-    };
-    // 添加节点
-    const handleAddNodeClick = (data: any) => {
-      props.onAdd?.(data);
-    };
-
-    // 删除节点
-    const handleDelete = (node: any) => {
-      Modal.confirm({
-        title: "删除菜单",
-        content: `确定删除菜单“${node.name}”?`,
-        async onOk() {
-          props.onDelete?.(node);
-        },
-      });
-    };
-
-    /* ===== 拖拽操作 ===== */
-    const isDraggable = ref(false);
-    const handleDrop = (info: any) => {
-      const dropKey = info.node.id;
-      const dragKey = info.dragNode.id;
-      const dropPos = info.node.pos.split("-");
-      const dropPosition =
-        info.dropPosition - Number(dropPos[dropPos.length - 1]);
-      const loop = (data: any, id: string | number, callback: any) => {
-        data.forEach((item: any, index: number) => {
-          if (item.id === id) {
-            return callback(item, index, data);
-          }
-          if (item.subList) {
-            return loop(item.subList, id, callback);
-          }
-        });
-      };
-      const data = [...treeData.value];
-
-      // Find dragObject
-      let dragObj: any;
-      loop(data, dragKey, (item: any, index: number, arr: any[]) => {
-        arr.splice(index, 1);
-        dragObj = item;
-      });
-      if (!info.dropToGap) {
-        // Drop on the content
-        loop(data, dropKey, (item: any) => {
-          item.subList = item.subList || [];
-          /// where to insert 示例添加到头部，可以是随意位置
-          item.subList.unshift(dragObj);
-        });
-      } else if (
-        (info.node.subList || []).length > 0 && // Has children
-        info.node.expanded && // Is expanded
-        dropPosition === 1 // On the bottom gap
-      ) {
-        loop(data, dropKey, (item: any) => {
-          item.subList = item.subList || [];
-          // where to insert 示例添加到头部，可以是随意位置
-          item.subList.unshift(dragObj);
-        });
-      } else {
-        let ar: any[] = [];
-        let i = 0;
-        loop(data, dropKey, (_item: any, index: number, arr: any[]) => {
-          ar = arr;
-          i = index;
-        });
-        if (dropPosition === -1) {
-          ar.splice(i, 0, dragObj);
-        } else {
-          ar.splice(i + 1, 0, dragObj);
-        }
-      }
-      // treeData.value = data;
-
-      /* ----- 转换数据 ----- */
-
-      // 递归设置sort字段
-      const setSort = (node: any, index: number) => {
-        node.sort = index + 1;
-        if (node.subList.length) {
-          node.subList.forEach((sub: any, ind: number) => {
-            setSort(sub, ind);
-          });
-        }
-      };
-
-      // 转换第一层数据
-      const res = data.map((item: any, index: number) => {
-        setSort(item, index);
-        item.id = parseInt(item.id.replace("sys", ""));
-        item.menuList = item.subList;
-        return item;
-      });
-
-      // 发送排序请求 成功后重新查询数据
-      props.onDrop?.(res);
-    };
-
-    /* ===== 更新树结构数据后刷新 ===== */
-    const handleRefresh = async () => {
-      await getTreeData(proxy._reselect);
-    };
-    onMounted(() => bus.on("tree/refresh", handleRefresh));
-    onBeforeUnmount(() => bus.off("tree/refresh", handleRefresh));
-
-    return () => (
-      <div class="common-tree">
-        {/* 搜索 */}
-        <Input
-          style={{ marginBottom: "16px" }}
-          placeholder="请输入内容"
-          allowClear
-          suffix={<SearchOutlined />}
-          v-model={[searchText.value, "value"]}
-          onChange={getTreeData}
-        />
-        {/* 工具栏容器 */}
-        <div class="utils-container">
-          <Space>
-            {props.isJSONOperation && (
-              <>
-                <Button type="link">
-                  <CloudUploadOutlined />
-                  上传JSON文件
-                </Button>
-                <Button type="link" onClick={handleDownload}>
-                  <CloudDownloadOutlined />
-                  下载JSON文件
-                </Button>
-              </>
-            )}
-          </Space>
-        </div>
-        <div class="tree-container">
-          <Spin spinning={isLoading.value}>
-            {treeData.value.length > 0 ? (
-              <Tree
-                showLine={{ showLeafIcon: true }}
-                blockNode
-                draggable={isDraggable.value}
-                defaultExpandAll
-                fieldNames={{ children: "subList", key: "id", title: "name" }}
-                treeData={treeData.value}
-                v-model={[selectedKeys.value, "selectedKeys"]}
-                onSelect={handleSelectNode}
-                onDrop={handleDrop}
-              >
-                {{
-                  title: ({ name, selected, isSystem, dataRef }: any) => {
-                    return (
-                      <span class="tree-node-title">
-                        <span class="name">{name}</span>
-                        {/* 当前选中的节点需要展示操作按钮 */}
-                        {selected && isSystem && (
-                          <span class="operation" style={{ float: "right" }}>
-                            <PlusCircleOutlined
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                handleAddNodeClick(dataRef);
-                              }}
-                            />
-                          </span>
-                        )}
-                        {selected && !isSystem && (
-                          <span class="operation" style={{ float: "right" }}>
-                            <Space>
-                              {/* 只能复制没有子菜单的菜单 */}
-                              {!dataRef.subList.length &&
-                                props.onCopy !== undefined && (
-                                  <CopyOutlined
-                                    onClick={(e) => {
-                                      e.stopPropagation();
-                                      handleCopy(dataRef);
-                                    }}
-                                  />
-                                )}
-                              <EditOutlined
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  handleEdit(dataRef);
-                                }}
-                              />
-                              {/* 有子节点的节点不能删除 */}
-                              {!dataRef.subList.length && (
-                                <DeleteOutlined
-                                  onClick={(e) => {
-                                    e.stopPropagation();
-                                    handleDelete(dataRef);
-                                  }}
-                                />
-                              )}
-                              {dataRef.valid === 1 && (
-                                <PlusCircleOutlined
-                                  onClick={(e) => {
-                                    e.stopPropagation();
-                                    handleAddNodeClick(dataRef);
-                                  }}
-                                />
-                              )}
-                              {!searchText.value && (
-                                <HolderOutlined
-                                  onClick={(e) => {
-                                    e.stopPropagation();
-                                  }}
-                                  onMouseover={(e) => {
-                                    isDraggable.value = true;
-                                  }}
-                                  onMouseleave={() => {
-                                    isDraggable.value = false;
-                                  }}
-                                />
-                              )}
-                            </Space>
-                          </span>
-                        )}
-                      </span>
-                    );
-                  },
-                }}
-              </Tree>
-            ) : (
-              <Empty />
-            )}
-          </Spin>
-        </div>
-      </div>
-    );
-  },
-});
-
-export default CommonTree;

package/src/pageComponent/components/DynamicIcon.tsx

@@ -1,27 +0,0 @@
-/*
- * @Abstract: 动态展示图表
- * @Author: wang liang
- * @Date: 2022-04-14 13:44:35
- * @LastEditors: wang liang
- * @LastEditTime: 2022-04-14 13:47:41
- */
-import { defineComponent, createVNode } from 'vue';
-import * as icons from '@ant-design/icons-vue';
-
-const Dynamicicon = defineComponent({
-  props: {
-    icon: {
-      type: String,
-      default: '',
-    },
-  },
-  setup(props, { attrs }) {
-    return () => (
-      <span class='DynamicIcon'>
-        {props.icon ? createVNode((icons as any)[props.icon], attrs) : ''}
-      </span>
-    );
-  },
-});
-
-export default Dynamicicon;

package/src/pageComponent/components/EditPasswordForm.tsx

@@ -1,89 +0,0 @@
-/*
- * @Abstract: 修改密码表单
- * @Author: wang liang
- * @Date: 2022-04-14 16:10:51
- * @LastEditors: wang liang
- * @LastEditTime: 2022-04-14 16:45:42
- */
-
-import { defineComponent, PropType, ref } from "vue";
-import useVModel from "@/pageComponent/hooks/useVModel";
-import useProxy from "@/pageComponent/hooks/useProxy";
-
-import { Form, FormItem, InputPassword } from "ant-design-vue";
-
-export interface IEditPasswordForm {
-  oldPassWord: string;
-  passWord: string;
-  checkPassWord: string;
-}
-
-const Editpasswordform = defineComponent({
-  emits: ["udpate:form"],
-  props: {
-    form: {
-      type: Object as PropType<IEditPasswordForm>,
-      required: true,
-    },
-  },
-  setup(props, { emit }) {
-    const proxy = useProxy();
-    const formModel = useVModel(props, "form", emit);
-
-    const rules = {
-      passWord: {
-        async validator(rule: any, value: string) {
-          if (!value) throw new Error("请输入新密码");
-          if (!formModel.value.checkPassWord) return true;
-          if (value !== formModel.value.checkPassWord) {
-            throw new Error("新旧密码不一致");
-          }
-          return true;
-        },
-      },
-      checkPassWord: {
-        async validator(rule: any, value: string) {
-          if (!value) throw new Error("请确认密码");
-          if (!formModel.value.passWord) return true;
-          if (value !== formModel.value.passWord) {
-            throw new Error("新旧密码不一致");
-          }
-          return true;
-        },
-      },
-    };
-
-    const formRef = ref();
-
-    proxy._validate = async () => {
-      console.log("验证");
-
-      await formRef.value.validate();
-    };
-
-    return () => (
-      <Form
-        ref={formRef}
-        labelCol={{ style: { width: "100px" } }}
-        model={formModel.value}
-        rules={rules}
-      >
-        <FormItem
-          name="oldPassWord"
-          rules={{ required: true, message: "请输入原密码" }}
-          label="原密码"
-        >
-          <InputPassword v-model={[formModel.value.oldPassWord, "value"]} />
-        </FormItem>
-        <FormItem name="passWord" label="新密码">
-          <InputPassword v-model={[formModel.value.passWord, "value"]} />
-        </FormItem>
-        <FormItem name="checkPassWord" label="确认新密码">
-          <InputPassword v-model={[formModel.value.checkPassWord, "value"]} />
-        </FormItem>
-      </Form>
-    );
-  },
-});
-
-export default Editpasswordform;

package/src/pageComponent/components/IconSelect.tsx

@@ -1,51 +0,0 @@
-/*
- * @Abstract: icon 选择器
- * @Author: wang liang
- * @Date: 2022-04-06 16:06:46
- * @LastEditors: wang liang
- * @LastEditTime: 2022-04-06 16:12:58
- */
-
-import { defineComponent } from "vue";
-import useVModel from "@/pageComponent/hooks/useVModel";
-
-import { Select, SelectOption } from "ant-design-vue";
-import {
-  CiOutlined,
-  UpOutlined,
-  ApiOutlined,
-  EyeOutlined,
-  KeyOutlined,
-} from "@ant-design/icons-vue";
-
-const iconsList = [
-  { name: "CiOutlined", icon: CiOutlined },
-  { name: "UpOutlined", icon: UpOutlined },
-  { name: "ApiOutlined", icon: ApiOutlined },
-  { name: "EyeOutlined", icon: EyeOutlined },
-  { name: "KeyOutlined", icon: KeyOutlined },
-];
-
-const IconSelect = defineComponent({
-  emits: ["update:value"],
-  props: {
-    value: {
-      type: [String, Number],
-    },
-  },
-  setup(props, { emit }) {
-    const selectValue = useVModel(props, "value", emit);
-
-    return () => (
-      <Select v-model={[selectValue.value, "value"]}>
-        {iconsList.map((item) => (
-          <SelectOption key={item.name}>
-            <item.icon />
-          </SelectOption>
-        ))}
-      </Select>
-    );
-  },
-});
-
-export default IconSelect;

package/src/pageComponent/components/Navbar.tsx

@@ -1,96 +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: [],
-  },
-};
-
-interface SOLT {
-  icon?: Function;
-  title: Function;
-}
-
-interface State {
-  selectedKeys: Array<string>;
-}
-
-export default defineComponent({
-  components: { Menu, MenuItem, SubMenu },
-  props,
-  setup(prop, context) {
-    const router = useRouter();
-    const route = useRoute();
-
-    const state: State = reactive({
-      selectedKeys: [],
-    });
-
-    watch(
-      route,
-      (nVal) => {
-        const urlList = nVal.path.split("/");
-        state.selectedKeys = [`/${urlList[1]}`];
-      },
-      { deep: true, immediate: true }
-    );
-
-    const toPath = (path: string) => {
-      router.push({
-        path,
-      });
-    };
-
-    const getSlots = (title: string, icon?: any) => {
-      const obj: SOLT = {
-        title: () => title,
-      };
-      if (icon) {
-        obj.icon = () => h(resolveComponent(icon));
-      }
-
-      return obj;
-    };
-
-    const getMenuItem = (obj: any, fPath?: string) => {
-      return obj.map((item: any, index: 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)}
-            >
-              {meta.title}
-            </MenuItem>
-          );
-        }
-
-        return ele;
-      });
-    };
-
-    return () => (
-      <Menu
-        class="topMenu"
-        mode="horizontal"
-        v-model={[state.selectedKeys, "selectedKeys"]}
-      >
-        {getMenuItem(prop.menu)}
-      </Menu>
-    );
-  },
-});