feat: 字典配置前端代码.

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

@@ -66,7 +66,8 @@
               label-align="right"
               :style="{ width: '320px' }"
               :label-col-props="{ span: 6 }"
-              :wrapper-col-props="{ span: 18 }">
+              :wrapper-col-props="{ span: 18 }"
+              @keyup.enter="() => fetchCardData()">
         #foreach($field in ${table.fields})
         <!-- $field.comment -->
         <a-form-item field="${field.propertyName}" label="${field.comment}">

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

@@ -4,7 +4,8 @@
     <a-query-header :model="formModel"
                     label-align="left"
                     @submit="fetchTableData"
-                    @reset="fetchTableData">
+                    @reset="fetchTableData"
+                    @keyup.enter="() => fetchTableData()">
       #foreach($field in ${table.fields})
       <!-- $field.comment -->
       <a-form-item field="${field.propertyName}" label="${field.comment}" label-col-flex="50px">

orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/entity/dto/DictKeyExtraSchemaDTO.java

@@ -0,0 +1,29 @@
+package com.orion.ops.module.infra.entity.dto;
+
+import lombok.AllArgsConstructor;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+/**
+ * 字典配置项额外参数类型
+ *
+ * @author Jiahang Li
+ * @version 1.0.0
+ * @since 2023/10/20 18:06
+ */
+@Data
+@NoArgsConstructor
+@AllArgsConstructor
+public class DictKeyExtraSchemaDTO {
+
+    /**
+     * 参数
+     */
+    private String name;
+
+    /**
+     * 数据类型
+     */
+    private String type;
+
+}

orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/entity/request/dict/DictKeyCreateRequest.java

@@ -40,6 +40,7 @@ public class DictKeyCreateRequest implements Serializable {
     @Schema(description = "额外配置定义")
     private String extraSchema;
 
+    @NotBlank
     @Size(max = 64)
     @Schema(description = "配置描述")
     private String description;

orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/entity/request/dict/DictKeyUpdateRequest.java

@@ -45,6 +45,7 @@ public class DictKeyUpdateRequest implements Serializable {
     @Schema(description = "额外配置定义")
     private String extraSchema;
 
+    @NotBlank
     @Size(max = 64)
     @Schema(description = "配置描述")
     private String description;

orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/entity/request/dict/DictValueQueryRequest.java

@@ -24,6 +24,10 @@ public class DictValueQueryRequest extends PageRequest {
     @Schema(description = "配置项id")
     private Long keyId;
 
+    @Size(max = 32)
+    @Schema(description = "配置项名称")
+    private String keyName;
+
     @Size(max = 32)
     @Schema(description = "配置名称")
     private String name;

orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/service/impl/DictKeyServiceImpl.java

@@ -13,11 +13,13 @@ import com.orion.ops.framework.common.constant.ErrorMessage;
 import com.orion.ops.framework.common.utils.Valid;
 import com.orion.ops.framework.redis.core.utils.RedisMaps;
 import com.orion.ops.framework.redis.core.utils.RedisStrings;
+import com.orion.ops.framework.redis.core.utils.RedisUtils;
 import com.orion.ops.module.infra.convert.DictKeyConvert;
 import com.orion.ops.module.infra.dao.DictKeyDAO;
 import com.orion.ops.module.infra.define.cache.DictCacheKeyDefine;
 import com.orion.ops.module.infra.entity.domain.DictKeyDO;
 import com.orion.ops.module.infra.entity.dto.DictKeyCacheDTO;
+import com.orion.ops.module.infra.entity.dto.DictKeyExtraSchemaDTO;
 import com.orion.ops.module.infra.entity.request.dict.DictKeyCreateRequest;
 import com.orion.ops.module.infra.entity.request.dict.DictKeyQueryRequest;
 import com.orion.ops.module.infra.entity.request.dict.DictKeyUpdateRequest;
@@ -90,7 +92,7 @@ public class DictKeyServiceImpl implements DictKeyService {
             dictValueService.updateKeyNameByKeyId(id, record.getKeyName(), request.getKeyName());
         }
         // 删除缓存
-        RedisMaps.delete(DictCacheKeyDefine.DICT_KEY,
+        RedisUtils.delete(DictCacheKeyDefine.DICT_KEY.getKey(),
                 DictCacheKeyDefine.DICT_SCHEMA.format(record.getKeyName()));
         log.info("DictKeyService-updateDictKeyById effect: {}", effect);
         return effect;
@@ -147,7 +149,10 @@ public class DictKeyServiceImpl implements DictKeyService {
             cacheResult.put(Const.VALUE, dictKey.getValueType());
             String extraSchema = dictKey.getExtraSchema();
             if (extraSchema != null) {
-                cacheResult.putAll(JSON.parseObject(extraSchema));
+                List<DictKeyExtraSchemaDTO> schemas = JSON.parseArray(extraSchema, DictKeyExtraSchemaDTO.class);
+                for (DictKeyExtraSchemaDTO schema : schemas) {
+                    cacheResult.put(schema.getName(), schema.getType());
+                }
             }
             // 设置缓存
             RedisStrings.setJson(cacheKey, DictCacheKeyDefine.DICT_SCHEMA, cacheResult);
@@ -173,8 +178,8 @@ public class DictKeyServiceImpl implements DictKeyService {
         // 删除配置值
         dictValueService.deleteDictValueByKeyId(id);
         // 删除缓存
-        RedisMaps.delete(DictCacheKeyDefine.DICT_KEY, id);
+        RedisUtils.delete(DictCacheKeyDefine.DICT_KEY.getKey(),
-        RedisMaps.delete(DictCacheKeyDefine.DICT_SCHEMA.format(record.getKeyName()));
+                DictCacheKeyDefine.DICT_SCHEMA.format(record.getKeyName()));
         log.info("DictKeyService-deleteDictKeyById id: {}, effect: {}", id, effect);
         return effect;
     }
@@ -197,7 +202,7 @@ public class DictKeyServiceImpl implements DictKeyService {
         dictValueService.deleteDictValueByKeyIdList(idList);
         log.info("DictKeyService-deleteDictKeyByIdList effect: {}", effect);
         // 删除缓存
-        RedisMaps.delete(DictCacheKeyDefine.DICT_KEY, idList);
+        RedisMaps.delete(DictCacheKeyDefine.DICT_KEY);
         List<String> schemaKeys = dictKeys.stream()
                 .map(DictKeyDO::getKeyName)
                 .map(DictCacheKeyDefine.DICT_SCHEMA::format)

orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/service/impl/DictValueServiceImpl.java

@@ -345,6 +345,7 @@ public class DictValueServiceImpl implements DictValueService {
     private LambdaQueryWrapper<DictValueDO> buildQueryWrapper(DictValueQueryRequest request) {
         return dictValueDAO.wrapper()
                 .eq(DictValueDO::getKeyId, request.getKeyId())
+                .like(DictValueDO::getKeyName, request.getKeyName())
                 .like(DictValueDO::getName, request.getName())
                 .eq(DictValueDO::getValue, request.getValue())
                 .like(DictValueDO::getLabel, request.getLabel())

orion-ops-ui/src/api/system/dict-value.ts

@@ -1,6 +1,6 @@
 import axios from 'axios';
 import qs from 'query-string';
-import { AnyObject, DataGrid, Options, Pagination } from '@/types/global';
+import { DataGrid, Options, Pagination } from '@/types/global';
 import { TableData } from '@arco-design/web-vue/es/table/interface';
 
 /**

orion-ops-ui/src/assets/style/layout.less

@@ -110,6 +110,27 @@
   padding: 18px 24px 14px 24px;
 }
 
+.click-icon-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--color-text-2);
+  background: var(--color-fill-2);
+  border-radius: 2px;
+  cursor: pointer;
+  border: 1px solid transparent;
+  transition: background-color 0.1s cubic-bezier(0, 0, 1, 1);
+}
+
+.click-icon-wrapper:hover {
+  background: var(--color-fill-3);
+}
+
+.arco-table-td-content {
+  color: rgba(var(--gray-9), .95);
+  font-size: 13px;
+}
+
 .usn {
   user-select: none;
 }

orion-ops-ui/src/components/system/dict-key/dict-key-selector.vue

@@ -0,0 +1,60 @@
+<template>
+  <a-select v-model:model-value="value as any"
+            :options="optionData()"
+            :allow-search="true"
+            :loading="loading"
+            :disabled="loading"
+            :filter-option="filterOption"
+            placeholder="请选择配置项" />
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'dict-key-selector'
+  };
+</script>
+
+<script lang="ts" setup>
+  import { computed } from 'vue';
+  import { useCacheStore } from '@/store';
+  import { SelectOptionData } from '@arco-design/web-vue';
+  import { DictKeyQueryResponse } from '@/api/system/dict-key';
+
+  const props = defineProps({
+    modelValue: Number,
+    loading: Boolean,
+  });
+
+  const emits = defineEmits(['update:modelValue', 'change']);
+
+  const value = computed({
+    get() {
+      return props.modelValue;
+    },
+    set(e) {
+      emits('update:modelValue', e);
+      emits('change', e);
+    }
+  });
+
+  // 选项数据
+  const cacheStore = useCacheStore();
+  const optionData = (): SelectOptionData[] => {
+    return cacheStore.dictKeys.map(s => {
+      return {
+        label: `${s.keyName} - ${s.description || ''}`,
+        value: s.id,
+        origin: s,
+      };
+    });
+  };
+
+  // 搜索
+  const filterOption = (searchValue: string, option: { label: string; }) => {
+    return option.label.toLowerCase().indexOf(searchValue.toLowerCase()) > -1;
+  };
+</script>
+
+<style scoped>
+
+</style>

orion-ops-ui/src/components/user/role/user-role-selector.vue

@@ -22,7 +22,8 @@
   import { RoleStatusEnum } from '@/views/user/role/types/enum.types';
 
   const props = defineProps({
-    modelValue: Object,
+    // FIXME 拆出来单选多选
+    modelValue: Array,
     loading: Boolean,
     multiple: Boolean,
   });

orion-ops-ui/src/components/view/card-list/index.vue

@@ -27,7 +27,7 @@
               <!-- 创建 -->
               <div v-permission="addPermission"
                    v-show="!handleVisible.disableAdd"
-                   class="header-icon-wrapper"
+                   class="click-icon-wrapper header-icon-wrapper"
                    title="创建"
                    @click="emits('add')">
                 <icon-plus />
@@ -51,13 +51,13 @@
                          allow-clear
                          @input="e => emits('update:searchValue', e)"
                          @change="e => emits('update:searchValue', e)"
-                         @keydown.enter="emits('search')" />
+                         @keyup.enter="emits('search')" />
               </div>
               <!-- 过滤条件 -->
               <a-popover position="br" trigger="click" content-class="card-filter-wrapper">
                 <div v-if="!handleVisible.disableFilter"
                      ref="filterRef"
-                     class="header-icon-wrapper"
+                     class="click-icon-wrapper header-icon-wrapper"
                      title="选择过滤条件">
                   <a-badge :count="filterCount" :dot-style="{zoom: '.75'}" :offset="[9, -6]">
                     <icon-filter />
@@ -77,14 +77,14 @@
               </a-popover>
               <!-- 搜索 -->
               <div v-if="!handleVisible.disableSearch"
-                   class="header-icon-wrapper"
+                   class="click-icon-wrapper header-icon-wrapper"
                    title="搜索"
                    @click="emits('search')">
                 <icon-search />
               </div>
               <!-- 重置 -->
               <div v-if="!handleVisible.disableReset"
-                   class="header-icon-wrapper"
+                   class="click-icon-wrapper header-icon-wrapper"
                    title="重置"
                    @click="emits('reset')">
                 <icon-refresh />
@@ -358,7 +358,6 @@
   // 重置过滤
   const filterReset = () => {
     emits('reset');
-    triggerMouseEvent(filterRef);
   };
 
   // 搜索
@@ -435,21 +434,8 @@
   }
 
   .header-icon-wrapper {
-    display: flex;
-    justify-content: center;
-    align-items: center;
     height: 27px;
     padding: 6px;
-    color: var(--color-text-2);
-    background: var(--color-fill-2);
-    border-radius: 2px;
-    cursor: pointer;
-    border: 1px solid transparent;
-    transition: background-color 0.1s cubic-bezier(0, 0, 1, 1);
-  }
-
-  .header-icon-wrapper:hover {
-    background: var(--color-fill-3);
   }
 
   .filter-bottom-container {

orion-ops-ui/src/store/modules/cache/index.ts

@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia';
 import { CacheState } from './types';
 
-export type CacheType = 'menus' | 'roles' | 'hostTags' | 'hostKeys' | 'hostIdentities'
+export type CacheType = 'menus' | 'roles' | 'hostTags' | 'hostKeys' | 'hostIdentities' | 'dictKeys' | string
 
 export default defineStore('cache', {
   state: (): CacheState => ({
@@ -10,6 +10,7 @@ export default defineStore('cache', {
     hostTags: [],
     hostKeys: [],
     hostIdentities: [],
+    dictKeys: [],
   }),
 
   getters: {},

orion-ops-ui/src/store/modules/cache/types.ts

@@ -3,6 +3,7 @@ import { RoleQueryResponse } from '@/api/user/role';
 import { TagQueryResponse } from '@/api/meta/tag';
 import { HostKeyQueryResponse } from '@/api/asset/host-key';
 import { HostIdentityQueryResponse } from '@/api/asset/host-identity';
+import { DictKeyQueryResponse } from '@/api/system/dict-key';
 
 export interface CacheState {
   menus: MenuQueryResponse[];
@@ -10,6 +11,7 @@ export interface CacheState {
   hostTags: TagQueryResponse[];
   hostKeys: HostKeyQueryResponse[];
   hostIdentities: HostIdentityQueryResponse[];
+  dictKeys: DictKeyQueryResponse[];
 
   [key: string]: unknown;
 }

orion-ops-ui/src/views/asset/host-identity/components/host-identity-card-list.vue

@@ -92,7 +92,8 @@
               label-align="right"
               :style="{ width: '320px' }"
               :label-col-props="{ span: 6 }"
-              :wrapper-col-props="{ span: 18 }">
+              :wrapper-col-props="{ span: 18 }"
+              @keyup.enter="() => fetchCardData()">
         <!-- id -->
         <a-form-item field="id" label="id">
           <a-input-number v-model="formModel.id"

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

@@ -4,7 +4,8 @@
     <a-query-header :model="formModel"
                     label-align="left"
                     @submit="fetchTableData"
-                    @reset="fetchTableData">
+                    @reset="fetchTableData"
+                    @keyup.enter="() => fetchTableData()">
       <!-- id -->
       <a-form-item field="id" label="id" label-col-flex="50px">
         <a-input-number v-model="formModel.id"

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

@@ -4,7 +4,8 @@
     <a-query-header :model="formModel"
                     label-align="left"
                     @submit="fetchTableData"
-                    @reset="fetchTableData">
+                    @reset="fetchTableData"
+                    @keyup.enter="() => fetchTableData()">
       <!-- id -->
       <a-form-item field="id" label="id" label-col-flex="30px">
         <a-input-number v-model="formModel.id"

orion-ops-ui/src/views/asset/host/components/host-card-list.vue

@@ -100,7 +100,8 @@
               label-align="right"
               :style="{ width: '320px' }"
               :label-col-props="{ span: 6 }"
-              :wrapper-col-props="{ span: 18 }">
+              :wrapper-col-props="{ span: 18 }"
+              @keyup.enter="() => fetchCardData()">
         <!-- id -->
         <a-form-item field="id" label="主机id">
           <a-input-number v-model="formModel.id"

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

@@ -4,7 +4,8 @@
     <a-query-header :model="formModel"
                     label-align="left"
                     @submit="fetchTableData"
-                    @reset="fetchTableData">
+                    @reset="fetchTableData"
+                    @keyup.enter="() => fetchTableData()">
       <!-- id -->
       <a-form-item field="id" label="主机id" label-col-flex="50px">
         <a-input-number v-model="formModel.id"

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

@@ -34,7 +34,7 @@
         <a-form-item field="description" label="配置描述">
           <a-input v-model="formModel.description" placeholder="请输入配置描述" allow-clear />
         </a-form-item>
-        <a-divider orientation="center" style="margin: 6px 0 26px 0;">额外参数定义</a-divider>
+        <a-divider orientation="center" style="margin: 12px 0 26px 0;">额外参数定义</a-divider>
         <!-- 额外参数 -->
         <a-form-item v-for="(schema, index) in extraSchemaArr"
                      :key="index"

orion-ops-ui/src/views/system/dict-key/components/dict-key-table.vue

@@ -4,7 +4,8 @@
     <a-query-header :model="formModel"
                     label-align="left"
                     @submit="fetchTableData"
-                    @reset="fetchTableData">
+                    @reset="fetchTableData"
+                    @keyup.enter="() => fetchTableData()">
       <!-- 配置项 -->
       <a-form-item field="keyName" label="配置项" label-col-flex="50px">
         <a-input v-model="formModel.keyName" placeholder="请输入配置项" allow-clear />
@@ -54,7 +55,7 @@
              :bordered="false">
       <!-- 配置值类型 -->
       <template #valueType="{ record }">
-        <a-tag :color="getEnumValue(record.valueType, ValueTypeEnum,'color')" class="pointer">
+        <a-tag :color="getEnumValue(record.valueType, ValueTypeEnum,'color')">
           {{ getEnumValue(record.valueType, ValueTypeEnum) }}
         </a-tag>
       </template>
@@ -63,7 +64,9 @@
         <template v-if="record.extraSchema">
           <a-space>
             <template v-for="item in JSON.parse(record.extraSchema)" :key="item.name">
-              <a-tag :color="getEnumValue(item.type, ValueTypeEnum,'color')">{{ item.name }}</a-tag>
+              <a-tag :color="getEnumValue(item.type, ValueTypeEnum,'color')">
+                {{ item.name }}
+              </a-tag>
             </template>
           </a-space>
         </template>
@@ -126,8 +129,6 @@
   const formModel = reactive<DictKeyQueryRequest>({
     id: undefined,
     keyName: undefined,
-    valueType: undefined,
-    extraSchema: undefined,
     description: undefined,
   });
 

orion-ops-ui/src/views/system/dict-key/types/form.rules.ts

@@ -17,6 +17,9 @@ export const valueType = [{
 }] as FieldRule[];
 
 export const description = [{
+  required: true,
+  message: '请输入配置描述'
+}, {
   maxLength: 64,
   message: '配置描述长度不能大于64位'
 }] as FieldRule[];

orion-ops-ui/src/views/system/dict-value/components/dict-value-card-list.vue

@@ -1,223 +0,0 @@
-<template>
-  <card-list v-model:searchValue="formModel.searchValue"
-             search-input-placeholder="输入xxx"
-             create-card-position="head"
-             :loading="loading"
-             :fieldConfig="fieldConfig"
-             :list="list"
-             :pagination="pagination"
-             :card-layout-cols="cardColLayout"
-             :filter-count="filterCount"
-             :add-permission="['infra:dict-value:create']"
-             @add="emits('openAdd')"
-             @reset="reset"
-             @search="fetchCardData"
-             @page-change="fetchCardData">
-    <!-- 标题 -->
-    <template #title="{ record }">
-      {{ record.id }}
-    </template>
-    <!-- 拓展操作 -->
-    <template #extra="{ record }">
-      <a-space>
-        <!-- 更多操作 -->
-        <a-dropdown trigger="hover">
-          <icon-more class="card-extra-icon" />
-          <template #content>
-            <!-- 修改 -->
-            <a-doption v-permission="['infra:dict-value:update']"
-                       @click="emits('openUpdate', record)">
-              <icon-edit />
-              修改
-            </a-doption>
-            <!-- 删除 -->
-            <a-doption v-permission="['infra:dict-value:delete']"
-                       class="span-red"
-                       @click="deleteRow(record.id)">
-              <icon-delete />
-              删除
-            </a-doption>
-          </template>
-        </a-dropdown>
-      </a-space>
-    </template>
-    <!-- 右键菜单 -->
-    <template #contextMenu="{ record }">
-      <!-- 修改 -->
-      <a-doption v-permission="['infra:dict-value:update']"
-                 @click="emits('openUpdate', record)">
-        <icon-edit />
-        修改
-      </a-doption>
-      <!-- 删除 -->
-      <a-doption v-permission="['infra:dict-value:delete']"
-                 class="span-red"
-                 @click="deleteRow(record.id)">
-        <icon-delete />
-        删除
-      </a-doption>
-    </template>
-    <!-- 过滤条件 -->
-    <template #filterContent>
-      <a-form :model="formModel"
-              class="modal-form"
-              size="small"
-              ref="formRef"
-              label-align="right"
-              :style="{ width: '320px' }"
-              :label-col-props="{ span: 6 }"
-              :wrapper-col-props="{ span: 18 }">
-        <!-- id -->
-        <a-form-item field="id" label="id">
-          <a-input-number v-model="formModel.id"
-                          placeholder="请输入id"
-                          allow-clear
-                          hide-button />
-        </a-form-item>
-        <!-- 配置项id -->
-        <a-form-item field="keyId" label="配置项id">
-          <a-input-number v-model="formModel.keyId"
-                          placeholder="请输入配置项id"
-                          allow-clear
-                          hide-button />
-        </a-form-item>
-        <!-- 配置项 -->
-        <a-form-item field="keyName" label="配置项">
-          <a-input v-model="formModel.keyName" placeholder="请输入配置项" allow-clear />
-        </a-form-item>
-        <!-- 配置名称 -->
-        <a-form-item field="name" label="配置名称">
-          <a-input v-model="formModel.name" placeholder="请输入配置名称" allow-clear />
-        </a-form-item>
-        <!-- 配置值 -->
-        <a-form-item field="value" label="配置值">
-          <a-input v-model="formModel.value" placeholder="请输入配置值" allow-clear />
-        </a-form-item>
-        <!-- 配置描述 -->
-        <a-form-item field="label" label="配置描述">
-          <a-input v-model="formModel.label" placeholder="请输入配置描述" allow-clear />
-        </a-form-item>
-        <!-- 额外参数 -->
-        <a-form-item field="extra" label="额外参数">
-          <a-input v-model="formModel.extra" placeholder="请输入额外参数" allow-clear />
-        </a-form-item>
-        <!-- 排序 -->
-        <a-form-item field="sort" label="排序">
-          <a-input-number v-model="formModel.sort"
-                          placeholder="请输入排序"
-                          allow-clear
-                          hide-button />
-        </a-form-item>
-      </a-form>
-    </template>
-  </card-list>
-</template>
-
-<script lang="ts">
-  export default {
-    name: 'system-dict-value-card-list'
-  };
-</script>
-
-<script lang="ts" setup>
-  import { usePagination, useColLayout } from '@/types/card';
-  import { computed, reactive, ref } from 'vue';
-  import useLoading from '@/hooks/loading';
-  import { objectTruthKeyCount, resetObject } from '@/utils';
-  import fieldConfig from '../types/card.fields';
-  import { deleteDictValue, getDictValuePage, DictValueQueryRequest, DictValueQueryResponse } from '@/api/system/dict-value';
-  import { Message, Modal } from '@arco-design/web-vue';
-
-  const { loading, setLoading } = useLoading();
-  const cardColLayout = useColLayout();
-  const pagination = usePagination();
-  const list = ref<DictValueQueryResponse[]>([]);
-  const emits = defineEmits(['openAdd', 'openUpdate']);
-
-  const formRef = ref();
-  const formModel = reactive<DictValueQueryRequest>({
-    searchValue: undefined,
-    id: undefined,
-    keyId: undefined,
-    keyName: undefined,
-    name: undefined,
-    value: undefined,
-    label: undefined,
-    extra: undefined,
-    sort: undefined,
-  });
-
-  // 条件数量
-  const filterCount = computed(() => {
-    return objectTruthKeyCount(formModel, ['searchValue']);
-  });
-
-  // 删除当前行
-  const deleteRow = (id: number) => {
-    Modal.confirm({
-      title: '删除前确认!',
-      titleAlign: 'start',
-      content: '确定要删除这条记录吗?',
-      okText: '删除',
-      onOk: async () => {
-        try {
-          setLoading(true);
-          // 调用删除接口
-          await deleteDictValue(id);
-          Message.success('删除成功');
-          // 重新加载数据
-          await fetchCardData();
-        } catch (e) {
-        } finally {
-          setLoading(false);
-        }
-      }
-    });
-  };
-
-  // 添加后回调
-  const addedCallback = () => {
-    fetchCardData();
-  };
-
-  // 更新后回调
-  const updatedCallback = () => {
-    fetchCardData();
-  };
-
-  defineExpose({
-    addedCallback, updatedCallback
-  });
-
-  // 重置条件
-  const reset = () => {
-    resetObject(formModel);
-    fetchCardData();
-  };
-
-  // 加载数据
-  const doFetchCardData = async (request: DictValueQueryRequest) => {
-    try {
-      setLoading(true);
-      const { data } = await getDictValuePage(request);
-      list.value = data.rows;
-      pagination.total = data.total;
-      pagination.current = request.page;
-      pagination.pageSize = request.limit;
-    } catch (e) {
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  // 切换页码
-  const fetchCardData = (page = 1, limit = pagination.pageSize, form = formModel) => {
-    doFetchCardData({ page, limit, ...form });
-  };
-  fetchCardData();
-
-</script>
-
-<style scoped lang="less">
-
-</style>

orion-ops-ui/src/views/system/dict-value/components/dict-value-form-drawer.vue

@@ -1,164 +0,0 @@
-<template>
-  <a-drawer v-model:visible="visible"
-            :title="title"
-            :width="430"
-            :mask-closable="false"
-            :unmount-on-close="true"
-            :ok-button-props="{ disabled: loading }"
-            :cancel-button-props="{ disabled: loading }"
-            :on-before-ok="handlerOk"
-            @cancel="handleClose">
-    <a-spin :loading="loading">
-      <a-form :model="formModel"
-              ref="formRef"
-              label-align="right"
-              :style="{ width: '380px' }"
-              :label-col-props="{ span: 6 }"
-              :wrapper-col-props="{ span: 18 }"
-              :rules="formRules">
-        <!-- 配置项id -->
-        <a-form-item field="keyId" label="配置项id">
-          <a-input-number v-model="formModel.keyId"
-                          placeholder="请输入配置项id"
-                          hide-button />
-        </a-form-item>
-        <!-- 配置项 -->
-        <a-form-item field="keyName" label="配置项">
-          <a-input v-model="formModel.keyName" placeholder="请输入配置项" allow-clear/>
-        </a-form-item>
-        <!-- 配置名称 -->
-        <a-form-item field="name" label="配置名称">
-          <a-input v-model="formModel.name" placeholder="请输入配置名称" allow-clear/>
-        </a-form-item>
-        <!-- 配置值 -->
-        <a-form-item field="value" label="配置值">
-          <a-input v-model="formModel.value" placeholder="请输入配置值" allow-clear/>
-        </a-form-item>
-        <!-- 配置描述 -->
-        <a-form-item field="label" label="配置描述">
-          <a-input v-model="formModel.label" placeholder="请输入配置描述" allow-clear/>
-        </a-form-item>
-        <!-- 额外参数 -->
-        <a-form-item field="extra" label="额外参数">
-          <a-input v-model="formModel.extra" placeholder="请输入额外参数" allow-clear/>
-        </a-form-item>
-        <!-- 排序 -->
-        <a-form-item field="sort" label="排序">
-          <a-input-number v-model="formModel.sort"
-                          placeholder="请输入排序"
-                          hide-button />
-        </a-form-item>
-      </a-form>
-    </a-spin>
-  </a-drawer>
-</template>
-
-<script lang="ts">
-  export default {
-    name: 'system-dict-value-form-drawer'
-  };
-</script>
-
-<script lang="ts" setup>
-  import { ref } from 'vue';
-  import useLoading from '@/hooks/loading';
-  import useVisible from '@/hooks/visible';
-  import formRules from '../types/form.rules';
-  import { createDictValue, updateDictValue, DictValueUpdateRequest } from '@/api/system/dict-value';
-  import { Message } from '@arco-design/web-vue';
-  import {} from '../types/const';
-  import {} from '../types/enum.types';
-  import { toOptions } from '@/utils/enum';
-
-  const { visible, setVisible } = useVisible();
-  const { loading, setLoading } = useLoading();
-
-  const title = ref<string>();
-  const isAddHandle = ref<boolean>(true);
-
-  const defaultForm = (): DictValueUpdateRequest => {
-    return {
-      id: undefined,
-      keyId: undefined,
-      keyName: undefined,
-      name: undefined,
-      value: undefined,
-      label: undefined,
-      extra: undefined,
-      sort: undefined,
-    };
-  };
-
-  const formRef = ref<any>();
-  const formModel = ref<DictValueUpdateRequest>({});
-
-  const emits = defineEmits(['added', 'updated']);
-
-  // 打开新增
-  const openAdd = () => {
-    title.value = '添加字典配置值';
-    isAddHandle.value = true;
-    renderForm({ ...defaultForm() });
-    setVisible(true);
-  };
-
-  // 打开修改
-  const openUpdate = (record: any) => {
-    title.value = '修改字典配置值';
-    isAddHandle.value = false;
-    renderForm({ ...defaultForm(), ...record });
-    setVisible(true);
-  };
-
-  // 渲染表单
-  const renderForm = (record: any) => {
-    formModel.value = Object.assign({}, record);
-  };
-
-  defineExpose({ openAdd, openUpdate });
-
-  // 确定
-  const handlerOk = async () => {
-    setLoading(true);
-    try {
-      // 验证参数
-      const error = await formRef.value.validate();
-      if (error) {
-        return false;
-      }
-      if (isAddHandle.value) {
-        // 新增
-        await createDictValue(formModel.value);
-        Message.success('创建成功');
-        emits('added');
-      } else {
-        // 修改
-        await updateDictValue(formModel.value);
-        Message.success('修改成功');
-        emits('updated');
-      }
-      // 清空
-      handlerClear();
-    } catch (e) {
-      return false;
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  // 关闭
-  const handleClose = () => {
-    handlerClear();
-  };
-
-  // 清空
-  const handlerClear = () => {
-    setLoading(false);
-    setVisible(false);
-  };
-
-</script>
-
-<style lang="less" scoped>
-
-</style>

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

@@ -20,15 +20,9 @@
               :label-col-props="{ span: 6 }"
               :wrapper-col-props="{ span: 18 }"
               :rules="formRules">
-        <!-- 配置项id -->
-        <a-form-item field="keyId" label="配置项id">
-          <a-input-number v-model="formModel.keyId"
-                          placeholder="请输入配置项id"
-                          hide-button />
-        </a-form-item>
         <!-- 配置项 -->
-        <a-form-item field="keyName" label="配置项">
+        <a-form-item field="keyId" label="配置项">
-          <a-input v-model="formModel.keyName" placeholder="请输入配置项" allow-clear />
+          <dict-key-selector v-model="formModel.keyId" />
         </a-form-item>
         <!-- 配置名称 -->
         <a-form-item field="name" label="配置名称">
@@ -42,10 +36,6 @@
         <a-form-item field="label" label="配置描述">
           <a-input v-model="formModel.label" placeholder="请输入配置描述" allow-clear />
         </a-form-item>
-        <!-- 额外参数 -->
-        <a-form-item field="extra" label="额外参数">
-          <a-input v-model="formModel.extra" placeholder="请输入额外参数" allow-clear />
-        </a-form-item>
         <!-- 排序 -->
         <a-form-item field="sort" label="排序">
           <a-input-number v-model="formModel.sort"
@@ -73,6 +63,7 @@
   import {} from '../types/const';
   import {} from '../types/enum.types';
   import { toOptions } from '@/utils/enum';
+  import DictKeySelector from '@/components/system/dict-key/dict-key-selector.vue';
 
   const { visible, setVisible } = useVisible();
   const { loading, setLoading } = useLoading();
@@ -84,12 +75,11 @@
     return {
       id: undefined,
       keyId: undefined,
-      keyName: undefined,
       name: undefined,
       value: undefined,
       label: undefined,
       extra: undefined,
-      sort: undefined,
+      sort: 10,
     };
   };
 

orion-ops-ui/src/views/system/dict-value/components/dict-value-table.vue

@@ -4,21 +4,8 @@
     <a-query-header :model="formModel"
                     label-align="left"
                     @submit="fetchTableData"
-                    @reset="fetchTableData">
+                    @reset="fetchTableData"
-      <!-- id -->
+                    @keyup.enter="() => fetchTableData()">
-      <a-form-item field="id" label="id" label-col-flex="50px">
-        <a-input-number v-model="formModel.id"
-                        placeholder="请输入id"
-                        allow-clear
-                        hide-button />
-      </a-form-item>
-      <!-- 配置项id -->
-      <a-form-item field="keyId" label="配置项id" label-col-flex="50px">
-        <a-input-number v-model="formModel.keyId"
-                        placeholder="请输入配置项id"
-                        allow-clear
-                        hide-button />
-      </a-form-item>
       <!-- 配置项 -->
       <a-form-item field="keyName" label="配置项" label-col-flex="50px">
         <a-input v-model="formModel.keyName" placeholder="请输入配置项" allow-clear />
@@ -35,17 +22,6 @@
       <a-form-item field="label" label="配置描述" label-col-flex="50px">
         <a-input v-model="formModel.label" placeholder="请输入配置描述" allow-clear />
       </a-form-item>
-      <!-- 额外参数 -->
-      <a-form-item field="extra" label="额外参数" label-col-flex="50px">
-        <a-input v-model="formModel.extra" placeholder="请输入额外参数" allow-clear />
-      </a-form-item>
-      <!-- 排序 -->
-      <a-form-item field="sort" label="排序" label-col-flex="50px">
-        <a-input-number v-model="formModel.sort"
-                        placeholder="请输入排序"
-                        allow-clear
-                        hide-button />
-      </a-form-item>
     </a-query-header>
   </a-card>
   <!-- 表格 -->
@@ -102,6 +78,18 @@
              @page-change="(page) => fetchTableData(page, pagination.pageSize)"
              @page-size-change="(size) => fetchTableData(1, size)"
              :bordered="false">
+      <!-- 名称 -->
+      <template #name="{ record }">
+        <span class="pointer" @click="copy(record.name)">
+          <icon-copy class="span-blue" /> {{ record.name }}
+        </span>
+      </template>
+      <!-- 值 -->
+      <template #value="{ record }">
+        <span class="pointer" @click="copy(record.value)">
+          <icon-copy class="span-blue" /> {{ record.value }}
+        </span>
+      </template>
       <!-- 操作 -->
       <template #handle="{ record }">
         <div class="table-handle-wrapper">
@@ -112,6 +100,13 @@
                     @click="emits('openUpdate', record)">
             修改
           </a-button>
+          <!-- 回滚 -->
+          <a-button type="text"
+                    size="mini"
+                    v-permission="['infra:dict-value:update']"
+                    @click="emits('openUpdate', record)">
+            回滚
+          </a-button>
           <!-- 删除 -->
           <a-popconfirm content="确认删除这条记录吗?"
                         position="left"
@@ -146,7 +141,9 @@
   import {} from '../types/const';
   import {} from '../types/enum.types';
   import { toOptions, getEnumValue } from '@/utils/enum';
+  import useCopy from '@/hooks/copy';
 
+  const { copy } = useCopy();
   const tableRenderData = ref<DictValueQueryResponse[]>([]);
   const { loading, setLoading } = useLoading();
   const emits = defineEmits(['openAdd', 'openUpdate']);

orion-ops-ui/src/views/system/dict-value/index.vue

@@ -2,12 +2,12 @@
   <div class="layout-container">
     <!-- 列表-表格 -->
     <dict-value-table ref="table"
-                  @openAdd="() => modal.openAdd()"
+                      @openAdd="() => modal.openAdd()"
-                  @openUpdate="(e) => modal.openUpdate(e)" />
+                      @openUpdate="(e) => modal.openUpdate(e)" />
     <!-- 添加修改模态框 -->
     <dict-value-form-modal ref="modal"
-                   @added="modalAddCallback"
+                           @added="modalAddCallback"
-                   @updated="modalUpdateCallback" />
+                           @updated="modalUpdateCallback" />
   </div>
 </template>
 
@@ -21,10 +21,15 @@
   import DictValueTable from './components/dict-value-table.vue';
   import DictValueFormModal from './components/dict-value-form-modal.vue';
 
-  import { ref } from 'vue';
+  import { onUnmounted, ref } from 'vue';
+  import { useCacheStore } from '@/store';
+  import { getDictKeyList } from '@/api/system/dict-key';
+  import { getTagList } from '@/api/meta/tag';
+  import { Message } from '@arco-design/web-vue';
 
   const table = ref();
   const modal = ref();
+  const cacheStore = useCacheStore();
 
   // 添加回调
   const modalAddCallback = () => {
@@ -36,6 +41,23 @@
     table.value.updatedCallback();
   };
 
+  // 加载字典配置项
+  const loadDictKeys = async () => {
+    try {
+      const { data } = await getDictKeyList();
+      // 设置到缓存
+      cacheStore.set('dictKeys', data);
+    } catch {
+      Message.error('配置项加载失败');
+    }
+  };
+  loadDictKeys();
+
+  // 卸载时清除 cache
+  onUnmounted(() => {
+    cacheStore.set('dictKeys', []);
+  });
+
 </script>
 
 <style lang="less" scoped>

orion-ops-ui/src/views/system/dict-value/types/card.fields.ts

@@ -1,71 +0,0 @@
-import { CardField, CardFieldConfig } from '@/types/card';
-import { dateFormat } from '@/utils';
-
-const fieldConfig = {
-  rowGap: '12px',
-  labelSpan: 8,
-  fields: [
-    {
-      label: 'id',
-      dataIndex: 'id',
-      slotName: 'id',
-    }, {
-      label: '配置项id',
-      dataIndex: 'keyId',
-      slotName: 'keyId',
-    }, {
-      label: '配置项',
-      dataIndex: 'keyName',
-      slotName: 'keyName',
-      ellipsis: true,
-    }, {
-      label: '配置名称',
-      dataIndex: 'name',
-      slotName: 'name',
-      ellipsis: true,
-    }, {
-      label: '配置值',
-      dataIndex: 'value',
-      slotName: 'value',
-      ellipsis: true,
-    }, {
-      label: '配置描述',
-      dataIndex: 'label',
-      slotName: 'label',
-      ellipsis: true,
-    }, {
-      label: '额外参数',
-      dataIndex: 'extra',
-      slotName: 'extra',
-      ellipsis: true,
-    }, {
-      label: '排序',
-      dataIndex: 'sort',
-      slotName: 'sort',
-    }, {
-      label: '创建时间',
-      dataIndex: 'createTime',
-      slotName: 'createTime',
-      render: ({ record }) => {
-        return dateFormat(new Date(record.createTime));
-      },
-    }, {
-      label: '修改时间',
-      dataIndex: 'updateTime',
-      slotName: 'updateTime',
-      render: ({ record }) => {
-        return dateFormat(new Date(record.updateTime));
-      },
-    }, {
-      label: '创建人',
-      dataIndex: 'creator',
-      slotName: 'creator',
-    }, {
-      label: '修改人',
-      dataIndex: 'updater',
-      slotName: 'updater',
-    }
-  ] as CardField[]
-} as CardFieldConfig;
-
-export default fieldConfig;

orion-ops-ui/src/views/system/dict-value/types/table.columns.ts

@@ -9,11 +9,6 @@ const columns = [
     width: 70,
     align: 'left',
     fixed: 'left',
-  }, {
-    title: '配置项id',
-    dataIndex: 'keyId',
-    slotName: 'keyId',
-    align: 'left',
   }, {
     title: '配置项',
     dataIndex: 'keyName',
@@ -54,15 +49,7 @@ const columns = [
     dataIndex: 'sort',
     slotName: 'sort',
     align: 'left',
-  }, {
+    width: 70,
-    title: '创建时间',
-    dataIndex: 'createTime',
-    slotName: 'createTime',
-    align: 'center',
-    width: 180,
-    render: ({ record }) => {
-      return dateFormat(new Date(record.createTime));
-    },
   }, {
     title: '修改时间',
     dataIndex: 'updateTime',
@@ -72,18 +59,10 @@ const columns = [
     render: ({ record }) => {
       return dateFormat(new Date(record.updateTime));
     },
-  }, {
-    title: '创建人',
-    dataIndex: 'creator',
-    slotName: 'creator',
-  }, {
-    title: '修改人',
-    dataIndex: 'updater',
-    slotName: 'updater',
   }, {
     title: '操作',
     slotName: 'handle',
-    width: 130,
+    width: 170,
     align: 'center',
     fixed: 'right',
   },

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

@@ -7,7 +7,7 @@
         <a-form :model="formModel"
                 ref="formRef"
                 label-align="left"
-                @keydown.enter="loadMenuData">
+                @keyup.enter="loadMenuData">
           <a-row :gutter="32">
             <!-- 菜单名称 -->
             <a-col :span="12">

orion-ops-ui/src/views/user/role/components/role-table.vue

@@ -4,7 +4,8 @@
     <a-query-header :model="formModel"
                     label-align="left"
                     @submit="fetchTableData"
-                    @reset="fetchTableData">
+                    @reset="fetchTableData"
+                    @keyup.enter="() => fetchTableData()">
       <!-- 角色名称 -->
       <a-form-item field="name" label="角色名称" label-col-flex="50px">
         <a-input v-model="formModel.name" placeholder="请输入角色名称" allow-clear />

orion-ops-ui/src/views/user/user/components/user-table.vue

@@ -4,7 +4,8 @@
     <a-query-header :model="formModel"
                     label-align="left"
                     @submit="fetchTableData"
-                    @reset="fetchTableData">
+                    @reset="fetchTableData"
+                    @keyup.enter="() => fetchTableData()">
       <!-- id -->
       <a-form-item field="id" label="id" label-col-flex="50px">
         <a-input-number v-model="formModel.id"

orion-ops-ui/src/views/user/user/types/table.columns.ts

@@ -34,10 +34,11 @@ const columns = [
     ellipsis: true,
     tooltip: true,
   }, {
-    title: '用户状态',
+    title: '状态',
     dataIndex: 'status',
     slotName: 'status',
     align: 'center',
+    width: 84
   }, {
     title: '最后登录时间',
     dataIndex: 'lastLoginTime',