gxtyzx-admin/src/views/system/appstore/components/setting/menu-edit.vue

<!-- 编辑弹窗 -->
<template>
  <ele-modal
    :width="400"
    :visible="visible"
    :confirm-loading="loading"
    :title="isUpdate ? '修改组件' : '添加组件'"
    :body-style="{ paddingBottom: '8px' }"
    @update:visible="updateVisible"
    @ok="save"
  >
    <a-form
      :label-col="{ md: { span: 6 }, sm: { span: 4 }, xs: { span: 24 } }"
      :wrapper-col="{ md: { span: 18 }, sm: { span: 20 }, xs: { span: 24 } }"
    >
      <a-row :gutter="16">
        <a-col :md="23" :sm="24" :xs="24">
          <a-form-item label="组件名称" v-bind="validateInfos.appName">
            <a-input
              allow-clear
              :placeholder="`文章详情`"
              v-model:value="form.appName"
            />
          </a-form-item>
          <a-form-item label="组件路径" v-bind="validateInfos.path">
            <a-input
              allow-clear
              :placeholder="`/article/detail/:id`"
              v-model:value="form.path"
            />
          </a-form-item>
          <a-form-item label="组件路径" v-bind="validateInfos.component">
            <a-input
              allow-clear
              :placeholder="`/article/detail`"
              v-model:value="form.component"
              @pressEnter="save"
            />
          </a-form-item>
          <a-form-item label="路由元数据" v-bind="validateInfos.meta">
            <a-textarea
              :rows="4"
              :maxlength="200"
              placeholder="请输入JSON格式的路由元数据"
              v-model:value="form.meta"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </ele-modal>
</template>

<script lang="ts" setup>
  import { ref, reactive, watch } from 'vue';
  import { Form, message } from 'ant-design-vue';
  import { addApp, updateApp } from '@/api/dashboard/appstore';
  import type { App } from '@/api/dashboard/appstore/model';
  import { assignObject, isExternalLink } from 'ele-admin-pro';

  const useForm = Form.useForm;

  const emit = defineEmits<{
    (e: 'done'): void;
    (e: 'update:visible', visible: boolean): void;
  }>();

  const props = defineProps<{
    // 弹窗是否打开
    visible: boolean;
    // 修改回显的数据
    data?: App | null;
    parentId?: number;
  }>();

  // 提交状态
  const loading = ref(false);
  // 是否是修改
  const isUpdate = ref(false);
  // 表单数据
  const form = reactive<App>({
    appId: undefined,
    // 菜单id
    appName: '',
    // 上级id, 0是顶级
    parentId: 0,
    // 菜单类型, 0菜单, 1按钮
    menuType: 0,
    // 排序号
    sortNumber: 100,
    path: '',
    component: '',
    meta: ''
  });

  // 表单验证规则
  const rules = reactive({
    appName: [
      {
        required: true,
        type: 'string',
        message: '请输入按钮名称',
        trigger: 'blur'
      }
    ],
    path: [
      {
        required: true,
        type: 'string',
        message: '请输入路由地址',
        trigger: 'blur'
      }
    ],
    component: [
      {
        required: true,
        type: 'string',
        message: '请输组件路径',
        trigger: 'blur'
      }
    ]
  });

  const { resetFields, validate, validateInfos } = useForm(form, rules);

  /* 保存编辑 */
  const save = () => {
    validate()
      .then(() => {
        loading.value = true;
        const appForm = {
          ...form,
          parentId: props.parentId,
          appID: props.data?.appId,
          menuType: Number(form.menuType),
          appName: form.appName
        };
        const saveOrUpdate = isUpdate.value ? updateApp : addApp;
        saveOrUpdate(appForm)
          .then((msg) => {
            loading.value = false;
            message.success(msg);
            updateVisible(false);
            emit('done');
          })
          .catch((e) => {
            loading.value = false;
            message.error(e.message);
          });
      })
      .catch(() => {});
  };

  /* 更新visible */
  const updateVisible = (value: boolean) => {
    emit('update:visible', value);
  };

  watch(
    () => props.visible,
    (visible) => {
      if (visible) {
        if (props.data?.appId) {
          const isExternal = isExternalLink(props.data.path);
          const isInner = isExternalLink(props.data.component);
          assignObject(form, {
            ...props.data,
            openType: isExternal ? 2 : isInner ? 1 : 0,
            parentId: props.data?.parentId
          });
          isUpdate.value = true;
        } else {
          isUpdate.value = false;
        }
      } else {
        resetFields();
        isUpdate.value = false;
      }
    }
  );
</script>
<script lang="ts">
  import * as icons from '@ant-design/icons-vue';

  export default {
    components: icons
  };
</script>