create-meadminjs 1.0.0

package/template/meadmin/view/admin/src/views/system/menuRole/components/menu/index.vue

@@ -0,0 +1,162 @@
+<template>
+  <div class="menu">
+    <me-vxe-table
+      ref="menuRef"
+      v-model:quick-search="searchText"
+      :data="data ?? []"
+      :loading="loading"
+      :custom-column="false"
+      :tree-config="{ expandAll: true, showLine: true, reserve: true }"
+      :checkbox-config="{ labelField: 'id' }"
+      :row-config="{ keyField: 'id', useKey: true }"
+      :column-config="{ useKey: true }"
+      :quick-search-placeholder="t('输入菜单名称快捷查询')"
+      :on-add="permission('system_menu') ? showAddOrUp : undefined"
+      align="center"
+      border
+      me-class="table-menu"
+      height="auto"
+      show-overflow
+      @refresh="getMenu"
+      @quick-search="search"
+    >
+      <vxe-column type="checkbox" tree-node width="240px" align="left" header-align="center" field="id" :title="t('ID')" :formatter="formatterStr"></vxe-column>
+      <vxe-column field="title" :title="t('菜单名称')" type="html"></vxe-column>
+      <vxe-column field="menuType" :title="t('类型')" :formatter="formatterDict"></vxe-column>
+      <vxe-column field="status" :title="t('状态')" :formatter="formatterDict"></vxe-column>
+      <vxe-column field="rule" :title="t('权限')" :formatter="formatterStr"></vxe-column>
+      <vxe-column field="path" :title="t('路径')" :formatter="formatterStr"></vxe-column>
+      <vxe-column field="isLink" :title="t('外链')" :formatter="formatterDict"></vxe-column>
+      <vxe-column field="component" :title="t('组件路径')" :formatter="formatterStr"></vxe-column>
+      <vxe-column field="orderNum" :title="t('排序(降序)')" :formatter="formatterStr"></vxe-column>
+      <vxe-column v-if="permission(['system_menu_info', 'system_menu_edit', 'system_menu_del'])" title="操作" fixed="right">
+        <template #default="{ row }">
+          <me-button v-if="permission('system_menu_info')" link :title="t('详情')" @click="showInfo(row.id)">
+            <mel-icon-memo />
+          </me-button>
+          <me-button v-if="permission('system_menu_edit')" link :title="t('编辑')" @click="showAddOrUp(row.id)"><mel-icon-edit /></me-button>
+          <el-popconfirm v-if="permission('system_menu_del')" :title="t('确认删除？')" placement="left" @confirm="del(row.id)">
+            <template #reference>
+              <me-button :key="row.id" :loading="delLoading && delId === row.id" :title="t('删除')" link type="danger">
+                <mel-icon-delete />
+              </me-button>
+            </template>
+          </el-popconfirm>
+        </template>
+      </vxe-column>
+      <template #toolsButton>
+        <me-button
+          type="success"
+          :disabled="isSuper !== 0"
+          @click="
+            isSuper === 0 &&
+              emit(
+                'subMenus',
+                menuRef!.vxeTableRef!.getCheckboxRecords(true).map((item) => item.id),
+              )
+          "
+          >保存</me-button
+        >
+      </template>
+    </me-vxe-table>
+  </div>
+</template>
+<script setup lang="ts" name="Menu">
+import { delSystemMenuApi, SystemMenuInfo, SystemMenuTreeAll, systemMenuTreeAllApi } from '@/api/system/menu';
+import { useActionModel } from '@/hooks/index.js';
+import { useLocalesI18n } from '@/locales/i18n';
+import { formatterStr, searchTreeTable } from '@/utils/helper.js';
+import { permission } from '@/utils/permission.js';
+import { cloneDeep } from 'lodash-es';
+import { VxeColumnPropTypes } from 'vxe-table';
+import AddOrUp from './components/addOrUp.vue';
+import Info from './components/info.vue';
+import { getDict } from './dict.js';
+let { t, loadRes } = useLocalesI18n({}, [(locale: string) => import(`./lang/${locale}.json`), 'systemMenu']);
+const menuRef = ref<MeVxeTableInstance>();
+const dict = getDict(t);
+const formatterDict: VxeColumnPropTypes.Formatter<SystemMenuInfo> = ({ cellValue, column }) => {
+  //因为ts类型判定不得不断言dict
+  return formatterStr({ cellValue: (dict as Record<string, { value: string | number; label: string }[]>)[column.field]?.find((item) => item.value == cellValue)?.label });
+};
+const { open } = useActionModel(AddOrUp);
+const { open: openInfo } = useActionModel(Info);
+
+const { checkedMenuIds = [], isSuper = 0 } = defineProps<{ checkedMenuIds: string[]; isSuper: 0 | 1 }>();
+const emit = defineEmits<{
+  subMenus: [menuIds: string[]]; //提交菜单选中
+}>();
+const { loading, data, runAsync } = systemMenuTreeAllApi();
+onMounted(() => {
+  watch(
+    //设置选中值
+    () => [checkedMenuIds, data.value],
+    async () => {
+      if (!data.value?.length) {
+        return;
+      }
+      await menuRef.value!.vxeTableRef!.clearCheckboxRow();
+      menuRef.value!.vxeTableRef!.setCheckboxRow(
+        checkedMenuIds.reduce((previousValue, currentValue) => {
+          const row = menuRef.value!.vxeTableRef!.getRowById(currentValue);
+          if (!row?.children?.length) {
+            previousValue.push(row);
+          }
+          return previousValue;
+        }, [] as any[]),
+        true,
+      );
+    },
+    { immediate: true },
+  );
+});
+
+const searchText = ref('');
+const search = (searchText: string) => {
+  data.value = searchTreeTable(searchText, ['title', 'id', 'rule'] as const, menuDataCopy);
+  nextTick(() => menuRef.value?.vxeTableRef?.setAllTreeExpand(true));
+};
+let menuDataCopy = [] as SystemMenuTreeAll;
+const getMenu = async () => {
+  await runAsync();
+  menuDataCopy = cloneDeep(data.value!);
+  search(searchText.value);
+};
+
+const { runAsync: delRun, loading: delLoading } = delSystemMenuApi();
+const delId = ref<string>();
+const del = async (id: string) => {
+  delId.value = id;
+  await delRun(id);
+  await getMenu();
+};
+const showAddOrUp = (id?: string) => {
+  open({
+    id,
+    onSuccess: async () => {
+      await getMenu();
+    },
+  });
+};
+const showInfo = (id?: string) => {
+  openInfo({ id });
+};
+await Promise.all([loadRes, getMenu()]);
+</script>
+<style lang="scss" scoped>
+.menu {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  .table-menu {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    :deep(.me-vxe-body) {
+      flex-grow: 1;
+    }
+  }
+}
+</style>

package/template/meadmin/view/admin/src/views/system/menuRole/components/menu/lang/en.json

@@ -0,0 +1,20 @@
+{
+  "父级": "Parent",
+  "ID": "Id",
+  "菜单名称": "Title",
+  "类型": "Menu type",
+  "状态": "Status",
+  "权限": "Rule",
+  "排序(降序)": "Order num",
+  "路径": "Path",
+  "外链": "Is link",
+  "组件路径(相对于views文件夹)": "Component",
+  "隐藏": "Hide menu",
+  "缓存": "Cache",
+  "图标": "Icon",
+  "固定tag": "Affix",
+  "恒定展示(只有一个子元素时不隐藏)": "Always show",
+  "面包屑": "Breadcrumb",
+  "创建时间": "Created time",
+  "最后更新时间": "Updated time"
+}

package/template/meadmin/view/admin/src/views/system/menuRole/components/role/components/addOrUp.vue

@@ -0,0 +1,94 @@
+<template>
+  <me-dialog v-model="show" :title="t(id ? '编辑' : '新增')" :close-on-click-modal="false" @closed="$emit('closed')">
+    <el-form ref="formEl" v-loading="loading" :model="info" :rules="rules" class="add" label-width="auto">
+      <el-form-item :label="t('父级')" prop="parentId">
+        <el-tree-select v-model="info.parentId" :data="treeAllList || []" check-strictly node-key="id" :props="{ label: 'roleName' }" :render-after-expand="false" />
+      </el-form-item>
+      <el-form-item :label="t('角色名称')" prop="roleName">
+        <el-input v-model="info.roleName"></el-input>
+      </el-form-item>
+      <el-form-item :label="t('角色标识')" prop="roleKey">
+        <el-input v-model="info.roleKey"></el-input>
+      </el-form-item>
+      <el-form-item :label="t('排序(降序)')" prop="orderNum">
+        <el-input-number v-model="info.orderNum" :value-on-clear="null"></el-input-number>
+      </el-form-item>
+      <el-form-item :label="t('状态')" prop="status">
+        <el-select v-model="info.status" :value-on-clear="null">
+          <el-option v-for="val in dict.status" :key="val.value" :value="val.value" :label="val.label" />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="t('备注')" prop="remark">
+        <el-input v-model="info.remark"></el-input>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <me-button @click="() => (show = false)">{{ t('取消') }}</me-button>
+      <me-button type="primary" @click="submit">{{ t('提交') }}</me-button>
+    </template>
+  </me-dialog>
+</template>
+
+<script setup lang="ts" name="AddOrUpSystemRole">
+import { SystemRole, addSystemRoleApi, systemRoleInfoApi, systemRoleTreeAllApi, updateSystemRoleApi } from '@/api/system/role';
+import { useLocalesI18n } from '@/locales/i18n';
+import { resetObj } from '@/utils/helper';
+import { FormInstance, FormRules } from 'element-plus';
+import { getDict } from '../dict.js';
+const { runAsync: systemRoleInfoApiRunSync } = systemRoleInfoApi();
+const { runAsync: updateSystemRoleApiRunAsync } = updateSystemRoleApi();
+const { runAsync: addSystemRoleApiRunAsync } = addSystemRoleApi();
+const { data: treeAllList, runAsync: getTreeAllAsync } = systemRoleTreeAllApi();
+let { t, loadRes } = useLocalesI18n({}, [(locale: string) => import(`../lang/${locale}.json`), 'systemRole']);
+await Promise.all([loadRes, getTreeAllAsync()]);
+const dict = getDict(t);
+const show = defineModel<boolean>();
+const props = defineProps<{
+  id?: string;
+}>();
+const emit = defineEmits<{
+  (e: 'success'): void;
+  (e: 'closed'): void;
+}>();
+const info = reactive(new SystemRole());
+const loading = ref(false);
+watch(
+  () => props.id,
+  async (id?: string) => {
+    if (id) {
+      loading.value = true;
+      resetObj(info, await systemRoleInfoApiRunSync(id));
+      loading.value = false;
+    }
+  },
+  { immediate: true },
+);
+const rules: FormRules = {
+  parentId: [{ type: 'string', max: 100, message: t('{label} 长度必须小于等于 {max}', { label: t('父级id'), max: 100 }), trigger: 'blur' }],
+  roleName: [
+    { required: true, message: t('{label} 必须填写', { label: t('角色名称') }), trigger: 'blur' },
+    { type: 'string', min: 1, max: 50, message: t('{label} 长度必须在 {min} 及 {max} 之间', { label: t('角色名称'), min: 1, max: 50 }), trigger: 'blur' },
+  ],
+  roleKey: [
+    { required: true, message: t('{label} 必须填写', { label: t('角色标识') }), trigger: 'blur' },
+    { type: 'string', min: 1, max: 50, message: t('{label} 长度必须在 {min} 及 {max} 之间', { label: t('角色标识'), min: 1, max: 50 }), trigger: 'blur' },
+  ],
+  orderNum: [{ type: 'number', max: 9999, message: t('{label} 必须小于等于 {max}', { label: t('排序(降序)'), max: 9999 }), trigger: 'blur' }],
+  remark: [{ type: 'string', min: 1, max: 100, message: t('{label} 长度必须在 {min} 及 {max} 之间', { label: t('备注'), min: 1, max: 100 }), trigger: 'blur' }],
+};
+const formEl = ref<FormInstance>();
+const submit = async () => {
+  try {
+    await formEl.value!.validate();
+  } catch (invalidFields) {
+    return formEl.value!.scrollToField(Object.keys(invalidFields!)[0]);
+  }
+  if (props.id) {
+    await updateSystemRoleApiRunAsync(props.id, info);
+  } else {
+    await addSystemRoleApiRunAsync(info);
+  }
+  emit('success');
+  show.value = false;
+};
+</script>

package/template/meadmin/view/admin/src/views/system/menuRole/components/role/components/info.vue

@@ -0,0 +1,59 @@
+<template>
+  <me-dialog v-model="show" :title="t('详情')" :close-on-click-modal="false" @closed="emit('closed')">
+    <el-descriptions v-loading="loading" class="info" :border="true">
+      <el-descriptions-item :label="t('ID')">{{ formatterStrExec(data?.id) }}</el-descriptions-item>
+      <el-descriptions-item :label="t('父级')">{{ formatterStrExec(data?.parent?.roleName) }}</el-descriptions-item>
+      <el-descriptions-item :label="t('角色名称')">{{ formatterStrExec(data?.roleName) }}</el-descriptions-item>
+      <el-descriptions-item :label="t('角色标识')">{{ formatterStrExec(data?.roleKey) }}</el-descriptions-item>
+      <el-descriptions-item :label="t('排序(降序)')">{{ formatterStrExec(data?.orderNum) }}</el-descriptions-item>
+      <el-descriptions-item :label="t('状态')">{{ formatterDictExec(dict, 'status', data?.status) }}</el-descriptions-item>
+      <el-descriptions-item :label="t('备注')">{{ formatterStrExec(data?.remark) }}</el-descriptions-item>
+      <el-descriptions-item :label="t('创建时间')">
+        {{ formatterAtExec(data?.createdAt) }}
+      </el-descriptions-item>
+      <el-descriptions-item :label="t('最后更新时间')">
+        {{ formatterAtExec(data?.updatedAt) }}
+      </el-descriptions-item>
+      <el-descriptions-item :label="t('创建人')"> {{ formatterStrExec(data?.createdAdmin?.nickname) }}({{ formatterStrExec(data?.createdAdmin?.username) }}) </el-descriptions-item>
+      <el-descriptions-item :label="t('最后更新人')"> {{ formatterStrExec(data?.updatedAdmin?.nickname) }}({{ formatterStrExec(data?.updatedAdmin?.username) }}) </el-descriptions-item>
+    </el-descriptions>
+    <template #footer>
+      <me-button @click="() => (show = false)">{{ t('关闭') }}</me-button>
+    </template>
+  </me-dialog>
+</template>
+
+<script setup lang="ts" name="Info">
+import { systemRoleInfoApi } from '@/api/system/role.js';
+import { useLocalesI18n } from '@/locales/hooks.js';
+import { formatterAtExec, formatterDictExec, formatterStrExec } from '@/utils/helper.js';
+import { getDict } from '../dict.js';
+let { t, loadRes } = useLocalesI18n({}, [(locale: string) => import(`../lang/${locale}.json`), 'systemAdmin']);
+await loadRes;
+const dict = getDict(t);
+const show = defineModel<boolean>();
+const props = defineProps<{
+  id?: string;
+}>();
+const emit = defineEmits<{
+  (e: 'closed'): void;
+}>();
+const { data, loading, runAsync } = systemRoleInfoApi();
+watch(
+  () => props.id,
+  async (id?: string) => {
+    if (id) {
+      runAsync(id);
+    }
+  },
+  { immediate: true },
+);
+</script>
+<style lang="scss" scoped>
+.info {
+  .view-img {
+    width: 80px;
+    height: 80px;
+  }
+}
+</style>

package/template/meadmin/view/admin/src/views/system/menuRole/components/role/dict.ts

@@ -0,0 +1,7 @@
+export const getDict = (t = (str: string) => str) =>
+  reactive({
+    status: [
+      { value: 1, label: t('启用') },
+      { value: 0, label: t('禁用') },
+    ],
+  });

package/template/meadmin/view/admin/src/views/system/menuRole/components/role/index.vue

@@ -0,0 +1,153 @@
+<template>
+  <div class="role">
+    <me-vxe-table
+      ref="roleRef"
+      v-model:quick-search="searchText"
+      :data="data || []"
+      :loading="loading"
+      :row-config="{ isCurrent: true, useKey: true }"
+      :tree-config="{ expandAll: true, showLine: true }"
+      :column-config="{ useKey: true }"
+      :custom-column="false"
+      :print="false"
+      :export-menu="[]"
+      :quick-search-placeholder="t('输入角色名称快捷查询')"
+      :on-add="permission('system_role_add') ? showAddOrUp : undefined"
+      show-overflow
+      height="auto"
+      me-class="table-role"
+      @current-row-change="roleChange"
+      @refresh="getRole"
+      @quick-search="search"
+    >
+      <vxe-column field="name" :title="t('角色组')" tree-node>
+        <template #default="{ row }">
+          <div class="role-item">
+            <div>
+              <span v-html="row.roleName"></span>
+              &nbsp;<el-tag v-if="row.status === 0" size="small" type="info">{{ t('禁用') }}</el-tag>
+              <el-tag v-else size="small" type="primary">{{ t('启用') }}</el-tag>
+            </div>
+            <div class="role-item-btn">
+              <me-button v-if="permission('system_role_info')" link :title="t('详情')" @click="showInfo(row.id)">
+                <mel-icon-memo />
+              </me-button>
+              <template v-if="row.isSuper === 0">
+                <me-button v-if="permission('system_role_edit')" type="primary" link :title="t('编辑')" @click="showAddOrUp(row.id)"><mel-icon-edit /></me-button>
+                <me-button v-if="permission('system_role_del')" type="danger" link style="margin-left: 5px" :title="t('删除')" @click="del(row.id)"><mel-icon-delete /></me-button>
+              </template>
+            </div>
+          </div>
+        </template>
+      </vxe-column>
+    </me-vxe-table>
+  </div>
+</template>
+<script setup lang="ts" name="Group">
+import { delSystemRoleApi, SystemRoleInfo, SystemRoleTreeAll, systemRoleTreeAllApi, updateSystemRoleApi } from '@/api/system/role';
+import { useActionModel } from '@/hooks/index.js';
+import { useLocalesI18n } from '@/locales/i18n';
+import { searchTreeTable } from '@/utils/helper.js';
+import { permission } from '@/utils/permission.js';
+import { cloneDeep } from 'lodash-es';
+import { VxeTableEvents } from 'vxe-table';
+import AddOrUp from './components/addOrUp.vue';
+import Info from './components/info.vue';
+let { t, loadRes } = useLocalesI18n({}, [(locale: string) => import(`./lang/${locale}.json`), 'systemRole']);
+const roleRef = ref<MeVxeTableInstance>();
+const emit = defineEmits<{
+  currentChange: [menuIds: string[], isSuper: 0 | 1];
+}>();
+
+const roleChange: VxeTableEvents.CurrentRowChange<SystemRoleInfo> = ({ row }) => {
+  emit(
+    'currentChange',
+    row.menus.map((menu) => menu.id),
+    row.isSuper,
+  );
+};
+const { open } = useActionModel(AddOrUp);
+const { open: openInfo } = useActionModel(Info);
+const { loading, runAsync } = systemRoleTreeAllApi();
+const { runAsync: delRun } = delSystemRoleApi();
+const { runAsync: updateSystemRoleApiRunAsync } = updateSystemRoleApi();
+let dataCopy = [] as SystemRoleTreeAll;
+const data = ref<SystemRoleTreeAll>([]);
+const searchText = ref('');
+const search = (searchText = '') => {
+  data.value = searchTreeTable(searchText, ['roleName'] as const, dataCopy);
+  nextTick(() => roleRef.value?.vxeTableRef?.setAllTreeExpand(true));
+};
+const getRole = async () => {
+  dataCopy = cloneDeep(await runAsync());
+  emit('currentChange', [], 0);
+  search(searchText.value);
+};
+const delId = ref<string>();
+const del = async (id: string) => {
+  delId.value = id;
+  await delRun(id);
+  await search();
+};
+const showAddOrUp = (id?: string) => {
+  open({
+    id,
+    onSuccess: async () => {
+      await getRole();
+    },
+  });
+};
+const setRoleMenu = async (menuIds?: string[]) => {
+  if (!menuIds) {
+    return false;
+  }
+  const row = roleRef.value!.vxeTableRef!.getCurrentRecord();
+  if (row) {
+    await updateSystemRoleApiRunAsync(row.id, { menuIds });
+    row.menus = menuIds.map((id) => ({ id }));
+    return true;
+  }
+  ElMessage.error(t('请先选择角色'));
+};
+const showInfo = (id?: string) => {
+  openInfo({ id });
+};
+defineExpose({ setRoleMenu });
+await Promise.all([loadRes, getRole()]);
+</script>
+<style lang="scss" scoped>
+.role {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+
+  .table-role {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    :deep(.me-vxe-body) {
+      flex-grow: 1;
+    }
+
+    .role-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex-wrap: wrap;
+
+      .role-item-btn {
+        display: none;
+      }
+    }
+
+    :deep(.row--current) {
+      .role-item-btn {
+        display: block;
+      }
+    }
+  }
+}
+</style>

package/template/meadmin/view/admin/src/views/system/menuRole/components/role/lang/en.json

@@ -0,0 +1,14 @@
+{
+  "父级": "Parent",
+  "ID": "Id",
+  "角色名称": "Role name",
+  "角色标识": "Role key",
+  "排序(降序)": "Order num",
+  "状态": "Status",
+  "备注": "Remark",
+  "关联用户": "Admins",
+  "具有权限菜单": "Menus",
+  "创建时间": "Created time",
+  "最后更新时间": "Updated time",
+  "角色组": "Role Group"
+}

package/template/meadmin/view/admin/src/views/system/menuRole/index.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="role-permissions">
+    <el-scrollbar always view-class="body">
+      <div class="index-role">
+        <Role ref="role" @current-change="setChecked"></Role>
+      </div>
+      <div class="index-menu">
+        <Menu :checked-menu-ids="checkedMenuIds" :is-super="roleIsSuper" @sub-menus="role!.setRoleMenu($event)"></Menu>
+      </div>
+    </el-scrollbar>
+  </div>
+</template>
+<script lang="ts" setup name="RulePermissions">
+import Menu from './components/menu/index.vue';
+import Role from './components/role/index.vue';
+const role = ref<InstanceType<typeof Role>>();
+const checkedMenuIds = shallowRef([] as string[]);
+const roleIsSuper = ref<0 | 1>(0);
+const setChecked = (menuIds: string[], isSuper: 0 | 1) => {
+  checkedMenuIds.value = menuIds;
+  roleIsSuper.value = isSuper;
+};
+</script>
+<style lang="scss" scoped>
+.role-permissions {
+  z-index: 1;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+
+  :deep(.body) {
+    display: flex;
+    flex-wrap: wrap;
+    min-height: 100%;
+    padding: calc($page-padding - 10px);
+
+    .index-role {
+      flex: 1;
+      margin: 10px;
+      min-width: 300px;
+      min-height: 600px;
+      position: relative;
+    }
+
+    .index-menu {
+      flex: 3;
+      margin: 10px;
+      min-height: 600px;
+      position: relative;
+    }
+
+    .keyword-lighten {
+      background-color: var(--el-color-warning-light-3);
+    }
+  }
+}
+</style>