@maketribe/ms-app 3.0.0

package/src/components/material-list/material-list-options.ts

@@ -0,0 +1,23 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+import { MaterialMan } from "../../dataview";
+
+export const materialListProps = buildProps({
+  materialMan: {
+    type: MaterialMan,
+    required: true,
+  },
+  selectable: {
+    type: Boolean,
+    default: false,
+  },
+  selectedPath: {
+    type: String,
+  },
+} as const);
+
+export type MaterialListProps = ExtractPropTypes<typeof materialListProps>;
+
+export const materialListEmits = {
+  "update:selected-path": (path: any) => typeof path === "string",
+};

package/src/components/material-list/material-list.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="mk-material-list">
+    <MaterialGroup :material-man="materialMan" />
+    <div class="mk-material-list__main" v-loading="loading">
+      <div class="mk-material-list__header">
+        <div class="mk-material-list__header-left">
+          <div class="mk-material-list__types">
+            <div
+              v-for="item of materialTypes"
+              :key="item.value"
+              :class="[
+                'mk-material-list__type',
+                currentMaterialTypeId === item.value ? 'is-active' : '',
+              ]"
+              @click="handleMaterialTypeClick(item)"
+            >
+              {{ item.label }}
+            </div>
+          </div>
+        </div>
+        <div class="mk-material-list__header-right">
+          <template v-if="currentMaterialType">
+            {{ currentMaterialType.label }}大小不超过
+            {{ currentMaterialType.limit }} M
+            <MKUploadFile
+              :upload="materialMan.upload"
+              :accept="currentMaterialType.accept"
+            >
+              <ElButton type="primary">
+                选择{{ currentMaterialType.label }}
+              </ElButton>
+            </MKUploadFile>
+          </template>
+        </div>
+      </div>
+
+      <div class="mk-material-list__body">
+        <ElScrollbar height="100%">
+          <div class="mk-material-list__wrapper">
+            <MaterialItem
+              v-for="material of materialList"
+              :key="material.id"
+              :class="[
+                'mk-material-list__item',
+                value === material.path ? 'is-current' : '',
+              ]"
+              :material-table="materialTable"
+              :material="material"
+              @click.capture="handleMaterialItemClick($event, material)"
+            />
+          </div>
+        </ElScrollbar>
+      <div class="mk-material-list__footer">
+        <ElPagination
+          class="mk-data-table-pagination"
+          :background="true"
+          :pageSizes="unref(pageSizes)"
+          :currentPage="unref(currentPage)"
+          :pageSize="unref(pageSize)"
+          :total="unref(totalRecCount)"
+          layout="prev, pager, next"
+          @current-change="changeCurrentPage"
+          @size-change="changePageSize"
+        />
+      </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, unref, watch } from "vue";
+import { ElPagination } from "element-plus";
+import { MKUploadFile } from "@maketribe/dm-ui";
+import { MaterialType, Material } from "../../dataview";
+import MaterialGroup from "./material-group.vue";
+import MaterialItem from "./material-item.vue";
+import { materialListProps, materialListEmits } from "./material-list-options";
+
+defineOptions({ name: "MKMaterialList" });
+
+const props = defineProps(materialListProps);
+
+const emit = defineEmits(materialListEmits);
+
+props.materialMan.init();
+
+const loading = computed(() => props.materialMan.materialTable.loading);
+
+const value = computed({
+  get: () => {
+    return props.selectable ? props.selectedPath ?? null : null;
+  },
+  set: (v) => {
+    emit("update:selected-path", v);
+  },
+});
+
+const materialTable = computed(() => props.materialMan.materialTable);
+const pageSizes = computed(() => unref(materialTable).pageSizes);
+const currentPage = computed({
+  get: () => unref(materialTable).currentPage,
+  set: (v) => {
+    unref(materialTable).pageTo(v);
+  },
+});
+const pageSize = computed({
+  get: () => unref(materialTable).pageSize,
+  set: (v) => {
+    unref(materialTable).setPageSize(v);
+  },
+});
+const totalRecCount = computed(() => unref(materialTable).totalRecCount);
+const changeCurrentPage = (v: number) => {
+  currentPage.value = v;
+};
+const changePageSize = (v: number) => {
+  pageSize.value = v;
+};
+
+
+
+const materialList = computed(() => unref(materialTable).getList());
+const materialTypes = computed(() => props.materialMan.materialTypes);
+const currentMaterialTypeId = computed(
+  () => props.materialMan.currentMaterialTypeId
+);
+
+const currentMaterialType = computed(
+  () => props.materialMan.currentMaterialType
+);
+
+const handleMaterialTypeClick = (materialType: MaterialType) => {
+  if (materialType.value === unref(currentMaterialTypeId)) {
+    return;
+  }
+
+  props.materialMan.setCurrentMaterialTypeId(materialType.value);
+};
+
+const handleMaterialItemClick = (event: MouseEvent, material: Material) => {
+  if (!props.selectable) {
+    return;
+  }
+
+  event.preventDefault();
+  event.stopPropagation();
+
+  value.value = material.path;
+};
+</script>

package/src/components/material-select/index.ts

@@ -0,0 +1,15 @@
+import { App } from "vue";
+import { SFCWithInstall } from "@maketribe/utils";
+import MaterialSelect from "./material-select-api";
+
+const _MaterialSelect = MaterialSelect as SFCWithInstall<typeof MaterialSelect>;
+
+_MaterialSelect.install = (app: App) => {
+  _MaterialSelect._context = app._context;
+};
+
+export default _MaterialSelect;
+export const MKMaterialSelect = _MaterialSelect;
+
+export * from "./material-select-type";
+

package/src/components/material-select/material-select-api.ts

@@ -0,0 +1,48 @@
+import { AppContext, createVNode, render } from "vue";
+import MaterialSelectConstructor from "./material-select";
+import type {
+  IMKMaterialSelect,
+  MKMaterialSelectOptions,
+} from "./material-select-type";
+
+const initInstance = (
+  props: any,
+  container: HTMLElement,
+  appContext: AppContext | null = null
+) => {
+  const vnode = createVNode(MaterialSelectConstructor, props);
+
+  vnode.appContext = appContext;
+
+  render(vnode, container);
+
+  return vnode.component;
+};
+
+const showDialog = (options: any, appContext?: AppContext | null) => {
+  const container = document.createElement("div");
+
+  const instance = initInstance(options, container, appContext)!;
+
+  return instance.proxy;
+};
+
+async function MaterialSelect(
+  options?: MKMaterialSelectOptions,
+  appContext?: AppContext
+) {
+  return new Promise((resolve, reject) => {
+    showDialog(
+      {
+        ...options,
+        onSelect: resolve,
+        cancel: reject,
+      },
+      appContext ?? (MaterialSelect as unknown as IMKMaterialSelect)._context
+    );
+  });
+}
+
+(MaterialSelect as unknown as IMKMaterialSelect)._context = null;
+
+export default MaterialSelect as unknown as IMKMaterialSelect;

package/src/components/material-select/material-select-options.ts

@@ -0,0 +1,18 @@
+import { ExtractPropTypes } from "vue";
+import { MaterialMan } from "../../dataview";
+import { buildProps } from "@maketribe/utils";
+
+export const materialSelectProps = buildProps({
+  materialMan: { type: MaterialMan },
+  modelValue: { type: String },
+});
+
+export type MaterialSelectProps = ExtractPropTypes<typeof materialSelectProps>;
+
+export const materialSelectEmits = {
+  "update:model-value": (path: any) => typeof path === "string",
+  select: (path: any) => typeof path === "string",
+  cancel: () => true,
+};
+
+export const MaterialSelectEmits = typeof materialSelectEmits;

package/src/components/material-select/material-select-type.ts

@@ -0,0 +1,11 @@
+import { MaterialMan } from "../../dataview";
+import type { AppContext } from "vue";
+
+export interface MKMaterialSelectOptions {
+  materialMan?: MaterialMan;
+}
+
+export interface IMKMaterialSelect {
+  (options?: MKMaterialSelectOptions, appContext?: AppContext): Promise<string>;
+  _context: AppContext | null;
+}

package/src/components/material-select/material-select.tsx

@@ -0,0 +1,95 @@
+import {
+  Ref,
+  computed,
+  defineComponent,
+  reactive,
+  ref,
+  unref,
+  watch,
+} from "vue";
+import { ElDialog, ElButton } from "element-plus";
+import MaterialList from "../material-list/material-list.vue";
+import {
+  materialSelectEmits,
+  materialSelectProps,
+} from "./material-select-options";
+import { MaterialComponents } from "../../MaterialComponents";
+import { MaterialMan } from "../../dataview";
+import { useHttpRequest } from "../../composables/use-http-request";
+
+export default defineComponent({
+  name: "MKMaterialSelect",
+  props: materialSelectProps,
+  emits: materialSelectEmits,
+  setup(props, { emit }) {
+
+    const materialMan =
+      props.materialMan ??
+      (reactive(
+        new MaterialMan({
+          components: new MaterialComponents(),
+          httpRequest: useHttpRequest() || undefined,
+        })
+      ) as MaterialMan);
+
+    const selectedPath = ref("");
+    const visible: Ref<boolean> = ref(true);
+
+    watch(
+      computed(() => props.modelValue),
+      (modelValue) => {
+        selectedPath.value = modelValue || "";
+      },
+      { immediate: true }
+    );
+
+    const handleConfirmClick = () => {
+      visible.value = false;
+      emit("update:model-value", unref(selectedPath));
+      emit("select", unref(selectedPath));
+    };
+
+    const handleCancelClick = () => {
+      visible.value = false;
+      emit("cancel");
+    };
+
+    return () => {
+      return (
+        <ElDialog
+          width="70%"
+          modelValue={unref(visible)}
+          onUpdate:modelValue={(v: boolean) => {
+            visible.value = v;
+          }}
+          destroyOnClose
+          appendToBody
+          showClose={false}
+          modal-class="mk-material-select"
+          v-slots={{
+            footer: () => {
+              return (
+                <span class="mk-material-select__footer">
+                  <ElButton type="primary" onClick={handleConfirmClick}>
+                    确定
+                  </ElButton>
+                  <ElButton onClick={handleCancelClick}>取消</ElButton>
+                </span>
+              );
+            },
+          }}
+        >
+          <MaterialList
+            selectedPath={unref(selectedPath)}
+            onUpdate:selected-path={(v: string) => {
+              selectedPath.value = v;
+            }}
+            class="mk-material-select__list"
+            materialMan={materialMan}
+            selectable={true}
+          />
+        </ElDialog>
+      );
+    };
+  },
+});

package/src/components/member-table/index.ts

@@ -0,0 +1,6 @@
+import { withInstall } from "@maketribe/utils";
+import MemberTable from "./member-table.vue";
+
+export const MKMemberTable = withInstall(MemberTable);
+
+export default MKMemberTable;

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;