feat: 关系配置
This commit is contained in:
easy
parent
3b799e53d7
commit
37c8110ddc
|
|
@ -0,0 +1,13 @@
|
||||||
|
import server from '@/utils/request';
|
||||||
|
|
||||||
|
// 获取关系配置列表
|
||||||
|
export const getRelationshipList_api = (data: object) => server.post(`/relation/_query/`, data);
|
||||||
|
|
||||||
|
// 获取关联方列表
|
||||||
|
export const getObjectList_api = () => server.get(`/relation/types`);
|
||||||
|
// 新增关系
|
||||||
|
export const addRelation_api = (data: object) => server.post(`/relation`, data);
|
||||||
|
// 保存关系
|
||||||
|
export const editRelation_api = (data: object) => server.patch(`/relation`, data);
|
||||||
|
// 删除关系
|
||||||
|
export const delRelation_api = (id: string) => server.remove(`/relation/${id}`);
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
import BaseService from '@/utils/BaseService';
|
||||||
|
import { request } from 'umi';
|
||||||
|
import SystemConst from '@/utils/const';
|
||||||
|
|
||||||
|
class Service extends BaseService<ReationItem> {
|
||||||
|
getTypes = () =>
|
||||||
|
request(`/${SystemConst.API_BASE}/relation/types`, {
|
||||||
|
method: 'GET',
|
||||||
|
});
|
||||||
|
|
||||||
|
validator = (params: any) =>
|
||||||
|
request(`/${SystemConst.API_BASE}/relation/_validate?`, {
|
||||||
|
method: 'GET',
|
||||||
|
params,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Service;
|
||||||
|
|
@ -0,0 +1,217 @@
|
||||||
|
<template>
|
||||||
|
<a-modal
|
||||||
|
v-model:visible="dialog.visible"
|
||||||
|
:title="dialog.title"
|
||||||
|
:maskClosable="false"
|
||||||
|
width="675px"
|
||||||
|
@ok="dialog.handleOk"
|
||||||
|
class="edit-dialog-container"
|
||||||
|
>
|
||||||
|
<a-form ref="formRef" :model="form.data" layout="vertical">
|
||||||
|
<a-form-item
|
||||||
|
label="名称"
|
||||||
|
name="name"
|
||||||
|
:rules="[
|
||||||
|
{ required: true, message: '请输入名称' },
|
||||||
|
{ max: 64, message: '最多可输入64个字符' },
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<a-input
|
||||||
|
v-model:value="form.data.name"
|
||||||
|
placeholder="请输入名称"
|
||||||
|
:maxlength="64"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item
|
||||||
|
name="relation"
|
||||||
|
label="标识"
|
||||||
|
:rules="[
|
||||||
|
{ required: true, message: '请输入标识' },
|
||||||
|
{ max: 64, message: '最多可输入64个字符' },
|
||||||
|
{ validator: form.rules.checkRelation, trigger: 'change' },
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<a-input
|
||||||
|
v-model:value="form.data.relation"
|
||||||
|
placeholder="请输入标识"
|
||||||
|
:maxlength="64"
|
||||||
|
:disabled="!!form.data.id"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<a-row :gutter="24">
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-item
|
||||||
|
name="objectType"
|
||||||
|
label="关联方"
|
||||||
|
:rules="[{ required: true, message: '请选择关联方' }]"
|
||||||
|
>
|
||||||
|
<a-select
|
||||||
|
v-model:value="form.data.objectType"
|
||||||
|
:disabled="!!form.data.id"
|
||||||
|
>
|
||||||
|
<a-select-option
|
||||||
|
v-for="item in form.objectList"
|
||||||
|
:value="item.id"
|
||||||
|
>{{ item.name }}</a-select-option
|
||||||
|
>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-item
|
||||||
|
name="targetType"
|
||||||
|
label="标识"
|
||||||
|
:rules="[{ required: true, message: '请选择被关联方' }]"
|
||||||
|
>
|
||||||
|
<a-select
|
||||||
|
v-model:value="form.data.targetType"
|
||||||
|
:disabled="!!form.data.id"
|
||||||
|
>
|
||||||
|
<a-select-option
|
||||||
|
v-for="item in form.targetList"
|
||||||
|
:value="item.id"
|
||||||
|
>{{ item.name }}</a-select-option
|
||||||
|
>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-form-item
|
||||||
|
name="description"
|
||||||
|
label="说明"
|
||||||
|
:rules="[{ max: 200, message: '最多可输入200个字符' }]"
|
||||||
|
>
|
||||||
|
<a-textarea
|
||||||
|
v-model:value="form.data.description"
|
||||||
|
placeholder="请输入说明"
|
||||||
|
show-count
|
||||||
|
:maxlength="200"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
<template #footer>
|
||||||
|
<a-button key="back" @click="dialog.visible = false">取消</a-button>
|
||||||
|
<a-button
|
||||||
|
key="submit"
|
||||||
|
type="primary"
|
||||||
|
:loading="form.loading"
|
||||||
|
@click="dialog.handleOk"
|
||||||
|
>确定</a-button
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
</a-modal>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { FormInstance, message } from 'ant-design-vue';
|
||||||
|
import { Rule } from 'ant-design-vue/es/form';
|
||||||
|
|
||||||
|
import {
|
||||||
|
getObjectList_api,
|
||||||
|
addRelation_api,
|
||||||
|
editRelation_api,
|
||||||
|
} from '@/api/system/relationship';
|
||||||
|
|
||||||
|
const emits = defineEmits(['refresh']);
|
||||||
|
// 弹窗相关
|
||||||
|
const dialog = reactive({
|
||||||
|
title: '',
|
||||||
|
visible: false,
|
||||||
|
handleOk: () => {
|
||||||
|
formRef.value?.validate().then(() => {
|
||||||
|
form.submit();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 控制弹窗的打开与关闭
|
||||||
|
changeVisible: (status: boolean, defaultForm: formType) => {
|
||||||
|
dialog.title = defaultForm.id ? '编辑' : '新增';
|
||||||
|
form.data = { ...defaultForm };
|
||||||
|
dialog.visible = status;
|
||||||
|
nextTick(() => {
|
||||||
|
formRef.value?.clearValidate();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// 表单相关
|
||||||
|
const initForm: formType = {
|
||||||
|
name: '',
|
||||||
|
relation: '',
|
||||||
|
objectType: '',
|
||||||
|
targetType: '',
|
||||||
|
description: '',
|
||||||
|
};
|
||||||
|
const formRef = ref<FormInstance>();
|
||||||
|
const form = reactive({
|
||||||
|
loading: false,
|
||||||
|
data: {} as formType,
|
||||||
|
rules: {
|
||||||
|
checkRelation: (_rule: Rule, value: string): any => {
|
||||||
|
if (!value) return '';
|
||||||
|
const reg = new RegExp('^[0-9a-zA-Z_\\\\-]+$');
|
||||||
|
if (reg.test(value)) return Promise.resolve();
|
||||||
|
else
|
||||||
|
return Promise.reject(
|
||||||
|
'标识只能由数字、字母、下划线、中划线组成',
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
objectList: [] as any[],
|
||||||
|
targetList: [] as any[],
|
||||||
|
|
||||||
|
getObjectList: () => {
|
||||||
|
getObjectList_api().then((resp: any) => {
|
||||||
|
form.objectList = resp.result;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
submit: () => {
|
||||||
|
formRef.value?.validate().then(() => {
|
||||||
|
const params = {
|
||||||
|
...form.data,
|
||||||
|
objectTypeName: form.objectList.find(
|
||||||
|
(item) => item.id === form.data.objectType,
|
||||||
|
).name,
|
||||||
|
targetTypeName: form.targetList.find(
|
||||||
|
(item) => item.id === form.data.targetType,
|
||||||
|
).name,
|
||||||
|
};
|
||||||
|
const api =
|
||||||
|
dialog.title === '编辑'
|
||||||
|
? editRelation_api
|
||||||
|
: addRelation_api;
|
||||||
|
api(params).then((resp: any) => {
|
||||||
|
if (resp.status === 200) {
|
||||||
|
message.success('操作成功');
|
||||||
|
emits('refresh');
|
||||||
|
dialog.visible = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
form.getObjectList();
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => form.data.objectType,
|
||||||
|
(n) => {
|
||||||
|
form.targetList = n === 'device' ? [{ id: 'user', name: '用户' }] : [];
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
// 将打开弹窗的操作暴露给父组件
|
||||||
|
defineExpose({
|
||||||
|
openDialog: dialog.changeVisible,
|
||||||
|
});
|
||||||
|
|
||||||
|
type formType = {
|
||||||
|
name: string;
|
||||||
|
relation: string;
|
||||||
|
objectType: string;
|
||||||
|
targetType: string;
|
||||||
|
description: string;
|
||||||
|
id?: string;
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
|
|
@ -0,0 +1,183 @@
|
||||||
|
<template>
|
||||||
|
<div class="relationship-container">
|
||||||
|
<Search :columns="query.columns" @search="query.search" />
|
||||||
|
|
||||||
|
<JTable
|
||||||
|
ref="tableRef"
|
||||||
|
:columns="table.columns"
|
||||||
|
:request="getRelationshipList_api"
|
||||||
|
model="TABLE"
|
||||||
|
:params="query.params"
|
||||||
|
:defaultParams="{ sorts: [{ name: 'createTime', order: 'desc' }] }"
|
||||||
|
>
|
||||||
|
<template #headerTitle>
|
||||||
|
<a-button
|
||||||
|
type="primary"
|
||||||
|
@click="table.openDialog(undefined)"
|
||||||
|
style="margin-right: 10px"
|
||||||
|
><plus-outlined />新增</a-button
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
<template #action="slotProps">
|
||||||
|
<a-space :size="16">
|
||||||
|
<a-tooltip>
|
||||||
|
<template #title>编辑</template>
|
||||||
|
<a-button
|
||||||
|
style="padding: 0"
|
||||||
|
type="link"
|
||||||
|
@click="table.openDialog(slotProps)"
|
||||||
|
>
|
||||||
|
<edit-outlined />
|
||||||
|
</a-button>
|
||||||
|
</a-tooltip>
|
||||||
|
<a-popconfirm
|
||||||
|
title="确认删除"
|
||||||
|
ok-text="确定"
|
||||||
|
cancel-text="取消"
|
||||||
|
@confirm="table.clickDel(slotProps)"
|
||||||
|
>
|
||||||
|
<a-tooltip>
|
||||||
|
<template #title>删除</template>
|
||||||
|
<a-button style="padding: 0" type="link">
|
||||||
|
<delete-outlined />
|
||||||
|
</a-button>
|
||||||
|
</a-tooltip>
|
||||||
|
</a-popconfirm>
|
||||||
|
</a-space>
|
||||||
|
</template>
|
||||||
|
</JTable>
|
||||||
|
|
||||||
|
<EditDialog ref="editDialogRef" @refresh="table.refresh" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts" name="Relationship">
|
||||||
|
import { getRelationshipList_api, delRelation_api } from '@/api/system/relationship';
|
||||||
|
import { message } from 'ant-design-vue';
|
||||||
|
import EditDialog from './components/EditDialog.vue';
|
||||||
|
import {
|
||||||
|
EditOutlined,
|
||||||
|
DeleteOutlined,
|
||||||
|
PlusOutlined,
|
||||||
|
} from '@ant-design/icons-vue';
|
||||||
|
const query = {
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
title: '名称',
|
||||||
|
dataIndex: 'name',
|
||||||
|
key: 'name',
|
||||||
|
ellipsis: true,
|
||||||
|
fixed: 'left',
|
||||||
|
search: {
|
||||||
|
type: 'string',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '关联方',
|
||||||
|
dataIndex: 'objectTypeName',
|
||||||
|
key: 'objectTypeName',
|
||||||
|
ellipsis: true,
|
||||||
|
fixed: 'left',
|
||||||
|
search: {
|
||||||
|
type: 'select',
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
label: '启用',
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '禁用',
|
||||||
|
value: 0,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '被关联方',
|
||||||
|
dataIndex: 'targetType',
|
||||||
|
key: 'targetType',
|
||||||
|
ellipsis: true,
|
||||||
|
fixed: 'left',
|
||||||
|
search: {
|
||||||
|
type: 'select',
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
label: '用户',
|
||||||
|
value: 'user',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '说明',
|
||||||
|
dataIndex: 'description',
|
||||||
|
key: 'description',
|
||||||
|
ellipsis: true,
|
||||||
|
fixed: 'left',
|
||||||
|
search: {
|
||||||
|
type: 'string',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
params: {},
|
||||||
|
search: (params: object) => {
|
||||||
|
query.params = params;
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const editDialogRef = ref(); // 新增弹窗实例
|
||||||
|
const tableRef = ref<Record<string, any>>({}); // 表格实例
|
||||||
|
const table = {
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
title: '名称',
|
||||||
|
dataIndex: 'name',
|
||||||
|
key: 'name',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '关联方',
|
||||||
|
dataIndex: 'objectTypeName',
|
||||||
|
key: 'objectTypeName',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '被关联方',
|
||||||
|
dataIndex: 'targetTypeName',
|
||||||
|
key: 'targetTypeName',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '说明',
|
||||||
|
dataIndex: 'description',
|
||||||
|
key: 'description',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
dataIndex: 'action',
|
||||||
|
key: 'action',
|
||||||
|
scopedSlots: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// 打开编辑弹窗
|
||||||
|
openDialog: (row: object | undefined = {}) => {
|
||||||
|
editDialogRef.value.openDialog(true, row)
|
||||||
|
},
|
||||||
|
// 删除
|
||||||
|
clickDel: (row: any) => {
|
||||||
|
delRelation_api(row.id).then((resp: any) => {
|
||||||
|
if (resp.status === 200) {
|
||||||
|
tableRef.value?.reload();
|
||||||
|
message.success('操作成功!');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 刷新列表
|
||||||
|
refresh: () => {
|
||||||
|
tableRef.value.reload();
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.relationship-container {
|
||||||
|
padding:24px ;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue