upp

houtai/src/pages/A2News/NewsAdd/index.tsx

@@ -22,6 +22,7 @@ import {
 import ImageLazy from "@/components/ImageLazy";
 import classNames from "classnames";
 import store from "@/store";
+import { ImgListType } from "@/types";
 
 type Props = {
   id: number;
@@ -31,11 +32,7 @@ type Props = {
   addTableFu: () => void;
 };
 
-type ImgListType = {
-  fileName: string;
-  filePath: string;
-  id: number;
-};
+
 
 function NewsAdd({
   id,

houtai/src/pages/A2News/NewsTable/index.module.scss

@@ -7,7 +7,7 @@
 
   :global {
     .ant-table-body {
-      height: 650px;
+      height: 615px;
       overflow-y: auto !important;
       overflow-y: overlay !important;
 

houtai/src/pages/A2News/NewsTable/index.tsx

@@ -77,7 +77,7 @@ function NewsTable({ tableType, editInfoFu }: Porps) {
         },
       },
       {
-        title: "编辑时间",
+        title: "最近编辑时间",
         dataIndex: "time1",
       },
       {
@@ -188,7 +188,7 @@ function NewsTable({ tableType, editInfoFu }: Porps) {
     <div className={styles.NewsTable}>
       <DndProvider backend={HTML5Backend}>
         <Table
-          scroll={{ y: 650 }}
+          scroll={{ y: 615 }}
           dataSource={results}
           columns={columns}
           rowKey="id"

houtai/src/pages/A4Venue/VenueEdit/index.module.scss

@@ -0,0 +1,139 @@
+.VenueEdit {
+  position: absolute;
+  z-index: 20;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  border-radius: 10px;
+
+  :global {
+    .formBox {
+      margin-top: 10px;
+      width: 1200px;
+      height: calc(100% - 70px);
+      padding-right: 400px;
+      overflow-y: auto;
+
+      // 多张附件图片上传
+      .myformBox {
+        display: flex;
+        margin-bottom: 10px;
+        margin-top: 40px;
+
+        .ant-btn-default {
+          width: 100px;
+        }
+
+        .label {
+          width: 100px;
+          text-align: right;
+
+          &>span {
+            position: relative;
+            top: 2px;
+            color: #ff4d4f;
+          }
+        }
+
+        .fileBoxRow_r {
+          position: relative;
+
+          .fileBoxRow_up {
+            color: #a6a6a6;
+            border-radius: 3px;
+            cursor: pointer;
+            font-size: 30px;
+            width: 100px;
+            height: 100px;
+            border: 1px dashed #797979;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+
+          }
+
+          .fileBoxRow_r_img {
+            width: 100px;
+            height: 100px;
+            position: relative;
+
+            .clearCover {
+              cursor: pointer;
+              z-index: 10;
+              position: absolute;
+              width: 50px;
+              height: 50px;
+              top: 50%;
+              transform: translateY(-50%);
+              right: -50px;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              font-size: 24px;
+            }
+          }
+
+          .fileBoxRow_r_tit {
+            height: 46px;
+            margin-top: 5px;
+            font-size: 14px;
+            color: rgb(126, 124, 124);
+
+
+          }
+
+          .upImgBox {
+            display: flex;
+            flex-wrap: wrap;
+            max-width: 700px;
+
+            &>div {
+              margin: 0 15px 15px 0;
+            }
+
+            .fileBoxRow_r_img {
+              position: relative;
+
+              .clearCover {
+                right: -10px;
+                top: -10px;
+                transform: translate(0, 0);
+                background-color: rgba(0, 0, 0, .8);
+                width: 20px;
+                height: 20px;
+                border-radius: 50%;
+                font-size: 16px;
+                color: #fff;
+              }
+            }
+          }
+
+        }
+
+      }
+
+      .noUpThumb {
+        position: relative;
+        overflow: hidden;
+        opacity: 0;
+        transition: top .2s;
+        color: #ff4d4f;
+        top: -10px;
+      }
+
+      .noUpThumb2 {
+        position: relative;
+        padding-left: 100px;
+        margin-bottom: 12px;
+      }
+
+      .noUpThumbAc {
+        top: 0;
+        opacity: 1;
+      }
+    }
+  }
+}

houtai/src/pages/A4Venue/VenueEdit/index.tsx

@@ -0,0 +1,303 @@
+import { venueUploadAPI } from "@/store/action/A4Venue";
+import { ImgListType } from "@/types";
+import { domShowFu, progressDomFu } from "@/utils/domShow";
+import { MessageFu } from "@/utils/message";
+import { Button, Form, Input, Popconfirm } from "antd";
+import { PlusOutlined, CloseOutlined } from "@ant-design/icons";
+import TextArea from "antd/es/input/TextArea";
+import classNames from "classnames";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import styles from "./index.module.scss";
+import ImageLazy from "@/components/ImageLazy";
+
+type Props = {
+  id: number;
+  closePageFu: () => void;
+  editTableFu: () => void;
+};
+
+function VenueEdit({ id, closePageFu, editTableFu }: Props) {
+  // 设置表单初始数据（区分编辑和新增）
+  const FormBoxRef = useRef<any>({});
+
+  // 文件的dirCode码
+  const [dirCode, setDirCode] = useState("");
+
+  const myInput = useRef<HTMLInputElement>(null);
+
+  // 通过id获取详情，回显数据
+  const getInfoFu = useCallback((id: number) => {
+    // setDirCode(res.data.entity.dirCode);
+  }, []);
+
+  useEffect(() => {
+    if (id) getInfoFu(id);
+    else {
+      setDirCode(Date.now() + "");
+    }
+  }, [getInfoFu, id]);
+
+  // 多张图片附件
+  const [imgList, setImgList] = useState<ImgListType[]>([]);
+
+  // 上传附件的处理函数
+  const handeUpPhoto = useCallback(
+    async (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (e.target.files) {
+        // 拿到files信息
+        const filesInfo = e.target.files[0];
+
+        let anType = ["image/jpeg", "image/png"];
+        let anTit1 = "只支持png、jpg和jpeg格式!";
+        let anTit2 = "最大支持20M!";
+        let anSize = 20 * 1024 * 1024;
+
+        // 校验格式
+        if (!anType.includes(filesInfo.type)) {
+          e.target.value = "";
+          return MessageFu.warning(anTit1);
+        }
+
+        // 校验大小
+        if (filesInfo.size > anSize) {
+          e.target.value = "";
+          return MessageFu.warning(anTit2);
+        }
+        // 创建FormData对象
+        const fd = new FormData();
+        // 把files添加进FormData对象（‘photo’为后端需要的字段）
+        fd.append("type", "img");
+        fd.append("dirCode", dirCode);
+        fd.append("file", filesInfo);
+
+        e.target.value = "";
+
+        const res: any = await venueUploadAPI(fd);
+
+        if (res.code === 0) {
+          MessageFu.success("上传成功!");
+          setImgList([...imgList, res.data]);
+        }
+        domShowFu("#UpAsyncLoding", false);
+        progressDomFu("0%");
+      }
+    },
+    [dirCode, imgList]
+  );
+
+  // 附件图片的拖动
+  const [dragImg, setDragImg] = useState<any>(null);
+
+  const handleDragOver = useCallback(
+    (e: React.DragEvent<HTMLDivElement>, item: ImgListType) => {
+      e.dataTransfer.dropEffect = "move";
+    },
+    []
+  );
+
+  const handleDragEnter = useCallback(
+    (e: React.DragEvent<HTMLDivElement>, item: ImgListType) => {
+      e.dataTransfer.effectAllowed = "move";
+      if (item === dragImg) return;
+      const newItems = [...imgList]; //拷贝一份数据进行交换操作。
+      const src = newItems.indexOf(dragImg); //获取数组下标
+      const dst = newItems.indexOf(item);
+      newItems.splice(dst, 0, ...newItems.splice(src, 1)); //交换位置
+      setImgList(newItems);
+    },
+    [dragImg, imgList]
+  );
+
+  // 删除某一张图片
+  const delImgListFu = useCallback(
+    (id: number) => {
+      const newItems = imgList.filter((v) => v.id !== id);
+      setImgList(newItems);
+    },
+    [imgList]
+  );
+
+  const [typeOk, setTypeOk] = useState(false);
+
+  // 附件信息的校验
+  const fileCheckFu = useMemo(() => {
+    let flag = false;
+    if (imgList.length === 0) flag = true;
+    return flag;
+  }, [imgList.length]);
+
+  // 没有通过校验
+  const onFinishFailed = useCallback(() => {
+    setTypeOk(true);
+    // return MessageFu.warning("有表单不符号规则!");
+  }, []);
+
+  // 通过校验点击确定
+  const onFinish = useCallback(
+    (values: any) => {
+      setTypeOk(true);
+
+      if (fileCheckFu) return;
+
+      const obj = {
+        ...values,
+        id: id > 0 ? id : null,
+        dirCode,
+        fileIds: imgList.map((v) => v.id).join(","),
+      };
+      console.log(obj);
+      editTableFu();
+      closePageFu();
+    },
+    [closePageFu, dirCode, editTableFu, fileCheckFu, id, imgList]
+  );
+
+  return (
+    <div className={styles.VenueEdit}>
+      <div className="pageTitle">编辑场馆</div>
+      <div className="formBox mySorrl">
+        <Form
+          ref={FormBoxRef}
+          name="basic"
+          labelCol={{ span: 3 }}
+          onFinish={onFinish}
+          onFinishFailed={onFinishFailed}
+          autoComplete="off"
+        >
+          <Form.Item
+            label="名称"
+            name="name"
+            rules={[{ required: true, message: "请输入标题!" }]}
+          >
+            <Input disabled />
+          </Form.Item>
+
+          <Form.Item
+            label="位置"
+            name="myLoc"
+            rules={[{ required: true, message: "请输入位置!" }]}
+            getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
+          >
+            <Input maxLength={8} showCount placeholder="请输入内容" />
+          </Form.Item>
+
+          <Form.Item
+            label="简介"
+            name="description"
+            // getValueFromEvent={(e) => e.target.value.trim()}
+          >
+            <TextArea
+              rows={5}
+              placeholder="请输入内容"
+              showCount
+              maxLength={200}
+            />
+          </Form.Item>
+
+          {/* 上传附件图片 */}
+          <div className="myformBox">
+            <input
+              id="upInput2"
+              type="file"
+              accept=".png,.jpg,.jpeg"
+              ref={myInput}
+              onChange={(e) => handeUpPhoto(e)}
+            />
+
+            <div className="label">
+              <span>*</span> 图片：
+            </div>
+            <>
+              <div className="fileBoxRow_r">
+                <div className="upImgBox">
+                  <div
+                    hidden={imgList.length >= 9}
+                    className="fileBoxRow_up"
+                    onClick={() => myInput.current?.click()}
+                  >
+                    <PlusOutlined />
+                  </div>
+                  {imgList.map((v) => (
+                    <div
+                      className="fileBoxRow_r_img"
+                      key={v.id}
+                      draggable="true"
+                      onDragStart={() => setDragImg(v)}
+                      onDragOver={(e) => handleDragOver(e, v)}
+                      onDragEnter={(e) => handleDragEnter(e, v)}
+                      onDragEnd={() => setDragImg(null)}
+                    >
+                      {v.filePath ? (
+                        <ImageLazy
+                          noLook={dragImg ? true : false}
+                          width={100}
+                          height={100}
+                          src={v.filePath}
+                        />
+                      ) : null}
+
+                      <Popconfirm
+                        title="删除后无法恢复，是否删除?"
+                        okText="删除"
+                        cancelText="取消"
+                        onConfirm={() => delImgListFu(v.id)}
+                      >
+                        <div className="clearCover">
+                          <CloseOutlined />
+                        </div>
+                      </Popconfirm>
+                    </div>
+                  ))}
+                </div>
+                <div className="fileTit">
+                  {imgList.length >= 2 ? (
+                    <>
+                      按住鼠标可拖动图片调整顺序。
+                      <br />
+                    </>
+                  ) : null}
+                  支持png、jpg和jpeg的图片格式；最大支持20M；最多支持9张。
+                </div>
+              </div>
+            </>
+          </div>
+          <div
+            className={classNames(
+              "noUpThumb noUpThumb2",
+              fileCheckFu && typeOk ? "noUpThumbAc" : ""
+            )}
+          >
+            请上传图片!
+          </div>
+
+          {/* 确定和取消按钮 */}
+          <br />
+          <Form.Item wrapperCol={{ offset: 10, span: 16 }}>
+            <Button type="primary" htmlType="submit">
+              提交
+            </Button>
+            &emsp;
+            <Popconfirm
+              title="放弃编辑后，信息将不会保存!"
+              okText="放弃"
+              cancelText="取消"
+              onConfirm={closePageFu}
+            >
+              <Button>取消</Button>
+            </Popconfirm>
+          </Form.Item>
+        </Form>
+      </div>
+    </div>
+  );
+}
+
+const MemoVenueEdit = React.memo(VenueEdit);
+
+export default MemoVenueEdit;

houtai/src/pages/A4Venue/VenueTable/index.module.scss

@@ -0,0 +1,49 @@
+.VenueTable {
+  border-radius: 10px;
+  overflow: hidden;
+  margin-top: 20px;
+  height: calc(100% - 130px);
+  background-color: #fff;
+
+  :global {
+    .ant-table-body {
+      height: 615px;
+      overflow-y: auto !important;
+      overflow-y: overlay !important;
+
+      .ant-table-row {
+        .ant-table-cell {
+          padding: 8px;
+        }
+      }
+    }
+
+    .incoTitle {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .hotTitleInco1 {
+        cursor: pointer;
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        background-color: #696969;
+        margin-left: 8px;
+        text-align: center;
+        line-height: 16px;
+        color: #fff;
+        font-size: 12px;
+      }
+    }
+
+    // 表头拖拽样式
+    .drop-over-downward td {
+      border-bottom: 2px dashed var(--themeColor) !important;
+    }
+
+    .drop-over-upward td {
+      border-top: 2px dashed var(--themeColor) !important;
+    }
+  }
+}

houtai/src/pages/A4Venue/VenueTable/index.tsx

@@ -0,0 +1,201 @@
+import ImageLazy from "@/components/ImageLazy";
+import { RootState } from "@/store";
+import { VenueTableType } from "@/types";
+import { Button, Table, Tooltip } from "antd";
+import React, { useCallback, useMemo, useRef } from "react";
+import { useSelector } from "react-redux";
+import { ExclamationOutlined } from "@ant-design/icons";
+import styles from "./index.module.scss";
+
+// 表格拖动排序-----------------
+import { DndProvider, useDrag, useDrop } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+
+type Porps = {
+  editInfoFu: (id: number) => void;
+};
+
+function VenueTable({ editInfoFu }: Porps) {
+  // 有关表格数据
+  const results = useSelector(
+    (state: RootState) => state.venueReducer.tableInfo
+  );
+
+  const columns = useMemo(() => {
+    return [
+      {
+        title: () => (
+          <div className="incoTitle">
+            序号
+            {results.length >= 2 ? (
+              <Tooltip title="按住鼠标可拖动表格调整顺序">
+                <div className="hotTitleInco1">
+                  <ExclamationOutlined />
+                </div>
+              </Tooltip>
+            ) : null}
+          </div>
+        ),
+        width: 100,
+        render: (text: any, item: any, index: number) => index + 1,
+      },
+      {
+        title: "名称",
+        dataIndex: "name",
+      },
+      {
+        title: "位置",
+        render: (item: VenueTableType) => (item.loc ? item.loc : "（空）"),
+      },
+      {
+        title: "简介",
+        render: (item: VenueTableType) =>
+          item.description ? (
+            item.description.length >= 25 ? (
+              <span style={{ cursor: "pointer" }} title={item.description}>
+                {item.description.substring(0, 25) + "..."}
+              </span>
+            ) : (
+              item.description
+            )
+          ) : (
+            "（空）"
+          ),
+      },
+      {
+        title: "图片",
+        render: (item: VenueTableType) => (
+          <div className="tableImgAuto">
+            <ImageLazy width={60} height={60} src={item.img} />
+          </div>
+        ),
+      },
+
+      {
+        title: "最近编辑时间",
+        dataIndex: "time1",
+      },
+
+      {
+        title: "操作",
+        render: (item: VenueTableType) => (
+          <>
+            <Button
+              size="small"
+              type="text"
+              onClick={() => editInfoFu(item.id)}
+            >
+              编辑
+            </Button>
+          </>
+        ),
+      },
+    ];
+  }, [editInfoFu, results.length]);
+
+  // 表格拖动排序-----------------
+  interface DraggableBodyRowProps
+    extends React.HTMLAttributes<HTMLTableRowElement> {
+    index: number;
+    moveRow: (dragIndex: number, hoverIndex: number) => void;
+  }
+
+  const type = "DraggableBodyRow";
+
+  const DraggableBodyRow = useCallback(
+    ({
+      index,
+      moveRow,
+      className,
+      style,
+      ...restProps
+    }: DraggableBodyRowProps) => {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const ref = useRef<HTMLTableRowElement>(null);
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const [{ isOver, dropClassName }, drop] = useDrop({
+        accept: type,
+        collect: (monitor) => {
+          const { index: dragIndex } = monitor.getItem() || {};
+          if (dragIndex === index) {
+            return {};
+          }
+          return {
+            isOver: monitor.isOver(),
+            dropClassName:
+              dragIndex < index ? " drop-over-downward" : " drop-over-upward",
+          };
+        },
+        drop: (item: { index: number }) => {
+          moveRow(item.index, index);
+        },
+      });
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const [, drag] = useDrag({
+        type,
+        item: { index },
+        collect: (monitor) => ({
+          isDragging: monitor.isDragging(),
+        }),
+      });
+      drop(drag(ref));
+
+      return (
+        <tr
+          ref={ref}
+          className={`${className}${isOver ? dropClassName : ""}`}
+          style={{ cursor: "move", ...style }}
+          {...restProps}
+        />
+      );
+    },
+    []
+  );
+
+  const components = {
+    body: {
+      row: DraggableBodyRow,
+    },
+  };
+
+  const moveRow = useCallback(
+    async (dragIndex: number, hoverIndex: number) => {
+      if (dragIndex === hoverIndex) return;
+      // 交互位置-之前的id
+      const beforeId = results[dragIndex].id;
+      const afterId = results[hoverIndex].id;
+      console.log("发送请求", beforeId, afterId);
+
+      // const res = await wallSortAPI(beforeId, afterId);
+
+      // if (res.code === 0) dispatch(getWallTableListAPI());
+    },
+    [results]
+  );
+
+  return (
+    <div className={styles.VenueTable}>
+      <DndProvider backend={HTML5Backend}>
+        <Table
+          scroll={{ y: 615 }}
+          dataSource={results}
+          columns={columns}
+          rowKey="id"
+          pagination={false}
+          components={components}
+          onRow={(_, index) => {
+            const attr = {
+              index,
+              moveRow,
+            };
+            return attr as React.HTMLAttributes<any>;
+          }}
+        />
+      </DndProvider>
+    </div>
+  );
+}
+
+const MemoVenueTable = React.memo(VenueTable);
+
+export default MemoVenueTable;

houtai/src/pages/A4Venue/index.module.scss

@@ -1,5 +1,20 @@
 .Venue{
+  position: relative;
   :global{
-    
+    .venueTop {
+      background-color: #fff;
+      border-radius: 10px;
+
+      .searchBox {
+        position: relative;
+        padding: 10px 20px 20px;
+        display: flex;
+        align-items: center;
+
+        .row {
+          margin-right: 50px;
+        }
+      }
+    }
   }
 }

houtai/src/pages/A4Venue/index.tsx

@@ -1,12 +1,110 @@
-import React from "react";
+import { Button, DatePicker, Input } from "antd";
+import React, { useCallback, useRef, useState } from "react";
 import styles from "./index.module.scss";
- function Venue() {
-  
+import VenueEdit from "./VenueEdit";
+import VenueTable from "./VenueTable";
+const { RangePicker } = DatePicker;
+
+function Venue() {
+  // 顶部筛选的数据
+  const [tableSelect, setTableSelect] = useState({
+    name: "",
+    startTime: "",
+    endTime: "",
+    pageSize: 50,
+    pageNum: 1,
+  });
+
+  // 名称的输入
+  const nameTime = useRef(-1);
+  const nameChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      clearTimeout(nameTime.current);
+      nameTime.current = window.setTimeout(() => {
+        setTableSelect({
+          ...tableSelect,
+          name: e.target.value,
+          pageNum: 1,
+        });
+      }, 500);
+    },
+    [tableSelect]
+  );
+
+  // 时间选择器改变
+  const timeChange = (date: any, dateString: any) => {
+    let startTime = "";
+    let endTime = "";
+    if (dateString[0] && dateString[1]) {
+      startTime = dateString[0] + " 00:00:00";
+      endTime = dateString[1] + " 23:59:59";
+    }
+    setTableSelect({ ...tableSelect, startTime, endTime, pageNum: 1 });
+  };
+
+  // 点击重置
+  const [inputKey, setInputKey] = useState(1);
+  const resetSelectFu = useCallback(() => {
+    // 把2个输入框和时间选择器清空
+    setInputKey(Date.now());
+    setTableSelect({
+      name: "",
+      startTime: "",
+      endTime: "",
+      pageSize: 50,
+      pageNum: 1,
+    });
+  }, []);
+
+  const addInfoFu = useCallback((id: number) => {
+    setEditId(id);
+  }, []);
+
+  const [editId, setEditId] = useState(0);
+
   return (
     <div className={styles.Venue}>
-      <h1>Venue</h1>
+      <div className="venueTop">
+        <div className="pageTitle">场馆管理</div>
+        <div className="searchBox">
+          <div className="row">
+            <span>名称：</span>
+            <Input
+              key={inputKey}
+              maxLength={20}
+              style={{ width: 200 }}
+              placeholder="请输入关键字"
+              allowClear
+              onChange={(e) => nameChange(e)}
+            />
+          </div>
+          <div className="row">
+            <span>最近编辑日期：</span>
+            <RangePicker
+              style={{ width: 230 }}
+              key={inputKey}
+              onChange={timeChange}
+            />
+          </div>
+          <div className="row">
+            &emsp;&emsp;&emsp;&emsp;
+            <Button onClick={resetSelectFu}>重置</Button>
+          </div>
+        </div>
+      </div>
+
+      {/* 新增和编辑 和 表格主体 （拖动有冲突，所以只能同时渲染一个）*/}
+      {editId ? (
+        <VenueEdit
+          id={editId}
+          closePageFu={() => setEditId(0)}
+          editTableFu={() => console.log("编辑了数据")}
+        />
+      ) : (
+        <VenueTable editInfoFu={(id) => addInfoFu(id)} />
+      )}
     </div>
-  )
+  );
 }
 
 const MemoVenue = React.memo(Venue);

houtai/src/pages/Layout/index.module.scss

@@ -7,7 +7,7 @@
 
     .layoutLeft {
       position: relative;
-      z-index: 15;
+      z-index: 30;
       width: 220px;
       height: 100%;
       box-shadow: 0px 0px 5px 3px;
@@ -92,7 +92,7 @@
         display: flex;
         justify-content: flex-end;
         position: relative;
-        z-index: 11;
+        z-index: 30;
 
         .user {
           margin-right: 40px;

houtai/src/store/action/A2News.ts

@@ -1,7 +1,7 @@
 import { domShowFu, progressDomFu } from "@/utils/domShow";
 import http from "@/utils/http";
 import axios from "axios";
-import store, { AppDispatch } from "..";
+import store from "..";
 
 const CancelToken = axios.CancelToken;
 /**

houtai/src/store/action/A4Venue.ts

@@ -0,0 +1,28 @@
+import { domShowFu, progressDomFu } from "@/utils/domShow";
+import http from "@/utils/http";
+import axios from "axios";
+import store from "..";
+
+const CancelToken = axios.CancelToken;
+/**
+ * 上传封面图和附件
+ */
+export const venueUploadAPI = (data: any) => {
+  domShowFu("#UpAsyncLoding", true);
+
+  return http.post("cms/goods/upload", data, {
+    timeout: 50000,
+    // 显示进度条
+    onUploadProgress: (e: any) => {
+      const complete = (e.loaded / e.total) * 100 || 0;
+      progressDomFu(complete + "%");
+    },
+    // 取消上传
+    cancelToken: new CancelToken(function executor(c) {
+      store.dispatch({
+        type: "layout/closeUpFile",
+        payload: { fu: c, state: true },
+      });
+    }),
+  });
+};

houtai/src/store/reducer/A2News.ts

@@ -2,6 +2,7 @@ import { NewsTableType } from "@/types";
 
 // 初始化状态
 const initState = {
+  // 表格数据
   tableInfo: [
     {
       id: 1,
@@ -35,7 +36,7 @@ type NewsActionType = { type: "news/getList"; payload: NewsTableType[] };
 // 频道 reducer
 export default function newsReducer(state = initState, action: NewsActionType) {
   switch (action.type) {
-    // 所有图片点击预览查看大图
+    // 表格数据
     case "news/getList":
       return { ...state, tableInfo: action.payload };
     default:

houtai/src/store/reducer/A4Venue.ts

@@ -0,0 +1,43 @@
+import { VenueTableType } from "@/types";
+
+// 初始化状态
+const initState = {
+  // 表格数据
+  tableInfo: [
+    {
+      id: 1,
+      name:'名称1',
+      loc: "标题1",
+      txt: "正文666666",
+      time1: "2020-02-02 12:12",
+    },
+    {
+      id: 2,
+      name:'名称2',
+      loc: "标题2",
+      txt: "正文666666正文666666正文666666正文666666正文666666正文666666正文666666正文666666正文666666正文666666正文666666正文666666正文666666正文666666正文666666正文666666正文666666正文666666",
+      time1: "2020-02-02 12:12",
+    },
+    {
+      id: 3,
+      name:'名称3',
+      loc: "标题3",
+      txt: "正文666666",
+      time1: "2020-02-02 12:12",
+    },
+  ] as VenueTableType[],
+};
+
+// 定义 action 类型
+type VenueActionType = { type: "venue/getList"; payload: VenueTableType[] };
+
+// 频道 reducer
+export default function venueReducer(state = initState, action: VenueActionType) {
+  switch (action.type) {
+    // 表格数据
+    case "venue/getList":
+      return { ...state, tableInfo: action.payload };
+    default:
+      return state;
+  }
+}

houtai/src/store/reducer/index.ts

@@ -2,6 +2,7 @@
 import { combineReducers } from 'redux'
 import newsReducer from './A2News'
 import goodsReducer from './A3Goods'
+import venueReducer from './A4Venue'
 
 // 导入 登录 模块的 reducer
 import layoutReducer from './layout'
@@ -10,7 +11,8 @@ import layoutReducer from './layout'
 const rootReducer = combineReducers({
   layoutStore: layoutReducer,
   newsReducer:newsReducer,
-  goodsReducer:goodsReducer
+  goodsReducer:goodsReducer,
+  venueReducer:venueReducer
 })
 
 // 默认导出

houtai/src/types/api/A4Venue.d.ts

@@ -0,0 +1 @@
+export type VenueTableType =any

houtai/src/types/api/layot.d.ts

@@ -16,3 +16,9 @@ export type DictListTypeAPI = {
   type: "age" | "texture" 
   updateTime: null;
 };
+
+export type ImgListType = {
+  fileName: string;
+  filePath: string;
+  id: number;
+};

houtai/src/types/index.d.ts

@@ -1,3 +1,4 @@
 export * from './api/layot'
 export * from './api/A2News'
 export * from './api/A3Goods'
+export * from './api/A4Venue'