初始化

easyflow-ui-admin/app/src/views/system/sysMenu/SysMenuList.vue

@@ -0,0 +1,182 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+
+import { createIconifyIcon } from '@easyflow/icons';
+
+import { Delete, MoreFilled, Plus } from '@element-plus/icons-vue';
+import {
+  ElButton,
+  ElDropdown,
+  ElDropdownItem,
+  ElDropdownMenu,
+  ElIcon,
+  ElMessage,
+  ElMessageBox,
+  ElTable,
+  ElTableColumn,
+} from 'element-plus';
+
+import { api } from '#/api/request';
+import { $t } from '#/locales';
+import { useDictStore } from '#/store';
+
+import SysMenuModal from './SysMenuModal.vue';
+
+onMounted(() => {
+  getTree();
+  initDict();
+});
+
+const saveDialog = ref();
+const treeData = ref([]);
+const loading = ref(false);
+const dictStore = useDictStore();
+function initDict() {
+  dictStore.fetchDictionary('menuType');
+  dictStore.fetchDictionary('yesOrNo');
+}
+function reset() {
+  getTree();
+}
+function showDialog(row: any) {
+  saveDialog.value.openDialog({ ...row });
+}
+function remove(row: any) {
+  ElMessageBox.confirm($t('message.deleteAlert'), $t('message.noticeTitle'), {
+    confirmButtonText: $t('message.ok'),
+    cancelButtonText: $t('message.cancel'),
+    type: 'warning',
+    beforeClose: (action, instance, done) => {
+      if (action === 'confirm') {
+        instance.confirmButtonLoading = true;
+        api
+          .post('/api/v1/sysMenu/remove', { id: row.id })
+          .then((res) => {
+            instance.confirmButtonLoading = false;
+            if (res.errorCode === 0) {
+              ElMessage.success(res.message);
+              reset();
+              done();
+            }
+          })
+          .catch(() => {
+            instance.confirmButtonLoading = false;
+          });
+      } else {
+        done();
+      }
+    },
+  }).catch(() => {});
+}
+function getTree() {
+  loading.value = true;
+  api
+    .get('/api/v1/sysMenu/list', {
+      params: {
+        asTree: true,
+      },
+    })
+    .then((res) => {
+      loading.value = false;
+      treeData.value = res.data;
+    });
+}
+</script>
+
+<template>
+  <div class="flex h-full flex-col gap-6 p-6">
+    <SysMenuModal ref="saveDialog" @reload="reset" />
+    <div>
+      <ElButton
+        v-access:code="'/api/v1/sysMenu/save'"
+        @click="showDialog({})"
+        type="primary"
+      >
+        <ElIcon class="mr-1">
+          <Plus />
+        </ElIcon>
+        {{ $t('button.add') }}
+      </ElButton>
+    </div>
+
+    <div class="bg-background border-border flex-1 rounded-lg border p-5">
+      <ElTable :data="treeData" row-key="id" v-loading="loading">
+        <ElTableColumn prop="menuType" :label="$t('sysMenu.menuType')">
+          <template #default="{ row }">
+            {{ dictStore.getDictLabel('menuType', row.menuType) }}
+          </template>
+        </ElTableColumn>
+        <ElTableColumn prop="menuTitle" :label="$t('sysMenu.menuTitle')">
+          <template #default="{ row }">
+            {{ $t(row.menuTitle) }}
+          </template>
+        </ElTableColumn>
+        <ElTableColumn prop="menuUrl" :label="$t('sysMenu.menuUrl')">
+          <template #default="{ row }">
+            {{ row.menuUrl }}
+          </template>
+        </ElTableColumn>
+        <ElTableColumn prop="component" :label="$t('sysMenu.component')">
+          <template #default="{ row }">
+            {{ row.component }}
+          </template>
+        </ElTableColumn>
+        <ElTableColumn prop="menuIcon" :label="$t('sysMenu.menuIcon')">
+          <template #default="{ row }">
+            <component class="size-5" :is="createIconifyIcon(row.menuIcon)" />
+          </template>
+        </ElTableColumn>
+        <ElTableColumn prop="isShow" :label="$t('sysMenu.isShow')">
+          <template #default="{ row }">
+            {{ dictStore.getDictLabel('yesOrNo', row.isShow) }}
+          </template>
+        </ElTableColumn>
+        <ElTableColumn
+          prop="permissionTag"
+          :label="$t('sysMenu.permissionTag')"
+        >
+          <template #default="{ row }">
+            {{ row.permissionTag }}
+          </template>
+        </ElTableColumn>
+        <ElTableColumn prop="sortNo" :label="$t('sysMenu.sortNo')">
+          <template #default="{ row }">
+            {{ row.sortNo }}
+          </template>
+        </ElTableColumn>
+        <ElTableColumn prop="created" :label="$t('sysMenu.created')">
+          <template #default="{ row }">
+            {{ row.created }}
+          </template>
+        </ElTableColumn>
+        <ElTableColumn :label="$t('common.handle')" width="90" align="right">
+          <template #default="{ row }">
+            <div class="flex items-center gap-3">
+              <ElButton link type="primary" @click="showDialog(row)">
+                {{ $t('button.edit') }}
+              </ElButton>
+
+              <ElDropdown>
+                <ElButton link :icon="MoreFilled" />
+
+                <template #dropdown>
+                  <ElDropdownMenu>
+                    <div v-access:code="'/api/v1/sysMenu/remove'">
+                      <ElDropdownItem @click="remove(row)">
+                        <ElButton type="danger" :icon="Delete" link>
+                          {{ $t('button.delete') }}
+                        </ElButton>
+                      </ElDropdownItem>
+                    </div>
+                  </ElDropdownMenu>
+                </template>
+              </ElDropdown>
+            </div>
+          </template>
+        </ElTableColumn>
+      </ElTable>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

easyflow-ui-admin/app/src/views/system/sysMenu/SysMenuModal.vue

@@ -0,0 +1,187 @@
+<script setup lang="ts">
+import type { FormInstance } from 'element-plus';
+
+import { onMounted, ref } from 'vue';
+
+import { IconPicker } from '@easyflow/common-ui';
+
+import {
+  ElButton,
+  ElDialog,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElMessage,
+  ElOption,
+  ElSelect,
+} from 'element-plus';
+
+import { api } from '#/api/request';
+import DictSelect from '#/components/dict/DictSelect.vue';
+import { $t } from '#/locales';
+import { componentKeys } from '#/router/routes';
+
+const emit = defineEmits(['reload']);
+
+// vue
+onMounted(() => {});
+defineExpose({
+  openDialog,
+});
+const saveForm = ref<FormInstance>();
+// variables
+const dialogVisible = ref(false);
+const isAdd = ref(true);
+const entity = ref<any>({
+  parentId: '',
+  menuType: '',
+  menuTitle: '',
+  menuUrl: '',
+  component: '',
+  menuIcon: '',
+  isShow: '',
+  permissionTag: '',
+  sortNo: '',
+  status: '',
+  remark: '',
+});
+const btnLoading = ref(false);
+const rules = ref({
+  parentId: [
+    { required: true, message: $t('message.required'), trigger: 'blur' },
+  ],
+  menuType: [
+    { required: true, message: $t('message.required'), trigger: 'blur' },
+  ],
+  menuTitle: [
+    { required: true, message: $t('message.required'), trigger: 'blur' },
+  ],
+  isShow: [
+    { required: true, message: $t('message.required'), trigger: 'blur' },
+  ],
+  status: [
+    { required: true, message: $t('message.required'), trigger: 'blur' },
+  ],
+});
+// functions
+function openDialog(row: any) {
+  if (row.id) {
+    isAdd.value = false;
+  }
+  entity.value = row;
+  dialogVisible.value = true;
+}
+function save() {
+  saveForm.value?.validate((valid) => {
+    if (valid) {
+      btnLoading.value = true;
+      api
+        .post(
+          isAdd.value ? 'api/v1/sysMenu/save' : 'api/v1/sysMenu/update',
+          entity.value,
+        )
+        .then((res) => {
+          btnLoading.value = false;
+          if (res.errorCode === 0) {
+            ElMessage.success(res.message);
+            emit('reload');
+            closeDialog();
+          }
+        })
+        .catch(() => {
+          btnLoading.value = false;
+        });
+    }
+  });
+}
+function closeDialog() {
+  saveForm.value?.resetFields();
+  isAdd.value = true;
+  entity.value = {};
+  dialogVisible.value = false;
+}
+</script>
+
+<template>
+  <ElDialog
+    v-model="dialogVisible"
+    draggable
+    :title="isAdd ? $t('button.add') : $t('button.edit')"
+    :before-close="closeDialog"
+    :close-on-click-modal="false"
+    :z-index="1999"
+  >
+    <ElForm
+      label-width="120px"
+      ref="saveForm"
+      :model="entity"
+      status-icon
+      :rules="rules"
+    >
+      <ElFormItem prop="parentId" :label="$t('sysMenu.parentId')">
+        <DictSelect
+          :extra-options="[{ label: $t('sysMenu.root'), value: 0 }]"
+          v-model="entity.parentId"
+          dict-code="sysMenu"
+        />
+      </ElFormItem>
+      <ElFormItem prop="menuType" :label="$t('sysMenu.menuType')">
+        <DictSelect v-model="entity.menuType" dict-code="menuType" />
+      </ElFormItem>
+      <ElFormItem prop="menuTitle" :label="$t('sysMenu.menuTitle')">
+        <ElInput v-model.trim="entity.menuTitle" />
+      </ElFormItem>
+      <ElFormItem prop="menuUrl" :label="$t('sysMenu.menuUrl')">
+        <ElInput v-model.trim="entity.menuUrl" />
+      </ElFormItem>
+      <ElFormItem prop="component" :label="$t('sysMenu.component')">
+        <ElInput v-model.trim="entity.component">
+          <template #append>
+            <ElSelect
+              v-model="entity.component"
+              filterable
+              style="width: 100px"
+            >
+              <ElOption
+                v-for="item in componentKeys"
+                :key="item"
+                :label="item"
+                :value="item"
+              />
+            </ElSelect>
+          </template>
+        </ElInput>
+      </ElFormItem>
+      <ElFormItem prop="menuIcon" :label="$t('sysMenu.menuIcon')">
+        <IconPicker v-model="entity.menuIcon" />
+      </ElFormItem>
+      <ElFormItem prop="isShow" :label="$t('sysMenu.isShow')">
+        <DictSelect v-model="entity.isShow" dict-code="yesOrNo" />
+      </ElFormItem>
+      <ElFormItem prop="permissionTag" :label="$t('sysMenu.permissionTag')">
+        <ElInput v-model.trim="entity.permissionTag" />
+      </ElFormItem>
+      <ElFormItem prop="sortNo" :label="$t('sysMenu.sortNo')">
+        <ElInput v-model.trim="entity.sortNo" />
+      </ElFormItem>
+      <ElFormItem prop="remark" :label="$t('sysMenu.remark')">
+        <ElInput v-model.trim="entity.remark" />
+      </ElFormItem>
+    </ElForm>
+    <template #footer>
+      <ElButton @click="closeDialog">
+        {{ $t('button.cancel') }}
+      </ElButton>
+      <ElButton
+        type="primary"
+        @click="save"
+        :loading="btnLoading"
+        :disabled="btnLoading"
+      >
+        {{ $t('button.save') }}
+      </ElButton>
+    </template>
+  </ElDialog>
+</template>
+
+<style scoped></style>