manager/orion-visor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 字典配置前端代码.

Browse Source
This commit is contained in:
lijiahang
2023-10-20 18:45:21 +08:00
parent 437614f026
commit bd02ce1dd0
34 changed files with 226 additions and 570 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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}">

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

@@ -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">

29
orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/entity/dto/DictKeyExtraSchemaDTO.java Normal file
View File

@@ -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;
}

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

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

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

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

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

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

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

@@ -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);
RedisMaps.delete(DictCacheKeyDefine.DICT_SCHEMA.format(record.getKeyName()));
RedisUtils.delete(DictCacheKeyDefine.DICT_KEY.getKey(),
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)

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

@@ -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())

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

@@ -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';
/**

21
orion-ops-ui/src/assets/style/layout.less
View File

@@ -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;
}

60
orion-ops-ui/src/components/system/dict-key/dict-key-selector.vue Normal file
View File

@@ -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>

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

@@ -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,
});

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

@@ -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 {

3
orion-ops-ui/src/store/modules/cache/index.ts vendored
View File

@@ -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: {},

2
orion-ops-ui/src/store/modules/cache/types.ts vendored
View File

@@ -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;
}

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

@@ -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"

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

@@ -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"

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

@@ -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"

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

@@ -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"

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

@@ -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"

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

@@ -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"

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

@@ -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,
});

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

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

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

@@ -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>

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

@@ -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>

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

@@ -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-input v-model="formModel.keyName" placeholder="请输入配置项" allow-clear />
<a-form-item field="keyId" label="配置项">
<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,
};
};

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

@@ -4,21 +4,8 @@
<a-query-header :model="formModel"
label-align="left"
@submit="fetchTableData"
@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
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>
@reset="fetchTableData"
@keyup.enter="() => fetchTableData()">
<!-- 配置项 -->
<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']);

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

@@ -2,12 +2,12 @@
<div class="layout-container">
<!-- 列表-表格 -->
<dict-value-table ref="table"
@openAdd="() => modal.openAdd()"
@openUpdate="(e) => modal.openUpdate(e)" />
@openAdd="() => modal.openAdd()"
@openUpdate="(e) => modal.openUpdate(e)" />
<!-- 添加修改模态框 -->
<dict-value-form-modal ref="modal"
@added="modalAddCallback"
@updated="modalUpdateCallback" />
@added="modalAddCallback"
@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>

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

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

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

@@ -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',
}, {
title: '创建时间',
dataIndex: 'createTime',
slotName: 'createTime',
align: 'center',
width: 180,
render: ({ record }) => {
return dateFormat(new Date(record.createTime));
},
width: 70,
}, {
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',
},

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

@@ -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">

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

@@ -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 />

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

@@ -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"

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

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