feat: 字典配置前端代码.
This commit is contained in:
lijiahang
@@ -0,0 +1,263 @@
|
||||
<template>
|
||||
<a-modal v-model:visible="visible"
|
||||
body-class="modal-form"
|
||||
title-align="start"
|
||||
:title="title"
|
||||
:top="80"
|
||||
:align-center="false"
|
||||
:draggable="true"
|
||||
:mask-closable="false"
|
||||
:unmount-on-close="true"
|
||||
:ok-button-props="{ disabled: loading }"
|
||||
:cancel-button-props="{ disabled: loading }"
|
||||
:on-before-ok="handlerOk"
|
||||
@close="handleClose">
|
||||
<a-spin :loading="loading">
|
||||
<a-form :model="formModel"
|
||||
ref="formRef"
|
||||
label-align="right"
|
||||
:style="{ width: '460px' }"
|
||||
:label-col-props="{ span: 6 }"
|
||||
:wrapper-col-props="{ span: 18 }"
|
||||
:rules="formRules">
|
||||
<!-- 配置项 -->
|
||||
<a-form-item field="keyName" label="配置项">
|
||||
<a-input v-model="formModel.keyName" placeholder="请输入配置项" allow-clear />
|
||||
</a-form-item>
|
||||
<!-- 配置值类型 -->
|
||||
<a-form-item field="valueType" label="配置值类型">
|
||||
<a-select v-model="formModel.valueType"
|
||||
:options="toOptions(ValueTypeEnum)"
|
||||
placeholder="请选择配置值类型" />
|
||||
</a-form-item>
|
||||
<!-- 配置描述 -->
|
||||
<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-form-item v-for="(schema, index) in extraSchemaArr"
|
||||
:key="index"
|
||||
:field="`extra${index + 1}`"
|
||||
:label="`额外参数 ${index + 1}`">
|
||||
<a-input-group>
|
||||
<!-- 参数类型 -->
|
||||
<a-select v-model="schema.type"
|
||||
:options="toOptions(ValueTypeEnum)"
|
||||
placeholder="类型"
|
||||
:style="{ width: '110px' }" />
|
||||
<!-- 参数值 -->
|
||||
<a-input v-model="schema.name"
|
||||
placeholder="参数名称"
|
||||
:style="{ width: '196px' }" />
|
||||
</a-input-group>
|
||||
<!-- 操作按钮 -->
|
||||
<div class="extra-action">
|
||||
<!-- 删除 -->
|
||||
<span class="click-icon-wrapper minus-icon-wrapper"
|
||||
title="移除参数"
|
||||
@click="removeExtraParam(index)">
|
||||
<icon-minus />
|
||||
</span>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<!-- 参数操作 -->
|
||||
<a-space class="param-addition">
|
||||
<!-- 快捷定义 -->
|
||||
<a-tag v-for="definedExtraKey in definedExtraKeys"
|
||||
color="arcoblue"
|
||||
:title="`添加参数 ${definedExtraKey}`"
|
||||
@click="addExtraParam(definedExtraKey)"
|
||||
checkable
|
||||
checked>
|
||||
{{ definedExtraKey }}
|
||||
</a-tag>
|
||||
<!-- 添加参数 -->
|
||||
<a-button title="添加参数"
|
||||
style="width: 180px;"
|
||||
@click="addExtraParam(undefined)"
|
||||
long>
|
||||
<icon-plus />
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'system-dict-key-form-modal'
|
||||
};
|
||||
</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 { createDictKey, updateDictKey, DictKeyUpdateRequest } from '@/api/system/dict-key';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
import { definedExtraKeys, innerKeys, ExtraParamType } from '../types/const';
|
||||
import { ValueTypeEnum } from '../types/enum.types';
|
||||
import { toOptions } from '@/utils/enum';
|
||||
import { FieldData } from '@arco-design/web-vue/es/form/interface';
|
||||
|
||||
const { visible, setVisible } = useVisible();
|
||||
const { loading, setLoading } = useLoading();
|
||||
|
||||
const title = ref<string>();
|
||||
const isAddHandle = ref<boolean>(true);
|
||||
|
||||
const defaultForm = (): DictKeyUpdateRequest => {
|
||||
return {
|
||||
id: undefined,
|
||||
keyName: undefined,
|
||||
valueType: undefined,
|
||||
extraSchema: undefined,
|
||||
description: undefined,
|
||||
};
|
||||
};
|
||||
|
||||
const formRef = ref<any>();
|
||||
const formModel = ref<DictKeyUpdateRequest>({});
|
||||
const extraSchemaArr = ref<Array<ExtraParamType>>([]);
|
||||
|
||||
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);
|
||||
if (record.extraSchema) {
|
||||
extraSchemaArr.value = JSON.parse(record.extraSchema);
|
||||
} else {
|
||||
extraSchemaArr.value = [];
|
||||
}
|
||||
};
|
||||
|
||||
defineExpose({ openAdd, openUpdate });
|
||||
|
||||
// 添加额外参数
|
||||
const addExtraParam = (name: string | undefined) => {
|
||||
if (name && extraSchemaArr.value.findIndex(v => v.name === name) != -1) {
|
||||
return;
|
||||
}
|
||||
extraSchemaArr.value.push({
|
||||
name: name,
|
||||
type: ValueTypeEnum.STRING.value
|
||||
});
|
||||
};
|
||||
|
||||
// 移除额外参数
|
||||
const removeExtraParam = (index: number) => {
|
||||
extraSchemaArr.value.splice(index, 1);
|
||||
};
|
||||
|
||||
// 确定
|
||||
const handlerOk = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
// 验证参数
|
||||
const error = await formRef.value.validate();
|
||||
if (error) {
|
||||
return false;
|
||||
}
|
||||
// 验证额外参数
|
||||
if (extraSchemaArr.value) {
|
||||
for (let i = 0; i < extraSchemaArr.value.length; i++) {
|
||||
const extraSchema = extraSchemaArr.value[i];
|
||||
// 为空
|
||||
if (!extraSchema.name) {
|
||||
formRef.value.setFields({
|
||||
[`extra${i + 1}`]: {
|
||||
status: 'error',
|
||||
message: '参数不能为空'
|
||||
}
|
||||
});
|
||||
return false;
|
||||
}
|
||||
// 不合法
|
||||
if (!new RegExp(/^[a-zA-Z0-9]{2,32}$/).test(extraSchema.name as string)) {
|
||||
formRef.value.setFields({
|
||||
[`extra${i + 1}`]: {
|
||||
status: 'error',
|
||||
message: '配置项需要为 2-32 位的数字以及字母'
|
||||
}
|
||||
});
|
||||
return false;
|
||||
}
|
||||
// 不能为内置参数
|
||||
if (innerKeys.includes(extraSchema.name)) {
|
||||
formRef.value.setFields({
|
||||
[`extra${i + 1}`]: {
|
||||
status: 'error',
|
||||
message: '参数不能为 name label value'
|
||||
}
|
||||
});
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 保存
|
||||
if (isAddHandle.value) {
|
||||
// 新增
|
||||
await createDictKey({ ...formModel.value, extraSchema: JSON.stringify(extraSchemaArr.value) });
|
||||
Message.success('创建成功');
|
||||
emits('added');
|
||||
} else {
|
||||
// 修改
|
||||
await updateDictKey({ ...formModel.value, extraSchema: JSON.stringify(extraSchemaArr.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>
|
||||
.minus-icon-wrapper {
|
||||
margin-left: 8px;
|
||||
font-size: 18px;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.param-addition {
|
||||
justify-content: flex-end;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,190 @@
|
||||
<template>
|
||||
<!-- 搜索 -->
|
||||
<a-card class="general-card table-search-card">
|
||||
<a-query-header :model="formModel"
|
||||
label-align="left"
|
||||
@submit="fetchTableData"
|
||||
@reset="fetchTableData">
|
||||
<!-- 配置项 -->
|
||||
<a-form-item field="keyName" label="配置项" label-col-flex="50px">
|
||||
<a-input v-model="formModel.keyName" placeholder="请输入配置项" allow-clear />
|
||||
</a-form-item>
|
||||
<!-- 配置描述 -->
|
||||
<a-form-item field="description" label="配置描述" label-col-flex="50px">
|
||||
<a-input v-model="formModel.description" placeholder="请输入配置描述" allow-clear />
|
||||
</a-form-item>
|
||||
</a-query-header>
|
||||
</a-card>
|
||||
<!-- 表格 -->
|
||||
<a-card class="general-card table-card">
|
||||
<template #title>
|
||||
<!-- 左侧操作 -->
|
||||
<div class="table-left-bar-handle">
|
||||
<!-- 标题 -->
|
||||
<div class="table-title">
|
||||
字典配置项
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右侧操作 -->
|
||||
<div class="table-right-bar-handle">
|
||||
<a-space>
|
||||
<!-- 新增 -->
|
||||
<a-button type="primary"
|
||||
v-permission="['infra:dict-key:create']"
|
||||
@click="emits('openAdd')">
|
||||
新增
|
||||
<template #icon>
|
||||
<icon-plus />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
</template>
|
||||
<!-- table -->
|
||||
<a-table row-key="id"
|
||||
class="table-wrapper-8"
|
||||
ref="tableRef"
|
||||
label-align="left"
|
||||
:loading="loading"
|
||||
:columns="columns"
|
||||
:data="tableRenderData"
|
||||
:pagination="pagination"
|
||||
@page-change="(page) => fetchTableData(page, pagination.pageSize)"
|
||||
@page-size-change="(size) => fetchTableData(1, size)"
|
||||
:bordered="false">
|
||||
<!-- 配置值类型 -->
|
||||
<template #valueType="{ record }">
|
||||
<a-tag :color="getEnumValue(record.valueType, ValueTypeEnum,'color')" class="pointer">
|
||||
{{ getEnumValue(record.valueType, ValueTypeEnum) }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<!-- 额外参数 -->
|
||||
<template #extraSchema="{ record }">
|
||||
<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>
|
||||
</template>
|
||||
</a-space>
|
||||
</template>
|
||||
<template v-else>
|
||||
-
|
||||
</template>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #handle="{ record }">
|
||||
<div class="table-handle-wrapper">
|
||||
<!-- 修改 -->
|
||||
<a-button type="text"
|
||||
size="mini"
|
||||
v-permission="['infra:dict-key:update']"
|
||||
@click="emits('openUpdate', record)">
|
||||
修改
|
||||
</a-button>
|
||||
<!-- 删除 -->
|
||||
<a-popconfirm content="确认删除这条记录吗?"
|
||||
position="left"
|
||||
type="warning"
|
||||
@ok="deleteRow(record)">
|
||||
<a-button v-permission="['infra:dict-key:delete']"
|
||||
type="text"
|
||||
size="mini"
|
||||
status="danger">
|
||||
删除
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
</div>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'system-dict-key-table'
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import { batchDeleteDictKey, deleteDictKey, getDictKeyPage, DictKeyQueryRequest, DictKeyQueryResponse } from '@/api/system/dict-key';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
import useLoading from '@/hooks/loading';
|
||||
import columns from '../types/table.columns';
|
||||
import { usePagination } from '@/types/table';
|
||||
import {} from '../types/const';
|
||||
import { ValueTypeEnum } from '../types/enum.types';
|
||||
import { toOptions, getEnumValue } from '@/utils/enum';
|
||||
import { MenuStatusEnum } from '@/views/system/menu/types/enum.types';
|
||||
|
||||
const tableRenderData = ref<DictKeyQueryResponse[]>([]);
|
||||
const { loading, setLoading } = useLoading();
|
||||
const emits = defineEmits(['openAdd', 'openUpdate']);
|
||||
|
||||
const pagination = usePagination();
|
||||
|
||||
const formModel = reactive<DictKeyQueryRequest>({
|
||||
id: undefined,
|
||||
keyName: undefined,
|
||||
valueType: undefined,
|
||||
extraSchema: undefined,
|
||||
description: undefined,
|
||||
});
|
||||
|
||||
// 删除当前行
|
||||
const deleteRow = async ({ id }: {
|
||||
id: number
|
||||
}) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
// 调用删除接口
|
||||
await deleteDictKey(id);
|
||||
Message.success('删除成功');
|
||||
// 重新加载数据
|
||||
await fetchTableData();
|
||||
} catch (e) {
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 添加后回调
|
||||
const addedCallback = () => {
|
||||
fetchTableData();
|
||||
};
|
||||
|
||||
// 更新后回调
|
||||
const updatedCallback = () => {
|
||||
fetchTableData();
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
addedCallback, updatedCallback
|
||||
});
|
||||
|
||||
// 加载数据
|
||||
const doFetchTableData = async (request: DictKeyQueryRequest) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const { data } = await getDictKeyPage(request);
|
||||
tableRenderData.value = data.rows;
|
||||
pagination.total = data.total;
|
||||
pagination.current = request.page;
|
||||
pagination.pageSize = request.limit;
|
||||
} catch (e) {
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 切换页码
|
||||
const fetchTableData = (page = 1, limit = pagination.pageSize, form = formModel) => {
|
||||
doFetchTableData({ page, limit, ...form });
|
||||
};
|
||||
fetchTableData();
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
</style>
|
||||
43
orion-ops-ui/src/views/system/dict-key/index.vue
Normal file
43
orion-ops-ui/src/views/system/dict-key/index.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<div class="layout-container">
|
||||
<!-- 列表-表格 -->
|
||||
<dict-key-table ref="table"
|
||||
@openAdd="() => modal.openAdd()"
|
||||
@openUpdate="(e) => modal.openUpdate(e)" />
|
||||
<!-- 添加修改模态框 -->
|
||||
<dict-key-form-modal ref="modal"
|
||||
@added="modalAddCallback"
|
||||
@updated="modalUpdateCallback" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'systemDictKey'
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import DictKeyTable from './components/dict-key-table.vue';
|
||||
import DictKeyFormModal from './components/dict-key-form-modal.vue';
|
||||
|
||||
import { ref } from 'vue';
|
||||
|
||||
const table = ref();
|
||||
const modal = ref();
|
||||
|
||||
// 添加回调
|
||||
const modalAddCallback = () => {
|
||||
table.value.addedCallback();
|
||||
};
|
||||
|
||||
// 修改回调
|
||||
const modalUpdateCallback = () => {
|
||||
table.value.updatedCallback();
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
</style>
|
||||
17
orion-ops-ui/src/views/system/dict-key/types/const.ts
Normal file
17
orion-ops-ui/src/views/system/dict-key/types/const.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
/**
|
||||
* 快捷定义字段
|
||||
*/
|
||||
export const definedExtraKeys = ['status', 'type', 'color'];
|
||||
|
||||
/**
|
||||
* 内置字段
|
||||
*/
|
||||
export const innerKeys = ['name', 'value', 'label'];
|
||||
|
||||
/**
|
||||
* 额外参数类型
|
||||
*/
|
||||
export interface ExtraParamType {
|
||||
name?: string;
|
||||
type?: string;
|
||||
}
|
||||
31
orion-ops-ui/src/views/system/dict-key/types/enum.types.ts
Normal file
31
orion-ops-ui/src/views/system/dict-key/types/enum.types.ts
Normal file
@@ -0,0 +1,31 @@
|
||||
/**
|
||||
* 配置值定义
|
||||
*/
|
||||
export const ValueTypeEnum = {
|
||||
STRING: {
|
||||
label: '字符串',
|
||||
value: 'STRING',
|
||||
color: 'blue',
|
||||
},
|
||||
INTEGER: {
|
||||
label: '整数',
|
||||
value: 'INTEGER',
|
||||
color: 'arcoblue',
|
||||
},
|
||||
DECIMAL: {
|
||||
label: '小数',
|
||||
value: 'DECIMAL',
|
||||
color: 'purple',
|
||||
},
|
||||
BOOLEAN: {
|
||||
label: '布尔值',
|
||||
value: 'BOOLEAN',
|
||||
color: 'pinkpurple',
|
||||
},
|
||||
COLOR: {
|
||||
label: '颜色',
|
||||
value: 'COLOR',
|
||||
color: 'magenta',
|
||||
},
|
||||
};
|
||||
|
||||
28
orion-ops-ui/src/views/system/dict-key/types/form.rules.ts
Normal file
28
orion-ops-ui/src/views/system/dict-key/types/form.rules.ts
Normal file
@@ -0,0 +1,28 @@
|
||||
import { FieldRule } from '@arco-design/web-vue';
|
||||
|
||||
export const keyName = [{
|
||||
required: true,
|
||||
message: '请输入配置项'
|
||||
}, {
|
||||
match: /^[a-zA-Z0-9]{2,32}$/,
|
||||
message: '配置项需要为 2-32 位的数字以及字母'
|
||||
}] as FieldRule[];
|
||||
|
||||
export const valueType = [{
|
||||
required: true,
|
||||
message: '请输入配置值类型'
|
||||
}, {
|
||||
maxLength: 12,
|
||||
message: '配置值类型长度不能大于12位'
|
||||
}] as FieldRule[];
|
||||
|
||||
export const description = [{
|
||||
maxLength: 64,
|
||||
message: '配置描述长度不能大于64位'
|
||||
}] as FieldRule[];
|
||||
|
||||
export default {
|
||||
keyName,
|
||||
valueType,
|
||||
description,
|
||||
} as Record<string, FieldRule | FieldRule[]>;
|
||||
@@ -0,0 +1,45 @@
|
||||
import { TableColumnData } from '@arco-design/web-vue/es/table/interface';
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'id',
|
||||
dataIndex: 'id',
|
||||
slotName: 'id',
|
||||
width: 70,
|
||||
align: 'left',
|
||||
fixed: 'left',
|
||||
}, {
|
||||
title: '配置项',
|
||||
dataIndex: 'keyName',
|
||||
slotName: 'keyName',
|
||||
align: 'left',
|
||||
ellipsis: true,
|
||||
tooltip: true,
|
||||
}, {
|
||||
title: '配置值类型',
|
||||
dataIndex: 'valueType',
|
||||
slotName: 'valueType',
|
||||
align: 'left',
|
||||
width: 150
|
||||
}, {
|
||||
title: '配置描述',
|
||||
dataIndex: 'description',
|
||||
slotName: 'description',
|
||||
align: 'left',
|
||||
ellipsis: true,
|
||||
tooltip: true,
|
||||
}, {
|
||||
title: '额外配置类型',
|
||||
dataIndex: 'extraSchema',
|
||||
slotName: 'extraSchema',
|
||||
align: 'left',
|
||||
}, {
|
||||
title: '操作',
|
||||
slotName: 'handle',
|
||||
width: 130,
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
},
|
||||
] as TableColumnData[];
|
||||
|
||||
export default columns;
|
||||
Reference in New Issue
Block a user