@maketribe/ms-app 3.0.1 → 3.0.3

package/src/components/member-table/member-table.vue

@@ -0,0 +1,220 @@
+<script setup lang="ts">
+import { Group } from "@maketribe/request";
+import {
+  WhereFilter,
+  FormColumn,
+  DataForm,
+  DataSource,
+  Messager,
+  Dialoger,
+} from "@maketribe/dm";
+import { MKDataTablePage, MKDataForm } from "@maketribe/dm-ui";
+import { useHttpRequest } from "../../composables";
+import {
+  MemberTable,
+  MemberForm,
+  RoleTable,
+  DepartmentTable,
+} from "../../dataview";
+import { ElDialog } from "element-plus";
+import { reactive, ref, watch } from "vue";
+const emit = defineEmits(["add-record", "edit-record"]);
+const httpRequest = useHttpRequest();
+const memberTable = reactive(new MemberTable()) as MemberTable;
+const memberForm = reactive(
+  new (class extends MemberForm {
+    constructor() {
+      super();
+    }
+    protected async initialize() {
+      this.setColumns([
+        new FormColumn({ name: "id", label: "id" }),
+        new FormColumn({
+          name: "approveResult",
+          label: "是否通过",
+          defaultValue: "0",
+          componentInfo: "MKFormRadioBox",
+          required: true,
+          componentProps: {
+            options: {
+              type: DataSource.DATA,
+              value: [
+                { label: "通过", value: "1" },
+                { label: "不通过", value: "0" },
+              ],
+            },
+          },
+        }),
+        new FormColumn({
+          name: "roles",
+          label: "角色",
+          defaultValue: null,
+          componentInfo: "MKFormDataTableSelect",
+          componentProps: {
+            multiple: true,
+            labelFieldName: "name",
+            dataTable: new RoleTable(),
+          },
+        }),
+        new FormColumn({
+          name: "depts",
+          label: "部门",
+          defaultValue: null,
+          componentInfo: "MKFormDataTableSelect",
+          componentProps: {
+            multiple: true,
+            labelFieldName: "name",
+            dataTable: new DepartmentTable(),
+          },
+        }),
+        new FormColumn({ name: "memo", label: "备注" }),
+      ]);
+    }
+    formatSubmitData(data: any) {
+      const { roles, depts, ...rest } = data;
+      const rolesArr = roles?.map((item: any) => {
+        return { roleId: item };
+      });
+      const deptsArr = depts?.map((item: any) => {
+        return { deptId: item };
+      });
+      return { ...rest, roles: rolesArr, depts: deptsArr };
+    }
+  })()
+) as DataForm;
+memberForm.init();
+const memberDialogVisible = ref(false);
+const group = new Group();
+const changeValue = ref(2);
+const editId = ref(null);
+const where = (memberTable.dataFilter as WhereFilter).getWhere();
+const dialogLoading = ref(false);
+where.addCondition(group);
+
+const validateHandel = async (v: any) => {
+  memberTable.getLoadingManager().startLoading();
+  await memberForm.editRecord(v.id);
+  memberTable.getLoadingManager().completeLoading();
+  editId.value = v.id;
+  memberDialogVisible.value = true;
+};
+
+const confirmHandle = async () => {
+  dialogLoading.value = true;
+  const result = await httpRequest?.post(
+    "/api/dv/ms-member/apply/account/approve",
+    { ...memberForm.formatSubmitData(memberForm.data), id: editId.value }
+  );
+  dialogLoading.value = false;
+  if (result?.data.code != 200) {
+    Messager.instance.error(result?.data.msg || "请求失败");
+    return;
+  }
+  memberDialogVisible.value = false;
+  Messager.instance.success({
+    message: "激活通过，密码已发送到邮箱",
+  });
+  memberTable.load();
+};
+
+const deleteHandle = async (row: any) => {
+  const isConfirm = await Dialoger.instance.confirm({
+    title: "是否确认删除",
+    message: "是否确认删除",
+    type: "warning",
+    cancelButtonText: "取消",
+    confirmButtonText: "确定",
+  });
+  if (!isConfirm) {
+    return;
+  }
+
+  await memberTable.deleteRecordAfterRefresh(row[memberTable.primaryKey]);
+};
+
+const resetPasswordHandle = async (row: any) => {
+  const isConfirm = await Dialoger.instance.confirm({
+    title: "重置密码",
+    message: "是否重置密码",
+    type: "warning",
+    cancelButtonText: "取消",
+    confirmButtonText: "确定",
+  });
+  if (!isConfirm) {
+    return;
+  }
+  memberTable.getLoadingManager().startLoading();
+
+  const result = await memberTable.httpRequest.post(
+    `/api/dv/ms-member/${row.id}/password/reset`
+  );
+  memberTable.getLoadingManager().completeLoading();
+
+  if (result.data.code !== 200) {
+    Messager.instance.error({
+      message: result.data.msg || "重置密码失败",
+    });
+  } else {
+    const res = await Dialoger.instance.confirm({
+      title: "重置密码成功",
+      message: `你的新密码为${result.data.data}`,
+      type: "warning",
+      cancelButtonText: "取消",
+      confirmButtonText: "复制",
+    });
+    if (!res) {
+      return;
+    }
+    navigator.clipboard.writeText(result.data.data);
+    Messager.instance.success({ message: "复制成功" });
+  }
+};
+
+watch(changeValue, () => {
+  group.clear();
+  group.addCondition("valid", "not in", `(${changeValue.value})`);
+  memberTable.load();
+});
+</script>
+<template>
+  <MKDataTablePage :data-table="memberTable" @add-record="emit('add-record')">
+    <template #headerLeft>
+      <ElSelect v-model="changeValue">
+        <ElOption :value="2" label="全部"></ElOption>
+        <ElOption :value="0" label="已通过"></ElOption>
+        <ElOption :value="1" label="待通过"></ElOption>
+      </ElSelect>
+    </template>
+
+    <template #table-col-$action-content="{ row }">
+      <ElButton
+        link
+        type="primary"
+        v-if="row.valid == 0"
+        @click="validateHandel(row)"
+        >激活用户</ElButton
+      >
+      <ElButton
+        link
+        type="primary"
+        v-if="row.valid == 1"
+        @click="resetPasswordHandle(row)"
+        >重置密码</ElButton
+      >
+      <ElButton
+        link
+        type="primary"
+        @click="emit('edit-record', row)"
+        v-if="row.valid == 1"
+        >编辑</ElButton
+      >
+      <ElButton link type="danger" @click="deleteHandle(row)">删除</ElButton>
+    </template>
+  </MKDataTablePage>
+  <ElDialog v-model="memberDialogVisible" class="dialogClass">
+    <MKDataForm :data-form="memberForm" v-loading="dialogLoading" />
+    <template #footer>
+      <ElButton @click="confirmHandle" type="primary">确定</ElButton>
+    </template>
+  </ElDialog>
+</template>

package/src/components/menu-permission-table/index.ts

@@ -0,0 +1,6 @@
+import { withInstall } from "@maketribe/utils";
+import MenuPermissionTable from "./menu-permission-table.vue";
+
+export const MKMenuPermissionTable = withInstall(MenuPermissionTable);
+
+export default MKMenuPermissionTable;

package/src/components/menu-permission-table/menu-permission-table.vue

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import { Ref, reactive, ref, unref } from "vue";
+import { MenuTree, MenuForm, MenuNodeItem } from "../../dataview";
+import { MKDataTree, MKDataTablePage, MKDataFormPage } from "@maketribe/dm-ui";
+import { ElMessage,ElCard } from "element-plus";
+
+const treeEl: Ref<any> = ref(null);
+
+const menuTree = reactive(new MenuTree()) as MenuTree;
+const menuForm = reactive(new MenuForm()) as MenuForm;
+
+const isShowPermissionPointDefineFormDialog = ref(false);
+const isShowMenuFormDialog = ref(false);
+
+const handlePermissionClick = (data: MenuNodeItem) => {
+  unref(menuTree).toPermissionPointDefine(data);
+};
+
+const handleAddRecord = () => {
+  isShowPermissionPointDefineFormDialog.value = true;
+};
+
+const handleEditRecord = () => {
+  isShowPermissionPointDefineFormDialog.value = true;
+};
+
+const handleSubmitted = () => {
+  isShowPermissionPointDefineFormDialog.value = false;
+};
+
+const handleCancl = () => {
+  isShowPermissionPointDefineFormDialog.value = false;
+};
+
+const handleMenuEditRecord = ({ item }: { item: MenuNodeItem }) => {
+  menuForm.editRecord(item);
+  isShowMenuFormDialog.value = true;
+};
+
+const handleMenuAddRecord = () => {
+  menuForm.addRecord();
+  isShowMenuFormDialog.value = true;
+};
+
+const handleMenuAddChildrenRecord = async (data: any) => {
+  menuForm.addRecord({
+    pid: data.id,
+    id: "",
+    title: "",
+    iconName: "",
+    routeId: "",
+  });
+  isShowMenuFormDialog.value = true;
+};
+
+const handleMenuSubmitted = (result: any) => {
+  if (result.data.code != 200) {
+    ElMessage.error(result.data?.msg || "添加失败");
+    return;
+  }
+  isShowMenuFormDialog.value = false;
+};
+
+
+const handleMenuCancel = () => {
+  isShowMenuFormDialog.value = false;
+};
+</script>
+
+<template>
+  <div class="mk-menu-permission">
+    <ElCard class="mk-menu-permission__menu">
+      <template #header>
+        <div class="header-box">
+          <div class="header-box-main">
+           菜单
+          </div>
+          <div class="header-box-tools">
+            <ElButton @click="handleMenuAddRecord" type="primary">添加</ElButton>
+          </div>
+        </div>
+      </template>
+      <ElScrollbar height="100%">
+          <MKDataTree
+            ref="treeEl"
+            :data-table="menuTree"
+            :data-form="menuForm"
+            style="padding: 0 10px"
+            @edit-record="handleMenuEditRecord"
+          >
+            <template #node-tools-prefix="{ data }">
+              <ElButton
+                v-if="!data.children.length"
+                link
+                @click="handlePermissionClick(data)"
+              >
+                权限
+              </ElButton>
+              <ElButton
+                link
+                type="primary"
+                @click="handleMenuAddChildrenRecord(data)"
+              >
+                新增
+              </ElButton>
+            </template>
+          </MKDataTree>
+        </ElScrollbar>
+    </ElCard>
+    <div class="mk-menu-permission__permission">
+      <MKDataTablePage
+        v-if="menuTree.currentMenuId"
+        class="mk-menu-permission__permission-table"
+        :data-table="menuTree.permissionPointDefineTable"
+        @add-record="handleAddRecord"
+        @edit-record="handleEditRecord"
+      />
+    </div>
+  </div>
+
+  <ElDialog v-model="isShowMenuFormDialog" width="70%" appendToBody class="dataFormPageDialog">
+    <MKDataFormPage
+      v-if="isShowMenuFormDialog"
+      :data-form="menuForm"
+      @cancel="handleMenuCancel"
+      @submitted="handleMenuSubmitted"
+    />
+  </ElDialog>
+
+  <ElDialog
+    v-model="isShowPermissionPointDefineFormDialog"
+    width="70%"
+    appendToBody
+    class="dataFormPageDialog"
+  >
+    <MKDataFormPage
+      v-if="isShowPermissionPointDefineFormDialog"
+      :data-form="menuTree.permissionPointDefineForm"
+      @cancel="handleCancl"
+      @submitted="handleSubmitted"
+    />
+  </ElDialog>
+</template>

package/src/components/role-permission-config/index.ts

@@ -0,0 +1,7 @@
+import { withInstall } from "@maketribe/utils";
+import RolePermissionConfig from "./role-permission-config";
+
+export const MKRolePermissionConfig = withInstall(RolePermissionConfig);
+export default MKRolePermissionConfig;
+
+export * from "./role-permission-config-options";

package/src/components/role-permission-config/role-permission-config-options.ts

@@ -0,0 +1,20 @@
+import { ExtractPropTypes } from "vue";
+import { RolePermissionConfigTable } from "../../dataview";
+import { buildProps } from "@maketribe/utils";
+
+export const rolePermissionConfigProps = buildProps({
+  rolePermissionConfigTable: {
+    type: RolePermissionConfigTable,
+    required: true,
+  },
+} as const);
+
+export type RolePermissionConfigProps = ExtractPropTypes<
+  typeof rolePermissionConfigProps
+>;
+
+export const rolePermissionConfigEmits = {
+  roleChange: (id: any) => true,
+};
+
+export type RolePermissionConfigEmits = typeof rolePermissionConfigEmits;

package/src/components/role-permission-config/role-permission-config.tsx

@@ -0,0 +1,280 @@
+import {
+  Fragment,
+  computed,
+  defineComponent,
+  reactive,
+  unref,
+  watch,
+} from "vue";
+import {
+  ElTable,
+  ElTableColumn,
+  ElCheckbox,
+  ElTooltip,
+  ElCard,
+  ElButton,
+  ElAlert,
+} from "element-plus";
+import { postTraverse } from "@maketribe/utils";
+import {
+  RoleMenuNode,
+  RolePermissionPointDefine,
+  RoleTable,
+} from "../../dataview";
+import { MKDataSelect, useI18n } from "@maketribe/dm-ui";
+import {
+  rolePermissionConfigEmits,
+  rolePermissionConfigProps,
+} from "./role-permission-config-options";
+
+type RowInfo = {
+  roleMenus: RoleMenuNode[];
+  permissionPoints: RolePermissionPointDefine[];
+};
+
+type CellInfo = { row: RowInfo; rowIndex: number; columnIndex: number };
+
+export default defineComponent({
+  name: "MKRolePermissionConfig",
+  props: rolePermissionConfigProps,
+  emits: rolePermissionConfigEmits,
+  setup(props, { emit }) {
+    const i18n = useI18n()!;
+
+    const roleTable = reactive(new RoleTable()) as RoleTable;
+
+    const rolePermissionConfigTable = computed(
+      () => props.rolePermissionConfigTable
+    );
+
+    const loading = computed(() => unref(rolePermissionConfigTable).loading);
+
+    const rootRoleMenuNodes = computed(() =>
+      unref(rolePermissionConfigTable).getRootRoleMenuNodes()
+    );
+
+    const list = computed(() => {
+      const _rootRoleMenuNodes = unref(rootRoleMenuNodes);
+
+      const list: RowInfo[] = [];
+
+      postTraverse<RoleMenuNode>(_rootRoleMenuNodes, (roleMenu, ancestors) => {
+        if (!roleMenu.children.length) {
+          list.push({
+            roleMenus: [...ancestors],
+            permissionPoints: roleMenu.permissionPoints,
+          });
+        }
+      });
+
+      return list;
+    });
+
+    const maxMenuColumns = computed(() => {
+      const _list = unref(list);
+
+      return Math.max(..._list.map((item) => item.roleMenus.length), 0);
+    });
+
+    const handleSpanMethod = ({
+      row,
+      rowIndex,
+      columnIndex,
+    }: CellInfo): [number, number] => {
+      const _maxMenuColumns = unref(maxMenuColumns);
+
+      let columnSpan = 1;
+
+      if (row.roleMenus.length < _maxMenuColumns) {
+        if (row.roleMenus.length - 1 === columnIndex) {
+          columnSpan = _maxMenuColumns - columnIndex;
+        } else if (
+          columnIndex < _maxMenuColumns &&
+          columnIndex >= row.roleMenus.length
+        ) {
+          columnSpan = 0;
+        }
+      }
+
+      let rowSpan = 1;
+
+      const _list = unref(list);
+
+      if (columnIndex < _maxMenuColumns) {
+        const bothExisting: boolean = !!(
+          _list[rowIndex]?.roleMenus?.[columnIndex] &&
+          _list[rowIndex - 1]?.roleMenus?.[columnIndex]
+        );
+
+        if (
+          // 第一行
+          rowIndex === 0 ||
+          // 两条记录都存在，且前一条和当前记录不一致
+          (bothExisting &&
+            _list[rowIndex].roleMenus[columnIndex].id !==
+              _list[rowIndex - 1].roleMenus[columnIndex].id)
+        ) {
+          let count = 1;
+
+          for (let i = rowIndex + 1; i < _list.length; i++) {
+            if (
+              _list[rowIndex].roleMenus[columnIndex]?.id !==
+              _list[i].roleMenus[columnIndex]?.id
+            ) {
+              break;
+            }
+            count++;
+          }
+
+          rowSpan = count;
+        } else if (bothExisting) {
+          // 两条记录都存在切记录一致
+          rowSpan = 0;
+        }
+      }
+
+      return [rowSpan, columnSpan];
+    };
+
+    const saveRolePermission = async () => {
+      props.rolePermissionConfigTable.submitPermission();
+    };
+
+    watch(
+      computed(() => props.rolePermissionConfigTable),
+      async (rolePermissionConfigTable) => {
+        await rolePermissionConfigTable.init();
+        await rolePermissionConfigTable.load();
+      },
+      { immediate: true }
+    );
+
+    return () => {
+      const menuColumnVnodes = new Array(unref(maxMenuColumns))
+        .fill(0)
+        .map((_, i) => {
+          return (
+            <ElTableColumn
+              label={i18n.translate("mk.rolePermissionConfig.tableMenuHeader", {
+                level: i + 1,
+              })}
+              v-slots={{
+                default: ({ row }: { row: RowInfo }) => {
+                  const roleMenu = row.roleMenus[i];
+
+                  if (!roleMenu) {
+                    return null;
+                  }
+
+                  return (
+                    <ElTooltip content={roleMenu.title} placement="top">
+                      <ElCheckbox
+                        class="role-permission-config__menu"
+                        modelValue={roleMenu.selected}
+                        indeterminate={roleMenu.indeterminate}
+                        onUpdate:modelValue={() =>
+                          unref(rolePermissionConfigTable).toggleRoleMenu(
+                            roleMenu
+                          )
+                        }
+                      >
+                        {roleMenu.title}
+                      </ElCheckbox>
+                    </ElTooltip>
+                  );
+                },
+              }}
+            />
+          );
+        });
+
+      return (
+        <ElCard
+          v-slots={{
+            header: () => {
+              return (
+                <div class="header-box">
+                  <div class="header-box-main">
+                    <ElAlert
+                      title={
+                        props.rolePermissionConfigTable.hasChange()
+                          ? "当前权限已发生改变，保存后生效！"
+                          : "当前权限无任何改变！"
+                      }
+                      showIcon
+                      type={
+                        props.rolePermissionConfigTable.hasChange()
+                          ? "warning"
+                          : "info"
+                      }
+                      closable={false}
+                    />
+                    <MKDataSelect
+                      modelValue={props.rolePermissionConfigTable.currentRoleId}
+                      onUpdate:model-value={(v) => emit("roleChange", v)}
+                      dataTable={roleTable}
+                    />
+                  </div>
+                  <div class="header-box-tools">
+                    <ElButton
+                      onClick={saveRolePermission}
+                      type="primary"
+                      disabled={!props.rolePermissionConfigTable.hasChange()}
+                    >
+                      {i18n.translate("mk.dataForm.saveButton")}
+                    </ElButton>
+                  </div>
+                </div>
+              );
+            },
+          }}
+        >
+          <ElTable
+            class="role-permission-config"
+            data={unref(list)}
+            border
+            spanMethod={handleSpanMethod}
+            v-loading={unref(loading)}
+          >
+            {menuColumnVnodes}
+
+            <ElTableColumn
+              label={i18n.translate(
+                "mk.rolePermissionConfig.tablePermissionPointHeader"
+              )}
+              minWidth="300px"
+              v-slots={{
+                default: ({ row }: { row: RowInfo }) => {
+                  const permissionPointVnodes = row.permissionPoints.map(
+                    (permissionPoint) => {
+                      return (
+                        <ElTooltip
+                          content={permissionPoint.name}
+                          placement="top"
+                        >
+                          <ElCheckbox
+                            class="role-permission-config__permission-point"
+                            modelValue={permissionPoint.selected}
+                            onUpdate:modelValue={() => {
+                              unref(
+                                rolePermissionConfigTable
+                              ).toggleRolePermissionPoint(permissionPoint);
+                            }}
+                          >
+                            {permissionPoint.name}
+                          </ElCheckbox>
+                        </ElTooltip>
+                      );
+                    }
+                  );
+
+                  return <Fragment>{permissionPointVnodes}</Fragment>;
+                },
+              }}
+            />
+          </ElTable>
+        </ElCard>
+      );
+    };
+  },
+});

package/src/components/system-provider/index.ts

@@ -0,0 +1,5 @@
+import { withInstall } from "@maketribe/utils";
+import SystemProvider from "./system-provider";
+
+export const MKSystemProvider = withInstall(SystemProvider);
+export default MKSystemProvider;