更新代码

zhoubichuan · Jan 6, 2024 · 2bfe54a · 2bfe54a
1 parent 292b3a6
commit 2bfe54a
Show file tree

Hide file tree

Showing 7 changed files with 112 additions and 27 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -1,13 +1,13 @@
 #设置构建的基础镜像
 FROM node:16.15.0
+# 设置工作目录
 RUN mkdir -p /project/
 WORKDIR /project/
 COPY package*.json /project/
-#设置npm下载依赖来源为淘宝源
 RUN npm install -g cnpm --registry=https://registry.npm.taobao.org
 RUN rm -rf node_modules && cd /project
 #安装项目依赖
-RUN npm install
+RUN cnpm install
 COPY . /project/
-#在启动镜像时执行启动项目的命令
 CMD npm run dev
+EXPOSE 8000
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -0,0 +1,22 @@
+version: '3' # compose编排版本为3
+services:
+  # 服务
+  antdpro-demo:
+    # 服务名称
+    hostname: antdpro-demo # 容器主机名
+    build:
+      # 创建容器过程
+      context: ./ # 所需素材都在该目录（仓库）下
+      dockerfile: Dockerfile # 指定Dockerfile文件
+    ports:
+      # 提供端口
+      - 8000:8000 # 对外提供（暴露）的端口
+    networks:
+      # 指定网络
+      - dockerbetweennetwork
+    # volumes:
+    #   # 数据卷
+    #   - ./ # 将宿主机该仓库内文件与nginx首页文件相关联（容器）
+networks:
+  # 对外公开需要声明networks群集名称
+  test:
diff --git a/src/pages/list/list/CreatePart.tsx b/src/pages/list/list/CreatePart.tsx
@@ -47,7 +47,7 @@ const CreatePart: React.FC<CreatePartProps> = (props) => {
     <ModalForm
       {...formItemLayout}
       title="新增"
-      width="800px"
+      width="90%"
       layout={'horizontal'}
       visible={createModalVisible}
       onVisibleChange={onVisibleChange}

diff --git a/src/pages/list/list/SliderPart.tsx b/src/pages/list/list/SliderPart.tsx
@@ -17,10 +17,26 @@ const SliderPart: React.FC<SliderPartProps> = (props) => {
   const descriptions: ProColumns<TableListItem>[] = template
     .filter((item: any) => JSON.stringify(item.view) !== '{}')
     .map((item: any) => {
-      const { width, view, ellipsis, ...rest } = item;
+      const { width, view, ellipsis, dataIndex, title, ...rest } = item;
+      if (['date'].includes(view.type)) {
+        return {
+          title,
+          span: view.single ? 2 : 1,
+          key: dataIndex,
+          valueType: view.type || 'text',
+          dataIndex,
+          ellipsis: true,
+        };
+      }
       return {
-        ...rest,
-        render: (text: any) => {
+        title,
+        span: view.single ? 2 : 1,
+        key: dataIndex,
+        valueType: view.type || 'text',
+        dataIndex,
+        ellipsis: true,
+        render: (n: any, entry: any) => {
+          let text = entry[dataIndex];
           if (item.view && item.view.type === 'image') {
             if (Array.isArray(text)) {
               return text.map((i: any) => {
@@ -52,15 +68,42 @@ const SliderPart: React.FC<SliderPartProps> = (props) => {
               return <video height={300} src={text} />;
             }
           }
-          if (item.view && item.view.type === 'time') {
-            return <div style={{ whiteSpace: 'pre-line' }}>{moment(text).fromNow()}</div>;
-          }
           return (
             <div style={{ whiteSpace: 'pre-line' }}>
               {typeof text === 'string' ? text : JSON.stringify(text)}
             </div>
           );
         },
+        // render: (text: any) => {
+        //   debugger;
+        //   if (item.view && item.view.type === 'image') {
+        //     if (Array.isArray(text)) {
+        //       return text.map((i: any) => {
+        //         if (i.includes('.mp4')) {
+        //           return (
+        //             <video
+        //               controls
+        //               style={{ objectFit: 'contain', maxHeight: '300px', display: 'inline-block' }}
+        //             >
+        //               <source src={i} type="video/mp4" />
+        //             </video>
+        //           );
+        //         } else {
+        //           return <Image style={{ objectFit: 'contain', maxHeight: '300px' }} src={i} />;
+        //         }
+        //       });
+        //     } else {
+        //       if (text.includes('.mp4')) {
+        //         return <video style={{ objectFit: 'contain', maxHeight: '300px' }} src={text} />;
+        //       } else {
+        //         return <Image style={{ objectFit: 'contain', maxHeight: '300px' }} src={text} />;
+        //       }
+        //     }
+        //   }
+        //   if (item.view && item.view.type === 'time') {
+        //     return <div style={{ whiteSpace: 'pre-line' }}>{moment(text).fromNow()}</div>;
+        //   }
+        // },
       };
     });
 
@@ -75,18 +118,20 @@ const SliderPart: React.FC<SliderPartProps> = (props) => {
       onClose={onClose}
     >
       {Array.isArray(data) &&
-        data.map((d) => (
-          <ProDescriptions<TableListItem>
-            column={2}
-            request={async () => ({
-              data: d || {},
-            })}
-            params={{
-              id: d?.id,
-            }}
-            columns={descriptions as ProDescriptionsItemProps<TableListItem>[]}
-          />
-        ))}
+        data.map((d) => {
+          return (
+            <ProDescriptions<TableListItem>
+              column={d.single ? 1 : 2}
+              request={async () => ({
+                data: d || {},
+              })}
+              params={{
+                id: d?.id,
+              }}
+              columns={descriptions as ProDescriptionsItemProps<TableListItem>[]}
+            />
+          );
+        })}
     </Drawer>
   );
 };

diff --git a/src/pages/list/list/TablePart.tsx b/src/pages/list/list/TablePart.tsx
@@ -22,6 +22,7 @@ export type TablePartProps = {
 const TablePart: React.FC<TablePartProps> = forwardRef((props, ref) => {
   const actionRef = useRef<ActionType>();
   const [selectedRowsState, setSelectedRows] = useState<TableListItem[]>([]);
+  const [isFullScreen, setFullScreen] = useState<Boolean>(false);
   const { template = [], onViewDetail, onEdit, onCreate, onManyCreate, options = [] } = props;
   const XLSX = require('xlsx');
   const handleExport = async (fields: TableListItem[]) => {
@@ -144,7 +145,7 @@ const TablePart: React.FC<TablePartProps> = forwardRef((props, ref) => {
           render: (dom: any) => {
             if (!item.hideInTable && item.table && item.table.type === 'image') {
               if (Array.isArray(dom)) {
-                return dom.slice(0, 2).map((i: any, key) => {
+                return dom.slice(0, 1).map((i: any, key) => {
                   if (i.includes('.mp4')) {
                     return (
                       <video
@@ -250,12 +251,12 @@ const TablePart: React.FC<TablePartProps> = forwardRef((props, ref) => {
   }));
   return (
     <ProTable<TableListItem, TableListPagination>
-      className={classNames('table-part', styles['table-part'])}
+      className={classNames(styles['table-part'], { [styles['full-screen']]: isFullScreen })}
       sticky
       actionRef={actionRef}
       ghost={true}
       rowKey="id"
-      scroll={{ x: 800, y: document.body.clientHeight / 2 }}
+      scroll={{ x: 800, y: document.body.clientHeight - (isFullScreen ? 200 : 460) }}
       search={{
         labelWidth: 80,
         optionRender: (searchConfig, formProps, dom) => {
@@ -372,7 +373,15 @@ const TablePart: React.FC<TablePartProps> = forwardRef((props, ref) => {
       }}
       options={{
         density: false,
-        fullScreen: true,
+        fullScreen: function () {
+          const value = !isFullScreen;
+          setFullScreen(value);
+          if (value) {
+            document.querySelector('body')?.requestFullscreen();
+          } else {
+            document?.exitFullscreen();
+          }
+        },
         reload: true,
         setting: true,
       }}

diff --git a/src/pages/list/list/UpdatePart.tsx b/src/pages/list/list/UpdatePart.tsx
@@ -48,7 +48,7 @@ const UpdatePart: React.FC<UpdatePartProps> = (props) => {
     <ModalForm
       {...formItemLayout}
       title="编辑"
-      width="800px"
+      width="90%"
       layout={'horizontal'}
       visible={createModalVisible}
       onVisibleChange={onVisibleChange}

diff --git a/src/pages/list/list/index.less b/src/pages/list/list/index.less
@@ -78,3 +78,12 @@
   max-height: calc(100vh - 300px);
   overflow: hidden auto;
 }
+.full-screen{
+  position: fixed;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  background-color: #fff;
+  z-index: 1000!important;
+}