修改模态框对象类型.

orion-ops-launch/src/main/resources/templates/orion-vue-api.ts.vm

@@ -26,7 +26,7 @@ export interface ${vue.featureEntity}CreateRequest {
  * ${table.comment}更新请求
  */
 export interface ${vue.featureEntity}UpdateRequest extends ${vue.featureEntity}CreateRequest {
-  id: number | undefined;
+  id?: number;
 }
 
 /**

orion-ops-launch/src/main/resources/templates/orion-vue-views-components-form-drawer.vue.vm

@@ -21,7 +21,9 @@
         <!-- $field.comment -->
         <a-form-item field="${field.propertyName}" label="${field.comment}">
         #if("$field.propertyType" == "Integer" || "$field.propertyType" == "Long")
-          <a-input-number v-model="formModel.${field.propertyName}" placeholder="请输入${field.comment}" />
+          <a-input-number v-model="formModel.${field.propertyName}"
+                          placeholder="请输入${field.comment}"
+                          hide-button />
         #elseif("$field.propertyType" == "Date")
           <a-date-picker v-model="formModel.${field.propertyName}"
                          style="width: 100%"
@@ -45,7 +47,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';
@@ -61,7 +63,7 @@
   const title = ref<string>();
   const isAddHandle = ref<boolean>(true);
 
-  const defaultForm = (): ${vue.featureEntity}UpdateRequest & Record<string, any> => {
+  const defaultForm = (): ${vue.featureEntity}UpdateRequest => {
     return {
     #foreach($field in ${table.fields})
       ${field.propertyName}: undefined,
@@ -70,7 +72,7 @@
   };
 
   const formRef = ref<any>();
-  const formModel = reactive<${vue.featureEntity}UpdateRequest & Record<string, any>>(defaultForm());
+  const formModel = ref<${vue.featureEntity}UpdateRequest>({});
 
   const emits = defineEmits(['added', 'updated']);
 
@@ -92,11 +94,7 @@
 
   // 渲染表单
   const renderForm = (record: any) => {
-    Object.keys(formModel).forEach(k => {
+    formModel.value = Object.assign({}, record);
-      if (record.hasOwnProperty(k)) {
-        formModel[k] = record[k];
-      }
-    });
   };
 
   defineExpose({ openAdd, openUpdate });
@@ -112,12 +110,12 @@
       }
       if (isAddHandle.value) {
         // 新增
-        await create${vue.featureEntity}(formModel);
+        await create${vue.featureEntity}(formModel.value);
         Message.success('创建成功');
         emits('added');
       } else {
         // 修改
-        await update${vue.featureEntity}(formModel);
+        await update${vue.featureEntity}(formModel.value);
         Message.success('修改成功');
         emits('updated');
       }

orion-ops-launch/src/main/resources/templates/orion-vue-views-components-form-modal.vue.vm

@@ -25,7 +25,9 @@
         <!-- $field.comment -->
         <a-form-item field="${field.propertyName}" label="${field.comment}">
         #if("$field.propertyType" == "Integer" || "$field.propertyType" == "Long")
-          <a-input-number v-model="formModel.${field.propertyName}" placeholder="请输入${field.comment}" />
+          <a-input-number v-model="formModel.${field.propertyName}"
+                          placeholder="请输入${field.comment}"
+                          hide-button />
         #elseif("$field.propertyType" == "Date")
           <a-date-picker v-model="formModel.${field.propertyName}"
                          style="width: 100%"
@@ -49,7 +51,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';
@@ -65,7 +67,7 @@
   const title = ref<string>();
   const isAddHandle = ref<boolean>(true);
 
-  const defaultForm = (): ${vue.featureEntity}UpdateRequest & Record<string, any> => {
+  const defaultForm = (): ${vue.featureEntity}UpdateRequest => {
     return {
     #foreach($field in ${table.fields})
       ${field.propertyName}: undefined,
@@ -74,7 +76,7 @@
   };
 
   const formRef = ref<any>();
-  const formModel = reactive<${vue.featureEntity}UpdateRequest & Record<string, any>>(defaultForm());
+  const formModel = ref<${vue.featureEntity}UpdateRequest>({});
 
   const emits = defineEmits(['added', 'updated']);
 
@@ -96,11 +98,7 @@
 
   // 渲染表单
   const renderForm = (record: any) => {
-    Object.keys(formModel).forEach(k => {
+    formModel.value = Object.assign({}, record);
-      if (record.hasOwnProperty(k)) {
-        formModel[k] = record[k];
-      }
-    });
   };
 
   defineExpose({ openAdd, openUpdate });
@@ -116,12 +114,12 @@
       }
       if (isAddHandle.value) {
         // 新增
-        await create${vue.featureEntity}(formModel);
+        await create${vue.featureEntity}(formModel.value);
         Message.success('创建成功');
         emits('added');
       } else {
         // 修改
-        await update${vue.featureEntity}(formModel);
+        await update${vue.featureEntity}(formModel.value);
         Message.success('修改成功');
         emits('updated');
       }

orion-ops-launch/src/main/resources/templates/orion-vue-views-components-table.vue.vm

@@ -9,13 +9,16 @@
       <!-- $field.comment -->
       <a-form-item field="${field.propertyName}" label="${field.comment}" label-col-flex="50px">
       #if("$field.propertyType" == "Integer" || "$field.propertyType" == "Long")
-        <a-input-number v-model="formModel.${field.propertyName}" placeholder="请输入${field.comment}" allow-clear/>
+        <a-input-number v-model="formModel.${field.propertyName}"
+                        placeholder="请输入${field.comment}"
+                        allow-clear
+                        hide-button />
       #elseif("$field.propertyType" == "Date")
         <a-date-picker v-model="formModel.${field.propertyName}"
                        style="width: 100%"
                        placeholder="请选择${field.comment}"
                        show-time
-                       allow-clear/>
+                       allow-clear />
       #else
         <a-input v-model="formModel.${field.propertyName}" placeholder="请输入${field.comment}" allow-clear/>
       #end
@@ -67,10 +70,10 @@
              label-align="left"
              :loading="loading"
              :columns="columns"
-             v-model:selectedKeys="selectedKeys"
+             :selected-keys="selectedKeys"
              :row-selection="rowSelection"
              :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">
@@ -123,11 +126,11 @@
   const { loading, setLoading } = useLoading();
   const emits = defineEmits(['openAdd', 'openUpdate']);
 
-  const pagination = reactive(defaultPagination());
+  const pagination = reactive(defaultPagination()) as PaginationProps;
   const selectedKeys = ref<number[]>([]);
   const rowSelection = reactive(defaultRowSelection());
 
-  const formModel = reactive<${vue.featureEntity}QueryRequest>({
+  const formModel = ref<${vue.featureEntity}QueryRequest>({
     #foreach($field in ${table.fields})
     ${field.propertyName}: undefined,
     #end
@@ -150,7 +153,9 @@
   };
 
   // 删除当前行
-  const deleteRow = async ({ id }: { id: number }) => {
+  const deleteRow = async ({ id }: {
+    id: number
+  }) => {
     try {
       setLoading(true);
       // 调用删除接口

orion-ops-ui/src/api/asset/host-identity.ts

@@ -16,7 +16,7 @@ export interface HostIdentityCreateRequest {
  * 主机身份更新请求
  */
 export interface HostIdentityUpdateRequest extends HostIdentityCreateRequest {
-  id: number | undefined;
+  id?: number;
   useNewPassword?: boolean;
 }
 

orion-ops-ui/src/api/asset/host-key.ts

@@ -16,7 +16,7 @@ export interface HostKeyCreateRequest {
  * 主机秘钥更新请求
  */
 export interface HostKeyUpdateRequest extends HostKeyCreateRequest {
-  id: number | undefined;
+  id?: number;
   useNewPassword?: boolean;
 }
 

orion-ops-ui/src/api/asset/host.ts

@@ -16,7 +16,7 @@ export interface HostCreateRequest {
  * 主机更新请求
  */
 export interface HostUpdateRequest extends HostCreateRequest {
-  id: number | undefined;
+  id?: number;
 }
 
 /**

orion-ops-ui/src/api/system/menu.ts

@@ -21,7 +21,7 @@ export interface MenuCreateRequest {
  * 菜单更新请求
  */
 export interface MenuUpdateRequest extends MenuCreateRequest {
-  id: number | undefined;
+  id?: number;
   status?: number;
 }
 

orion-ops-ui/src/api/user/role.ts

@@ -15,7 +15,7 @@ export interface RoleCreateRequest {
  * 角色更新请求
  */
 export interface RoleUpdateRequest extends RoleCreateRequest {
-  id: number | undefined;
+  id?: number;
 }
 
 /**
@@ -44,10 +44,11 @@ export interface RoleQueryResponse extends TableData {
   name?: string;
   code?: string;
   status?: number;
-  createTime: number;
+// FIXME 恢复
-  updateTime: number;
+  createTime?: number;
-  creator: string;
+  updateTime?: number;
-  updater: string;
+  creator?: string;
+  updater?: string;
 }
 
 /**

orion-ops-ui/src/api/user/user.ts

@@ -20,7 +20,7 @@ export interface UserCreateRequest {
  * 用户更新请求
  */
 export interface UserUpdateRequest extends UserCreateRequest {
-  id: number | undefined;
+  id?: number;
   roleIdList?: Array<number>;
   password?: string;
 }

orion-ops-ui/src/components/global-setting/form-wrapper.vue

@@ -5,6 +5,7 @@
     size="small"
     :default-value="defaultValue as number"
     @change="handleChange"
+    hide-button
   />
   <a-switch
     v-else

orion-ops-ui/src/utils/file.ts

@@ -10,12 +10,12 @@ export function getBase64Data(e: string) {
 /**
  * 读取文件内容 返回 promise
  */
-export function readFileText(e: File, encoding = 'UTF-8') {
+export function readFileText(e: File, encoding = 'UTF-8'): Promise<string> {
   return new Promise((resolve, reject) => {
     const reader = new FileReader();
     reader.readAsText(e, encoding);
     reader.onload = res => {
-      resolve(res.target?.result);
+      resolve(res.target?.result as string);
     };
     reader.onerror = err => {
       reject(err);

orion-ops-ui/src/views/asset/host-identity/components/host-identity-form-modal.vue

@@ -60,7 +60,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';
@@ -74,7 +74,7 @@
   const title = ref<string>();
   const isAddHandle = ref<boolean>(true);
 
-  const defaultForm = (): HostIdentityUpdateRequest & Record<string, any> => {
+  const defaultForm = (): HostIdentityUpdateRequest => {
     return {
       id: undefined,
       name: undefined,
@@ -86,7 +86,7 @@
   };
 
   const formRef = ref();
-  const formModel = reactive<HostIdentityUpdateRequest & Record<string, any>>(defaultForm());
+  const formModel = ref<HostIdentityUpdateRequest>({});
 
   const emits = defineEmits(['added', 'updated']);
 
@@ -108,11 +108,7 @@
 
   // 渲染表单
   const renderForm = (record: any) => {
-    Object.keys(formModel).forEach(k => {
+    formModel.value = Object.assign({}, record);
-      if (record.hasOwnProperty(k)) {
-        formModel[k] = record[k];
-      }
-    });
   };
 
   defineExpose({ openAdd, openUpdate });
@@ -127,17 +123,17 @@
         return false;
       }
       if (isAddHandle.value) {
-        if (!formModel.password && !formModel.keyId) {
+        if (!formModel.value.password && !formModel.value.keyId) {
           Message.error('创建时密码和秘钥不能同时为空');
           return false;
         }
         // 新增
-        await createHostIdentity(formModel);
+        await createHostIdentity(formModel.value);
         Message.success('创建成功');
         emits('added');
       } else {
         // 修改
-        await updateHostIdentity(formModel);
+        await updateHostIdentity(formModel.value);
         Message.success('修改成功');
         emits('updated');
       }

orion-ops-ui/src/views/asset/host-identity/components/host-identity-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="name" label="名称" label-col-flex="50px">
@@ -53,7 +56,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">
@@ -138,7 +141,7 @@
   const emits = defineEmits(['openAdd', 'openUpdate', 'openKeyView']);
 
   const cacheStore = useCacheStore();
-  const pagination = reactive(defaultPagination());
+  const pagination = reactive(defaultPagination()) as PaginationProps;
 
   const formModel = reactive<HostIdentityQueryRequest>({
     id: undefined,
@@ -148,7 +151,9 @@
   });
 
   // 删除当前行
-  const deleteRow = async ({ id }: { id: number }) => {
+  const deleteRow = async ({ id }: {
+    id: number
+  }) => {
     try {
       setLoading(true);
       // 调用删除接口

orion-ops-ui/src/views/asset/host-key/components/host-key-form-drawer.vue

@@ -88,14 +88,12 @@
 </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';
   import { createHostKey, updateHostKey, getHostKey, HostKeyUpdateRequest } from '@/api/asset/host-key';
   import { FileItem, Message } from '@arco-design/web-vue';
-  import {} from '../types/enum.types';
-  import {} from '../types/const';
   import { readFileText } from '@/utils/file';
 
   const { visible, setVisible } = useVisible();
@@ -105,7 +103,7 @@
   const isAddHandle = ref<boolean>(true);
   const isViewHandler = ref<boolean>(false);
 
-  const defaultForm = (): HostKeyUpdateRequest & Record<string, any> => {
+  const defaultForm = (): HostKeyUpdateRequest => {
     return {
       id: undefined,
       name: undefined,
@@ -117,7 +115,7 @@
   };
 
   const formRef = ref();
-  const formModel = reactive<HostKeyUpdateRequest & Record<string, any>>(defaultForm());
+  const formModel = ref<HostKeyUpdateRequest>({});
 
   const emits = defineEmits(['added', 'updated']);
 
@@ -162,26 +160,20 @@
 
   // 渲染表单
   const renderForm = (record: any) => {
-    Object.keys(formModel).forEach(k => {
+    formModel.value = Object.assign({}, record);
-      if (record.hasOwnProperty(k)) {
-        formModel[k] = record[k];
-      }
-    });
   };
 
   defineExpose({ openAdd, openUpdate, openView });
 
   // 选择公钥文件
   const selectPublicFile = async (fileList: FileItem[]) => {
-    // FIXME
+    formModel.value.publicKey = await readFileText(fileList[0].file as File);
-    formModel.publicKey = await readFileText(fileList[0].file as File);
     formRef.value.clearValidate('publicKey');
   };
 
   // 选择私钥文件
   const selectPrivateFile = async (fileList: FileItem[]) => {
-    // FIXME
+    formModel.value.privateKey = await readFileText(fileList[0].file as File);
-    formModel.privateKey = await readFileText(fileList[0].file as File);
     formRef.value.clearValidate('privateKey');
   };
 
@@ -196,12 +188,12 @@
       }
       if (isAddHandle.value) {
         // 新增
-        await createHostKey(formModel);
+        await createHostKey(formModel.value);
         Message.success('创建成功');
         emits('added');
       } else {
         // 修改
-        await updateHostKey(formModel);
+        await updateHostKey(formModel.value);
         Message.success('修改成功');
         emits('updated');
       }

orion-ops-ui/src/views/asset/host-key/components/host-key-table.vue

@@ -7,7 +7,10 @@
                     @reset="fetchTableData">
       <!-- id -->
       <a-form-item field="id" label="id" label-col-flex="30px">
-        <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="name" label="名称" label-col-flex="30px">
@@ -45,7 +48,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">
@@ -102,7 +105,7 @@
   const { loading, setLoading } = useLoading();
   const emits = defineEmits(['openAdd', 'openUpdate', 'openView']);
 
-  const pagination = reactive(defaultPagination());
+  const pagination = reactive(defaultPagination()) as PaginationProps;
 
   const formModel = reactive<HostKeyQueryRequest>({
     id: undefined,
@@ -112,7 +115,9 @@
   });
 
   // 删除当前行
-  const deleteRow = async ({ id }: { id: number }) => {
+  const deleteRow = async ({ id }: {
+    id: number
+  }) => {
     try {
       setLoading(true);
       // 调用删除接口

orion-ops-ui/src/views/asset/host/components/host-config-ssh-form.vue

@@ -36,7 +36,9 @@
                      label="SSH端口"
                      :hide-asterisk="true"
                      label-col-flex="60px">
-          <a-input-number v-model="formModel.port" placeholder="请输入SSH端口" />
+          <a-input-number v-model="formModel.port"
+                          placeholder="请输入SSH端口"
+                          hide-button />
         </a-form-item>
         <!-- 验证方式 -->
         <a-form-item field="authType"
@@ -54,7 +56,6 @@
                      label="主机密码"
                      :rules="passwordRules"
                      label-col-flex="60px">
-          <!-- FIXME -->
           <a-input-password v-model="formModel.password"
                             :disabled="!formModel.useNewPassword && formModel.hasPassword"
                             placeholder="主机密码" />
@@ -87,7 +88,9 @@
                      label="连接超时时间"
                      :hide-asterisk="true"
                      label-col-flex="86px">
-          <a-input-number v-model="formModel.connectTimeout" placeholder="请输入连接超时时间">
+          <a-input-number v-model="formModel.connectTimeout"
+                          placeholder="请输入连接超时时间"
+                          hide-button>
             <template #suffix>
               ms
             </template>
@@ -125,6 +128,10 @@
         </a-space>
       </div>
     </a-spin>
+    <!-- FIXME -->
+    {{ formModel }}
+    <br><br>
+    {{ content }}
   </a-card>
 </template>
 
@@ -159,7 +166,7 @@
   });
 
   const formRef = ref();
-  const formModel = reactive<HostSshConfig & Record<string, any>>({
+  const formModel = reactive<HostSshConfig>({
     username: undefined,
     port: undefined,
     password: undefined,
@@ -178,7 +185,8 @@
   watch(() => props.content, (v: any) => {
     config.value.status = v?.status;
     config.value.version = v?.version;
-    resetConfig();
+    // FIXME
+    resetConfig(v.config);
   });
 
   // 用户名验证
@@ -228,7 +236,9 @@
 
   // 重置配置
   const resetConfig = () => {
+    // FIXME
     Object.keys(formModel).forEach(k => {
+      console.log(k, props.content?.config?.hasOwnProperty(k));
       if (props.content?.config?.hasOwnProperty(k)) {
         formModel[k] = props.content?.config[k];
       }

orion-ops-ui/src/views/asset/host/components/host-form-modal.vue

@@ -52,7 +52,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';
@@ -66,7 +66,7 @@
   const title = ref<string>();
   const isAddHandle = ref<boolean>(true);
 
-  const defaultForm = (): HostUpdateRequest & Record<string, any> => {
+  const defaultForm = (): HostUpdateRequest => {
     return {
       id: undefined,
       name: undefined,
@@ -77,7 +77,7 @@
   };
 
   const formRef = ref();
-  const formModel = reactive<HostUpdateRequest & Record<string, any>>(defaultForm());
+  const formModel = ref<HostUpdateRequest>({});
 
   const emits = defineEmits(['added', 'updated']);
 
@@ -100,11 +100,7 @@
 
   // 渲染表单
   const renderForm = (record: any) => {
-    Object.keys(formModel).forEach(k => {
+    formModel.value = Object.assign({}, record);
-      if (record.hasOwnProperty(k)) {
-        formModel[k] = record[k];
-      }
-    });
   };
 
   defineExpose({ openAdd, openUpdate });
@@ -120,12 +116,12 @@
       }
       if (isAddHandle.value) {
         // 新增
-        await createHost(formModel);
+        await createHost(formModel.value);
         Message.success('创建成功');
         emits('added');
       } else {
         // 修改
-        await updateHost(formModel);
+        await updateHost(formModel.value);
         Message.success('修改成功');
         emits('updated');
       }

orion-ops-ui/src/views/asset/host/components/host-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="name" label="主机名称" label-col-flex="50px">
@@ -74,7 +77,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">
@@ -174,10 +177,11 @@
   const { loading, setLoading } = useLoading();
   const emits = defineEmits(['openAdd', 'openUpdate', 'openUpdateConfig']);
 
-  const pagination = reactive<PaginationProps>(defaultPagination());
   const { copy } = useCopy();
   const { toggle: toggleFavorite } = useFavorite('HOST');
 
+  const pagination = reactive(defaultPagination()) as PaginationProps;
+
   const formModel = reactive<HostQueryRequest>({
     id: undefined,
     name: undefined,
@@ -189,7 +193,9 @@
   });
 
   // 删除当前行
-  const deleteRow = async ({ id }: { id: number }) => {
+  const deleteRow = async ({ id }: {
+    id: number
+  }) => {
     try {
       setLoading(true);
       // 调用删除接口

orion-ops-ui/src/views/asset/host/types/host-config.types.ts

@@ -16,6 +16,14 @@ export const AuthTypeEnum = {
   },
 };
 
+/**
+ * 主机所有配置
+ */
+// fixme
+export interface HostConfigWrapper {
+  SSH: HostSshConfig | unknown;
+}
+
 /**
  * 主机 SSH 配置
  */

orion-ops-ui/src/views/dashboard/workplace/components/popular-content.vue

@@ -80,7 +80,7 @@
 
   const type = ref('text');
   const { loading, setLoading } = useLoading();
-  const renderList = ref<TableData[]>();
+  const renderList = ref<TableData[]>([]);
   const fetchData = async (contentType: string) => {
     try {
       setLoading(true);

orion-ops-ui/src/views/system/menu/components/menu-form-modal.vue

@@ -77,7 +77,8 @@
           <a-input-number v-model="formModel.sort"
                           placeholder="排序"
                           :style="{ width: '120px' }"
-                          allow-clear />
+                          allow-clear
+                          hide-button />
         </a-form-item>
         <!-- 是否可见 -->
         <a-form-item v-if="formModel.type !== MenuTypeEnum.FUNCTION.value"
@@ -135,7 +136,7 @@
   const title = ref<string>();
   const isAddHandle = ref<boolean>(true);
 
-  const defaultForm = (): MenuUpdateRequest & Record<string, any> => {
+  const defaultForm = (): MenuUpdateRequest => {
     return {
       id: undefined,
       parentId: 0,
@@ -152,14 +153,14 @@
   };
 
   const formRef = ref();
-  const formModel = reactive<MenuUpdateRequest & Record<string, any>>(defaultForm());
+  const formModel = ref<MenuUpdateRequest>({});
 
   const emits = defineEmits(['added', 'updated']);
 
   // 选择根目录 parentId就是 0
-  watch(() => formModel.type, () => {
+  watch(() => formModel.value.type, () => {
-    if (formModel.type === MenuTypeEnum.PARENT_MENU.value) {
+    if (formModel.value.type === MenuTypeEnum.PARENT_MENU.value) {
-      formModel.parentId = 0;
+      formModel.value.parentId = 0;
     }
   });
 
@@ -170,7 +171,7 @@
     renderForm({ ...defaultForm(), parentId: record.parentId, sort: (record.sort || 0) + sortStep });
     // 如果是父菜单默认选中子菜单 如果是子菜单默认选中功能
     if (record.type === 1 || record.type === 2) {
-      formModel.type = record.type + 1;
+      formModel.value.type = record.type + 1;
     }
     setVisible(true);
   };
@@ -185,11 +186,7 @@
 
   // 渲染表单
   const renderForm = (record: any) => {
-    Object.keys(formModel).forEach(k => {
+    formModel.value = Object.assign({}, record);
-      if (record.hasOwnProperty(k)) {
-        formModel[k] = record[k];
-      }
-    });
   };
 
   defineExpose({ openAdd, openUpdate });
@@ -203,19 +200,19 @@
       if (error) {
         return false;
       }
-      if (formModel.parentId === 0
+      if (formModel.value.parentId === 0
-        && (formModel.type === MenuTypeEnum.SUB_MENU.value || formModel.type === MenuTypeEnum.FUNCTION.value)) {
+        && (formModel.value.type === MenuTypeEnum.SUB_MENU.value || formModel.value.type === MenuTypeEnum.FUNCTION.value)) {
         Message.error('创建子目录或功能时 父菜单不能为根目录');
         return false;
       }
       if (isAddHandle.value) {
         // 新增
-        await createMenu(formModel);
+        await createMenu(formModel.value);
         Message.success('创建成功');
         emits('added');
       } else {
         // 修改
-        await updateMenu(formModel);
+        await updateMenu(formModel.value);
         Message.success('修改成功');
         emits('updated');
       }

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 => {
+    formModel.value = Object.assign({}, record);
-      if (record.hasOwnProperty(k)) {
-        formModel[k] = record[k];
-      }
-    });
   };
 
   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');
       }

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 { ref } from 'vue';
-
-  import { reactive, 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>>({
+  const roleRecord = ref<RoleQueryResponse>({});
-    id: undefined,
-    name: undefined,
-    code: undefined,
-  });
 
   // 打开新增
   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 => {
+    roleRecord.value = Object.assign({}, record);
-      if (record.hasOwnProperty(k)) {
-        roleRecord[k] = record[k];
-      }
-    });
   };
 
   defineExpose({ open });
@@ -102,7 +95,7 @@
     try {
       // 修改
       await grantRoleMenu({
-        roleId: roleRecord.id,
+        roleId: roleRecord.value.id,
         menuIdList: [...tree.value.getValue()]
       } as RoleGrantMenuRequest);
       Message.success('分配成功');

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" :style="{
-        <span class="circle"></span>
+          background: getEnumValue(record.status, RoleStatusEnum,'color')
-        <a-tag :color="getEnumValue(record.status, RoleStatusEnum,'color')">
+        }" />
-          {{ getEnumValue(record.status, RoleStatusEnum) }}
+        {{ getEnumValue(record.status, RoleStatusEnum) }}
-        </a-tag>
       </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);
       // 调用删除接口

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 => {
+    formModel.value = Object.assign({}, record);
-      if (record.hasOwnProperty(k)) {
-        formModel[k] = record[k];
-      }
-    });
   };
 
   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');
       }

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];

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 -->
+        <span class="circle" :style="{
-        <a-tag :color="getEnumValue(record.status, UserStatusEnum,'color')">
+          background: getEnumValue(record.status, UserStatusEnum,'color')
-          {{ getEnumValue(record.status, UserStatusEnum) }}
+        }" />
-        </a-tag>
+        {{ 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);
       // 调用删除接口