From 37c8110ddcc17602f050f8d4ea9cdf24ca05c380 Mon Sep 17 00:00:00 2001
From: easy <1358086367@qq.com>
Date: Wed, 8 Feb 2023 18:12:27 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=85=B3=E7=B3=BB=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/system/relationship.ts                |  13 ++
 src/views/system/Basis/service.ts             |  18 ++
 .../Relationship/components/EditDialog.vue    | 217 ++++++++++++++++++
 src/views/system/Relationship/index.vue       | 183 +++++++++++++++
 4 files changed, 431 insertions(+)
 create mode 100644 src/api/system/relationship.ts
 create mode 100644 src/views/system/Basis/service.ts
 create mode 100644 src/views/system/Relationship/components/EditDialog.vue
 create mode 100644 src/views/system/Relationship/index.vue

diff --git a/src/api/system/relationship.ts b/src/api/system/relationship.ts
new file mode 100644
index 00000000..f7aa1ab7
--- /dev/null
+++ b/src/api/system/relationship.ts
@@ -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}`);
\ No newline at end of file
diff --git a/src/views/system/Basis/service.ts b/src/views/system/Basis/service.ts
new file mode 100644
index 00000000..968279a8
--- /dev/null
+++ b/src/views/system/Basis/service.ts
@@ -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;
diff --git a/src/views/system/Relationship/components/EditDialog.vue b/src/views/system/Relationship/components/EditDialog.vue
new file mode 100644
index 00000000..14469365
--- /dev/null
+++ b/src/views/system/Relationship/components/EditDialog.vue
@@ -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>
diff --git a/src/views/system/Relationship/index.vue b/src/views/system/Relationship/index.vue
new file mode 100644
index 00000000..e50f04c7
--- /dev/null
+++ b/src/views/system/Relationship/index.vue
@@ -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>