修改模态框对象类型.

2023-09-25 14:36:13 +08:00
parent e1fafbe135
commit 09610b3c82
29 changed files with 1450 additions and 2658 deletions
--- a/orion-ops-ui/src/views/user/role/components/role-form-modal.vue
+++ b/orion-ops-ui/src/views/user/role/components/role-form-modal.vue
@@ -40,7 +40,7 @@
 </script>

 <script lang="ts" setup>
-  import { reactive, ref } from 'vue';
+  import { ref } from 'vue';
  import useLoading from '@/hooks/loading';
  import useVisible from '@/hooks/visible';
  import formRules from '../types/form.rules';
@@ -53,7 +53,7 @@
  const title = ref<string>();
  const isAddHandle = ref<boolean>(true);

-  const defaultForm = (): RoleUpdateRequest & Record<string, any> => {
+  const defaultForm = (): RoleUpdateRequest => {
    return {
      id: undefined,
      name: undefined,
@@ -62,7 +62,7 @@
  };

  const formRef = ref();
-  const formModel = reactive<RoleUpdateRequest & Record<string, any>>(defaultForm());
+  const formModel = ref<RoleUpdateRequest>({});

  const emits = defineEmits(['added', 'updated']);

@@ -84,11 +84,7 @@

  // 渲染表单
  const renderForm = (record: any) => {
-    Object.keys(formModel).forEach(k => {
-      if (record.hasOwnProperty(k)) {
-        formModel[k] = record[k];
-      }
-    });
+    formModel.value = Object.assign({}, record);
  };

  defineExpose({ openAdd, openUpdate });
@@ -104,12 +100,12 @@
      }
      if (isAddHandle.value) {
        // 新增
-        await createRole(formModel);
+        await createRole(formModel.value);
        Message.success('创建成功');
        emits('added');
      } else {
        // 修改
-        await updateRole(formModel);
+        await updateRole(formModel.value);
        Message.success('修改成功');
        emits('updated');
      }
--- a/orion-ops-ui/src/views/user/role/components/role-menu-grant-modal.vue
+++ b/orion-ops-ui/src/views/user/role/components/role-menu-grant-modal.vue
@@ -43,28 +43,25 @@
 </script>

 <script lang="ts" setup>
-  import MenuSelectorTree from '@/components/menu/selector/menu-selector-tree.vue';
-
-  import { reactive, ref } from 'vue';
+  import { ref } from 'vue';
  import useLoading from '@/hooks/loading';
  import useVisible from '@/hooks/visible';
-  import { getRoleMenuId, grantRoleMenu, RoleGrantMenuRequest } from '@/api/user/role';
+  import { getRoleMenuId, grantRoleMenu, RoleGrantMenuRequest, RoleQueryResponse } from '@/api/user/role';
  import { Message } from '@arco-design/web-vue';
  import { useCacheStore } from '@/store';
  import { getMenuList } from '@/api/system/menu';

+  import MenuSelectorTree from '@/components/menu/selector/menu-selector-tree.vue';
+
  const { visible, setVisible } = useVisible();
  const { loading, setLoading } = useLoading();

  const tree = ref();
-  const roleRecord = reactive<Record<string, any>>({
-    id: undefined,
-    name: undefined,
-    code: undefined,
-  });
+  const roleRecord = ref<RoleQueryResponse>({});

  // 打开新增
  const open = async (record: any) => {
+    // fixme 改成 props
    renderRecord(record);
    setVisible(true);
    try {
@@ -87,11 +84,7 @@

  // 渲染对象
  const renderRecord = (record: any) => {
-    Object.keys(roleRecord).forEach(k => {
-      if (record.hasOwnProperty(k)) {
-        roleRecord[k] = record[k];
-      }
-    });
+    roleRecord.value = Object.assign({}, record);
  };

  defineExpose({ open });
@@ -102,7 +95,7 @@
    try {
      // 修改
      await grantRoleMenu({
-        roleId: roleRecord.id,
+        roleId: roleRecord.value.id,
        menuIdList: [...tree.value.getValue()]
      } as RoleGrantMenuRequest);
      Message.success('分配成功');
--- a/orion-ops-ui/src/views/user/role/components/role-table.vue
+++ b/orion-ops-ui/src/views/user/role/components/role-table.vue
@@ -52,7 +52,7 @@
             :loading="loading"
             :columns="columns"
             :data="tableRenderData"
-             :pagination="pagination as PaginationProps"
+             :pagination="pagination"
             @page-change="(page) => fetchTableData(page, pagination.pageSize)"
             @page-size-change="(size) => fetchTableData(pagination.current, size)"
             :bordered="false">
@@ -62,11 +62,10 @@
      </template>
      <!-- 状态 -->
      <template #status="{ record }">
-        <!-- FIXME -->
-        <span class="circle"></span>
-        <a-tag :color="getEnumValue(record.status, RoleStatusEnum,'color')">
-          {{ getEnumValue(record.status, RoleStatusEnum) }}
-        </a-tag>
+        <span class="circle" :style="{
+          background: getEnumValue(record.status, RoleStatusEnum,'color')
+        }" />
+        {{ getEnumValue(record.status, RoleStatusEnum) }}
      </template>
      <!-- 操作 -->
      <template #handle="{ record }">
@@ -138,9 +137,9 @@
  const { loading, setLoading } = useLoading();
  const emits = defineEmits(['openAdd', 'openUpdate', 'openGrant']);

-  const pagination = reactive(defaultPagination());
+  const pagination = reactive(defaultPagination()) as PaginationProps;

-  const formModel = reactive<RoleQueryRequest>({
+  const formModel = ref<RoleQueryRequest>({
    id: undefined,
    name: undefined,
    code: undefined,
@@ -164,7 +163,9 @@
  };

  // 删除当前行
-  const deleteRow = async ({ id }: { id: number }) => {
+  const deleteRow = async ({ id }: {
+    id: number
+  }) => {
    try {
      setLoading(true);
      // 调用删除接口
--- a/orion-ops-ui/src/views/user/user/components/user-form-modal.vue
+++ b/orion-ops-ui/src/views/user/user/components/user-form-modal.vue
@@ -54,7 +54,7 @@
 </script>

 <script lang="ts" setup>
-  import { reactive, ref } from 'vue';
+  import { ref } from 'vue';
  import useLoading from '@/hooks/loading';
  import useVisible from '@/hooks/visible';
  import formRules from '../types/form.rules';
@@ -68,7 +68,7 @@
  const title = ref<string>();
  const isAddHandle = ref<boolean>(true);

-  const defaultForm = (): UserUpdateRequest & Record<string, any> => {
+  const defaultForm = (): UserUpdateRequest => {
    return {
      id: undefined,
      username: undefined,
@@ -80,7 +80,7 @@
  };

  const formRef = ref();
-  const formModel = reactive<UserUpdateRequest & Record<string, any>>(defaultForm());
+  const formModel = ref<UserUpdateRequest>({});

  const emits = defineEmits(['added', 'updated']);

@@ -102,11 +102,7 @@

  // 渲染表单
  const renderForm = (record: any) => {
-    Object.keys(formModel).forEach(k => {
-      if (record.hasOwnProperty(k)) {
-        formModel[k] = record[k];
-      }
-    });
+    formModel.value = Object.assign({}, record);
  };

  defineExpose({ openAdd, openUpdate });
@@ -122,12 +118,12 @@
      }
      if (isAddHandle.value) {
        // 新增
-        await createUser({ ...formModel, password: md5(formModel.password) });
+        await createUser({ ...formModel, password: md5(formModel.value.password as string) });
        Message.success('创建成功');
        emits('added');
      } else {
        // 修改
-        await updateUser(formModel);
+        await updateUser(formModel.value);
        Message.success('修改成功');
        emits('updated');
      }
--- a/orion-ops-ui/src/views/user/user/components/user-grant-roles-form-modal.vue
+++ b/orion-ops-ui/src/views/user/user/components/user-grant-roles-form-modal.vue
@@ -68,6 +68,7 @@
  };

  const formRef = ref();
+  // fixme
  const formModel = reactive<Record<string, any>>(defaultForm());
  const cacheStore = useCacheStore();

@@ -80,6 +81,7 @@

  // 渲染表单
  const renderForm = (record: any) => {
+    // fixme
    Object.keys(formModel).forEach(k => {
      if (record.hasOwnProperty(k)) {
        formModel[k] = record[k];
--- a/orion-ops-ui/src/views/user/user/components/user-table.vue
+++ b/orion-ops-ui/src/views/user/user/components/user-table.vue
@@ -7,7 +7,10 @@
                    @reset="fetchTableData">
      <!-- id -->
      <a-form-item field="id" label="id" label-col-flex="50px">
-        <a-input-number v-model="formModel.id" placeholder="请输入id" allow-clear />
+        <a-input-number v-model="formModel.id"
+                        placeholder="请输入id"
+                        allow-clear
+                        hide-button />
      </a-form-item>
      <!-- 用户名 -->
      <a-form-item field="username" label="用户名" label-col-flex="50px">
@@ -66,16 +69,16 @@
             :loading="loading"
             :columns="columns"
             :data="tableRenderData"
-             :pagination="pagination as PaginationProps"
+             :pagination="pagination"
             @page-change="(page) => fetchTableData(page, pagination.pageSize)"
             @page-size-change="(size) => fetchTableData(pagination.current, size)"
             :bordered="false">
      <!-- 状态 -->
      <template #status="{ record }">
-        <!-- FIXME -->
-        <a-tag :color="getEnumValue(record.status, UserStatusEnum,'color')">
-          {{ getEnumValue(record.status, UserStatusEnum) }}
-        </a-tag>
+        <span class="circle" :style="{
+          background: getEnumValue(record.status, UserStatusEnum,'color')
+        }" />
+        {{ getEnumValue(record.status, UserStatusEnum) }}
      </template>
      <!-- 操作 -->
      <template #handle="{ record }">
@@ -159,9 +162,9 @@
  const { loading, setLoading } = useLoading();
  const emits = defineEmits(['openAdd', 'openUpdate', 'openResetPassword', 'openGrantRole']);

-  const pagination = reactive(defaultPagination());
+  const pagination = reactive(defaultPagination()) as PaginationProps;

-  const formModel = reactive<UserQueryRequest>({
+  const formModel = ref<UserQueryRequest>({
    id: undefined,
    username: undefined,
    password: undefined,
@@ -176,7 +179,9 @@
  const userStore = useUserStore();

  // 删除当前行
-  const deleteRow = async ({ id }: { id: number }) => {
+  const deleteRow = async ({ id }: {
+    id: number
+  }) => {
    try {
      setLoading(true);
      // 调用删除接口