From 6f0cd54fd83b944aab2e07ac7e14f3a8896e5386 Mon Sep 17 00:00:00 2001
From: chenos <chenlinxh@gmail.com>
Date: Tue, 22 Dec 2020 19:08:41 +0800
Subject: [PATCH] feat: add linkTo field component

---
 .../app/src/components/views/Field/index.tsx  | 49 ++++++++++++++++++-
 .../app/src/components/views/Field/style.less |  8 +++
 2 files changed, 56 insertions(+), 1 deletion(-)
 create mode 100644 packages/app/src/components/views/Field/style.less

diff --git a/packages/app/src/components/views/Field/index.tsx b/packages/app/src/components/views/Field/index.tsx
index bca3d6904..e91c6c599 100644
--- a/packages/app/src/components/views/Field/index.tsx
+++ b/packages/app/src/components/views/Field/index.tsx
@@ -1,11 +1,13 @@
 
 import React, { useEffect, useState } from 'react';
 import moment from 'moment';
-import { Tag, Popover, Table } from 'antd';
+import { Tag, Popover, Table, Drawer } from 'antd';
 import Icon from '@/components/icons';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
 import { fields2columns } from '../SortableTable';
+import ViewFactory from '..';
+import './style.less';
 
 const InterfaceTypes = new Map<string, any>();
 
@@ -177,6 +179,50 @@ export function SubTableField(props: any) {
   );
 }
 
+export function LinkToField(props: any) {
+  const { schema, value } = props;
+  if (!value) {
+    return null;
+  }
+  const values = Array.isArray(value) ? value : [value];
+  return (
+    <div className={'link-to-field'}>
+      {values.map(item => <LinkToFieldLink data={item} schema={schema}/>)}
+    </div>
+  );
+}
+
+export function LinkToFieldLink(props) {
+  const { data, schema, schema: { title, labelField } } = props;
+  const [visible, setVisible] = useState(false);
+  // console.log(schema);
+  return (
+    <span className={'link-to-field-tag'}>
+      <a onClick={(e) => {
+        e.stopPropagation();
+        setVisible(true);
+      }}>{data[labelField]}</a>
+      <Drawer 
+        // @ts-ignore
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+        bodyStyle={{padding: 0}} 
+        width={'40%'}
+        title={`查看${title}详情`}
+        visible={visible}
+        onClose={() => setVisible(false)}
+      >
+        <ViewFactory
+          resourceName={schema.target}
+          viewName={'details'}
+          resourceKey={data.id}
+        />
+      </Drawer>
+    </span>
+  );
+}
+
 registerFieldComponents({
   string: StringField,
   textarea: TextareaField,
@@ -194,6 +240,7 @@ registerFieldComponents({
   createdBy: RealtionField,
   updatedBy: RealtionField,
   subTable: SubTableField,
+  linkTo: LinkToField,
 });
 
 export default function Field(props: any) {
diff --git a/packages/app/src/components/views/Field/style.less b/packages/app/src/components/views/Field/style.less
new file mode 100644
index 000000000..1a69d3d92
--- /dev/null
+++ b/packages/app/src/components/views/Field/style.less
@@ -0,0 +1,8 @@
+.link-to-field-tag {
+  &::after {
+    content: ',';
+  }
+  &:last-child::after {
+    content: '';
+  }
+}
\ No newline at end of file