inl-ui 0.0.37 → 0.0.38

package/src/pageComponent/views/systemManager/authManager/menuManager/README.md

@@ -1,45 +1,45 @@
-# 菜单管理
-
-## 组件名称[**inl-menu-manager**]
-
-## 使用方式
-
-```jsx
-import { defineComponent } from "vue";
-export default defineComponent({
-  setup() {
-    return () => (
-      <inl-menu-manager></inl-menu-manager>;
-    );
-  },
-});
-```
-
-## 参数
-
-| 参数名称     | 类型   | 默认值    | 作用                                                     |
-| ------------ | ------ | --------- | -------------------------------------------------------- |
-| url          | 见下方 | {}        | 网络请求路径                                             |
-| prefix       | string | /api/     | 网络请求前缀                                             |
-| serverName   | string | common/v1 | 服务端名称                                               |
-| dividerGap   | number | 24        | 树结构和表格中间分割线的上下 margin(传入正数 渲染为负数) |
-| dividerColor | color  | \#EFF2F6  | 分割线的颜色                                             |
-
-### url
-
-```typescript
-export interface IUrlObj {
-  // 树结构数据
-  tree: string;
-  // 添加菜单
-  add: string;
-  // 更新菜单
-  update: string;
-  // 删除菜单
-  delete: string;
-  // 排序菜单
-  sort: string;
-  // 上传菜单JSON
-  upload: string;
-}
-```
+# 菜单管理
+
+## 组件名称[**inl-menu-manager**]
+
+## 使用方式
+
+```jsx
+import { defineComponent } from "vue";
+export default defineComponent({
+  setup() {
+    return () => (
+      <inl-menu-manager></inl-menu-manager>;
+    );
+  },
+});
+```
+
+## 参数
+
+| 参数名称     | 类型   | 默认值    | 作用                                                     |
+| ------------ | ------ | --------- | -------------------------------------------------------- |
+| url          | 见下方 | {}        | 网络请求路径                                             |
+| prefix       | string | /api/     | 网络请求前缀                                             |
+| serverName   | string | common/v1 | 服务端名称                                               |
+| dividerGap   | number | 24        | 树结构和表格中间分割线的上下 margin(传入正数 渲染为负数) |
+| dividerColor | color  | \#EFF2F6  | 分割线的颜色                                             |
+
+### url
+
+```typescript
+export interface IUrlObj {
+  // 树结构数据
+  tree: string;
+  // 添加菜单
+  add: string;
+  // 更新菜单
+  update: string;
+  // 删除菜单
+  delete: string;
+  // 排序菜单
+  sort: string;
+  // 上传菜单JSON
+  upload: string;
+}
+```

package/src/pageComponent/views/systemManager/authManager/menuManager/index.tsx

@@ -1,106 +1,106 @@
-/*
- * @Abstract: 菜单管理
- * @Author: wang liang
- * @Date: 2022-03-25 09:03:01
- * @LastEditors: wang liang
- * @LastEditTime: 2022-04-24 11:10:38
- */
-import { defineComponent, ref, provide, PropType } from "vue";
-import utils from "@/utils";
-import { setInstance } from "@/api/auth/menuManager";
-
-import MenuSelectTree from "./menuSelectTree";
-import MenuDetail from "./menuDetail";
-
-export interface IUrlObj {
-  // 树结构数据
-  tree: string;
-  // 添加菜单
-  add: string;
-  // 更新菜单
-  update: string;
-  // 删除菜单
-  delete: string;
-  // 排序菜单
-  sort: string;
-  // 上传菜单JSON
-  upload: string;
-}
-
-export const openMode = [
-  {
-    value: 0,
-    label: "打开新标签",
-  },
-  {
-    value: 1,
-    label: "打开新窗口",
-  },
-  {
-    value: 2,
-    label: "打开iframe",
-  },
-];
-
-/**
- * 菜单管理
- */
-const MenuManager = defineComponent({
-  props: {
-    url: {
-      type: Object as PropType<Partial<IUrlObj>>,
-      default: () => ({}),
-    },
-    prefix: {
-      type: String,
-    },
-    serverName: {
-      type: String,
-    },
-    dividerGap: {
-      type: Number,
-      default: 24,
-    },
-    dividerColor: {
-      type: String,
-      default: "#EFF2F6",
-    },
-  },
-  setup(props) {
-    setInstance({ prefix: props.prefix, serverName: props.serverName });
-    const urlMap = { ...props.url };
-    provide("urlMap", urlMap);
-
-    const detailRef = ref();
-    const currSelectNode = ref();
-
-    const handleNodeSelect = (node: any) => (currSelectNode.value = node);
-
-    const handleNodeEdit = (node: any) => {
-      // currSelectNode.value = node;
-      detailRef.value._edit();
-    };
-
-    return () => (
-      <div class="menu-manager">
-        {/* 左侧菜单树选择 */}
-        <div class="tree">
-          <MenuSelectTree onSelect={handleNodeSelect} onEdit={handleNodeEdit} />
-        </div>
-        <div
-          class="divider"
-          style={{
-            margin: `${-props.dividerGap}px 20px ${-props.dividerGap}px 0`,
-            background: props.dividerColor,
-          }}
-        ></div>
-        {/* 右侧详情 */}
-        <div class="right-detail">
-          <MenuDetail ref={detailRef} node={currSelectNode.value} />
-        </div>
-      </div>
-    );
-  },
-});
-
-export default utils.installComponent(MenuManager, "menu-manager");
+/*
+ * @Abstract: 菜单管理
+ * @Author: wang liang
+ * @Date: 2022-03-25 09:03:01
+ * @LastEditors: wang liang
+ * @LastEditTime: 2022-04-24 11:10:38
+ */
+import { defineComponent, ref, provide, PropType } from "vue";
+import utils from "@/utils";
+import { setInstance } from "@/api/auth/menuManager";
+
+import MenuSelectTree from "./menuSelectTree";
+import MenuDetail from "./menuDetail";
+
+export interface IUrlObj {
+  // 树结构数据
+  tree: string;
+  // 添加菜单
+  add: string;
+  // 更新菜单
+  update: string;
+  // 删除菜单
+  delete: string;
+  // 排序菜单
+  sort: string;
+  // 上传菜单JSON
+  upload: string;
+}
+
+export const openMode = [
+  {
+    value: 0,
+    label: "打开新标签",
+  },
+  {
+    value: 1,
+    label: "打开新窗口",
+  },
+  {
+    value: 2,
+    label: "打开iframe",
+  },
+];
+
+/**
+ * 菜单管理
+ */
+const MenuManager = defineComponent({
+  props: {
+    url: {
+      type: Object as PropType<Partial<IUrlObj>>,
+      default: () => ({}),
+    },
+    prefix: {
+      type: String,
+    },
+    serverName: {
+      type: String,
+    },
+    dividerGap: {
+      type: Number,
+      default: 24,
+    },
+    dividerColor: {
+      type: String,
+      default: "#EFF2F6",
+    },
+  },
+  setup(props) {
+    setInstance({ prefix: props.prefix, serverName: props.serverName });
+    const urlMap = { ...props.url };
+    provide("urlMap", urlMap);
+
+    const detailRef = ref();
+    const currSelectNode = ref();
+
+    const handleNodeSelect = (node: any) => (currSelectNode.value = node);
+
+    const handleNodeEdit = (node: any) => {
+      // currSelectNode.value = node;
+      detailRef.value._edit();
+    };
+
+    return () => (
+      <div class="menu-manager">
+        {/* 左侧菜单树选择 */}
+        <div class="tree">
+          <MenuSelectTree onSelect={handleNodeSelect} onEdit={handleNodeEdit} />
+        </div>
+        <div
+          class="divider"
+          style={{
+            margin: `${-props.dividerGap}px 20px ${-props.dividerGap}px 0`,
+            background: props.dividerColor,
+          }}
+        ></div>
+        {/* 右侧详情 */}
+        <div class="right-detail">
+          <MenuDetail ref={detailRef} node={currSelectNode.value} />
+        </div>
+      </div>
+    );
+  },
+});
+
+export default utils.installComponent(MenuManager, "menu-manager");

package/src/pageComponent/views/systemManager/authManager/menuManager/menuDetail.tsx

@@ -1,185 +1,185 @@
-/*
- * @Abstract: 摘要
- * @Author: wang liang
- * @Date: 2022-03-25 09:03:01
- * @LastEditors: wang liang
- * @LastEditTime: 2022-04-27 11:49:31
- */
-import { defineComponent, ref, inject, watch } from "vue";
-import useProxy from "@/pageComponent/hooks/useProxy";
-import useBus from "@/pageComponent/hooks/useBus";
-import { cloneDeep, omit, isEqual } from "lodash";
-import { getRequiredRule } from "@/pageComponent/utils/validation";
-import api from "@/api/auth/menuManager";
-import { IUrlObj, openMode } from "./index";
-
-import { message, Modal } from "ant-design-vue";
-import MenuForm from "./menuForm";
-
-const MenuDetail = defineComponent({
-  props: {
-    node: {
-      type: Object,
-    },
-  },
-  setup(props) {
-    const urlMap = inject<IUrlObj>("urlMap")!;
-
-    const proxy = useProxy();
-    const bus = useBus("system");
-
-    const formRef = ref();
-
-    /* 是否编辑状态 */
-    const isEdit = ref(false);
-
-    const form = ref<any>({});
-    const originForm = ref<any>({});
-    const changeForm = (val: any) => {
-      if (!val) return;
-      originForm.value = {
-        ...(val.dataRef ?? val),
-        valid: val.valid === 1,
-      };
-      form.value = cloneDeep(originForm.value);
-    };
-    watch(
-      () => props.node,
-      async (val) => {
-        // 确定是否保存
-        const currForm = isEdit.value ? formRef.value._getForm() : form.value;
-        if (isEdit.value && !isEqual(currForm, originForm.value)) {
-          Modal.confirm({
-            title: "确定保存",
-            content: "是否保存当前修改？",
-            async onOk() {
-              await handleSave();
-              changeForm(val);
-            },
-            onCancel() {
-              changeForm(val);
-              isEdit.value = false;
-            },
-          });
-        } else {
-          isEdit.value = false;
-          changeForm(val);
-        }
-      },
-      { immediate: true, deep: true }
-    );
-
-    const startEdit = () => {
-      if (props.node) {
-        isEdit.value = true;
-      }
-    };
-
-    const handleSave = async () => {
-      let data = await formRef.value._validate();
-      data = {
-        ...omit(data, "subList"),
-        valid: data.valid ? 1 : 0,
-      };
-      const requestSave = async () => {
-        await api.editMenuRecord(urlMap.update)(data);
-        message.success("保存成功");
-        bus.emit("tree/refresh");
-        isEdit.value = false;
-      };
-
-      if (!data.valid) {
-        const { data: hasValidChildren } = await api.hasValidChildren(data.id);
-
-        if (hasValidChildren) {
-          Modal.confirm({
-            title: "启用状态",
-            content:
-              "该菜单下还有启用的子级菜单，若继续执行禁用操作，子级菜单将被置为禁用状态，请确认是否继续保存",
-            onOk: requestSave,
-          });
-        } else {
-          requestSave();
-        }
-      } else {
-        requestSave();
-      }
-    };
-
-    /* 暴露编辑函数 */
-    proxy._edit = () => {
-      startEdit();
-    };
-
-    return () => {
-      // 打开方式
-      const renderMode = (mode: number) =>
-        openMode.find((item) => item.value === mode)?.label;
-
-      return (
-        <div class="menu-detail">
-          {props.node ? (
-            <>
-              <div class="header">
-                <span class="header-text">基本详情</span>
-                <a-space>
-                  {isEdit.value ? (
-                    <>
-                      <a-button
-                        key="close"
-                        onClick={() => (isEdit.value = false)}
-                      >
-                        关闭
-                      </a-button>
-                      <a-button key="save" type="primary" onClick={handleSave}>
-                        保存
-                      </a-button>
-                    </>
-                  ) : (
-                    <a-button
-                      key="edit"
-                      type="primary"
-                      onClick={startEdit}
-                      disabled={props.node.isSystem}
-                    >
-                      编辑
-                    </a-button>
-                  )}
-                </a-space>
-              </div>
-              {isEdit.value ? (
-                <MenuForm
-                  ref={formRef}
-                  form={form.value}
-                  parentName={props.node?.parent?.node.name}
-                />
-              ) : (
-                <a-form labelCol={{ style: { width: "6em" } }}>
-                  <a-form-item label="菜单编码">{form.value.code}</a-form-item>
-                  <a-form-item label="页面名称">{form.value.name}</a-form-item>
-                  <a-form-item label="父级页面">
-                    {props.node?.parent?.node.name}
-                  </a-form-item>
-                  <a-form-item label="页面URL">{form.value.url}</a-form-item>
-                  <a-form-item label="打开方式">
-                    {renderMode(form.value.mode)}
-                  </a-form-item>
-                  <a-form-item label="启用状态">
-                    {form.value.valid ? "启用" : "禁用"}
-                  </a-form-item>
-                  <a-form-item label="ICON">
-                    <icon-font type={form.value.icon}></icon-font>
-                  </a-form-item>
-                </a-form>
-              )}
-            </>
-          ) : (
-            <a-empty style={{ maxWidth: "500px" }} description="请选择菜单" />
-          )}
-        </div>
-      );
-    };
-  },
-});
-
-export default MenuDetail;
+/*
+ * @Abstract: 摘要
+ * @Author: wang liang
+ * @Date: 2022-03-25 09:03:01
+ * @LastEditors: wang liang
+ * @LastEditTime: 2022-04-27 11:49:31
+ */
+import { defineComponent, ref, inject, watch } from "vue";
+import useProxy from "@/pageComponent/hooks/useProxy";
+import useBus from "@/pageComponent/hooks/useBus";
+import { cloneDeep, omit, isEqual } from "lodash";
+import { getRequiredRule } from "@/pageComponent/utils/validation";
+import api from "@/api/auth/menuManager";
+import { IUrlObj, openMode } from "./index";
+
+import { message, Modal } from "ant-design-vue";
+import MenuForm from "./menuForm";
+
+const MenuDetail = defineComponent({
+  props: {
+    node: {
+      type: Object,
+    },
+  },
+  setup(props) {
+    const urlMap = inject<IUrlObj>("urlMap")!;
+
+    const proxy = useProxy();
+    const bus = useBus("system");
+
+    const formRef = ref();
+
+    /* 是否编辑状态 */
+    const isEdit = ref(false);
+
+    const form = ref<any>({});
+    const originForm = ref<any>({});
+    const changeForm = (val: any) => {
+      if (!val) return;
+      originForm.value = {
+        ...(val.dataRef ?? val),
+        valid: val.valid === 1,
+      };
+      form.value = cloneDeep(originForm.value);
+    };
+    watch(
+      () => props.node,
+      async (val) => {
+        // 确定是否保存
+        const currForm = isEdit.value ? formRef.value._getForm() : form.value;
+        if (isEdit.value && !isEqual(currForm, originForm.value)) {
+          Modal.confirm({
+            title: "确定保存",
+            content: "是否保存当前修改？",
+            async onOk() {
+              await handleSave();
+              changeForm(val);
+            },
+            onCancel() {
+              changeForm(val);
+              isEdit.value = false;
+            },
+          });
+        } else {
+          isEdit.value = false;
+          changeForm(val);
+        }
+      },
+      { immediate: true, deep: true }
+    );
+
+    const startEdit = () => {
+      if (props.node) {
+        isEdit.value = true;
+      }
+    };
+
+    const handleSave = async () => {
+      let data = await formRef.value._validate();
+      data = {
+        ...omit(data, "subList"),
+        valid: data.valid ? 1 : 0,
+      };
+      const requestSave = async () => {
+        await api.editMenuRecord(urlMap.update)(data);
+        message.success("保存成功");
+        bus.emit("tree/refresh");
+        isEdit.value = false;
+      };
+
+      if (!data.valid) {
+        const { data: hasValidChildren } = await api.hasValidChildren(data.id);
+
+        if (hasValidChildren) {
+          Modal.confirm({
+            title: "启用状态",
+            content:
+              "该菜单下还有启用的子级菜单，若继续执行禁用操作，子级菜单将被置为禁用状态，请确认是否继续保存",
+            onOk: requestSave,
+          });
+        } else {
+          requestSave();
+        }
+      } else {
+        requestSave();
+      }
+    };
+
+    /* 暴露编辑函数 */
+    proxy._edit = () => {
+      startEdit();
+    };
+
+    return () => {
+      // 打开方式
+      const renderMode = (mode: number) =>
+        openMode.find((item) => item.value === mode)?.label;
+
+      return (
+        <div class="menu-detail">
+          {props.node ? (
+            <>
+              <div class="header">
+                <span class="header-text">基本详情</span>
+                <a-space>
+                  {isEdit.value ? (
+                    <>
+                      <a-button
+                        key="close"
+                        onClick={() => (isEdit.value = false)}
+                      >
+                        关闭
+                      </a-button>
+                      <a-button key="save" type="primary" onClick={handleSave}>
+                        保存
+                      </a-button>
+                    </>
+                  ) : (
+                    <a-button
+                      key="edit"
+                      type="primary"
+                      onClick={startEdit}
+                      disabled={props.node.isSystem}
+                    >
+                      编辑
+                    </a-button>
+                  )}
+                </a-space>
+              </div>
+              {isEdit.value ? (
+                <MenuForm
+                  ref={formRef}
+                  form={form.value}
+                  parentName={props.node?.parent?.node.name}
+                />
+              ) : (
+                <a-form labelCol={{ style: { width: "6em" } }}>
+                  <a-form-item label="菜单编码">{form.value.code}</a-form-item>
+                  <a-form-item label="页面名称">{form.value.name}</a-form-item>
+                  <a-form-item label="父级页面">
+                    {props.node?.parent?.node.name}
+                  </a-form-item>
+                  <a-form-item label="页面URL">{form.value.url}</a-form-item>
+                  <a-form-item label="打开方式">
+                    {renderMode(form.value.mode)}
+                  </a-form-item>
+                  <a-form-item label="启用状态">
+                    {form.value.valid ? "启用" : "禁用"}
+                  </a-form-item>
+                  <a-form-item label="ICON">
+                    <icon-font type={form.value.icon}></icon-font>
+                  </a-form-item>
+                </a-form>
+              )}
+            </>
+          ) : (
+            <a-empty style={{ maxWidth: "500px" }} description="请选择菜单" />
+          )}
+        </div>
+      );
+    };
+  },
+});
+
+export default MenuDetail;