feat: 字典配置前端代码.
This commit is contained in:
lijiahang
@@ -0,0 +1,223 @@
|
||||
<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>
|
||||
@@ -0,0 +1,164 @@
|
||||
<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>
|
||||
@@ -0,0 +1,168 @@
|
||||
<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">
|
||||
<!-- 配置项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-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'system-dict-value-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 { 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>
|
||||
@@ -0,0 +1,242 @@
|
||||
<template>
|
||||
<!-- 搜索 -->
|
||||
<a-card class="general-card table-search-card">
|
||||
<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>
|
||||
<!-- 配置项 -->
|
||||
<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="name" label="配置名称" label-col-flex="50px">
|
||||
<a-input v-model="formModel.name" placeholder="请输入配置名称" allow-clear />
|
||||
</a-form-item>
|
||||
<!-- 配置值 -->
|
||||
<a-form-item field="value" label="配置值" label-col-flex="50px">
|
||||
<a-input v-model="formModel.value" placeholder="请输入配置值" allow-clear />
|
||||
</a-form-item>
|
||||
<!-- 配置描述 -->
|
||||
<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>
|
||||
<!-- 表格 -->
|
||||
<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-value:create']"
|
||||
@click="emits('openAdd')">
|
||||
新增
|
||||
<template #icon>
|
||||
<icon-plus />
|
||||
</template>
|
||||
</a-button>
|
||||
<!-- 删除 -->
|
||||
<a-popconfirm position="br"
|
||||
type="warning"
|
||||
:content="`确认删除选中的${selectedKeys.length}条记录吗?`"
|
||||
@ok="deleteSelectRows">
|
||||
<a-button v-permission="['infra:dict-value:delete']"
|
||||
type="secondary"
|
||||
status="danger"
|
||||
:disabled="selectedKeys.length === 0">
|
||||
删除
|
||||
<template #icon>
|
||||
<icon-delete />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</div>
|
||||
</template>
|
||||
<!-- table -->
|
||||
<a-table row-key="id"
|
||||
class="table-wrapper-8"
|
||||
ref="tableRef"
|
||||
label-align="left"
|
||||
:loading="loading"
|
||||
:columns="columns"
|
||||
v-model:selected-keys="selectedKeys"
|
||||
:row-selection="rowSelection"
|
||||
:data="tableRenderData"
|
||||
:pagination="pagination"
|
||||
@page-change="(page) => fetchTableData(page, pagination.pageSize)"
|
||||
@page-size-change="(size) => fetchTableData(1, size)"
|
||||
:bordered="false">
|
||||
<!-- 操作 -->
|
||||
<template #handle="{ record }">
|
||||
<div class="table-handle-wrapper">
|
||||
<!-- 修改 -->
|
||||
<a-button type="text"
|
||||
size="mini"
|
||||
v-permission="['infra:dict-value:update']"
|
||||
@click="emits('openUpdate', record)">
|
||||
修改
|
||||
</a-button>
|
||||
<!-- 删除 -->
|
||||
<a-popconfirm content="确认删除这条记录吗?"
|
||||
position="left"
|
||||
type="warning"
|
||||
@ok="deleteRow(record)">
|
||||
<a-button v-permission="['infra:dict-value: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-value-table'
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import { batchDeleteDictValue, deleteDictValue, getDictValuePage, DictValueQueryRequest, DictValueQueryResponse } from '@/api/system/dict-value';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
import useLoading from '@/hooks/loading';
|
||||
import columns from '../types/table.columns';
|
||||
import { usePagination, useRowSelection } from '@/types/table';
|
||||
import {} from '../types/const';
|
||||
import {} from '../types/enum.types';
|
||||
import { toOptions, getEnumValue } from '@/utils/enum';
|
||||
|
||||
const tableRenderData = ref<DictValueQueryResponse[]>([]);
|
||||
const { loading, setLoading } = useLoading();
|
||||
const emits = defineEmits(['openAdd', 'openUpdate']);
|
||||
|
||||
const pagination = usePagination();
|
||||
const selectedKeys = ref<number[]>([]);
|
||||
const rowSelection = useRowSelection();
|
||||
|
||||
const formModel = reactive<DictValueQueryRequest>({
|
||||
id: undefined,
|
||||
keyId: undefined,
|
||||
keyName: undefined,
|
||||
name: undefined,
|
||||
value: undefined,
|
||||
label: undefined,
|
||||
extra: undefined,
|
||||
sort: undefined,
|
||||
});
|
||||
|
||||
// 删除选中行
|
||||
const deleteSelectRows = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
// 调用删除接口
|
||||
await batchDeleteDictValue(selectedKeys.value);
|
||||
Message.success(`成功删除${selectedKeys.value.length}条数据`);
|
||||
selectedKeys.value = [];
|
||||
// 重新加载数据
|
||||
await fetchTableData();
|
||||
} catch (e) {
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 删除当前行
|
||||
const deleteRow = async ({ id }: {
|
||||
id: number
|
||||
}) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
// 调用删除接口
|
||||
await deleteDictValue(id);
|
||||
Message.success('删除成功');
|
||||
// 重新加载数据
|
||||
await fetchTableData();
|
||||
} catch (e) {
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 添加后回调
|
||||
const addedCallback = () => {
|
||||
fetchTableData();
|
||||
};
|
||||
|
||||
// 更新后回调
|
||||
const updatedCallback = () => {
|
||||
fetchTableData();
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
addedCallback, updatedCallback
|
||||
});
|
||||
|
||||
// 加载数据
|
||||
const doFetchTableData = async (request: DictValueQueryRequest) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const { data } = await getDictValuePage(request);
|
||||
tableRenderData.value = data.rows;
|
||||
pagination.total = data.total;
|
||||
pagination.current = request.page;
|
||||
pagination.pageSize = request.limit;
|
||||
selectedKeys.value = [];
|
||||
} 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-value/index.vue
Normal file
43
orion-ops-ui/src/views/system/dict-value/index.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<div class="layout-container">
|
||||
<!-- 列表-表格 -->
|
||||
<dict-value-table ref="table"
|
||||
@openAdd="() => modal.openAdd()"
|
||||
@openUpdate="(e) => modal.openUpdate(e)" />
|
||||
<!-- 添加修改模态框 -->
|
||||
<dict-value-form-modal ref="modal"
|
||||
@added="modalAddCallback"
|
||||
@updated="modalUpdateCallback" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'systemDictValue'
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import DictValueTable from './components/dict-value-table.vue';
|
||||
import DictValueFormModal from './components/dict-value-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>
|
||||
@@ -0,0 +1,71 @@
|
||||
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;
|
||||
58
orion-ops-ui/src/views/system/dict-value/types/form.rules.ts
Normal file
58
orion-ops-ui/src/views/system/dict-value/types/form.rules.ts
Normal file
@@ -0,0 +1,58 @@
|
||||
import { FieldRule } from '@arco-design/web-vue';
|
||||
|
||||
export const keyId = [{
|
||||
required: true,
|
||||
message: '请输入配置项id'
|
||||
}] as FieldRule[];
|
||||
|
||||
export const keyName = [{
|
||||
required: true,
|
||||
message: '请输入配置项'
|
||||
}, {
|
||||
maxLength: 32,
|
||||
message: '配置项长度不能大于32位'
|
||||
}] as FieldRule[];
|
||||
|
||||
export const name = [{
|
||||
required: true,
|
||||
message: '请输入配置名称'
|
||||
}, {
|
||||
maxLength: 32,
|
||||
message: '配置名称长度不能大于32位'
|
||||
}] as FieldRule[];
|
||||
|
||||
export const value = [{
|
||||
required: true,
|
||||
message: '请输入配置值'
|
||||
}, {
|
||||
maxLength: 512,
|
||||
message: '配置值长度不能大于512位'
|
||||
}] as FieldRule[];
|
||||
|
||||
export const label = [{
|
||||
required: true,
|
||||
message: '请输入配置描述'
|
||||
}, {
|
||||
maxLength: 64,
|
||||
message: '配置描述长度不能大于64位'
|
||||
}] as FieldRule[];
|
||||
|
||||
export const extra = [{
|
||||
required: true,
|
||||
message: '请输入额外参数'
|
||||
}] as FieldRule[];
|
||||
|
||||
export const sort = [{
|
||||
required: true,
|
||||
message: '请输入排序'
|
||||
}] as FieldRule[];
|
||||
|
||||
export default {
|
||||
keyId,
|
||||
keyName,
|
||||
name,
|
||||
value,
|
||||
label,
|
||||
extra,
|
||||
sort,
|
||||
} as Record<string, FieldRule | FieldRule[]>;
|
||||
@@ -0,0 +1,92 @@
|
||||
import { TableColumnData } from '@arco-design/web-vue/es/table/interface';
|
||||
import { dateFormat } from '@/utils';
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'id',
|
||||
dataIndex: 'id',
|
||||
slotName: 'id',
|
||||
width: 70,
|
||||
align: 'left',
|
||||
fixed: 'left',
|
||||
}, {
|
||||
title: '配置项id',
|
||||
dataIndex: 'keyId',
|
||||
slotName: 'keyId',
|
||||
align: 'left',
|
||||
}, {
|
||||
title: '配置项',
|
||||
dataIndex: 'keyName',
|
||||
slotName: 'keyName',
|
||||
align: 'left',
|
||||
ellipsis: true,
|
||||
tooltip: true,
|
||||
}, {
|
||||
title: '配置名称',
|
||||
dataIndex: 'name',
|
||||
slotName: 'name',
|
||||
align: 'left',
|
||||
ellipsis: true,
|
||||
tooltip: true,
|
||||
}, {
|
||||
title: '配置值',
|
||||
dataIndex: 'value',
|
||||
slotName: 'value',
|
||||
align: 'left',
|
||||
ellipsis: true,
|
||||
tooltip: true,
|
||||
}, {
|
||||
title: '配置描述',
|
||||
dataIndex: 'label',
|
||||
slotName: 'label',
|
||||
align: 'left',
|
||||
ellipsis: true,
|
||||
tooltip: true,
|
||||
}, {
|
||||
title: '额外参数',
|
||||
dataIndex: 'extra',
|
||||
slotName: 'extra',
|
||||
align: 'left',
|
||||
ellipsis: true,
|
||||
tooltip: true,
|
||||
}, {
|
||||
title: '排序',
|
||||
dataIndex: 'sort',
|
||||
slotName: 'sort',
|
||||
align: 'left',
|
||||
}, {
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
slotName: 'createTime',
|
||||
align: 'center',
|
||||
width: 180,
|
||||
render: ({ record }) => {
|
||||
return dateFormat(new Date(record.createTime));
|
||||
},
|
||||
}, {
|
||||
title: '修改时间',
|
||||
dataIndex: 'updateTime',
|
||||
slotName: 'updateTime',
|
||||
align: 'center',
|
||||
width: 180,
|
||||
render: ({ record }) => {
|
||||
return dateFormat(new Date(record.updateTime));
|
||||
},
|
||||
}, {
|
||||
title: '创建人',
|
||||
dataIndex: 'creator',
|
||||
slotName: 'creator',
|
||||
}, {
|
||||
title: '修改人',
|
||||
dataIndex: 'updater',
|
||||
slotName: 'updater',
|
||||
}, {
|
||||
title: '操作',
|
||||
slotName: 'handle',
|
||||
width: 130,
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
},
|
||||
] as TableColumnData[];
|
||||
|
||||
export default columns;
|
||||
Reference in New Issue
Block a user