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

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