@aliretail/react-material-selector/es/tab/index.js

素材选择

import _Dialog from "@alifd/next/es/dialog";
import _Tab from "@alifd/next/es/tab";
import _Loading from "@alifd/next/es/loading";
import _Input from "@alifd/next/es/input";
import _Icon from "@alifd/next/es/icon";
import _extends from "@babel/runtime/helpers/extends";
import _Message from "@alifd/next/es/message";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import React, { useEffect, useState } from 'react';
import { Content, IconContent, VideoContent, Others } from '../content/index';
import axios from 'axios';
import SideBar from '../SideBar/index';
import { OssUploader } from '../oss-uploader/index';
import { NoClass } from '../no-class/index';
import { NoContent } from '../no-content/index';
import './index.scss'; // import SelectorTree from '../selectortree'
// import '../selectortree/index.scss'

export function TabChange(props) {
  var _useState = useState(''),
      inputValue = _useState[0],
      setInputValue = _useState[1];

  var _useState2 = useState({
    aa: true
  }),
      flag = _useState2[0],
      setFlag = _useState2[1];

  var _useState3 = useState({
    visible: false
  }),
      state = _useState3[0],
      setState = _useState3[1];

  var _useState4 = useState([]),
      treeData = _useState4[0],
      setTreeData = _useState4[1];

  var _useState5 = useState(''),
      checkedImgId = _useState5[0],
      setCheckedImgId = _useState5[1];

  var _useState6 = useState([]),
      uploadValue = _useState6[0],
      setUploadValue = _useState6[1];

  var _useState7 = useState([]),
      picArr = _useState7[0],
      setPicArr = _useState7[1];

  var _useState8 = useState(''),
      searchValue = _useState8[0],
      setSearchValue = _useState8[1];

  var _useState9 = useState(true),
      rendingFlag = _useState9[0],
      setRendingFlag = _useState9[1]; // 通过flag的改变来触发content的渲染


  var _useState10 = useState(true),
      fourTabFlag = _useState10[0],
      setFourTabFlag = _useState10[1]; // 当tab切换时通过flag的改变来进行内容渲染


  var _useState11 = useState(),
      tabValue = _useState11[0],
      setTabValue = _useState11[1];

  var _useState12 = useState([]),
      treeIconData = _useState12[0],
      setTreeIconData = _useState12[1];

  var _useState13 = useState([]),
      treeVideoData = _useState13[0],
      setTreeVideoData = _useState13[1];

  var _useState14 = useState([]),
      treeOthersData = _useState14[0],
      setTreeOthersData = _useState14[1];

  var _useState15 = useState([]),
      treeGifData = _useState15[0],
      setTreeGifData = _useState15[1];

  var _useState16 = useState(1),
      selectKey = _useState16[0],
      setSelectKey = _useState16[1];

  var _useState17 = useState(0),
      totalNum = _useState17[0],
      setTotalNum = _useState17[1];

  var _useState18 = useState(),
      noClassFlag = _useState18[0],
      setNoClassFlag = _useState18[1]; // 先让其显示，最后成功后在设置成false


  var _useState19 = useState(),
      noContentFlag = _useState19[0],
      setNoContentFlag = _useState19[1]; // 这个来让内容区域是否显示


  var _useState20 = useState(),
      activeId = _useState20[0],
      setActiveId = _useState20[1];

  var _useState21 = useState(true),
      loadingVisible = _useState21[0],
      setLoadingVisible = _useState21[1];

  var _useState22 = useState([]),
      openList = _useState22[0],
      setOpenList = _useState22[1]; // 将content里面的提到父组件


  var _useState23 = useState([]),
      picData = _useState23[0],
      setPicData = _useState23[1];

  var _useState24 = useState(0),
      totalData = _useState24[0],
      setTotalData = _useState24[1];

  var _useState25 = useState(1),
      newPage = _useState25[0],
      setNewPage = _useState25[1]; // 通过flag来决定是否展示其他的tab栏


  var _useState26 = useState({
    imgFlag: false,
    iconFlag: false,
    videoFlag: false,
    gifFlag: false,
    musicFlag: false,
    otherFlag: false
  }),
      tabFlag = _useState26[0],
      setTabFlag = _useState26[1];

  var newTabFlag = {
    imgFlag: false,
    iconFlag: false,
    videoFlag: false,
    gifFlag: false,
    musicFlag: false,
    otherFlag: false
  };

  var judgementFlag = function judgementFlag() {
    if (props.showTabs.length == 0) {
      return tabFlag;
    } else {
      var imgbool = props.showTabs.find(function (item) {
        return item == 'img';
      });
      var iconbool = props.showTabs.find(function (item) {
        return item == 'icon';
      });
      var videobool = props.showTabs.find(function (item) {
        return item == 'video';
      });
      var gifbool = props.showTabs.find(function (item) {
        return item == 'gif';
      });
      var musicbool = props.showTabs.find(function (item) {
        return item == 'music';
      });
      var otherbool = props.showTabs.find(function (item) {
        return item == 'other';
      });
      newTabFlag = {
        imgFlag: !imgbool,
        iconFlag: !iconbool,
        videoFlag: !videobool,
        musicFlag: !musicbool,
        gifFlag: !gifbool,
        otherFlag: !otherbool
      };
    }
  };

  var TabSelectKey = function TabSelectKey() {
    if (props.showTabs[0] == 'img') {
      return 1;
    } else if (props.showTabs[0] == 'icon') {
      return 2;
    } else if (props.showTabs[0] == 'video') {
      return 3;
    } else if (props.showTabs[0] == 'gif') {
      return 4;
    } else if (props.showTabs[0] == 'music') {
      return 5;
    } else if (props.showTabs[0] == 'other') {
      return 6;
    }
  };

  useEffect(function () {
    var key = TabSelectKey();
    setSelectKey(key);
    setTabValue(key.toString());
  }, []);
  useEffect(function () {
    judgementFlag();
    setTabFlag(newTabFlag);
  }, []); // 获取树形结构图的请求

  var axiosData = /*#__PURE__*/function () {
    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(tabValue) {
      var res, treeList, _treeList$, _treeList$2;

      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              delete axios.defaults.xsrfCookieName;
              delete axios.defaults.xsrfHeaderName; // axios.defaults.withCredentials = true;//恒安的oss做过改动不要这个也行了，商品的就取消吧上传不了

              if (tabValue) {
                _context.next = 4;
                break;
              }

              return _context.abrupt("return");

            case 4:
              _context.next = 6;
              return axios({
                method: 'post',
                // url: 'http://tny.dev.retailcloud.zacz.cn/crm/dubbo/api/materialDir/query',
                url: props.apis.dirQueryURL,
                data: {
                  apiContext: {
                    belongOrganizationId: '1'
                  },
                  type: tabValue // 这个来区分不同的内容，图片、视频还是图标

                }
              });

            case 6:
              res = _context.sent;

              if (!(res && res.data && res.data.success)) {
                _context.next = 29;
                break;
              }

              if (!(res.data.result && res.data.result.materialDirTreeAbilityInfoList)) {
                _context.next = 25;
                break;
              }

              _context.t0 = tabValue;
              _context.next = _context.t0 === '1' ? 12 : _context.t0 === '2' ? 14 : _context.t0 === '3' ? 16 : _context.t0 === '6' ? 18 : 20;
              break;

            case 12:
              setTreeData(res.data.result.materialDirTreeAbilityInfoList);
              return _context.abrupt("break", 20);

            case 14:
              setTreeIconData(res.data.result.materialDirTreeAbilityInfoList);
              return _context.abrupt("break", 20);

            case 16:
              setTreeVideoData(res.data.result.materialDirTreeAbilityInfoList);
              return _context.abrupt("break", 20);

            case 18:
              setTreeOthersData(res.data.result.materialDirTreeAbilityInfoList);
              return _context.abrupt("break", 20);

            case 20:
              if (!checkedImgId) {
                treeList = res.data.result.materialDirTreeAbilityInfoList;

                if (treeList[0] && treeList[0].children) {
                  setOpenList([treeList[0].id]);

                  if (treeList[0].children[0].children) {
                    setOpenList([treeList[0].id, treeList[0].children[0].id]);
                    setActiveId(treeList[0].children[0].children[0].id);
                    setSideBarIdFn(treeList[0].children[0].children[0].id); // setOldId(treeList[0].children[0].children[0].id)
                  } else {
                    setActiveId(treeList[0].children[0].id);
                    setSideBarIdFn(treeList[0].children[0].id);
                  }
                } else {
                  setActiveId((_treeList$ = treeList[0]) === null || _treeList$ === void 0 ? void 0 : _treeList$.id);
                  setSideBarIdFn((_treeList$2 = treeList[0]) === null || _treeList$2 === void 0 ? void 0 : _treeList$2.id);
                }
              } // 让noClass没有目录的隐藏,增加一个类名


              if (res.data.result.materialDirTreeAbilityInfoList.length > 0) {
                setNoClassFlag(true);
              } else {
                setNoClassFlag(false);
              }

              getTotal(res.data.result.materialDirTreeAbilityInfoList);
              _context.next = 26;
              break;

            case 25:
              setNoClassFlag(false);

            case 26:
              setLoadingVisible(false);
              _context.next = 30;
              break;

            case 29:
              if (!res.data.success) {
                // 让下面的内容区隐藏并显示无分类的加载
                setNoClassFlag(true);

                _Message.error(res.data.message);
              }

            case 30:
            case "end":
              return _context.stop();
          }
        }
      }, _callee);
    }));

    return function axiosData(_x) {
      return _ref.apply(this, arguments);
    };
  }();

  var getTotal = function getTotal(data) {
    var total = 0;
    data.forEach(function (item) {
      total += item.materialNumbers;
    });
    setTotalNum(total);
  };

  useEffect(function () {
    setLoadingVisible(true);
    axiosData(tabValue);
  }, [tabValue, rendingFlag]); // rendingFlag改变重新渲染树，达到目录的数值改变

  var onClick = function onClick() {
    setFlag({
      aa: !flag.aa
    });
  };

  var onOpen = function onOpen() {
    setState({
      visible: true
    });
  }; // 弹窗点击确认上传素材按钮


  var onOk = function onOk() {
    setState({
      visible: false
    });
  };

  var onClose = function onClose(reason) {
    setState({
      visible: false
    });
  }; // 点击上传弹出确认框


  var handleUpload = function handleUpload() {
    setState({
      visible: true
    });
  }; // 右下角按钮，点击确认


  var dataRequest = function dataRequest() {
    props.onComplete && props.onComplete(picArr);
    return picArr;
  };

  var TreeId = function TreeId(value) {
    setGetTreeId(value);
  }; // 搜索框按下回车键进行搜索事件


  var axiosInputData = /*#__PURE__*/function () {
    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
      var res;
      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
        while (1) {
          switch (_context2.prev = _context2.next) {
            case 0:
              delete axios.defaults.xsrfCookieName;
              delete axios.defaults.xsrfHeaderName;

              if (!(!tabValue || !checkedImgId)) {
                _context2.next = 4;
                break;
              }

              return _context2.abrupt("return");

            case 4:
              _context2.next = 6;
              return axios({
                method: 'post',
                // url: 'http://tny.dev.retailcloud.zacz.cn/crm/dubbo/api/material/search',
                url: props.apis.materialSearchURL,
                data: {
                  dirId: checkedImgId,
                  title: inputValue || '',
                  page: 1,
                  apiContext: {
                    belongOrganizationId: '1'
                  },
                  type: tabValue
                }
              });

            case 6:
              res = _context2.sent;

              if (res && res.data && res.data.success && res.data.result) {
                setPicData(res.data.result); // 飞鹤的是content，恒安的没有

                setTotalData(res.data.total); // 恒安的是total

                if (res.data.result.length > 0 || inputValue) {
                  setNoContentFlag(true);
                  setcontentPage(0);
                } else if (res.data.result.length == 0) {
                  setNoContentFlag(false);
                }
              } else if (res.data.success == false) {
                setNoContentFlag(false);

                _Message.error(res.data.errorCode);
              } else {
                _Message.error('此素材尚未上传');
              }

              setNewPage(1);

            case 9:
            case "end":
              return _context2.stop();
          }
        }
      }, _callee2);
    }));

    return function axiosInputData() {
      return _ref2.apply(this, arguments);
    };
  }();

  var searchContent = function searchContent() {
    setSearchValue(inputValue);
    axiosInputData();
  };

  var inputOnChange = function inputOnChange(v) {
    setInputValue(v);
  };

  var fourTabChange = function fourTabChange(a) {
    setCheckedImgId('');
    setFourTabFlag(!fourTabFlag);
    props.setResult([]); // setTabValue(a);
  }; // 点击取消按钮关闭弹窗


  var closeDialog = function closeDialog() {
    props.closeDia(false);
  };

  var onClickTab = function onClickTab(dddd) {
    setSelectKey(dddd);
    setTabValue(dddd);
  }; // 点击目录进行搜索


  var axiosCheckData = /*#__PURE__*/function () {
    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(id, title) {
      var res;
      return _regeneratorRuntime.wrap(function _callee3$(_context3) {
        while (1) {
          switch (_context3.prev = _context3.next) {
            case 0:
              delete axios.defaults.xsrfCookieName;
              delete axios.defaults.xsrfHeaderName;

              if (tabValue) {
                _context3.next = 4;
                break;
              }

              return _context3.abrupt("return");

            case 4:
              _context3.next = 6;
              return axios({
                method: 'post',
                // url: 'http://tny.dev.retailcloud.zacz.cn/crm/dubbo/api/material/search',
                url: props.apis.materialSearchURL,
                data: {
                  dirId: id,
                  title: title,
                  page: 1,
                  apiContext: {
                    belongOrganizationId: '1'
                  },
                  type: tabValue
                }
              });

            case 6:
              res = _context3.sent;

              if (res && res.data && res.data.success && res.data.result) {
                setPicData(res.data.result); // 飞鹤的是content，恒安的没有

                setTotalData(res.data.total); // 恒安的是total

                if (res.data.result.length > 0 || inputValue) {
                  setNoContentFlag(true);
                  setcontentPage(0);
                } else if (res.data.result.length == 0) {
                  setNoContentFlag(false);
                }
              } else if (res.data.success == false) {
                setNoContentFlag(false);

                _Message.error(res.data.errorCode);
              } else {
                _Message.error('此素材尚未上传');
              }

              setNewPage(1);

            case 9:
            case "end":
              return _context3.stop();
          }
        }
      }, _callee3);
    }));

    return function axiosCheckData(_x2, _x3) {
      return _ref3.apply(this, arguments);
    };
  }();

  var _useState27 = useState(),
      contentPage = _useState27[0],
      setcontentPage = _useState27[1];

  var setSideBarIdFn = function setSideBarIdFn(id) {
    setCheckedImgId(id); // 去掉这个之后tab切换默认高亮显示，但是每次上传的时候高亮显示会重新回到第一行。

    setSearchValue('');
    setInputValue('');
    setNewPage(1);
    axiosCheckData(id, ''); // 每次点击树节点之后，就重新将页码page重置为1,有默认选中，默认为1了，所以这里不能用
    // setcontentPage(1)
  }; // 这个是上传的请求方法
  // 每次上传成功执行这个方法


  var axiosLoadTreeData = /*#__PURE__*/function () {
    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(tabValue) {
      var res;
      return _regeneratorRuntime.wrap(function _callee4$(_context4) {
        while (1) {
          switch (_context4.prev = _context4.next) {
            case 0:
              delete axios.defaults.xsrfCookieName;
              delete axios.defaults.xsrfHeaderName;
              _context4.next = 4;
              return axios({
                method: 'post',
                url: props.apis.dirQueryURL,
                data: {
                  apiContext: {
                    belongOrganizationId: '1'
                  },
                  type: tabValue // 这个来区分不同的内容，图片、视频还是图标

                }
              });

            case 4:
              res = _context4.sent;

              if (!(res && res.data && res.data.success)) {
                _context4.next = 26;
                break;
              }

              if (!(res.data.result && res.data.result.materialDirTreeAbilityInfoList)) {
                _context4.next = 22;
                break;
              }

              _context4.t0 = tabValue;
              _context4.next = _context4.t0 === '1' ? 10 : _context4.t0 === '2' ? 12 : _context4.t0 === '3' ? 14 : _context4.t0 === '6' ? 16 : 18;
              break;

            case 10:
              setTreeData(res.data.result.materialDirTreeAbilityInfoList);
              return _context4.abrupt("break", 18);

            case 12:
              setTreeIconData(res.data.result.materialDirTreeAbilityInfoList);
              return _context4.abrupt("break", 18);

            case 14:
              setTreeVideoData(res.data.result.materialDirTreeAbilityInfoList);
              return _context4.abrupt("break", 18);

            case 16:
              setTreeOthersData(res.data.result.materialDirTreeAbilityInfoList);
              return _context4.abrupt("break", 18);

            case 18:
              // 让noClass没有目录的隐藏,增加一个类名
              if (res.data.result.materialDirTreeAbilityInfoList.length > 0) {
                setNoClassFlag(true);
              } else {
                setNoClassFlag(false);
              }

              getTotal(res.data.result.materialDirTreeAbilityInfoList);
              _context4.next = 23;
              break;

            case 22:
              setNoClassFlag(false);

            case 23:
              setLoadingVisible(false);
              _context4.next = 27;
              break;

            case 26:
              if (!res.data.success) {
                setNoClassFlag(true);

                _Message.error(res.data.message);
              }

            case 27:
            case "end":
              return _context4.stop();
          }
        }
      }, _callee4);
    }));

    return function axiosLoadTreeData(_x4) {
      return _ref4.apply(this, arguments);
    };
  }();

  var axiosLoadData = /*#__PURE__*/function () {
    var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
      var page, res;
      return _regeneratorRuntime.wrap(function _callee5$(_context5) {
        while (1) {
          switch (_context5.prev = _context5.next) {
            case 0:
              delete axios.defaults.xsrfCookieName;
              delete axios.defaults.xsrfHeaderName;
              page = contentPage === 1 ? contentPage : newPage;
              _context5.next = 5;
              return axios({
                method: 'post',
                // url: 'http://tny.dev.retailcloud.zacz.cn/crm/dubbo/api/material/search',
                url: props.apis.materialSearchURL,
                data: {
                  dirId: checkedImgId,
                  title: inputValue || '',
                  page: page,
                  apiContext: {
                    belongOrganizationId: '1'
                  },
                  type: tabValue
                }
              });

            case 5:
              res = _context5.sent;

              if (res && res.data && res.data.success && res.data.result) {
                setPicData(res.data.result); // 飞鹤的是content，恒安的没有

                setTotalData(res.data.total); // 恒安的是total

                if (res.data.result.length > 0 || inputValue) {
                  setNoContentFlag(true);
                  setcontentPage(0);
                } else if (res.data.result.length == 0) {
                  setNoContentFlag(false);
                }
              } else if (res.data.success == false) {
                setNoContentFlag(false);

                _Message.error(res.data.message);
              } else {
                _Message.error('此素材尚未上传');
              }

            case 7:
            case "end":
              return _context5.stop();
          }
        }
      }, _callee5);
    }));

    return function axiosLoadData() {
      return _ref5.apply(this, arguments);
    };
  }();

  var loadData = function loadData() {
    axiosLoadTreeData(tabValue);
    axiosLoadData();
  }; // 上传按钮权限控制


  var isShowUploadBtn = function isShowUploadBtn(type) {
    var data = {
      img: treeData || [],
      icon: treeIconData || [],
      video: treeVideoData || [],
      other: treeOthersData || []
    }[type];
    var isShow = true;

    if (checkedImgId && treeData) {
      var _data$filter$;

      // 1:开，-1:运营端关 -2：商家端关
      isShow = !['-1', '-2'].includes(data === null || data === void 0 ? void 0 : (_data$filter$ = data.filter(function (v) {
        return v.id === checkedImgId;
      })[0]) === null || _data$filter$ === void 0 ? void 0 : _data$filter$.enableDirUpload);
    }

    return isShow;
  };

  return /*#__PURE__*/React.createElement("div", {
    className: "ms-tab-wrap"
  }, /*#__PURE__*/React.createElement(_Tab, {
    style: {
      padding: '0 10px 0 10px'
    },
    onChange: fourTabChange,
    activeKey: selectKey,
    onClick: onClickTab,
    unmountInactiveTabs: true
  }, tabFlag.imgFlag || /*#__PURE__*/React.createElement(_Tab.Item, {
    title: "\u56FE\u7247",
    key: "1",
    style: {
      marginRight: '8px'
    }
  }, /*#__PURE__*/React.createElement(_Loading, {
    visible: loadingVisible
  }, noClassFlag ? /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex'
    },
    className: "ms_tab_content"
  }, /*#__PURE__*/React.createElement("div", {
    className: "tab-content-sidebar"
  }, /*#__PURE__*/React.createElement(SideBar, {
    setcontentPage: setcontentPage,
    treeTotal: totalNum,
    activeId: activeId,
    setActiveId: setActiveId // 选中叶子节点的name和id
    // setTitleName={setTitleName}
    ,
    setSideBarIdFn: setSideBarIdFn // 数据源
    ,
    sidebarData: treeData,
    openList: openList,
    setOpenList: setOpenList
  })), /*#__PURE__*/React.createElement("div", {
    className: "tab_content_right"
  }, /*#__PURE__*/React.createElement("div", {
    className: "tab_content_rightContent"
  }, isShowUploadBtn('img') && /*#__PURE__*/React.createElement(OssUploader, _extends({}, props, {
    treeId: checkedImgId,
    rendingFlag: rendingFlag,
    changeFlag: setRendingFlag,
    treeIdTwo: treeData,
    tabTypeValue: tabValue // 下面的都是请求接口要用的
    ,
    loadData: loadData
  })), /*#__PURE__*/React.createElement(_Input, {
    innerBefore: /*#__PURE__*/React.createElement(_Icon, {
      type: "search",
      style: {
        color: '#929DA7',
        marginLeft: '14px'
      }
    }),
    placeholder: "\u540D\u79F0",
    value: inputValue,
    "aria-label": "input with config of innerBefore",
    onChange: inputOnChange,
    style: {
      width: '300px'
    },
    onPressEnter: searchContent,
    hasClear: true
  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Content, _extends({
    picData: picData,
    setPicData: setPicData,
    totalData: totalData,
    setTotalData: setTotalData,
    newPage: newPage,
    setNewPage: setNewPage,
    setcontentPage: setcontentPage,
    contentPage: contentPage,
    contentFlag: setNoContentFlag // treeIdTwo={treeData}
    ,
    treeId: checkedImgId,
    setSearchValue: setSearchValue,
    setInputValue: setInputValue,
    inputValue: searchValue,
    getOnclickValue: setUploadValue,
    getPicData: setPicArr
  }, props, {
    uploadChangeFlag: rendingFlag // changeTabFlag={fourTabFlag}
    ,
    tabTypeValue: tabValue
  }))), /*#__PURE__*/React.createElement("div", {
    className: "tab_content_rightContent_blank",
    style: {
      display: picData.length == 0 && searchValue != '' ? '' : 'none'
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "search_blank"
  }), /*#__PURE__*/React.createElement("div", {
    className: "search_blank_word"
  }, "\u6682\u65E0\u6570\u636E"))), noContentFlag || /*#__PURE__*/React.createElement(NoContent, _extends({}, props, {
    contentFlag: setNoContentFlag,
    treeId: checkedImgId,
    changeFlag: setRendingFlag,
    treeIdTwo: treeData,
    tabTypeValue: tabValue,
    loadData: loadData
  }))) : /*#__PURE__*/React.createElement(NoClass, props))), tabFlag.iconFlag || /*#__PURE__*/React.createElement(_Tab.Item, {
    title: "\u56FE\u6807",
    key: "2",
    style: {
      marginRight: '8px'
    }
  }, /*#__PURE__*/React.createElement(_Loading, {
    visible: loadingVisible
  }, noClassFlag == true ? /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex'
    },
    className: "ms_tab_content"
  }, /*#__PURE__*/React.createElement("div", {
    className: "tab-content-sidebar"
  }, /*#__PURE__*/React.createElement(SideBar, {
    openList: openList,
    setOpenList: setOpenList,
    setcontentPage: setcontentPage,
    treeTotal: totalNum,
    activeId: activeId,
    setActiveId: setActiveId // 选中叶子节点的name和id
    // setTitleName={setTitleName}
    ,
    setSideBarIdFn: setSideBarIdFn // 数据源
    ,
    sidebarData: treeIconData
  })), /*#__PURE__*/React.createElement("div", {
    className: "tab_content_right"
  }, /*#__PURE__*/React.createElement("div", {
    className: "tab_content_rightContent"
  }, isShowUploadBtn('icon') && /*#__PURE__*/React.createElement(OssUploader, _extends({}, props, {
    treeId: checkedImgId,
    changeFlag: setRendingFlag,
    rendingFlag: rendingFlag,
    treeIdTwo: treeIconData,
    tabTypeValue: tabValue // 下面的都是请求接口要用的
    ,
    loadData: loadData
  })), /*#__PURE__*/React.createElement(_Input, {
    innerBefore: /*#__PURE__*/React.createElement(_Icon, {
      type: "search",
      style: {
        color: '#929DA7',
        marginLeft: '14px'
      }
    }),
    placeholder: "\u540D\u79F0",
    value: inputValue // value={}
    ,
    "aria-label": "input with config of innerBefore",
    onChange: inputOnChange,
    style: {
      width: '300px'
    },
    onPressEnter: searchContent,
    hasClear: true // onBlur={inputOnblur}

  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(IconContent, _extends({
    picData: picData,
    setPicData: setPicData,
    totalData: totalData,
    setTotalData: setTotalData,
    newPage: newPage,
    setNewPage: setNewPage,
    setcontentPage: setcontentPage,
    contentPage: contentPage,
    contentFlag: setNoContentFlag // treeIdTwo={treeIconData}
    // 这个代码是用来将content内容区默认值渲染的
    ,
    treeId: checkedImgId,
    setSearchValue: setSearchValue,
    setInputValue: setInputValue,
    inputValue: searchValue,
    getOnclickValue: setUploadValue,
    getPicData: setPicArr
  }, props, {
    uploadChangeFlag: rendingFlag,
    changeTabFlag: fourTabFlag,
    tabTypeValue: tabValue
  }))), /*#__PURE__*/React.createElement("div", {
    className: "tab_content_rightContent_blank",
    style: {
      display: picData.length == 0 && searchValue != '' ? '' : 'none'
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "search_blank"
  }), /*#__PURE__*/React.createElement("div", {
    className: "search_blank_word"
  }, "\u6682\u65E0\u6570\u636E"))), noContentFlag || /*#__PURE__*/React.createElement(NoContent, _extends({}, props, {
    contentFlag: setNoContentFlag,
    treeId: checkedImgId,
    changeFlag: setRendingFlag,
    treeIdTwo: treeData,
    tabTypeValue: tabValue // 下面的都是请求接口要用的
    ,
    loadData: loadData
  }))) : /*#__PURE__*/React.createElement(NoClass, props))), tabFlag.videoFlag || /*#__PURE__*/React.createElement(_Tab.Item, {
    title: "\u89C6\u9891",
    key: "3",
    style: {
      marginRight: '8px'
    }
  }, /*#__PURE__*/React.createElement(_Loading, {
    visible: loadingVisible
  }, noClassFlag ? /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex'
    },
    className: "ms_tab_content"
  }, /*#__PURE__*/React.createElement("div", {
    className: "tab-content-sidebar"
  }, /*#__PURE__*/React.createElement(SideBar, {
    openList: openList,
    setOpenList: setOpenList,
    setcontentPage: setcontentPage,
    treeTotal: totalNum,
    activeId: activeId,
    setActiveId: setActiveId // 选中叶子节点的name和id
    // setTitleName={setTitleName}
    ,
    setSideBarIdFn: setSideBarIdFn // 数据源
    ,
    sidebarData: treeVideoData
  })), /*#__PURE__*/React.createElement("div", {
    className: "tab_content_right"
  }, /*#__PURE__*/React.createElement("div", {
    className: "tab_content_rightContent tab_video"
  }, isShowUploadBtn('video') && /*#__PURE__*/React.createElement(OssUploader, _extends({}, props, {
    treeId: checkedImgId,
    changeFlag: setRendingFlag,
    treeIdTwo: treeVideoData,
    tabTypeValue: tabValue // 下面的都是请求接口要用的
    ,
    loadData: loadData
  })), /*#__PURE__*/React.createElement(_Input, {
    innerBefore: /*#__PURE__*/React.createElement(_Icon, {
      type: "search",
      style: {
        color: '#929DA7',
        marginLeft: '14px'
      }
    }),
    placeholder: "\u540D\u79F0",
    value: inputValue // value={}
    ,
    "aria-label": "input with config of innerBefore",
    onChange: inputOnChange,
    style: {
      width: '300px'
    },
    onPressEnter: searchContent,
    hasClear: true // onBlur={inputOnblur}

  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(VideoContent, _extends({
    picData: picData,
    setPicData: setPicData,
    totalData: totalData,
    setTotalData: setTotalData,
    newPage: newPage,
    setNewPage: setNewPage,
    setcontentPage: setcontentPage,
    contentPage: contentPage,
    contentFlag: setNoContentFlag // treeIdTwo={treeVideoData}
    ,
    treeId: checkedImgId,
    setSearchValue: setSearchValue,
    setInputValue: setInputValue,
    inputValue: searchValue,
    getOnclickValue: setUploadValue,
    getPicData: setPicArr
  }, props, {
    uploadChangeFlag: rendingFlag,
    changeTabFlag: fourTabFlag,
    tabTypeValue: tabValue
  }))), /*#__PURE__*/React.createElement("div", {
    className: "tab_content_rightContent_blank",
    style: {
      display: picData.length == 0 && searchValue != '' ? '' : 'none'
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "search_blank"
  }), /*#__PURE__*/React.createElement("div", {
    className: "search_blank_word"
  }, "\u6682\u65E0\u6570\u636E"))), noContentFlag || /*#__PURE__*/React.createElement(NoContent, _extends({}, props, {
    contentFlag: setNoContentFlag,
    treeId: checkedImgId,
    changeFlag: setRendingFlag,
    treeIdTwo: treeData,
    tabTypeValue: tabValue // 下面的都是请求接口要用的
    ,
    loadData: loadData
  }))) : /*#__PURE__*/React.createElement(NoClass, props))), tabFlag.otherFlag || /*#__PURE__*/React.createElement(_Tab.Item, {
    title: "\u5176\u4ED6",
    key: "6"
  }, /*#__PURE__*/React.createElement(_Loading, {
    visible: loadingVisible
  }, noClassFlag ? /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex'
    },
    className: "ms_tab_content"
  }, /*#__PURE__*/React.createElement("div", {
    className: "tab-content-sidebar"
  }, /*#__PURE__*/React.createElement(SideBar, {
    openList: openList,
    setOpenList: setOpenList,
    setcontentPage: setcontentPage,
    treeTotal: totalNum,
    activeId: activeId,
    setActiveId: setActiveId // 选中叶子节点的name和id
    // setTitleName={setTitleName}
    ,
    setSideBarIdFn: setSideBarIdFn // 数据源
    ,
    sidebarData: treeOthersData
  })), /*#__PURE__*/React.createElement("div", {
    className: "tab_content_right"
  }, /*#__PURE__*/React.createElement("div", {
    className: "tab_content_rightContent"
  }, isShowUploadBtn('other') && /*#__PURE__*/React.createElement(OssUploader, _extends({}, props, {
    treeId: checkedImgId,
    changeFlag: setRendingFlag,
    treeIdTwo: treeOthersData,
    tabTypeValue: tabValue // 下面的都是请求接口要用的
    ,
    loadData: loadData
  })), /*#__PURE__*/React.createElement(_Input, {
    innerBefore: /*#__PURE__*/React.createElement(_Icon, {
      type: "search",
      style: {
        color: '#929DA7',
        marginLeft: '14px'
      }
    }),
    placeholder: "\u540D\u79F0",
    value: inputValue // value={}
    ,
    "aria-label": "input with config of innerBefore",
    onChange: inputOnChange,
    style: {
      width: '300px'
    },
    onPressEnter: searchContent,
    hasClear: true // onBlur={inputOnblur}

  })), /*#__PURE__*/React.createElement("div", {
    className: "tab_content_rightTable"
  }, /*#__PURE__*/React.createElement(Others, _extends({
    picData: picData,
    setPicData: setPicData,
    totalData: totalData,
    setTotalData: setTotalData,
    newPage: newPage,
    setNewPage: setNewPage,
    setcontentPage: setcontentPage,
    contentPage: contentPage,
    contentFlag: setNoContentFlag // treeIdTwo={treeOthersData}
    ,
    treeId: checkedImgId,
    setSearchValue: setSearchValue,
    setInputValue: setInputValue,
    inputValue: searchValue,
    getOnclickValue: setUploadValue,
    getPicData: setPicArr
  }, props, {
    uploadChangeFlag: rendingFlag,
    changeTabFlag: fourTabFlag,
    tabTypeValue: tabValue
  }))), /*#__PURE__*/React.createElement("div", {
    className: "tab_content_rightContent_blank",
    style: {
      display: picData.length == 0 && searchValue != '' ? '' : 'none'
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "search_blank"
  }), /*#__PURE__*/React.createElement("div", {
    className: "search_blank_word"
  }, "\u6682\u65E0\u6570\u636E"))), noContentFlag || /*#__PURE__*/React.createElement(NoContent, _extends({}, props, {
    contentFlag: setNoContentFlag,
    treeId: checkedImgId,
    changeFlag: setRendingFlag,
    treeIdTwo: treeData,
    tabTypeValue: tabValue // 下面的都是请求接口要用的
    ,
    loadData: loadData
  }))) : /*#__PURE__*/React.createElement(NoClass, props)))), /*#__PURE__*/React.createElement(_Dialog, {
    title: "  ",
    visible: state.visible,
    onCancel: onClose,
    onClose: onClose,
    onOk: onOk,
    className: "deleteDialog"
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      alignContent: 'center'
    }
  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(_Icon, {
    type: "prompt"
  })), /*#__PURE__*/React.createElement("span", {
    className: "deleteDialogMaterial"
  }, "\u786E\u5B9A\u4E0A\u4F20\u6240\u9009\u5546\u54C1\u4E48"))));
}