yg-yygl 0.0.1

package/src/views/sys/menu/menu-form.vue

@@ -0,0 +1,746 @@
+<script setup lang="ts">
+import type { FormItemConfig } from '@udp/component-ui';
+
+import type {
+  Menu,
+  MenuCreateParams,
+  MenuLabelResponse,
+} from '../../../api/menu/types';
+
+import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue';
+
+import { Dialog, Form } from '@udp/component-ui';
+
+import { ElMessage } from 'element-plus';
+
+import {
+  createMenu,
+  getMenuById,
+  getMenuTreeExclude,
+  updateMenu,
+} from '../../../api/menu';
+
+import LabelSelector from './components/label-selector.vue';
+
+type Props = {
+  editData?: Menu | null;
+  menuStyle?: number; // 菜单样式：0-Web菜单，1-App菜单
+  parentData?: Menu | null;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  editData: undefined,
+  menuStyle: 0,
+  parentData: undefined,
+});
+
+// const currentTenantId = computed(() => {
+//   return useUserStore().accountInfo?.tenantId;
+// });
+
+// interface MenuTree extends Menu {
+//   disabled: boolean;
+// }
+
+// 组件状态
+const isEdit = computed(() => !!props.editData?.id);
+const loading = ref(false);
+const formRef = ref<any>();
+
+// 表单数据
+const initialFormData = reactive({
+  parentId: '0',
+  menuName: '',
+  menuType: 1,
+  url: '',
+  icon: '',
+  permissionType: '',
+  orderBy: 1,
+  visual: 0,
+  target: '主窗口',
+  menuLabels: [] as MenuLabelResponse[],
+  remarks: '',
+});
+
+const formValues = computed(() => formRef.value?.getValues());
+
+// 菜单树选项
+const menuTreeOptions = ref<Menu[]>([]);
+
+// 标签选择器相关
+const showLabelSelector = ref(false);
+
+// 菜单类型选项
+const menuTypeOptions = [
+  { label: '分类', value: 0 },
+  { label: '菜单', value: 1 },
+  { label: '按钮', value: 2 },
+];
+
+// 权限类型选项
+const permissionTypeOptions = [
+  { label: '新增', value: 'add' },
+  { label: '删除', value: 'delete' },
+  { label: '修改', value: 'update' },
+  { label: '查询', value: 'query' },
+];
+
+// 是否可见选项
+const visualOptions = [
+  { label: '可见', value: 0 },
+  { label: '隐藏', value: 1 },
+];
+
+// 打开方式选项
+const targetOptions = [
+  { label: '主窗口', value: '主窗口' },
+  { label: '新窗口', value: '新窗口' },
+  { label: 'IFRAME', value: 'IFRAME' },
+];
+
+// 表单配置
+const formItems = ref<FormItemConfig[]>([
+  {
+    prop: 'parentId',
+    label: '上级菜单',
+    type: 'tree-select',
+    placeholder: '请选择上级菜单',
+    condition: (values) => values.menuType !== 0,
+    data: menuTreeOptions,
+    props: {
+      props: {
+        label: 'menuName',
+        value: 'id',
+      },
+      checkStrictly: true,
+      emptyValues: [null, undefined, 0, '0'],
+    },
+  },
+  {
+    prop: 'menuType',
+    label: '菜单类型',
+    type: 'radio-button',
+    options: menuTypeOptions,
+    required: true,
+    props: {
+      disabled: isEdit.value,
+    },
+    rules: [
+      {
+        required: true,
+        message: '请选择菜单类型',
+        trigger: ['blur', 'change'],
+      },
+    ],
+  },
+  {
+    prop: 'menuName',
+    label: '分类名称',
+    type: 'input',
+    required: true,
+    placeholder: `请输入分类名称`,
+    trim: true,
+    condition: (values) => values.menuType === 0,
+    rules: [
+      {
+        required: true,
+        message: `请输入分类名称`,
+        trigger: ['blur', 'input'],
+      },
+      {
+        max: 20,
+        message: `分类名称不能超过20个字符`,
+        trigger: ['blur', 'input'],
+      },
+    ],
+  },
+  {
+    prop: 'menuName',
+    label: '菜单名称',
+    type: 'input',
+    required: true,
+    placeholder: '请输入菜单名称',
+    trim: true,
+    condition: (values) => values.menuType === 1,
+    rules: [
+      {
+        required: true,
+        message: `请输入菜单名称`,
+        trigger: ['blur', 'input'],
+      },
+      {
+        max: 20,
+        message: '菜单名称不能超过20个字符',
+        trigger: ['blur', 'input'],
+      },
+    ],
+  },
+  {
+    prop: 'menuName',
+    label: '按钮名称',
+    type: 'input',
+    required: true,
+    placeholder: '请输入按钮名称',
+    trim: true,
+    condition: (values) => values.menuType === 2,
+    rules: [
+      {
+        required: true,
+        message: `请输入按钮名称`,
+        trigger: ['blur', 'input'],
+      },
+      {
+        max: 20,
+        message: '按钮名称不能超过20个字符',
+        trigger: ['blur', 'input'],
+      },
+    ],
+  },
+  {
+    prop: 'icon',
+    label: '菜单图标',
+    type: 'icon-picker',
+    required: true,
+    placeholder: '请选择菜单图标',
+    condition: (values) => values.menuType === 1,
+    rules: [
+      {
+        required: true,
+        message: '请选择菜单图标',
+        trigger: ['blur', 'change'],
+      },
+    ],
+  },
+  {
+    prop: 'url',
+    label: '路由地址',
+    type: 'input',
+    condition: (values) => values.menuType === 1,
+    placeholder: '请输入路由地址',
+    trim: true,
+    rules: [
+      {
+        max: 200,
+        message: '路由地址不能超过200个字符',
+        trigger: ['blur', 'input'],
+      },
+    ],
+  },
+  {
+    prop: 'permissionType',
+    label: '权限类型',
+    type: 'select',
+    placeholder: '请选择权限类型',
+    condition: (values) => values.menuType === 2,
+    options: permissionTypeOptions,
+  },
+  {
+    prop: 'orderBy',
+    label: '菜单排序',
+    type: 'number',
+    props: {
+      min: 1,
+      max: 999_999,
+    },
+  },
+  {
+    prop: 'visual',
+    label: '是否可见',
+    type: 'radio-button',
+    options: visualOptions,
+    condition: (values) => values.menuType === 1,
+  },
+  {
+    prop: 'target',
+    label: '打开方式',
+    type: 'radio-button',
+    options: targetOptions,
+    condition: (values) => values.menuType === 1,
+    tooltip: '新窗口和IFRAME两种方式只支持http或https开头地址',
+  },
+  {
+    prop: 'menuLabels',
+    label: '菜单标签',
+    slot: 'menuLabels',
+  },
+  {
+    prop: 'remarks',
+    label: '备注信息',
+    type: 'textarea',
+    placeholder: '请输入备注信息',
+    props: {
+      rows: 3,
+      maxlength: 100,
+      showWordLimit: true,
+    },
+    rules: [
+      {
+        max: 100,
+        message: '备注信息不能超过100个字符',
+        trigger: ['blur', 'input'],
+      },
+    ],
+  },
+]);
+
+// 加载菜单树
+const loadMenuTree = async () => {
+  try {
+    const response = await getMenuTreeExclude({
+      menuStyle: props.menuStyle || 0, // 添加菜单样式参数
+      id: props.editData?.id || '',
+      applicationId: '', // 系统菜单不需要应用ID，传空字符串
+    });
+    console.log('菜单:', response);
+    menuTreeOptions.value = response || [];
+  } catch (error) {
+    console.error('加载菜单树失败:', error);
+  }
+};
+
+// const formatDisabledTree = (tree: Menu[]): MenuTree[] => {
+//   return tree.map((item) => {
+//     return {
+//       ...item,
+//       disabled:
+//         currentTenantId.value !== '0' &&
+//         item.tenantId !== currentTenantId.value,
+//       children: item.children ? formatDisabledTree(item.children) : [],
+//     };
+//   });
+// };
+
+// 加载菜单详情数据
+const loadMenuDetail = async (id: string) => {
+  try {
+    loading.value = true;
+    const response = await getMenuById(id);
+    if (response) {
+      const values = Object.assign(
+        {},
+        {
+          id: response.id || '',
+          parentId: response.parentId || '0',
+          menuName: response.menuName || '',
+          menuType: response.menuType,
+          url: response.url || '',
+          icon: response.icon || '',
+          permissionType: response.permissionType || '',
+          orderBy: response.orderBy || 1,
+          visual: response.visual === undefined ? 0 : response.visual,
+          target: response.target || '',
+          menuLabels: response.labels || [],
+          remarks: response.remarks || '',
+        },
+      );
+      formRef.value?.setValues(values);
+    }
+  } catch (error) {
+    console.error('加载菜单详情失败:', error);
+    ElMessage.error('加载菜单详情失败');
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 初始化表单数据
+const initFormData = (data?: any) => {
+  if (data?.id) {
+    // 编辑模式 - 调用接口获取完整数据
+    loadMenuDetail(data.id);
+  }
+};
+
+// 监听编辑数据和父级数据变化
+watch(
+  () => props.editData,
+  (newEditData) => {
+    console.log('数据变化:', {
+      editData: newEditData,
+    });
+    if (newEditData?.id) {
+      // 编辑模式 - 调用接口获取完整数据
+      loadMenuDetail(newEditData.id);
+    }
+  },
+  { immediate: true, deep: true },
+);
+
+watch(
+  () => props.parentData,
+  (newParentData) => {
+    console.log('父级数据变化:', newParentData);
+    initialFormData.parentId = newParentData?.id || '0';
+    formRef.value?.setValue('parentId', newParentData?.id || '0');
+  },
+  { immediate: true },
+);
+
+// 处理字段变化
+const handleFieldChange = (prop: string, value: any) => {
+  console.log('字段变化:', { prop, value });
+
+  // 处理菜单类型变化时的联动逻辑
+  if (prop === 'menuType') {
+    // 先设置字段值，再清除验证
+    switch (value) {
+      case 0: {
+        // 分类类型：无需特殊处理
+        formRef.value?.setValue('parentId', '0');
+        formRef.value?.setValue('icon', '');
+        formRef.value?.setValue('url', '');
+        break;
+      }
+      case 1: {
+        // 切换到菜单类型时，只在必要时清空权限相关字段
+        if (!formValues.value.icon) {
+          formRef.value?.setValue('icon', '');
+        }
+        if (!formValues.value.url) {
+          formRef.value?.setValue('url', '');
+        }
+        break;
+      }
+      case 2: {
+        // 切换到权限类型时，只在必要时清空菜单相关字段
+        if (!formValues.value.permissionType) {
+          formRef.value?.setValue('permissionType', '');
+        }
+        break;
+      }
+      // No default
+    }
+
+    // 使用多重nextTick和setTimeout确保DOM完全更新后再清除验证
+    nextTick(() => {
+      setTimeout(() => {
+        // 先清除所有验证
+        formRef.value?.clearValidate();
+
+        // 然后根据当前菜单类型清除特定字段的验证
+        switch (value) {
+          case 0: {
+            // 分类类型：清除菜单和权限相关字段的验证
+            formRef.value?.clearValidate(['icon', 'permissionType']);
+            break;
+          }
+          case 1: {
+            // 菜单类型：清除权限相关字段的验证
+            formRef.value?.clearValidate(['permissionType']);
+            break;
+          }
+          case 2: {
+            // 权限类型：清除菜单相关字段的验证
+            formRef.value?.clearValidate(['icon']);
+            break;
+          }
+          // No default
+        }
+
+        // 再次延迟清除，确保生效
+        setTimeout(() => {
+          switch (value) {
+            case 0: {
+              formRef.value?.clearValidate(['icon', 'permissionType']);
+              break;
+            }
+            case 1: {
+              formRef.value?.clearValidate(['permissionType']);
+              break;
+            }
+            case 2: {
+              formRef.value?.clearValidate(['icon']);
+              break;
+            }
+            // No default
+          }
+        }, 100);
+      }, 50); // 增加小延迟确保清除验证生效
+    });
+  }
+};
+
+// 表单验证
+const validate = () => {
+  if (!formValues.value.menuName?.trim()) {
+    ElMessage.error(
+      `请输入${formValues.value.menuType === 1 ? '菜单名称' : '按钮名称'}`,
+    );
+    return false;
+  }
+  if (formValues.value.menuType === 1 && !formValues.value.icon?.trim()) {
+    ElMessage.error('请选择菜单图标');
+    return false;
+  }
+  return true;
+};
+
+// 表单提交
+const handleSubmit = async () => {
+  try {
+    loading.value = true;
+
+    // 表单验证
+    const valid = await formRef.value?.validate();
+    if (!valid) {
+      return false;
+    }
+
+    // 构建提交数据，将menuLabels转换为labels字段
+    const submitData = {
+      ...formValues.value,
+      labels: formValues.value.menuLabels.map((label: MenuLabelResponse) =>
+        label.id.toString(),
+      ),
+      menuStyle: props.menuStyle || 0, // 添加菜单样式字段
+    };
+
+    // 移除menuLabels字段，避免传递给后端
+    if ('menuLabels' in submitData) {
+      delete (submitData as any).menuLabels;
+    }
+
+    console.log('提交的表单数据:', submitData);
+    console.log('当前模式:', isEdit.value ? '编辑' : '新增');
+
+    // 调用API
+    await (isEdit.value
+      ? updateMenu(submitData as unknown as Menu)
+      : createMenu(submitData as MenuCreateParams));
+
+    ElMessage.success(isEdit.value ? '更新成功!' : '创建成功!');
+    return true;
+  } catch {
+    return false;
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 重置表单
+const resetForm = () => {
+  // 重置表单数据
+  initFormData();
+
+  // 清除表单验证
+  nextTick(() => {
+    formRef.value?.clearValidate();
+  });
+};
+
+const handleLabelSelectorConfirm = (labels: MenuLabelResponse[]) => {
+  showLabelSelector.value = false;
+
+  // 使用 Form 组件的 setValue 方法确保正确同步
+  formRef.value.setValue('menuLabels', [...labels]);
+
+  console.log('标签变化:', formValues.value.menuLabels);
+};
+
+// 处理标签选择器取消事件
+const handleLabelSelectorCancel = () => {
+  showLabelSelector.value = false;
+};
+
+// 处理对话框关闭事件（包括点击X按钮、ESC键等）
+const handleDialogClose = () => {
+  // 调用标签选择器的取消方法来重置状态
+  if (labelSelectorRef.value) {
+    labelSelectorRef.value.handleCancel();
+  }
+  showLabelSelector.value = false;
+};
+
+const removeLabelFromMenu = (label: MenuLabelResponse) => {
+  const labels = formValues.value.menuLabels;
+  const index = labels.findIndex((l: MenuLabelResponse) => l.id === label.id);
+  console.log('删除标签:', formValues);
+  if (index !== -1) {
+    labels.splice(index, 1);
+    // 使用 Form 组件的 setValue 方法确保正确同步
+    formRef.value.setValue('menuLabels', [...labels]);
+  }
+};
+
+// 标签选择器组件引用
+const labelSelectorRef = ref();
+
+// 生命周期
+onMounted(() => {
+  loadMenuTree();
+});
+
+defineExpose({
+  handleSubmit,
+  validate,
+  resetForm,
+  initFormData,
+});
+</script>
+
+<template>
+  <Form
+    ref="formRef"
+    :items="formItems"
+    :initial-values="initialFormData"
+    :show-actions="false"
+    label-width="auto"
+    @submit="handleSubmit"
+    @field-change="handleFieldChange"
+  >
+    <!-- 自定义菜单标签插槽 -->
+    <template #menuLabels>
+      <div class="label-section">
+        <div class="selected-labels" v-if="formValues?.menuLabels?.length > 0">
+          <el-tooltip
+            v-for="label in formValues.menuLabels"
+            :key="label.id"
+            effect="dark"
+            placement="top"
+            :content="`#${label.labelName}`"
+          >
+            <el-tag
+              effect="light"
+              closable
+              :disable-transitions="false"
+              @close="removeLabelFromMenu(label)"
+              class="mb-1 mr-1"
+            >
+              <span class="label-text-truncate">#{{ label.labelName }}</span>
+            </el-tag>
+          </el-tooltip>
+        </div>
+        <div class="label-buttons">
+          <el-button
+            size="small"
+            type="primary"
+            @click="showLabelSelector = true"
+          >
+            {{ formValues?.menuLabels?.length > 0 ? '修改标签' : '选择标签' }}
+          </el-button>
+          <span v-if="formValues?.menuLabels?.length > 0" class="label-count">
+            已选择 {{ formValues?.menuLabels?.length }} 个标签
+          </span>
+        </div>
+      </div>
+    </template>
+  </Form>
+
+  <!-- 标签选择器弹窗 -->
+  <Dialog
+    v-model="showLabelSelector"
+    title="选择标签"
+    width="800px"
+    :close-on-click-modal="false"
+    @close="handleDialogClose"
+  >
+    <LabelSelector
+      ref="labelSelectorRef"
+      :menu-labels="formValues?.menuLabels"
+      :menu-style="props.menuStyle || 0"
+      @cancel="handleLabelSelectorCancel"
+      @confirm="handleLabelSelectorConfirm"
+    />
+  </Dialog>
+</template>
+
+<style scoped lang="scss">
+.menu-type-selector {
+  display: flex;
+  width: 320px;
+  overflow: hidden;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+}
+
+.type-button {
+  flex: 1;
+  padding: 8px 16px;
+  font-size: 14px;
+  color: #606266;
+  cursor: pointer;
+  background: #fff;
+  border: none;
+  transition: all 0.3s;
+
+  &:first-child {
+    border-right: 1px solid #dcdfe6;
+  }
+
+  &.active {
+    color: #fff;
+    background: #409eff;
+  }
+
+  &:hover:not(.active) {
+    background: #f5f7fa;
+  }
+}
+
+.label-section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.selected-labels {
+  margin-bottom: 8px;
+}
+
+.label-text-truncate {
+  display: inline-block;
+  max-width: 4em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.label-buttons {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.label-count {
+  font-size: 12px;
+  color: #909399;
+}
+
+.mb-1 {
+  margin-bottom: 4px;
+}
+
+.mr-1 {
+  margin-right: 4px;
+}
+
+.label-text {
+  font-size: 14px;
+  color: #606266;
+}
+
+.label-button {
+  color: #606266;
+  background: #f5f7fa;
+  border: 1px solid #dcdfe6;
+
+  &:hover {
+    color: #409eff;
+    background: #ecf5ff;
+    border-color: #b3d8ff;
+  }
+}
+
+.label-tag {
+  color: #606266;
+  background: #f5f7fa;
+  border: 1px solid #dcdfe6;
+
+  &:hover {
+    color: #409eff;
+    background: #ecf5ff;
+    border-color: #b3d8ff;
+  }
+}
+</style>